@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/components/core/Icon/data/paymentMethods.js

@@ -0,0 +1,169 @@
+const paymentMethods = {
+    visa: {
+        viewBox: '0 0 120 80',
+        label: 'Visa',
+        shapes: [
+            { type: 'rect', width: 120, height: 80, rx: 4, fill: 'white' },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M86.6666 44.9375L90.3239 35.0625L92.3809 44.9375H86.6666ZM100.952 52.8375L95.8086 27.1625H88.7383C86.3525 27.1625 85.7723 29.0759 85.7723 29.0759L76.1904 52.8375H82.8868L84.2269 49.0244H92.3947L93.1479 52.8375H100.952Z',
+                fill: '#1434CB',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M77.1866 33.5711L78.0952 28.244C78.0952 28.244 75.2896 27.1625 72.3648 27.1625C69.2031 27.1625 61.6955 28.5638 61.6955 35.3738C61.6955 41.7825 70.5071 41.8621 70.5071 45.2266C70.5071 48.5912 62.6034 47.9901 59.9955 45.8676L59.0476 51.4362C59.0476 51.4362 61.8919 52.8375 66.2397 52.8375C70.5869 52.8375 77.1467 50.5544 77.1467 44.3455C77.1467 37.8964 68.2552 37.296 68.2552 34.4921C68.2552 31.6882 74.4602 32.0484 77.1866 33.5711Z',
+                fill: '#1434CB',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M54.6517 52.8375H47.6191L52.0144 27.1625H59.0477L54.6517 52.8375Z',
+                fill: '#1434CB',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M42.3113 27.1625L35.9217 44.8213L35.1663 41.0185L35.167 41.0199L32.9114 29.4749C32.9114 29.4749 32.6394 27.1625 29.7324 27.1625H19.1709L19.0476 27.5966C19.0476 27.5966 22.2782 28.2669 26.057 30.5326L31.8793 52.8375H38.8617L49.5238 27.1625H42.3113Z',
+                fill: '#1434CB',
+            },
+        ],
+    },
+    applepay: {
+        viewBox: '0 0 120 80',
+        label: 'Apple Pay',
+        shapes: [
+            { type: 'rect', x: 1.375, y: 1.375, width: 117.25, height: 77.25, rx: 6.625, fill: 'white' },
+            {
+                type: 'path',
+                d: 'M55.5533 22.9046C61.103 22.9046 64.9675 26.7301 64.9675 32.2997C64.9675 37.8892 61.0235 41.7345 55.4142 41.7345H49.2696V51.5062H44.8301V22.9046L55.5533 22.9046ZM49.2695 38.0081H54.3635C58.2288 38.0081 60.4286 35.9271 60.4286 32.3196C60.4286 28.7124 58.2288 26.6509 54.3834 26.6509H49.2695V38.0081Z',
+                fill: 'black',
+            },
+            {
+                type: 'path',
+                d: 'M66.1274 45.5799C66.1274 41.9326 68.9222 39.6929 73.8778 39.4154L79.5858 39.0786V37.4732C79.5858 35.1541 78.0198 33.7666 75.404 33.7666C72.9258 33.7666 71.3797 34.9556 71.0035 36.8191H66.9601C67.1979 33.0528 70.4086 30.278 75.5623 30.278C80.6165 30.278 83.8471 32.9538 83.8471 37.136V51.5062H79.7441V48.0772H79.6454C78.4365 50.3963 75.8001 51.8629 73.065 51.8629C68.9818 51.8629 66.1274 49.3258 66.1274 45.5799ZM79.5858 43.697V42.0518L74.452 42.3688C71.8951 42.5473 70.4484 43.6771 70.4484 45.461C70.4484 47.2842 71.9547 48.4736 74.254 48.4736C77.2468 48.4736 79.5858 46.4122 79.5858 43.697Z',
+                fill: 'black',
+            },
+            {
+                type: 'path',
+                d: 'M87.7206 59.177V55.7082C88.0372 55.7874 88.7506 55.7874 89.1077 55.7874C91.0896 55.7874 92.1601 54.9551 92.8139 52.8145C92.8139 52.7747 93.1908 51.5459 93.1908 51.5261L85.6592 30.6546H90.2967L95.5696 47.6214H95.6484L100.921 30.6546H105.44L97.6303 52.5962C95.8472 57.6508 93.7857 59.276 89.4648 59.276C89.1077 59.276 88.0372 59.2363 87.7206 59.177Z',
+                fill: 'black',
+            },
+            {
+                type: 'path',
+                d: 'M31.7358 25.6955C32.8058 24.3572 33.5319 22.5603 33.3404 20.724C31.7741 20.8019 29.8627 21.7573 28.7562 23.0967C27.7626 24.2436 26.8832 26.1158 27.1124 27.8751C28.8707 28.0276 30.6273 26.9962 31.7358 25.6955Z',
+                fill: 'black',
+            },
+            {
+                type: 'path',
+                d: 'M33.3204 28.2186C30.7671 28.0665 28.5961 29.6678 27.3767 29.6678C26.1567 29.6678 24.2894 28.2952 22.2698 28.3322C19.6412 28.3708 17.2022 29.8571 15.8682 32.2209C13.1246 36.9497 15.1442 43.9642 17.8122 47.8155C19.1079 49.7209 20.6694 51.8189 22.7269 51.7435C24.6709 51.6672 25.4328 50.4847 27.7958 50.4847C30.1571 50.4847 30.8435 51.7435 32.9013 51.7054C35.0353 51.6672 36.3695 49.799 37.6651 47.8918C39.1515 45.7198 39.7599 43.6225 39.7982 43.5073C39.7599 43.4692 35.6832 41.9053 35.6454 37.2158C35.6069 33.2892 38.8461 31.4215 38.9985 31.3057C37.1694 28.6003 34.3113 28.2952 33.3204 28.2186Z',
+                fill: 'black',
+            },
+            { type: 'rect', x: 1.375, y: 1.375, width: 117.25, height: 77.25, rx: 6.625, fill: 'none', stroke: 'black', strokeWidth: 2.75 },
+        ],
+    },
+    paypal: {
+        viewBox: '0 0 120 80',
+        label: 'PayPal',
+        shapes: [
+            { type: 'rect', width: 120, height: 80, rx: 4, fill: 'white' },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M76.2315 34.67C75.8559 37.1343 73.9727 37.1343 72.1505 37.1343H71.1141L71.8414 32.5332C71.8848 32.2553 72.1248 32.0508 72.4065 32.0508H72.8822C74.1224 32.0508 75.2934 32.0508 75.8975 32.7563C76.2589 33.1785 76.3679 33.8052 76.2315 34.67ZM75.4387 28.2401H68.5683C68.0979 28.2401 67.6984 28.5818 67.6249 29.0456L64.847 46.6499C64.7921 46.9969 65.0613 47.3112 65.4121 47.3112H68.9377C69.2663 47.3112 69.5462 47.0722 69.5976 46.7482L70.386 41.7567C70.4586 41.2929 70.859 40.9512 71.3285 40.9512H73.5023C78.0279 40.9512 80.6402 38.7631 81.3223 34.4248C81.6297 32.5288 81.3347 31.0382 80.4462 29.9945C79.4692 28.8474 77.7374 28.2401 75.4387 28.2401Z',
+                fill: '#009CDE',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M27.2281 34.67C26.8525 37.1343 24.9693 37.1343 23.1471 37.1343H22.1107L22.838 32.5332C22.8814 32.2553 23.1214 32.0508 23.4031 32.0508H23.8788C25.119 32.0508 26.29 32.0508 26.8941 32.7563C27.2556 33.1785 27.3645 33.8052 27.2281 34.67ZM26.4353 28.2401H19.5649C19.0945 28.2401 18.695 28.5818 18.6215 29.0456L15.8436 46.6499C15.7887 46.9969 16.0571 47.3112 16.4087 47.3112H19.6898C20.1593 47.3112 20.5588 46.9695 20.6323 46.5065L21.3826 41.7567C21.4552 41.2929 21.8556 40.9512 22.3251 40.9512H24.4989C29.0245 40.9512 31.6368 38.7631 32.3189 34.4248C32.6263 32.5288 32.3313 31.0382 31.4428 29.9945C30.4658 28.8474 28.734 28.2401 26.4353 28.2401Z',
+                fill: '#003087',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M42.3858 40.9899C42.0678 42.8683 40.5761 44.1296 38.6724 44.1296C37.7184 44.1296 36.954 43.8225 36.4632 43.2418C35.9769 42.6665 35.7935 41.8459 35.9477 40.9333C36.2435 39.0709 37.7601 37.7697 39.6344 37.7697C40.569 37.7697 41.3272 38.0795 41.8277 38.6655C42.3317 39.2559 42.5302 40.0809 42.3858 40.9899ZM46.9708 34.591H43.6808C43.3992 34.591 43.1591 34.7955 43.1148 35.0743L42.9704 35.9931L42.741 35.6603C42.0279 34.6273 40.4396 34.2812 38.854 34.2812C35.2195 34.2812 32.1147 37.0341 31.5106 40.8943C31.1961 42.8205 31.6426 44.6607 32.7357 45.9451C33.7393 47.1251 35.1717 47.6163 36.8787 47.6163C39.8089 47.6163 41.4335 45.7362 41.4335 45.7362L41.2865 46.6497C41.2316 46.9967 41.5 47.311 41.8525 47.311H44.8147C45.2851 47.311 45.6846 46.9702 45.7581 46.5063L47.5368 35.2523C47.5917 34.9053 47.3224 34.591 46.9708 34.591Z',
+                fill: '#003087',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M91.3887 40.9899C91.0707 42.8683 89.579 44.1296 87.6754 44.1296C86.7213 44.1296 85.9569 43.8225 85.4661 43.2418C84.9789 42.6665 84.7965 41.8459 84.9506 40.9333C85.2465 39.0709 86.763 37.7697 88.6374 37.7697C89.5719 37.7697 90.3302 38.0795 90.8306 38.6655C91.3347 39.2559 91.5331 40.0809 91.3887 40.9899ZM95.9737 34.591H92.6838C92.4021 34.591 92.162 34.7955 92.1177 35.0743L91.9734 35.9931L91.743 35.6603C91.0308 34.6273 89.4426 34.2812 87.857 34.2812C84.2225 34.2812 81.1177 37.0341 80.5135 40.8943C80.1991 42.8205 80.6455 44.6607 81.7386 45.9451C82.7423 47.1251 84.1746 47.6163 85.8816 47.6163C88.8119 47.6163 90.4365 45.7362 90.4365 45.7362L90.2894 46.6497C90.2345 46.9967 90.5029 47.311 90.8555 47.311H93.8176C94.288 47.311 94.6875 46.9702 94.761 46.5063L96.5397 35.2523C96.5947 34.9053 96.3254 34.591 95.9737 34.591Z',
+                fill: '#009CDE',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M64.4927 34.5911H61.186C60.8697 34.5911 60.5739 34.7478 60.3967 35.0098L55.8347 41.7229L53.9019 35.2718C53.7805 34.8682 53.4085 34.5911 52.9868 34.5911H49.7368C49.3444 34.5911 49.068 34.977 49.1947 35.3479L52.8354 46.0284L49.4108 50.857C49.1424 51.2359 49.4135 51.7599 49.8785 51.7599H53.1817C53.4944 51.7599 53.7876 51.6068 53.9665 51.3501L64.9631 35.4896C65.2262 35.1098 64.9551 34.5911 64.4927 34.5911Z',
+                fill: '#003087',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M99.8516 28.7239L97.0321 46.6504C96.9771 46.9973 97.2455 47.3116 97.5972 47.3116H100.434C100.903 47.3116 101.303 46.9699 101.376 46.5061L104.157 28.9018C104.212 28.5548 103.943 28.2406 103.591 28.2406H100.418C100.135 28.2406 99.895 28.445 99.8516 28.7239Z',
+                fill: '#009CDE',
+            },
+        ],
+    },
+    amex: {
+        viewBox: '0 0 120 80',
+        label: 'American Express',
+        shapes: [
+            { type: 'rect', x: 40, width: 80, height: 80, rx: 4, fill: 'white' },
+            {
+                type: 'path',
+                d: 'm120 76v-8.6763h-9.651l-4.969-5.4944-4.994 5.4944h-31.822v-25.607h-10.27l12.74-28.831h12.286l4.3857 9.877v-9.877h15.208l2.64 7.4429 2.658-7.4429h11.789v-8.8854c0-2.2091-1.7909-4-4-4h-112c-2.2091 4.4409e-16 -4 1.7909-4 4v72c4.4409e-16 2.2091 1.7909 4 4 4h112c2.2091 0 4-1.7909 4-4zm-8.026-11.882h8.026l-10.616-11.258 10.616-11.13h-7.898l-6.556 7.1645-6.4935-7.1645h-8.0275l10.554 11.194-10.554 11.194h7.8041l6.5889-7.2283 6.556 7.2283zm1.878-11.249 6.148 6.5406v-13.027l-6.148 6.4861zm-35.78 6.0675v-3.4864h12.633v-5.0534h-12.633v-3.4859h12.953l5e-4 -5.1815h-19.062v22.388h19.062l-5e-4 -5.1813h-12.953zm35.883-20.456h6.045v-22.388h-9.403l-5.022 13.944-4.989-13.944h-9.5631v22.388h6.0446v-15.672l5.7575 15.672h5.373l5.757-15.704v15.704zm-29.809 0h6.8765l-9.8824-22.388h-7.8682l-9.8833 22.388h6.7166l1.8554-4.4776h10.298l1.887 4.4776zm-3.9976-9.4992h-6.0773l3.0387-7.3242 3.0386 7.3242z',
+                fill: '#0690FF',
+                fillRule: 'evenodd',
+            },
+        ],
+    },
+    mastercard: {
+        viewBox: '0 0 120 80',
+        label: 'Mastercard',
+        shapes: [
+            { type: 'rect', width: 120, height: 80, rx: 4, fill: 'white' },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M97.5288 54.6562V53.7384H97.289L97.0137 54.3698L96.7378 53.7384H96.498V54.6562H96.6675V53.9637L96.9257 54.5609H97.1011L97.36 53.9624V54.6562H97.5288ZM96.0111 54.6562V53.8947H96.318V53.7397H95.5361V53.8947H95.843V54.6562H96.0111Z',
+                fill: '#F79E1B',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M49.6521 58.595H70.3479V21.4044H49.6521V58.595Z',
+                fill: '#FF5F00',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M98.2675 40.0003C98.2675 53.063 87.6791 63.652 74.6171 63.652C69.0996 63.652 64.0229 61.7624 60 58.5956C65.5011 54.2646 69.0339 47.5448 69.0339 40.0003C69.0339 32.4552 65.5011 25.7354 60 21.4044C64.0229 18.2376 69.0996 16.348 74.6171 16.348C87.6791 16.348 98.2675 26.937 98.2675 40.0003Z',
+                fill: '#F79E1B',
+            },
+            {
+                type: 'path',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+                d: 'M50.966 40.0003C50.966 32.4552 54.4988 25.7354 59.9999 21.4044C55.977 18.2376 50.9003 16.348 45.3828 16.348C32.3208 16.348 21.7324 26.937 21.7324 40.0003C21.7324 53.063 32.3208 63.652 45.3828 63.652C50.9003 63.652 55.977 61.7624 59.9999 58.5956C54.4988 54.2646 50.966 47.5448 50.966 40.0003Z',
+                fill: '#EB001B',
+            },
+        ],
+    },
+};
+
+export { paymentMethods };

