@krizaka/ui 2.0.0-beta.2 → 2.0.0-beta.4

package/registry/dropdown-menu.json

@@ -0,0 +1,63 @@
+{
+  "name": "dropdown-menu",
+  "type": "primitive",
+  "description": "`DropdownMenu.*`, `menu` (the slots). Client (\"use client\").",
+  "files": [
+    {
+      "path": "dropdown-menu/dropdown-menu.tsx",
+      "content": "// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The danger token is too light for small text on a light surface: the label stays a text role, the icon and the\n    // highlight carry the danger.\n    tone: { default: {}, danger: { item: \"data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n};\n"
+    },
+    {
+      "path": "dropdown-menu/index.ts",
+      "content": "/** @krizaka/ui/dropdown-menu — `DropdownMenu.*`, `menu` (the slots). Client (\"use client\"). */\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  type DropdownMenuContentProps,\n  DropdownMenuItem,\n  type DropdownMenuItemProps,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  menu,\n} from \"./dropdown-menu\";\n"
+    },
+    {
+      "path": "floating.ts",
+      "content": "// The one surface of everything that floats next to its trigger (popover, menu, tooltip): a raised surface, a border,\n// the large shadow and the `kz-pop` entrance from the side Radix measured (`--radix-*-transform-origin`).\nexport const floating =\n  \"kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden\";\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "demo": {
+    "path": "demos/dropdown-menu.tsx",
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { DropdownMenu } from \"@krizaka/ui/dropdown-menu\";\n\nconst icon = (d: string) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <path d={d} />\n  </svg>\n);\n\nexport default function DropdownMenuDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <DropdownMenu.Root defaultOpen={defaultOpen} modal={false}>\n      <DropdownMenu.Trigger asChild>\n        <Button variant=\"outline\">Actions</Button>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"center\">\n        <DropdownMenu.Label>Video</DropdownMenu.Label>\n        <DropdownMenu.Item>{icon(\"M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\")}Edit</DropdownMenu.Item>\n        <DropdownMenu.Item>{icon(\"M4 12v8h16v-8M16 6l-4-4-4 4M12 2v13\")}Share</DropdownMenu.Item>\n        <DropdownMenu.Item disabled>{icon(\"M12 3v12M7 10l5 5 5-5M5 21h14\")}Download</DropdownMenu.Item>\n        <DropdownMenu.CheckboxItem checked>Pinned to the profile</DropdownMenu.CheckboxItem>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item tone=\"danger\">{icon(\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\")}Delete</DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "DropdownMenuContent",
+      "description": "",
+      "props": [
+        {
+          "name": "container",
+          "type": "HTMLElement | null",
+          "default": null,
+          "description": "The element the portal renders into (default: document.body).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "DropdownMenuItem",
+      "description": "An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes).",
+      "props": [
+        {
+          "name": "tone",
+          "type": "\"danger\" | \"default\"",
+          "default": null,
+          "description": "`danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "DropdownMenuCheckboxItem",
+      "description": "A toggled option: `checked` + `onCheckedChange`.",
+      "props": []
+    }
+  ]
+}

package/registry/empty-state.json

@@ -0,0 +1,59 @@
+{
+  "name": "empty-state",
+  "type": "primitive",
+  "description": "`EmptyState`. Server-safe.",
+  "files": [
+    {
+      "path": "empty-state/empty-state.tsx",
+      "content": "// Server-safe. What a list, a search or a panel says when it has nothing to show — every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const emptyState = tv({\n  slots: {\n    root: \"flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border-default px-6 py-10 text-center\",\n    icon: \"flex h-12 w-12 items-center justify-center rounded-full bg-surface-2 text-fg-secondary [&>svg]:h-6 [&>svg]:w-6\",\n    title: \"text-sm font-semibold text-fg\",\n    description: \"max-w-sm text-sm text-fg-secondary\",\n    action: \"mt-1 flex flex-wrap items-center justify-center gap-2\",\n  },\n});\nconst s = emptyState();\n\nexport type EmptyStateProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** A decorative icon (hidden from assistive technology). */\n  icon?: React.ReactNode;\n  /** What is empty, in a few words (\"No videos yet\"). */\n  title: React.ReactNode;\n  /** Why, or what will fill it. */\n  description?: React.ReactNode;\n  /** What to do next: a Button, a link. */\n  action?: React.ReactNode;\n};\n\nexport function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps) {\n  return (\n    <div role=\"status\" className={s.root({ className })} {...props}>\n      {icon && (\n        <div aria-hidden className={s.icon()}>\n          {icon}\n        </div>\n      )}\n      <p className={s.title()}>{title}</p>\n      {description && <p className={s.description()}>{description}</p>}\n      {action && <div className={s.action()}>{action}</div>}\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "empty-state/index.ts",
+      "content": "/** @krizaka/ui/empty-state — `EmptyState`. Server-safe. */\nexport { EmptyState, emptyState, type EmptyStateProps } from \"./empty-state\";\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "demos/empty-state.tsx",
+    "content": "import { EmptyState } from \"@krizaka/ui/empty-state\";\n\nconst ICON = (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"m10 9 5 3-5 3z\" />\n  </svg>\n);\n\nexport default function EmptyStateDemo() {\n  return <EmptyState icon={ICON} title=\"No videos yet\" description=\"The videos you publish appear here.\" />;\n}\n"
+  },
+  "props": [
+    {
+      "component": "EmptyState",
+      "description": "",
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What is empty, in a few words (\"No videos yet\").",
+          "required": true
+        },
+        {
+          "name": "action",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What to do next: a Button, a link.",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Why, or what will fill it.",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A decorative icon (hidden from assistive technology).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/field.json

@@ -0,0 +1,66 @@
+{
+  "name": "field",
+  "type": "primitive",
+  "description": "`Field.Root/Label/Hint/Error`, `Input`, `Textarea`, `Select`. Server-safe.",
+  "files": [
+    {
+      "path": "field/field.tsx",
+      "content": "// Server-safe. The label ↔ control wiring is HTML (htmlFor / id, aria-describedby): no context.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\n\nexport const field = tv({\n  slots: {\n    root: \"flex flex-col gap-1.5\",\n    label: \"text-xs font-semibold text-fg-secondary\",\n    control:\n      \"flex h-11 w-full rounded-lg border border-border-default bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted \" +\n      \"transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30\",\n    hint: \"text-xs text-fg-secondary\",\n    // The danger token is too light for small text on a light surface: the message is a text role, the dot says danger.\n    error: \"flex items-center gap-1.5 text-xs font-medium text-fg before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger\",\n    selectWrap: \"relative flex w-full\",\n    chevron: \"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-secondary\",\n  },\n});\nconst s = field();\n\nexport const Field = {\n  Root: ({ className, ...props }: React.ComponentProps<\"div\">) => <div className={s.root({ className })} {...props} />,\n  Label: ({ className, ...props }: React.ComponentProps<\"label\">) => <label className={s.label({ className })} {...props} />,\n  Hint: ({ className, ...props }: React.ComponentProps<\"p\">) => <p className={s.hint({ className })} {...props} />,\n  Error: ({ className, ...props }: React.ComponentProps<\"p\">) => <p role=\"alert\" className={s.error({ className })} {...props} />,\n};\n\ntype ControlProps = {\n  /** Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */\n  invalid?: boolean;\n};\n\nconst invalidProps = (invalid?: boolean) => (invalid ? { \"aria-invalid\": true as const, \"data-invalid\": \"\" } : {});\n\nexport function Input({ invalid, className, ...props }: React.ComponentProps<\"input\"> & ControlProps) {\n  return <input {...invalidProps(invalid)} className={s.control({ className })} {...props} />;\n}\n\nexport function Textarea({ invalid, className, ...props }: React.ComponentProps<\"textarea\"> & ControlProps) {\n  return <textarea {...invalidProps(invalid)} className={s.control({ className: cn(\"h-auto min-h-24 py-2\", className) })} {...props} />;\n}\n\n/** A native <select>, styled like the other controls (the platform's menu: accessible and right on phones). */\nexport function Select({ invalid, className, ...props }: React.ComponentProps<\"select\"> & ControlProps) {\n  return (\n    <span className={s.selectWrap()}>\n      <select {...invalidProps(invalid)} className={s.control({ className: cn(\"appearance-none pr-9\", className) })} {...props} />\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden className={s.chevron()}>\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </span>\n  );\n}\n"
+    },
+    {
+      "path": "field/index.ts",
+      "content": "/** @krizaka/ui/field — `Field.Root/Label/Hint/Error`, `Input`, `Textarea`, `Select`. Server-safe. */\nexport { Field, field, Input, Select, Textarea } from \"./field\";\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "demo": {
+    "path": "demos/field.tsx",
+    "content": "import { Field, Input } from \"@krizaka/ui/field\";\n\nexport default function FieldDemo() {\n  return (\n    <Field.Root>\n      <Field.Label htmlFor=\"email\">Email</Field.Label>\n      <Input id=\"email\" type=\"email\" aria-describedby=\"email-hint\" placeholder=\"you@example.com\" />\n      <Field.Hint id=\"email-hint\">We never share it.</Field.Hint>\n    </Field.Root>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "Input",
+      "description": "",
+      "props": [
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "default": null,
+          "description": "Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Select",
+      "description": "A native <select>, styled like the other controls (the platform's menu: accessible and right on phones).",
+      "props": [
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "default": null,
+          "description": "Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Textarea",
+      "description": "",
+      "props": [
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "default": null,
+          "description": "Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/index.json

@@ -0,0 +1,320 @@
+{
+  "name": "@krizaka/ui",
+  "version": "2.0.0-beta.4",
+  "items": [
+    {
+      "name": "alert",
+      "type": "primitive",
+      "description": "`Alert`, `alertVariants`. Server-safe.",
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "avatar",
+      "type": "primitive",
+      "description": "`Avatar`, `Avatar.Group`. Client (\"use client\").",
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "badge",
+      "type": "primitive",
+      "description": "`Badge`, `badgeVariants`. Server-safe.",
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "button",
+      "type": "primitive",
+      "description": "`Button`, `IconButton`, `buttonVariants`. Server-safe.",
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "card",
+      "type": "primitive",
+      "description": "`Card.*`, `card` (the slots). Server-safe.",
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": [
+        "cn"
+      ]
+    },
+    {
+      "name": "checkbox",
+      "type": "primitive",
+      "description": "`Checkbox` (checked · unchecked · indeterminate), `checkbox` (the slots). Client (\"use client\").",
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "chip",
+      "type": "primitive",
+      "description": "`Chip` (selectable, removable), `Chip.Group` (single · multiple), `chip` (the slots). Client (\"use client\").",
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "cn",
+      "type": "primitive",
+      "description": "Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it. tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer): hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean install of the packed package.",
+      "dependencies": [
+        "clsx@^2.1.1",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "command",
+      "type": "primitive",
+      "description": "`Command.*` (cmdk) and `CommandDialog`, `command` (the slots). Client (\"use client\").",
+      "dependencies": [
+        "cmdk@^1.1.1",
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": [
+        "cn",
+        "dialog"
+      ]
+    },
+    {
+      "name": "confirm-button",
+      "type": "primitive",
+      "description": "`ConfirmButton` (two steps: arm, then confirm). Client (\"use client\").",
+      "dependencies": [
+        "radix-ui@^1.7.0"
+      ],
+      "registryDependencies": [
+        "button",
+        "cn"
+      ]
+    },
+    {
+      "name": "countdown",
+      "type": "primitive",
+      "description": "`Countdown`, `useCountdown`, `splitDuration`. Client (\"use client\").",
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "dialog",
+      "type": "primitive",
+      "description": "`Dialog.*`, `Sheet`, `AlertDialog`, `dialog` (the slots). Client (\"use client\").",
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": [
+        "button"
+      ]
+    },
+    {
+      "name": "dropdown-menu",
+      "type": "primitive",
+      "description": "`DropdownMenu.*`, `menu` (the slots). Client (\"use client\").",
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": [
+        "cn"
+      ]
+    },
+    {
+      "name": "empty-state",
+      "type": "primitive",
+      "description": "`EmptyState`. Server-safe.",
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "field",
+      "type": "primitive",
+      "description": "`Field.Root/Label/Hint/Error`, `Input`, `Textarea`, `Select`. Server-safe.",
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": [
+        "cn"
+      ]
+    },
+    {
+      "name": "kbd",
+      "type": "primitive",
+      "description": "`Kbd`, `kbdVariants`. Server-safe.",
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "page-header",
+      "type": "primitive",
+      "description": "`PageHeader`, `pageHeader` (the slots). Server-safe.",
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "popover",
+      "type": "primitive",
+      "description": "`Popover.*`. Client (\"use client\").",
+      "dependencies": [
+        "radix-ui@^1.7.0"
+      ],
+      "registryDependencies": [
+        "cn"
+      ]
+    },
+    {
+      "name": "progress",
+      "type": "primitive",
+      "description": "`Progress` (bar · ring, indeterminate), `progress` (the slots). Server-safe.",
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "radio-group",
+      "type": "primitive",
+      "description": "`RadioGroup.Root/Item/Card`, `radioGroup` (the slots). Client (\"use client\").",
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "separator",
+      "type": "primitive",
+      "description": "`Separator`, `separatorVariants` (Radix). Server-safe.",
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "skeleton",
+      "type": "primitive",
+      "description": "`Skeleton`, `skeletonVariants`. Server-safe.",
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "slider",
+      "type": "primitive",
+      "description": "`Slider` (one value or a range), `slider` (the slots). Client (\"use client\").",
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "slot",
+      "type": "primitive",
+      "description": "`Slot` (what `asChild` renders) and `VisuallyHidden` (a name for assistive technology only), from Radix.",
+      "dependencies": [
+        "radix-ui@^1.7.0"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "spinner",
+      "type": "primitive",
+      "description": "`Spinner`, `spinnerVariants`. Server-safe.",
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "stat",
+      "type": "primitive",
+      "description": "`Stat`, `stat` (the slots). Server-safe.",
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "switch",
+      "type": "primitive",
+      "description": "`Switch`, `switchVariants`. Client (\"use client\").",
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "tabs",
+      "type": "primitive",
+      "description": "`Tabs.Root/List/Trigger/Content` (variant underline · segmented · pills), `tabs` (the slots). Client (\"use client\").",
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "theme",
+      "type": "primitive",
+      "description": "`ThemeScript`, `ThemeProvider`, `useTheme`, `ThemeToggle`. Client (\"use client\").",
+      "dependencies": [],
+      "registryDependencies": [
+        "button"
+      ]
+    },
+    {
+      "name": "toast",
+      "type": "primitive",
+      "description": "`Toaster` (sonner, styled by roles), `toast`. Client (\"use client\").",
+      "dependencies": [
+        "sonner@^2.0.8"
+      ],
+      "registryDependencies": [
+        "cn"
+      ]
+    },
+    {
+      "name": "tooltip",
+      "type": "primitive",
+      "description": "`Tooltip`, `TooltipProvider`. Client (\"use client\").",
+      "dependencies": [
+        "radix-ui@^1.7.0"
+      ],
+      "registryDependencies": [
+        "cn"
+      ]
+    }
+  ]
+}

package/registry/kbd.json

@@ -0,0 +1,38 @@
+{
+  "name": "kbd",
+  "type": "primitive",
+  "description": "`Kbd`, `kbdVariants`. Server-safe.",
+  "files": [
+    {
+      "path": "kbd/index.ts",
+      "content": "/** @krizaka/ui/kbd — `Kbd`, `kbdVariants`. Server-safe. */\nexport { Kbd, type KbdProps, kbdVariants } from \"./kbd\";\n"
+    },
+    {
+      "path": "kbd/kbd.tsx",
+      "content": "// Server-safe. A key, or a shortcut of several (`<Kbd>⌘</Kbd><Kbd>K</Kbd>`).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const kbdVariants = tv({\n  base:\n    \"inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 \" +\n    \"font-mono font-semibold text-fg-secondary\",\n  variants: { size: { sm: \"h-5 min-w-5 px-1 text-[10px]\", md: \"h-6 min-w-6 px-1.5 text-xs\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type KbdProps = React.ComponentProps<\"kbd\"> & {\n  /**\n   * sm · md.\n   * @default \"md\"\n   */\n  size?: VariantProps<typeof kbdVariants>[\"size\"];\n};\n\nexport function Kbd({ size, className, ...props }: KbdProps) {\n  return <kbd className={kbdVariants({ size, className })} {...props} />;\n}\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "demos/kbd.tsx",
+    "content": "import { Kbd } from \"@krizaka/ui/kbd\";\n\nexport default function KbdDemo() {\n  return <Kbd>Esc</Kbd>;\n}\n"
+  },
+  "props": [
+    {
+      "component": "Kbd",
+      "description": "",
+      "props": [
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\"",
+          "default": "md",
+          "description": "sm · md.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/page-header.json

@@ -0,0 +1,66 @@
+{
+  "name": "page-header",
+  "type": "primitive",
+  "description": "`PageHeader`, `pageHeader` (the slots). Server-safe.",
+  "files": [
+    {
+      "path": "page-header/index.ts",
+      "content": "/** @krizaka/ui/page-header — `PageHeader`, `pageHeader` (the slots). Server-safe. */\nexport { PageHeader, pageHeader, type PageHeaderProps } from \"./page-header\";\n"
+    },
+    {
+      "path": "page-header/page-header.tsx",
+      "content": "// Server-safe. The top of a page: an optional breadcrumb, the title (h1), a description and the page's actions.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const pageHeader = tv({\n  slots: {\n    root: \"flex flex-col gap-3 border-b border-border-subtle pb-6\",\n    breadcrumb: \"text-xs text-fg-secondary\",\n    row: \"flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between\",\n    text: \"flex min-w-0 flex-col gap-1.5\",\n    title: \"font-display text-2xl font-black tracking-tight text-fg sm:text-3xl\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    actions: \"flex shrink-0 flex-wrap items-center gap-2\",\n  },\n});\nconst s = pageHeader();\n\nexport type PageHeaderProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The title of the page (an `h1`, or `as=\"h2\"`). */\n  title: React.ReactNode;\n  /** A sentence under the title. */\n  description?: React.ReactNode;\n  /** The page's actions: Buttons, a DropdownMenu. */\n  actions?: React.ReactNode;\n  /** A breadcrumb (the product's own <nav aria-label>), shown above the title. */\n  breadcrumb?: React.ReactNode;\n  /** The heading level of the title: `h1` for a page, `h2` for a section that looks like one. */\n  as?: \"h1\" | \"h2\";\n};\n\nexport function PageHeader({ title, description, actions, breadcrumb, as: Heading = \"h1\", className, ...props }: PageHeaderProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      {breadcrumb && <div className={s.breadcrumb()}>{breadcrumb}</div>}\n      <div className={s.row()}>\n        <div className={s.text()}>\n          <Heading className={s.title()}>{title}</Heading>\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n        {actions && <div className={s.actions()}>{actions}</div>}\n      </div>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "demos/page-header.tsx",
+    "content": "import { PageHeader } from \"@krizaka/ui/page-header\";\n\nexport default function PageHeaderDemo() {\n  return <PageHeader title=\"Payouts\" description=\"Your earnings are paid every Monday to the account on file.\" />;\n}\n"
+  },
+  "props": [
+    {
+      "component": "PageHeader",
+      "description": "",
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The title of the page (an `h1`, or `as=\"h2\"`).",
+          "required": true
+        },
+        {
+          "name": "actions",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The page's actions: Buttons, a DropdownMenu.",
+          "required": false
+        },
+        {
+          "name": "as",
+          "type": "\"h1\" | \"h2\"",
+          "default": "h1",
+          "description": "The heading level of the title: `h1` for a page, `h2` for a section that looks like one.",
+          "required": false
+        },
+        {
+          "name": "breadcrumb",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A breadcrumb (the product's own <nav aria-label>), shown above the title.",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A sentence under the title.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}