// src/components/docs/libraries/LibrariesDesignSystemPage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { CodeBlock, InstallCommand } from "@contractspec/lib.design-system";
import { jsx, jsxs } from "react/jsx-runtime";
function LibrariesDesignSystemPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "@contractspec/lib.design-system"
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground",
            children: [
              "High-level design system components, patterns, and layouts for LSSM applications. Built on top of ",
              /* @__PURE__ */ jsx("code", {
                children: "@contractspec/lib.ui-kit"
              }),
              "."
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Installation"
          }),
          /* @__PURE__ */ jsx(InstallCommand, {
            package: "@contractspec/lib.design-system"
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "What It Provides"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Composite Components"
                  }),
                  ": Molecules and Organisms that solve common UI problems"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Layouts"
                  }),
                  ": Ready-to-use page structures for dashboards, marketing sites, and lists"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Data Views"
                  }),
                  ": Standardized renderers for lists, tables, and detail views"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Forms"
                  }),
                  ": Zod-integrated form layouts and components"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Code Display"
                  }),
                  ": Syntax-highlighted code blocks with package manager tabs"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Platform Utilities"
                  }),
                  ": Hooks for responsive and adaptive design"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Legal Templates"
                  }),
                  ": Compliant templates for Terms, Privacy, and GDPR"
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Example: App Layout"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "tsx",
            code: `import { AppLayout } from '@contractspec/lib.design-system';
import { AppSidebar } from '@contractspec/lib.design-system';

export function Layout({ children }) {
  return (
    <AppLayout sidebar={<AppSidebar />}>
      {children}
    </AppLayout>
  );
}`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Example: Zod Form"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "tsx",
            code: `import { ZodForm } from '@contractspec/lib.design-system';
import * as z from "zod";

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
});

export function SignupForm() {
  return (
    <ZodForm
      schema={schema}
      onSubmit={(data) => console.log(data)}
      submitLabel="Submit"
    />
  );
}`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Example: Code Block with Package Manager Tabs"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "tsx",
            code: `import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';

// For installation commands with package manager tabs
<InstallCommand package="my-package" />
<InstallCommand package={["react", "react-dom"]} dev />

// For code examples with syntax highlighting
<CodeBlock
  language="typescript"
  code={\`const hello = "world";\`}
  filename="example.ts"
/>`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Key Exports"
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "grid gap-4 md:grid-cols-2",
            children: [
              /* @__PURE__ */ jsxs("div", {
                className: "card-subtle p-4",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "mb-2 font-semibold",
                    children: "Organisms"
                  }),
                  /* @__PURE__ */ jsxs("ul", {
                    className: "text-muted-foreground space-y-1 text-sm",
                    children: [
                      /* @__PURE__ */ jsx("li", {
                        children: "AppLayout, AppHeader, AppSidebar"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "MarketingLayout, HeroSection"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "ListCardPage, ListTablePage"
                      })
                    ]
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "card-subtle p-4",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "mb-2 font-semibold",
                    children: "Data & Forms"
                  }),
                  /* @__PURE__ */ jsxs("ul", {
                    className: "text-muted-foreground space-y-1 text-sm",
                    children: [
                      /* @__PURE__ */ jsx("li", {
                        children: "DataViewRenderer"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "ZodForm"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "FormLayout, FormDialog"
                      })
                    ]
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "card-subtle p-4",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "mb-2 font-semibold",
                    children: "Code Display"
                  }),
                  /* @__PURE__ */ jsxs("ul", {
                    className: "text-muted-foreground space-y-1 text-sm",
                    children: [
                      /* @__PURE__ */ jsx("li", {
                        children: "CodeBlock (syntax highlighting)"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "CommandTabs (package manager tabs)"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "InstallCommand (convenience wrapper)"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "CopyButton"
                      })
                    ]
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "card-subtle p-4",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "mb-2 font-semibold",
                    children: "Providers"
                  }),
                  /* @__PURE__ */ jsx("ul", {
                    className: "text-muted-foreground space-y-1 text-sm",
                    children: /* @__PURE__ */ jsx("li", {
                      children: "PackageManagerProvider"
                    })
                  })
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/libraries/ui-kit",
            className: "btn-ghost",
            children: "Previous: UI Kit"
          }),
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/libraries/accessibility",
            className: "btn-primary",
            children: [
              "Next: Accessibility ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  LibrariesDesignSystemPage
};