package/dist/components/core/Icon/index.d.ts

@@ -0,0 +1,4 @@
+export { Icon } from './Icon';
+export type { IconProps, IconName, IconSize, IconColorMode, IconTheme, IconThemeOverrides, IconDimensions, PaymentIconName, SocialIconName, FileTypeName, } from './Icon.types';
+export { fileTypes } from './data/fileTypes';
+export type { FileTypeData } from './data/fileTypes';

package/dist/components/core/ImagePlaceholder/ImagePlaceholder.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { ImagePlaceholderProps } from "./ImagePlaceholder.types";
+/**
+ * ImagePlaceholder renders a striped placeholder surface used when a
+ * header / banner / cover image has not yet been uploaded.
+ *
+ * @example
+ * ```tsx
+ * <ImagePlaceholder ratio={16 / 9}>
+ *   <Button>Upload cover</Button>
+ * </ImagePlaceholder>
+ * ```
+ */
+export declare const ImagePlaceholder: React.ForwardRefExoticComponent<ImagePlaceholderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ImagePlaceholder/ImagePlaceholder.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { AspectRatio } from '../AspectRatio/AspectRatio.js';
+import { StripePattern } from '../../effects/StripePattern/StripePattern.js';
+import { imagePlaceholderTheme } from './ImagePlaceholder.theme.js';
+
+/**
+ * ImagePlaceholder renders a striped placeholder surface used when a
+ * header / banner / cover image has not yet been uploaded.
+ *
+ * @example
+ * ```tsx
+ * <ImagePlaceholder ratio={16 / 9}>
+ *   <Button>Upload cover</Button>
+ * </ImagePlaceholder>
+ * ```
+ */
+const ImagePlaceholder = React__default.forwardRef((props, ref) => {
+    // `ratio` is intentionally NOT given a destructured default: JSX preserves
+    // an explicit `ratio={undefined}` as an own "ratio" key on `props` (with
+    // value `undefined`), distinct from omitting the prop entirely (no key at
+    // all). That distinction is what lets `ratio={undefined}` genuinely skip
+    // the AspectRatio wrapper, while an omitted `ratio` still falls back to
+    // the documented 16:9 default.
+    const { ratio: ratioProp, bordered = true, rounded = true, pattern, children, className, ...rest } = props;
+    const skipAspectRatio = "ratio" in props && ratioProp === undefined;
+    const ratio = ratioProp === undefined ? 16 / 9 : ratioProp;
+    const surface = (jsxs("div", { ref: ref, className: cn(imagePlaceholderTheme.surfaceStyle, rounded && imagePlaceholderTheme.roundedStyle, bordered && imagePlaceholderTheme.borderedStyle, className), ...rest, children: [jsx(StripePattern, { ...pattern }), children !== undefined && (jsx("div", { className: imagePlaceholderTheme.contentStyle, children: children }))] }));
+    if (skipAspectRatio) {
+        return surface;
+    }
+    return jsx(AspectRatio, { ratio: ratio, children: surface });
+});
+ImagePlaceholder.displayName = "ImagePlaceholder";
+
+export { ImagePlaceholder };

