@krizaka/ui 3.21.0 → 3.23.0

package/dist/settings-layout.d.ts

@@ -2,46 +2,17 @@ import * as tailwind_variants from 'tailwind-variants';
 import * as React from 'react';
 
 declare const settingsLayout: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            head?: tailwind_variants.ClassValue;
-            title?: tailwind_variants.ClassValue;
-            description?: tailwind_variants.ClassValue;
-            columns?: tailwind_variants.ClassValue;
-            nav?: tailwind_variants.ClassValue;
-            navList?: tailwind_variants.ClassValue;
-            content?: tailwind_variants.ClassValue;
-            section?: tailwind_variants.ClassValue;
-            sectionHead?: tailwind_variants.ClassValue;
-            sectionTitle?: tailwind_variants.ClassValue;
-            sectionDescription?: tailwind_variants.ClassValue;
-            sectionBody?: tailwind_variants.ClassValue;
-            sectionFooter?: tailwind_variants.ClassValue;
-            navLink?: tailwind_variants.ClassValue;
+    variant: {
+        card: {};
+        flat: {
+            content: string;
+            section: string;
+            sectionHead: string;
+            sectionBody: string;
+            sectionFooter: string;
         };
     };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            head?: tailwind_variants.ClassValue;
-            title?: tailwind_variants.ClassValue;
-            description?: tailwind_variants.ClassValue;
-            columns?: tailwind_variants.ClassValue;
-            nav?: tailwind_variants.ClassValue;
-            navList?: tailwind_variants.ClassValue;
-            content?: tailwind_variants.ClassValue;
-            section?: tailwind_variants.ClassValue;
-            sectionHead?: tailwind_variants.ClassValue;
-            sectionTitle?: tailwind_variants.ClassValue;
-            sectionDescription?: tailwind_variants.ClassValue;
-            sectionBody?: tailwind_variants.ClassValue;
-            sectionFooter?: tailwind_variants.ClassValue;
-            navLink?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}, {
+}, {
     root: string;
     head: string;
     title: string;
@@ -57,27 +28,24 @@ declare const settingsLayout: tailwind_variants.TVReturnType<{
     sectionDescription: string;
     sectionBody: string;
     sectionFooter: string;
+    rows: string;
+    row: string;
+    rowText: string;
+    rowLabel: string;
+    rowDescription: string;
+    rowControl: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            head?: tailwind_variants.ClassValue;
-            title?: tailwind_variants.ClassValue;
-            description?: tailwind_variants.ClassValue;
-            columns?: tailwind_variants.ClassValue;
-            nav?: tailwind_variants.ClassValue;
-            navList?: tailwind_variants.ClassValue;
-            content?: tailwind_variants.ClassValue;
-            section?: tailwind_variants.ClassValue;
-            sectionHead?: tailwind_variants.ClassValue;
-            sectionTitle?: tailwind_variants.ClassValue;
-            sectionDescription?: tailwind_variants.ClassValue;
-            sectionBody?: tailwind_variants.ClassValue;
-            sectionFooter?: tailwind_variants.ClassValue;
-            navLink?: tailwind_variants.ClassValue;
+    variant: {
+        card: {};
+        flat: {
+            content: string;
+            section: string;
+            sectionHead: string;
+            sectionBody: string;
+            sectionFooter: string;
         };
     };
-} | {}, {
+}, {
     root: string;
     head: string;
     title: string;
@@ -93,7 +61,24 @@ declare const settingsLayout: tailwind_variants.TVReturnType<{
     sectionDescription: string;
     sectionBody: string;
     sectionFooter: string;
-}, tailwind_variants.TVReturnTypeLike<unknown, {
+    rows: string;
+    row: string;
+    rowText: string;
+    rowLabel: string;
+    rowDescription: string;
+    rowControl: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    variant: {
+        card: {};
+        flat: {
+            content: string;
+            section: string;
+            sectionHead: string;
+            sectionBody: string;
+            sectionFooter: string;
+        };
+    };
+}, {
     root: string;
     head: string;
     title: string;
@@ -109,6 +94,12 @@ declare const settingsLayout: tailwind_variants.TVReturnType<{
     sectionDescription: string;
     sectionBody: string;
     sectionFooter: string;
+    rows: string;
+    row: string;
+    rowText: string;
+    rowLabel: string;
+    rowDescription: string;
+    rowControl: string;
 }>>;
 interface SettingsNavItem {
     /** Its id (the anchor of a section on one long page). */
@@ -133,11 +124,16 @@ type SettingsLayoutProps = Omit<React.ComponentProps<"div">, "title"> & {
     navLabel: string;
     /** The app's link component for the sections (Next's `Link`); an `<a>` otherwise. */
     linkAs?: React.ElementType;
+    /**
+     * `card` (each form a titled card) or `flat` (one calm column of at most 45rem, rows divided by hairlines).
+     * @default "card"
+     */
+    variant?: "card" | "flat";
     /** The current section's forms (`SettingsSection`). */
     children: React.ReactNode;
 };
 /** A settings screen: sections on the left (chips on a phone), forms on the right. */
-declare function SettingsLayout({ title, description, nav, navLabel, linkAs: Link, className, children, ...props }: SettingsLayoutProps): React.JSX.Element;
+declare function SettingsLayout({ title, description, nav, navLabel, linkAs: Link, variant, className, children, ...props }: SettingsLayoutProps): React.JSX.Element;
 type SettingsSectionProps = Omit<React.ComponentProps<"section">, "title"> & {
     /** The section's title: it names the region (and is its anchor's target when `id` is set). */
     title: React.ReactNode;
@@ -145,10 +141,27 @@ type SettingsSectionProps = Omit<React.ComponentProps<"section">, "title"> & {
     description?: React.ReactNode;
     /** At the foot: the section's own save (a Button), a note. */
     footer?: React.ReactNode;
-    /** The fields. */
+    /**
+     * `card` (a titled card) or `flat` (no card: a title, then hairline-divided `SettingsRow`s).
+     * @default "card"
+     */
+    variant?: "card" | "flat";
+    /** The fields (or, flat, the `SettingsRow`s). */
     children: React.ReactNode;
 };
-/** A group of settings: a titled card with its fields and its own save. */
-declare function SettingsSection({ title, description, footer, id, className, children, ...props }: SettingsSectionProps): React.JSX.Element;
+/** A group of settings: a titled card with its fields and its own save, or flat rows under a title. */
+declare function SettingsSection({ title, description, footer, variant, id, className, children, ...props }: SettingsSectionProps): React.JSX.Element;
+type SettingsRowProps = Omit<React.ComponentProps<"div">, "title"> & {
+    /** What the setting is (`Username`). */
+    label: React.ReactNode;
+    /** The help text under it, one sentence. */
+    description?: React.ReactNode;
+    /** The id of the control, so the label names it (a `<label htmlFor>`). Leave out for a plain value. */
+    htmlFor?: string;
+    /** The control or the value, on the right (stacked under the label on a phone). */
+    children?: React.ReactNode;
+};
+/** One setting: its label and help on the left, its control or value on the right. Put rows in a flat `SettingsSection`. */
+declare function SettingsRow({ label, description, htmlFor, className, children, ...props }: SettingsRowProps): React.JSX.Element;
 
-export { SettingsLayout, type SettingsLayoutProps, type SettingsNavItem, SettingsSection, type SettingsSectionProps, settingsLayout };
+export { SettingsLayout, type SettingsLayoutProps, type SettingsNavItem, SettingsRow, type SettingsRowProps, SettingsSection, type SettingsSectionProps, settingsLayout };

package/dist/settings-layout.js

@@ -18,11 +18,31 @@ var settingsLayout = tv({
     sectionTitle: "text-base font-bold text-fg",
     sectionDescription: "text-sm text-fg-secondary",
     sectionBody: "flex flex-col gap-4 px-5 py-5",
-    sectionFooter: "flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle bg-surface-2/40 px-5 py-3 rounded-b-xl"
-  }
+    sectionFooter: "flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle bg-surface-2/40 px-5 py-3 rounded-b-xl",
+    // The flat look: no card, hairline-divided rows (Linear / Vercel / GitHub settings).
+    rows: "flex flex-col divide-y divide-border-subtle border-y border-border-subtle",
+    row: "flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6",
+    rowText: "flex min-w-0 flex-col gap-0.5",
+    rowLabel: "text-sm font-medium text-fg",
+    rowDescription: "text-sm text-fg-secondary",
+    rowControl: "flex min-w-0 shrink-0 items-center gap-2 text-sm text-fg sm:max-w-[60%] sm:justify-end"
+  },
+  variants: {
+    variant: {
+      card: {},
+      flat: {
+        content: "max-w-[45rem] gap-10",
+        section: "rounded-none border-0 bg-transparent",
+        sectionHead: "gap-0.5 px-0 pb-3 pt-0",
+        sectionBody: "gap-0 px-0 py-0",
+        sectionFooter: "justify-start border-t-0 bg-transparent px-0 pb-0 pt-4"
+      }
+    }
+  },
+  defaultVariants: { variant: "card" }
 });
-var s = settingsLayout();
-function SettingsLayout({ title, description, nav, navLabel, linkAs: Link = "a", className, children, ...props }) {
+function SettingsLayout({ title, description, nav, navLabel, linkAs: Link = "a", variant = "card", className, children, ...props }) {
+  const s = settingsLayout({ variant });
   return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
     (title || description) && /* @__PURE__ */ jsxs("div", { className: s.head(), children: [
       title && /* @__PURE__ */ jsx("h1", { className: s.title(), children: title }),
@@ -37,7 +57,8 @@ function SettingsLayout({ title, description, nav, navLabel, linkAs: Link = "a",
     ] })
   ] });
 }
-function SettingsSection({ title, description, footer, id, className, children, ...props }) {
+function SettingsSection({ title, description, footer, variant = "card", id, className, children, ...props }) {
+  const s = settingsLayout({ variant });
   const auto = React.useId();
   const titleId = `${id ?? auto}-title`;
   return /* @__PURE__ */ jsxs("section", { id, "aria-labelledby": titleId, className: s.section({ className }), ...props, children: [
@@ -45,12 +66,24 @@ function SettingsSection({ title, description, footer, id, className, children,
       /* @__PURE__ */ jsx("h2", { id: titleId, className: s.sectionTitle(), children: title }),
       description && /* @__PURE__ */ jsx("p", { className: s.sectionDescription(), children: description })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: s.sectionBody(), children }),
+    /* @__PURE__ */ jsx("div", { className: variant === "flat" ? s.rows() : s.sectionBody(), "data-settings-rows": variant === "flat" ? "" : void 0, children }),
     footer && /* @__PURE__ */ jsx("div", { className: s.sectionFooter(), children: footer })
   ] });
 }
+function SettingsRow({ label, description, htmlFor, className, children, ...props }) {
+  const s = settingsLayout();
+  const Label = htmlFor ? "label" : "span";
+  return /* @__PURE__ */ jsxs("div", { className: s.row({ className }), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: s.rowText(), children: [
+      /* @__PURE__ */ jsx(Label, { className: s.rowLabel(), ...htmlFor ? { htmlFor } : {}, children: label }),
+      description && /* @__PURE__ */ jsx("span", { className: s.rowDescription(), children: description })
+    ] }),
+    children !== void 0 && /* @__PURE__ */ jsx("div", { className: s.rowControl(), children })
+  ] });
+}
 export {
   SettingsLayout,
+  SettingsRow,
   SettingsSection,
   settingsLayout
 };

package/dist/settings-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/settings-layout/settings-layout.tsx"],"sourcesContent":["// Server-safe. Settings, read from the products' account and administration screens: a list of sections on the left\n// (a row of chips that scrolls on a phone), the current section's forms on the right, each form a titled card with its\n// own save at the foot. The sections are links (one page each) or anchors (one long page).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const settingsLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    head: \"flex flex-col gap-1\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    columns: \"grid grid-cols-1 gap-6 lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-10\",\n    nav: \"-mx-4 overflow-x-auto overflow-y-hidden px-4 py-1 -my-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mx-0 lg:overflow-visible lg:px-0 lg:py-0 lg:my-0\",\n    navList: \"flex w-max gap-2 lg:sticky lg:top-20 lg:w-auto lg:flex-col lg:gap-0.5\",\n    navLink:\n      \"flex h-9 items-center gap-2.5 whitespace-nowrap rounded-full border border-border-default bg-surface-1 px-3.5 text-sm font-medium text-fg-secondary no-underline \" +\n      \"hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current]:border-accent aria-[current]:text-fg \" +\n      \"lg:rounded-lg lg:border-transparent lg:bg-transparent lg:px-3 lg:hover:bg-surface-2 lg:aria-[current]:bg-accent-soft [&>svg]:h-4 [&>svg]:w-4\",\n    content: \"flex min-w-0 flex-col gap-6\",\n    section: \"rounded-xl border border-border-default bg-surface-1\",\n    sectionHead: \"flex flex-col gap-1 px-5 pt-5\",\n    sectionTitle: \"text-base font-bold text-fg\",\n    sectionDescription: \"text-sm text-fg-secondary\",\n    sectionBody: \"flex flex-col gap-4 px-5 py-5\",\n    sectionFooter: \"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle bg-surface-2/40 px-5 py-3 rounded-b-xl\",\n  },\n});\nconst s = settingsLayout();\n\nexport interface SettingsNavItem {\n  /** Its id (the anchor of a section on one long page). */\n  id: string;\n  /** Its words. */\n  label: string;\n  /** Where it leads: a page (`/settings/billing`) or an anchor (`#billing`). */\n  href: string;\n  /** Its icon (a signature icon). */\n  icon?: React.ReactNode;\n  /** The section shown now: `aria-current`. */\n  current?: boolean;\n}\n\nexport type SettingsLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The screen's title (`Settings`). */\n  title?: React.ReactNode;\n  /** One sentence under it. */\n  description?: React.ReactNode;\n  /** The sections. */\n  nav: readonly SettingsNavItem[];\n  /** The navigation's accessible name (`Settings sections`). */\n  navLabel: string;\n  /** The app's link component for the sections (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /** The current section's forms (`SettingsSection`). */\n  children: React.ReactNode;\n};\n\n/** A settings screen: sections on the left (chips on a phone), forms on the right. */\nexport function SettingsLayout({ title, description, nav, navLabel, linkAs: Link = \"a\", className, children, ...props }: SettingsLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      {(title || description) && (\n        <div className={s.head()}>\n          {title && <h1 className={s.title()}>{title}</h1>}\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n      )}\n      <div className={s.columns()}>\n        <nav aria-label={navLabel} className={s.nav()}>\n          <ul className={s.navList()}>\n            {nav.map((item) => (\n              <li key={item.id}>\n                <Link href={item.href} className={s.navLink()} aria-current={item.current ? (item.href.startsWith(\"#\") ? \"location\" : \"page\") : undefined}>\n                  {item.icon}\n                  {item.label}\n                </Link>\n              </li>\n            ))}\n          </ul>\n        </nav>\n        <div className={s.content()}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport type SettingsSectionProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The section's title: it names the region (and is its anchor's target when `id` is set). */\n  title: React.ReactNode;\n  /** What these settings change, in one sentence. */\n  description?: React.ReactNode;\n  /** At the foot: the section's own save (a Button), a note. */\n  footer?: React.ReactNode;\n  /** The fields. */\n  children: React.ReactNode;\n};\n\n/** A group of settings: a titled card with its fields and its own save. */\nexport function SettingsSection({ title, description, footer, id, className, children, ...props }: SettingsSectionProps) {\n  const auto = React.useId();\n  const titleId = `${id ?? auto}-title`;\n  return (\n    <section id={id} aria-labelledby={titleId} className={s.section({ className })} {...props}>\n      <div className={s.sectionHead()}>\n        <h2 id={titleId} className={s.sectionTitle()}>\n          {title}\n        </h2>\n        {description && <p className={s.sectionDescription()}>{description}</p>}\n      </div>\n      <div className={s.sectionBody()}>{children}</div>\n      {footer && <div className={s.sectionFooter()}>{footer}</div>}\n    </section>\n  );\n}\n"],"mappings":";AAGA,YAAY,WAAW;AACvB,SAAS,UAAU;AA2DX,SACY,KADZ;AAzDD,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,SACE;AAAA,IAGF,SAAS;AAAA,IACT,SAAS;AAAA,IACT,aAAa;AAAA,IACb,cAAc;AAAA,IACd,oBAAoB;AAAA,IACpB,aAAa;AAAA,IACb,eAAe;AAAA,EACjB;AACF,CAAC;AACD,IAAM,IAAI,eAAe;AA+BlB,SAAS,eAAe,EAAE,OAAO,aAAa,KAAK,UAAU,QAAQ,OAAO,KAAK,WAAW,UAAU,GAAG,MAAM,GAAwB;AAC5I,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACvC;AAAA,cAAS,gBACT,qBAAC,SAAI,WAAW,EAAE,KAAK,GACpB;AAAA,eAAS,oBAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,MAC1C,eAAe,oBAAC,OAAE,WAAW,EAAE,YAAY,GAAI,uBAAY;AAAA,OAC9D;AAAA,IAEF,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,SAAI,cAAY,UAAU,WAAW,EAAE,IAAI,GAC1C,8BAAC,QAAG,WAAW,EAAE,QAAQ,GACtB,cAAI,IAAI,CAAC,SACR,oBAAC,QACC,+BAAC,QAAK,MAAM,KAAK,MAAM,WAAW,EAAE,QAAQ,GAAG,gBAAc,KAAK,UAAW,KAAK,KAAK,WAAW,GAAG,IAAI,aAAa,SAAU,QAC7H;AAAA,aAAK;AAAA,QACL,KAAK;AAAA,SACR,KAJO,KAAK,EAKd,CACD,GACH,GACF;AAAA,MACA,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,UAAS;AAAA,OACzC;AAAA,KACF;AAEJ;AAcO,SAAS,gBAAgB,EAAE,OAAO,aAAa,QAAQ,IAAI,WAAW,UAAU,GAAG,MAAM,GAAyB;AACvH,QAAM,OAAa,YAAM;AACzB,QAAM,UAAU,GAAG,MAAM,IAAI;AAC7B,SACE,qBAAC,aAAQ,IAAQ,mBAAiB,SAAS,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAClF;AAAA,yBAAC,SAAI,WAAW,EAAE,YAAY,GAC5B;AAAA,0BAAC,QAAG,IAAI,SAAS,WAAW,EAAE,aAAa,GACxC,iBACH;AAAA,MACC,eAAe,oBAAC,OAAE,WAAW,EAAE,mBAAmB,GAAI,uBAAY;AAAA,OACrE;AAAA,IACA,oBAAC,SAAI,WAAW,EAAE,YAAY,GAAI,UAAS;AAAA,IAC1C,UAAU,oBAAC,SAAI,WAAW,EAAE,cAAc,GAAI,kBAAO;AAAA,KACxD;AAEJ;","names":[]}
+{"version":3,"sources":["../src/settings-layout/settings-layout.tsx"],"sourcesContent":["// Server-safe. Settings, read from the products' account and administration screens: a list of sections on the left\n// (a row of chips that scrolls on a phone), the current section's forms on the right, each form a titled card with its\n// own save at the foot. The sections are links (one page each) or anchors (one long page).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const settingsLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    head: \"flex flex-col gap-1\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    columns: \"grid grid-cols-1 gap-6 lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-10\",\n    nav: \"-mx-4 overflow-x-auto overflow-y-hidden px-4 py-1 -my-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mx-0 lg:overflow-visible lg:px-0 lg:py-0 lg:my-0\",\n    navList: \"flex w-max gap-2 lg:sticky lg:top-20 lg:w-auto lg:flex-col lg:gap-0.5\",\n    navLink:\n      \"flex h-9 items-center gap-2.5 whitespace-nowrap rounded-full border border-border-default bg-surface-1 px-3.5 text-sm font-medium text-fg-secondary no-underline \" +\n      \"hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current]:border-accent aria-[current]:text-fg \" +\n      \"lg:rounded-lg lg:border-transparent lg:bg-transparent lg:px-3 lg:hover:bg-surface-2 lg:aria-[current]:bg-accent-soft [&>svg]:h-4 [&>svg]:w-4\",\n    content: \"flex min-w-0 flex-col gap-6\",\n    section: \"rounded-xl border border-border-default bg-surface-1\",\n    sectionHead: \"flex flex-col gap-1 px-5 pt-5\",\n    sectionTitle: \"text-base font-bold text-fg\",\n    sectionDescription: \"text-sm text-fg-secondary\",\n    sectionBody: \"flex flex-col gap-4 px-5 py-5\",\n    sectionFooter: \"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle bg-surface-2/40 px-5 py-3 rounded-b-xl\",\n    // The flat look: no card, hairline-divided rows (Linear / Vercel / GitHub settings).\n    rows: \"flex flex-col divide-y divide-border-subtle border-y border-border-subtle\",\n    row: \"flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6\",\n    rowText: \"flex min-w-0 flex-col gap-0.5\",\n    rowLabel: \"text-sm font-medium text-fg\",\n    rowDescription: \"text-sm text-fg-secondary\",\n    rowControl: \"flex min-w-0 shrink-0 items-center gap-2 text-sm text-fg sm:max-w-[60%] sm:justify-end\",\n  },\n  variants: {\n    variant: {\n      card: {},\n      flat: {\n        content: \"max-w-[45rem] gap-10\",\n        section: \"rounded-none border-0 bg-transparent\",\n        sectionHead: \"gap-0.5 px-0 pb-3 pt-0\",\n        sectionBody: \"gap-0 px-0 py-0\",\n        sectionFooter: \"justify-start border-t-0 bg-transparent px-0 pb-0 pt-4\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"card\" },\n});\n\nexport interface SettingsNavItem {\n  /** Its id (the anchor of a section on one long page). */\n  id: string;\n  /** Its words. */\n  label: string;\n  /** Where it leads: a page (`/settings/billing`) or an anchor (`#billing`). */\n  href: string;\n  /** Its icon (a signature icon). */\n  icon?: React.ReactNode;\n  /** The section shown now: `aria-current`. */\n  current?: boolean;\n}\n\nexport type SettingsLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The screen's title (`Settings`). */\n  title?: React.ReactNode;\n  /** One sentence under it. */\n  description?: React.ReactNode;\n  /** The sections. */\n  nav: readonly SettingsNavItem[];\n  /** The navigation's accessible name (`Settings sections`). */\n  navLabel: string;\n  /** The app's link component for the sections (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /**\n   * `card` (each form a titled card) or `flat` (one calm column of at most 45rem, rows divided by hairlines).\n   * @default \"card\"\n   */\n  variant?: \"card\" | \"flat\";\n  /** The current section's forms (`SettingsSection`). */\n  children: React.ReactNode;\n};\n\n/** A settings screen: sections on the left (chips on a phone), forms on the right. */\nexport function SettingsLayout({ title, description, nav, navLabel, linkAs: Link = \"a\", variant = \"card\", className, children, ...props }: SettingsLayoutProps) {\n  const s = settingsLayout({ variant });\n  return (\n    <div className={s.root({ className })} {...props}>\n      {(title || description) && (\n        <div className={s.head()}>\n          {title && <h1 className={s.title()}>{title}</h1>}\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n      )}\n      <div className={s.columns()}>\n        <nav aria-label={navLabel} className={s.nav()}>\n          <ul className={s.navList()}>\n            {nav.map((item) => (\n              <li key={item.id}>\n                <Link href={item.href} className={s.navLink()} aria-current={item.current ? (item.href.startsWith(\"#\") ? \"location\" : \"page\") : undefined}>\n                  {item.icon}\n                  {item.label}\n                </Link>\n              </li>\n            ))}\n          </ul>\n        </nav>\n        <div className={s.content()}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport type SettingsSectionProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The section's title: it names the region (and is its anchor's target when `id` is set). */\n  title: React.ReactNode;\n  /** What these settings change, in one sentence. */\n  description?: React.ReactNode;\n  /** At the foot: the section's own save (a Button), a note. */\n  footer?: React.ReactNode;\n  /**\n   * `card` (a titled card) or `flat` (no card: a title, then hairline-divided `SettingsRow`s).\n   * @default \"card\"\n   */\n  variant?: \"card\" | \"flat\";\n  /** The fields (or, flat, the `SettingsRow`s). */\n  children: React.ReactNode;\n};\n\n/** A group of settings: a titled card with its fields and its own save, or flat rows under a title. */\nexport function SettingsSection({ title, description, footer, variant = \"card\", id, className, children, ...props }: SettingsSectionProps) {\n  const s = settingsLayout({ variant });\n  const auto = React.useId();\n  const titleId = `${id ?? auto}-title`;\n  return (\n    <section id={id} aria-labelledby={titleId} className={s.section({ className })} {...props}>\n      <div className={s.sectionHead()}>\n        <h2 id={titleId} className={s.sectionTitle()}>\n          {title}\n        </h2>\n        {description && <p className={s.sectionDescription()}>{description}</p>}\n      </div>\n      <div className={variant === \"flat\" ? s.rows() : s.sectionBody()} data-settings-rows={variant === \"flat\" ? \"\" : undefined}>\n        {children}\n      </div>\n      {footer && <div className={s.sectionFooter()}>{footer}</div>}\n    </section>\n  );\n}\n\nexport type SettingsRowProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** What the setting is (`Username`). */\n  label: React.ReactNode;\n  /** The help text under it, one sentence. */\n  description?: React.ReactNode;\n  /** The id of the control, so the label names it (a `<label htmlFor>`). Leave out for a plain value. */\n  htmlFor?: string;\n  /** The control or the value, on the right (stacked under the label on a phone). */\n  children?: React.ReactNode;\n};\n\n/** One setting: its label and help on the left, its control or value on the right. Put rows in a flat `SettingsSection`. */\nexport function SettingsRow({ label, description, htmlFor, className, children, ...props }: SettingsRowProps) {\n  const s = settingsLayout();\n  const Label = htmlFor ? \"label\" : \"span\";\n  return (\n    <div className={s.row({ className })} {...props}>\n      <div className={s.rowText()}>\n        <Label className={s.rowLabel()} {...(htmlFor ? { htmlFor } : {})}>\n          {label}\n        </Label>\n        {description && <span className={s.rowDescription()}>{description}</span>}\n      </div>\n      {children !== undefined && <div className={s.rowControl()}>{children}</div>}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/showcase.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-2FRWNSRO.js";
+} from "./chunk-NSLXEDIS.js";
 
 // src/showcase/showcase.tsx
 import * as React from "react";

package/dist/site-footer.d.ts

@@ -3,52 +3,20 @@ import * as React from 'react';
 import { S as SiteId, F as FamilyLabels } from './sites-CHp_vELn.js';
 
 declare const siteFooter: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            title?: tailwind_variants.ClassValue;
-            link?: tailwind_variants.ClassValue;
-            list?: tailwind_variants.ClassValue;
-            mark?: tailwind_variants.ClassValue;
-            root?: tailwind_variants.ClassValue;
-            inner?: tailwind_variants.ClassValue;
-            top?: tailwind_variants.ClassValue;
-            site?: tailwind_variants.ClassValue;
-            siteName?: tailwind_variants.ClassValue;
-            siteText?: tailwind_variants.ClassValue;
-            own?: tailwind_variants.ClassValue;
-            family?: tailwind_variants.ClassValue;
-            column?: tailwind_variants.ClassValue;
-            tag?: tailwind_variants.ClassValue;
-            bottom?: tailwind_variants.ClassValue;
-            signature?: tailwind_variants.ClassValue;
-            version?: tailwind_variants.ClassValue;
-            legal?: tailwind_variants.ClassValue;
+    variant: {
+        site: {};
+        docs: {
+            inner: string;
+            top: string;
+            own: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            title?: tailwind_variants.ClassValue;
-            link?: tailwind_variants.ClassValue;
-            list?: tailwind_variants.ClassValue;
-            mark?: tailwind_variants.ClassValue;
-            root?: tailwind_variants.ClassValue;
-            inner?: tailwind_variants.ClassValue;
-            top?: tailwind_variants.ClassValue;
-            site?: tailwind_variants.ClassValue;
-            siteName?: tailwind_variants.ClassValue;
-            siteText?: tailwind_variants.ClassValue;
-            own?: tailwind_variants.ClassValue;
-            family?: tailwind_variants.ClassValue;
-            column?: tailwind_variants.ClassValue;
-            tag?: tailwind_variants.ClassValue;
-            bottom?: tailwind_variants.ClassValue;
-            signature?: tailwind_variants.ClassValue;
-            version?: tailwind_variants.ClassValue;
-            legal?: tailwind_variants.ClassValue;
+        app: {
+            root: string;
+            inner: string;
+            bottom: string;
         };
     };
-} | {}, {
+}, {
     root: string;
     inner: string;
     top: string;
@@ -68,29 +36,20 @@ declare const siteFooter: tailwind_variants.TVReturnType<{
     version: string;
     legal: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            title?: tailwind_variants.ClassValue;
-            link?: tailwind_variants.ClassValue;
-            list?: tailwind_variants.ClassValue;
-            mark?: tailwind_variants.ClassValue;
-            root?: tailwind_variants.ClassValue;
-            inner?: tailwind_variants.ClassValue;
-            top?: tailwind_variants.ClassValue;
-            site?: tailwind_variants.ClassValue;
-            siteName?: tailwind_variants.ClassValue;
-            siteText?: tailwind_variants.ClassValue;
-            own?: tailwind_variants.ClassValue;
-            family?: tailwind_variants.ClassValue;
-            column?: tailwind_variants.ClassValue;
-            tag?: tailwind_variants.ClassValue;
-            bottom?: tailwind_variants.ClassValue;
-            signature?: tailwind_variants.ClassValue;
-            version?: tailwind_variants.ClassValue;
-            legal?: tailwind_variants.ClassValue;
+    variant: {
+        site: {};
+        docs: {
+            inner: string;
+            top: string;
+            own: string;
+        };
+        app: {
+            root: string;
+            inner: string;
+            bottom: string;
         };
     };
-} | {}, {
+}, {
     root: string;
     inner: string;
     top: string;
@@ -109,7 +68,21 @@ declare const siteFooter: tailwind_variants.TVReturnType<{
     signature: string;
     version: string;
     legal: string;
-}, tailwind_variants.TVReturnTypeLike<unknown, {
+}, tailwind_variants.TVReturnTypeLike<{
+    variant: {
+        site: {};
+        docs: {
+            inner: string;
+            top: string;
+            own: string;
+        };
+        app: {
+            root: string;
+            inner: string;
+            bottom: string;
+        };
+    };
+}, {
     root: string;
     inner: string;
     top: string;
@@ -152,9 +125,17 @@ type SiteFooterProps = Omit<React.ComponentProps<"footer">, "children"> & {
     family?: boolean;
     /** The end of the signature line: legal links, a language switch (`SiteFooter.Link`s or any inline content). */
     legal?: React.ReactNode;
+    /**
+     * `site` — the full footer of a marketing or company site. `docs` — a compact one for documentation pages (no site
+     * block, the columns in a row, the documentation's width; never the family). `app` — one slim line inside a signed-in
+     * product: the publisher line, the version and the legal links (no columns, no family); render it once, in the
+     * layout, and not at all where the app shell has a sidebar that holds them.
+     * @default "site"
+     */
+    variant?: "site" | "docs" | "app";
 };
 /** The footer of a Krizaka site: its own columns, the family in columns, the signature, the version, Montréal. */
-declare function SiteFooter({ current, labels, children, version, env, legal, family, className, ...props }: SiteFooterProps): React.JSX.Element;
+declare function SiteFooter({ current, labels, children, version, env, legal, family: familyProp, variant, className, ...props }: SiteFooterProps): React.JSX.Element;
 declare namespace SiteFooter {
     var Column: typeof SiteFooterColumn;
     var Link: typeof SiteFooterLink;
@@ -166,7 +147,7 @@ type SiteFooterColumnProps = Omit<React.ComponentProps<"div">, "title"> & {
     children: React.ReactNode;
 };
 /** One of the site's own columns: a heading and its links. */
-declare function SiteFooterColumn({ title, children, className, ...props }: SiteFooterColumnProps): React.JSX.Element;
+declare function SiteFooterColumn({ title, children, className, ...props }: SiteFooterColumnProps): React.JSX.Element | null;
 type SiteFooterLinkProps = React.ComponentProps<"a"> & {
     /** The current page: `aria-current="page"`. */
     active?: boolean;

package/dist/site-footer.js

@@ -4,10 +4,10 @@ import {
   familyLabels,
   siteById,
   sitesByGroup
-} from "./chunk-5MH64NIL.js";
+} from "./chunk-2L67YTNV.js";
 import {
   KrizakaLogo
-} from "./chunk-LIPK4UCS.js";
+} from "./chunk-YCIBJ6OQ.js";
 
 // src/site-footer/site-footer.tsx
 import { Slot } from "radix-ui";
@@ -17,12 +17,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var siteFooter = tv({
   slots: {
     root: "w-full border-t border-border-subtle bg-surface-0 text-fg",
-    inner: "mx-auto grid w-full max-w-(--kz-page-max,72rem) grid-cols-[minmax(0,1fr)] gap-10 px-(--kz-page-gutter,16px) py-12",
+    inner: "mx-auto grid w-full max-w-[calc(var(--kz-page-max,72rem)_+_2*var(--kz-page-gutter,clamp(16px,3.2vw,32px)))] grid-cols-[minmax(0,1fr)] gap-10 px-[var(--kz-page-gutter,clamp(16px,3.2vw,32px))] py-12",
     top: "grid grid-cols-[minmax(0,1fr)] gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]",
     site: "grid content-start gap-3",
     siteName: "inline-flex items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg",
     siteText: "max-w-xs text-sm leading-relaxed text-fg-secondary",
-    own: "grid grid-cols-2 gap-8 sm:grid-cols-3",
+    own: "grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-8",
     family: "grid grid-cols-2 gap-8 border-t border-border-subtle pt-8 md:grid-cols-4",
     column: "grid min-w-0 content-start gap-3",
     title: "text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
@@ -34,9 +34,26 @@ var siteFooter = tv({
     signature: "inline-flex items-center gap-2 rounded-md font-medium text-fg no-underline hover:text-fg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
     version: "rounded-full border border-border-subtle bg-surface-2 px-2 py-0.5 font-mono text-[11px] text-fg-secondary",
     legal: "flex flex-wrap items-center gap-x-4 gap-y-2 sm:ml-auto"
-  }
+  },
+  variants: {
+    // `site`: the full footer. `docs`: no site block, the columns in one row, on the documentation's width. `app`: one
+    // slim line inside a signed-in product — signature, version, legal links.
+    variant: {
+      site: {},
+      docs: {
+        inner: "max-w-[calc(var(--kz-page-max-docs,88rem)_+_2*var(--kz-page-gutter,clamp(16px,3.2vw,32px)))] gap-6 py-8",
+        top: "lg:grid-cols-[minmax(0,1fr)]",
+        own: "sm:grid-cols-4"
+      },
+      app: {
+        root: "bg-transparent",
+        inner: "gap-0 py-3",
+        bottom: "border-t-0 pt-0"
+      }
+    }
+  },
+  defaultVariants: { variant: "site" }
 });
-var s = siteFooter();
 function SiteFooter({
   current,
   labels = familyLabels.en,
@@ -44,24 +61,28 @@ function SiteFooter({
   version,
   env,
   legal,
-  family = true,
+  family: familyProp = true,
+  variant = "site",
   className,
   ...props
 }) {
   const id = React.useId();
+  const s = siteFooter({ variant });
+  const family = variant === "site" && familyProp;
+  const slim = variant === "app";
   const site = siteById(current);
   const krizaka = siteById("krizaka");
   const tag = [env, version && `v${version.replace(/^v/, "")}`].filter(Boolean).join(" \xB7 ");
   return /* @__PURE__ */ jsx("footer", { className: s.root({ className }), ...props, children: /* @__PURE__ */ jsxs("div", { className: s.inner(), children: [
-    /* @__PURE__ */ jsxs("div", { className: s.top(), children: [
-      /* @__PURE__ */ jsxs("div", { className: s.site(), children: [
+    !slim && /* @__PURE__ */ jsxs("div", { className: s.top(), children: [
+      variant === "site" && /* @__PURE__ */ jsxs("div", { className: s.site(), children: [
         /* @__PURE__ */ jsxs("a", { href: site.url, className: s.siteName(), children: [
           /* @__PURE__ */ jsx(FamilyMark, { mark: site.mark, size: 24 }),
           site.name
         ] }),
         /* @__PURE__ */ jsx("p", { className: s.siteText(), children: labels.descriptions[site.id] })
       ] }),
-      children && /* @__PURE__ */ jsx("div", { className: s.own(), children })
+      React.Children.toArray(children).length > 0 && /* @__PURE__ */ jsx("div", { className: s.own(), children })
     ] }),
     family && /* @__PURE__ */ jsx("nav", { "aria-label": labels.family, className: s.family(), children: sitesByGroup().map(({ group, sites }) => /* @__PURE__ */ jsxs("div", { className: s.column(), children: [
       /* @__PURE__ */ jsx("p", { id: `${id}-${group}`, className: s.title(), children: labels.groups[group] }),
@@ -88,19 +109,22 @@ function SiteFooter({
         ] }),
         tag
       ] }),
-      /* @__PURE__ */ jsx("span", { children: labels.place }),
+      !slim && /* @__PURE__ */ jsx("span", { children: labels.place }),
       legal && /* @__PURE__ */ jsx("div", { className: s.legal(), children: legal })
     ] })
   ] }) });
 }
 function SiteFooterColumn({ title, children, className, ...props }) {
   const id = React.useId();
+  if (React.Children.toArray(children).length === 0) return null;
+  const s = siteFooter();
   return /* @__PURE__ */ jsxs("div", { className: s.column({ className }), ...props, children: [
     /* @__PURE__ */ jsx("p", { id, className: s.title(), children: title }),
-    /* @__PURE__ */ jsx("ul", { "aria-labelledby": id, className: s.list(), children: React.Children.map(children, (child) => child ? /* @__PURE__ */ jsx("li", { children: child }) : null) })
+    /* @__PURE__ */ jsx("ul", { "aria-labelledby": id, className: s.list(), children: React.Children.toArray(children).map((child, i) => /* @__PURE__ */ jsx("li", { children: child }, i)) })
   ] });
 }
 function SiteFooterLink({ active, asChild, className, ...props }) {
+  const s = siteFooter();
   const Comp = asChild ? Slot.Root : "a";
   return /* @__PURE__ */ jsx(Comp, { "aria-current": active ? "page" : void 0, className: s.link({ className }), ...props });
 }