@keboola/design 11.6.1 → 12.0.0

package/dist/internal/blocks/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/blocks/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  ComponentRef,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { ArrowBigUpDash, Eye, EyeOff, X } from '../../icons';\nimport { createChangeInputEvent, mergeRefs } from '../../utils';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<\n  ComponentProps<typeof InputGroup.Input>,\n  'value' | 'defaultValue' | 'type' | 'autoComplete'\n>;\n\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: string | null;\n    defaultValue?: string | null;\n    onValueChange?: (value: string) => void;\n    onValueBlur?: (value: string) => void;\n    allowClear?: boolean;\n    allowPasswordToggle?: boolean;\n    /**\n     * Suffix appended to the reveal button's accessible name, e.g. the field\n     * title. Use it to disambiguate multiple password fields on one form —\n     * \"Show password: API token\" / \"Hide password: API token\". Omit for a\n     * single field.\n     */\n    passwordToggleLabel?: string;\n    autoComplete?: 'new-password' | 'current-password' | 'off';\n    defaultPasswordVisibility?: boolean;\n  };\n\nexport const PasswordInput = ({\n  ref,\n\n  // group props\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  // own props\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  onMouseDown,\n  allowClear = false,\n  allowPasswordToggle = false,\n  passwordToggleLabel,\n  autoComplete = 'new-password',\n  defaultPasswordVisibility = false,\n\n  // input props\n  disabled,\n  readOnly,\n  ...restInputProps\n}: Props) => {\n  const inputRef = useRef<ComponentRef<'input'>>(null);\n\n  const [value, setValue] = useControllableState<string>({\n    // A `null` controlled value stays controlled (coerced to ''); `undefined` is uncontrolled.\n    prop: valueProp === null ? '' : valueProp,\n    defaultProp: defaultValue ?? '',\n    onChange: onValueChange,\n  });\n\n  const [capsLock, setCapsLock] = useState(false);\n  const [isPasswordVisible, setIsPasswordVisible] = useState(defaultPasswordVisibility);\n\n  const canClear = allowClear && !!value && !disabled && !readOnly;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    if (capsLock) setCapsLock(false);\n    onValueBlur?.(event.target.value);\n    onBlur?.(event);\n  };\n\n  // Both keyDown and keyUp are needed: pressing the Caps Lock key itself\n  // reports the *old* state on keyDown and the *new* state on keyUp, so\n  // toggling Caps Lock off mid-typing is only caught on keyUp.\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    const isOn = event.getModifierState('CapsLock');\n    if (isOn !== capsLock) setCapsLock(isOn);\n    onKeyDown?.(event);\n  };\n\n  const handleKeyUp: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    const isOn = event.getModifierState('CapsLock');\n    if (isOn !== capsLock) setCapsLock(isOn);\n    onKeyUp?.(event);\n  };\n\n  // Catches the case where the user clicks into the field with Caps Lock\n  // already on. Tab-focus / autofocus have no API to query modifier state.\n  const handleMouseDown: MouseEventHandler<HTMLInputElement> = (event) => {\n    const isOn = event.getModifierState('CapsLock');\n    if (isOn !== capsLock) setCapsLock(isOn);\n    onMouseDown?.(event);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n    if (!inputRef.current) return;\n    inputRef.current.value = '';\n    setValue('');\n    onChange?.(createChangeInputEvent(inputRef.current));\n  };\n\n  const handleTogglePasswordVisibility = () => {\n    setIsPasswordVisible((prev) => !prev);\n  };\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      <InputGroup.Input\n        {...restInputProps}\n        ref={mergeRefs(ref ?? null, inputRef)}\n        type={isPasswordVisible ? 'text' : 'password'}\n        autoComplete={autoComplete}\n        value={value}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handleMouseDown}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      {(capsLock || canClear || allowPasswordToggle) && (\n        <InputGroup.Addon align=\"inline-end\">\n          {capsLock && (\n            <ArrowBigUpDash className=\"tw:size-4 tw:text-primary\">\n              <title>Caps Lock is on</title>\n            </ArrowBigUpDash>\n          )}\n          {canClear && (\n            <InputGroup.Button\n              aria-label=\"Clear password\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={handleClear}\n            >\n              <X className=\"tw:size-4\" />\n            </InputGroup.Button>\n          )}\n          {allowPasswordToggle && (\n            <InputGroup.Button\n              aria-label={`${isPasswordVisible ? 'Hide password' : 'Show password'}${\n                passwordToggleLabel ? `: ${passwordToggleLabel}` : ''\n              }`}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={handleTogglePasswordVisibility}\n            >\n              {isPasswordVisible ? <EyeOff className=\"tw:size-4\" /> : <Eye className=\"tw:size-4\" />}\n            </InputGroup.Button>\n          )}\n        </InputGroup.Addon>\n      )}\n    </InputGroup>\n  );\n};\n"],"mappings":";;;;;;;;AA4CA,MAAa,iBAAiB,EAC5B,KAGA,OACA,SACA,cACA,QACA,WAGA,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,WACA,SACA,aACA,aAAa,OACb,sBAAsB,OACtB,qBACA,eAAe,gBACf,4BAA4B,OAG5B,UACA,UACA,GAAG,qBACQ;CACX,MAAM,WAAW,OAA8B,IAAI;CAEnD,MAAM,CAAC,OAAO,YAAY,qBAA6B;EAErD,MAAM,cAAc,OAAO,KAAK;EAChC,aAAa,gBAAgB;EAC7B,UAAU;CACZ,CAAC;CAED,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,yBAAyB;CAEpF,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC;CAExD,MAAM,gBAAsD,UAAU;EACpE,SAAS,MAAM,OAAO,KAAK;EAC3B,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EACjE,IAAI,UAAU,YAAY,KAAK;EAC/B,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAKA,MAAM,iBAAyD,UAAU;EACvE,MAAM,OAAO,MAAM,iBAAiB,UAAU;EAC9C,IAAI,SAAS,UAAU,YAAY,IAAI;EACvC,YAAY,KAAK;CACnB;CAEA,MAAM,eAAuD,UAAU;EACrE,MAAM,OAAO,MAAM,iBAAiB,UAAU;EAC9C,IAAI,SAAS,UAAU,YAAY,IAAI;EACvC,UAAU,KAAK;CACjB;CAIA,MAAM,mBAAwD,UAAU;EACtE,MAAM,OAAO,MAAM,iBAAiB,UAAU;EAC9C,IAAI,SAAS,UAAU,YAAY,IAAI;EACvC,cAAc,KAAK;CACrB;CAEA,MAAM,oBAA0D;EAC9D,IAAI,CAAC,SAAS,SAAS;EACvB,SAAS,QAAQ,QAAQ;EACzB,SAAS,EAAE;EACX,WAAW,uBAAuB,SAAS,OAAO,CAAC;CACrD;CAEA,MAAM,uCAAuC;EAC3C,sBAAsB,SAAS,CAAC,IAAI;CACtC;CAEA,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA,CAOE,oBAAC,WAAW,OAAZ;GACE,GAAI;GACJ,KAAK,UAAU,OAAO,MAAM,QAAQ;GACpC,MAAM,oBAAoB,SAAS;GACrB;GACP;GACP,UAAU;GACV,QAAQ;GACR,WAAW;GACX,SAAS;GACT,aAAa;GACH;GACA;EACX,CAAA,IAEC,YAAY,YAAY,wBACxB,qBAAC,WAAW,OAAZ;GAAkB,OAAM;GAAxB,UAAA;IACG,YACC,oBAAC,gBAAD;KAAgB,WAAU;KACxB,UAAA,oBAAC,SAAD,EAAA,UAAO,kBAAsB,CAAA;IACf,CAAA;IAEjB,YACC,oBAAC,WAAW,QAAZ;KACE,cAAW;KACX,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;IACT,CAAA;IAEpB,uBACC,oBAAC,WAAW,QAAZ;KACE,cAAY,GAAG,oBAAoB,kBAAkB,kBACnD,sBAAsB,KAAK,wBAAwB;KAErD,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KAER,UAAA,oBAAoB,oBAAC,QAAD,EAAQ,WAAU,YAAa,CAAA,IAAI,oBAAC,KAAD,EAAK,WAAU,YAAa,CAAA;IACnE,CAAA;GAEL;EAEV,CAAA,CAAA;;AAEhB"}
+{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/blocks/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  ComponentRef,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { ArrowBigUpDash, Eye, EyeOff, X } from '../../icons';\nimport { createChangeInputEvent, mergeRefs } from '../../utils';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<\n  ComponentProps<typeof InputGroup.Input>,\n  'value' | 'defaultValue' | 'type' | 'autoComplete'\n>;\n\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: string | null;\n    defaultValue?: string | null;\n    onValueChange?: (value: string) => void;\n    onValueBlur?: (value: string) => void;\n    allowClear?: boolean;\n    allowPasswordToggle?: boolean;\n    /** Suffix of the reveal button's accessible name, to tell several password fields apart. */\n    passwordToggleLabel?: string;\n    autoComplete?: 'new-password' | 'current-password' | 'off';\n    defaultPasswordVisibility?: boolean;\n  };\n\nexport const PasswordInput = ({\n  ref,\n\n  // group props\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  // own props\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  onMouseDown,\n  allowClear = false,\n  allowPasswordToggle = false,\n  passwordToggleLabel,\n  autoComplete = 'new-password',\n  defaultPasswordVisibility = false,\n\n  // input props\n  disabled,\n  readOnly,\n  ...restInputProps\n}: Props) => {\n  const inputRef = useRef<ComponentRef<'input'>>(null);\n\n  const [value, setValue] = useControllableState<string>({\n    // A `null` controlled value stays controlled (coerced to ''); `undefined` is uncontrolled.\n    prop: valueProp === null ? '' : valueProp,\n    defaultProp: defaultValue ?? '',\n    onChange: onValueChange,\n  });\n\n  const [capsLock, setCapsLock] = useState(false);\n  const [isPasswordVisible, setIsPasswordVisible] = useState(defaultPasswordVisibility);\n\n  const canClear = allowClear && !!value && !disabled && !readOnly;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    if (capsLock) setCapsLock(false);\n    onValueBlur?.(event.target.value);\n    onBlur?.(event);\n  };\n\n  // keyUp too: pressing Caps Lock itself reports the old state on keyDown.\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    const isOn = event.getModifierState('CapsLock');\n    if (isOn !== capsLock) setCapsLock(isOn);\n    onKeyDown?.(event);\n  };\n\n  const handleKeyUp: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    const isOn = event.getModifierState('CapsLock');\n    if (isOn !== capsLock) setCapsLock(isOn);\n    onKeyUp?.(event);\n  };\n\n  // Caps Lock already on when clicking in; focus events cannot read modifier state.\n  const handleMouseDown: MouseEventHandler<HTMLInputElement> = (event) => {\n    const isOn = event.getModifierState('CapsLock');\n    if (isOn !== capsLock) setCapsLock(isOn);\n    onMouseDown?.(event);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n    if (!inputRef.current) return;\n    inputRef.current.value = '';\n    setValue('');\n    onChange?.(createChangeInputEvent(inputRef.current));\n  };\n\n  const handleTogglePasswordVisibility = () => {\n    setIsPasswordVisible((prev) => !prev);\n  };\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      <InputGroup.Input\n        {...restInputProps}\n        ref={mergeRefs(ref ?? null, inputRef)}\n        type={isPasswordVisible ? 'text' : 'password'}\n        autoComplete={autoComplete}\n        value={value}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handleMouseDown}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      {(capsLock || canClear || allowPasswordToggle) && (\n        <InputGroup.Addon align=\"inline-end\">\n          {capsLock && (\n            <ArrowBigUpDash className=\"tw:size-4 tw:text-primary\">\n              <title>Caps Lock is on</title>\n            </ArrowBigUpDash>\n          )}\n          {canClear && (\n            <InputGroup.Button\n              aria-label=\"Clear password\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={handleClear}\n            >\n              <X className=\"tw:size-4\" />\n            </InputGroup.Button>\n          )}\n          {allowPasswordToggle && (\n            <InputGroup.Button\n              aria-label={`${isPasswordVisible ? 'Hide password' : 'Show password'}${\n                passwordToggleLabel ? `: ${passwordToggleLabel}` : ''\n              }`}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={handleTogglePasswordVisibility}\n            >\n              {isPasswordVisible ? <EyeOff className=\"tw:size-4\" /> : <Eye className=\"tw:size-4\" />}\n            </InputGroup.Button>\n          )}\n        </InputGroup.Addon>\n      )}\n    </InputGroup>\n  );\n};\n"],"mappings":";;;;;;;;AAuCA,MAAa,iBAAiB,EAC5B,KAGA,OACA,SACA,cACA,QACA,WAGA,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,WACA,SACA,aACA,aAAa,OACb,sBAAsB,OACtB,qBACA,eAAe,gBACf,4BAA4B,OAG5B,UACA,UACA,GAAG,qBACQ;CACX,MAAM,WAAW,OAA8B,IAAI;CAEnD,MAAM,CAAC,OAAO,YAAY,qBAA6B;EAErD,MAAM,cAAc,OAAO,KAAK;EAChC,aAAa,gBAAgB;EAC7B,UAAU;CACZ,CAAC;CAED,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,yBAAyB;CAEpF,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC;CAExD,MAAM,gBAAsD,UAAU;EACpE,SAAS,MAAM,OAAO,KAAK;EAC3B,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EACjE,IAAI,UAAU,YAAY,KAAK;EAC/B,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAGA,MAAM,iBAAyD,UAAU;EACvE,MAAM,OAAO,MAAM,iBAAiB,UAAU;EAC9C,IAAI,SAAS,UAAU,YAAY,IAAI;EACvC,YAAY,KAAK;CACnB;CAEA,MAAM,eAAuD,UAAU;EACrE,MAAM,OAAO,MAAM,iBAAiB,UAAU;EAC9C,IAAI,SAAS,UAAU,YAAY,IAAI;EACvC,UAAU,KAAK;CACjB;CAGA,MAAM,mBAAwD,UAAU;EACtE,MAAM,OAAO,MAAM,iBAAiB,UAAU;EAC9C,IAAI,SAAS,UAAU,YAAY,IAAI;EACvC,cAAc,KAAK;CACrB;CAEA,MAAM,oBAA0D;EAC9D,IAAI,CAAC,SAAS,SAAS;EACvB,SAAS,QAAQ,QAAQ;EACzB,SAAS,EAAE;EACX,WAAW,uBAAuB,SAAS,OAAO,CAAC;CACrD;CAEA,MAAM,uCAAuC;EAC3C,sBAAsB,SAAS,CAAC,IAAI;CACtC;CAEA,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA,CAOE,oBAAC,WAAW,OAAZ;GACE,GAAI;GACJ,KAAK,UAAU,OAAO,MAAM,QAAQ;GACpC,MAAM,oBAAoB,SAAS;GACrB;GACP;GACP,UAAU;GACV,QAAQ;GACR,WAAW;GACX,SAAS;GACT,aAAa;GACH;GACA;EACX,CAAA,IAEC,YAAY,YAAY,wBACxB,qBAAC,WAAW,OAAZ;GAAkB,OAAM;GAAxB,UAAA;IACG,YACC,oBAAC,gBAAD;KAAgB,WAAU;KACxB,UAAA,oBAAC,SAAD,EAAA,UAAO,kBAAsB,CAAA;IACf,CAAA;IAEjB,YACC,oBAAC,WAAW,QAAZ;KACE,cAAW;KACX,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;IACT,CAAA;IAEpB,uBACC,oBAAC,WAAW,QAAZ;KACE,cAAY,GAAG,oBAAoB,kBAAkB,kBACnD,sBAAsB,KAAK,wBAAwB;KAErD,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KAER,UAAA,oBAAoB,oBAAC,QAAD,EAAQ,WAAU,YAAa,CAAA,IAAI,oBAAC,KAAD,EAAK,WAAU,YAAa,CAAA;IACnE,CAAA;GAEL;EAEV,CAAA,CAAA;;AAEhB"}

package/dist/internal/blocks/SearchInput.js

@@ -1,2 +1,2 @@
-import { SearchInput } from "../../SearchInput-Q85p8Ews.js";
+import { SearchInput } from "../../SearchInput-CEfQDNl3.js";
 export { SearchInput };

package/dist/internal/blocks/SearchInputWithNavigation.js

@@ -1,10 +1,10 @@
 import { cn } from "../../classNames-BzrkDnOD.js";
-import { keyCodes } from "../../utils-DnkrFYqY.js";
-import { ChevronDown, ChevronUp, Search } from "../../icons-Cek151jC.js";
-import { Button } from "../../Button-DsRrU5F1.js";
+import { keyCodes } from "../../utils-Bd28bWgm.js";
+import { ChevronDown, ChevronUp, Search } from "../../icons-wcA70iQx.js";
+import { Button } from "../../Button-Ca4Q3VJU.js";
 import { ButtonGroup } from "../components/ButtonGroup.js";
 import { Separator } from "../components/Separator.js";
-import { TextInput } from "../../TextInput-DiEMxVF6.js";
+import { TextInput } from "../../TextInput-CDG2XpBl.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/SearchInputWithNavigation/SearchInputWithNavigation.tsx
 const SearchInputWithNavigation = ({ ref, value, onValueChange, placeholder = "Search...", variant = "secondary", onClear, focusVariant, currentIndex, totalResults, onNavigateNext, onNavigatePrevious, className }) => {

package/dist/internal/blocks/SectionNav.js

@@ -1,2 +1,2 @@
-import { SectionNav } from "../../SectionNav-mpmSM3OC.js";
+import { SectionNav } from "../../SectionNav-B_qf0AXi.js";
 export { SectionNav };

package/dist/internal/blocks/SplitButton.js

@@ -1,7 +1,7 @@
-import { ChevronDown } from "../../icons-Cek151jC.js";
-import { Button } from "../../Button-DsRrU5F1.js";
+import { ChevronDown } from "../../icons-wcA70iQx.js";
+import { Button } from "../../Button-Ca4Q3VJU.js";
 import { ButtonGroup } from "../components/ButtonGroup.js";
-import { DropdownMenu } from "../../DropdownMenu-CASr-jgl.js";
+import { DropdownMenu } from "../../DropdownMenu-gRM-A8qU.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/SplitButton/SplitButton.tsx
 const iconSizeMap = {

package/dist/internal/blocks/StatCard.js

@@ -1,5 +1,5 @@
 import { cn } from "../../classNames-BzrkDnOD.js";
-import { Card } from "../../Card-Dyo7055Q.js";
+import { Card } from "../../Card-Cr9MBNHu.js";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/StatCard/StatCard.tsx
@@ -18,14 +18,10 @@ const trendClassnames = cva([
 	defaultVariants: { direction: "flat" }
 });
 /**
-* A single KPI / metric tile — a signature composition over `Card` with a label,
-* a large value, an optional trend delta, and an optional leading icon + footnote.
+* A single KPI / metric tile over `Card`.
 *
-* **When to use:** the headline numbers of a dashboard (revenue, active users, uptime),
-* usually in a `StatCardGrid` strip at the top of a page.
-* **When NOT to use:** for a chart use `ChartPanel`; for a generic content surface use `Card`.
-* **Composition:** `StatCard.Icon`, `StatCard.Label`, `StatCard.Value`, `StatCard.Trend`,
-* `StatCard.Footnote`. All colours read semantic tokens, so the tile re-skins with the brand.
+* **When to use:** dashboard headline numbers, usually in a `StatCardGrid`.
+* **When NOT to use:** charts (`ChartPanel`) or generic surfaces (`Card`).
 */
 const StatCardRoot = ({ className, children, bordered = true, ...rest }) => /* @__PURE__ */ jsx(Card, {
 	bordered,

package/dist/internal/blocks/StatCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard.js","names":[],"sources":["../../../src/blocks/StatCard/StatCard.tsx","../../../src/blocks/StatCard/StatCardGrid.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Card } from '../../components/Card';\nimport { cn } from '../../utils';\n\nconst trendClassnames = cva(\n  ['tw:inline-flex', 'tw:items-center', 'tw:gap-1', 'tw:text-sm', 'tw:font-medium'],\n  {\n    variants: {\n      direction: {\n        up: 'tw:text-success',\n        down: 'tw:text-destructive',\n        flat: 'tw:text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      direction: 'flat',\n    },\n  },\n);\n\ntype TrendDirection = NonNullable<VariantProps<typeof trendClassnames>['direction']>;\n\ntype RootProps = ComponentProps<typeof Card>;\n\n/**\n * A single KPI / metric tile — a signature composition over `Card` with a label,\n * a large value, an optional trend delta, and an optional leading icon + footnote.\n *\n * **When to use:** the headline numbers of a dashboard (revenue, active users, uptime),\n * usually in a `StatCardGrid` strip at the top of a page.\n * **When NOT to use:** for a chart use `ChartPanel`; for a generic content surface use `Card`.\n * **Composition:** `StatCard.Icon`, `StatCard.Label`, `StatCard.Value`, `StatCard.Trend`,\n * `StatCard.Footnote`. All colours read semantic tokens, so the tile re-skins with the brand.\n */\nconst StatCardRoot = ({ className, children, bordered = true, ...rest }: RootProps) => (\n  <Card bordered={bordered} className={cn('tw:gap-2', className)} role=\"group\" {...rest}>\n    {children}\n  </Card>\n);\n\ntype IconProps = ComponentProps<'div'>;\n\nconst StatCardIcon = ({ className, children, ...rest }: IconProps) => (\n  <div\n    className={cn(\n      'tw:flex tw:size-9 tw:items-center tw:justify-center tw:rounded-md tw:bg-accent tw:text-accent-foreground',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n\ntype LabelProps = ComponentProps<'p'>;\n\nconst StatCardLabel = ({ className, children, ...rest }: LabelProps) => (\n  <p\n    className={cn('tw:m-0 tw:text-sm tw:font-medium tw:text-muted-foreground', className)}\n    {...rest}\n  >\n    {children}\n  </p>\n);\n\ntype ValueProps = ComponentProps<'p'>;\n\nconst StatCardValue = ({ className, children, ...rest }: ValueProps) => (\n  <p\n    className={cn(\n      'tw:m-0 tw:text-3xl tw:font-semibold tw:leading-tight tw:tracking-tight tw:text-foreground',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </p>\n);\n\ntype TrendProps = ComponentProps<'span'> & {\n  /** Which way the metric moved — sets the semantic colour (`success` / `destructive` / muted). */\n  direction?: TrendDirection;\n  /** Optional leading icon (e.g. an arrow). */\n  icon?: ReactNode;\n};\n\nconst StatCardTrend = ({ className, direction = 'flat', icon, children, ...rest }: TrendProps) => (\n  <span className={trendClassnames({ direction, className })} {...rest}>\n    {icon}\n    {children}\n  </span>\n);\n\ntype FootnoteProps = ComponentProps<'p'>;\n\nconst StatCardFootnote = ({ className, children, ...rest }: FootnoteProps) => (\n  <p className={cn('tw:m-0 tw:text-xs tw:text-muted-foreground', className)} {...rest}>\n    {children}\n  </p>\n);\n\nexport const StatCard = StatCardRoot as typeof StatCardRoot & {\n  Icon: typeof StatCardIcon;\n  Label: typeof StatCardLabel;\n  Value: typeof StatCardValue;\n  Trend: typeof StatCardTrend;\n  Footnote: typeof StatCardFootnote;\n};\n\nStatCard.Icon = StatCardIcon;\nStatCard.Label = StatCardLabel;\nStatCard.Value = StatCardValue;\nStatCard.Trend = StatCardTrend;\nStatCard.Footnote = StatCardFootnote;\n\nexport type {\n  RootProps as StatCardProps,\n  TrendProps as StatCardTrendProps,\n  TrendDirection as StatCardTrendDirection,\n};\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst gridClassnames = cva(['tw:grid', 'tw:gap-4'], {\n  variants: {\n    columns: {\n      2: 'tw:grid-cols-1 tw:sm:grid-cols-2',\n      3: 'tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-3',\n      4: 'tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-4',\n    },\n  },\n  defaultVariants: {\n    columns: 4,\n  },\n});\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof gridClassnames>;\n\n/**\n * Responsive strip of KPI tiles. Lay `StatCard`s inside it at the top of a dashboard.\n * `columns` caps the tiles per row on large screens; the grid collapses to one column on\n * mobile and two on small screens.\n */\nexport const StatCardGrid = ({ className, columns = 4, children, ...rest }: Props) => (\n  <div className={gridClassnames({ columns, className })} {...rest}>\n    {children}\n  </div>\n);\n\nexport type { Props as StatCardGridProps };\n"],"mappings":";;;;;AAOA,MAAM,kBAAkB,IACtB;CAAC;CAAkB;CAAmB;CAAY;CAAc;AAAgB,GAChF;CACE,UAAU,EACR,WAAW;EACT,IAAI;EACJ,MAAM;EACN,MAAM;CACR,EACF;CACA,iBAAiB,EACf,WAAW,OACb;AACF,CACF;;;;;;;;;;;AAgBA,MAAM,gBAAgB,EAAE,WAAW,UAAU,WAAW,MAAM,GAAG,WAC/D,oBAAC,MAAD;CAAgB;CAAU,WAAW,GAAG,YAAY,SAAS;CAAG,MAAK;CAAQ,GAAI;CAC9E;AACG,CAAA;AAKR,MAAM,gBAAgB,EAAE,WAAW,UAAU,GAAG,WAC9C,oBAAC,OAAD;CACE,WAAW,GACT,4GACA,gDACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;AAKP,MAAM,iBAAiB,EAAE,WAAW,UAAU,GAAG,WAC/C,oBAAC,KAAD;CACE,WAAW,GAAG,6DAA6D,SAAS;CACpF,GAAI;CAEH;AACA,CAAA;AAKL,MAAM,iBAAiB,EAAE,WAAW,UAAU,GAAG,WAC/C,oBAAC,KAAD;CACE,WAAW,GACT,6FACA,SACF;CACA,GAAI;CAEH;AACA,CAAA;AAUL,MAAM,iBAAiB,EAAE,WAAW,YAAY,QAAQ,MAAM,UAAU,GAAG,WACzE,qBAAC,QAAD;CAAM,WAAW,gBAAgB;EAAE;EAAW;CAAU,CAAC;CAAG,GAAI;CAAhE,UAAA,CACG,MACA,QACG;;AAKR,MAAM,oBAAoB,EAAE,WAAW,UAAU,GAAG,WAClD,oBAAC,KAAD;CAAG,WAAW,GAAG,8CAA8C,SAAS;CAAG,GAAI;CAC5E;AACA,CAAA;AAGL,MAAa,WAAW;AAQxB,SAAS,OAAO;AAChB,SAAS,QAAQ;AACjB,SAAS,QAAQ;AACjB,SAAS,QAAQ;AACjB,SAAS,WAAW;;;ACjHpB,MAAM,iBAAiB,IAAI,CAAC,WAAW,UAAU,GAAG;CAClD,UAAU,EACR,SAAS;EACP,GAAG;EACH,GAAG;EACH,GAAG;CACL,EACF;CACA,iBAAiB,EACf,SAAS,EACX;AACF,CAAC;;;;;;AASD,MAAa,gBAAgB,EAAE,WAAW,UAAU,GAAG,UAAU,GAAG,WAClE,oBAAC,OAAD;CAAK,WAAW,eAAe;EAAE;EAAS;CAAU,CAAC;CAAG,GAAI;CACzD;AACE,CAAA"}
+{"version":3,"file":"StatCard.js","names":[],"sources":["../../../src/blocks/StatCard/StatCard.tsx","../../../src/blocks/StatCard/StatCardGrid.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Card } from '../../components/Card';\nimport { cn } from '../../utils';\n\nconst trendClassnames = cva(\n  ['tw:inline-flex', 'tw:items-center', 'tw:gap-1', 'tw:text-sm', 'tw:font-medium'],\n  {\n    variants: {\n      direction: {\n        up: 'tw:text-success',\n        down: 'tw:text-destructive',\n        flat: 'tw:text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      direction: 'flat',\n    },\n  },\n);\n\ntype TrendDirection = NonNullable<VariantProps<typeof trendClassnames>['direction']>;\n\ntype RootProps = ComponentProps<typeof Card>;\n\n/**\n * A single KPI / metric tile over `Card`.\n *\n * **When to use:** dashboard headline numbers, usually in a `StatCardGrid`.\n * **When NOT to use:** charts (`ChartPanel`) or generic surfaces (`Card`).\n */\nconst StatCardRoot = ({ className, children, bordered = true, ...rest }: RootProps) => (\n  <Card bordered={bordered} className={cn('tw:gap-2', className)} role=\"group\" {...rest}>\n    {children}\n  </Card>\n);\n\ntype IconProps = ComponentProps<'div'>;\n\nconst StatCardIcon = ({ className, children, ...rest }: IconProps) => (\n  <div\n    className={cn(\n      'tw:flex tw:size-9 tw:items-center tw:justify-center tw:rounded-md tw:bg-accent tw:text-accent-foreground',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n\ntype LabelProps = ComponentProps<'p'>;\n\nconst StatCardLabel = ({ className, children, ...rest }: LabelProps) => (\n  <p\n    className={cn('tw:m-0 tw:text-sm tw:font-medium tw:text-muted-foreground', className)}\n    {...rest}\n  >\n    {children}\n  </p>\n);\n\ntype ValueProps = ComponentProps<'p'>;\n\nconst StatCardValue = ({ className, children, ...rest }: ValueProps) => (\n  <p\n    className={cn(\n      'tw:m-0 tw:text-3xl tw:font-semibold tw:leading-tight tw:tracking-tight tw:text-foreground',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </p>\n);\n\ntype TrendProps = ComponentProps<'span'> & {\n  /** Sets the semantic colour. */\n  direction?: TrendDirection;\n  icon?: ReactNode;\n};\n\nconst StatCardTrend = ({ className, direction = 'flat', icon, children, ...rest }: TrendProps) => (\n  <span className={trendClassnames({ direction, className })} {...rest}>\n    {icon}\n    {children}\n  </span>\n);\n\ntype FootnoteProps = ComponentProps<'p'>;\n\nconst StatCardFootnote = ({ className, children, ...rest }: FootnoteProps) => (\n  <p className={cn('tw:m-0 tw:text-xs tw:text-muted-foreground', className)} {...rest}>\n    {children}\n  </p>\n);\n\nexport const StatCard = StatCardRoot as typeof StatCardRoot & {\n  Icon: typeof StatCardIcon;\n  Label: typeof StatCardLabel;\n  Value: typeof StatCardValue;\n  Trend: typeof StatCardTrend;\n  Footnote: typeof StatCardFootnote;\n};\n\nStatCard.Icon = StatCardIcon;\nStatCard.Label = StatCardLabel;\nStatCard.Value = StatCardValue;\nStatCard.Trend = StatCardTrend;\nStatCard.Footnote = StatCardFootnote;\n\nexport type {\n  RootProps as StatCardProps,\n  TrendProps as StatCardTrendProps,\n  TrendDirection as StatCardTrendDirection,\n};\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst gridClassnames = cva(['tw:grid', 'tw:gap-4'], {\n  variants: {\n    columns: {\n      2: 'tw:grid-cols-1 tw:sm:grid-cols-2',\n      3: 'tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-3',\n      4: 'tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-4',\n    },\n  },\n  defaultVariants: {\n    columns: 4,\n  },\n});\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof gridClassnames>;\n\n/**\n * Responsive strip of KPI tiles. Lay `StatCard`s inside it at the top of a dashboard.\n * `columns` caps the tiles per row on large screens; the grid collapses to one column on\n * mobile and two on small screens.\n */\nexport const StatCardGrid = ({ className, columns = 4, children, ...rest }: Props) => (\n  <div className={gridClassnames({ columns, className })} {...rest}>\n    {children}\n  </div>\n);\n\nexport type { Props as StatCardGridProps };\n"],"mappings":";;;;;AAOA,MAAM,kBAAkB,IACtB;CAAC;CAAkB;CAAmB;CAAY;CAAc;AAAgB,GAChF;CACE,UAAU,EACR,WAAW;EACT,IAAI;EACJ,MAAM;EACN,MAAM;CACR,EACF;CACA,iBAAiB,EACf,WAAW,OACb;AACF,CACF;;;;;;;AAYA,MAAM,gBAAgB,EAAE,WAAW,UAAU,WAAW,MAAM,GAAG,WAC/D,oBAAC,MAAD;CAAgB;CAAU,WAAW,GAAG,YAAY,SAAS;CAAG,MAAK;CAAQ,GAAI;CAC9E;AACG,CAAA;AAKR,MAAM,gBAAgB,EAAE,WAAW,UAAU,GAAG,WAC9C,oBAAC,OAAD;CACE,WAAW,GACT,4GACA,gDACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;AAKP,MAAM,iBAAiB,EAAE,WAAW,UAAU,GAAG,WAC/C,oBAAC,KAAD;CACE,WAAW,GAAG,6DAA6D,SAAS;CACpF,GAAI;CAEH;AACA,CAAA;AAKL,MAAM,iBAAiB,EAAE,WAAW,UAAU,GAAG,WAC/C,oBAAC,KAAD;CACE,WAAW,GACT,6FACA,SACF;CACA,GAAI;CAEH;AACA,CAAA;AASL,MAAM,iBAAiB,EAAE,WAAW,YAAY,QAAQ,MAAM,UAAU,GAAG,WACzE,qBAAC,QAAD;CAAM,WAAW,gBAAgB;EAAE;EAAW;CAAU,CAAC;CAAG,GAAI;CAAhE,UAAA,CACG,MACA,QACG;;AAKR,MAAM,oBAAoB,EAAE,WAAW,UAAU,GAAG,WAClD,oBAAC,KAAD;CAAG,WAAW,GAAG,8CAA8C,SAAS;CAAG,GAAI;CAC5E;AACA,CAAA;AAGL,MAAa,WAAW;AAQxB,SAAS,OAAO;AAChB,SAAS,QAAQ;AACjB,SAAS,QAAQ;AACjB,SAAS,QAAQ;AACjB,SAAS,WAAW;;;AC5GpB,MAAM,iBAAiB,IAAI,CAAC,WAAW,UAAU,GAAG;CAClD,UAAU,EACR,SAAS;EACP,GAAG;EACH,GAAG;EACH,GAAG;CACL,EACF;CACA,iBAAiB,EACf,SAAS,EACX;AACF,CAAC;;;;;;AASD,MAAa,gBAAgB,EAAE,WAAW,UAAU,GAAG,UAAU,GAAG,WAClE,oBAAC,OAAD;CAAK,WAAW,eAAe;EAAE;EAAS;CAAU,CAAC;CAAG,GAAI;CACzD;AACE,CAAA"}

package/dist/internal/blocks/TextInput.js

@@ -1,2 +1,2 @@
-import { TextInput } from "../../TextInput-DiEMxVF6.js";
+import { TextInput } from "../../TextInput-CDG2XpBl.js";
 export { TextInput };

package/dist/internal/blocks/Textarea.js

@@ -1,5 +1,5 @@
-import { InputGroup } from "../../InputGroup-DcZRlVnN.js";
-import { useControllableState } from "../../useControllableState-M6494mCT.js";
+import { InputGroup } from "../../InputGroup-B4QOPxHl.js";
+import { useControllableState } from "../../useControllableState-CUYXMsfz.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/blocks/Textarea/Textarea.tsx
 /**

package/dist/internal/blocks/TimeInput.js

@@ -1,9 +1,9 @@
-import { createChangeInputEvent } from "../../utils-DnkrFYqY.js";
+import { createChangeInputEvent } from "../../utils-Bd28bWgm.js";
 import { mergeRefs } from "../utils/mergeRefs.js";
-import { Clock, X } from "../../icons-Cek151jC.js";
-import { InputGroup } from "../../InputGroup-DcZRlVnN.js";
-import { useControllableState } from "../../useControllableState-M6494mCT.js";
-import { TimePicker } from "../../TimePicker-BGeqc-Ed.js";
+import { Clock, X } from "../../icons-wcA70iQx.js";
+import { InputGroup } from "../../InputGroup-B4QOPxHl.js";
+import { useControllableState } from "../../useControllableState-CUYXMsfz.js";
+import { TimePicker } from "../../TimePicker-CDGYrRxi.js";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/TimeInput/TimeInput.tsx

package/dist/internal/blocks/TimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.js","names":[],"sources":["../../../src/blocks/TimeInput/TimeInput.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  ComponentRef,\n  FocusEventHandler,\n  MouseEventHandler,\n} from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { TimePicker } from '../../components/TimePicker';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { Clock, X } from '../../icons';\nimport { createChangeInputEvent, mergeRefs } from '../../utils';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<\n  ComponentProps<typeof InputGroup.Input>,\n  'value' | 'defaultValue' | 'type'\n>;\n\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: string | null;\n    defaultValue?: string | null;\n    onValueChange?: (value: string | null) => void;\n    onValueBlur?: (value: string | null) => void;\n    allowClear?: boolean;\n  };\n\nexport const TimeInput = ({\n  ref,\n\n  // group props\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  // own props\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n  allowClear = false,\n\n  // input props\n  disabled,\n  readOnly,\n  placeholder = 'Select time',\n  ...restInputProps\n}: Props) => {\n  const inputRef = useRef<ComponentRef<'input'>>(null);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const [value, setValue] = useControllableState<string | null>({\n    prop: valueProp,\n    defaultProp: defaultValue ?? null,\n    onChange: onValueChange,\n  });\n\n  const canClear = allowClear && !!value && !disabled && !readOnly;\n  const showPicker = !disabled && !readOnly;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(event.target.value || null);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    // The value is already committed on change via `setValue`, so blur only needs to notify.\n    onValueBlur?.(event.target.value || null);\n    onBlur?.(event);\n  };\n\n  const handleTimePickerSelect = (time: string) => {\n    setValue(time);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n    if (!inputRef.current) return;\n    inputRef.current.value = '';\n    setValue(null);\n    onChange?.(createChangeInputEvent(inputRef.current));\n  };\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      <InputGroup.Input\n        {...restInputProps}\n        ref={mergeRefs(ref ?? null, inputRef)}\n        type=\"time\"\n        // hide native time picker indicator to avoid confusion with custom picker;\n        // zero the UA `::-webkit-datetime-edit-fields-wrapper` padding (1px top/bottom) so\n        // the field matches the InputGroup input height instead of rendering 2px taller\n        className=\"tw:[&::-webkit-calendar-picker-indicator]:hidden tw:[&::-webkit-datetime-edit-fields-wrapper]:py-0\"\n        value={value ?? ''}\n        placeholder={placeholder}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      {(canClear || showPicker) && (\n        <InputGroup.Addon align=\"inline-end\">\n          {canClear && (\n            <InputGroup.Button\n              aria-label=\"Clear time\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={handleClear}\n            >\n              <X className=\"tw:size-4\" />\n            </InputGroup.Button>\n          )}\n          {showPicker && (\n            <TimePicker\n              open={isOpen}\n              onOpenChange={setIsOpen}\n              onSelect={handleTimePickerSelect}\n              selected={value}\n            >\n              <InputGroup.Button aria-label=\"Select time\">\n                <Clock className=\"tw:size-4\" />\n              </InputGroup.Button>\n            </TimePicker>\n          )}\n        </InputGroup.Addon>\n      )}\n    </InputGroup>\n  );\n};\n"],"mappings":";;;;;;;;;AAkCA,MAAa,aAAa,EACxB,KAGA,OACA,SACA,cACA,QACA,WAGA,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,aAAa,OAGb,UACA,UACA,cAAc,eACd,GAAG,qBACQ;CACX,MAAM,WAAW,OAA8B,IAAI;CAEnD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,CAAC,OAAO,YAAY,qBAAoC;EAC5D,MAAM;EACN,aAAa,gBAAgB;EAC7B,UAAU;CACZ,CAAC;CAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC;CACxD,MAAM,aAAa,CAAC,YAAY,CAAC;CAEjC,MAAM,gBAAsD,UAAU;EACpE,SAAS,MAAM,OAAO,SAAS,IAAI;EACnC,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EAEjE,cAAc,MAAM,OAAO,SAAS,IAAI;EACxC,SAAS,KAAK;CAChB;CAEA,MAAM,0BAA0B,SAAiB;EAC/C,SAAS,IAAI;CACf;CAEA,MAAM,oBAA0D;EAC9D,IAAI,CAAC,SAAS,SAAS;EACvB,SAAS,QAAQ,QAAQ;EACzB,SAAS,IAAI;EACb,WAAW,uBAAuB,SAAS,OAAO,CAAC;CACrD;CAEA,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA,CAOE,oBAAC,WAAW,OAAZ;GACE,GAAI;GACJ,KAAK,UAAU,OAAO,MAAM,QAAQ;GACpC,MAAK;GAIL,WAAU;GACV,OAAO,SAAS;GACH;GACb,UAAU;GACV,QAAQ;GACE;GACA;EACX,CAAA,IAEC,YAAY,eACZ,qBAAC,WAAW,OAAZ;GAAkB,OAAM;GAAxB,UAAA,CACG,YACC,oBAAC,WAAW,QAAZ;IACE,cAAW;IACX,cAAc,UAAU,MAAM,eAAe;IAC7C,SAAS;IAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;GACT,CAAA,GAEpB,cACC,oBAAC,YAAD;IACE,MAAM;IACN,cAAc;IACd,UAAU;IACV,UAAU;IAEV,UAAA,oBAAC,WAAW,QAAZ;KAAmB,cAAW;KAC5B,UAAA,oBAAC,OAAD,EAAO,WAAU,YAAa,CAAA;IACb,CAAA;GACT,CAAA,CAEE;EAEV,CAAA,CAAA;;AAEhB"}
+{"version":3,"file":"TimeInput.js","names":[],"sources":["../../../src/blocks/TimeInput/TimeInput.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  ComponentRef,\n  FocusEventHandler,\n  MouseEventHandler,\n} from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { TimePicker } from '../../components/TimePicker';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { Clock, X } from '../../icons';\nimport { createChangeInputEvent, mergeRefs } from '../../utils';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<\n  ComponentProps<typeof InputGroup.Input>,\n  'value' | 'defaultValue' | 'type'\n>;\n\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: string | null;\n    defaultValue?: string | null;\n    onValueChange?: (value: string | null) => void;\n    onValueBlur?: (value: string | null) => void;\n    allowClear?: boolean;\n  };\n\nexport const TimeInput = ({\n  ref,\n\n  // group props\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  // own props\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n  allowClear = false,\n\n  // input props\n  disabled,\n  readOnly,\n  placeholder = 'Select time',\n  ...restInputProps\n}: Props) => {\n  const inputRef = useRef<ComponentRef<'input'>>(null);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const [value, setValue] = useControllableState<string | null>({\n    prop: valueProp,\n    defaultProp: defaultValue ?? null,\n    onChange: onValueChange,\n  });\n\n  const canClear = allowClear && !!value && !disabled && !readOnly;\n  const showPicker = !disabled && !readOnly;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(event.target.value || null);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    // The value is already committed on change via `setValue`, so blur only needs to notify.\n    onValueBlur?.(event.target.value || null);\n    onBlur?.(event);\n  };\n\n  const handleTimePickerSelect = (time: string) => {\n    setValue(time);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n    if (!inputRef.current) return;\n    inputRef.current.value = '';\n    setValue(null);\n    onChange?.(createChangeInputEvent(inputRef.current));\n  };\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      <InputGroup.Input\n        {...restInputProps}\n        ref={mergeRefs(ref ?? null, inputRef)}\n        type=\"time\"\n        // Hide the native picker indicator (custom picker); zero the UA fields-wrapper padding\n        // so the input isn't 2px taller than the InputGroup input.\n        className=\"tw:[&::-webkit-calendar-picker-indicator]:hidden tw:[&::-webkit-datetime-edit-fields-wrapper]:py-0\"\n        value={value ?? ''}\n        placeholder={placeholder}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      {(canClear || showPicker) && (\n        <InputGroup.Addon align=\"inline-end\">\n          {canClear && (\n            <InputGroup.Button\n              aria-label=\"Clear time\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={handleClear}\n            >\n              <X className=\"tw:size-4\" />\n            </InputGroup.Button>\n          )}\n          {showPicker && (\n            <TimePicker\n              open={isOpen}\n              onOpenChange={setIsOpen}\n              onSelect={handleTimePickerSelect}\n              selected={value}\n            >\n              <InputGroup.Button aria-label=\"Select time\">\n                <Clock className=\"tw:size-4\" />\n              </InputGroup.Button>\n            </TimePicker>\n          )}\n        </InputGroup.Addon>\n      )}\n    </InputGroup>\n  );\n};\n"],"mappings":";;;;;;;;;AAkCA,MAAa,aAAa,EACxB,KAGA,OACA,SACA,cACA,QACA,WAGA,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,aAAa,OAGb,UACA,UACA,cAAc,eACd,GAAG,qBACQ;CACX,MAAM,WAAW,OAA8B,IAAI;CAEnD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,CAAC,OAAO,YAAY,qBAAoC;EAC5D,MAAM;EACN,aAAa,gBAAgB;EAC7B,UAAU;CACZ,CAAC;CAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC;CACxD,MAAM,aAAa,CAAC,YAAY,CAAC;CAEjC,MAAM,gBAAsD,UAAU;EACpE,SAAS,MAAM,OAAO,SAAS,IAAI;EACnC,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EAEjE,cAAc,MAAM,OAAO,SAAS,IAAI;EACxC,SAAS,KAAK;CAChB;CAEA,MAAM,0BAA0B,SAAiB;EAC/C,SAAS,IAAI;CACf;CAEA,MAAM,oBAA0D;EAC9D,IAAI,CAAC,SAAS,SAAS;EACvB,SAAS,QAAQ,QAAQ;EACzB,SAAS,IAAI;EACb,WAAW,uBAAuB,SAAS,OAAO,CAAC;CACrD;CAEA,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA,CAOE,oBAAC,WAAW,OAAZ;GACE,GAAI;GACJ,KAAK,UAAU,OAAO,MAAM,QAAQ;GACpC,MAAK;GAGL,WAAU;GACV,OAAO,SAAS;GACH;GACb,UAAU;GACV,QAAQ;GACE;GACA;EACX,CAAA,IAEC,YAAY,eACZ,qBAAC,WAAW,OAAZ;GAAkB,OAAM;GAAxB,UAAA,CACG,YACC,oBAAC,WAAW,QAAZ;IACE,cAAW;IACX,cAAc,UAAU,MAAM,eAAe;IAC7C,SAAS;IAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;GACT,CAAA,GAEpB,cACC,oBAAC,YAAD;IACE,MAAM;IACN,cAAc;IACd,UAAU;IACV,UAAU;IAEV,UAAA,oBAAC,WAAW,QAAZ;KAAmB,cAAW;KAC5B,UAAA,oBAAC,OAAD,EAAO,WAAU,YAAa,CAAA;IACb,CAAA;GACT,CAAA,CAEE;EAEV,CAAA,CAAA;;AAEhB"}

package/dist/internal/components/Alert.js

@@ -1,2 +1,2 @@
-import { Alert } from "../../Alert-C4Y9IwMI.js";
+import { Alert } from "../../Alert-UI-CIs-1.js";
 export { Alert };

package/dist/internal/components/AlertModal.js

@@ -1,2 +1,2 @@
-import { AlertModal } from "../../AlertModal-BGJdaRRj.js";
+import { AlertModal } from "../../AlertModal-Th2khjPi.js";
 export { AlertModal };

package/dist/internal/components/Avatar.js

@@ -1,5 +1,5 @@
 import { cn } from "../../classNames-BzrkDnOD.js";
-import { useSHA256 } from "../../utils-DnkrFYqY.js";
+import { useSHA256 } from "../../utils-Bd28bWgm.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import BoringAvatar from "boring-avatars";
 //#region src/components/Avatar.tsx

package/dist/internal/components/Badge.js

@@ -1,2 +1,2 @@
-import { Badge } from "../../Badge-o5jURtpB.js";
+import { Badge } from "../../Badge-DIjhwPvh.js";
 export { Badge };

package/dist/internal/components/BrandLogo.js

@@ -1,2 +1,2 @@
-import { BrandLogo } from "../../BrandLogo-CoKBk4MI.js";
+import { BrandLogo } from "../../BrandLogo-CKpVSZb6.js";
 export { BrandLogo };

package/dist/internal/components/Breadcrumb.js

@@ -1,2 +1,2 @@
-import { Breadcrumb } from "../../Breadcrumb-D1id7YXd.js";
+import { Breadcrumb } from "../../Breadcrumb-p9HtMLCc.js";
 export { Breadcrumb };

package/dist/internal/components/Button.js

@@ -1,2 +1,2 @@
-import { Button, ButtonInline, argoVariants } from "../../Button-DsRrU5F1.js";
+import { Button, ButtonInline, argoVariants } from "../../Button-Ca4Q3VJU.js";
 export { Button, ButtonInline, argoVariants };

package/dist/internal/components/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst buttonGroupVariant = cva(\n  ['tailwindcss-preflight', 'tw:inline-flex', 'tw:items-center', 'tw:group/button-group'],\n  {\n    defaultVariants: {\n      variant: 'inline',\n      space: 'small',\n    },\n    variants: {\n      variant: {\n        inline: [],\n        block: [\n          'tw:w-full',\n          'tw:flex-col',\n          'tw:sm:flex-row',\n          'tw:[&_a]:flex-1',\n          'tw:[&>button:not([data-icon-only=true])]:flex-1',\n        ],\n      },\n      space: {\n        'extra-small': 'tw:gap-1',\n        'little-small': 'tw:gap-2',\n        small: 'tw:gap-3',\n        medium: 'tw:gap-4',\n        large: 'tw:gap-6',\n        compact: [\n          'tw:border-collapse',\n          'tw:!gap-0',\n\n          // ensure that focus visible outline is at the top\n          'tw:[&>*:focus-visible]:!z-10',\n\n          'tw:[&>*:not(:first-child)]:rounded-l-none',\n          'tw:[&>*:not(:last-child)]:rounded-r-none',\n          'tw:[&>*:not(:last-child)]:border-r-0',\n          'tw:[&>*:not(:first-child)]:border-l-0',\n\n          // separator\n          'tw:[&>*:not(:first-child)]:before:content',\n          'tw:[&>*:not(:first-child)]:before:absolute',\n          'tw:[&>*:not(:first-child)]:before:left-0',\n          'tw:[&>*:not(:first-child)]:before:h-full',\n          'tw:[&>*:not(:first-child)]:before:w-px',\n          'tw:[&>*:not(:first-child)]:before:bg-black/10',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = {\n  children: ReactNode;\n  className?: string;\n} & VariantProps<typeof buttonGroupVariant> &\n  ComponentProps<'div'>;\n\nexport const ButtonGroup = ({\n  ref,\n  children,\n  space = 'small',\n  className,\n  variant,\n  ...rest\n}: Props) => {\n  return (\n    <div\n      ref={ref}\n      {...rest}\n      role=\"group\"\n      data-variant={variant}\n      // cn (tailwind-merge), not cva's raw className append: a caller passing e.g.\n      // `tw:hidden` must override the base `tw:inline-flex`. cva only concatenates, so both\n      // land on the element and the winner is decided by CSS source order — which flipped in\n      // v4 (`inline-flex` now sorts after `hidden`), leaving hover-reveal groups always visible.\n      className={cn(buttonGroupVariant({ variant, space }), className)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAMA,MAAM,qBAAqB,IACzB;CAAC;CAAyB;CAAkB;CAAmB;AAAuB,GACtF;CACE,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;CACA,UAAU;EACR,SAAS;GACP,QAAQ,CAAC;GACT,OAAO;IACL;IACA;IACA;IACA;IACA;GACF;EACF;EACA,OAAO;GACL,eAAe;GACf,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,OAAO;GACP,SAAS;IACP;IACA;IAGA;IAEA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;AACF,CACF;AAQA,MAAa,eAAe,EAC1B,KACA,UACA,QAAQ,SACR,WACA,SACA,GAAG,WACQ;CACX,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,MAAK;EACL,gBAAc;EAKd,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAM,CAAC,GAAG,SAAS;EAE9D;CACE,CAAA;AAET"}
+{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst buttonGroupVariant = cva(\n  ['tailwindcss-preflight', 'tw:inline-flex', 'tw:items-center', 'tw:group/button-group'],\n  {\n    defaultVariants: {\n      variant: 'inline',\n      space: 'small',\n    },\n    variants: {\n      variant: {\n        inline: [],\n        block: [\n          'tw:w-full',\n          'tw:flex-col',\n          'tw:sm:flex-row',\n          'tw:[&_a]:flex-1',\n          'tw:[&>button:not([data-icon-only=true])]:flex-1',\n        ],\n      },\n      space: {\n        'extra-small': 'tw:gap-1',\n        'little-small': 'tw:gap-2',\n        small: 'tw:gap-3',\n        medium: 'tw:gap-4',\n        large: 'tw:gap-6',\n        compact: [\n          'tw:border-collapse',\n          'tw:!gap-0',\n\n          // ensure that focus visible outline is at the top\n          'tw:[&>*:focus-visible]:!z-10',\n\n          'tw:[&>*:not(:first-child)]:rounded-l-none',\n          'tw:[&>*:not(:last-child)]:rounded-r-none',\n          'tw:[&>*:not(:last-child)]:border-r-0',\n          'tw:[&>*:not(:first-child)]:border-l-0',\n\n          // separator\n          'tw:[&>*:not(:first-child)]:before:content',\n          'tw:[&>*:not(:first-child)]:before:absolute',\n          'tw:[&>*:not(:first-child)]:before:left-0',\n          'tw:[&>*:not(:first-child)]:before:h-full',\n          'tw:[&>*:not(:first-child)]:before:w-px',\n          'tw:[&>*:not(:first-child)]:before:bg-black/10',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = {\n  children: ReactNode;\n  className?: string;\n} & VariantProps<typeof buttonGroupVariant> &\n  ComponentProps<'div'>;\n\nexport const ButtonGroup = ({\n  ref,\n  children,\n  space = 'small',\n  className,\n  variant,\n  ...rest\n}: Props) => {\n  return (\n    <div\n      ref={ref}\n      {...rest}\n      role=\"group\"\n      data-variant={variant}\n      // `cn` (tailwind-merge), not cva's className: a caller's `tw:hidden` must beat `tw:inline-flex`.\n      className={cn(buttonGroupVariant({ variant, space }), className)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAMA,MAAM,qBAAqB,IACzB;CAAC;CAAyB;CAAkB;CAAmB;AAAuB,GACtF;CACE,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;CACA,UAAU;EACR,SAAS;GACP,QAAQ,CAAC;GACT,OAAO;IACL;IACA;IACA;IACA;IACA;GACF;EACF;EACA,OAAO;GACL,eAAe;GACf,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,OAAO;GACP,SAAS;IACP;IACA;IAGA;IAEA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;AACF,CACF;AAQA,MAAa,eAAe,EAC1B,KACA,UACA,QAAQ,SACR,WACA,SACA,GAAG,WACQ;CACX,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,MAAK;EACL,gBAAc;EAEd,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAM,CAAC,GAAG,SAAS;EAE9D;CACE,CAAA;AAET"}

package/dist/internal/components/Calendar.js

@@ -1,2 +1,2 @@
-import { Calendar } from "../../Calendar-cG5NIJ4O.js";
+import { Calendar } from "../../Calendar-DFtmZzbF.js";
 export { Calendar };

package/dist/internal/components/Card.js

@@ -1,2 +1,2 @@
-import { Card } from "../../Card-Dyo7055Q.js";
+import { Card } from "../../Card-Cr9MBNHu.js";
 export { Card };

package/dist/internal/components/Checkbox.js

@@ -1,2 +1,2 @@
-import { Checkbox } from "../../Checkbox-Bqr6zXcW.js";
+import { Checkbox } from "../../Checkbox-8yIIgY7g.js";
 export { Checkbox };

package/dist/internal/components/Clipboard.js

@@ -1,2 +1,2 @@
-import { Clipboard } from "../../Clipboard-C2YBRfD8.js";
+import { Clipboard } from "../../Clipboard-_xf6hMDD.js";
 export { Clipboard };

package/dist/internal/components/CollapsiblePanel.js

@@ -1,6 +1,6 @@
 import { cn } from "../../classNames-BzrkDnOD.js";
-import { keyCodes } from "../../utils-DnkrFYqY.js";
-import { ChevronDown } from "../../icons-Cek151jC.js";
+import { keyCodes } from "../../utils-Bd28bWgm.js";
+import { ChevronDown } from "../../icons-wcA70iQx.js";
 import { Collapsible } from "../../Collapsible-BQXWEOBC.js";
 import { useState } from "react";
 import { cva } from "class-variance-authority";

package/dist/internal/components/Combobox.js

@@ -1,2 +1,2 @@
-import { Combobox, filterByWords, matchByWords, namedLabel, withBlankValues } from "../../Combobox-BfanUAqY.js";
-export { Combobox, filterByWords, matchByWords, namedLabel, withBlankValues };
+import { BLANK_VALUES, Combobox, filterByWords, matchByWords, namedLabel, withBlankValues } from "../../Combobox-CxRAYOBt.js";
+export { BLANK_VALUES, Combobox, filterByWords, matchByWords, namedLabel, withBlankValues };

package/dist/internal/components/DatePicker.js

@@ -1,2 +1,2 @@
-import { DatePicker } from "../../DatePicker-nA8YdE84.js";
+import { DatePicker } from "../../DatePicker-CtSa9b3V.js";
 export { DatePicker };

package/dist/internal/components/DateRangePicker.js

@@ -1,2 +1,2 @@
-import { DateRangePicker } from "../../DateRangePicker-DjSUFjh4.js";
+import { DateRangePicker } from "../../DateRangePicker-BoPnh4aH.js";
 export { DateRangePicker };

package/dist/internal/components/DropdownMenu.js

@@ -1,2 +1,2 @@
-import { DropdownMenu } from "../../DropdownMenu-CASr-jgl.js";
+import { DropdownMenu } from "../../DropdownMenu-gRM-A8qU.js";
 export { DropdownMenu };

package/dist/internal/components/FileUpload.js

@@ -1,2 +1,2 @@
-import { FileUpload, useFileDropTarget, useFileUploadRejections } from "../../FileUpload-DYQCTGjU.js";
+import { FileUpload, useFileDropTarget, useFileUploadRejections } from "../../FileUpload-C83tXuE2.js";
 export { FileUpload, useFileDropTarget, useFileUploadRejections };

package/dist/internal/components/FullScreenModal.js

@@ -1,2 +1,2 @@
-import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "../../FullScreenModal-CN9nAs72.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "../../FullScreenModal-CD7mYeTz.js";
 export { FullScreenModal, FullScreenModalBody, FullScreenModalHeader };

package/dist/internal/components/HoverCard.js

@@ -1,2 +1,2 @@
-import { HoverCard } from "../../HoverCard-B9ZMJxjn.js";
+import { HoverCard } from "../../HoverCard-B8OKu9XZ.js";
 export { HoverCard };

package/dist/internal/components/InputGroup.js

@@ -1,2 +1,2 @@
-import { InputGroup } from "../../InputGroup-DcZRlVnN.js";
+import { InputGroup } from "../../InputGroup-B4QOPxHl.js";
 export { InputGroup };

package/dist/internal/components/Kbd.js

@@ -1,2 +1,2 @@
-import { Kbd, kbdVariants, keys } from "../../Kbd-D1Azcc4g.js";
+import { Kbd, kbdVariants, keys } from "../../Kbd-J4n1J6i4.js";
 export { Kbd, kbdVariants, keys };

package/dist/internal/components/MarkedText.js

@@ -1,2 +1,2 @@
-import { MarkedText } from "../../MarkedText-DNGEUVWc.js";
+import { MarkedText } from "../../MarkedText-DlmlJO0u.js";
 export { MarkedText };

package/dist/internal/components/MergeEditor/ConflictStatus/ConflictStatusIndicator.js

@@ -1,5 +1,5 @@
 import { cn } from "../../../../classNames-BzrkDnOD.js";
-import { AlertTriangle, CircleCheck } from "../../../../icons-Cek151jC.js";
+import { AlertTriangle, CircleCheck } from "../../../../icons-wcA70iQx.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/MergeEditor/ConflictStatus/ConflictStatusIndicator.tsx
 const ConflictStatusIndicator = ({ remainingConflicts, remainingSafeChanges }) => {

package/dist/internal/components/Modal.js

@@ -1,2 +1,2 @@
-import { Modal } from "../../Modal-Coj-H02o.js";
+import { Modal } from "../../Modal-Driyqs_N.js";
 export { Modal };

package/dist/internal/components/Navbar.js

@@ -1,2 +1,2 @@
-import { Navbar } from "../../Navbar-Liy1TPI7.js";
+import { Navbar } from "../../Navbar-B_DNpv5s.js";
 export { Navbar };

package/dist/internal/components/Pagination.js

@@ -1,2 +1,2 @@
-import { Pagination } from "../../Pagination-C_b7Xhey.js";
+import { Pagination } from "../../Pagination-LaSg-5cl.js";
 export { Pagination };

package/dist/internal/components/PanelWithDetails.js

@@ -1,5 +1,5 @@
 import { cn } from "../../classNames-BzrkDnOD.js";
-import { ChevronDown } from "../../icons-Cek151jC.js";
+import { ChevronDown } from "../../icons-wcA70iQx.js";
 import { Collapsible } from "../../Collapsible-BQXWEOBC.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/internal/components/Popconfirm.js

@@ -1,2 +1,2 @@
-import { Popconfirm } from "../../Popconfirm-5pBzT_HQ.js";
+import { Popconfirm } from "../../Popconfirm-SLz0zodk.js";
 export { Popconfirm };

package/dist/internal/components/Popover.js

@@ -1,2 +1,2 @@
-import { Popover } from "../../Popover-BEbQrC_P.js";
+import { Popover } from "../../Popover-CEk915I1.js";
 export { Popover };

package/dist/internal/components/RadioGroup.js

@@ -1,2 +1,2 @@
-import { RadioGroup } from "../../RadioGroup-CUBsuP7r.js";
+import { RadioGroup } from "../../RadioGroup-CBPRLRN0.js";
 export { RadioGroup };

package/dist/internal/components/Search.js

@@ -1,2 +1,2 @@
-import { Search, SearchForm } from "../../Search-DVpJuzr9.js";
+import { Search, SearchForm } from "../../Search-DmkQo716.js";
 export { Search, SearchForm };

package/dist/internal/components/Select.js

@@ -1,2 +1,2 @@
-import { Select } from "../../Select-DV3Hak_l.js";
+import { Select } from "../../Select-ByRvkZ3D.js";
 export { Select };

package/dist/internal/components/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport * as RSeparator from '@radix-ui/react-separator';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst separatorVariants = cva(\n  [\n    // position\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:self-stretch',\n\n    // before\n    \"tw:before:content-['']\",\n    'tw:before:bg-border',\n  ],\n  {\n    defaultVariants: {\n      orientation: 'vertical',\n      size: 'full',\n    },\n    compoundVariants: [\n      {\n        orientation: 'horizontal',\n        size: 'full',\n        className: ['tw:before:w-full'],\n      },\n      {\n        orientation: 'horizontal',\n        size: '1/2',\n        className: ['tw:before:w-1/2'],\n      },\n      {\n        orientation: 'horizontal',\n        size: '3/4',\n        className: ['tw:before:w-3/4'],\n      },\n      {\n        orientation: 'vertical',\n        size: 'full',\n        className: ['tw:before:h-full'],\n      },\n      {\n        orientation: 'vertical',\n        size: '1/2',\n        className: ['tw:before:h-1/2'],\n      },\n      {\n        orientation: 'vertical',\n        size: '3/4',\n        className: ['tw:before:h-3/4'],\n      },\n    ],\n    variants: {\n      size: {\n        full: ['tw:before:h-full'],\n        '1/2': [],\n        '3/4': [],\n      },\n      orientation: {\n        vertical: ['tw:before:w-px'],\n        horizontal: ['tw:before:h-px'],\n      },\n    },\n  },\n);\n\ntype Props = VariantProps<typeof separatorVariants> &\n  Omit<ComponentProps<typeof RSeparator.Root>, 'decorative'> & {\n    /**\n     * Optional label rendered centered between two line segments\n     * (typical \"OR\" divider). Implies `orientation=\"horizontal\"`.\n     * Overrides any `children` passed to the component.\n     */\n    label?: ReactNode;\n  };\n\nexport const Separator = ({\n  className,\n  orientation = 'vertical',\n  size = 'full',\n  label,\n  ...props\n}: Props) => {\n  if (label != null && label !== false) {\n    return (\n      <RSeparator.Root\n        {...props}\n        decorative\n        orientation=\"horizontal\"\n        className={cn(\n          'tw:flex tw:w-full tw:items-center tw:gap-3 tw:self-stretch',\n          'tw:text-xs tw:font-medium tw:text-muted-foreground',\n          \"tw:before:content-[''] tw:before:h-px tw:before:flex-1 tw:before:bg-border\",\n          \"tw:after:content-[''] tw:after:h-px tw:after:flex-1 tw:after:bg-border\",\n          className,\n        )}\n      >\n        {label}\n      </RSeparator.Root>\n    );\n  }\n\n  return (\n    <RSeparator.Root\n      {...props}\n      decorative\n      orientation={orientation}\n      className={separatorVariants({ size, orientation, className })}\n    />\n  );\n};\n"],"mappings":";;;;;AAOA,MAAM,oBAAoB,IACxB;CAEE;CACA;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB;EACf,aAAa;EACb,MAAM;CACR;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,kBAAkB;EAChC;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,iBAAiB;EAC/B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,iBAAiB;EAC/B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,kBAAkB;EAChC;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,iBAAiB;EAC/B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,iBAAiB;EAC/B;CACF;CACA,UAAU;EACR,MAAM;GACJ,MAAM,CAAC,kBAAkB;GACzB,OAAO,CAAC;GACR,OAAO,CAAC;EACV;EACA,aAAa;GACX,UAAU,CAAC,gBAAgB;GAC3B,YAAY,CAAC,gBAAgB;EAC/B;CACF;AACF,CACF;AAYA,MAAa,aAAa,EACxB,WACA,cAAc,YACd,OAAO,QACP,OACA,GAAG,YACQ;CACX,IAAI,SAAS,QAAQ,UAAU,OAC7B,OACE,oBAAC,WAAW,MAAZ;EACE,GAAI;EACJ,YAAA;EACA,aAAY;EACZ,WAAW,GACT,8DACA,sDACA,8EACA,0EACA,SACF;EAEC,UAAA;CACc,CAAA;CAIrB,OACE,oBAAC,WAAW,MAAZ;EACE,GAAI;EACJ,YAAA;EACa;EACb,WAAW,kBAAkB;GAAE;GAAM;GAAa;EAAU,CAAC;CAC9D,CAAA;AAEL"}
+{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport * as RSeparator from '@radix-ui/react-separator';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst separatorVariants = cva(\n  [\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:self-stretch',\n\n    \"tw:before:content-['']\",\n    'tw:before:bg-border',\n  ],\n  {\n    defaultVariants: {\n      orientation: 'vertical',\n      size: 'full',\n    },\n    compoundVariants: [\n      {\n        orientation: 'horizontal',\n        size: 'full',\n        className: ['tw:before:w-full'],\n      },\n      {\n        orientation: 'horizontal',\n        size: '1/2',\n        className: ['tw:before:w-1/2'],\n      },\n      {\n        orientation: 'horizontal',\n        size: '3/4',\n        className: ['tw:before:w-3/4'],\n      },\n      {\n        orientation: 'vertical',\n        size: 'full',\n        className: ['tw:before:h-full'],\n      },\n      {\n        orientation: 'vertical',\n        size: '1/2',\n        className: ['tw:before:h-1/2'],\n      },\n      {\n        orientation: 'vertical',\n        size: '3/4',\n        className: ['tw:before:h-3/4'],\n      },\n    ],\n    variants: {\n      size: {\n        full: ['tw:before:h-full'],\n        '1/2': [],\n        '3/4': [],\n      },\n      orientation: {\n        vertical: ['tw:before:w-px'],\n        horizontal: ['tw:before:h-px'],\n      },\n    },\n  },\n);\n\ntype Props = VariantProps<typeof separatorVariants> &\n  Omit<ComponentProps<typeof RSeparator.Root>, 'decorative'> & {\n    /** Centered \"OR\"-style label; implies `orientation=\"horizontal\"`, overrides `children`. */\n    label?: ReactNode;\n  };\n\nexport const Separator = ({\n  className,\n  orientation = 'vertical',\n  size = 'full',\n  label,\n  ...props\n}: Props) => {\n  if (label != null && label !== false) {\n    return (\n      <RSeparator.Root\n        {...props}\n        decorative\n        orientation=\"horizontal\"\n        className={cn(\n          'tw:flex tw:w-full tw:items-center tw:gap-3 tw:self-stretch',\n          'tw:text-xs tw:font-medium tw:text-muted-foreground',\n          \"tw:before:content-[''] tw:before:h-px tw:before:flex-1 tw:before:bg-border\",\n          \"tw:after:content-[''] tw:after:h-px tw:after:flex-1 tw:after:bg-border\",\n          className,\n        )}\n      >\n        {label}\n      </RSeparator.Root>\n    );\n  }\n\n  return (\n    <RSeparator.Root\n      {...props}\n      decorative\n      orientation={orientation}\n      className={separatorVariants({ size, orientation, className })}\n    />\n  );\n};\n"],"mappings":";;;;;AAOA,MAAM,oBAAoB,IACxB;CACE;CACA;CACA;CACA;CAEA;CACA;AACF,GACA;CACE,iBAAiB;EACf,aAAa;EACb,MAAM;CACR;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,kBAAkB;EAChC;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,iBAAiB;EAC/B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,iBAAiB;EAC/B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,kBAAkB;EAChC;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,iBAAiB;EAC/B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,iBAAiB;EAC/B;CACF;CACA,UAAU;EACR,MAAM;GACJ,MAAM,CAAC,kBAAkB;GACzB,OAAO,CAAC;GACR,OAAO,CAAC;EACV;EACA,aAAa;GACX,UAAU,CAAC,gBAAgB;GAC3B,YAAY,CAAC,gBAAgB;EAC/B;CACF;AACF,CACF;AAQA,MAAa,aAAa,EACxB,WACA,cAAc,YACd,OAAO,QACP,OACA,GAAG,YACQ;CACX,IAAI,SAAS,QAAQ,UAAU,OAC7B,OACE,oBAAC,WAAW,MAAZ;EACE,GAAI;EACJ,YAAA;EACA,aAAY;EACZ,WAAW,GACT,8DACA,sDACA,8EACA,0EACA,SACF;EAEC,UAAA;CACc,CAAA;CAIrB,OACE,oBAAC,WAAW,MAAZ;EACE,GAAI;EACJ,YAAA;EACa;EACb,WAAW,kBAAkB;GAAE;GAAM;GAAa;EAAU,CAAC;CAC9D,CAAA;AAEL"}

package/dist/internal/components/Sheet.js

@@ -1,2 +1,2 @@
-import { Sheet } from "../../Sheet-Chf0kX1E.js";
+import { Sheet } from "../../Sheet-C-yXk5Da.js";
 export { Sheet };

package/dist/internal/components/Sidebar.js

@@ -1,2 +1,2 @@
-import { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar } from "../../Sidebar-CTWsHZhF.js";
+import { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar } from "../../Sidebar-Ds0E6PbR.js";
 export { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar };

package/dist/internal/components/Skeleton/Skeleton.js

@@ -13,17 +13,13 @@ const HEIGHT_CLASS_NAME = {
 };
 const ANIMATION_CLASS_NAME = cn("tw:relative", "tw:overflow-hidden", "tw:pointer-events-none", "tw:bg-skeleton", "tw:before:content-[\"\"]", "tw:before:opacity-100", "tw:before:absolute", "tw:before:inset-0", "tw:before:-translate-x-full", "tw:before:animate-[shimmer_2s_infinite]", "tw:before:bg-gradient-to-r", "tw:before:from-transparent", "tw:before:to-transparent", "tw:before:via-white/40");
 /**
-* Animated placeholder shown in place of content that is still loading.
+* Placeholder in the slot of loading content.
 *
-* **When to use:** during initial page or section load while the real content is fetched. Match the
-* placeholder shape to the eventual content (one `Skeleton height="lg"` per title row, several `xs` for
-* paragraph lines). For list shells use `count` to render N stacked placeholders.
-* **When NOT to use:** for indeterminate background work without a layout slot use `DotsLoader` or
-* `Button isLoading`; for empty / error states once the request resolves use `EmptyState` / `ErrorState`.
-* **Composition:** drop directly into the slot the real content will occupy. `SkeletonList` is the typical
-* shell for `Table` / `Card`-list pages.
+* - Match the eventual shape (`lg` per title row, `xs` per text line).
+* - Not for slotless work (`DotsLoader`, `Button isLoading`) or empty / error states.
+* - `SkeletonList` shells `Table` / `Card`-list pages.
 *
-* @see RECIPES.md#data-card-with-skeleton — for a loading card pattern
+* @see RECIPES.md#data-card-with-skeleton
 */
 const Skeleton = ({ height = "md", className, count = 1 }) => {
 	const prefixId = useId();

package/dist/internal/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { cn } from '../../utils';\n\nexport type Height = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/**\n * Props for `Skeleton`. `height` maps to the named token (xxs 12px → 2xl 48px); `count` renders multiple\n * stacked placeholders sharing the same shape.\n */\ntype SkeletonProps = {\n  /** Named height token — `xxs` (12px) through `2xl` (48px). */\n  height?: Height;\n  className?: string;\n  /** Number of stacked placeholder rows. Use for list-style loading states. */\n  count?: number;\n};\n\nconst HEIGHT_CLASS_NAME: Record<Height, string> = {\n  xxs: 'tw:h-3 tw:rounded',\n  xs: 'tw:h-4 tw:rounded',\n  sm: 'tw:h-5 tw:rounded',\n  md: 'tw:h-6 tw:rounded-md',\n  lg: 'tw:h-8 tw:rounded-lg',\n  xl: 'tw:h-10 tw:rounded-lg',\n  '2xl': 'tw:h-12 tw:rounded-lg',\n};\n\nconst ANIMATION_CLASS_NAME = cn(\n  // base styles\n  'tw:relative',\n  'tw:overflow-hidden',\n  'tw:pointer-events-none',\n  'tw:bg-skeleton',\n\n  // before\n  'tw:before:content-[\"\"]',\n  'tw:before:opacity-100',\n  'tw:before:absolute',\n  'tw:before:inset-0',\n  'tw:before:-translate-x-full',\n  'tw:before:animate-[shimmer_2s_infinite]',\n  'tw:before:bg-gradient-to-r',\n  'tw:before:from-transparent',\n  'tw:before:to-transparent',\n  'tw:before:via-white/40',\n);\n\n/**\n * Animated placeholder shown in place of content that is still loading.\n *\n * **When to use:** during initial page or section load while the real content is fetched. Match the\n * placeholder shape to the eventual content (one `Skeleton height=\"lg\"` per title row, several `xs` for\n * paragraph lines). For list shells use `count` to render N stacked placeholders.\n * **When NOT to use:** for indeterminate background work without a layout slot use `DotsLoader` or\n * `Button isLoading`; for empty / error states once the request resolves use `EmptyState` / `ErrorState`.\n * **Composition:** drop directly into the slot the real content will occupy. `SkeletonList` is the typical\n * shell for `Table` / `Card`-list pages.\n *\n * @see RECIPES.md#data-card-with-skeleton — for a loading card pattern\n */\nexport const Skeleton = ({ height = 'md', className, count = 1 }: SkeletonProps) => {\n  const prefixId = useId();\n  const keys = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);\n\n  return (\n    <>\n      {keys.map((key) => (\n        <div\n          key={key}\n          data-skeleton=\"true\"\n          className={cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)}\n        />\n      ))}\n    </>\n  );\n};\n"],"mappings":";;;;AAkBA,MAAM,oBAA4C;CAChD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,MAAM,uBAAuB,GAE3B,eACA,sBACA,0BACA,kBAGA,4BACA,yBACA,sBACA,qBACA,+BACA,2CACA,8BACA,8BACA,4BACA,wBACF;;;;;;;;;;;;;;AAeA,MAAa,YAAY,EAAE,SAAS,MAAM,WAAW,QAAQ,QAAuB;CAClF,MAAM,WAAW,MAAM;CACvB,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,GAAG;CAEvE,OACE,oBAAA,YAAA,EAAA,UACG,KAAK,KAAK,QACT,oBAAC,OAAD;EAEE,iBAAc;EACd,WAAW,GAAG,kBAAkB,SAAS,sBAAsB,SAAS;CACzE,GAHM,GAGN,CACF,EACD,CAAA;AAEN"}
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { cn } from '../../utils';\n\nexport type Height = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\ntype SkeletonProps = {\n  /** `xxs` (12px) through `2xl` (48px). */\n  height?: Height;\n  className?: string;\n  /** Stacked rows. */\n  count?: number;\n};\n\nconst HEIGHT_CLASS_NAME: Record<Height, string> = {\n  xxs: 'tw:h-3 tw:rounded',\n  xs: 'tw:h-4 tw:rounded',\n  sm: 'tw:h-5 tw:rounded',\n  md: 'tw:h-6 tw:rounded-md',\n  lg: 'tw:h-8 tw:rounded-lg',\n  xl: 'tw:h-10 tw:rounded-lg',\n  '2xl': 'tw:h-12 tw:rounded-lg',\n};\n\nconst ANIMATION_CLASS_NAME = cn(\n  'tw:relative',\n  'tw:overflow-hidden',\n  'tw:pointer-events-none',\n  'tw:bg-skeleton',\n\n  'tw:before:content-[\"\"]',\n  'tw:before:opacity-100',\n  'tw:before:absolute',\n  'tw:before:inset-0',\n  'tw:before:-translate-x-full',\n  'tw:before:animate-[shimmer_2s_infinite]',\n  'tw:before:bg-gradient-to-r',\n  'tw:before:from-transparent',\n  'tw:before:to-transparent',\n  'tw:before:via-white/40',\n);\n\n/**\n * Placeholder in the slot of loading content.\n *\n * - Match the eventual shape (`lg` per title row, `xs` per text line).\n * - Not for slotless work (`DotsLoader`, `Button isLoading`) or empty / error states.\n * - `SkeletonList` shells `Table` / `Card`-list pages.\n *\n * @see RECIPES.md#data-card-with-skeleton\n */\nexport const Skeleton = ({ height = 'md', className, count = 1 }: SkeletonProps) => {\n  const prefixId = useId();\n  const keys = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);\n\n  return (\n    <>\n      {keys.map((key) => (\n        <div\n          key={key}\n          data-skeleton=\"true\"\n          className={cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)}\n        />\n      ))}\n    </>\n  );\n};\n"],"mappings":";;;;AAcA,MAAM,oBAA4C;CAChD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,MAAM,uBAAuB,GAC3B,eACA,sBACA,0BACA,kBAEA,4BACA,yBACA,sBACA,qBACA,+BACA,2CACA,8BACA,8BACA,4BACA,wBACF;;;;;;;;;;AAWA,MAAa,YAAY,EAAE,SAAS,MAAM,WAAW,QAAQ,QAAuB;CAClF,MAAM,WAAW,MAAM;CACvB,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,GAAG;CAEvE,OACE,oBAAA,YAAA,EAAA,UACG,KAAK,KAAK,QACT,oBAAC,OAAD;EAEE,iBAAc;EACd,WAAW,GAAG,kBAAkB,SAAS,sBAAsB,SAAS;CACzE,GAHM,GAGN,CACF,EACD,CAAA;AAEN"}

package/dist/internal/components/Slider.js

@@ -1,2 +1,2 @@
-import { Slider } from "../../Slider-Bv0B6lI0.js";
+import { Slider } from "../../Slider-DWdu9NuM.js";
 export { Slider };

package/dist/internal/components/SpotlightBackdrop.js

@@ -3,15 +3,10 @@ import { useId, useLayoutEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SpotlightBackdrop/SpotlightBackdrop.tsx
 /**
-* Full-viewport dimmed layer with an SVG-mask cut-out around a target rect,
-* producing a spotlight highlight. With `rect={null}` it dims the whole viewport
-* (no cut-out). The dim tone uses the semantic `foreground` token, so it re-skins
-* with the active brand.
+* Full-viewport dim with a spotlight cut-out around `rect`.
 *
-* **Presentational primitive** — pass a `rect` from `useTargetRect`, and compose
-* with `Popover` for an anchored callout. Tour / coachmark orchestration
-* (steps, next/prev, "seen" persistence) is intentionally app-owned; see the
-* "Guided tour (recipe)" story for the composition.
+* - Presentational: `rect` from `useTargetRect`, callout via `Popover`.
+* - Tour steps and "seen" persistence are app-owned — see the "Guided tour (recipe)" story.
 */
 const SpotlightBackdrop = ({ rect, padding = 8, radius = 8, className, onClick }) => {
 	const maskId = useId();

package/dist/internal/components/SpotlightBackdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpotlightBackdrop.js","names":[],"sources":["../../../src/components/SpotlightBackdrop/SpotlightBackdrop.tsx","../../../src/components/SpotlightBackdrop/useTargetRect.ts"],"sourcesContent":["import { type MouseEventHandler, useId } from 'react';\n\nimport { cn } from '../../utils';\n\nimport type { TargetRect } from './useTargetRect';\n\ntype Props = {\n  /** Target box to cut out of the dim layer, or `null` for a full dim (no highlight). */\n  rect: TargetRect | null;\n  /** Padding around the target inside the cut-out, in px. */\n  padding?: number;\n  /** Corner radius of the cut-out, in px. */\n  radius?: number;\n  className?: string;\n  /** Fired when the dim layer is clicked (e.g. to dismiss). Receives the click event. */\n  onClick?: MouseEventHandler<HTMLDivElement>;\n};\n\n/**\n * Full-viewport dimmed layer with an SVG-mask cut-out around a target rect,\n * producing a spotlight highlight. With `rect={null}` it dims the whole viewport\n * (no cut-out). The dim tone uses the semantic `foreground` token, so it re-skins\n * with the active brand.\n *\n * **Presentational primitive** — pass a `rect` from `useTargetRect`, and compose\n * with `Popover` for an anchored callout. Tour / coachmark orchestration\n * (steps, next/prev, \"seen\" persistence) is intentionally app-owned; see the\n * \"Guided tour (recipe)\" story for the composition.\n */\nexport const SpotlightBackdrop = ({ rect, padding = 8, radius = 8, className, onClick }: Props) => {\n  const maskId = useId();\n\n  const cutout = rect\n    ? {\n        x: rect.left - padding,\n        y: rect.top - padding,\n        width: rect.width + padding * 2,\n        height: rect.height + padding * 2,\n      }\n    : null;\n\n  return (\n    // Sits above the standard portalled surface tier (z 1055) so stray popovers\n    // can't punch through the dim; the anchored callout must set a higher z.\n    // The wrapper ignores pointer events and only the painted dim (the masked\n    // rect) captures them, bubbling to the wrapper's `onClick`. A click inside\n    // the masked-out cut-out isn't painted, so it falls through to the target.\n    <div\n      aria-hidden\n      onClick={onClick}\n      className={cn('tw:pointer-events-none tw:fixed tw:inset-0 tw:z-[1056]', className)}\n    >\n      <svg width=\"100%\" height=\"100%\" className=\"tw:size-full\">\n        <defs>\n          <mask id={maskId}>\n            <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n            {cutout && (\n              <rect\n                x={cutout.x}\n                y={cutout.y}\n                width={cutout.width}\n                height={cutout.height}\n                rx={radius}\n                ry={radius}\n                fill=\"black\"\n              />\n            )}\n          </mask>\n        </defs>\n        <rect\n          x=\"0\"\n          y=\"0\"\n          width=\"100%\"\n          height=\"100%\"\n          mask={`url(#${maskId})`}\n          className=\"tw:pointer-events-auto tw:fill-foreground/50\"\n        />\n      </svg>\n    </div>\n  );\n};\n","import { type RefObject, useLayoutEffect, useState } from 'react';\n\n/** Viewport-relative box of the highlighted target. */\nexport type TargetRect = {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n};\n\n/** Element to track: a CSS selector, a React ref, or nothing (centered/no target). */\nexport type SpotlightTarget = string | RefObject<Element | null> | undefined;\n\nconst resolveElement = (target: SpotlightTarget): Element | null => {\n  if (!target) return null;\n  if (typeof target !== 'string') return target.current;\n  try {\n    return document.querySelector(target);\n  } catch (error) {\n    // An invalid selector throws a DOMException; don't crash the render.\n    console.error(`useTargetRect: invalid target selector \"${target}\"`, error);\n    return null;\n  }\n};\n\n/**\n * Resolves a `target` (CSS selector or React ref) to a live viewport rect and\n * keeps it in sync while `enabled` — re-measuring on resize and scroll so an\n * anchored overlay (e.g. `SpotlightBackdrop` + `Popover`) follows the element.\n * Returns `null` when disabled or the target is absent, so callers can fall\n * back to a centered/full-dim layout.\n */\nexport const useTargetRect = (target: SpotlightTarget, enabled: boolean): TargetRect | null => {\n  const [rect, setRect] = useState<TargetRect | null>(null);\n\n  useLayoutEffect(() => {\n    if (!enabled || !target) {\n      setRect(null);\n      return;\n    }\n\n    let frame = 0;\n    // Cap the lazy-mount poll so a permanently-absent target settles on `null`\n    // instead of spinning a frame forever. ~1s at 60fps is ample for a target\n    // that mounts a tick or two after the overlay opens.\n    let attemptsLeft = 60;\n\n    const same = (a: TargetRect | null, b: TargetRect) => {\n      if (a === null) return false;\n      return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;\n    };\n\n    // Re-resolve on every measure: the target may mount lazily after the overlay\n    // opens, so we poll (rAF) until it appears — up to `attemptsLeft` frames —\n    // then track it on resize/scroll. Until then `rect` stays `null` and the\n    // caller falls back to a centered/full-dim layout. State only updates when\n    // the rect actually changed, avoiding needless re-renders.\n    const measure = () => {\n      const element = resolveElement(target);\n      if (!element) {\n        setRect(null);\n        if (attemptsLeft > 0) {\n          attemptsLeft -= 1;\n          frame = requestAnimationFrame(measure);\n        }\n        return;\n      }\n      const box = element.getBoundingClientRect();\n      const next = { top: box.top, left: box.left, width: box.width, height: box.height };\n      setRect((prev) => (same(prev, next) ? prev : next));\n    };\n\n    // Coalesce scroll/resize bursts to at most one measure per animation frame.\n    const scheduleMeasure = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(measure);\n    };\n\n    measure();\n    window.addEventListener('resize', scheduleMeasure, { passive: true });\n    window.addEventListener('scroll', scheduleMeasure, { capture: true, passive: true });\n\n    return () => {\n      cancelAnimationFrame(frame);\n      window.removeEventListener('resize', scheduleMeasure);\n      window.removeEventListener('scroll', scheduleMeasure, true);\n    };\n  }, [target, enabled]);\n\n  return rect;\n};\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAa,qBAAqB,EAAE,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,cAAqB;CACjG,MAAM,SAAS,MAAM;CAErB,MAAM,SAAS,OACX;EACE,GAAG,KAAK,OAAO;EACf,GAAG,KAAK,MAAM;EACd,OAAO,KAAK,QAAQ,UAAU;EAC9B,QAAQ,KAAK,SAAS,UAAU;CAClC,IACA;CAEJ,OAME,oBAAC,OAAD;EACE,eAAA;EACS;EACT,WAAW,GAAG,0DAA0D,SAAS;EAEjF,UAAA,qBAAC,OAAD;GAAK,OAAM;GAAO,QAAO;GAAO,WAAU;GAA1C,UAAA,CACE,oBAAC,QAAD,EAAA,UACE,qBAAC,QAAD;IAAM,IAAI;IAAV,UAAA,CACE,oBAAC,QAAD;KAAM,GAAE;KAAI,GAAE;KAAI,OAAM;KAAO,QAAO;KAAO,MAAK;IAAS,CAAA,GAC1D,UACC,oBAAC,QAAD;KACE,GAAG,OAAO;KACV,GAAG,OAAO;KACV,OAAO,OAAO;KACd,QAAQ,OAAO;KACf,IAAI;KACJ,IAAI;KACJ,MAAK;IACN,CAAA,CAEC;GACF,CAAA,EAAA,CAAA,GACN,oBAAC,QAAD;IACE,GAAE;IACF,GAAE;IACF,OAAM;IACN,QAAO;IACP,MAAM,QAAQ,OAAO;IACrB,WAAU;GACX,CAAA,CACE;;CACF,CAAA;AAET;;;ACnEA,MAAM,kBAAkB,WAA4C;CAClE,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,OAAO,WAAW,UAAU,OAAO,OAAO;CAC9C,IAAI;EACF,OAAO,SAAS,cAAc,MAAM;CACtC,SAAS,OAAO;EAEd,QAAQ,MAAM,2CAA2C,OAAO,IAAI,KAAK;EACzE,OAAO;CACT;AACF;;;;;;;;AASA,MAAa,iBAAiB,QAAyB,YAAwC;CAC7F,MAAM,CAAC,MAAM,WAAW,SAA4B,IAAI;CAExD,sBAAsB;EACpB,IAAI,CAAC,WAAW,CAAC,QAAQ;GACvB,QAAQ,IAAI;GACZ;EACF;EAEA,IAAI,QAAQ;EAIZ,IAAI,eAAe;EAEnB,MAAM,QAAQ,GAAsB,MAAkB;GACpD,IAAI,MAAM,MAAM,OAAO;GACvB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE;EACvF;EAOA,MAAM,gBAAgB;GACpB,MAAM,UAAU,eAAe,MAAM;GACrC,IAAI,CAAC,SAAS;IACZ,QAAQ,IAAI;IACZ,IAAI,eAAe,GAAG;KACpB,gBAAgB;KAChB,QAAQ,sBAAsB,OAAO;IACvC;IACA;GACF;GACA,MAAM,MAAM,QAAQ,sBAAsB;GAC1C,MAAM,OAAO;IAAE,KAAK,IAAI;IAAK,MAAM,IAAI;IAAM,OAAO,IAAI;IAAO,QAAQ,IAAI;GAAO;GAClF,SAAS,SAAU,KAAK,MAAM,IAAI,IAAI,OAAO,IAAK;EACpD;EAGA,MAAM,wBAAwB;GAC5B,qBAAqB,KAAK;GAC1B,QAAQ,sBAAsB,OAAO;EACvC;EAEA,QAAQ;EACR,OAAO,iBAAiB,UAAU,iBAAiB,EAAE,SAAS,KAAK,CAAC;EACpE,OAAO,iBAAiB,UAAU,iBAAiB;GAAE,SAAS;GAAM,SAAS;EAAK,CAAC;EAEnF,aAAa;GACX,qBAAqB,KAAK;GAC1B,OAAO,oBAAoB,UAAU,eAAe;GACpD,OAAO,oBAAoB,UAAU,iBAAiB,IAAI;EAC5D;CACF,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,OAAO;AACT"}
+{"version":3,"file":"SpotlightBackdrop.js","names":[],"sources":["../../../src/components/SpotlightBackdrop/SpotlightBackdrop.tsx","../../../src/components/SpotlightBackdrop/useTargetRect.ts"],"sourcesContent":["import { type MouseEventHandler, useId } from 'react';\n\nimport { cn } from '../../utils';\n\nimport type { TargetRect } from './useTargetRect';\n\ntype Props = {\n  /** Box to cut out, or `null` to dim everything. */\n  rect: TargetRect | null;\n  /** In px. */\n  padding?: number;\n  /** In px. */\n  radius?: number;\n  className?: string;\n  /** Fires for clicks on the dim only — a click in the cut-out reaches the target. */\n  onClick?: MouseEventHandler<HTMLDivElement>;\n};\n\n/**\n * Full-viewport dim with a spotlight cut-out around `rect`.\n *\n * - Presentational: `rect` from `useTargetRect`, callout via `Popover`.\n * - Tour steps and \"seen\" persistence are app-owned — see the \"Guided tour (recipe)\" story.\n */\nexport const SpotlightBackdrop = ({ rect, padding = 8, radius = 8, className, onClick }: Props) => {\n  const maskId = useId();\n\n  const cutout = rect\n    ? {\n        x: rect.left - padding,\n        y: rect.top - padding,\n        width: rect.width + padding * 2,\n        height: rect.height + padding * 2,\n      }\n    : null;\n\n  return (\n    // - z above the portalled surface tier (1055); the callout must sit higher still.\n    // - Only the painted dim takes pointer events, so the cut-out stays clickable.\n    <div\n      aria-hidden\n      onClick={onClick}\n      className={cn('tw:pointer-events-none tw:fixed tw:inset-0 tw:z-[1056]', className)}\n    >\n      <svg width=\"100%\" height=\"100%\" className=\"tw:size-full\">\n        <defs>\n          <mask id={maskId}>\n            <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n            {cutout && (\n              <rect\n                x={cutout.x}\n                y={cutout.y}\n                width={cutout.width}\n                height={cutout.height}\n                rx={radius}\n                ry={radius}\n                fill=\"black\"\n              />\n            )}\n          </mask>\n        </defs>\n        <rect\n          x=\"0\"\n          y=\"0\"\n          width=\"100%\"\n          height=\"100%\"\n          mask={`url(#${maskId})`}\n          className=\"tw:pointer-events-auto tw:fill-foreground/50\"\n        />\n      </svg>\n    </div>\n  );\n};\n","import { type RefObject, useLayoutEffect, useState } from 'react';\n\n/** Viewport-relative box of the highlighted target. */\nexport type TargetRect = {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n};\n\n/** Element to track: a CSS selector, a React ref, or nothing (centered/no target). */\nexport type SpotlightTarget = string | RefObject<Element | null> | undefined;\n\nconst resolveElement = (target: SpotlightTarget): Element | null => {\n  if (!target) return null;\n  if (typeof target !== 'string') return target.current;\n  try {\n    return document.querySelector(target);\n  } catch (error) {\n    // An invalid selector throws a DOMException; don't crash the render.\n    console.error(`useTargetRect: invalid target selector \"${target}\"`, error);\n    return null;\n  }\n};\n\n/**\n * Resolves a `target` (CSS selector or React ref) to a live viewport rect and\n * keeps it in sync while `enabled` — re-measuring on resize and scroll so an\n * anchored overlay (e.g. `SpotlightBackdrop` + `Popover`) follows the element.\n * Returns `null` when disabled or the target is absent, so callers can fall\n * back to a centered/full-dim layout.\n */\nexport const useTargetRect = (target: SpotlightTarget, enabled: boolean): TargetRect | null => {\n  const [rect, setRect] = useState<TargetRect | null>(null);\n\n  useLayoutEffect(() => {\n    if (!enabled || !target) {\n      setRect(null);\n      return;\n    }\n\n    let frame = 0;\n    // Cap the lazy-mount poll so a permanently-absent target settles on `null`\n    // instead of spinning a frame forever. ~1s at 60fps is ample for a target\n    // that mounts a tick or two after the overlay opens.\n    let attemptsLeft = 60;\n\n    const same = (a: TargetRect | null, b: TargetRect) => {\n      if (a === null) return false;\n      return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;\n    };\n\n    // Re-resolve on every measure: the target may mount lazily after the overlay\n    // opens, so we poll (rAF) until it appears — up to `attemptsLeft` frames —\n    // then track it on resize/scroll. Until then `rect` stays `null` and the\n    // caller falls back to a centered/full-dim layout. State only updates when\n    // the rect actually changed, avoiding needless re-renders.\n    const measure = () => {\n      const element = resolveElement(target);\n      if (!element) {\n        setRect(null);\n        if (attemptsLeft > 0) {\n          attemptsLeft -= 1;\n          frame = requestAnimationFrame(measure);\n        }\n        return;\n      }\n      const box = element.getBoundingClientRect();\n      const next = { top: box.top, left: box.left, width: box.width, height: box.height };\n      setRect((prev) => (same(prev, next) ? prev : next));\n    };\n\n    // Coalesce scroll/resize bursts to at most one measure per animation frame.\n    const scheduleMeasure = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(measure);\n    };\n\n    measure();\n    window.addEventListener('resize', scheduleMeasure, { passive: true });\n    window.addEventListener('scroll', scheduleMeasure, { capture: true, passive: true });\n\n    return () => {\n      cancelAnimationFrame(frame);\n      window.removeEventListener('resize', scheduleMeasure);\n      window.removeEventListener('scroll', scheduleMeasure, true);\n    };\n  }, [target, enabled]);\n\n  return rect;\n};\n"],"mappings":";;;;;;;;;;AAwBA,MAAa,qBAAqB,EAAE,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,cAAqB;CACjG,MAAM,SAAS,MAAM;CAErB,MAAM,SAAS,OACX;EACE,GAAG,KAAK,OAAO;EACf,GAAG,KAAK,MAAM;EACd,OAAO,KAAK,QAAQ,UAAU;EAC9B,QAAQ,KAAK,SAAS,UAAU;CAClC,IACA;CAEJ,OAGE,oBAAC,OAAD;EACE,eAAA;EACS;EACT,WAAW,GAAG,0DAA0D,SAAS;EAEjF,UAAA,qBAAC,OAAD;GAAK,OAAM;GAAO,QAAO;GAAO,WAAU;GAA1C,UAAA,CACE,oBAAC,QAAD,EAAA,UACE,qBAAC,QAAD;IAAM,IAAI;IAAV,UAAA,CACE,oBAAC,QAAD;KAAM,GAAE;KAAI,GAAE;KAAI,OAAM;KAAO,QAAO;KAAO,MAAK;IAAS,CAAA,GAC1D,UACC,oBAAC,QAAD;KACE,GAAG,OAAO;KACV,GAAG,OAAO;KACV,OAAO,OAAO;KACd,QAAQ,OAAO;KACf,IAAI;KACJ,IAAI;KACJ,MAAK;IACN,CAAA,CAEC;GACF,CAAA,EAAA,CAAA,GACN,oBAAC,QAAD;IACE,GAAE;IACF,GAAE;IACF,OAAM;IACN,QAAO;IACP,MAAM,QAAQ,OAAO;IACrB,WAAU;GACX,CAAA,CACE;;CACF,CAAA;AAET;;;AC3DA,MAAM,kBAAkB,WAA4C;CAClE,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,OAAO,WAAW,UAAU,OAAO,OAAO;CAC9C,IAAI;EACF,OAAO,SAAS,cAAc,MAAM;CACtC,SAAS,OAAO;EAEd,QAAQ,MAAM,2CAA2C,OAAO,IAAI,KAAK;EACzE,OAAO;CACT;AACF;;;;;;;;AASA,MAAa,iBAAiB,QAAyB,YAAwC;CAC7F,MAAM,CAAC,MAAM,WAAW,SAA4B,IAAI;CAExD,sBAAsB;EACpB,IAAI,CAAC,WAAW,CAAC,QAAQ;GACvB,QAAQ,IAAI;GACZ;EACF;EAEA,IAAI,QAAQ;EAIZ,IAAI,eAAe;EAEnB,MAAM,QAAQ,GAAsB,MAAkB;GACpD,IAAI,MAAM,MAAM,OAAO;GACvB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE;EACvF;EAOA,MAAM,gBAAgB;GACpB,MAAM,UAAU,eAAe,MAAM;GACrC,IAAI,CAAC,SAAS;IACZ,QAAQ,IAAI;IACZ,IAAI,eAAe,GAAG;KACpB,gBAAgB;KAChB,QAAQ,sBAAsB,OAAO;IACvC;IACA;GACF;GACA,MAAM,MAAM,QAAQ,sBAAsB;GAC1C,MAAM,OAAO;IAAE,KAAK,IAAI;IAAK,MAAM,IAAI;IAAM,OAAO,IAAI;IAAO,QAAQ,IAAI;GAAO;GAClF,SAAS,SAAU,KAAK,MAAM,IAAI,IAAI,OAAO,IAAK;EACpD;EAGA,MAAM,wBAAwB;GAC5B,qBAAqB,KAAK;GAC1B,QAAQ,sBAAsB,OAAO;EACvC;EAEA,QAAQ;EACR,OAAO,iBAAiB,UAAU,iBAAiB,EAAE,SAAS,KAAK,CAAC;EACpE,OAAO,iBAAiB,UAAU,iBAAiB;GAAE,SAAS;GAAM,SAAS;EAAK,CAAC;EAEnF,aAAa;GACX,qBAAqB,KAAK;GAC1B,OAAO,oBAAoB,UAAU,eAAe;GACpD,OAAO,oBAAoB,UAAU,iBAAiB,IAAI;EAC5D;CACF,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,OAAO;AACT"}