package/dist/components/core/ImagePlaceholder/ImagePlaceholder.theme.d.ts

@@ -0,0 +1,6 @@
+export declare const imagePlaceholderTheme: {
+    surfaceStyle: string;
+    borderedStyle: string;
+    roundedStyle: string;
+    contentStyle: string;
+};

package/dist/components/core/ImagePlaceholder/ImagePlaceholder.theme.js

@@ -0,0 +1,8 @@
+const imagePlaceholderTheme = {
+    surfaceStyle: "relative w-full h-full overflow-hidden bg-[var(--color-surface-sunken)]",
+    borderedStyle: "border border-dashed border-[var(--color-border)]",
+    roundedStyle: "rounded-[var(--card-radius)]",
+    contentStyle: "absolute inset-0 z-10 flex items-center justify-center text-[var(--color-text-muted)]",
+};
+
+export { imagePlaceholderTheme };

package/dist/components/core/ImagePlaceholder/ImagePlaceholder.types.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { StripePatternProps } from "../../effects/StripePattern";
+export interface ImagePlaceholderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Aspect ratio (width / height) for the placeholder surface.
+     * Pass `undefined` to skip the AspectRatio wrapper and let the parent
+     * control the height (e.g. when used inside a fixed-height container).
+     * @default 16/9
+     */
+    ratio?: number;
+    /**
+     * Show the dashed outer border.
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Apply rounded corners.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Override props passed to the inner StripePattern (color, spacing, angle, etc.).
+     */
+    pattern?: Partial<StripePatternProps>;
+    /**
+     * Optional content rendered above the striped surface (e.g. an icon,
+     * caption, or upload button).
+     */
+    children?: React.ReactNode;
+    /** className override on the outer surface (shadcn pattern). */
+    className?: string;
+}

