@keboola/design 9.1.0 → 10.1.0

package/dist/chunk-SYIEF644.js

@@ -0,0 +1,1016 @@
+import { HelpBlock } from './chunk-ESBL3IPF.js';
+import { Button } from './chunk-CTCFYWJC.js';
+import { X, Pipette } from './chunk-BOHNXTMM.js';
+import { useArgoDesign } from './chunk-63NSN2VL.js';
+import { cn } from './chunk-JP7PNHLH.js';
+import * as ScrollAreaPrimitive2 from '@radix-ui/react-scroll-area';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as RLabel from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import TextareaAutosize from 'react-textarea-autosize';
+import { createContext, useState, useRef, useCallback, useMemo, use } from 'react';
+
+// src/utils/mergeRefs.ts
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref != null) {
+    ref.current = value;
+  }
+}
+var mergeRefs = (...refs) => {
+  return (node) => refs.forEach((ref) => setRef(ref, node));
+};
+
+// src/utils/createChangeInputEvent.ts
+var createChangeInputEvent = (input) => {
+  const changeEvent = {
+    target: input,
+    currentTarget: input,
+    type: "change",
+    nativeEvent: new Event("change", { bubbles: true }),
+    bubbles: true,
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 2,
+    // AT_TARGET
+    isTrusted: false,
+    // Synthetic events are not trusted
+    preventDefault: () => {
+    },
+    // Provide dummy functions if not needed
+    isDefaultPrevented: () => false,
+    stopPropagation: () => {
+    },
+    isPropagationStopped: () => false,
+    persist: () => {
+    },
+    timeStamp: Date.now()
+  };
+  Object.defineProperty(changeEvent, "target", {
+    value: input,
+    writable: false
+  });
+  return changeEvent;
+};
+
+// src/utils/createPrefixedString.ts
+var createPrefixedString = (prefix) => (literals) => literals.reduce((acc, literal) => acc + literal, `${prefix}-`);
+var ScrollBar = ({ className, orientation = "vertical", ...props }) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive2.ScrollAreaScrollbar,
+  {
+    orientation,
+    className: cn(
+      "tw:flex tw:touch-none tw:select-none tw:transition-color",
+      {
+        "tw:h-full tw:w-2.5 tw:p-px": orientation === "vertical",
+        "tw:h-2.5 tw:flex-col tw:p-px": orientation === "horizontal"
+      },
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      ScrollAreaPrimitive2.ScrollAreaThumb,
+      {
+        className: cn(
+          "tw:relative",
+          "tw:flex-1",
+          "tw:rounded-full",
+          "tw:bg-border",
+          "tw:hover:bg-muted-foreground"
+        )
+      }
+    )
+  }
+);
+var ScrollArea = ({
+  ref,
+  className,
+  children,
+  viewPortClassName,
+  orientation,
+  scrollBarClassName,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  ScrollAreaPrimitive2.Root,
+  {
+    "data-slot": "scroll-area",
+    className: cn(
+      "tw:peer/scroll-area tw:relative tw:overflow-hidden tw:focus-visible:outline-hidden",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive2.Viewport,
+        {
+          ref,
+          className: cn(
+            "tw:h-full tw:w-full tw:rounded-[inherit] tw:focus-visible:outline-hidden",
+            viewPortClassName
+          ),
+          children
+        }
+      ),
+      orientation ? /* @__PURE__ */ jsx(ScrollBar, { className: scrollBarClassName, orientation }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ScrollBar, { className: scrollBarClassName, orientation: "vertical" }),
+        /* @__PURE__ */ jsx(ScrollBar, { className: scrollBarClassName, orientation: "horizontal" })
+      ] }),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive2.Corner, {})
+    ]
+  }
+);
+var Optional = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, "aria-hidden": true, className: cn("tw:ml-0.5", "tw:text-muted-foreground", className), children: "(optional)" });
+var Required = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, "aria-hidden": true, className: cn("tw:ml-0.5", "tw:text-primary", className), children: "*" });
+var Label = ({ className, children, id, htmlFor, ...rest }) => /* @__PURE__ */ jsx(
+  RLabel.Root,
+  {
+    ...rest,
+    id: id?.toString(),
+    htmlFor: htmlFor?.toString(),
+    className: cn(
+      "tw:m-0 tw:text-foreground tw:font-normal tw:peer-disabled:opacity-50",
+      className
+    ),
+    children
+  }
+);
+Label.Optional = Optional;
+Label.Required = Required;
+var addonVariants = cva(
+  [
+    "tw:flex",
+    "tw:items-center",
+    "tw:gap-1",
+    // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.
+    "tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4",
+    "tw:[&_svg]:shrink-0"
+  ],
+  {
+    defaultVariants: {
+      align: "inline-start"
+    },
+    variants: {
+      align: {
+        "inline-start": ["tw:order-first", "tw:[&:not(:empty)]:pl-4"],
+        "inline-end": ["tw:order-last", "tw:[&:not(:empty)]:pr-4"],
+        "block-start": [
+          "tw:order-first",
+          // `tw:w-full` needs to be empty-conditional too — when the addon
+          // has no content the root stays in flex-row, and a 100%-wide
+          // empty addon would claim half of the input row beside the input.
+          "tw:[&:not(:empty)]:w-full",
+          "tw:[&:not(:empty)]:px-4",
+          "tw:[&:not(:empty)]:py-1.5"
+        ],
+        "block-end": [
+          "tw:order-last",
+          "tw:[&:not(:empty)]:w-full",
+          "tw:[&:not(:empty)]:px-4",
+          "tw:[&:not(:empty)]:py-1.5"
+        ]
+      }
+    }
+  }
+);
+var InputGroupAddon = ({
+  children,
+  align = "inline-start",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { ...props, "data-align": align, className: cn(addonVariants({ align, className })), children });
+var InputGroupButton = ({ ref, className, tabIndex = -1, ...props }) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    ...props,
+    tabIndex,
+    ref,
+    variant: "invisible",
+    size: "icon-sm",
+    className: cn("tw:size-5", "tw:[&_svg]:text-muted-foreground", className)
+  }
+);
+var InputGroupInput = ({ ref, className, ...inputProps }) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    ...inputProps,
+    ref,
+    className: cn(
+      "tw:w-full",
+      "tw:bg-transparent",
+      "tw:outline-hidden",
+      // font
+      "tw:font-sans",
+      "tw:text-sm",
+      // placeholder
+      "tw:placeholder:text-neutral-400",
+      "tw:placeholder:font-normal",
+      // disabled
+      "tw:disabled:cursor-not-allowed",
+      className
+    )
+  }
+);
+var InputGroupText = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "tw:flex",
+      "tw:items-center",
+      "tw:gap-2",
+      "tw:text-sm",
+      "tw:text-muted-foreground",
+      "tw:[&_svg]:pointer-events-none",
+      'tw:[&_svg:not([class*="tw:size-"])]:size-4',
+      className
+    ),
+    ...props
+  }
+);
+var InputGroupTextArea = ({
+  ref,
+  className,
+  onChange,
+  onValueChange,
+  value,
+  defaultValue,
+  onBlur,
+  onValueBlur,
+  disableResize = false,
+  minRows = 1,
+  maxRows = 4,
+  ...props
+}) => {
+  const handleChange = (event) => {
+    onValueChange?.(event.target.value);
+    onChange?.(event);
+  };
+  const handleBlur = (event) => {
+    onValueBlur?.(event.target.value);
+    onBlur?.(event);
+  };
+  return /* @__PURE__ */ jsx(
+    TextareaAutosize,
+    {
+      ...props,
+      ref,
+      value: value ?? void 0,
+      defaultValue: defaultValue ?? void 0,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      minRows,
+      maxRows: maxRows === "unlimited" ? void 0 : maxRows,
+      className: cn(
+        "tw:w-full",
+        "tw:bg-transparent",
+        "tw:outline-hidden",
+        "tw:px-4",
+        // font
+        "tw:font-sans",
+        "tw:text-sm",
+        // placeholder
+        "tw:placeholder:text-neutral-400",
+        "tw:placeholder:font-normal",
+        // disabled
+        "tw:disabled:cursor-not-allowed",
+        {
+          "tw:resize-none": disableResize
+        },
+        className
+      )
+    }
+  );
+};
+var inputGroupVariants = cva(
+  [
+    "tailwindcss-preflight",
+    "tw:group",
+    "tw:overflow-hidden",
+    "tw:box-border",
+    // positioning
+    "tw:flex",
+    "tw:items-center",
+    // base — legacy (non-argo) chrome uses a fixed radius; argo overrides it with
+    // the brand radius token in the `argo` variant below.
+    "tw:rounded",
+    "tw:border",
+    "tw:border-solid",
+    // `border-input` rather than the fixed `neutral-200` — same light-scheme
+    // grey, but it follows the dark scheme too. The base text stays pinned:
+    // `secondary` and the readonly state below both fill with a fixed light
+    // grey, so a scheme-following text colour would go light-on-light there.
+    // `primary` opts into the token itself (and re-pins its readonly fill).
+    "tw:border-input",
+    "tw:text-neutral-800",
+    "tw:transition",
+    // focus
+    "tw:has-[:is(input,textarea):focus]:ring-4",
+    // readonly
+    "tw:has-[:is(input,textarea)[readonly]]:bg-neutral-150",
+    "tw:has-[:is(input,textarea)[readonly]]:focus-within:ring-0",
+    "tw:has-[:is(input,textarea)[readonly]]:border-neutral-150",
+    // disabled cursor (opacity owned by variant)
+    "tw:has-[:is(input,textarea):disabled]:cursor-not-allowed",
+    // textarea: top-align addons, allow vertical expansion, own its y-padding
+    "tw:has-[textarea]:items-start",
+    "tw:has-[[data-align=block-start]:not(:empty)]:flex-wrap",
+    "tw:has-[[data-align=block-end]:not(:empty)]:flex-wrap",
+    "tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:w-auto",
+    "tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:flex-1",
+    "tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:w-auto",
+    "tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:flex-1",
+    "tw:[&>input]:px-4",
+    "tw:[&>input]:has-[[data-align=inline-start]:not(:empty)]:pl-2",
+    "tw:[&>input]:has-[[data-align=inline-end]:not(:empty)]:pr-2"
+  ],
+  {
+    defaultVariants: {
+      variant: "primary",
+      state: "default",
+      sizing: "medium",
+      focusVariant: "default"
+    },
+    compoundVariants: [
+      {
+        variant: "secondary",
+        state: "error",
+        className: ["tw:bg-error-100"]
+      },
+      {
+        variant: "secondary",
+        state: "warning",
+        className: ["tw:bg-warning-100"]
+      },
+      {
+        variant: "primary",
+        state: "default",
+        focusVariant: "off",
+        className: ["tw:has-[:is(input,textarea):focus]:border-neutral-200"]
+      },
+      {
+        variant: "secondary",
+        state: "default",
+        focusVariant: "off",
+        className: ["tw:has-[:is(input,textarea):focus]:border-neutral-100"]
+      },
+      {
+        variant: ["primary", "secondary"],
+        state: "error",
+        focusVariant: "on",
+        className: ["tw:!border-error-500", "tw:!ring-error-200"]
+      },
+      {
+        variant: ["primary", "secondary"],
+        state: "warning",
+        focusVariant: "on",
+        className: ["tw:!border-warning-500", "tw:!ring-warning-200"]
+      },
+      // --- argo ---
+      {
+        variant: "argo",
+        state: "default",
+        className: [
+          "tw:has-[:is(input,textarea):focus]:border-primary",
+          "tw:has-[:is(input,textarea):focus]:ring-ring/50"
+        ]
+      },
+      {
+        variant: "argo",
+        state: "error",
+        className: [
+          "tw:border-destructive",
+          "tw:has-[:is(input,textarea):focus]:border-destructive",
+          "tw:has-[:is(input,textarea):focus]:ring-destructive/20"
+        ]
+      },
+      {
+        variant: "argo",
+        focusVariant: "on",
+        className: ["tw:!border-primary", "tw:!ring-ring/50"]
+      },
+      {
+        variant: "argo",
+        state: "error",
+        focusVariant: "on",
+        className: ["tw:!border-destructive", "tw:!ring-destructive/20"]
+      },
+      {
+        variant: "argo",
+        state: "default",
+        focusVariant: "off",
+        className: ["tw:has-[:is(input,textarea):focus]:border-input"]
+      }
+    ],
+    variants: {
+      focusVariant: {
+        default: [],
+        on: ["tw:!border-ring", "tw:!ring-ring/30", "tw:!ring-4"],
+        off: ["tw:has-[:is(input,textarea):focus]:!ring-0"]
+      },
+      variant: {
+        primary: [
+          // The field-surface token — white in the light scheme, so this is a
+          // no-op there; the dark scheme gets a field fill, not a white slab.
+          "tw:bg-input-background",
+          "tw:text-foreground",
+          // The base readonly fill is a fixed light grey, which the scheme-following
+          // text above would sit on invisibly in dark. Re-pin to the same
+          // `muted`/`input` pair argo uses for exactly this reason.
+          "tw:has-[:is(input,textarea)[readonly]]:bg-muted",
+          "tw:has-[:is(input,textarea)[readonly]]:border-input",
+          "tw:has-[:is(input,textarea):disabled]:opacity-40",
+          // aria-invalid on the control surfaces the error chrome without a `state` prop — the
+          // accessible path (mirrors the `state="error"` legacy tokens). Higher specificity than
+          // the default focus selector, so it wins without `!important`.
+          "tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200"
+        ],
+        secondary: [
+          "tw:bg-neutral-100",
+          "tw:border-neutral-100",
+          "tw:has-[:is(input,textarea):disabled]:opacity-40",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200"
+        ],
+        argo: [
+          // argo follows the brand radius token (overrides the static base)
+          "tw:rounded-[var(--radius-lg,0.25rem)]",
+          // muted filled input surface — gray, distinct from white containers; not the app-background token.
+          // Deliberately `muted`, not the `input-background` field token legacy uses: argo's field is a
+          // grey inset by design. Converging the two is a brand-value decision, not a component one.
+          "tw:bg-muted",
+          "tw:border-input",
+          "tw:text-foreground",
+          "tw:has-[:is(input,textarea):disabled]:opacity-50",
+          // readonly: keep the themed input surface/border. The base layer's fixed
+          // `neutral-150` (a light grey) is correct for the legacy light chrome but
+          // collides with argo's themed `foreground` text — light-on-light, invisible
+          // in dark mode. Re-pin to the same `muted`/`input` tokens the editable argo
+          // input uses (validated AA), so readonly stays legible in every scheme.
+          "tw:has-[:is(input,textarea)[readonly]]:bg-muted",
+          "tw:has-[:is(input,textarea)[readonly]]:border-input",
+          // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly
+          "tw:has-[:is(input,textarea)[readonly]:focus]:border-input",
+          // aria-invalid on the control surfaces the error chrome without a `state` prop — the
+          // accessible path (uses the themeable `destructive` status token).
+          "tw:has-[:is(input,textarea)[aria-invalid=true]]:border-destructive",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-destructive",
+          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-destructive/20"
+        ]
+      },
+      sizing: {
+        default: [
+          "tw:[&>:is(input,textarea)]:py-2.5",
+          "tw:[&>:is(input,textarea)]:leading-[18px]",
+          "tw:[&>textarea]:!min-h-[calc(2.5rem-2px)]"
+        ],
+        small: [
+          "tw:[&>:is(input,textarea)]:py-2",
+          "tw:[&>:is(input,textarea)]:leading-[16px]",
+          "tw:[&>textarea]:!min-h-[calc(2rem-2px)]"
+        ],
+        medium: [
+          "tw:[&>:is(input,textarea)]:py-2",
+          "tw:[&>:is(input,textarea)]:leading-[18px]",
+          "tw:[&>textarea]:!min-h-[calc(2.25rem-2px)]"
+        ]
+      },
+      state: {
+        default: [
+          "tw:has-[:is(input,textarea):focus]:border-ring",
+          "tw:has-[:is(input,textarea):focus]:ring-ring/30"
+        ],
+        error: [
+          "tw:border-error-500",
+          "tw:has-[:is(input,textarea):focus]:border-error-500",
+          "tw:has-[:is(input,textarea):focus]:ring-error-200"
+        ],
+        warning: [
+          "tw:border-warning-500",
+          "tw:has-[:is(input,textarea):focus]:border-warning-500",
+          "tw:has-[:is(input,textarea):focus]:ring-warning-200"
+        ]
+      }
+    }
+  }
+);
+var InputGroupRoot = ({
+  ref,
+  children,
+  state,
+  variant,
+  sizing,
+  focusVariant,
+  className,
+  ...props
+}) => {
+  const isArgo = useArgoDesign();
+  const effectiveVariant = isArgo ? "argo" : variant;
+  const effectiveSizing = effectiveVariant === "argo" ? "medium" : sizing;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cn(
+        inputGroupVariants({
+          state,
+          variant: effectiveVariant,
+          sizing: effectiveSizing,
+          focusVariant,
+          className
+        })
+      ),
+      children
+    }
+  );
+};
+var InputGroup = InputGroupRoot;
+InputGroup.Input = InputGroupInput;
+InputGroup.Addon = InputGroupAddon;
+InputGroup.Button = InputGroupButton;
+InputGroup.TextArea = InputGroupTextArea;
+InputGroup.Text = InputGroupText;
+var useControllableState = ({
+  prop,
+  defaultProp,
+  onChange
+}) => {
+  const [uncontrolled, setUncontrolled] = useState(defaultProp);
+  const isControlled = prop !== void 0;
+  const value = prop !== void 0 ? prop : uncontrolled;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = useCallback(
+    (next) => {
+      const nextValue = typeof next === "function" ? next(valueRef.current) : next;
+      valueRef.current = nextValue;
+      if (!isControlled) setUncontrolled(nextValue);
+      onChangeRef.current?.(nextValue);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+};
+
+// 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
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var Textarea = ({
+  ref,
+  containerClassName,
+  // group props
+  state = "default",
+  variant,
+  sizing,
+  focusVariant,
+  // value handling
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  ...rest
+}) => {
+  const [value, setValue] = useControllableState({
+    // `undefined` stays uncontrolled; any provided value (incl. `null`) is controlled, coerced to ''.
+    prop: valueProp === void 0 ? void 0 : valueProp ?? "",
+    defaultProp: defaultValue ?? "",
+    onChange: onValueChange
+  });
+  return /* @__PURE__ */ jsx(
+    InputGroup,
+    {
+      state,
+      sizing,
+      focusVariant,
+      variant,
+      className: containerClassName,
+      children: /* @__PURE__ */ jsx(InputGroup.TextArea, { ...rest, ref, value, onValueChange: setValue })
+    }
+  );
+};
+
+// src/blocks/ColorInput/utils.ts
+var HEX_CHARSET = /^[0-9a-fA-F]+$/;
+var COMPLETE_HEX_PATTERN = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var MAX_HEX_BODY_LENGTH = 8;
+var PICKER_FALLBACK = "#000000";
+var extractHexBody = (value) => {
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  if (trimmed === "") return null;
+  return trimmed.startsWith("#") ? trimmed.slice(1) : trimmed;
+};
+var isCompleteHexColor = (value) => COMPLETE_HEX_PATTERN.test(value);
+var showPicker = (input) => {
+  const isShowPickerSupported = "showPicker" in HTMLInputElement.prototype;
+  isShowPickerSupported ? input.showPicker() : input.click();
+};
+var coerceHexInputValue = (value) => {
+  const body = extractHexBody(value);
+  if (body === null) return "";
+  const [validBody] = body.match(/^[0-9a-fA-F]+/) ?? [];
+  if (!validBody) return "";
+  return `#${validBody.slice(0, MAX_HEX_BODY_LENGTH)}`;
+};
+var coerceColorPickerValue = (value) => {
+  const body = extractHexBody(value);
+  if (body === null || !HEX_CHARSET.test(body)) return PICKER_FALLBACK;
+  if (body.length === 3 || body.length === 4) {
+    const [r, g, b] = body;
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+  }
+  if (body.length === 6 || body.length === 8) {
+    return `#${body.slice(0, 6).toLowerCase()}`;
+  }
+  return PICKER_FALLBACK;
+};
+var ColorPicker = ({ value, disabled, readOnly, ...props }) => {
+  const pickerRef = useRef(null);
+  const handleOpenPicker = () => {
+    if (!pickerRef.current) return;
+    showPicker(pickerRef.current);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "tw:relative", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...props,
+        ref: pickerRef,
+        type: "color",
+        value: coerceColorPickerValue(value),
+        tabIndex: -1,
+        "aria-hidden": true,
+        className: "tw:pointer-events-none tw:absolute tw:left-0 tw:top-full tw:size-0 tw:opacity-0",
+        disabled,
+        readOnly
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputGroup.Button,
+      {
+        onMouseDown: (event) => event.preventDefault(),
+        disabled: disabled || readOnly,
+        onClick: handleOpenPicker,
+        "aria-label": "Pick color",
+        children: /* @__PURE__ */ jsx(Pipette, { className: "tw:size-4" })
+      }
+    )
+  ] });
+};
+var ColorInput = ({
+  ref,
+  // group props
+  state,
+  variant,
+  focusVariant,
+  sizing,
+  className,
+  // own props
+  value: valueProp,
+  onValueChange,
+  onValueBlur,
+  onChange,
+  onBlur,
+  defaultValue,
+  allowClear = false,
+  // input props
+  disabled,
+  readOnly,
+  ...restInputProps
+}) => {
+  const inputRef = useRef(null);
+  const [value, setValue] = useControllableState({
+    // A `null` controlled value stays controlled (coerced to ''); `undefined` is uncontrolled.
+    prop: valueProp === null ? "" : valueProp,
+    defaultProp: defaultValue ?? "",
+    onChange: onValueChange
+  });
+  const isControlled = valueProp !== void 0;
+  const canClear = allowClear && !!value && !disabled && !readOnly;
+  const swatchColor = coerceHexInputValue(value);
+  const isValidSwatch = isCompleteHexColor(swatchColor);
+  const handleChange = (event) => {
+    setValue(event.target.value);
+    onChange?.(event);
+  };
+  const handleBlur = (event) => {
+    const newValue = event.target.value;
+    const sanitizedNewValue = coerceHexInputValue(newValue);
+    if (sanitizedNewValue !== newValue) {
+      if (!isControlled) event.target.value = sanitizedNewValue;
+      setValue(sanitizedNewValue);
+    }
+    onValueBlur?.(sanitizedNewValue);
+    onBlur?.(event);
+  };
+  const handlePickerChange = (event) => {
+    setValue(coerceHexInputValue(event.target.value));
+    onChange?.(event);
+  };
+  const handleClear = () => {
+    if (!inputRef.current) return;
+    inputRef.current.value = "";
+    setValue("");
+    onChange?.(createChangeInputEvent(inputRef.current));
+  };
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      state,
+      variant,
+      sizing,
+      focusVariant,
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          InputGroup.Addon,
+          {
+            align: "inline-start",
+            className: cn(
+              { "tw:-ml-7 tw:opacity-0": !value },
+              "tw:transition-[opacity,margin]",
+              "tw:ease-linear",
+              "tw:duration-200"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: isValidSwatch ? { background: swatchColor } : void 0,
+                className: cn(
+                  "tw:size-5",
+                  "tw:shrink-0",
+                  "tw:rounded-sm",
+                  "tw:border",
+                  "tw:border-solid",
+                  "tw:border-neutral-300",
+                  {
+                    "tw:bg-[linear-gradient(to_top_right,transparent_calc(50%_-_1px),theme(colors.red.300)_calc(50%_-_1px),theme(colors.red.300)_calc(50%_+_1px),transparent_calc(50%_+_1px))]": !isValidSwatch
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InputGroup.Input,
+          {
+            ...restInputProps,
+            type: "text",
+            ref: mergeRefs(ref ?? null, inputRef),
+            value,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            disabled,
+            readOnly
+          }
+        ),
+        /* @__PURE__ */ jsxs(InputGroup.Addon, { align: "inline-end", children: [
+          canClear && /* @__PURE__ */ jsx(
+            InputGroup.Button,
+            {
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: handleClear,
+              "aria-label": "Clear color",
+              children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ColorPicker,
+            {
+              disabled,
+              readOnly,
+              value,
+              onChange: handlePickerChange
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var toNumberOrNull = (event) => Number.isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber;
+var NumberInput = ({
+  ref,
+  state,
+  variant,
+  focusVariant,
+  sizing,
+  className,
+  value,
+  defaultValue,
+  onValueChange,
+  onValueBlur,
+  onChange,
+  onBlur,
+  prefix,
+  suffix,
+  ...inputProps
+}) => {
+  const handleChange = (event) => {
+    onValueChange?.(toNumberOrNull(event));
+    onChange?.(event);
+  };
+  const handleBlur = (event) => {
+    onValueBlur?.(toNumberOrNull(event));
+    onBlur?.(event);
+  };
+  const isControlled = value !== void 0;
+  const valueProp = isControlled ? { value: value ?? "" } : { defaultValue: defaultValue ?? "" };
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      state,
+      variant,
+      sizing,
+      focusVariant,
+      className,
+      children: [
+        prefix && /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-start", children: prefix }),
+        /* @__PURE__ */ jsx(
+          InputGroup.Input,
+          {
+            ...inputProps,
+            ...valueProp,
+            ref,
+            type: "number",
+            onChange: handleChange,
+            onBlur: handleBlur
+          }
+        ),
+        suffix && /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-end", children: suffix })
+      ]
+    }
+  );
+};
+var FormGroupContext = createContext({
+  state: "default"
+});
+var FormGroupProvider = FormGroupContext;
+var useFormGroupContext = () => use(FormGroupContext);
+var FormGroupColorInput = ({ ref, ...props }) => {
+  const { state } = useFormGroupContext();
+  return /* @__PURE__ */ jsx(ColorInput, { state, ...props, ref });
+};
+var toMessage = (entry) => typeof entry === "string" ? entry : entry?.message;
+var FormGroupError = ({ children, className, errors, ...rest }) => {
+  const content = useMemo(() => {
+    if (children) return children;
+    const messages = (errors ?? []).map(toMessage).filter((message) => !!message);
+    if (messages.length === 0) return null;
+    if (messages.length === 1) return messages[0];
+    return /* @__PURE__ */ jsx("ul", { className: "tw:m-0 tw:flex tw:list-disc tw:flex-col tw:gap-0 tw:pl-4", children: messages.map((message, index) => /* @__PURE__ */ jsx("li", { children: message }, index)) });
+  }, [children, errors]);
+  if (!content) return null;
+  return /* @__PURE__ */ jsx("div", { ...rest, role: "alert", className: cn("tw:m-0 tw:text-xs tw:text-destructive", className), children: content });
+};
+var FormGroupHelp = ({ children, ...rest }) => {
+  const formGroupContext = useFormGroupContext();
+  return /* @__PURE__ */ jsx(HelpBlock, { state: formGroupContext.state === "warning" ? "warning" : "default", ...rest, children });
+};
+var FormGroupNumberInput = ({ ref, ...props }) => {
+  const { state } = useFormGroupContext();
+  return /* @__PURE__ */ jsx(NumberInput, { ...props, ref, state });
+};
+var FormGroupTextarea = (props) => {
+  const { state } = useFormGroupContext();
+  return /* @__PURE__ */ jsx(Textarea, { state, ...props });
+};
+var FormGroupTextInput = ({ ref, ...props }) => {
+  const { state } = useFormGroupContext();
+  return /* @__PURE__ */ jsx(TextInput, { state, ...props, ref });
+};
+var FormGroup = ({ className, children, state, ...rest }) => {
+  return /* @__PURE__ */ jsx(FormGroupProvider, { value: { state }, children: /* @__PURE__ */ jsx("div", { ...rest, className: cn("tw:flex tw:flex-col tw:gap-1", className), children }) });
+};
+FormGroup.Help = FormGroupHelp;
+FormGroup.Error = FormGroupError;
+FormGroup.TextInput = FormGroupTextInput;
+FormGroup.NumberInput = FormGroupNumberInput;
+FormGroup.ColorInput = FormGroupColorInput;
+FormGroup.Textarea = FormGroupTextarea;
+
+export { ColorInput, FormGroup, InputGroup, Label, NumberInput, ScrollArea, ScrollBar, TextInput, Textarea, createChangeInputEvent, createPrefixedString, mergeRefs, useControllableState };
+//# sourceMappingURL=chunk-SYIEF644.js.map
+//# sourceMappingURL=chunk-SYIEF644.js.map