@krizaka/ui 2.8.0 → 2.9.0

package/dist/dashboard-layout.d.ts

@@ -0,0 +1,139 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const dashboardLayout: tailwind_variants.TVReturnType<{
+    span: {
+        1: {
+            widget: string;
+        };
+        2: {
+            widget: string;
+        };
+        3: {
+            widget: string;
+        };
+        full: {
+            widget: string;
+        };
+    };
+}, {
+    root: string;
+    head: string;
+    text: string;
+    eyebrow: string;
+    title: string;
+    description: string;
+    actions: string;
+    toolbar: string;
+    grid: string;
+    widget: string;
+    widgetHead: string;
+    widgetTitle: string;
+    widgetDescription: string;
+    widgetBody: string;
+}, undefined, {
+    span: {
+        1: {
+            widget: string;
+        };
+        2: {
+            widget: string;
+        };
+        3: {
+            widget: string;
+        };
+        full: {
+            widget: string;
+        };
+    };
+}, {
+    root: string;
+    head: string;
+    text: string;
+    eyebrow: string;
+    title: string;
+    description: string;
+    actions: string;
+    toolbar: string;
+    grid: string;
+    widget: string;
+    widgetHead: string;
+    widgetTitle: string;
+    widgetDescription: string;
+    widgetBody: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    span: {
+        1: {
+            widget: string;
+        };
+        2: {
+            widget: string;
+        };
+        3: {
+            widget: string;
+        };
+        full: {
+            widget: string;
+        };
+    };
+}, {
+    root: string;
+    head: string;
+    text: string;
+    eyebrow: string;
+    title: string;
+    description: string;
+    actions: string;
+    toolbar: string;
+    grid: string;
+    widget: string;
+    widgetHead: string;
+    widgetTitle: string;
+    widgetDescription: string;
+    widgetBody: string;
+}>>;
+type DashboardLayoutProps = Omit<React.ComponentProps<"div">, "title"> & {
+    /** The screen's title: `Good morning, Eric`. */
+    title: React.ReactNode;
+    /** A mono line above it (the workspace, the date). */
+    eyebrow?: React.ReactNode;
+    /** One sentence under it. */
+    description?: React.ReactNode;
+    /** The screen's actions (a primary Button, a DropdownMenu). */
+    actions?: React.ReactNode;
+    /** Under the heading: the period, the filters (Segmented tabs, a DateRangePicker, a FilterBar). */
+    toolbar?: React.ReactNode;
+    /**
+     * The heading's level: `h1` when the dashboard is the screen, `h2` inside an AppShell whose header holds the h1.
+     * @default "h1"
+     */
+    headingAs?: "h1" | "h2";
+    /** The widgets (`Widget`), in reading order. */
+    children: React.ReactNode;
+};
+/** A dashboard screen: heading, actions, filters, then the grid of widgets. */
+declare function DashboardLayout({ title, eyebrow, description, actions, toolbar, headingAs: H, className, children, ...props }: DashboardLayoutProps): React.JSX.Element;
+type WidgetProps = Omit<React.ComponentProps<"section">, "title"> & {
+    /** The widget's title: it names the region. */
+    title: React.ReactNode;
+    /** One line under the title (the period, the source). */
+    description?: React.ReactNode;
+    /** An action on the right of the title (`See all`). */
+    action?: React.ReactNode;
+    /**
+     * The columns it takes: 1, 2, 3 or the full row (from `sm`; one column on a phone).
+     * @default 1
+     */
+    span?: 1 | 2 | 3 | "full";
+    /**
+     * The title's level: one under the dashboard's heading — `2` under an `h1`, `3` inside an AppShell (`headingAs="h2"`).
+     * @default 2
+     */
+    level?: 2 | 3;
+    /** The content: a Stat, a chart of @krizaka/charts, a DataTable, a list. */
+    children: React.ReactNode;
+};
+/** A widget of the dashboard: a titled region on a card. */
+declare function Widget({ title, description, action, span, level, className, children, id, ...props }: WidgetProps): React.JSX.Element;
+
+export { DashboardLayout, type DashboardLayoutProps, Widget, type WidgetProps, dashboardLayout };

package/dist/dashboard-layout.js

