@cdx-ui/components 0.0.1-beta.43 → 0.0.1-beta.45

package/lib/typescript/components/Button/styles.d.ts

@@ -1,17 +1,17 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const buttonRootVariants: (props?: ({
-    variant?: "strong" | "outline" | "ghost" | null | undefined;
+    variant?: "solid" | "outline" | "ghost" | null | undefined;
     color?: "action" | "danger" | "warning" | "success" | "info" | null | undefined;
     size?: "small" | "default" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const buttonTextVariants: (props?: ({
-    variant?: "strong" | "outline" | "ghost" | null | undefined;
+    variant?: "solid" | "outline" | "ghost" | null | undefined;
     color?: "action" | "danger" | "warning" | "success" | "info" | null | undefined;
     size?: "small" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const buttonSpinnerVariants: (props?: ({
-    variant?: "strong" | "outline" | "ghost" | null | undefined;
+    variant?: "solid" | "outline" | "ghost" | null | undefined;
     color?: "action" | "danger" | "warning" | "success" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const buttonGroupVariants: (props?: ({

package/lib/typescript/components/IconButton/styles.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const iconButtonRootVariants: (props?: ({
-    variant?: "ghost" | "solid" | "tint" | null | undefined;
+    variant?: "solid" | "ghost" | "tint" | null | undefined;
     color?: "action" | "danger" | "neutral" | null | undefined;
     size?: "small" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -8,7 +8,7 @@ export declare const iconButtonGlyphVariants: (props?: ({
     size?: "small" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const iconButtonIconColorVariants: (props?: ({
-    variant?: "ghost" | "solid" | "tint" | null | undefined;
+    variant?: "solid" | "ghost" | "tint" | null | undefined;
     color?: "action" | "danger" | "neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;

package/lib/typescript/components/Link/index.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { Text as RNText, type TextProps, type View } from 'react-native';
+import { Text, View, type TextProps } from 'react-native';
 import { type ILinkProps } from '@cdx-ui/primitives';
 import { type IconProps } from '../Icon';
 export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
@@ -11,7 +11,7 @@ export interface LinkLabelProps extends TextProps {
     className?: string;
     children?: ReactNode;
 }
-declare const LinkLabel: import("react").ForwardRefExoticComponent<LinkLabelProps & import("react").RefAttributes<RNText>>;
+declare const LinkLabel: import("react").ForwardRefExoticComponent<LinkLabelProps & import("react").RefAttributes<Text>>;
 export interface LinkIconProps extends Omit<IconProps, 'children'> {
 }
 declare const LinkIcon: {

package/lib/typescript/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,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAa,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AACpF,OAAO,EAAc,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAUpF,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,4FAQZ,CAAC;AAQH,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,mGAUd,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAErE,QAAA,MAAM,QAAQ;yCAAwC,aAAa;;CAIlE,CAAC;AAQF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAGX,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAuB,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,EAAyC,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE5F,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAQ/C,OAAO,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAUpF,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,4FAQZ,CAAC;AAQH,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,iGAiBd,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAErE,QAAA,MAAM,QAAQ;yCAAwC,aAAa;;CAKlE,CAAC;AAQF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAGX,qBAAqB,CAAC"}

package/lib/typescript/components/Link/styles.d.ts

@@ -1,6 +1,13 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const linkRootVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const linkLabelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const linkIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const linkLabelVariants: (props?: ({
+    visited?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const linkNativeUnderlineVariants: (props?: ({
+    visited?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const linkIconVariants: (props?: ({
+    visited?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type LinkVariantProps = VariantProps<typeof linkLabelVariants>;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Link/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,gBAAgB,oFAK3B,CAAC;AAEH,eAAO,MAAM,iBAAiB,oFAI5B,CAAC;AAEH,eAAO,MAAM,gBAAgB,oFAAuC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oFAc3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;8EAe7B,CAAC;AAEF,eAAO,MAAM,2BAA2B;;8EAQtC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;8EAW5B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/lib/typescript/components/ProgressSegmented/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressSegmented/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAGL,KAAK,yBAAyB,EAC/B,MAAM,UAAU,CAAC;AAIlB,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,yBAAyB;IAClF,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wFAAwF;IACxF,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAC9B,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,OAAO,KACpB,MAAM,CAAC;IACZ,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,yGAyE7B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressSegmented/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAGL,KAAK,yBAAyB,EAC/B,MAAM,UAAU,CAAC;AAIlB,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,yBAAyB;IAClF,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wFAAwF;IACxF,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAC9B,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,OAAO,KACpB,MAAM,CAAC;IACZ,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,yGA0E7B,CAAC"}

package/lib/typescript/figma/Button.figma.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Button.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAqD1B,wBASE"}
+{"version":3,"file":"Button.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Button.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAkD1B,wBASE"}

package/lib/typescript/figma/Link.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Link.figma.d.ts.map

package/lib/typescript/figma/Link.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Link.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAa1B,wBAOE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.43",
+  "version": "0.0.1-beta.45",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -67,9 +67,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.6.1",
-    "@cdx-ui/icons": "0.0.1-beta.43",
-    "@cdx-ui/utils": "0.0.1-beta.43",
-    "@cdx-ui/primitives": "0.0.1-beta.43"
+    "@cdx-ui/primitives": "0.0.1-beta.45",
+    "@cdx-ui/utils": "0.0.1-beta.45",
+    "@cdx-ui/icons": "0.0.1-beta.45"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/AlertDialog/index.tsx

@@ -54,7 +54,7 @@ const AlertDialogAction = forwardRef<View, AlertDialogActionProps>(
     }
 
     return (
-      <Button ref={ref} variant="strong" color={color} className={className} {...props}>
+      <Button ref={ref} variant="solid" color={color} className={className} {...props}>
         <Button.Label>{children}</Button.Label>
       </Button>
     );

package/src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type ReactElement, type ReactNode } from 'react';
+import { forwardRef, useEffect, type ReactElement, type ReactNode } from 'react';
 import {
   ActivityIndicator,
   Pressable,
@@ -40,7 +40,25 @@ const ButtonPrimitive = createButton({
 // STYLED ROOT COMPONENT
 // =============================================================================
 
-export interface ButtonProps extends PressableProps, IButtonProps, ButtonVariantProps {
+export type ButtonVariant = 'solid' | 'outline' | 'ghost';
+
+/** @deprecated Use {@link ButtonVariant} (`'solid'`) instead. */
+export type ButtonVariantStrong = 'strong';
+
+let hasWarnedStrongButtonVariant = false;
+
+export interface ButtonProps
+  extends PressableProps, IButtonProps, Omit<ButtonVariantProps, 'variant'> {
+  /**
+   * Visual style variant.
+   * @default 'solid'
+   */
+  variant?:
+    | ButtonVariant
+    /**
+     * @deprecated Use `'solid'` instead.
+     */
+    | 'strong';
   className?: string;
   children?: ReactNode;
 }
@@ -48,7 +66,7 @@ export interface ButtonProps extends PressableProps, IButtonProps, ButtonVariant
 const ButtonRoot = forwardRef<View, ButtonProps>(
   (
     {
-      variant = 'strong',
+      variant: variantProp = 'solid',
       color = 'action',
       size = 'default',
       fullWidth = false,
@@ -59,6 +77,22 @@ const ButtonRoot = forwardRef<View, ButtonProps>(
     },
     ref,
   ) => {
+    // TODO: Remove this once the `strong` variant is removed.
+    useEffect(() => {
+      if (
+        typeof process !== 'undefined' &&
+        process.env.NODE_ENV !== 'production' &&
+        variantProp === 'strong' &&
+        !hasWarnedStrongButtonVariant
+      ) {
+        hasWarnedStrongButtonVariant = true;
+        console.warn(
+          '[Button] The `strong` variant is deprecated and will be removed in a future major release. Use `solid` instead.',
+        );
+      }
+    }, [variantProp]);
+
+    const variant = variantProp === 'strong' ? 'solid' : variantProp;
     const computedClassName = cn(
       buttonRootVariants({ variant, color, size, fullWidth }),
       className,

package/src/components/Button/styles.ts

@@ -12,12 +12,12 @@ export const buttonRootVariants = cva(
     TRANSITION_COLORS,
     'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
-    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-focus] web:data-[focus-visible=true]:ring-offset-2',
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {
       variant: {
-        strong: ['border-b-1 border-black/75'], // TODO: Replace with token
+        solid: ['border-b-1 border-black/75'], // TODO: Replace with token
         outline: ['bg-transparent', 'border border-stroke-primary'],
         ghost: ['bg-transparent'],
       },
@@ -38,9 +38,9 @@ export const buttonRootVariants = cva(
       },
     },
     compoundVariants: [
-      // ── strong × color (filled surface) ──────────────────────────────
+      // ── solid × color (filled surface) ──────────────────────────────
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'action',
         className: [
           'bg-surface-action-strong',
@@ -51,7 +51,7 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'danger',
         className: [
           'bg-surface-danger-strong',
@@ -62,7 +62,7 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'warning',
         className: [
           'bg-surface-warning-strong',
@@ -73,7 +73,7 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'success',
         className: [
           'bg-surface-success-strong',
@@ -84,7 +84,7 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'info',
         className: [
           'bg-surface-info-strong',
@@ -205,7 +205,7 @@ export const buttonRootVariants = cva(
       },
     ],
     defaultVariants: {
-      variant: 'strong',
+      variant: 'solid',
       color: 'action',
       size: 'default',
       fullWidth: false,
@@ -216,7 +216,7 @@ export const buttonRootVariants = cva(
 export const buttonTextVariants = cva(['font-medium', 'text-center'], {
   variants: {
     variant: {
-      strong: [],
+      solid: [],
       outline: [],
       ghost: [],
     },
@@ -233,12 +233,12 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
     },
   },
   compoundVariants: [
-    // ── strong × color (filled foreground text) ──────────────────────
-    { variant: 'strong', color: 'action', className: 'text-content-action-on-strong' },
-    { variant: 'strong', color: 'danger', className: 'text-content-danger-on-strong' },
-    { variant: 'strong', color: 'warning', className: 'text-content-warning-on-strong' },
-    { variant: 'strong', color: 'success', className: 'text-content-success-on-strong' },
-    { variant: 'strong', color: 'info', className: 'text-content-info-on-strong' },
+    // ── solid × color (filled foreground text) ──────────────────────
+    { variant: 'solid', color: 'action', className: 'text-content-action-on-strong' },
+    { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
+    { variant: 'solid', color: 'warning', className: 'text-content-warning-on-strong' },
+    { variant: 'solid', color: 'success', className: 'text-content-success-on-strong' },
+    { variant: 'solid', color: 'info', className: 'text-content-info-on-strong' },
 
     // ── outline/ghost × color (transparent foreground text) ──────────
     { variant: ['outline', 'ghost'], color: 'action', className: 'text-content-action' },
@@ -248,7 +248,7 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
     { variant: ['outline', 'ghost'], color: 'info', className: 'text-content-info' },
   ],
   defaultVariants: {
-    variant: 'strong',
+    variant: 'solid',
     color: 'action',
     size: 'default',
   },
@@ -257,7 +257,7 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
 export const buttonSpinnerVariants = cva([], {
   variants: {
     variant: {
-      strong: [],
+      solid: [],
       outline: [],
       ghost: [],
     },
@@ -270,29 +270,29 @@ export const buttonSpinnerVariants = cva([], {
     },
   },
   compoundVariants: [
-    // ── strong × color ───────────────────────────────────────────────
+    // ── solid × color ───────────────────────────────────────────────
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'action',
       className: 'accent-[var(--color-content-action-on-strong)]',
     },
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'danger',
       className: 'accent-[var(--color-content-danger-on-strong)]',
     },
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'warning',
       className: 'accent-[var(--color-content-warning-on-strong)]',
     },
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'success',
       className: 'accent-[var(--color-content-success-on-strong)]',
     },
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'info',
       className: 'accent-[var(--color-content-info-on-strong)]',
     },
@@ -325,7 +325,7 @@ export const buttonSpinnerVariants = cva([], {
     },
   ],
   defaultVariants: {
-    variant: 'strong',
+    variant: 'solid',
     color: 'action',
   },
 });

package/src/components/Chip/styles.ts

@@ -9,7 +9,7 @@ const chipInteractiveRoot = [
   Platform.select({
     web: [
       'outline-none',
-      'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[var(--color-stroke-focus)] web:data-[focus-visible=true]:ring-offset-1',
+      'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
     ].join(' '),
     default: '',
   }),

package/src/components/Link/index.tsx

@@ -1,9 +1,14 @@
 import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text as RNText, type TextProps, type View } from 'react-native';
-import { createLink, type ILinkProps } from '@cdx-ui/primitives';
+import { Platform, Pressable, Text, View, type TextProps } from 'react-native';
+import { createLink, useLinkInteractionContext, type ILinkProps } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import { Icon, type IconProps } from '../Icon';
-import { linkRootVariants, linkLabelVariants, linkIconVariants } from './styles';
+import {
+  linkIconVariants,
+  linkLabelVariants,
+  linkNativeUnderlineVariants,
+  linkRootVariants,
+} from './styles';
 
 export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
 
@@ -40,15 +45,22 @@ export interface LinkLabelProps extends TextProps {
   children?: ReactNode;
 }
 
-const LinkLabel = forwardRef<RNText, LinkLabelProps>(
+const LinkLabel = forwardRef<Text, LinkLabelProps>(
   ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(linkLabelVariants(), className);
+    const { visited } = useLinkInteractionContext();
+    const computedClassName = cn(linkLabelVariants({ visited }), className);
 
-    return (
-      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+    const textElement = (
+      <Text ref={ref} className={computedClassName} style={style} {...props}>
         {children}
-      </RNText>
+      </Text>
     );
+
+    if (Platform.OS === 'web') {
+      return textElement;
+    }
+
+    return <View className={cn(linkNativeUnderlineVariants({ visited }))}>{textElement}</View>;
   },
 );
 
@@ -61,7 +73,8 @@ LinkLabel.displayName = 'Link.Label';
 export interface LinkIconProps extends Omit<IconProps, 'children'> {}
 
 const LinkIcon = ({ className, style, as, ...props }: LinkIconProps) => {
-  const computedClassName = cn(linkIconVariants(), className);
+  const { visited } = useLinkInteractionContext();
+  const computedClassName = cn(linkIconVariants({ visited }), className);
 
   return <Icon as={as} className={computedClassName} style={style} {...props} />;
 };

package/src/components/Link/styles.ts

@@ -1,21 +1,61 @@
+import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { TRANSITION_COLORS } from '../../styles/primitives';
 
-// TODO: Handle visited state
-
 export const linkRootVariants = cva([
   'flex-row items-center gap-1',
-  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  Platform.select({ web: 'web:inline-flex web:self-start', default: '' }),
   TRANSITION_COLORS,
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  'web:data-[focus-visible=true]:rounded-[2px]',
   'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+  // Web: set color on the anchor so Label/Icon can text-inherit (incl. browser :visited).
+  'web:text-content-link',
+  'web:visited:text-content-link-visited',
+  'web:hover:text-content-primary',
+  'web:visited:hover:text-content-primary',
+  'data-[visited=true]:text-content-link-visited',
+  'web:data-[hover=true]:text-content-primary',
 ]);
 
-export const linkLabelVariants = cva([
-  'text-content-link',
-  'body-md',
-  'underline underline-offset-4',
-]);
+export const linkLabelVariants = cva(
+  [
+    'body-md',
+    Platform.select({ web: 'underline underline-offset-4', default: '' }),
+    Platform.select({ web: 'text-inherit', default: 'text-content-link' }),
+  ],
+  {
+    variants: {
+      visited: {
+        true: Platform.select({ web: '', default: 'text-content-link-visited' }),
+        false: '',
+      },
+    },
+    defaultVariants: { visited: false },
+  },
+);
+
+export const linkNativeUnderlineVariants = cva(['border-b border-content-link pb-0.5'], {
+  variants: {
+    visited: {
+      true: 'border-content-link-visited',
+      false: '',
+    },
+  },
+  defaultVariants: { visited: false },
+});
 
-export const linkIconVariants = cva(['text-content-link', 'size-4']);
+export const linkIconVariants = cva(
+  ['size-4', Platform.select({ web: 'text-inherit', default: 'text-content-link' })],
+  {
+    variants: {
+      visited: {
+        true: Platform.select({ web: '', default: 'text-content-link-visited' }),
+        false: '',
+      },
+    },
+    defaultVariants: { visited: false },
+  },
+);
 
 export type LinkVariantProps = VariantProps<typeof linkLabelVariants>;

package/src/components/ProgressSegmented/index.tsx

@@ -52,6 +52,7 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
   ) => {
     const segmentCount = segments ?? total ?? 5;
 
+    // TODO: Remove this once the `total` prop is removed.
     useEffect(() => {
       if (
         typeof process !== 'undefined' &&