@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-code-editor.js

@@ -0,0 +1,184 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-code-editor/dist/index.js
+import * as React from "react";
+
+// ../code-editor/dist/index.js
+var languageLabels = {
+  js: "JavaScript",
+  javascript: "JavaScript",
+  ts: "TypeScript",
+  typescript: "TypeScript",
+  jsx: "JSX",
+  tsx: "TSX",
+  py: "Python",
+  python: "Python",
+  rb: "Ruby",
+  ruby: "Ruby",
+  go: "Go",
+  rust: "Rust",
+  rs: "Rust",
+  java: "Java",
+  cpp: "C++",
+  c: "C",
+  cs: "C#",
+  csharp: "C#",
+  html: "HTML",
+  css: "CSS",
+  json: "JSON",
+  yaml: "YAML",
+  yml: "YAML",
+  md: "Markdown",
+  markdown: "Markdown",
+  sql: "SQL",
+  sh: "Shell",
+  bash: "Bash",
+  zsh: "Zsh",
+  xml: "XML",
+  toml: "TOML",
+  swift: "Swift",
+  kotlin: "Kotlin",
+  dart: "Dart",
+  php: "PHP",
+  lua: "Lua",
+  r: "R",
+  scala: "Scala"
+};
+function createCodeEditor(props = {}) {
+  const {
+    value = "",
+    onChange,
+    language = "plaintext",
+    readOnly = false,
+    theme = "light"
+  } = props;
+  let currentValue = value;
+  const state = {
+    value: currentValue,
+    language,
+    theme
+  };
+  const ariaProps = {
+    role: "textbox",
+    "aria-multiline": true,
+    "aria-label": `Code editor - ${getLabel(language)}`
+  };
+  if (readOnly) {
+    ariaProps["aria-readonly"] = true;
+  }
+  const dataAttributes = {
+    "data-language": language,
+    "data-theme": theme
+  };
+  if (readOnly) {
+    dataAttributes["data-readonly"] = "";
+  }
+  function setValue(newValue) {
+    currentValue = newValue;
+    state.value = newValue;
+    if (onChange) {
+      onChange(newValue);
+    }
+  }
+  function getLabel(lang) {
+    return languageLabels[lang.toLowerCase()] ?? lang.charAt(0).toUpperCase() + lang.slice(1);
+  }
+  function getLanguageLabel() {
+    return getLabel(language);
+  }
+  return {
+    state,
+    ariaProps,
+    dataAttributes,
+    setValue,
+    getLanguageLabel
+  };
+}
+var codeEditorTokens = {
+  name: "code-editor",
+  tokens: {
+    bg: { variable: "--rfr-code-editor-bg", fallback: "hsl(var(--background))" },
+    fg: { variable: "--rfr-code-editor-fg", fallback: "hsl(var(--foreground))" },
+    headerBg: { variable: "--rfr-code-editor-header-bg", fallback: "hsl(var(--muted))" },
+    border: { variable: "--rfr-code-editor-border", fallback: "hsl(var(--border))" },
+    lineNumberFg: { variable: "--rfr-code-editor-line-number", fallback: "hsl(var(--muted-foreground))" }
+  }
+};
+var codeEditorVariants = cva({
+  base: "flex flex-col rounded-lg border overflow-hidden font-mono text-sm",
+  variants: {
+    theme: {
+      light: "bg-white text-gray-900 border-gray-200",
+      dark: "bg-gray-900 text-gray-100 border-gray-700"
+    },
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    theme: "light",
+    size: "default"
+  }
+});
+
+// ../react-code-editor/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var CodeEditor = React.forwardRef(
+  function CodeEditor2({
+    value = "",
+    onChange,
+    language = "plaintext",
+    readOnly = false,
+    theme = "light",
+    className,
+    placeholder,
+    actions
+  }, ref) {
+    const api = createCodeEditor({ value, onChange, language, readOnly, theme });
+    const containerClasses = cn(codeEditorVariants({ theme }), className);
+    function handleChange(e) {
+      api.setValue(e.target.value);
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: containerClasses, ...api.dataAttributes, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b bg-muted/50 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: api.getLanguageLabel() }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: actions.map((action) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: action.onClick,
+            className: "px-2 py-1 rounded text-xs hover:bg-muted transition-colors",
+            children: action.label
+          },
+          action.label
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value,
+          onChange: handleChange,
+          readOnly,
+          placeholder,
+          className: "flex-1 w-full p-4 bg-transparent resize-none outline-none font-mono min-h-[200px]",
+          spellCheck: false,
+          autoCapitalize: "off",
+          autoComplete: "off",
+          autoCorrect: "off",
+          ...api.ariaProps
+        }
+      )
+    ] });
+  }
+);
+export {
+  CodeEditor,
+  codeEditorTokens,
+  codeEditorVariants
+};
+//# sourceMappingURL=react-code-editor.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../code-editor/src/code-editor.ts", "../../code-editor/src/code-editor.styles.ts", "../../react-code-editor/src/CodeEditor.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type CodeEditorTheme = 'light' | 'dark'\n\nexport interface CodeEditorProps {\n  value?: string\n  onChange?: (value: string) => void\n  language?: string\n  readOnly?: boolean\n  theme?: CodeEditorTheme\n}\n\nexport interface CodeEditorState {\n  value: string\n  language: string\n  theme: CodeEditorTheme\n}\n\nexport interface CodeEditorAPI {\n  /** Current editor state */\n  state: CodeEditorState\n  /** ARIA attributes for the editor element */\n  ariaProps: Partial<AccessibilityProps> & { 'aria-multiline'?: boolean }\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n  /** Update the editor value */\n  setValue: (value: string) => void\n  /** Get a human-readable label for the current language */\n  getLanguageLabel: () => string\n}\n\n/** Map of language identifiers to human-readable labels */\nconst languageLabels: Record<string, string> = {\n  js: 'JavaScript',\n  javascript: 'JavaScript',\n  ts: 'TypeScript',\n  typescript: 'TypeScript',\n  jsx: 'JSX',\n  tsx: 'TSX',\n  py: 'Python',\n  python: 'Python',\n  rb: 'Ruby',\n  ruby: 'Ruby',\n  go: 'Go',\n  rust: 'Rust',\n  rs: 'Rust',\n  java: 'Java',\n  cpp: 'C++',\n  c: 'C',\n  cs: 'C#',\n  csharp: 'C#',\n  html: 'HTML',\n  css: 'CSS',\n  json: 'JSON',\n  yaml: 'YAML',\n  yml: 'YAML',\n  md: 'Markdown',\n  markdown: 'Markdown',\n  sql: 'SQL',\n  sh: 'Shell',\n  bash: 'Bash',\n  zsh: 'Zsh',\n  xml: 'XML',\n  toml: 'TOML',\n  swift: 'Swift',\n  kotlin: 'Kotlin',\n  dart: 'Dart',\n  php: 'PHP',\n  lua: 'Lua',\n  r: 'R',\n  scala: 'Scala',\n}\n\n/**\n * Create a headless code editor API.\n *\n * This provides the headless interface for a code editor — state management,\n * ARIA props, and data attributes. Actual rendering (Monaco, CodeMirror, or\n * a simple textarea) is handled by framework-specific wrappers.\n */\nexport function createCodeEditor(props: CodeEditorProps = {}): CodeEditorAPI {\n  const {\n    value = '',\n    onChange,\n    language = 'plaintext',\n    readOnly = false,\n    theme = 'light',\n  } = props\n\n  let currentValue = value\n\n  const state: CodeEditorState = {\n    value: currentValue,\n    language,\n    theme,\n  }\n\n  const ariaProps: Partial<AccessibilityProps> & { 'aria-multiline'?: boolean; 'aria-readonly'?: boolean } = {\n    role: 'textbox',\n    'aria-multiline': true,\n    'aria-label': `Code editor - ${getLabel(language)}`,\n  }\n\n  if (readOnly) {\n    ariaProps['aria-readonly'] = true\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-language': language,\n    'data-theme': theme,\n  }\n\n  if (readOnly) {\n    dataAttributes['data-readonly'] = ''\n  }\n\n  function setValue(newValue: string) {\n    currentValue = newValue\n    state.value = newValue\n    if (onChange) {\n      onChange(newValue)\n    }\n  }\n\n  function getLabel(lang: string): string {\n    return languageLabels[lang.toLowerCase()] ?? lang.charAt(0).toUpperCase() + lang.slice(1)\n  }\n\n  function getLanguageLabel(): string {\n    return getLabel(language)\n  }\n\n  return {\n    state,\n    ariaProps,\n    dataAttributes,\n    setValue,\n    getLanguageLabel,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const codeEditorTokens: TokenContract = {\n  name: 'code-editor',\n  tokens: {\n    bg: { variable: '--rfr-code-editor-bg', fallback: 'hsl(var(--background))' },\n    fg: { variable: '--rfr-code-editor-fg', fallback: 'hsl(var(--foreground))' },\n    headerBg: { variable: '--rfr-code-editor-header-bg', fallback: 'hsl(var(--muted))' },\n    border: { variable: '--rfr-code-editor-border', fallback: 'hsl(var(--border))' },\n    lineNumberFg: { variable: '--rfr-code-editor-line-number', fallback: 'hsl(var(--muted-foreground))' },\n  },\n}\n\nexport const codeEditorVariants = cva({\n  base: 'flex flex-col rounded-lg border overflow-hidden font-mono text-sm',\n  variants: {\n    theme: {\n      light: 'bg-white text-gray-900 border-gray-200',\n      dark: 'bg-gray-900 text-gray-100 border-gray-700',\n    },\n    size: {\n      sm: 'text-xs',\n      default: 'text-sm',\n      lg: 'text-base',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n    size: 'default',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createCodeEditor,\n  codeEditorVariants,\n  type CodeEditorTheme,\n} from '@refraction-ui/code-editor'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface CodeEditorProps {\n  value?: string\n  onChange?: (value: string) => void\n  language?: string\n  readOnly?: boolean\n  theme?: CodeEditorTheme\n  className?: string\n  placeholder?: string\n  /** Optional action buttons rendered in the header bar */\n  actions?: Array<{ label: string; onClick: () => void }>\n}\n\n/**\n * CodeEditor component — a styled textarea-based code editor.\n *\n * Uses the headless @refraction-ui/code-editor core for state and ARIA.\n * Renders a simple monospace textarea with a header bar showing the language\n * label and optional action buttons. Syntax highlighting is a future enhancement.\n */\nexport const CodeEditor = React.forwardRef<HTMLDivElement, CodeEditorProps>(\n  function CodeEditor(\n    {\n      value = '',\n      onChange,\n      language = 'plaintext',\n      readOnly = false,\n      theme = 'light',\n      className,\n      placeholder,\n      actions,\n    },\n    ref,\n  ) {\n    const api = createCodeEditor({ value, onChange, language, readOnly, theme })\n    const containerClasses = cn(codeEditorVariants({ theme }), className)\n\n    function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n      api.setValue(e.target.value)\n    }\n\n    return (\n      <div ref={ref} className={containerClasses} {...api.dataAttributes}>\n        <div className=\"flex items-center justify-between px-3 py-2 border-b bg-muted/50 text-xs text-muted-foreground\">\n          <span>{api.getLanguageLabel()}</span>\n          {actions && actions.length > 0 && (\n            <div className=\"flex gap-1\">\n              {actions.map((action) => (\n                <button\n                  key={action.label}\n                  type=\"button\"\n                  onClick={action.onClick}\n                  className=\"px-2 py-1 rounded text-xs hover:bg-muted transition-colors\"\n                >\n                  {action.label}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n        <textarea\n          value={value}\n          onChange={handleChange}\n          readOnly={readOnly}\n          placeholder={placeholder}\n          className=\"flex-1 w-full p-4 bg-transparent resize-none outline-none font-mono min-h-[200px]\"\n          spellCheck={false}\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          {...api.ariaProps}\n        />\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["CodeEditor"]
+}

