@fragments-sdk/ui 0.13.0 → 0.14.0

package/dist/components/Input/Input.module.scss.cjs

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_11ujh_1";
-const label = "_label_11ujh_6";
-const input = "_input_11ujh_14";
-const sm = "_sm_11ujh_54";
-const md = "_md_11ujh_60";
-const lg = "_lg_11ujh_66";
-const labelSm = "_labelSm_11ujh_72";
-const error = "_error_11ujh_76";
-const helper = "_helper_11ujh_84";
-const helperError = "_helperError_11ujh_91";
-const inputContainer = "_inputContainer_11ujh_95";
-const hasShortcut = "_hasShortcut_11ujh_101";
-const shortcut = "_shortcut_11ujh_105";
+const wrapper = "_wrapper_15wvb_1";
+const label = "_label_15wvb_6";
+const input = "_input_15wvb_14";
+const sm = "_sm_15wvb_54";
+const md = "_md_15wvb_60";
+const lg = "_lg_15wvb_66";
+const labelSm = "_labelSm_15wvb_72";
+const error = "_error_15wvb_76";
+const helper = "_helper_15wvb_84";
+const helperError = "_helperError_15wvb_91";
+const inputContainer = "_inputContainer_15wvb_95";
+const hasShortcut = "_hasShortcut_15wvb_101";
+const shortcut = "_shortcut_15wvb_105";
 const styles = {
   wrapper,
   label,

package/dist/components/Input/Input.module.scss.js

@@ -1,16 +1,16 @@
-const wrapper = "_wrapper_11ujh_1";
-const label = "_label_11ujh_6";
-const input = "_input_11ujh_14";
-const sm = "_sm_11ujh_54";
-const md = "_md_11ujh_60";
-const lg = "_lg_11ujh_66";
-const labelSm = "_labelSm_11ujh_72";
-const error = "_error_11ujh_76";
-const helper = "_helper_11ujh_84";
-const helperError = "_helperError_11ujh_91";
-const inputContainer = "_inputContainer_11ujh_95";
-const hasShortcut = "_hasShortcut_11ujh_101";
-const shortcut = "_shortcut_11ujh_105";
+const wrapper = "_wrapper_15wvb_1";
+const label = "_label_15wvb_6";
+const input = "_input_15wvb_14";
+const sm = "_sm_15wvb_54";
+const md = "_md_15wvb_60";
+const lg = "_lg_15wvb_66";
+const labelSm = "_labelSm_15wvb_72";
+const error = "_error_15wvb_76";
+const helper = "_helper_15wvb_84";
+const helperError = "_helperError_15wvb_91";
+const inputContainer = "_inputContainer_15wvb_95";
+const hasShortcut = "_hasShortcut_15wvb_101";
+const shortcut = "_shortcut_15wvb_105";
 const styles = {
   wrapper,
   label,

package/dist/components/Input/index.cjs

@@ -56,23 +56,30 @@ const InputRoot = React__namespace.forwardRef(
     label,
     helperText,
     shortcut,
+    shortcutBehavior = "display-only",
     onChange,
+    onValueChange,
     onBlur,
     onFocus,
     onKeyDown,
+    rootProps,
     className,
     style,
     inputStyle,
     inputClassName,
-    name,
-    id,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    ...htmlProps
+    withFieldWrapper = true,
+    ...inputProps
   }, ref) {
     const generatedId = React__namespace.useId();
     const helperId = helperText ? `input-helper-${generatedId}` : void 0;
+    const {
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      ...nativeInputProps
+    } = inputProps;
+    const resolvedInputId = id ?? `input-${generatedId}`;
     const internalRef = React__namespace.useRef(null);
     const mergedRef = React__namespace.useCallback(
       (node) => {
@@ -87,6 +94,7 @@ const InputRoot = React__namespace.forwardRef(
     );
     React__namespace.useEffect(() => {
       if (!shortcut) return;
+      if (shortcutBehavior !== "focus-input") return;
       const parsed = parseShortcut(shortcut);
       if (!parsed) return;
       const handler = (e) => {
@@ -100,7 +108,7 @@ const InputRoot = React__namespace.forwardRef(
       };
       document.addEventListener("keydown", handler);
       return () => document.removeEventListener("keydown", handler);
-    }, [shortcut]);
+    }, [shortcut, shortcutBehavior]);
     const inputClasses = [
       Input_module.default.input,
       Input_module.default[size],
@@ -111,36 +119,76 @@ const InputRoot = React__namespace.forwardRef(
     const helperClasses = [Input_module.default.helper, error && Input_module.default.helperError].filter(Boolean).join(" ");
     const wrapperClasses = [Input_module.default.wrapper, className].filter(Boolean).join(" ");
     const labelClasses = [Input_module.default.label, size === "sm" && Input_module.default.labelSm].filter(Boolean).join(" ");
+    const sharedInputProps = {
+      ...nativeInputProps,
+      ref: mergedRef,
+      id: resolvedInputId,
+      type,
+      value,
+      defaultValue,
+      placeholder,
+      disabled,
+      onChange: (e) => {
+        onChange == null ? void 0 : onChange(e.target.value);
+        onValueChange == null ? void 0 : onValueChange(e.target.value);
+      },
+      onBlur: () => onBlur == null ? void 0 : onBlur(),
+      onFocus: () => onFocus == null ? void 0 : onFocus(),
+      onKeyDown: (e) => onKeyDown == null ? void 0 : onKeyDown(e),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": mergeAriaIds(ariaDescribedBy, helperId),
+      className: inputClasses,
+      style: inputStyle
+    };
     const inputElement = /* @__PURE__ */ jsxRuntime.jsx(
       field.Field.Control,
       {
-        ref: mergedRef,
-        type,
-        value,
-        defaultValue,
-        placeholder,
-        name,
-        id,
-        onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
-        onBlur,
-        onFocus,
-        onKeyDown,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": mergeAriaIds(ariaDescribedBy, helperId),
-        className: inputClasses,
-        style: inputStyle,
+        ...sharedInputProps,
         render: /* @__PURE__ */ jsxRuntime.jsx("input", {})
       }
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs(field.Field.Root, { ...htmlProps, disabled, invalid: error, className: wrapperClasses, style, children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx(field.Field.Label, { className: labelClasses, children: label }),
-      shortcut ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Input_module.default.inputContainer, children: [
-        inputElement,
-        /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: Input_module.default.shortcut, children: shortcut })
-      ] }) : inputElement,
-      helperText && /* @__PURE__ */ jsxRuntime.jsx(field.Field.Description, { id: helperId, className: helperClasses, children: helperText })
-    ] });
+    const fieldlessInputElement = /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...sharedInputProps,
+        "aria-invalid": error || void 0
+      }
+    );
+    const content = shortcut ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Input_module.default.inputContainer, children: [
+      withFieldWrapper ? inputElement : fieldlessInputElement,
+      /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: Input_module.default.shortcut, children: shortcut })
+    ] }) : withFieldWrapper ? inputElement : fieldlessInputElement;
+    if (!withFieldWrapper) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ...rootProps,
+          className: [Input_module.default.wrapper, rootProps == null ? void 0 : rootProps.className, className].filter(Boolean).join(" "),
+          style: { ...(rootProps == null ? void 0 : rootProps.style) ?? {}, ...style ?? {} },
+          children: [
+            label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: resolvedInputId, className: labelClasses, children: label }),
+            content,
+            helperText && /* @__PURE__ */ jsxRuntime.jsx("div", { id: helperId, className: helperClasses, children: helperText })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      field.Field.Root,
+      {
+        ...rootProps,
+        disabled,
+        invalid: error,
+        className: [wrapperClasses, rootProps == null ? void 0 : rootProps.className].filter(Boolean).join(" "),
+        style: { ...(rootProps == null ? void 0 : rootProps.style) ?? {}, ...style ?? {} },
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(field.Field.Label, { className: labelClasses, children: label }),
+          content,
+          helperText && /* @__PURE__ */ jsxRuntime.jsx(field.Field.Description, { id: helperId, className: helperClasses, children: helperText })
+        ]
+      }
+    );
   }
 );
 const Input = Object.assign(InputRoot, {

package/dist/components/Input/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Input/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Field } from '@base-ui/react/field';\nimport styles from './Input.module.scss';\n\n/**\n * Text input field with label, helper text, and validation.\n * @see https://usefragments.com/components/input\n */\nexport interface InputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'defaultValue'> {\n  /** Controlled input value */\n  value?: string;\n  /** Default value for uncontrolled usage */\n  defaultValue?: string;\n  /** Placeholder text shown when empty */\n  placeholder?: string;\n  /** HTML input type */\n  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';\n  /** Input size.\n   * @default \"md\"\n   * @see https://usefragments.com/components/input#sizes */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether the input is non-interactive */\n  disabled?: boolean;\n  /** Show error styling */\n  error?: boolean;\n  /** Visible label text */\n  label?: string;\n  /** Helper text shown below the input */\n  helperText?: string;\n  /** Keyboard shortcut hint displayed inside the input (e.g., \"⌘K\"). Also registers a global keydown listener that focuses the input when the shortcut is pressed. */\n  shortcut?: string;\n  onChange?: (value: string) => void;\n  onBlur?: () => void;\n  onFocus?: () => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  /** Styles applied directly to the input element */\n  inputStyle?: React.CSSProperties;\n  /** Class applied directly to the input element */\n  inputClassName?: string;\n  name?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\nfunction parseShortcut(shortcut: string): { meta: boolean; shift: boolean; alt: boolean; key: string } | null {\n  let meta = false, shift = false, alt = false;\n  let remaining = shortcut;\n\n  if (remaining.includes('⌘')) { meta = true; remaining = remaining.replace('⌘', ''); }\n  if (remaining.includes('⇧')) { shift = true; remaining = remaining.replace('⇧', ''); }\n  if (remaining.includes('⌥')) { alt = true; remaining = remaining.replace('⌥', ''); }\n\n  remaining = remaining.trim();\n  if (!remaining) return null;\n\n  return { meta, shift, alt, key: remaining };\n}\n\nconst InputRoot = React.forwardRef<HTMLInputElement, InputProps>(\n  function Input(\n    {\n      value,\n      defaultValue,\n      placeholder,\n      type = 'text',\n      size = 'md',\n      disabled = false,\n      error = false,\n      label,\n      helperText,\n      shortcut,\n      onChange,\n      onBlur,\n      onFocus,\n      onKeyDown,\n      className,\n      style,\n      inputStyle,\n      inputClassName,\n      name,\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const generatedId = React.useId();\n    const helperId = helperText ? `input-helper-${generatedId}` : undefined;\n\n    const internalRef = React.useRef<HTMLInputElement>(null);\n    const mergedRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        internalRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n        }\n      },\n      [ref]\n    );\n\n    // Register global keydown handler when shortcut is provided\n    React.useEffect(() => {\n      if (!shortcut) return;\n      const parsed = parseShortcut(shortcut);\n      if (!parsed) return;\n\n      const handler = (e: KeyboardEvent) => {\n        if (parsed.meta && !(e.metaKey || e.ctrlKey)) return;\n        if (parsed.shift && !e.shiftKey) return;\n        if (parsed.alt && !e.altKey) return;\n        if (e.key.toLowerCase() !== parsed.key.toLowerCase()) return;\n        e.preventDefault();\n        internalRef.current?.focus();\n      };\n      document.addEventListener('keydown', handler);\n      return () => document.removeEventListener('keydown', handler);\n    }, [shortcut]);\n\n    const inputClasses = [\n      styles.input,\n      styles[size],\n      error && styles.error,\n      shortcut && styles.hasShortcut,\n      inputClassName,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const helperClasses = [styles.helper, error && styles.helperError]\n      .filter(Boolean)\n      .join(' ');\n\n    const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(' ');\n    const labelClasses = [styles.label, size === 'sm' && styles.labelSm].filter(Boolean).join(' ');\n\n    const inputElement = (\n      <Field.Control\n        ref={mergedRef}\n        type={type}\n        value={value}\n        defaultValue={defaultValue}\n        placeholder={placeholder}\n        name={name}\n        id={id}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n          onChange?.(e.target.value)\n        }\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={mergeAriaIds(ariaDescribedBy, helperId)}\n        className={inputClasses}\n        style={inputStyle}\n        render={<input />}\n      />\n    );\n\n    return (\n      <Field.Root {...htmlProps} disabled={disabled} invalid={error} className={wrapperClasses} style={style}>\n        {label && <Field.Label className={labelClasses}>{label}</Field.Label>}\n        {shortcut ? (\n          <div className={styles.inputContainer}>\n            {inputElement}\n            <kbd className={styles.shortcut}>{shortcut}</kbd>\n          </div>\n        ) : (\n          inputElement\n        )}\n        {helperText && (\n          <Field.Description id={helperId} className={helperClasses}>\n            {helperText}\n          </Field.Description>\n        )}\n      </Field.Root>\n    );\n  }\n);\n\nexport const Input = Object.assign(InputRoot, {\n  Root: InputRoot,\n});\n"],"names":["React","Input","styles","jsx","Field","jsxs"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Input/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Field } from '@base-ui/react/field';\nimport styles from './Input.module.scss';\n\n/**\n * Text input field with label, helper text, and validation.\n * @see https://usefragments.com/components/input\n */\nexport interface InputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'className' | 'style'\n> {\n  /** Controlled input value */\n  value?: string;\n  /** Default value for uncontrolled usage */\n  defaultValue?: string;\n  /** Placeholder text shown when empty */\n  placeholder?: string;\n  /** HTML input type */\n  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';\n  /** Input size.\n   * @default \"md\"\n   * @see https://usefragments.com/components/input#sizes */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether the input is non-interactive */\n  disabled?: boolean;\n  /** Show error styling */\n  error?: boolean;\n  /** Visible label text */\n  label?: string;\n  /** Helper text shown below the input */\n  helperText?: string;\n  /** Keyboard shortcut hint displayed inside the input (e.g., \"⌘K\"). */\n  shortcut?: string;\n  /** Whether the shortcut should also register a global focus hotkey.\n   * @default \"display-only\" */\n  shortcutBehavior?: 'display-only' | 'focus-input';\n  /** Called when value changes (string value) */\n  onChange?: (value: string) => void;\n  /** Alias for onChange (value-first callback) */\n  onValueChange?: (value: string) => void;\n  onBlur?: () => void;\n  onFocus?: () => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  /** Props applied to the wrapper element */\n  rootProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Styles applied directly to the input element */\n  inputStyle?: React.CSSProperties;\n  /** Class applied directly to the input element */\n  inputClassName?: string;\n  /** Whether to render the Base UI Field wrapper (label/description/invalid wiring)\n   * @default true */\n  withFieldWrapper?: boolean;\n  /** Wrapper class name */\n  className?: string;\n  /** Wrapper styles */\n  style?: React.CSSProperties;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\nfunction parseShortcut(shortcut: string): { meta: boolean; shift: boolean; alt: boolean; key: string } | null {\n  let meta = false, shift = false, alt = false;\n  let remaining = shortcut;\n\n  if (remaining.includes('⌘')) { meta = true; remaining = remaining.replace('⌘', ''); }\n  if (remaining.includes('⇧')) { shift = true; remaining = remaining.replace('⇧', ''); }\n  if (remaining.includes('⌥')) { alt = true; remaining = remaining.replace('⌥', ''); }\n\n  remaining = remaining.trim();\n  if (!remaining) return null;\n\n  return { meta, shift, alt, key: remaining };\n}\n\nconst InputRoot = React.forwardRef<HTMLInputElement, InputProps>(\n  function Input(\n    {\n      value,\n      defaultValue,\n      placeholder,\n      type = 'text',\n      size = 'md',\n      disabled = false,\n      error = false,\n      label,\n      helperText,\n      shortcut,\n      shortcutBehavior = 'display-only',\n      onChange,\n      onValueChange,\n      onBlur,\n      onFocus,\n      onKeyDown,\n      rootProps,\n      className,\n      style,\n      inputStyle,\n      inputClassName,\n      withFieldWrapper = true,\n      ...inputProps\n    },\n    ref\n  ) {\n    const generatedId = React.useId();\n    const helperId = helperText ? `input-helper-${generatedId}` : undefined;\n    const {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...nativeInputProps\n    } = inputProps;\n    const resolvedInputId = id ?? `input-${generatedId}`;\n\n    const internalRef = React.useRef<HTMLInputElement>(null);\n    const mergedRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        internalRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n        }\n      },\n      [ref]\n    );\n\n    // Register global keydown handler when shortcut is provided\n    React.useEffect(() => {\n      if (!shortcut) return;\n      if (shortcutBehavior !== 'focus-input') return;\n      const parsed = parseShortcut(shortcut);\n      if (!parsed) return;\n\n      const handler = (e: KeyboardEvent) => {\n        if (parsed.meta && !(e.metaKey || e.ctrlKey)) return;\n        if (parsed.shift && !e.shiftKey) return;\n        if (parsed.alt && !e.altKey) return;\n        if (e.key.toLowerCase() !== parsed.key.toLowerCase()) return;\n        e.preventDefault();\n        internalRef.current?.focus();\n      };\n      document.addEventListener('keydown', handler);\n      return () => document.removeEventListener('keydown', handler);\n    }, [shortcut, shortcutBehavior]);\n\n    const inputClasses = [\n      styles.input,\n      styles[size],\n      error && styles.error,\n      shortcut && styles.hasShortcut,\n      inputClassName,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const helperClasses = [styles.helper, error && styles.helperError]\n      .filter(Boolean)\n      .join(' ');\n\n    const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(' ');\n    const labelClasses = [styles.label, size === 'sm' && styles.labelSm].filter(Boolean).join(' ');\n\n    const sharedInputProps = {\n      ...nativeInputProps,\n      ref: mergedRef,\n      id: resolvedInputId,\n      type,\n      value,\n      defaultValue,\n      placeholder,\n      disabled,\n      onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(e.target.value);\n        onValueChange?.(e.target.value);\n      },\n      onBlur: () => onBlur?.(),\n      onFocus: () => onFocus?.(),\n      onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => onKeyDown?.(e),\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': mergeAriaIds(ariaDescribedBy, helperId),\n      className: inputClasses,\n      style: inputStyle,\n    } satisfies React.InputHTMLAttributes<HTMLInputElement> & {\n      ref: React.Ref<HTMLInputElement>;\n    };\n\n    const inputElement = (\n      <Field.Control\n        {...sharedInputProps}\n        render={<input />}\n      />\n    );\n\n    const fieldlessInputElement = (\n      <input\n        {...sharedInputProps}\n        aria-invalid={error || undefined}\n      />\n    );\n\n    const content = shortcut ? (\n      <div className={styles.inputContainer}>\n        {withFieldWrapper ? inputElement : fieldlessInputElement}\n        <kbd className={styles.shortcut}>{shortcut}</kbd>\n      </div>\n    ) : (\n      withFieldWrapper ? inputElement : fieldlessInputElement\n    );\n\n    if (!withFieldWrapper) {\n      return (\n        <div\n          {...rootProps}\n          className={[styles.wrapper, rootProps?.className, className].filter(Boolean).join(' ')}\n          style={{ ...(rootProps?.style ?? {}), ...(style ?? {}) }}\n        >\n          {label && <label htmlFor={resolvedInputId} className={labelClasses}>{label}</label>}\n          {content}\n          {helperText && (\n            <div id={helperId} className={helperClasses}>\n              {helperText}\n            </div>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <Field.Root\n        {...rootProps}\n        disabled={disabled}\n        invalid={error}\n        className={[wrapperClasses, rootProps?.className].filter(Boolean).join(' ')}\n        style={{ ...(rootProps?.style ?? {}), ...(style ?? {}) }}\n      >\n        {label && <Field.Label className={labelClasses}>{label}</Field.Label>}\n        {content}\n        {helperText && (\n          <Field.Description id={helperId} className={helperClasses}>\n            {helperText}\n          </Field.Description>\n        )}\n      </Field.Root>\n    );\n  }\n);\n\nexport const Input = Object.assign(InputRoot, {\n  Root: InputRoot,\n});\n"],"names":["React","Input","styles","jsx","Field","jsxs"],"mappings":"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"}

package/dist/components/Input/index.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
  * Text input field with label, helper text, and validation.
  * @see https://usefragments.com/components/input
  */
-export interface InputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'defaultValue'> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'className' | 'style'> {
     /** Controlled input value */
     value?: string;
     /** Default value for uncontrolled usage */
@@ -24,17 +24,31 @@ export interface InputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     label?: string;
     /** Helper text shown below the input */
     helperText?: string;
-    /** Keyboard shortcut hint displayed inside the input (e.g., "⌘K"). Also registers a global keydown listener that focuses the input when the shortcut is pressed. */
+    /** Keyboard shortcut hint displayed inside the input (e.g., "⌘K"). */
     shortcut?: string;
+    /** Whether the shortcut should also register a global focus hotkey.
+     * @default "display-only" */
+    shortcutBehavior?: 'display-only' | 'focus-input';
+    /** Called when value changes (string value) */
     onChange?: (value: string) => void;
+    /** Alias for onChange (value-first callback) */
+    onValueChange?: (value: string) => void;
     onBlur?: () => void;
     onFocus?: () => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Props applied to the wrapper element */
+    rootProps?: React.HTMLAttributes<HTMLDivElement>;
     /** Styles applied directly to the input element */
     inputStyle?: React.CSSProperties;
     /** Class applied directly to the input element */
     inputClassName?: string;
-    name?: string;
+    /** Whether to render the Base UI Field wrapper (label/description/invalid wiring)
+     * @default true */
+    withFieldWrapper?: boolean;
+    /** Wrapper class name */
+    className?: string;
+    /** Wrapper styles */
+    style?: React.CSSProperties;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>> & {
     Root: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,cAAc,CAAC;IAC9I,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAChE;;8DAE0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oKAAoK;IACpK,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,mDAAmD;IACnD,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAmJD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CACjF;IACC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAChE;;8DAE0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;iCAC6B;IAC7B,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;IAClD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,2CAA2C;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACjD,mDAAmD;IACnD,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;uBACmB;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAoMD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Input/index.js

@@ -37,23 +37,30 @@ const InputRoot = React.forwardRef(
     label,
     helperText,
     shortcut,
+    shortcutBehavior = "display-only",
     onChange,
+    onValueChange,
     onBlur,
     onFocus,
     onKeyDown,
+    rootProps,
     className,
     style,
     inputStyle,
     inputClassName,
-    name,
-    id,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    ...htmlProps
+    withFieldWrapper = true,
+    ...inputProps
   }, ref) {
     const generatedId = React.useId();
     const helperId = helperText ? `input-helper-${generatedId}` : void 0;
+    const {
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      ...nativeInputProps
+    } = inputProps;
+    const resolvedInputId = id ?? `input-${generatedId}`;
     const internalRef = React.useRef(null);
     const mergedRef = React.useCallback(
       (node) => {
@@ -68,6 +75,7 @@ const InputRoot = React.forwardRef(
     );
     React.useEffect(() => {
       if (!shortcut) return;
+      if (shortcutBehavior !== "focus-input") return;
       const parsed = parseShortcut(shortcut);
       if (!parsed) return;
       const handler = (e) => {
@@ -81,7 +89,7 @@ const InputRoot = React.forwardRef(
       };
       document.addEventListener("keydown", handler);
       return () => document.removeEventListener("keydown", handler);
-    }, [shortcut]);
+    }, [shortcut, shortcutBehavior]);
     const inputClasses = [
       styles.input,
       styles[size],
@@ -92,36 +100,76 @@ const InputRoot = React.forwardRef(
     const helperClasses = [styles.helper, error && styles.helperError].filter(Boolean).join(" ");
     const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(" ");
     const labelClasses = [styles.label, size === "sm" && styles.labelSm].filter(Boolean).join(" ");
+    const sharedInputProps = {
+      ...nativeInputProps,
+      ref: mergedRef,
+      id: resolvedInputId,
+      type,
+      value,
+      defaultValue,
+      placeholder,
+      disabled,
+      onChange: (e) => {
+        onChange == null ? void 0 : onChange(e.target.value);
+        onValueChange == null ? void 0 : onValueChange(e.target.value);
+      },
+      onBlur: () => onBlur == null ? void 0 : onBlur(),
+      onFocus: () => onFocus == null ? void 0 : onFocus(),
+      onKeyDown: (e) => onKeyDown == null ? void 0 : onKeyDown(e),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": mergeAriaIds(ariaDescribedBy, helperId),
+      className: inputClasses,
+      style: inputStyle
+    };
     const inputElement = /* @__PURE__ */ jsx(
       Field.Control,
       {
-        ref: mergedRef,
-        type,
-        value,
-        defaultValue,
-        placeholder,
-        name,
-        id,
-        onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
-        onBlur,
-        onFocus,
-        onKeyDown,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": mergeAriaIds(ariaDescribedBy, helperId),
-        className: inputClasses,
-        style: inputStyle,
+        ...sharedInputProps,
         render: /* @__PURE__ */ jsx("input", {})
       }
     );
-    return /* @__PURE__ */ jsxs(Field.Root, { ...htmlProps, disabled, invalid: error, className: wrapperClasses, style, children: [
-      label && /* @__PURE__ */ jsx(Field.Label, { className: labelClasses, children: label }),
-      shortcut ? /* @__PURE__ */ jsxs("div", { className: styles.inputContainer, children: [
-        inputElement,
-        /* @__PURE__ */ jsx("kbd", { className: styles.shortcut, children: shortcut })
-      ] }) : inputElement,
-      helperText && /* @__PURE__ */ jsx(Field.Description, { id: helperId, className: helperClasses, children: helperText })
-    ] });
+    const fieldlessInputElement = /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...sharedInputProps,
+        "aria-invalid": error || void 0
+      }
+    );
+    const content = shortcut ? /* @__PURE__ */ jsxs("div", { className: styles.inputContainer, children: [
+      withFieldWrapper ? inputElement : fieldlessInputElement,
+      /* @__PURE__ */ jsx("kbd", { className: styles.shortcut, children: shortcut })
+    ] }) : withFieldWrapper ? inputElement : fieldlessInputElement;
+    if (!withFieldWrapper) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...rootProps,
+          className: [styles.wrapper, rootProps == null ? void 0 : rootProps.className, className].filter(Boolean).join(" "),
+          style: { ...(rootProps == null ? void 0 : rootProps.style) ?? {}, ...style ?? {} },
+          children: [
+            label && /* @__PURE__ */ jsx("label", { htmlFor: resolvedInputId, className: labelClasses, children: label }),
+            content,
+            helperText && /* @__PURE__ */ jsx("div", { id: helperId, className: helperClasses, children: helperText })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        ...rootProps,
+        disabled,
+        invalid: error,
+        className: [wrapperClasses, rootProps == null ? void 0 : rootProps.className].filter(Boolean).join(" "),
+        style: { ...(rootProps == null ? void 0 : rootProps.style) ?? {}, ...style ?? {} },
+        children: [
+          label && /* @__PURE__ */ jsx(Field.Label, { className: labelClasses, children: label }),
+          content,
+          helperText && /* @__PURE__ */ jsx(Field.Description, { id: helperId, className: helperClasses, children: helperText })
+        ]
+      }
+    );
   }
 );
 const Input = Object.assign(InputRoot, {

package/dist/components/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Input/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Field } from '@base-ui/react/field';\nimport styles from './Input.module.scss';\n\n/**\n * Text input field with label, helper text, and validation.\n * @see https://usefragments.com/components/input\n */\nexport interface InputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'defaultValue'> {\n  /** Controlled input value */\n  value?: string;\n  /** Default value for uncontrolled usage */\n  defaultValue?: string;\n  /** Placeholder text shown when empty */\n  placeholder?: string;\n  /** HTML input type */\n  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';\n  /** Input size.\n   * @default \"md\"\n   * @see https://usefragments.com/components/input#sizes */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether the input is non-interactive */\n  disabled?: boolean;\n  /** Show error styling */\n  error?: boolean;\n  /** Visible label text */\n  label?: string;\n  /** Helper text shown below the input */\n  helperText?: string;\n  /** Keyboard shortcut hint displayed inside the input (e.g., \"⌘K\"). Also registers a global keydown listener that focuses the input when the shortcut is pressed. */\n  shortcut?: string;\n  onChange?: (value: string) => void;\n  onBlur?: () => void;\n  onFocus?: () => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  /** Styles applied directly to the input element */\n  inputStyle?: React.CSSProperties;\n  /** Class applied directly to the input element */\n  inputClassName?: string;\n  name?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\nfunction parseShortcut(shortcut: string): { meta: boolean; shift: boolean; alt: boolean; key: string } | null {\n  let meta = false, shift = false, alt = false;\n  let remaining = shortcut;\n\n  if (remaining.includes('⌘')) { meta = true; remaining = remaining.replace('⌘', ''); }\n  if (remaining.includes('⇧')) { shift = true; remaining = remaining.replace('⇧', ''); }\n  if (remaining.includes('⌥')) { alt = true; remaining = remaining.replace('⌥', ''); }\n\n  remaining = remaining.trim();\n  if (!remaining) return null;\n\n  return { meta, shift, alt, key: remaining };\n}\n\nconst InputRoot = React.forwardRef<HTMLInputElement, InputProps>(\n  function Input(\n    {\n      value,\n      defaultValue,\n      placeholder,\n      type = 'text',\n      size = 'md',\n      disabled = false,\n      error = false,\n      label,\n      helperText,\n      shortcut,\n      onChange,\n      onBlur,\n      onFocus,\n      onKeyDown,\n      className,\n      style,\n      inputStyle,\n      inputClassName,\n      name,\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const generatedId = React.useId();\n    const helperId = helperText ? `input-helper-${generatedId}` : undefined;\n\n    const internalRef = React.useRef<HTMLInputElement>(null);\n    const mergedRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        internalRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n        }\n      },\n      [ref]\n    );\n\n    // Register global keydown handler when shortcut is provided\n    React.useEffect(() => {\n      if (!shortcut) return;\n      const parsed = parseShortcut(shortcut);\n      if (!parsed) return;\n\n      const handler = (e: KeyboardEvent) => {\n        if (parsed.meta && !(e.metaKey || e.ctrlKey)) return;\n        if (parsed.shift && !e.shiftKey) return;\n        if (parsed.alt && !e.altKey) return;\n        if (e.key.toLowerCase() !== parsed.key.toLowerCase()) return;\n        e.preventDefault();\n        internalRef.current?.focus();\n      };\n      document.addEventListener('keydown', handler);\n      return () => document.removeEventListener('keydown', handler);\n    }, [shortcut]);\n\n    const inputClasses = [\n      styles.input,\n      styles[size],\n      error && styles.error,\n      shortcut && styles.hasShortcut,\n      inputClassName,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const helperClasses = [styles.helper, error && styles.helperError]\n      .filter(Boolean)\n      .join(' ');\n\n    const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(' ');\n    const labelClasses = [styles.label, size === 'sm' && styles.labelSm].filter(Boolean).join(' ');\n\n    const inputElement = (\n      <Field.Control\n        ref={mergedRef}\n        type={type}\n        value={value}\n        defaultValue={defaultValue}\n        placeholder={placeholder}\n        name={name}\n        id={id}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n          onChange?.(e.target.value)\n        }\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={mergeAriaIds(ariaDescribedBy, helperId)}\n        className={inputClasses}\n        style={inputStyle}\n        render={<input />}\n      />\n    );\n\n    return (\n      <Field.Root {...htmlProps} disabled={disabled} invalid={error} className={wrapperClasses} style={style}>\n        {label && <Field.Label className={labelClasses}>{label}</Field.Label>}\n        {shortcut ? (\n          <div className={styles.inputContainer}>\n            {inputElement}\n            <kbd className={styles.shortcut}>{shortcut}</kbd>\n          </div>\n        ) : (\n          inputElement\n        )}\n        {helperText && (\n          <Field.Description id={helperId} className={helperClasses}>\n            {helperText}\n          </Field.Description>\n        )}\n      </Field.Root>\n    );\n  }\n);\n\nexport const Input = Object.assign(InputRoot, {\n  Root: InputRoot,\n});\n"],"names":["Input"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Input/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Field } from '@base-ui/react/field';\nimport styles from './Input.module.scss';\n\n/**\n * Text input field with label, helper text, and validation.\n * @see https://usefragments.com/components/input\n */\nexport interface InputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'className' | 'style'\n> {\n  /** Controlled input value */\n  value?: string;\n  /** Default value for uncontrolled usage */\n  defaultValue?: string;\n  /** Placeholder text shown when empty */\n  placeholder?: string;\n  /** HTML input type */\n  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';\n  /** Input size.\n   * @default \"md\"\n   * @see https://usefragments.com/components/input#sizes */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether the input is non-interactive */\n  disabled?: boolean;\n  /** Show error styling */\n  error?: boolean;\n  /** Visible label text */\n  label?: string;\n  /** Helper text shown below the input */\n  helperText?: string;\n  /** Keyboard shortcut hint displayed inside the input (e.g., \"⌘K\"). */\n  shortcut?: string;\n  /** Whether the shortcut should also register a global focus hotkey.\n   * @default \"display-only\" */\n  shortcutBehavior?: 'display-only' | 'focus-input';\n  /** Called when value changes (string value) */\n  onChange?: (value: string) => void;\n  /** Alias for onChange (value-first callback) */\n  onValueChange?: (value: string) => void;\n  onBlur?: () => void;\n  onFocus?: () => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  /** Props applied to the wrapper element */\n  rootProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Styles applied directly to the input element */\n  inputStyle?: React.CSSProperties;\n  /** Class applied directly to the input element */\n  inputClassName?: string;\n  /** Whether to render the Base UI Field wrapper (label/description/invalid wiring)\n   * @default true */\n  withFieldWrapper?: boolean;\n  /** Wrapper class name */\n  className?: string;\n  /** Wrapper styles */\n  style?: React.CSSProperties;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\nfunction parseShortcut(shortcut: string): { meta: boolean; shift: boolean; alt: boolean; key: string } | null {\n  let meta = false, shift = false, alt = false;\n  let remaining = shortcut;\n\n  if (remaining.includes('⌘')) { meta = true; remaining = remaining.replace('⌘', ''); }\n  if (remaining.includes('⇧')) { shift = true; remaining = remaining.replace('⇧', ''); }\n  if (remaining.includes('⌥')) { alt = true; remaining = remaining.replace('⌥', ''); }\n\n  remaining = remaining.trim();\n  if (!remaining) return null;\n\n  return { meta, shift, alt, key: remaining };\n}\n\nconst InputRoot = React.forwardRef<HTMLInputElement, InputProps>(\n  function Input(\n    {\n      value,\n      defaultValue,\n      placeholder,\n      type = 'text',\n      size = 'md',\n      disabled = false,\n      error = false,\n      label,\n      helperText,\n      shortcut,\n      shortcutBehavior = 'display-only',\n      onChange,\n      onValueChange,\n      onBlur,\n      onFocus,\n      onKeyDown,\n      rootProps,\n      className,\n      style,\n      inputStyle,\n      inputClassName,\n      withFieldWrapper = true,\n      ...inputProps\n    },\n    ref\n  ) {\n    const generatedId = React.useId();\n    const helperId = helperText ? `input-helper-${generatedId}` : undefined;\n    const {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...nativeInputProps\n    } = inputProps;\n    const resolvedInputId = id ?? `input-${generatedId}`;\n\n    const internalRef = React.useRef<HTMLInputElement>(null);\n    const mergedRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        internalRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n        }\n      },\n      [ref]\n    );\n\n    // Register global keydown handler when shortcut is provided\n    React.useEffect(() => {\n      if (!shortcut) return;\n      if (shortcutBehavior !== 'focus-input') return;\n      const parsed = parseShortcut(shortcut);\n      if (!parsed) return;\n\n      const handler = (e: KeyboardEvent) => {\n        if (parsed.meta && !(e.metaKey || e.ctrlKey)) return;\n        if (parsed.shift && !e.shiftKey) return;\n        if (parsed.alt && !e.altKey) return;\n        if (e.key.toLowerCase() !== parsed.key.toLowerCase()) return;\n        e.preventDefault();\n        internalRef.current?.focus();\n      };\n      document.addEventListener('keydown', handler);\n      return () => document.removeEventListener('keydown', handler);\n    }, [shortcut, shortcutBehavior]);\n\n    const inputClasses = [\n      styles.input,\n      styles[size],\n      error && styles.error,\n      shortcut && styles.hasShortcut,\n      inputClassName,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const helperClasses = [styles.helper, error && styles.helperError]\n      .filter(Boolean)\n      .join(' ');\n\n    const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(' ');\n    const labelClasses = [styles.label, size === 'sm' && styles.labelSm].filter(Boolean).join(' ');\n\n    const sharedInputProps = {\n      ...nativeInputProps,\n      ref: mergedRef,\n      id: resolvedInputId,\n      type,\n      value,\n      defaultValue,\n      placeholder,\n      disabled,\n      onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(e.target.value);\n        onValueChange?.(e.target.value);\n      },\n      onBlur: () => onBlur?.(),\n      onFocus: () => onFocus?.(),\n      onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => onKeyDown?.(e),\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': mergeAriaIds(ariaDescribedBy, helperId),\n      className: inputClasses,\n      style: inputStyle,\n    } satisfies React.InputHTMLAttributes<HTMLInputElement> & {\n      ref: React.Ref<HTMLInputElement>;\n    };\n\n    const inputElement = (\n      <Field.Control\n        {...sharedInputProps}\n        render={<input />}\n      />\n    );\n\n    const fieldlessInputElement = (\n      <input\n        {...sharedInputProps}\n        aria-invalid={error || undefined}\n      />\n    );\n\n    const content = shortcut ? (\n      <div className={styles.inputContainer}>\n        {withFieldWrapper ? inputElement : fieldlessInputElement}\n        <kbd className={styles.shortcut}>{shortcut}</kbd>\n      </div>\n    ) : (\n      withFieldWrapper ? inputElement : fieldlessInputElement\n    );\n\n    if (!withFieldWrapper) {\n      return (\n        <div\n          {...rootProps}\n          className={[styles.wrapper, rootProps?.className, className].filter(Boolean).join(' ')}\n          style={{ ...(rootProps?.style ?? {}), ...(style ?? {}) }}\n        >\n          {label && <label htmlFor={resolvedInputId} className={labelClasses}>{label}</label>}\n          {content}\n          {helperText && (\n            <div id={helperId} className={helperClasses}>\n              {helperText}\n            </div>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <Field.Root\n        {...rootProps}\n        disabled={disabled}\n        invalid={error}\n        className={[wrapperClasses, rootProps?.className].filter(Boolean).join(' ')}\n        style={{ ...(rootProps?.style ?? {}), ...(style ?? {}) }}\n      >\n        {label && <Field.Label className={labelClasses}>{label}</Field.Label>}\n        {content}\n        {helperText && (\n          <Field.Description id={helperId} className={helperClasses}>\n            {helperText}\n          </Field.Description>\n        )}\n      </Field.Root>\n    );\n  }\n);\n\nexport const Input = Object.assign(InputRoot, {\n  Root: InputRoot,\n});\n"],"names":["Input"],"mappings":"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"}

package/dist/components/Link/index.cjs

@@ -20,6 +20,14 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function composeEventHandlers(childHandler, parentHandler) {
+  if (!childHandler) return parentHandler;
+  if (!parentHandler) return childHandler;
+  return ((...args) => {
+    childHandler(...args);
+    parentHandler(...args);
+  });
+}
 const LinkRoot = React__namespace.forwardRef(
   function Link2({
     children,
@@ -52,6 +60,15 @@ const LinkRoot = React__namespace.forwardRef(
         ...externalProps,
         ...props
       };
+      for (const [key, parentValue] of Object.entries({ ...externalProps, ...props })) {
+        if (!key.startsWith("on") || typeof parentValue !== "function") continue;
+        const childValue = childProps[key];
+        if (typeof childValue !== "function") continue;
+        mergedProps[key] = composeEventHandlers(
+          childValue,
+          parentValue
+        );
+      }
       return React__namespace.cloneElement(children, mergedProps);
     }
     return /* @__PURE__ */ jsxRuntime.jsx("a", { ref, className: classes, style, ...externalProps, ...props, children });

package/dist/components/Link/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Link/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Link.module.scss';\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: React.ReactNode;\n  /** Visual variant */\n  variant?: 'default' | 'subtle' | 'muted';\n  /** Underline style */\n  underline?: 'always' | 'hover' | 'none';\n  /** Open in new tab (adds rel=\"noopener noreferrer\") */\n  external?: boolean;\n  /**\n   * Render as child element (polymorphic). When true, clones the single child\n   * and merges link props onto it. Useful for rendering as Next.js Link, etc.\n   */\n  asChild?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Inline styles */\n  style?: React.CSSProperties;\n}\n\nconst LinkRoot = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  function Link(\n    {\n      children,\n      variant = 'default',\n      underline = 'hover',\n      external = false,\n      asChild = false,\n      className,\n      style,\n      target,\n      rel,\n      ...props\n    },\n    ref\n  ) {\n    const classes = [\n      styles.link,\n      styles[variant],\n      styles[`underline-${underline}`],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    // Handle external links\n    const externalProps = external\n      ? {\n          target: target || '_blank',\n          rel: rel || 'noopener noreferrer',\n        }\n      : { target, rel };\n\n    if (asChild && React.isValidElement(children)) {\n      const childProps = children.props as Record<string, unknown>;\n      const mergedProps: Record<string, unknown> = {\n        ref,\n        className: childProps.className\n          ? `${classes} ${childProps.className}`\n          : classes,\n        style: { ...style, ...(childProps.style as React.CSSProperties | undefined) },\n        ...externalProps,\n        ...props,\n      };\n      return React.cloneElement(children, mergedProps);\n    }\n\n    return (\n      <a ref={ref} className={classes} style={style} {...externalProps} {...props}>\n        {children}\n      </a>\n    );\n  }\n);\n\nexport const Link = Object.assign(LinkRoot, {\n  Root: LinkRoot,\n});\n"],"names":["React","Link","styles","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,WAAWA,iBAAM;AAAA,EACrB,SAASC,MACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,UAAU;AAAA,MACdC,YAAAA,QAAO;AAAA,MACPA,YAAAA,QAAO,OAAO;AAAA,MACdA,YAAAA,QAAO,aAAa,SAAS,EAAE;AAAA,MAC/B;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,gBAAgB,WAClB;AAAA,MACE,QAAQ,UAAU;AAAA,MAClB,KAAK,OAAO;AAAA,IAAA,IAEd,EAAE,QAAQ,IAAA;AAEd,QAAI,WAAWF,iBAAM,eAAe,QAAQ,GAAG;AAC7C,YAAM,aAAa,SAAS;AAC5B,YAAM,cAAuC;AAAA,QAC3C;AAAA,QACA,WAAW,WAAW,YAClB,GAAG,OAAO,IAAI,WAAW,SAAS,KAClC;AAAA,QACJ,OAAO,EAAE,GAAG,OAAO,GAAI,WAAW,MAAA;AAAA,QAClC,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAEL,aAAOA,iBAAM,aAAa,UAAU,WAAW;AAAA,IACjD;AAEA,WACEG,+BAAC,KAAA,EAAE,KAAU,WAAW,SAAS,OAAe,GAAG,eAAgB,GAAG,OACnE,SAAA,CACH;AAAA,EAEJ;AACF;AAEO,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AACR,CAAC;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Link/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Link.module.scss';\n\nfunction composeEventHandlers<T extends (...args: any[]) => void>(\n  childHandler: T | undefined,\n  parentHandler: T | undefined\n) {\n  if (!childHandler) return parentHandler;\n  if (!parentHandler) return childHandler;\n  return ((...args: Parameters<T>) => {\n    childHandler(...args);\n    parentHandler(...args);\n  }) as T;\n}\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: React.ReactNode;\n  /** Visual variant */\n  variant?: 'default' | 'subtle' | 'muted';\n  /** Underline style */\n  underline?: 'always' | 'hover' | 'none';\n  /** Open in new tab (adds rel=\"noopener noreferrer\") */\n  external?: boolean;\n  /**\n   * Render as child element (polymorphic). When true, clones the single child\n   * and merges link props onto it. Useful for rendering as Next.js Link, etc.\n   */\n  asChild?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Inline styles */\n  style?: React.CSSProperties;\n}\n\nconst LinkRoot = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  function Link(\n    {\n      children,\n      variant = 'default',\n      underline = 'hover',\n      external = false,\n      asChild = false,\n      className,\n      style,\n      target,\n      rel,\n      ...props\n    },\n    ref\n  ) {\n    const classes = [\n      styles.link,\n      styles[variant],\n      styles[`underline-${underline}`],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    // Handle external links\n    const externalProps = external\n      ? {\n          target: target || '_blank',\n          rel: rel || 'noopener noreferrer',\n        }\n      : { target, rel };\n\n    if (asChild && React.isValidElement(children)) {\n      const childProps = children.props as Record<string, unknown>;\n      const mergedProps: Record<string, unknown> = {\n        ref,\n        className: childProps.className\n          ? `${classes} ${childProps.className}`\n          : classes,\n        style: { ...style, ...(childProps.style as React.CSSProperties | undefined) },\n        ...externalProps,\n        ...props,\n      };\n\n      for (const [key, parentValue] of Object.entries({ ...externalProps, ...props })) {\n        if (!key.startsWith('on') || typeof parentValue !== 'function') continue;\n        const childValue = childProps[key];\n        if (typeof childValue !== 'function') continue;\n        mergedProps[key] = composeEventHandlers(\n          childValue as (...args: unknown[]) => void,\n          parentValue as (...args: unknown[]) => void\n        );\n      }\n      return React.cloneElement(children, mergedProps);\n    }\n\n    return (\n      <a ref={ref} className={classes} style={style} {...externalProps} {...props}>\n        {children}\n      </a>\n    );\n  }\n);\n\nexport const Link = Object.assign(LinkRoot, {\n  Root: LinkRoot,\n});\n"],"names":["React","Link","styles","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAGA,SAAS,qBACP,cACA,eACA;AACA,MAAI,CAAC,aAAc,QAAO;AAC1B,MAAI,CAAC,cAAe,QAAO;AAC3B,UAAQ,IAAI,SAAwB;AAClC,iBAAa,GAAG,IAAI;AACpB,kBAAc,GAAG,IAAI;AAAA,EACvB;AACF;AAqBA,MAAM,WAAWA,iBAAM;AAAA,EACrB,SAASC,MACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,UAAU;AAAA,MACdC,YAAAA,QAAO;AAAA,MACPA,YAAAA,QAAO,OAAO;AAAA,MACdA,YAAAA,QAAO,aAAa,SAAS,EAAE;AAAA,MAC/B;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,gBAAgB,WAClB;AAAA,MACE,QAAQ,UAAU;AAAA,MAClB,KAAK,OAAO;AAAA,IAAA,IAEd,EAAE,QAAQ,IAAA;AAEd,QAAI,WAAWF,iBAAM,eAAe,QAAQ,GAAG;AAC7C,YAAM,aAAa,SAAS;AAC5B,YAAM,cAAuC;AAAA,QAC3C;AAAA,QACA,WAAW,WAAW,YAClB,GAAG,OAAO,IAAI,WAAW,SAAS,KAClC;AAAA,QACJ,OAAO,EAAE,GAAG,OAAO,GAAI,WAAW,MAAA;AAAA,QAClC,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAGL,iBAAW,CAAC,KAAK,WAAW,KAAK,OAAO,QAAQ,EAAE,GAAG,eAAe,GAAG,MAAA,CAAO,GAAG;AAC/E,YAAI,CAAC,IAAI,WAAW,IAAI,KAAK,OAAO,gBAAgB,WAAY;AAChE,cAAM,aAAa,WAAW,GAAG;AACjC,YAAI,OAAO,eAAe,WAAY;AACtC,oBAAY,GAAG,IAAI;AAAA,UACjB;AAAA,UACA;AAAA,QAAA;AAAA,MAEJ;AACA,aAAOA,iBAAM,aAAa,UAAU,WAAW;AAAA,IACjD;AAEA,WACEG,+BAAC,KAAA,EAAE,KAAU,WAAW,SAAS,OAAe,GAAG,eAAgB,GAAG,OACnE,SAAA,CACH;AAAA,EAEJ;AACF;AAEO,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AACR,CAAC;;"}

package/dist/components/Link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IACzC,sBAAsB;IACtB,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IACxC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAyDD,eAAO,MAAM,IAAI;;CAEf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IACzC,sBAAsB;IACtB,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IACxC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAmED,eAAO,MAAM,IAAI;;CAEf,CAAC"}

package/dist/components/Link/index.js

@@ -1,6 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./Link.module.scss.js";
+function composeEventHandlers(childHandler, parentHandler) {
+  if (!childHandler) return parentHandler;
+  if (!parentHandler) return childHandler;
+  return ((...args) => {
+    childHandler(...args);
+    parentHandler(...args);
+  });
+}
 const LinkRoot = React.forwardRef(
   function Link2({
     children,
@@ -33,6 +41,15 @@ const LinkRoot = React.forwardRef(
         ...externalProps,
         ...props
       };
+      for (const [key, parentValue] of Object.entries({ ...externalProps, ...props })) {
+        if (!key.startsWith("on") || typeof parentValue !== "function") continue;
+        const childValue = childProps[key];
+        if (typeof childValue !== "function") continue;
+        mergedProps[key] = composeEventHandlers(
+          childValue,
+          parentValue
+        );
+      }
       return React.cloneElement(children, mergedProps);
     }
     return /* @__PURE__ */ jsx("a", { ref, className: classes, style, ...externalProps, ...props, children });