@blurrow/ui 0.2.0 → 0.2.1

package/dist/Card.d.ts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type CardTheme = "light" | "dark";
+interface SplitCardProps {
+    title?: string;
+    subtitle?: string;
+    icon?: React.ReactNode;
+    image?: React.ReactNode;
+    imageSrc?: string;
+    imageAlt?: string;
+    actions?: React.ReactNode;
+    theme?: CardTheme;
+    className?: string;
+    children?: React.ReactNode;
+    layout?: "split";
+}
+interface StackCardProps {
+    title?: string;
+    badge?: React.ReactNode;
+    subtitle?: string;
+    note?: string;
+    image?: React.ReactNode;
+    imageSrc?: string;
+    imageAlt?: string;
+    imageBg?: string;
+    actions?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+    layout: "stack";
+}
+type CardProps = SplitCardProps | StackCardProps;
+declare function Card(props: CardProps): react_jsx_runtime.JSX.Element;
+interface CardGridProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare function CardGrid({ children, className }: CardGridProps): react_jsx_runtime.JSX.Element;
+
+export { Card, CardGrid };

package/dist/Card.js

@@ -0,0 +1,175 @@
+// ../../components/ui/Card.tsx
+import { CardShell } from "./CardShell.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MediaPlaceholder({ dark, bg, monogram }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["relative w-full h-full flex items-center justify-center", bg ?? ""].join(" "),
+      style: bg ? void 0 : { background: dark ? "var(--media-well-dark)" : "var(--media-well)" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-0",
+            style: {
+              backgroundImage: `radial-gradient(${bg ? "var(--media-dots-on-colour)" : dark ? "var(--media-dots-dark)" : "var(--media-dots)"} 1px, transparent 1px)`,
+              backgroundSize: "12px 12px",
+              maskImage: "radial-gradient(70% 70% at 50% 50%, black 0%, transparent 100%)",
+              WebkitMaskImage: "radial-gradient(70% 70% at 50% 50%, black 0%, transparent 100%)"
+            }
+          }
+        ),
+        monogram && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: [
+              "absolute -right-3 -bottom-[0.32em] text-[220px] font-semibold leading-none tracking-[-0.06em] select-none",
+              dark ? "text-white/[0.045]" : "text-ink/[0.045]"
+            ].join(" "),
+            children: monogram
+          }
+        )
+      ]
+    }
+  );
+}
+function Media({
+  image,
+  imageSrc,
+  imageAlt,
+  dark,
+  bg,
+  monogram
+}) {
+  if (image) return /* @__PURE__ */ jsx(Fragment, { children: image });
+  if (imageSrc) {
+    return /* @__PURE__ */ jsx("img", { src: imageSrc, alt: imageAlt, loading: "lazy", className: "w-full h-full object-cover" });
+  }
+  return /* @__PURE__ */ jsx(MediaPlaceholder, { dark, bg, monogram });
+}
+function IconTile({ dark, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: [
+        "w-9 h-9 rounded-[11px] flex items-center justify-center shrink-0",
+        dark ? "text-neutral-100" : "text-ink-label"
+      ].join(" "),
+      style: {
+        background: dark ? "var(--tile-dark)" : "var(--tile)",
+        boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)"
+      },
+      children
+    }
+  );
+}
+function Card(props) {
+  if (props.layout === "stack") {
+    const {
+      title: title2,
+      badge,
+      subtitle: subtitle2,
+      note,
+      image: image2,
+      imageSrc: imageSrc2,
+      imageAlt: imageAlt2 = "",
+      imageBg,
+      actions: actions2,
+      className: className2 = "",
+      children: children2
+    } = props;
+    return /* @__PURE__ */ jsxs(
+      CardShell,
+      {
+        as: "article",
+        className: className2,
+        rail: actions2,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "relative h-52 shrink-0 overflow-hidden", style: { boxShadow: "0 1px 0 var(--divider)" }, children: /* @__PURE__ */ jsx(Media, { image: image2, imageSrc: imageSrc2, imageAlt: imageAlt2, bg: imageBg }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col p-6", children: [
+            (title2 || badge) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              title2 && /* @__PURE__ */ jsx("h3", { className: "text-[17px] font-semibold text-ink tracking-[-0.015em] leading-snug", children: title2 }),
+              badge
+            ] }),
+            subtitle2 && // Line breaks in the copy are for centred layouts; let it flow here
+            /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-[14px] text-ink-body leading-[1.55] text-pretty", children: subtitle2.replace(/\n/g, " ") }),
+            children2,
+            note && /* @__PURE__ */ jsx("p", { className: "mt-auto pt-5 text-[12px] text-ink-muted leading-relaxed text-pretty", children: note })
+          ] })
+        ]
+      }
+    );
+  }
+  const {
+    title,
+    subtitle,
+    icon,
+    image,
+    imageSrc,
+    imageAlt = "",
+    actions,
+    theme = "light",
+    className = "",
+    children
+  } = props;
+  const dark = theme === "dark";
+  return /* @__PURE__ */ jsxs(
+    CardShell,
+    {
+      as: "article",
+      theme: dark ? "dark" : "light",
+      className,
+      faceClassName: "flex-row! min-h-[220px]",
+      rail: actions,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col p-7 flex-1 min-w-0", children: [
+          icon && /* @__PURE__ */ jsx(IconTile, { dark, children: icon }),
+          title && /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: [
+                "text-[34px] font-medium leading-[1.02] tracking-[-0.04em] text-balance max-w-[14ch]",
+                icon ? "mt-5" : "",
+                dark ? "text-white" : "text-ink"
+              ].join(" "),
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-auto pt-8 flex flex-col gap-2", children: [
+            subtitle && /* @__PURE__ */ jsx("p", { className: ["text-[14px] leading-[1.45] tracking-[-0.005em]", dark ? "text-neutral-500" : "text-ink-muted"].join(" "), children: subtitle }),
+            children
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative w-[40%] shrink-0 overflow-hidden",
+            style: { boxShadow: dark ? "-1px 0 0 var(--divider-dark)" : "-1px 0 0 var(--divider)" },
+            children: /* @__PURE__ */ jsx(
+              Media,
+              {
+                image,
+                imageSrc,
+                imageAlt,
+                dark,
+                monogram: typeof title === "string" ? title.trim().charAt(0).toLowerCase() : void 0
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function CardGrid({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: ["grid grid-cols-1 sm:grid-cols-2 gap-4", className].join(" "), children });
+}
+export {
+  Card,
+  CardGrid
+};
+//# sourceMappingURL=Card.js.map

package/dist/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Card.tsx"],"sourcesContent":["import React from \"react\";\nimport { CardShell } from \"./CardShell\";\n\ntype CardTheme = \"light\" | \"dark\";\n\ninterface SplitCardProps {\n  title?: string;\n  subtitle?: string;\n  icon?: React.ReactNode;\n  image?: React.ReactNode;\n  imageSrc?: string;\n  imageAlt?: string;\n  actions?: React.ReactNode;\n  theme?: CardTheme;\n  className?: string;\n  children?: React.ReactNode;\n  layout?: \"split\";\n}\n\ninterface StackCardProps {\n  title?: string;\n  badge?: React.ReactNode;\n  subtitle?: string;\n  note?: string;\n  image?: React.ReactNode;\n  imageSrc?: string;\n  imageAlt?: string;\n  imageBg?: string;\n  actions?: React.ReactNode;\n  className?: string;\n  children?: React.ReactNode;\n  layout: \"stack\";\n}\n\ntype CardProps = SplitCardProps | StackCardProps;\n\n/* Both layouts use CardShell: content on the face, actions on the rail.\n   Media sits flush in the face — the face's own corners frame it, so there\n   is no box-inside-a-box.                                                 */\n\nfunction MediaPlaceholder({ dark, bg, monogram }: { dark?: boolean; bg?: string; monogram?: string }) {\n  return (\n    <div\n      className={[\"relative w-full h-full flex items-center justify-center\", bg ?? \"\"].join(\" \")}\n      style={bg ? undefined : { background: dark ? \"var(--media-well-dark)\" : \"var(--media-well)\" }}\n    >\n      {/* A faint dot grid fading out from the centre: a slot, not a hole */}\n      <div\n        aria-hidden\n        className=\"absolute inset-0\"\n        style={{\n          backgroundImage: `radial-gradient(${\n            bg ? \"var(--media-dots-on-colour)\" : dark ? \"var(--media-dots-dark)\" : \"var(--media-dots)\"\n          } 1px, transparent 1px)`,\n          backgroundSize: \"12px 12px\",\n          maskImage: \"radial-gradient(70% 70% at 50% 50%, black 0%, transparent 100%)\",\n          WebkitMaskImage: \"radial-gradient(70% 70% at 50% 50%, black 0%, transparent 100%)\",\n        }}\n      />\n      {/* The title's initial, set huge and barely there and cropped by the\n          slot's edges: the empty half carries the card's type, not a glyph */}\n      {monogram && (\n        <span\n          aria-hidden\n          className={[\n            \"absolute -right-3 -bottom-[0.32em] text-[220px] font-semibold leading-none tracking-[-0.06em] select-none\",\n            dark ? \"text-white/[0.045]\" : \"text-ink/[0.045]\",\n          ].join(\" \")}\n        >\n          {monogram}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction Media({\n  image,\n  imageSrc,\n  imageAlt,\n  dark,\n  bg,\n  monogram,\n}: {\n  image?: React.ReactNode;\n  imageSrc?: string;\n  imageAlt: string;\n  dark?: boolean;\n  bg?: string;\n  monogram?: string;\n}) {\n  if (image) return <>{image}</>;\n  if (imageSrc) {\n    // eslint-disable-next-line @next/next/no-img-element\n    return <img src={imageSrc} alt={imageAlt} loading=\"lazy\" className=\"w-full h-full object-cover\" />;\n  }\n  return <MediaPlaceholder dark={dark} bg={bg} monogram={monogram} />;\n}\n\nfunction IconTile({ dark, children }: { dark: boolean; children: React.ReactNode }) {\n  return (\n    <div\n      aria-hidden\n      className={[\n        \"w-9 h-9 rounded-[11px] flex items-center justify-center shrink-0\",\n        dark ? \"text-neutral-100\" : \"text-ink-label\",\n      ].join(\" \")}\n      style={{\n        background: dark ? \"var(--tile-dark)\" : \"var(--tile)\",\n        boxShadow: dark ? \"var(--tile-dark-shadow)\" : \"var(--tile-shadow)\",\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function Card(props: CardProps) {\n  if (props.layout === \"stack\") {\n    const {\n      title,\n      badge,\n      subtitle,\n      note,\n      image,\n      imageSrc,\n      imageAlt = \"\",\n      imageBg,\n      actions,\n      className = \"\",\n      children,\n    } = props;\n\n    return (\n      <CardShell\n        as=\"article\"\n        className={className}\n        rail={actions}\n      >\n        {/* Hairline under the media so it reads as set into the face */}\n        <div className=\"relative h-52 shrink-0 overflow-hidden\" style={{ boxShadow: \"0 1px 0 var(--divider)\" }}>\n          <Media image={image} imageSrc={imageSrc} imageAlt={imageAlt} bg={imageBg} />\n        </div>\n\n        <div className=\"flex-1 flex flex-col p-6\">\n          {(title || badge) && (\n            <div className=\"flex items-center gap-2\">\n              {title && (\n                <h3 className=\"text-[17px] font-semibold text-ink tracking-[-0.015em] leading-snug\">{title}</h3>\n              )}\n              {badge}\n            </div>\n          )}\n          {subtitle && (\n            // Line breaks in the copy are for centred layouts; let it flow here\n            <p className=\"mt-1.5 text-[14px] text-ink-body leading-[1.55] text-pretty\">\n              {subtitle.replace(/\\n/g, \" \")}\n            </p>\n          )}\n          {children}\n          {note && (\n            <p className=\"mt-auto pt-5 text-[12px] text-ink-muted leading-relaxed text-pretty\">{note}</p>\n          )}\n        </div>\n      </CardShell>\n    );\n  }\n\n  const {\n    title,\n    subtitle,\n    icon,\n    image,\n    imageSrc,\n    imageAlt = \"\",\n    actions,\n    theme = \"light\",\n    className = \"\",\n    children,\n  } = props as SplitCardProps;\n  const dark = theme === \"dark\";\n\n  return (\n    <CardShell\n      as=\"article\"\n      theme={dark ? \"dark\" : \"light\"}\n      className={className}\n      faceClassName=\"flex-row! min-h-[220px]\"\n      rail={actions}\n    >\n      {/* The title is the hero: display-sized and pinned to the top. The\n          subtitle answers it from the bottom edge, so the two frame the\n          face between them instead of huddling in one corner.           */}\n      <div className=\"relative flex flex-col p-7 flex-1 min-w-0\">\n        {icon && <IconTile dark={dark}>{icon}</IconTile>}\n        {title && (\n          <h3\n            className={[\n              \"text-[34px] font-medium leading-[1.02] tracking-[-0.04em] text-balance max-w-[14ch]\",\n              icon ? \"mt-5\" : \"\",\n              dark ? \"text-white\" : \"text-ink\",\n            ].join(\" \")}\n          >\n            {title}\n          </h3>\n        )}\n        <div className=\"mt-auto pt-8 flex flex-col gap-2\">\n          {subtitle && (\n            <p className={[\"text-[14px] leading-[1.45] tracking-[-0.005em]\", dark ? \"text-neutral-500\" : \"text-ink-muted\"].join(\" \")}>{subtitle}</p>\n          )}\n          {children}\n        </div>\n      </div>\n      <div\n        className=\"relative w-[40%] shrink-0 overflow-hidden\"\n        style={{ boxShadow: dark ? \"-1px 0 0 var(--divider-dark)\" : \"-1px 0 0 var(--divider)\" }}\n      >\n        <Media\n          image={image}\n          imageSrc={imageSrc}\n          imageAlt={imageAlt}\n          dark={dark}\n          monogram={typeof title === \"string\" ? title.trim().charAt(0).toLowerCase() : undefined}\n        />\n      </div>\n    </CardShell>\n  );\n}\n\ninterface CardGridProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function CardGrid({ children, className = \"\" }: CardGridProps) {\n  return (\n    <div className={[\"grid grid-cols-1 sm:grid-cols-2 gap-4\", className].join(\" \")}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":["title","subtitle","image","imageSrc","imageAlt","actions","className","children"]}

package/dist/CardShell.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type Theme = "light" | "dark";
+interface CardShellProps {
+    theme?: Theme;
+    /** Controls and context: actions, attribution, deltas. Lives on the chassis. */
+    rail?: React.ReactNode;
+    /** "actions" for buttons; "text" for plain context, indented to the face's text edge */
+    railKind?: "actions" | "text";
+    as?: "div" | "figure" | "article";
+    className?: string;
+    faceClassName?: string;
+    children: React.ReactNode;
+}
+declare function CardShell({ theme, rail, railKind, as: Tag, className, faceClassName, children, }: CardShellProps): react_jsx_runtime.JSX.Element;
+
+export { CardShell };

package/dist/CardShell.js

@@ -0,0 +1,58 @@
+// ../../components/ui/CardShell.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CardShell({
+  theme = "light",
+  rail,
+  railKind = "actions",
+  as: Tag = "div",
+  className = "",
+  faceClassName = "",
+  children
+}) {
+  const dark = theme === "dark";
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      className: [
+        "rim relative m-0 rounded-[24px] p-1.5 flex flex-col h-full",
+        rail ? "pb-0" : "",
+        className
+      ].join(" "),
+      style: {
+        background: dark ? "var(--card-bezel-dark)" : "var(--card-bezel)",
+        boxShadow: dark ? "var(--card-dark-shadow)" : "var(--card-shadow)",
+        ["--rim"]: dark ? "var(--card-dark-rim)" : "var(--card-rim)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: ["relative flex-1 min-h-0 rounded-[18px] overflow-hidden flex flex-col", faceClassName].join(" "),
+            style: {
+              background: dark ? "var(--card-dark)" : "var(--card)",
+              boxShadow: dark ? "var(--card-face-dark-shadow)" : "var(--card-face-shadow)"
+            },
+            children
+          }
+        ),
+        rail && /* @__PURE__ */ jsx("div", { className: "relative shrink-0 px-1.5 pt-2.5 pb-3", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              // 40px = a small button's full height, so text rails and button
+              // rails come out the same height and line up across a row
+              "min-h-10 flex items-center gap-2 text-[12.5px]",
+              railKind === "text" ? "pl-[18px] pr-3 gap-2.5" : "",
+              dark ? "text-neutral-400" : "text-ink-muted"
+            ].join(" "),
+            children: rail
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  CardShell
+};
+//# sourceMappingURL=CardShell.js.map

