magnaui 0.1.0

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type ContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+};
+export declare function Root({ asChild, className, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare const Item: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+} & {
+    active?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare function Icon<T extends React.ElementType = 'div'>({ as, className, ...props }: PolymorphicComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowIcon<T extends React.ElementType = 'div'>({ as, className, ...props }: PolymorphicComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/breadcrumb.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+export function Root({ asChild, className, ...props }) {
+    const Element = asChild ? Slot : 'div';
+    return (_jsx(Element, { ...props, className: cn('flex flex-wrap gap-1.5', className) }));
+}
+export const Item = React.forwardRef(function Item({ asChild, active = false, className, ...props }, ref) {
+    const Element = asChild ? Slot : 'div';
+    return (_jsx(Element, { ...props, ref: ref, "aria-current": active ? 'page' : undefined, className: cn('inline-flex items-center gap-1.5 text-label-sm transition-colors duration-200 ease-out', active
+            ? 'text-text-strong-950'
+            : 'text-text-sub-600 underline decoration-transparent hover:text-text-strong-950 hover:decoration-current', className) }));
+});
+export function Icon({ as, className, ...props }) {
+    const Element = as ?? 'div';
+    return _jsx(Element, { ...props, className: cn('size-5', className) });
+}
+export function ArrowIcon({ as, className, ...props }) {
+    const Element = as ?? 'div';
+    return (_jsx(Element, { ...props, className: cn('flex size-5 select-none items-center justify-center text-text-disabled-300', className) }));
+}

package/dist/components/ui/button-group.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type Appearance = {
+    size: 'small' | 'xsmall' | 'xxsmall';
+};
+export declare const buttonGroupVariants: (options?: Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) => Record<"root" | "icon" | "item", (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> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Item: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & Partial<Appearance> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare function Icon<T extends React.ElementType = 'div'>({ as, className, size, ...props }: PolymorphicComponentProps<T, Partial<Appearance>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+export {};

package/dist/components/ui/button-group.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { mergeOptions, slotRecipe } from "./magna-recipe.js";
+const appearance = React.createContext({});
+export const buttonGroupVariants = slotRecipe({ size: 'small' }, ({ size }) => ({
+    root: 'flex [&>*+*]:-ml-[1.5px]',
+    item: [
+        'group relative flex items-center justify-center border border-stroke-soft-200 bg-bg-white-0 text-center text-text-sub-600 whitespace-nowrap outline-none transition duration-200 ease-out first:rounded-l-full last:rounded-r-full hover:bg-bg-weak-50 focus:bg-bg-weak-50 data-[state=on]:bg-bg-weak-50 data-[state=on]:text-text-strong-950 disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300',
+        {
+            small: 'h-9 px-4 gap-4 text-label-sm',
+            xsmall: 'h-8 px-3.5 gap-3.5 text-label-sm',
+            xxsmall: 'h-6 px-3 gap-3 text-label-xs',
+        }[size],
+    ],
+    icon: ['shrink-0 -mx-2', size === 'xxsmall' ? 'size-4' : 'size-5'],
+}));
+export const Root = React.forwardRef(function ButtonGroup({ size, asChild, children, className, ...props }, ref) {
+    const Element = asChild ? Slot : 'div';
+    return (_jsx(appearance.Provider, { value: { size }, children: _jsx(Element, { ref: ref, role: 'group', className: buttonGroupVariants({ size }).root({ className }), ...props, children: children }) }));
+});
+Root.displayName = 'ButtonGroupRoot';
+export const Item = React.forwardRef(function ButtonGroupItem({ size, asChild, children, className, ...props }, ref) {
+    const options = mergeOptions(React.useContext(appearance), {
+        size,
+    });
+    const Element = asChild ? Slot : 'button';
+    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, className: buttonGroupVariants(options).item({ className }), ...props, children: children }) }));
+});
+Item.displayName = 'ButtonGroupItem';
+export function Icon({ as, className, size, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        size,
+    });
+    const Element = as || 'div';
+    return (_jsx(Element, { className: buttonGroupVariants(options).icon({ className }), ...props }));
+}
+Icon.displayName = 'ButtonGroupIcon';

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type Appearance = {
+    variant: 'primary' | 'neutral' | 'error';
+    mode: 'filled' | 'stroke' | 'lighter' | 'ghost';
+    size: 'medium' | 'small' | 'xsmall' | 'xxsmall';
+};
+export declare const buttonVariants: (options?: Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) => Record<"root" | "icon", (overrides?: (Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) | undefined) => string>;
+export declare const Root: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & Partial<Appearance> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare function Icon<T extends React.ElementType = 'div'>({ as, className, variant, mode, size, ...props }: PolymorphicComponentProps<T, Partial<Appearance>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+export {};

package/dist/components/ui/button.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { mergeOptions, slotRecipe } from "./magna-recipe.js";
+const appearance = React.createContext({});
+const dimensions = {
+    medium: 'h-10 px-3.5 gap-3',
+    small: 'h-9 px-3 gap-3',
+    xsmall: 'h-8 px-2.5 gap-2.5',
+    xxsmall: 'h-7 px-2 gap-2.5',
+};
+const colors = {
+    primary: {
+        filled: 'text-static-white bg-primary-base hover:bg-primary-darker',
+        stroke: 'text-primary-base bg-bg-white-0 ring-primary-base hover:ring-transparent hover:bg-primary-alpha-10',
+        lighter: 'text-primary-base bg-primary-alpha-10 ring-transparent hover:ring-primary-base hover:bg-bg-white-0 focus-visible:ring-primary-base focus-visible:bg-bg-white-0',
+        ghost: 'text-primary-base bg-transparent ring-transparent hover:bg-primary-alpha-10 focus-visible:ring-primary-base focus-visible:bg-bg-white-0',
+        focus: 'focus-visible:shadow-button-primary-focus',
+    },
+    neutral: {
+        filled: 'text-text-white-0 bg-bg-strong-950 hover:bg-bg-surface-800',
+        stroke: 'text-text-sub-600 bg-bg-white-0 ring-stroke-soft-200 shadow-regular-xs hover:bg-bg-weak-50 hover:ring-transparent hover:shadow-none hover:text-text-strong-950 focus-visible:ring-stroke-strong-950 focus-visible:text-text-strong-950',
+        lighter: 'text-text-sub-600 bg-bg-weak-50 ring-transparent hover:bg-bg-white-0 hover:ring-stroke-soft-200 hover:shadow-regular-xs hover:text-text-strong-950 focus-visible:bg-bg-white-0 focus-visible:text-text-strong-950 focus-visible:ring-stroke-strong-950',
+        ghost: 'text-text-sub-600 bg-transparent ring-transparent hover:bg-bg-weak-50 hover:text-text-strong-950 focus-visible:bg-bg-white-0 focus-visible:text-text-strong-950 focus-visible:ring-stroke-strong-950',
+        focus: 'focus-visible:shadow-button-important-focus',
+    },
+    error: {
+        filled: 'text-static-white bg-error-base hover:bg-red-700',
+        stroke: 'text-error-base bg-bg-white-0 ring-error-base hover:ring-transparent hover:bg-red-alpha-10',
+        lighter: 'text-error-base bg-red-alpha-10 ring-transparent hover:bg-bg-white-0 hover:ring-error-base focus-visible:bg-bg-white-0 focus-visible:ring-error-base',
+        ghost: 'text-error-base bg-transparent ring-transparent hover:bg-red-alpha-10 focus-visible:bg-bg-white-0 focus-visible:ring-error-base',
+        focus: 'focus-visible:shadow-button-error-focus',
+    },
+};
+export const buttonVariants = slotRecipe({ variant: 'primary', mode: 'filled', size: 'medium' }, ({ variant, mode, size }) => ({
+    root: [
+        'group relative inline-flex justify-center items-center rounded-full whitespace-nowrap text-label-sm outline-none transition duration-200 ease-out',
+        dimensions[size],
+        colors[variant][mode],
+        colors[variant].focus,
+        mode !== 'filled' && 'ring-inset ring-1',
+        'disabled:pointer-events-none disabled:text-text-disabled-300 disabled:bg-bg-weak-50 disabled:ring-transparent',
+    ],
+    icon: 'flex shrink-0 justify-center items-center size-5 -mx-1',
+}));
+export const Root = React.forwardRef(function Button({ variant, mode, size, asChild, className, children, ...props }, ref) {
+    const options = { variant, mode, size };
+    const Element = asChild ? Slot : 'button';
+    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, className: buttonVariants(options).root({ className }), ...props, children: children }) }));
+});
+Root.displayName = 'ButtonRoot';
+export function Icon({ as, className, variant, mode, size, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        variant,
+        mode,
+        size,
+    });
+    const Element = as || 'div';
+    return (_jsx(Element, { className: buttonVariants(options).icon({ className }), ...props }));
+}
+Icon.displayName = 'ButtonIcon';

