ionbase-ui 0.11.0 → 0.13.0

package/dist/components/Alert.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+export type AlertIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'information';
+export type AlertEmphasis = 'subtle' | 'solid';
+export type AlertLayout = 'inline' | 'banner';
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Matches the Figma `Intent` variant. Same vocabulary as `Badge`. */
+    intent?: AlertIntent;
+    /** Matches the Figma `Emphasis` variant. */
+    emphasis?: AlertEmphasis;
+    /** Matches the Figma `Layout` variant. */
+    layout?: AlertLayout;
+    /** Optional heading above the message. */
+    title?: React.ReactNode;
+    /** Hide the leading icon. Shown by default. */
+    hideIcon?: boolean;
+    /** Replace the intent's glyph. */
+    icon?: React.ReactNode;
+    /** Action buttons, rendered under the message. */
+    actions?: React.ReactNode;
+    /** Called when the dismiss button is pressed. Omit for no dismiss button. */
+    onDismiss?: () => void;
+    /** Accessible name for the dismiss button. */
+    dismissLabel?: string;
+    /** The message. */
+    children?: React.ReactNode;
+}
+/**
+ * Alert — Figma `Alert` (812:1902).
+ *
+ * `Intent` x `Emphasis` x `Layout`, with the parts as props rather than
+ * variants. Intents match `Badge` exactly, so a status mapped to one can be
+ * passed to the other.
+ *
+ * ROLE IS CHOSEN BY INTENT, NOT PASSED IN. `error` and `warning` render
+ * `role="alert"`, which interrupts a screen reader; the rest render
+ * `role="status"`, which waits for a pause. Getting this backwards is the
+ * common failure — a page of `role="alert"` status messages talks over the
+ * user, and an error announced as a status is missed.
+ *
+ * The icon is decorative: it repeats what the intent's colour and copy already
+ * say, so it is `aria-hidden` and the live region carries the text alone.
+ */
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,WAAW,GACrB,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAC1E,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC/C,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAuF9C,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,OAAO,CACR;IACC,sEAAsE;IACtE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kDAAkD;IAClD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,KAAK,mFA0DhB,CAAC"}

