@fragments-sdk/ui 0.13.0 → 0.15.1

package/dist/components/Input/index.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const field = require("@base-ui/react/field");
+const aria = require("../../utils/aria.cjs");
 const Input_module = require("./Input.module.scss.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -21,10 +22,6 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-function mergeAriaIds(...ids) {
-  const merged = ids.filter(Boolean).join(" ").trim();
-  return merged.length > 0 ? merged : void 0;
-}
 function parseShortcut(shortcut) {
   let meta = false, shift = false, alt = false;
   let remaining = shortcut;
@@ -53,26 +50,34 @@ const InputRoot = React__namespace.forwardRef(
     size = "md",
     disabled = false,
     error = false,
+    required = false,
     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 +92,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 +106,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,40 +117,86 @@ 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,
+      required,
+      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": aria.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.jsxs("label", { htmlFor: resolvedInputId, className: labelClasses, children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Input_module.default.required, children: "*" })
+            ] }),
+            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.jsxs(field.Field.Label, { className: labelClasses, children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Input_module.default.required, children: "*" })
+          ] }),
+          content,
+          helperText && /* @__PURE__ */ jsxRuntime.jsx(field.Field.Description, { id: helperId, className: helperClasses, children: helperText })
+        ]
+      }
+    );
   }
 );
 const Input = Object.assign(InputRoot, {
   Root: InputRoot
 });
 exports.Input = Input;
-//# sourceMappingURL=index.cjs.map

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 */
@@ -22,19 +22,35 @@ export interface InputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     error?: boolean;
     /** Visible label text */
     label?: string;
