@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-select.js

@@ -0,0 +1,389 @@
+import {
+  Keys,
+  cn,
+  cva,
+  devWarn,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-select/dist/index.js
+import * as React from "react";
+
+// ../select/dist/index.js
+function createSelect(props = {}) {
+  const {
+    value,
+    options = [],
+    placeholder = "Select an option",
+    disabled = false,
+    open = false
+  } = props;
+  const isInteractive = !disabled;
+  const selectedOption = options.find((o) => o.value === value);
+  const triggerId = generateId("select-trigger");
+  const contentId = generateId("select-content");
+  const triggerAriaProps = {
+    role: "combobox",
+    "aria-expanded": open,
+    "aria-controls": contentId,
+    "aria-labelledby": triggerId
+  };
+  if (disabled) {
+    triggerAriaProps["aria-disabled"] = true;
+  }
+  const triggerKeyboardHandlers = {};
+  if (!isInteractive) {
+    triggerKeyboardHandlers[Keys.Enter] = (e) => e.preventDefault();
+    triggerKeyboardHandlers[Keys.Space] = (e) => e.preventDefault();
+    triggerKeyboardHandlers[Keys.ArrowDown] = (e) => e.preventDefault();
+    triggerKeyboardHandlers[Keys.ArrowUp] = (e) => e.preventDefault();
+  }
+  const triggerDataAttributes = {
+    "data-state": open ? "open" : "closed"
+  };
+  if (disabled) {
+    triggerDataAttributes["data-disabled"] = "";
+  }
+  const contentAriaProps = {
+    role: "listbox",
+    "aria-labelledby": triggerId
+  };
+  const contentDataAttributes = {
+    "data-state": open ? "open" : "closed"
+  };
+  function getOptionProps(option) {
+    const isSelected = option.value === value;
+    const optionAriaProps = {
+      role: "option",
+      "aria-selected": isSelected
+    };
+    if (option.disabled) {
+      optionAriaProps["aria-disabled"] = true;
+    }
+    const optionDataAttributes = {};
+    if (isSelected) {
+      optionDataAttributes["data-state"] = "checked";
+    }
+    if (option.disabled) {
+      optionDataAttributes["data-disabled"] = "";
+    }
+    return {
+      ariaProps: optionAriaProps,
+      dataAttributes: optionDataAttributes,
+      isSelected
+    };
+  }
+  return {
+    triggerProps: {
+      ariaProps: triggerAriaProps,
+      keyboardHandlers: triggerKeyboardHandlers,
+      dataAttributes: triggerDataAttributes
+    },
+    contentProps: {
+      ariaProps: contentAriaProps,
+      dataAttributes: contentDataAttributes
+    },
+    getOptionProps,
+    isInteractive,
+    state: {
+      open,
+      selectedValue: selectedOption?.value,
+      selectedLabel: selectedOption?.label,
+      disabled,
+      placeholder
+    },
+    ids: {
+      trigger: triggerId,
+      content: contentId
+    }
+  };
+}
+var selectTokens = {
+  name: "select",
+  tokens: {
+    bg: { variable: "--rfr-select-bg", fallback: "hsl(var(--background))" },
+    fg: { variable: "--rfr-select-fg", fallback: "hsl(var(--foreground))" },
+    border: { variable: "--rfr-select-border", fallback: "hsl(var(--border))" },
+    ring: { variable: "--rfr-select-ring", fallback: "hsl(var(--ring))" }
+  }
+};
+var selectTriggerVariants = cva({
+  base: "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    size: {
+      sm: "h-8 text-xs",
+      default: "h-9 text-sm",
+      lg: "h-10 text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var selectContentVariants = cva({
+  base: "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
+  variants: {
+    position: {
+      popper: "translate-y-1",
+      "item-aligned": ""
+    }
+  },
+  defaultVariants: {
+    position: "popper"
+  }
+});
+var selectItemVariants = cva({
+  base: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  variants: {
+    selected: {
+      true: "bg-accent/50",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    selected: "false"
+  }
+});
+
+// ../react-select/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var SelectContext = React.createContext({
+  __isDefault: true,
+  value: void 0,
+  onValueChange: () => {
+  },
+  open: false,
+  setOpen: () => {
+  },
+  options: [],
+  disabled: false,
+  placeholder: "Select an option",
+  triggerId: "",
+  contentId: ""
+});
+function useSelectContext(part) {
+  const ctx = React.useContext(SelectContext);
+  if (ctx.__isDefault) {
+    devWarn(
+      "react-select/no-select-provider",
+      `<${part}> was rendered without a <Select> ancestor. It is silently reading inert context defaults (clicks/keyboard do nothing, it never opens). Wrap it in <Select>\u2026</Select>.`
+    );
+  }
+  return ctx;
+}
+function Select({
+  value,
+  onValueChange,
+  disabled = false,
+  children,
+  placeholder = "Select an option"
+}) {
+  const [open, setOpen] = React.useState(false);
+  const api = createSelect({ value, disabled, open, placeholder });
+  return /* @__PURE__ */ jsx(
+    SelectContext.Provider,
+    {
+      value: {
+        value,
+        onValueChange: onValueChange ?? (() => {
+        }),
+        open,
+        setOpen: (v) => {
+          if (!disabled) setOpen(v);
+        },
+        options: [],
+        disabled,
+        placeholder,
+        triggerId: api.ids.trigger,
+        contentId: api.ids.content
+      },
+      children
+    }
+  );
+}
+var SelectTrigger = React.forwardRef(
+  function SelectTrigger2({ className, children, size = "default", ...props }, ref) {
+    const { open, setOpen, disabled, triggerId, contentId } = useSelectContext("SelectTrigger");
+    const api = createSelect({ disabled, open });
+    const handleClick = () => {
+      if (!disabled) {
+        setOpen(!open);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (!disabled) setOpen(!open);
+      }
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+      if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !open) {
+        e.preventDefault();
+        if (!disabled) setOpen(true);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        id: triggerId,
+        className: cn(selectTriggerVariants({ size }), className),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        disabled,
+        ...api.triggerProps.ariaProps,
+        ...api.triggerProps.dataAttributes,
+        "aria-controls": contentId,
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-4 w-4 opacity-50 shrink-0",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var SelectContent = React.forwardRef(
+  function SelectContent2({ className, children, ...props }, forwardedRef) {
+    const { open, contentId, triggerId, setOpen } = useSelectContext("SelectContent");
+    const containerRef = React.useRef(null);
+    const ref = React.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    React.useEffect(() => {
+      if (open && containerRef.current) {
+        const firstOption = containerRef.current.querySelector('[role="option"]:not([aria-disabled="true"])');
+        if (firstOption) {
+          setTimeout(() => firstOption.focus(), 0);
+        }
+      }
+    }, [open]);
+    const handleKeyDown = (e) => {
+      if (!containerRef.current) return;
+      const options = Array.from(
+        containerRef.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')
+      );
+      if (!options.length) return;
+      const currentIndex = options.indexOf(document.activeElement);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
+        options[nextIndex]?.focus();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const prevIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
+        options[prevIndex]?.focus();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+        const trigger = document.getElementById(triggerId);
+        if (trigger) trigger.focus();
+      }
+    };
+    if (!open) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id: contentId,
+        className: cn(selectContentVariants(), className),
+        role: "listbox",
+        "aria-labelledby": triggerId,
+        "data-state": open ? "open" : "closed",
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var SelectItem = React.forwardRef(
+  function SelectItem2({ className, children, value: itemValue, disabled: itemDisabled = false, ...props }, ref) {
+    const { value, onValueChange, setOpen, triggerId } = useSelectContext("SelectItem");
+    const isSelected = value === itemValue;
+    const handleClick = () => {
+      if (!itemDisabled) {
+        onValueChange(itemValue);
+        setOpen(false);
+        const trigger = document.getElementById(triggerId);
+        if (trigger) setTimeout(() => trigger.focus(), 0);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if ((e.key === "Enter" || e.key === " ") && !itemDisabled) {
+        e.preventDefault();
+        onValueChange(itemValue);
+        setOpen(false);
+        const trigger = document.getElementById(triggerId);
+        if (trigger) setTimeout(() => trigger.focus(), 0);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(selectItemVariants({ selected: isSelected ? "true" : "false" }), className),
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": itemDisabled || void 0,
+        "data-state": isSelected ? "checked" : void 0,
+        "data-disabled": itemDisabled ? "" : void 0,
+        tabIndex: itemDisabled ? void 0 : 0,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        ...props,
+        children: [
+          isSelected && /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-4 w-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" })
+            }
+          ) }),
+          children
+        ]
+      }
+    );
+  }
+);
+export {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  selectContentVariants,
+  selectItemVariants,
+  selectTokens,
+  selectTriggerVariants
+};
+//# sourceMappingURL=react-select.js.map

