@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-inline-editor.js

@@ -0,0 +1,216 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-inline-editor/dist/index.js
+import * as React from "react";
+
+// ../inline-editor/dist/index.js
+function createInlineEditor(props) {
+  const { value: initialValue, onSave, onCancel } = props;
+  let isEditing = false;
+  let currentValue = initialValue;
+  const toolbarActions = [
+    { name: "bold", syntax: "**" },
+    { name: "heading", syntax: "# " },
+    { name: "list", syntax: "- " },
+    { name: "link", syntax: "[text](url)" }
+  ];
+  function startEditing() {
+    isEditing = true;
+    currentValue = initialValue;
+  }
+  function cancel() {
+    isEditing = false;
+    currentValue = initialValue;
+    onCancel?.();
+  }
+  function save() {
+    isEditing = false;
+    onSave?.(currentValue);
+  }
+  function updateValue(value) {
+    currentValue = value;
+  }
+  function insertAtCursor(syntax) {
+    currentValue = currentValue + syntax;
+  }
+  return {
+    get state() {
+      return {
+        get isEditing() {
+          return isEditing;
+        },
+        get value() {
+          return currentValue;
+        },
+        get preview() {
+          return currentValue;
+        }
+      };
+    },
+    startEditing,
+    cancel,
+    save,
+    updateValue,
+    insertAtCursor,
+    toolbarActions
+  };
+}
+var editorVariants = cva({
+  base: "w-full rounded-md border bg-background",
+  variants: {
+    state: {
+      viewing: "cursor-pointer hover:bg-muted/50 p-3",
+      editing: "p-0"
+    }
+  },
+  defaultVariants: {
+    state: "viewing"
+  }
+});
+var toolbarVariants = cva({
+  base: "flex items-center gap-1 border-b px-2 py-1",
+  variants: {
+    size: {
+      sm: "gap-0.5 px-1 py-0.5",
+      md: "gap-1 px-2 py-1",
+      lg: "gap-2 px-3 py-2"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var previewVariants = cva({
+  base: "prose prose-sm max-w-none p-3",
+  variants: {
+    size: {
+      sm: "prose-xs p-2",
+      md: "prose-sm p-3",
+      lg: "prose-base p-4"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// ../react-inline-editor/dist/index.js
+var InlineEditor = React.forwardRef(
+  function InlineEditor2({ value: initialValue, onSave, onCancel, className }, ref) {
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [editValue, setEditValue] = React.useState(initialValue);
+    const apiRef = React.useRef(null);
+    if (apiRef.current === null) {
+      apiRef.current = createInlineEditor({ value: initialValue, onSave, onCancel });
+    }
+    const api = apiRef.current;
+    const handleStartEditing = React.useCallback(() => {
+      setIsEditing(true);
+      setEditValue(initialValue);
+    }, [initialValue]);
+    const handleCancel = React.useCallback(() => {
+      setIsEditing(false);
+      setEditValue(initialValue);
+      onCancel?.();
+    }, [initialValue, onCancel]);
+    const handleSave = React.useCallback(() => {
+      setIsEditing(false);
+      onSave?.(editValue);
+    }, [editValue, onSave]);
+    const handleInsert = React.useCallback(
+      (syntax) => {
+        setEditValue((prev) => prev + syntax);
+      },
+      []
+    );
+    if (!isEditing) {
+      return React.createElement(
+        "div",
+        {
+          ref,
+          className: cn(editorVariants({ state: "viewing" }), className),
+          onClick: handleStartEditing,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": "Click to edit",
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleStartEditing();
+            }
+          }
+        },
+        React.createElement("div", { className: previewVariants() }, editValue || initialValue)
+      );
+    }
+    return React.createElement(
+      "div",
+      {
+        ref,
+        className: cn(editorVariants({ state: "editing" }), className)
+      },
+      // Toolbar
+      React.createElement(
+        "div",
+        { className: toolbarVariants(), role: "toolbar", "aria-label": "Formatting toolbar" },
+        ...api.toolbarActions.map(
+          (action) => React.createElement(
+            "button",
+            {
+              key: action.name,
+              type: "button",
+              onClick: () => handleInsert(action.syntax),
+              "aria-label": action.name,
+              "data-action": action.name
+            },
+            action.name
+          )
+        )
+      ),
+      // Editor area: side-by-side textarea + preview
+      React.createElement(
+        "div",
+        { className: "flex gap-2 p-2" },
+        React.createElement("textarea", {
+          value: editValue,
+          onChange: (e) => setEditValue(e.target.value),
+          className: "flex-1 min-h-[100px] resize-y border rounded p-2",
+          "aria-label": "Editor content"
+        }),
+        React.createElement(
+          "div",
+          {
+            className: cn("flex-1", previewVariants()),
+            "aria-label": "Preview"
+          },
+          editValue
+        )
+      ),
+      // Action buttons
+      React.createElement(
+        "div",
+        { className: "flex justify-end gap-2 p-2 border-t" },
+        React.createElement(
+          "button",
+          { type: "button", onClick: handleCancel },
+          "Cancel"
+        ),
+        React.createElement(
+          "button",
+          { type: "button", onClick: handleSave },
+          "Save"
+        )
+      )
+    );
+  }
+);
+export {
+  InlineEditor,
+  editorVariants,
+  previewVariants,
+  toolbarVariants
+};
+//# sourceMappingURL=react-inline-editor.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../inline-editor/src/inline-editor.ts", "../../inline-editor/src/inline-editor.styles.ts", "../../react-inline-editor/src/InlineEditor.tsx"],
+  "sourcesContent": ["export interface InlineEditorProps {\n  /** Current value */\n  value: string\n  /** Callback when saving */\n  onSave?: (value: string) => void\n  /** Callback when cancelling */\n  onCancel?: () => void\n}\n\nexport interface ToolbarAction {\n  name: string\n  syntax: string\n}\n\nexport interface InlineEditorState {\n  isEditing: boolean\n  value: string\n  preview: string\n}\n\nexport interface InlineEditorAPI {\n  /** Current editor state */\n  state: InlineEditorState\n  /** Enter editing mode */\n  startEditing(): void\n  /** Cancel editing, revert to original value */\n  cancel(): void\n  /** Save the current value */\n  save(): void\n  /** Update the editing value */\n  updateValue(value: string): void\n  /** Insert syntax at cursor position */\n  insertAtCursor(syntax: string): void\n  /** Available toolbar actions */\n  toolbarActions: ToolbarAction[]\n}\n\nexport function createInlineEditor(props: InlineEditorProps): InlineEditorAPI {\n  const { value: initialValue, onSave, onCancel } = props\n\n  let isEditing = false\n  let currentValue = initialValue\n\n  const toolbarActions: ToolbarAction[] = [\n    { name: 'bold', syntax: '**' },\n    { name: 'heading', syntax: '# ' },\n    { name: 'list', syntax: '- ' },\n    { name: 'link', syntax: '[text](url)' },\n  ]\n\n  function startEditing(): void {\n    isEditing = true\n    currentValue = initialValue\n  }\n\n  function cancel(): void {\n    isEditing = false\n    currentValue = initialValue\n    onCancel?.()\n  }\n\n  function save(): void {\n    isEditing = false\n    onSave?.(currentValue)\n  }\n\n  function updateValue(value: string): void {\n    currentValue = value\n  }\n\n  function insertAtCursor(syntax: string): void {\n    currentValue = currentValue + syntax\n  }\n\n  return {\n    get state(): InlineEditorState {\n      return {\n        get isEditing() {\n          return isEditing\n        },\n        get value() {\n          return currentValue\n        },\n        get preview() {\n          return currentValue\n        },\n      }\n    },\n    startEditing,\n    cancel,\n    save,\n    updateValue,\n    insertAtCursor,\n    toolbarActions,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const editorVariants = cva({\n  base: 'w-full rounded-md border bg-background',\n  variants: {\n    state: {\n      viewing: 'cursor-pointer hover:bg-muted/50 p-3',\n      editing: 'p-0',\n    },\n  },\n  defaultVariants: {\n    state: 'viewing',\n  },\n})\n\nexport const toolbarVariants = cva({\n  base: 'flex items-center gap-1 border-b px-2 py-1',\n  variants: {\n    size: {\n      sm: 'gap-0.5 px-1 py-0.5',\n      md: 'gap-1 px-2 py-1',\n      lg: 'gap-2 px-3 py-2',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const previewVariants = cva({\n  base: 'prose prose-sm max-w-none p-3',\n  variants: {\n    size: {\n      sm: 'prose-xs p-2',\n      md: 'prose-sm p-3',\n      lg: 'prose-base p-4',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createInlineEditor,\n  editorVariants,\n  toolbarVariants,\n  previewVariants,\n  type InlineEditorProps as CoreProps,\n} from '@refraction-ui/inline-editor'\nimport { cn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// InlineEditor\n// ---------------------------------------------------------------------------\n\nexport interface InlineEditorProps {\n  value: string\n  onSave?: (value: string) => void\n  onCancel?: () => void\n  className?: string\n}\n\nexport const InlineEditor = React.forwardRef<HTMLDivElement, InlineEditorProps>(\n  function InlineEditor({ value: initialValue, onSave, onCancel, className }, ref) {\n  const [isEditing, setIsEditing] = React.useState(false)\n  const [editValue, setEditValue] = React.useState(initialValue)\n\n  const apiRef = React.useRef<ReturnType<typeof createInlineEditor> | null>(null)\n  if (apiRef.current === null) {\n    apiRef.current = createInlineEditor({ value: initialValue, onSave, onCancel })\n  }\n  const api = apiRef.current\n\n  const handleStartEditing = React.useCallback(() => {\n    setIsEditing(true)\n    setEditValue(initialValue)\n  }, [initialValue])\n\n  const handleCancel = React.useCallback(() => {\n    setIsEditing(false)\n    setEditValue(initialValue)\n    onCancel?.()\n  }, [initialValue, onCancel])\n\n  const handleSave = React.useCallback(() => {\n    setIsEditing(false)\n    onSave?.(editValue)\n  }, [editValue, onSave])\n\n  const handleInsert = React.useCallback(\n    (syntax: string) => {\n      setEditValue((prev) => prev + syntax)\n    },\n    [],\n  )\n\n  // View mode\n  if (!isEditing) {\n    return React.createElement(\n      'div',\n      {\n        ref,\n        className: cn(editorVariants({ state: 'viewing' }), className),\n        onClick: handleStartEditing,\n        role: 'button',\n        tabIndex: 0,\n        'aria-label': 'Click to edit',\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            handleStartEditing()\n          }\n        },\n      },\n      React.createElement('div', { className: previewVariants() }, editValue || initialValue),\n    )\n  }\n\n  // Edit mode\n  return React.createElement(\n    'div',\n    {\n      ref,\n      className: cn(editorVariants({ state: 'editing' }), className),\n    },\n    // Toolbar\n    React.createElement(\n      'div',\n      { className: toolbarVariants(), role: 'toolbar', 'aria-label': 'Formatting toolbar' },\n      ...api.toolbarActions.map((action) =>\n        React.createElement(\n          'button',\n          {\n            key: action.name,\n            type: 'button',\n            onClick: () => handleInsert(action.syntax),\n            'aria-label': action.name,\n            'data-action': action.name,\n          },\n          action.name,\n        ),\n      ),\n    ),\n    // Editor area: side-by-side textarea + preview\n    React.createElement(\n      'div',\n      { className: 'flex gap-2 p-2' },\n      React.createElement('textarea', {\n        value: editValue,\n        onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => setEditValue(e.target.value),\n        className: 'flex-1 min-h-[100px] resize-y border rounded p-2',\n        'aria-label': 'Editor content',\n      }),\n      React.createElement(\n        'div',\n        {\n          className: cn('flex-1', previewVariants()),\n          'aria-label': 'Preview',\n        },\n        editValue,\n      ),\n    ),\n    // Action buttons\n    React.createElement(\n      'div',\n      { className: 'flex justify-end gap-2 p-2 border-t' },\n      React.createElement(\n        'button',\n        { type: 'button', onClick: handleCancel },\n        'Cancel',\n      ),\n      React.createElement(\n        'button',\n        { type: 'button', onClick: handleSave },\n        'Save',\n      ),\n    ),\n  )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["InlineEditor"]
+}

package/dist/react-input-group.js

@@ -0,0 +1,150 @@
+import {
+  cn,
+  cva,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-input-group/dist/index.js
+import * as React from "react";
+
+// ../input-group/dist/index.js
+function createInputGroup(props = {}) {
+  const { orientation = "horizontal" } = props;
+  const id = props.id ?? generateId("rfr-input-group");
+  const ariaProps = {
+    role: "group"
+  };
+  if (props["aria-label"]) {
+    ariaProps["aria-label"] = props["aria-label"];
+  }
+  if (props["aria-labelledby"]) {
+    ariaProps["aria-labelledby"] = props["aria-labelledby"];
+  }
+  const dataAttributes = {
+    "data-orientation": orientation,
+    id
+  };
+  return {
+    ariaProps,
+    dataAttributes
+  };
+}
+var inputGroupTokens = {
+  name: "input-group",
+  tokens: {
+    bg: { variable: "--rfr-input-group-bg", fallback: "hsl(var(--background))" },
+    border: { variable: "--rfr-input-group-border", fallback: "hsl(var(--border))" },
+    radius: { variable: "--rfr-input-group-radius", fallback: "var(--radius)" }
+  }
+};
+var inputGroupVariants = cva({
+  base: "flex items-stretch [&>*:not(:first-child):not(:last-child)]:rounded-none",
+  variants: {
+    orientation: {
+      horizontal: "flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none",
+      vertical: "flex-col [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var inputGroupAddonVariants = cva({
+  base: "flex items-center justify-center border bg-muted px-3 text-sm text-muted-foreground",
+  variants: {
+    orientation: {
+      horizontal: "border-y border-x first:border-r-0 last:border-l-0",
+      vertical: "border-x border-y first:border-b-0 last:border-t-0"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var inputGroupButtonVariants = cva({
+  base: "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  variants: {
+    orientation: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+
+// ../react-input-group/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var InputGroup = React.forwardRef(
+  function InputGroup2({ orientation = "horizontal", className, children, ...props }, ref) {
+    const api = createInputGroup({
+      orientation,
+      id: props.id,
+      "aria-label": props["aria-label"],
+      "aria-labelledby": props["aria-labelledby"]
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(inputGroupVariants({ orientation }), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var InputGroupAddon = React.forwardRef(
+  function InputGroupAddon2({ orientation = "horizontal", className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(inputGroupAddonVariants({ orientation }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+var InputGroupText = React.forwardRef(
+  function InputGroupText2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn("flex items-center px-3 text-sm text-muted-foreground", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+var InputGroupButton = React.forwardRef(
+  function InputGroupButton2({ orientation = "horizontal", className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: props.type ?? "button",
+        className: cn(inputGroupButtonVariants({ orientation }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  inputGroupAddonVariants,
+  inputGroupButtonVariants,
+  inputGroupTokens,
+  inputGroupVariants
+};
+//# sourceMappingURL=react-input-group.js.map

package/dist/react-input-group.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../input-group/src/input-group.ts", "../../input-group/src/input-group.styles.ts", "../../react-input-group/src/input-group.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\nimport { generateId } from '@refraction-ui/shared'\n\nexport type InputGroupOrientation = 'horizontal' | 'vertical'\n\nexport interface InputGroupProps {\n  orientation?: InputGroupOrientation\n  id?: string\n  'aria-label'?: string\n  'aria-labelledby'?: string\n}\n\nexport interface InputGroupAPI {\n  /** ARIA attributes to spread on the group container */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n}\n\nexport function createInputGroup(props: InputGroupProps = {}): InputGroupAPI {\n  const { orientation = 'horizontal' } = props\n  const id = props.id ?? generateId('rfr-input-group')\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'group',\n  }\n\n  if (props['aria-label']) {\n    ariaProps['aria-label'] = props['aria-label']\n  }\n  if (props['aria-labelledby']) {\n    ariaProps['aria-labelledby'] = props['aria-labelledby']\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-orientation': orientation,\n    id,\n  }\n\n  return {\n    ariaProps,\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const inputGroupTokens: TokenContract = {\n  name: 'input-group',\n  tokens: {\n    bg: { variable: '--rfr-input-group-bg', fallback: 'hsl(var(--background))' },\n    border: { variable: '--rfr-input-group-border', fallback: 'hsl(var(--border))' },\n    radius: { variable: '--rfr-input-group-radius', fallback: 'var(--radius)' },\n  },\n}\n\nexport const inputGroupVariants = cva({\n  base: 'flex items-stretch [&>*:not(:first-child):not(:last-child)]:rounded-none',\n  variants: {\n    orientation: {\n      horizontal: 'flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none',\n      vertical: 'flex-col [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n})\n\nexport const inputGroupAddonVariants = cva({\n  base: 'flex items-center justify-center border bg-muted px-3 text-sm text-muted-foreground',\n  variants: {\n    orientation: {\n      horizontal: 'border-y border-x first:border-r-0 last:border-l-0',\n      vertical: 'border-x border-y first:border-b-0 last:border-t-0',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n})\n\nexport const inputGroupButtonVariants = cva({\n  base: 'relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  variants: {\n    orientation: {\n      horizontal: '',\n      vertical: '',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createInputGroup,\n  inputGroupVariants,\n  inputGroupAddonVariants,\n  inputGroupButtonVariants,\n  type InputGroupOrientation,\n} from '@refraction-ui/input-group'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: InputGroupOrientation\n}\n\n/**\n * InputGroup — flex container that visually groups inputs, addons, and buttons.\n * Handles border-radius clipping on first/last children.\n */\nexport const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(\n  function InputGroup({ orientation = 'horizontal', className, children, ...props }, ref) {\n    const api = createInputGroup({\n      orientation,\n      id: props.id,\n      'aria-label': props['aria-label'],\n      'aria-labelledby': props['aria-labelledby'],\n    })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(inputGroupVariants({ orientation }), className)}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nexport interface InputGroupAddonProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: InputGroupOrientation\n}\n\n/**\n * InputGroupAddon — decorative text or icon addon (e.g., \"$\", \"@\", icons).\n */\nexport const InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(\n  function InputGroupAddon({ orientation = 'horizontal', className, children, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={cn(inputGroupAddonVariants({ orientation }), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nexport interface InputGroupTextProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\n/**\n * InputGroupText — inline text label within an input group.\n */\nexport const InputGroupText = React.forwardRef<HTMLSpanElement, InputGroupTextProps>(\n  function InputGroupText({ className, children, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        className={cn('flex items-center px-3 text-sm text-muted-foreground', className)}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nexport interface InputGroupButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  orientation?: InputGroupOrientation\n}\n\n/**\n * InputGroupButton — a button styled to sit flush inside an input group.\n */\nexport const InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(\n  function InputGroupButton({ orientation = 'horizontal', className, children, ...props }, ref) {\n    return (\n      <button\n        ref={ref}\n        type={props.type ?? 'button'}\n        className={cn(inputGroupButtonVariants({ orientation }), className)}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;;AAmBO,SAAS,iBAAiB,QAAyB,CAAA,GAAmB;AAC3E,QAAM,EAAE,cAAc,aAAA,IAAiB;AACvC,QAAM,KAAK,MAAM,MAAM,WAAW,iBAAiB;AAEnD,QAAM,YAAyC;IAC7C,MAAM;EAAA;AAGR,MAAI,MAAM,YAAY,GAAG;AACvB,cAAU,YAAY,IAAI,MAAM,YAAY;EAC9C;AACA,MAAI,MAAM,iBAAiB,GAAG;AAC5B,cAAU,iBAAiB,IAAI,MAAM,iBAAiB;EACxD;AAEA,QAAM,iBAAyC;IAC7C,oBAAoB;IACpB;EAAA;AAGF,SAAO;IACL;IACA;EAAA;AAEJ;ACxCO,IAAM,mBAAkC;EAC7C,MAAM;EACN,QAAQ;IACN,IAAI,EAAE,UAAU,wBAAwB,UAAU,yBAAA;IAClD,QAAQ,EAAE,UAAU,4BAA4B,UAAU,qBAAA;IAC1D,QAAQ,EAAE,UAAU,4BAA4B,UAAU,gBAAA;EAAgB;AAE9E;AAEO,IAAM,qBAAqB,IAAI;EACpC,MAAM;EACN,UAAU;IACR,aAAa;MACX,YAAY;MACZ,UAAU;IAAA;EACZ;EAEF,iBAAiB;IACf,aAAa;EAAA;AAEjB,CAAC;AAEM,IAAM,0BAA0B,IAAI;EACzC,MAAM;EACN,UAAU;IACR,aAAa;MACX,YAAY;MACZ,UAAU;IAAA;EACZ;EAEF,iBAAiB;IACf,aAAa;EAAA;AAEjB,CAAC;AAEM,IAAM,2BAA2B,IAAI;EAC1C,MAAM;EACN,UAAU;IACR,aAAa;MACX,YAAY;MACZ,UAAU;IAAA;EACZ;EAEF,iBAAiB;IACf,aAAa;EAAA;AAEjB,CAAC;;;;AC/BM,IAAM,aAAmB;EAC9B,SAASA,YAAW,EAAE,cAAc,cAAc,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AACtF,UAAM,MAAM,iBAAiB;MAC3B;MACA,IAAI,MAAM;MACV,cAAc,MAAM,YAAY;MAChC,mBAAmB,MAAM,iBAAiB;IAAA,CAC3C;AAED,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,mBAAmB,EAAE,YAAA,CAAa,GAAG,SAAS;QAC3D,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;QAEH;MAAA;IAAA;EAGP;AACF;AASO,IAAM,kBAAwB;EACnC,SAASC,iBAAgB,EAAE,cAAc,cAAc,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AAC3F,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,wBAAwB,EAAE,YAAA,CAAa,GAAG,SAAS;QAChE,GAAG;QAEH;MAAA;IAAA;EAGP;AACF;AAOO,IAAM,iBAAuB;EAClC,SAASC,gBAAe,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AAC9D,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,wDAAwD,SAAS;QAC9E,GAAG;QAEH;MAAA;IAAA;EAGP;AACF;AASO,IAAM,mBAAyB;EACpC,SAASC,kBAAiB,EAAE,cAAc,cAAc,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AAC5F,WACE;MAAC;MAAA;QACC;QACA,MAAM,MAAM,QAAQ;QACpB,WAAW,GAAG,yBAAyB,EAAE,YAAA,CAAa,GAAG,SAAS;QACjE,GAAG;QAEH;MAAA;IAAA;EAGP;AACF;",
+  "names": ["InputGroup", "InputGroupAddon", "InputGroupText", "InputGroupButton"]
+}

package/dist/react-input.js

@@ -0,0 +1,10 @@
+import {
+  Input,
+  inputVariants
+} from "./chunk-TOZBR4GL.js";
+import "./chunk-ZF3OHCGV.js";
+export {
+  Input,
+  inputVariants
+};
+//# sourceMappingURL=react-input.js.map

package/dist/react-input.js.map

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

package/dist/react-install-prompt.js

@@ -0,0 +1,132 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-install-prompt/dist/index.js
+import * as React from "react";
+
+// ../install-prompt/dist/index.js
+function createInstallPrompt(props = {}, storage) {
+  const { storageKey = "rfr-install-dismissed" } = props;
+  const dismissed = storage?.get(storageKey) === "true";
+  const state = {
+    canShow: false,
+    isDismissed: dismissed
+  };
+  return {
+    state,
+    show() {
+      if (!state.isDismissed) {
+        state.canShow = true;
+      }
+    },
+    dismiss() {
+      state.canShow = false;
+      state.isDismissed = true;
+      storage?.set(storageKey, "true");
+    },
+    install(promptEvent) {
+      promptEvent?.prompt();
+      state.canShow = false;
+    },
+    ariaProps: {
+      role: "banner",
+      "aria-label": "Install application"
+    }
+  };
+}
+var installPromptVariants = cva({
+  base: "fixed bottom-0 left-0 right-0 z-50 flex items-center justify-between gap-4 border-t bg-background px-4 py-3 shadow-lg"
+});
+
+// ../react-install-prompt/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+function createLocalStorage() {
+  return {
+    get(key) {
+      try {
+        return localStorage.getItem(key);
+      } catch {
+        return null;
+      }
+    },
+    set(key, value) {
+      try {
+        localStorage.setItem(key, value);
+      } catch {
+      }
+    }
+  };
+}
+var InstallPrompt = React.forwardRef(
+  function InstallPrompt2({
+    delay = 3e3,
+    storageKey,
+    installLabel = "Install",
+    dismissLabel = "Dismiss",
+    message = "Install this app for a better experience",
+    className,
+    ...props
+  }, ref) {
+    const storageRef = React.useRef(void 0);
+    if (typeof window !== "undefined" && !storageRef.current) {
+      storageRef.current = createLocalStorage();
+    }
+    const api = createInstallPrompt({ delay, storageKey }, storageRef.current);
+    const [visible, setVisible] = React.useState(false);
+    const promptEventRef = React.useRef(null);
+    React.useEffect(() => {
+      if (api.state.isDismissed) return;
+      const handleBeforeInstall = (e) => {
+        e.preventDefault();
+        promptEventRef.current = e;
+      };
+      window.addEventListener("beforeinstallprompt", handleBeforeInstall);
+      const timer = setTimeout(() => {
+        if (promptEventRef.current && !api.state.isDismissed) {
+          api.show();
+          setVisible(true);
+        }
+      }, delay);
+      return () => {
+        window.removeEventListener("beforeinstallprompt", handleBeforeInstall);
+        clearTimeout(timer);
+      };
+    }, [delay, api]);
+    if (!visible) return null;
+    const classes = cn(installPromptVariants(), className);
+    return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...api.ariaProps, ...props, children: [
+      /* @__PURE__ */ jsx("span", { children: message }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              api.install(promptEventRef.current ?? void 0);
+              setVisible(false);
+            },
+            children: installLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              api.dismiss();
+              setVisible(false);
+            },
+            children: dismissLabel
+          }
+        )
+      ] })
+    ] });
+  }
+);
+export {
+  InstallPrompt,
+  installPromptVariants
+};
+//# sourceMappingURL=react-install-prompt.js.map

package/dist/react-install-prompt.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../install-prompt/src/install-prompt.ts", "../../install-prompt/src/install-prompt.styles.ts", "../../react-install-prompt/src/install-prompt.tsx"],
+  "sourcesContent": ["export interface StorageAdapter {\n  get(key: string): string | null\n  set(key: string, value: string): void\n}\n\nexport interface InstallPromptProps {\n  /** Delay in ms before showing prompt. Default: 3000 */\n  delay?: number\n  /** Key used to persist dismissed state. Default: 'rfr-install-dismissed' */\n  storageKey?: string\n}\n\nexport interface InstallPromptState {\n  canShow: boolean\n  isDismissed: boolean\n}\n\nexport interface InstallPromptAPI {\n  state: InstallPromptState\n  /** Mark the prompt as showable (call after delay + event fire) */\n  show(): void\n  /** Dismiss and persist */\n  dismiss(): void\n  /** Trigger the browser install prompt */\n  install(promptEvent?: { prompt(): void }): void\n  /** ARIA attributes for the banner */\n  ariaProps: Record<string, string>\n}\n\nexport function createInstallPrompt(\n  props: InstallPromptProps = {},\n  storage?: StorageAdapter,\n): InstallPromptAPI {\n  const { storageKey = 'rfr-install-dismissed' } = props\n\n  const dismissed = storage?.get(storageKey) === 'true'\n\n  const state: InstallPromptState = {\n    canShow: false,\n    isDismissed: dismissed,\n  }\n\n  return {\n    state,\n\n    show() {\n      if (!state.isDismissed) {\n        state.canShow = true\n      }\n    },\n\n    dismiss() {\n      state.canShow = false\n      state.isDismissed = true\n      storage?.set(storageKey, 'true')\n    },\n\n    install(promptEvent?: { prompt(): void }) {\n      promptEvent?.prompt()\n      state.canShow = false\n    },\n\n    ariaProps: {\n      role: 'banner',\n      'aria-label': 'Install application',\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const installPromptVariants = cva({\n  base: 'fixed bottom-0 left-0 right-0 z-50 flex items-center justify-between gap-4 border-t bg-background px-4 py-3 shadow-lg',\n})\n", "import * as React from 'react'\nimport {\n  createInstallPrompt,\n  installPromptVariants,\n  type InstallPromptProps as CoreInstallPromptProps,\n  type StorageAdapter,\n} from '@refraction-ui/install-prompt'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface InstallPromptProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Delay in ms before showing. Default: 3000 */\n  delay?: number\n  /** Storage key for dismissed state. Default: 'rfr-install-dismissed' */\n  storageKey?: string\n  /** Install button label. Default: 'Install' */\n  installLabel?: string\n  /** Dismiss button label. Default: 'Dismiss' */\n  dismissLabel?: string\n  /** Message text. Default: 'Install this app for a better experience' */\n  message?: string\n}\n\nfunction createLocalStorage(): StorageAdapter {\n  return {\n    get(key) {\n      try {\n        return localStorage.getItem(key)\n      } catch {\n        return null\n      }\n    },\n    set(key, value) {\n      try {\n        localStorage.setItem(key, value)\n      } catch {\n        // Ignore storage errors in SSR or incognito\n      }\n    },\n  }\n}\n\n/**\n * InstallPrompt component — renders a bottom banner prompting PWA installation.\n *\n * Uses the headless @refraction-ui/install-prompt core for state and ARIA attributes.\n * Listens for the `beforeinstallprompt` browser event.\n */\nexport const InstallPrompt = React.forwardRef<HTMLDivElement, InstallPromptProps>(\n  function InstallPrompt(\n    {\n      delay = 3000,\n      storageKey,\n      installLabel = 'Install',\n      dismissLabel = 'Dismiss',\n      message = 'Install this app for a better experience',\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const storageRef = React.useRef<StorageAdapter | undefined>(undefined)\n    if (typeof window !== 'undefined' && !storageRef.current) {\n      storageRef.current = createLocalStorage()\n    }\n\n    const api = createInstallPrompt({ delay, storageKey }, storageRef.current)\n    const [visible, setVisible] = React.useState(false)\n    const promptEventRef = React.useRef<{ prompt(): void } | null>(null)\n\n    React.useEffect(() => {\n      if (api.state.isDismissed) return\n\n      const handleBeforeInstall = (e: Event) => {\n        e.preventDefault()\n        promptEventRef.current = e as unknown as { prompt(): void }\n      }\n\n      window.addEventListener('beforeinstallprompt', handleBeforeInstall)\n\n      const timer = setTimeout(() => {\n        if (promptEventRef.current && !api.state.isDismissed) {\n          api.show()\n          setVisible(true)\n        }\n      }, delay)\n\n      return () => {\n        window.removeEventListener('beforeinstallprompt', handleBeforeInstall)\n        clearTimeout(timer)\n      }\n    }, [delay, api])\n\n    if (!visible) return null\n\n    const classes = cn(installPromptVariants(), className)\n\n    return (\n      <div ref={ref} className={classes} {...api.ariaProps} {...props}>\n        <span>{message}</span>\n        <div>\n          <button\n            type=\"button\"\n            onClick={() => {\n              api.install(promptEventRef.current ?? undefined)\n              setVisible(false)\n            }}\n          >\n            {installLabel}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              api.dismiss()\n              setVisible(false)\n            }}\n          >\n            {dismissLabel}\n          </button>\n        </div>\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AA6BO,SAAS,oBACd,QAA4B,CAAA,GAC5B,SACkB;AAClB,QAAM,EAAE,aAAa,wBAAA,IAA4B;AAEjD,QAAM,YAAY,SAAS,IAAI,UAAU,MAAM;AAE/C,QAAM,QAA4B;IAChC,SAAS;IACT,aAAa;EAAA;AAGf,SAAO;IACL;IAEA,OAAO;AACL,UAAI,CAAC,MAAM,aAAa;AACtB,cAAM,UAAU;MAClB;IACF;IAEA,UAAU;AACR,YAAM,UAAU;AAChB,YAAM,cAAc;AACpB,eAAS,IAAI,YAAY,MAAM;IACjC;IAEA,QAAQ,aAAkC;AACxC,mBAAa,OAAA;AACb,YAAM,UAAU;IAClB;IAEA,WAAW;MACT,MAAM;MACN,cAAc;IAAA;EAChB;AAEJ;ACjEO,IAAM,wBAAwB,IAAI;EACvC,MAAM;AACR,CAAC;;;;ACkBD,SAAS,qBAAqC;AAC5C,SAAO;IACL,IAAI,KAAK;AACP,UAAI;AACF,eAAO,aAAa,QAAQ,GAAG;MACjC,QAAQ;AACN,eAAO;MACT;IACF;IACA,IAAI,KAAK,OAAO;AACd,UAAI;AACF,qBAAa,QAAQ,KAAK,KAAK;MACjC,QAAQ;MAER;IACF;EAAA;AAEJ;AAQO,IAAM,gBAAsB;EACjC,SAASA,eACP;IACE,QAAQ;IACR;IACA,eAAe;IACf,eAAe;IACf,UAAU;IACV;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,aAAmB,aAAmC,MAAS;AACrE,QAAI,OAAO,WAAW,eAAe,CAAC,WAAW,SAAS;AACxD,iBAAW,UAAU,mBAAA;IACvB;AAEA,UAAM,MAAM,oBAAoB,EAAE,OAAO,WAAA,GAAc,WAAW,OAAO;AACzE,UAAM,CAAC,SAAS,UAAU,IAAU,eAAS,KAAK;AAClD,UAAM,iBAAuB,aAAkC,IAAI;AAE7D,IAAA,gBAAU,MAAM;AACpB,UAAI,IAAI,MAAM,YAAa;AAE3B,YAAM,sBAAsB,CAAC,MAAa;AACxC,UAAE,eAAA;AACF,uBAAe,UAAU;MAC3B;AAEA,aAAO,iBAAiB,uBAAuB,mBAAmB;AAElE,YAAM,QAAQ,WAAW,MAAM;AAC7B,YAAI,eAAe,WAAW,CAAC,IAAI,MAAM,aAAa;AACpD,cAAI,KAAA;AACJ,qBAAW,IAAI;QACjB;MACF,GAAG,KAAK;AAER,aAAO,MAAM;AACX,eAAO,oBAAoB,uBAAuB,mBAAmB;AACrE,qBAAa,KAAK;MACpB;IACF,GAAG,CAAC,OAAO,GAAG,CAAC;AAEf,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,UAAU,GAAG,sBAAA,GAAyB,SAAS;AAErD,WACE,qBAAC,OAAA,EAAI,KAAU,WAAW,SAAU,GAAG,IAAI,WAAY,GAAG,OACxD,UAAA;MAAA,oBAAC,QAAA,EAAM,UAAA,QAAA,CAAQ;MAAA,qBACd,OAAA,EACC,UAAA;QAAA;UAAC;UAAA;YACC,MAAK;YACL,SAAS,MAAM;AACb,kBAAI,QAAQ,eAAe,WAAW,MAAS;AAC/C,yBAAW,KAAK;YAClB;YAEC,UAAA;UAAA;QAAA;QAEH;UAAC;UAAA;YACC,MAAK;YACL,SAAS,MAAM;AACb,kBAAI,QAAA;AACJ,yBAAW,KAAK;YAClB;YAEC,UAAA;UAAA;QAAA;MACH,EAAA,CACF;IAAA,EAAA,CACF;EAEJ;AACF;",
+  "names": ["InstallPrompt"]
+}