package/dist/react-collapsible.js

@@ -0,0 +1,192 @@
+import {
+  Keys,
+  cn,
+  createKeyboardHandler,
+  cva,
+  devWarn,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-collapsible/dist/index.js
+import * as React from "react";
+
+// ../collapsible/dist/index.js
+function createCollapsible(props = {}) {
+  const {
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    disabled = false
+  } = props;
+  const isControlled = controlledOpen !== void 0;
+  let internalOpen = isControlled ? controlledOpen : defaultOpen;
+  const contentId = generateId("rfr-collapsible");
+  const setOpen = (next) => {
+    if (disabled) return;
+    if (!isControlled) {
+      internalOpen = next;
+    }
+    onOpenChange?.(next);
+  };
+  const toggle = () => setOpen(!internalOpen);
+  const openFn = () => setOpen(true);
+  const closeFn = () => setOpen(false);
+  const keyboardHandler = createKeyboardHandler({
+    [Keys.Enter]: (event) => {
+      event.preventDefault();
+      toggle();
+    },
+    [Keys.Space]: (event) => {
+      event.preventDefault();
+      toggle();
+    }
+  });
+  const dataState = internalOpen ? "open" : "closed";
+  return {
+    state: { open: internalOpen },
+    triggerProps: {
+      "aria-expanded": internalOpen,
+      "aria-controls": contentId,
+      "data-state": dataState,
+      "data-disabled": disabled ? "" : void 0
+    },
+    contentProps: {
+      id: contentId,
+      role: "region",
+      "data-state": dataState,
+      hidden: !internalOpen
+    },
+    toggle,
+    open: openFn,
+    close: closeFn,
+    keyboardHandler
+  };
+}
+var collapsibleContentVariants = cva({
+  base: "overflow-hidden transition-all",
+  variants: {
+    state: {
+      open: "animate-accordion-down",
+      closed: "animate-accordion-up"
+    }
+  },
+  defaultVariants: {
+    state: "closed"
+  }
+});
+
+// ../react-collapsible/dist/index.js
+var CollapsibleContext = React.createContext(null);
+function useCollapsibleContext() {
+  const ctx = React.useContext(CollapsibleContext);
+  if (!ctx) {
+    devWarn(
+      "react-collapsible/context-outside-provider",
+      "Collapsible compound components (CollapsibleTrigger/CollapsibleContent) must be rendered inside a <Collapsible>. The missing CollapsibleContext makes this throw."
+    );
+    throw new Error(
+      "Collapsible compound components must be used within <Collapsible>"
+    );
+  }
+  return ctx;
+}
+function Collapsible({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  children,
+  className
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const apiRef = React.useRef(null);
+  if (apiRef.current === null) {
+    apiRef.current = createCollapsible({ open, defaultOpen, disabled });
+  }
+  const contentId = apiRef.current.contentProps.id;
+  const ctx = React.useMemo(
+    () => ({
+      open,
+      onOpenChange: handleOpenChange,
+      disabled,
+      contentId
+    }),
+    [open, handleOpenChange, disabled, contentId]
+  );
+  return React.createElement(
+    CollapsibleContext.Provider,
+    { value: ctx },
+    React.createElement(
+      "div",
+      {
+        "data-state": open ? "open" : "closed",
+        "data-disabled": disabled ? "" : void 0,
+        className
+      },
+      children
+    )
+  );
+}
+var CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger2({ onClick, disabled: disabledProp, children, ...props }, ref) {
+  const { open, onOpenChange, disabled: ctxDisabled, contentId } = useCollapsibleContext();
+  const disabled = disabledProp ?? ctxDisabled;
+  const handleClick = (e) => {
+    if (!disabled) {
+      onOpenChange(!open);
+    }
+    onClick?.(e);
+  };
+  return React.createElement(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-expanded": open,
+      "aria-controls": contentId,
+      "data-state": open ? "open" : "closed",
+      "data-disabled": disabled ? "" : void 0,
+      disabled: disabled || void 0,
+      onClick: handleClick,
+      ...props
+    },
+    children
+  );
+});
+var CollapsibleContent = React.forwardRef(function CollapsibleContent2({ className, children, ...props }, ref) {
+  const { open, contentId } = useCollapsibleContext();
+  const dataState = open ? "open" : "closed";
+  if (!open) return null;
+  return React.createElement(
+    "div",
+    {
+      ref,
+      id: contentId,
+      role: "region",
+      "data-state": dataState,
+      className: cn(
+        collapsibleContentVariants({ state: open ? "open" : "closed" }),
+        className
+      ),
+      ...props
+    },
+    children
+  );
+});
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  collapsibleContentVariants
+};
+//# sourceMappingURL=react-collapsible.js.map

