@spark-ui/components 10.0.0

package/dist/select/index.js

@@ -0,0 +1,991 @@
+"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_use_combined_state = require("@spark-ui/use-combined-state");
+var import_react9 = require("react");
+
+// src/form-field/FormField.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react4 = 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/form-field/FormFieldContext.tsx
+var import_react2 = require("react");
+var FormFieldContext = (0, import_react2.createContext)(null);
+var ID_PREFIX = ":form-field";
+var useFormField = () => {
+  const context = (0, import_react2.useContext)(FormFieldContext);
+  if (!context) {
+    throw Error("useFormField must be used within a FormField provider");
+  }
+  return context;
+};
+
+// src/form-field/FormFieldProvider.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FormFieldProvider = ({
+  id,
+  name,
+  disabled = false,
+  readOnly = false,
+  state,
+  isRequired,
+  children
+}) => {
+  const labelId = `${ID_PREFIX}-label-${(0, import_react3.useId)()}`;
+  const [messageIds, setMessageIds] = (0, import_react3.useState)([]);
+  const description = messageIds.length > 0 ? messageIds.join(" ") : void 0;
+  const handleMessageIdAdd = (0, import_react3.useCallback)((msgId) => {
+    setMessageIds((ids) => [...ids, msgId]);
+  }, []);
+  const handleMessageIdRemove = (0, import_react3.useCallback)((msgId) => {
+    setMessageIds((ids) => ids.filter((current) => current !== msgId));
+  }, []);
+  const value = (0, import_react3.useMemo)(() => {
+    const isInvalid = state === "error";
+    return {
+      id,
+      labelId,
+      name,
+      disabled,
+      readOnly,
+      state,
+      isRequired,
+      isInvalid,
+      description,
+      onMessageIdAdd: handleMessageIdAdd,
+      onMessageIdRemove: handleMessageIdRemove
+    };
+  }, [
+    id,
+    labelId,
+    name,
+    disabled,
+    readOnly,
+    description,
+    state,
+    isRequired,
+    handleMessageIdAdd,
+    handleMessageIdRemove
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormFieldContext.Provider, { value, children });
+};
+FormFieldProvider.displayName = "FormFieldProvider";
+
+// src/form-field/FormField.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FormField = ({
+  className,
+  disabled = false,
+  readOnly = false,
+  name,
+  state,
+  isRequired = false,
+  asChild = false,
+  ref,
+  ...others
+}) => {
+  const id = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
+  const Component = asChild ? Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    FormFieldProvider,
+    {
+      id,
+      name,
+      isRequired,
+      disabled,
+      readOnly,
+      state,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Component,
+        {
+          ref,
+          "data-spark-component": "form-field",
+          className: (0, import_class_variance_authority.cx)(className, "gap-sm flex flex-col"),
+          ...others
+        }
+      )
+    }
+  );
+};
+FormField.displayName = "FormField";
+
+// src/form-field/FormFieldStateMessage.tsx
+var import_AlertOutline = require("@spark-ui/icons/AlertOutline");
+var import_Check = require("@spark-ui/icons/Check");
+var import_WarningOutline = require("@spark-ui/icons/WarningOutline");
+var import_class_variance_authority4 = require("class-variance-authority");
+
+// src/icon/Icon.tsx
+var import_react5 = require("react");
+
+// src/visually-hidden/VisuallyHidden.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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_authority2 = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority2.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_runtime5 = require("react/jsx-runtime");
+var Icon = ({
+  label,
+  className,
+  size = "current",
+  intent = "current",
+  children,
+  ...others
+}) => {
+  const child = import_react5.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    (0, import_react5.cloneElement)(child, {
+      className: iconStyles({ className, size, intent }),
+      "data-spark-component": "icon",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...others
+    }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden, { children: label })
+  ] });
+};
+Icon.displayName = "Icon";
+
+// src/form-field/FormFieldMessage.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var FormFieldMessage = ({
+  id: idProp,
+  className,
+  ref,
+  ...others
+}) => {
+  const { onMessageIdAdd, onMessageIdRemove } = useFormField();
+  const currentId = `${ID_PREFIX}-message-${(0, import_react6.useId)()}`;
+  const id = idProp || currentId;
+  (0, import_react6.useEffect)(() => {
+    onMessageIdAdd(id);
+    return () => {
+      onMessageIdRemove(id);
+    };
+  }, [id, onMessageIdAdd, onMessageIdRemove]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "span",
+    {
+      ref,
+      id,
+      "data-spark-component": "form-field-message",
+      className: (0, import_class_variance_authority3.cx)(className, "text-caption"),
+      ...others
+    }
+  );
+};
+FormFieldMessage.displayName = "FormField.Message";
+
+// src/form-field/FormFieldStateMessage.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FormFieldStateMessage = ({
+  className,
+  state,
+  children,
+  ref,
+  ...others
+}) => {
+  const field = useFormField();
+  if (field.state !== state) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    FormFieldMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-state-message",
+      "aria-live": "polite",
+      className: (0, import_class_variance_authority4.cx)(
+        "gap-sm flex items-center",
+        state === "error" ? "text-error" : "text-on-surface/dim-1",
+        className
+      ),
+      ...others,
+      children: [
+        state === "alert" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_WarningOutline.WarningOutline, {}) }),
+        state === "error" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", intent: "error", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_AlertOutline.AlertOutline, {}) }),
+        state === "success" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Check.Check, {}) }),
+        children
+      ]
+    }
+  );
+};
+FormFieldStateMessage.displayName = "FormField.StateMessage";
+
+// src/form-field/FormFieldAlertMessage.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var FormFieldAlertMessage = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    FormFieldStateMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-alert-message",
+      state: "alert",
+      ...props
+    }
+  );
+};
+FormFieldAlertMessage.displayName = "FormField.AlertMessage";
+
+// src/form-field/FormFieldCharactersCount.tsx
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var FormFieldCharactersCount = ({
+  className,
+  value = "",
+  maxLength,
+  ref,
+  ...others
+}) => {
+  const displayValue = `${value.length}/${maxLength}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "span",
+    {
+      ref,
+      "data-spark-component": "form-field-characters-count",
+      className: (0, import_class_variance_authority5.cx)(className, "text-caption", "text-neutral"),
+      ...others,
+      children: displayValue
+    }
+  );
+};
+FormFieldCharactersCount.displayName = "FormField.CharactersCount";
+
+// src/form-field/FormFieldControl.tsx
+var import_react7 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var useFormFieldControl = () => {
+  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } = (0, import_react7.useContext)(FormFieldContext) || {};
+  return {
+    id,
+    name,
+    description,
+    disabled,
+    readOnly,
+    state,
+    labelId,
+    isInvalid,
+    isRequired
+  };
+};
+var FormFieldControl = ({ children }) => {
+  const props = useFormFieldControl();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: children(props) });
+};
+FormFieldControl.displayName = "FormField.Control";
+
+// src/form-field/FormFieldErrorMessage.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var FormFieldErrorMessage = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    FormFieldStateMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-error-message",
+      state: "error",
+      ...props
+    }
+  );
+};
+FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
+
+// src/form-field/FormFieldHelperMessage.tsx
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FormFieldHelperMessage = ({
+  className,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    FormFieldMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-helper-message",
+      className: (0, import_class_variance_authority6.cx)("text-on-surface/dim-1", className),
+      ...others
+    }
+  );
+};
+FormFieldHelperMessage.displayName = "FormField.HelperMessage";
+
+// src/form-field/FormFieldLabel.tsx
+var import_class_variance_authority10 = require("class-variance-authority");
+
+// src/label/Label.tsx
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Label = ({ className, ref, ...others }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_radix_ui2.Label.Label,
+    {
+      ref,
+      "data-spark-component": "label",
+      className: (0, import_class_variance_authority7.cx)("text-body-1", className),
+      ...others
+    }
+  );
+};
+Label.displayName = "Label";
+
+// src/label/LabelRequiredIndicator.tsx
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var LabelRequiredIndicator = ({
+  className,
+  children = "*",
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "span",
+    {
+      ref,
+      "data-spark-component": "label-required-indicator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: (0, import_class_variance_authority8.cx)(className, "text-caption text-on-surface/dim-1"),
+      ...others,
+      children
+    }
+  );
+};
+LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
+
+// src/label/index.ts
+var Label2 = Object.assign(Label, {
+  RequiredIndicator: LabelRequiredIndicator
+});
+Label2.displayName = "Label";
+LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
+
+// src/form-field/FormFieldRequiredIndicator.tsx
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var FormFieldRequiredIndicator = ({
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label2.RequiredIndicator, { ref, className: (0, import_class_variance_authority9.cx)("ml-sm", className), ...props });
+};
+FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
+
+// src/form-field/FormFieldLabel.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var FormFieldLabel = ({
+  htmlFor: htmlForProp,
+  className,
+  children,
+  requiredIndicator = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FormFieldRequiredIndicator, {}),
+  asChild,
+  ref,
+  ...others
+}) => {
+  const control = useFormField();
+  const { disabled, labelId, isRequired } = control;
+  const htmlFor = asChild ? void 0 : htmlForProp || control.id;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    Label2,
+    {
+      ref,
+      id: labelId,
+      "data-spark-component": "form-field-label",
+      htmlFor,
+      className: (0, import_class_variance_authority10.cx)(className, disabled ? "text-on-surface/dim-3 pointer-events-none" : void 0),
+      asChild,
+      ...others,
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Slottable, { children }),
+        isRequired && requiredIndicator
+      ] })
+    }
+  );
+};
+FormFieldLabel.displayName = "FormField.Label";
+
+// src/form-field/FormFieldSuccessMessage.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var FormFieldSuccessMessage = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    FormFieldStateMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-success-message",
+      state: "success",
+      ...props
+    }
+  );
+};
+FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
+
+// src/form-field/index.ts
+var FormField2 = Object.assign(FormField, {
+  Label: FormFieldLabel,
+  Control: FormFieldControl,
+  StateMessage: FormFieldStateMessage,
+  SuccessMessage: FormFieldSuccessMessage,
+  AlertMessage: FormFieldAlertMessage,
+  ErrorMessage: FormFieldErrorMessage,
+  HelperMessage: FormFieldHelperMessage,
+  RequiredIndicator: FormFieldRequiredIndicator,
+  CharactersCount: FormFieldCharactersCount
+});
+FormField2.displayName = "FormField";
+FormFieldLabel.displayName = "FormField.Label";
+FormFieldControl.displayName = "FormField.Control";
+FormFieldStateMessage.displayName = "FormField.StateMessage";
+FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
+FormFieldAlertMessage.displayName = "FormField.AlertMessage";
+FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
+FormFieldHelperMessage.displayName = "FormField.HelperMessage";
+FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
+FormFieldCharactersCount.displayName = "FormField.CharactersCount";
+
+// src/select/utils.ts
+var import_react8 = require("react");
+var findElement = (children) => (name) => {
+  const validChildren = import_react8.Children.toArray(children).filter(import_react8.isValidElement);
+  return validChildren.find((child) => {
+    return getElementDisplayName(child)?.includes(name);
+  });
+};
+var getElementDisplayName = (element) => {
+  return element ? element.type.displayName : "";
+};
+var getOrderedItems = (children, result = []) => {
+  import_react8.Children.forEach(children, (child) => {
+    if (!(0, import_react8.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_runtime18 = require("react/jsx-runtime");
+var SelectContext = (0, import_react9.createContext)(null);
+var ID_PREFIX2 = ":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_react9.useState)(void 0);
+  const [itemsMap, setItemsMap] = (0, import_react9.useState)(getItemsFromChildren(itemsComponent));
+  const [ariaLabel, setAriaLabel] = (0, import_react9.useState)();
+  const firstItem = itemsMap.entries().next().value[1];
+  const selectedItem = typeof value === "string" ? itemsMap.get(value) : firstItem;
+  const isControlled = valueProp != null;
+  const field = useFormFieldControl();
+  const state = field.state || stateProp;
+  const internalFieldID = `${ID_PREFIX2}-field-${(0, import_react9.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_react9.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_runtime18.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_react9.useContext)(SelectContext);
+  if (!context) {
+    throw Error("useSelectContext must be used within a Select provider");
+  }
+  return context;
+};
+
+// src/select/Select.tsx
+var import_jsx_runtime19 = 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_runtime19.jsx)(SelectProvider, { ...props, itemsComponent: items, children: trigger });
+};
+Select.displayName = "Select";
+
+// src/select/SelectGroup.tsx
+var import_class_variance_authority11 = require("class-variance-authority");
+
+// src/select/SelectItemsGroupContext.tsx
+var import_react10 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var SelectGroupContext = (0, import_react10.createContext)(null);
+var SelectGroupProvider = ({ children }) => {
+  const [groupLabel, setGroupLabel] = (0, import_react10.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectGroupContext.Provider, { value: { groupLabel, setGroupLabel }, children });
+};
+var useSelectGroupContext = () => {
+  const context = (0, import_react10.useContext)(SelectGroupContext);
+  if (!context) {
+    throw Error("useSelectGroupContext must be used within a SelectGroup provider");
+  }
+  return context;
+};
+
+// src/select/SelectGroup.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Group = ({ children, ref: forwardedRef, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GroupContent, { ref: forwardedRef, ...props, children }) });
+};
+var GroupContent = ({ children, className, ref: forwardedRef }) => {
+  const { groupLabel } = useSelectGroupContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "optgroup",
+    {
+      "data-spark-component": "select-group",
+      ref: forwardedRef,
+      className: (0, import_class_variance_authority11.cx)(className),
+      label: groupLabel,
+      children
+    }
+  );
+};
+Group.displayName = "Select.Group";
+
+// src/select/SelectItem.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Item = ({ disabled = false, value, children, ref: forwardedRef }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.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_authority12 = require("class-variance-authority");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var styles = (0, import_class_variance_authority12.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_runtime23.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_react11 = require("react");
+var Label3 = ({ children }) => {
+  const { setGroupLabel } = useSelectGroupContext();
+  (0, import_react11.useEffect)(() => {
+    setGroupLabel(children);
+  }, [children]);
+  return null;
+};
+Label3.displayName = "Select.Label";
+
+// src/select/SelectLeadingIcon.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var LeadingIcon = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { size: "sm", className: "shrink-0", children });
+};
+LeadingIcon.displayName = "Select.LeadingIcon";
+
+// src/select/SelectPlaceholder.tsx
+var import_react12 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Placeholder = ({
+  disabled = false,
+  children,
+  ref: forwardedRef
+}) => {
+  const { setPlaceholder } = useSelectContext();
+  (0, import_react12.useEffect)(() => {
+    setPlaceholder(children);
+  }, [children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.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_react13 = require("react");
+
+// src/select/SelectTrigger.styles.tsx
+var import_class_variance_authority13 = require("class-variance-authority");
+var styles2 = (0, import_class_variance_authority13.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"
+  ],
+  {
+    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: "hover:ring-outline-high focus-within:ring-outline-high"
+      }
+    ]
+  }
+);
+
+// src/select/SelectTrigger.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Trigger = ({
+  "aria-label": ariaLabel,
+  children,
+  className,
+  ref: forwardedRef
+}) => {
+  const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext();
+  (0, import_react13.useEffect)(() => {
+    if (ariaLabel) {
+      setAriaLabel(ariaLabel);
+    }
+  }, [ariaLabel]);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "div",
+    {
+      "data-spark-component": "select-trigger",
+      ref: forwardedRef,
+      className: styles2({ className, state, disabled, readOnly }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "gap-md flex items-center justify-start", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { className: "ml-md shrink-0", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {}) }),
+        itemsComponent
+      ]
+    }
+  );
+};
+Trigger.displayName = "Select.Trigger";
+
+// src/select/SelectValue.tsx
+var import_class_variance_authority14 = require("class-variance-authority");
+var import_jsx_runtime27 = 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_runtime27.jsx)(
+    "span",
+    {
+      role: "presentation",
+      "data-spark-component": "select-value",
+      ref: forwardedRef,
+      className: (0, import_class_variance_authority14.cx)("flex shrink items-center text-left", className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "span",
+        {
+          className: (0, import_class_variance_authority14.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: Label3,
+  Trigger,
+  Value,
+  LeadingIcon
+});
+Select2.displayName = "Select";
+Group.displayName = "Select.Group";
+Items.displayName = "Select.Items";
+Item.displayName = "Select.Item";
+Placeholder.displayName = "Select.Placeholder";
+Label3.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