package/dist/components/Alert.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * The per-intent glyphs, inlined for the same reason Select's and Modal's are:
+ * they belong to the component rather than to a slot a caller fills, and
+ * `ionbase-ui` deliberately does not depend on `ionbase-icons`.
+ *
+ * One per intent, not one shared symbol. A success alert showing an info circle
+ * is wrong rather than merely unstyled — which is exactly what happened in
+ * Figma when the icon was bound to a single instance-swap default.
+ */
+const Info = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M12 16v-4M12 8h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }));
+const CircleCheck = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "m9 12 2 2 4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const TriangleAlert = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12 9v4M12 17h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }));
+const CircleX = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "m15 9-6 6M9 9l6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }));
+const DismissIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M18 6 6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const INTENT_ICON = {
+    neutral: Info,
+    primary: Info,
+    information: Info,
+    success: CircleCheck,
+    warning: TriangleAlert,
+    error: CircleX,
+};
+/**
+ * Alert — Figma `Alert` (812:1902).
+ *
+ * `Intent` x `Emphasis` x `Layout`, with the parts as props rather than
+ * variants. Intents match `Badge` exactly, so a status mapped to one can be
+ * passed to the other.
+ *
+ * ROLE IS CHOSEN BY INTENT, NOT PASSED IN. `error` and `warning` render
+ * `role="alert"`, which interrupts a screen reader; the rest render
+ * `role="status"`, which waits for a pause. Getting this backwards is the
+ * common failure — a page of `role="alert"` status messages talks over the
+ * user, and an error announced as a status is missed.
+ *
+ * The icon is decorative: it repeats what the intent's colour and copy already
+ * say, so it is `aria-hidden` and the live region carries the text alone.
+ */
+export const Alert = forwardRef((props, ref) => {
+    const { intent = 'information', emphasis = 'subtle', layout = 'inline', title, hideIcon, icon, actions, onDismiss, dismissLabel = 'Dismiss', className, children, ...rest } = props;
+    const IntentIcon = INTENT_ICON[intent];
+    const isUrgent = intent === 'error' || intent === 'warning';
+    return (_jsxs("div", { ...rest, ref: ref, role: isUrgent ? 'alert' : 'status', className: [
+            'ion-alert',
+            `ion-alert--${intent}`,
+            `ion-alert--${emphasis}`,
+            `ion-alert--${layout}`,
+            className || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [!hideIcon && (_jsx("span", { className: "ion-alert__icon", "aria-hidden": "true", children: icon ?? _jsx(IntentIcon, {}) })), _jsxs("div", { className: "ion-alert__content", children: [title && _jsx("p", { className: "ion-alert__title", children: title }), children && _jsx("div", { className: "ion-alert__message", children: children }), actions && _jsx("div", { className: "ion-alert__actions", children: actions })] }), onDismiss && (_jsx("button", { type: "button", className: "ion-alert__dismiss", onClick: onDismiss, "aria-label": dismissLabel, children: _jsx(DismissIcon, {}) }))] }));
+});
+Alert.displayName = 'Alert';
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert.js.map

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

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipProps {
+    /**
+     * The hint. A tooltip is text only — anything interactive or focusable
+     * belongs in a popover, because a tooltip cannot be focused, cannot be
+     * scrolled, and closes the moment the pointer leaves.
+     */
+    label: React.ReactNode;
+    /** Optional heading above the label. */
+    title?: React.ReactNode;
+    /**
+     * Matches the Figma `Placement` variant, and names where the TOOLTIP sits —
+     * not where the arrow points. `top` is above the trigger, with the arrow on
+     * the tooltip's bottom edge.
+     *
+     * Treated as a preference, not a guarantee: it flips to the opposite side
+     * when there is no room, which is the behaviour Figma cannot draw.
+     */
+    placement?: TooltipPlacement;
+    /** Milliseconds before it opens on hover. Focus always opens immediately. */
+    delay?: number;
+    /** Disable the tooltip without unmounting the trigger. */
+    isDisabled?: boolean;
+    /** The element the tooltip describes. Must accept a ref and DOM props. */
+    children: React.ReactElement;
+    className?: string;
+}
+/**
+ * Tooltip — Figma `Tooltip` (801:1568).
+ *
+ * Wraps its trigger rather than taking a ref, so the common case is one
+ * element deep: `<Tooltip label="..."><Button/></Tooltip>`.
+ *
+ * FOCUS OPENS IT, NOT JUST HOVER. A hover-only tooltip is invisible to keyboard
+ * and switch users, and `useTooltipTrigger` wires both plus Escape to dismiss.
+ * It also enforces one open tooltip at a time and a shared warmup, so moving
+ * along a row of icon buttons does not flash a tooltip per button.
+ *
+ * The trigger is cloned with the interaction props and a ref, which means it
+ * must forward both. Every component in this library does; a bare `<div>` does
+ * too. A function component that drops its ref will render, but the tooltip
+ * will have nothing to position against.
+ */
+export declare function Tooltip({ label, title, placement, delay, isDisabled, children, className, }: TooltipProps): React.JSX.Element;
+export declare namespace Tooltip {
+    var displayName: string;
+}
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAWpD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,SAAiB,EACjB,KAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,YAAY,qBAmEd;yBA3Ee,OAAO"}

package/dist/components/Tooltip.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement, useRef } from 'react';
+import { Overlay, useTooltip, useTooltipTrigger, useOverlayPosition, mergeProps, } from 'react-aria';
+import { useTooltipTriggerState } from 'react-stately';
+/**
+ * Tooltip — Figma `Tooltip` (801:1568).
+ *
+ * Wraps its trigger rather than taking a ref, so the common case is one
+ * element deep: `<Tooltip label="..."><Button/></Tooltip>`.
+ *
+ * FOCUS OPENS IT, NOT JUST HOVER. A hover-only tooltip is invisible to keyboard
+ * and switch users, and `useTooltipTrigger` wires both plus Escape to dismiss.
+ * It also enforces one open tooltip at a time and a shared warmup, so moving
+ * along a row of icon buttons does not flash a tooltip per button.
+ *
+ * The trigger is cloned with the interaction props and a ref, which means it
+ * must forward both. Every component in this library does; a bare `<div>` does
+ * too. A function component that drops its ref will render, but the tooltip
+ * will have nothing to position against.
+ */
+export function Tooltip({ label, title, placement = 'top', delay = 400, isDisabled, children, className, }) {
+    const state = useTooltipTriggerState({ delay, isDisabled });
+    const triggerRef = useRef(null);
+    const overlayRef = useRef(null);
+    const { triggerProps, tooltipProps } = useTooltipTrigger({ isDisabled }, state, triggerRef);
+    const { tooltipProps: ariaTooltipProps } = useTooltip(tooltipProps, state);
+    /*
+     * `offset` is the gap between trigger and bubble, and it has to clear the
+     * arrow or the caret sits on top of the thing it points at. 4px arrow plus
+     * a 4px gap.
+     */
+    const { overlayProps, arrowProps, placement: resolvedPlacement, } = useOverlayPosition({
+        targetRef: triggerRef,
+        overlayRef,
+        placement: placement,
+        offset: 8,
+        isOpen: state.isOpen,
+    });
+    // `resolvedPlacement` rather than the prop: react-aria flips on collision,
+    // and the arrow has to move with it or it points at nothing.
+    const side = (resolvedPlacement ?? placement).split(' ')[0];
+    return (_jsxs(_Fragment, { children: [cloneElement(children, mergeProps(children.props, {
+                ...triggerProps,
+                ref: triggerRef,
+            })), state.isOpen && (_jsx(Overlay, { children: _jsxs("div", { ...mergeProps(ariaTooltipProps, overlayProps), ref: overlayRef, className: ['ion-tooltip', `ion-tooltip--${side}`, className || '']
+                        .filter(Boolean)
+                        .join(' '), children: [_jsxs("div", { className: "ion-tooltip__bubble", children: [title && _jsx("div", { className: "ion-tooltip__title", children: title }), _jsx("div", { className: "ion-tooltip__label", children: label })] }), _jsx("div", { ...arrowProps, className: "ion-tooltip__arrow", "aria-hidden": "true" })] }) }))] }));
+}
+Tooltip.displayName = 'Tooltip';
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EACL,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,UAAU,GACX,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAgCvD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,GAAG,EACX,UAAU,EACV,QAAQ,EACR,SAAS,GACI;IACb,MAAM,KAAK,GAAG,sBAAsB,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;IAC5D,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,iBAAiB,CACtD,EAAE,UAAU,EAAE,EACd,KAAK,EACL,UAAU,CACX,CAAC;IACF,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAE3E;;;;OAIG;IACH,MAAM,EACJ,YAAY,EACZ,UAAU,EACV,SAAS,EAAE,iBAAiB,GAC7B,GAAG,kBAAkB,CAAC;QACrB,SAAS,EAAE,UAAU;QACrB,UAAU;QACV,SAAS,EAAE,SAAsB;QACjC,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC,CAAC;IAEH,2EAA2E;IAC3E,6DAA6D;IAC7D,MAAM,IAAI,GAAG,CAAC,iBAAiB,IAAI,SAAS,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAE5D,OAAO,CACL,8BACG,YAAY,CACX,QAAQ,EACR,UAAU,CAAC,QAAQ,CAAC,KAAgC,EAAE;gBACpD,GAAG,YAAY;gBACf,GAAG,EAAE,UAAU;aAChB,CAAC,CACH,EACA,KAAK,CAAC,MAAM,IAAI,CACf,KAAC,OAAO,cACN,kBACM,UAAU,CAAC,gBAAgB,EAAE,YAAY,CAAC,EAC9C,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,CAAC,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE,SAAS,IAAI,EAAE,CAAC;yBAChE,MAAM,CAAC,OAAO,CAAC;yBACf,IAAI,CAAC,GAAG,CAAC,aAEZ,eAAK,SAAS,EAAC,qBAAqB,aACjC,KAAK,IAAI,cAAK,SAAS,EAAC,oBAAoB,YAAE,KAAK,GAAO,EAC3D,cAAK,SAAS,EAAC,oBAAoB,YAAE,KAAK,GAAO,IAC7C,EACN,iBACM,UAAU,EACd,SAAS,EAAC,oBAAoB,iBAGlB,MAAM,GAClB,IACE,GACE,CACX,IACA,CACJ,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/components/index.d.ts

