@duestel/ui 0.1.0

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,70 @@
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import { ComponentProps, ComponentType } from 'react';
+/**
+ * Toast — Material 3 "snackbar" styled wrapper over Base UI's headless Toast.
+ * Behaviour/accessibility (manager, stacking, swipe-to-dismiss, F6 landmark):
+ * Base UI (https://base-ui.com/react/components/toast).
+ * Visuals: M3 snackbar anatomy — inverse-surface container, small (8px) corner,
+ * inverse-on-surface body-medium text, inverse-primary text-button action,
+ * optional inverse-on-surface close icon, elevation 3.
+ * Design ref: port/core/ui/components/snackbar (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Toast.Provider>
+ *     <App />  // call Toast.useToastManager().add({ description, ... })
+ *     <Toast.Portal>
+ *       <Toast.Viewport>
+ *         {toasts.map((toast) => (
+ *           <Toast.Root key={toast.id} toast={toast}>
+ *             <Toast.Content>
+ *               <Toast.Title />
+ *               <Toast.Description />
+ *             </Toast.Content>
+ *             <Toast.Action>Undo</Toast.Action>
+ *             <Toast.Close />
+ *           </Toast.Root>
+ *         ))}
+ *       </Toast.Viewport>
+ *     </Toast.Portal>
+ *   </Toast.Provider>
+ */
+declare const Provider: import('react').FC<import('@base-ui/react').ToastProviderProps>;
+declare const Portal: ComponentType<BaseToast.Portal.Props>;
+declare const useToastManager: typeof BaseToast.useToastManager;
+declare const createToastManager: typeof BaseToast.createToastManager;
+/** Fixed region the toast stack renders into (M3: bottom-centered). */
+declare function Viewport({ className, ...props }: ComponentProps<typeof BaseToast.Viewport>): import("react").JSX.Element;
+/**
+ * One snackbar. Toasts stack absolutely inside the viewport: collapsed they
+ * scale down behind the frontmost one (via --toast-index), and on
+ * hover/focus ([data-expanded]) they fan out using --toast-offset-y.
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseToast.Root>): import("react").JSX.Element;
+/** Text block; fades out while behind the frontmost toast in the stack. */
+declare function Content({ className, ...props }: ComponentProps<typeof BaseToast.Content>): import("react").JSX.Element;
+declare function Title({ className, ...props }: ComponentProps<typeof BaseToast.Title>): import("react").JSX.Element;
+declare function Description({ className, ...props }: ComponentProps<typeof BaseToast.Description>): import("react").JSX.Element;
+/** Snackbar action: M3 text button in the inverse-primary role. */
+declare function Action({ className, ...props }: ComponentProps<typeof BaseToast.Action>): import("react").JSX.Element;
+/** Dismiss icon button (defaults to an X glyph). */
+declare function Close({ className, children, ...props }: ComponentProps<typeof BaseToast.Close>): import("react").JSX.Element;
+/** Positions an anchored toast against an element (rare; default flow is the viewport stack). */
+declare function Positioner({ className, ...props }: ComponentProps<typeof BaseToast.Positioner>): import("react").JSX.Element;
+/** Arrow for anchored toasts. */
+declare function Arrow({ className, children, ...props }: ComponentProps<typeof BaseToast.Arrow>): import("react").JSX.Element;
+export declare const Toast: {
+    Provider: import('react').FC<import('@base-ui/react').ToastProviderProps>;
+    Portal: ComponentType<import('@base-ui/react').ToastPortalProps>;
+    Viewport: typeof Viewport;
+    Root: typeof Root;
+    Content: typeof Content;
+    Title: typeof Title;
+    Description: typeof Description;
+    Action: typeof Action;
+    Close: typeof Close;
+    Positioner: typeof Positioner;
+    Arrow: typeof Arrow;
+    useToastManager: typeof BaseToast.useToastManager;
+    createToastManager: typeof BaseToast.createToastManager;
+};
+export { Provider, Portal, Viewport, Root, Content, Title, Description, Action, Close, Positioner, Arrow, useToastManager, createToastManager, };

package/dist/components/toast/Toast.js

@@ -0,0 +1,95 @@
+import { cn as e } from "../../lib/cn.js";
+import { X as t } from "lucide-react";
+import { jsx as n } from "react/jsx-runtime";
+import { Toast as r } from "@base-ui/react/toast";
+//#region src/components/toast/Toast.tsx
+var i = r.Provider, a = r.Portal, o = r.useToastManager, s = r.createToastManager;
+function c({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Viewport, {
+		className: e("fixed bottom-4 left-1/2 z-50 w-[calc(100vw-2rem)] max-w-[560px] -translate-x-1/2", t),
+		...i
+	});
+}
+function l({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Root, {
+		className: e("absolute right-0 bottom-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full select-none", "flex min-h-12 items-center gap-1 py-1 pr-2 pl-4", "rounded-small bg-inverse-surface text-inverse-on-surface shadow-mm-3", "[transition-property:transform,opacity] duration-300 ease-out", "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(min(var(--toast-index),10)*-0.5rem)))_scale(max(0,calc(1-(var(--toast-index)*0.05))))]", "data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc((var(--toast-offset-y)*-1)+(var(--toast-index)*-0.75rem)+var(--toast-swipe-movement-y)))]", "data-[starting-style]:opacity-0 data-[starting-style]:[transform:translateY(150%)]", "data-[ending-style]:opacity-0 data-[ending-style]:[transform:translateY(150%)]", "data-[limited]:opacity-0", t),
+		...i
+	});
+}
+function u({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Content, {
+		className: e("flex min-w-0 flex-1 flex-col gap-0.5 py-2", "transition-opacity duration-300 data-[behind]:opacity-0", t),
+		...i
+	});
+}
+function d({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Title, {
+		className: e("m-0 text-label-large text-inverse-on-surface", t),
+		...i
+	});
+}
+function f({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Description, {
+		className: e("m-0 text-body-medium text-inverse-on-surface", t),
+		...i
+	});
+}
+function p({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Action, {
+		className: e("inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-full px-3", "text-label-large text-inverse-primary transition-colors", "hover:bg-inverse-primary/[0.08]", "focus-visible:outline-2 focus-visible:outline-inverse-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38]", t),
+		...i
+	});
+}
+function m({ className: i, children: a, ...o }) {
+	return /* @__PURE__ */ n(r.Close, {
+		"aria-label": "Close",
+		className: e("inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full", "text-inverse-on-surface transition-colors", "hover:bg-inverse-on-surface/[0.08]", "focus-visible:outline-2 focus-visible:outline-inverse-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38]", i),
+		...o,
+		children: a ?? /* @__PURE__ */ n(t, {
+			"aria-hidden": !0,
+			className: "size-4"
+		})
+	});
+}
+function h({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Positioner, {
+		className: e("z-50", t),
+		...i
+	});
+}
+function g({ className: t, children: i, ...a }) {
+	return /* @__PURE__ */ n(r.Arrow, {
+		className: e("data-[side=bottom]:-top-2 data-[side=top]:-bottom-2 data-[side=top]:rotate-180", "data-[side=left]:-right-[13px] data-[side=left]:rotate-90", "data-[side=right]:-left-[13px] data-[side=right]:-rotate-90", t),
+		...a,
+		children: i ?? /* @__PURE__ */ n("svg", {
+			width: "20",
+			height: "10",
+			viewBox: "0 0 20 10",
+			fill: "none",
+			"aria-hidden": !0,
+			children: /* @__PURE__ */ n("path", {
+				d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+				className: "fill-inverse-surface"
+			})
+		})
+	});
+}
+var _ = {
+	Provider: i,
+	Portal: a,
+	Viewport: c,
+	Root: l,
+	Content: u,
+	Title: d,
+	Description: f,
+	Action: p,
+	Close: m,
+	Positioner: h,
+	Arrow: g,
+	useToastManager: o,
+	createToastManager: s
+};
+//#endregion
+export { p as Action, g as Arrow, m as Close, u as Content, f as Description, a as Portal, h as Positioner, i as Provider, l as Root, d as Title, _ as Toast, c as Viewport, s as createToastManager, o as useToastManager };
+
+//# sourceMappingURL=Toast.js.map

