@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.21

package/dist/ui/src/components/ui/breadcrumb/breadcrumb.js

@@ -0,0 +1,73 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconChevronRight, IconDots } from "@tabler/icons-react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region ../ui/src/components/ui/breadcrumb/breadcrumb.tsx
+var Breadcrumb = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "breadcrumb",
+		"data-slot": "breadcrumb",
+		className: cn(className),
+		...props
+	});
+};
+var BreadcrumbList = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", className),
+		...props
+	});
+};
+var BreadcrumbItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: cn("inline-flex items-center gap-1", className),
+		...props
+	});
+};
+var BreadcrumbLink = ({ className, render, ...props }) => {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({ className: cn("inline-flex h-6 items-center transition-colors hover:text-foreground", className) }, props),
+		render,
+		state: { slot: "breadcrumb-link" }
+	});
+};
+var BreadcrumbPage = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-page",
+		role: "link",
+		"aria-disabled": "true",
+		"aria-current": "page",
+		className: cn("font-normal text-foreground", className),
+		...props
+	});
+};
+var BreadcrumbSeparator = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("[&>svg]:size-3.5", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(IconChevronRight, {})
+	});
+};
+var BreadcrumbEllipsis = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(IconDots, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More"
+		})]
+	});
+};
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+
+//# sourceMappingURL=breadcrumb.js.map

package/dist/ui/src/components/ui/breadcrumb/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../../../../../../ui/src/components/ui/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconChevronRight, IconDots } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nexport const Breadcrumb = ({ className, ...props }: React.ComponentProps<'nav'>) => {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" className={cn(className)} {...props} />;\n};\n\nexport const BreadcrumbList = ({ className, ...props }: React.ComponentProps<'ol'>) => {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn('flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const BreadcrumbItem = ({ className, ...props }: React.ComponentProps<'li'>) => {\n  return <li data-slot=\"breadcrumb-item\" className={cn('inline-flex items-center gap-1', className)} {...props} />;\n};\n\nexport const BreadcrumbLink = ({ className, render, ...props }: useRender.ComponentProps<'a'>) => {\n  return useRender({\n    defaultTagName: 'a',\n    props: mergeProps<'a'>(\n      {\n        className: cn('inline-flex h-6 items-center transition-colors hover:text-foreground', className),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'breadcrumb-link',\n    },\n  });\n};\n\nexport const BreadcrumbPage = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    // biome-ignore lint/a11y/useFocusableInteractive: matches shadcn pattern; the current page is not an interactive target\n    // biome-ignore lint/a11y/useSemanticElements: <span> is intentional; role=\"link\" here only conveys visual/semantic context, not an actual navigable link\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn('font-normal text-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => {\n  return (\n    <li data-slot=\"breadcrumb-separator\" role=\"presentation\" aria-hidden=\"true\" className={cn('[&>svg]:size-3.5', className)} {...props}>\n      {children ?? <IconChevronRight />}\n    </li>\n  );\n};\n\nexport const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('flex size-5 items-center justify-center [&>svg]:size-4', className)}\n      {...props}\n    >\n      <IconDots />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,cAAW;EAAa,aAAU;EAAa,WAAW,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnG;AAEA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAAwC;CACrF,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,qFAAqF,SAAS;EAC5G,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAAwC;CACrF,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,WAAW,GAAG,kCAAkC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjH;AAEA,IAAa,kBAAkB,EAAE,WAAW,QAAQ,GAAG,YAA2C;CAChG,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,wEAAwE,SAAS,EACjG,GACA,KACF;EACA;EACA,OAAO,EACL,MAAM,kBACR;CACF,CAAC;AACH;AAEA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAA0C;CACvF,OAGE,oBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,iBAAc;EACd,gBAAa;EACb,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,uBAAuB,EAAE,UAAU,WAAW,GAAG,YAAwC;CACpG,OACE,oBAAC,MAAD;EAAI,aAAU;EAAuB,MAAK;EAAe,eAAY;EAAO,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;EAC3H,UAAA,YAAY,oBAAC,kBAAD,CAAmB,CAAA;CAC9B,CAAA;AAER;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAA0C;CAC3F,OACE,qBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;EALN,UAAA,CAOE,oBAAC,UAAD,CAAW,CAAA,GACX,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAU,CAAA,CAChC;;AAEV"}

package/dist/ui/src/components/ui/bubble/bubble.js