package/dist/react-collapsible.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../collapsible/src/collapsible.ts", "../../collapsible/src/collapsible.styles.ts", "../../react-collapsible/src/collapsible.tsx"],
+  "sourcesContent": ["import { generateId, Keys, createKeyboardHandler } from '@refraction-ui/shared'\n\nexport interface CollapsibleProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  disabled?: boolean\n}\n\nexport interface CollapsibleAPI {\n  /** Current open state */\n  state: { open: boolean }\n  /** Props to spread on the trigger element */\n  triggerProps: {\n    'aria-expanded': boolean\n    'aria-controls': string\n    'data-state': 'open' | 'closed'\n    'data-disabled': string | undefined\n  }\n  /** Props to spread on the content element */\n  contentProps: {\n    id: string\n    role: 'region'\n    'data-state': 'open' | 'closed'\n    hidden: boolean\n  }\n  /** Toggle the open state */\n  toggle: () => void\n  /** Open the collapsible */\n  open: () => void\n  /** Close the collapsible */\n  close: () => void\n  /** Keyboard event handler for Enter/Space toggle */\n  keyboardHandler: (event: KeyboardEvent) => void\n}\n\nexport function createCollapsible(props: CollapsibleProps = {}): CollapsibleAPI {\n  const {\n    open: controlledOpen,\n    defaultOpen = false,\n    onOpenChange,\n    disabled = false,\n  } = props\n\n  const isControlled = controlledOpen !== undefined\n  let internalOpen = isControlled ? controlledOpen : defaultOpen\n  const contentId = generateId('rfr-collapsible')\n\n  const setOpen = (next: boolean) => {\n    if (disabled) return\n    if (!isControlled) {\n      internalOpen = next\n    }\n    onOpenChange?.(next)\n  }\n\n  const toggle = () => setOpen(!internalOpen)\n  const openFn = () => setOpen(true)\n  const closeFn = () => setOpen(false)\n\n  const keyboardHandler = createKeyboardHandler({\n    [Keys.Enter]: (event: KeyboardEvent) => {\n      event.preventDefault()\n      toggle()\n    },\n    [Keys.Space]: (event: KeyboardEvent) => {\n      event.preventDefault()\n      toggle()\n    },\n  })\n\n  const dataState = internalOpen ? 'open' : 'closed'\n\n  return {\n    state: { open: internalOpen },\n    triggerProps: {\n      'aria-expanded': internalOpen,\n      'aria-controls': contentId,\n      'data-state': dataState,\n      'data-disabled': disabled ? '' : undefined,\n    },\n    contentProps: {\n      id: contentId,\n      role: 'region',\n      'data-state': dataState,\n      hidden: !internalOpen,\n    },\n    toggle,\n    open: openFn,\n    close: closeFn,\n    keyboardHandler,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const collapsibleContentVariants = cva({\n  base: 'overflow-hidden transition-all',\n  variants: {\n    state: {\n      open: 'animate-accordion-down',\n      closed: 'animate-accordion-up',\n    },\n  },\n  defaultVariants: {\n    state: 'closed',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createCollapsible,\n  collapsibleContentVariants,\n  type CollapsibleProps as CoreCollapsibleProps,\n} from '@refraction-ui/collapsible'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface CollapsibleContextValue {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  disabled: boolean\n  contentId: string\n}\n\nconst CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null)\n\nfunction useCollapsibleContext(): CollapsibleContextValue {\n  const ctx = React.useContext(CollapsibleContext)\n  if (!ctx) {\n    devWarn(\n      'react-collapsible/context-outside-provider',\n      'Collapsible compound components (CollapsibleTrigger/CollapsibleContent) must be rendered inside a <Collapsible>. The missing CollapsibleContext makes this throw.',\n    )\n    throw new Error(\n      'Collapsible compound components must be used within <Collapsible>',\n    )\n  }\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// Collapsible (root provider)\n// ---------------------------------------------------------------------------\n\nexport interface CollapsibleProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  disabled?: boolean\n  children?: React.ReactNode\n  className?: string\n}\n\nexport function Collapsible({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  disabled = false,\n  children,\n  className,\n}: CollapsibleProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(next)\n      }\n      onOpenChange?.(next)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  // Use the headless core to get a stable content ID\n  const apiRef = React.useRef<ReturnType<typeof createCollapsible> | null>(null)\n  if (apiRef.current === null) {\n    apiRef.current = createCollapsible({ open, defaultOpen, disabled })\n  }\n  const contentId = apiRef.current.contentProps.id\n\n  const ctx = React.useMemo<CollapsibleContextValue>(\n    () => ({\n      open,\n      onOpenChange: handleOpenChange,\n      disabled,\n      contentId,\n    }),\n    [open, handleOpenChange, disabled, contentId],\n  )\n\n  return React.createElement(\n    CollapsibleContext.Provider,\n    { value: ctx },\n    React.createElement(\n      'div',\n      {\n        'data-state': open ? 'open' : 'closed',\n        'data-disabled': disabled ? '' : undefined,\n        className,\n      },\n      children,\n    ),\n  )\n}\n\n// ---------------------------------------------------------------------------\n// CollapsibleTrigger\n// ---------------------------------------------------------------------------\n\nexport interface CollapsibleTriggerProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport const CollapsibleTrigger = React.forwardRef<\n  HTMLButtonElement,\n  CollapsibleTriggerProps\n>(function CollapsibleTrigger({ onClick, disabled: disabledProp, children, ...props }, ref) {\n  const { open, onOpenChange, disabled: ctxDisabled, contentId } =\n    useCollapsibleContext()\n  const disabled = disabledProp ?? ctxDisabled\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (!disabled) {\n      onOpenChange(!open)\n    }\n    onClick?.(e)\n  }\n\n  return React.createElement(\n    'button',\n    {\n      ref,\n      type: 'button',\n      'aria-expanded': open,\n      'aria-controls': contentId,\n      'data-state': open ? 'open' : 'closed',\n      'data-disabled': disabled ? '' : undefined,\n      disabled: disabled || undefined,\n      onClick: handleClick,\n      ...props,\n    },\n    children,\n  )\n})\n\n// ---------------------------------------------------------------------------\n// CollapsibleContent\n// ---------------------------------------------------------------------------\n\nexport interface CollapsibleContentProps\n  extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const CollapsibleContent = React.forwardRef<\n  HTMLDivElement,\n  CollapsibleContentProps\n>(function CollapsibleContent({ className, children, ...props }, ref) {\n  const { open, contentId } = useCollapsibleContext()\n  const dataState = open ? 'open' : 'closed'\n\n  if (!open) return null\n\n  return React.createElement(\n    'div',\n    {\n      ref,\n      id: contentId,\n      role: 'region',\n      'data-state': dataState,\n      className: cn(\n        collapsibleContentVariants({ state: open ? 'open' : 'closed' }),\n        className,\n      ),\n      ...props,\n    },\n    children,\n  )\n})\n"],
+  "mappings": "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",
+  "names": ["CollapsibleTrigger", "CollapsibleContent"]
+}