package/dist/components/toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { X } from 'lucide-react'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps, ComponentType } from 'react'\n\n/**\n * Toast — Material 3 \"snackbar\" styled wrapper over Base UI's headless Toast.\n * Behaviour/accessibility (manager, stacking, swipe-to-dismiss, F6 landmark):\n * Base UI (https://base-ui.com/react/components/toast).\n * Visuals: M3 snackbar anatomy — inverse-surface container, small (8px) corner,\n * inverse-on-surface body-medium text, inverse-primary text-button action,\n * optional inverse-on-surface close icon, elevation 3.\n * Design ref: port/core/ui/components/snackbar (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Toast.Provider>\n *     <App />  // call Toast.useToastManager().add({ description, ... })\n *     <Toast.Portal>\n *       <Toast.Viewport>\n *         {toasts.map((toast) => (\n *           <Toast.Root key={toast.id} toast={toast}>\n *             <Toast.Content>\n *               <Toast.Title />\n *               <Toast.Description />\n *             </Toast.Content>\n *             <Toast.Action>Undo</Toast.Action>\n *             <Toast.Close />\n *           </Toast.Root>\n *         ))}\n *       </Toast.Viewport>\n *     </Toast.Portal>\n *   </Toast.Provider>\n */\n\nconst Provider = BaseToast.Provider\n// Base UI's Portal component type inlines an internal `FloatingPortalLite.Props`\n// that the package doesn't re-export, so its inferred type isn't nameable in the\n// emitted .d.ts (TS2883). Re-type via the public `Portal.Props` namespace alias,\n// which IS exported, so the declaration stays portable.\nconst Portal = BaseToast.Portal as ComponentType<BaseToast.Portal.Props>\nconst useToastManager = BaseToast.useToastManager\nconst createToastManager = BaseToast.createToastManager\n\n/** Fixed region the toast stack renders into (M3: bottom-centered). */\nfunction Viewport({ className, ...props }: ComponentProps<typeof BaseToast.Viewport>) {\n  return (\n    <BaseToast.Viewport\n      className={cn(\n        'fixed bottom-4 left-1/2 z-50 w-[calc(100vw-2rem)] max-w-[560px] -translate-x-1/2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * One snackbar. Toasts stack absolutely inside the viewport: collapsed they\n * scale down behind the frontmost one (via --toast-index), and on\n * hover/focus ([data-expanded]) they fan out using --toast-offset-y.\n */\nfunction Root({ className, ...props }: ComponentProps<typeof BaseToast.Root>) {\n  return (\n    <BaseToast.Root\n      className={cn(\n        'absolute right-0 bottom-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full select-none',\n        'flex min-h-12 items-center gap-1 py-1 pr-2 pl-4',\n        'rounded-small bg-inverse-surface text-inverse-on-surface shadow-mm-3',\n        '[transition-property:transform,opacity] duration-300 ease-out',\n        // Collapsed stack: peek each older toast up and scale it down.\n        '[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(min(var(--toast-index),10)*-0.5rem)))_scale(max(0,calc(1-(var(--toast-index)*0.05))))]',\n        // Expanded stack: fan out by measured offset + 0.75rem gap per toast.\n        'data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc((var(--toast-offset-y)*-1)+(var(--toast-index)*-0.75rem)+var(--toast-swipe-movement-y)))]',\n        'data-[starting-style]:opacity-0 data-[starting-style]:[transform:translateY(150%)]',\n        'data-[ending-style]:opacity-0 data-[ending-style]:[transform:translateY(150%)]',\n        'data-[limited]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Text block; fades out while behind the frontmost toast in the stack. */\nfunction Content({ className, ...props }: ComponentProps<typeof BaseToast.Content>) {\n  return (\n    <BaseToast.Content\n      className={cn(\n        'flex min-w-0 flex-1 flex-col gap-0.5 py-2',\n        'transition-opacity duration-300 data-[behind]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Title({ className, ...props }: ComponentProps<typeof BaseToast.Title>) {\n  return (\n    <BaseToast.Title\n      className={cn('m-0 text-label-large text-inverse-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Description({ className, ...props }: ComponentProps<typeof BaseToast.Description>) {\n  return (\n    <BaseToast.Description\n      className={cn('m-0 text-body-medium text-inverse-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\n/** Snackbar action: M3 text button in the inverse-primary role. */\nfunction Action({ className, ...props }: ComponentProps<typeof BaseToast.Action>) {\n  return (\n    <BaseToast.Action\n      className={cn(\n        'inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-full px-3',\n        'text-label-large text-inverse-primary transition-colors',\n        'hover:bg-inverse-primary/[0.08]',\n        'focus-visible:outline-2 focus-visible:outline-inverse-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Dismiss icon button (defaults to an X glyph). */\nfunction Close({ className, children, ...props }: ComponentProps<typeof BaseToast.Close>) {\n  return (\n    <BaseToast.Close\n      aria-label=\"Close\"\n      className={cn(\n        'inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full',\n        'text-inverse-on-surface transition-colors',\n        'hover:bg-inverse-on-surface/[0.08]',\n        'focus-visible:outline-2 focus-visible:outline-inverse-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <X aria-hidden className=\"size-4\" />}\n    </BaseToast.Close>\n  )\n}\n\n/** Positions an anchored toast against an element (rare; default flow is the viewport stack). */\nfunction Positioner({ className, ...props }: ComponentProps<typeof BaseToast.Positioner>) {\n  return <BaseToast.Positioner className={cn('z-50', className)} {...props} />\n}\n\n/** Arrow for anchored toasts. */\nfunction Arrow({ className, children, ...props }: ComponentProps<typeof BaseToast.Arrow>) {\n  return (\n    <BaseToast.Arrow\n      className={cn(\n        'data-[side=bottom]:-top-2 data-[side=top]:-bottom-2 data-[side=top]:rotate-180',\n        'data-[side=left]:-right-[13px] data-[side=left]:rotate-90',\n        'data-[side=right]:-left-[13px] data-[side=right]:-rotate-90',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? (\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" aria-hidden>\n          <path\n            d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n            className=\"fill-inverse-surface\"\n          />\n        </svg>\n      )}\n    </BaseToast.Arrow>\n  )\n}\n\nexport const Toast = {\n  Provider,\n  Portal,\n  Viewport,\n  Root,\n  Content,\n  Title,\n  Description,\n  Action,\n  Close,\n  Positioner,\n  Arrow,\n  useToastManager,\n  createToastManager,\n}\nexport {\n  Provider,\n  Portal,\n  Viewport,\n  Root,\n  Content,\n  Title,\n  Description,\n  Action,\n  Close,\n  Positioner,\n  Arrow,\n  useToastManager,\n  createToastManager,\n}\n"],"mappings":";;;;;AAmCA,IAAM,IAAW,EAAU,UAKrB,IAAS,EAAU,QACnB,IAAkB,EAAU,iBAC5B,IAAqB,EAAU;AAGrC,SAAS,EAAS,EAAE,cAAW,GAAG,KAAoD;CACpF,OACE,kBAAC,EAAU,UAAX;EACE,WAAW,EACT,oFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAgD;CAC5E,OACE,kBAAC,EAAU,MAAX;EACE,WAAW,EACT,iGACA,mDACA,wEACA,iEAEA,8LAEA,kLACA,sFACA,kFACA,4BACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAmD;CAClF,OACE,kBAAC,EAAU,SAAX;EACE,WAAW,EACT,6CACA,2DACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAiD;CAC9E,OACE,kBAAC,EAAU,OAAX;EACE,WAAW,EAAG,gDAAgD,CAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAuD;CAC1F,OACE,kBAAC,EAAU,aAAX;EACE,WAAW,EAAG,gDAAgD,CAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAO,EAAE,cAAW,GAAG,KAAkD;CAChF,OACE,kBAAC,EAAU,QAAX;EACE,WAAW,EACT,yFACA,2DACA,mCACA,iEACA,uDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,cAAW,aAAU,GAAG,KAAiD;CACxF,OACE,kBAAC,EAAU,OAAX;EACE,cAAW;EACX,WAAW,EACT,uFACA,6CACA,sCACA,iEACA,uDACA,CACF;EACA,GAAI;YAEH,KAAY,kBAAC,GAAD;GAAG,eAAA;GAAY,WAAU;EAAU,CAAA;CACjC,CAAA;AAErB;AAGA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsD;CACxF,OAAO,kBAAC,EAAU,YAAX;EAAsB,WAAW,EAAG,QAAQ,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC7E;AAGA,SAAS,EAAM,EAAE,cAAW,aAAU,GAAG,KAAiD;CACxF,OACE,kBAAC,EAAU,OAAX;EACE,WAAW,EACT,kFACA,6DACA,+DACA,CACF;EACA,GAAI;YAEH,KACC,kBAAC,OAAD;GAAK,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAA;aAC1D,kBAAC,QAAD;IACE,GAAE;IACF,WAAU;GACX,CAAA;EACE,CAAA;CAEQ,CAAA;AAErB;AAEA,IAAa,IAAQ;CACnB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

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