package/dist/react-select.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../select/src/select.ts", "../../select/src/select.styles.ts", "../../react-select/src/select.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { Keys, generateId } from '@refraction-ui/shared'\n\nexport interface SelectOption {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\nexport interface SelectProps {\n  value?: string\n  options?: SelectOption[]\n  placeholder?: string\n  disabled?: boolean\n  open?: boolean\n  name?: string\n}\n\nexport interface SelectAPI {\n  /** Trigger element ARIA + keyboard props */\n  triggerProps: {\n    ariaProps: Partial<AccessibilityProps>\n    keyboardHandlers: KeyboardHandlerMap\n    dataAttributes: Record<string, string>\n  }\n  /** Content (dropdown) props */\n  contentProps: {\n    ariaProps: Partial<AccessibilityProps>\n    dataAttributes: Record<string, string>\n  }\n  /** Get props for a single option */\n  getOptionProps: (option: SelectOption) => {\n    ariaProps: Partial<AccessibilityProps>\n    dataAttributes: Record<string, string>\n    isSelected: boolean\n  }\n  /** Whether interaction should be blocked */\n  isInteractive: boolean\n  /** Current state */\n  state: {\n    open: boolean\n    selectedValue: string | undefined\n    selectedLabel: string | undefined\n    disabled: boolean\n    placeholder: string\n  }\n  /** Generated IDs for trigger/content association */\n  ids: {\n    trigger: string\n    content: string\n  }\n}\n\nexport function createSelect(props: SelectProps = {}): SelectAPI {\n  const {\n    value,\n    options = [],\n    placeholder = 'Select an option',\n    disabled = false,\n    open = false,\n  } = props\n\n  const isInteractive = !disabled\n  const selectedOption = options.find((o) => o.value === value)\n\n  const triggerId = generateId('select-trigger')\n  const contentId = generateId('select-content')\n\n  const triggerAriaProps: Partial<AccessibilityProps> = {\n    role: 'combobox',\n    'aria-expanded': open,\n    'aria-controls': contentId,\n    'aria-labelledby': triggerId,\n  }\n  if (disabled) {\n    triggerAriaProps['aria-disabled'] = true\n  }\n\n  const triggerKeyboardHandlers: KeyboardHandlerMap = {}\n  if (!isInteractive) {\n    triggerKeyboardHandlers[Keys.Enter] = (e) => e.preventDefault()\n    triggerKeyboardHandlers[Keys.Space] = (e) => e.preventDefault()\n    triggerKeyboardHandlers[Keys.ArrowDown] = (e) => e.preventDefault()\n    triggerKeyboardHandlers[Keys.ArrowUp] = (e) => e.preventDefault()\n  }\n\n  const triggerDataAttributes: Record<string, string> = {\n    'data-state': open ? 'open' : 'closed',\n  }\n  if (disabled) {\n    triggerDataAttributes['data-disabled'] = ''\n  }\n\n  const contentAriaProps: Partial<AccessibilityProps> = {\n    role: 'listbox',\n    'aria-labelledby': triggerId,\n  }\n\n  const contentDataAttributes: Record<string, string> = {\n    'data-state': open ? 'open' : 'closed',\n  }\n\n  function getOptionProps(option: SelectOption) {\n    const isSelected = option.value === value\n    const optionAriaProps: Partial<AccessibilityProps> = {\n      role: 'option',\n      'aria-selected': isSelected,\n    }\n    if (option.disabled) {\n      optionAriaProps['aria-disabled'] = true\n    }\n\n    const optionDataAttributes: Record<string, string> = {}\n    if (isSelected) {\n      optionDataAttributes['data-state'] = 'checked'\n    }\n    if (option.disabled) {\n      optionDataAttributes['data-disabled'] = ''\n    }\n\n    return {\n      ariaProps: optionAriaProps,\n      dataAttributes: optionDataAttributes,\n      isSelected,\n    }\n  }\n\n  return {\n    triggerProps: {\n      ariaProps: triggerAriaProps,\n      keyboardHandlers: triggerKeyboardHandlers,\n      dataAttributes: triggerDataAttributes,\n    },\n    contentProps: {\n      ariaProps: contentAriaProps,\n      dataAttributes: contentDataAttributes,\n    },\n    getOptionProps,\n    isInteractive,\n    state: {\n      open,\n      selectedValue: selectedOption?.value,\n      selectedLabel: selectedOption?.label,\n      disabled,\n      placeholder,\n    },\n    ids: {\n      trigger: triggerId,\n      content: contentId,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const selectTokens: TokenContract = {\n  name: 'select',\n  tokens: {\n    bg: { variable: '--rfr-select-bg', fallback: 'hsl(var(--background))' },\n    fg: { variable: '--rfr-select-fg', fallback: 'hsl(var(--foreground))' },\n    border: { variable: '--rfr-select-border', fallback: 'hsl(var(--border))' },\n    ring: { variable: '--rfr-select-ring', fallback: 'hsl(var(--ring))' },\n  },\n}\n\nexport const selectTriggerVariants = cva({\n  base: 'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n  variants: {\n    size: {\n      sm: 'h-8 text-xs',\n      default: 'h-9 text-sm',\n      lg: 'h-10 text-base',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\nexport const selectContentVariants = cva({\n  base: 'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95',\n  variants: {\n    position: {\n      popper: 'translate-y-1',\n      'item-aligned': '',\n    },\n  },\n  defaultVariants: {\n    position: 'popper',\n  },\n})\n\nexport const selectItemVariants = cva({\n  base: 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n  variants: {\n    selected: {\n      true: 'bg-accent/50',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    selected: 'false',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createSelect,\n  selectTriggerVariants,\n  selectContentVariants,\n  selectItemVariants,\n  type SelectOption,\n} from '@refraction-ui/select'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n/* ─── Context ──────────────────────────────────────────────────── */\ninterface SelectContextValue {\n  value: string | undefined\n  onValueChange: (value: string) => void\n  open: boolean\n  setOpen: (open: boolean) => void\n  options: SelectOption[]\n  disabled: boolean\n  placeholder: string\n  triggerId: string\n  contentId: string\n  /**\n   * Internal marker: `true` only on the context *default* (i.e. no `<Select>`\n   * provider above this part). `<Select>` always supplies a value without\n   * this flag. Used purely to detect the silent-default footgun — never read\n   * for rendering.\n   *\n   * @internal\n   */\n  __isDefault?: boolean\n}\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  __isDefault: true,\n  value: undefined,\n  onValueChange: () => {},\n  open: false,\n  setOpen: () => {},\n  options: [],\n  disabled: false,\n  placeholder: 'Select an option',\n  triggerId: '',\n  contentId: '',\n})\n\n/**\n * Read the select context for a compound part (`SelectTrigger`,\n * `SelectContent`, `SelectItem`).\n *\n * Footgun seam (epic #254 / #256, policy: `silent-default-context`): when a\n * part is rendered without a `<Select>` ancestor it silently reads inert\n * context defaults (no-op handlers, empty ids, never-open) and renders a dead\n * control with no error. There is no throw today and adding one would be a\n * breaking change, so per `docs/instrumentation/policy.md` a dev-only\n * `devWarn` is the *only* signal. Stripped in production, warn-once.\n *\n * Behaviour is unchanged: the default context value is still returned.\n */\nfunction useSelectContext(part: string): SelectContextValue {\n  const ctx = React.useContext(SelectContext)\n  if (ctx.__isDefault) {\n    devWarn(\n      'react-select/no-select-provider',\n      `<${part}> was rendered without a <Select> ancestor. It is silently ` +\n        'reading inert context defaults (clicks/keyboard do nothing, it never ' +\n        'opens). Wrap it in <Select>…</Select>.',\n    )\n  }\n  return ctx\n}\n\n/* ─── Select (root) ────────────────────────────────────────────── */\nexport interface SelectProps {\n  value?: string\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n  children?: React.ReactNode\n  placeholder?: string\n}\n\n/**\n * Select -- dropdown select with accessible keyboard and ARIA support.\n * Compound component: Select > SelectTrigger + SelectContent > SelectItem.\n */\nexport function Select({\n  value,\n  onValueChange,\n  disabled = false,\n  children,\n  placeholder = 'Select an option',\n}: SelectProps) {\n  const [open, setOpen] = React.useState(false)\n\n  const api = createSelect({ value, disabled, open, placeholder })\n\n  return (\n    <SelectContext.Provider\n      value={{\n        value,\n        onValueChange: onValueChange ?? (() => {}),\n        open,\n        setOpen: (v) => {\n          if (!disabled) setOpen(v)\n        },\n        options: [],\n        disabled,\n        placeholder,\n        triggerId: api.ids.trigger,\n        contentId: api.ids.content,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  )\n}\n\n/* ─── SelectTrigger ────────────────────────────────────────────── */\nexport interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size?: 'sm' | 'default' | 'lg'\n}\n\nexport const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger({ className, children, size = 'default', ...props }, ref) {\n    const { open, setOpen, disabled, triggerId, contentId } = useSelectContext('SelectTrigger')\n\n    const api = createSelect({ disabled, open })\n\n    const handleClick = () => {\n      if (!disabled) {\n        setOpen(!open)\n      }\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        if (!disabled) setOpen(!open)\n      }\n      if (e.key === 'Escape') {\n        setOpen(false)\n      }\n      if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !open) {\n        e.preventDefault()\n        if (!disabled) setOpen(true)\n      }\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        id={triggerId}\n        className={cn(selectTriggerVariants({ size }), className)}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        {...api.triggerProps.ariaProps}\n        {...api.triggerProps.dataAttributes}\n        aria-controls={contentId}\n        {...props}\n      >\n        {children}\n        <svg\n          className=\"h-4 w-4 opacity-50 shrink-0\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </button>\n    )\n  },\n)\n\n/* ─── SelectContent ────────────────────────────────────────────── */\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n  function SelectContent({ className, children, ...props }, forwardedRef) {\n    const { open, contentId, triggerId, setOpen } = useSelectContext('SelectContent')\n    const containerRef = React.useRef<HTMLDivElement>(null)\n\n    // Merge refs\n    const ref = React.useCallback(\n      (node: HTMLDivElement) => {\n        containerRef.current = node\n        if (typeof forwardedRef === 'function') forwardedRef(node)\n        else if (forwardedRef) forwardedRef.current = node\n      },\n      [forwardedRef]\n    )\n\n    React.useEffect(() => {\n      if (open && containerRef.current) {\n        const firstOption = containerRef.current.querySelector('[role=\"option\"]:not([aria-disabled=\"true\"])') as HTMLElement\n        if (firstOption) {\n          // Delay focus slightly to ensure DOM is ready\n          setTimeout(() => firstOption.focus(), 0)\n        }\n      }\n    }, [open])\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!containerRef.current) return\n\n      const options = Array.from(\n        containerRef.current.querySelectorAll('[role=\"option\"]:not([aria-disabled=\"true\"])')\n      ) as HTMLElement[]\n\n      if (!options.length) return\n\n      const currentIndex = options.indexOf(document.activeElement as HTMLElement)\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0\n        options[nextIndex]?.focus()\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        const prevIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1\n        options[prevIndex]?.focus()\n      } else if (e.key === 'Escape') {\n        e.preventDefault()\n        setOpen(false)\n        // Focus back to trigger\n        const trigger = document.getElementById(triggerId)\n        if (trigger) trigger.focus()\n      }\n    }\n\n    if (!open) return null\n\n    return (\n      <div\n        ref={ref}\n        id={contentId}\n        className={cn(selectContentVariants(), className)}\n        role=\"listbox\"\n        aria-labelledby={triggerId}\n        data-state={open ? 'open' : 'closed'}\n        onKeyDown={handleKeyDown}\n        tabIndex={-1}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\n/* ─── SelectItem ───────────────────────────────────────────────── */\nexport interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string\n  disabled?: boolean\n}\n\nexport const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(\n  function SelectItem({ className, children, value: itemValue, disabled: itemDisabled = false, ...props }, ref) {\n    const { value, onValueChange, setOpen, triggerId } = useSelectContext('SelectItem')\n    const isSelected = value === itemValue\n\n    const handleClick = () => {\n      if (!itemDisabled) {\n        onValueChange(itemValue)\n        setOpen(false)\n        const trigger = document.getElementById(triggerId)\n        if (trigger) setTimeout(() => trigger.focus(), 0)\n      }\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if ((e.key === 'Enter' || e.key === ' ') && !itemDisabled) {\n        e.preventDefault()\n        onValueChange(itemValue)\n        setOpen(false)\n        const trigger = document.getElementById(triggerId)\n        if (trigger) setTimeout(() => trigger.focus(), 0)\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(selectItemVariants({ selected: isSelected ? 'true' : 'false' }), className)}\n        role=\"option\"\n        aria-selected={isSelected}\n        aria-disabled={itemDisabled || undefined}\n        data-state={isSelected ? 'checked' : undefined}\n        data-disabled={itemDisabled ? '' : undefined}\n        tabIndex={itemDisabled ? undefined : 0}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        {isSelected && (\n          <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n            <svg\n              className=\"h-4 w-4\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M20 6L9 17l-5-5\" />\n            </svg>\n          </span>\n        )}\n        {children}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["SelectTrigger", "SelectContent", "SelectItem"]
+}

package/dist/react-separator.js

@@ -0,0 +1,86 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-separator/dist/index.js
+import * as React from "react";
+
+// ../separator/dist/index.js
+function createSeparator(props = {}) {
+  const { orientation = "horizontal", decorative = true } = props;
+  const ariaProps = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation };
+  const dataAttributes = {
+    "data-orientation": orientation
+  };
+  return {
+    ariaProps,
+    dataAttributes
+  };
+}
+var separatorVariants = cva({
+  base: "",
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full bg-border",
+      vertical: "w-px h-full bg-border"
+    },
+    labeled: {
+      true: "flex items-center",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    labeled: "false"
+  }
+});
+var separatorLineClass = "h-px flex-1 bg-border";
+var separatorLabelClass = "px-3 text-xs uppercase tracking-wide text-muted-foreground";
+
+// ../react-separator/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var Separator = React.forwardRef(
+  function Separator2({
+    orientation = "horizontal",
+    label,
+    decorative = true,
+    className,
+    ...props
+  }, ref) {
+    if (orientation === "horizontal" && label != null) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          role: "none",
+          className: cn(separatorVariants({ labeled: "true" }), className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: separatorLineClass }),
+            /* @__PURE__ */ jsx("span", { className: separatorLabelClass, children: label }),
+            /* @__PURE__ */ jsx("span", { className: separatorLineClass })
+          ]
+        }
+      );
+    }
+    const { ariaProps, dataAttributes } = createSeparator({
+      orientation,
+      decorative
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(separatorVariants({ orientation }), className),
+        ...ariaProps,
+        ...dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+export {
+  Separator
+};
+//# sourceMappingURL=react-separator.js.map

package/dist/react-separator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../separator/src/separator.ts", "../../separator/src/separator.styles.ts", "../../react-separator/src/separator.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type SeparatorOrientation = 'horizontal' | 'vertical'\n\nexport interface SeparatorProps {\n  /** Orientation of the separator. Defaults to `'horizontal'`. */\n  orientation?: SeparatorOrientation\n  /**\n   * When `true` (the default) the separator is purely visual and is hidden\n   * from assistive tech (`role=\"none\"`). When `false` it is exposed as a\n   * semantic `role=\"separator\"` with the appropriate `aria-orientation`.\n   */\n  decorative?: boolean\n}\n\n/**\n * ARIA attributes for a separator. Extends the shared base with\n * `aria-orientation`, which is specific to the `separator` role.\n */\nexport interface SeparatorAriaProps extends Partial<AccessibilityProps> {\n  'aria-orientation'?: SeparatorOrientation\n}\n\nexport interface SeparatorAPI {\n  /** ARIA attributes to spread on the element. */\n  ariaProps: SeparatorAriaProps\n  /** Data attributes for CSS styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Headless separator core — computes ARIA semantics and data attributes for\n * a separator rule. JSX-free so it can be shared across framework adapters.\n *\n * Per ARIA, a decorative separator must not be announced (`role=\"none\"`),\n * while a semantic one exposes `role=\"separator\"` and `aria-orientation`.\n */\nexport function createSeparator(props: SeparatorProps = {}): SeparatorAPI {\n  const { orientation = 'horizontal', decorative = true } = props\n\n  const ariaProps: SeparatorAriaProps = decorative\n    ? { role: 'none' }\n    : { role: 'separator', 'aria-orientation': orientation }\n\n  const dataAttributes: Record<string, string> = {\n    'data-orientation': orientation,\n  }\n\n  return {\n    ariaProps,\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Visual variants for the separator rule.\n *\n * - `orientation: horizontal` → a full-width 1px line.\n * - `orientation: vertical` → a full-height 1px line.\n * - `labeled` → flex layout used by the labeled-divider variant, which\n *   arranges a centered label between two flanking lines.\n */\nexport const separatorVariants = cva({\n  base: '',\n  variants: {\n    orientation: {\n      horizontal: 'h-px w-full bg-border',\n      vertical: 'w-px h-full bg-border',\n    },\n    labeled: {\n      true: 'flex items-center',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    labeled: 'false',\n  },\n})\n\n/** Class for each flanking line in the labeled-divider variant. */\nexport const separatorLineClass = 'h-px flex-1 bg-border'\n\n/** Class for the centered label in the labeled-divider variant. */\nexport const separatorLabelClass =\n  'px-3 text-xs uppercase tracking-wide text-muted-foreground'\n", "import * as React from 'react'\nimport {\n  createSeparator,\n  separatorVariants,\n  separatorLineClass,\n  separatorLabelClass,\n  type SeparatorOrientation,\n} from '@refraction-ui/separator'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Orientation of the separator. Defaults to `'horizontal'`. */\n  orientation?: SeparatorOrientation\n  /**\n   * Optional centered label. Only meaningful for horizontal separators —\n   * renders a line on each side of the label (a \"labeled divider\").\n   */\n  label?: React.ReactNode\n  /**\n   * When `true` (the default) the separator is purely visual and is hidden\n   * from assistive tech (`role=\"none\"`). When `false` it is exposed as a\n   * semantic `role=\"separator\"` with the appropriate `aria-orientation`.\n   */\n  decorative?: boolean\n}\n\n/**\n * Separator / LabeledDivider — a thin rule that visually divides content.\n *\n * Supports horizontal and vertical orientations and an optional centered\n * label (the \"labeled divider\" variant, horizontal only). State and ARIA\n * semantics come from the headless @refraction-ui/separator core; styling\n * via Tailwind utility classes (no external CSS-in-JS).\n */\nexport const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  function Separator(\n    {\n      orientation = 'horizontal',\n      label,\n      decorative = true,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    // Labeled divider — decorative chrome wrapping a centered label.\n    if (orientation === 'horizontal' && label != null) {\n      return (\n        <div\n          ref={ref}\n          role=\"none\"\n          className={cn(separatorVariants({ labeled: 'true' }), className)}\n          {...props}\n        >\n          <span className={separatorLineClass} />\n          <span className={separatorLabelClass}>{label}</span>\n          <span className={separatorLineClass} />\n        </div>\n      )\n    }\n\n    const { ariaProps, dataAttributes } = createSeparator({\n      orientation,\n      decorative,\n    })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(separatorVariants({ orientation }), className)}\n        {...ariaProps}\n        {...dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAqCO,SAAS,gBAAgB,QAAwB,CAAA,GAAkB;AACxE,QAAM,EAAE,cAAc,cAAc,aAAa,KAAA,IAAS;AAE1D,QAAM,YAAgC,aAClC,EAAE,MAAM,OAAA,IACR,EAAE,MAAM,aAAa,oBAAoB,YAAA;AAE7C,QAAM,iBAAyC;IAC7C,oBAAoB;EAAA;AAGtB,SAAO;IACL;IACA;EAAA;AAEJ;AC1CO,IAAM,oBAAoB,IAAI;EACnC,MAAM;EACN,UAAU;IACR,aAAa;MACX,YAAY;MACZ,UAAU;IAAA;IAEZ,SAAS;MACP,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,aAAa;IACb,SAAS;EAAA;AAEb,CAAC;AAGM,IAAM,qBAAqB;AAG3B,IAAM,sBACX;;;;ACCK,IAAM,YAAkB;EAC7B,SAASA,WACP;IACE,cAAc;IACd;IACA,aAAa;IACb;IACA,GAAG;EAAA,GAEL,KACA;AAEA,QAAI,gBAAgB,gBAAgB,SAAS,MAAM;AACjD,aACE;QAAC;QAAA;UACC;UACA,MAAK;UACL,WAAW,GAAG,kBAAkB,EAAE,SAAS,OAAA,CAAQ,GAAG,SAAS;UAC9D,GAAG;UAEJ,UAAA;YAAA,oBAAC,QAAA,EAAK,WAAW,mBAAA,CAAoB;YACrC,oBAAC,QAAA,EAAK,WAAW,qBAAsB,UAAA,MAAA,CAAM;YAC7C,oBAAC,QAAA,EAAK,WAAW,mBAAA,CAAoB;UAAA;QAAA;MAAA;IAG3C;AAEA,UAAM,EAAE,WAAW,eAAA,IAAmB,gBAAgB;MACpD;MACA;IAAA,CACD;AAED,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,kBAAkB,EAAE,YAAA,CAAa,GAAG,SAAS;QAC1D,GAAG;QACH,GAAG;QACH,GAAG;MAAA;IAAA;EAGV;AACF;",
+  "names": ["Separator"]
+}