@keboola/design 10.1.0 → 11.0.0

package/dist/chunk-HPMYYGP7.js

@@ -0,0 +1,134 @@
+import { useControllableState } from './chunk-WKAUEL6I.js';
+import { InputGroup } from './chunk-SC275NHZ.js';
+import { X } from './chunk-RQVK4IYC.js';
+import { createChangeInputEvent, createPrefixedString } from './chunk-SWQFYNYG.js';
+import { mergeRefs } from './chunk-3W27OLK5.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { useRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/blocks/TextInput/utils.ts
+var genInputTestId = (prefix = "") => {
+  const ps = createPrefixedString(prefix);
+  return {
+    toString: () => prefix,
+    inputWrapper: ps`input-wrapper`,
+    input: ps`input`,
+    clearButton: ps`clear-button`
+  };
+};
+var sanitizeTextInputValue = (value) => {
+  if (typeof value === "string" && value.trim() === "") return "";
+  return value;
+};
+var TextInput = ({
+  ref: forwardedRef,
+  state = "default",
+  sizing = "default",
+  className,
+  prefix = null,
+  rightSuffix = null,
+  rightSuffixVariant = "default",
+  leftSuffix = null,
+  allowClear = false,
+  onClear,
+  disabled = false,
+  testId: prefixTestId = "",
+  autoFocus = false,
+  id,
+  name,
+  variant,
+  readOnly,
+  type = "text",
+  focusVariant = "default",
+  onChange,
+  onBlur,
+  onValueChange,
+  onValueBlur,
+  value: valueProp,
+  defaultValue,
+  ...inputProps
+}) => {
+  const inputRef = useRef(null);
+  const [value, setValue] = useControllableState({
+    // `undefined` stays uncontrolled; any provided value (incl. `null`) is controlled and coerced
+    // to a string. Whitespace-only input collapses to '' via `sanitizeTextInputValue`.
+    prop: valueProp === void 0 ? void 0 : sanitizeTextInputValue(valueProp) ?? "",
+    defaultProp: sanitizeTextInputValue(defaultValue) ?? "",
+    onChange: onValueChange
+  });
+  const testId = genInputTestId(prefixTestId);
+  const isClearButtonVisible = !!value && !disabled && !readOnly || !!onClear;
+  const handleChange = (event) => {
+    setValue(event.target.value);
+    onChange?.(event);
+  };
+  const handleBlur = (event) => {
+    onValueBlur?.(event.target.value);
+    onBlur?.(event);
+  };
+  const handleClear = () => {
+    if (inputRef.current === null) return;
+    inputRef.current.value = "";
+    inputRef.current.focus();
+    onClear?.();
+    handleChange(createChangeInputEvent(inputRef.current));
+  };
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      state,
+      variant,
+      sizing,
+      focusVariant,
+      className,
+      "data-testid": testId.inputWrapper,
+      children: [
+        prefix && /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-start", children: prefix }),
+        /* @__PURE__ */ jsx(
+          InputGroup.Input,
+          {
+            ...inputProps,
+            value,
+            autoFocus,
+            type,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            ref: mergeRefs(forwardedRef ?? null, inputRef),
+            disabled,
+            id,
+            name,
+            readOnly,
+            "data-testid": testId.input
+          }
+        ),
+        (leftSuffix || allowClear || rightSuffix) && /* @__PURE__ */ jsxs(InputGroup.Addon, { align: "inline-end", children: [
+          leftSuffix,
+          allowClear && isClearButtonVisible && /* @__PURE__ */ jsx(
+            InputGroup.Button,
+            {
+              "aria-label": "Clear",
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: handleClear,
+              "data-testid": testId.clearButton,
+              children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+            }
+          ),
+          rightSuffix && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn({
+                "tw:whitespace-nowrap tw:bg-muted tw:px-4 tw:-mr-4 tw:py-2.5": rightSuffixVariant === "addon"
+              }),
+              children: rightSuffix
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+export { TextInput };
+//# sourceMappingURL=chunk-HPMYYGP7.js.map
+//# sourceMappingURL=chunk-HPMYYGP7.js.map

package/dist/chunk-HPMYYGP7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/TextInput/utils.ts","../src/blocks/TextInput/TextInput.tsx"],"names":[],"mappings":"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","file":"chunk-HPMYYGP7.js","sourcesContent":["import { createPrefixedString } from '../../utils';\n\nexport const genInputTestId = (prefix: string = '') => {\n  const ps = createPrefixedString(prefix);\n  return {\n    toString: () => prefix,\n    inputWrapper: ps`input-wrapper`,\n    input: ps`input`,\n    clearButton: ps`clear-button`,\n  };\n};\n","import { useRef } from 'react';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  ComponentRef,\n  FocusEventHandler,\n  MouseEventHandler,\n  ReactNode,\n} from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { X } from '../../icons';\nimport { cn, createChangeInputEvent, mergeRefs } from '../../utils';\n\nimport { genInputTestId } from './utils';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'sizing' | 'state'\n>;\n\ntype OwnProps = {\n  prefix?: ReactNode;\n  rightSuffix?: ReactNode;\n  rightSuffixVariant?: 'addon' | 'default';\n  leftSuffix?: ReactNode;\n  allowClear?: boolean;\n  onClear?: () => void;\n  testId?: string;\n  value?: string | null;\n  defaultValue?: string | null;\n  /** Called with the unwrapped string value on every change. For the raw event use `onChange`. */\n  onValueChange?: (value: string) => void;\n  /** Called with the unwrapped string value on blur. For the raw event use `onBlur`. */\n  onValueBlur?: (value: string) => void;\n  type?: 'text' | 'email' | 'password' | 'datetime-local' | 'date';\n};\n\n/**\n * Props for `TextInput`. Combines `InputGroup` chrome (variant / sizing / state / focusVariant) with\n * input-specific slots (`prefix`, `leftSuffix`, `rightSuffix`, `allowClear`) and a string-typed\n * `value` / `defaultValue` plus convenience `onValueChange` / `onValueBlur` callbacks. `null` /\n * `undefined` are coerced to empty strings.\n */\nexport type Props = InputGroupProps &\n  OwnProps &\n  Omit<ComponentProps<'input'>, 'prefix' | 'value' | 'defaultValue' | 'type' | 'accept' | 'step'>;\n\nconst sanitizeTextInputValue = (value: string | null | undefined) => {\n  if (typeof value === 'string' && value.trim() === '') return '';\n  return value;\n};\n\n/**\n * Standard text input with a string-only API, built on `InputGroup` chrome — addons, clear button,\n * sizing, focus variants. The default choice for a bare text input.\n *\n * **When to use:** any plain text / email / password / date-input field outside `useAppForm`. Pair with\n * `onValueChange` instead of unwrapping `event.target.value` from `onChange`.\n * **When NOT to use:** for fields inside a labelled group use `FormGroup.TextInput`; for forms with\n * validation use `useAppForm` + `field.TextField`; for search use `SearchInput`.\n * **Composition:** wrap in a `FormGroup` for shared error / help-text state, or render directly inside\n * page layouts. Chrome resolves from the active brand automatically: a modern brand always renders argo\n * (any `variant` is ignored), while `variant` only tunes the legacy-brand chrome.\n */\nexport const TextInput = ({\n  ref: forwardedRef,\n  state = 'default',\n  sizing = 'default',\n  className,\n  prefix = null,\n  rightSuffix = null,\n  rightSuffixVariant = 'default',\n  leftSuffix = null,\n  allowClear = false,\n  onClear,\n  disabled = false,\n  testId: prefixTestId = '',\n  autoFocus = false,\n  id,\n  name,\n  variant,\n  readOnly,\n  type = 'text',\n  focusVariant = 'default',\n  onChange,\n  onBlur,\n  onValueChange,\n  onValueBlur,\n  value: valueProp,\n  defaultValue,\n  ...inputProps\n}: Props) => {\n  const inputRef = useRef<ComponentRef<'input'>>(null);\n\n  const [value, setValue] = useControllableState<string>({\n    // `undefined` stays uncontrolled; any provided value (incl. `null`) is controlled and coerced\n    // to a string. Whitespace-only input collapses to '' via `sanitizeTextInputValue`.\n    prop: valueProp === undefined ? undefined : (sanitizeTextInputValue(valueProp) ?? ''),\n    defaultProp: sanitizeTextInputValue(defaultValue) ?? '',\n    onChange: onValueChange,\n  });\n\n  const testId = genInputTestId(prefixTestId);\n  const isClearButtonVisible = (!!value && !disabled && !readOnly) || !!onClear;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    onValueBlur?.(event.target.value);\n    onBlur?.(event);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n    if (inputRef.current === null) return;\n    inputRef.current.value = ''; // keep the DOM node in sync before firing the synthetic change\n    inputRef.current.focus();\n    onClear?.();\n    handleChange(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      data-testid={testId.inputWrapper}\n    >\n      {prefix && <InputGroup.Addon align=\"inline-start\">{prefix}</InputGroup.Addon>}\n\n      <InputGroup.Input\n        {...inputProps}\n        value={value}\n        autoFocus={autoFocus}\n        type={type}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        ref={mergeRefs(forwardedRef ?? null, inputRef)}\n        disabled={disabled}\n        id={id}\n        name={name}\n        readOnly={readOnly}\n        data-testid={testId.input}\n      />\n\n      {(leftSuffix || allowClear || rightSuffix) && (\n        <InputGroup.Addon align=\"inline-end\">\n          {leftSuffix}\n          {allowClear && isClearButtonVisible && (\n            <InputGroup.Button\n              aria-label=\"Clear\"\n              onMouseDown={(e) => e.preventDefault()}\n              onClick={handleClear}\n              data-testid={testId.clearButton}\n            >\n              <X className=\"tw:size-4\" />\n            </InputGroup.Button>\n          )}\n          {rightSuffix && (\n            <div\n              className={cn({\n                'tw:whitespace-nowrap tw:bg-muted tw:px-4 tw:-mr-4 tw:py-2.5':\n                  rightSuffixVariant === 'addon',\n              })}\n            >\n              {rightSuffix}\n            </div>\n          )}\n        </InputGroup.Addon>\n      )}\n    </InputGroup>\n  );\n};\n"]}

package/dist/chunk-I2UCOD45.js

@@ -0,0 +1,197 @@
+import { argoVariants } from './chunk-IXAYNBOY.js';
+import { TooltipProvider, Tooltip } from './chunk-SWQFYNYG.js';
+import { mergeRefs } from './chunk-3W27OLK5.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { useState, useRef, useCallback } from 'react';
+import { Root, Track, Range, Thumb } from '@radix-ui/react-slider';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var useInteracting = () => {
+  const [isInteracting, setIsInteracting] = useState(false);
+  const cleanupRef = useRef(null);
+  const setRef = useCallback((element) => {
+    cleanupRef.current?.();
+    cleanupRef.current = null;
+    if (!element) return;
+    let hover = false;
+    let focus = false;
+    let press = false;
+    const recompute = () => setIsInteracting(hover || focus || press);
+    const handleEnter = () => {
+      hover = true;
+      recompute();
+    };
+    const handleLeave = () => {
+      hover = false;
+      recompute();
+    };
+    const handleFocus = () => {
+      focus = true;
+      recompute();
+    };
+    const handleBlur = () => {
+      focus = false;
+      recompute();
+    };
+    const handleDown = () => {
+      press = true;
+      recompute();
+    };
+    const handleRelease = () => {
+      press = false;
+      recompute();
+    };
+    element.addEventListener("pointerenter", handleEnter);
+    element.addEventListener("pointerleave", handleLeave);
+    element.addEventListener("focus", handleFocus);
+    element.addEventListener("blur", handleBlur);
+    element.addEventListener("pointerdown", handleDown);
+    element.addEventListener("pointerup", handleRelease);
+    element.addEventListener("pointercancel", handleRelease);
+    cleanupRef.current = () => {
+      element.removeEventListener("pointerenter", handleEnter);
+      element.removeEventListener("pointerleave", handleLeave);
+      element.removeEventListener("focus", handleFocus);
+      element.removeEventListener("blur", handleBlur);
+      element.removeEventListener("pointerdown", handleDown);
+      element.removeEventListener("pointerup", handleRelease);
+      element.removeEventListener("pointercancel", handleRelease);
+    };
+  }, []);
+  return [isInteracting, setRef];
+};
+var SliderThumb = ({
+  ref: forwardedRef,
+  className,
+  tooltip,
+  tooltipSide = "top",
+  ...props
+}) => {
+  const [isInteracting, interactingRef] = useInteracting();
+  const thumb = /* @__PURE__ */ jsx(
+    Thumb,
+    {
+      ref: mergeRefs(forwardedRef ?? null, interactingRef),
+      className: cn(
+        argoVariants({ variant: "outline", size: "icon-sm" }),
+        // layout
+        "tw:p-0",
+        "tw:active:opacity-100",
+        "tw:block",
+        "tw:size-4",
+        "tw:rounded-full",
+        // cursors
+        "tw:data-[disabled]:cursor-not-allowed",
+        "tw:[&:not([data-disabled])]:cursor-pointer",
+        className
+      ),
+      ...props
+    }
+  );
+  if (tooltip == null) return thumb;
+  return /* @__PURE__ */ jsxs(Tooltip.Root, { open: isInteracting, children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: thumb }),
+    /* @__PURE__ */ jsx(Tooltip.Content, { variant: "action", placement: tooltipSide, children: tooltip })
+  ] });
+};
+var SliderTrack = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(
+  Track,
+  {
+    ref,
+    className: cn(
+      // layout
+      "tw:relative",
+      "tw:grow",
+      "tw:w-full",
+      "tw:h-1.5",
+      "tw:overflow-hidden",
+      // style
+      "tw:rounded-full",
+      "tw:bg-muted",
+      // vertical orientation
+      "tw:data-[orientation=vertical]:h-full",
+      "tw:data-[orientation=vertical]:w-1.5"
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      Range,
+      {
+        className: cn(
+          // layout
+          "tw:absolute",
+          "tw:h-full",
+          // style
+          "tw:bg-primary",
+          // vertical orientation
+          "tw:data-[orientation=vertical]:w-full",
+          className
+        )
+      }
+    )
+  }
+);
+var Slider = ({
+  ref,
+  className,
+  value,
+  defaultValue,
+  min = 0,
+  max = 100,
+  onValueChange,
+  thumbTooltip,
+  thumbTooltipSide,
+  rangeClassName,
+  ...rest
+}) => {
+  const isControlled = Array.isArray(value);
+  const [internalValues, setInternalValues] = useState(() => {
+    if (isControlled) return value;
+    if (Array.isArray(defaultValue)) return defaultValue;
+    return [min];
+  });
+  const liveValues = isControlled ? value : internalValues;
+  const handleValueChange = (next) => {
+    if (!isControlled) setInternalValues(next);
+    onValueChange?.(next);
+  };
+  const body = /* @__PURE__ */ jsxs(
+    Root,
+    {
+      ref,
+      value: liveValues,
+      min,
+      max,
+      onValueChange: handleValueChange,
+      className: cn(
+        "tw:relative",
+        "tw:flex",
+        "tw:items-center",
+        "tw:w-full",
+        "tw:touch-none",
+        "tw:select-none",
+        "tw:data-[orientation=vertical]:h-full",
+        "tw:data-[orientation=vertical]:w-auto",
+        "tw:data-[orientation=vertical]:flex-col",
+        "tw:data-[disabled]:opacity-50",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(SliderTrack, { className: rangeClassName }),
+        liveValues.map((thumbValue, index) => /* @__PURE__ */ jsx(
+          SliderThumb,
+          {
+            tooltip: thumbTooltip?.(thumbValue, index),
+            tooltipSide: thumbTooltipSide
+          },
+          index
+        ))
+      ]
+    }
+  );
+  return thumbTooltip ? /* @__PURE__ */ jsx(TooltipProvider, { children: body }) : body;
+};
+
+export { Slider };
+//# sourceMappingURL=chunk-I2UCOD45.js.map
+//# sourceMappingURL=chunk-I2UCOD45.js.map

package/dist/chunk-I2UCOD45.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slider/useInteracting.ts","../src/components/Slider/SliderThumb.tsx","../src/components/Slider/SliderTrack.tsx","../src/components/Slider/Slider.tsx"],"names":["RadixThumb","jsx","RadixTrack","RadixRange","useState","jsxs"],"mappings":"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","file":"chunk-I2UCOD45.js","sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\ntype InteractingRef = (element: HTMLElement | null) => void;\n\nexport const useInteracting = (): readonly [boolean, InteractingRef] => {\n  const [isInteracting, setIsInteracting] = useState(false);\n  const cleanupRef = useRef<(() => void) | null>(null);\n\n  const setRef = useCallback<InteractingRef>((element) => {\n    cleanupRef.current?.();\n    cleanupRef.current = null;\n    if (!element) return;\n\n    let hover = false;\n    let focus = false;\n    let press = false;\n    const recompute = () => setIsInteracting(hover || focus || press);\n\n    const handleEnter = () => {\n      hover = true;\n      recompute();\n    };\n    const handleLeave = () => {\n      hover = false;\n      recompute();\n    };\n    const handleFocus = () => {\n      focus = true;\n      recompute();\n    };\n    const handleBlur = () => {\n      focus = false;\n      recompute();\n    };\n    const handleDown = () => {\n      press = true;\n      recompute();\n    };\n    const handleRelease = () => {\n      press = false;\n      recompute();\n    };\n\n    element.addEventListener('pointerenter', handleEnter);\n    element.addEventListener('pointerleave', handleLeave);\n    element.addEventListener('focus', handleFocus);\n    element.addEventListener('blur', handleBlur);\n    element.addEventListener('pointerdown', handleDown);\n    element.addEventListener('pointerup', handleRelease);\n    element.addEventListener('pointercancel', handleRelease);\n\n    cleanupRef.current = () => {\n      element.removeEventListener('pointerenter', handleEnter);\n      element.removeEventListener('pointerleave', handleLeave);\n      element.removeEventListener('focus', handleFocus);\n      element.removeEventListener('blur', handleBlur);\n      element.removeEventListener('pointerdown', handleDown);\n      element.removeEventListener('pointerup', handleRelease);\n      element.removeEventListener('pointercancel', handleRelease);\n    };\n  }, []);\n\n  return [isInteracting, setRef] as const;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Thumb as RadixThumb } from '@radix-ui/react-slider';\n\nimport { cn, mergeRefs } from '../../utils';\nimport { argoVariants } from '../Button';\nimport { Tooltip } from '../Tooltip';\n\nimport { useInteracting } from './useInteracting';\n\ntype Props = ComponentProps<typeof RadixThumb> & {\n  tooltip?: ReactNode;\n  tooltipSide?: ComponentProps<typeof Tooltip.Content>['placement'];\n};\n\nexport const SliderThumb = ({\n  ref: forwardedRef,\n  className,\n  tooltip,\n  tooltipSide = 'top',\n  ...props\n}: Props) => {\n  const [isInteracting, interactingRef] = useInteracting();\n\n  const thumb = (\n    <RadixThumb\n      ref={mergeRefs(forwardedRef ?? null, interactingRef)}\n      className={cn(\n        argoVariants({ variant: 'outline', size: 'icon-sm' }),\n\n        // layout\n        'tw:p-0',\n        'tw:active:opacity-100',\n        'tw:block',\n        'tw:size-4',\n        'tw:rounded-full',\n\n        // cursors\n        'tw:data-[disabled]:cursor-not-allowed',\n        'tw:[&:not([data-disabled])]:cursor-pointer',\n\n        className,\n      )}\n      {...props}\n    />\n  );\n\n  if (tooltip == null) return thumb;\n\n  return (\n    <Tooltip.Root open={isInteracting}>\n      <Tooltip.Trigger asChild>{thumb}</Tooltip.Trigger>\n      <Tooltip.Content variant=\"action\" placement={tooltipSide}>\n        {tooltip}\n      </Tooltip.Content>\n    </Tooltip.Root>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Range as RadixRange, Track as RadixTrack } from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof RadixTrack> & { rangeClassName?: string };\n\nexport const SliderTrack = ({ ref, className, ...props }: Props) => (\n  <RadixTrack\n    ref={ref}\n    className={cn(\n      // layout\n      'tw:relative',\n      'tw:grow',\n      'tw:w-full',\n      'tw:h-1.5',\n      'tw:overflow-hidden',\n\n      // style\n      'tw:rounded-full',\n      'tw:bg-muted',\n\n      // vertical orientation\n      'tw:data-[orientation=vertical]:h-full',\n      'tw:data-[orientation=vertical]:w-1.5',\n    )}\n    {...props}\n  >\n    <RadixRange\n      className={cn(\n        // layout\n        'tw:absolute',\n        'tw:h-full',\n\n        // style\n        'tw:bg-primary',\n\n        // vertical orientation\n        'tw:data-[orientation=vertical]:w-full',\n\n        className,\n      )}\n    />\n  </RadixTrack>\n);\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Root } from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils';\nimport { TooltipProvider } from '../Tooltip';\n\nimport { SliderThumb } from './SliderThumb';\nimport { SliderTrack } from './SliderTrack';\n\nexport type ThumbTooltipFn = (value: number, index: number) => ReactNode;\n\ntype Props = ComponentProps<typeof Root> & {\n  thumbTooltip?: ThumbTooltipFn;\n  thumbTooltipSide?: ComponentProps<typeof SliderThumb>['tooltipSide'];\n  rangeClassName?: string;\n};\n\nexport const Slider = ({\n  ref,\n  className,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  onValueChange,\n  thumbTooltip,\n  thumbTooltipSide,\n  rangeClassName,\n  ...rest\n}: Props) => {\n  const isControlled = Array.isArray(value);\n\n  const [internalValues, setInternalValues] = useState<number[]>(() => {\n    if (isControlled) return value;\n    if (Array.isArray(defaultValue)) return defaultValue;\n    return [min];\n  });\n\n  const liveValues = isControlled ? value : internalValues;\n\n  const handleValueChange = (next: number[]) => {\n    if (!isControlled) setInternalValues(next);\n    onValueChange?.(next);\n  };\n\n  const body = (\n    <Root\n      ref={ref}\n      value={liveValues}\n      min={min}\n      max={max}\n      onValueChange={handleValueChange}\n      className={cn(\n        'tw:relative',\n        'tw:flex',\n        'tw:items-center',\n        'tw:w-full',\n\n        'tw:touch-none',\n        'tw:select-none',\n\n        'tw:data-[orientation=vertical]:h-full',\n        'tw:data-[orientation=vertical]:w-auto',\n        'tw:data-[orientation=vertical]:flex-col',\n\n        'tw:data-[disabled]:opacity-50',\n        className,\n      )}\n      {...rest}\n    >\n      <SliderTrack className={rangeClassName} />\n      {liveValues.map((thumbValue, index) => (\n        <SliderThumb\n          // oxlint-disable-next-line react/no-array-index-key\n          key={index}\n          tooltip={thumbTooltip?.(thumbValue, index)}\n          tooltipSide={thumbTooltipSide}\n        />\n      ))}\n    </Root>\n  );\n\n  return thumbTooltip ? <TooltipProvider>{body}</TooltipProvider> : body;\n};\n"]}

package/dist/chunk-IEGDZUVM.js

@@ -0,0 +1,75 @@
+import { useRef, useState, useLayoutEffect, useMemo } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/hooks/useAutosizeInput.tsx
+var SIZER_STYLE = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  visibility: "hidden",
+  height: 0,
+  overflow: "scroll",
+  whiteSpace: "pre"
+};
+var CARET_BUFFER_PX = 2;
+var FONT_PROPERTIES = [
+  "fontSize",
+  "fontFamily",
+  "fontWeight",
+  "fontStyle",
+  "letterSpacing",
+  "textTransform"
+];
+function syncFontStyles(source, ...targets) {
+  const computed = window.getComputedStyle(source);
+  for (const target of targets) {
+    if (!target) continue;
+    for (const prop of FONT_PROPERTIES) {
+      target.style[prop] = computed[prop];
+    }
+  }
+}
+function useAutosizeInput({
+  value = "",
+  placeholder,
+  minWidth = 1
+}) {
+  const inputRef = useRef(null);
+  const [sizerNode, setSizerNode] = useState(null);
+  const [placeholderSizerNode, setPlaceholderSizerNode] = useState(null);
+  const [width, setWidth] = useState(minWidth);
+  useLayoutEffect(() => {
+    if (inputRef.current) {
+      syncFontStyles(inputRef.current, sizerNode, placeholderSizerNode);
+    }
+  }, [sizerNode, placeholderSizerNode]);
+  useLayoutEffect(() => {
+    if (!sizerNode) return;
+    let next = sizerNode.scrollWidth;
+    if (placeholderSizerNode) {
+      next = Math.max(next, placeholderSizerNode.scrollWidth);
+    }
+    setWidth(Math.max(next + CARET_BUFFER_PX, minWidth));
+  }, [value, placeholder, minWidth, sizerNode, placeholderSizerNode]);
+  const inputStyle = useMemo(
+    () => ({ width, boxSizing: "content-box", flex: "none" }),
+    [width]
+  );
+  const sizerElement = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: setSizerNode, "data-slot": "autosize-sizer", style: SIZER_STYLE, children: value }),
+    placeholder && /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: setPlaceholderSizerNode,
+        "data-slot": "autosize-placeholder-sizer",
+        style: SIZER_STYLE,
+        children: placeholder
+      }
+    )
+  ] });
+  return { inputRef, inputStyle, sizerElement };
+}
+
+export { useAutosizeInput };
+//# sourceMappingURL=chunk-IEGDZUVM.js.map
+//# sourceMappingURL=chunk-IEGDZUVM.js.map