@@ -0,0 +1,68 @@
+// src/dashboard-layout/dashboard-layout.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var dashboardLayout = tv({
+  slots: {
+    root: "flex w-full flex-col gap-6",
+    head: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between",
+    text: "flex min-w-0 flex-col gap-1",
+    eyebrow: "font-mono text-[11px] font-semibold uppercase tracking-[0.16em] text-fg-accent",
+    title: "font-display text-2xl font-extrabold tracking-tight text-fg sm:text-[1.75rem]",
+    description: "max-w-2xl text-sm text-fg-secondary",
+    actions: "flex shrink-0 flex-wrap items-center gap-2",
+    toolbar: "flex flex-wrap items-center gap-2",
+    grid: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4",
+    widget: "flex min-w-0 flex-col gap-3 rounded-xl border border-border-default bg-surface-1 p-4 sm:p-5",
+    widgetHead: "flex items-start justify-between gap-3",
+    widgetTitle: "text-sm font-semibold text-fg",
+    widgetDescription: "mt-0.5 text-xs text-fg-secondary",
+    widgetBody: "min-w-0 flex-1"
+  },
+  variants: {
+    span: {
+      1: { widget: "" },
+      2: { widget: "sm:col-span-2" },
+      3: { widget: "sm:col-span-2 xl:col-span-3" },
+      full: { widget: "sm:col-span-2 xl:col-span-4" }
+    }
+  },
+  defaultVariants: { span: 1 }
+});
+var s = dashboardLayout();
+function DashboardLayout({ title, eyebrow, description, actions, toolbar, headingAs: H = "h1", className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: s.head(), children: [
+      /* @__PURE__ */ jsxs("div", { className: s.text(), children: [
+        eyebrow && /* @__PURE__ */ jsx("p", { className: s.eyebrow(), children: eyebrow }),
+        /* @__PURE__ */ jsx(H, { className: s.title(), children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: s.description(), children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: s.actions(), children: actions })
+    ] }),
+    toolbar && /* @__PURE__ */ jsx("div", { className: s.toolbar(), children: toolbar }),
+    /* @__PURE__ */ jsx("div", { className: s.grid(), children })
+  ] });
+}
+function Widget({ title, description, action, span = 1, level = 2, className, children, id, ...props }) {
+  const H = level === 2 ? "h2" : "h3";
+  const sv = dashboardLayout({ span });
+  const auto = React.useId();
+  const titleId = `${id ?? auto}-title`;
+  return /* @__PURE__ */ jsxs("section", { className: sv.widget({ className }), "aria-labelledby": titleId, id, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: s.widgetHead(), children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(H, { id: titleId, className: s.widgetTitle(), children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: s.widgetDescription(), children: description })
+      ] }),
+      action
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: s.widgetBody(), children })
+  ] });
+}
+export {
+  DashboardLayout,
+  Widget,
+  dashboardLayout
+};
+//# sourceMappingURL=dashboard-layout.js.map

