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

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.3",
+  "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
+        }
+      ]
+    }
+  ]
+}

package/registry/popover.json

@@ -0,0 +1,44 @@
+{
+  "name": "popover",
+  "type": "primitive",
+  "description": "`Popover.*`. Client (\"use client\").",
+  "files": [
+    {
+      "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"
+    },
+    {
+      "path": "popover/index.ts",
+      "content": "/** @krizaka/ui/popover — `Popover.*`. Client (\"use client\"). */\nexport { Popover, PopoverContent, type PopoverContentProps } from \"./popover\";\n"
+    },
+    {
+      "path": "popover/popover.tsx",
+      "content": "// Client (a portal). Radix places the content, traps nothing, closes on Escape and on an outside click, and returns\n// the focus to the trigger.\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport type PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function PopoverContent({ sideOffset = 8, collisionPadding = 8, container, className, ...props }: PopoverContentProps) {\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Content\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        className={cn(floating, \"w-72 max-w-(--radix-popover-content-available-width) p-4 origin-(--radix-popover-content-transform-origin)\", className)}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\n/** `Popover.Root/Trigger/Anchor/Content/Close`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const Popover = {\n  Root: PopoverPrimitive.Root,\n  Trigger: PopoverPrimitive.Trigger,\n  Anchor: PopoverPrimitive.Anchor,\n  Close: PopoverPrimitive.Close,\n  Content: PopoverContent,\n};\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "demo": {
+    "path": "demos/popover.tsx",
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { Field, Input } from \"@krizaka/ui/field\";\nimport { Popover } from \"@krizaka/ui/popover\";\n\nexport default function PopoverDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <Popover.Root defaultOpen={defaultOpen}>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\">Set a goal</Button>\n      </Popover.Trigger>\n      <Popover.Content aria-label=\"Set a goal\" align=\"center\">\n        <div className=\"flex flex-col gap-3\">\n          <Field.Root>\n            <Field.Label htmlFor=\"goal-amount\">Amount</Field.Label>\n            <Input id=\"goal-amount\" defaultValue=\"250\" />\n          </Field.Root>\n          <div className=\"flex justify-end gap-2\">\n            <Popover.Close asChild>\n              <Button size=\"sm\" variant=\"ghost\">\n                Cancel\n              </Button>\n            </Popover.Close>\n            <Button size=\"sm\" variant=\"primary\">\n              Save\n            </Button>\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "PopoverContent",
+      "description": "",
+      "props": [
+        {
+          "name": "container",
+          "type": "HTMLElement | null",
+          "default": null,
+          "description": "The element the portal renders into (default: document.body).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/progress.json

@@ -0,0 +1,80 @@
+{
+  "name": "progress",
+  "type": "primitive",
+  "description": "`Progress` (bar · ring, indeterminate), `progress` (the slots). Server-safe.",
+  "files": [
+    {
+      "path": "progress/index.ts",
+      "content": "/** @krizaka/ui/progress — `Progress` (bar · ring, indeterminate), `progress` (the slots). Server-safe. */\nexport { Progress, progress, type ProgressProps, type ProgressVariants } from \"./progress\";\n"
+    },
+    {
+      "path": "progress/progress.tsx",
+      "content": "// Server-safe: no hook, no context. role=\"progressbar\" with aria-valuenow / aria-valuemax (none when indeterminate),\n// named by `label`. A bar or a ring; the ring can hold content in its centre (an amount, a percentage).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const progress = tv({\n  slots: {\n    root: \"relative\",\n    track: \"\",\n    indicator: \"\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n  },\n  variants: {\n    variant: {\n      bar: {\n        root: \"w-full overflow-hidden rounded-full bg-surface-3\",\n        indicator:\n          \"kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:w-2/5\",\n      },\n      ring: {\n        root: \"inline-flex shrink-0 items-center justify-center\",\n        track: \"stroke-border-default\",\n        indicator:\n          \"stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none\",\n      },\n    },\n    size: { sm: {}, md: {}, lg: {} },\n  },\n  compoundVariants: [\n    { variant: \"bar\", size: \"sm\", class: { root: \"h-1\" } },\n    { variant: \"bar\", size: \"md\", class: { root: \"h-2\" } },\n    { variant: \"bar\", size: \"lg\", class: { root: \"h-3\" } },\n    { variant: \"ring\", size: \"sm\", class: { root: \"h-10 w-10\" } },\n    { variant: \"ring\", size: \"md\", class: { root: \"h-20 w-20\" } },\n    { variant: \"ring\", size: \"lg\", class: { root: \"h-36 w-36\" } },\n  ],\n  defaultVariants: { variant: \"bar\", size: \"md\" },\n});\n\nexport type ProgressVariants = VariantProps<typeof progress>;\n\nexport type ProgressProps = Omit<React.ComponentProps<\"div\">, \"children\"> &\n  ProgressVariants & {\n    /** bar · ring (a ring holds its `children` in the centre). */\n    variant?: ProgressVariants[\"variant\"];\n    /** sm · md · lg: the bar's thickness, the ring's diameter. */\n    size?: ProgressVariants[\"size\"];\n    /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */\n    value?: number | null;\n    /** The value that means complete. */\n    max?: number;\n    /** The accessible name — passed translated (\"Upload\", \"Raised towards the goal\"). */\n    label: string;\n    /** The value in words for assistive technology (\"$420 of $1,000\") — default: the percentage. */\n    valueText?: string;\n    /** A ring's centre: an amount, a percentage, an icon. */\n    children?: React.ReactNode;\n  };\n\nconst STROKE = { sm: 12, md: 9, lg: 7 } as const;\n\n/** A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate). */\nexport function Progress({ variant = \"bar\", size = \"md\", value, max = 100, label, valueText, className, children, ...props }: ProgressProps) {\n  const s = progress({ variant, size });\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;\n  const percent = Math.round(ratio * 100);\n  const state = !known ? \"indeterminate\" : ratio >= 1 ? \"complete\" : \"loading\";\n  const aria = {\n    role: \"progressbar\" as const,\n    \"aria-label\": label,\n    \"aria-valuemin\": known ? 0 : undefined,\n    \"aria-valuemax\": known ? max : undefined,\n    \"aria-valuenow\": known ? Math.min(max, Math.max(0, value)) : undefined,\n    \"aria-valuetext\": known ? (valueText ?? `${percent}%`) : valueText,\n    \"data-state\": state,\n    \"data-value\": known ? value : undefined,\n    \"data-variant\": variant,\n  };\n  if (variant === \"ring\") {\n    const stroke = STROKE[size];\n    const r = 50 - stroke / 2;\n    return (\n      <div {...aria} className={s.root({ className })} {...props}>\n        <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n          <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth={stroke} className={s.track()} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r={r}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            pathLength={100}\n            strokeDasharray={100}\n            strokeDashoffset={known ? 100 - percent : 75}\n            data-state={state}\n            className={s.indicator()}\n          />\n        </svg>\n        {children !== undefined && <div className={s.center()}>{children}</div>}\n      </div>\n    );\n  }\n  return (\n    <div {...aria} className={s.root({ className })} {...props}>\n      <div data-state={state} className={s.indicator()} style={known ? { width: `${ratio * 100}%` } : undefined} />\n    </div>\n  );\n}\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "demos/progress.tsx",
+    "content": "import { Progress } from \"@krizaka/ui/progress\";\n\nexport default function ProgressDemo() {\n  return <Progress label=\"Upload\" value={64} />;\n}\n"
+  },
+  "props": [
+    {
+      "component": "Progress",
+      "description": "A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate).",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The accessible name — passed translated (\"Upload\", \"Raised towards the goal\").",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A ring's centre: an amount, a percentage, an icon.",
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "default": "100",
+          "description": "The value that means complete.",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "md",
+          "description": "sm · md · lg: the bar's thickness, the ring's diameter.",
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "number | null",
+          "default": null,
+          "description": "How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length).",
+          "required": false
+        },
+        {
+          "name": "valueText",
+          "type": "string",
+          "default": null,
+          "description": "The value in words for assistive technology (\"$420 of $1,000\") — default: the percentage.",
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "\"bar\" | \"ring\"",
+          "default": "bar",
+          "description": "bar · ring (a ring holds its `children` in the centre).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}