package/dist/components/core/ImagePlaceholder/index.d.ts

@@ -0,0 +1,2 @@
+export { ImagePlaceholder } from "./ImagePlaceholder";
+export type { ImagePlaceholderProps } from "./ImagePlaceholder.types";

package/dist/components/core/Kbd/Kbd.theme.js

@@ -2,10 +2,12 @@
  * Default theme configuration for Kbd component
  */
 const kbdTheme = {
-    baseStyle: 'inline-flex items-center justify-center font-sans font-medium rounded-[calc(var(--radius-base)*0.75)]  bg-neutral-100 border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
+    baseStyle: 'inline-flex items-center justify-center leading-none font-sans font-medium rounded-[calc(var(--radius-base)*0.75)] bg-[var(--color-surface-raised)] border border-[var(--color-border)] text-[var(--color-text-secondary)]',
+    // px tokenised (--kbd-px-*) so a theme can widen keycaps; height/min-width
+    // stay the fixed keycap size (h-5/h-6) and radius derives from --radius-base.
     sizes: {
-        sm: 'text-xs px-1 py-0.5 min-w-[1.25rem]',
-        md: 'text-sm px-1.5 py-0.5 min-w-[1.5rem]',
+        sm: 'text-xs px-[var(--kbd-px-sm)] min-w-5 h-5',
+        md: 'text-xs px-[var(--kbd-px-md)] min-w-6 h-6',
     },
     separatorStyle: 'text-[var(--color-text-muted)] text-xs',
 };

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { LinkProps } from "./Link.types";
-declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export { Link };

