@exsto/ds 0.0.1-rc.16 → 0.0.1-rc.17

package/README.md

@@ -152,6 +152,10 @@ const missing = state.kind === 'empty'; // 'refused' is already said by the pick
 
 Refused text is reported each time it changes, also when the field held no day before, and emptying the field afterwards reports `empty`. A parent's `aria-invalid` only draws the invalid border; the picker's own message is added to `aria-describedby` once, after the parent's. `DateRangePicker`, for a range, is in the main entry.
 
+## Open popups and keyboard audits
+
+While a menu, dialog, sheet, popover, select or drawer is open, Base UI puts two empty `<span tabindex="0" data-base-ui-focus-guard>` around it. They are the sentinels that hand focus back into the popup when Tab runs past either end, so they are focusable on purpose, and they always were. From `0.0.1-rc.16` the design system also takes their `aria-hidden` off while the popup is open, because a focusable element that is hidden from assistive technology fails axe's `aria-hidden-focus` (WCAG 4.1.2). A check that walks the Tab order should skip `[data-base-ui-focus-guard]`, as it skips any other sentinel: they hold no text and name nothing.
+
 ## Status
 
 Release candidates (`0.0.1-rc.N`). The API is not stable yet; treat minor versions

package/dist/source-hash.txt

@@ -1 +1 @@
-e02db65d6034fdeb69accb2fd27d311f2f426b050ddf45dcc35078a5659e9466
+188147f3f789366cf669116233eddeed7297dad660bbaa9749fc44c833dabdd3

package/dist/styles.css

@@ -2619,6 +2619,11 @@
     font-style: italic;
   }
 
