@usefragments/ui 1.0.0

package/dist/components/Input/index.cjs

@@ -0,0 +1,209 @@
+"use strict";
+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 index = require("../ComponentDefaults/index.cjs");
+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" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function parseShortcut(shortcut) {
+  let meta = false, shift = false, alt = false;
+  let remaining = shortcut;
+  if (remaining.includes("⌘")) {
+    meta = true;
+    remaining = remaining.replace("⌘", "");
+  }
+  if (remaining.includes("⇧")) {
+    shift = true;
+    remaining = remaining.replace("⇧", "");
+  }
+  if (remaining.includes("⌥")) {
+    alt = true;
+    remaining = remaining.replace("⌥", "");
+  }
+  remaining = remaining.trim();
+  if (!remaining) return null;
+  return { meta, shift, alt, key: remaining };
+}
+const InputRoot = React__namespace.forwardRef(function Input2({
+  value,
+  defaultValue,
+  placeholder,
+  type = "text",
+  size: sizeProp,
+  disabled = false,
+  error = false,
+  success = false,
+  required = false,
+  label,
+  helperText,
+  startAdornment,
+  endAdornment,
+  shortcut,
+  shortcutBehavior = "display-only",
+  onChange,
+  onValueChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  rootProps,
+  className,
+  style,
+  inputStyle,
+  inputClassName,
+  withFieldWrapper = true,
+  ...inputProps
+}, ref) {
+  const size = index.useResolvedControlSize(sizeProp);
+  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) => {
+      internalRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  React__namespace.useEffect(() => {
+    if (!shortcut) return;
+    if (shortcutBehavior !== "focus-input") return;
+    const parsed = parseShortcut(shortcut);
+    if (!parsed) return;
+    const handler = (e) => {
+      var _a;
+      if (parsed.meta && !(e.metaKey || e.ctrlKey)) return;
+      if (parsed.shift && !e.shiftKey) return;
+      if (parsed.alt && !e.altKey) return;
+      if (e.key.toLowerCase() !== parsed.key.toLowerCase()) return;
+      e.preventDefault();
+      (_a = internalRef.current) == null ? void 0 : _a.focus();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [shortcut, shortcutBehavior]);
+  const hasAdornment = !!(startAdornment || endAdornment);
+  const inputClasses = [
+    Input_module.default.input,
+    Input_module.default[size],
+    error && Input_module.default.error,
+    success && Input_module.default.success,
+    shortcut && Input_module.default.hasShortcut,
+    inputClassName
+  ].filter(Boolean).join(" ");
+  const helperClasses = [
+    Input_module.default.helper,
+    error && Input_module.default.helperError,
+    success && Input_module.default.helperSuccess
+  ].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: (e) => onBlur == null ? void 0 : onBlur(e),
+    onFocus: (e) => onFocus == null ? void 0 : onFocus(e),
+    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, { ...sharedInputProps, render: /* @__PURE__ */ jsxRuntime.jsx("input", {}) });
+  const fieldlessInputElement = /* @__PURE__ */ jsxRuntime.jsx("input", { ...sharedInputProps, "aria-invalid": error || void 0 });
+  const rawInput = withFieldWrapper ? inputElement : fieldlessInputElement;
+  const content = hasAdornment || shortcut ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [Input_module.default.inputContainer, hasAdornment && Input_module.default.hasAdornment].filter(Boolean).join(" "),
+      children: [
+        startAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Input_module.default.adornment, children: startAdornment }),
+        rawInput,
+        endAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Input_module.default.adornment, children: endAdornment }),
+        shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: Input_module.default.shortcut, "aria-hidden": "true", children: shortcut })
+      ]
+    }
+  ) : rawInput;
+  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,
+      "data-success": success || void 0,
+      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;

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

