@duestel/ui 0.1.0

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,44 @@
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import { ComponentProps } from 'react';
+/**
+ * Avatar — Material 3 styled wrapper over Base UI's headless Avatar.
+ * Behaviour/accessibility (image load tracking, fallback swap): Base UI
+ * (https://base-ui.com/react/components/avatar).
+ * Visuals: M3 avatar anatomy — circular shape, surface-container fill,
+ * on-surface-variant initials in the label/title type scale, size tokens
+ * 24/32/40/48/64. Stack mirrors the overlapping avatar-group pattern.
+ * Design refs: port/core/ui/components/avatar, port/core/ui/components/avatar-stack
+ * (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI (plus a layout-only Stack):
+ *   <Avatar.Root size="md">
+ *     <Avatar.Image src="…" />
+ *     <Avatar.Fallback>JD</Avatar.Fallback>
+ *   </Avatar.Root>
+ *
+ *   <Avatar.Stack>
+ *     <Avatar.Root>…</Avatar.Root>
+ *     <Avatar.Root>…</Avatar.Root>
+ *   </Avatar.Stack>
+ */
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type RootProps = ComponentProps<typeof BaseAvatar.Root> & {
+    /** M3 size token: xs 24, sm 32, md 40 (default), lg 48, xl 64. */
+    size?: AvatarSize;
+};
+declare function Root({ className, size, ...props }: RootProps): import("react").JSX.Element;
+declare function Image({ className, ...props }: ComponentProps<typeof BaseAvatar.Image>): import("react").JSX.Element;
+declare function Fallback({ className, ...props }: ComponentProps<typeof BaseAvatar.Fallback>): import("react").JSX.Element;
+/**
+ * Overlapping avatar group (layout-only, no Base UI part). Each child avatar
+ * gets a surface-colored ring so overlaps read cleanly, plus a small hover
+ * lift, mirroring port/core/ui/components/avatar-stack.
+ */
+declare function Stack({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare const Avatar: {
+    Root: typeof Root;
+    Image: typeof Image;
+    Fallback: typeof Fallback;
+    Stack: typeof Stack;
+};
+export { Root, Image, Fallback, Stack };

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,45 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Avatar as n } from "@base-ui/react/avatar";
+//#region src/components/avatar/Avatar.tsx
+var r = {
+	xs: "size-6 text-label-small",
+	sm: "size-8 text-label-medium",
+	md: "size-10 text-label-large",
+	lg: "size-12 text-title-medium",
+	xl: "size-16 text-title-large"
+};
+function i({ className: i, size: a = "md", ...o }) {
+	return /* @__PURE__ */ t(n.Root, {
+		className: e("relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden", "rounded-full bg-surface-container align-middle font-medium text-on-surface-variant", r[a], i),
+		...o
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Image, {
+		className: e("size-full rounded-[inherit] object-cover", "transition-opacity duration-200 ease-out data-[starting-style]:opacity-0", r),
+		...i
+	});
+}
+function o({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Fallback, {
+		className: e("flex size-full items-center justify-center leading-none", r),
+		...i
+	});
+}
+function s({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("flex flex-row items-center -space-x-2", "*:ring-2 *:ring-surface", "*:transition-transform *:duration-200 *:ease-out *:hover:-translate-y-0.5", n),
+		...r
+	});
+}
+var c = {
+	Root: i,
+	Image: a,
+	Fallback: o,
+	Stack: s
+};
+//#endregion
+export { c as Avatar, o as Fallback, a as Image, i as Root, s as Stack };
+
+//# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { Avatar as BaseAvatar } from '@base-ui/react/avatar'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Avatar — Material 3 styled wrapper over Base UI's headless Avatar.\n * Behaviour/accessibility (image load tracking, fallback swap): Base UI\n * (https://base-ui.com/react/components/avatar).\n * Visuals: M3 avatar anatomy — circular shape, surface-container fill,\n * on-surface-variant initials in the label/title type scale, size tokens\n * 24/32/40/48/64. Stack mirrors the overlapping avatar-group pattern.\n * Design refs: port/core/ui/components/avatar, port/core/ui/components/avatar-stack\n * (see CLAUDE.md).\n *\n * Compound API mirrors Base UI (plus a layout-only Stack):\n *   <Avatar.Root size=\"md\">\n *     <Avatar.Image src=\"…\" />\n *     <Avatar.Fallback>JD</Avatar.Fallback>\n *   </Avatar.Root>\n *\n *   <Avatar.Stack>\n *     <Avatar.Root>…</Avatar.Root>\n *     <Avatar.Root>…</Avatar.Root>\n *   </Avatar.Stack>\n */\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nconst sizeClasses: Record<AvatarSize, string> = {\n  xs: 'size-6 text-label-small',\n  sm: 'size-8 text-label-medium',\n  md: 'size-10 text-label-large',\n  lg: 'size-12 text-title-medium',\n  xl: 'size-16 text-title-large',\n}\n\ntype RootProps = ComponentProps<typeof BaseAvatar.Root> & {\n  /** M3 size token: xs 24, sm 32, md 40 (default), lg 48, xl 64. */\n  size?: AvatarSize\n}\n\nfunction Root({ className, size = 'md', ...props }: RootProps) {\n  return (\n    <BaseAvatar.Root\n      className={cn(\n        'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden',\n        'rounded-full bg-surface-container align-middle font-medium text-on-surface-variant',\n        sizeClasses[size],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Image({ className, ...props }: ComponentProps<typeof BaseAvatar.Image>) {\n  return (\n    <BaseAvatar.Image\n      className={cn(\n        'size-full rounded-[inherit] object-cover',\n        'transition-opacity duration-200 ease-out data-[starting-style]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Fallback({ className, ...props }: ComponentProps<typeof BaseAvatar.Fallback>) {\n  return (\n    <BaseAvatar.Fallback\n      className={cn('flex size-full items-center justify-center leading-none', className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * Overlapping avatar group (layout-only, no Base UI part). Each child avatar\n * gets a surface-colored ring so overlaps read cleanly, plus a small hover\n * lift, mirroring port/core/ui/components/avatar-stack.\n */\nfunction Stack({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex flex-row items-center -space-x-2',\n        '*:ring-2 *:ring-surface',\n        '*:transition-transform *:duration-200 *:ease-out *:hover:-translate-y-0.5',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport const Avatar = { Root, Image, Fallback, Stack }\nexport { Root, Image, Fallback, Stack }\n"],"mappings":";;;;AA6BA,IAAM,IAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAOA,SAAS,EAAK,EAAE,cAAW,UAAO,MAAM,GAAG,KAAoB;CAC7D,OACE,kBAAC,EAAW,MAAZ;EACE,WAAW,EACT,yFACA,sFACA,EAAY,IACZ,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAkD;CAC/E,OACE,kBAAC,EAAW,OAAZ;EACE,WAAW,EACT,4CACA,4EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAqD;CACrF,OACE,kBAAC,EAAW,UAAZ;EACE,WAAW,EAAG,2DAA2D,CAAS;EAClF,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAgC;CAC7D,OACE,kBAAC,OAAD;EACE,WAAW,EACT,yCACA,2BACA,6EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAS;CAAE;CAAM;CAAO;CAAU;AAAM"}

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar, Root, Image, Fallback, Stack } from './Avatar';
+export type { AvatarSize } from './Avatar';