package/dist/CardShell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/CardShell.tsx"],"sourcesContent":["import React from \"react\";\n\ntype Theme = \"light\" | \"dark\";\n\ninterface CardShellProps {\n  theme?: Theme;\n  /** Controls and context: actions, attribution, deltas. Lives on the chassis. */\n  rail?: React.ReactNode;\n  /** \"actions\" for buttons; \"text\" for plain context, indented to the face's text edge */\n  railKind?: \"actions\" | \"text\";\n  as?: \"div\" | \"figure\" | \"article\";\n  className?: string;\n  faceClassName?: string;\n  children: React.ReactNode;\n}\n\n/* Every card is built like every other object in the kit: a chassis (bezel)\n   holding a face. Content goes on the face; controls and context go on the\n   rail, the strip of chassis below it. The two are nearly the same tone —\n   the hairline around the face is what separates them.\n\n   Geometry, measured from the card's outer edge:\n   - chassis 24px radius, 6px bezel → face 18px radius (concentric)\n   - rail content sits 12px in from the left and bottom, 10px below the face\n   - a button's label then starts 30px in — the same edge as the face's text,\n     and plain-text rails are indented to that edge too                     */\nexport function CardShell({\n  theme = \"light\",\n  rail,\n  railKind = \"actions\",\n  as: Tag = \"div\",\n  className = \"\",\n  faceClassName = \"\",\n  children,\n}: CardShellProps) {\n  const dark = theme === \"dark\";\n\n  return (\n    <Tag\n      className={[\n        \"rim relative m-0 rounded-[24px] p-1.5 flex flex-col h-full\",\n        rail ? \"pb-0\" : \"\",\n        className,\n      ].join(\" \")}\n      style={{\n        background: dark ? \"var(--card-bezel-dark)\" : \"var(--card-bezel)\",\n        boxShadow: dark ? \"var(--card-dark-shadow)\" : \"var(--card-shadow)\",\n        [\"--rim\" as string]: dark ? \"var(--card-dark-rim)\" : \"var(--card-rim)\",\n      } as React.CSSProperties}\n    >\n      <div\n        className={[\"relative flex-1 min-h-0 rounded-[18px] overflow-hidden flex flex-col\", faceClassName].join(\" \")}\n        style={{\n          background: dark ? \"var(--card-dark)\" : \"var(--card)\",\n          boxShadow: dark ? \"var(--card-face-dark-shadow)\" : \"var(--card-face-shadow)\",\n        }}\n      >\n        {children}\n      </div>\n\n      {rail && (\n        <div className=\"relative shrink-0 px-1.5 pt-2.5 pb-3\">\n          <div\n            className={[\n              // 40px = a small button's full height, so text rails and button\n              // rails come out the same height and line up across a row\n              \"min-h-10 flex items-center gap-2 text-[12.5px]\",\n              railKind === \"text\" ? \"pl-[18px] pr-3 gap-2.5\" : \"\",\n              dark ? \"text-neutral-400\" : \"text-ink-muted\",\n            ].join(\" \")}\n          >\n            {rail}\n          </div>\n        </div>\n      )}\n    </Tag>\n  );\n}\n"],"mappings":";AAsCI,SAYE,KAZF;AAZG,SAAS,UAAU;AAAA,EACxB,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,IAAI,MAAM;AAAA,EACV,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AACF,GAAmB;AACjB,QAAM,OAAO,UAAU;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,OAAO,SAAS;AAAA,QAChB;AAAA,MACF,EAAE,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,YAAY,OAAO,2BAA2B;AAAA,QAC9C,WAAW,OAAO,4BAA4B;AAAA,QAC9C,CAAC,OAAiB,GAAG,OAAO,yBAAyB;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,CAAC,wEAAwE,aAAa,EAAE,KAAK,GAAG;AAAA,YAC3G,OAAO;AAAA,cACL,YAAY,OAAO,qBAAqB;AAAA,cACxC,WAAW,OAAO,iCAAiC;AAAA,YACrD;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAEC,QACC,oBAAC,SAAI,WAAU,wCACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA;AAAA;AAAA,cAGT;AAAA,cACA,aAAa,SAAS,2BAA2B;AAAA,cACjD,OAAO,qBAAqB;AAAA,YAC9B,EAAE,KAAK,GAAG;AAAA,YAET;AAAA;AAAA,QACH,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/Carousel.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface CarouselProps {
+    items: React.ReactNode[];
+    autoPlay?: boolean;
+    interval?: number;
+    className?: string;
+}
+declare function Carousel({ items, autoPlay, interval, className, }: CarouselProps): react_jsx_runtime.JSX.Element;
+type SlideTheme = "dark" | "light" | "tint";
+interface CarouselSlideProps {
+    theme?: SlideTheme;
+    /** Background for the "tint" theme */
+    tint?: string;
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    meta?: React.ReactNode;
+}
+declare function CarouselSlide({ theme, tint, icon, title, meta }: CarouselSlideProps): react_jsx_runtime.JSX.Element;
+
+export { Carousel, CarouselSlide };