package/dist/chunk-IEGDZUVM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useAutosizeInput.tsx"],"names":[],"mappings":"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","file":"chunk-IEGDZUVM.js","sourcesContent":["import {\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nconst SIZER_STYLE = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  visibility: 'hidden',\n  height: 0,\n  overflow: 'scroll',\n  whiteSpace: 'pre',\n} satisfies CSSProperties;\n\nconst CARET_BUFFER_PX = 2;\n\nconst FONT_PROPERTIES = [\n  'fontSize',\n  'fontFamily',\n  'fontWeight',\n  'fontStyle',\n  'letterSpacing',\n  'textTransform',\n] as const;\n\nfunction syncFontStyles(source: HTMLElement, ...targets: (HTMLElement | null)[]) {\n  const computed = window.getComputedStyle(source);\n  for (const target of targets) {\n    if (!target) continue;\n    for (const prop of FONT_PROPERTIES) {\n      target.style[prop] = computed[prop];\n    }\n  }\n}\n\nexport type UseAutosizeInputOptions = {\n  value?: string;\n  placeholder?: string;\n  minWidth?: number;\n};\n\nexport type UseAutosizeInputReturn = {\n  inputRef: RefObject<HTMLInputElement | null>;\n  inputStyle: CSSProperties;\n  sizerElement: ReactNode;\n};\n\n/**\n * Render `sizerElement` inside a positioned ancestor (e.g. `position: relative`,\n * `inline-flex`, or `InputGroup`) so the absolutely-positioned measurement spans\n * don't anchor to the viewport.\n */\nexport function useAutosizeInput({\n  value = '',\n  placeholder,\n  minWidth = 1,\n}: UseAutosizeInputOptions): UseAutosizeInputReturn {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [sizerNode, setSizerNode] = useState<HTMLSpanElement | null>(null);\n  const [placeholderSizerNode, setPlaceholderSizerNode] = useState<HTMLSpanElement | null>(null);\n  const [width, setWidth] = useState(minWidth);\n\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      syncFontStyles(inputRef.current, sizerNode, placeholderSizerNode);\n    }\n  }, [sizerNode, placeholderSizerNode]);\n\n  useLayoutEffect(() => {\n    if (!sizerNode) return;\n    let next = sizerNode.scrollWidth;\n    if (placeholderSizerNode) {\n      next = Math.max(next, placeholderSizerNode.scrollWidth);\n    }\n    setWidth(Math.max(next + CARET_BUFFER_PX, minWidth));\n  }, [value, placeholder, minWidth, sizerNode, placeholderSizerNode]);\n\n  const inputStyle = useMemo<CSSProperties>(\n    () => ({ width, boxSizing: 'content-box', flex: 'none' }),\n    [width],\n  );\n\n  const sizerElement = (\n    <>\n      <span ref={setSizerNode} data-slot=\"autosize-sizer\" style={SIZER_STYLE}>\n        {value}\n      </span>\n      {placeholder && (\n        <span\n          ref={setPlaceholderSizerNode}\n          data-slot=\"autosize-placeholder-sizer\"\n          style={SIZER_STYLE}\n        >\n          {placeholder}\n        </span>\n      )}\n    </>\n  );\n\n  return { inputRef, inputStyle, sizerElement };\n}\n"]}