@@ -0,0 +1,64 @@
+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.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "onBlur" | "onFocus" | "onKeyDown" | "className" | "style"> {
+    /** Controlled input value */
+    value?: string;
+    /** Default value for uncontrolled usage */
+    defaultValue?: string;
+    /** Placeholder text shown when empty */
+    placeholder?: string;
+    /** HTML input type */
+    type?: "text" | "email" | "password" | "number" | "tel" | "url";
+    /** Input size.
+     * @default "md"
+     * @see https://usefragments.com/components/input#sizes */
+    size?: "sm" | "md" | "lg";
+    /** Whether the input is non-interactive */
+    disabled?: boolean;
+    /** Show error styling */
+    error?: boolean;
+    /** Show success styling */
+    success?: boolean;
+    /** Visible label text */
+    label?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Helper text shown below the input */
+    helperText?: string;
+    /** Content rendered before the input (e.g., icon or prefix text) */
+    startAdornment?: React.ReactNode;
+    /** Content rendered after the input (e.g., icon or suffix text) */
+    endAdornment?: React.ReactNode;
+    /** 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?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    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;
+    /** 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>>;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/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,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,mEAAmE;IACnE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,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,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,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;AAqOD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Input/index.js

@@ -0,0 +1,192 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Field } from "@base-ui/react/field";
+import { useResolvedControlSize } from "../ComponentDefaults/index.js";
+import { mergeAriaIds } from "../../utils/aria.js";
+import styles from "./Input.module.scss.js";
+function parseShortcut(shortcut) {
+  let meta = false, shift = false, alt = false;
+  let remaining = shortcut;
+  if (remaining.includes("⌘")) {
+    meta = true;
+    remaining = remaining.replace("⌘", "");
+  }
+  if (remaining.includes("⇧")) {
+    shift = true;
+    remaining = remaining.replace("⇧", "");
+  }
+  if (remaining.includes("⌥")) {
+    alt = true;
+    remaining = remaining.replace("⌥", "");
+  }
+  remaining = remaining.trim();
+  if (!remaining) return null;
+  return { meta, shift, alt, key: remaining };
+}
+const InputRoot = React.forwardRef(function Input2({
+  value,
+  defaultValue,
+  placeholder,
+  type = "text",
+  size: sizeProp,
+  disabled = false,
+  error = false,
+  success = false,
+  required = false,
+  label,
+  helperText,
+  startAdornment,
+  endAdornment,
+  shortcut,
+  shortcutBehavior = "display-only",
+  onChange,
+  onValueChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  rootProps,
+  className,
+  style,
+  inputStyle,
+  inputClassName,
+  withFieldWrapper = true,
+  ...inputProps
+}, ref) {
+  const size = useResolvedControlSize(sizeProp);
+  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) => {
+      internalRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  React.useEffect(() => {
+    if (!shortcut) return;
+    if (shortcutBehavior !== "focus-input") return;
+    const parsed = parseShortcut(shortcut);
+    if (!parsed) return;
+    const handler = (e) => {
+      var _a;
+      if (parsed.meta && !(e.metaKey || e.ctrlKey)) return;
+      if (parsed.shift && !e.shiftKey) return;
+      if (parsed.alt && !e.altKey) return;
+      if (e.key.toLowerCase() !== parsed.key.toLowerCase()) return;
+      e.preventDefault();
+      (_a = internalRef.current) == null ? void 0 : _a.focus();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [shortcut, shortcutBehavior]);
+  const hasAdornment = !!(startAdornment || endAdornment);
+  const inputClasses = [
+    styles.input,
+    styles[size],
+    error && styles.error,
+    success && styles.success,
+    shortcut && styles.hasShortcut,
+    inputClassName
+  ].filter(Boolean).join(" ");
+  const helperClasses = [
+    styles.helper,
+    error && styles.helperError,
+    success && styles.helperSuccess
+  ].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: (e) => onBlur == null ? void 0 : onBlur(e),
+    onFocus: (e) => onFocus == null ? void 0 : onFocus(e),
+    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, { ...sharedInputProps, render: /* @__PURE__ */ jsx("input", {}) });
+  const fieldlessInputElement = /* @__PURE__ */ jsx("input", { ...sharedInputProps, "aria-invalid": error || void 0 });
+  const rawInput = withFieldWrapper ? inputElement : fieldlessInputElement;
+  const content = hasAdornment || shortcut ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [styles.inputContainer, hasAdornment && styles.hasAdornment].filter(Boolean).join(" "),
+      children: [
+        startAdornment && /* @__PURE__ */ jsx("span", { className: styles.adornment, children: startAdornment }),
+        rawInput,
+        endAdornment && /* @__PURE__ */ jsx("span", { className: styles.adornment, children: endAdornment }),
+        shortcut && /* @__PURE__ */ jsx("kbd", { className: styles.shortcut, "aria-hidden": "true", children: shortcut })
+      ]
+    }
+  ) : rawInput;
+  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,
+      "data-success": success || void 0,
+      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, {
+  Root: InputRoot
+});
+export {
+  Input
+};

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const link = "_link_1ibv0_1";
+const subtle = "_subtle_1ibv0_34";
+const muted = "_muted_1ibv0_41";
+const underlineAlways = "_underline-always_1ibv0_48";
+const underlineHover = "_underline-hover_1ibv0_53";
+const underlineNone = "_underline-none_1ibv0_61";
+const styles = {
+  link,
+  "default": "_default_1ibv0_27",
+  subtle,
+  muted,
+  "underline-always": "_underline-always_1ibv0_48",
+  underlineAlways,
+  "underline-hover": "_underline-hover_1ibv0_53",
+  underlineHover,
+  "underline-none": "_underline-none_1ibv0_61",
+  underlineNone
+};
+exports.default = styles;
+exports.link = link;
+exports.muted = muted;
+exports.subtle = subtle;
+exports.underlineAlways = underlineAlways;
+exports.underlineHover = underlineHover;
+exports.underlineNone = underlineNone;

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