@@ -2,6 +2,8 @@ export { Button } from './Button.js';
 export type { ButtonProps } from './Button.js';
 export { Tabs, TabItem } from './Tabs.js';
 export type { TabsProps, TabsType, TabsSize } from './Tabs.js';
+export { Alert } from './Alert.js';
+export type { AlertProps, AlertIntent, AlertEmphasis, AlertLayout, } from './Alert.js';
 export { Badge } from './Badge.js';
 export type { BadgeProps, BadgeIntent } from './Badge.js';
 export { Input } from './Input.js';
@@ -26,6 +28,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 { Tooltip } from './Tooltip.js';
+export type { TooltipProps, TooltipPlacement } from './Tooltip.js';
 export { Modal } from './Modal.js';
 export type { ModalProps, ModalSize, ModalAlign } from './Modal.js';
 export { Link } from './Link.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"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,EACV,UAAU,EACV,WAAW,EACX,aAAa,EACb,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,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,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACpE,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

@@ -1,5 +1,6 @@
 export { Button } from './Button.js';
 export { Tabs, TabItem } from './Tabs.js';
+export { Alert } from './Alert.js';
 export { Badge } from './Badge.js';
 export { Input } from './Input.js';
 export { PhoneInput } from './PhoneInput.js';
@@ -12,6 +13,7 @@ export { Avatar, AvatarGroup } from './Avatar.js';
 export { Header } from './Header.js';
 export { Logo, LogoMark } from './Logo.js';
 export { Divider } from './Divider.js';
