@spark-ui/components 13.1.4 → 13.2.0

package/dist/select/index.js

@@ -1,581 +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/select/index.ts
-var select_exports = {};
-__export(select_exports, {
-  Select: () => Select2,
-  SelectProvider: () => SelectProvider,
-  useSelectContext: () => useSelectContext
-});
-module.exports = __toCommonJS(select_exports);
-
-// src/select/SelectContext.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_react2 = require("react");
-
-// src/select/utils.ts
-var import_react = require("react");
-var findElement = (children) => (name) => {
-  const validChildren = import_react.Children.toArray(children).filter(import_react.isValidElement);
-  return validChildren.find((child) => {
-    return getElementDisplayName(child)?.includes(name);
-  });
-};
-var getElementDisplayName = (element) => {
-  return element ? element.type.displayName : "";
-};
-var getOrderedItems = (children, result = []) => {
-  import_react.Children.forEach(children, (child) => {
-    if (!(0, import_react.isValidElement)(child)) return;
-    if (getElementDisplayName(child) === "Select.Item" || getElementDisplayName(child) === "Select.Placeholder") {
-      const childProps = child.props;
-      result.push({
-        value: childProps.value,
-        disabled: !!childProps.disabled,
-        text: childProps.children
-      });
-    }
-    if (child.props.children) {
-      getOrderedItems(child.props.children, result);
-    }
-  });
-  return result;
-};
-var getItemsFromChildren = (children) => {
-  const newMap = /* @__PURE__ */ new Map();
-  getOrderedItems(children).forEach((itemData) => {
-    newMap.set(itemData.value, itemData);
-  });
-  return newMap;
-};
-
-// src/select/SelectContext.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var SelectContext = (0, import_react2.createContext)(null);
-var ID_PREFIX = ":select";
-var SelectProvider = ({
-  children,
-  defaultValue,
-  value: valueProp,
-  onValueChange,
-  disabled: disabledProp = false,
-  readOnly: readOnlyProp = false,
-  state: stateProp,
-  itemsComponent,
-  name: nameProp,
-  required: requiredProp
-}) => {
-  const [value, setValue] = (0, import_use_combined_state.useCombinedState)(valueProp, defaultValue, onValueChange);
-  const [placeholder, setPlaceholder] = (0, import_react2.useState)(void 0);
-  const [itemsMap, setItemsMap] = (0, import_react2.useState)(getItemsFromChildren(itemsComponent));
-  const [ariaLabel, setAriaLabel] = (0, import_react2.useState)();
-  const firstItem = itemsMap.entries().next()?.value?.[1];
-  const selectedItem = typeof value === "string" ? itemsMap.get(value) : firstItem;
-  const isControlled = valueProp != null;
-  const field = (0, import_form_field.useFormFieldControl)();
-  const state = field.state || stateProp;
-  const internalFieldID = `${ID_PREFIX}-field-${(0, import_react2.useId)()}`;
-  const fieldId = field.id || internalFieldID;
-  const fieldLabelId = field.labelId;
-  const disabled = field.disabled ?? disabledProp;
-  const readOnly = field.readOnly ?? readOnlyProp;
-  const name = field.name ?? nameProp;
-  const required = !!(field.isRequired ?? requiredProp);
-  (0, import_react2.useEffect)(() => {
-    const newMap = getItemsFromChildren(itemsComponent);
-    const previousItems = [...itemsMap.values()];
-    const newItems = [...newMap.values()];
-    const hasItemsChanges = previousItems.length !== newItems.length || previousItems.some((item, index) => {
-      const hasUpdatedValue = item.value !== newItems[index]?.value;
-      const hasUpdatedText = item.text !== newItems[index]?.text;
-      return hasUpdatedValue || hasUpdatedText;
-    });
-    if (hasItemsChanges) {
-      setItemsMap(newMap);
-    }
-  }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    SelectContext.Provider,
-    {
-      value: {
-        disabled,
-        readOnly,
-        itemsMap,
-        state,
-        itemsComponent,
-        selectedItem,
-        setValue,
-        isControlled,
-        onValueChange,
-        ariaLabel,
-        setAriaLabel,
-        fieldId,
-        fieldLabelId,
-        name,
-        required,
-        placeholder,
-        setPlaceholder
-      },
-      children
-    }
-  );
-};
-var useSelectContext = () => {
-  const context = (0, import_react2.useContext)(SelectContext);
-  if (!context) {
-    throw Error("useSelectContext must be used within a Select provider");
-  }
-  return context;
-};
-
-// src/select/Select.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Select = ({ children, ...props }) => {
-  const finder = findElement(children);
-  const trigger = finder("Trigger");
-  const items = finder("Items");
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SelectProvider, { ...props, itemsComponent: items, children: trigger });
-};
-Select.displayName = "Select";
-
-// src/select/SelectGroup.tsx
-var import_class_variance_authority = require("class-variance-authority");
-
-// src/select/SelectItemsGroupContext.tsx
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var SelectGroupContext = (0, import_react3.createContext)(null);
-var SelectGroupProvider = ({ children }) => {
-  const [groupLabel, setGroupLabel] = (0, import_react3.useState)("");
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectGroupContext.Provider, { value: { groupLabel, setGroupLabel }, children });
-};
-var useSelectGroupContext = () => {
-  const context = (0, import_react3.useContext)(SelectGroupContext);
-  if (!context) {
-    throw Error("useSelectGroupContext must be used within a SelectGroup provider");
-  }
-  return context;
-};
-
-// src/select/SelectGroup.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Group = ({ children, ref: forwardedRef, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GroupContent, { ref: forwardedRef, ...props, children }) });
-};
-var GroupContent = ({ children, className, ref: forwardedRef }) => {
-  const { groupLabel } = useSelectGroupContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "optgroup",
-    {
-      "data-spark-component": "select-group",
-      ref: forwardedRef,
-      className: (0, import_class_variance_authority.cx)(className),
-      label: groupLabel,
-      children
-    }
-  );
-};
-Group.displayName = "Select.Group";
-
-// src/select/SelectItem.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Item = ({ disabled = false, value, children, ref: forwardedRef }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "option",
-    {
-      "data-spark-component": "select-item",
-      ref: forwardedRef,
-      value,
-      disabled,
-      children
-    },
-    value
-  );
-};
-Item.displayName = "Select.Item";
-
-// src/select/SelectItems.tsx
-var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var styles = (0, import_class_variance_authority2.cva)(
-  [
-    "absolute left-0 top-0 size-full rounded-lg opacity-0",
-    "min-h-sz-44",
-    // outline styles
-    "ring-1 outline-hidden ring-inset focus:ring-2"
-  ],
-  {
-    variants: {
-      state: {
-        undefined: "ring-outline focus:ring-outline-high",
-        error: "ring-error",
-        alert: "ring-alert",
-        success: "ring-success"
-      },
-      disabled: {
-        true: "cursor-not-allowed"
-      },
-      readOnly: {
-        true: "cursor-default"
-      }
-    },
-    compoundVariants: [
-      {
-        disabled: false,
-        state: void 0,
-        class: "hover:ring-outline-high"
-      }
-    ]
-  }
-);
-var Items = ({
-  children,
-  className,
-  ref,
-  ...rest
-}) => {
-  const {
-    state,
-    disabled,
-    readOnly,
-    ariaLabel,
-    fieldLabelId,
-    isControlled,
-    onValueChange,
-    selectedItem,
-    setValue,
-    name,
-    required,
-    fieldId
-  } = useSelectContext();
-  const handleChange = (event) => {
-    if (isControlled) {
-      event.preventDefault();
-      onValueChange?.(event.target.value);
-    } else {
-      setValue(event.target.value);
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "select",
-    {
-      "data-spark-component": "select-items",
-      ref,
-      disabled: disabled || readOnly,
-      name,
-      required,
-      "aria-labelledby": fieldLabelId,
-      ...ariaLabel && { "aria-label": ariaLabel },
-      className: styles({ className, state, disabled, readOnly }),
-      value: selectedItem?.value,
-      onChange: handleChange,
-      id: fieldId,
-      ...rest,
-      children
-    }
-  );
-};
-Items.displayName = "Select.Items";
-
-// src/select/SelectLabel.tsx
-var import_react4 = require("react");
-var Label = ({ children }) => {
-  const { setGroupLabel } = useSelectGroupContext();
-  (0, import_react4.useEffect)(() => {
-    setGroupLabel(children);
-  }, [children]);
-  return null;
-};
-Label.displayName = "Select.Label";
-
-// src/icon/Icon.tsx
-var import_react6 = require("react");
-
-// src/slot/Slot.tsx
-var import_radix_ui = require("radix-ui");
-var import_react5 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Slottable = import_radix_ui.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
-};
-
-// src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.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_authority3 = require("class-variance-authority");
-var iconStyles = (0, import_class_variance_authority3.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_runtime9 = require("react/jsx-runtime");
-var Icon = ({
-  label,
-  className,
-  size = "current",
-  intent = "current",
-  children,
-  ...others
-}) => {
-  const child = import_react6.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    (0, import_react6.cloneElement)(child, {
-      className: iconStyles({ className, size, intent }),
-      "data-spark-component": "icon",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...others
-    }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(VisuallyHidden, { children: label })
-  ] });
-};
-Icon.displayName = "Icon";
-
-// src/select/SelectLeadingIcon.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var LeadingIcon = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { size: "sm", className: "shrink-0", children });
-};
-LeadingIcon.displayName = "Select.LeadingIcon";
-
-// src/select/SelectPlaceholder.tsx
-var import_react7 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Placeholder = ({
-  disabled = false,
-  children,
-  ref: forwardedRef
-}) => {
-  const { setPlaceholder } = useSelectContext();
-  (0, import_react7.useEffect)(() => {
-    setPlaceholder(children);
-  }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    "option",
-    {
-      "data-spark-component": "select-placeholder",
-      ref: forwardedRef,
-      value: "",
-      disabled,
-      children
-    },
-    "placeholder"
-  );
-};
-Placeholder.displayName = "Select.Placeholder";
-
-// src/select/SelectTrigger.tsx
-var import_ArrowHorizontalDown = require("@spark-ui/icons/ArrowHorizontalDown");
-var import_react8 = require("react");
-
-// src/select/SelectTrigger.styles.tsx
-var import_class_variance_authority4 = require("class-variance-authority");
-var styles2 = (0, import_class_variance_authority4.cva)(
-  [
-    "relative flex w-full items-center justify-between",
-    "min-h-sz-44 rounded-lg px-lg",
-    "text-body-1",
-    // outline styles
-    "ring-1 outline-hidden ring-inset focus-within:ring-focus"
-  ],
-  {
-    variants: {
-      state: {
-        undefined: "ring-outline",
-        error: "ring-error",
-        alert: "ring-alert",
-        success: "ring-success"
-      },
-      disabled: {
-        false: "focus-within:ring-2"
-      },
-      readOnly: {
-        true: ""
-      }
-    },
-    compoundVariants: [
-      {
-        readOnly: false,
-        disabled: false,
-        class: "bg-surface text-on-surface"
-      },
-      {
-        readOnly: true,
-        class: "bg-on-surface/dim-5 text-on-surface cursor-default"
-      },
-      {
-        disabled: true,
-        class: ["bg-on-surface/dim-5 text-on-surface/dim-3", "cursor-not-allowed"]
-      },
-      {
-        disabled: false,
-        state: void 0,
-        class: "default:hover:ring-outline-high"
-      }
-    ]
-  }
-);
-
-// src/select/SelectTrigger.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Trigger = ({
-  "aria-label": ariaLabel,
-  children,
-  className,
-  ref: forwardedRef
-}) => {
-  const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext();
-  (0, import_react8.useEffect)(() => {
-    if (ariaLabel) {
-      setAriaLabel(ariaLabel);
-    }
-  }, [ariaLabel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "div",
-    {
-      "data-spark-component": "select-trigger",
-      ref: forwardedRef,
-      className: styles2({ className, state, disabled, readOnly }),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "gap-md flex items-center justify-start", children }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "ml-md shrink-0", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {}) }),
-        itemsComponent
-      ]
-    }
-  );
-};
-Trigger.displayName = "Select.Trigger";
-
-// src/select/SelectValue.tsx
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Value = ({
-  children,
-  className,
-  placeholder: customPlaceholder,
-  ref: forwardedRef
-}) => {
-  const { selectedItem, placeholder, disabled } = useSelectContext();
-  const isPlaceholderSelected = selectedItem?.value == null;
-  const valuePlaceholder = customPlaceholder || placeholder;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    "span",
-    {
-      role: "presentation",
-      "data-spark-component": "select-value",
-      ref: forwardedRef,
-      className: (0, import_class_variance_authority5.cx)("flex shrink items-center text-left", className),
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        "span",
-        {
-          className: (0, import_class_variance_authority5.cx)(
-            "line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis",
-            isPlaceholderSelected && !disabled && "text-on-surface/dim-1"
-          ),
-          children: isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text
-        }
-      )
-    }
-  );
-};
-Value.displayName = "Select.Value";
-
-// src/select/index.ts
-var Select2 = Object.assign(Select, {
-  Group,
-  Item,
-  Items,
-  Placeholder,
-  Label,
-  Trigger,
-  Value,
-  LeadingIcon
-});
-Select2.displayName = "Select";
-Group.displayName = "Select.Group";
-Items.displayName = "Select.Items";
-Item.displayName = "Select.Item";
-Placeholder.displayName = "Select.Placeholder";
-Label.displayName = "Select.Label";
-Trigger.displayName = "Select.Trigger";
-Value.displayName = "Select.Value";
-LeadingIcon.displayName = "Select.LeadingIcon";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Select,
-  SelectProvider,
-  useSelectContext
-});
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),ae=require("@spark-ui/components/form-field"),ne=require("@spark-ui/hooks/use-combined-state"),r=require("react"),f=require("class-variance-authority"),M=require("../Icon-CF0W0LKr.js"),oe=require("@spark-ui/icons/ArrowHorizontalDown"),ce=e=>t=>r.Children.toArray(e).filter(r.isValidElement).find(l=>C(l)?.includes(t)),C=e=>e?e.type.displayName:"",T=(e,t=[])=>(r.Children.forEach(e,s=>{if(r.isValidElement(s)){if(C(s)==="Select.Item"||C(s)==="Select.Placeholder"){const l=s.props;t.push({value:l.value,disabled:!!l.disabled,text:l.children})}s.props.children&&T(s.props.children,t)}}),t),F=e=>{const t=new Map;return T(e).forEach(s=>{t.set(s.value,s)}),t},D=r.createContext(null),ie=":select",R=({children:e,defaultValue:t,value:s,onValueChange:l,disabled:o=!1,readOnly:c=!1,state:i,itemsComponent:n,name:d,required:x})=>{const[h,b]=ne.useCombinedState(s,t,l),[S,y]=r.useState(void 0),[m,v]=r.useState(F(n)),[I,p]=r.useState(),_=m.entries().next()?.value?.[1],B=typeof h=="string"?m.get(h):_,J=s!=null,u=ae.useFormFieldControl(),K=u.state||i,Q=`${ie}-field-${r.useId()}`,W=u.id||Q,Y=u.labelId,Z=u.disabled??o,ee=u.readOnly??c,te=u.name??d,se=!!(u.isRequired??x);return r.useEffect(()=>{const V=F(n),k=[...m.values()],N=[...V.values()];(k.length!==N.length||k.some((z,A)=>{const le=z.value!==N[A]?.value,re=z.text!==N[A]?.text;return le||re}))&&v(V)},[e]),a.jsx(D.Provider,{value:{disabled:Z,readOnly:ee,itemsMap:m,state:K,itemsComponent:n,selectedItem:B,setValue:b,isControlled:J,onValueChange:l,ariaLabel:I,setAriaLabel:p,fieldId:W,fieldLabelId:Y,name:te,required:se,placeholder:S,setPlaceholder:y},children:e})},g=()=>{const e=r.useContext(D);if(!e)throw Error("useSelectContext must be used within a Select provider");return e},$=({children:e,...t})=>{const s=ce(e),l=s("Trigger"),o=s("Items");return a.jsx(R,{...t,itemsComponent:o,children:l})};$.displayName="Select";const H=r.createContext(null),de=({children:e})=>{const[t,s]=r.useState("");return a.jsx(H.Provider,{value:{groupLabel:t,setGroupLabel:s},children:e})},U=()=>{const e=r.useContext(H);if(!e)throw Error("useSelectGroupContext must be used within a SelectGroup provider");return e},j=({children:e,ref:t,...s})=>a.jsx(de,{children:a.jsx(ue,{ref:t,...s,children:e})}),ue=({children:e,className:t,ref:s})=>{const{groupLabel:l}=U();return a.jsx("optgroup",{"data-spark-component":"select-group",ref:s,className:f.cx(t),label:l,children:e})};j.displayName="Select.Group";const w=({disabled:e=!1,value:t,children:s,ref:l})=>a.jsx("option",{"data-spark-component":"select-item",ref:l,value:t,disabled:e,children:s},t);w.displayName="Select.Item";const me=f.cva(["absolute left-0 top-0 size-full rounded-lg opacity-0","min-h-sz-44","ring-1 outline-hidden ring-inset focus:ring-2"],{variants:{state:{undefined:"ring-outline focus:ring-outline-high",error:"ring-error",alert:"ring-alert",success:"ring-success"},disabled:{true:"cursor-not-allowed"},readOnly:{true:"cursor-default"}},compoundVariants:[{disabled:!1,state:void 0,class:"hover:ring-outline-high"}]}),P=({children:e,className:t,ref:s,...l})=>{const{state:o,disabled:c,readOnly:i,ariaLabel:n,fieldLabelId:d,isControlled:x,onValueChange:h,selectedItem:b,setValue:S,name:y,required:m,fieldId:v}=g(),I=p=>{x?(p.preventDefault(),h?.(p.target.value)):S(p.target.value)};return a.jsx("select",{"data-spark-component":"select-items",ref:s,disabled:c||i,name:y,required:m,"aria-labelledby":d,...n&&{"aria-label":n},className:me({className:t,state:o,disabled:c,readOnly:i}),value:b?.value,onChange:I,id:v,...l,children:e})};P.displayName="Select.Items";const L=({children:e})=>{const{setGroupLabel:t}=U();return r.useEffect(()=>{t(e)},[e]),null};L.displayName="Select.Label";const E=({children:e})=>a.jsx(M.Icon,{size:"sm",className:"shrink-0",children:e});E.displayName="Select.LeadingIcon";const O=({disabled:e=!1,children:t,ref:s})=>{const{setPlaceholder:l}=g();return r.useEffect(()=>{l(t)},[t]),a.jsx("option",{"data-spark-component":"select-placeholder",ref:s,value:"",disabled:e,children:t},"placeholder")};O.displayName="Select.Placeholder";const pe=f.cva(["relative flex w-full items-center justify-between","min-h-sz-44 rounded-lg px-lg","text-body-1","ring-1 outline-hidden ring-inset focus-within:ring-focus"],{variants:{state:{undefined:"ring-outline",error:"ring-error",alert:"ring-alert",success:"ring-success"},disabled:{false:"focus-within:ring-2"},readOnly:{true:""}},compoundVariants:[{readOnly:!1,disabled:!1,class:"bg-surface text-on-surface"},{readOnly:!0,class:"bg-on-surface/dim-5 text-on-surface cursor-default"},{disabled:!0,class:["bg-on-surface/dim-5 text-on-surface/dim-3","cursor-not-allowed"]},{disabled:!1,state:void 0,class:"default:hover:ring-outline-high"}]}),q=({"aria-label":e,children:t,className:s,ref:l})=>{const{disabled:o,readOnly:c,state:i,setAriaLabel:n,itemsComponent:d}=g();return r.useEffect(()=>{e&&n(e)},[e]),a.jsxs("div",{"data-spark-component":"select-trigger",ref:l,className:pe({className:s,state:i,disabled:o,readOnly:c}),children:[a.jsx("span",{className:"gap-md flex items-center justify-start",children:t}),a.jsx(M.Icon,{className:"ml-md shrink-0",size:"sm",children:a.jsx(oe.ArrowHorizontalDown,{})}),d]})};q.displayName="Select.Trigger";const G=({children:e,className:t,placeholder:s,ref:l})=>{const{selectedItem:o,placeholder:c,disabled:i}=g(),n=o?.value==null,d=s||c;return a.jsx("span",{role:"presentation","data-spark-component":"select-value",ref:l,className:f.cx("flex shrink items-center text-left",t),children:a.jsx("span",{className:f.cx("line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis",n&&!i&&"text-on-surface/dim-1"),children:n?d:e||o?.text})})};G.displayName="Select.Value";const X=Object.assign($,{Group:j,Item:w,Items:P,Placeholder:O,Label:L,Trigger:q,Value:G,LeadingIcon:E});X.displayName="Select";j.displayName="Select.Group";P.displayName="Select.Items";w.displayName="Select.Item";O.displayName="Select.Placeholder";L.displayName="Select.Label";q.displayName="Select.Trigger";G.displayName="Select.Value";E.displayName="Select.LeadingIcon";exports.Select=X;exports.SelectProvider=R;exports.useSelectContext=g;
+//# sourceMappingURL=index.js.map