@clicktap/ui 2.0.10 → 2.1.0

package/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import { ButtonVariant } from './Button.types';
-export declare function resolveVariant(variant: ButtonVariant): 'solid' | 'outline' | 'ghost';
+export declare function resolveVariant(variant: ButtonVariant): 'solid' | 'outline' | 'ghost' | 'link';
 export declare const Button: import('react').ForwardRefExoticComponent<import('react-aria-components').ButtonProps & {
     isLoading?: boolean;
     variant?: ButtonVariant;

package/components/Button/Button.js

@@ -1 +1 @@
-"use client";import{jsx as f}from"react/jsx-runtime";import{forwardRef as c}from"react";import{Button as p}from"react-aria-components";import{cn as g}from"../../utils/cn.js";function h(e){switch(e){case"primary":return"solid";case"secondary":return"outline";case"tertiary":return"ghost";default:return e}}const w=c(function({className:r,isDisabled:d=!1,isLoading:t=!1,size:s="md",variant:n="solid",...a},b){const o=h(n),u=["flex items-center justify-center","rounded-md border-solid border","font-semibold text-sm","py-2 px-8","transition-all duration-200 ease-in-out","focus:outline-2 focus:outline focus:outline-border-subtle pressed:scale-95",s==="sm"&&"h-8",s==="md"&&"h-10",s==="lg"&&"h-12",o==="ghost"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-transparent hover:border-transparent focus:border-transparent disabled:border-transparent","text-fg disabled:text-fg-subtle",t&&"disabled:text-fg"],o==="outline"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-border hover:border-border-emphasis focus:border-border-emphasis disabled:border-border-subtle","text-fg disabled:text-fg-muted",t&&["disabled:border-border","disabled:text-fg"]],o==="solid"&&["bg-surface-inverse-hover hover:bg-surface-inverse focus:bg-surface-inverse disabled:bg-surface-inverse","border-surface-inverse-hover hover:border-fg focus:border-fg disabled:border-border-subtle","text-white disabled:text-fg-subtle",t&&["disabled:border-fg","disabled:text-white"]]];return f(p,{ref:b,type:"button",isDisabled:d,className:i=>{const l=typeof r=="function"?r(i):r;return g(u,l)},...a})});export{w as Button,w as default,h as resolveVariant};
+"use client";import{jsx as f}from"react/jsx-runtime";import{forwardRef as p}from"react";import{Button as c}from"react-aria-components";import{cn as g}from"../../utils/cn.js";function h(t){switch(t){case"primary":return"solid";case"secondary":return"outline";case"tertiary":return"ghost";default:return t}}const w=p(function({className:s,isDisabled:n=!1,isLoading:e=!1,size:o="md",variant:a="solid",...d},b){const r=h(a),u=["flex items-center justify-center","rounded-md border-solid border","font-semibold text-sm","py-2 px-8","transition-all duration-200 ease-in-out","focus:outline-2 focus:outline focus:outline-border-subtle pressed:scale-95",o==="sm"&&"h-8",o==="md"&&"h-10",o==="lg"&&"h-12",r==="ghost"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-transparent hover:border-transparent focus:border-transparent disabled:border-transparent","text-fg disabled:text-fg-subtle",e&&"disabled:text-fg"],r==="link"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-transparent hover:border-transparent focus:border-transparent disabled:border-transparent","inline-flex h-auto p-0 rounded-none","underline underline-offset-2","text-fg disabled:text-fg-muted hover:opacity-70",e&&"disabled:text-fg"],r==="outline"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-border hover:border-border-emphasis focus:border-border-emphasis disabled:border-border-subtle","text-fg disabled:text-fg-muted",e&&["disabled:border-border","disabled:text-fg"]],r==="solid"&&["bg-surface-inverse-hover hover:bg-surface-inverse focus:bg-surface-inverse disabled:bg-surface-inverse","border-surface-inverse-hover hover:border-fg focus:border-fg disabled:border-border-subtle","text-white disabled:text-fg-subtle",e&&["disabled:border-fg","disabled:text-white"]]];return f(c,{ref:b,type:"button",isDisabled:n,className:i=>{const l=typeof s=="function"?s(i):s;return g(u,l)},...d})});export{w as Button,w as default,h as resolveVariant};

package/components/Button/Button.types.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
-export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'primary' | 'secondary' | 'tertiary';
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'primary' | 'secondary' | 'tertiary';
 export type ButtonProps = AriaButtonProps & {
     isLoading?: boolean;
     variant?: ButtonVariant;

package/components/LinkAsButton/LinkAsButton.js

@@ -1 +1 @@
-"use client";import{jsx as u}from"react/jsx-runtime";import{forwardRef as p}from"react";import{cn as c}from"../../utils/cn.js";import{Link as m}from"../Link/Link.js";import"../Link/LinkContext.js";import{resolveVariant as g}from"../Button/Button.js";import"react-aria-components";import"../Link/utils.js";const h=p(({className:e,isDisabled:o,isLoading:r=!1,size:t="md",variant:d="solid",children:a,...b},n)=>{const s=g(d),i=["flex items-center justify-center","rounded-md border-solid border","font-semibold text-sm","py-2 px-8","transition-all duration-200 ease-in-out","focus:outline-2 focus:outline focus:outline-border-subtle pressed:scale-95",t==="sm"&&"h-8",t==="md"&&"h-10",t==="lg"&&"h-12",s==="ghost"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-transparent hover:border-transparent focus:border-transparent disabled:border-transparent","text-fg disabled:text-fg-subtle",r&&"disabled:text-fg"],s==="outline"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-border hover:border-border-emphasis focus:border-border-emphasis disabled:border-border-subtle","text-fg disabled:text-fg-muted",r&&["disabled:border-border","disabled:text-fg"]],s==="solid"&&["bg-surface-inverse-hover hover:bg-surface-inverse focus:bg-surface-inverse disabled:bg-surface-inverse","border-surface-inverse-hover hover:border-fg focus:border-fg disabled:border-border-subtle","text-white disabled:text-fg-subtle hover:text-white",r&&["disabled:border-fg","disabled:text-white"]]];return u(m,{ref:n,isDisabled:o,className:l=>{const f=typeof e=="function"?e(l):e;return c(i,f)},...b,children:a})});h.displayName="LinkAsButton";export{h as LinkAsButton,h as default};
+"use client";import{jsx as u}from"react/jsx-runtime";import{forwardRef as p}from"react";import{cn as g}from"../../utils/cn.js";import{Link as c}from"../Link/Link.js";import"../Link/LinkContext.js";import{resolveVariant as m}from"../Button/Button.js";import"react-aria-components";import"../Link/utils.js";const h=p(({className:t,isDisabled:o,isLoading:e=!1,size:s="md",variant:d="solid",children:n,...a},b)=>{const r=m(d),i=["flex items-center justify-center","rounded-md border-solid border","font-semibold text-sm","py-2 px-8","transition-all duration-200 ease-in-out","focus:outline-2 focus:outline focus:outline-border-subtle pressed:scale-95",s==="sm"&&"h-8",s==="md"&&"h-10",s==="lg"&&"h-12",r==="ghost"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-transparent hover:border-transparent focus:border-transparent disabled:border-transparent","text-fg disabled:text-fg-subtle",e&&"disabled:text-fg"],r==="link"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-transparent hover:border-transparent focus:border-transparent disabled:border-transparent","inline-flex h-auto p-0 rounded-none","underline underline-offset-2","text-fg disabled:text-fg-muted hover:opacity-70",e&&"disabled:text-fg"],r==="outline"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-border hover:border-border-emphasis focus:border-border-emphasis disabled:border-border-subtle","text-fg disabled:text-fg-muted",e&&["disabled:border-border","disabled:text-fg"]],r==="solid"&&["bg-surface-inverse-hover hover:bg-surface-inverse focus:bg-surface-inverse disabled:bg-surface-inverse","border-surface-inverse-hover hover:border-fg focus:border-fg disabled:border-border-subtle","text-white disabled:text-fg-subtle hover:text-white",e&&["disabled:border-fg","disabled:text-white"]]];return u(c,{ref:b,isDisabled:o,className:l=>{const f=typeof t=="function"?t(l):t;return g(i,f)},...a,children:n})});h.displayName="LinkAsButton";export{h as LinkAsButton,h as default};

package/docs/migrations/2026/09/ui-2026-09-01-button-link-variant.md

@@ -0,0 +1,116 @@
+# IMPROVEMENT: `Button` and `LinkAsButton` gain a `link` variant
+
+**Date:** 2026-09-01
+**Package:** `@clicktap/ui`
+**Affects:** `src/components/Button/Button.tsx`, `Button.types.ts`, `src/components/LinkAsButton/LinkAsButton.tsx`
+**Classification:** IMPROVEMENT
+**Breaking:** No — additive. `ButtonVariant` widens, which only affects code that
+enumerates it exhaustively; see Consumer Impact.
+**Ticket:** CTAP-1569
+
+## Problem
+
+Some actions are secondary enough that a button is the wrong weight — "set as
+default" sitting next to a card's edit/delete icons, for instance. Until now the
+only way to render one was to take an `outline` button and argue it back into a
+link at the call site:
+
+```tsx
+<Button
+  variant="outline"
+  className={cn(
+    '!text-xs rounded-lg text-xs uppercase underline text-slate-800 p-0 data-[hovered]:text-slate-800',
+    'border-0 outline-0 hover:border-0 focus:border-0 hover:outline-0 focus:outline-0',
+  )}
+>
+```
+
+Nine utilities, six of which exist only to cancel the variant that was just
+asked for. ⚠️ That shape does not survive contact with a second call site: the
+account area had this on My Addresses and a plain `variant="outline"` button on
+both saved-card screens, so one action rendered three different ways. Nothing
+flags the drift — every copy compiles and lints clean.
+
+## What changed
+
+`ButtonVariant` gains `'link'`, and both `Button` and `LinkAsButton` style it:
+
+```tsx
+<Button variant="link" onPress={setAsDefault}>Set as default</Button>
+```
+
+It keeps the element (`<button>` for `Button`, `<a>` for `LinkAsButton`) and
+sheds the button box:
+
+| | `outline` | `link` |
+|---|---|---|
+| padding | `py-2 px-8` | `p-0` |
+| height | `h-8` / `h-10` / `h-12` by `size` | `h-auto` — **`size` has no effect** |
+| border | `border-border` | `border-transparent` |
+| radius | `rounded-md` | `rounded-none` |
+| decoration | none | `underline underline-offset-2` |
+| hover | border darkens | `opacity-70` |
+
+Two consequences worth knowing:
+
+- **`size` is inert on `link`.** Its height comes from its own line box, so all
+  three sizes render identically. Change the inherited font size instead.
+- **Hover is `opacity-70`, not a color change.** That is deliberate: a call site
+  that overrides the text color (`text-slate-800`) keeps a working hover without
+  also having to override a `hover:text-*` it did not ask for. This is what the
+  old workaround's `data-[hovered]:text-slate-800` was for.
+
+`link` has no semantic alias. `primary`/`secondary`/`tertiary` still map to
+`solid`/`outline`/`ghost`; there is no fourth alias, because a link is a
+presentational choice rather than a rung on the emphasis ladder.
+
+## Consumer Impact
+
+**No action needed to upgrade.** Existing variants are untouched — the spec pins
+that `outline` still renders `px-8 h-8 border-border` and no underline.
+
+**If you have a hand-rolled link-button**, replace it. The old workaround still
+works, but it fights the base layer through `cn`/tailwind-merge and will keep
+drifting between copies:
+
+```tsx
+// BEFORE
+<Button variant="outline" className={cn(
+  '!text-xs rounded-lg text-xs uppercase underline text-slate-800 p-0 data-[hovered]:text-slate-800',
+  'border-0 outline-0 hover:border-0 focus:border-0 hover:outline-0 focus:outline-0',
+)}>
+
+// AFTER
+<Button variant="link" className="text-xs uppercase text-slate-800">
+```
+
+⚠️ Drop `!text-xs` when you migrate. The `!important` was there to beat the base
+`text-sm` through specificity; `cn` resolves that by merge order now, and a
+lingering `!important` will beat your own later overrides too.
+
+⚠️ **If you enumerate `ButtonVariant` exhaustively** — a `switch` with no
+`default`, a `Record<ButtonVariant, …>`, a radio-control options array — the
+widened union is a compile error (`Record`) or a silent gap (`switch`). Both are
+one-line fixes; `resolveVariant`'s return type widened to
+`'solid' | 'outline' | 'ghost' | 'link'` for the same reason, so a consumer
+narrowing on its result needs the new arm.
+
+## Verification
+
+`src/components/Button/Button.spec.tsx` — 7 tests.
+
+**Mutation-tested.** Deleting the `link` blocks from both components fails 4 of
+7; the 3 that survive are correct to survive (it renders a `<button>`, the other
+variants stay boxed, a call-site class still wins — none of those depend on the
+new variant existing).
+
+The assertions are deliberately **cancellation** assertions: they check `px-8`,
+`py-2`, `rounded-md` and `border-border` are ABSENT from the final className, not
+merely that `underline` and `p-0` are present. ⚠️ A positive-only test passes
+against a variant that appends link classes while leaving the button box behind
+— which renders a padded, bordered, underlined box. That is the wrong answer this
+suite exists to catch.
+
+⚠️ **Not visually verified against a brand theme.** The tests assert which
+classes survive `cn` in jsdom. Whether the result reads as a link on a given
+storefront's type scale is not something they can show.

package/docs/migrations/index.json

@@ -1,4 +1,14 @@
 [
+  {
+    "path": "2026/09/ui-2026-09-01-button-link-variant.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-09-01",
+    "title": "IMPROVEMENT: `Button` and `LinkAsButton` gain a `link` variant",
+    "classification": "IMPROVEMENT",
+    "breaking": "No — additive. `ButtonVariant` widens, which only affects code that",
+    "affects": "`src/components/Button/Button.tsx`, `Button.types.ts`, `src/components/LinkAsButton/LinkAsButton.tsx`"
+  },
   {
     "path": "2026/08/ui-2026-08-26-badge-classnames-badge-targets-the-pill.md",
     "module": "libs/frontend-modules/ui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "2.0.10",
+  "version": "2.1.0",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",