@@ -0,0 +1,74 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region ../ui/src/components/ui/bubble/bubble.tsx
+var BubbleGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble-group",
+		className: cn("flex min-w-0 flex-col gap-2", className),
+		...props
+	});
+};
+var bubbleVariants = cva("group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full", {
+	variants: { variant: {
+		default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+		secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+		muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+		tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+		outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+		ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+		destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+	} },
+	defaultVariants: { variant: "default" }
+});
+var Bubble = ({ variant = "default", align = "start", className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble",
+		"data-variant": variant,
+		"data-align": align,
+		className: cn(bubbleVariants({ variant }), className),
+		...props
+	});
+};
+var BubbleContent = ({ className, render, ...props }) => {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none ", className) }, props),
+		render,
+		state: { slot: "bubble-content" }
+	});
+};
+var bubbleReactionsVariants = cva("absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0", {
+	variants: {
+		side: {
+			top: "top-0 -translate-y-3/4",
+			bottom: "bottom-0 translate-y-3/4"
+		},
+		align: {
+			start: "left-3",
+			end: "right-3"
+		}
+	},
+	defaultVariants: {
+		side: "bottom",
+		align: "end"
+	}
+});
+var BubbleReactions = ({ side = "bottom", align = "end", className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble-reactions",
+		"data-align": align,
+		"data-side": side,
+		className: cn(bubbleReactionsVariants({
+			side,
+			align
+		}), className),
+		...props
+	});
+};
+//#endregion
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };
+
+//# sourceMappingURL=bubble.js.map

package/dist/ui/src/components/ui/bubble/bubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubble.js","names":[],"sources":["../../../../../../../ui/src/components/ui/bubble/bubble.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nexport const BubbleGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"bubble-group\" className={cn('flex min-w-0 flex-col gap-2', className)} {...props} />;\n};\n\nconst bubbleVariants = cva(\n  'group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',\n  {\n    variants: {\n      variant: {\n        default:\n          '*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80',\n        secondary:\n          '*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]',\n        muted:\n          '*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]',\n        tinted:\n          '*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]',\n        outline:\n          '*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30',\n        ghost:\n          'border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50',\n        destructive:\n          '*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport const Bubble = ({\n  variant = 'default',\n  align = 'start',\n  className,\n  ...props\n}: React.ComponentProps<'div'> &\n  VariantProps<typeof bubbleVariants> & {\n    align?: 'start' | 'end';\n  }) => {\n  return <div data-slot=\"bubble\" data-variant={variant} data-align={align} className={cn(bubbleVariants({ variant }), className)} {...props} />;\n};\n\nexport const BubbleContent = ({ className, render, ...props }: useRender.ComponentProps<'div'>) => {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(\n          'w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none ',\n          className,\n        ),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'bubble-content',\n    },\n  });\n};\n\nconst bubbleReactionsVariants = cva(\n  'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0',\n  {\n    variants: {\n      side: {\n        top: 'top-0 -translate-y-3/4',\n        bottom: 'bottom-0 translate-y-3/4',\n      },\n      align: {\n        start: 'left-3',\n        end: 'right-3',\n      },\n    },\n    defaultVariants: {\n      side: 'bottom',\n      align: 'end',\n    },\n  },\n);\n\nexport const BubbleReactions = ({\n  side = 'bottom',\n  align = 'end',\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  align?: 'start' | 'end';\n  side?: 'top' | 'bottom';\n}) => {\n  return (\n    <div\n      data-slot=\"bubble-reactions\"\n      data-align={align}\n      data-side={side}\n      className={cn(bubbleReactionsVariants({ side, align }), className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,+BAA+B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC5G;AAEA,IAAM,iBAAiB,IACrB,yKACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WACE;EACF,OACE;EACF,QACE;EACF,SACE;EACF,OACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,IAAa,UAAU,EACrB,UAAU,WACV,QAAQ,SACR,WACA,GAAG,YAIG;CACN,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAS,gBAAc;EAAS,cAAY;EAAO,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC9I;AAEA,IAAa,iBAAiB,EAAE,WAAW,QAAQ,GAAG,YAA6C;CACjG,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,mPACA,SACF,EACF,GACA,KACF;EACA;EACA,OAAO,EACL,MAAM,iBACR;CACF,CAAC;AACH;AAEA,IAAM,0BAA0B,IAC9B,qJACA;CACE,UAAU;EACR,MAAM;GACJ,KAAK;GACL,QAAQ;EACV;EACA,OAAO;GACL,OAAO;GACP,KAAK;EACP;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;AAEA,IAAa,mBAAmB,EAC9B,OAAO,UACP,QAAQ,OACR,WACA,GAAG,YAIC;CACJ,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,wBAAwB;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACjE,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/button/button.behavior.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A Button that renders a link has to stay a link.
+ *
+ * PATH TAKEN: the roles and attributes Base UI emits do not depend on layout, so
+ * happy-dom is enough to assert what assistive technology would be told. The
+ * axe scan over the demo pages covers it again in a real browser.
+ */
+export {};

package/dist/ui/src/components/ui/button/button.d.ts

