@lerianstudio/sindarian-ui 1.2.0-beta.14 → 1.2.0-beta.15

package/dist/esm/enterprise/date-range-picker/index.js

@@ -1,14 +1,24 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * DateRangePicker — a single popover range control.
+ * DateRangePicker — a two-segment popover range control.
  *
- * Two labelled mono trigger segments (from / to) share one two-month
- * react-day-picker range calendar. The external contract is plain YYYY-MM-DD
- * strings (empty string = unset) so state shapes that speak `date_from`/
- * `date_to` stay untouched. The picker guarantees from <= to (react-day-picker
- * reorders inverted picks); aria-invalid/aria-describedby pass-throughs keep
- * external validation wiring alive. i18n is via plain string/locale props.
+ * Two labelled mono trigger segments (from / to) each open the SAME two-month
+ * react-day-picker range calendar over the same range selection. The external
+ * contract is plain YYYY-MM-DD strings (empty string = unset) so state shapes
+ * that speak `date_from`/`date_to` stay untouched. The picker guarantees
+ * from <= to (react-day-picker reorders inverted picks);
+ * aria-invalid/aria-describedby pass-throughs keep external validation wiring
+ * alive. i18n is via plain string/locale props.
+ *
+ * ONE POPOVER ROOT PER SEGMENT, deliberately. A single `Popover.Root` holds ONE
+ * trigger ref and ONE open state, so wrapping the whole two-button row in a
+ * single `PopoverTrigger asChild` put Radix's dialog attributes
+ * (`aria-haspopup`, `aria-expanded`, `aria-controls`) on a plain, non-focusable
+ * `div` — an aria-allowed-attr violation, two buttons advertising the same
+ * expanded state, and focus that Radix could drop on `document.body` when the
+ * popover closed. Each segment is now a real `PopoverTrigger` button: focusable,
+ * correctly named, and the element Radix returns focus to on dismissal.
  */
 import { useState } from 'react';
 import { CalendarDays } from 'lucide-react';
@@ -51,7 +61,11 @@ function toDayString(value) {
     return `${year}-${month}-${day}`;
 }
 export function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid = false, errorId, placeholder = 'Any date', ariaLabel = 'Select date range', clearLabel = 'Clear', locale = enUS }) {
-    const [open, setOpen] = useState(false);
+    // Which segment's popover is open, if any. One root per segment means one open
+    // state per segment; holding the identity of the open one here keeps them
+    // mutually exclusive, so clicking "to" while "from" is open swaps the anchor
+    // instead of stacking two calendars.
+    const [openSegment, setOpenSegment] = useState(null);
     const fromDate = parseDay(value.from);
     const toDate = parseDay(value.to);
     const selected = fromDate || toDate ? { from: fromDate, to: toDate } : undefined;
@@ -66,6 +80,10 @@ export function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel,
         });
     };
     const triggerClass = cn('border-input bg-card hover:bg-secondary focus-visible:ring-ring flex h-9 items-center gap-2 rounded-md border px-3 text-left font-mono text-sm tabular-nums transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none sm:w-40', invalid && 'border-destructive');
