cortena-ui 1.3.0 → 1.4.0

package/dist/components/breadcrumb.js

@@ -0,0 +1,123 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { renderWith } from "../lib/render.js";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/breadcrumb.tsx
+/**
+* Breadcrumb — the trail above a page title.
+*
+* A `<nav aria-label="Breadcrumb">` around an ordered list, which is what
+* assistive technology expects: the list order is the hierarchy, so a screen
+* reader announces "list, 4 items" and reads the path in order. Separators are
+* decorative list items, not text inside the links, so a link's accessible
+* name is the crumb and nothing else.
+*
+* The last crumb is `BreadcrumbPage`, not a link: it is the page you are on,
+* so it carries `aria-current="page"` and is not focusable. Everything before
+* it is a `BreadcrumbLink`.
+*
+* ```tsx
+* <Breadcrumb>
+*   <BreadcrumbList>
+*     <BreadcrumbItem>
+*       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+*     </BreadcrumbItem>
+*     <BreadcrumbSeparator />
+*     <BreadcrumbItem>
+*       <BreadcrumbEllipsis />
+*     </BreadcrumbItem>
+*     <BreadcrumbSeparator />
+*     <BreadcrumbItem>
+*       <BreadcrumbPage>Invoice 4021</BreadcrumbPage>
+*     </BreadcrumbItem>
+*   </BreadcrumbList>
+* </Breadcrumb>
+* ```
+*
+* **Router links.** `BreadcrumbLink` renders an `<a>` by default. Pass
+* `render` with the router's link component and the class name, `href` and
+* handlers are merged onto it, the same contract as `ButtonLink`:
+* `render={<NextLink href="/projects" />}` or
+* `render={<Link to="/projects" />}`. This is deliberately not Base UI's
+* `render` — a breadcrumb is markup, not a Base UI primitive — but it takes
+* the same shape so there is one thing to remember.
+*/
+function Breadcrumb({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "breadcrumb",
+		"aria-label": "Breadcrumb",
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+function BreadcrumbList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: cn("flex flex-wrap items-center gap-1.5 break-words p-0 sm:gap-2", "list-none text-[length:var(--ds-text-caption-lg)]", "leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+function BreadcrumbItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: cn("inline-flex min-w-0 items-center gap-1.5", className),
+		...props
+	});
+}
+function BreadcrumbLink({ className, render, children, ...props }) {
+	const merged = {
+		...props,
+		"data-slot": "breadcrumb-link",
+		className: cn("truncate rounded-[var(--ds-radius-sm)] text-[color:var(--ds-muted-foreground)] no-underline", "transition-colors duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "hover:text-[color:var(--ds-foreground)] hover:underline underline-offset-4", "outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "[&_svg]:size-3.5 [&_svg]:shrink-0", className)
+	};
+	return renderWith(render, merged, children, "a");
+}
+/**
+* The current page: the last crumb, which is not a link.
+*
+* A plain `<span aria-current="page">`, deliberately not `role="link"` with
+* `aria-disabled` — a disabled link that cannot be focused is a fiction, and
+* it makes `getByRole("link")` return a crumb that navigates nowhere. With a
+* span, the roles in the trail are exactly the crumbs you can travel to.
+*/
+function BreadcrumbPage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-page",
+		"aria-current": "page",
+		className: cn("truncate font-medium text-[color:var(--ds-foreground)]", className),
+		...props
+	});
+}
+/** Decorative divider between two crumbs; a chevron unless children replace it. */
+function BreadcrumbSeparator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("inline-flex shrink-0 items-center text-[color:var(--ds-text-tertiary)] [&_svg]:size-3.5", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+	});
+}
+/**
+* Stands in for the crumbs a long trail collapses; put it inside a
+* BreadcrumbItem. The glyph is hidden and the label is not: an ellipsis that
+* announces nothing leaves a screen-reader user with a gap in the path.
+*/
+function BreadcrumbEllipsis({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		className: cn("inline-flex size-5 items-center justify-center text-[color:var(--ds-text-tertiary)]", "[&_svg]:size-3.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: children ?? "More levels"
+		})]
+	});
+}
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+
+//# sourceMappingURL=breadcrumb.js.map