@@ -1,7 +1,7 @@
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const Button: ({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) => import('react').JSX.Element;

package/dist/ui/src/components/ui/button/button.js

@@ -0,0 +1,93 @@
+import { cn } from "../../../lib/utils.js";
+import { isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+//#region ../ui/src/components/ui/button/button.tsx
+/**
+* The fill of a disabled Button that has one: muted, whichever way it is disabled (a button's own disabled, Base UI's
+* data-disabled, or aria-disabled on a link), in the dark theme too, where the variants set their own fill. Ghost and link
+* have no fill to begin with and are given none: a grey box would turn a link into a button.
+*/
+var DISABLED_FILL = "disabled:bg-muted data-disabled:bg-muted aria-disabled:bg-muted dark:disabled:bg-muted dark:data-disabled:bg-muted dark:aria-disabled:bg-muted";
+var buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all motion-reduce:transition-none motion-reduce:transform-none outline-none select-none active:not-aria-[haspopup]:not-aria-disabled:translate-y-px disabled:pointer-events-none disabled:border-transparent disabled:text-foreground/60 disabled:shadow-none disabled:focus-visible:ring-0 dark:disabled:border-transparent data-link-disabled:pointer-events-none data-link-disabled:focus-visible:ring-0 data-disabled:border-transparent data-disabled:text-foreground/60 data-disabled:shadow-none dark:data-disabled:border-transparent aria-disabled:border-transparent aria-disabled:text-foreground/60 aria-disabled:shadow-none dark:aria-disabled:border-transparent aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: `bg-primary text-primary-foreground hover:bg-primary/80 ${DISABLED_FILL}`,
+			outline: `border-control bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-control dark:bg-input/30 dark:hover:bg-input/50 ${DISABLED_FILL}`,
+			secondary: `bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground ${DISABLED_FILL}`,
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 aria-disabled:hover:bg-transparent dark:aria-disabled:hover:bg-transparent",
+			destructive: `bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/15 dark:hover:bg-destructive/20 ${DISABLED_FILL}`,
+			link: "text-primary underline-offset-4 hover:underline aria-disabled:hover:no-underline"
+		},
+		size: {
+			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			icon: "size-8",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/**
+* Whether this Button is rendering a link rather than a button, so it can keep
+* link semantics. Covers `render={<a href="..." />}` and a routing component
+* that takes an `href` (Next's Link). A component with a different prop for its
+* destination (react-router's `to`) cannot be recognised from here: give those
+* `nativeButton={false} role={undefined}` directly.
+*/
+var rendersALink = (render) => isValidElement(render) && (render.type === "a" || typeof render.props.href === "string");
+/**
+* A link that looks like a button is still a link, and has to be announced as
+* one: it opens in a new tab, it has an address, Enter follows it and Space
+* scrolls the page.
+*
+* Base UI needs telling, in two steps. Rendering an anchor while `nativeButton`
+* is true (its default) warns in development and puts `type="button"` on the
+* anchor; following the warning and passing `nativeButton={false}` then adds
+* `role="button"`, which is what takes the link semantics away. So this does
+* both: non-native, with the role and the tabindex Base UI would add cleared
+* again. An explicit prop from the caller still wins over either.
+*/
+var LINK_PROPS = {
+	nativeButton: false,
+	role: void 0,
+	tabIndex: void 0
+};
+/**
+* A disabled link is not :disabled (only a form control can be), so the markup has to say it: Base UI already marks it
+* `aria-disabled` and `data-disabled` and stops the click, and this takes it out of the tab order, which LINK_PROPS
+* would otherwise leave to the browser. The href is kept on purpose, so a routing component that requires one keeps
+* working; the pointer is kept off the link by `data-link-disabled:pointer-events-none`, which also covers a middle
+* click and the context menu, and the click and Enter are stopped by Base UI. It is a data attribute of its own, not
+* `aria-disabled`, because an aria-disabled button (`focusableWhenDisabled`) is meant to stay hoverable and focusable so it
+* can say why it cannot act; only a native :disabled button and this link are inert.
+*/
+var DISABLED_LINK_PROPS = {
+	...LINK_PROPS,
+	tabIndex: -1,
+	"data-link-disabled": ""
+};
+var Button$1 = ({ className, variant = "default", size = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "button",
+		...rendersALink(props.render) ? props.disabled ? DISABLED_LINK_PROPS : LINK_PROPS : {},
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+};
+//#endregion
+export { Button$1 as Button, buttonVariants };
+
+//# sourceMappingURL=button.js.map

package/dist/ui/src/components/ui/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../ui/src/components/ui/button/button.tsx"],"sourcesContent":["import { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { isValidElement } from 'react';\n\n/**\n * The fill of a disabled Button that has one: muted, whichever way it is disabled (a button's own disabled, Base UI's\n * data-disabled, or aria-disabled on a link), in the dark theme too, where the variants set their own fill. Ghost and link\n * have no fill to begin with and are given none: a grey box would turn a link into a button.\n */\nconst DISABLED_FILL =\n  'disabled:bg-muted data-disabled:bg-muted aria-disabled:bg-muted dark:disabled:bg-muted dark:data-disabled:bg-muted dark:aria-disabled:bg-muted';\n\nexport const buttonVariants = cva(\n  \"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all motion-reduce:transition-none motion-reduce:transform-none outline-none select-none active:not-aria-[haspopup]:not-aria-disabled:translate-y-px disabled:pointer-events-none disabled:border-transparent disabled:text-foreground/60 disabled:shadow-none disabled:focus-visible:ring-0 dark:disabled:border-transparent data-link-disabled:pointer-events-none data-link-disabled:focus-visible:ring-0 data-disabled:border-transparent data-disabled:text-foreground/60 data-disabled:shadow-none dark:data-disabled:border-transparent aria-disabled:border-transparent aria-disabled:text-foreground/60 aria-disabled:shadow-none dark:aria-disabled:border-transparent aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: `bg-primary text-primary-foreground hover:bg-primary/80 ${DISABLED_FILL}`,\n        outline: `border-control bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-control dark:bg-input/30 dark:hover:bg-input/50 ${DISABLED_FILL}`,\n        secondary: `bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground ${DISABLED_FILL}`,\n        ghost:\n          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 aria-disabled:hover:bg-transparent dark:aria-disabled:hover:bg-transparent',\n        destructive: `bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/15 dark:hover:bg-destructive/20 ${DISABLED_FILL}`,\n        link: 'text-primary underline-offset-4 hover:underline aria-disabled:hover:no-underline',\n      },\n      size: {\n        default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        icon: 'size-8',\n        'icon-xs': \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',\n        'icon-lg': 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * Whether this Button is rendering a link rather than a button, so it can keep\n * link semantics. Covers `render={<a href=\"...\" />}` and a routing component\n * that takes an `href` (Next's Link). A component with a different prop for its\n * destination (react-router's `to`) cannot be recognised from here: give those\n * `nativeButton={false} role={undefined}` directly.\n */\nconst rendersALink = (render: ButtonPrimitive.Props['render']): boolean =>\n  isValidElement(render) && (render.type === 'a' || typeof (render.props as { href?: unknown }).href === 'string');\n\n/**\n * A link that looks like a button is still a link, and has to be announced as\n * one: it opens in a new tab, it has an address, Enter follows it and Space\n * scrolls the page.\n *\n * Base UI needs telling, in two steps. Rendering an anchor while `nativeButton`\n * is true (its default) warns in development and puts `type=\"button\"` on the\n * anchor; following the warning and passing `nativeButton={false}` then adds\n * `role=\"button\"`, which is what takes the link semantics away. So this does\n * both: non-native, with the role and the tabindex Base UI would add cleared\n * again. An explicit prop from the caller still wins over either.\n */\nconst LINK_PROPS = { nativeButton: false, role: undefined, tabIndex: undefined } as const;\n\n/**\n * A disabled link is not :disabled (only a form control can be), so the markup has to say it: Base UI already marks it\n * `aria-disabled` and `data-disabled` and stops the click, and this takes it out of the tab order, which LINK_PROPS\n * would otherwise leave to the browser. The href is kept on purpose, so a routing component that requires one keeps\n * working; the pointer is kept off the link by `data-link-disabled:pointer-events-none`, which also covers a middle\n * click and the context menu, and the click and Enter are stopped by Base UI. It is a data attribute of its own, not\n * `aria-disabled`, because an aria-disabled button (`focusableWhenDisabled`) is meant to stay hoverable and focusable so it\n * can say why it cannot act; only a native :disabled button and this link are inert.\n */\nconst DISABLED_LINK_PROPS = { ...LINK_PROPS, tabIndex: -1, 'data-link-disabled': '' } as const;\n\nexport const Button = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) => {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      {...(rendersALink(props.render) ? (props.disabled ? DISABLED_LINK_PROPS : LINK_PROPS) : {})}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,gBACJ;AAEF,IAAa,iBAAiB,IAC5B,2jCACA;CACE,UAAU;EACR,SAAS;GACP,SAAS,0DAA0D;GACnE,SAAS,sLAAsL;GAC/L,WAAW,kLAAkL;GAC7L,OACE;GACF,aAAa,kHAAkH;GAC/H,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WAAW;GACX,WAAW;GACX,WAAW;EACb;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;;;;;AASA,IAAM,gBAAgB,WACpB,eAAe,MAAM,MAAM,OAAO,SAAS,OAAO,OAAQ,OAAO,MAA6B,SAAS;;;;;;;;;;;;;AAczG,IAAM,aAAa;CAAE,cAAc;CAAO,MAAM,KAAA;CAAW,UAAU,KAAA;AAAU;;;;;;;;;;AAW/E,IAAM,sBAAsB;CAAE,GAAG;CAAY,UAAU;CAAI,sBAAsB;AAAG;AAEpF,IAAa,YAAU,EACrB,WACA,UAAU,WACV,OAAO,WACP,GAAG,YAC8D;CACjE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,GAAK,aAAa,MAAM,MAAM,IAAK,MAAM,WAAW,sBAAsB,aAAc,CAAC;EACzF,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAC1D,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/button-group/button-group.js

@@ -0,0 +1,37 @@
+import { cn } from "../../../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region ../ui/src/components/ui/button-group/button-group.tsx
+var ButtonGroupContext = React.createContext("horizontal");
+var ButtonGroup = ({ className, orientation = "horizontal", ...props }) => {
+	return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, {
+		value: orientation,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "button-group",
+			"data-orientation": orientation,
+			className: cn("inline-flex items-center", "[&>*:not(:first-child):not(:last-child)]:rounded-none", "data-[orientation=horizontal]:[&>*:first-child]:rounded-r-none", "data-[orientation=horizontal]:[&>*:last-child]:rounded-l-none", "data-[orientation=horizontal]:[&>*:not(:first-child)]:-ml-px", "data-[orientation=vertical]:flex-col", "data-[orientation=vertical]:[&>*:first-child]:rounded-b-none", "data-[orientation=vertical]:[&>*:last-child]:rounded-t-none", "data-[orientation=vertical]:[&>*:not(:first-child)]:-mt-px", "[&>*]:relative [&>*]:z-0 [&>*:focus-visible]:z-10 [&>*:hover]:z-10", className),
+			...props
+		})
+	});
+};
+var ButtonGroupSeparator = ({ className, ...props }) => {
+	const orientation = React.useContext(ButtonGroupContext);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "button-group-separator",
+		role: "separator",
+		"aria-orientation": orientation === "horizontal" ? "vertical" : "horizontal",
+		className: cn("inline-flex shrink-0 self-stretch bg-border", "in-data-[orientation=horizontal]:w-px", "in-data-[orientation=vertical]:h-px in-data-[orientation=vertical]:self-auto in-data-[orientation=vertical]:w-full", className),
+		...props
+	});
+};
+var ButtonGroupText = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "button-group-text",
+		className: cn("inline-flex shrink-0 items-center justify-center rounded-none border border-border bg-muted px-2.5 text-sm text-muted-foreground select-none", className),
+		...props
+	});
+};
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };
+
+//# sourceMappingURL=button-group.js.map