package/dist/dashboard-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dashboard-layout/dashboard-layout.tsx"],"sourcesContent":["// Server-safe. A dashboard, read from the products' home screens (Orochia's creator studio, Orazaka's console for\n// Eric): the screen's heading with its actions and filters, then a responsive grid of widgets — one column on a phone,\n// two from `sm`, four from `xl`; a widget spans 1, 2, 3 columns or the full row, and keeps its order everywhere.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const dashboardLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    head: \"flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between\",\n    text: \"flex min-w-0 flex-col gap-1\",\n    eyebrow: \"font-mono text-[11px] font-semibold uppercase tracking-[0.16em] text-fg-accent\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg sm:text-[1.75rem]\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    actions: \"flex shrink-0 flex-wrap items-center gap-2\",\n    toolbar: \"flex flex-wrap items-center gap-2\",\n    grid: \"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4\",\n    widget: \"flex min-w-0 flex-col gap-3 rounded-xl border border-border-default bg-surface-1 p-4 sm:p-5\",\n    widgetHead: \"flex items-start justify-between gap-3\",\n    widgetTitle: \"text-sm font-semibold text-fg\",\n    widgetDescription: \"mt-0.5 text-xs text-fg-secondary\",\n    widgetBody: \"min-w-0 flex-1\",\n  },\n  variants: {\n    span: {\n      1: { widget: \"\" },\n      2: { widget: \"sm:col-span-2\" },\n      3: { widget: \"sm:col-span-2 xl:col-span-3\" },\n      full: { widget: \"sm:col-span-2 xl:col-span-4\" },\n    },\n  },\n  defaultVariants: { span: 1 },\n});\nconst s = dashboardLayout();\n\nexport type DashboardLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The screen's title: `Good morning, Eric`. */\n  title: React.ReactNode;\n  /** A mono line above it (the workspace, the date). */\n  eyebrow?: React.ReactNode;\n  /** One sentence under it. */\n  description?: React.ReactNode;\n  /** The screen's actions (a primary Button, a DropdownMenu). */\n  actions?: React.ReactNode;\n  /** Under the heading: the period, the filters (Segmented tabs, a DateRangePicker, a FilterBar). */\n  toolbar?: React.ReactNode;\n  /**\n   * The heading's level: `h1` when the dashboard is the screen, `h2` inside an AppShell whose header holds the h1.\n   * @default \"h1\"\n   */\n  headingAs?: \"h1\" | \"h2\";\n  /** The widgets (`Widget`), in reading order. */\n  children: React.ReactNode;\n};\n\n/** A dashboard screen: heading, actions, filters, then the grid of widgets. */\nexport function DashboardLayout({ title, eyebrow, description, actions, toolbar, headingAs: H = \"h1\", className, children, ...props }: DashboardLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <div className={s.head()}>\n        <div className={s.text()}>\n          {eyebrow && <p className={s.eyebrow()}>{eyebrow}</p>}\n          <H className={s.title()}>{title}</H>\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n        {actions && <div className={s.actions()}>{actions}</div>}\n      </div>\n      {toolbar && <div className={s.toolbar()}>{toolbar}</div>}\n      <div className={s.grid()}>{children}</div>\n    </div>\n  );\n}\n\nexport type WidgetProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The widget's title: it names the region. */\n  title: React.ReactNode;\n  /** One line under the title (the period, the source). */\n  description?: React.ReactNode;\n  /** An action on the right of the title (`See all`). */\n  action?: React.ReactNode;\n  /**\n   * The columns it takes: 1, 2, 3 or the full row (from `sm`; one column on a phone).\n   * @default 1\n   */\n  span?: 1 | 2 | 3 | \"full\";\n  /**\n   * The title's level: one under the dashboard's heading — `2` under an `h1`, `3` inside an AppShell (`headingAs=\"h2\"`).\n   * @default 2\n   */\n  level?: 2 | 3;\n  /** The content: a Stat, a chart of @krizaka/charts, a DataTable, a list. */\n  children: React.ReactNode;\n};\n\n/** A widget of the dashboard: a titled region on a card. */\nexport function Widget({ title, description, action, span = 1, level = 2, className, children, id, ...props }: WidgetProps) {\n  const H = level === 2 ? \"h2\" : \"h3\";\n  const sv = dashboardLayout({ span });\n  const auto = React.useId();\n  const titleId = `${id ?? auto}-title`;\n  return (\n    <section className={sv.widget({ className })} aria-labelledby={titleId} id={id} {...props}>\n      <div className={s.widgetHead()}>\n        <div className=\"min-w-0\">\n          <H id={titleId} className={s.widgetTitle()}>\n            {title}\n          </H>\n          {description && <p className={s.widgetDescription()}>{description}</p>}\n        </div>\n        {action}\n      </div>\n      <div className={s.widgetBody()}>{children}</div>\n    </section>\n  );\n}\n"],"mappings":";AAGA,YAAY,WAAW;AACvB,SAAS,UAAU;AAwDX,SACc,KADd;AAtDD,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,YAAY;AAAA,EACd;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,GAAG,EAAE,QAAQ,GAAG;AAAA,MAChB,GAAG,EAAE,QAAQ,gBAAgB;AAAA,MAC7B,GAAG,EAAE,QAAQ,8BAA8B;AAAA,MAC3C,MAAM,EAAE,QAAQ,8BAA8B;AAAA,IAChD;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,EAAE;AAC7B,CAAC;AACD,IAAM,IAAI,gBAAgB;AAuBnB,SAAS,gBAAgB,EAAE,OAAO,SAAS,aAAa,SAAS,SAAS,WAAW,IAAI,MAAM,WAAW,UAAU,GAAG,MAAM,GAAyB;AAC3J,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,yBAAC,SAAI,WAAW,EAAE,KAAK,GACrB;AAAA,2BAAC,SAAI,WAAW,EAAE,KAAK,GACpB;AAAA,mBAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,QAChD,oBAAC,KAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,QAC/B,eAAe,oBAAC,OAAE,WAAW,EAAE,YAAY,GAAI,uBAAY;AAAA,SAC9D;AAAA,MACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,OACpD;AAAA,IACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IAClD,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,UAAS;AAAA,KACtC;AAEJ;AAwBO,SAAS,OAAO,EAAE,OAAO,aAAa,QAAQ,OAAO,GAAG,QAAQ,GAAG,WAAW,UAAU,IAAI,GAAG,MAAM,GAAgB;AAC1H,QAAM,IAAI,UAAU,IAAI,OAAO;AAC/B,QAAM,KAAK,gBAAgB,EAAE,KAAK,CAAC;AACnC,QAAM,OAAa,YAAM;AACzB,QAAM,UAAU,GAAG,MAAM,IAAI;AAC7B,SACE,qBAAC,aAAQ,WAAW,GAAG,OAAO,EAAE,UAAU,CAAC,GAAG,mBAAiB,SAAS,IAAS,GAAG,OAClF;AAAA,yBAAC,SAAI,WAAW,EAAE,WAAW,GAC3B;AAAA,2BAAC,SAAI,WAAU,WACb;AAAA,4BAAC,KAAE,IAAI,SAAS,WAAW,EAAE,YAAY,GACtC,iBACH;AAAA,QACC,eAAe,oBAAC,OAAE,WAAW,EAAE,kBAAkB,GAAI,uBAAY;AAAA,SACpE;AAAA,MACC;AAAA,OACH;AAAA,IACA,oBAAC,SAAI,WAAW,EAAE,WAAW,GAAI,UAAS;AAAA,KAC5C;AAEJ;","names":[]}