+  .ordinal {
+    --tw-ordinal: ordinal;
+    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
+  }
+
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
@@ -3761,6 +3766,12 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .after\:-translate-x-1\/3:after {
+    content: var(--tw-content);
+    --tw-translate-x: calc(calc(1 / 3 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .after\:-translate-y-1\/2:after {
     content: var(--tw-content);
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
@@ -3778,11 +3789,33 @@
     border-width: 1px;
   }
 
+  .after\:border-y-3:after {
+    content: var(--tw-content);
+    border-block-style: var(--tw-border-style);
+    border-block-width: 3px;
+  }
+
+  .after\:border-l-5:after {
+    content: var(--tw-content);
+    border-left-style: var(--tw-border-style);
+    border-left-width: 5px;
+  }
+
   .after\:border-border:after {
     content: var(--tw-content);
     border-color: var(--border);
   }
 
+  .after\:border-y-transparent:after {
+    content: var(--tw-content);
+    border-block-color: #0000;
+  }
+
+  .after\:border-l-background:after {
+    content: var(--tw-content);
+    border-left-color: var(--background);
+  }
+
   .after\:bg-background:after {
     content: var(--tw-content);
     background-color: var(--background);

package/dist/ui/src/components/edyn/presence/presence.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
 /** Where a person is, as a chat or a directory shows it. */
-export declare const PRESENCE_STATES: readonly ["available", "busy", "away", "offline", "unknown"];
+export declare const PRESENCE_STATES: readonly ["available", "busy", "away", "out-of-office", "offline", "unknown"];
 export type TPresenceState = (typeof PRESENCE_STATES)[number];
 /** The words for each state, for assistive technology and for the visible label. A product that is not in English passes its own. */
 export declare const DEFAULT_PRESENCE_LABELS: Readonly<Record<TPresenceState, string>>;

package/dist/ui/src/components/edyn/presence/presence.js

@@ -6,6 +6,7 @@ var PRESENCE_STATES = [
 	"available",
 	"busy",
 	"away",
+	"out-of-office",
 	"offline",
 	"unknown"
 ];
@@ -14,12 +15,14 @@ var DEFAULT_PRESENCE_LABELS = {
 	available: "Available",
 	busy: "Busy",
 	away: "Away",
+	"out-of-office": "Out of office",
 	offline: "Offline",
 	unknown: "Unknown"
 };
 /**
 * Each state has its own colour and its own shape, because colour alone is not a signal (WCAG 1.4.1): available is a solid dot,
-* busy a solid dot with a bar across it, away a solid dot with a bite out of it, offline a hollow ring and unknown a dashed ring.
+* busy a solid dot with a bar across it, away a solid dot with a bite out of it, out of office a solid dot with an arrow pointing out
+* (the info colour, the one hue the other states leave free), offline a hollow ring and unknown a dashed ring.
 * The colours are the theme's tokens, so they follow light and dark, and each clears 3:1 against the page, a card and a muted
 * surface in both (e2e/presence.spec.ts measures it).
 */
@@ -27,6 +30,7 @@ var DOT = {
 	available: "bg-success",
 	busy: "bg-destructive after:absolute after:inset-x-0.5 after:top-1/2 after:h-0.5 after:-translate-y-1/2 after:bg-background",
 	away: "bg-warning after:absolute after:-top-px after:-right-px after:size-1.5 after:rounded-full after:bg-background",
+	"out-of-office": "bg-info after:absolute after:top-1/2 after:left-1/2 after:-translate-x-1/3 after:-translate-y-1/2 after:border-y-3 after:border-l-5 after:border-y-transparent after:border-l-background",
 	offline: "border-2 border-muted-foreground",
 	unknown: "border-2 border-dashed border-muted-foreground"
 };

package/dist/ui/src/components/edyn/presence/presence.js.map

@@ -1 +1 @@
-{"version":3,"file":"presence.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/presence/presence.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport type { ComponentPropsWithoutRef } from 'react';\n\n/** Where a person is, as a chat or a directory shows it. */\nexport const PRESENCE_STATES = ['available', 'busy', 'away', 'offline', 'unknown'] as const;\n\nexport type TPresenceState = (typeof PRESENCE_STATES)[number];\n\n/** The words for each state, for assistive technology and for the visible label. A product that is not in English passes its own. */\nexport const DEFAULT_PRESENCE_LABELS: Readonly<Record<TPresenceState, string>> = {\n  available: 'Available',\n  busy: 'Busy',\n  away: 'Away',\n  offline: 'Offline',\n  unknown: 'Unknown',\n};\n\n/**\n * Each state has its own colour and its own shape, because colour alone is not a signal (WCAG 1.4.1): available is a solid dot,\n * busy a solid dot with a bar across it, away a solid dot with a bite out of it, offline a hollow ring and unknown a dashed ring.\n * The colours are the theme's tokens, so they follow light and dark, and each clears 3:1 against the page, a card and a muted\n * surface in both (e2e/presence.spec.ts measures it).\n */\nconst DOT: Readonly<Record<TPresenceState, string>> = {\n  available: 'bg-success',\n  busy: 'bg-destructive after:absolute after:inset-x-0.5 after:top-1/2 after:h-0.5 after:-translate-y-1/2 after:bg-background',\n  away: 'bg-warning after:absolute after:-top-px after:-right-px after:size-1.5 after:rounded-full after:bg-background',\n  offline: 'border-2 border-muted-foreground',\n  unknown: 'border-2 border-dashed border-muted-foreground',\n};\n\nexport interface IPresenceProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {\n  state: TPresenceState;\n  /** Show the state's word beside the dot. Off, the dot stands alone and the word is there for assistive technology only. */\n  showLabel?: boolean;\n  /** Other words for the state (a translation, or \"In a meeting\"); the default words are in `DEFAULT_PRESENCE_LABELS`. */\n  label?: string;\n}\n\n/** A person's presence: a small dot, and optionally its word. Always has the word as text, so it is never a picture alone. */\nexport const Presence = ({ state, showLabel = false, label, className, ...props }: IPresenceProps) => {\n  return (\n    <span data-slot=\"presence\" data-state={state} className={cn('inline-flex items-center gap-1.5 text-sm', className)} {...props}>\n      <span aria-hidden=\"true\" data-slot=\"presence-dot\" className={cn('relative size-2.5 shrink-0 rounded-full', DOT[state])} />\n      <span data-slot=\"presence-label\" className={cn(!showLabel && 'sr-only')}>\n        {label ?? DEFAULT_PRESENCE_LABELS[state]}\n      </span>\n    </span>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,kBAAkB;CAAC;CAAa;CAAQ;CAAQ;CAAW;AAAS;;AAKjF,IAAa,0BAAoE;CAC/E,WAAW;CACX,MAAM;CACN,MAAM;CACN,SAAS;CACT,SAAS;AACX;;;;;;;AAQA,IAAM,MAAgD;CACpD,WAAW;CACX,MAAM;CACN,MAAM;CACN,SAAS;CACT,SAAS;AACX;;AAWA,IAAa,YAAY,EAAE,OAAO,YAAY,OAAO,OAAO,WAAW,GAAG,YAA4B;CACpG,OACE,qBAAC,QAAD;EAAM,aAAU;EAAW,cAAY;EAAO,WAAW,GAAG,4CAA4C,SAAS;EAAG,GAAI;EAAxH,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,GAAG,2CAA2C,IAAI,MAAM;EAAI,CAAA,GACzH,oBAAC,QAAD;GAAM,aAAU;GAAiB,WAAW,GAAG,CAAC,aAAa,SAAS;GACnE,UAAA,SAAS,wBAAwB;EAC9B,CAAA,CACF;;AAEV"}
+{"version":3,"file":"presence.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/presence/presence.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport type { ComponentPropsWithoutRef } from 'react';\n\n/** Where a person is, as a chat or a directory shows it. */\nexport const PRESENCE_STATES = ['available', 'busy', 'away', 'out-of-office', 'offline', 'unknown'] as const;\n\nexport type TPresenceState = (typeof PRESENCE_STATES)[number];\n\n/** The words for each state, for assistive technology and for the visible label. A product that is not in English passes its own. */\nexport const DEFAULT_PRESENCE_LABELS: Readonly<Record<TPresenceState, string>> = {\n  available: 'Available',\n  busy: 'Busy',\n  away: 'Away',\n  'out-of-office': 'Out of office',\n  offline: 'Offline',\n  unknown: 'Unknown',\n};\n\n/**\n * Each state has its own colour and its own shape, because colour alone is not a signal (WCAG 1.4.1): available is a solid dot,\n * busy a solid dot with a bar across it, away a solid dot with a bite out of it, out of office a solid dot with an arrow pointing out\n * (the info colour, the one hue the other states leave free), offline a hollow ring and unknown a dashed ring.\n * The colours are the theme's tokens, so they follow light and dark, and each clears 3:1 against the page, a card and a muted\n * surface in both (e2e/presence.spec.ts measures it).\n */\nconst DOT: Readonly<Record<TPresenceState, string>> = {\n  available: 'bg-success',\n  busy: 'bg-destructive after:absolute after:inset-x-0.5 after:top-1/2 after:h-0.5 after:-translate-y-1/2 after:bg-background',\n  away: 'bg-warning after:absolute after:-top-px after:-right-px after:size-1.5 after:rounded-full after:bg-background',\n  'out-of-office':\n    'bg-info after:absolute after:top-1/2 after:left-1/2 after:-translate-x-1/3 after:-translate-y-1/2 after:border-y-3 after:border-l-5 after:border-y-transparent after:border-l-background',\n  offline: 'border-2 border-muted-foreground',\n  unknown: 'border-2 border-dashed border-muted-foreground',\n};\n\nexport interface IPresenceProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {\n  state: TPresenceState;\n  /** Show the state's word beside the dot. Off, the dot stands alone and the word is there for assistive technology only. */\n  showLabel?: boolean;\n  /** Other words for the state (a translation, or \"In a meeting\"); the default words are in `DEFAULT_PRESENCE_LABELS`. */\n  label?: string;\n}\n\n/** A person's presence: a small dot, and optionally its word. Always has the word as text, so it is never a picture alone. */\nexport const Presence = ({ state, showLabel = false, label, className, ...props }: IPresenceProps) => {\n  return (\n    <span data-slot=\"presence\" data-state={state} className={cn('inline-flex items-center gap-1.5 text-sm', className)} {...props}>\n      <span aria-hidden=\"true\" data-slot=\"presence-dot\" className={cn('relative size-2.5 shrink-0 rounded-full', DOT[state])} />\n      <span data-slot=\"presence-label\" className={cn(!showLabel && 'sr-only')}>\n        {label ?? DEFAULT_PRESENCE_LABELS[state]}\n      </span>\n    </span>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,kBAAkB;CAAC;CAAa;CAAQ;CAAQ;CAAiB;CAAW;AAAS;;AAKlG,IAAa,0BAAoE;CAC/E,WAAW;CACX,MAAM;CACN,MAAM;CACN,iBAAiB;CACjB,SAAS;CACT,SAAS;AACX;;;;;;;;AASA,IAAM,MAAgD;CACpD,WAAW;CACX,MAAM;CACN,MAAM;CACN,iBACE;CACF,SAAS;CACT,SAAS;AACX;;AAWA,IAAa,YAAY,EAAE,OAAO,YAAY,OAAO,OAAO,WAAW,GAAG,YAA4B;CACpG,OACE,qBAAC,QAAD;EAAM,aAAU;EAAW,cAAY;EAAO,WAAW,GAAG,4CAA4C,SAAS;EAAG,GAAI;EAAxH,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,GAAG,2CAA2C,IAAI,MAAM;EAAI,CAAA,GACzH,oBAAC,QAAD;GAAM,aAAU;GAAiB,WAAW,GAAG,CAAC,aAAa,SAAS;GACnE,UAAA,SAAS,wBAAwB;EAC9B,CAAA,CACF;;AAEV"}

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

@@ -3,15 +3,46 @@ 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 { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { DateLib, DayPicker, getDefaultClassNames } from "react-day-picker";
 //#region ../ui/src/components/ui/calendar/calendar.tsx
-var Calendar = ({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) => {
+/** 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

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

@@ -1 +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 { type DayButton, DayPicker, getDefaultClassNames, type Locale } from 'react-day-picker';\nimport { Button, buttonVariants } from '../button';\n\nexport const Calendar = ({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = 'label',\n  buttonVariant = 'ghost',\n  locale,\n  formatters,\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      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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"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exsto/ds",
-  "version": "0.0.1-rc.16",
+  "version": "0.0.1-rc.17",
   "description": "The eDynamix design system: React components and design tokens.",
   "license": "Apache-2.0",
   "keywords": [