@@ -0,0 +1 @@
+export { Toast, Provider, Portal, Viewport, Root, Content, Title, Description, Action, Close, Positioner, Arrow, useToastManager, createToastManager, } from './Toast';

package/dist/components/toast/index.js

@@ -0,0 +1,2 @@
+import { Action as e, Arrow as t, Close as n, Content as r, Description as i, Portal as a, Positioner as o, Provider as s, Root as c, Title as l, Toast as u, Viewport as d, createToastManager as f, useToastManager as p } from "./Toast.js";
+export { e as Action, t as Arrow, n as Close, r as Content, i as Description, a as Portal, o as Positioner, s as Provider, c as Root, l as Title, u as Toast, d as Viewport, f as createToastManager, p as useToastManager };

package/dist/components/toggle/Toggle.d.ts

@@ -0,0 +1,38 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * Toggle — Material 3 styled wrapper over Base UI's headless Toggle +
+ * Toggle Group.
+ * Behaviour/accessibility (aria-pressed two-state button, roving focus and
+ * single/multiple selection in a group): Base UI
+ * (https://base-ui.com/react/components/toggle and
+ * https://base-ui.com/react/components/toggle-group).
+ * Visuals: M3 segmented button anatomy — 40px outlined full-round container,
+ * label-large segments separated by outline dividers, selected segment fills
+ * secondary-container with an 18px leading checkmark; standalone toggles
+ * render as outlined toggle buttons with the same selected treatment.
+ * Design ref: port/core/ui/components/button/segmented-button (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Toggle.Group defaultValue={['week']}>
+ *     <Toggle.Root value="day">Day</Toggle.Root>
+ *     <Toggle.Root value="week">Week</Toggle.Root>
+ *     <Toggle.Root value="month">Month</Toggle.Root>
+ *   </Toggle.Group>
+ */
+type RootProps = ComponentProps<typeof BaseToggle> & {
+    /**
+     * Replace the leading checkmark (shown while pressed inside a Toggle.Group)
+     * with a custom node, or `null` to hide it.
+     */
+    icon?: ReactNode;
+};
+declare function Root({ className, children, icon, ...props }: RootProps): import("react").JSX.Element;
+/** Series of toggles sharing pressed state — M3 segmented button container. */
+declare function Group({ className, ...props }: ComponentProps<typeof BaseToggleGroup>): import("react").JSX.Element;
+export declare const Toggle: {
+    Root: typeof Root;
+    Group: typeof Group;
+};
+export { Root, Group };

package/dist/components/toggle/Toggle.js

@@ -0,0 +1,30 @@
+import { cn as e } from "../../lib/cn.js";
+import { Check as t } from "lucide-react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Toggle as i } from "@base-ui/react/toggle";
+import { ToggleGroup as a } from "@base-ui/react/toggle-group";
+//#region src/components/toggle/Toggle.tsx
+function o({ className: a, children: o, icon: s, ...c }) {
+	return /* @__PURE__ */ r(i, {
+		className: e("group relative inline-flex h-10 cursor-pointer items-center justify-center gap-2", "rounded-full border border-outline px-4 text-label-large text-on-surface", "transition-colors duration-150", "before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:transition-colors", "hover:before:bg-on-surface/[0.08]", "data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container", "data-[pressed]:hover:before:bg-on-secondary-container/[0.08]", "focus-visible:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38]", "in-data-[orientation]:rounded-none in-data-[orientation]:border-0", a),
+		...c,
+		children: [s === void 0 ? /* @__PURE__ */ n(t, {
+			"aria-hidden": !0,
+			className: "hidden size-4.5 shrink-0 in-data-[orientation]:group-data-[pressed]:block"
+		}) : s, o]
+	});
+}
+function s({ className: t, ...r }) {
+	return /* @__PURE__ */ n(a, {
+		className: e("inline-flex w-fit overflow-hidden rounded-full border border-outline", "divide-x divide-outline", "data-[orientation=vertical]:flex-col data-[orientation=vertical]:divide-x-0 data-[orientation=vertical]:divide-y", t),
+		...r
+	});
+}
+var c = {
+	Root: o,
+	Group: s
+};
+//#endregion
+export { s as Group, o as Root, c as Toggle };
+
+//# sourceMappingURL=Toggle.js.map

package/dist/components/toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":[],"sources":["../../../src/components/toggle/Toggle.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\nimport { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'\nimport { Check } from 'lucide-react'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps, ReactNode } from 'react'\n\n/**\n * Toggle — Material 3 styled wrapper over Base UI's headless Toggle +\n * Toggle Group.\n * Behaviour/accessibility (aria-pressed two-state button, roving focus and\n * single/multiple selection in a group): Base UI\n * (https://base-ui.com/react/components/toggle and\n * https://base-ui.com/react/components/toggle-group).\n * Visuals: M3 segmented button anatomy — 40px outlined full-round container,\n * label-large segments separated by outline dividers, selected segment fills\n * secondary-container with an 18px leading checkmark; standalone toggles\n * render as outlined toggle buttons with the same selected treatment.\n * Design ref: port/core/ui/components/button/segmented-button (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Toggle.Group defaultValue={['week']}>\n *     <Toggle.Root value=\"day\">Day</Toggle.Root>\n *     <Toggle.Root value=\"week\">Week</Toggle.Root>\n *     <Toggle.Root value=\"month\">Month</Toggle.Root>\n *   </Toggle.Group>\n */\n\ntype RootProps = ComponentProps<typeof BaseToggle> & {\n  /**\n   * Replace the leading checkmark (shown while pressed inside a Toggle.Group)\n   * with a custom node, or `null` to hide it.\n   */\n  icon?: ReactNode\n}\n\nfunction Root({ className, children, icon, ...props }: RootProps) {\n  return (\n    <BaseToggle\n      className={cn(\n        'group relative inline-flex h-10 cursor-pointer items-center justify-center gap-2',\n        'rounded-full border border-outline px-4 text-label-large text-on-surface',\n        'transition-colors duration-150',\n        // M3 state layer (composites over the segment fill).\n        'before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:transition-colors',\n        'hover:before:bg-on-surface/[0.08]',\n        // Selected: M3 segmented button fills secondary-container.\n        'data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container',\n        'data-[pressed]:hover:before:bg-on-secondary-container/[0.08]',\n        'focus-visible:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n        // Inside a Toggle.Group the container owns the outline + dividers.\n        'in-data-[orientation]:rounded-none in-data-[orientation]:border-0',\n        className,\n      )}\n      {...props}\n    >\n      {icon === undefined ? (\n        <Check\n          aria-hidden\n          // M3 selected-segment checkmark: only inside a group, only while pressed.\n          className=\"hidden size-4.5 shrink-0 in-data-[orientation]:group-data-[pressed]:block\"\n        />\n      ) : (\n        icon\n      )}\n      {children}\n    </BaseToggle>\n  )\n}\n\n/** Series of toggles sharing pressed state — M3 segmented button container. */\nfunction Group({ className, ...props }: ComponentProps<typeof BaseToggleGroup>) {\n  return (\n    <BaseToggleGroup\n      className={cn(\n        'inline-flex w-fit overflow-hidden rounded-full border border-outline',\n        'divide-x divide-outline',\n        'data-[orientation=vertical]:flex-col data-[orientation=vertical]:divide-x-0 data-[orientation=vertical]:divide-y',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport const Toggle = { Root, Group }\nexport { Root, Group }\n"],"mappings":";;;;;;AAoCA,SAAS,EAAK,EAAE,cAAW,aAAU,SAAM,GAAG,KAAoB;CAChE,OACE,kBAAC,GAAD;EACE,WAAW,EACT,oFACA,4EACA,kCAEA,+GACA,qCAEA,oFACA,gEACA,4GACA,uDAEA,qEACA,CACF;EACA,GAAI;YAjBN,CAmBG,MAAS,KAAA,IACR,kBAAC,GAAD;GACE,eAAA;GAEA,WAAU;EACX,CAAA,IAED,GAED,CACS;;AAEhB;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAiD;CAC9E,OACE,kBAAC,GAAD;EACE,WAAW,EACT,wEACA,2BACA,oHACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAS;CAAE;CAAM;AAAM"}

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

@@ -0,0 +1 @@
+export { Toggle, Root, Group } from './Toggle';

package/dist/components/toggle/index.js

@@ -0,0 +1,2 @@
+import { Group as e, Root as t, Toggle as n } from "./Toggle.js";
+export { e as Group, t as Root, n as Toggle };

package/dist/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,50 @@
+import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
+import { ComponentProps } from 'react';
+/**
+ * Toolbar — Material 3 styled wrapper over Base UI's headless Toolbar.
+ * Behaviour/accessibility (role="toolbar", roving tabindex, arrow-key
+ * navigation): Base UI (https://base-ui.com/react/components/toolbar).
+ * Visuals: M3 top/bottom app bar anatomy — surface-container fill, 64px row,
+ * title-large title, 40px round icon/text actions with state layers.
+ * Design refs: port/core/ui/components/top-app-bar and
+ * port/core/ui/components/bottom-app-bar (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI (Title is a local M3 app-bar addition):
+ *   <Toolbar.Root>
+ *     <Toolbar.Button aria-label="Open menu"><Menu /></Toolbar.Button>
+ *     <Toolbar.Title>Inbox</Toolbar.Title>
+ *     <Toolbar.Group>
+ *       <Toolbar.Button aria-label="Search"><Search /></Toolbar.Button>
+ *     </Toolbar.Group>
+ *     <Toolbar.Separator />
+ *     <Toolbar.Input aria-label="Filter" placeholder="Filter…" />
+ *     <Toolbar.Link href="#">Help</Toolbar.Link>
+ *   </Toolbar.Root>
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseToolbar.Root>): import("react").JSX.Element;
+/** Groups several toolbar items or toggles (e.g. an app bar's trailing actions). */
+declare function Group({ className, ...props }: ComponentProps<typeof BaseToolbar.Group>): import("react").JSX.Element;
+/**
+ * M3 standard icon/text button (40px state-layer pill). Icon-only usage needs
+ * an `aria-label`. When rendering a Toggle, `aria-pressed` gets the M3
+ * selected treatment (secondary-container).
+ */
+declare function Button({ className, ...props }: ComponentProps<typeof BaseToolbar.Button>): import("react").JSX.Element;
+/** Navigation item styled as an M3 text button in the primary role. */
+declare function Link({ className, ...props }: ComponentProps<typeof BaseToolbar.Link>): import("react").JSX.Element;
+/** Native input integrated with toolbar arrow-key navigation; M3 search-bar fill. */
+declare function Input({ className, ...props }: ComponentProps<typeof BaseToolbar.Input>): import("react").JSX.Element;
+/** Screen-reader-accessible divider between toolbar groups. */
+declare function Separator({ className, ...props }: ComponentProps<typeof BaseToolbar.Separator>): import("react").JSX.Element;
+/** M3 app-bar headline (title-large, fills the space between nav icon and actions). */
+declare function Title({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare const Toolbar: {
+    Root: typeof Root;
+    Group: typeof Group;
+    Button: typeof Button;
+    Link: typeof Link;
+    Input: typeof Input;
+    Separator: typeof Separator;
+    Title: typeof Title;
+};
+export { Root, Group, Button, Link, Input, Separator, Title };

package/dist/components/toolbar/Toolbar.js

@@ -0,0 +1,59 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Toolbar as n } from "@base-ui/react/toolbar";
+//#region src/components/toolbar/Toolbar.tsx
+function r({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Root, {
+		className: e("flex min-h-16 w-full items-center gap-1 bg-surface-container px-2 py-1.5 text-on-surface", "data-[orientation=vertical]:min-h-0 data-[orientation=vertical]:w-auto data-[orientation=vertical]:min-w-16", "data-[orientation=vertical]:flex-col data-[orientation=vertical]:px-1.5 data-[orientation=vertical]:py-2", r),
+		...i
+	});
+}
+function i({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Group, {
+		className: e("flex items-center gap-1 data-[orientation=vertical]:flex-col", r),
+		...i
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Button, {
+		className: e("inline-flex h-10 min-w-10 shrink-0 cursor-pointer items-center justify-center gap-2", "rounded-full px-2.5 text-label-large text-on-surface-variant transition-colors", "hover:bg-on-surface/[0.08]", "focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary", "aria-pressed:bg-secondary-container aria-pressed:text-on-secondary-container", "disabled:cursor-not-allowed disabled:opacity-[0.38]", r),
+		...i
+	});
+}
+function o({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Link, {
+		className: e("inline-flex h-10 shrink-0 cursor-pointer items-center rounded-full px-3", "text-label-large text-primary no-underline transition-colors", "hover:bg-primary/[0.08]", "focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary", r),
+		...i
+	});
+}
+function s({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Input, {
+		className: e("h-10 w-48 rounded-full bg-surface-container-highest px-4", "text-body-large text-on-surface placeholder:text-on-surface-variant", "focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38]", r),
+		...i
+	});
+}
+function c({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Separator, {
+		className: e("shrink-0 bg-outline-variant", "data-[orientation=vertical]:mx-1 data-[orientation=vertical]:h-6 data-[orientation=vertical]:w-px", "data-[orientation=horizontal]:my-1 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-6", r),
+		...i
+	});
+}
+function l({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("min-w-0 flex-1 truncate px-1 text-title-large text-on-surface", n),
+		...r
+	});
+}
+var u = {
+	Root: r,
+	Group: i,
+	Button: a,
+	Link: o,
+	Input: s,
+	Separator: c,
+	Title: l
+};
+//#endregion
+export { a as Button, i as Group, s as Input, o as Link, r as Root, c as Separator, l as Title, u as Toolbar };
+
+//# sourceMappingURL=Toolbar.js.map

package/dist/components/toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","names":[],"sources":["../../../src/components/toolbar/Toolbar.tsx"],"sourcesContent":["import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Toolbar — Material 3 styled wrapper over Base UI's headless Toolbar.\n * Behaviour/accessibility (role=\"toolbar\", roving tabindex, arrow-key\n * navigation): Base UI (https://base-ui.com/react/components/toolbar).\n * Visuals: M3 top/bottom app bar anatomy — surface-container fill, 64px row,\n * title-large title, 40px round icon/text actions with state layers.\n * Design refs: port/core/ui/components/top-app-bar and\n * port/core/ui/components/bottom-app-bar (see CLAUDE.md).\n *\n * Compound API mirrors Base UI (Title is a local M3 app-bar addition):\n *   <Toolbar.Root>\n *     <Toolbar.Button aria-label=\"Open menu\"><Menu /></Toolbar.Button>\n *     <Toolbar.Title>Inbox</Toolbar.Title>\n *     <Toolbar.Group>\n *       <Toolbar.Button aria-label=\"Search\"><Search /></Toolbar.Button>\n *     </Toolbar.Group>\n *     <Toolbar.Separator />\n *     <Toolbar.Input aria-label=\"Filter\" placeholder=\"Filter…\" />\n *     <Toolbar.Link href=\"#\">Help</Toolbar.Link>\n *   </Toolbar.Root>\n */\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseToolbar.Root>) {\n  return (\n    <BaseToolbar.Root\n      className={cn(\n        'flex min-h-16 w-full items-center gap-1 bg-surface-container px-2 py-1.5 text-on-surface',\n        'data-[orientation=vertical]:min-h-0 data-[orientation=vertical]:w-auto data-[orientation=vertical]:min-w-16',\n        'data-[orientation=vertical]:flex-col data-[orientation=vertical]:px-1.5 data-[orientation=vertical]:py-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Groups several toolbar items or toggles (e.g. an app bar's trailing actions). */\nfunction Group({ className, ...props }: ComponentProps<typeof BaseToolbar.Group>) {\n  return (\n    <BaseToolbar.Group\n      className={cn('flex items-center gap-1 data-[orientation=vertical]:flex-col', className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * M3 standard icon/text button (40px state-layer pill). Icon-only usage needs\n * an `aria-label`. When rendering a Toggle, `aria-pressed` gets the M3\n * selected treatment (secondary-container).\n */\nfunction Button({ className, ...props }: ComponentProps<typeof BaseToolbar.Button>) {\n  return (\n    <BaseToolbar.Button\n      className={cn(\n        'inline-flex h-10 min-w-10 shrink-0 cursor-pointer items-center justify-center gap-2',\n        'rounded-full px-2.5 text-label-large text-on-surface-variant transition-colors',\n        'hover:bg-on-surface/[0.08]',\n        'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary',\n        'aria-pressed:bg-secondary-container aria-pressed:text-on-secondary-container',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Navigation item styled as an M3 text button in the primary role. */\nfunction Link({ className, ...props }: ComponentProps<typeof BaseToolbar.Link>) {\n  return (\n    <BaseToolbar.Link\n      className={cn(\n        'inline-flex h-10 shrink-0 cursor-pointer items-center rounded-full px-3',\n        'text-label-large text-primary no-underline transition-colors',\n        'hover:bg-primary/[0.08]',\n        'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Native input integrated with toolbar arrow-key navigation; M3 search-bar fill. */\nfunction Input({ className, ...props }: ComponentProps<typeof BaseToolbar.Input>) {\n  return (\n    <BaseToolbar.Input\n      className={cn(\n        'h-10 w-48 rounded-full bg-surface-container-highest px-4',\n        'text-body-large text-on-surface placeholder:text-on-surface-variant',\n        'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Screen-reader-accessible divider between toolbar groups. */\nfunction Separator({ className, ...props }: ComponentProps<typeof BaseToolbar.Separator>) {\n  return (\n    <BaseToolbar.Separator\n      className={cn(\n        'shrink-0 bg-outline-variant',\n        'data-[orientation=vertical]:mx-1 data-[orientation=vertical]:h-6 data-[orientation=vertical]:w-px',\n        'data-[orientation=horizontal]:my-1 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-6',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** M3 app-bar headline (title-large, fills the space between nav icon and actions). */\nfunction Title({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn('min-w-0 flex-1 truncate px-1 text-title-large text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nexport const Toolbar = { Root, Group, Button, Link, Input, Separator, Title }\nexport { Root, Group, Button, Link, Input, Separator, Title }\n"],"mappings":";;;;AA2BA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAkD;CAC9E,OACE,kBAAC,EAAY,MAAb;EACE,WAAW,EACT,4FACA,+GACA,4GACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAmD;CAChF,OACE,kBAAC,EAAY,OAAb;EACE,WAAW,EAAG,gEAAgE,CAAS;EACvF,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,EAAO,EAAE,cAAW,GAAG,KAAoD;CAClF,OACE,kBAAC,EAAY,QAAb;EACE,WAAW,EACT,uFACA,kFACA,8BACA,yFACA,gFACA,uDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAkD;CAC9E,OACE,kBAAC,EAAY,MAAb;EACE,WAAW,EACT,2EACA,gEACA,2BACA,yFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAmD;CAChF,OACE,kBAAC,EAAY,OAAb;EACE,WAAW,EACT,4DACA,uEACA,yFACA,uDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAuD;CACxF,OACE,kBAAC,EAAY,WAAb;EACE,WAAW,EACT,+BACA,qGACA,2GACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAgC;CAC7D,OACE,kBAAC,OAAD;EACE,WAAW,EAAG,iEAAiE,CAAS;EACxF,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAU;CAAE;CAAM;CAAO;CAAQ;CAAM;CAAO;CAAW;AAAM"}

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

@@ -0,0 +1 @@
+export { Toolbar, Root, Group, Button, Link, Input, Separator, Title } from './Toolbar';

package/dist/components/toolbar/index.js

@@ -0,0 +1,2 @@
+import { Button as e, Group as t, Input as n, Link as r, Root as i, Separator as a, Title as o, Toolbar as s } from "./Toolbar.js";
+export { e as Button, t as Group, n as Input, r as Link, i as Root, a as Separator, o as Title, s as Toolbar };

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,58 @@
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { ComponentProps } from 'react';
+/**
+ * Tooltip — Material 3 styled wrapper over Base UI's headless Tooltip.
+ * Behaviour/accessibility (hover/focus open, delay grouping via Provider,
+ * positioning, `role="tooltip"`): Base UI
+ * (https://base-ui.com/react/components/tooltip).
+ * Visuals: M3 plain tooltip anatomy — inverse-surface container,
+ * inverse-on-surface body-small label, extra-small corner, 4dp offset.
+ * Design ref: port/core/ui/components/tooltips (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Tooltip.Provider>
+ *     <Tooltip.Root>
+ *       <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+ *       <Tooltip.Portal>
+ *         <Tooltip.Positioner>
+ *           <Tooltip.Popup>
+ *             <Tooltip.Arrow />
+ *             Label
+ *           </Tooltip.Popup>
+ *         </Tooltip.Positioner>
+ *       </Tooltip.Portal>
+ *     </Tooltip.Root>
+ *   </Tooltip.Provider>
+ */
+declare const Provider: import('react').FC<import('@base-ui/react').TooltipProviderProps>;
+declare const Root: <Payload>(props: BaseTooltip.Root.Props<Payload>) => import("react").JSX.Element;
+declare const Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').TooltipPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Handle: typeof BaseTooltip.Handle;
+declare const createHandle: typeof BaseTooltip.createHandle;
+declare function Trigger({ className, ...props }: ComponentProps<typeof BaseTooltip.Trigger>): import("react").JSX.Element;
+declare function Positioner({ className, sideOffset, ...props }: ComponentProps<typeof BaseTooltip.Positioner>): import("react").JSX.Element;
+declare function Popup({ className, ...props }: ComponentProps<typeof BaseTooltip.Popup>): import("react").JSX.Element;
+/**
+ * Optional pointing arrow (M3 plain tooltips usually omit it). Renders a small
+ * inverse-surface diamond that Base UI positions on the popup edge facing the
+ * anchor.
+ */
+declare function Arrow({ className, children, ...props }: ComponentProps<typeof BaseTooltip.Arrow>): import("react").JSX.Element;
+/**
+ * Transition container for content changes when one tooltip is shared by
+ * multiple triggers — only needed for animated trigger-to-trigger switching.
+ */
+declare function Viewport({ className, ...props }: ComponentProps<typeof BaseTooltip.Viewport>): import("react").JSX.Element;
+export declare const Tooltip: {
+    Provider: import('react').FC<import('@base-ui/react').TooltipProviderProps>;
+    Root: <Payload>(props: BaseTooltip.Root.Props<Payload>) => import("react").JSX.Element;
+    Trigger: typeof Trigger;
+    Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').TooltipPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Positioner: typeof Positioner;
+    Popup: typeof Popup;
+    Arrow: typeof Arrow;
+    Viewport: typeof Viewport;
+    Handle: typeof BaseTooltip.Handle;
+    createHandle: typeof BaseTooltip.createHandle;
+};
+export { Provider, Root, Trigger, Portal, Positioner, Popup, Arrow, Viewport, Handle, createHandle, };

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,57 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Tooltip as n } from "@base-ui/react/tooltip";
+//#region src/components/tooltip/Tooltip.tsx
+var r = n.Provider, i = n.Root, a = n.Portal, o = n.Handle, s = n.createHandle;
+function c({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Trigger, {
+		className: e(r),
+		...i
+	});
+}
+function l({ className: r, sideOffset: i = 4, ...a }) {
+	return /* @__PURE__ */ t(n.Positioner, {
+		className: e("z-50 outline-none", r),
+		sideOffset: i,
+		...a
+	});
+}
+function u({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Popup, {
+		role: "tooltip",
+		className: e("flex min-h-6 max-w-[200px] items-center origin-(--transform-origin)", "rounded-extra-small bg-inverse-surface px-2 py-1 text-body-small text-inverse-on-surface", "transition-[opacity,scale] duration-150 ease-out", "data-[starting-style]:scale-90 data-[starting-style]:opacity-0", "data-[ending-style]:scale-90 data-[ending-style]:opacity-0", "data-[instant]:duration-0", r),
+		...i
+	});
+}
+function d({ className: r, children: i, ...a }) {
+	return /* @__PURE__ */ t(n.Arrow, {
+		className: e("data-[side=top]:-bottom-1 data-[side=bottom]:-top-1", "data-[side=left]:-right-1 data-[side=right]:-left-1", r),
+		...a,
+		children: i ?? /* @__PURE__ */ t("div", {
+			"aria-hidden": !0,
+			className: "size-2 rotate-45 bg-inverse-surface"
+		})
+	});
+}
+function f({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Viewport, {
+		className: e("relative", r),
+		...i
+	});
+}
+var p = {
+	Provider: r,
+	Root: i,
+	Trigger: c,
+	Portal: a,
+	Positioner: l,
+	Popup: u,
+	Arrow: d,
+	Viewport: f,
+	Handle: o,
+	createHandle: s
+};
+//#endregion
+export { d as Arrow, o as Handle, u as Popup, a as Portal, l as Positioner, r as Provider, i as Root, p as Tooltip, c as Trigger, f as Viewport, s as createHandle };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Tooltip — Material 3 styled wrapper over Base UI's headless Tooltip.\n * Behaviour/accessibility (hover/focus open, delay grouping via Provider,\n * positioning, `role=\"tooltip\"`): Base UI\n * (https://base-ui.com/react/components/tooltip).\n * Visuals: M3 plain tooltip anatomy — inverse-surface container,\n * inverse-on-surface body-small label, extra-small corner, 4dp offset.\n * Design ref: port/core/ui/components/tooltips (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Tooltip.Provider>\n *     <Tooltip.Root>\n *       <Tooltip.Trigger>Hover me</Tooltip.Trigger>\n *       <Tooltip.Portal>\n *         <Tooltip.Positioner>\n *           <Tooltip.Popup>\n *             <Tooltip.Arrow />\n *             Label\n *           </Tooltip.Popup>\n *         </Tooltip.Positioner>\n *       </Tooltip.Portal>\n *     </Tooltip.Root>\n *   </Tooltip.Provider>\n */\n\nconst Provider = BaseTooltip.Provider\nconst Root = BaseTooltip.Root\nconst Portal = BaseTooltip.Portal\nconst Handle = BaseTooltip.Handle\nconst createHandle = BaseTooltip.createHandle\n\nfunction Trigger({\n  className,\n  ...props\n}: ComponentProps<typeof BaseTooltip.Trigger>) {\n  return <BaseTooltip.Trigger className={cn(className)} {...props} />\n}\n\nfunction Positioner({\n  className,\n  sideOffset = 4,\n  ...props\n}: ComponentProps<typeof BaseTooltip.Positioner>) {\n  return (\n    <BaseTooltip.Positioner\n      className={cn('z-50 outline-none', className)}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction Popup({\n  className,\n  ...props\n}: ComponentProps<typeof BaseTooltip.Popup>) {\n  return (\n    <BaseTooltip.Popup\n      // Base UI leaves the popup role-less; expose the standard ARIA tooltip\n      // role so assistive tech (and role-based queries) can identify it.\n      role=\"tooltip\"\n      className={cn(\n        'flex min-h-6 max-w-[200px] items-center origin-(--transform-origin)',\n        'rounded-extra-small bg-inverse-surface px-2 py-1 text-body-small text-inverse-on-surface',\n        'transition-[opacity,scale] duration-150 ease-out',\n        'data-[starting-style]:scale-90 data-[starting-style]:opacity-0',\n        'data-[ending-style]:scale-90 data-[ending-style]:opacity-0',\n        'data-[instant]:duration-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Optional pointing arrow (M3 plain tooltips usually omit it). Renders a small\n * inverse-surface diamond that Base UI positions on the popup edge facing the\n * anchor.\n */\nfunction Arrow({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof BaseTooltip.Arrow>) {\n  return (\n    <BaseTooltip.Arrow\n      className={cn(\n        'data-[side=top]:-bottom-1 data-[side=bottom]:-top-1',\n        'data-[side=left]:-right-1 data-[side=right]:-left-1',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? (\n        <div aria-hidden className=\"size-2 rotate-45 bg-inverse-surface\" />\n      )}\n    </BaseTooltip.Arrow>\n  )\n}\n\n/**\n * Transition container for content changes when one tooltip is shared by\n * multiple triggers — only needed for animated trigger-to-trigger switching.\n */\nfunction Viewport({\n  className,\n  ...props\n}: ComponentProps<typeof BaseTooltip.Viewport>) {\n  return (\n    <BaseTooltip.Viewport className={cn('relative', className)} {...props} />\n  )\n}\n\nexport const Tooltip = {\n  Provider,\n  Root,\n  Trigger,\n  Portal,\n  Positioner,\n  Popup,\n  Arrow,\n  Viewport,\n  Handle,\n  createHandle,\n}\nexport {\n  Provider,\n  Root,\n  Trigger,\n  Portal,\n  Positioner,\n  Popup,\n  Arrow,\n  Viewport,\n  Handle,\n  createHandle,\n}\n"],"mappings":";;;;AA8BA,IAAM,IAAW,EAAY,UACvB,IAAO,EAAY,MACnB,IAAS,EAAY,QACrB,IAAS,EAAY,QACrB,IAAe,EAAY;AAEjC,SAAS,EAAQ,EACf,cACA,GAAG,KAC0C;CAC7C,OAAO,kBAAC,EAAY,SAAb;EAAqB,WAAW,EAAG,CAAS;EAAG,GAAI;CAAQ,CAAA;AACpE;AAEA,SAAS,EAAW,EAClB,cACA,gBAAa,GACb,GAAG,KAC6C;CAChD,OACE,kBAAC,EAAY,YAAb;EACE,WAAW,EAAG,qBAAqB,CAAS;EAChC;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EACb,cACA,GAAG,KACwC;CAC3C,OACE,kBAAC,EAAY,OAAb;EAGE,MAAK;EACL,WAAW,EACT,uEACA,4FACA,oDACA,kEACA,8DACA,6BACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,EAAM,EACb,cACA,aACA,GAAG,KACwC;CAC3C,OACE,kBAAC,EAAY,OAAb;EACE,WAAW,EACT,uDACA,uDACA,CACF;EACA,GAAI;YAEH,KACC,kBAAC,OAAD;GAAK,eAAA;GAAY,WAAU;EAAuC,CAAA;CAEnD,CAAA;AAEvB;AAMA,SAAS,EAAS,EAChB,cACA,GAAG,KAC2C;CAC9C,OACE,kBAAC,EAAY,UAAb;EAAsB,WAAW,EAAG,YAAY,CAAS;EAAG,GAAI;CAAQ,CAAA;AAE5E;AAEA,IAAa,IAAU;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

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

@@ -0,0 +1 @@
+export { Tooltip, Provider, Root, Trigger, Portal, Positioner, Popup, Arrow, Viewport, Handle, createHandle, } from './Tooltip';

package/dist/components/tooltip/index.js

@@ -0,0 +1,2 @@
+import { Arrow as e, Handle as t, Popup as n, Portal as r, Positioner as i, Provider as a, Root as o, Tooltip as s, Trigger as c, Viewport as l, createHandle as u } from "./Tooltip.js";
+export { e as Arrow, t as Handle, n as Popup, r as Portal, i as Positioner, a as Provider, o as Root, s as Tooltip, c as Trigger, l as Viewport, u as createHandle };

package/dist/index.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @duestel/ui — Material 3 component library (M3 design guide port).
+ *
+ * This root barrel re-exports each component's compound *namespace* object
+ * (e.g. `Accordion`, `Menu`, `Select`) plus its unique helpers and types.
+ * Shared compound parts (`Root`, `Trigger`, `Item`, …) and repeated helpers
+ * (`createHandle`, `useFilter`, `Provider`) are intentionally NOT flattened
+ * here — they collide across components. Reach them via the component
+ * namespace (`<Accordion.Root>`) or the per-component subpath export, which
+ * mirrors Base UI:  import { Root } from '@duestel/ui/accordion'.
+ *
+ * Styles: import '@duestel/ui/styles.css' once (zero-config), or, in a
+ * Tailwind 4 app, `@import "@duestel/ui/theme.css"` + `@source "@duestel/ui"`.
+ */
+export { cn } from './lib/cn';
+export { Accordion } from './components/accordion';
+export { AlertDialog } from './components/alert-dialog';
+export { Autocomplete } from './components/autocomplete';
+export { Avatar } from './components/avatar';
+export type { AvatarSize } from './components/avatar';
+export { Badge, DotBadge, OnIconBadge } from './components/badge';
+export type { BadgeProps, DotBadgeProps, OnIconBadgeProps } from './components/badge';
+export { Button } from './components/button';
+export type { ButtonVariant, IconButtonVariant, FabVariant } from './components/button';
+export { Carousel } from './components/carousel';
+export { Checkbox } from './components/checkbox';
+export { Collapsible } from './components/collapsible';
+export { Combobox } from './components/combobox';
+export { Command, CommandDialog } from './components/command';
+export { ContextMenu } from './components/context-menu';
+export { DataTable, Table, TextContainer } from './components/data-table';
+export type { ColumnDef } from './components/data-table';
+export { DatePicker, DateRangePicker, Calendar, RangeCalendar } from './components/date-picker';
+export type { DateRange } from './components/date-picker';
+export { Dialog } from './components/dialog';
+export { Drawer } from './components/drawer';
+export { Form, Field, Fieldset, fieldControlClasses, TextField, InputOutlined, InputFilled, TextFieldOutlined, TextFieldFilled, useAppForm, withForm, useFieldContext, useFormContext, } from './components/form';
+export { Kbd, Hotkey, HotkeysProvider, formatForDisplay, useHotkey, useHotkeys, useHotkeySequence, useKeyHold, } from './components/hotkeys';
+export { Menu } from './components/menu';
+export { Menubar } from './components/menubar';
+export { Meter } from './components/meter';
+export { NavigationMenu } from './components/navigation-menu';
+export { NumberField } from './components/number-field';
+export { OtpField } from './components/otp-field';
+export { Pagination } from './components/pagination';
+export { Popover } from './components/popover';
+export { PreviewCard } from './components/preview-card';
+export { Progress } from './components/progress';
+export { Radio } from './components/radio';
+export { Resizable } from './components/resizable';
+export { ScrollArea } from './components/scroll-area';
+export { Select } from './components/select';
+export { Separator } from './components/separator';
+export { Slider } from './components/slider';
+export { Switch } from './components/switch';
+export { Tabs } from './components/tabs';
+export { Toast, useToastManager, createToastManager } from './components/toast';
+export { Toggle } from './components/toggle';
+export { Toolbar } from './components/toolbar';
+export { Tooltip } from './components/tooltip';