package/dist/Carousel.js

@@ -0,0 +1,247 @@
+"use client";
+
+// ../../components/ui/Carousel.tsx
+import { useState, useEffect, useRef } from "react";
+import { Button } from "./Button.js";
+import { CardShell } from "./CardShell.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SLIDE_MS = 680;
+function Carousel({
+  items,
+  autoPlay = false,
+  interval = 4e3,
+  className = ""
+}) {
+  const [slots, setSlots] = useState([
+    { itemIndex: 0, key: "s-0-0", role: "current" }
+  ]);
+  const [direction, setDirection] = useState("right");
+  const [currentIdx, setCurrentIdx] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const currentIdxRef = useRef(0);
+  const lockedRef = useRef(false);
+  const tcRef = useRef(0);
+  const cleanupRef = useRef(null);
+  const go = (nextIdx, dir) => {
+    if (lockedRef.current || nextIdx === currentIdxRef.current) return;
+    const prevIdx = currentIdxRef.current;
+    const tc = ++tcRef.current;
+    lockedRef.current = true;
+    currentIdxRef.current = nextIdx;
+    setDirection(dir);
+    setCurrentIdx(nextIdx);
+    setSlots([
+      { itemIndex: nextIdx, key: `c-${nextIdx}-${tc}`, role: "current" },
+      { itemIndex: prevIdx, key: `p-${prevIdx}-${tc}`, role: "prev" }
+    ]);
+    if (cleanupRef.current) clearTimeout(cleanupRef.current);
+    cleanupRef.current = setTimeout(() => {
+      setSlots([{ itemIndex: nextIdx, key: `c-${nextIdx}-${tc}`, role: "current" }]);
+      lockedRef.current = false;
+    }, SLIDE_MS + 20);
+  };
+  const goNext = () => go((currentIdxRef.current + 1) % items.length, "right");
+  const goPrev = () => go((currentIdxRef.current - 1 + items.length) % items.length, "left");
+  const goNextRef = useRef(goNext);
+  useEffect(() => {
+    goNextRef.current = goNext;
+  });
+  useEffect(() => {
+    if (!autoPlay || paused) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const id = setInterval(() => goNextRef.current(), interval);
+    return () => clearInterval(id);
+  }, [autoPlay, interval, paused]);
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      goNextRef.current();
+    }
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      goPrev();
+    }
+  };
+  useEffect(() => () => {
+    if (cleanupRef.current) clearTimeout(cleanupRef.current);
+  }, []);
+  const dragRef = useRef({ x: 0, y: 0, active: false });
+  const THRESHOLD = 48;
+  const onPointerDown = (e) => {
+    dragRef.current = { x: e.clientX, y: e.clientY, active: true };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onPointerUp = (e) => {
+    if (!dragRef.current.active) return;
+    const dx = e.clientX - dragRef.current.x;
+    const dy = e.clientY - dragRef.current.y;
+    dragRef.current.active = false;
+    if (Math.abs(dx) > THRESHOLD && Math.abs(dx) > Math.abs(dy) * 1.5) {
+      if (dx < 0) goNextRef.current();
+      else goPrev();
+    }
+  };
+  const onPointerCancel = () => {
+    dragRef.current.active = false;
+  };
+  const slide = (role) => (el) => {
+    if (!el || el.dataset.animated || slots.length < 2) return;
+    el.dataset.animated = "1";
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const sign = direction === "right" ? 1 : -1;
+    const frames = role === "current" ? [{ transform: `translateX(${sign * 100}%)` }, { transform: "translateX(0)" }] : [{ transform: "translateX(0)" }, { transform: `translateX(${-sign * 100}%)` }];
+    el.animate(frames, { duration: SLIDE_MS, easing: "cubic-bezier(0.22, 1, 0.36, 1)", fill: "both" });
+  };
+  const controls = /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex items-center gap-1 rounded-full p-[5px]",
+          style: { background: "var(--well)", boxShadow: "var(--well-shadow)" },
+          children: items.map((_, i) => {
+            const active = i === currentIdx;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => go(i, i > currentIdxRef.current ? "right" : "left"),
+                className: [
+                  "relative h-1.5 rounded-full overflow-hidden cursor-pointer",
+                  "transition-[width,background] duration-300 ease-[var(--ease-out-soft)]",
+                  "after:absolute after:-inset-2 after:content-['']",
+                  active ? "w-6 bg-ink/15" : "w-1.5 bg-ink/20 hover:bg-ink/40"
+                ].join(" "),
+                "aria-label": `Go to slide ${i + 1}`,
+                "aria-current": active ? "true" : void 0,
+                children: active && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: ["absolute inset-0 rounded-full origin-left", autoPlay ? "carousel-progress" : ""].join(" "),
+                    style: {
+                      background: "var(--face-inverse)",
+                      animationDuration: `${interval}ms`,
+                      animationPlayState: paused ? "paused" : "running"
+                    }
+                  },
+                  `${currentIdx}-${autoPlay}`
+                )
+              },
+              i
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-[12px] font-medium text-ink-body tabular-nums", children: [
+        currentIdx + 1,
+        /* @__PURE__ */ jsxs("span", { className: "text-ink-faint", children: [
+          " / ",
+          items.length
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", square: true, onClick: goPrev, "aria-label": "Previous slide", children: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", square: true, onClick: goNext, "aria-label": "Next slide", children: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) }) })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-roledescription": "carousel",
+      "aria-label": "Carousel",
+      onKeyDown,
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setPaused(false);
+      },
+      className,
+      children: /* @__PURE__ */ jsx(CardShell, { rail: controls, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "relative w-full overflow-hidden cursor-grab active:cursor-grabbing touch-pan-y",
+          style: { minHeight: 300 },
+          "aria-live": autoPlay && !paused ? "off" : "polite",
+          onPointerDown,
+          onPointerUp,
+          onPointerCancel,
+          children: slots.map((slot) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "group",
+              "aria-roledescription": "slide",
+              "aria-label": `${slot.itemIndex + 1} of ${items.length}`,
+              "aria-hidden": slot.role === "prev",
+              ref: slide(slot.role),
+              className: ["absolute inset-0 will-change-transform [backface-visibility:hidden]", slot.role === "prev" ? "pointer-events-none" : ""].join(" "),
+              children: items[slot.itemIndex]
+            },
+            slot.key
+          ))
+        }
+      ) })
+    }
+  );
+}
+function CarouselSlide({ theme = "dark", tint = "#8A8E7A", icon, title, meta }) {
+  const dark = theme !== "light";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative w-full h-full flex flex-col justify-end gap-6 p-8 overflow-hidden select-none",
+      style: {
+        background: theme === "dark" ? "var(--card-dark)" : theme === "light" ? "var(--card)" : tint
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-y-0 right-0 w-3/5",
+            style: {
+              backgroundImage: `radial-gradient(${theme === "tint" ? "var(--media-dots-on-colour)" : dark ? "var(--media-dots-dark)" : "var(--slide-dots)"} 1px, transparent 1px)`,
+              backgroundSize: "12px 12px",
+              maskImage: "radial-gradient(60% 70% at 70% 50%, black 0%, transparent 100%)",
+              WebkitMaskImage: "radial-gradient(60% 70% at 70% 50%, black 0%, transparent 100%)"
+            }
+          }
+        ),
+        icon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: [
+              "relative w-9 h-9 rounded-[11px] flex items-center justify-center mb-auto",
+              dark ? "text-neutral-100" : "text-ink-label"
+            ].join(" "),
+            style: {
+              background: dark ? "var(--tile-dark)" : "var(--tile)",
+              boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)"
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: [
+                "text-[22px] font-medium leading-[1.2] tracking-[-0.015em] mb-2",
+                dark ? "text-white" : "text-ink"
+              ].join(" "),
+              children: title
+            }
+          ),
+          meta && /* @__PURE__ */ jsx("p", { className: ["text-[13px]", theme === "tint" ? "text-white/65" : dark ? "text-neutral-400" : "text-ink-muted"].join(" "), children: meta })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Carousel,
+  CarouselSlide
+};
+//# sourceMappingURL=Carousel.js.map