package/dist/detail-layout.d.ts

@@ -0,0 +1,126 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const detailLayout: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            text?: tailwind_variants.ClassValue;
+            eyebrow?: tailwind_variants.ClassValue;
+            titleRow?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            columns?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            aside?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            text?: tailwind_variants.ClassValue;
+            eyebrow?: tailwind_variants.ClassValue;
+            titleRow?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            columns?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            aside?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    back: string;
+    header: string;
+    media: string;
+    text: string;
+    eyebrow: string;
+    titleRow: string;
+    title: string;
+    meta: string;
+    actions: string;
+    columns: string;
+    main: string;
+    aside: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            text?: tailwind_variants.ClassValue;
+            eyebrow?: tailwind_variants.ClassValue;
+            titleRow?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            columns?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            aside?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    back: string;
+    header: string;
+    media: string;
+    text: string;
+    eyebrow: string;
+    titleRow: string;
+    title: string;
+    meta: string;
+    actions: string;
+    columns: string;
+    main: string;
+    aside: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    back: string;
+    header: string;
+    media: string;
+    text: string;
+    eyebrow: string;
+    titleRow: string;
+    title: string;
+    meta: string;
+    actions: string;
+    columns: string;
+    main: string;
+    aside: string;
+}>>;
+type DetailLayoutProps = Omit<React.ComponentProps<"div">, "title"> & {
+    /** The way back to the list: your router's link (`<Link href="/videos">Videos</Link>`), drawn with its arrow. */
+    back?: React.ReactNode;
+    /** A thumbnail, a cover or an avatar beside the name. */
+    media?: React.ReactNode;
+    /** A mono line above the name (the object's kind, its id). */
+    eyebrow?: React.ReactNode;
+    /** The object's name: the `h1`. */
+    title: React.ReactNode;
+    /** Beside the name: its status (a Badge). */
+    status?: React.ReactNode;
+    /** Under the name: its facts (the author, a date, a count — `Facts` or plain text). */
+    meta?: React.ReactNode;
+    /** The object's actions (edit, publish, a DropdownMenu). */
+    actions?: React.ReactNode;
+    /** Under the header: the object's tabs (`Tabs.List` of @krizaka/ui/tabs, inside your `Tabs.Root` around the layout). */
+    tabs?: React.ReactNode;
+    /** The side panel: details, related objects, activity (under the content on a phone). */
+    aside?: React.ReactNode;
+    /** The content (the current tab). */
+    children: React.ReactNode;
+};
+/** One object's page: header (back, media, name, status, facts, actions), tabs, content and a side panel. */
+declare function DetailLayout({ back, media, eyebrow, title, status, meta, actions, tabs, aside, className, children, ...props }: DetailLayoutProps): React.JSX.Element;
+
+export { DetailLayout, type DetailLayoutProps, detailLayout };

package/dist/detail-layout.js