package/dist/components/avatar/index.js

@@ -0,0 +1,2 @@
+import { Avatar as e, Fallback as t, Image as n, Root as r, Stack as i } from "./Avatar.js";
+export { e as Avatar, t as Fallback, n as Image, r as Root, i as Stack };

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,43 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * Badge — Material 3 notification badges, ported from
+ * port/core/ui/components/badge (Badge / DotBadge / OnIconBadge) + the
+ * .badge/.dotBadge/.onIconBadge classes in port/styles/globals.css
+ * (see CLAUDE.md). Pure presentational divs — no headless primitive needed.
+ *
+ * Visuals: error fill with on-error label-small text. Badge is the 20px
+ * pill with 4px-gap icon slots; DotBadge is the bare 12px dot; OnIconBadge
+ * is the absolutely-positioned min-8px count bubble for icon corners.
+ *
+ * Port API (prop names preserved):
+ *   <Badge text="Badge" iconLeft={…} icon={…} iconRight={…} />
+ *   <Badge>Text</Badge>
+ *   <DotBadge />
+ *   <div className="relative">…icon…<OnIconBadge count={12} /></div>
+ */
+export type BadgeProps = ComponentProps<'div'> & {
+    /** Badge label (port API; children work too). */
+    text?: string;
+    /** Centered icon slot after the label — port's icon-only badge. */
+    icon?: ReactNode;
+    /** Icon before the label. */
+    iconLeft?: ReactNode;
+    /** Icon after the label (outermost trailing slot). */
+    iconRight?: ReactNode;
+};
+/** 20px pill badge with label text and optional icon slots (port `.badge`). */
+declare function Badge({ className, text, icon, iconLeft, iconRight, children, ...props }: BadgeProps): import("react").JSX.Element;
+export type DotBadgeProps = ComponentProps<'div'>;
+/** Bare 12px error dot — presence-only indicator (port `.dotBadge`). */
+declare function DotBadge({ className, ...props }: DotBadgeProps): import("react").JSX.Element;
+export type OnIconBadgeProps = ComponentProps<'div'> & {
+    /** Count shown in the bubble (port API; children work too). */
+    count?: string | number;
+};
+/**
+ * Count bubble for icon corners (port `.onIconBadge`). Absolutely positioned —
+ * place it inside a `relative` wrapper and offset via className. Without a
+ * count it collapses to the minimum 8px dot.
+ */
+declare function OnIconBadge({ className, count, children, ...props }: OnIconBadgeProps): import("react").JSX.Element;
+export { Badge, DotBadge, OnIconBadge };

package/dist/components/badge/Badge.js

@@ -0,0 +1,32 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/badge/Badge.tsx
+function r({ className: t, text: r, icon: i, iconLeft: a, iconRight: o, children: s, ...c }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("flex h-[20px] w-max cursor-pointer items-center gap-[4px] rounded-full", "bg-error px-[6px] py-[6px] text-label-small text-on-error", t),
+		...c,
+		children: [
+			a,
+			r || s,
+			i,
+			o
+		]
+	});
+}
+function i({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("flex h-[12px] w-[12px] cursor-pointer rounded-full bg-error px-[4px] py-[4px] text-on-error", n),
+		...r
+	});
+}
+function a({ className: n, count: r, children: i, ...a }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("absolute flex min-h-[8px] min-w-[8px] cursor-pointer rounded-full", "bg-error px-[4px] text-label-small text-on-error", n),
+		...a,
+		children: r ?? i
+	});
+}
+//#endregion
+export { r as Badge, i as DotBadge, a as OnIconBadge };
+
+//# sourceMappingURL=Badge.js.map

