// @bun
// src/components/docs/libraries/LibrariesUIKitPage.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 LibrariesUIKitPage() {
  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.ui-kit"
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground",
            children: [
              "Universal UI components for React Native and Web, built on top of",
              /* @__PURE__ */ jsx("code", {
                children: "nativewind"
              }),
              " and ",
              /* @__PURE__ */ jsx("code", {
                children: "@rn-primitives"
              }),
              "."
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Installation"
          }),
          /* @__PURE__ */ jsx(InstallCommand, {
            package: "@contractspec/lib.ui-kit"
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Key Features"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Universal"
                  }),
                  ": Components render natively on iOS/Android and as standard HTML on web"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Styled with NativeWind"
                  }),
                  ": Uses Tailwind CSS classes for styling"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Accessible"
                  }),
                  ": Leverages ",
                  /* @__PURE__ */ jsx("code", {
                    children: "@rn-primitives"
                  }),
                  " ",
                  "(Radix UI for Native)"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Atomic Design"
                  }),
                  ": Exports atoms, molecules, and organisms"
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Example Usage"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "tsx",
            code: `import { Button } from '@contractspec/lib.ui-kit/ui/button';
import { Text } from '@contractspec/lib.ui-kit/ui/text';
import { Card, CardHeader, CardTitle, CardContent } from '@contractspec/lib.ui-kit/ui/card';

export function MyComponent() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent className="gap-4">
        <Text>This works on Web and Native.</Text>
        <Button onPress={() => console.log('Clicked!')}>
          Click me
        </Button>
      </CardContent>
    </Card>
  );
}`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Core Components"
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "grid gap-4 md:grid-cols-3",
            children: [
              /* @__PURE__ */ jsxs("div", {
                className: "card-subtle p-4",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "mb-2 font-semibold",
                    children: "Form Controls"
                  }),
                  /* @__PURE__ */ jsxs("ul", {
                    className: "text-muted-foreground space-y-1 text-sm",
                    children: [
                      /* @__PURE__ */ jsx("li", {
                        children: "Button"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "Input"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "Checkbox"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "Switch"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "Select"
                      })
                    ]
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "card-subtle p-4",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "mb-2 font-semibold",
                    children: "Layout"
                  }),
                  /* @__PURE__ */ jsxs("ul", {
                    className: "text-muted-foreground space-y-1 text-sm",
                    children: [
                      /* @__PURE__ */ jsx("li", {
                        children: "Card"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "Stack"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "Separator"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "Sheet"
                      })
                    ]
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "card-subtle p-4",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "mb-2 font-semibold",
                    children: "Feedback"
                  }),
                  /* @__PURE__ */ jsxs("ul", {
                    className: "text-muted-foreground space-y-1 text-sm",
                    children: [
                      /* @__PURE__ */ jsx("li", {
                        children: "Alert"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "Skeleton"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "Progress"
                      }),
                      /* @__PURE__ */ jsx("li", {
                        children: "Tooltip"
                      })
                    ]
                  })
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/libraries/schema",
            className: "btn-ghost",
            children: "Previous: Schema"
          }),
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/libraries/design-system",
            className: "btn-primary",
            children: [
              "Next: Design System ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  LibrariesUIKitPage
};