@@ -0,0 +1,48 @@
+// src/detail-layout/detail-layout.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var detailLayout = tv({
+  slots: {
+    root: "flex w-full flex-col gap-6",
+    back: "inline-flex w-fit items-center gap-1.5 rounded-md text-sm font-medium text-fg-secondary no-underline hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    header: "flex flex-col gap-4 border-b border-border-subtle pb-5 sm:flex-row sm:items-start",
+    media: "shrink-0 overflow-hidden rounded-xl [&>img]:block [&>img]:h-full [&>img]:w-full [&>img]:object-cover",
+    text: "flex min-w-0 flex-1 flex-col gap-2",
+    eyebrow: "font-mono text-[11px] font-semibold uppercase tracking-[0.16em] text-fg-accent",
+    titleRow: "flex flex-wrap items-center gap-2",
+    title: "min-w-0 font-display text-2xl font-extrabold tracking-tight text-fg break-words",
+    meta: "flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-fg-secondary",
+    actions: "flex shrink-0 flex-wrap items-center gap-2",
+    columns: "grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_20rem] lg:gap-8",
+    main: "flex min-w-0 flex-col gap-5",
+    aside: "flex min-w-0 flex-col gap-4 lg:sticky lg:top-20 lg:self-start"
+  }
+});
+var s = detailLayout();
+function DetailLayout({ back, media, eyebrow, title, status, meta, actions, tabs, aside, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
+    back && /* @__PURE__ */ jsx("div", { className: s.back(), children: back }),
+    /* @__PURE__ */ jsxs("div", { className: s.header(), children: [
+      media && /* @__PURE__ */ jsx("div", { className: s.media(), children: media }),
+      /* @__PURE__ */ jsxs("div", { className: s.text(), children: [
+        eyebrow && /* @__PURE__ */ jsx("p", { className: s.eyebrow(), children: eyebrow }),
+        /* @__PURE__ */ jsxs("div", { className: s.titleRow(), children: [
+          /* @__PURE__ */ jsx("h1", { className: s.title(), children: title }),
+          status
+        ] }),
+        meta && /* @__PURE__ */ jsx("div", { className: s.meta(), children: meta })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: s.actions(), children: actions })
+    ] }),
+    tabs,
+    /* @__PURE__ */ jsxs("div", { className: aside ? s.columns() : void 0, children: [
+      /* @__PURE__ */ jsx("div", { className: s.main(), children }),
+      aside && /* @__PURE__ */ jsx("aside", { className: s.aside(), children: aside })
+    ] })
+  ] });
+}
+export {
+  DetailLayout,
+  detailLayout
+};
+//# sourceMappingURL=detail-layout.js.map

package/dist/detail-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/detail-layout/detail-layout.tsx"],"sourcesContent":["// Server-safe. The page of one object, read from the products' detail screens (a video, a job, an account, a pack):\n// its header — the way back, a media or an avatar, the name, its facts and status, the actions — then its tabs, the\n// content, and a side panel (details, related, activity) that goes under the content on a phone.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const detailLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    back: \"inline-flex w-fit items-center gap-1.5 rounded-md text-sm font-medium text-fg-secondary no-underline hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    header: \"flex flex-col gap-4 border-b border-border-subtle pb-5 sm:flex-row sm:items-start\",\n    media: \"shrink-0 overflow-hidden rounded-xl [&>img]:block [&>img]:h-full [&>img]:w-full [&>img]:object-cover\",\n    text: \"flex min-w-0 flex-1 flex-col gap-2\",\n    eyebrow: \"font-mono text-[11px] font-semibold uppercase tracking-[0.16em] text-fg-accent\",\n    titleRow: \"flex flex-wrap items-center gap-2\",\n    title: \"min-w-0 font-display text-2xl font-extrabold tracking-tight text-fg break-words\",\n    meta: \"flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-fg-secondary\",\n    actions: \"flex shrink-0 flex-wrap items-center gap-2\",\n    columns: \"grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_20rem] lg:gap-8\",\n    main: \"flex min-w-0 flex-col gap-5\",\n    aside: \"flex min-w-0 flex-col gap-4 lg:sticky lg:top-20 lg:self-start\",\n  },\n});\nconst s = detailLayout();\n\nexport type DetailLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The way back to the list: your router's link (`<Link href=\"/videos\">Videos</Link>`), drawn with its arrow. */\n  back?: React.ReactNode;\n  /** A thumbnail, a cover or an avatar beside the name. */\n  media?: React.ReactNode;\n  /** A mono line above the name (the object's kind, its id). */\n  eyebrow?: React.ReactNode;\n  /** The object's name: the `h1`. */\n  title: React.ReactNode;\n  /** Beside the name: its status (a Badge). */\n  status?: React.ReactNode;\n  /** Under the name: its facts (the author, a date, a count — `Facts` or plain text). */\n  meta?: React.ReactNode;\n  /** The object's actions (edit, publish, a DropdownMenu). */\n  actions?: React.ReactNode;\n  /** Under the header: the object's tabs (`Tabs.List` of @krizaka/ui/tabs, inside your `Tabs.Root` around the layout). */\n  tabs?: React.ReactNode;\n  /** The side panel: details, related objects, activity (under the content on a phone). */\n  aside?: React.ReactNode;\n  /** The content (the current tab). */\n  children: React.ReactNode;\n};\n\n/** One object's page: header (back, media, name, status, facts, actions), tabs, content and a side panel. */\nexport function DetailLayout({ back, media, eyebrow, title, status, meta, actions, tabs, aside, className, children, ...props }: DetailLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      {back && <div className={s.back()}>{back}</div>}\n      <div className={s.header()}>\n        {media && <div className={s.media()}>{media}</div>}\n        <div className={s.text()}>\n          {eyebrow && <p className={s.eyebrow()}>{eyebrow}</p>}\n          <div className={s.titleRow()}>\n            <h1 className={s.title()}>{title}</h1>\n            {status}\n          </div>\n          {meta && <div className={s.meta()}>{meta}</div>}\n        </div>\n        {actions && <div className={s.actions()}>{actions}</div>}\n      </div>\n      {tabs}\n      <div className={aside ? s.columns() : undefined}>\n        <div className={s.main()}>{children}</div>\n        {aside && <aside className={s.aside()}>{aside}</aside>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AAgDJ,cAKL,YALK;AA9CR,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AACD,IAAM,IAAI,aAAa;AA0BhB,SAAS,aAAa,EAAE,MAAM,OAAO,SAAS,OAAO,QAAQ,MAAM,SAAS,MAAM,OAAO,WAAW,UAAU,GAAG,MAAM,GAAsB;AAClJ,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACxC;AAAA,YAAQ,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,IACzC,qBAAC,SAAI,WAAW,EAAE,OAAO,GACtB;AAAA,eAAS,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,MAC5C,qBAAC,SAAI,WAAW,EAAE,KAAK,GACpB;AAAA,mBAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,QAChD,qBAAC,SAAI,WAAW,EAAE,SAAS,GACzB;AAAA,8BAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,UAChC;AAAA,WACH;AAAA,QACC,QAAQ,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,SAC3C;AAAA,MACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,OACpD;AAAA,IACC;AAAA,IACD,qBAAC,SAAI,WAAW,QAAQ,EAAE,QAAQ,IAAI,QACpC;AAAA,0BAAC,SAAI,WAAW,EAAE,KAAK,GAAI,UAAS;AAAA,MACnC,SAAS,oBAAC,WAAM,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,OAChD;AAAA,KACF;AAEJ;","names":[]}