package/dist/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Button } from \"./Button\";\nimport { CardShell } from \"./CardShell\";\n\ninterface CarouselProps {\n  items: React.ReactNode[];\n  autoPlay?: boolean;\n  interval?: number;\n  className?: string;\n}\n\nconst SLIDE_MS = 680;\n\ninterface Slot {\n  itemIndex: number;\n  key: string;\n  role: \"current\" | \"prev\";\n}\n\nexport function Carousel({\n  items,\n  autoPlay = false,\n  interval = 4000,\n  className = \"\",\n}: CarouselProps) {\n  const [slots, setSlots] = useState<Slot[]>([\n    { itemIndex: 0, key: \"s-0-0\", role: \"current\" },\n  ]);\n  const [direction, setDirection] = useState<\"left\" | \"right\">(\"right\");\n  const [currentIdx, setCurrentIdx] = useState(0);\n  // Autoplay never moves content out from under someone looking at it\n  const [paused, setPaused] = useState(false);\n\n  const currentIdxRef = useRef(0);\n  const lockedRef     = useRef(false);\n  const tcRef         = useRef(0);\n  const cleanupRef    = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const go = (nextIdx: number, dir: \"left\" | \"right\") => {\n    if (lockedRef.current || nextIdx === currentIdxRef.current) return;\n\n    const prevIdx = currentIdxRef.current;\n    const tc      = ++tcRef.current;\n\n    lockedRef.current  = true;\n    currentIdxRef.current = nextIdx;\n\n    setDirection(dir);\n    setCurrentIdx(nextIdx);\n    setSlots([\n      { itemIndex: nextIdx, key: `c-${nextIdx}-${tc}`, role: \"current\" },\n      { itemIndex: prevIdx, key: `p-${prevIdx}-${tc}`, role: \"prev\"    },\n    ]);\n\n    if (cleanupRef.current) clearTimeout(cleanupRef.current);\n    cleanupRef.current = setTimeout(() => {\n      setSlots([{ itemIndex: nextIdx, key: `c-${nextIdx}-${tc}`, role: \"current\" }]);\n      lockedRef.current = false;\n    }, SLIDE_MS + 20);\n  };\n\n  const goNext = () => go((currentIdxRef.current + 1) % items.length, \"right\");\n  const goPrev = () => go((currentIdxRef.current - 1 + items.length) % items.length, \"left\");\n\n  // Kept current after each render so the autoplay timer never goes stale\n  const goNextRef = useRef(goNext);\n  useEffect(() => {\n    goNextRef.current = goNext;\n  });\n\n  useEffect(() => {\n    if (!autoPlay || paused) return;\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const id = setInterval(() => goNextRef.current(), interval);\n    return () => clearInterval(id);\n  }, [autoPlay, interval, paused]);\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"ArrowRight\") { e.preventDefault(); goNextRef.current(); }\n    if (e.key === \"ArrowLeft\") { e.preventDefault(); goPrev(); }\n  };\n\n  useEffect(() => () => { if (cleanupRef.current) clearTimeout(cleanupRef.current); }, []);\n\n  // ── Swipe / pointer drag ──────────────────────────────────────────\n  const dragRef   = useRef<{ x: number; y: number; active: boolean }>({ x: 0, y: 0, active: false });\n  const THRESHOLD = 48;\n\n  const onPointerDown = (e: React.PointerEvent) => {\n    dragRef.current = { x: e.clientX, y: e.clientY, active: true };\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n  };\n\n  const onPointerUp = (e: React.PointerEvent) => {\n    if (!dragRef.current.active) return;\n    const dx = e.clientX - dragRef.current.x;\n    const dy = e.clientY - dragRef.current.y;\n    dragRef.current.active = false;\n    if (Math.abs(dx) > THRESHOLD && Math.abs(dx) > Math.abs(dy) * 1.5) {\n      if (dx < 0) goNextRef.current();\n      else goPrev();\n    }\n  };\n\n  const onPointerCancel = () => { dragRef.current.active = false; };\n\n  /* A plain slide: the incoming and outgoing slides travel together as\n     one strip, a full width each. The curve is a strong ease-out, so the\n     strip moves the instant you click and then settles — an ease-in-out\n     hesitates first, which reads as lag. Driven by the Web Animations API\n     on mount, so it never depends on a stylesheet.                     */\n  const slide = (role: Slot[\"role\"]) => (el: HTMLDivElement | null) => {\n    if (!el || el.dataset.animated || slots.length < 2) return;\n    el.dataset.animated = \"1\";\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const sign = direction === \"right\" ? 1 : -1;\n    const frames =\n      role === \"current\"\n        ? [{ transform: `translateX(${sign * 100}%)` }, { transform: \"translateX(0)\" }]\n        : [{ transform: \"translateX(0)\" }, { transform: `translateX(${-sign * 100}%)` }];\n    el.animate(frames, { duration: SLIDE_MS, easing: \"cubic-bezier(0.22, 1, 0.36, 1)\", fill: \"both\" });\n  };\n\n  const controls = (\n    <div className=\"w-full flex items-center justify-between\">\n      <div className=\"flex items-center gap-3 pl-1.5\">\n        {/* Dots sit in a well; the active one fills over the autoplay\n            interval, and the fill holds while autoplay is paused        */}\n        <div\n          className=\"flex items-center gap-1 rounded-full p-[5px]\"\n          style={{ background: \"var(--well)\", boxShadow: \"var(--well-shadow)\" }}\n        >\n          {items.map((_, i) => {\n            const active = i === currentIdx;\n            return (\n              <button\n                key={i}\n                onClick={() => go(i, i > currentIdxRef.current ? \"right\" : \"left\")}\n                className={[\n                  \"relative h-1.5 rounded-full overflow-hidden cursor-pointer\",\n                  \"transition-[width,background] duration-300 ease-[var(--ease-out-soft)]\",\n                  \"after:absolute after:-inset-2 after:content-['']\",\n                  active ? \"w-6 bg-ink/15\" : \"w-1.5 bg-ink/20 hover:bg-ink/40\",\n                ].join(\" \")}\n                aria-label={`Go to slide ${i + 1}`}\n                aria-current={active ? \"true\" : undefined}\n              >\n                {active && (\n                  <span\n                    key={`${currentIdx}-${autoPlay}`}\n                    aria-hidden\n                    className={[\"absolute inset-0 rounded-full origin-left\", autoPlay ? \"carousel-progress\" : \"\"].join(\" \")}\n                    style={{\n                      background: \"var(--face-inverse)\",\n                      animationDuration: `${interval}ms`,\n                      animationPlayState: paused ? \"paused\" : \"running\",\n                    }}\n                  />\n                )}\n              </button>\n            );\n          })}\n        </div>\n        <span className=\"text-[12px] font-medium text-ink-body tabular-nums\">\n          {currentIdx + 1}\n          <span className=\"text-ink-faint\"> / {items.length}</span>\n        </span>\n      </div>\n\n      <div className=\"flex gap-2\">\n        <Button variant=\"secondary\" size=\"sm\" square onClick={goPrev} aria-label=\"Previous slide\">\n          <svg width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n          </svg>\n        </Button>\n        <Button variant=\"secondary\" size=\"sm\" square onClick={goNext} aria-label=\"Next slide\">\n          <svg width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n          </svg>\n        </Button>\n      </div>\n    </div>\n  );\n\n  /* Built on the card chassis like every other surface: slides are the\n     face, controls live on the rail below it.                          */\n  return (\n    <section\n      aria-roledescription=\"carousel\"\n      aria-label=\"Carousel\"\n      onKeyDown={onKeyDown}\n      onMouseEnter={() => setPaused(true)}\n      onMouseLeave={() => setPaused(false)}\n      onFocus={() => setPaused(true)}\n      onBlur={(e) => {\n        if (!e.currentTarget.contains(e.relatedTarget as Node)) setPaused(false);\n      }}\n      className={className}\n    >\n      <CardShell rail={controls}>\n        <div\n          className=\"relative w-full overflow-hidden cursor-grab active:cursor-grabbing touch-pan-y\"\n          style={{ minHeight: 300 }}\n          aria-live={autoPlay && !paused ? \"off\" : \"polite\"}\n          onPointerDown={onPointerDown}\n          onPointerUp={onPointerUp}\n          onPointerCancel={onPointerCancel}\n        >\n          {slots.map((slot) => (\n            <div\n              key={slot.key}\n              role=\"group\"\n              aria-roledescription=\"slide\"\n              aria-label={`${slot.itemIndex + 1} of ${items.length}`}\n              aria-hidden={slot.role === \"prev\"}\n              ref={slide(slot.role)}\n              className={[\"absolute inset-0 will-change-transform [backface-visibility:hidden]\", slot.role === \"prev\" ? \"pointer-events-none\" : \"\"].join(\" \")}\n            >\n              {items[slot.itemIndex]}\n            </div>\n          ))}\n        </div>\n      </CardShell>\n    </section>\n  );\n}\n\ntype SlideTheme = \"dark\" | \"light\" | \"tint\";\n\ninterface CarouselSlideProps {\n  theme?: SlideTheme;\n  /** Background for the \"tint\" theme */\n  tint?: string;\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  meta?: React.ReactNode;\n}\n\n/* A ready-made slide in the cards' vocabulary: the card's own material,\n   a raised icon tile, and the same fading dot grid as empty media.    */\nexport function CarouselSlide({ theme = \"dark\", tint = \"#8A8E7A\", icon, title, meta }: CarouselSlideProps) {\n  const dark = theme !== \"light\";\n  return (\n    <div\n      className=\"relative w-full h-full flex flex-col justify-end gap-6 p-8 overflow-hidden select-none\"\n      style={{\n        background: theme === \"dark\" ? \"var(--card-dark)\" : theme === \"light\" ? \"var(--card)\" : tint,\n      }}\n    >\n      <div\n        aria-hidden\n        className=\"absolute inset-y-0 right-0 w-3/5\"\n        style={{\n          backgroundImage: `radial-gradient(${\n            theme === \"tint\" ? \"var(--media-dots-on-colour)\" : dark ? \"var(--media-dots-dark)\" : \"var(--slide-dots)\"\n          } 1px, transparent 1px)`,\n          backgroundSize: \"12px 12px\",\n          maskImage: \"radial-gradient(60% 70% at 70% 50%, black 0%, transparent 100%)\",\n          WebkitMaskImage: \"radial-gradient(60% 70% at 70% 50%, black 0%, transparent 100%)\",\n        }}\n      />\n      {icon && (\n        <div\n          aria-hidden\n          className={[\n            \"relative w-9 h-9 rounded-[11px] flex items-center justify-center mb-auto\",\n            dark ? \"text-neutral-100\" : \"text-ink-label\",\n          ].join(\" \")}\n          style={{\n            background: dark ? \"var(--tile-dark)\" : \"var(--tile)\",\n            boxShadow: dark ? \"var(--tile-dark-shadow)\" : \"var(--tile-shadow)\",\n          }}\n        >\n          {icon}\n        </div>\n      )}\n      <div className=\"relative\">\n        <p\n          className={[\n            \"text-[22px] font-medium leading-[1.2] tracking-[-0.015em] mb-2\",\n            dark ? \"text-white\" : \"text-ink\",\n          ].join(\" \")}\n        >\n          {title}\n        </p>\n        {meta && (\n          <p className={[\"text-[13px]\", theme === \"tint\" ? \"text-white/65\" : dark ? \"text-neutral-400\" : \"text-ink-muted\"].join(\" \")}>\n            {meta}\n          </p>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/Checkbox.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CheckboxProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    className?: string;
+}
+declare function Checkbox({ checked, defaultChecked, onChange, label, description, disabled, indeterminate, className, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+export { Checkbox };