package/dist/components/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../src/components/breadcrumb.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { renderWith, type RenderProp } from \"@/lib/render\";\n\n/**\n * Breadcrumb — the trail above a page title.\n *\n * A `<nav aria-label=\"Breadcrumb\">` around an ordered list, which is what\n * assistive technology expects: the list order is the hierarchy, so a screen\n * reader announces \"list, 4 items\" and reads the path in order. Separators are\n * decorative list items, not text inside the links, so a link's accessible\n * name is the crumb and nothing else.\n *\n * The last crumb is `BreadcrumbPage`, not a link: it is the page you are on,\n * so it carries `aria-current=\"page\"` and is not focusable. Everything before\n * it is a `BreadcrumbLink`.\n *\n * ```tsx\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem>\n *       <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n *     </BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem>\n *       <BreadcrumbEllipsis />\n *     </BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem>\n *       <BreadcrumbPage>Invoice 4021</BreadcrumbPage>\n *     </BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n * ```\n *\n * **Router links.** `BreadcrumbLink` renders an `<a>` by default. Pass\n * `render` with the router's link component and the class name, `href` and\n * handlers are merged onto it, the same contract as `ButtonLink`:\n * `render={<NextLink href=\"/projects\" />}` or\n * `render={<Link to=\"/projects\" />}`. This is deliberately not Base UI's\n * `render` — a breadcrumb is markup, not a Base UI primitive — but it takes\n * the same shape so there is one thing to remember.\n */\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      data-slot=\"breadcrumb\"\n      aria-label=\"Breadcrumb\"\n      className={cn(\"min-w-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 break-words p-0 sm:gap-2\",\n        \"list-none text-[length:var(--ds-text-caption-lg)]\",\n        \"leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex min-w-0 items-center gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface BreadcrumbLinkProps extends React.ComponentProps<\"a\"> {\n  /** Replace the rendered `<a>` with a router link; props are merged onto it. */\n  render?: RenderProp;\n}\n\nfunction BreadcrumbLink({ className, render, children, ...props }: BreadcrumbLinkProps) {\n  const merged = {\n    ...props,\n    \"data-slot\": \"breadcrumb-link\",\n    className: cn(\n      \"truncate rounded-[var(--ds-radius-sm)] text-[color:var(--ds-muted-foreground)] no-underline\",\n      \"transition-colors duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n      \"hover:text-[color:var(--ds-foreground)] hover:underline underline-offset-4\",\n      \"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n      \"[&_svg]:size-3.5 [&_svg]:shrink-0\",\n      className,\n    ),\n  };\n  return renderWith(render, merged, children, \"a\");\n}\n\n/**\n * The current page: the last crumb, which is not a link.\n *\n * A plain `<span aria-current=\"page\">`, deliberately not `role=\"link\"` with\n * `aria-disabled` — a disabled link that cannot be focused is a fiction, and\n * it makes `getByRole(\"link\")` return a crumb that navigates nowhere. With a\n * span, the roles in the trail are exactly the crumbs you can travel to.\n */\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      aria-current=\"page\"\n      className={cn(\"truncate font-medium text-[color:var(--ds-foreground)]\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Decorative divider between two crumbs; a chevron unless children replace it. */\nfunction BreadcrumbSeparator({ className, children, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"inline-flex shrink-0 items-center text-[color:var(--ds-text-tertiary)] [&_svg]:size-3.5\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  );\n}\n\n/**\n * Stands in for the crumbs a long trail collapses; put it inside a\n * BreadcrumbItem. The glyph is hidden and the label is not: an ellipsis that\n * announces nothing leaves a screen-reader user with a gap in the path.\n */\nfunction BreadcrumbEllipsis({ className, children, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      className={cn(\n        \"inline-flex size-5 items-center justify-center text-[color:var(--ds-text-tertiary)]\",\n        \"[&_svg]:size-3.5\",\n        className,\n      )}\n      {...props}\n    >\n      <MoreHorizontal aria-hidden />\n      <span className=\"sr-only\">{children ?? \"More levels\"}</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAW;EACX,WAAW,GAAG,WAAW,SAAS;EAClC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;CAC3E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,gEACA,qDACA,4FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;CAC3E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,eAAe,EAAE,WAAW,QAAQ,UAAU,GAAG,SAA8B;CACtF,MAAM,SAAS;EACb,GAAG;EACH,aAAa;EACb,WAAW,GACT,+FACA,kFACA,8EACA,gFACA,qCACA,SACF;CACF;CACA,OAAO,WAAW,QAAQ,QAAQ,UAAU,GAAG;AACjD;;;;;;;;;AAUA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,gBAAa;EACb,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,oBAAoB,EAAE,WAAW,UAAU,GAAG,SAAqC;CAC1F,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GACT,2FACA,SACF;EACA,GAAI;EAEH,UAAA,YAAY,oBAAC,cAAD,CAAe,CAAA;CAC1B,CAAA;AAER;;;;;;AAOA,SAAS,mBAAmB,EAAE,WAAW,UAAU,GAAG,SAAuC;CAC3F,OACE,qBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,uFACA,oBACA,SACF;EACA,GAAI;EAPN,UAAA,CASE,oBAAC,gBAAD,EAAgB,eAAA,KAAa,CAAA,GAC7B,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA,YAAY;EAAoB,CAAA,CACvD;;AAEV"}

package/dist/components/button-link.d.ts

@@ -0,0 +1,28 @@
+"use client";
+import { RenderProp } from "../lib/render.js";
+import { ButtonProps } from "./button.js";
+import * as React from "react";
+//#region src/components/button-link.d.ts
+/**
+ * An anchor that looks like a Button and keeps link semantics.
+ *
+ * `Button render={<a />}` makes Base UI treat the anchor as a button (role,
+ * tabindex, its `nativeButton` warning), which demotes real navigation for
+ * assistive technology and breaks `getByRole("link")`. Navigation should stay
+ * an anchor. This is the migration target for every Radix-era
+ * `<Button asChild><Link /></Button>`.
+ *
+ * Framework routers: pass `render` with the router's link so the styling and
+ * `href` land on it, e.g. `render={<NextLink href="/x" />}`; otherwise it
+ * renders a plain `<a>`.
+ */
+export interface ButtonLinkProps extends Omit<React.ComponentProps<"a">, "children">, Pick<ButtonProps, "variant" | "size"> {
+  children?: React.ReactNode;
+  /** Replace the rendered `<a>` with a router link; props are merged onto it. */
+  render?: RenderProp;
+  disabled?: boolean;
+}
+declare function ButtonLink({ className, variant, size, render, disabled, children, ...props }: ButtonLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+//#endregion
+export { ButtonLink };
+//# sourceMappingURL=button-link.d.ts.map

package/dist/components/button-link.js

@@ -0,0 +1,24 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { renderWith } from "../lib/render.js";
+import { buttonVariants } from "./button.js";
+//#region src/components/button-link.tsx
+function ButtonLink({ className, variant, size, render, disabled, children, ...props }) {
+	const classes = cn(buttonVariants({
+		variant,
+		size
+	}), disabled && "pointer-events-none opacity-50", className);
+	const merged = {
+		...props,
+		"data-slot": "button-link",
+		className: classes,
+		"aria-disabled": disabled || void 0,
+		tabIndex: disabled ? -1 : props.tabIndex
+	};
+	return renderWith(render, merged, children, "a");
+}
+//#endregion
+export { ButtonLink };
+
+//# sourceMappingURL=button-link.js.map

package/dist/components/button-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-link.js","names":[],"sources":["../../src/components/button-link.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { renderWith, type RenderProp } from \"@/lib/render\";\nimport { buttonVariants, type ButtonProps } from \"@/components/button\";\n\n/**\n * An anchor that looks like a Button and keeps link semantics.\n *\n * `Button render={<a />}` makes Base UI treat the anchor as a button (role,\n * tabindex, its `nativeButton` warning), which demotes real navigation for\n * assistive technology and breaks `getByRole(\"link\")`. Navigation should stay\n * an anchor. This is the migration target for every Radix-era\n * `<Button asChild><Link /></Button>`.\n *\n * Framework routers: pass `render` with the router's link so the styling and\n * `href` land on it, e.g. `render={<NextLink href=\"/x\" />}`; otherwise it\n * renders a plain `<a>`.\n */\nexport interface ButtonLinkProps\n  extends Omit<React.ComponentProps<\"a\">, \"children\">,\n    Pick<ButtonProps, \"variant\" | \"size\"> {\n  children?: React.ReactNode;\n  /** Replace the rendered `<a>` with a router link; props are merged onto it. */\n  render?: RenderProp;\n  disabled?: boolean;\n}\n\nfunction ButtonLink({ className, variant, size, render, disabled, children, ...props }: ButtonLinkProps) {\n  const classes = cn(buttonVariants({ variant, size }), disabled && \"pointer-events-none opacity-50\", className);\n  const merged = {\n    ...props,\n    \"data-slot\": \"button-link\",\n    className: classes,\n    \"aria-disabled\": disabled || undefined,\n    tabIndex: disabled ? -1 : props.tabIndex,\n  };\n  return renderWith(render, merged, children, \"a\");\n}\n\nexport { ButtonLink };\n"],"mappings":";;;;;;AA6BA,SAAS,WAAW,EAAE,WAAW,SAAS,MAAM,QAAQ,UAAU,UAAU,GAAG,SAA0B;CACvG,MAAM,UAAU,GAAG,eAAe;EAAE;EAAS;CAAK,CAAC,GAAG,YAAY,kCAAkC,SAAS;CAC7G,MAAM,SAAS;EACb,GAAG;EACH,aAAa;EACb,WAAW;EACX,iBAAiB,YAAY,KAAA;EAC7B,UAAU,WAAW,KAAK,MAAM;CAClC;CACA,OAAO,WAAW,QAAQ,QAAQ,UAAU,GAAG;AACjD"}

package/dist/components/button.d.ts

@@ -0,0 +1,24 @@
+"use client";
+import { VariantProps } from "class-variance-authority";
+import { Button } from "@base-ui/react/button";
+import * as React from "react";
+//#region src/components/button.d.ts
+/**
+ * Button.
+ *
+ * Base UI supplies the behaviour (native button semantics, `focusableWhenDisabled`,
+ * keyboard activation on non-button elements through `render`). Every visual
+ * value is a cortena-design token; nothing here is a literal the lint would flag.
+ *
+ * Radix users: `asChild` is gone. Pass `render={<a href=... />}` to change the
+ * rendered element, which is Base UI's equivalent.
+ */
+declare const buttonVariants: (props?: ({
+  variant?: "link" | "destructive" | "secondary" | "outline" | "primary" | "ghost" | "soft" | null | undefined;
+  size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ComponentProps<typeof Button>, VariantProps<typeof buttonVariants> {}
+declare function Button$1({ className, variant, size, ...props }: ButtonProps): React.JSX.Element;
+//#endregion
+export { Button$1 as Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button.js

@@ -0,0 +1,65 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Button } from "@base-ui/react/button";
+//#region src/components/button.tsx
+/**
+* Button.
+*
+* Base UI supplies the behaviour (native button semantics, `focusableWhenDisabled`,
+* keyboard activation on non-button elements through `render`). Every visual
+* value is a cortena-design token; nothing here is a literal the lint would flag.
+*
+* Radix users: `asChild` is gone. Pass `render={<a href=... />}` to change the
+* rendered element, which is Base UI's equivalent.
+*/
+const buttonVariants = /* @__PURE__ */ cva([
+	"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap",
+	"font-medium",
+	"rounded-[var(--ds-radius-md)]",
+	"border",
+	"transition-[background-color,border-color,color,box-shadow,filter]",
+	"duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]",
+	"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40",
+	"disabled:pointer-events-none disabled:opacity-50",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0"
+], {
+	variants: {
+		variant: {
+			primary: "border-[var(--ds-primary)] bg-[var(--ds-primary)] text-[color:var(--ds-primary-foreground)] hover:border-[var(--ds-primary-hover)] hover:bg-[var(--ds-primary-hover)]",
+			secondary: "border-[var(--ds-border)] bg-[var(--ds-secondary)] text-[color:var(--ds-secondary-foreground)] hover:border-[var(--ds-border-strong)] hover:bg-[var(--ds-hover)]",
+			outline: "border-[var(--ds-border-strong)] bg-transparent text-[color:var(--ds-foreground)] hover:bg-[var(--ds-hover)]",
+			ghost: "border-transparent bg-transparent text-[color:var(--ds-muted-foreground)] hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]",
+			soft: "border-transparent bg-[var(--ds-primary-soft)] text-[color:var(--ds-primary-soft-foreground)] hover:bg-[var(--ds-primary-soft)] hover:brightness-95",
+			destructive: "border-[var(--ds-destructive)] bg-[var(--ds-destructive)] text-[color:var(--ds-destructive-foreground)] hover:brightness-110",
+			link: "border-transparent bg-transparent text-[color:var(--ds-primary)] underline-offset-4 hover:underline"
+		},
+		size: {
+			sm: "h-8 px-3 text-[length:var(--ds-text-caption)] rounded-[var(--ds-radius-sm)] [&_svg]:size-3.5",
+			md: "h-9 px-4 text-[length:var(--ds-text-caption-lg)] [&_svg]:size-4",
+			lg: "h-10 px-5 text-[length:var(--ds-text-body-sm)] [&_svg]:size-4",
+			icon: "size-9 [&_svg]:size-4",
+			"icon-sm": "size-8 rounded-[var(--ds-radius-sm)] [&_svg]:size-3.5"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+function Button$1({ className, variant, size, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "button",
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Button$1 as Button, buttonVariants };
+
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["Button","BaseButton"],"sources":["../../src/components/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Button.\n *\n * Base UI supplies the behaviour (native button semantics, `focusableWhenDisabled`,\n * keyboard activation on non-button elements through `render`). Every visual\n * value is a cortena-design token; nothing here is a literal the lint would flag.\n *\n * Radix users: `asChild` is gone. Pass `render={<a href=... />}` to change the\n * rendered element, which is Base UI's equivalent.\n */\nconst buttonVariants = /* @__PURE__ */ cva(\n  [\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap\",\n    \"font-medium\",\n    \"rounded-[var(--ds-radius-md)]\",\n    \"border\",\n    \"transition-[background-color,border-color,color,box-shadow,filter]\",\n    \"duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n    \"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary:\n          \"border-[var(--ds-primary)] bg-[var(--ds-primary)] text-[color:var(--ds-primary-foreground)] hover:border-[var(--ds-primary-hover)] hover:bg-[var(--ds-primary-hover)]\",\n        secondary:\n          \"border-[var(--ds-border)] bg-[var(--ds-secondary)] text-[color:var(--ds-secondary-foreground)] hover:border-[var(--ds-border-strong)] hover:bg-[var(--ds-hover)]\",\n        outline:\n          \"border-[var(--ds-border-strong)] bg-transparent text-[color:var(--ds-foreground)] hover:bg-[var(--ds-hover)]\",\n        ghost:\n          \"border-transparent bg-transparent text-[color:var(--ds-muted-foreground)] hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]\",\n        soft:\n          \"border-transparent bg-[var(--ds-primary-soft)] text-[color:var(--ds-primary-soft-foreground)] hover:bg-[var(--ds-primary-soft)] hover:brightness-95\",\n        destructive:\n          \"border-[var(--ds-destructive)] bg-[var(--ds-destructive)] text-[color:var(--ds-destructive-foreground)] hover:brightness-110\",\n        link: \"border-transparent bg-transparent text-[color:var(--ds-primary)] underline-offset-4 hover:underline\",\n      },\n      size: {\n        sm: \"h-8 px-3 text-[length:var(--ds-text-caption)] rounded-[var(--ds-radius-sm)] [&_svg]:size-3.5\",\n        md: \"h-9 px-4 text-[length:var(--ds-text-caption-lg)] [&_svg]:size-4\",\n        lg: \"h-10 px-5 text-[length:var(--ds-text-body-sm)] [&_svg]:size-4\",\n        icon: \"size-9 [&_svg]:size-4\",\n        \"icon-sm\": \"size-8 rounded-[var(--ds-radius-sm)] [&_svg]:size-3.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ComponentProps<typeof BaseButton>, VariantProps<typeof buttonVariants> {}\n\nfunction Button({ className, variant, size, ...props }: ButtonProps) {\n  return (\n    <BaseButton\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAM,iBAAiC,oBACrC;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WACE;GACF,SACE;GACF,OACE;GACF,MACE;GACF,aACE;GACF,MAAM;EACR;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WAAW;EACb;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAKA,SAASA,SAAO,EAAE,WAAW,SAAS,MAAM,GAAG,SAAsB;CACnE,OACE,oBAACC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL"}

package/dist/components/calendar.d.ts

@@ -0,0 +1,28 @@
+"use client";
+import * as React from "react";
+import { DayButtonProps, DayPickerProps } from "react-day-picker";
+//#region src/components/calendar.d.ts
+/**
+ * Calendar.
+ *
+ * The shadcn Calendar shape over react-day-picker 10. The library's stylesheet
+ * is not imported; every class comes from the `classNames` map below and every
+ * visual value in it is a cortena-design token. Structure (nav, caption, grid,
+ * dropdown caption) is DayPicker's; the day cells, nav buttons and chevrons are
+ * swapped for our Button and lucide icons through `components`.
+ *
+ * `showOutsideDays` defaults to true and `captionLayout` to `"label"`; pass
+ * `captionLayout="dropdown"` for native month/year selects in the caption.
+ */
+export type CalendarProps = DayPickerProps;
+/**
+ * One day cell's button. Selection and range state are exposed as data
+ * attributes so the classes below (and a consumer's) can paint them; the
+ * `today` attribute is only set when the day is not selected, so the soft
+ * fill never competes with the selected fill.
+ */
+declare function CalendarDayButton({ className, day, modifiers, ...props }: DayButtonProps): React.JSX.Element;
+declare function Calendar({ className, classNames, components, showOutsideDays, captionLayout, formatters, ...props }: CalendarProps): React.JSX.Element;
+//#endregion
+export { Calendar, CalendarDayButton };
+//# sourceMappingURL=calendar.d.ts.map

package/dist/components/calendar.js

@@ -0,0 +1,123 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+//#region src/components/calendar.tsx
+function CalendarRoot({ className, rootRef, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "calendar",
+		ref: rootRef,
+		className,
+		...props
+	});
+}
+function CalendarChevron({ className, orientation, size: _size, disabled, ...props }) {
+	return /* @__PURE__ */ jsx(orientation === "left" ? ChevronLeft : orientation === "right" ? ChevronRight : orientation === "up" ? ChevronUp : ChevronDown, {
+		"data-slot": "calendar-chevron",
+		"aria-hidden": true,
+		className: cn("size-4", disabled && "opacity-50", className),
+		...props
+	});
+}
+function CalendarPreviousMonthButton(props) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "calendar-previous-month",
+		variant: "outline",
+		size: "icon-sm",
+		...props
+	});
+}
+function CalendarNextMonthButton(props) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "calendar-next-month",
+		variant: "outline",
+		size: "icon-sm",
+		...props
+	});
+}
+/**
+* One day cell's button. Selection and range state are exposed as data
+* attributes so the classes below (and a consumer's) can paint them; the
+* `today` attribute is only set when the day is not selected, so the soft
+* fill never competes with the selected fill.
+*/
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+	const ref = React.useRef(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	const inRange = modifiers.range_start || modifiers.range_end || modifiers.range_middle;
+	const selectedSingle = modifiers.selected && !inRange;
+	const filled = selectedSingle || modifiers.range_start || modifiers.range_end;
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		"data-slot": "calendar-day-button",
+		"data-day": day.isoDate,
+		"data-selected-single": selectedSingle || void 0,
+		"data-range-start": modifiers.range_start || void 0,
+		"data-range-end": modifiers.range_end || void 0,
+		"data-range-middle": modifiers.range_middle && !filled || void 0,
+		"data-today": modifiers.today && !modifiers.selected || void 0,
+		variant: "ghost",
+		size: "icon-sm",
+		className: cn("size-8 font-normal text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]", "rounded-[var(--ds-radius-sm)] leading-none", "data-[today]:bg-[var(--ds-primary-soft)] data-[today]:text-[color:var(--ds-primary-soft-foreground)]", "data-[range-middle]:rounded-none data-[range-middle]:bg-[var(--ds-primary-soft)] data-[range-middle]:text-[color:var(--ds-primary-soft-foreground)] data-[range-middle]:hover:bg-[var(--ds-primary-soft)] data-[range-middle]:hover:brightness-95", "data-[selected-single]:bg-[var(--ds-primary)] data-[selected-single]:text-[color:var(--ds-primary-foreground)] data-[selected-single]:hover:bg-[var(--ds-primary-hover)] data-[selected-single]:hover:text-[color:var(--ds-primary-foreground)]", "data-[range-start]:bg-[var(--ds-primary)] data-[range-start]:text-[color:var(--ds-primary-foreground)] data-[range-start]:hover:bg-[var(--ds-primary-hover)] data-[range-start]:hover:text-[color:var(--ds-primary-foreground)]", "data-[range-end]:bg-[var(--ds-primary)] data-[range-end]:text-[color:var(--ds-primary-foreground)] data-[range-end]:hover:bg-[var(--ds-primary-hover)] data-[range-end]:hover:text-[color:var(--ds-primary-foreground)]", "group-data-[outside]/day:text-[color:var(--ds-text-tertiary)]", "group-data-[disabled]/day:text-[color:var(--ds-text-disabled)] group-data-[disabled]/day:opacity-50", className),
+		...props
+	});
+}
+function Calendar({ className, classNames, components, showOutsideDays = true, captionLayout = "label", formatters, ...props }) {
+	const defaults = getDefaultClassNames();
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		captionLayout,
+		className: cn("w-fit p-3 text-[color:var(--ds-foreground)]", className),
+		formatters: {
+			formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+			...formatters
+		},
+		classNames: {
+			root: cn("w-fit", defaults.root),
+			months: cn("relative flex flex-col gap-4 md:flex-row", defaults.months),
+			month: cn("flex w-full flex-col gap-3", defaults.month),
+			nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaults.nav),
+			button_previous: cn("aria-disabled:pointer-events-none aria-disabled:opacity-50", defaults.button_previous),
+			button_next: cn("aria-disabled:pointer-events-none aria-disabled:opacity-50", defaults.button_next),
+			month_caption: cn("flex h-8 w-full items-center justify-center px-9", defaults.month_caption),
+			caption_label: cn("select-none font-medium text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-foreground)]", captionLayout !== "label" && "flex h-8 items-center gap-1 rounded-[var(--ds-radius-sm)] pl-2 pr-1 [&>svg]:size-3.5 [&>svg]:text-[color:var(--ds-muted-foreground)]", defaults.caption_label),
+			dropdowns: cn("flex h-8 w-full items-center justify-center gap-1.5 font-medium text-[length:var(--ds-text-body-sm)]", defaults.dropdowns),
+			dropdown_root: cn("relative rounded-[var(--ds-radius-sm)] border border-[var(--ds-border)] bg-[var(--ds-muted)]", "has-focus-visible:border-[var(--ds-ring)] has-focus-visible:ring-[3px] has-focus-visible:ring-[var(--ds-ring)]/40", defaults.dropdown_root),
+			dropdown: cn("absolute inset-0 cursor-pointer opacity-0", defaults.dropdown),
+			month_grid: cn("w-full border-collapse", defaults.month_grid),
+			weekdays: cn("flex", defaults.weekdays),
+			weekday: cn("flex-1 select-none font-normal text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]", defaults.weekday),
+			week: cn("mt-1 flex w-full", defaults.week),
+			week_number_header: cn("w-8 select-none", defaults.week_number_header),
+			week_number: cn("select-none text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]", defaults.week_number),
+			day: cn("group/day relative aspect-square size-8 select-none p-0 text-center", defaults.day),
+			range_start: cn("rounded-l-[var(--ds-radius-sm)] bg-[var(--ds-primary-soft)]", defaults.range_start),
+			range_middle: cn("rounded-none bg-[var(--ds-primary-soft)]", defaults.range_middle),
+			range_end: cn("rounded-r-[var(--ds-radius-sm)] bg-[var(--ds-primary-soft)]", defaults.range_end),
+			today: defaults.today,
+			outside: defaults.outside,
+			disabled: defaults.disabled,
+			hidden: cn("invisible", defaults.hidden),
+			...classNames
+		},
+		components: {
+			Root: CalendarRoot,
+			Chevron: CalendarChevron,
+			PreviousMonthButton: CalendarPreviousMonthButton,
+			NextMonthButton: CalendarNextMonthButton,
+			DayButton: CalendarDayButton,
+			...components
+		},
+		...props
+	});
+}
+//#endregion
+export { Calendar, CalendarDayButton };
+
+//# sourceMappingURL=calendar.js.map