package/dist/docs-layout.d.ts

@@ -0,0 +1,78 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const docsLayout: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            sidebar?: tailwind_variants.ClassValue;
+            mobileNav?: tailwind_variants.ClassValue;
+            mobileBody?: tailwind_variants.ClassValue;
+            article?: tailwind_variants.ClassValue;
+            toc?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            mobileSummary?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            sidebar?: tailwind_variants.ClassValue;
+            mobileNav?: tailwind_variants.ClassValue;
+            mobileBody?: tailwind_variants.ClassValue;
+            article?: tailwind_variants.ClassValue;
+            toc?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            mobileSummary?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    sidebar: string;
+    mobileNav: string;
+    mobileSummary: string;
+    mobileBody: string;
+    article: string;
+    toc: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            sidebar?: tailwind_variants.ClassValue;
+            mobileNav?: tailwind_variants.ClassValue;
+            mobileBody?: tailwind_variants.ClassValue;
+            article?: tailwind_variants.ClassValue;
+            toc?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            mobileSummary?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    sidebar: string;
+    mobileNav: string;
+    mobileSummary: string;
+    mobileBody: string;
+    article: string;
+    toc: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    sidebar: string;
+    mobileNav: string;
+    mobileSummary: string;
+    mobileBody: string;
+    article: string;
+    toc: string;
+}>>;
+type DocsLayoutProps = React.ComponentProps<"div"> & {
+    /** The pages of the documentation (a nav of links, grouped). */
+    sidebar: React.ReactNode;
+    /** On a phone the sidebar is folded: the words that open it (`Pages of the documentation`). */
+    sidebarLabel: string;
+    /** The page's table of contents (a `Toc` of @krizaka/ui/toc): beside the article from `xl`. */
+    toc?: React.ReactNode;
+    /** The article: its title, its body. */
+    children: React.ReactNode;
+};
+/** A documentation page: pages · article · contents, in the site's frame. */
+declare function DocsLayout({ sidebar, sidebarLabel, toc, className, children, ...props }: DocsLayoutProps): React.JSX.Element;
+
+export { DocsLayout, type DocsLayoutProps, docsLayout };

package/dist/docs-layout.js