-    const renderTrigger = (id, label, dateValue) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, className: SECTION_LABEL_CLASS, children: label }), _jsxs("button", { type: "button", id: id, className: triggerClass, "aria-haspopup": "dialog", "aria-expanded": open, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? errorId : undefined, children: [_jsx(CalendarDays, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": true }), dateValue ? (_jsx("span", { children: dateValue })) : (_jsx("span", { className: "text-muted-foreground font-sans", children: placeholder }))] })] }));
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end", children: [renderTrigger(fromId, fromLabel, value.from), renderTrigger(toId, toLabel, value.to)] }) }), _jsxs(PopoverContent, { align: "start", className: "w-auto p-0", "aria-label": ariaLabel, children: [_jsx(Calendar, { mode: "range", numberOfMonths: 2, defaultMonth: fromDate ?? toDate ?? new Date(), selected: selected, onSelect: onSelect, locale: locale }), _jsx("div", { className: "border-border flex items-center justify-end border-t px-3 py-2", children: _jsx(Button, { type: "button", variant: "plain", size: "small", disabled: !hasValue, onClick: () => onValueChange({ from: '', to: '' }), children: clearLabel }) })] })] }));
+    // The one calendar, rendered inside whichever segment's popover is open. Both
+    // segments read and write the SAME range selection, so which one you opened
+    // changes only the anchor, never the state.
+    const calendar = (_jsxs(_Fragment, { children: [_jsx(Calendar, { mode: "range", numberOfMonths: 2, defaultMonth: fromDate ?? toDate ?? new Date(), selected: selected, onSelect: onSelect, locale: locale }), _jsx("div", { className: "border-border flex items-center justify-end border-t px-3 py-2", children: _jsx(Button, { type: "button", variant: "plain", size: "small", disabled: !hasValue, onClick: () => onValueChange({ from: '', to: '' }), children: clearLabel }) })] }));
+    const renderSegment = (segment, id, label, dateValue) => (_jsxs(Popover, { open: openSegment === segment, onOpenChange: (next) => setOpenSegment(next ? segment : null), children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, className: SECTION_LABEL_CLASS, children: label }), _jsxs(PopoverTrigger, { type: "button", id: id, className: triggerClass, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? errorId : undefined, children: [_jsx(CalendarDays, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": true }), dateValue ? (_jsx("span", { children: dateValue })) : (_jsx("span", { className: "text-muted-foreground font-sans", children: placeholder }))] })] }), _jsx(PopoverContent, { align: "start", className: "w-auto p-0", "aria-label": ariaLabel, children: calendar })] }, segment));
+    return (_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end", children: [renderSegment('from', fromId, fromLabel, value.from), renderSegment('to', toId, toLabel, value.to)] }));
 }

package/dist/esm/enterprise/search-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/search-input/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,UAAgB,EAChB,WAAuB,EACvB,YAAY,EAAE,SAAS,EACvB,UAA2B,EAC3B,QAAgB,EAChB,SAAS,EACT,EAAE,EACH,EAAE,gBAAgB,qBAgGlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/search-input/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,UAAgB,EAChB,WAAuB,EACvB,YAAY,EAAE,SAAS,EACvB,UAA2B,EAC3B,QAAgB,EAChB,SAAS,EACT,EAAE,EACH,EAAE,gBAAgB,qBAsGlB"}

package/dist/esm/enterprise/search-input/index.js

@@ -36,13 +36,20 @@ export function SearchInput({ value, onValueChange, debounceMs = 250, placeholde
     // initial value is never mistaken for an echo of something we sent.
     const lastEmitted = React.useRef(NO_PENDING_ECHO);
     React.useEffect(() => {
-        if (lastEmitted.current === value) {
-            // This is the echo of our own emission. Consume the token: a LATER
-            // external change back to this same text (foo -> bar -> foo) is a real
-            // change and must reach the draft.
-            lastEmitted.current = NO_PENDING_ECHO;
+        const isEcho = lastEmitted.current === value;
+        // ANY external change consumes the token, echo or not. Consuming it only on
+        // a match left a DROPPED emission pending forever: emit "pix", the parent
+        // rejects it and holds "", the parent later sets "foo" (draft follows, token
+        // still holding "pix"), the parent then sets "pix" — read as our own echo,
+        // so the draft stayed on "foo" and the visible field disagreed with the
+        // controlled value. A later external change is proof the parent moved on,
+        // which invalidates any echo still outstanding.
+        lastEmitted.current = NO_PENDING_ECHO;
+        // A genuine echo must NOT reach the draft: the parent echoes one render
+        // later, by which time the user may have typed further, and syncing would
+        // rewind the field and swallow those keystrokes.
+        if (isEcho)
             return;
-        }
         setDraft(value);
     }, [value]);
     const clearTimer = React.useCallback(() => {

package/dist/esm/enterprise/use-is-mobile.d.ts

@@ -1,11 +1,20 @@
+/** The one breakpoint the hook subscribes at. Exported so its tests can bind to
+ *  it instead of re-stating the number. */
+export declare const MOBILE_BREAKPOINT = 768;
 /**
  * True while the viewport is narrower than the 768px mobile breakpoint.
  *
  * Always false on the FIRST render, server and client alike, so a narrow
- * viewport can never produce a hydration mismatch; the effect corrects it
- * before paint. Every reading comes from the media query itself rather than a
- * mix of `matchMedia` and `window.innerWidth`, so the initial value and the
- * change events can never disagree at the breakpoint boundary.
+ * viewport can never produce a hydration mismatch. The correction lands in a
+ * `useEffect`, which runs AFTER the browser paints: on a narrow viewport the
+ * first painted frame therefore shows the desktop branch and the mobile branch
+ * appears on the next frame. That one frame is the deliberate price of
+ * hydration safety — a layout effect would remove it but would also change the
+ * render timing every existing consumer is built on.
+ *
+ * Every reading comes from the media query itself rather than a mix of
+ * `matchMedia` and `window.innerWidth`, so the initial value and the change
+ * events can never disagree at the breakpoint boundary.
  */
 export declare function useIsMobile(): boolean;
 //# sourceMappingURL=use-is-mobile.d.ts.map

package/dist/esm/enterprise/use-is-mobile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-is-mobile.d.ts","sourceRoot":"","sources":["../../../src/enterprise/use-is-mobile.ts"],"names":[],"mappings":"AAMA;;;;;;;;GAQG;AACH,wBAAgB,WAAW,YAY1B"}
+{"version":3,"file":"use-is-mobile.d.ts","sourceRoot":"","sources":["../../../src/enterprise/use-is-mobile.ts"],"names":[],"mappings":"AAIA;2CAC2C;AAC3C,eAAO,MAAM,iBAAiB,MAAM,CAAA;AAEpC;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,YAY1B"}

package/dist/esm/enterprise/use-is-mobile.js

@@ -1,14 +1,22 @@
 'use client';
 import * as React from 'react';
-const MOBILE_BREAKPOINT = 768;
+/** The one breakpoint the hook subscribes at. Exported so its tests can bind to
+ *  it instead of re-stating the number. */
+export const MOBILE_BREAKPOINT = 768;
 /**
  * True while the viewport is narrower than the 768px mobile breakpoint.
  *
  * Always false on the FIRST render, server and client alike, so a narrow
- * viewport can never produce a hydration mismatch; the effect corrects it
- * before paint. Every reading comes from the media query itself rather than a
- * mix of `matchMedia` and `window.innerWidth`, so the initial value and the
- * change events can never disagree at the breakpoint boundary.
+ * viewport can never produce a hydration mismatch. The correction lands in a
+ * `useEffect`, which runs AFTER the browser paints: on a narrow viewport the
+ * first painted frame therefore shows the desktop branch and the mobile branch
+ * appears on the next frame. That one frame is the deliberate price of
+ * hydration safety — a layout effect would remove it but would also change the
+ * render timing every existing consumer is built on.
+ *
+ * Every reading comes from the media query itself rather than a mix of
+ * `matchMedia` and `window.innerWidth`, so the initial value and the change
+ * events can never disagree at the breakpoint boundary.
  */
 export function useIsMobile() {
     const [isMobile, setIsMobile] = React.useState(false);

package/dist/esm/theme/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAgBzD,KAAK,iBAAiB,GAAG;IACvB,oEAAoE;IACpE,KAAK,EAAE,eAAe,CAAA;IACtB,yEAAyE;IACzE,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IACzC,mDAAmD;IACnD,aAAa,EAAE,OAAO,GAAG,MAAM,CAAA;CAChC,CAAA;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,eAAe,CAAA;CAC/B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAA8B,EAC9B,YAAuB,EACxB,EAAE,kBAAkB,qBAwEpB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAgBzD,KAAK,iBAAiB,GAAG;IACvB,oEAAoE;IACpE,KAAK,EAAE,eAAe,CAAA;IACtB,yEAAyE;IACzE,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IACzC,mDAAmD;IACnD,aAAa,EAAE,OAAO,GAAG,MAAM,CAAA;CAChC,CAAA;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,eAAe,CAAA;CAC/B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAA8B,EAC9B,YAAuB,EACxB,EAAE,kBAAkB,qBAwFpB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}

package/dist/esm/theme/theme-provider.js

@@ -78,7 +78,21 @@ export function ThemeProvider({ children, storageKey = 'sindarian.theme', defaul
         if (typeof window === 'undefined')
             return;
         const onStorage = (event) => {
-            if (event.key !== storageKey)
+            // WHICH STORE first, then which key. Only the store the preference lives
+            // in may change it: a sessionStorage event carrying the SAME key would
+            // otherwise mutate a localStorage-backed preference. `storageArea` is
+            // absent only on a hand-dispatched synthetic event — apps use those for
+            // same-tab sync — and one of those is not attributable to any store, so it
+            // is allowed through rather than silently dropped.
+            if (event.storageArea != null &&
+                event.storageArea !== window.localStorage)
+                return;
+            // A null key means another tab called `clear()` on the whole store, so the
+            // stored preference is gone even though it is not named. Returning early
+            // on that left the provider holding a deleted preference — and the wrong
+            // `dark` class on the document. Fall through with newValue null, which
+            // lands on the fallback.
+            if (event.key !== null && event.key !== storageKey)
                 return;
             setThemeState(isThemePreference(event.newValue) ? event.newValue : defaultTheme);
         };

package/dist/theme/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAgBzD,KAAK,iBAAiB,GAAG;IACvB,oEAAoE;IACpE,KAAK,EAAE,eAAe,CAAA;IACtB,yEAAyE;IACzE,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IACzC,mDAAmD;IACnD,aAAa,EAAE,OAAO,GAAG,MAAM,CAAA;CAChC,CAAA;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,eAAe,CAAA;CAC/B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAA8B,EAC9B,YAAuB,EACxB,EAAE,kBAAkB,qBAwEpB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAgBzD,KAAK,iBAAiB,GAAG;IACvB,oEAAoE;IACpE,KAAK,EAAE,eAAe,CAAA;IACtB,yEAAyE;IACzE,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IACzC,mDAAmD;IACnD,aAAa,EAAE,OAAO,GAAG,MAAM,CAAA;CAChC,CAAA;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,eAAe,CAAA;CAC/B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAA8B,EAC9B,YAAuB,EACxB,EAAE,kBAAkB,qBAwFpB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}

package/dist/theme/theme-provider.js

@@ -115,7 +115,21 @@ function ThemeProvider({ children, storageKey = 'sindarian.theme', defaultTheme
         if (typeof window === 'undefined')
             return;
         const onStorage = (event) => {
-            if (event.key !== storageKey)
+            // WHICH STORE first, then which key. Only the store the preference lives
+            // in may change it: a sessionStorage event carrying the SAME key would
+            // otherwise mutate a localStorage-backed preference. `storageArea` is
+            // absent only on a hand-dispatched synthetic event — apps use those for
+            // same-tab sync — and one of those is not attributable to any store, so it
+            // is allowed through rather than silently dropped.
+            if (event.storageArea != null &&
+                event.storageArea !== window.localStorage)
+                return;
+            // A null key means another tab called `clear()` on the whole store, so the
+            // stored preference is gone even though it is not named. Returning early
+            // on that left the provider holding a deleted preference — and the wrong
+            // `dark` class on the document. Fall through with newValue null, which
+            // lands on the fallback.
+            if (event.key !== null && event.key !== storageKey)
                 return;
             setThemeState(isThemePreference(event.newValue) ? event.newValue : defaultTheme);
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "1.2.0-beta.14",
+  "version": "1.2.0-beta.15",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {