@spark-ui/components 13.1.4 → 13.2.0

package/dist/input/index.js

@@ -1,724 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/input/index.ts
-var input_exports = {};
-__export(input_exports, {
-  Input: () => Input,
-  InputGroup: () => InputGroup2,
-  useInputGroup: () => useInputGroup
-});
-module.exports = __toCommonJS(input_exports);
-
-// src/input/InputClearButton.tsx
-var import_DeleteOutline = require("@spark-ui/icons/DeleteOutline");
-var import_class_variance_authority2 = require("class-variance-authority");
-
-// src/icon/Icon.tsx
-var import_react2 = require("react");
-
-// src/slot/Slot.tsx
-var import_radix_ui = require("radix-ui");
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Slottable = import_radix_ui.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
-};
-
-// src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    Component,
-    {
-      ...props,
-      ref,
-      style: {
-        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
-        position: "absolute",
-        border: 0,
-        width: 1,
-        height: 1,
-        padding: 0,
-        margin: -1,
-        overflow: "hidden",
-        clip: "rect(0, 0, 0, 0)",
-        whiteSpace: "nowrap",
-        wordWrap: "normal",
-        ...props.style
-      }
-    }
-  );
-};
-VisuallyHidden.displayName = "VisuallyHidden";
-
-// src/icon/Icon.styles.tsx
-var import_internal_utils = require("@spark-ui/internal-utils");
-var import_class_variance_authority = require("class-variance-authority");
-var iconStyles = (0, import_class_variance_authority.cva)(["fill-current shrink-0"], {
-  variants: {
-    /**
-     * Color scheme of the icon.
-     */
-    intent: (0, import_internal_utils.makeVariants)({
-      current: ["text-current"],
-      main: ["text-main"],
-      support: ["text-support"],
-      accent: ["text-accent"],
-      basic: ["text-basic"],
-      success: ["text-success"],
-      alert: ["text-alert"],
-      error: ["text-error"],
-      info: ["text-info"],
-      neutral: ["text-neutral"]
-    }),
-    /**
-     * Sets the size of the icon.
-     */
-    size: (0, import_internal_utils.makeVariants)({
-      current: ["u-current-font-size"],
-      sm: ["w-sz-16", "h-sz-16"],
-      md: ["w-sz-24", "h-sz-24"],
-      lg: ["w-sz-32", "h-sz-32"],
-      xl: ["w-sz-40", "h-sz-40"]
-    })
-  }
-});
-
-// src/icon/Icon.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Icon = ({
-  label,
-  className,
-  size = "current",
-  intent = "current",
-  children,
-  ...others
-}) => {
-  const child = import_react2.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    (0, import_react2.cloneElement)(child, {
-      className: iconStyles({ className, size, intent }),
-      "data-spark-component": "icon",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...others
-    }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: label })
-  ] });
-};
-Icon.displayName = "Icon";
-
-// src/input/InputGroupContext.ts
-var import_react3 = require("react");
-var InputGroupContext = (0, import_react3.createContext)(null);
-var useInputGroup = () => {
-  const context = (0, import_react3.useContext)(InputGroupContext);
-  return context || { isStandalone: true };
-};
-
-// src/input/InputClearButton.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Root = ({
-  className,
-  tabIndex = -1,
-  onClick,
-  inline = false,
-  ref,
-  ...others
-}) => {
-  const { onClear, hasTrailingIcon } = useInputGroup();
-  const handleClick = (event) => {
-    if (onClick) {
-      onClick(event);
-    }
-    if (onClear) {
-      onClear();
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "button",
-    {
-      ref,
-      "data-spark-component": "input-clear-button",
-      className: (0, import_class_variance_authority2.cx)(
-        className,
-        "pointer-events-auto absolute",
-        inline ? "h-sz-44 top-0 -translate-y-0" : "top-1/2 -translate-y-1/2",
-        "inline-flex h-full items-center justify-center outline-hidden",
-        "text-neutral hover:text-neutral-hovered",
-        hasTrailingIcon ? "right-3xl px-sz-12" : "pl-md pr-lg right-0"
-      ),
-      tabIndex,
-      onClick: handleClick,
-      type: "button",
-      ...others,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_DeleteOutline.DeleteOutline, {}) })
-    }
-  );
-};
-var InputClearButton = Object.assign(Root, {
-  id: "ClearButton"
-});
-Root.displayName = "InputGroup.ClearButton";
-
-// src/input/InputGroup.tsx
-var import_form_field = require("@spark-ui/components/form-field");
-var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
-var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
-var import_react4 = require("react");
-
-// src/input/InputGroup.styles.ts
-var import_class_variance_authority3 = require("class-variance-authority");
-var inputGroupStyles = (0, import_class_variance_authority3.cva)(["relative inline-flex w-full"], {
-  variants: {
-    /**
-     * When `true`, prevents the user from interacting.
-     */
-    disabled: {
-      true: [
-        "cursor-not-allowed",
-        "relative",
-        "after:absolute",
-        "after:top-0",
-        "after:h-full",
-        "after:w-full",
-        "after:border-sm after:border-outline",
-        "after:rounded-lg"
-      ],
-      false: "after:hidden"
-    },
-    /**
-     * Sets the component as interactive or not.
-     */
-    readOnly: {
-      true: [
-        "relative",
-        "after:absolute",
-        "after:top-0",
-        "after:h-full",
-        "after:w-full",
-        "after:border-sm after:border-outline",
-        "after:rounded-lg"
-      ],
-      false: "after:hidden"
-    }
-  }
-});
-
-// src/input/InputGroup.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var InputGroup = ({
-  className,
-  children: childrenProp,
-  state: stateProp,
-  disabled: disabledProp,
-  readOnly: readOnlyProp,
-  onClear,
-  ref: forwardedRef,
-  ...others
-}) => {
-  const getElementId = (element) => {
-    return element ? element.type.id : "";
-  };
-  const findElement = (...values) => {
-    return children.find((child) => values.includes(getElementId(child) || ""));
-  };
-  const children = import_react4.Children.toArray(childrenProp).filter(import_react4.isValidElement);
-  const input = findElement("Input");
-  const props = input?.props || {};
-  const inputRef = (0, import_react4.useRef)(null);
-  const onClearRef = (0, import_react4.useRef)(onClear);
-  const ref = (0, import_use_merge_refs.useMergeRefs)(input?.ref, inputRef);
-  const [value, onChange] = (0, import_use_combined_state.useCombinedState)(
-    props.value,
-    props.defaultValue,
-    props.onValueChange
-  );
-  const field = (0, import_form_field.useFormFieldControl)();
-  const state = field.state ?? stateProp;
-  const disabled = field.disabled || !!disabledProp;
-  const readOnly = field.readOnly || !!readOnlyProp;
-  const leadingAddon = findElement("LeadingAddon");
-  const leadingIcon = findElement("LeadingIcon");
-  const clearButton = findElement("ClearButton");
-  const trailingIcon = findElement("TrailingIcon");
-  const trailingAddon = findElement("TrailingAddon");
-  const hasLeadingAddon = !!leadingAddon;
-  const hasTrailingAddon = !!trailingAddon;
-  const hasLeadingIcon = !!leadingIcon;
-  const hasTrailingIcon = !!trailingIcon;
-  const hasClearButton = !!value && !!clearButton && !disabled && !readOnly;
-  const handleChange = (event) => {
-    if (props.onChange) {
-      props.onChange(event);
-    }
-    onChange(event.target.value);
-  };
-  const handleClear = (0, import_react4.useCallback)(() => {
-    if (onClearRef.current) {
-      onClearRef.current();
-    }
-    onChange("");
-    inputRef.current.focus();
-  }, [onChange]);
-  const current = (0, import_react4.useMemo)(() => {
-    return {
-      state,
-      disabled,
-      readOnly,
-      hasLeadingIcon,
-      hasTrailingIcon,
-      hasLeadingAddon,
-      hasTrailingAddon,
-      hasClearButton,
-      onClear: handleClear
-    };
-  }, [
-    state,
-    disabled,
-    readOnly,
-    hasLeadingIcon,
-    hasTrailingIcon,
-    hasLeadingAddon,
-    hasTrailingAddon,
-    hasClearButton,
-    handleClear
-  ]);
-  (0, import_react4.useEffect)(() => {
-    onClearRef.current = onClear;
-  }, [onClear]);
-  const inputRefValue = inputRef.current?.value;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InputGroupContext.Provider, { value: current, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "div",
-    {
-      "data-spark-component": "input-group",
-      ref: forwardedRef,
-      className: inputGroupStyles({ disabled, readOnly, className }),
-      ...others,
-      children: [
-        hasLeadingAddon && leadingAddon,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative inline-flex w-full", children: [
-          input && (0, import_react4.cloneElement)(input, {
-            value: value ?? inputRefValue ?? "",
-            ref,
-            defaultValue: void 0,
-            onChange: handleChange
-          }),
-          leadingIcon,
-          hasClearButton && clearButton,
-          trailingIcon
-        ] }),
-        hasTrailingAddon && trailingAddon
-      ]
-    }
-  ) });
-};
-InputGroup.displayName = "InputGroup";
-
-// src/input/InputLeadingAddon.tsx
-var import_class_variance_authority5 = require("class-variance-authority");
-
-// src/input/InputAddon.tsx
-var import_react5 = require("react");
-
-// src/input/InputAddon.styles.ts
-var import_class_variance_authority4 = require("class-variance-authority");
-var inputAddonStyles = (0, import_class_variance_authority4.cva)(
-  [
-    "overflow-hidden",
-    "border-sm",
-    "shrink-0",
-    "h-full",
-    "focus-visible:relative focus-visible:z-raised",
-    "mx-0"
-  ],
-  {
-    variants: {
-      /**
-       * Change the component to the HTML tag or custom component of the only child.
-       */
-      asChild: { false: ["flex", "items-center", "px-lg"] },
-      intent: {
-        neutral: "border-outline",
-        error: "border-error",
-        alert: "border-alert",
-        success: "border-success"
-      },
-      /**
-       * Disable the input addon, preventing user interaction and adding opacity.
-       */
-      disabled: {
-        true: ["pointer-events-none border-outline!"]
-      },
-      /**
-       * Changes input addon styles based on the read only status from the input.
-       */
-      readOnly: {
-        true: ["pointer-events-none"]
-      },
-      /**
-       * Main style of the input addon.
-       */
-      design: {
-        text: "",
-        solid: "",
-        inline: ""
-      }
-    },
-    compoundVariants: [
-      {
-        disabled: false,
-        readOnly: false,
-        design: "text",
-        class: ["bg-surface", "text-on-surface"]
-      },
-      {
-        disabled: true,
-        design: "text",
-        class: ["text-on-surface/dim-3"]
-      },
-      {
-        disabled: true,
-        design: ["solid", "inline"],
-        class: ["opacity-dim-3"]
-      }
-    ],
-    defaultVariants: {
-      intent: "neutral"
-    }
-  }
-);
-
-// src/input/InputAddon.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var InputAddon = ({
-  asChild: asChildProp,
-  className,
-  children,
-  ref,
-  ...others
-}) => {
-  const { state, disabled, readOnly } = useInputGroup();
-  const isRawText = typeof children === "string";
-  const asChild = !!(isRawText ? false : asChildProp);
-  const child = isRawText ? children : import_react5.Children.only(children);
-  const Component = asChild && !isRawText ? Slot : "div";
-  const getDesign = () => {
-    if (isRawText) return "text";
-    return asChild ? "solid" : "inline";
-  };
-  const design = getDesign();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    Component,
-    {
-      ref,
-      "data-spark-component": "input-addon",
-      className: inputAddonStyles({
-        className,
-        intent: state,
-        disabled,
-        readOnly,
-        asChild,
-        design
-      }),
-      ...disabled && { tabIndex: -1 },
-      ...others,
-      children: child
-    }
-  );
-};
-InputAddon.displayName = "InputGroup.Addon";
-
-// src/input/InputLeadingAddon.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Root2 = ({ className, ref, ...others }) => {
-  const { disabled, readOnly } = useInputGroup();
-  const isInactive = disabled || readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_class_variance_authority5.cx)("rounded-l-lg", isInactive ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    InputAddon,
-    {
-      ref,
-      className: (0, import_class_variance_authority5.cx)(className, "rounded-r-0! mr-[-1px] rounded-l-lg"),
-      ...others
-    }
-  ) });
-};
-var InputLeadingAddon = Object.assign(Root2, {
-  id: "LeadingAddon"
-});
-Root2.displayName = "InputGroup.LeadingAddon";
-
-// src/input/InputLeadingIcon.tsx
-var import_class_variance_authority7 = require("class-variance-authority");
-
-// src/input/InputIcon.tsx
-var import_class_variance_authority6 = require("class-variance-authority");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var InputIcon = ({ className, intent, children, ...others }) => {
-  const { disabled, readOnly } = useInputGroup();
-  const isInactive = disabled || readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    Icon,
-    {
-      "data-spark-component": "input-icon",
-      intent,
-      className: (0, import_class_variance_authority6.cx)(
-        className,
-        "pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2",
-        intent ? void 0 : "text-neutral peer-focus:text-outline-high",
-        isInactive ? "opacity-dim-3" : void 0
-      ),
-      ...others,
-      children
-    }
-  );
-};
-InputIcon.displayName = "InputGroup.Icon";
-
-// src/input/InputLeadingIcon.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var InputLeadingIcon = ({ className, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InputIcon, { className: (0, import_class_variance_authority7.cx)(className, "left-lg text-body-1"), ...others });
-InputLeadingIcon.id = "LeadingIcon";
-InputLeadingIcon.displayName = "InputGroup.LeadingIcon";
-
-// src/input/InputTrailingAddon.tsx
-var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Root3 = ({ className, ref, ...others }) => {
-  const { disabled, readOnly } = useInputGroup();
-  const isInactive = disabled || readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_class_variance_authority8.cx)("rounded-r-lg", isInactive ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    InputAddon,
-    {
-      ref,
-      className: (0, import_class_variance_authority8.cx)(className, "rounded-l-0! ml-[-1px] rounded-r-lg"),
-      ...others
-    }
-  ) });
-};
-var InputTrailingAddon = Object.assign(Root3, {
-  id: "TrailingAddon"
-});
-Root3.displayName = "InputGroup.TrailingAddon";
-
-// src/input/InputTrailingIcon.tsx
-var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var InputTrailingIcon = ({ className, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(InputIcon, { className: (0, import_class_variance_authority9.cx)(className, "right-lg text-body-1"), ...others });
-InputTrailingIcon.id = "TrailingIcon";
-InputTrailingIcon.displayName = "InputGroup.TrailingIcon";
-
-// src/input/Input.tsx
-var import_form_field2 = require("@spark-ui/components/form-field");
-
-// src/input/Input.styles.ts
-var import_class_variance_authority10 = require("class-variance-authority");
-var inputStyles = (0, import_class_variance_authority10.cva)(
-  [
-    "relative",
-    "border-sm",
-    "peer",
-    "w-full",
-    "appearance-none outline-hidden",
-    "bg-surface",
-    "text-ellipsis text-body-1 text-on-surface",
-    "caret-neutral",
-    "[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]",
-    "autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]",
-    "disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3",
-    "read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5",
-    "focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus"
-  ],
-  {
-    variants: {
-      /**
-       * Change the component to the HTML tag or custom component of the only child.
-       */
-      asChild: {
-        true: ["min-h-sz-44"],
-        false: ["h-sz-44"]
-      },
-      /**
-       * Color scheme of the button.
-       */
-      intent: {
-        neutral: ["border-outline", "default:hover:border-outline-high"],
-        success: ["default:border-success"],
-        alert: ["default:border-alert"],
-        error: ["default:border-error"]
-      },
-      /**
-       * Sets if there is an addon before the input text.
-       */
-      hasLeadingAddon: {
-        true: ["rounded-l-0"],
-        false: ["rounded-l-lg"]
-      },
-      /**
-       * Sets if there is an addon after the input text.
-       */
-      hasTrailingAddon: {
-        true: ["rounded-r-0"],
-        false: ["rounded-r-lg"]
-      },
-      /**
-       * Sets if there is an icon before the input text.
-       */
-      hasLeadingIcon: {
-        true: ["pl-3xl"],
-        false: ["pl-lg"]
-      },
-      /**
-       * Sets if there is an icon after the input text.
-       */
-      hasTrailingIcon: { true: "" },
-      /**
-       * Sets if there is a button to clear the input text.
-       */
-      hasClearButton: { true: "" }
-    },
-    compoundVariants: [
-      {
-        hasTrailingIcon: false,
-        hasClearButton: false,
-        class: "pr-lg"
-      },
-      {
-        hasTrailingIcon: true,
-        hasClearButton: false,
-        class: "pr-3xl"
-      },
-      {
-        hasTrailingIcon: false,
-        hasClearButton: true,
-        class: "pr-3xl"
-      },
-      {
-        hasTrailingIcon: true,
-        hasClearButton: true,
-        class: "pr-[calc(var(--spacing-3xl)*2)]"
-      }
-    ],
-    defaultVariants: {
-      intent: "neutral"
-    }
-  }
-);
-
-// src/input/Input.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Root4 = ({
-  className,
-  asChild = false,
-  onValueChange,
-  onChange,
-  onKeyDown,
-  disabled: disabledProp,
-  readOnly: readOnlyProp,
-  ref,
-  ...others
-}) => {
-  const field = (0, import_form_field2.useFormFieldControl)();
-  const group = useInputGroup();
-  const { id, name, isInvalid, isRequired, description } = field;
-  const {
-    hasLeadingAddon,
-    hasTrailingAddon,
-    hasLeadingIcon,
-    hasTrailingIcon,
-    hasClearButton,
-    onClear
-  } = group;
-  const Component = asChild ? Slot : "input";
-  const state = field.state || group.state;
-  const disabled = field.disabled || group.disabled || disabledProp;
-  const readOnly = field.readOnly || group.readOnly || readOnlyProp;
-  const handleChange = (event) => {
-    if (onChange) {
-      onChange(event);
-    }
-    if (onValueChange) {
-      onValueChange(event.target.value);
-    }
-  };
-  const handleKeyDown = (event) => {
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-    if (hasClearButton && onClear && event.key === "Escape") {
-      onClear();
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    Component,
-    {
-      "data-spark-component": "input",
-      ref,
-      id,
-      name,
-      className: inputStyles({
-        asChild,
-        className,
-        intent: state,
-        hasLeadingAddon: !!hasLeadingAddon,
-        hasTrailingAddon: !!hasTrailingAddon,
-        hasLeadingIcon: !!hasLeadingIcon,
-        hasTrailingIcon: !!hasTrailingIcon,
-        hasClearButton: !!hasClearButton
-      }),
-      disabled,
-      readOnly,
-      required: isRequired,
-      "aria-describedby": description,
-      "aria-invalid": isInvalid,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      ...others
-    }
-  );
-};
-var Input = Object.assign(Root4, {
-  id: "Input"
-});
-Root4.displayName = "Input";
-
-// src/input/index.ts
-var InputGroup2 = Object.assign(InputGroup, {
-  LeadingAddon: InputLeadingAddon,
-  TrailingAddon: InputTrailingAddon,
-  LeadingIcon: InputLeadingIcon,
-  TrailingIcon: InputTrailingIcon,
-  ClearButton: InputClearButton
-});
-InputGroup2.displayName = "InputGroup";
-InputLeadingAddon.displayName = "InputGroup.LeadingAddon";
-InputTrailingAddon.displayName = "InputGroup.TrailingAddon";
-InputLeadingIcon.displayName = "InputGroup.LeadingIcon";
-InputTrailingIcon.displayName = "InputGroup.TrailingIcon";
-InputClearButton.displayName = "InputGroup.ClearButton";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Input,
-  InputGroup,
-  useInputGroup
-});
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),re=require("@spark-ui/icons/DeleteOutline"),u=require("class-variance-authority"),_=require("../Icon-CF0W0LKr.js"),d=require("react"),$=require("@spark-ui/components/form-field"),oe=require("@spark-ui/hooks/use-combined-state"),le=require("@spark-ui/hooks/use-merge-refs"),P=require("../Slot-DQ8z2zsy.js"),K=d.createContext(null),v=()=>d.useContext(K)||{isStandalone:!0},H=({className:n,tabIndex:e=-1,onClick:t,inline:o=!1,ref:l,...s})=>{const{onClear:i,hasTrailingIcon:b}=v(),c=a=>{t&&t(a),i&&i()};return r.jsx("button",{ref:l,"data-spark-component":"input-clear-button",className:u.cx(n,"pointer-events-auto absolute",o?"h-sz-44 top-0 -translate-y-0":"top-1/2 -translate-y-1/2","inline-flex h-full items-center justify-center outline-hidden","text-neutral hover:text-neutral-hovered",b?"right-3xl px-sz-12":"pl-md pr-lg right-0"),tabIndex:e,onClick:c,type:"button",...s,children:r.jsx(_.Icon,{size:"sm",children:r.jsx(re.DeleteOutline,{})})})},J=Object.assign(H,{id:"ClearButton"});H.displayName="InputGroup.ClearButton";const ie=u.cva(["relative inline-flex w-full"],{variants:{disabled:{true:["cursor-not-allowed","relative","after:absolute","after:top-0","after:h-full","after:w-full","after:border-sm after:border-outline","after:rounded-lg"],false:"after:hidden"},readOnly:{true:["relative","after:absolute","after:top-0","after:h-full","after:w-full","after:border-sm after:border-outline","after:rounded-lg"],false:"after:hidden"}}}),Q=({className:n,children:e,state:t,disabled:o,readOnly:l,onClear:s,ref:i,...b})=>{const c=y=>y?y.type.id:"",a=(...y)=>f.find(se=>y.includes(c(se)||"")),f=d.Children.toArray(e).filter(d.isValidElement),g=a("Input"),h=g?.props||{},I=d.useRef(null),C=d.useRef(s),S=le.useMergeRefs(g?.ref,I),[j,A]=oe.useCombinedState(h.value,h.defaultValue,h.onValueChange),N=$.useFormFieldControl(),O=N.state??t,m=N.disabled||!!o,x=N.readOnly||!!l,G=a("LeadingAddon"),L=a("LeadingIcon"),B=a("ClearButton"),R=a("TrailingIcon"),w=a("TrailingAddon"),T=!!G,p=!!w,D=!!L,F=!!R,V=!!j&&!!B&&!m&&!x,ne=y=>{h.onChange&&h.onChange(y),A(y.target.value)},M=d.useCallback(()=>{C.current&&C.current(),A(""),I.current.focus()},[A]),te=d.useMemo(()=>({state:O,disabled:m,readOnly:x,hasLeadingIcon:D,hasTrailingIcon:F,hasLeadingAddon:T,hasTrailingAddon:p,hasClearButton:V,onClear:M}),[O,m,x,D,F,T,p,V,M]);d.useEffect(()=>{C.current=s},[s]);const ae=I.current?.value;return r.jsx(K.Provider,{value:te,children:r.jsxs("div",{"data-spark-component":"input-group",ref:i,className:ie({disabled:m,readOnly:x,className:n}),...b,children:[T&&G,r.jsxs("div",{className:"relative inline-flex w-full",children:[g&&d.cloneElement(g,{value:j??ae??"",ref:S,defaultValue:void 0,onChange:ne}),L,V&&B,R]}),p&&w]})})};Q.displayName="InputGroup";const de=u.cva(["overflow-hidden","border-sm","shrink-0","h-full","focus-visible:relative focus-visible:z-raised","mx-0"],{variants:{asChild:{false:["flex","items-center","px-lg"]},intent:{neutral:"border-outline",error:"border-error",alert:"border-alert",success:"border-success"},disabled:{true:["pointer-events-none border-outline!"]},readOnly:{true:["pointer-events-none"]},design:{text:"",solid:"",inline:""}},compoundVariants:[{disabled:!1,readOnly:!1,design:"text",class:["bg-surface","text-on-surface"]},{disabled:!0,design:"text",class:["text-on-surface/dim-3"]},{disabled:!0,design:["solid","inline"],class:["opacity-dim-3"]}],defaultVariants:{intent:"neutral"}}),z=({asChild:n,className:e,children:t,ref:o,...l})=>{const{state:s,disabled:i,readOnly:b}=v(),c=typeof t=="string",a=!!(!c&&n),f=c?t:d.Children.only(t),g=a&&!c?P.Slot:"div",I=c?"text":a?"solid":"inline";return r.jsx(g,{ref:o,"data-spark-component":"input-addon",className:de({className:e,intent:s,disabled:i,readOnly:b,asChild:a,design:I}),...i&&{tabIndex:-1},...l,children:f})};z.displayName="InputGroup.Addon";const U=({className:n,ref:e,...t})=>{const{disabled:o,readOnly:l}=v(),s=o||l;return r.jsx("div",{className:u.cx("rounded-l-lg",s?"bg-on-surface/dim-5":null),children:r.jsx(z,{ref:e,className:u.cx(n,"rounded-r-0! mr-[-1px] rounded-l-lg"),...t})})},W=Object.assign(U,{id:"LeadingAddon"});U.displayName="InputGroup.LeadingAddon";const E=({className:n,intent:e,children:t,...o})=>{const{disabled:l,readOnly:s}=v(),i=l||s;return r.jsx(_.Icon,{"data-spark-component":"input-icon",intent:e,className:u.cx(n,"pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2",e?void 0:"text-neutral peer-focus:text-outline-high",i?"opacity-dim-3":void 0),...o,children:t})};E.displayName="InputGroup.Icon";const k=({className:n,...e})=>r.jsx(E,{className:u.cx(n,"left-lg text-body-1"),...e});k.id="LeadingIcon";k.displayName="InputGroup.LeadingIcon";const X=({className:n,ref:e,...t})=>{const{disabled:o,readOnly:l}=v(),s=o||l;return r.jsx("div",{className:u.cx("rounded-r-lg",s?"bg-on-surface/dim-5":null),children:r.jsx(z,{ref:e,className:u.cx(n,"rounded-l-0! ml-[-1px] rounded-r-lg"),...t})})},Y=Object.assign(X,{id:"TrailingAddon"});X.displayName="InputGroup.TrailingAddon";const q=({className:n,...e})=>r.jsx(E,{className:u.cx(n,"right-lg text-body-1"),...e});q.id="TrailingIcon";q.displayName="InputGroup.TrailingIcon";const ue=u.cva(["relative","border-sm","peer","w-full","appearance-none outline-hidden","bg-surface","text-ellipsis text-body-1 text-on-surface","caret-neutral","[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]","autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]","disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3","read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5","focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus"],{variants:{asChild:{true:["min-h-sz-44"],false:["h-sz-44"]},intent:{neutral:["border-outline","default:hover:border-outline-high"],success:["default:border-success"],alert:["default:border-alert"],error:["default:border-error"]},hasLeadingAddon:{true:["rounded-l-0"],false:["rounded-l-lg"]},hasTrailingAddon:{true:["rounded-r-0"],false:["rounded-r-lg"]},hasLeadingIcon:{true:["pl-3xl"],false:["pl-lg"]},hasTrailingIcon:{true:""},hasClearButton:{true:""}},compoundVariants:[{hasTrailingIcon:!1,hasClearButton:!1,class:"pr-lg"},{hasTrailingIcon:!0,hasClearButton:!1,class:"pr-3xl"},{hasTrailingIcon:!1,hasClearButton:!0,class:"pr-3xl"},{hasTrailingIcon:!0,hasClearButton:!0,class:"pr-[calc(var(--spacing-3xl)*2)]"}],defaultVariants:{intent:"neutral"}}),Z=({className:n,asChild:e=!1,onValueChange:t,onChange:o,onKeyDown:l,disabled:s,readOnly:i,ref:b,...c})=>{const a=$.useFormFieldControl(),f=v(),{id:g,name:h,isInvalid:I,isRequired:C,description:S}=a,{hasLeadingAddon:j,hasTrailingAddon:A,hasLeadingIcon:N,hasTrailingIcon:O,hasClearButton:m,onClear:x}=f,G=e?P.Slot:"input",L=a.state||f.state,B=a.disabled||f.disabled||s,R=a.readOnly||f.readOnly||i,w=p=>{o&&o(p),t&&t(p.target.value)},T=p=>{l&&l(p),m&&x&&p.key==="Escape"&&x()};return r.jsx(G,{"data-spark-component":"input",ref:b,id:g,name:h,className:ue({asChild:e,className:n,intent:L,hasLeadingAddon:!!j,hasTrailingAddon:!!A,hasLeadingIcon:!!N,hasTrailingIcon:!!O,hasClearButton:!!m}),disabled:B,readOnly:R,required:C,"aria-describedby":S,"aria-invalid":I,onChange:w,onKeyDown:T,...c})},ce=Object.assign(Z,{id:"Input"});Z.displayName="Input";const ee=Object.assign(Q,{LeadingAddon:W,TrailingAddon:Y,LeadingIcon:k,TrailingIcon:q,ClearButton:J});ee.displayName="InputGroup";W.displayName="InputGroup.LeadingAddon";Y.displayName="InputGroup.TrailingAddon";k.displayName="InputGroup.LeadingIcon";q.displayName="InputGroup.TrailingIcon";J.displayName="InputGroup.ClearButton";exports.Input=ce;exports.InputGroup=ee;exports.useInputGroup=v;
+//# sourceMappingURL=index.js.map