@@ -0,0 +1,60 @@
+// src/docs-layout/docs-layout.tsx
+import { tv } from "tailwind-variants";
+
+// src/glyphs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Glyph({ className = "h-4 w-4", fill, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className,
+      fill: fill ? "currentColor" : "none",
+      stroke: fill ? "none" : "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      focusable: "false",
+      children
+    }
+  );
+}
+var ChevronGlyph = ({ direction = "down", ...p }) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: { left: "m15 6-6 6 6 6", right: "m9 6 6 6-6 6", up: "m6 15 6-6 6 6", down: "m6 9 6 6 6-6" }[direction] }) });
+
+// src/docs-layout/docs-layout.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var docsLayout = tv({
+  slots: {
+    root: "mx-auto grid w-full max-w-[calc(var(--kz-page-max-docs,88rem)+2*var(--kz-page-gutter,24px))] grid-cols-1 gap-8 px-(--kz-page-gutter,16px) pt-(--kz-hero-top,6rem) pb-16 lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_13rem]",
+    sidebar: "hidden lg:block lg:sticky lg:top-24 lg:max-h-[calc(100dvh-7rem)] lg:self-start lg:overflow-y-auto",
+    mobileNav: "rounded-xl border border-border-default bg-surface-1 lg:hidden",
+    mobileSummary: "flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 px-4 text-sm font-semibold text-fg [&::-webkit-details-marker]:hidden rounded-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[open]>&>svg]:rotate-180",
+    mobileBody: "border-t border-border-subtle px-2 py-2",
+    article: "min-w-0 max-w-3xl",
+    toc: "hidden xl:block xl:sticky xl:top-24 xl:self-start"
+  }
+});
+var s = docsLayout();
+function DocsLayout({ sidebar, sidebarLabel, toc, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs2("div", { className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsx2("div", { className: s.sidebar(), children: sidebar }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col gap-6", children: [
+      /* @__PURE__ */ jsxs2("details", { className: s.mobileNav(), children: [
+        /* @__PURE__ */ jsxs2("summary", { className: s.mobileSummary(), children: [
+          sidebarLabel,
+          " ",
+          /* @__PURE__ */ jsx2(ChevronGlyph, { className: "h-4 w-4 transition-transform motion-reduce:transition-none" })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: s.mobileBody(), children: sidebar })
+      ] }),
+      /* @__PURE__ */ jsx2("article", { className: s.article(), children })
+    ] }),
+    toc && /* @__PURE__ */ jsx2("div", { className: s.toc(), children: toc })
+  ] });
+}
+export {
+  DocsLayout,
+  docsLayout
+};
+//# sourceMappingURL=docs-layout.js.map