+    /** Whether the field is required */
+    required?: boolean;
     /** 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;AAK/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,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;AA2MD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Input/index.js

@@ -1,11 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Field } from "@base-ui/react/field";
+import { mergeAriaIds } from "../../utils/aria.js";
 import styles from "./Input.module.scss.js";
-function mergeAriaIds(...ids) {
-  const merged = ids.filter(Boolean).join(" ").trim();
-  return merged.length > 0 ? merged : void 0;
-}
 function parseShortcut(shortcut) {
   let meta = false, shift = false, alt = false;
   let remaining = shortcut;
@@ -34,26 +31,34 @@ const InputRoot = React.forwardRef(
     size = "md",
     disabled = false,
     error = false,
+    required = false,
     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 +73,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 +87,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 +98,83 @@ 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,
+      required,
+      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__ */ jsxs("label", { htmlFor: resolvedInputId, className: labelClasses, children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: styles.required, children: "*" })
+            ] }),
+            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__ */ jsxs(Field.Label, { className: labelClasses, children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: styles.required, children: "*" })
+          ] }),
+          content,
+          helperText && /* @__PURE__ */ jsx(Field.Description, { id: helperId, className: helperClasses, children: helperText })
+        ]
+      }
+    );
   }
 );
 const Input = Object.assign(InputRoot, {
@@ -130,4 +183,3 @@ const Input = Object.assign(InputRoot, {
 export {
   Input
 };
-//# sourceMappingURL=index.js.map

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

@@ -1,21 +1,21 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const link = "_link_77ogl_1";
-const subtle = "_subtle_77ogl_34";
-const muted = "_muted_77ogl_41";
-const underlineAlways = "_underline-always_77ogl_48";
-const underlineHover = "_underline-hover_77ogl_53";
-const underlineNone = "_underline-none_77ogl_61";
+const link = "_link_1bghi_1";
+const subtle = "_subtle_1bghi_34";
+const muted = "_muted_1bghi_41";
+const underlineAlways = "_underline-always_1bghi_48";
+const underlineHover = "_underline-hover_1bghi_53";
+const underlineNone = "_underline-none_1bghi_61";
 const styles = {
   link,
-  "default": "_default_77ogl_27",
+  "default": "_default_1bghi_27",
   subtle,
   muted,
-  "underline-always": "_underline-always_77ogl_48",
+  "underline-always": "_underline-always_1bghi_48",
   underlineAlways,
-  "underline-hover": "_underline-hover_77ogl_53",
+  "underline-hover": "_underline-hover_1bghi_53",
   underlineHover,
-  "underline-none": "_underline-none_77ogl_61",
+  "underline-none": "_underline-none_1bghi_61",
   underlineNone
 };
 exports.default = styles;
@@ -25,4 +25,3 @@ exports.subtle = subtle;
 exports.underlineAlways = underlineAlways;
 exports.underlineHover = underlineHover;
 exports.underlineNone = underlineNone;
-//# sourceMappingURL=Link.module.scss.cjs.map

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

@@ -1,19 +1,19 @@
-const link = "_link_77ogl_1";
-const subtle = "_subtle_77ogl_34";
-const muted = "_muted_77ogl_41";
-const underlineAlways = "_underline-always_77ogl_48";
-const underlineHover = "_underline-hover_77ogl_53";
-const underlineNone = "_underline-none_77ogl_61";
+const link = "_link_1bghi_1";
+const subtle = "_subtle_1bghi_34";
+const muted = "_muted_1bghi_41";
+const underlineAlways = "_underline-always_1bghi_48";
+const underlineHover = "_underline-hover_1bghi_53";
+const underlineNone = "_underline-none_1bghi_61";
 const styles = {
   link,
-  "default": "_default_77ogl_27",
+  "default": "_default_1bghi_27",
   subtle,
   muted,
-  "underline-always": "_underline-always_77ogl_48",
+  "underline-always": "_underline-always_1bghi_48",
   underlineAlways,
-  "underline-hover": "_underline-hover_77ogl_53",
+  "underline-hover": "_underline-hover_1bghi_53",
   underlineHover,
-  "underline-none": "_underline-none_77ogl_61",
+  "underline-none": "_underline-none_1bghi_61",
   underlineNone
 };
 export {
@@ -25,4 +25,3 @@ export {
   underlineHover,
   underlineNone
 };
-//# sourceMappingURL=Link.module.scss.js.map

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 });
@@ -61,4 +78,3 @@ const Link = Object.assign(LinkRoot, {
   Root: LinkRoot
 });
 exports.Link = Link;
-//# sourceMappingURL=index.cjs.map

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 });
@@ -44,4 +61,3 @@ const Link = Object.assign(LinkRoot, {
 export {
   Link
 };
-//# sourceMappingURL=index.js.map

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

@@ -50,4 +50,3 @@ exports.item = item;
 exports.itemContent = itemContent;
 exports.list = list;
 exports.none = none;
-//# sourceMappingURL=List.module.scss.cjs.map

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

@@ -50,4 +50,3 @@ export {
   list,
   none
 };
-//# sourceMappingURL=List.module.scss.js.map

package/dist/components/List/index.cjs

@@ -63,4 +63,3 @@ exports.List = List;
 exports.ListItem = ListItem;
 exports.ListRoot = ListRoot;
 exports.useListContext = useListContext;
-//# sourceMappingURL=index.cjs.map

package/dist/components/List/index.js

@@ -46,4 +46,3 @@ export {
   ListRoot,
   useListContext
 };
-//# sourceMappingURL=index.js.map

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

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const listbox = "_listbox_1b0sq_1";
-const item = "_item_1b0sq_16";
-const itemSelected = "_itemSelected_1b0sq_57";
-const itemActive = "_itemActive_1b0sq_61";
-const itemDisabled = "_itemDisabled_1b0sq_65";
-const group = "_group_1b0sq_70";
-const groupLabel = "_groupLabel_1b0sq_76";
-const empty = "_empty_1b0sq_83";
+const listbox = "_listbox_xde9j_1";
+const item = "_item_xde9j_19";
+const itemSelected = "_itemSelected_xde9j_58";
+const itemActive = "_itemActive_xde9j_62";
+const itemDisabled = "_itemDisabled_xde9j_66";
+const group = "_group_xde9j_71";
+const groupLabel = "_groupLabel_xde9j_77";
+const empty = "_empty_xde9j_86";
 const styles = {
   listbox,
   item,
@@ -27,4 +27,3 @@ exports.itemActive = itemActive;
 exports.itemDisabled = itemDisabled;
 exports.itemSelected = itemSelected;
 exports.listbox = listbox;
-//# sourceMappingURL=Listbox.module.scss.cjs.map

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

@@ -1,11 +1,11 @@
-const listbox = "_listbox_1b0sq_1";
-const item = "_item_1b0sq_16";
-const itemSelected = "_itemSelected_1b0sq_57";
-const itemActive = "_itemActive_1b0sq_61";
-const itemDisabled = "_itemDisabled_1b0sq_65";
-const group = "_group_1b0sq_70";
-const groupLabel = "_groupLabel_1b0sq_76";
-const empty = "_empty_1b0sq_83";
+const listbox = "_listbox_xde9j_1";
+const item = "_item_xde9j_19";
+const itemSelected = "_itemSelected_xde9j_58";
+const itemActive = "_itemActive_xde9j_62";
+const itemDisabled = "_itemDisabled_xde9j_66";
+const group = "_group_xde9j_71";
+const groupLabel = "_groupLabel_xde9j_77";
+const empty = "_empty_xde9j_86";
 const styles = {
   listbox,
   item,
@@ -27,4 +27,3 @@ export {
   itemSelected,
   listbox
 };
-//# sourceMappingURL=Listbox.module.scss.js.map