ionbase-ui 0.8.0 → 0.10.0

package/dist/components/Input.d.ts

@@ -26,6 +26,22 @@ export interface InputProps extends AriaTextFieldProps, InputDOMProps {
     leadingIcon?: React.ReactNode;
     /** Trailing icon. Figma's `Show Trailing Icon` + `Trailing Icon` swap. */
     trailingIcon?: React.ReactNode;
+    /**
+     * A segment butted against the left of the control, sharing its outline —
+     * Figma's `Input/Phone` (80:372) country-code block.
+     *
+     * Distinct from `leadingIcon`, which sits *inside* the box: an addon has its
+     * own surface and border and is a sibling of the control, so the two cannot
+     * be the same slot. It lives here rather than in `PhoneInput` because the
+     * `.ion-field` wrapper has to enclose the addon and the control together —
+     * building it outside would put the label above only half the control and
+     * break the `aria-labelledby` wiring `useTextField` sets up.
+     *
+     * Phone is the only addon Figma specifies. This is a slot, not a system:
+     * resist growing a trailing counterpart or an addon variant ladder until a
+     * design actually calls for one.
+     */
+    leadingAddon?: React.ReactNode;
     /**
      * @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAIrD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;;;;;;;;GASG;AACH,KAAK,aAAa,GAAG,IAAI,CACvB,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,kBAAkB,GAAG,MAAM,GAAG,gBAAgB,GAAG,UAAU,CAClE,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,aAAa;IACnE,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,CAAC;IAC9E,uEAAuE;IACvE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,qFAuHjB,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAIrD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;;;;;;;;GASG;AACH,KAAK,aAAa,GAAG,IAAI,CACvB,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,kBAAkB,GAAG,MAAM,GAAG,gBAAgB,GAAG,UAAU,CAClE,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,aAAa;IACnE,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,CAAC;IAC9E,uEAAuE;IACvE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,qFAmIjB,CAAC"}

package/dist/components/Input.js

@@ -22,7 +22,7 @@ import { resolveDisabled } from './resolve-disabled.js';
  * expresses; Default, Invalid, Disabled and Read-only are props.
  */
 export const Input = forwardRef((props, forwardedRef) => {
-    const { size = 'md', leadingIcon, trailingIcon, className: customClassName, wrapperClassName, label, description, errorMessage, isDisabled: isDisabledProp, disabled, isReadOnly, isInvalid, ...restProps } = props;
+    const { size = 'md', leadingIcon, trailingIcon, leadingAddon, className: customClassName, wrapperClassName, label, description, errorMessage, isDisabled: isDisabledProp, disabled, isReadOnly, isInvalid, ...restProps } = props;
     const isDisabled = resolveDisabled(isDisabledProp, disabled);
     const ariaProps = { ...props, isDisabled };
     /*
@@ -64,19 +64,22 @@ export const Input = forwardRef((props, forwardedRef) => {
         'data-disabled': isDisabled || undefined,
     };
     const box = (_jsxs("div", { ...hoverProps, ...stateAttributes, className: boxClassNames, children: [leadingIcon && (_jsx("span", { className: "ion-input__icon-start", "aria-hidden": "true", children: leadingIcon })), _jsx("input", { ...domProps, ...mergeProps(inputProps, focusProps), ref: domRef, className: "ion-input__field" }), trailingIcon && (_jsx("span", { className: "ion-input__icon-end", "aria-hidden": "true", children: trailingIcon }))] }));
+    // The addon and the control share one outline, so they need a row of their
+    // own — `.ion-field` is a column and would stack them.
+    const control = leadingAddon ? (_jsxs("div", { className: "ion-input-group", children: [leadingAddon, box] })) : (box);
     // Figma's Error variant recolours the helper text, so the error message
     // takes the helper's slot rather than stacking below it.
     const helper = isInvalid && errorMessage ? errorMessage : description;
     const helperProps = isInvalid && errorMessage ? errorMessageProps : descriptionProps;
     if (!label && !helper)
-        return box;
+        return control;
     return (_jsxs("div", { className: [
             'ion-field',
             isInvalid ? 'ion-field--error' : '',
             wrapperClassName || '',
         ]
             .filter(Boolean)
-            .join(' '), children: [label && (_jsx("label", { ...labelProps, className: "ion-field__label", children: label })), box, helper && (_jsx("span", { ...helperProps, className: "ion-field__helper", children: helper }))] }));
+            .join(' '), children: [label && (_jsx("label", { ...labelProps, className: "ion-field__label", children: label })), control, helper && (_jsx("span", { ...helperProps, className: "ion-field__helper", children: helper }))] }));
 });
 Input.displayName = 'Input';
 //# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"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"}

package/dist/components/Link.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import type { AriaLinkOptions } from 'react-aria';
+export type LinkVariant = 'inline' | 'standalone';
+/**
+ * The plain anchor attributes React Aria has no opinion about — `target`,
+ * `rel`, `download`, `hreflang` and the rest. `AriaLinkOptions` wins every
+ * overlap, the same split `Input` makes against `AriaTextFieldProps`.
+ */
+type LinkDOMProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof AriaLinkOptions | 'color'>;
+export interface LinkProps extends AriaLinkOptions, LinkDOMProps {
+    /**
+     * Matches the Figma `Type` variant.
+     *
+     * `inline` is for links inside body copy and is underlined in every state —
+     * a link in a paragraph must not rely on colour alone (WCAG 1.4.1).
+     * `standalone` is for links that already read as interactive from their
+     * position, and underlines on hover only.
+     */
+    variant?: LinkVariant;
+    /** Optional icon before the label. */
+    startIcon?: React.ReactNode;
+    /** Optional icon after the label — the external-link or arrow affordance. */
+    endIcon?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+    /**
+     * @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
+     */
+    disabled?: boolean;
+}
+/**
+ * Link — Figma `Link` (774:1516).
+ *
+ * Renders an `<a>` when given an `href` and a `<button>` otherwise, the same
+ * judgment `NavItem` makes: the element follows what the caller is actually
+ * building rather than a separate `as` prop. A link that does not navigate is
+ * a button, and shipping one as an anchor breaks middle-click, "open in new
+ * tab" and the screen-reader announcement all at once.
+ *
+ * NO SIZE PROP, DELIBERATELY. A link is an inline element and inherits its
+ * type from the text around it — `font-size: inherit` in the stylesheet, and
+ * icons sized in `em` so they scale with it. Figma has to draw its variants at
+ * some concrete size (16/24, `type/body`), but that is one sample of an
+ * inheriting element, not a specification. Do not add a size ladder to match
+ * the drawing.
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement & HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=Link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAQvE,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,YAAY,CAAC;AAGrE,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,YAAY,CAAC;AAElD;;;;GAIG;AACH,KAAK,YAAY,GAAG,IAAI,CACtB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,eAAe,GAAG,OAAO,CAChC,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,eAAe,EAAE,YAAY;IAC9D;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,sCAAsC;IACtC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,6EAA6E;IAC7E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI,yGAyHf,CAAC"}

package/dist/components/Link.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useLink, useButton, useHover, useFocusRing, mergeProps, } from 'react-aria';
+import { resolveDisabled } from './resolve-disabled.js';
+/**
+ * Link — Figma `Link` (774:1516).
+ *
+ * Renders an `<a>` when given an `href` and a `<button>` otherwise, the same
+ * judgment `NavItem` makes: the element follows what the caller is actually
+ * building rather than a separate `as` prop. A link that does not navigate is
+ * a button, and shipping one as an anchor breaks middle-click, "open in new
+ * tab" and the screen-reader announcement all at once.
+ *
+ * NO SIZE PROP, DELIBERATELY. A link is an inline element and inherits its
+ * type from the text around it — `font-size: inherit` in the stylesheet, and
+ * icons sized in `em` so they scale with it. Figma has to draw its variants at
+ * some concrete size (16/24, `type/body`), but that is one sample of an
+ * inheriting element, not a specification. Do not add a size ladder to match
+ * the drawing.
+ */
+export const Link = forwardRef((props, forwardedRef) => {
+    const { variant = 'inline', startIcon, endIcon, className: customClassName, children, isDisabled: isDisabledProp, disabled, href, ...restProps } = props;
+    const isDisabled = resolveDisabled(isDisabledProp, disabled);
+    const domRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => domRef.current);
+    const isNavigating = Boolean(href);
+    /*
+     * `useLink` for the anchor, `useButton` for the button — NOT `useLink` for
+     * both.
+     *
+     * `useLink` on a non-anchor stamps `role="link"` on it, which is the correct
+     * behaviour for a hand-rolled link and precisely wrong here: this component
+     * renders a real `<button>` when there is nothing to navigate to, and a
+     * button announced as a link tells a screen-reader user to expect navigation
+     * that will not happen. Caught by a story asserting `getByRole('button')`.
+     *
+     * Both hooks are called unconditionally because React forbids conditional
+     * hooks and `href` can change between renders. Only one result is ever
+     * spread, and both deliver their behaviour entirely through the props they
+     * return, so the unused one attaches nothing to the DOM.
+     */
+    const link = useLink({ ...props, isDisabled, elementType: 'a' }, domRef);
+    const button = useButton({
+        ...props,
+        isDisabled,
+        elementType: 'button',
+    }, domRef);
+    const interactionProps = isNavigating ? link.linkProps : button.buttonProps;
+    const isPressed = isNavigating ? link.isPressed : button.isPressed;
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const classNames = ['ion-link', `ion-link--${variant}`, customClassName || '']
+        .filter(Boolean)
+        .join(' ');
+    // `undefined` rather than `false`, so the attribute is omitted entirely
+    // instead of rendering data-hovered="false" — which would still match an
+    // `[data-hovered]` selector.
+    const stateAttributes = {
+        'data-hovered': isHovered || undefined,
+        'data-pressed': isPressed || undefined,
+        'data-focused': isFocusVisible || undefined,
+        'data-disabled': isDisabled || undefined,
+    };
+    const content = (_jsxs(_Fragment, { children: [startIcon && (_jsx("span", { className: "ion-link__icon-start", "aria-hidden": "true", children: startIcon })), children && _jsx("span", { className: "ion-link__label", children: children }), endIcon && (_jsx("span", { className: "ion-link__icon-end", "aria-hidden": "true", children: endIcon }))] }));
+    if (!href) {
+        return (_jsx("button", { ...restProps, ...mergeProps(interactionProps, hoverProps, focusProps), ...stateAttributes, ref: domRef, type: "button", disabled: isDisabled, className: classNames, children: content }));
+    }
+    return (_jsx("a", { ...restProps, ...mergeProps(interactionProps, hoverProps, focusProps), ...stateAttributes, ref: domRef, 
+        // A disabled link must not remain navigable. `aria-disabled` alone
+        // still leaves the href clickable and focusable, so the href is
+        // dropped and it is taken out of the tab order — the same treatment
+        // NavItem gives a disabled link.
+        href: isDisabled ? undefined : href, "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : undefined, className: classNames, children: content }));
+});
+Link.displayName = 'Link';
+//# sourceMappingURL=Link.js.map

package/dist/components/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"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"}

package/dist/components/PhoneInput.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { type InputProps } from './Input.js';
+export interface PhoneInputProps extends Omit<InputProps, 'leadingAddon' | 'leadingIcon'> {
+    /** The dial code shown in the leading block, e.g. `+1`. */
+    dialCode?: string;
+    /**
+     * Accessible name for the dial-code trigger. It shows only `+1`, which names
+     * a value rather than an action, so the button needs a label of its own.
+     */
+    countryLabel?: string;
+    /**
+     * Spread onto the dial-code `<button>`. This is how a country picker gets
+     * attached — see the note on scope below.
+     */
+    countryButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+/**
+ * PhoneInput — Figma `Input/Phone` (80:372).
+ *
+ * A dial-code block butted against an Input, sharing one outline: the block
+ * carries the left radii and the control the right, so the seam is square on
+ * both sides and reads as a single control. Both keep their full 1px border,
+ * which is what Figma draws — the 2px seam is the two strokes meeting, not an
+ * accident.
+ *
+ * Three sizes, no State axis. Every interaction state is the Input's, reached
+ * through the ordinary props, because Figma composes this from the same `Input`
+ * instance rather than redrawing it.
+ *
+ * WHAT THIS DELIBERATELY DOES NOT DO
+ *
+ * It does not pick countries. The chevron implies a menu and Figma specifies no
+ * open state for it — no list, no flags, no search, no selected state. Country
+ * data and the picker are application concerns with real editorial weight (which
+ * territories, which names, which order), and inventing them here would be
+ * designing rather than implementing.
+ *
+ * So the trigger is a real `<button>` with an accessible name, and
+ * `countryButtonProps` is how you wire it to a `Menu`, a popover or your own
+ * listbox — including the `aria-haspopup` and `aria-expanded` that only the
+ * thing owning the popup can set honestly.
+ */
+export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=PhoneInput.d.ts.map

package/dist/components/PhoneInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../src/components/PhoneInput.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAwBpD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,UAAU,EACV,cAAc,GAAG,aAAa,CAC/B;IACC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CACpE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,UAAU,0FAqDtB,CAAC"}

package/dist/components/PhoneInput.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * No `'use client'` here, deliberately — the build asserts its absence.
+ *
+ * This component holds no state and calls no hook: it composes a button and
+ * `Input`, and `Input` carries the boundary already. Marking it would pull an
+ * otherwise server-renderable module out of the server graph for nothing.
+ */
+import { forwardRef } from 'react';
+import { Input } from './Input.js';
+import { resolveDisabled } from './resolve-disabled.js';
+/**
+ * The chevron from Figma's `Chevron` slot, inlined.
+ *
+ * Same reasoning as Select's: the shape never varies and is part of the
+ * component rather than a slot a consumer fills, so drawing it here avoids
+ * making `ionbase-ui` depend on `ionbase-icons` — a dependency the package
+ * deliberately does not have. Sizing comes from the CSS, so it tracks the size
+ * modifier without a prop.
+ */
+const ChevronDown = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+/**
+ * PhoneInput — Figma `Input/Phone` (80:372).
+ *
+ * A dial-code block butted against an Input, sharing one outline: the block
+ * carries the left radii and the control the right, so the seam is square on
+ * both sides and reads as a single control. Both keep their full 1px border,
+ * which is what Figma draws — the 2px seam is the two strokes meeting, not an
+ * accident.
+ *
+ * Three sizes, no State axis. Every interaction state is the Input's, reached
+ * through the ordinary props, because Figma composes this from the same `Input`
+ * instance rather than redrawing it.
+ *
+ * WHAT THIS DELIBERATELY DOES NOT DO
+ *
+ * It does not pick countries. The chevron implies a menu and Figma specifies no
+ * open state for it — no list, no flags, no search, no selected state. Country
+ * data and the picker are application concerns with real editorial weight (which
+ * territories, which names, which order), and inventing them here would be
+ * designing rather than implementing.
+ *
+ * So the trigger is a real `<button>` with an accessible name, and
+ * `countryButtonProps` is how you wire it to a `Menu`, a popover or your own
+ * listbox — including the `aria-haspopup` and `aria-expanded` that only the
+ * thing owning the popup can set honestly.
+ */
+export const PhoneInput = forwardRef((props, forwardedRef) => {
+    const { dialCode = '+1', countryLabel = 'Select country calling code', countryButtonProps, size = 'md', type = 'tel', isDisabled: isDisabledProp, disabled, ...inputProps } = props;
+    const isDisabled = resolveDisabled(isDisabledProp, disabled);
+    const countryClassNames = [
+        'ion-phone-input__country',
+        size !== 'md' ? `ion-phone-input__country--${size}` : '',
+        countryButtonProps?.className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const country = (_jsxs("button", { type: "button", "aria-label": countryLabel, ...countryButtonProps, className: countryClassNames, 
+        // Read from the resolved value rather than the raw prop, so the
+        // deprecated `disabled` alias disables the trigger too. A dial-code
+        // button that stays live beside a disabled field is a real trap: it
+        // looks operable and would open a picker for a field you cannot edit.
+        disabled: isDisabled || countryButtonProps?.disabled, children: [_jsx("span", { className: "ion-phone-input__dial-code", children: dialCode }), _jsx("span", { className: "ion-phone-input__chevron", children: _jsx(ChevronDown, {}) })] }));
+    return (_jsx(Input, { ...inputProps, ref: forwardedRef, size: size, type: type, isDisabled: isDisabled, leadingAddon: country }));
+});
+PhoneInput.displayName = 'PhoneInput';
+//# sourceMappingURL=PhoneInput.js.map

package/dist/components/PhoneInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../src/components/PhoneInput.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AACH,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAmB,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD;;;;;;;;GAQG;AACH,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,cAAc,EAChB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AAoBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EACJ,QAAQ,GAAG,IAAI,EACf,YAAY,GAAG,6BAA6B,EAC5C,kBAAkB,EAClB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,KAAK,EACZ,UAAU,EAAE,cAAc,EAC1B,QAAQ,EACR,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,eAAe,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAE7D,MAAM,iBAAiB,GAAG;QACxB,0BAA0B;QAC1B,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,6BAA6B,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACxD,kBAAkB,EAAE,SAAS,IAAI,EAAE;KACpC;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,OAAO,GAAG,CACd,kBACE,IAAI,EAAC,QAAQ,gBACD,YAAY,KACpB,kBAAkB,EACtB,SAAS,EAAE,iBAAiB;QAC5B,gEAAgE;QAChE,oEAAoE;QACpE,oEAAoE;QACpE,sEAAsE;QACtE,QAAQ,EAAE,UAAU,IAAI,kBAAkB,EAAE,QAAQ,aAEpD,eAAM,SAAS,EAAC,4BAA4B,YAAE,QAAQ,GAAQ,EAC9D,eAAM,SAAS,EAAC,0BAA0B,YACxC,KAAC,WAAW,KAAG,GACV,IACA,CACV,CAAC;IAEF,OAAO,CACL,KAAC,KAAK,OACA,UAAU,EACd,GAAG,EAAE,YAAY,EACjB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,OAAO,GACrB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/components/index.d.ts

@@ -6,6 +6,8 @@ export { Badge } from './Badge.js';
 export type { BadgeProps, BadgeIntent } from './Badge.js';
 export { Input } from './Input.js';
 export type { InputProps, InputSize } from './Input.js';
+export { PhoneInput } from './PhoneInput.js';
+export type { PhoneInputProps } from './PhoneInput.js';
 export { Select } from './Select.js';
 export type { SelectProps, SelectSize, SelectOption } from './Select.js';
 export { Checkbox } from './Checkbox.js';
@@ -24,6 +26,8 @@ export { Logo, LogoMark } from './Logo.js';
 export type { LogoProps, LogoMarkProps, LogoSize, LogoWordmark, } from './Logo.js';
 export { Divider } from './Divider.js';
 export type { DividerProps, DividerOrientation } from './Divider.js';
+export { Link } from './Link.js';
+export type { LinkProps, LinkVariant } from './Link.js';
 export { NavItem } from './NavItem.js';
 export type { NavItemProps } from './NavItem.js';
 export { Table, TableHead, TableBody, TableRow, TableCell } from './Table.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,aAAa,EACb,YAAY,EACZ,cAAc,GACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,WAAW,GACZ,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,YAAY,GACb,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC9E,YAAY,EACV,UAAU,EACV,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EACV,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,aAAa,EACb,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,aAAa,EACb,YAAY,EACZ,cAAc,GACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,WAAW,GACZ,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,YAAY,GACb,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC9E,YAAY,EACV,UAAU,EACV,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EACV,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,aAAa,EACb,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,eAAe,CAAC"}

package/dist/components/index.js

@@ -2,6 +2,7 @@ export { Button } from './Button.js';
 export { Tabs, TabItem } from './Tabs.js';
 export { Badge } from './Badge.js';
 export { Input } from './Input.js';
+export { PhoneInput } from './PhoneInput.js';
 export { Select } from './Select.js';
 export { Checkbox } from './Checkbox.js';
 export { Radio, RadioGroup } from './Radio.js';
@@ -11,6 +12,7 @@ export { Avatar, AvatarGroup } from './Avatar.js';
 export { Header } from './Header.js';
 export { Logo, LogoMark } from './Logo.js';
 export { Divider } from './Divider.js';
+export { Link } from './Link.js';
 export { NavItem } from './NavItem.js';
 export { Table, TableHead, TableBody, TableRow, TableCell } from './Table.js';
 export { ScrollProgress } from './ScrollProgress.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAOlD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAU9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAOlD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAU9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/dist/styles/index.css

@@ -31,6 +31,7 @@
 @import url('./tabs.css');
 @import url('./badge.css');
 @import url('./input.css');
+@import url('./phone-input.css');
 @import url('./select.css');
 @import url('./checkbox.css');
 @import url('./radio.css');
@@ -41,6 +42,7 @@
 @import url('./logo.css');
 @import url('./table.css');
 @import url('./divider.css');
+@import url('./link.css');
 @import url('./nav-item.css');
 @import url('./scroll-progress.css');
 @import url('./full-card.css');

package/dist/styles/input.css

@@ -89,6 +89,25 @@
   --ion-input-padding-x: var(--spacing-16);
 }
 
+/*
+ * A leading addon and the control, sharing one outline — Figma `Input/Phone`
+ * (80:372).
+ *
+ * `align-items: stretch` rather than a height here on purpose: the addon takes
+ * its height from the control, so the size ladder stays in exactly one place
+ * and the two halves cannot drift. The addon supplies its own left radii; this
+ * rule only has to square off the edge they meet on.
+ */
+.ion-input-group {
+  display: flex;
+  align-items: stretch;
+}
+
+.ion-input-group > .ion-input {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
 /*
  * The field itself carries no box of its own — the wrapper owns the border,
  * background and padding so the icons sit inside it. Everything here is either

package/dist/styles/link.css

@@ -0,0 +1,181 @@
+/*
+ * Link
+ *
+ * Measured from Figma `Link` (774:1516). Two types x five states.
+ *
+ * NO SIZE LADDER, AND THAT IS THE POINT
+ *
+ * Every other control here pins its own type ramp because it owns a box. A
+ * link owns nothing: it sits inside a sentence and has to be the size of that
+ * sentence. So `font-size` and `line-height` inherit, and the icons are sized
+ * in `em` rather than from the `icon-size` ladder — a 14px link gets a 14px
+ * icon without being told.
+ *
+ * Figma draws its variants at 16/24 (`type/body`) because a Figma variant must
+ * have a concrete size. That is one sample of an inheriting element, not a
+ * specification, and the drawing should not be used to justify adding a size
+ * prop here.
+ */
+.ion-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+
+  /*
+   * `baseline` rather than the flex default, so a link with an icon still sits
+   * on the same baseline as the prose around it. `inline-flex` alone would
+   * align the whole box to the text baseline and push the label off it.
+   */
+  vertical-align: baseline;
+  color: var(--text-link);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  cursor: pointer;
+
+  /* Reset for the <button> form — it is a link, not a control with a box. */
+  padding: 0;
+  background: none;
+  border: none;
+  transition: color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+/*
+ * Inline is underlined in EVERY state.
+ *
+ * This is the accessibility half of the Type axis, not a stylistic preference:
+ * a link inside a paragraph that is distinguished only by colour fails WCAG
+ * 1.4.1. `text-underline-offset` keeps the rule off the descenders, which is
+ * what makes an always-on underline tolerable in body copy.
+ */
+.ion-link--inline {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+/*
+ * Standalone earns its lack of underline from context — a table cell, a list,
+ * a card footer — where position already says "interactive". It still
+ * underlines on hover, so the affordance is never absent, only deferred.
+ */
+.ion-link--standalone {
+  text-decoration: none;
+}
+
+/*
+ * Hover is declared twice, as it is on Button and Input. Native `:hover`
+ * latches on touch until you tap elsewhere; `[data-hovered]` comes from React
+ * Aria's useHover, which is pointer-aware. The media query keeps the
+ * stylesheet working without React.
+ */
+@media (hover: hover) {
+  .ion-link:hover {
+    color: var(--text-link-hover);
+  }
+
+  .ion-link--standalone:hover {
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+}
+
+.ion-link[data-hovered='true'] {
+  color: var(--text-link-hover);
+}
+
+.ion-link--standalone[data-hovered='true'] {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+/*
+ * Visited is colour-only, and it has to be.
+ *
+ * Browsers deliberately restrict `:visited` to a short list of properties to
+ * close a history-sniffing side channel — `getComputedStyle` lies about it,
+ * and layout-affecting properties are ignored outright. Colour is on the
+ * allowed list, which is exactly why `text/link/visited` is a colour and why
+ * this rule tries nothing else.
+ *
+ * Only anchors have history, so this is scoped to `a`. The `<button>` form has
+ * no visited state to express.
+ */
+a.ion-link:visited {
+  color: var(--text-link-visited);
+}
+
+/* Hover after visited, so a visited link still responds to the pointer. */
+@media (hover: hover) {
+  a.ion-link:visited:hover {
+    color: var(--text-link-hover);
+  }
+}
+
+a.ion-link:visited[data-hovered='true'] {
+  color: var(--text-link-hover);
+}
+
+/*
+ * Focus is a ring, not the `Focus/md` effect style every boxed control uses.
+ *
+ * That style is a drop shadow, which needs a filled box to cast from — a link
+ * has no surface, so it rendered as a faint glow off the glyph shapes instead
+ * of a ring. `ring/focus` is the token for this and had no consumer anywhere
+ * until this component.
+ *
+ * `outline-offset` is what Figma cannot express: there, the ring hugs the text
+ * because adding padding would change the box and knock an inline link out of
+ * alignment with its sentence. An outline is drawn outside the box and costs
+ * no layout, so the breathing room is free here.
+ */
+.ion-link:focus-visible,
+.ion-link[data-focused='true'] {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+.ion-link--disabled,
+.ion-link:disabled,
+.ion-link[data-disabled='true'] {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+/*
+ * Icons take the label's colour rather than an `icon/*` role.
+ *
+ * There is deliberately no `color` declaration here, and its absence is the
+ * mechanism rather than an omission. Colour inherits, so the icon picks up
+ * every state — hover, visited, disabled — without a rule of its own and
+ * cannot drift from the text it belongs to. A `color: currentColor` line would
+ * restate the default while reading as though something were being decided.
+ *
+ * This is deliberately not the usual v2 split between `text/*` and `icon/*`:
+ * the icon makes no colour decision at all. Figma binds the label's token onto
+ * the icon vectors to depict the same relationship, because Figma has no
+ * inheritance — which is why the icons sat at `icon/default` (near-black) on a
+ * blue link until it was caught in review.
+ */
+.ion-link__icon-start,
+.ion-link__icon-end {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  /* The underline belongs to the text, never to the icons. */
+  text-decoration: none;
+}
+
+/*
+ * `em`, not the `icon-size` ladder — the icon scales with whatever type the
+ * link inherited. `1em` against a 16px label is 16px, which is `icon-size/sm`,
+ * the rung Figma draws.
+ */
+.ion-link__icon-start svg,
+.ion-link__icon-end svg {
+  width: 1em;
+  height: 1em;
+}

package/dist/styles/phone-input.css

@@ -0,0 +1,131 @@
+/*
+ * Phone Input
+ *
+ * Measured from Figma `Input/Phone` (80:372). Three sizes, no State axis —
+ * every state belongs to the Input it wraps.
+ *
+ * THE SEAM IS TWO BORDERS, NOT ONE
+ *
+ * Figma butts the two frames at x = 68 (Medium) with no gap, and both keep a
+ * full 1px stroke on all four sides. So the divider is 2px of `border/default`,
+ * and reproducing it needs no negative margin and no shared-edge trick — plain
+ * adjacency gives exactly the measured result. The corners facing the seam are
+ * square on both sides, which is what makes the pair read as one control:
+ * `Country Code` is [r,0,0,r] and the Input is [0,r,r,0], both bound.
+ *
+ * Radius tracks the size the same way the Input's does — `radius/sm` at Small,
+ * `radius/md` at Medium and Large — so the two halves round in step. Getting
+ * this wrong is invisible until Small, where an 8px block meets a 6px field.
+ */
+.ion-phone-input__country {
+  /*
+   * Slots, defaulting to Medium, same shape as `.ion-input`. Padding, icon and
+   * type deliberately match the Input's rungs at every size, because Figma
+   * composes this from that component and a divergence here would show as the
+   * dial code sitting off the value's baseline.
+   *
+   * GAP IS THE ONE THAT DOES NOT MATCH: 4 at every size, where the Input runs
+   * 6/8/8. Measured, not inferred — the block holds two tightly-related glyphs
+   * rather than an icon and a sentence.
+   */
+  --ion-phone-input-padding-x: var(--spacing-12);
+  --ion-phone-input-gap: var(--spacing-4);
+  --ion-phone-input-icon-size: var(--icon-size-md);
+  --ion-phone-input-radius: var(--radius-md);
+  --ion-phone-input-font-size: var(--type-body);
+  --ion-phone-input-line-height: var(--type-body-line-height);
+  --ion-phone-input-border-width: var(--border-width-default);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ion-phone-input-gap);
+  flex-shrink: 0;
+
+  /*
+   * No height of its own: the row stretches it to the control beside it, so the
+   * two halves cannot drift apart. Pinning a height here would duplicate the
+   * Input's size ladder and then disagree with it the first time one moved.
+   */
+  padding-block: 0;
+
+  /* Figma's stroke is inside the frame; a CSS border is outside the padding
+   * box. Subtracting it puts the dial code where the design has it — the same
+   * correction `.ion-input` documents at length. */
+  padding-inline: calc(
+    var(--ion-phone-input-padding-x) - var(--ion-phone-input-border-width)
+  );
+  background-color: var(--surface-page);
+  border-style: solid;
+  border-width: var(--ion-phone-input-border-width);
+  border-color: var(--border-default);
+  border-start-start-radius: var(--ion-phone-input-radius);
+  border-end-start-radius: var(--ion-phone-input-radius);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  color: var(--text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--ion-phone-input-font-size);
+  line-height: var(--ion-phone-input-line-height);
+  font-weight: var(--font-weight-regular);
+  cursor: pointer;
+  transition:
+    border-color var(--ion-duration-base) var(--ion-ease-out),
+    background-color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-phone-input__country--sm {
+  --ion-phone-input-icon-size: var(--icon-size-sm);
+  --ion-phone-input-radius: var(--radius-sm);
+  --ion-phone-input-font-size: var(--type-body-sm);
+  --ion-phone-input-line-height: var(--type-body-sm-line-height);
+}
+
+/* Large grows its padding only — icon, radius and type stay at Medium's rung,
+ * exactly as `.ion-input--lg` does. */
+.ion-phone-input__country--lg {
+  --ion-phone-input-padding-x: var(--spacing-16);
+}
+
+.ion-phone-input__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--icon-tertiary);
+}
+
+.ion-phone-input__chevron svg {
+  width: var(--ion-phone-input-icon-size);
+  height: var(--ion-phone-input-icon-size);
+}
+
+@media (hover: hover) {
+  .ion-phone-input__country:hover:not(:disabled) {
+    border-color: var(--border-strong);
+  }
+}
+
+/*
+ * Raised above the control while focused so the ring is not clipped by the
+ * neighbour's border. Inset offset because Figma draws focus as an inside
+ * stroke — matching `.ion-input`, which thickens its border rather than
+ * painting an outline outside the box.
+ */
+.ion-phone-input__country:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: calc(-1 * var(--border-width-thick));
+  position: relative;
+  z-index: 1;
+}
+
+.ion-phone-input__country:disabled {
+  background-color: var(--surface-disabled);
+  border-color: var(--border-disabled);
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.ion-phone-input__country:disabled .ion-phone-input__chevron {
+  color: var(--icon-disabled);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",