magnaui 0.1.0

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "react";
+import type { ClassValue } from "../../utils/tv.js";
+type Options = {
+    variant?: 'line' | 'line-spacing' | 'line-text' | 'content' | 'text' | 'solid-text';
+    class?: ClassValue;
+    className?: string;
+};
+export declare function dividerVariants({ variant, class: extra, className, }?: Options): string;
+export declare function Root({ variant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & Pick<Options, 'variant'>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+export {};

package/dist/components/ui/divider.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+export function dividerVariants({ variant = 'line', class: extra, className, } = {}) {
+    return cn('relative flex w-full items-center', {
+        line: 'h-0',
+        'line-spacing': 'h-1',
+        'line-text': 'gap-2.5 text-subheading-2xs text-text-soft-400',
+        content: 'gap-2.5',
+        text: 'flex items-center px-2 py-1 text-subheading-xs text-text-soft-400',
+        'solid-text': 'flex items-center bg-bg-weak-50 px-5 py-1.5 text-subheading-xs uppercase text-text-soft-400',
+    }[variant], extra, className);
+}
+export function Root({ variant = 'line', children, className, ...props }) {
+    const line = (_jsx("span", { "aria-hidden": 'true', className: 'block h-px min-w-0 flex-1 bg-stroke-soft-200' }));
+    let content = children;
+    if (variant === 'line' || variant === 'line-spacing')
+        content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": 'true', className: 'absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-stroke-soft-200' }), children] }));
+    if (variant === 'line-text' || variant === 'content')
+        content = (_jsxs(_Fragment, { children: [line, children, line] }));
+    return (_jsx("div", { role: 'separator', ...props, className: dividerVariants({ variant, className }), children: content }));
+}
+Root.displayName = 'DividerRoot';

package/dist/components/ui/dot-stepper.d.ts

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { type VariantProps } from "../../utils/tv.js";
+export declare const dotStepperVariants: import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    size: {
+        small: {
+            item: string;
+            root: string;
+        };
+        xsmall: {
+            item: string;
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, undefined, {
+    responsiveVariants?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | {
+        size?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | undefined;
+    } | undefined;
+} & import("../../vendor/tailwind-variants/config.js").TWMConfig & {
+    twMergeConfig: {
+        extend: {
+            classGroups: {
+                'font-size': {
+                    text: string[];
+                }[];
+                shadow: {
+                    shadow: string[];
+                }[];
+                rounded: {
+                    rounded: string[];
+                }[];
+            };
+        };
+    };
+}, {
+    size: {
+        small: {
+            item: string;
+            root: string;
+        };
+        xsmall: {
+            item: string;
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    size: {
+        small: {
+            item: string;
+            root: string;
+        };
+        xsmall: {
+            item: string;
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, undefined, import("../../vendor/tailwind-variants/config.js").TVConfig<{
+    size: {
+        small: {
+            item: string;
+            root: string;
+        };
+        xsmall: {
+            item: string;
+            root: string;
+        };
+    };
+}, {
+    size: {
+        small: {
+            item: string;
+            root: string;
+        };
+        xsmall: {
+            item: string;
+            root: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type Sizing = VariantProps<typeof dotStepperVariants>;
+export declare function Root({ size, asChild, className, ...props }: React.HTMLAttributes<HTMLDivElement> & Sizing & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Item: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & Sizing & {
+    asChild?: boolean;
+    active?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/ui/dot-stepper.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { tv } from "../../utils/tv.js";
+import { cn } from "../../utils/cn.js";
+export const dotStepperVariants = tv({
+    slots: {
+        root: 'flex flex-wrap',
+        item: 'shrink-0 rounded-full bg-bg-soft-200 outline-none transition duration-200 ease-out focus-visible:ring-2 focus-visible:ring-stroke-strong-950',
+    },
+    variants: {
+        size: {
+            small: { item: 'size-2', root: 'gap-2.5' },
+            xsmall: { item: 'size-1', root: 'gap-1.5' },
+        },
+    },
+    defaultVariants: { size: 'small' },
+});
+const Size = React.createContext('small');
+export function Root({ size = 'small', asChild, className, ...props }) {
+    const Element = asChild ? Slot : 'div';
+    return (_jsx(Size.Provider, { value: size, children: _jsx(Element, { ...props, className: dotStepperVariants({ size }).root({ class: className }) }) }));
+}
+export const Item = React.forwardRef(function Item({ size, asChild, active, className, ...props }, ref) {
+    const inherited = React.useContext(Size);
+    const Element = asChild ? Slot : 'button';
+    return (_jsx(Element, { type: asChild ? undefined : 'button', ...props, ref: ref, "aria-current": active ? 'step' : undefined, className: cn(dotStepperVariants({ size: size ?? inherited }).item(), active && 'bg-primary-base', className) }));
+});

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+export declare const Root: React.FC<Dialog.DialogProps>;
+export declare const Trigger: React.ForwardRefExoticComponent<Dialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Close: React.ForwardRefExoticComponent<Dialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Content: React.ForwardRefExoticComponent<Omit<Dialog.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function Header({ showCloseButton, children, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Title: React.ForwardRefExoticComponent<Omit<Dialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare function Body({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Footer({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/drawer.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { RiCloseLine } from "@remixicon/react";
+import * as CompactButton from "./compact-button.js";
+import { cn } from "../../utils/cn.js";
+export const Root = Dialog.Root;
+export const Trigger = Dialog.Trigger;
+export const Close = Dialog.Close;
+export const Content = React.forwardRef(function Content({ children, className, ...props }, ref) {
+    return (_jsx(Dialog.Portal, { children: _jsx(Dialog.Overlay, { className: 'fixed inset-0 z-50 grid grid-cols-1 place-items-end overflow-hidden bg-overlay backdrop-blur-[10px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', children: _jsx(Dialog.Content, { ...props, ref: ref, className: cn('size-full max-w-[400px] overflow-y-auto border-l border-stroke-soft-200 bg-bg-white-0 data-[state=closed]:duration-200 data-[state=open]:duration-200 data-[state=closed]:ease-in data-[state=open]:ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full', className), children: _jsx("div", { className: 'relative flex size-full flex-col', children: children }) }) }) }));
+});
+export function Header({ showCloseButton = true, children, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cn('flex items-center gap-3 border-stroke-soft-200 p-5', className), children: [children, showCloseButton && (_jsx(Close, { asChild: true, children: _jsx(CompactButton.Root, { "aria-label": 'Close drawer', size: 'large', variant: 'ghost', children: _jsx(CompactButton.Icon, { as: RiCloseLine }) }) }))] }));
+}
+export const Title = React.forwardRef(function Title({ className, ...props }, ref) {
+    return (_jsx(Dialog.Title, { ...props, ref: ref, className: cn('flex-1 text-label-lg text-text-strong-950', className) }));
+});
+export function Body({ className, ...props }) {
+    return _jsx("div", { ...props, className: cn('flex-1', className) });
+}
+export function Footer({ className, ...props }) {
+    return (_jsx("div", { ...props, className: cn('flex items-center gap-4 border-stroke-soft-200 p-5', className) }));
+}

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as Menu from "@radix-ui/react-dropdown-menu";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+export declare const Root: React.FC<Menu.DropdownMenuProps>;
+export declare const Trigger: React.ForwardRefExoticComponent<Menu.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Portal: React.FC<Menu.DropdownMenuPortalProps>;
+export declare const MenuSub: React.FC<Menu.DropdownMenuSubProps>;
+export declare const CheckboxItem: React.ForwardRefExoticComponent<Menu.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioGroup: React.ForwardRefExoticComponent<Menu.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioItem: React.ForwardRefExoticComponent<Menu.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Separator: React.ForwardRefExoticComponent<Menu.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Arrow: React.ForwardRefExoticComponent<Menu.DropdownMenuArrowProps & React.RefAttributes<SVGSVGElement>>;
+export declare const Search: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    onClear?: () => void;
+    clearLabel?: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export declare const Action: React.ForwardRefExoticComponent<Omit<Menu.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function Caption({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const Content: React.ForwardRefExoticComponent<Omit<Menu.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Item: React.ForwardRefExoticComponent<Omit<Menu.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & 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 const Group: React.ForwardRefExoticComponent<Omit<Menu.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Label: React.ForwardRefExoticComponent<Omit<Menu.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuSubTrigger: React.ForwardRefExoticComponent<Omit<Menu.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuSubContent: React.ForwardRefExoticComponent<Omit<Menu.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/dropdown.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as Menu from "@radix-ui/react-dropdown-menu";
+import { Slottable } from "@radix-ui/react-slot";
+import { RiArrowRightSLine } from "@remixicon/react";
+import { cn } from "../../utils/cn.js";
+import { FormAsset } from "./form-asset.js";
+export const Root = Menu.Root;
+export const Trigger = Menu.Trigger;
+export const Portal = Menu.Portal;
+export const MenuSub = Menu.Sub;
+export const CheckboxItem = Menu.CheckboxItem;
+export const RadioGroup = Menu.RadioGroup;
+export const RadioItem = Menu.RadioItem;
+export const Separator = Menu.Separator;
+export const Arrow = Menu.Arrow;
+export const Search = React.forwardRef(function Search({ className, value, defaultValue, onChange, onKeyDown, onClear, clearLabel = 'Clear search', ...props }, ref) {
+    const [internal, setInternal] = React.useState(defaultValue ?? '');
+    const current = value ?? internal;
+    return (_jsxs("div", { className: cn('flex items-center gap-2 bg-bg-white-0 p-2 text-text-soft-400 focus-within:text-text-sub-600 hover:bg-bg-weak-50', className), children: [_jsx(FormAsset, { file: '1f174.svg' }), _jsx("input", { ...props, ref: ref, value: current, "aria-label": props['aria-label'] ?? 'Search menu', placeholder: props.placeholder ?? 'Search...', className: 'min-w-0 flex-1 bg-transparent text-paragraph-sm text-text-strong-950 outline-none placeholder:text-text-soft-400 disabled:opacity-50', onChange: (event) => {
+                    if (value === undefined)
+                        setInternal(event.target.value);
+                    onChange?.(event);
+                }, onKeyDown: (event) => {
+                    onKeyDown?.(event);
+                    if (event.defaultPrevented)
+                        return;
+                    if (event.key === 'ArrowDown') {
+                        event.preventDefault();
+                        event.currentTarget
+                            .closest('[role="menu"]')
+                            ?.querySelector('[role="menuitem"]:not([data-disabled]), [role="menuitemcheckbox"]:not([data-disabled]), [role="menuitemradio"]:not([data-disabled])')
+                            ?.focus();
+                    }
+                    if (event.key !== 'Escape' && event.key !== 'Tab')
+                        event.stopPropagation();
+                } }), String(current).length > 0 && (_jsx("button", { type: 'button', disabled: props.disabled || props.readOnly, "aria-label": clearLabel, className: 'rounded outline-none focus-visible:ring-2 focus-visible:ring-primary-base', onClick: () => {
+                    if (value === undefined)
+                        setInternal('');
+                    onClear?.();
+                }, children: _jsx(FormAsset, { file: '90a18.svg' }) }))] }));
+});
+export const Action = React.forwardRef(function Action({ className, children, ...props }, ref) {
+    return (_jsxs(Menu.Item, { ...props, ref: ref, className: cn('mx-2 my-1 flex h-8 cursor-pointer items-center justify-center gap-1 rounded-full border border-stroke-soft-200 bg-bg-white-0 px-1.5 text-label-sm text-text-sub-600 shadow-regular-xs outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-bg-weak-50 data-[disabled]:opacity-50', className), children: [_jsx(FormAsset, { file: '76214.svg' }), _jsx("span", { className: 'px-1', children: children })] }));
+});
+export function Caption({ className, ...props }) {
+    return (_jsx("div", { ...props, className: cn('p-2 text-paragraph-sm text-text-soft-400', className) }));
+}
+const surface = 'z-50 flex flex-col gap-1 overflow-hidden rounded-2xl p-2 bg-bg-white-0 shadow-regular-md ring-1 ring-inset ring-stroke-soft-200';
+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';
+const row = 'group/item relative flex gap-2 items-center p-2 rounded-lg cursor-pointer select-none text-paragraph-sm text-text-strong-950 outline-none transition duration-200 ease-out data-[highlighted]:bg-bg-weak-50 data-[disabled]:text-text-disabled-300';
+export const Content = React.forwardRef(function Content({ className, sideOffset = 8, ...props }, ref) {
+    return (_jsx(Portal, { children: _jsx(Menu.Content, { ...props, ref: ref, sideOffset: sideOffset, className: cn(surface, motion, 'w-[300px] data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom', className) }) }));
+});
+export const Item = React.forwardRef(function Item({ inset, className, ...props }, ref) {
+    return (_jsx(Menu.Item, { ...props, ref: ref, className: cn(row, inset && 'pl-9', className) }));
+});
+export function ItemIcon({ as, className, ...props }) {
+    const Element = as ?? 'div';
+    return (_jsx(Element, { ...props, className: cn('size-5 text-text-sub-600 group-data-[disabled]/item:text-text-disabled-300', className) }));
+}
+export const Group = React.forwardRef(function Group({ className, ...props }, ref) {
+    return (_jsx(Menu.Group, { ...props, ref: ref, className: cn('flex flex-col gap-1', className) }));
+});
+export const Label = React.forwardRef(function Label({ className, ...props }, ref) {
+    return (_jsx(Menu.Label, { ...props, ref: ref, className: cn('px-2 py-1 text-subheading-xs uppercase text-text-soft-400', className) }));
+});
+export const MenuSubTrigger = React.forwardRef(function MenuSubTrigger({ children, inset, className, ...props }, ref) {
+    return (_jsxs(Menu.SubTrigger, { ...props, ref: ref, className: cn(row, inset && 'pl-9', className), children: [_jsx(Slottable, { children: children }), _jsx("span", { className: 'flex-1' }), _jsx(ItemIcon, { as: RiArrowRightSLine, "aria-hidden": 'true' })] }));
+});
+export const MenuSubContent = React.forwardRef(function MenuSubContent({ className, ...props }, ref) {
+    return (_jsx(Menu.SubContent, { ...props, ref: ref, className: cn(surface, motion, 'w-max', className) }));
+});

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type Appearance = {
+    variant: 'neutral' | 'primary' | 'destructive' | 'basic';
+    size: 'medium' | 'small' | 'xsmall';
+};
+export declare const fancyButtonVariants: (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, size, ...props }: PolymorphicComponentProps<T, Partial<Appearance>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,43 @@
+'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 palette = {
+    neutral: 'bg-bg-strong-950 text-text-white-0 shadow-fancy-buttons-neutral',
+    primary: 'bg-primary-base text-static-white shadow-fancy-buttons-primary',
+    destructive: 'bg-error-base text-static-white shadow-fancy-buttons-error',
+    basic: 'bg-bg-white-0 text-text-sub-600 shadow-fancy-buttons-stroke hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none',
+};
+export const fancyButtonVariants = slotRecipe({ variant: 'neutral', size: 'medium' }, ({ variant, size }) => ({
+    root: [
+        'group inline-flex relative items-center justify-center gap-3 rounded-full whitespace-nowrap text-label-sm outline-none transition duration-200 ease-out',
+        palette[variant],
+        { medium: 'h-10 px-3.5', small: 'h-9 px-3', xsmall: 'h-8 px-2.5' }[size],
+        variant !== 'basic' && [
+            // Keep the perimeter highlight separate from the surface lighting so the
+            // curved edge remains visible while hover changes only the wash opacity.
+            'before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:p-px before:pointer-events-none',
+            'before:bg-[linear-gradient(to_bottom,rgba(255,255,255,0.12),transparent)] before:[mask-image:linear-gradient(#fff_0_0),linear-gradient(#fff_0_0)] before:[mask-clip:content-box,border-box] before:[mask-composite:exclude]',
+            'after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:bg-[linear-gradient(to_bottom,#fff,transparent)] after:opacity-[.16] after:transition-opacity after:duration-200 after:ease-out hover:after:opacity-[.24]',
+        ],
+        'disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:bg-none disabled:shadow-none disabled:before:hidden disabled:after:hidden',
+    ],
+    icon: 'relative z-10 shrink-0 size-5 -mx-1',
+}));
+export const Root = React.forwardRef(function FancyButton({ variant, size, asChild, className, children, ...props }, ref) {
+    const options = { variant, size };
+    const Element = asChild ? Slot : 'button';
+    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, className: fancyButtonVariants(options).root({ className }), ...props, children: children }) }));
+});
+Root.displayName = 'FancyButtonRoot';
+export function Icon({ as, className, variant, size, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        variant,
+        size,
+    });
+    const Element = as || 'div';
+    return (_jsx(Element, { className: fancyButtonVariants(options).icon({ className }), ...props }));
+}
+Icon.displayName = 'FancyButtonIcon';

package/dist/components/ui/file-format-icon.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { toneClasses } from "./magna-recipe.js";
+type Appearance = {
+    size: 'medium' | 'small';
+    color: Exclude<keyof typeof toneClasses, 'teal'>;
+};
+export declare const fileFormatIconVariants: (options?: Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) => Record<"root" | "formatBox", (overrides?: (Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) | undefined) => string>;
+/** A document silhouette constructed from its sheet and fold dimensions. */
+export declare function Root({ size, color, format, className, ...props }: Partial<Appearance> & React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+export {};

package/dist/components/ui/file-format-icon.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { slotRecipe, toneClasses } from "./magna-recipe.js";
+export const fileFormatIconVariants = slotRecipe({ size: 'medium', color: 'gray' }, ({ size, color }) => ({
+    root: ['relative shrink-0', size === 'small' ? 'size-8' : 'size-10'],
+    formatBox: [
+        'absolute left-0 bottom-1.5 flex items-center h-4 rounded px-[3px] py-0.5 text-[11px] font-semibold leading-none text-static-white',
+        toneClasses[color].solid,
+    ],
+}));
+/** A document silhouette constructed from its sheet and fold dimensions. */
+export function Root({ size, color, format, className, ...props }) {
+    const styles = fileFormatIconVariants({ size, color });
+    const page = { x: 4, y: 0, width: 32, height: 40, corner: 6, fold: 13 };
+    const stroke = 1.5;
+    const inset = stroke / 2;
+    const left = page.x + inset;
+    const right = page.x + page.width - inset;
+    const top = page.y + inset;
+    const bottom = page.y + page.height - inset;
+    const radius = page.corner - inset;
+    // Offset the diagonal inward by the same distance as the horizontal edges.
+    const diagonal = page.x + page.width - page.fold - inset * Math.SQRT2;
+    const topCorner = diagonal + top;
+    const rightCorner = right - diagonal;
+    const tangent = radius * Math.tan(Math.PI / 8);
+    const diagonalTangent = tangent / Math.SQRT2;
+    const arc = `A ${radius} ${radius} 0 0 1`;
+    const outline = [
+        `M ${left + radius} ${top}`,
+        `H ${topCorner - tangent}`,
+        `${arc} ${topCorner + diagonalTangent} ${top + diagonalTangent}`,
+        `L ${right - diagonalTangent} ${rightCorner - diagonalTangent}`,
+        `${arc} ${right} ${rightCorner + tangent}`,
+        `V ${bottom - radius}`,
+        `${arc} ${right - radius} ${bottom}`,
+        `H ${left + radius}`,
+        `${arc} ${left} ${bottom - radius}`,
+        `V ${top + radius}`,
+        `${arc} ${left + radius} ${top}`,
+        'Z',
+    ].join(' ');
+    const foldX = page.x + page.width - page.fold;
+    const foldY = page.y + page.fold;
+    const foldRadius = 4;
+    const crease = `M ${foldX} ${page.y + 1} V ${foldY - foldRadius} A ${foldRadius} ${foldRadius} 0 0 0 ${foldX + foldRadius} ${foldY} H ${page.x + page.width - 1}`;
+    return (_jsxs("svg", { width: 40, height: 40, viewBox: '0 0 40 40', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', ...props, className: styles.root({ className }), children: [_jsx("path", { d: outline, strokeWidth: stroke, className: 'fill-bg-white-0 stroke-stroke-sub-300' }), _jsx("path", { d: crease, strokeWidth: stroke, className: 'stroke-stroke-sub-300' }), _jsx("foreignObject", { width: 40, height: 40, children: _jsx("div", { className: styles.formatBox(), children: format }) })] }));
+}
+Root.displayName = 'FileFormatIcon';

package/dist/components/ui/file-upload-compositions.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    filename: string;
+    description?: React.ReactNode;
+    status?: 'uploading' | 'success' | 'error';
+    showStatus?: boolean;
+    progress?: number;
+    format?: string;
+    icon?: React.ReactNode;
+    onCancel?: () => void;
+    onRemove?: () => void;
+    onRetry?: () => void;
+    disabled?: boolean;
+};
+export declare function Card({ filename, description, status, showStatus, progress, format, icon, onCancel, onRemove, onRetry, disabled, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export type ImageProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'title' | 'onError'> & {
+    type?: 'avatar' | 'company';
+    alignment?: 'vertical' | 'horizontal';
+    src?: string | null;
+    defaultSrc?: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    alt?: string;
+    accept?: string;
+    disabled?: boolean;
+    onFileChange?: (file: File | null) => void;
+    onRemove?: () => void;
+    onError?: (message: string) => void;
+    maxSizeBytes?: number;
+    renderPreview?: (src: string) => React.ReactNode;
+};
+export declare function Image({ type, alignment, src, defaultSrc, title, description, alt, accept, disabled, onFileChange, onRemove, onError, maxSizeBytes, renderPreview, className, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/file-upload-compositions.js

@@ -0,0 +1,88 @@
+'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 */
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import * as Button from "./button.js";
+import * as CompactButton from "./compact-button.js";
+import * as LinkButton from "./link-button.js";
+import * as FileFormatIcon from "./file-format-icon.js";
+import * as ProgressBar from "./progress-bar.js";
+const image = (name, className) => (_jsx("img", { src: __resolveMagnaAsset_1(`/magna/feeds/${name}.svg`), alt: '', "aria-hidden": 'true', className: cn('block max-w-none shrink-0', className) }));
+export function Card({ filename, description, status = 'uploading', showStatus = true, progress = 0, format = 'PDF', icon, onCancel, onRemove, onRetry, disabled = false, className, ...props }) {
+    const id = React.useId();
+    const isUploading = status === 'uploading';
+    const action = isUploading ? onCancel : onRemove;
+    return (_jsxs("div", { ...props, className: cn('flex w-full max-w-[400px] flex-col gap-4 overflow-hidden rounded-xl border bg-bg-white-0 py-[15px] pe-[15px] ps-[13px]', status === 'error' ? 'border-error-base' : 'border-stroke-soft-200', className), children: [_jsxs("div", { className: 'flex items-start gap-3', children: [icon ?? (_jsx(FileFormatIcon.Root, { format: format, color: 'red', "aria-hidden": 'true' })), _jsxs("div", { className: 'flex min-w-0 flex-1 flex-col items-start', children: [_jsx("div", { id: id, className: 'break-words text-label-sm text-text-strong-950', children: filename }), _jsxs("div", { className: 'mt-1 flex flex-wrap items-center gap-1 text-paragraph-xs text-text-sub-600', children: [description && _jsx("span", { children: description }), showStatus && (_jsxs(_Fragment, { children: [description && _jsx("span", { "aria-hidden": 'true', children: "\u2219" }), _jsxs("span", { role: 'status', className: 'inline-flex items-center gap-1 text-text-strong-950', children: [image(`upload-${isUploading ? 'loading' : status}`, isUploading ? 'motion-safe:animate-spin' : undefined), isUploading
+                                                        ? 'Uploading...'
+                                                        : status === 'success'
+                                                            ? 'Completed'
+                                                            : 'Failed'] })] }))] }), status === 'error' && (_jsx(LinkButton.Root, { type: 'button', variant: 'error', underline: true, disabled: disabled || !onRetry, onClick: onRetry, className: 'mt-2', children: "Try Again" }))] }), _jsx(CompactButton.Root, { type: 'button', variant: 'ghost', "aria-label": isUploading ? `Cancel upload of ${filename}` : `Remove ${filename}`, disabled: disabled || !action, onClick: action, children: image(isUploading
+                            ? 'upload-cancel'
+                            : status === 'error'
+                                ? 'upload-delete-error'
+                                : 'upload-delete') })] }), isUploading && (_jsx(ProgressBar.Root, { value: progress, "aria-labelledby": id }))] }));
+}
+export function Image({ type = 'avatar', alignment = 'vertical', src, defaultSrc, title = 'Upload Image', description = 'Min 400x400px, PNG or JPEG', alt = 'Uploaded image', accept = 'image/png,image/jpeg', disabled = false, onFileChange, onRemove, onError, maxSizeBytes, renderPreview, className, ...props }) {
+    const [internal, setInternal] = React.useState(defaultSrc ?? null);
+    const [error, setError] = React.useState('');
+    const input = React.useRef(null);
+    const uploadButton = React.useRef(null);
+    const ownedUrl = React.useRef(null);
+    const preview = src === undefined ? internal : src;
+    const compact = alignment === 'horizontal';
+    const id = React.useId();
+    React.useEffect(() => () => {
+        if (ownedUrl.current)
+            URL.revokeObjectURL(ownedUrl.current);
+    }, []);
+    const release = () => {
+        if (ownedUrl.current) {
+            URL.revokeObjectURL(ownedUrl.current);
+            ownedUrl.current = null;
+        }
+    };
+    const select = (file) => {
+        const accepted = accept
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean);
+        const matches = accepted.length === 0 ||
+            accepted.some((pattern) => pattern.startsWith('.')
+                ? file.name.toLowerCase().endsWith(pattern.toLowerCase())
+                : pattern.endsWith('/*')
+                    ? file.type.startsWith(pattern.slice(0, -1))
+                    : file.type === pattern);
+        const message = !matches
+            ? 'Choose an accepted image file.'
+            : maxSizeBytes !== undefined && file.size > maxSizeBytes
+                ? 'The selected image exceeds the size limit.'
+                : '';
+        setError(message);
+        if (message) {
+            onError?.(message);
+            return;
+        }
+        release();
+        const url = URL.createObjectURL(file);
+        ownedUrl.current = url;
+        if (src === undefined)
+            setInternal(url);
+        onFileChange?.(file);
+    };
+    return (_jsxs("div", { ...props, className: cn('flex max-w-full items-start gap-5', compact && 'items-center', className), children: [_jsx("div", { className: cn('flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-bg-soft-200', compact ? 'size-14' : 'size-16', preview && type === 'avatar' && 'bg-yellow-200'), children: preview ? ((renderPreview?.(preview) ?? (_jsx("img", { src: preview, alt: alt, className: 'size-full rounded-full object-cover' })))) : type === 'avatar' ? (image(compact ? 'upload-avatar-empty56' : 'upload-avatar-empty64')) : (_jsx("span", { className: compact ? 'scale-[1.4]' : 'scale-[1.6]', children: image('upload-company-empty') })) }), _jsxs("div", { className: 'min-w-0 space-y-3', children: [!compact && (_jsxs("div", { className: 'space-y-1', children: [_jsx("div", { id: `${id}-title`, className: 'text-label-md text-text-strong-950', children: title }), _jsx("div", { id: `${id}-description`, className: 'text-paragraph-sm text-text-sub-600', children: description })] })), _jsx("input", { ref: input, type: 'file', accept: accept, disabled: disabled, className: 'hidden', "aria-label": type === 'avatar' ? 'Choose avatar image' : 'Choose company image', onChange: (event) => {
+                            const file = event.target.files?.[0];
+                            if (file)
+                                select(file);
+                            event.target.value = '';
+                        } }), _jsxs("div", { className: 'flex flex-wrap items-center gap-3', children: [preview && (_jsx(Button.Root, { type: 'button', size: 'xsmall', variant: 'error', mode: 'stroke', disabled: disabled, onClick: () => {
+                                    release();
+                                    if (src === undefined)
+                                        setInternal(null);
+                                    setError('');
+                                    onFileChange?.(null);
+                                    onRemove?.();
+                                    queueMicrotask(() => uploadButton.current?.focus());
+                                }, children: "Remove" })), _jsx(Button.Root, { ref: uploadButton, type: 'button', size: 'xsmall', variant: 'neutral', mode: 'stroke', disabled: disabled, "aria-describedby": !compact ? `${id}-description` : undefined, onClick: () => input.current?.click(), children: preview ? 'Change' : 'Upload' })] }), error && (_jsx("p", { role: 'alert', className: 'text-paragraph-xs text-error-base', children: error }))] })] }));
+}

package/dist/components/ui/file-upload.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+export declare const Root: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLLabelElement>>;
+export declare const Button: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: 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 { Card, Image } from "./file-upload-compositions.js";
+export type { CardProps, ImageProps } from "./file-upload-compositions.js";

package/dist/components/ui/file-upload.js

@@ -0,0 +1,20 @@
+'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 const Root = React.forwardRef(function FileUpload({ asChild, className, ...props }, ref) {
+    const Element = asChild ? Slot : 'label';
+    return (_jsx(Element, { ...props, ref: ref, className: cn('flex w-full cursor-pointer flex-col items-center gap-5 rounded-xl border border-dashed border-stroke-sub-300 bg-bg-white-0 p-8 text-center transition duration-200 ease-out focus-within:ring-2 focus-within:ring-primary-base hover:bg-bg-weak-50', className) }));
+});
+Root.displayName = 'FileUpload';
+export const Button = React.forwardRef(function FileUploadButton({ asChild, className, ...props }, ref) {
+    const Element = asChild ? Slot : 'div';
+    return (_jsx(Element, { ...props, ref: ref, className: cn('pointer-events-none inline-flex h-8 items-center justify-center gap-2.5 whitespace-nowrap rounded-lg bg-bg-white-0 px-2.5 text-label-sm text-text-sub-600 ring-1 ring-inset ring-stroke-soft-200', className) }));
+});
+Button.displayName = 'FileUploadButton';
+export function Icon({ as, className, ...props }) {
+    const Element = as || 'div';
+    return (_jsx(Element, { ...props, className: cn('size-6 text-text-sub-600', className) }));
+}
+export { Card, Image } from "./file-upload-compositions.js";