package/dist/components/ui/chart-legend.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { legendDotAssets } from "./display-assets.js";
+export type LegendColor = keyof typeof legendDotAssets;
+export type LegendDotProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & {
+    color?: LegendColor;
+    size?: 16 | 20;
+    disabled?: boolean;
+};
+export declare const Dot: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> & {
+    color?: LegendColor;
+    size?: 16 | 20;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;
+export type ChartLegendProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & {
+    color?: LegendColor;
+    disabled?: boolean;
+};
+export declare const Root: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> & {
+    color?: LegendColor;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ui/chart-legend.js

@@ -0,0 +1,14 @@
+'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 { legendDotAssets, displayAssets } from "./display-assets.js";
+export const Dot = React.forwardRef(function LegendDot({ color = 'gray', size = 20, disabled, className, ...props }, ref) {
+    return (_jsx("span", { ref: ref, "aria-hidden": 'true', ...props, className: cn('inline-flex shrink-0 items-center justify-center', size === 16 ? 'size-4' : 'size-5', className), children: _jsx(DisplayAsset, { src: disabled && size === 16
+                ? displayAssets.legendDisabled
+                : legendDotAssets[disabled ? 'light-gray' : color][size] }) }));
+});
+export const Root = React.forwardRef(function ChartLegend({ color = 'gray', disabled, children = 'Legends', className, ...props }, ref) {
+    return (_jsxs("span", { ref: ref, ...props, "aria-disabled": disabled || undefined, className: cn('inline-flex items-center gap-1 text-label-xs', disabled ? 'text-text-disabled-300' : 'text-text-sub-600', className), children: [_jsx(Dot, { color: color, size: 16, disabled: disabled }), children] }));
+});

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-checkbox";
+export type CheckboxSize = 'medium' | 'small';
+export type CheckboxProps = React.ComponentPropsWithoutRef<typeof Primitive.Root> & {
+    size?: CheckboxSize;
+};
+declare const Root: React.ForwardRefExoticComponent<Omit<Primitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    size?: CheckboxSize;
+} & React.RefAttributes<HTMLButtonElement>>;
+type ContentProps = {
+    label: React.ReactNode;
+    sublabel?: React.ReactNode;
+    description?: React.ReactNode;
+    badge?: React.ReactNode;
+};
+export type CheckboxLabelProps = Omit<CheckboxProps, 'children' | 'asChild'> & ContentProps & {
+    flip?: boolean;
+    action?: React.ReactNode;
+    children?: React.ReactNode;
+    controlClassName?: string;
+};
+/** Figma 231:4897. Actions stay outside the associated label, so they do not toggle it. */
+declare const Label: React.ForwardRefExoticComponent<Omit<CheckboxProps, "children" | "asChild"> & ContentProps & {
+    flip?: boolean;
+    action?: React.ReactNode;
+    children?: React.ReactNode;
+    controlClassName?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type CheckboxCardVariant = 'basic' | 'icon' | 'avatar' | 'provider' | 'brand' | 'company';
+export type CheckboxCardProps = Omit<CheckboxProps, 'children' | 'asChild'> & ContentProps & {
+    variant?: CheckboxCardVariant;
+    leading?: React.ReactNode;
+    children?: React.ReactNode;
+};
+/** Figma 261:3896. One Radix checkbox owns the complete selectable card. */
+declare const Card: React.ForwardRefExoticComponent<Omit<CheckboxProps, "children" | "asChild"> & ContentProps & {
+    variant?: CheckboxCardVariant;
+    leading?: React.ReactNode;
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Root, Label, Card };

package/dist/components/ui/checkbox.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveMagnaAsset as __resolveMagnaAsset_1 } from "../../magna-assets.js";
+import * as React from "react";
+import { Slottable } from "@radix-ui/react-slot";
+import * as Primitive from "@radix-ui/react-checkbox";
+import * as LabelPrimitive from "./label.js";
+import { cn } from "../../utils/cn.js";
+// Figma 227:2002: medium has a 20px root/16px circle; small has 16px/14px.
+function Control({ size = 'medium', card = false, }) {
+    return (_jsx("span", { "aria-hidden": 'true', className: cn('relative flex shrink-0 items-center justify-center', size === 'small' ? 'size-4' : 'size-5'), children: _jsxs("span", { className: cn('relative flex items-center justify-center rounded-full bg-bg-soft-200 transition-colors duration-200 group-hover/checkbox:bg-bg-sub-300 group-focus-visible/checkbox:bg-primary-base group-disabled/checkbox:!bg-bg-soft-200 group-data-[state=checked]/checkbox:bg-primary-base group-data-[state=indeterminate]/checkbox:bg-primary-base', !card &&
+                'group-hover/checkbox:group-data-[state=checked]/checkbox:bg-primary-darker group-hover/checkbox:group-data-[state=indeterminate]/checkbox:bg-primary-darker group-focus-visible/checkbox:group-data-[state=checked]/checkbox:bg-primary-dark group-focus-visible/checkbox:group-data-[state=indeterminate]/checkbox:bg-primary-dark', size === 'small' ? 'size-3.5' : 'size-4'), children: [_jsx("span", { className: 'absolute inset-[1.5px] rounded-full bg-bg-white-0 shadow-[0_2px_2px_#1b1c1d1f] transition-opacity group-disabled/checkbox:hidden group-data-[state=checked]/checkbox:opacity-0 group-data-[state=indeterminate]/checkbox:opacity-0' }), _jsxs(Primitive.Indicator, { forceMount: true, className: 'relative flex size-full items-center justify-center', children: [_jsx("img", { src: __resolveMagnaAsset_1("/magna/checkbox/check.svg"), alt: '', className: 'hidden max-w-none translate-y-[0.265px] group-data-[state=checked]/checkbox:block' }), _jsx("img", { src: __resolveMagnaAsset_1("/magna/checkbox/indeterminate.svg"), alt: '', className: 'hidden max-w-none group-data-[state=indeterminate]/checkbox:block' })] })] }) }));
+}
+const Root = React.forwardRef(function Root({ className, children, size = 'medium', ...props }, ref) {
+    return (_jsxs(Primitive.Root, { ...props, ref: ref, "data-size": size, className: cn('group/checkbox relative flex shrink-0 cursor-pointer items-center justify-center outline-none disabled:cursor-not-allowed', size === 'small' ? 'size-4' : 'size-5', className), children: [_jsx(Control, { size: size }), _jsx(Slottable, { children: children })] }));
+});
+Root.displayName = 'Checkbox';
+/** Figma 231:4897. 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, size = 'medium', 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(Root, { ...props, ref: ref, id: controlId, size: size, disabled: disabled, "aria-labelledby": labelledBy ?? labelId, "aria-describedby": [describedBy, description ? descriptionId : undefined]
+                    .filter(Boolean)
+                    .join(' ') || undefined, className: cn(flip && 'order-2', size === 'small' && 'mt-0.5', 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 = 'CheckboxLabel';
+/** Figma 261:3896. One Radix checkbox owns the complete selectable card. */
+const Card = React.forwardRef(function Card({ label, sublabel, description, badge, leading, children, variant = 'basic', size = 'medium', 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.Root, { ...props, ref: ref, id: controlId, disabled: disabled, "data-variant": variant, "data-size": size, "aria-labelledby": labelledBy ?? labelId, "aria-describedby": [describedBy, description ? descriptionId : undefined]
+            .filter(Boolean)
+            .join(' ') || undefined, className: cn('group/checkbox 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, { size: size, card: true })] }));
+});
+Card.displayName = 'CheckboxCard';
+export { Root, Label, Card };

package/dist/components/ui/color-picker.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as Aria from "react-aria-components";
+declare function Slider({ className, ...props }: Aria.ColorSliderProps): import("react/jsx-runtime").JSX.Element;
+declare function Area({ className, ...props }: Aria.ColorAreaProps): import("react/jsx-runtime").JSX.Element;
+declare function SliderTrack({ className, style, ...props }: Aria.SliderTrackProps): import("react/jsx-runtime").JSX.Element;
+declare function Thumb({ className, ...props }: Aria.ColorThumbProps): import("react/jsx-runtime").JSX.Element;
+declare function SwatchPicker({ className, ...props }: Aria.ColorSwatchPickerProps): import("react/jsx-runtime").JSX.Element;
+declare function SwatchPickerItem({ className, ...props }: Aria.ColorSwatchPickerItemProps): import("react/jsx-runtime").JSX.Element;
+declare function Swatch({ className, style, ...props }: Aria.ColorSwatchProps): import("react/jsx-runtime").JSX.Element;
+declare const EyeDropperButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+declare const Root: typeof Aria.ColorPicker;
+declare const Field: React.ForwardRefExoticComponent<Aria.ColorFieldProps & React.RefAttributes<HTMLDivElement>>;
+export { Root, Field, Area, Slider, SliderTrack, Thumb, SwatchPicker, SwatchPickerItem, Swatch, EyeDropperButton, };

package/dist/components/ui/color-picker.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as Aria from "react-aria-components";
+import { cn } from "../../utils/cn.js";
+// Appearance is layered onto React Aria's render-prop state, leaving its color
+// conversion, keyboard handling and generated gradients intact.
+function classes(base, extra) {
+    return (state) => cn(base, typeof extra === 'function' ? extra(state) : extra);
+}
+const checkerboard = 'repeating-conic-gradient(#fff 0 90deg,rgba(0,0,0,.3) 0 180deg) 0% -25%/6px 6px';
+function paint(style) {
+    return (state) => {
+        const user = typeof style === 'function' ? style(state) : style;
+        return {
+            ...state.defaultStyle,
+            background: `${state.defaultStyle.background}, ${checkerboard}`,
+            ...user,
+        };
+    };
+}
+function Slider({ className, ...props }) {
+    return _jsx(Aria.ColorSlider, { ...props, className: classes('py-1', className) });
+}
+function Area({ className, ...props }) {
+    return (_jsx(Aria.ColorArea, { ...props, className: classes('h-[232px] w-full rounded-lg', className) }));
+}
+function SliderTrack({ className, style, ...props }) {
+    return (_jsx(Aria.SliderTrack, { ...props, className: classes('h-2 w-full rounded-full', className), style: paint(style) }));
+}
+function Thumb({ className, ...props }) {
+    return (_jsx(Aria.ColorThumb, { ...props, className: classes('z-50 size-3 rounded-full ring-2 ring-stroke-white-0', className) }));
+}
+function SwatchPicker({ className, ...props }) {
+    return (_jsx(Aria.ColorSwatchPicker, { ...props, className: classes('flex w-full flex-wrap gap-1', className) }));
+}
+function SwatchPickerItem({ className, ...props }) {
+    return (_jsx(Aria.ColorSwatchPickerItem, { ...props, className: classes('group/swatch-item cursor-pointer p-1 focus:outline-none', className) }));
+}
+function Swatch({ className, style, ...props }) {
+    return (_jsx(Aria.ColorSwatch, { ...props, className: classes('size-4 rounded-full border-stroke-white-0 group-data-[selected=true]/swatch-item:border-2 group-data-[selected=true]/swatch-item:ring-[1.5px]', className), style: paint(style) }));
+}
+const EyeDropperButton = React.forwardRef(function EyeDropperButton({ onClick, ...props }, ref) {
+    const state = React.useContext(Aria.ColorPickerStateContext);
+    const [available, setAvailable] = React.useState(false);
+    React.useEffect(() => setAvailable('EyeDropper' in window), []);
+    if (!available)
+        return null;
+    return (_jsx("button", { type: 'button', "aria-label": 'Eye dropper', ...props, ref: ref, onClick: async (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || !state)
+                return;
+            const Constructor = window.EyeDropper;
+            try {
+                const result = await new Constructor().open();
+                state.setColor(Aria.parseColor(result.sRGBHex));
+            }
+            catch {
+                /* Dismissing the system picker leaves the current color unchanged. */
+            }
+        } }));
+});
+const Root = Aria.ColorPicker;
+const Field = Aria.ColorField;
+export { Root, Field, Area, Slider, SliderTrack, Thumb, SwatchPicker, SwatchPickerItem, Swatch, EyeDropperButton, };

package/dist/components/ui/command-menu.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+import type { DialogProps } from "@radix-ui/react-dialog";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare function Dialog({ className, overlayClassName, children, ...props }: DialogProps & {
+    className?: string;
+    overlayClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "onChange" | "value"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const List: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Group: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Item: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    size?: "small" | "medium";
+} & React.RefAttributes<HTMLDivElement>>;
+export declare function ItemIcon<T extends React.ElementType = 'div'>({ as, className, ...props }: PolymorphicComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Footer({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function FooterKeyBox({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/command-menu.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Command } from "cmdk";
+import * as Modal from "./modal.js";
+import { cn } from "../../utils/cn.js";
+export const DialogTitle = Modal.Title;
+export const DialogDescription = Modal.Description;
+export function Dialog({ className, overlayClassName, children, ...props }) {
+    return (_jsx(Modal.Root, { ...props, children: _jsx(Modal.Content, { showClose: false, overlayClassName: cn('justify-start pt-20', overlayClassName), className: cn('flex max-h-full max-w-[600px] flex-col overflow-hidden rounded-2xl', className), children: _jsx(Command, { className: 'grid min-h-0 auto-cols-auto grid-flow-row divide-y divide-stroke-soft-200 [&>[cmdk-label]+*]:!border-t-0', children: children }) }) }));
+}
+export const Input = React.forwardRef(function Input({ className, ...props }, ref) {
+    return (_jsx(Command.Input, { ...props, ref: ref, className: cn('w-full bg-transparent text-paragraph-sm text-text-strong-950 outline-none transition-colors duration-200 ease-out placeholder:text-text-soft-400 placeholder:[transition:inherit] group-hover/cmd-input:placeholder:text-text-sub-600', className) }));
+});
+export const List = React.forwardRef(function List({ className, ...props }, ref) {
+    return (_jsx(Command.List, { ...props, ref: ref, className: cn('flex max-h-min min-h-0 flex-1 flex-col [&>[cmdk-list-sizer]]:divide-y [&>[cmdk-list-sizer]]:divide-stroke-soft-200 [&>[cmdk-list-sizer]]:overflow-auto', className) }));
+});
+export const Group = React.forwardRef(function Group({ className, ...props }, ref) {
+    return (_jsx(Command.Group, { ...props, ref: ref, className: cn('relative px-2 py-3 [&>[cmdk-group-heading]]:mb-2 [&>[cmdk-group-heading]]:px-3 [&>[cmdk-group-heading]]:pt-1 [&>[cmdk-group-heading]]:text-label-xs [&>[cmdk-group-heading]]:text-text-sub-600', className) }));
+});
+export const Item = React.forwardRef(function Item({ size = 'small', className, ...props }, ref) {
+    return (_jsx(Command.Item, { ...props, ref: ref, className: cn('flex cursor-pointer items-center gap-3 rounded-10 bg-bg-white-0 px-3 text-paragraph-sm text-text-strong-950 transition-colors duration-200 ease-out data-[selected=true]:bg-bg-weak-50', size === 'medium' ? 'py-3' : 'py-2.5', className) }));
+});
+export function ItemIcon({ as, className, ...props }) {
+    const Element = as ?? 'div';
+    return (_jsx(Element, { ...props, className: cn('size-5 shrink-0 text-text-sub-600', className) }));
+}
+export function Footer({ className, ...props }) {
+    return (_jsx("div", { ...props, className: cn('flex h-12 items-center justify-between gap-3 px-5', className) }));
+}
+export function FooterKeyBox({ className, ...props }) {
+    return (_jsx("div", { ...props, className: cn('inline-flex size-5 shrink-0 items-center justify-center rounded bg-bg-weak-50 text-text-sub-600 ring-1 ring-inset ring-stroke-soft-200', className) }));
+}

package/dist/components/ui/compact-button.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type Appearance = {
+    variant: 'stroke' | 'ghost' | 'white' | 'modifiable';
+    size: 'large' | 'medium';
+    fullRadius: boolean;
+};
+export declare const compactButtonVariants: (options?: Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) => Record<"root" | "icon", (overrides?: (Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) | undefined) => string>;
+export declare const Root: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & Partial<Appearance> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare function Icon<T extends React.ElementType = 'div'>({ as, variant, size, className, ...props }: PolymorphicComponentProps<T, Partial<Omit<Appearance, 'fullRadius'>>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+export {};

package/dist/components/ui/compact-button.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { mergeOptions, slotRecipe } from "./magna-recipe.js";
+const appearance = React.createContext({});
+const surfaces = {
+    stroke: 'border border-stroke-soft-200 bg-bg-white-0 shadow-regular-xs hover:border-transparent hover:shadow-none focus-visible:border-transparent focus-visible:shadow-none',
+    ghost: 'bg-transparent',
+    white: 'bg-bg-white-0 shadow-regular-xs',
+    modifiable: '',
+};
+export const compactButtonVariants = slotRecipe({ variant: 'stroke', size: 'large', fullRadius: true }, ({ variant, size, fullRadius }) => ({
+    root: [
+        'relative flex shrink-0 justify-center items-center outline-none transition duration-200 ease-out',
+        surfaces[variant],
+        variant !== 'modifiable' &&
+            'text-text-sub-600 hover:bg-bg-weak-50 hover:text-text-strong-950 focus-visible:bg-bg-strong-950 focus-visible:text-text-white-0',
+        size === 'large' ? 'size-6' : 'size-5',
+        fullRadius ? 'rounded-full' : 'rounded-md',
+        'disabled:pointer-events-none disabled:border-transparent disabled:bg-transparent disabled:text-text-disabled-300 disabled:shadow-none',
+    ],
+    icon: size === 'large' ? 'size-5' : 'size-[18px]',
+}));
+export const Root = React.forwardRef(function CompactButton({ variant, size, fullRadius, asChild, className, children, ...props }, ref) {
+    const options = { variant, size, fullRadius };
+    const Element = asChild ? Slot : 'button';
+    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, className: compactButtonVariants(options).root({ className }), ...props, children: children }) }));
+});
+Root.displayName = 'CompactButtonRoot';
+export function Icon({ as, variant, size, className, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        variant,
+        size,
+    });
+    const Element = as || 'div';
+    return (_jsx(Element, { className: compactButtonVariants(options).icon({ className }), ...props }));
+}
+Icon.displayName = 'CompactButtonIcon';

package/dist/components/ui/content-card.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export type ContentCardVariant = 'basic' | 'icon' | 'avatar' | 'provider' | 'brand' | 'company';
+export type ContentCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
+    title: React.ReactNode;
+    sublabel?: React.ReactNode;
+    description?: React.ReactNode;
+    badge?: React.ReactNode;
+    leading?: React.ReactNode;
+    variant?: ContentCardVariant;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+};
+export declare const Root: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    title: React.ReactNode;
+    sublabel?: React.ReactNode;
+    description?: React.ReactNode;
+    badge?: React.ReactNode;
+    leading?: React.ReactNode;
+    variant?: ContentCardVariant;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/content-card.js

@@ -0,0 +1,11 @@
+'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 * as CompactButton from "./compact-button.js";
+import * as KeyIcon from "./key-icon.js";
+import { DisplayAsset } from "./display-asset.js";
+import { displayAssets } from "./display-assets.js";
+export const Root = React.forwardRef(function ContentCard({ title, sublabel, description, badge, leading, variant = 'basic', onDismiss, dismissLabel = 'Dismiss card', className, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, ...props, className: cn('flex w-[360px] max-w-full items-center gap-3.5 rounded-xl bg-bg-white-0 p-4 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200', className), children: [variant !== 'basic' && (leading || variant === 'icon') && (_jsx("span", { className: cn('flex shrink-0 items-center justify-center', variant === 'provider' ? 'h-6 w-8' : 'size-10', variant === 'avatar' && 'overflow-hidden rounded-full'), children: leading ?? _jsx(KeyIcon.Root, { size: 40 }) })), _jsxs("div", { className: 'min-w-0 flex-1 space-y-1', children: [_jsxs("div", { className: 'flex flex-wrap items-center gap-1', children: [_jsx("span", { className: 'text-label-sm text-text-strong-950', children: title }), sublabel && (_jsx("span", { className: 'text-paragraph-xs text-text-sub-600', children: sublabel })), badge] }), description && (_jsx("p", { className: 'text-paragraph-xs text-text-sub-600', children: description }))] }), onDismiss && (_jsx(CompactButton.Root, { type: 'button', variant: 'ghost', size: 'medium', "aria-label": dismissLabel, onClick: onDismiss, children: _jsx(DisplayAsset, { src: displayAssets.contentClose }) }))] }));
+});

package/dist/components/ui/content-label.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export type ContentLabelVariant = 'basic' | 'icon' | 'avatar' | 'brand' | 'company';
+export type ContentLabelProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
+    title: React.ReactNode;
+    sublabel?: React.ReactNode;
+    description?: React.ReactNode;
+    leading?: React.ReactNode;
+    badge?: React.ReactNode;
+    trailing?: React.ReactNode;
+    variant?: ContentLabelVariant;
+    size?: 'medium' | 'large';
+};
+export declare const Root: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    title: React.ReactNode;
+    sublabel?: React.ReactNode;
+    description?: React.ReactNode;
+    leading?: React.ReactNode;
+    badge?: React.ReactNode;
+    trailing?: React.ReactNode;
+    variant?: ContentLabelVariant;
+    size?: "medium" | "large";
+} & React.RefAttributes<HTMLDivElement>>;