@sidecar-ai/native 0.1.0-alpha.0

package/dist/components/index.js

@@ -0,0 +1,1628 @@
+// packages/native/src/components/index.tsx
+import * as React from "react";
+var Button = React.forwardRef(function Button2({
+  block = false,
+  children,
+  color,
+  disabled,
+  disabledTone,
+  gutterSize,
+  iconSize,
+  inert = false,
+  intent,
+  loading = false,
+  opticallyAlign,
+  pill = true,
+  recipe = "auto",
+  selected = false,
+  size = "md",
+  type = "button",
+  uniform = false,
+  variant,
+  ...props
+}, ref) {
+  const visual = normalizeButtonVisual({ color, intent, variant });
+  return React.createElement(
+    "button",
+    {
+      ref,
+      "aria-busy": loading || void 0,
+      "data-sc-block": block ? "" : void 0,
+      "data-sc-color": visual.color,
+      "data-sc-component": "button",
+      "data-sc-disabled-tone": disabledTone,
+      "data-sc-gutter-size": gutterSize,
+      "data-sc-icon-size": iconSize,
+      "data-sc-inert": inert ? "" : void 0,
+      "data-sc-intent": visual.color,
+      "data-sc-loading": loading ? "" : void 0,
+      "data-sc-optically-align": opticallyAlign,
+      "data-sc-pill": pill ? "" : void 0,
+      "data-sc-recipe": recipe,
+      "data-sc-selected": selected ? "" : void 0,
+      "data-sc-size": size,
+      "data-sc-uniform": uniform ? "" : void 0,
+      "data-sc-variant": visual.variant,
+      disabled: disabled || loading || void 0,
+      type,
+      ...props
+    },
+    loading ? React.createElement(LoadingIndicator, { "aria-hidden": true, size: "1em" }) : null,
+    React.createElement("span", { "data-sc-component": "button-label" }, children)
+  );
+});
+var ButtonLink = React.forwardRef(function ButtonLink2({
+  block = false,
+  children,
+  color,
+  disabledTone,
+  external,
+  gutterSize,
+  href,
+  iconSize,
+  inert = false,
+  intent,
+  loading = false,
+  opticallyAlign,
+  pill = true,
+  recipe = "auto",
+  rel,
+  selected = false,
+  size = "md",
+  target,
+  uniform = false,
+  variant,
+  ...props
+}, ref) {
+  const visual = normalizeButtonVisual({ color, intent, variant });
+  const isExternal = external ?? Boolean(href && /^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(href));
+  return React.createElement(
+    "a",
+    {
+      ref,
+      "data-sc-block": block ? "" : void 0,
+      "data-sc-color": visual.color,
+      "data-sc-component": "button",
+      "data-sc-disabled-tone": disabledTone,
+      "data-sc-gutter-size": gutterSize,
+      "data-sc-icon-size": iconSize,
+      "data-sc-inert": inert ? "" : void 0,
+      "data-sc-loading": loading ? "" : void 0,
+      "data-sc-optically-align": opticallyAlign,
+      "data-sc-pill": pill ? "" : void 0,
+      "data-sc-recipe": recipe,
+      "data-sc-selected": selected ? "" : void 0,
+      "data-sc-size": size,
+      "data-sc-uniform": uniform ? "" : void 0,
+      "data-sc-variant": visual.variant,
+      href,
+      rel: isExternal && target === "_blank" ? mergeRel(rel, "noopener noreferrer") : rel,
+      target,
+      ...props
+    },
+    loading ? React.createElement(LoadingIndicator, { "aria-hidden": true, size: "1em" }) : null,
+    React.createElement("span", { "data-sc-component": "button-label" }, children)
+  );
+});
+function CopyButton({ children = "Copy", copyValue, onClick, ...restProps }) {
+  const [copied, setCopied] = React.useState(false);
+  React.useEffect(() => {
+    if (!copied) {
+      return;
+    }
+    const timeout = window.setTimeout(() => setCopied(false), 1400);
+    return () => window.clearTimeout(timeout);
+  }, [copied]);
+  return React.createElement(
+    Button,
+    {
+      ...restProps,
+      onClick: async (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        const resolved = typeof copyValue === "function" ? copyValue() : copyValue;
+        await copyToClipboard(resolved);
+        setCopied(true);
+      }
+    },
+    typeof children === "function" ? children({ copied }) : children
+  );
+}
+var Text = React.forwardRef(function Text2({ tone = "default", recipe = "auto", ...props }, ref) {
+  return React.createElement("p", {
+    ref,
+    "data-sc-component": "text",
+    "data-sc-recipe": recipe,
+    "data-sc-tone": tone,
+    ...props
+  });
+});
+var Heading = React.forwardRef(function Heading2({ level = 2, recipe = "auto", ...props }, ref) {
+  return React.createElement(`h${level}`, {
+    ref,
+    "data-sc-component": "heading",
+    "data-sc-level": level,
+    "data-sc-recipe": recipe,
+    ...props
+  });
+});
+var Input = React.forwardRef(function Input2({
+  allowAutofillExtensions: _allowAutofillExtensions,
+  autoSelect = false,
+  block = false,
+  disabled = false,
+  endAdornment,
+  gutterSize,
+  id,
+  invalid,
+  onAutofill: _onAutofill,
+  opticallyAlign,
+  pill = false,
+  recipe = "auto",
+  size = "md",
+  startAdornment,
+  variant = "outline",
+  ...props
+}, ref) {
+  const field = React.useContext(FieldContext);
+  const inputRef = React.useRef(null);
+  const mergedRef = useMergedRefs(ref, inputRef);
+  const inputId = id ?? field?.controlId;
+  const resolvedInvalid = invalid ?? field?.invalid ?? false;
+  React.useEffect(() => {
+    if (autoSelect) {
+      inputRef.current?.select();
+    }
+  }, [autoSelect]);
+  return React.createElement(
+    "span",
+    {
+      "data-sc-block": block ? "" : void 0,
+      "data-sc-component": "input-shell",
+      "data-sc-disabled": disabled ? "" : void 0,
+      "data-sc-gutter-size": gutterSize,
+      "data-sc-has-end-adornment": endAdornment ? "" : void 0,
+      "data-sc-has-start-adornment": startAdornment ? "" : void 0,
+      "data-sc-invalid": resolvedInvalid ? "" : void 0,
+      "data-sc-optically-align": opticallyAlign,
+      "data-sc-pill": pill ? "" : void 0,
+      "data-sc-recipe": recipe,
+      "data-sc-size": size,
+      "data-sc-variant": variant
+    },
+    startAdornment ? React.createElement("span", { "data-sc-component": "input-adornment" }, startAdornment) : null,
+    React.createElement("input", {
+      ref: mergedRef,
+      "aria-describedby": describedBy(props["aria-describedby"], field, resolvedInvalid),
+      "aria-invalid": resolvedInvalid || void 0,
+      disabled,
+      id: inputId,
+      "data-sc-component": "input",
+      ...props
+    }),
+    endAdornment ? React.createElement("span", { "data-sc-component": "input-adornment" }, endAdornment) : null
+  );
+});
+var TextField = Input;
+var Textarea = React.forwardRef(function Textarea2({
+  allowAutofillExtensions: _allowAutofillExtensions,
+  autoResize = false,
+  autoSelect = false,
+  block = false,
+  disabled = false,
+  gutterSize,
+  id,
+  invalid,
+  maxRows: _maxRows,
+  onAutofill: _onAutofill,
+  opticallyAlign,
+  pill = false,
+  recipe = "auto",
+  rows = 3,
+  size = "md",
+  variant = "outline",
+  ...props
+}, ref) {
+  const field = React.useContext(FieldContext);
+  const textareaRef = React.useRef(null);
+  const mergedRef = useMergedRefs(ref, textareaRef);
+  const inputId = id ?? field?.controlId;
+  const resolvedInvalid = invalid ?? field?.invalid ?? false;
+  React.useEffect(() => {
+    if (autoSelect) {
+      textareaRef.current?.select();
+    }
+  }, [autoSelect]);
+  React.useLayoutEffect(() => {
+    const node = textareaRef.current;
+    if (!node || !autoResize) {
+      return;
+    }
+    node.style.height = "auto";
+    node.style.height = `${node.scrollHeight}px`;
+  }, [autoResize, props.value, props.defaultValue]);
+  return React.createElement("textarea", {
+    ref: mergedRef,
+    "aria-describedby": describedBy(props["aria-describedby"], field, resolvedInvalid),
+    "aria-invalid": resolvedInvalid || void 0,
+    disabled,
+    id: inputId,
+    "data-sc-block": block ? "" : void 0,
+    "data-sc-component": "textarea",
+    "data-sc-disabled": disabled ? "" : void 0,
+    "data-sc-gutter-size": gutterSize,
+    "data-sc-invalid": resolvedInvalid ? "" : void 0,
+    "data-sc-optically-align": opticallyAlign,
+    "data-sc-pill": pill ? "" : void 0,
+    "data-sc-recipe": recipe,
+    "data-sc-size": size,
+    "data-sc-variant": variant,
+    rows,
+    ...props
+  });
+});
+function Checkbox({
+  checked,
+  className,
+  defaultChecked = false,
+  disabled = false,
+  id,
+  label,
+  name,
+  onBlur,
+  onCheckedChange,
+  onFocus,
+  orientation = "left",
+  recipe = "auto",
+  required = false,
+  value = "on"
+}) {
+  const generatedId = React.useId();
+  const controlId = id ?? generatedId;
+  const [state, setState] = useControllableValue({
+    controlled: checked,
+    defaultValue: defaultChecked,
+    onChange: (next) => onCheckedChange?.(next === true)
+  });
+  const isChecked = state === true;
+  const isMixed = state === "indeterminate";
+  const button = React.createElement("button", {
+    "aria-checked": isMixed ? "mixed" : isChecked,
+    "aria-labelledby": label ? `${controlId}-label` : void 0,
+    disabled,
+    id: controlId,
+    onBlur,
+    onClick: () => {
+      if (!disabled) {
+        setState(!isChecked);
+      }
+    },
+    onFocus,
+    role: "checkbox",
+    type: "button",
+    "data-sc-checked": isChecked ? "" : void 0,
+    "data-sc-component": "checkbox",
+    "data-sc-disabled": disabled ? "" : void 0,
+    "data-sc-indeterminate": isMixed ? "" : void 0,
+    "data-sc-recipe": recipe
+  });
+  const labelNode = label ? React.createElement("span", { id: `${controlId}-label`, "data-sc-component": "checkbox-label-text" }, label) : null;
+  return React.createElement(
+    "label",
+    {
+      className,
+      "data-sc-component": "checkbox-label",
+      "data-sc-orientation": orientation,
+      "data-sc-recipe": recipe
+    },
+    orientation === "right" ? labelNode : button,
+    React.createElement("input", {
+      checked: isChecked,
+      disabled,
+      name,
+      readOnly: true,
+      required,
+      tabIndex: -1,
+      type: "checkbox",
+      value,
+      "data-sc-component": "visually-hidden-input"
+    }),
+    orientation === "right" ? button : labelNode
+  );
+}
+function Switch({
+  checked,
+  className,
+  defaultChecked = false,
+  disabled = false,
+  id,
+  label,
+  labelPosition = "end",
+  name,
+  onBlur,
+  onCheckedChange,
+  onFocus,
+  recipe = "auto",
+  required = false,
+  value = "on"
+}) {
+  const generatedId = React.useId();
+  const controlId = id ?? generatedId;
+  const [state, setState] = useControllableValue({
+    controlled: checked,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange
+  });
+  const button = React.createElement(
+    "button",
+    {
+      "aria-checked": state,
+      "aria-labelledby": label ? `${controlId}-label` : void 0,
+      disabled,
+      id: controlId,
+      onBlur,
+      onClick: () => {
+        if (!disabled) {
+          setState(!state);
+        }
+      },
+      onFocus,
+      role: "switch",
+      type: "button",
+      "data-sc-checked": state ? "" : void 0,
+      "data-sc-component": "switch",
+      "data-sc-disabled": disabled ? "" : void 0,
+      "data-sc-recipe": recipe
+    },
+    React.createElement("span", { "data-sc-component": "switch-thumb" })
+  );
+  const labelNode = label ? React.createElement("span", { id: `${controlId}-label`, "data-sc-component": "switch-label-text" }, label) : null;
+  return React.createElement(
+    "label",
+    {
+      className,
+      "data-sc-component": "switch-label",
+      "data-sc-label-position": labelPosition,
+      "data-sc-recipe": recipe
+    },
+    labelPosition === "start" ? labelNode : button,
+    React.createElement("input", {
+      checked: state,
+      disabled,
+      name,
+      readOnly: true,
+      required,
+      tabIndex: -1,
+      type: "checkbox",
+      value,
+      "data-sc-component": "visually-hidden-input"
+    }),
+    labelPosition === "start" ? button : labelNode
+  );
+}
+var RadioGroupContext = React.createContext(null);
+function RadioGroupRoot({
+  children,
+  className,
+  defaultValue,
+  direction = "row",
+  disabled = false,
+  name,
+  onChange,
+  recipe = "auto",
+  required = false,
+  value,
+  ...restProps
+}) {
+  const [selected, setSelected] = useControllableValue({
+    controlled: value,
+    defaultValue,
+    onChange: (next) => {
+      if (next !== void 0) {
+        onChange?.(next);
+      }
+    }
+  });
+  return React.createElement(
+    RadioGroupContext.Provider,
+    {
+      value: {
+        disabled,
+        name,
+        onChange: setSelected,
+        recipe,
+        required,
+        value: selected
+      }
+    },
+    React.createElement(
+      "div",
+      {
+        ...restProps,
+        className,
+        role: "radiogroup",
+        "data-sc-component": "radio-group",
+        "data-sc-direction": direction,
+        "data-sc-disabled": disabled ? "" : void 0,
+        "data-sc-recipe": recipe
+      },
+      children
+    )
+  );
+}
+function RadioGroupItem({
+  block = false,
+  children,
+  className,
+  disabled = false,
+  required,
+  value
+}) {
+  const context = useRequiredContext(RadioGroupContext, "RadioGroup.Item must be rendered inside RadioGroup");
+  const itemDisabled = context.disabled || disabled;
+  const checked = context.value === value;
+  return React.createElement(
+    "button",
+    {
+      "aria-checked": checked,
+      className,
+      disabled: itemDisabled,
+      onClick: () => {
+        if (!itemDisabled) {
+          context.onChange(value);
+        }
+      },
+      role: "radio",
+      type: "button",
+      "data-sc-block": block ? "" : void 0,
+      "data-sc-checked": checked ? "" : void 0,
+      "data-sc-component": "radio-item",
+      "data-sc-disabled": itemDisabled ? "" : void 0,
+      "data-sc-recipe": context.recipe
+    },
+    React.createElement("span", { "data-sc-component": "radio-indicator" }),
+    React.createElement("span", { "data-sc-component": "radio-label" }, children),
+    context.name ? React.createElement("input", {
+      checked,
+      disabled: itemDisabled,
+      name: context.name,
+      readOnly: true,
+      required: required ?? context.required,
+      tabIndex: -1,
+      type: "radio",
+      value,
+      "data-sc-component": "visually-hidden-input"
+    }) : null
+  );
+}
+var RadioGroup = Object.assign(RadioGroupRoot, {
+  Item: RadioGroupItem
+});
+var SegmentedControlContext = React.createContext(null);
+function SegmentedControlRoot({
+  block = false,
+  children,
+  className,
+  defaultValue,
+  disabled = false,
+  gutterSize,
+  onChange,
+  onClick,
+  pill = false,
+  recipe = "auto",
+  size = "md",
+  value,
+  ...restProps
+}) {
+  const [selected, setSelected] = useControllableValue({
+    controlled: value,
+    defaultValue,
+    onChange: (next) => {
+      if (next !== void 0) {
+        onChange?.(next);
+      }
+    }
+  });
+  return React.createElement(
+    SegmentedControlContext.Provider,
+    {
+      value: {
+        disabled,
+        onChange: setSelected,
+        onClick,
+        recipe,
+        selected
+      }
+    },
+    React.createElement(
+      "div",
+      {
+        ...restProps,
+        className,
+        role: "group",
+        "data-sc-block": block ? "" : void 0,
+        "data-sc-component": "segmented-control",
+        "data-sc-disabled": disabled ? "" : void 0,
+        "data-sc-gutter-size": gutterSize,
+        "data-sc-pill": pill ? "" : void 0,
+        "data-sc-recipe": recipe,
+        "data-sc-size": size
+      },
+      children
+    )
+  );
+}
+function SegmentedControlOption({
+  children,
+  disabled = false,
+  value,
+  ...restProps
+}) {
+  const context = useRequiredContext(
+    SegmentedControlContext,
+    "SegmentedControl.Option must be rendered inside SegmentedControl"
+  );
+  const selected = context.selected === value;
+  const optionDisabled = context.disabled || disabled;
+  return React.createElement(
+    "button",
+    {
+      ...restProps,
+      "aria-pressed": selected,
+      disabled: optionDisabled,
+      onClick: () => {
+        context.onClick?.();
+        if (!optionDisabled) {
+          context.onChange(value);
+        }
+      },
+      type: "button",
+      "data-sc-component": "segmented-option",
+      "data-sc-disabled": optionDisabled ? "" : void 0,
+      "data-sc-recipe": context.recipe,
+      "data-sc-selected": selected ? "" : void 0
+    },
+    children
+  );
+}
+var SegmentedControl = Object.assign(SegmentedControlRoot, {
+  Option: SegmentedControlOption
+});
+function Select({
+  actions,
+  block = true,
+  clearable = false,
+  defaultOpen = false,
+  disabled = false,
+  dropdownIconType = "dropdown",
+  id,
+  loading = false,
+  loadingPlaceholder = "Loading...",
+  multiple,
+  name,
+  onChange,
+  OptionView,
+  options,
+  opticallyAlign,
+  pill = false,
+  placeholder = "Select...",
+  recipe = "auto",
+  required = false,
+  searchEmptyMessage = "No results",
+  searchPlaceholder = "Search...",
+  searchPredicate = defaultSearchPredicate,
+  size = "md",
+  TriggerStartIcon,
+  TriggerView,
+  triggerClassName,
+  value,
+  variant = "outline"
+}) {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const [search, setSearch] = React.useState("");
+  const allOptions = React.useMemo(() => flattenOptions(options), [options]);
+  const filteredOptions = React.useMemo(
+    () => allOptions.filter((option) => searchPredicate(option, search)),
+    [allOptions, search, searchPredicate]
+  );
+  const selectedOptions = React.useMemo(() => {
+    const values = Array.isArray(value) ? value : [value];
+    return allOptions.filter((option) => values.includes(option.value));
+  }, [allOptions, value]);
+  const selected = selectedOptions[0];
+  const triggerContent = renderSelectTriggerContent({
+    loading,
+    loadingPlaceholder,
+    multiple: Boolean(multiple),
+    placeholder,
+    selected,
+    selectedOptions,
+    TriggerView
+  });
+  const commitOption = (option) => {
+    if (option.disabled) {
+      return;
+    }
+    if (multiple) {
+      const current = selectedOptions.some((selectedOption) => selectedOption.value === option.value) ? selectedOptions.filter((selectedOption) => selectedOption.value !== option.value) : [...selectedOptions, option];
+      onChange(current);
+      return;
+    }
+    onChange(option);
+    setOpen(false);
+  };
+  return React.createElement(
+    "div",
+    {
+      "data-sc-block": block ? "" : void 0,
+      "data-sc-component": "select",
+      "data-sc-open": open ? "" : void 0,
+      "data-sc-recipe": recipe
+    },
+    React.createElement(SelectControl, {
+      block,
+      children: triggerContent,
+      className: triggerClassName,
+      disabled,
+      dropdownIconType,
+      id,
+      loading,
+      onClearClick: clearable && selectedOptions.length > 0 ? () => {
+        if (multiple) {
+          onChange([]);
+        } else {
+          onChange({ label: "", value: "" });
+        }
+      } : void 0,
+      onInteract: () => setOpen((next) => !next),
+      opticallyAlign,
+      pill,
+      recipe,
+      selected: selectedOptions.length > 0,
+      size,
+      StartIcon: TriggerStartIcon,
+      variant
+    }),
+    name ? renderHiddenSelectInputs({
+      disabled,
+      multiple: Boolean(multiple),
+      name,
+      required,
+      selectedOptions,
+      value
+    }) : null,
+    open ? React.createElement(
+      "div",
+      {
+        role: "listbox",
+        "aria-multiselectable": multiple || void 0,
+        "data-sc-component": "select-list",
+        "data-sc-recipe": recipe
+      },
+      React.createElement(Input, {
+        "aria-label": searchPlaceholder,
+        onChange: (event) => setSearch(event.currentTarget.value),
+        placeholder: searchPlaceholder,
+        recipe,
+        size: "sm",
+        value: search
+      }),
+      filteredOptions.length === 0 ? React.createElement("div", { "data-sc-component": "select-empty" }, searchEmptyMessage) : filteredOptions.map((option) => {
+        const selectedOption = selectedOptions.some((selectedCandidate) => selectedCandidate.value === option.value);
+        return React.createElement(
+          "button",
+          {
+            className: void 0,
+            disabled: option.disabled,
+            key: option.value,
+            onClick: () => commitOption(option),
+            role: "option",
+            type: "button",
+            "aria-selected": selectedOption,
+            "data-sc-component": "select-option",
+            "data-sc-disabled": option.disabled ? "" : void 0,
+            "data-sc-selected": selectedOption ? "" : void 0
+          },
+          OptionView ? React.createElement(OptionView, option) : React.createElement(
+            React.Fragment,
+            null,
+            React.createElement("span", { "data-sc-component": "select-option-label" }, option.label),
+            option.description ? React.createElement("span", { "data-sc-component": "select-option-description" }, option.description) : null
+          )
+        );
+      }),
+      actions?.length ? React.createElement(
+        "div",
+        { "data-sc-component": "select-actions" },
+        actions.map(
+          (action) => React.createElement(
+            "button",
+            {
+              className: action.className,
+              key: action.id,
+              onClick: () => action.onSelect(action.id),
+              type: "button",
+              "data-sc-component": "select-action"
+            },
+            action.Icon ? React.createElement(action.Icon, { "aria-hidden": true }) : null,
+            action.label
+          )
+        )
+      ) : null
+    ) : null
+  );
+}
+var SelectControl = React.forwardRef(function SelectControl2({
+  block = true,
+  children,
+  disabled = false,
+  dropdownIconType = "dropdown",
+  invalid = false,
+  loading = false,
+  onClearClick,
+  onInteract,
+  opticallyAlign,
+  pill = false,
+  recipe = "auto",
+  selected = false,
+  size = "md",
+  StartIcon,
+  tabIndex,
+  variant = "outline",
+  ...props
+}, ref) {
+  return React.createElement(
+    "span",
+    {
+      ref,
+      role: "button",
+      tabIndex: disabled ? -1 : tabIndex ?? 0,
+      onClick: () => {
+        if (!disabled) {
+          onInteract?.();
+        }
+      },
+      onKeyDown: (event) => {
+        props.onKeyDown?.(event);
+        if (!disabled && !event.defaultPrevented && (event.key === "Enter" || event.key === " ")) {
+          event.preventDefault();
+          onInteract?.();
+        }
+      },
+      "data-sc-block": block ? "" : void 0,
+      "data-sc-component": "select-control",
+      "data-sc-disabled": disabled ? "" : void 0,
+      "data-sc-invalid": invalid ? "" : void 0,
+      "data-sc-optically-align": opticallyAlign,
+      "data-sc-pill": pill ? "" : void 0,
+      "data-sc-recipe": recipe,
+      "data-sc-selected": selected ? "" : void 0,
+      "data-sc-size": size,
+      "data-sc-variant": variant,
+      ...props
+    },
+    StartIcon ? React.createElement(StartIcon, { "aria-hidden": true }) : null,
+    React.createElement("span", { "data-sc-component": "select-control-value" }, children),
+    loading ? React.createElement(LoadingIndicator, { "aria-hidden": true, size: "1em" }) : null,
+    onClearClick ? React.createElement(
+      "button",
+      {
+        "aria-label": "Clear selection",
+        onClick: (event) => {
+          event.stopPropagation();
+          onClearClick();
+        },
+        type: "button",
+        "data-sc-component": "select-clear"
+      },
+      "\xD7"
+    ) : null,
+    dropdownIconType === "none" ? null : React.createElement("span", { "aria-hidden": true, "data-sc-component": "select-dropdown-icon" }, dropdownIconType === "chevronDown" ? "\u2304" : "\u25BE")
+  );
+});
+var Badge = React.forwardRef(function Badge2({
+  children,
+  color,
+  pill = false,
+  recipe = "auto",
+  size = "sm",
+  tone,
+  variant = "soft",
+  ...props
+}, ref) {
+  const resolvedColor = color ?? toneToColor(tone) ?? "secondary";
+  return React.createElement(
+    "span",
+    {
+      ref,
+      "data-sc-color": resolvedColor,
+      "data-sc-component": "badge",
+      "data-sc-pill": pill ? "" : void 0,
+      "data-sc-recipe": recipe,
+      "data-sc-size": size,
+      "data-sc-tone": tone,
+      "data-sc-variant": variant,
+      ...props
+    },
+    children
+  );
+});
+var Alert = React.forwardRef(function Alert2({
+  actions,
+  actionsClassName,
+  actionsPlacement,
+  children,
+  color,
+  description,
+  indicator,
+  recipe = "auto",
+  role = "note",
+  title,
+  tone,
+  variant = "soft",
+  ...props
+}, ref) {
+  const resolvedColor = color ?? toneToColor(tone) ?? "primary";
+  return React.createElement(
+    "div",
+    {
+      ref,
+      role,
+      "data-sc-actions-placement": actionsPlacement,
+      "data-sc-color": resolvedColor,
+      "data-sc-component": "alert",
+      "data-sc-recipe": recipe,
+      "data-sc-tone": tone,
+      "data-sc-variant": variant,
+      ...props
+    },
+    indicator === false ? null : React.createElement(
+      "span",
+      { "aria-hidden": true, "data-sc-component": "alert-indicator" },
+      indicator ?? "\u2022"
+    ),
+    React.createElement(
+      "div",
+      { "data-sc-component": "alert-content" },
+      title ? React.createElement("div", { "data-sc-component": "alert-title" }, title) : null,
+      description ? React.createElement("div", { "data-sc-component": "alert-description" }, description) : null,
+      children
+    ),
+    actions ? React.createElement(
+      "div",
+      { className: actionsClassName, "data-sc-component": "alert-actions" },
+      actions
+    ) : null
+  );
+});
+var Callout = Alert;
+var Avatar = React.forwardRef(function Avatar2({
+  alt = "",
+  color = "secondary",
+  fallback,
+  Icon,
+  imageUrl,
+  name,
+  overflowCount,
+  recipe = "auto",
+  size = 28,
+  src,
+  variant = "soft",
+  ...props
+}, ref) {
+  const url = imageUrl ?? src;
+  const label = overflowCount !== void 0 ? formatOverflow(overflowCount) : initialsFromName(name);
+  const interactive = Boolean(props.onClick || props.onPointerDown);
+  return React.createElement(
+    "span",
+    {
+      ref,
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      "data-sc-color": color,
+      "data-sc-component": "avatar",
+      "data-sc-interactive": interactive ? "" : void 0,
+      "data-sc-recipe": recipe,
+      "data-sc-variant": variant,
+      style: { "--sc-avatar-size": `${size}px`, ...props.style },
+      ...props
+    },
+    url ? React.createElement("img", { alt, src: url }) : null,
+    !url && Icon ? React.createElement(Icon, { "aria-hidden": true }) : null,
+    !url && !Icon ? fallback ?? label : null
+  );
+});
+function AvatarGroup({ children, className, recipe = "auto", size, stack = "start" }) {
+  return React.createElement(
+    "div",
+    {
+      className,
+      "data-sc-component": "avatar-group",
+      "data-sc-recipe": recipe,
+      "data-sc-stack": stack,
+      style: size ? { "--sc-avatar-size": `${size}px` } : void 0
+    },
+    children
+  );
+}
+var EmptyMessageContext = React.createContext("auto");
+function EmptyMessageRoot({ children, className, fill = "static", recipe = "auto" }) {
+  return React.createElement(
+    EmptyMessageContext.Provider,
+    { value: recipe },
+    React.createElement(
+      "div",
+      {
+        className,
+        "data-sc-component": "empty-message",
+        "data-sc-fill": fill,
+        "data-sc-recipe": recipe
+      },
+      children
+    )
+  );
+}
+function EmptyMessageIcon({ children, className, color = "secondary", recipe, size = "sm" }) {
+  const inheritedRecipe = React.useContext(EmptyMessageContext);
+  return React.createElement(
+    "div",
+    {
+      className,
+      "data-sc-color": color,
+      "data-sc-component": "empty-message-icon",
+      "data-sc-recipe": recipe ?? inheritedRecipe,
+      "data-sc-size": size
+    },
+    children
+  );
+}
+function EmptyMessageTitle({ children, className, color = "secondary", recipe }) {
+  const inheritedRecipe = React.useContext(EmptyMessageContext);
+  return React.createElement(
+    "div",
+    {
+      className,
+      "data-sc-color": color,
+      "data-sc-component": "empty-message-title",
+      "data-sc-recipe": recipe ?? inheritedRecipe
+    },
+    children
+  );
+}
+function EmptyMessageDescription({
+  children,
+  className
+}) {
+  return React.createElement("div", { className, "data-sc-component": "empty-message-description" }, children);
+}
+function EmptyMessageActionRow({
+  children,
+  className
+}) {
+  return React.createElement("div", { className, "data-sc-component": "empty-message-actions" }, children);
+}
+var EmptyMessage = Object.assign(EmptyMessageRoot, {
+  ActionRow: EmptyMessageActionRow,
+  Description: EmptyMessageDescription,
+  Icon: EmptyMessageIcon,
+  Title: EmptyMessageTitle
+});
+var EmptyState = React.forwardRef(function EmptyState2({ action, children, recipe = "auto", title, ...props }, ref) {
+  return React.createElement(
+    "div",
+    { ref, ...props },
+    React.createElement(
+      EmptyMessage,
+      {
+        recipe,
+        children: [
+          React.createElement(EmptyMessage.Title, { children: title, key: "title" }),
+          children ? React.createElement(EmptyMessage.Description, { children, key: "description" }) : null,
+          action ? React.createElement(EmptyMessage.ActionRow, { children: action, key: "action" }) : null
+        ]
+      }
+    )
+  );
+});
+function LoadingDots({ recipe = "auto", ...props }) {
+  return React.createElement(
+    "div",
+    {
+      "aria-hidden": true,
+      "data-sc-component": "loading-dots",
+      "data-sc-recipe": recipe,
+      ...props
+    },
+    React.createElement("span", null),
+    React.createElement("span", null),
+    React.createElement("span", null)
+  );
+}
+function LoadingIndicator({
+  className,
+  recipe = "auto",
+  size = "1em",
+  strokeWidth = 2,
+  style,
+  ...props
+}) {
+  return React.createElement(
+    "div",
+    {
+      className,
+      "data-sc-component": "loading-indicator",
+      "data-sc-recipe": recipe,
+      style: { "--sc-indicator-size": typeof size === "number" ? `${size}px` : size, ...style },
+      ...props
+    },
+    React.createElement(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        "aria-hidden": true
+      },
+      React.createElement("circle", {
+        cx: 12,
+        cy: 12,
+        r: 9,
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeWidth
+      })
+    )
+  );
+}
+function CircularProgress({
+  className,
+  done = false,
+  progress,
+  recipe = "auto",
+  size = 28,
+  strokeWidth = 2,
+  style,
+  trackActiveColor = "currentColor",
+  trackColor = "color-mix(in srgb, currentColor 18%, transparent)",
+  ...props
+}) {
+  const value = done ? 100 : Math.max(0, Math.min(100, progress ?? 66));
+  const radius = 10;
+  const circumference = 2 * Math.PI * radius;
+  const dashOffset = circumference - value / 100 * circumference;
+  return React.createElement(
+    "div",
+    {
+      className,
+      role: "progressbar",
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": value,
+      "data-sc-component": "circular-progress",
+      "data-sc-recipe": recipe,
+      style: { "--sc-progress-size": typeof size === "number" ? `${size}px` : size, ...style },
+      ...props
+    },
+    React.createElement(
+      "svg",
+      { viewBox: "0 0 24 24", "aria-hidden": true },
+      React.createElement("circle", {
+        cx: 12,
+        cy: 12,
+        fill: "none",
+        r: radius,
+        stroke: trackColor,
+        strokeWidth
+      }),
+      React.createElement("circle", {
+        cx: 12,
+        cy: 12,
+        fill: "none",
+        r: radius,
+        stroke: trackActiveColor,
+        strokeDasharray: circumference,
+        strokeDashoffset: dashOffset,
+        strokeLinecap: "round",
+        strokeWidth,
+        transform: "rotate(-90 12 12)"
+      })
+    )
+  );
+}
+var Spinner = LoadingIndicator;
+var Progress = React.forwardRef(function Progress2({ recipe = "auto", ...props }, ref) {
+  return React.createElement("progress", {
+    ref,
+    "data-sc-component": "progress",
+    "data-sc-recipe": recipe,
+    ...props
+  });
+});
+function ShimmerText({ as: Tag = "span", children, className, recipe = "auto" }) {
+  return React.createElement(
+    Tag,
+    {
+      className,
+      "data-sc-component": "shimmer-text",
+      "data-sc-recipe": recipe
+    },
+    children
+  );
+}
+var TextLink = React.forwardRef(function TextLink2({
+  children,
+  forceExternal,
+  href,
+  primary = false,
+  recipe = "auto",
+  rel,
+  target,
+  underline = true,
+  ...props
+}, ref) {
+  const external = forceExternal ?? Boolean(href && /^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(href));
+  return React.createElement(
+    "a",
+    {
+      ref,
+      "data-sc-component": "text-link",
+      "data-sc-primary": primary ? "" : void 0,
+      "data-sc-recipe": recipe,
+      "data-sc-underline": underline ? "" : void 0,
+      href,
+      rel: external && target === "_blank" ? mergeRel(rel, "noopener noreferrer") : rel,
+      target,
+      ...props
+    },
+    children
+  );
+});
+var Image = React.forwardRef(function Image2({ forceRenderAfterLoadFail: _forceRenderAfterLoadFail, recipe = "auto", ...props }, ref) {
+  return React.createElement("img", {
+    ref,
+    "data-sc-component": "image",
+    "data-sc-recipe": recipe,
+    ...props
+  });
+});
+var Skeleton = React.forwardRef(function Skeleton2({ height, recipe = "auto", style, width, ...props }, ref) {
+  return React.createElement("div", {
+    ref,
+    "aria-hidden": true,
+    "data-sc-component": "skeleton",
+    "data-sc-recipe": recipe,
+    style: { width, height, ...style },
+    ...props
+  });
+});
+var FieldContext = React.createContext(null);
+function FormField({
+  children,
+  disabled = false,
+  id,
+  invalid = false,
+  recipe = "auto",
+  required = false,
+  ...props
+}) {
+  const generatedId = React.useId();
+  const controlId = id ?? generatedId;
+  const context = React.useMemo(
+    () => ({
+      controlId,
+      descriptionId: `${controlId}-description`,
+      disabled,
+      errorId: `${controlId}-error`,
+      invalid,
+      required
+    }),
+    [controlId, disabled, invalid, required]
+  );
+  return React.createElement(
+    FieldContext.Provider,
+    { value: context },
+    React.createElement(
+      "div",
+      {
+        "data-sc-component": "form-field",
+        "data-sc-disabled": disabled ? "" : void 0,
+        "data-sc-invalid": invalid ? "" : void 0,
+        "data-sc-recipe": recipe,
+        ...props
+      },
+      children
+    )
+  );
+}
+var FieldLabel = React.forwardRef(function FieldLabel2({ children, htmlFor, recipe = "auto", ...props }, ref) {
+  const field = React.useContext(FieldContext);
+  return React.createElement(
+    "label",
+    {
+      ref,
+      htmlFor: htmlFor ?? field?.controlId,
+      "data-sc-component": "field-label",
+      "data-sc-recipe": recipe,
+      ...props
+    },
+    children,
+    field?.required ? React.createElement("span", { "aria-hidden": true, "data-sc-component": "field-required" }, "*") : null
+  );
+});
+var FieldDescription = React.forwardRef(function FieldDescription2({ id, recipe = "auto", ...props }, ref) {
+  const field = React.useContext(FieldContext);
+  return React.createElement("p", {
+    ref,
+    id: id ?? field?.descriptionId,
+    "data-sc-component": "field-description",
+    "data-sc-recipe": recipe,
+    ...props
+  });
+});
+var FieldError = React.forwardRef(function FieldError2({ id, recipe = "auto", ...props }, ref) {
+  const field = React.useContext(FieldContext);
+  return React.createElement("p", {
+    ref,
+    id: id ?? field?.errorId,
+    role: "alert",
+    "data-sc-component": "field-error",
+    "data-sc-recipe": recipe,
+    ...props
+  });
+});
+var Surface = React.forwardRef(function Surface2({ recipe = "auto", variant = "plain", ...props }, ref) {
+  return React.createElement("div", {
+    ref,
+    "data-sc-component": "surface",
+    "data-sc-recipe": recipe,
+    "data-sc-variant": variant,
+    ...props
+  });
+});
+var Stack = React.forwardRef(function Stack2({ gap = "md", recipe = "auto", ...props }, ref) {
+  return React.createElement("div", {
+    ref,
+    "data-sc-component": "stack",
+    "data-sc-gap": gap,
+    "data-sc-recipe": recipe,
+    ...props
+  });
+});
+var Inline = React.forwardRef(function Inline2({ align = "center", gap = "sm", recipe = "auto", wrap = true, ...props }, ref) {
+  return React.createElement("div", {
+    ref,
+    "data-sc-align": align,
+    "data-sc-component": "inline",
+    "data-sc-gap": gap,
+    "data-sc-recipe": recipe,
+    "data-sc-wrap": wrap ? "" : void 0,
+    ...props
+  });
+});
+var Divider = React.forwardRef(function Divider2({ recipe = "auto", ...props }, ref) {
+  return React.createElement("hr", {
+    ref,
+    "data-sc-component": "divider",
+    "data-sc-recipe": recipe,
+    ...props
+  });
+});
+var Code = React.forwardRef(function Code2({ recipe = "auto", ...props }, ref) {
+  return React.createElement("code", {
+    ref,
+    "data-sc-component": "code",
+    "data-sc-recipe": recipe,
+    ...props
+  });
+});
+var Tabs = React.forwardRef(function Tabs2({ recipe = "auto", ...props }, ref) {
+  return React.createElement("div", {
+    ref,
+    "data-sc-component": "tabs",
+    "data-sc-recipe": recipe,
+    ...props
+  });
+});
+var Slider = React.forwardRef(function Slider2({ recipe = "auto", ...props }, ref) {
+  return React.createElement("input", {
+    ref,
+    type: "range",
+    "data-sc-component": "slider",
+    "data-sc-recipe": recipe,
+    ...props
+  });
+});
+var Table = React.forwardRef(function Table2({ recipe = "auto", ...props }, ref) {
+  return React.createElement("table", {
+    ref,
+    "data-sc-component": "table",
+    "data-sc-recipe": recipe,
+    ...props
+  });
+});
+var KeyValue = React.forwardRef(function KeyValue2({ items, recipe = "auto", ...props }, ref) {
+  return React.createElement(
+    "dl",
+    {
+      ref,
+      "data-sc-component": "key-value",
+      "data-sc-recipe": recipe,
+      ...props
+    },
+    items.map(
+      (item, index) => React.createElement(
+        "div",
+        { "data-sc-component": "key-value-row", key: index },
+        React.createElement("dt", null, item.key),
+        React.createElement("dd", null, item.value)
+      )
+    )
+  );
+});
+function createPrimitiveComponents(recipe) {
+  return {
+    Alert: pinRecipe(Alert, recipe),
+    Avatar: pinRecipe(Avatar, recipe),
+    AvatarGroup: pinRecipe(AvatarGroup, recipe),
+    Badge: pinRecipe(Badge, recipe),
+    Button: pinRecipe(Button, recipe),
+    ButtonLink: pinRecipe(ButtonLink, recipe),
+    Callout: pinRecipe(Callout, recipe),
+    Checkbox: pinRecipe(Checkbox, recipe),
+    CircularProgress: pinRecipe(CircularProgress, recipe),
+    Code: pinRecipe(Code, recipe),
+    CopyButton: pinRecipe(CopyButton, recipe),
+    Divider: pinRecipe(Divider, recipe),
+    EmptyMessage: pinRecipe(EmptyMessage, recipe),
+    EmptyState: pinRecipe(EmptyState, recipe),
+    FieldDescription: pinRecipe(FieldDescription, recipe),
+    FieldError: pinRecipe(FieldError, recipe),
+    FieldLabel: pinRecipe(FieldLabel, recipe),
+    FormField: pinRecipe(FormField, recipe),
+    Heading: pinRecipe(Heading, recipe),
+    Image: pinRecipe(Image, recipe),
+    Inline: pinRecipe(Inline, recipe),
+    Input: pinRecipe(Input, recipe),
+    KeyValue: pinRecipe(KeyValue, recipe),
+    LoadingDots: pinRecipe(LoadingDots, recipe),
+    LoadingIndicator: pinRecipe(LoadingIndicator, recipe),
+    Progress: pinRecipe(Progress, recipe),
+    RadioGroup: pinRecipe(RadioGroup, recipe),
+    SegmentedControl: pinRecipe(SegmentedControl, recipe),
+    Select: pinRecipe(Select, recipe),
+    SelectControl: pinRecipe(SelectControl, recipe),
+    ShimmerText: pinRecipe(ShimmerText, recipe),
+    Skeleton: pinRecipe(Skeleton, recipe),
+    Slider: pinRecipe(Slider, recipe),
+    Spinner: pinRecipe(Spinner, recipe),
+    Stack: pinRecipe(Stack, recipe),
+    Surface: pinRecipe(Surface, recipe),
+    Switch: pinRecipe(Switch, recipe),
+    Table: pinRecipe(Table, recipe),
+    Tabs: pinRecipe(Tabs, recipe),
+    Text: pinRecipe(Text, recipe),
+    Textarea: pinRecipe(Textarea, recipe),
+    TextField: pinRecipe(TextField, recipe),
+    TextLink: pinRecipe(TextLink, recipe)
+  };
+}
+function normalizeButtonVisual({
+  color,
+  intent,
+  variant
+}) {
+  if (variant && isSemanticColor(variant)) {
+    return { color: variant, variant: defaultVariantForColor(variant) };
+  }
+  if (variant === "ghost") {
+    return { color: color ?? "secondary", variant: "ghost" };
+  }
+  if (intent === "ghost") {
+    return { color: color ?? "secondary", variant: "ghost" };
+  }
+  const resolvedColor = color ?? (intent && isSemanticColor(intent) ? intent : "secondary");
+  return { color: resolvedColor, variant: variant ?? defaultVariantForColor(resolvedColor) };
+}
+function defaultVariantForColor(color) {
+  return color === "secondary" ? "soft" : "solid";
+}
+function isSemanticColor(value) {
+  return ["primary", "secondary", "danger", "success", "warning", "caution", "discovery", "info"].includes(value);
+}
+function toneToColor(tone) {
+  switch (tone) {
+    case "success":
+      return "success";
+    case "warning":
+      return "warning";
+    case "danger":
+      return "danger";
+    case "default":
+    case void 0:
+      return void 0;
+  }
+}
+function mergeRel(current, required) {
+  return [.../* @__PURE__ */ new Set([...current?.split(/\s+/).filter(Boolean) ?? [], ...required.split(/\s+/)])].join(" ");
+}
+function useControllableValue({
+  controlled,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+  const value = controlled ?? uncontrolled;
+  const setValue = React.useCallback(
+    (nextValue) => {
+      if (controlled === void 0) {
+        setUncontrolled(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [controlled, onChange]
+  );
+  return [value, setValue];
+}
+function useRequiredContext(context, message) {
+  const value = React.useContext(context);
+  if (value === null) {
+    throw new Error(message);
+  }
+  return value;
+}
+function useMergedRefs(...refs) {
+  return React.useCallback(
+    (node) => {
+      for (const ref of refs) {
+        if (!ref) {
+          continue;
+        }
+        if (typeof ref === "function") {
+          ref(node);
+        } else {
+          ref.current = node;
+        }
+      }
+    },
+    [refs]
+  );
+}
+function describedBy(existing, field, invalid) {
+  const ids = [existing, field?.descriptionId, invalid ? field?.errorId : void 0].filter(Boolean);
+  return ids.length ? ids.join(" ") : void 0;
+}
+function flattenOptions(options) {
+  return options.flatMap((entry) => isOptionGroup(entry) ? entry.options : [entry]);
+}
+function isOptionGroup(entry) {
+  return Array.isArray(entry.options);
+}
+function defaultSearchPredicate(option, searchTerm) {
+  if (!searchTerm) {
+    return true;
+  }
+  return `${option.label} ${option.description ?? ""}`.toLowerCase().includes(searchTerm.toLowerCase());
+}
+function renderSelectTriggerContent({
+  loading,
+  loadingPlaceholder,
+  multiple,
+  placeholder,
+  selected,
+  selectedOptions,
+  TriggerView
+}) {
+  if (loading && selectedOptions.length === 0) {
+    return loadingPlaceholder;
+  }
+  if (TriggerView) {
+    const View = TriggerView;
+    return multiple ? React.createElement(View, {
+      selectedAll: false,
+      values: selectedOptions
+    }) : selected ? React.createElement(View, selected) : placeholder;
+  }
+  if (multiple) {
+    return selectedOptions.length ? `${selectedOptions.length} selected` : placeholder;
+  }
+  return selected?.label || placeholder;
+}
+function renderHiddenSelectInputs({
+  disabled,
+  multiple,
+  name,
+  required,
+  selectedOptions,
+  value
+}) {
+  if (multiple) {
+    return selectedOptions.map(
+      (option) => React.createElement("input", {
+        disabled,
+        key: option.value,
+        name,
+        readOnly: true,
+        required,
+        type: "hidden",
+        value: option.value
+      })
+    );
+  }
+  return React.createElement("input", {
+    disabled,
+    name,
+    readOnly: true,
+    required,
+    type: "hidden",
+    value: Array.isArray(value) ? "" : value
+  });
+}
+function initialsFromName(name) {
+  if (!name) {
+    return null;
+  }
+  const initials = name.trim().split(/\s+/).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("");
+  return initials || null;
+}
+function formatOverflow(count) {
+  return count > 99 ? "99+" : `+${count}`;
+}
+async function copyToClipboard(value) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(typeof value === "string" ? value : Object.values(value).join("\n"));
+  }
+}
+function pinRecipe(Component, recipe) {
+  const ComponentWithRecipe = Component;
+  const Wrapped = ((props) => React.createElement(ComponentWithRecipe, { ...props, recipe }));
+  Object.assign(Wrapped, Component);
+  return Wrapped;
+}
+export {
+  Alert,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Button,
+  ButtonLink,
+  Callout,
+  Checkbox,
+  CircularProgress,
+  Code,
+  CopyButton,
+  Divider,
+  EmptyMessage,
+  EmptyState,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  FormField,
+  Heading,
+  Image,
+  Inline,
+  Input,
+  KeyValue,
+  LoadingDots,
+  LoadingIndicator,
+  Progress,
+  RadioGroup,
+  SegmentedControl,
+  Select,
+  SelectControl,
+  ShimmerText,
+  Skeleton,
+  Slider,
+  Spinner,
+  Stack,
+  Surface,
+  Switch,
+  Table,
+  Tabs,
+  Text,
+  TextField,
+  TextLink,
+  Textarea,
+  createPrimitiveComponents
+};
+//# sourceMappingURL=index.js.map