package/dist/ui/src/components/ui/button-group/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":[],"sources":["../../../../../../../ui/src/components/ui/button-group/button-group.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport * as React from 'react';\n\nexport type TButtonGroupOrientation = 'horizontal' | 'vertical';\n\nexport interface IButtonGroupProps extends React.ComponentProps<'div'> {\n  orientation?: TButtonGroupOrientation;\n}\n\nconst ButtonGroupContext = React.createContext<TButtonGroupOrientation>('horizontal');\n\nexport const ButtonGroup = ({ className, orientation = 'horizontal', ...props }: IButtonGroupProps) => {\n  return (\n    <ButtonGroupContext.Provider value={orientation}>\n      <div\n        data-slot=\"button-group\"\n        data-orientation={orientation}\n        className={cn(\n          'inline-flex items-center',\n          '[&>*:not(:first-child):not(:last-child)]:rounded-none',\n          'data-[orientation=horizontal]:[&>*:first-child]:rounded-r-none',\n          'data-[orientation=horizontal]:[&>*:last-child]:rounded-l-none',\n          'data-[orientation=horizontal]:[&>*:not(:first-child)]:-ml-px',\n          'data-[orientation=vertical]:flex-col',\n          'data-[orientation=vertical]:[&>*:first-child]:rounded-b-none',\n          'data-[orientation=vertical]:[&>*:last-child]:rounded-t-none',\n          'data-[orientation=vertical]:[&>*:not(:first-child)]:-mt-px',\n          '[&>*]:relative [&>*]:z-0 [&>*:focus-visible]:z-10 [&>*:hover]:z-10',\n          className,\n        )}\n        {...props}\n      />\n    </ButtonGroupContext.Provider>\n  );\n};\n\nexport interface IButtonGroupSeparatorProps extends React.ComponentProps<'span'> {}\n\nexport const ButtonGroupSeparator = ({ className, ...props }: IButtonGroupSeparatorProps) => {\n  const orientation = React.useContext(ButtonGroupContext);\n\n  return (\n    // biome-ignore lint/a11y/useFocusableInteractive: decorative visual divider between buttons; not an interactive widget\n    // biome-ignore lint/a11y/useSemanticElements: <span> is intentional; no semantic HTML equivalent for an inline button-group separator\n    <span\n      data-slot=\"button-group-separator\"\n      // biome-ignore lint/a11y/useAriaPropsForRole: aria-valuenow applies only when separator acts as a range slider; this is a static divider\n      role=\"separator\"\n      // The separator runs perpendicular to the group's axis.\n      aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n      className={cn(\n        'inline-flex shrink-0 self-stretch bg-border',\n        'in-data-[orientation=horizontal]:w-px',\n        'in-data-[orientation=vertical]:h-px in-data-[orientation=vertical]:self-auto in-data-[orientation=vertical]:w-full',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport interface IButtonGroupTextProps extends React.ComponentProps<'span'> {}\n\nexport const ButtonGroupText = ({ className, ...props }: IButtonGroupTextProps) => {\n  return (\n    <span\n      data-slot=\"button-group-text\"\n      className={cn(\n        'inline-flex shrink-0 items-center justify-center rounded-none border border-border bg-muted px-2.5 text-sm text-muted-foreground select-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;AASA,IAAM,qBAAqB,MAAM,cAAuC,YAAY;AAEpF,IAAa,eAAe,EAAE,WAAW,cAAc,cAAc,GAAG,YAA+B;CACrG,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;EAClC,UAAA,oBAAC,OAAD;GACE,aAAU;GACV,oBAAkB;GAClB,WAAW,GACT,4BACA,yDACA,kEACA,iEACA,gEACA,wCACA,gEACA,+DACA,8DACA,sEACA,SACF;GACA,GAAI;EACL,CAAA;CAC0B,CAAA;AAEjC;AAIA,IAAa,wBAAwB,EAAE,WAAW,GAAG,YAAwC;CAC3F,MAAM,cAAc,MAAM,WAAW,kBAAkB;CAEvD,OAGE,oBAAC,QAAD;EACE,aAAU;EAEV,MAAK;EAEL,oBAAkB,gBAAgB,eAAe,aAAa;EAC9D,WAAW,GACT,+CACA,yCACA,sHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAIA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAmC;CACjF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,gJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/calendar/calendar.behavior.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A day button shows its number and is named with the date: the number has to be a word of that name (WCAG 2.5.3, Label in Name).
+ *
+ * PATH TAKEN: the names are text react-day-picker builds from a date and a locale, so happy-dom is enough. axe 4.14 and later reads
+ * a name word by word ("30" is not found in "30th"), and the version in this repository reads it as a string, so the rule is
+ * written out here (the same words, split the same way) and holds whichever axe runs. e2e/label-in-name.spec.ts does the same in a
+ * browser, over the pickers.
+ */
+export {};

package/dist/ui/src/components/ui/calendar/calendar.d.ts

@@ -1,7 +1,7 @@
 import { DayButton, DayPicker, Locale } from 'react-day-picker';
 import { Button } from '../button';
 import * as React from 'react';
-export declare const Calendar: ({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+export declare const Calendar: ({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, labels, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }) => React.JSX.Element;
 export declare const CalendarDayButton: ({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {

package/dist/ui/src/components/ui/calendar/calendar.js

@@ -0,0 +1,141 @@
+import { cn } from "../../../lib/utils.js";
+import { Button, buttonVariants } from "../button/button.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { IconChevronDown, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { DateLib, DayPicker, getDefaultClassNames } from "react-day-picker";
+//#region ../ui/src/components/ui/calendar/calendar.tsx
+/** Whether `day` stands in `label` as a word of its own, not as the start of "30th" or "30일" (axe 4.14 and later reads the name word by word). */
+var hasWord = (label, day) => new RegExp(`(^|[^\\p{L}\\p{N}])${day}($|[^\\p{L}\\p{N}])`, "u").test(label);
+/**
+* A day button's accessible name. A button that shows "30" has to be named with that 30 as a word of its own (WCAG 2.5.3, Label in
+* Name): axe 4.14 and later (label-content-name-mismatch) reads the name word by word, and react-day-picker's "Monday, November 30th,
+* 2026" has no word "30", only "30th".
+*
+* The name a locale gives (react-day-picker/locale, English included) is kept when the day is a word in it ("Montag, 30. November
+* 2026"), loses an English ordinal ("Monday, November 30, 2026") and has the day put in front when it is glued to a unit
+* ("30, 2026년 11월 30일 월요일"). A locale with no names of its own is written "Monday, 30 November 2026" in its words, with
+* react-day-picker's English "Today" and "selected"; a product that translates those passes `labels`, which wins.
+*/
+var labelDayButton = (date, modifiers, options, dateLib) => {
+	const lib = dateLib ?? new DateLib(options);
+	const day = lib.format(date, "d");
+	const own = lib.options.locale?.labels?.labelDayButton;
+	if (own !== void 0) {
+		const label = typeof own === "string" ? own : own(date, modifiers, options, lib);
+		if (hasWord(label, day)) return label;
+		const plain = label.replace(new RegExp(`(?<![\\p{L}\\p{N}])${day}(st|nd|rd|th)(?![\\p{L}\\p{N}])`, "u"), day);
+		return hasWord(plain, day) ? plain : `${day}, ${label}`;
+	}
+	let label = lib.format(date, "EEEE, d MMMM yyyy");
+	if (modifiers.today) label = `Today, ${label}`;
+	if (modifiers.selected) label = `${label}, selected`;
+	return label;
+};
+var Calendar = ({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, labels, components, ...props }) => {
+	const defaultClassNames = getDefaultClassNames();
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		className: cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
+		captionLayout,
+		locale,
+		labels: {
+			labelDayButton,
+			...labels
+		},
+		formatters: {
+			formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+			...formatters
+		},
+		classNames: {
+			root: cn("w-fit", defaultClassNames.root),
+			months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+			month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+			nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+			button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
+			button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
+			month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+			dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+			dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+			dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+			caption_label: cn("font-medium select-none", captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+			month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+			weekdays: cn("flex", defaultClassNames.weekdays),
+			weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+			week: cn("mt-2 flex w-full", defaultClassNames.week),
+			week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+			week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+			day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
+			range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
+			range_middle: cn("rounded-none", defaultClassNames.range_middle),
+			range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
+			today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+			outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+			disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+			hidden: cn("invisible", defaultClassNames.hidden),
+			...classNames
+		},
+		components: {
+			Root: ({ className, rootRef, ...props }) => {
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": "calendar",
+					ref: rootRef,
+					className: cn(className),
+					...props
+				});
+			},
+			Chevron: ({ className, orientation, ...props }) => {
+				if (orientation === "left") return /* @__PURE__ */ jsx(IconChevronLeft, {
+					className: cn("size-4", className),
+					...props
+				});
+				if (orientation === "right") return /* @__PURE__ */ jsx(IconChevronRight, {
+					className: cn("size-4", className),
+					...props
+				});
+				return /* @__PURE__ */ jsx(IconChevronDown, {
+					className: cn("size-4", className),
+					...props
+				});
+			},
+			DayButton: ({ ...props }) => /* @__PURE__ */ jsx(CalendarDayButton, {
+				locale,
+				...props
+			}),
+			WeekNumber: ({ children, ...props }) => {
+				return /* @__PURE__ */ jsx("td", {
+					...props,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex size-(--cell-size) items-center justify-center text-center",
+						children
+					})
+				});
+			},
+			...components
+		},
+		...props
+	});
+};
+var CalendarDayButton = ({ className, day, modifiers, locale, ...props }) => {
+	const defaultClassNames = getDefaultClassNames();
+	const refButton = React.useRef(null);
+	React.useEffect(() => {
+		if (modifiers.focused) refButton.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx(Button, {
+		ref: refButton,
+		variant: "ghost",
+		size: "icon",
+		"data-day": day.date.toLocaleDateString(locale?.code),
+		"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+		"data-range-start": modifiers.range_start,
+		"data-range-end": modifiers.range_end,
+		"data-range-middle": modifiers.range_middle,
+		className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+		...props
+	});
+};
+//#endregion
+export { Calendar, CalendarDayButton };
+
+//# sourceMappingURL=calendar.js.map

package/dist/ui/src/components/ui/calendar/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","names":[],"sources":["../../../../../../../ui/src/components/ui/calendar/calendar.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { IconChevronDown, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';\nimport * as React from 'react';\nimport { DateLib, type DayButton, DayPicker, getDefaultClassNames, type Locale, type labelDayButton as TLabelDayButton } from 'react-day-picker';\nimport { Button, buttonVariants } from '../button';\n\n/** Whether `day` stands in `label` as a word of its own, not as the start of \"30th\" or \"30일\" (axe 4.14 and later reads the name word by word). */\nconst hasWord = (label: string, day: string): boolean => new RegExp(`(^|[^\\\\p{L}\\\\p{N}])${day}($|[^\\\\p{L}\\\\p{N}])`, 'u').test(label);\n\n/**\n * A day button's accessible name. A button that shows \"30\" has to be named with that 30 as a word of its own (WCAG 2.5.3, Label in\n * Name): axe 4.14 and later (label-content-name-mismatch) reads the name word by word, and react-day-picker's \"Monday, November 30th,\n * 2026\" has no word \"30\", only \"30th\".\n *\n * The name a locale gives (react-day-picker/locale, English included) is kept when the day is a word in it (\"Montag, 30. November\n * 2026\"), loses an English ordinal (\"Monday, November 30, 2026\") and has the day put in front when it is glued to a unit\n * (\"30, 2026년 11월 30일 월요일\"). A locale with no names of its own is written \"Monday, 30 November 2026\" in its words, with\n * react-day-picker's English \"Today\" and \"selected\"; a product that translates those passes `labels`, which wins.\n */\nconst labelDayButton: typeof TLabelDayButton = (date, modifiers, options, dateLib) => {\n  const lib = dateLib ?? new DateLib(options);\n  const day = lib.format(date, 'd');\n  const own = lib.options.locale?.labels?.labelDayButton;\n  if (own !== undefined) {\n    const label = typeof own === 'string' ? own : own(date, modifiers, options, lib);\n    if (hasWord(label, day)) {\n      return label;\n    }\n    // English writes 30th, so \"30th\" becomes \"30\"; a unit glued to the day (30일) stays, and the day goes in front.\n    const plain = label.replace(new RegExp(`(?<![\\\\p{L}\\\\p{N}])${day}(st|nd|rd|th)(?![\\\\p{L}\\\\p{N}])`, 'u'), day);\n    return hasWord(plain, day) ? plain : `${day}, ${label}`;\n  }\n  let label = lib.format(date, 'EEEE, d MMMM yyyy');\n  if (modifiers.today) {\n    label = `Today, ${label}`;\n  }\n  if (modifiers.selected) {\n    label = `${label}, selected`;\n  }\n  return label;\n};\n\nexport const Calendar = ({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = 'label',\n  buttonVariant = 'ghost',\n  locale,\n  formatters,\n  labels,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>['variant'];\n}) => {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className,\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      labels={{ labelDayButton, ...labels }}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn('w-fit', defaultClassNames.root),\n        months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),\n        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),\n        nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn('flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)', defaultClassNames.month_caption),\n        dropdowns: cn('flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium', defaultClassNames.dropdowns),\n        dropdown_root: cn('relative rounded-(--cell-radius)', defaultClassNames.dropdown_root),\n        dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),\n        caption_label: cn(\n          'font-medium select-none',\n          captionLayout === 'label'\n            ? 'text-sm'\n            : 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',\n          defaultClassNames.caption_label,\n        ),\n        month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),\n        weekdays: cn('flex', defaultClassNames.weekdays),\n        weekday: cn('flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none', defaultClassNames.weekday),\n        week: cn('mt-2 flex w-full', defaultClassNames.week),\n        week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),\n        week_number: cn('text-[0.8rem] text-muted-foreground select-none', defaultClassNames.week_number),\n        day: cn(\n          'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',\n          props.showWeekNumber\n            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'\n            : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',\n          defaultClassNames.day,\n        ),\n        range_start: cn(\n          'relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',\n          defaultClassNames.range_start,\n        ),\n        range_middle: cn('rounded-none', defaultClassNames.range_middle),\n        range_end: cn(\n          'relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',\n          defaultClassNames.range_end,\n        ),\n        today: cn('rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none', defaultClassNames.today),\n        outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),\n        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),\n        hidden: cn('invisible', defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return <div data-slot=\"calendar\" ref={rootRef} className={cn(className)} {...props} />;\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === 'left') {\n            return <IconChevronLeft className={cn('size-4', className)} {...props} />;\n          }\n\n          if (orientation === 'right') {\n            return <IconChevronRight className={cn('size-4', className)} {...props} />;\n          }\n\n          return <IconChevronDown className={cn('size-4', className)} {...props} />;\n        },\n        DayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">{children}</div>\n            </td>\n          );\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  );\n};\n\nexport const CalendarDayButton = ({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) => {\n  const defaultClassNames = getDefaultClassNames();\n\n  const refButton = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) {\n      refButton.current?.focus();\n    }\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      ref={refButton}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle}\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70',\n        defaultClassNames.day,\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/ui/card/card.js

@@ -0,0 +1,57 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../ui/src/components/ui/card/card.tsx
+var Card = ({ className, size = "default", ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		"data-size": size,
+		className: cn("group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
+		...props
+	});
+};
+var CardHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3", className),
+		...props
+	});
+};
+var CardTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-title",
+		className: cn("text-base leading-6 font-medium group-data-[size=sm]/card:text-sm group-data-[size=sm]/card:leading-5", className),
+		...props
+	});
+};
+var CardDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+};
+var CardAction = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-action",
+		className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+		...props
+	});
+};
+var CardContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: cn("px-4 group-data-[size=sm]/card:px-3", className),
+		...props
+	});
+};
+var CardFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3", className),
+		...props
+	});
+};
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+
+//# sourceMappingURL=card.js.map