package/dist/components/core/Link/Link.js

@@ -1,39 +1,72 @@
-import { jsx } from 'react/jsx-runtime';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
-import { buttonTheme } from '../Button/Button.theme.js';
 import { cn } from '../../../utils/cn.js';
 
-const Link = React__default.forwardRef(({ children, className = "", size = "inherit", disabled = false, href, ...props }, ref) => {
+/**
+ * Link — a simple, text-styled link.
+ *
+ * Polymorphic by behavior: renders an `<a>` when `href` is provided (real
+ * navigation) and a `<button>` otherwise (an action styled as a link). The
+ * link styling is self-contained here; override anything via `className`.
+ */
+// Resting link look (transparent; underline grows in on hover via the motion
+// span below). Kept minimal and open.
+const LINK_BASE = "relative inline-flex items-center justify-center gap-2 bg-transparent border-transparent cursor-pointer " +
+    "transition-colors duration-300 ease-in-out " +
+    "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2";
+// Animated underline — a bottom-anchored line that scales in from the left on
+// hover/focus. `bg-current` inherits each color variant's text tint.
+// `-bottom-px` offsets the line 1px below the text so it doesn't crowd the
+// descenders — the pseudo-underline equivalent of `text-underline-offset`.
+const LINK_UNDERLINE = "pointer-events-none absolute -bottom-px left-0 h-px w-full bg-current";
+const UNDERLINE_VARIANTS = { rest: { scaleX: 0 }, hover: { scaleX: 1 } };
+// Text tint per semantic color — the one thing `color` drives.
+const LINK_COLORS = {
+    mono: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] " +
+        "focus-visible:outline-[var(--color-text-secondary)] dark:text-[var(--color-text-primary)]",
+    primary: "text-[var(--color-primary)]  " +
+        "dark:text-[var(--color-primary)]",
+    success: "text-[var(--color-success-600)] focus-visible:outline-[var(--color-success-600)] " +
+        "dark:text-[var(--color-success-300)]",
+    warning: "text-[var(--color-warning-600)] focus-visible:outline-[var(--color-warning-600)] " +
+        "dark:text-[var(--color-warning-300)]",
+    danger: "text-[var(--color-danger-600)] focus-visible:outline-[var(--color-danger-600)] " +
+        "dark:text-[var(--color-danger-300)]",
+};
+const LINK_DISABLED = "opacity-50 cursor-not-allowed pointer-events-none";
+// Size map — `inherit` matches surrounding text (default).
+const LINK_SIZES = {
+    inherit: "h-fit",
+    sm: "font-semibold p-0 text-sm h-fit",
+    md: "font-semibold p-0 text-sm h-fit",
+};
+const Link = React__default.forwardRef(({ children, className = "", size = "inherit", color = "primary", disabled = false, href, type = "button", 
+// Destructure motion-conflicting props to avoid type issues
+onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
-    const color = "primary"; // Default to primary, can be overridden by className
-    // A link is essentially a button with variant="link"
-    const resolvedVariant = "link";
-    // Memoize theme classes for performance
-    const themeClasses = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f;
-        const sizeClasses = size === "inherit"
-            ? "h-fit"
-            : ((_b = (_a = buttonTheme.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[resolvedVariant]) || "";
-        const colorClasses = ((_d = (_c = buttonTheme.variantColors) === null || _c === void 0 ? void 0 : _c[resolvedVariant]) === null || _d === void 0 ? void 0 : _d[color]) || "";
-        const variantClasses = ((_e = buttonTheme.variantStyles) === null || _e === void 0 ? void 0 : _e[resolvedVariant]) || "";
-        const stateClasses = disabled ? ((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.disabled) || "" : "";
-        return {
-            sizeClasses,
-            colorClasses,
-            variantClasses,
-            stateClasses,
-        };
-    }, [size, color, disabled]);
-    const animationProps = useMemo(() => shouldReduceMotion
+    const classes = cn(LINK_BASE, LINK_COLORS[color], LINK_SIZES[size], disabled && LINK_DISABLED, className);
+    // Drive the underline via variant propagation: the parent toggles the
+    // "hover" label on hover/focus, the underline span reads its own variant.
+    const animationProps = useMemo(() => disabled
         ? {}
         : {
-            whileHover: { scale: 1.02 },
-            whileTap: { scale: 0.98 },
-        }, [shouldReduceMotion]);
-    return (jsx(motion.a, { ref: ref, href: disabled ? undefined : href, className: cn(buttonTheme.baseStyle, themeClasses.colorClasses, themeClasses.variantClasses, themeClasses.sizeClasses, themeClasses.stateClasses, 
-        // Special case for link variant to have an underline
-        "underline underline-offset-4 rounded-none", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined, ...(disabled ? {} : animationProps), ...props, children: children }));
+            initial: "rest",
+            animate: "rest",
+            whileHover: "hover",
+            whileFocus: "hover",
+            ...(shouldReduceMotion ? {} : { whileTap: { scale: 0.98 } }),
+        }, [shouldReduceMotion, disabled]);
+    const underlineTransition = shouldReduceMotion
+        ? { duration: 0 }
+        : { duration: 0.3, ease: "easeInOut" };
+    const underline = !disabled ? (jsx(motion.span, { "aria-hidden": "true", className: LINK_UNDERLINE, style: { originX: 0 }, variants: UNDERLINE_VARIANTS, transition: underlineTransition })) : null;
+    // `href` → real navigational anchor; otherwise an action button.
+    if (href !== undefined) {
+        return (jsxs(motion.a, { ref: ref, href: disabled ? undefined : href, className: classes, "data-size": size, "aria-disabled": disabled || undefined, ...animationProps, ...props, children: [children, underline] }));
+    }
+    return (jsxs(motion.button, { ref: ref, type: type, className: classes, "data-size": size, disabled: disabled, "aria-disabled": disabled || undefined, ...animationProps, ...props, children: [children, underline] }));
 });
 Link.displayName = "Link";
 

package/dist/components/core/Link/Link.types.d.ts

@@ -1,22 +1,39 @@
-import { HTMLMotionProps } from "motion/react";
-import { ButtonSize } from "../Button";
-export type LinkSize = ButtonSize | "inherit";
+import React from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
+export type LinkSize = "sm" | "md" | "inherit";
+/** Link semantic color — the shared SemanticColor set (matches Button/Alert/Badge). */
+export type LinkColor = SemanticColor;
 /**
- * Link component props
- * Extends standard anchor attributes.
+ * Link component props.
+ *
+ * Polymorphic by behavior: pass `href` to render a navigational `<a>`; omit it
+ * (and pass `onClick`) to render a real `<button>` styled as a link. This lets
+ * Link stand in for both hyperlinks and low-emphasis text-action buttons
+ * without the accessibility cost of a clickable anchor that has no href.
  */
-export interface LinkProps extends Omit<HTMLMotionProps<"a">, 'color'> {
+export interface LinkProps extends Omit<React.HTMLAttributes<HTMLElement>, "color"> {
     /**
      * The size of the link.
      * @default "inherit"
      */
     size?: LinkSize;
-    /** The state of the link */
+    /**
+     * Semantic color.
+     * @default "primary"
+     */
+    color?: LinkColor;
+    /** Whether the link is disabled. */
     disabled?: boolean;
     /** Link contents */
     children?: React.ReactNode;
-    /** Additional class names */
+    /** Additional class names (highest-priority style override) */
     className?: string;
-    /** The URL that the hyperlink points to. */
+    /** The URL the hyperlink points to. When set, Link renders an `<a>`. */
     href?: string;
+    /** Anchor target (only meaningful with `href`). */
+    target?: string;
+    /** Anchor rel (only meaningful with `href`). */
+    rel?: string;
+    /** Button type when rendered as a `<button>` (no `href`). @default "button" */
+    type?: "button" | "submit" | "reset";
 }