+export { Tooltip } from './Tooltip.js';
 export { Modal } from './Modal.js';
 export { Link } from './Link.js';
 export { NavItem } from './NavItem.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,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,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,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"}
+{"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;AAOnC,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,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,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/alert.css

@@ -0,0 +1,241 @@
+/*
+ * Alert
+ *
+ * Measured from Figma `Alert` (812:1902). Intent x Emphasis x Layout.
+ *
+ * INTENT IS A SET OF SLOTS, NOT A RULE PER PROPERTY
+ *
+ * Six intents times two emphases is twelve colour combinations. Reassigning
+ * four variables per combination keeps the structural rules — padding, gap,
+ * radius, the icon box — written once, and means adding an intent is four
+ * lines rather than a new copy of the whole component.
+ *
+ * The intents match Badge exactly: `surface/<intent>-subtle`,
+ * `border/<intent>-subtle`, `text/<intent>`, `icon/<intent>`, with neutral on
+ * `surface/muted`. A status mapped to a Badge intent can be passed here.
+ */
+.ion-alert {
+  --ion-alert-surface: var(--surface-information-subtle);
+  --ion-alert-border: var(--border-information-subtle);
+  --ion-alert-text: var(--text-information);
+  --ion-alert-icon: var(--icon-information);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-12);
+  padding: var(--spacing-16);
+  background-color: var(--ion-alert-surface);
+  border: var(--border-width-default) solid var(--ion-alert-border);
+  border-radius: var(--radius-md);
+  color: var(--ion-alert-text);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+}
+
+/* --- Intent, subtle tier --- */
+.ion-alert--neutral {
+  --ion-alert-surface: var(--surface-muted);
+  --ion-alert-border: var(--border-default);
+  --ion-alert-text: var(--text-secondary);
+  --ion-alert-icon: var(--icon-secondary);
+}
+
+.ion-alert--primary {
+  --ion-alert-surface: var(--surface-primary-subtle);
+  --ion-alert-border: var(--border-primary-subtle);
+  --ion-alert-text: var(--text-link);
+  --ion-alert-icon: var(--icon-primary);
+}
+
+.ion-alert--success {
+  --ion-alert-surface: var(--surface-success-subtle);
+  --ion-alert-border: var(--border-success-subtle);
+  --ion-alert-text: var(--text-success);
+  --ion-alert-icon: var(--icon-success);
+}
+
+.ion-alert--warning {
+  --ion-alert-surface: var(--surface-warning-subtle);
+  --ion-alert-border: var(--border-warning-subtle);
+  --ion-alert-text: var(--text-warning);
+  --ion-alert-icon: var(--icon-warning);
+}
+
+.ion-alert--error {
+  --ion-alert-surface: var(--surface-error-subtle);
+  --ion-alert-border: var(--border-error-subtle);
+  --ion-alert-text: var(--text-error);
+  --ion-alert-icon: var(--icon-error);
+}
+
+.ion-alert--information {
+  --ion-alert-surface: var(--surface-information-subtle);
+  --ion-alert-border: var(--border-information-subtle);
+  --ion-alert-text: var(--text-information);
+  --ion-alert-icon: var(--icon-information);
+}
+
+/*
+ * --- Solid tier ---
+ *
+ * The accent surface at full strength under `text/on-color`, the same pairing
+ * Button's solid variants use. Written after the intents so it wins on order
+ * at equal specificity, and only the surface and border differ per intent —
+ * the text and icon are the same two roles throughout.
+ *
+ * KNOWN, pending a decision on the accent ramps: solid `success` measures
+ * 3.69:1 in Light and solid `information` 3.44:1 in Dark against
+ * `text/on-color`, both short of WCAG AA's 4.5:1 for normal text. Neither is a
+ * one-step fix — every accent runs base/hover/pressed at 600/700/800, so
+ * moving a base onto 700 makes it identical to its own hover. See AGENTS.md.
+ */
+.ion-alert--solid {
+  --ion-alert-text: var(--text-on-color);
+  --ion-alert-icon: var(--icon-on-color);
+}
+
+.ion-alert--solid.ion-alert--neutral {
+  --ion-alert-surface: var(--surface-inverse);
+  --ion-alert-border: var(--border-inverse);
+}
+
+.ion-alert--solid.ion-alert--primary {
+  --ion-alert-surface: var(--surface-primary);
+  --ion-alert-border: var(--border-primary-strong);
+}
+
+.ion-alert--solid.ion-alert--success {
+  --ion-alert-surface: var(--surface-success);
+  --ion-alert-border: var(--border-success-strong);
+}
+
+.ion-alert--solid.ion-alert--warning {
+  --ion-alert-surface: var(--surface-warning);
+  --ion-alert-border: var(--border-warning-strong);
+}
+
+.ion-alert--solid.ion-alert--error {
+  --ion-alert-surface: var(--surface-error);
+  --ion-alert-border: var(--border-error-strong);
+}
+
+.ion-alert--solid.ion-alert--information {
+  --ion-alert-surface: var(--surface-information);
+  --ion-alert-border: var(--border-information-strong);
+}
+
+/*
+ * --- Banner ---
+ *
+ * A banner meets its container's edges, so the radius goes and the SIDE
+ * borders go with it: a 1px rule at the viewport edge is invisible on one side
+ * and reads as a seam on the other. The block edges keep theirs, which is what
+ * separates a subtle banner from the page behind it.
+ */
+.ion-alert--banner {
+  border-radius: 0;
+  border-inline: none;
+}
+
+/* --- Parts --- */
+.ion-alert__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--ion-alert-icon);
+}
+
+/*
+ * Sized to the icon ladder rather than to `1em`, unlike Link's. A Link
+ * inherits its type from the sentence around it; an Alert sets its own, so the
+ * icon has a fixed rung to sit on.
+ *
+ * The line-height box is what it centres against: `--type-body-line-height` is
+ * 24 and the icon is 20, so the 2px above and below line the glyph up with the
+ * first line of text rather than with the top of the box.
+ */
+.ion-alert__icon svg {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+.ion-alert__icon,
+.ion-alert__dismiss {
+  min-height: var(--type-body-line-height);
+}
+
+.ion-alert__content {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.ion-alert__title {
+  margin: 0;
+  font-weight: var(--font-weight-medium);
+}
+
+.ion-alert__message {
+  margin: 0;
+  font-weight: var(--font-weight-regular);
+
+  /* Long tokens — a URL, an id — must wrap rather than widen the alert. */
+  overflow-wrap: anywhere;
+}
+
+.ion-alert__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  flex-wrap: wrap;
+}
+
+/*
+ * The dismiss target is 32px around a 20px glyph. WCAG 2.2 SC 2.5.8 asks for
+ * 24x24 minimum and the icon alone would fail it — the same reasoning as
+ * Modal's close. Do not shrink it to fit the icon.
+ */
+.ion-alert__dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-32);
+  height: var(--spacing-32);
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--ion-alert-icon);
+  cursor: pointer;
+  transition: background-color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-alert__dismiss svg {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+@media (hover: hover) {
+  .ion-alert__dismiss:hover {
+    background-color: var(--surface-hover);
+  }
+}
+
+.ion-alert__dismiss:focus-visible {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: 2px;
+}
+
+/*
+ * On a solid surface the focus ring has to come from the text colour, not the
+ * brand ring — `ring/focus` is a mid-blue that all but disappears against a
+ * solid primary or information surface.
+ */
+.ion-alert--solid .ion-alert__dismiss:focus-visible {
+  outline-color: var(--text-on-color);
+}

package/dist/styles/index.css

@@ -29,6 +29,7 @@
 @import url('./icon.css');
 @import url('./button.css');
 @import url('./tabs.css');
+@import url('./alert.css');
 @import url('./badge.css');
 @import url('./input.css');
 @import url('./phone-input.css');
@@ -44,6 +45,7 @@
 @import url('./divider.css');
 @import url('./link.css');
 @import url('./modal.css');
+@import url('./tooltip.css');
 @import url('./nav-item.css');
 @import url('./scroll-progress.css');
 @import url('./full-card.css');

package/dist/styles/tooltip.css

@@ -0,0 +1,118 @@
+/*
+ * Tooltip
+ *
+ * Measured from Figma `Tooltip` (801:1568). Four placements.
+ *
+ * THE INVERSE TRIO
+ *
+ * `surface/inverse` with `text/inverse` on it — the only pairing in the system
+ * that inverts as a unit, so the tooltip is dark on a light theme and light on
+ * a dark one with no second variant and no `@media` of its own. Both were
+ * defined long before anything used them; this is `text/inverse`'s first
+ * consumer anywhere.
+ */
+.ion-tooltip {
+  position: absolute;
+  z-index: 1100;
+
+  /*
+   * Above the modal's 1000. A tooltip on a control inside a dialog is the
+   * ordinary case — a trigger in a modal footer, say — and at a lower z-index
+   * it would render behind the panel it belongs to.
+   */
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+/*
+ * The bubble carries the surface; the arrow is a sibling.
+ *
+ * Drawing the arrow as a rotated pseudo-element ON the bubble is the usual
+ * shortcut and it fights the shadow: a rotated square inherits the box-shadow
+ * and casts a second, offset one. Keeping them separate means the arrow can
+ * take the same fill without the same shadow.
+ */
+.ion-tooltip__bubble {
+  /*
+   * A hint, not a container. Long enough for a sentence, short enough that it
+   * never becomes a paragraph — anything that needs more belongs in a popover.
+   */
+  max-width: 280px;
+  padding: var(--spacing-8) var(--spacing-12);
+  background-color: var(--surface-inverse);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--ion-shadow-shadow-md);
+  color: var(--text-inverse);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+
+  /*
+   * Wrap long hints rather than forcing the overlay wider than the viewport.
+   * `overflow-wrap` catches the single-long-token case that `max-width` alone
+   * cannot.
+   */
+  overflow-wrap: anywhere;
+}
+
+.ion-tooltip__title {
+  margin-bottom: var(--spacing-4);
+  font-weight: var(--font-weight-medium);
+}
+
+.ion-tooltip__label {
+  font-weight: var(--font-weight-regular);
+}
+
+/*
+ * The arrow, as a triangle from borders rather than a rotated box.
+ *
+ * A rotated square would need its own shadow suppression and would round its
+ * corners with the bubble's radius. Border triangles have neither problem, and
+ * the transparent sides collapse to nothing.
+ *
+ * `--ion-tooltip-arrow` is the visible length; the base is twice that, which
+ * is what makes the caret 8 wide and 4 deep at the default.
+ */
+.ion-tooltip__arrow {
+  --ion-tooltip-arrow: var(--spacing-4);
+
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: var(--ion-tooltip-arrow) solid transparent;
+}
+
+/*
+ * Placement names where the TOOLTIP sits, so the arrow is always on the
+ * opposite edge — `--top` puts the caret underneath, pointing down at the
+ * trigger below it.
+ *
+ * These follow react-aria's RESOLVED placement, not the requested one. It
+ * flips on collision, and an arrow left on the requested side would point away
+ * from the trigger entirely.
+ */
+.ion-tooltip--top .ion-tooltip__arrow {
+  bottom: calc(-2 * var(--ion-tooltip-arrow));
+  border-top-color: var(--surface-inverse);
+  border-bottom-width: 0;
+}
+
+.ion-tooltip--bottom .ion-tooltip__arrow {
+  top: calc(-2 * var(--ion-tooltip-arrow));
+  border-bottom-color: var(--surface-inverse);
+  border-top-width: 0;
+}
+
+.ion-tooltip--left .ion-tooltip__arrow {
+  right: calc(-2 * var(--ion-tooltip-arrow));
+  border-left-color: var(--surface-inverse);
+  border-right-width: 0;
+}
+
+.ion-tooltip--right .ion-tooltip__arrow {
+  left: calc(-2 * var(--ion-tooltip-arrow));
+  border-right-color: var(--surface-inverse);
+  border-left-width: 0;
+}

package/package.json

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