package/dist/components/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import { cn } from '#/lib/cn'\n\nimport type { ComponentProps, ReactNode } from 'react'\n\n/**\n * Badge — Material 3 notification badges, ported from\n * port/core/ui/components/badge (Badge / DotBadge / OnIconBadge) + the\n * .badge/.dotBadge/.onIconBadge classes in port/styles/globals.css\n * (see CLAUDE.md). Pure presentational divs — no headless primitive needed.\n *\n * Visuals: error fill with on-error label-small text. Badge is the 20px\n * pill with 4px-gap icon slots; DotBadge is the bare 12px dot; OnIconBadge\n * is the absolutely-positioned min-8px count bubble for icon corners.\n *\n * Port API (prop names preserved):\n *   <Badge text=\"Badge\" iconLeft={…} icon={…} iconRight={…} />\n *   <Badge>Text</Badge>\n *   <DotBadge />\n *   <div className=\"relative\">…icon…<OnIconBadge count={12} /></div>\n */\n\nexport type BadgeProps = ComponentProps<'div'> & {\n  /** Badge label (port API; children work too). */\n  text?: string\n  /** Centered icon slot after the label — port's icon-only badge. */\n  icon?: ReactNode\n  /** Icon before the label. */\n  iconLeft?: ReactNode\n  /** Icon after the label (outermost trailing slot). */\n  iconRight?: ReactNode\n}\n\n/** 20px pill badge with label text and optional icon slots (port `.badge`). */\nfunction Badge({ className, text, icon, iconLeft, iconRight, children, ...props }: BadgeProps) {\n  return (\n    <div\n      className={cn(\n        // Port .badge: 20px-tall w-max pill, error fill, label-small on-error\n        // text, 4px slot gap, 6px padding (cursor-pointer kept from port).\n        'flex h-[20px] w-max cursor-pointer items-center gap-[4px] rounded-full',\n        'bg-error px-[6px] py-[6px] text-label-small text-on-error',\n        className,\n      )}\n      {...props}\n    >\n      {iconLeft}\n      {text || children}\n      {icon}\n      {iconRight}\n    </div>\n  )\n}\n\nexport type DotBadgeProps = ComponentProps<'div'>\n\n/** Bare 12px error dot — presence-only indicator (port `.dotBadge`). */\nfunction DotBadge({ className, ...props }: DotBadgeProps) {\n  return (\n    <div\n      className={cn(\n        // Port .dotBadge: fixed 12px error circle.\n        'flex h-[12px] w-[12px] cursor-pointer rounded-full bg-error px-[4px] py-[4px] text-on-error',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport type OnIconBadgeProps = ComponentProps<'div'> & {\n  /** Count shown in the bubble (port API; children work too). */\n  count?: string | number\n}\n\n/**\n * Count bubble for icon corners (port `.onIconBadge`). Absolutely positioned —\n * place it inside a `relative` wrapper and offset via className. Without a\n * count it collapses to the minimum 8px dot.\n */\nfunction OnIconBadge({ className, count, children, ...props }: OnIconBadgeProps) {\n  return (\n    <div\n      className={cn(\n        // Port .onIconBadge: absolute min-8px error bubble, grows with count.\n        'absolute flex min-h-[8px] min-w-[8px] cursor-pointer rounded-full',\n        'bg-error px-[4px] text-label-small text-on-error',\n        className,\n      )}\n      {...props}\n    >\n      {count ?? children}\n    </div>\n  )\n}\n\nexport { Badge, DotBadge, OnIconBadge }\n"],"mappings":";;;AAiCA,SAAS,EAAM,EAAE,cAAW,SAAM,SAAM,aAAU,cAAW,aAAU,GAAG,KAAqB;CAC7F,OACE,kBAAC,OAAD;EACE,WAAW,EAGT,0EACA,6DACA,CACF;EACA,GAAI;YARN;GAUG;GACA,KAAQ;GACR;GACA;EACE;;AAET;AAKA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAwB;CACxD,OACE,kBAAC,OAAD;EACE,WAAW,EAET,+FACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAYA,SAAS,EAAY,EAAE,cAAW,UAAO,aAAU,GAAG,KAA2B;CAC/E,OACE,kBAAC,OAAD;EACE,WAAW,EAET,qEACA,oDACA,CACF;EACA,GAAI;YAEH,KAAS;CACP,CAAA;AAET"}

package/dist/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge, DotBadge, OnIconBadge } from './Badge';
+export type { BadgeProps, DotBadgeProps, OnIconBadgeProps } from './Badge';

package/dist/components/badge/index.js

@@ -0,0 +1,2 @@
+import { Badge as e, DotBadge as t, OnIconBadge as n } from "./Badge.js";
+export { e as Badge, t as DotBadge, n as OnIconBadge };

package/dist/components/button/Button.d.ts

@@ -0,0 +1,60 @@
+import { Button as BaseButton } from '@base-ui/react/button';
+import { ComponentProps } from 'react';
+/**
+ * Button — Material 3 styled wrapper over Base UI's headless Button.
+ * Behaviour/accessibility (native <button>, focusableWhenDisabled):
+ * Base UI (https://base-ui.com/react/components/button).
+ * Visuals: M3 common button anatomy — 40px height, full corner, label-large,
+ * state layers, 0.38 disabled opacity — plus icon button and FAB shapes.
+ * Design ref: port/core/ui/components/button (common-button, icon-button,
+ * fab-standard, fab-extended) + .btn/.filled/.tonal/.outlined/.elevated/.text
+ * classes in port/styles/globals.css (see CLAUDE.md).
+ *
+ * Compound API:
+ *   <Button.Root variant="filled|tonal|outlined|elevated|text">Label</Button.Root>
+ *   <Button.Icon variant="standard|filled|tonal|outlined"><Plus /></Button.Icon>
+ *   <Button.Fab size="small|medium|large" variant="primary|surface|secondary|tertiary"><Plus /></Button.Fab>
+ *   <Button.ExtendedFab variant="primary|surface|secondary|tertiary"><Plus />Label</Button.ExtendedFab>
+ */
+type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'elevated' | 'text';
+type RootProps = ComponentProps<typeof BaseButton> & {
+    /** M3 common-button color/emphasis style. @default 'filled' */
+    variant?: ButtonVariant;
+};
+/** M3 common button — 40px tall, pill shaped, label-large. */
+declare function Root({ className, variant, ...props }: RootProps): import("react").JSX.Element;
+type IconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';
+type IconButtonProps = ComponentProps<typeof BaseButton> & {
+    /** M3 icon-button style. @default 'standard' */
+    variant?: IconButtonVariant;
+};
+/** M3 icon button — 40×40 circular target around a 24px icon. */
+declare function IconButton({ className, variant, ...props }: IconButtonProps): import("react").JSX.Element;
+type FabVariant = 'primary' | 'surface' | 'secondary' | 'tertiary';
+declare const fabSizeClasses: {
+    readonly small: "size-10 rounded-medium [&_svg]:size-6";
+    readonly medium: "size-14 rounded-large [&_svg]:size-6";
+    readonly large: "size-24 rounded-extra-large [&_svg]:size-9";
+};
+type FabProps = ComponentProps<typeof BaseButton> & {
+    /** M3 FAB container color. @default 'primary' */
+    variant?: FabVariant;
+    /** M3 FAB size — small 40px, medium 56px, large 96px. @default 'medium' */
+    size?: keyof typeof fabSizeClasses;
+};
+/** M3 floating action button — elevated container around a single icon. */
+declare function Fab({ className, variant, size, ...props }: FabProps): import("react").JSX.Element;
+type ExtendedFabProps = ComponentProps<typeof BaseButton> & {
+    /** M3 FAB container color. @default 'primary' */
+    variant?: FabVariant;
+};
+/** M3 extended FAB — 56px tall pill with icon + label-large text. */
+declare function ExtendedFab({ className, variant, ...props }: ExtendedFabProps): import("react").JSX.Element;
+export declare const Button: {
+    Root: typeof Root;
+    Icon: typeof IconButton;
+    Fab: typeof Fab;
+    ExtendedFab: typeof ExtendedFab;
+};
+export { Root, IconButton, Fab, ExtendedFab };
+export type { ButtonVariant, IconButtonVariant, FabVariant };

package/dist/components/button/Button.js

@@ -0,0 +1,61 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Button as n } from "@base-ui/react/button";
+//#region src/components/button/Button.tsx
+var r = {
+	filled: "bg-primary text-on-primary hover:bg-primary-hover",
+	tonal: "bg-secondary-container text-on-secondary-container hover:bg-secondary-container-hover",
+	outlined: "border border-outline text-primary hover:bg-primary/[0.08]",
+	elevated: "bg-surface-container-low text-primary shadow-mm-1 hover:bg-primary/[0.08] hover:shadow-mm-2",
+	text: "px-3 text-primary hover:bg-primary/[0.08]"
+};
+function i({ className: i, variant: a = "filled", ...o }) {
+	return /* @__PURE__ */ t(n, {
+		className: e("inline-flex h-10 w-max cursor-pointer items-center justify-center gap-2 rounded-full px-6", "text-label-large transition-all", "[&_svg]:size-[18px] [&_svg]:shrink-0", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:shadow-none", r[a], i),
+		...o
+	});
+}
+var a = {
+	standard: "text-on-surface-variant hover:bg-on-surface/[0.08]",
+	filled: "bg-primary text-on-primary hover:bg-primary-hover",
+	tonal: "bg-secondary-container text-on-secondary-container hover:bg-secondary-container-hover",
+	outlined: "border border-outline text-on-surface-variant hover:bg-on-surface/[0.08]"
+};
+function o({ className: r, variant: i = "standard", ...o }) {
+	return /* @__PURE__ */ t(n, {
+		className: e("inline-flex size-10 cursor-pointer items-center justify-center rounded-full", "transition-colors [&_svg]:size-6 [&_svg]:shrink-0", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38]", a[i], r),
+		...o
+	});
+}
+var s = {
+	primary: "bg-primary-container text-on-primary-container hover:bg-primary-container-hover",
+	surface: "bg-surface-container-high text-primary hover:bg-primary/[0.08]",
+	secondary: "bg-secondary-container text-on-secondary-container hover:bg-secondary-container-hover",
+	tertiary: "bg-tertiary-container text-on-tertiary-container hover:bg-tertiary-container-hover"
+}, c = {
+	small: "size-10 rounded-medium [&_svg]:size-6",
+	medium: "size-14 rounded-large [&_svg]:size-6",
+	large: "size-24 rounded-extra-large [&_svg]:size-9"
+};
+function l({ className: r, variant: i = "primary", size: a = "medium", ...o }) {
+	return /* @__PURE__ */ t(n, {
+		className: e("inline-flex cursor-pointer items-center justify-center shadow-mm-3", "transition-all hover:shadow-mm-4 [&_svg]:shrink-0", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:shadow-none", c[a], s[i], r),
+		...o
+	});
+}
+function u({ className: r, variant: i = "primary", ...a }) {
+	return /* @__PURE__ */ t(n, {
+		className: e("inline-flex h-14 w-max cursor-pointer items-center justify-center gap-3 rounded-large px-4", "text-label-large shadow-mm-3 transition-all hover:shadow-mm-4", "[&_svg]:size-6 [&_svg]:shrink-0", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:shadow-none", s[i], r),
+		...a
+	});
+}
+var d = {
+	Root: i,
+	Icon: o,
+	Fab: l,
+	ExtendedFab: u
+};
+//#endregion
+export { d as Button, u as ExtendedFab, l as Fab, o as IconButton, i as Root };
+
+//# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import { Button as BaseButton } from '@base-ui/react/button'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Button — Material 3 styled wrapper over Base UI's headless Button.\n * Behaviour/accessibility (native <button>, focusableWhenDisabled):\n * Base UI (https://base-ui.com/react/components/button).\n * Visuals: M3 common button anatomy — 40px height, full corner, label-large,\n * state layers, 0.38 disabled opacity — plus icon button and FAB shapes.\n * Design ref: port/core/ui/components/button (common-button, icon-button,\n * fab-standard, fab-extended) + .btn/.filled/.tonal/.outlined/.elevated/.text\n * classes in port/styles/globals.css (see CLAUDE.md).\n *\n * Compound API:\n *   <Button.Root variant=\"filled|tonal|outlined|elevated|text\">Label</Button.Root>\n *   <Button.Icon variant=\"standard|filled|tonal|outlined\"><Plus /></Button.Icon>\n *   <Button.Fab size=\"small|medium|large\" variant=\"primary|surface|secondary|tertiary\"><Plus /></Button.Fab>\n *   <Button.ExtendedFab variant=\"primary|surface|secondary|tertiary\"><Plus />Label</Button.ExtendedFab>\n */\n\ntype ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'elevated' | 'text'\n\nconst rootVariantClasses: Record<ButtonVariant, string> = {\n  filled: 'bg-primary text-on-primary hover:bg-primary-hover',\n  tonal:\n    'bg-secondary-container text-on-secondary-container hover:bg-secondary-container-hover',\n  outlined: 'border border-outline text-primary hover:bg-primary/[0.08]',\n  elevated:\n    'bg-surface-container-low text-primary shadow-mm-1 hover:bg-primary/[0.08] hover:shadow-mm-2',\n  text: 'px-3 text-primary hover:bg-primary/[0.08]',\n}\n\ntype RootProps = ComponentProps<typeof BaseButton> & {\n  /** M3 common-button color/emphasis style. @default 'filled' */\n  variant?: ButtonVariant\n}\n\n/** M3 common button — 40px tall, pill shaped, label-large. */\nfunction Root({ className, variant = 'filled', ...props }: RootProps) {\n  return (\n    <BaseButton\n      className={cn(\n        'inline-flex h-10 w-max cursor-pointer items-center justify-center gap-2 rounded-full px-6',\n        'text-label-large transition-all',\n        '[&_svg]:size-[18px] [&_svg]:shrink-0',\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:shadow-none',\n        rootVariantClasses[variant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype IconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined'\n\nconst iconVariantClasses: Record<IconButtonVariant, string> = {\n  standard: 'text-on-surface-variant hover:bg-on-surface/[0.08]',\n  filled: 'bg-primary text-on-primary hover:bg-primary-hover',\n  tonal:\n    'bg-secondary-container text-on-secondary-container hover:bg-secondary-container-hover',\n  outlined: 'border border-outline text-on-surface-variant hover:bg-on-surface/[0.08]',\n}\n\ntype IconButtonProps = ComponentProps<typeof BaseButton> & {\n  /** M3 icon-button style. @default 'standard' */\n  variant?: IconButtonVariant\n}\n\n/** M3 icon button — 40×40 circular target around a 24px icon. */\nfunction IconButton({ className, variant = 'standard', ...props }: IconButtonProps) {\n  return (\n    <BaseButton\n      className={cn(\n        'inline-flex size-10 cursor-pointer items-center justify-center rounded-full',\n        'transition-colors [&_svg]:size-6 [&_svg]:shrink-0',\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n        iconVariantClasses[variant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype FabVariant = 'primary' | 'surface' | 'secondary' | 'tertiary'\n\nconst fabVariantClasses: Record<FabVariant, string> = {\n  primary:\n    'bg-primary-container text-on-primary-container hover:bg-primary-container-hover',\n  surface: 'bg-surface-container-high text-primary hover:bg-primary/[0.08]',\n  secondary:\n    'bg-secondary-container text-on-secondary-container hover:bg-secondary-container-hover',\n  tertiary:\n    'bg-tertiary-container text-on-tertiary-container hover:bg-tertiary-container-hover',\n}\n\nconst fabSizeClasses = {\n  small: 'size-10 rounded-medium [&_svg]:size-6',\n  medium: 'size-14 rounded-large [&_svg]:size-6',\n  large: 'size-24 rounded-extra-large [&_svg]:size-9',\n} as const\n\ntype FabProps = ComponentProps<typeof BaseButton> & {\n  /** M3 FAB container color. @default 'primary' */\n  variant?: FabVariant\n  /** M3 FAB size — small 40px, medium 56px, large 96px. @default 'medium' */\n  size?: keyof typeof fabSizeClasses\n}\n\n/** M3 floating action button — elevated container around a single icon. */\nfunction Fab({ className, variant = 'primary', size = 'medium', ...props }: FabProps) {\n  return (\n    <BaseButton\n      className={cn(\n        'inline-flex cursor-pointer items-center justify-center shadow-mm-3',\n        'transition-all hover:shadow-mm-4 [&_svg]:shrink-0',\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:shadow-none',\n        fabSizeClasses[size],\n        fabVariantClasses[variant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype ExtendedFabProps = ComponentProps<typeof BaseButton> & {\n  /** M3 FAB container color. @default 'primary' */\n  variant?: FabVariant\n}\n\n/** M3 extended FAB — 56px tall pill with icon + label-large text. */\nfunction ExtendedFab({ className, variant = 'primary', ...props }: ExtendedFabProps) {\n  return (\n    <BaseButton\n      className={cn(\n        'inline-flex h-14 w-max cursor-pointer items-center justify-center gap-3 rounded-large px-4',\n        'text-label-large shadow-mm-3 transition-all hover:shadow-mm-4',\n        '[&_svg]:size-6 [&_svg]:shrink-0',\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:shadow-none',\n        fabVariantClasses[variant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport const Button = { Root, Icon: IconButton, Fab, ExtendedFab }\nexport { Root, IconButton, Fab, ExtendedFab }\nexport type { ButtonVariant, IconButtonVariant, FabVariant }\n"],"mappings":";;;;AAwBA,IAAM,IAAoD;CACxD,QAAQ;CACR,OACE;CACF,UAAU;CACV,UACE;CACF,MAAM;AACR;AAQA,SAAS,EAAK,EAAE,cAAW,aAAU,UAAU,GAAG,KAAoB;CACpE,OACE,kBAAC,GAAD;EACE,WAAW,EACT,6FACA,mCACA,wCACA,wFACA,4EACA,EAAmB,IACnB,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAIA,IAAM,IAAwD;CAC5D,UAAU;CACV,QAAQ;CACR,OACE;CACF,UAAU;AACZ;AAQA,SAAS,EAAW,EAAE,cAAW,aAAU,YAAY,GAAG,KAA0B;CAClF,OACE,kBAAC,GAAD;EACE,WAAW,EACT,+EACA,qDACA,wFACA,uDACA,EAAmB,IACnB,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAIA,IAAM,IAAgD;CACpD,SACE;CACF,SAAS;CACT,WACE;CACF,UACE;AACJ,GAEM,IAAiB;CACrB,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAUA,SAAS,EAAI,EAAE,cAAW,aAAU,WAAW,UAAO,UAAU,GAAG,KAAmB;CACpF,OACE,kBAAC,GAAD;EACE,WAAW,EACT,sEACA,qDACA,wFACA,4EACA,EAAe,IACf,EAAkB,IAClB,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,EAAY,EAAE,cAAW,aAAU,WAAW,GAAG,KAA2B;CACnF,OACE,kBAAC,GAAD;EACE,WAAW,EACT,8FACA,iEACA,mCACA,wFACA,4EACA,EAAkB,IAClB,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAS;CAAE;CAAM,MAAM;CAAY;CAAK;AAAY"}

package/dist/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/dist/components/button/index.js

@@ -0,0 +1,2 @@
+import { Button as e, ExtendedFab as t, Fab as n, IconButton as r, Root as i } from "./Button.js";
+export { e as Button, t as ExtendedFab, n as Fab, r as IconButton, i as Root };

package/dist/components/carousel/Carousel.d.ts

@@ -0,0 +1,32 @@
+import { Button } from '../../../components/button';
+import { EmblaOptionsType } from 'embla-carousel';
+import { ComponentProps } from 'react';
+type RootProps = ComponentProps<'div'> & {
+    /** Embla options — `loop`, `align`, `slidesToScroll`, … @default {} */
+    options?: EmblaOptionsType;
+};
+/** Sets up the Embla engine and provides api + selection state to all parts. */
+declare function Root({ options, className, children, ...props }: RootProps): import("react").JSX.Element;
+/** Embla viewport (overflow-hidden) wrapping the flex track of slides. */
+declare function Container({ className, children, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/**
+ * One slide — set its width via flex basis (`basis-4/5` hero, `basis-1/3`
+ * multi-browse). The `pl-4` + container `-ml-4` pair is Embla's gap pattern.
+ */
+declare function Slide({ className, children, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+type NavButtonProps = ComponentProps<typeof Button.Icon>;
+/** Previous-slide icon button — disabled at the start when not looping. */
+declare function Previous({ className, children, ...props }: NavButtonProps): import("react").JSX.Element;
+/** Next-slide icon button — disabled at the end when not looping. */
+declare function Next({ className, children, ...props }: NavButtonProps): import("react").JSX.Element;
+/** M3 dot indicators — 8px dots; the active dot stretches to a 16px pill. */
+declare function Dots({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare const Carousel: {
+    Root: typeof Root;
+    Container: typeof Container;
+    Slide: typeof Slide;
+    Previous: typeof Previous;
+    Next: typeof Next;
+    Dots: typeof Dots;
+};
+export { Root, Container, Slide, Previous, Next, Dots };

package/dist/components/carousel/Carousel.js

@@ -0,0 +1,113 @@
+import { cn as e } from "../../lib/cn.js";
+import { Button as t } from "../button/Button.js";
+import { ChevronLeft as n, ChevronRight as r } from "lucide-react";
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as a, useContext as o, useEffect as s, useState as c } from "react";
+import l from "embla-carousel-react";
+//#region src/components/carousel/Carousel.tsx
+var u = a(null);
+function d() {
+	let e = o(u);
+	if (!e) throw Error("Carousel parts must be used within <Carousel.Root>");
+	return e;
+}
+function f({ options: t, className: n, children: r, ...a }) {
+	let [o, d] = l(t), [f, p] = c(0), [m, h] = c([]), [g, _] = c(!1), [v, y] = c(!1);
+	return s(() => {
+		if (!d) return;
+		let e = (e) => {
+			p(e.selectedScrollSnap()), _(e.canScrollPrev()), y(e.canScrollNext());
+		}, t = (t) => {
+			h(t.scrollSnapList()), e(t);
+		};
+		return t(d), d.on("select", e).on("reInit", t), () => {
+			d.off("select", e).off("reInit", t);
+		};
+	}, [d]), /* @__PURE__ */ i(u.Provider, {
+		value: {
+			api: d,
+			viewportRef: o,
+			selectedIndex: f,
+			scrollSnaps: m,
+			canScrollPrev: g,
+			canScrollNext: v
+		},
+		children: /* @__PURE__ */ i("div", {
+			role: "region",
+			"aria-roledescription": "carousel",
+			className: e("relative", n),
+			...a,
+			children: r
+		})
+	});
+}
+function p({ className: t, children: n, ...r }) {
+	let { viewportRef: a } = d();
+	return /* @__PURE__ */ i("div", {
+		ref: a,
+		className: "overflow-hidden",
+		children: /* @__PURE__ */ i("div", {
+			className: e("-ml-4 flex touch-pan-y", t),
+			...r,
+			children: n
+		})
+	});
+}
+function m({ className: t, children: n, ...r }) {
+	return /* @__PURE__ */ i("div", {
+		className: e("min-w-0 shrink-0 grow-0 basis-full pl-4", t),
+		...r,
+		children: /* @__PURE__ */ i("div", {
+			className: "h-full overflow-hidden rounded-extra-large",
+			children: n
+		})
+	});
+}
+function h({ className: e, children: r, ...a }) {
+	let { api: o, canScrollPrev: s } = d();
+	return /* @__PURE__ */ i(t.Icon, {
+		"aria-label": "Previous slide",
+		disabled: !s,
+		onClick: () => o?.scrollPrev(),
+		className: e,
+		...a,
+		children: r ?? /* @__PURE__ */ i(n, {})
+	});
+}
+function g({ className: e, children: n, ...a }) {
+	let { api: o, canScrollNext: s } = d();
+	return /* @__PURE__ */ i(t.Icon, {
+		"aria-label": "Next slide",
+		disabled: !s,
+		onClick: () => o?.scrollNext(),
+		className: e,
+		...a,
+		children: n ?? /* @__PURE__ */ i(r, {})
+	});
+}
+function _({ className: t, ...n }) {
+	let { api: r, selectedIndex: a, scrollSnaps: o } = d();
+	return /* @__PURE__ */ i("div", {
+		className: e("flex items-center justify-center gap-2", t),
+		...n,
+		children: o.map((t, n) => /* @__PURE__ */ i("button", {
+			type: "button",
+			"aria-label": `Go to slide ${n + 1}`,
+			"aria-current": n === a ? "true" : void 0,
+			onClick: () => r?.scrollTo(n),
+			className: e("h-2 cursor-pointer rounded-full transition-all duration-200 ease-out", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", n === a ? "w-4 bg-primary" : "w-2 bg-on-surface-variant/40 hover:bg-on-surface-variant/60")
+		}, n))
+	});
+}
+var v = {
+	Root: f,
+	Container: p,
+	Slide: m,
+	Previous: h,
+	Next: g,
+	Dots: _
+};
+//#endregion
+export { v as Carousel, p as Container, _ as Dots, g as Next, h as Previous, f as Root, m as Slide };
+
+//# sourceMappingURL=Carousel.js.map

package/dist/components/carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import { createContext, useContext, useEffect, useState } from 'react'\nimport useEmblaCarousel from 'embla-carousel-react'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { Button } from '#/components/button'\nimport { cn } from '#/lib/cn'\n\nimport type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel'\nimport type { ComponentProps } from 'react'\n\n/**\n * Carousel — Material 3 styled carousel over the Embla engine.\n * Behaviour (drag, snap, loop): embla-carousel-react (https://www.embla-carousel.com).\n * Visuals: M3 carousel — rounded-extra-large slides with gaps, icon-button\n * navigation, and a dot indicator row whose active dot stretches into a pill\n * (https://m3.material.io/components/carousel — see CLAUDE.md).\n *\n * Slide width comes from the slide's flex basis: `basis-4/5` reads as a hero\n * layout, `basis-1/3` as multi-browse.\n *\n * Compound API:\n *   <Carousel.Root options={{ loop: true }}>\n *     <Carousel.Container>\n *       <Carousel.Slide className=\"basis-4/5\">…</Carousel.Slide>\n *     </Carousel.Container>\n *     <div className=\"mt-4 flex items-center justify-center gap-4\">\n *       <Carousel.Previous />\n *       <Carousel.Dots />\n *       <Carousel.Next />\n *     </div>\n *   </Carousel.Root>\n */\n\ntype CarouselContextValue = {\n  api: EmblaCarouselType | undefined\n  viewportRef: ReturnType<typeof useEmblaCarousel>[0]\n  selectedIndex: number\n  scrollSnaps: Array<number>\n  canScrollPrev: boolean\n  canScrollNext: boolean\n}\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null)\n\nfunction useCarousel() {\n  const context = useContext(CarouselContext)\n  if (!context) throw new Error('Carousel parts must be used within <Carousel.Root>')\n  return context\n}\n\ntype RootProps = ComponentProps<'div'> & {\n  /** Embla options — `loop`, `align`, `slidesToScroll`, … @default {} */\n  options?: EmblaOptionsType\n}\n\n/** Sets up the Embla engine and provides api + selection state to all parts. */\nfunction Root({ options, className, children, ...props }: RootProps) {\n  const [viewportRef, api] = useEmblaCarousel(options)\n  const [selectedIndex, setSelectedIndex] = useState(0)\n  const [scrollSnaps, setScrollSnaps] = useState<Array<number>>([])\n  const [canScrollPrev, setCanScrollPrev] = useState(false)\n  const [canScrollNext, setCanScrollNext] = useState(false)\n\n  useEffect(() => {\n    if (!api) return\n    const onSelect = (emblaApi: EmblaCarouselType) => {\n      setSelectedIndex(emblaApi.selectedScrollSnap())\n      setCanScrollPrev(emblaApi.canScrollPrev())\n      setCanScrollNext(emblaApi.canScrollNext())\n    }\n    const onReInit = (emblaApi: EmblaCarouselType) => {\n      setScrollSnaps(emblaApi.scrollSnapList())\n      onSelect(emblaApi)\n    }\n    onReInit(api)\n    api.on('select', onSelect).on('reInit', onReInit)\n    return () => {\n      api.off('select', onSelect).off('reInit', onReInit)\n    }\n  }, [api])\n\n  return (\n    <CarouselContext.Provider\n      value={{ api, viewportRef, selectedIndex, scrollSnaps, canScrollPrev, canScrollNext }}\n    >\n      <div\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        className={cn('relative', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\n/** Embla viewport (overflow-hidden) wrapping the flex track of slides. */\nfunction Container({ className, children, ...props }: ComponentProps<'div'>) {\n  const { viewportRef } = useCarousel()\n  return (\n    <div ref={viewportRef} className=\"overflow-hidden\">\n      <div className={cn('-ml-4 flex touch-pan-y', className)} {...props}>\n        {children}\n      </div>\n    </div>\n  )\n}\n\n/**\n * One slide — set its width via flex basis (`basis-4/5` hero, `basis-1/3`\n * multi-browse). The `pl-4` + container `-ml-4` pair is Embla's gap pattern.\n */\nfunction Slide({ className, children, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn('min-w-0 shrink-0 grow-0 basis-full pl-4', className)}\n      {...props}\n    >\n      <div className=\"h-full overflow-hidden rounded-extra-large\">{children}</div>\n    </div>\n  )\n}\n\ntype NavButtonProps = ComponentProps<typeof Button.Icon>\n\n/** Previous-slide icon button — disabled at the start when not looping. */\nfunction Previous({ className, children, ...props }: NavButtonProps) {\n  const { api, canScrollPrev } = useCarousel()\n  return (\n    <Button.Icon\n      aria-label=\"Previous slide\"\n      disabled={!canScrollPrev}\n      onClick={() => api?.scrollPrev()}\n      className={className}\n      {...props}\n    >\n      {children ?? <ChevronLeft />}\n    </Button.Icon>\n  )\n}\n\n/** Next-slide icon button — disabled at the end when not looping. */\nfunction Next({ className, children, ...props }: NavButtonProps) {\n  const { api, canScrollNext } = useCarousel()\n  return (\n    <Button.Icon\n      aria-label=\"Next slide\"\n      disabled={!canScrollNext}\n      onClick={() => api?.scrollNext()}\n      className={className}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </Button.Icon>\n  )\n}\n\n/** M3 dot indicators — 8px dots; the active dot stretches to a 16px pill. */\nfunction Dots({ className, ...props }: ComponentProps<'div'>) {\n  const { api, selectedIndex, scrollSnaps } = useCarousel()\n  return (\n    <div className={cn('flex items-center justify-center gap-2', className)} {...props}>\n      {scrollSnaps.map((_, index) => (\n        <button\n          key={index}\n          type=\"button\"\n          aria-label={`Go to slide ${index + 1}`}\n          aria-current={index === selectedIndex ? 'true' : undefined}\n          onClick={() => api?.scrollTo(index)}\n          className={cn(\n            'h-2 cursor-pointer rounded-full transition-all duration-200 ease-out',\n            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',\n            index === selectedIndex\n              ? 'w-4 bg-primary'\n              : 'w-2 bg-on-surface-variant/40 hover:bg-on-surface-variant/60',\n          )}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport const Carousel = { Root, Container, Slide, Previous, Next, Dots }\nexport { Root, Container, Slide, Previous, Next, Dots }\n"],"mappings":"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"}

package/dist/components/carousel/index.d.ts

@@ -0,0 +1 @@
+export { Carousel, Root, Container, Slide, Previous, Next, Dots } from './Carousel';

package/dist/components/carousel/index.js

@@ -0,0 +1,2 @@
+import { Carousel as e, Container as t, Dots as n, Next as r, Previous as i, Root as a, Slide as o } from "./Carousel.js";
+export { e as Carousel, t as Container, n as Dots, r as Next, i as Previous, a as Root, o as Slide };

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,64 @@
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * Checkbox — Material 3 styled wrapper over Base UI's headless Checkbox +
+ * Checkbox Group.
+ * Behaviour/accessibility (hidden input, aria-checked incl. "mixed",
+ * keyboard toggling, parent/child group state): Base UI
+ * (https://base-ui.com/react/components/checkbox and
+ * https://base-ui.com/react/components/checkbox-group).
+ * Visuals ported from port/core/ui/elements/common/Checkbox.tsx +
+ * port/pages/examples/selection (see CLAUDE.md): 20px box with the port's
+ * 6px corner on a 40px circular state layer (surface-container-highest/30
+ * hover, slow fade), surface-container-highest fill when unticked,
+ * inverse-primary fill with a white check when ticked (the port's native
+ * `text-inverse-primary` accent), indeterminate dash, body-small label.
+ *
+ * Primary API is the port's single component (port/core/ui/elements/common):
+ *   <Checkbox ariaLabel="Checkbox" />
+ *   <Checkbox label="I agree to everything" defaultChecked />
+ *   <Checkbox>I only agree to the <a href="#">Terms of Service</a></Checkbox>
+ *
+ * Compound parts remain for advanced composition (parent/child groups):
+ *   <Checkbox.Group allValues={...} defaultValue={...}>
+ *     <Checkbox.Label>
+ *       <Checkbox.Root parent><Checkbox.Indicator /></Checkbox.Root>
+ *       Select all
+ *     </Checkbox.Label>
+ *     …
+ *   </Checkbox.Group>
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseCheckbox.Root>): import("react").JSX.Element;
+declare function Indicator({ className, children, ...props }: ComponentProps<typeof BaseCheckbox.Indicator>): import("react").JSX.Element;
+/** Shared state for a series of checkboxes; pass `allValues` to enable a parent checkbox. */
+declare function Group({ className, ...props }: ComponentProps<typeof BaseCheckboxGroup>): import("react").JSX.Element;
+/**
+ * Convenience `<label>` row pairing a checkbox box with its label text —
+ * port spacing (4px after the 40px state layer ≈ gap-3.5 from the 20px box)
+ * and the port's body-small label.
+ */
+declare function Label({ className, ...props }: ComponentProps<'label'>): import("react").JSX.Element;
+type CheckboxProps = Omit<ComponentProps<typeof Root>, 'onChange' | 'children'> & {
+    /** Label text to the right of the box (port API; children work too). */
+    label?: ReactNode;
+    /** Label content, port style: <Checkbox>I agree…</Checkbox>. */
+    children?: ReactNode;
+    /** Accessible name for a bare box without a visible label (port API). */
+    ariaLabel?: string;
+    /** Port-compat change callback; receives the new checked state. */
+    onChange?: (checked: boolean) => void;
+};
+/**
+ * Port-style single checkbox: box + optional label row in one element.
+ * `label` (or children) renders the port's body-small label; without either
+ * it's a bare box — pass `ariaLabel`.
+ */
+declare function CheckboxComponent({ label, children, ariaLabel, onChange, onCheckedChange, className, ...props }: CheckboxProps): import("react").JSX.Element;
+export declare const Checkbox: typeof CheckboxComponent & {
+    Root: typeof Root;
+    Indicator: typeof Indicator;
+    Group: typeof Group;
+    Label: typeof Label;
+};
+export { Root, Indicator, Group, Label };