magnaui 0.1.0

package/dist/components/ui/password-strength.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { DisplayAsset } from "./display-asset.js";
+import { passwordAssets } from "./display-assets.js";
+export const defaultRequirements = [
+    {
+        label: 'At least 1 uppercase letter',
+        test: (value) => /[A-Z]/.test(value),
+    },
+    { label: 'At least 1 number', test: (value) => /[0-9]/.test(value) },
+    { label: 'At least 8 characters', test: (value) => value.length >= 8 },
+];
+export const Root = React.forwardRef(function PasswordStrength({ value = '', requirements = defaultRequirements, heading = 'Must contain at least:', className, ...props }, ref) {
+    const results = requirements.map((requirement) => requirement.test(value));
+    const fulfilled = results.filter(Boolean).length;
+    const level = !value || !requirements.length
+        ? 0
+        : Math.max(1, Math.ceil((fulfilled / requirements.length) * 3));
+    const levels = ['Empty', 'Weak', 'Moderate', 'Strong'];
+    return (_jsxs("div", { ref: ref, ...props, className: cn('w-[300px] max-w-full space-y-2 pt-1.5 text-paragraph-xs text-text-sub-600', className), children: [_jsx("div", { className: 'flex gap-2', "aria-hidden": 'true', children: ['bg-error-base', 'bg-warning-base', 'bg-success-base'].map((color, index) => (_jsx("span", { className: cn('h-1 flex-1 rounded-[1.2px]', index < level ? color : 'bg-bg-soft-200') }, color))) }), _jsxs("p", { className: 'sr-only', role: 'status', children: [levels[level], ": ", fulfilled, " of ", requirements.length, " requirements met."] }), heading && _jsx("p", { children: heading }), _jsx("ul", { className: 'space-y-2', children: requirements.map((requirement, index) => (_jsxs("li", { className: 'flex items-center gap-1', children: [_jsx("span", { className: 'flex size-4 shrink-0 items-center justify-center', children: _jsx(DisplayAsset, { src: !value
+                                    ? passwordAssets.empty
+                                    : results[index]
+                                        ? passwordAssets.met
+                                        : passwordAssets.unmet }) }), _jsxs("span", { children: [_jsx("span", { className: 'sr-only', children: results[index] ? 'Met: ' : 'Not met: ' }), requirement.label] })] }, `${index}-${requirement.label}`))) })] }));
+});