package/dist/docs-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs-layout/docs-layout.tsx","../src/glyphs.tsx"],"sourcesContent":["// Server-safe. A documentation page in the site's frame (--kz-page-max-docs): the sidebar of pages, the article, the\n// table of contents — the three columns of the frame on a wide screen, the sidebar folded into a disclosure above the\n// article on a phone, the contents under the title as chips (a `Toc`). Its edges are the bar's: no column runs to the\n// window's edge.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\n\nexport const docsLayout = tv({\n  slots: {\n    root:\n      \"mx-auto grid w-full max-w-[calc(var(--kz-page-max-docs,88rem)+2*var(--kz-page-gutter,24px))] grid-cols-1 gap-8 px-(--kz-page-gutter,16px) \" +\n      \"pt-(--kz-hero-top,6rem) pb-16 lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_13rem]\",\n    sidebar: \"hidden lg:block lg:sticky lg:top-24 lg:max-h-[calc(100dvh-7rem)] lg:self-start lg:overflow-y-auto\",\n    mobileNav: \"rounded-xl border border-border-default bg-surface-1 lg:hidden\",\n    mobileSummary:\n      \"flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 px-4 text-sm font-semibold text-fg [&::-webkit-details-marker]:hidden \" +\n      \"rounded-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[open]>&>svg]:rotate-180\",\n    mobileBody: \"border-t border-border-subtle px-2 py-2\",\n    article: \"min-w-0 max-w-3xl\",\n    toc: \"hidden xl:block xl:sticky xl:top-24 xl:self-start\",\n  },\n});\nconst s = docsLayout();\n\nexport type DocsLayoutProps = React.ComponentProps<\"div\"> & {\n  /** The pages of the documentation (a nav of links, grouped). */\n  sidebar: React.ReactNode;\n  /** On a phone the sidebar is folded: the words that open it (`Pages of the documentation`). */\n  sidebarLabel: string;\n  /** The page's table of contents (a `Toc` of @krizaka/ui/toc): beside the article from `xl`. */\n  toc?: React.ReactNode;\n  /** The article: its title, its body. */\n  children: React.ReactNode;\n};\n\n/** A documentation page: pages · article · contents, in the site's frame. */\nexport function DocsLayout({ sidebar, sidebarLabel, toc, className, children, ...props }: DocsLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <div className={s.sidebar()}>{sidebar}</div>\n      <div className=\"flex min-w-0 flex-col gap-6\">\n        <details className={s.mobileNav()}>\n          <summary className={s.mobileSummary()}>\n            {sidebarLabel} <ChevronGlyph className=\"h-4 w-4 transition-transform motion-reduce:transition-none\" />\n          </summary>\n          <div className={s.mobileBody()}>{sidebar}</div>\n        </details>\n        <article className={s.article()}>{children}</article>\n      </div>\n      {toc && <div className={s.toc()}>{toc}</div>}\n    </div>\n  );\n}\n","// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\nexport const ArrowGlyph = ({ direction = \"right\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" }) => (\n  <Glyph {...p}>\n    <path d={direction === \"left\" ? \"M19 12H5m0 0 6-6m-6 6 6 6\" : \"M5 12h14m0 0-6-6m6 6-6 6\"} />\n  </Glyph>\n);\nexport const ExternalGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 4h6v6M20 4l-9 9\" />\n    <path d=\"M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4\" />\n  </Glyph>\n);\nexport const WarningGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 4 2.5 20h19L12 4Z\" />\n    <path d=\"M12 10v4M12 17.2v.1\" />\n  </Glyph>\n);\nexport const CopyGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3\" />\n  </Glyph>\n);\n"],"mappings":";AAKA,SAAS,UAAU;;;ACIf,cAsBF,YAtBE;AAFJ,SAAS,MAAM,EAAE,YAAY,WAAW,MAAM,SAAS,GAA+D;AACpH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA,MAAM,OAAO,iBAAiB;AAAA,MAC9B,QAAQ,OAAO,SAAS;AAAA,MACxB,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MACX,WAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;AA+CO,IAAM,eAAe,CAAC,EAAE,YAAY,QAAQ,GAAG,EAAE,MACtD,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAG,EAAE,MAAM,iBAAiB,OAAO,gBAAgB,IAAI,iBAAiB,MAAM,eAAe,EAAE,SAAS,GAAG,GACnH;;;ADhCI,gBAAAA,MAGI,QAAAC,aAHJ;AAhCC,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MACE;AAAA,IAEF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eACE;AAAA,IAEF,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AAcd,SAAS,WAAW,EAAE,SAAS,cAAc,KAAK,WAAW,UAAU,GAAG,MAAM,GAAoB;AACzG,SACE,gBAAAA,MAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,oBAAAD,KAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IACtC,gBAAAC,MAAC,SAAI,WAAU,+BACb;AAAA,sBAAAA,MAAC,aAAQ,WAAW,EAAE,UAAU,GAC9B;AAAA,wBAAAA,MAAC,aAAQ,WAAW,EAAE,cAAc,GACjC;AAAA;AAAA,UAAa;AAAA,UAAC,gBAAAD,KAAC,gBAAa,WAAU,8DAA6D;AAAA,WACtG;AAAA,QACA,gBAAAA,KAAC,SAAI,WAAW,EAAE,WAAW,GAAI,mBAAQ;AAAA,SAC3C;AAAA,MACA,gBAAAA,KAAC,aAAQ,WAAW,EAAE,QAAQ,GAAI,UAAS;AAAA,OAC7C;AAAA,IACC,OAAO,gBAAAA,KAAC,SAAI,WAAW,EAAE,IAAI,GAAI,eAAI;AAAA,KACxC;AAEJ;","names":["jsx","jsxs"]}

package/dist/goal-gauge.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { S as StoryVariant } from './story-variant-CLn4H5Nt.js';
+
+type GoalGaugeProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** What the gauge counts (“Backers”, “Dares completed”) — passed translated; the meter's accessible name. */
+    label: string;
+    /** The number of steps of the goal (2–24). */
+    segments: number;
+    /**
+     * The steps reached (lit), from 0 to `segments`.
+     * @default segments
+     */
+    value?: number;
+    /** The value in words (“6 of 10”, “€420 raised”); default `value / segments`. */
+    valueText?: string;
+    /**
+     * How the scene plays it: `fill` lights the reached steps one by one; `drain` empties the spent ones (a countdown of
+     * what is left: tickets, lives, problems still standing).
+     * @default "fill"
+     */
+    mode?: "fill" | "drain";
+    /**
+     * Shows the label and the value above the segments.
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * `default`: rounded segments. `arcade`: the boss gauge — a skewed frame, gradient cells, a centred mono label.
+     * @default "default"
+     */
+    variant?: StoryVariant;
+    /** A brand scope (`orochia` → `.brand-orochia`). */
+    brand?: string;
+};
+/** A goal in steps: `role="meter"`, the reached steps lit, the value in words beside the label. */
+declare function GoalGauge({ label, segments, value, valueText, mode, showLabel, variant, brand, className, style, ...props }: GoalGaugeProps): React.JSX.Element;
+
+export { GoalGauge, type GoalGaugeProps };