package/dist/chunk-IIS7INHF.js

@@ -0,0 +1,47 @@
+import { THEME_ATTRIBUTE, BRAND_ATTRIBUTE } from './chunk-KR7NXXHC.js';
+import { DEFAULT_BRAND_ID, DEFAULT_COLOR_SCHEME } from './chunk-WETKNYZX.js';
+import { useSyncExternalStore } from 'react';
+
+var DEFAULT_ATTRIBUTES = {
+  cacheKey: `${DEFAULT_COLOR_SCHEME}:${DEFAULT_BRAND_ID}`,
+  scheme: DEFAULT_COLOR_SCHEME,
+  brandId: DEFAULT_BRAND_ID
+};
+var snapshot = DEFAULT_ATTRIBUTES;
+var readThemeAttributes = () => {
+  if (typeof document === "undefined") return DEFAULT_ATTRIBUTES;
+  const root = document.documentElement;
+  const theme = root.getAttribute(THEME_ATTRIBUTE);
+  const scheme = theme === "dark" || theme === "light" ? theme : DEFAULT_COLOR_SCHEME;
+  const brandId = root.getAttribute(BRAND_ATTRIBUTE) ?? DEFAULT_BRAND_ID;
+  const cacheKey = `${scheme}:${brandId}`;
+  if (cacheKey !== snapshot.cacheKey) snapshot = { cacheKey, scheme, brandId };
+  return snapshot;
+};
+var subscribe = (onChange) => {
+  if (typeof document === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: [THEME_ATTRIBUTE, BRAND_ATTRIBUTE]
+  });
+  return () => observer.disconnect();
+};
+var getServerSnapshot = () => DEFAULT_ATTRIBUTES;
+var useThemeAttributes = () => useSyncExternalStore(subscribe, readThemeAttributes, getServerSnapshot);
+
+// src/utils/themeTokens.ts
+var format = (channels, alpha) => alpha === void 0 ? `rgb(${channels})` : `rgb(${channels} / ${alpha})`;
+var resolveToken = (token, fallbackChannels, alpha) => {
+  const channels = typeof document === "undefined" ? fallbackChannels : getComputedStyle(document.documentElement).getPropertyValue(`--${token}`).trim() || fallbackChannels;
+  return format(channels, alpha);
+};
+var createTokenResolver = () => {
+  const computed = typeof document === "undefined" ? null : getComputedStyle(document.documentElement);
+  return (token, fallbackChannels, alpha) => format(computed?.getPropertyValue(`--${token}`).trim() || fallbackChannels, alpha);
+};
+
+export { createTokenResolver, resolveToken, useThemeAttributes };
+//# sourceMappingURL=chunk-IIS7INHF.js.map
+//# sourceMappingURL=chunk-IIS7INHF.js.map