package/dist/components/ui/payment-icon.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { paymentIconAssets } from "./display-assets.js";
+export type PaymentIconType = keyof typeof paymentIconAssets;
+export type PaymentIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    type?: PaymentIconType;
+    label?: string;
+};
+export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    type?: PaymentIconType;
+    label?: string;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ui/payment-icon.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { DisplayAsset } from "./display-asset.js";
+import { paymentIconAssets } from "./display-assets.js";
+const backgrounds = {
+    water: 'bg-verified-lighter',
+    gas: 'bg-error-lighter',
+    electricity: 'bg-away-lighter',
+    donate: 'bg-highlighted-lighter',
+    internet: 'bg-information-lighter',
+    phone: 'bg-warning-lighter',
+    rent: 'bg-success-lighter',
+    tax: 'bg-feature-lighter',
+};
+export const Root = React.forwardRef(function PaymentIcon({ type = 'water', label, className, ...props }, ref) {
+    return (_jsx("span", { ref: ref, role: label ? 'img' : undefined, "aria-label": label, "aria-hidden": label ? undefined : true, ...props, className: cn('inline-flex size-10 shrink-0 items-center justify-center rounded-full', backgrounds[type], className), children: _jsx(DisplayAsset, { src: paymentIconAssets[type] }) }));
+});

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import * as Popover from "@radix-ui/react-popover";
+export declare const Root: React.FC<Popover.PopoverProps>;
+export declare const Anchor: React.ForwardRefExoticComponent<Popover.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Trigger: React.ForwardRefExoticComponent<Popover.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Content: React.ForwardRefExoticComponent<Omit<Popover.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    showArrow?: boolean;
+    unstyled?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Close: React.ForwardRefExoticComponent<Omit<Popover.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    unstyled?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type FooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: 'stretch' | 'text' | 'dots';
+    step?: number;
+    totalSteps?: number;
+    showBack?: boolean;
+    backLabel?: string;
+    nextLabel?: string;
+    onBack?: () => void;
+    onNext?: () => void;
+    backDisabled?: boolean;
+    nextDisabled?: boolean;
+};
+export declare const Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    variant?: "stretch" | "text" | "dots";
+    step?: number;
+    totalSteps?: number;
+    showBack?: boolean;
+    backLabel?: string;
+    nextLabel?: string;
+    onBack?: () => void;
+    onNext?: () => void;
+    backDisabled?: boolean;
+    nextDisabled?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/popover.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { Slottable } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+import * as Button from "./button.js";
+export const Root = Popover.Root;
+export const Anchor = Popover.Anchor;
+export const Trigger = Popover.Trigger;
+const motion = 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=top]:slide-in-from-bottom-2 data-[side=right]:slide-in-from-left-2 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2';
+export const Content = React.forwardRef(function Content({ children, unstyled = false, showArrow = true, className, align = 'center', sideOffset = 12, collisionPadding = 12, arrowPadding = 12, ...props }, ref) {
+    return (_jsx(Popover.Portal, { children: _jsxs(Popover.Content, { ...props, ref: ref, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, arrowPadding: arrowPadding, className: cn('z-50', motion, !unstyled &&
+                'w-max rounded-2xl bg-bg-white-0 p-5 shadow-regular-md ring-1 ring-inset ring-stroke-soft-200', className), children: [_jsx(Slottable, { children: children }), showArrow && (_jsx(Popover.Arrow, { asChild: true, children: _jsx("div", { className: 'size-[11px] -translate-y-[calc(50%+1px)] -rotate-45 rounded-bl-[3px] border border-stroke-soft-200 bg-bg-white-0', style: { clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)' } }) }))] }) }));
+});
+export const Close = React.forwardRef(function Close({ unstyled, className, ...props }, ref) {
+    return (_jsx(Popover.Close, { ...props, ref: ref, className: cn(!unstyled && 'absolute right-4 top-4', className) }));
+});
+export const Footer = React.forwardRef(function PopoverFooter({ variant = 'stretch', step = 1, totalSteps = 3, showBack = true, backLabel = 'Back', nextLabel = 'Next', onBack, onNext, backDisabled, nextDisabled, className, children, ...props }, ref) {
+    const total = Number.isFinite(totalSteps)
+        ? Math.max(1, Math.floor(totalSteps))
+        : 3;
+    const current = Number.isFinite(step)
+        ? Math.max(1, Math.min(total, Math.floor(step)))
+        : 1;
+    return (_jsxs("div", { ref: ref, ...props, className: cn('flex min-w-0 flex-wrap items-center gap-3 bg-bg-white-0 px-5 py-4', className), children: [variant === 'text' && (_jsxs("span", { role: 'status', className: 'me-auto text-paragraph-sm text-text-sub-600', children: ["Step ", current, " of ", total] })), variant === 'dots' && (_jsx("span", { role: 'status', "aria-label": `Step ${current} of ${total}`, className: 'me-auto flex gap-2.5', children: Array.from({ length: total }, (_, index) => (_jsx("span", { "aria-hidden": 'true', className: cn('size-2 rounded-full', index + 1 === current ? 'bg-primary-base' : 'bg-bg-soft-200') }, index))) })), children ?? (_jsxs("div", { className: cn('flex min-w-0 gap-3', variant === 'stretch' ? 'w-full' : 'ms-auto'), children: [showBack && (_jsx(Button.Root, { type: 'button', variant: 'neutral', mode: 'stroke', size: 'small', disabled: backDisabled || !onBack, onClick: onBack, className: variant === 'stretch' ? 'flex-1' : 'min-w-20', children: backLabel })), _jsx(Button.Root, { type: 'button', variant: 'primary', size: 'small', disabled: nextDisabled || !onNext, onClick: onNext, className: variant === 'stretch' ? 'flex-1' : 'min-w-20', children: nextLabel })] }))] }));
+});

package/dist/components/ui/progress-bar.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+type Appearance = {
+    color: 'blue' | 'red' | 'orange' | 'green';
+};
+export declare const progressBarVariants: (options?: Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) => Record<"progress" | "root", (overrides?: (Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) | undefined) => string>;
+export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Partial<Appearance> & {
+    value?: number;
+    max?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export type LabelProps = React.ComponentPropsWithoutRef<typeof Root> & {
+    label: React.ReactNode;
+    placement?: 'top' | 'right';
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+    percentageLabel?: React.ReactNode;
+    showPercentage?: boolean;
+};
+export declare const Label: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & Partial<Appearance> & {
+    value?: number;
+    max?: number;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    label: React.ReactNode;
+    placement?: "top" | "right";
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+    percentageLabel?: React.ReactNode;
+    showPercentage?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/ui/progress-bar.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { slotRecipe, toneClasses } from "./magna-recipe.js";
+import { cn } from "../../utils/cn.js";
+export const progressBarVariants = slotRecipe({ color: 'blue' }, ({ color }) => ({
+    root: 'w-full h-1.5 rounded-full bg-bg-soft-200',
+    progress: [
+        'rounded-[inherit] h-full transition-[width] duration-300 ease-out',
+        toneClasses[color].solid,
+    ],
+}));
+export const Root = React.forwardRef(function ProgressBar({ value = 0, max = 100, color, className, ...props }, ref) {
+    const limit = Number.isFinite(max) && max > 0 ? max : 100;
+    const current = Number.isFinite(value)
+        ? Math.max(0, Math.min(limit, value))
+        : 0;
+    const styles = progressBarVariants({ color });
+    return (_jsx("div", { ref: ref, role: 'progressbar', "aria-valuemin": 0, "aria-valuemax": limit, "aria-valuenow": current, ...props, className: styles.root({ className }), children: _jsx("div", { "aria-hidden": 'true', className: styles.progress(), style: { width: `${(100 * current) / limit}%` } }) }));
+});
+Root.displayName = 'ProgressBarRoot';
+export const Label = React.forwardRef(function ProgressBarLabel({ label, placement = 'top', description, action, percentageLabel, showPercentage = true, value = 0, max = 100, className, ...props }, ref) {
+    const labelId = React.useId();
+    const limit = Number.isFinite(max) && max > 0 ? max : 100;
+    const current = Number.isFinite(value)
+        ? Math.max(0, Math.min(limit, value))
+        : 0;
+    const percentage = percentageLabel ?? `${Math.round((current / limit) * 100)}%`;
+    return (_jsxs("div", { className: cn('w-[320px] max-w-full', placement === 'right' ? 'flex items-center gap-2' : 'space-y-1.5', className), children: [placement === 'top' ? (_jsxs("div", { className: 'flex items-start justify-between gap-1.5', children: [_jsx("span", { id: labelId, className: 'text-label-sm text-text-strong-950', children: label }), showPercentage && (_jsx("span", { "aria-hidden": 'true', className: 'text-paragraph-xs text-text-sub-600', children: percentage }))] })) : (_jsx("span", { id: labelId, className: 'sr-only', children: label })), _jsx(Root, { ref: ref, value: current, max: limit, "aria-labelledby": labelId, ...props }), placement === 'right'
+                ? showPercentage && (_jsx("span", { "aria-hidden": 'true', className: 'shrink-0 text-paragraph-xs text-text-sub-600', children: percentage }))
+                : (action || description) && (_jsxs("div", { className: 'flex flex-wrap items-center gap-1 text-paragraph-xs text-text-sub-600', children: [action, description && _jsx("span", { children: description })] }))] }));
+});

package/dist/components/ui/progress-circle.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+type Appearance = {
+    size: '80' | '72' | '64' | '56' | '48';
+};
+export declare const progressCircleVariants: (options?: Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) => Record<"text", (overrides?: (Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) | undefined) => string>;
+export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<React.SVGProps<SVGSVGElement>, "value"> & Partial<Appearance> & {
+    value?: number;
+    max?: number;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export {};

package/dist/components/ui/progress-circle.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { slotRecipe } from "./magna-recipe.js";
+const strokeWidths = { '80': 6.4, '72': 5.75, '64': 5.1, '56': 4.5, '48': 6.7 };
+export const progressCircleVariants = slotRecipe({ size: '80' }, ({ size }) => ({
+    text: Number(size) < 64 ? 'text-label-xs' : 'text-label-sm',
+}));
+export const Root = React.forwardRef(function ProgressCircle({ size = '80', value = 0, max = 100, children, className, ...props }, ref) {
+    const limit = Number.isFinite(max) && max > 0 ? max : 100;
+    const current = Number.isFinite(value)
+        ? Math.max(0, Math.min(limit, value))
+        : 0;
+    const width = Number(size);
+    const stroke = strokeWidths[size];
+    const center = width / 2;
+    const shape = {
+        cx: center,
+        cy: center,
+        r: center - stroke / 2,
+        strokeWidth: stroke,
+        fill: 'none',
+    };
+    return (_jsxs("div", { className: cn('relative', className), children: [_jsxs("svg", { ref: ref, width: width, height: width, viewBox: `0 0 ${width} ${width}`, role: 'progressbar', "aria-valuemin": 0, "aria-valuemax": limit, "aria-valuenow": current, ...props, children: [_jsx("circle", { ...shape, className: 'stroke-bg-soft-200' }), _jsx("circle", { ...shape, pathLength: 100, strokeDasharray: '100', strokeDashoffset: 100 - (current / limit) * 100, transform: `rotate(-90 ${center} ${center})`, className: 'stroke-primary-base transition-[stroke-dashoffset] duration-300 ease-out' })] }), children != null && (_jsx("div", { className: progressCircleVariants({ size }).text({
+                    className: 'absolute inset-0 grid place-items-center text-center',
+                }), children: children }))] }));
+});
+Root.displayName = 'ProgressCircleRoot';

package/dist/components/ui/radio.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-radio-group";
+declare const Group: React.ForwardRefExoticComponent<Primitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export type RadioProps = React.ComponentPropsWithoutRef<typeof Primitive.Item>;
+declare const Item: React.ForwardRefExoticComponent<Omit<Primitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type ContentProps = {
+    label: React.ReactNode;
+    sublabel?: React.ReactNode;
+    description?: React.ReactNode;
+    badge?: React.ReactNode;
+};
+export type RadioLabelProps = Omit<RadioProps, 'children' | 'asChild'> & ContentProps & {
+    flip?: boolean;
+    action?: React.ReactNode;
+    children?: React.ReactNode;
+    controlClassName?: string;
+};
+/** Figma 515:4282. Actions stay outside the associated label, so they do not toggle it. */
+declare const Label: React.ForwardRefExoticComponent<Omit<Omit<Primitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref">, "children" | "asChild"> & ContentProps & {
+    flip?: boolean;
+    action?: React.ReactNode;
+    children?: React.ReactNode;
+    controlClassName?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type RadioCardVariant = 'basic' | 'icon' | 'avatar' | 'provider' | 'brand' | 'company';
+export type RadioCardProps = Omit<RadioProps, 'children' | 'asChild'> & ContentProps & {
+    variant?: RadioCardVariant;
+    leading?: React.ReactNode;
+    children?: React.ReactNode;
+};
+/** Figma 515:4347. One Radix radio owns the complete selectable card. */
+declare const Card: React.ForwardRefExoticComponent<Omit<Omit<Primitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref">, "children" | "asChild"> & ContentProps & {
+    variant?: RadioCardVariant;
+    leading?: React.ReactNode;
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Group, Item, Label, Card };

package/dist/components/ui/radio.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slottable } from "@radix-ui/react-slot";
+import * as Primitive from "@radix-ui/react-radio-group";
+import * as LabelPrimitive from "./label.js";
+import { cn } from "../../utils/cn.js";
+const Group = Primitive.Root;
+function Control() {
+    return (_jsxs("span", { "aria-hidden": 'true', className: 'relative flex size-4 items-center justify-center rounded-full bg-bg-soft-200 transition-colors group-hover/radio:bg-bg-sub-300 group-focus/radio:bg-primary-base group-disabled/radio:bg-bg-soft-200 group-data-[state=checked]/radio:bg-bg-white-0', children: [_jsx("span", { className: 'absolute inset-[1.5px] rounded-full bg-bg-white-0 shadow-[0_2px_2px_#1b1c1d1f] group-disabled/radio:hidden' }), _jsx(Primitive.Indicator, { className: 'absolute inset-0 rounded-full border-4 border-primary-base transition-colors group-hover/radio:border-primary-darker group-focus/radio:border-primary-dark group-disabled/radio:border-bg-soft-200' })] }));
+}
+const Item = React.forwardRef(function Item({ className, children, ...props }, ref) {
+    return (_jsxs(Primitive.Item, { ...props, ref: ref, className: cn('group/radio relative flex size-5 shrink-0 items-center justify-center outline-none disabled:cursor-not-allowed', className), children: [_jsx(Control, {}), _jsx(Slottable, { children: children })] }));
+});
+/** Figma 515:4282. Actions stay outside the associated label, so they do not toggle it. */
+const Label = React.forwardRef(function Label({ label, sublabel, description, badge, action, children, flip = false, disabled, id, className, controlClassName, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...props }, ref) {
+    const generatedId = React.useId();
+    const controlId = id ?? generatedId;
+    const labelId = `${controlId}-label`;
+    const descriptionId = `${controlId}-description`;
+    return (_jsxs("div", { className: cn('flex w-full max-w-[300px] items-start gap-2', className), "data-disabled": disabled || undefined, dir: props.dir, children: [_jsx(Item, { ...props, ref: ref, id: controlId, disabled: disabled, "aria-labelledby": labelledBy ?? labelId, "aria-describedby": [describedBy, description ? descriptionId : undefined]
+                    .filter(Boolean)
+                    .join(' ') || undefined, className: cn(flip && 'order-2', controlClassName) }), _jsxs("div", { className: 'min-w-0 flex-1 space-y-2.5', children: [_jsxs(LabelPrimitive.Root, { htmlFor: controlId, disabled: disabled, className: 'block min-w-0', children: [_jsxs("span", { className: 'flex flex-wrap items-center gap-1', children: [_jsx("span", { id: labelId, className: cn(description ? 'text-label-sm' : 'text-paragraph-sm', disabled ? 'text-text-sub-600' : 'text-text-strong-950'), children: label }), sublabel && (_jsx("span", { className: cn('text-paragraph-xs', disabled ? 'text-text-soft-400' : 'text-text-sub-600'), children: sublabel })), badge] }), description && (_jsx("span", { id: descriptionId, className: cn('mt-1 block text-paragraph-xs', disabled ? 'text-text-soft-400' : 'text-text-sub-600'), children: description }))] }), action, children] })] }));
+});
+Label.displayName = 'RadioLabel';
+/** Figma 515:4347. One Radix radio owns the complete selectable card. */
+const Card = React.forwardRef(function Card({ label, sublabel, description, badge, leading, children, variant = 'basic', disabled, className, id, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...props }, ref) {
+    const generatedId = React.useId();
+    const controlId = id ?? generatedId;
+    const labelId = `${controlId}-label`;
+    const descriptionId = `${controlId}-description`;
+    return (_jsxs(Primitive.Item, { ...props, ref: ref, id: controlId, disabled: disabled, "data-variant": variant, "aria-labelledby": labelledBy ?? labelId, "aria-describedby": [describedBy, description ? descriptionId : undefined]
+            .filter(Boolean)
+            .join(' ') || undefined, className: cn('group/radio flex min-h-[72px] w-full max-w-[360px] cursor-pointer items-start gap-3.5 rounded-xl border border-stroke-soft-200 bg-bg-white-0 p-[15px] text-start shadow-regular-xs outline-none transition-colors hover:border-transparent hover:bg-bg-weak-50 hover:shadow-none focus-visible:ring-2 focus-visible:ring-primary-alpha-24 disabled:cursor-not-allowed disabled:!border-stroke-soft-200 disabled:!bg-bg-white-0 disabled:!shadow-none data-[state=checked]:border-primary-base data-[state=indeterminate]:border-primary-base data-[state=checked]:bg-bg-white-0 data-[state=indeterminate]:bg-bg-white-0 data-[state=checked]:shadow-none data-[state=indeterminate]:shadow-none', className), children: [leading && (_jsx("span", { "aria-hidden": 'true', className: cn('flex shrink-0 items-center justify-center', variant === 'provider' ? 'h-6 w-8' : 'size-10', variant === 'icon' &&
+                    'rounded-full border border-stroke-soft-200 bg-bg-white-0 shadow-regular-xs', variant === 'company' &&
+                    'overflow-hidden rounded-full bg-static-white'), children: leading })), _jsxs("span", { className: 'flex min-w-0 flex-1 flex-col gap-1', children: [_jsxs("span", { className: 'flex flex-wrap items-center gap-1', children: [_jsx("span", { id: labelId, className: cn('text-label-sm', disabled ? 'text-text-sub-600' : 'text-text-strong-950'), children: label }), sublabel && (_jsx("span", { className: cn('text-paragraph-xs', disabled ? 'text-text-soft-400' : 'text-text-sub-600'), children: sublabel })), badge] }), description && (_jsx("span", { id: descriptionId, className: cn('text-paragraph-xs', disabled ? 'text-text-soft-400' : 'text-text-sub-600'), children: description })), children] }), _jsx(Control, {})] }));
+});
+Card.displayName = 'RadioCard';
+export { Group, Item, Label, Card };

package/dist/components/ui/rating.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+import * as RadioPrimitive from "@radix-ui/react-radio-group";
+export type RatingType = 'star' | 'heart' | 'number' | 'emoji';
+declare const artwork: {
+    star: {
+        empty: string;
+        muted: string;
+        half: string;
+        full: string;
+    };
+    heart: {
+        empty: string;
+        muted: string;
+        half: string;
+        full: string;
+    };
+};
+declare function Icon({ type, state, className, }: {
+    type?: 'star' | 'heart';
+    state?: keyof typeof artwork.star;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export type ReviewProps = React.HTMLAttributes<HTMLDivElement> & {
+    value: number;
+    type?: 'star' | 'heart';
+    alignment?: 'ratings' | 'vertical' | 'horizontal';
+    description?: React.ReactNode;
+    reviewLink?: React.ReactNode;
+};
+declare function Review({ value, type, alignment, description, reviewLink, className, ...props }: ReviewProps): import("react/jsx-runtime").JSX.Element;
+declare const Cell: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    type?: "star" | "heart";
+    selected?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type BarProps = Omit<React.ComponentPropsWithoutRef<typeof RadioPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange'> & {
+    type?: RatingType;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+};
+declare const Bar: React.ForwardRefExoticComponent<Omit<Omit<RadioPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref">, "defaultValue" | "value" | "onValueChange"> & {
+    type?: RatingType;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+} & React.RefAttributes<HTMLDivElement>>;
+export type BarItemProps = Omit<React.ComponentPropsWithoutRef<typeof RadioPrimitive.Item>, 'value' | 'type'> & {
+    value: number;
+    type?: RatingType;
+    emojiSrc?: string;
+};
+declare const BarItem: React.ForwardRefExoticComponent<Omit<Omit<RadioPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref">, "type" | "value"> & {
+    value: number;
+    type?: RatingType;
+    emojiSrc?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type BarAreaProps = BarProps & {
+    textareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    feedbackLabel?: string;
+};
+declare function BarArea({ className, textareaProps, feedbackLabel, ...props }: BarAreaProps): import("react/jsx-runtime").JSX.Element;
+export { Review, Cell, Bar, BarItem, BarArea, Icon };

package/dist/components/ui/rating.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { resolveMagnaAsset as __resolveMagnaAsset_1 } from "../../magna-assets.js";
+/* eslint-disable @next/next/no-img-element -- Preserve original Figma SVG artwork. */
+import * as React from "react";
+import * as RadioPrimitive from "@radix-ui/react-radio-group";
+import { cn } from "../../utils/cn.js";
+const artwork = {
+    star: {
+        empty: '970af.svg',
+        muted: '8d97b.svg',
+        half: 'a74b0.svg',
+        full: '29541.svg',
+    },
+    heart: {
+        empty: '185ae.svg',
+        muted: 'c64ff.svg',
+        half: '73539.svg',
+        full: 'a119e.svg',
+    },
+};
+const emoji = ['4ff30.png', 'eed5c.png', '939c2.png', '07b3a.png', 'e5b24.png'];
+function Icon({ type = 'star', state = 'empty', className, }) {
+    // Full exported 20px artwork, scaled only for the 32px Rating Cell variant.
+    // eslint-disable-next-line @next/next/no-img-element
+    return (_jsx("img", { src: __resolveMagnaAsset_1(`/magna/forms/${artwork[type][state]}`), alt: '', "aria-hidden": 'true', className: cn('block size-5 shrink-0', className) }));
+}
+function Review({ value, type = 'star', alignment = 'ratings', description, reviewLink, className, ...props }) {
+    const rating = Math.max(0, Math.min(5, Number.isFinite(value) ? value : 0));
+    return (_jsxs("div", { ...props, className: cn('flex gap-2', alignment === 'vertical'
+            ? 'flex-col items-start'
+            : 'flex-wrap items-center', className), children: [_jsx("span", { role: 'img', "aria-label": `${rating} out of 5`, className: 'flex gap-0.5', children: Array.from({ length: 5 }, (_, i) => (_jsx(Icon, { type: type, state: rating >= i + 1 ? 'full' : rating >= i + 0.5 ? 'half' : 'empty' }, i))) }), alignment !== 'ratings' && (_jsxs("span", { className: 'flex flex-wrap items-center gap-1 text-paragraph-sm text-text-strong-950', children: [description ?? `${rating} out of 5`, reviewLink && (_jsx("span", { className: 'text-label-sm text-text-sub-600 underline underline-offset-2', children: reviewLink }))] }))] }));
+}
+const Cell = React.forwardRef(function Cell({ type = 'star', selected = false, className, children, ...props }, ref) {
+    return (_jsxs("button", { ...props, ref: ref, type: 'button', "aria-pressed": selected, className: cn('group/rating flex size-14 shrink-0 items-center justify-center rounded-[10px] border border-stroke-soft-200 bg-bg-white-0 p-3 shadow-regular-xs outline-none hover:border-transparent hover:bg-bg-weak-50 hover:shadow-none focus-visible:ring-2 focus-visible:ring-primary-base disabled:pointer-events-none disabled:opacity-50', className), children: [_jsx(Icon, { type: type, state: selected ? 'full' : 'muted', className: cn('size-8', !selected && 'group-hover/rating:hidden') }), !selected && (_jsx(Icon, { type: type, state: 'full', className: 'hidden size-8 group-hover/rating:block' })), children] }));
+});
+const RatingContext = React.createContext({
+    type: 'star',
+    value: 0,
+});
+const Bar = React.forwardRef(function Bar({ type = 'star', value, defaultValue = 0, onValueChange, className, children, ...props }, ref) {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const current = value ?? internal;
+    return (_jsx(RatingContext.Provider, { value: { type, value: current }, children: _jsx(RadioPrimitive.Root, { ...props, ref: ref, value: String(current), onValueChange: (next) => {
+                if (value === undefined)
+                    setInternal(Number(next));
+                onValueChange?.(Number(next));
+            }, orientation: 'horizontal', className: cn('flex w-[320px] max-w-full overflow-hidden border border-stroke-soft-200 bg-bg-white-0', className), children: children ??
+                [1, 2, 3, 4, 5].map((n) => (_jsx(BarItem, { value: n, "aria-label": `${n} out of 5` }, n))) }) }));
+});
+const BarItem = React.forwardRef(function BarItem({ value, type, emojiSrc, className, children, ...props }, ref) {
+    const context = React.useContext(RatingContext);
+    const kind = type ?? context.type;
+    const filled = value <= context.value;
+    const isIcon = kind === 'star' || kind === 'heart';
+    return (_jsx(RadioPrimitive.Item, { ...props, ref: ref, value: String(value), className: cn('group/rating flex h-9 min-w-0 flex-1 items-center justify-center border-e border-stroke-soft-200 px-1 py-2 text-label-sm text-text-sub-600 outline-none last:border-e-0 focus-visible:relative focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-base disabled:pointer-events-none disabled:opacity-50', !isIcon &&
+            'hover:text-text-strong-950 data-[state=checked]:bg-bg-weak-50 data-[state=checked]:text-text-strong-950', className), children: children ??
+            (isIcon ? (_jsxs(_Fragment, { children: [_jsx(Icon, { type: kind, state: filled ? 'full' : 'empty', className: cn(!filled && 'group-hover/rating:hidden') }), !filled && (_jsx(Icon, { type: kind, state: 'muted', className: 'hidden group-hover/rating:block' }))] })) : kind === 'number' ? (value) : (
+            // eslint-disable-next-line @next/next/no-img-element
+            _jsx("img", { src: emojiSrc ?? __resolveMagnaAsset_1(`/magna/forms/${emoji[Math.max(0, Math.min(4, value - 1))]}`), alt: '', "aria-hidden": 'true', className: 'size-5' }))) }));
+});
+function BarArea({ className, textareaProps, feedbackLabel = 'Tell us why', ...props }) {
+    return (_jsxs("div", { className: cn('w-[320px] max-w-full overflow-hidden rounded-xl border border-stroke-soft-200 bg-bg-white-0 focus-within:ring-2 focus-within:ring-primary-alpha-24', className), children: [_jsx(Bar, { ...props, className: 'w-full border-0 border-b' }), _jsx("textarea", { ...textareaProps, "aria-label": textareaProps?.['aria-label'] ?? feedbackLabel, disabled: props.disabled || textareaProps?.disabled, placeholder: textareaProps?.placeholder ?? 'Tell us why!', className: cn('block min-h-24 w-full resize-y bg-transparent p-3 text-paragraph-sm text-text-strong-950 outline-none placeholder:text-text-soft-400 disabled:opacity-50', textareaProps?.className) })] }));
+}
+export { Review, Cell, Bar, BarItem, BarArea, Icon };

package/dist/components/ui/rich-editor.d.ts

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { type Editor } from "@tiptap/react";
+export declare const colors: {
+    readonly gray: "#7b7b7b";
+    readonly blue: "#335cff";
+    readonly orange: "#fa7319";
+    readonly red: "#fb3748";
+    readonly green: "#1fc16b";
+    readonly yellow: "#f6b51e";
+    readonly purple: "#7d52f4";
+    readonly sky: "#47c2ff";
+    readonly pink: "#fb4ba3";
+    readonly teal: "#22d3bb";
+};
+export type EditorColor = keyof typeof colors;
+export type ToolbarVariant = '01' | '02' | '03' | '04';
+export type EditorIcon = 'bold' | 'italic' | 'underline' | 'strike' | 'align-left' | 'comment' | 'link' | 'at' | 'more';
+type CommentSelection = {
+    text: string;
+    from: number;
+    to: number;
+};
+type ContextValue = {
+    editor: Editor | null;
+    disabled: boolean;
+    onComment?: (selection: CommentSelection) => void;
+};
+export declare function useRichEditor(): ContextValue;
+export type RootProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (html: string) => void;
+    disabled?: boolean;
+    label?: string;
+    placeholder?: string;
+    onComment?: (selection: CommentSelection) => void;
+};
+export declare const Root: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (html: string) => void;
+    disabled?: boolean;
+    label?: string;
+    placeholder?: string;
+    onComment?: (selection: CommentSelection) => void;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Content: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
+export type ItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: 'text' | 'dropdown' | 'icon' | 'color';
+    active?: boolean;
+    icon?: EditorIcon;
+    color?: EditorColor;
+};
+export declare const Item: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "text" | "dropdown" | "icon" | "color";
+    active?: boolean;
+    icon?: EditorIcon;
+    color?: EditorColor;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type ColorSwatchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> & {
+    color?: EditorColor;
+    selected?: boolean;
+};
+export declare const ColorSwatch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
+    color?: EditorColor;
+    selected?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare function Divider(): import("react/jsx-runtime").JSX.Element;
+export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: ToolbarVariant;
+    showMore?: boolean;
+};
+export declare const Toolbar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    variant?: ToolbarVariant;
+    showMore?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};