@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-rich-editor.js

@@ -0,0 +1 @@
+//# sourceMappingURL=react-rich-editor.js.map

package/dist/react-rich-editor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/react-search-bar.js

@@ -0,0 +1,285 @@
+import {
+  Keys,
+  cn,
+  createKeyboardHandler,
+  cva,
+  devWarn,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-search-bar/dist/index.js
+import * as React from "react";
+
+// ../search-bar/dist/index.js
+function createSearchBar(props = {}) {
+  const {
+    value: initialValue = "",
+    onValueChange,
+    onSearch,
+    debounceMs = 300,
+    placeholder: _placeholder,
+    loading = false
+  } = props;
+  const listId = generateId("rfr-search-list");
+  let currentValue = initialValue;
+  let isSearching = loading;
+  let debounceTimer;
+  const state = { value: currentValue, isSearching };
+  function setValue(value) {
+    currentValue = value;
+    state.value = value;
+    onValueChange?.(value);
+    if (debounceTimer !== void 0) {
+      clearTimeout(debounceTimer);
+    }
+    if (value.length > 0) {
+      isSearching = true;
+      state.isSearching = true;
+      debounceTimer = setTimeout(() => {
+        onSearch?.(value);
+        isSearching = false;
+        state.isSearching = false;
+      }, debounceMs);
+    } else {
+      isSearching = false;
+      state.isSearching = false;
+    }
+  }
+  function clear() {
+    if (debounceTimer !== void 0) {
+      clearTimeout(debounceTimer);
+    }
+    currentValue = "";
+    state.value = "";
+    isSearching = false;
+    state.isSearching = false;
+    onValueChange?.("");
+  }
+  const inputProps = {
+    role: "combobox",
+    "aria-expanded": currentValue.length > 0,
+    "aria-controls": listId,
+    "aria-autocomplete": "list"
+  };
+  const listProps = {
+    role: "listbox",
+    id: listId
+  };
+  const keyboardHandlers = {
+    [Keys.ArrowDown]: () => {
+    },
+    [Keys.Escape]: () => {
+      clear();
+    },
+    [Keys.Enter]: () => {
+      if (debounceTimer !== void 0) {
+        clearTimeout(debounceTimer);
+      }
+      onSearch?.(currentValue);
+      isSearching = false;
+      state.isSearching = false;
+    }
+  };
+  const handleKeyDown = createKeyboardHandler(keyboardHandlers);
+  return {
+    state,
+    inputProps,
+    listProps,
+    setValue,
+    clear,
+    keyboardHandlers,
+    handleKeyDown
+  };
+}
+var searchBarVariants = cva({
+  base: "relative flex items-center w-full rounded-md border bg-background text-foreground",
+  variants: {
+    size: {
+      sm: "h-8 text-sm px-2",
+      md: "h-10 text-base px-3",
+      lg: "h-12 text-lg px-4"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var searchResultVariants = cva({
+  base: "absolute top-full left-0 w-full mt-1 rounded-md border bg-popover text-popover-foreground shadow-md z-50 overflow-hidden",
+  variants: {
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// ../react-search-bar/dist/index.js
+var SearchBarContext = React.createContext(null);
+function useSearchBarContext() {
+  const ctx = React.useContext(SearchBarContext);
+  if (!ctx) {
+    devWarn(
+      "react-search-bar/compound-outside-provider",
+      "A SearchBar compound component was rendered outside of <SearchBar>. Wrap it in <SearchBar>."
+    );
+    throw new Error("SearchBar compound components must be used within <SearchBar>");
+  }
+  return ctx;
+}
+var SearchBar = React.forwardRef(
+  function SearchBar2({ value: controlledValue, defaultValue = "", onValueChange, onSearch, debounceMs = 300, loading = false, placeholder, className, children, ...inputProps }, ref) {
+    const [internalValue, setInternalValue] = React.useState(controlledValue ?? defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const debounceRef = React.useRef(void 0);
+    const handleValueChange = React.useCallback(
+      (val) => {
+        if (!isControlled) {
+          setInternalValue(val);
+        }
+        onValueChange?.(val);
+      },
+      [isControlled, onValueChange]
+    );
+    const [isSearching, setIsSearching] = React.useState(loading);
+    const handleSearch = React.useCallback(
+      (val) => {
+        if (debounceRef.current !== void 0) {
+          clearTimeout(debounceRef.current);
+        }
+        if (val.length > 0) {
+          setIsSearching(true);
+          debounceRef.current = setTimeout(() => {
+            onSearch?.(val);
+            setIsSearching(false);
+          }, debounceMs);
+        } else {
+          setIsSearching(false);
+        }
+      },
+      [onSearch, debounceMs]
+    );
+    const handleChange = React.useCallback(
+      (e) => {
+        const val = e.target.value;
+        handleValueChange(val);
+        handleSearch(val);
+      },
+      [handleValueChange, handleSearch]
+    );
+    const clear = React.useCallback(() => {
+      if (debounceRef.current !== void 0) {
+        clearTimeout(debounceRef.current);
+      }
+      handleValueChange("");
+      setIsSearching(false);
+    }, [handleValueChange]);
+    const api = React.useMemo(
+      () => createSearchBar({
+        value: currentValue,
+        onValueChange: handleValueChange,
+        onSearch,
+        debounceMs,
+        placeholder,
+        loading
+      }),
+      [currentValue, handleValueChange, onSearch, debounceMs, placeholder, loading]
+    );
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (e.key === "Escape") {
+          clear();
+        } else if (e.key === "Enter") {
+          if (debounceRef.current !== void 0) {
+            clearTimeout(debounceRef.current);
+          }
+          onSearch?.(currentValue);
+          setIsSearching(false);
+        }
+      },
+      [clear, onSearch, currentValue]
+    );
+    const ctx = React.useMemo(
+      () => ({ api, value: currentValue, isSearching, setValue: handleValueChange, clear }),
+      [api, currentValue, isSearching, handleValueChange, clear]
+    );
+    return React.createElement(
+      SearchBarContext.Provider,
+      { value: ctx },
+      React.createElement(
+        "div",
+        { className: cn(searchBarVariants(), className) },
+        React.createElement("span", { className: "rfr-search-icon", "aria-hidden": "true" }, "\u{1F50D}"),
+        React.createElement("input", {
+          ref,
+          ...inputProps,
+          role: api.inputProps.role,
+          "aria-expanded": api.inputProps["aria-expanded"],
+          "aria-controls": api.inputProps["aria-controls"],
+          "aria-autocomplete": api.inputProps["aria-autocomplete"],
+          value: currentValue,
+          placeholder,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          className: "rfr-search-input flex-1 bg-transparent outline-none"
+        }),
+        isSearching && React.createElement("span", { className: "rfr-search-spinner", "aria-label": "Loading" }, "\u23F3"),
+        currentValue.length > 0 && !isSearching && React.createElement(
+          "button",
+          {
+            type: "button",
+            className: "rfr-search-clear",
+            onClick: clear,
+            "aria-label": "Clear search"
+          },
+          "\u2715"
+        )
+      ),
+      children
+    );
+  }
+);
+var SearchResults = React.forwardRef(
+  function SearchResults2({ className, children, ...props }, ref) {
+    const { api, value } = useSearchBarContext();
+    if (value.length === 0) return null;
+    return React.createElement(
+      "ul",
+      {
+        ref,
+        role: api.listProps.role,
+        id: api.listProps.id,
+        className: cn(searchResultVariants(), className),
+        ...props
+      },
+      children
+    );
+  }
+);
+var SearchResultItem = React.forwardRef(
+  function SearchResultItem2({ className, children, ...props }, ref) {
+    return React.createElement(
+      "li",
+      {
+        ref,
+        role: "option",
+        className: cn("px-3 py-2 cursor-pointer hover:bg-accent", className),
+        ...props
+      },
+      children
+    );
+  }
+);
+export {
+  SearchBar,
+  SearchResultItem,
+  SearchResults,
+  searchBarVariants,
+  searchResultVariants
+};
+//# sourceMappingURL=react-search-bar.js.map

package/dist/react-search-bar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../search-bar/src/search-bar.ts", "../../search-bar/src/search-bar.styles.ts", "../../react-search-bar/src/search-bar.tsx"],
+  "sourcesContent": ["import type { KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { generateId, Keys, createKeyboardHandler } from '@refraction-ui/shared'\n\nexport interface SearchBarProps {\n  value?: string\n  onValueChange?: (value: string) => void\n  onSearch?: (value: string) => void\n  debounceMs?: number\n  placeholder?: string\n  loading?: boolean\n}\n\nexport interface SearchBarAPI {\n  /** Current state */\n  state: { value: string; isSearching: boolean }\n  /** Props to spread on the input element */\n  inputProps: {\n    role: 'combobox'\n    'aria-expanded': boolean\n    'aria-controls': string\n    'aria-autocomplete': 'list'\n  }\n  /** Props to spread on the results list element */\n  listProps: {\n    role: 'listbox'\n    id: string\n  }\n  /** Set the search value */\n  setValue: (value: string) => void\n  /** Clear the search value */\n  clear: () => void\n  /** Keyboard handler map */\n  keyboardHandlers: KeyboardHandlerMap\n  /** Pre-built keyboard event handler */\n  handleKeyDown: (event: KeyboardEvent) => void\n}\n\nexport function createSearchBar(props: SearchBarProps = {}): SearchBarAPI {\n  const {\n    value: initialValue = '',\n    onValueChange,\n    onSearch,\n    debounceMs = 300,\n    placeholder: _placeholder,\n    loading = false,\n  } = props\n\n  const listId = generateId('rfr-search-list')\n\n  let currentValue = initialValue\n  let isSearching = loading\n  let debounceTimer: ReturnType<typeof setTimeout> | undefined\n\n  const state = { value: currentValue, isSearching }\n\n  function setValue(value: string) {\n    currentValue = value\n    state.value = value\n    onValueChange?.(value)\n\n    if (debounceTimer !== undefined) {\n      clearTimeout(debounceTimer)\n    }\n\n    if (value.length > 0) {\n      isSearching = true\n      state.isSearching = true\n      debounceTimer = setTimeout(() => {\n        onSearch?.(value)\n        isSearching = false\n        state.isSearching = false\n      }, debounceMs)\n    } else {\n      isSearching = false\n      state.isSearching = false\n    }\n  }\n\n  function clear() {\n    if (debounceTimer !== undefined) {\n      clearTimeout(debounceTimer)\n    }\n    currentValue = ''\n    state.value = ''\n    isSearching = false\n    state.isSearching = false\n    onValueChange?.('')\n  }\n\n  const inputProps = {\n    role: 'combobox' as const,\n    'aria-expanded': currentValue.length > 0,\n    'aria-controls': listId,\n    'aria-autocomplete': 'list' as const,\n  }\n\n  const listProps = {\n    role: 'listbox' as const,\n    id: listId,\n  }\n\n  const keyboardHandlers: KeyboardHandlerMap = {\n    [Keys.ArrowDown]: () => {\n      // Focus first result - signaled via handler\n    },\n    [Keys.Escape]: () => {\n      clear()\n    },\n    [Keys.Enter]: () => {\n      if (debounceTimer !== undefined) {\n        clearTimeout(debounceTimer)\n      }\n      onSearch?.(currentValue)\n      isSearching = false\n      state.isSearching = false\n    },\n  }\n\n  const handleKeyDown = createKeyboardHandler(keyboardHandlers)\n\n  return {\n    state,\n    inputProps,\n    listProps,\n    setValue,\n    clear,\n    keyboardHandlers,\n    handleKeyDown,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const searchBarVariants = cva({\n  base: 'relative flex items-center w-full rounded-md border bg-background text-foreground',\n  variants: {\n    size: {\n      sm: 'h-8 text-sm px-2',\n      md: 'h-10 text-base px-3',\n      lg: 'h-12 text-lg px-4',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const searchResultVariants = cva({\n  base: 'absolute top-full left-0 w-full mt-1 rounded-md border bg-popover text-popover-foreground shadow-md z-50 overflow-hidden',\n  variants: {\n    size: {\n      sm: 'text-sm',\n      md: 'text-base',\n      lg: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createSearchBar,\n  searchBarVariants,\n  searchResultVariants,\n  type SearchBarAPI,\n} from '@refraction-ui/search-bar'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ninterface SearchBarContextValue {\n  api: SearchBarAPI\n  value: string\n  isSearching: boolean\n  setValue: (value: string) => void\n  clear: () => void\n}\n\nconst SearchBarContext = React.createContext<SearchBarContextValue | null>(null)\n\nfunction useSearchBarContext(): SearchBarContextValue {\n  const ctx = React.useContext(SearchBarContext)\n  if (!ctx) {\n    devWarn(\n      'react-search-bar/compound-outside-provider',\n      'A SearchBar compound component was rendered outside of <SearchBar>. Wrap it in <SearchBar>.',\n    )\n    throw new Error('SearchBar compound components must be used within <SearchBar>')\n  }\n  return ctx\n}\n\n/* ------------------------------------------------------------------ */\n/*  SearchBar (root provider + input)                                  */\n/* ------------------------------------------------------------------ */\n\nexport interface SearchBarProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  onSearch?: (value: string) => void\n  debounceMs?: number\n  loading?: boolean\n  children?: React.ReactNode\n}\n\nexport const SearchBar = React.forwardRef<HTMLInputElement, SearchBarProps>(\n  function SearchBar({ value: controlledValue, defaultValue = '', onValueChange, onSearch, debounceMs = 300, loading = false, placeholder, className, children, ...inputProps }, ref) {\n  const [internalValue, setInternalValue] = React.useState(controlledValue ?? defaultValue)\n  const isControlled = controlledValue !== undefined\n  const currentValue = isControlled ? controlledValue : internalValue\n\n  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  const handleValueChange = React.useCallback(\n    (val: string) => {\n      if (!isControlled) {\n        setInternalValue(val)\n      }\n      onValueChange?.(val)\n    },\n    [isControlled, onValueChange],\n  )\n\n  const [isSearching, setIsSearching] = React.useState(loading)\n\n  const handleSearch = React.useCallback(\n    (val: string) => {\n      if (debounceRef.current !== undefined) {\n        clearTimeout(debounceRef.current)\n      }\n      if (val.length > 0) {\n        setIsSearching(true)\n        debounceRef.current = setTimeout(() => {\n          onSearch?.(val)\n          setIsSearching(false)\n        }, debounceMs)\n      } else {\n        setIsSearching(false)\n      }\n    },\n    [onSearch, debounceMs],\n  )\n\n  const handleChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const val = e.target.value\n      handleValueChange(val)\n      handleSearch(val)\n    },\n    [handleValueChange, handleSearch],\n  )\n\n  const clear = React.useCallback(() => {\n    if (debounceRef.current !== undefined) {\n      clearTimeout(debounceRef.current)\n    }\n    handleValueChange('')\n    setIsSearching(false)\n  }, [handleValueChange])\n\n  const api = React.useMemo(\n    () =>\n      createSearchBar({\n        value: currentValue,\n        onValueChange: handleValueChange,\n        onSearch,\n        debounceMs,\n        placeholder,\n        loading,\n      }),\n    [currentValue, handleValueChange, onSearch, debounceMs, placeholder, loading],\n  )\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Escape') {\n        clear()\n      } else if (e.key === 'Enter') {\n        if (debounceRef.current !== undefined) {\n          clearTimeout(debounceRef.current)\n        }\n        onSearch?.(currentValue)\n        setIsSearching(false)\n      }\n    },\n    [clear, onSearch, currentValue],\n  )\n\n  const ctx = React.useMemo<SearchBarContextValue>(\n    () => ({ api, value: currentValue, isSearching, setValue: handleValueChange, clear }),\n    [api, currentValue, isSearching, handleValueChange, clear],\n  )\n\n  return React.createElement(\n    SearchBarContext.Provider,\n    { value: ctx },\n    React.createElement(\n      'div',\n      { className: cn(searchBarVariants(), className) },\n      React.createElement('span', { className: 'rfr-search-icon', 'aria-hidden': 'true' }, '\\u{1F50D}'),\n      React.createElement('input', {\n        ref,\n        ...inputProps,\n        role: api.inputProps.role,\n        'aria-expanded': api.inputProps['aria-expanded'],\n        'aria-controls': api.inputProps['aria-controls'],\n        'aria-autocomplete': api.inputProps['aria-autocomplete'],\n        value: currentValue,\n        placeholder,\n        onChange: handleChange,\n        onKeyDown: handleKeyDown,\n        className: 'rfr-search-input flex-1 bg-transparent outline-none',\n      }),\n      isSearching &&\n        React.createElement('span', { className: 'rfr-search-spinner', 'aria-label': 'Loading' }, '\\u{23F3}'),\n      currentValue.length > 0 &&\n        !isSearching &&\n        React.createElement(\n          'button',\n          {\n            type: 'button',\n            className: 'rfr-search-clear',\n            onClick: clear,\n            'aria-label': 'Clear search',\n          },\n          '\\u{2715}',\n        ),\n    ),\n    children,\n  )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  SearchResults (dropdown list)                                      */\n/* ------------------------------------------------------------------ */\n\nexport interface SearchResultsProps extends React.HTMLAttributes<HTMLUListElement> {}\n\nexport const SearchResults = React.forwardRef<HTMLUListElement, SearchResultsProps>(\n  function SearchResults({ className, children, ...props }, ref) {\n    const { api, value } = useSearchBarContext()\n\n    if (value.length === 0) return null\n\n    return React.createElement(\n      'ul',\n      {\n        ref,\n        role: api.listProps.role,\n        id: api.listProps.id,\n        className: cn(searchResultVariants(), className),\n        ...props,\n      },\n      children,\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  SearchResultItem                                                   */\n/* ------------------------------------------------------------------ */\n\nexport interface SearchResultItemProps extends React.LiHTMLAttributes<HTMLLIElement> {}\n\nexport const SearchResultItem = React.forwardRef<HTMLLIElement, SearchResultItemProps>(\n  function SearchResultItem({ className, children, ...props }, ref) {\n    return React.createElement(\n      'li',\n      {\n        ref,\n        role: 'option',\n        className: cn('px-3 py-2 cursor-pointer hover:bg-accent', className),\n        ...props,\n      },\n      children,\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["SearchBar", "SearchResults", "SearchResultItem"]
+}

package/dist/react-section-head.js

@@ -0,0 +1,65 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-section-head/dist/index.js
+import * as React from "react";
+
+// ../section-head/dist/index.js
+function createSectionHead(props = {}) {
+  const { align = "center" } = props;
+  const dataAttributes = {
+    "data-align": align
+  };
+  return { dataAttributes };
+}
+var sectionHeadVariants = cva({
+  base: "flex flex-col",
+  variants: {
+    align: {
+      center: "mx-auto text-center max-w-2xl",
+      left: "text-left"
+    }
+  },
+  defaultVariants: {
+    align: "center"
+  }
+});
+var sectionHeadKickerClass = "text-[11px] uppercase tracking-widest text-primary font-semibold";
+var sectionHeadTitleClass = "text-3xl sm:text-4xl font-bold tracking-tight text-foreground";
+var sectionHeadLedeClass = "mt-3 text-muted-foreground leading-relaxed";
+
+// ../react-section-head/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var SectionHead = React.forwardRef(
+  function SectionHead2({
+    kicker,
+    title,
+    lede,
+    align = "center",
+    as: Tag = "h2",
+    className,
+    ...props
+  }, ref) {
+    const { dataAttributes } = createSectionHead({ align });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(sectionHeadVariants({ align }), className),
+        ...dataAttributes,
+        ...props,
+        children: [
+          kicker != null && /* @__PURE__ */ jsx("p", { className: sectionHeadKickerClass, children: kicker }),
+          /* @__PURE__ */ jsx(Tag, { className: sectionHeadTitleClass, children: title }),
+          lede != null && /* @__PURE__ */ jsx("p", { className: sectionHeadLedeClass, children: lede })
+        ]
+      }
+    );
+  }
+);
+export {
+  SectionHead
+};
+//# sourceMappingURL=react-section-head.js.map

package/dist/react-section-head.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../section-head/src/section-head.ts", "../../section-head/src/section-head.styles.ts", "../../react-section-head/src/section-head.tsx"],
+  "sourcesContent": ["/** Horizontal alignment of the section head cluster. */\nexport type SectionHeadAlign = 'center' | 'left'\n\nexport interface SectionHeadProps {\n  /** Alignment of the kicker, title, and lede. */\n  align?: SectionHeadAlign\n}\n\nexport interface SectionHeadAPI {\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic data attributes for a SectionHead.\n *\n * Returns data-align so adapters can apply styles via CSS or Tailwind\n * variants. All visual logic (classes, cva) lives in `section-head.styles.ts`.\n */\nexport function createSectionHead(props: SectionHeadProps = {}): SectionHeadAPI {\n  const { align = 'center' } = props\n\n  const dataAttributes: Record<string, string> = {\n    'data-align': align,\n  }\n\n  return { dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Container variant that controls the alignment of the whole cluster.\n * Center: auto-margins + text-center + constrained max-width for comfortable\n * line length. Left: no margin constraint, flush left.\n */\nexport const sectionHeadVariants = cva({\n  base: 'flex flex-col',\n  variants: {\n    align: {\n      center: 'mx-auto text-center max-w-2xl',\n      left: 'text-left',\n    },\n  },\n  defaultVariants: {\n    align: 'center',\n  },\n})\n\n/** Small-caps eyebrow label above the title. */\nexport const sectionHeadKickerClass =\n  'text-[11px] uppercase tracking-widest text-primary font-semibold'\n\n/** Primary h2 heading. */\nexport const sectionHeadTitleClass =\n  'text-3xl sm:text-4xl font-bold tracking-tight text-foreground'\n\n/** Optional lede paragraph below the title. */\nexport const sectionHeadLedeClass = 'mt-3 text-muted-foreground leading-relaxed'\n", "import * as React from 'react'\nimport {\n  createSectionHead,\n  sectionHeadVariants,\n  sectionHeadKickerClass,\n  sectionHeadTitleClass,\n  sectionHeadLedeClass,\n  type SectionHeadAlign,\n} from '@refraction-ui/section-head'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { SectionHeadAlign }\n\nexport interface SectionHeadProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Optional eyebrow / kicker rendered above the title. */\n  kicker?: React.ReactNode\n  /** Primary heading content (required). */\n  title: React.ReactNode\n  /** Optional lede paragraph rendered below the title. */\n  lede?: React.ReactNode\n  /** Horizontal alignment of the cluster. */\n  align?: SectionHeadAlign\n  /** Override the heading element rendered for the title. Defaults to `h2`. */\n  as?: 'h1' | 'h2' | 'h3'\n}\n\n/**\n * SectionHead — marketing section heading cluster.\n *\n * Renders an optional small-caps kicker above an `<h2>` title (configurable\n * via `as`) with an optional lede paragraph below. Alignment is controlled via\n * the `align` prop; layout classes come from the headless\n * `@refraction-ui/section-head` core.\n */\nexport const SectionHead = React.forwardRef<HTMLDivElement, SectionHeadProps>(\n  function SectionHead(\n    {\n      kicker,\n      title,\n      lede,\n      align = 'center',\n      as: Tag = 'h2',\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const { dataAttributes } = createSectionHead({ align })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(sectionHeadVariants({ align }), className)}\n        {...dataAttributes}\n        {...props}\n      >\n        {kicker != null && (\n          <p className={sectionHeadKickerClass}>{kicker}</p>\n        )}\n        <Tag className={sectionHeadTitleClass}>{title}</Tag>\n        {lede != null && (\n          <p className={sectionHeadLedeClass}>{lede}</p>\n        )}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAmBO,SAAS,kBAAkB,QAA0B,CAAA,GAAoB;AAC9E,QAAM,EAAE,QAAQ,SAAA,IAAa;AAE7B,QAAM,iBAAyC;IAC7C,cAAc;EAAA;AAGhB,SAAO,EAAE,eAAA;AACX;ACpBO,IAAM,sBAAsB,IAAI;EACrC,MAAM;EACN,UAAU;IACR,OAAO;MACL,QAAQ;MACR,MAAM;IAAA;EACR;EAEF,iBAAiB;IACf,OAAO;EAAA;AAEX,CAAC;AAGM,IAAM,yBACX;AAGK,IAAM,wBACX;AAGK,IAAM,uBAAuB;;;;ACM7B,IAAM,cAAoB;EAC/B,SAASA,aACP;IACE;IACA;IACA;IACA,QAAQ;IACR,IAAI,MAAM;IACV;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,EAAE,eAAA,IAAmB,kBAAkB,EAAE,MAAA,CAAO;AAEtD,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,oBAAoB,EAAE,MAAA,CAAO,GAAG,SAAS;QACtD,GAAG;QACH,GAAG;QAEH,UAAA;UAAA,UAAU,QACT,oBAAC,KAAA,EAAE,WAAW,wBAAyB,UAAA,OAAA,CAAO;UAEhD,oBAAC,KAAA,EAAI,WAAW,uBAAwB,UAAA,MAAA,CAAM;UAC7C,QAAQ,QACP,oBAAC,KAAA,EAAE,WAAW,sBAAuB,UAAA,KAAA,CAAK;QAAA;MAAA;IAAA;EAIlD;AACF;",
+  "names": ["SectionHead"]
+}

package/dist/react-segmented-control.js

@@ -0,0 +1,215 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-segmented-control/dist/index.js
+import * as React from "react";
+
+// ../segmented-control/dist/index.js
+function createSegmentedControl(props = {}) {
+  const { value, size = "md" } = props;
+  const ariaProps = {
+    role: "radiogroup"
+  };
+  const dataAttributes = {
+    "data-size": size
+  };
+  if (value !== void 0) {
+    dataAttributes["data-value"] = value;
+  }
+  return { ariaProps, dataAttributes };
+}
+function getNextSegmentIndex(current, key, count) {
+  if (count <= 0) return current;
+  switch (key) {
+    case "ArrowRight":
+    case "ArrowDown":
+      return (current + 1) % count;
+    case "ArrowLeft":
+    case "ArrowUp":
+      return (current - 1 + count) % count;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return current;
+  }
+}
+var segmentedControlVariants = cva({
+  base: "inline-flex items-center gap-1 rounded-lg bg-muted p-1",
+  variants: {
+    size: {
+      sm: "",
+      md: ""
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var segmentedControlItemVariants = cva({
+  base: [
+    "inline-flex items-center justify-center gap-1.5 rounded-md font-medium",
+    "whitespace-nowrap transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "focus-visible:ring-offset-2 focus-visible:ring-offset-muted"
+  ].join(" "),
+  variants: {
+    size: {
+      sm: "px-2.5 py-1 text-xs",
+      md: "px-3 py-1.5 text-sm"
+    },
+    state: {
+      checked: "bg-background text-foreground shadow-sm",
+      unchecked: "text-muted-foreground hover:text-foreground"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    state: "unchecked"
+  }
+});
+
+// ../react-segmented-control/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var SegmentedControlContext = React.createContext(null);
+function useSegmentedControlContext(component) {
+  const ctx = React.useContext(SegmentedControlContext);
+  if (!ctx) {
+    throw new Error(`<${component}> must be used within <SegmentedControl>`);
+  }
+  return ctx;
+}
+var SegmentedControl = React.forwardRef(
+  function SegmentedControl2({
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    size = "md",
+    className,
+    children,
+    ...props
+  }, ref) {
+    const isControlled = valueProp !== void 0;
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const value = isControlled ? valueProp : internalValue;
+    const itemsRef = React.useRef([]);
+    const select = React.useCallback(
+      (next) => {
+        if (!isControlled) setInternalValue(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    const register = React.useCallback((itemValue, focus) => {
+      const entry = { value: itemValue, focus };
+      itemsRef.current.push(entry);
+      return () => {
+        itemsRef.current = itemsRef.current.filter((e) => e !== entry);
+      };
+    }, []);
+    const move = React.useCallback(
+      (from, key) => {
+        const items = itemsRef.current;
+        const currentIndex = items.findIndex((e) => e.value === from);
+        if (currentIndex === -1) return;
+        const targetIndex = getNextSegmentIndex(currentIndex, key, items.length);
+        if (targetIndex === currentIndex) return;
+        const target = items[targetIndex];
+        select(target.value);
+        target.focus();
+      },
+      [select]
+    );
+    const ctx = React.useMemo(
+      () => ({ value, size, select, register, move }),
+      [value, size, select, register, move]
+    );
+    const api = createSegmentedControl({ value, size });
+    return /* @__PURE__ */ jsx(SegmentedControlContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(segmentedControlVariants({ size }), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var SegmentedControlItem = React.forwardRef(function SegmentedControlItem2({ value, className, children, onKeyDown, onClick, ...props }, ref) {
+  const ctx = useSegmentedControlContext("SegmentedControlItem");
+  const selected = ctx.value === value;
+  const internalRef = React.useRef(null);
+  const mergedRef = React.useCallback(
+    (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  React.useEffect(() => {
+    return ctx.register(value, () => internalRef.current?.focus());
+  }, [ctx, value]);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+      case "ArrowLeft":
+      case "ArrowUp":
+      case "Home":
+      case "End":
+        event.preventDefault();
+        ctx.move(value, event.key);
+        break;
+      case " ":
+      case "Enter":
+        event.preventDefault();
+        ctx.select(value);
+        break;
+    }
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    ctx.select(value);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: mergedRef,
+      type: "button",
+      role: "radio",
+      "aria-checked": selected,
+      tabIndex: selected ? 0 : -1,
+      "data-state": selected ? "checked" : "unchecked",
+      className: cn(
+        segmentedControlItemVariants({
+          size: ctx.size,
+          state: selected ? "checked" : "unchecked"
+        }),
+        className
+      ),
+      onKeyDown: handleKeyDown,
+      onClick: handleClick,
+      ...props,
+      children
+    }
+  );
+});
+export {
+  SegmentedControl,
+  SegmentedControlItem,
+  createSegmentedControl,
+  getNextSegmentIndex,
+  segmentedControlItemVariants,
+  segmentedControlVariants
+};
+//# sourceMappingURL=react-segmented-control.js.map

package/dist/react-segmented-control.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../segmented-control/src/segmented-control.ts", "../../segmented-control/src/segmented-control.styles.ts", "../../react-segmented-control/src/segmented-control.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type SegmentedControlSize = 'sm' | 'md'\n\n/** Value identifying a single segment. */\nexport type SegmentedControlValue = string\n\nexport interface SegmentedControlProps {\n  /** Currently selected segment value (controlled). */\n  value?: SegmentedControlValue\n  /** Visual size of the control. */\n  size?: SegmentedControlSize\n}\n\nexport interface SegmentedControlAPI {\n  /** ARIA attributes to spread on the group element. */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic group props for a segmented control.\n *\n * Returns `role=\"radiogroup\"` plus data attributes; adapters spread these\n * onto their group element and handle their own rendering/state.\n */\nexport function createSegmentedControl(\n  props: SegmentedControlProps = {},\n): SegmentedControlAPI {\n  const { value, size = 'md' } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'radiogroup',\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-size': size,\n  }\n  if (value !== undefined) {\n    dataAttributes['data-value'] = value\n  }\n\n  return { ariaProps, dataAttributes }\n}\n\n/**\n * Pure keyboard-navigation rule shared by every adapter.\n *\n * Given the current index, the pressed key, and the item count, returns the\n * index that focus/selection should move to. Arrow keys wrap; Home/End jump\n * to the ends. Unhandled keys (or an empty group) return `current` unchanged.\n *\n * - ArrowRight / ArrowDown → next (wraps to 0 past the end)\n * - ArrowLeft  / ArrowUp   → previous (wraps to last before 0)\n * - Home                   → first\n * - End                    → last\n */\nexport function getNextSegmentIndex(\n  current: number,\n  key: string,\n  count: number,\n): number {\n  if (count <= 0) return current\n\n  switch (key) {\n    case 'ArrowRight':\n    case 'ArrowDown':\n      return (current + 1) % count\n    case 'ArrowLeft':\n    case 'ArrowUp':\n      return (current - 1 + count) % count\n    case 'Home':\n      return 0\n    case 'End':\n      return count - 1\n    default:\n      return current\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Pill-shaped container that holds the segments (`role=\"radiogroup\"`). */\nexport const segmentedControlVariants = cva({\n  base: 'inline-flex items-center gap-1 rounded-lg bg-muted p-1',\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/**\n * A single segment (`role=\"radio\"`). The `state` variant carries the\n * active vs inactive visual treatment so adapters never inline these classes.\n */\nexport const segmentedControlItemVariants = cva({\n  base: [\n    'inline-flex items-center justify-center gap-1.5 rounded-md font-medium',\n    'whitespace-nowrap transition-colors',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n    'focus-visible:ring-offset-2 focus-visible:ring-offset-muted',\n  ].join(' '),\n  variants: {\n    size: {\n      sm: 'px-2.5 py-1 text-xs',\n      md: 'px-3 py-1.5 text-sm',\n    },\n    state: {\n      checked: 'bg-background text-foreground shadow-sm',\n      unchecked: 'text-muted-foreground hover:text-foreground',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    state: 'unchecked',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createSegmentedControl,\n  getNextSegmentIndex,\n  segmentedControlVariants,\n  segmentedControlItemVariants,\n  type SegmentedControlSize,\n} from '@refraction-ui/segmented-control'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { SegmentedControlSize }\n\ninterface SegmentedControlContextValue {\n  value: string | undefined\n  size: SegmentedControlSize\n  select: (value: string) => void\n  /** Register an item's value + focus handler; returns an unregister fn. */\n  register: (value: string, focus: () => void) => () => void\n  /** Move selection/focus relative to the given item value via a keyboard key. */\n  move: (from: string, key: string) => void\n}\n\nconst SegmentedControlContext =\n  React.createContext<SegmentedControlContextValue | null>(null)\n\nfunction useSegmentedControlContext(component: string) {\n  const ctx = React.useContext(SegmentedControlContext)\n  if (!ctx) {\n    throw new Error(`<${component}> must be used within <SegmentedControl>`)\n  }\n  return ctx\n}\n\nexport interface SegmentedControlProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onChange' | 'defaultValue'\n  > {\n  /** Controlled selected item value. */\n  value?: string\n  /** Initial selected value for uncontrolled usage. */\n  defaultValue?: string\n  /** Called with the newly selected item value. */\n  onValueChange?: (value: string) => void\n  /** Visual size of the control. */\n  size?: SegmentedControlSize\n}\n\ninterface ItemRegistration {\n  value: string\n  focus: () => void\n}\n\n/**\n * SegmentedControl — a pill-shaped single-select control with radio semantics.\n *\n * Renders `role=\"radiogroup\"`; each {@link SegmentedControlItem} is a\n * `role=\"radio\"`. Supports controlled (`value`/`onValueChange`) and\n * uncontrolled (`defaultValue`) usage, roving tabindex, arrow-key navigation\n * with wrap, and Home/End jumps. Logic/styles come from the headless\n * `@refraction-ui/segmented-control` core; styling via Tailwind utilities only.\n */\nexport const SegmentedControl = React.forwardRef<\n  HTMLDivElement,\n  SegmentedControlProps\n>(\n  function SegmentedControl(\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      size = 'md',\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const isControlled = valueProp !== undefined\n    const [internalValue, setInternalValue] = React.useState<\n      string | undefined\n    >(defaultValue)\n    const value = isControlled ? valueProp : internalValue\n\n    // Ordered registry of items, used for arrow-key navigation.\n    const itemsRef = React.useRef<ItemRegistration[]>([])\n\n    const select = React.useCallback(\n      (next: string) => {\n        if (!isControlled) setInternalValue(next)\n        onValueChange?.(next)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const register = React.useCallback((itemValue: string, focus: () => void) => {\n      const entry: ItemRegistration = { value: itemValue, focus }\n      itemsRef.current.push(entry)\n      return () => {\n        itemsRef.current = itemsRef.current.filter((e) => e !== entry)\n      }\n    }, [])\n\n    const move = React.useCallback(\n      (from: string, key: string) => {\n        const items = itemsRef.current\n        const currentIndex = items.findIndex((e) => e.value === from)\n        if (currentIndex === -1) return\n\n        const targetIndex = getNextSegmentIndex(currentIndex, key, items.length)\n        if (targetIndex === currentIndex) return\n\n        const target = items[targetIndex]\n        select(target.value)\n        target.focus()\n      },\n      [select],\n    )\n\n    const ctx = React.useMemo<SegmentedControlContextValue>(\n      () => ({ value, size, select, register, move }),\n      [value, size, select, register, move],\n    )\n\n    const api = createSegmentedControl({ value, size })\n\n    return (\n      <SegmentedControlContext.Provider value={ctx}>\n        <div\n          ref={ref}\n          className={cn(segmentedControlVariants({ size }), className)}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          {children}\n        </div>\n      </SegmentedControlContext.Provider>\n    )\n  },\n)\n\nexport interface SegmentedControlItemProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {\n  /** Value identifying this item; selected when it matches the group value. */\n  value: string\n}\n\n/**\n * SegmentedControlItem — a single selectable segment (`role=\"radio\"`).\n *\n * Children may include a leading icon. Only the active item is tabbable\n * (roving tabindex); arrow/Home/End keys delegate navigation to the group,\n * which applies the shared `getNextSegmentIndex` rule from the core.\n */\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  SegmentedControlItemProps\n>(function SegmentedControlItem({ value, className, children, onKeyDown, onClick, ...props }, ref) {\n  const ctx = useSegmentedControlContext('SegmentedControlItem')\n  const selected = ctx.value === value\n\n  const internalRef = React.useRef<HTMLButtonElement>(null)\n  const mergedRef = React.useCallback(\n    (node: HTMLButtonElement | null) => {\n      internalRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    },\n    [ref],\n  )\n\n  React.useEffect(() => {\n    return ctx.register(value, () => internalRef.current?.focus())\n  }, [ctx, value])\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event)\n    if (event.defaultPrevented) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n      case 'ArrowLeft':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n        event.preventDefault()\n        ctx.move(value, event.key)\n        break\n      case ' ':\n      case 'Enter':\n        event.preventDefault()\n        ctx.select(value)\n        break\n    }\n  }\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event)\n    if (event.defaultPrevented) return\n    ctx.select(value)\n  }\n\n  return (\n    <button\n      ref={mergedRef}\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={selected}\n      tabIndex={selected ? 0 : -1}\n      data-state={selected ? 'checked' : 'unchecked'}\n      className={cn(\n        segmentedControlItemVariants({\n          size: ctx.size,\n          state: selected ? 'checked' : 'unchecked',\n        }),\n        className,\n      )}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n"],
+  "mappings": "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",
+  "names": ["SegmentedControl", "SegmentedControlItem"]
+}