package/dist/components/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","names":[],"sources":["../../src/components/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type ChevronProps,\n  type DayButtonProps,\n  type DayPickerProps,\n  type NextMonthButtonProps,\n  type PreviousMonthButtonProps,\n  type RootProps,\n} from \"react-day-picker\";\nimport { Button } from \"@/components/button\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Calendar.\n *\n * The shadcn Calendar shape over react-day-picker 10. The library's stylesheet\n * is not imported; every class comes from the `classNames` map below and every\n * visual value in it is a cortena-design token. Structure (nav, caption, grid,\n * dropdown caption) is DayPicker's; the day cells, nav buttons and chevrons are\n * swapped for our Button and lucide icons through `components`.\n *\n * `showOutsideDays` defaults to true and `captionLayout` to `\"label\"`; pass\n * `captionLayout=\"dropdown\"` for native month/year selects in the caption.\n */\nexport type CalendarProps = DayPickerProps;\n\nfunction CalendarRoot({ className, rootRef, ...props }: RootProps) {\n  return <div data-slot=\"calendar\" ref={rootRef} className={className} {...props} />;\n}\n\nfunction CalendarChevron({ className, orientation, size: _size, disabled, ...props }: ChevronProps) {\n  const Icon =\n    orientation === \"left\"\n      ? ChevronLeft\n      : orientation === \"right\"\n        ? ChevronRight\n        : orientation === \"up\"\n          ? ChevronUp\n          : ChevronDown;\n  return (\n    <Icon\n      data-slot=\"calendar-chevron\"\n      aria-hidden\n      className={cn(\"size-4\", disabled && \"opacity-50\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CalendarPreviousMonthButton(props: PreviousMonthButtonProps) {\n  return <Button data-slot=\"calendar-previous-month\" variant=\"outline\" size=\"icon-sm\" {...props} />;\n}\n\nfunction CalendarNextMonthButton(props: NextMonthButtonProps) {\n  return <Button data-slot=\"calendar-next-month\" variant=\"outline\" size=\"icon-sm\" {...props} />;\n}\n\n/**\n * One day cell's button. Selection and range state are exposed as data\n * attributes so the classes below (and a consumer's) can paint them; the\n * `today` attribute is only set when the day is not selected, so the soft\n * fill never competes with the selected fill.\n */\nfunction CalendarDayButton({ className, day, modifiers, ...props }: DayButtonProps) {\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  const inRange = modifiers.range_start || modifiers.range_end || modifiers.range_middle;\n  const selectedSingle = modifiers.selected && !inRange;\n  const filled = selectedSingle || modifiers.range_start || modifiers.range_end;\n\n  return (\n    <Button\n      ref={ref}\n      data-slot=\"calendar-day-button\"\n      data-day={day.isoDate}\n      data-selected-single={selectedSingle || undefined}\n      data-range-start={modifiers.range_start || undefined}\n      data-range-end={modifiers.range_end || undefined}\n      data-range-middle={(modifiers.range_middle && !filled) || undefined}\n      data-today={(modifiers.today && !modifiers.selected) || undefined}\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(\n        \"size-8 font-normal text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]\",\n        \"rounded-[var(--ds-radius-sm)] leading-none\",\n        // today: soft fill from the primary tint\n        \"data-[today]:bg-[var(--ds-primary-soft)] data-[today]:text-[color:var(--ds-primary-soft-foreground)]\",\n        // range interior: soft fill, square so the run reads as one band\n        \"data-[range-middle]:rounded-none data-[range-middle]:bg-[var(--ds-primary-soft)] data-[range-middle]:text-[color:var(--ds-primary-soft-foreground)] data-[range-middle]:hover:bg-[var(--ds-primary-soft)] data-[range-middle]:hover:brightness-95\",\n        // selected day and range ends: solid primary\n        \"data-[selected-single]:bg-[var(--ds-primary)] data-[selected-single]:text-[color:var(--ds-primary-foreground)] data-[selected-single]:hover:bg-[var(--ds-primary-hover)] data-[selected-single]:hover:text-[color:var(--ds-primary-foreground)]\",\n        \"data-[range-start]:bg-[var(--ds-primary)] data-[range-start]:text-[color:var(--ds-primary-foreground)] data-[range-start]:hover:bg-[var(--ds-primary-hover)] data-[range-start]:hover:text-[color:var(--ds-primary-foreground)]\",\n        \"data-[range-end]:bg-[var(--ds-primary)] data-[range-end]:text-[color:var(--ds-primary-foreground)] data-[range-end]:hover:bg-[var(--ds-primary-hover)] data-[range-end]:hover:text-[color:var(--ds-primary-foreground)]\",\n        // the cell's own flags, read from the parent <td>\n        \"group-data-[outside]/day:text-[color:var(--ds-text-tertiary)]\",\n        \"group-data-[disabled]/day:text-[color:var(--ds-text-disabled)] group-data-[disabled]/day:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Calendar({\n  className,\n  classNames,\n  components,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  formatters,\n  ...props\n}: CalendarProps) {\n  const defaults = getDefaultClassNames();\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      captionLayout={captionLayout}\n      className={cn(\"w-fit p-3 text-[color:var(--ds-foreground)]\", className)}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaults.root),\n        months: cn(\"relative flex flex-col gap-4 md:flex-row\", defaults.months),\n        month: cn(\"flex w-full flex-col gap-3\", defaults.month),\n        nav: cn(\"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\", defaults.nav),\n        button_previous: cn(\"aria-disabled:pointer-events-none aria-disabled:opacity-50\", defaults.button_previous),\n        button_next: cn(\"aria-disabled:pointer-events-none aria-disabled:opacity-50\", defaults.button_next),\n        month_caption: cn(\"flex h-8 w-full items-center justify-center px-9\", defaults.month_caption),\n        caption_label: cn(\n          \"select-none font-medium text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-foreground)]\",\n          captionLayout !== \"label\" &&\n            \"flex h-8 items-center gap-1 rounded-[var(--ds-radius-sm)] pl-2 pr-1 [&>svg]:size-3.5 [&>svg]:text-[color:var(--ds-muted-foreground)]\",\n          defaults.caption_label,\n        ),\n        dropdowns: cn(\n          \"flex h-8 w-full items-center justify-center gap-1.5 font-medium text-[length:var(--ds-text-body-sm)]\",\n          defaults.dropdowns,\n        ),\n        dropdown_root: cn(\n          \"relative rounded-[var(--ds-radius-sm)] border border-[var(--ds-border)] bg-[var(--ds-muted)]\",\n          \"has-focus-visible:border-[var(--ds-ring)] has-focus-visible:ring-[3px] has-focus-visible:ring-[var(--ds-ring)]/40\",\n          defaults.dropdown_root,\n        ),\n        dropdown: cn(\"absolute inset-0 cursor-pointer opacity-0\", defaults.dropdown),\n        month_grid: cn(\"w-full border-collapse\", defaults.month_grid),\n        weekdays: cn(\"flex\", defaults.weekdays),\n        weekday: cn(\n          \"flex-1 select-none font-normal text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]\",\n          defaults.weekday,\n        ),\n        week: cn(\"mt-1 flex w-full\", defaults.week),\n        week_number_header: cn(\"w-8 select-none\", defaults.week_number_header),\n        week_number: cn(\n          \"select-none text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]\",\n          defaults.week_number,\n        ),\n        day: cn(\n          \"group/day relative aspect-square size-8 select-none p-0 text-center\",\n          defaults.day,\n        ),\n        range_start: cn(\"rounded-l-[var(--ds-radius-sm)] bg-[var(--ds-primary-soft)]\", defaults.range_start),\n        range_middle: cn(\"rounded-none bg-[var(--ds-primary-soft)]\", defaults.range_middle),\n        range_end: cn(\"rounded-r-[var(--ds-radius-sm)] bg-[var(--ds-primary-soft)]\", defaults.range_end),\n        today: defaults.today,\n        outside: defaults.outside,\n        disabled: defaults.disabled,\n        hidden: cn(\"invisible\", defaults.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: CalendarRoot,\n        Chevron: CalendarChevron,\n        PreviousMonthButton: CalendarPreviousMonthButton,\n        NextMonthButton: CalendarNextMonthButton,\n        DayButton: CalendarDayButton,\n        ...components,\n      }}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"mappings":"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"}