@@ -0,0 +1,27 @@
+const link = "_link_1ibv0_1";
+const subtle = "_subtle_1ibv0_34";
+const muted = "_muted_1ibv0_41";
+const underlineAlways = "_underline-always_1ibv0_48";
+const underlineHover = "_underline-hover_1ibv0_53";
+const underlineNone = "_underline-none_1ibv0_61";
+const styles = {
+  link,
+  "default": "_default_1ibv0_27",
+  subtle,
+  muted,
+  "underline-always": "_underline-always_1ibv0_48",
+  underlineAlways,
+  "underline-hover": "_underline-hover_1ibv0_53",
+  underlineHover,
+  "underline-none": "_underline-none_1ibv0_61",
+  underlineNone
+};
+export {
+  styles as default,
+  link,
+  muted,
+  subtle,
+  underlineAlways,
+  underlineHover,
+  underlineNone
+};

package/dist/components/Link/index.cjs

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Link_module = require("./Link.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = 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,
+    variant = "default",
+    underline = "hover",
+    external = false,
+    asChild = false,
+    className,
+    style,
+    target,
+    rel,
+    ...props
+  }, ref) {
+    const classes = [
+      Link_module.default.link,
+      Link_module.default[variant],
+      Link_module.default[`underline-${underline}`],
+      className
+    ].filter(Boolean).join(" ");
+    const externalProps = external ? {
+      target: target || "_blank",
+      rel: rel || "noopener noreferrer"
+    } : { target, rel };
+    if (asChild && React__namespace.isValidElement(children)) {
+      const childProps = children.props;
+      const mergedProps = {
+        ref,
+        className: childProps.className ? `${classes} ${childProps.className}` : classes,
+        style: { ...style, ...childProps.style },
+        ...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 });
+  }
+);
+const Link = Object.assign(LinkRoot, {
+  Root: LinkRoot
+});
+exports.Link = Link;

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: React.ReactNode;
+    /** Visual variant */
+    variant?: 'default' | 'subtle' | 'muted';
+    /** Underline style */
+    underline?: 'always' | 'hover' | 'none';
+    /** Open in new tab (adds rel="noopener noreferrer") */
+    external?: boolean;
+    /**
+     * Render as child element (polymorphic). When true, clones the single child
+     * and merges link props onto it. Useful for rendering as Next.js Link, etc.
+     */
+    asChild?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>> & {
+    Root: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"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"}