package/dist/chunk-IIS7INHF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ThemeProvider/useThemeAttributes.ts","../src/utils/themeTokens.ts"],"names":[],"mappings":";;;;AAiBA,IAAM,kBAAA,GAAsC;AAAA,EAC1C,QAAA,EAAU,CAAA,EAAG,oBAAoB,CAAA,CAAA,EAAI,gBAAgB,CAAA,CAAA;AAAA,EACrD,MAAA,EAAQ,oBAAA;AAAA,EACR,OAAA,EAAS;AACX,CAAA;AAIA,IAAI,QAAA,GAAW,kBAAA;AAEf,IAAM,sBAAsB,MAAuB;AACjD,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,kBAAA;AAE5C,EAAA,MAAM,OAAO,QAAA,CAAS,eAAA;AACtB,EAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,YAAA,CAAa,eAAe,CAAA;AAC/C,EAAA,MAAM,MAAA,GACJ,KAAA,KAAU,MAAA,IAAU,KAAA,KAAU,UAAU,KAAA,GAAQ,oBAAA;AAClD,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,YAAA,CAAa,eAAe,CAAA,IAAK,gBAAA;AACtD,EAAA,MAAM,QAAA,GAAW,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAErC,EAAA,IAAI,aAAa,QAAA,CAAS,QAAA,aAAqB,EAAE,QAAA,EAAU,QAAQ,OAAA,EAAQ;AAE3E,EAAA,OAAO,QAAA;AACT,CAAA;AAEA,IAAM,SAAA,GAAY,CAAC,QAAA,KAAuC;AACxD,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,MAAM;AAAA,EAAC,CAAA;AAEnD,EAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,QAAQ,CAAA;AAC9C,EAAA,QAAA,CAAS,OAAA,CAAQ,SAAS,eAAA,EAAiB;AAAA,IACzC,UAAA,EAAY,IAAA;AAAA,IACZ,eAAA,EAAiB,CAAC,eAAA,EAAiB,eAAe;AAAA,GACnD,CAAA;AAED,EAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AACnC,CAAA;AAEA,IAAM,oBAAoB,MAAuB,kBAAA;AAgB1C,IAAM,kBAAA,GAAqB,MAChC,oBAAA,CAAqB,SAAA,EAAW,qBAAqB,iBAAiB;;;AC7DxE,IAAM,MAAA,GAAS,CAAC,QAAA,EAAkB,KAAA,KAChC,KAAA,KAAU,MAAA,GAAY,CAAA,IAAA,EAAO,QAAQ,CAAA,CAAA,CAAA,GAAM,CAAA,IAAA,EAAO,QAAQ,CAAA,GAAA,EAAM,KAAK,CAAA,CAAA,CAAA;AAEhE,IAAM,YAAA,GAAe,CAAC,KAAA,EAAe,gBAAA,EAA0B,KAAA,KAA2B;AAC/F,EAAA,MAAM,QAAA,GACJ,OAAO,QAAA,KAAa,WAAA,GAChB,mBACA,gBAAA,CAAiB,QAAA,CAAS,eAAe,CAAA,CAAE,iBAAiB,CAAA,EAAA,EAAK,KAAK,CAAA,CAAE,CAAA,CAAE,MAAK,IAC/E,gBAAA;AACN,EAAA,OAAO,MAAA,CAAO,UAAU,KAAK,CAAA;AAC/B;AAaO,IAAM,sBAAsB,MAAM;AACvC,EAAA,MAAM,WACJ,OAAO,QAAA,KAAa,cAAc,IAAA,GAAO,gBAAA,CAAiB,SAAS,eAAe,CAAA;AAEpF,EAAA,OAAO,CAAC,KAAA,EAAe,gBAAA,EAA0B,KAAA,KAC/C,OAAO,QAAA,EAAU,gBAAA,CAAiB,CAAA,EAAA,EAAK,KAAK,CAAA,CAAE,CAAA,CAAE,IAAA,EAAK,IAAK,kBAAkB,KAAK,CAAA;AACrF","file":"chunk-IIS7INHF.js","sourcesContent":["import { useSyncExternalStore } from 'react';\n\nimport { DEFAULT_BRAND_ID, DEFAULT_COLOR_SCHEME } from './defaults';\nimport type { BrandId, ResolvedColorScheme } from './types';\nimport { BRAND_ATTRIBUTE } from './useBrandState';\nimport { THEME_ATTRIBUTE } from './useColorSchemeState';\n\nexport type ThemeAttributes = {\n  /** Changes whenever `scheme` or `brandId` does — the memo key for anything built from live `--*` values. */\n  cacheKey: string;\n  scheme: ResolvedColorScheme;\n  brandId: BrandId;\n};\n\n// No attribute set means the stylesheet's own `:root` block is painting, which is\n// the default scheme — not a third \"unknown\" state. Same value on the server, so\n// the SSR snapshot and the client's first render agree.\nconst DEFAULT_ATTRIBUTES: ThemeAttributes = {\n  cacheKey: `${DEFAULT_COLOR_SCHEME}:${DEFAULT_BRAND_ID}`,\n  scheme: DEFAULT_COLOR_SCHEME,\n  brandId: DEFAULT_BRAND_ID,\n};\n\n// `useSyncExternalStore` re-renders forever on a snapshot whose reference changes\n// on every read, so the object is rebuilt only when the key it stands for moves.\nlet snapshot = DEFAULT_ATTRIBUTES;\n\nconst readThemeAttributes = (): ThemeAttributes => {\n  if (typeof document === 'undefined') return DEFAULT_ATTRIBUTES;\n\n  const root = document.documentElement;\n  const theme = root.getAttribute(THEME_ATTRIBUTE);\n  const scheme: ResolvedColorScheme =\n    theme === 'dark' || theme === 'light' ? theme : DEFAULT_COLOR_SCHEME;\n  const brandId = root.getAttribute(BRAND_ATTRIBUTE) ?? DEFAULT_BRAND_ID;\n  const cacheKey = `${scheme}:${brandId}`;\n\n  if (cacheKey !== snapshot.cacheKey) snapshot = { cacheKey, scheme, brandId };\n\n  return snapshot;\n};\n\nconst subscribe = (onChange: () => void): (() => void) => {\n  if (typeof document === 'undefined') return () => {};\n\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [THEME_ATTRIBUTE, BRAND_ATTRIBUTE],\n  });\n\n  return () => observer.disconnect();\n};\n\nconst getServerSnapshot = (): ThemeAttributes => DEFAULT_ATTRIBUTES;\n\n/**\n * The colour scheme and brand currently applied to `<html>`, plus a key that\n * changes whenever they do — for memoizing anything built from `resolveToken`.\n *\n * Read from the DOM rather than `useTheme()` on purpose: `ThemeProvider` writes\n * both attributes from passive effects, so during the render after a scheme\n * change the context already says `dark` while `<html>` — and therefore every\n * computed `--*` value — is still light. Keying off the attributes keeps the\n * values and the key that stands for them in lockstep, and works in a subtree\n * with no `ThemeProvider` above it.\n *\n * Returning `scheme` from the same read is what makes that safe by construction:\n * a caller cannot pick up the new key and the old scheme.\n */\nexport const useThemeAttributes = (): ThemeAttributes =>\n  useSyncExternalStore(subscribe, readThemeAttributes, getServerSnapshot);\n","/**\n * Live access to the semantic `--*` design tokens for consumers that cannot use\n * a Tailwind class — a CodeMirror theme object, a mermaid `themeVariables` map,\n * an SVG serialized for export. Those all need a concrete color string at build\n * time, so we resolve the value the browser currently computes for `<html>` and\n * hand the resulting `rgb(...)` to the library.\n *\n * SSR/no-document falls back to a literal; so does a token the stylesheet has\n * not defined (which is what unit tests see, since they load no CSS).\n */\nconst format = (channels: string, alpha?: number): string =>\n  alpha === undefined ? `rgb(${channels})` : `rgb(${channels} / ${alpha})`;\n\nexport const resolveToken = (token: string, fallbackChannels: string, alpha?: number): string => {\n  const channels =\n    typeof document === 'undefined'\n      ? fallbackChannels\n      : getComputedStyle(document.documentElement).getPropertyValue(`--${token}`).trim() ||\n        fallbackChannels;\n  return format(channels, alpha);\n};\n\n/**\n * A {@link resolveToken} bound to a single `getComputedStyle` snapshot.\n *\n * Reach for this when building a whole palette at once: `resolveToken` reads the\n * computed style per call, so a config with dozens of token lookups forces dozens\n * of style resolutions for one render. Take a snapshot, read every token off it,\n * throw it away.\n *\n * Snapshot per palette build, never module-level — the values change whenever the\n * scheme or brand does, and a cached resolver would keep serving the old ones.\n */\nexport const createTokenResolver = () => {\n  const computed =\n    typeof document === 'undefined' ? null : getComputedStyle(document.documentElement);\n\n  return (token: string, fallbackChannels: string, alpha?: number): string =>\n    format(computed?.getPropertyValue(`--${token}`).trim() || fallbackChannels, alpha);\n};\n"]}