package/dist/components/card.d.ts

@@ -0,0 +1,32 @@
+"use client";
+import { RenderProp } from "../lib/render.js";
+import * as React from "react";
+//#region src/components/card.d.ts
+export interface CardProps extends React.ComponentProps<"div"> {
+  /** Lift the border and surface on hover, for clickable cards. */
+  hover?: boolean;
+  /** Draw the border in the ring colour, for a selected or highlighted card. */
+  accent?: boolean;
+  /**
+   * Replace the rendered `<div>` with another element, so a card can *be* the
+   * landmark rather than sit inside a wrapper that is one:
+   * `render={<aside />}` for a sidebar panel, `render={<section />}` (with an
+   * `aria-labelledby` pointing at its title) for a labelled region,
+   * `render={<article />}` for a self-contained item in a feed. Props set on
+   * the passed element come through; the card's own styling wins.
+   */
+  render?: RenderProp;
+}
+/**
+ * Card — the bordered surface everything else sits on. `render` changes the
+ * element without changing the look, which is how a card becomes a landmark.
+ */
+declare function Card({ className, hover, accent, render, children, ...props }: CardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+//#endregion
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+//# sourceMappingURL=card.d.ts.map

package/dist/components/card.js

@@ -0,0 +1,57 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { renderWith } from "../lib/render.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/card.tsx
+/**
+* Card — the bordered surface everything else sits on. `render` changes the
+* element without changing the look, which is how a card becomes a landmark.
+*/
+function Card({ className, hover, accent, render, children, ...props }) {
+	return renderWith(render, {
+		"data-slot": "card",
+		"data-accent": accent ? "" : void 0,
+		...props,
+		className: cn("flex flex-col rounded-[var(--ds-radius-lg)] border bg-[var(--ds-card)] text-[color:var(--ds-foreground)]", "transition-[border-color,background-color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", accent ? "border-[var(--ds-ring)]" : "border-[var(--ds-border-subtle)]", hover && "hover:border-[var(--ds-border)] hover:bg-[var(--ds-popover)]", className)
+	}, children, "div");
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: cn("flex flex-col gap-1.5 p-5 pb-3", className),
+		...props
+	});
+}
+function CardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-title",
+		className: cn("text-[length:var(--ds-text-body-md)] font-semibold", "leading-[var(--ds-text-h1--line-height)] tracking-[var(--ds-text-h1--letter-spacing)]", "text-[color:var(--ds-foreground)]", className),
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-description",
+		className: cn("text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: cn("p-5 pt-0", className),
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: cn("flex items-center gap-2 border-t border-[var(--ds-border-subtle)] p-4", className),
+		...props
+	});
+}
+//#endregion
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../src/components/card.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { renderWith, type RenderProp } from \"@/lib/render\";\n\nexport interface CardProps extends React.ComponentProps<\"div\"> {\n  /** Lift the border and surface on hover, for clickable cards. */\n  hover?: boolean;\n  /** Draw the border in the ring colour, for a selected or highlighted card. */\n  accent?: boolean;\n  /**\n   * Replace the rendered `<div>` with another element, so a card can *be* the\n   * landmark rather than sit inside a wrapper that is one:\n   * `render={<aside />}` for a sidebar panel, `render={<section />}` (with an\n   * `aria-labelledby` pointing at its title) for a labelled region,\n   * `render={<article />}` for a self-contained item in a feed. Props set on\n   * the passed element come through; the card's own styling wins.\n   */\n  render?: RenderProp;\n}\n\n/**\n * Card — the bordered surface everything else sits on. `render` changes the\n * element without changing the look, which is how a card becomes a landmark.\n */\nfunction Card({ className, hover, accent, render, children, ...props }: CardProps) {\n  return renderWith(\n    render,\n    {\n      // data-slot first: SectionCard (and any other composer) overrides it.\n      \"data-slot\": \"card\",\n      \"data-accent\": accent ? \"\" : undefined,\n      ...props,\n      className: cn(\n        \"flex flex-col rounded-[var(--ds-radius-lg)] border bg-[var(--ds-card)] text-[color:var(--ds-foreground)]\",\n        \"transition-[border-color,background-color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n        accent ? \"border-[var(--ds-ring)]\" : \"border-[var(--ds-border-subtle)]\",\n        hover && \"hover:border-[var(--ds-border)] hover:bg-[var(--ds-popover)]\",\n        className,\n      ),\n    },\n    children,\n    \"div\",\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\"flex flex-col gap-1.5 p-5 pb-3\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-[length:var(--ds-text-body-md)] font-semibold\",\n        \"leading-[var(--ds-text-h1--line-height)] tracking-[var(--ds-text-h1--letter-spacing)]\",\n        \"text-[color:var(--ds-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\n        \"text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-content\" className={cn(\"p-5 pt-0\", className)} {...props} />;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center gap-2 border-t border-[var(--ds-border-subtle)] p-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };\n"],"mappings":";;;;;;;;;;AA0BA,SAAS,KAAK,EAAE,WAAW,OAAO,QAAQ,QAAQ,UAAU,GAAG,SAAoB;CACjF,OAAO,WACL,QACA;EAEE,aAAa;EACb,eAAe,SAAS,KAAK,KAAA;EAC7B,GAAG;EACH,WAAW,GACT,4GACA,2GACA,SAAS,4BAA4B,oCACrC,SAAS,gEACT,SACF;CACF,GACA,UACA,KACF;AACF;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,yFACA,qCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,YAAY,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzF;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,yEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}