magnaui 0.1.0

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

@@ -0,0 +1,420 @@
+import * as React from "react";
+import { type VariantProps } from "../../utils/tv.js";
+export declare const AVATAR_ROOT_NAME = "AvatarRoot";
+export declare const avatarVariants: import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    size: {
+        '80': {
+            root: string;
+            indicator: string;
+        };
+        '72': {
+            root: string;
+            indicator: string;
+        };
+        '64': {
+            root: string;
+            indicator: string;
+        };
+        '56': {
+            root: string;
+            indicator: string;
+        };
+        '48': {
+            root: string;
+            indicator: string;
+        };
+        '40': {
+            root: string;
+            indicator: string;
+        };
+        '32': {
+            root: string;
+            indicator: string;
+        };
+        '24': {
+            root: string;
+            indicator: string;
+        };
+        '20': {
+            root: string;
+            indicator: string;
+        };
+    };
+    color: {
+        gray: {
+            root: string;
+        };
+        yellow: {
+            root: string;
+        };
+        blue: {
+            root: string;
+        };
+        sky: {
+            root: string;
+        };
+        purple: {
+            root: string;
+        };
+        red: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    indicator: string;
+}, undefined, {
+    responsiveVariants?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | {
+        size?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | undefined;
+        color?: 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: {
+        '80': {
+            root: string;
+            indicator: string;
+        };
+        '72': {
+            root: string;
+            indicator: string;
+        };
+        '64': {
+            root: string;
+            indicator: string;
+        };
+        '56': {
+            root: string;
+            indicator: string;
+        };
+        '48': {
+            root: string;
+            indicator: string;
+        };
+        '40': {
+            root: string;
+            indicator: string;
+        };
+        '32': {
+            root: string;
+            indicator: string;
+        };
+        '24': {
+            root: string;
+            indicator: string;
+        };
+        '20': {
+            root: string;
+            indicator: string;
+        };
+    };
+    color: {
+        gray: {
+            root: string;
+        };
+        yellow: {
+            root: string;
+        };
+        blue: {
+            root: string;
+        };
+        sky: {
+            root: string;
+        };
+        purple: {
+            root: string;
+        };
+        red: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    indicator: string;
+}, import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    size: {
+        '80': {
+            root: string;
+            indicator: string;
+        };
+        '72': {
+            root: string;
+            indicator: string;
+        };
+        '64': {
+            root: string;
+            indicator: string;
+        };
+        '56': {
+            root: string;
+            indicator: string;
+        };
+        '48': {
+            root: string;
+            indicator: string;
+        };
+        '40': {
+            root: string;
+            indicator: string;
+        };
+        '32': {
+            root: string;
+            indicator: string;
+        };
+        '24': {
+            root: string;
+            indicator: string;
+        };
+        '20': {
+            root: string;
+            indicator: string;
+        };
+    };
+    color: {
+        gray: {
+            root: string;
+        };
+        yellow: {
+            root: string;
+        };
+        blue: {
+            root: string;
+        };
+        sky: {
+            root: string;
+        };
+        purple: {
+            root: string;
+        };
+        red: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    indicator: string;
+}, undefined, import("../../vendor/tailwind-variants/config.js").TVConfig<{
+    size: {
+        '80': {
+            root: string;
+            indicator: string;
+        };
+        '72': {
+            root: string;
+            indicator: string;
+        };
+        '64': {
+            root: string;
+            indicator: string;
+        };
+        '56': {
+            root: string;
+            indicator: string;
+        };
+        '48': {
+            root: string;
+            indicator: string;
+        };
+        '40': {
+            root: string;
+            indicator: string;
+        };
+        '32': {
+            root: string;
+            indicator: string;
+        };
+        '24': {
+            root: string;
+            indicator: string;
+        };
+        '20': {
+            root: string;
+            indicator: string;
+        };
+    };
+    color: {
+        gray: {
+            root: string;
+        };
+        yellow: {
+            root: string;
+        };
+        blue: {
+            root: string;
+        };
+        sky: {
+            root: string;
+        };
+        purple: {
+            root: string;
+        };
+        red: {
+            root: string;
+        };
+    };
+}, {
+    size: {
+        '80': {
+            root: string;
+            indicator: string;
+        };
+        '72': {
+            root: string;
+            indicator: string;
+        };
+        '64': {
+            root: string;
+            indicator: string;
+        };
+        '56': {
+            root: string;
+            indicator: string;
+        };
+        '48': {
+            root: string;
+            indicator: string;
+        };
+        '40': {
+            root: string;
+            indicator: string;
+        };
+        '32': {
+            root: string;
+            indicator: string;
+        };
+        '24': {
+            root: string;
+            indicator: string;
+        };
+        '20': {
+            root: string;
+            indicator: string;
+        };
+    };
+    color: {
+        gray: {
+            root: string;
+        };
+        yellow: {
+            root: string;
+        };
+        blue: {
+            root: string;
+        };
+        sky: {
+            root: string;
+        };
+        purple: {
+            root: string;
+        };
+        red: {
+            root: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type Appearance = VariantProps<typeof avatarVariants>;
+/** @internal Shared by the two avatar group compositions. */
+export declare const AvatarSizeContext: React.Context<"80" | "72" | "64" | "56" | "48" | "40" | "32" | "24" | "20" | undefined>;
+export type AvatarRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> & Appearance & {
+    asChild?: boolean;
+    placeholderType?: 'user' | 'company';
+};
+declare const Root: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & Appearance & {
+    asChild?: boolean;
+    placeholderType?: "user" | "company";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Image: React.ForwardRefExoticComponent<Omit<React.ImgHTMLAttributes<HTMLImageElement>, "color"> & Appearance & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLImageElement>>;
+declare function Indicator({ size, color, className, position, ...props }: React.HTMLAttributes<HTMLDivElement> & Appearance & {
+    position?: 'top' | 'bottom';
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace Indicator {
+    var displayName: string;
+}
+export declare const avatarStatusVariants: import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    status: {
+        online: string;
+        offline: string;
+        busy: string;
+        away: string;
+    };
+}, undefined, "box-content size-3 rounded-full border-4 border-bg-white-0", {
+    responsiveVariants?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | {
+        status?: 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[];
+                }[];
+            };
+        };
+    };
+}, {
+    status: {
+        online: string;
+        offline: string;
+        busy: string;
+        away: string;
+    };
+}, undefined, import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    status: {
+        online: string;
+        offline: string;
+        busy: string;
+        away: string;
+    };
+}, undefined, "box-content size-3 rounded-full border-4 border-bg-white-0", import("../../vendor/tailwind-variants/config.js").TVConfig<{
+    status: {
+        online: string;
+        offline: string;
+        busy: string;
+        away: string;
+    };
+}, {
+    status: {
+        online: string;
+        offline: string;
+        busy: string;
+        away: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare function Status({ status, className, ...props }: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof avatarStatusVariants>): import("react/jsx-runtime").JSX.Element;
+declare namespace Status {
+    var displayName: string;
+}
+declare const BrandLogo: React.ForwardRefExoticComponent<React.ImgHTMLAttributes<HTMLImageElement> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLImageElement>>;
+declare function Notification({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Notification {
+    var displayName: string;
+}
+export { Root, Image, Indicator, Status, BrandLogo, Notification };

package/dist/components/ui/avatar.js

@@ -0,0 +1,107 @@
+'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";
+import { tv } from "../../utils/tv.js";
+import { IconEmptyCompany, IconEmptyUser } from "./avatar-empty-icons.js";
+export const AVATAR_ROOT_NAME = 'AvatarRoot';
+export const avatarVariants = tv({
+    slots: {
+        root: 'relative flex shrink-0 select-none items-center justify-center rounded-full text-center uppercase',
+        image: 'size-full rounded-full object-cover',
+        indicator: 'absolute flex size-8 items-center justify-center drop-shadow-[0_2px_4px_#1b1c1d0a]',
+    },
+    variants: {
+        size: {
+            '80': { root: 'size-20 text-title-h5', indicator: '-right-2' },
+            '72': { root: 'size-[72px] text-title-h5', indicator: '-right-2' },
+            '64': {
+                root: 'size-16 text-title-h5',
+                indicator: '-right-2 scale-[.875]',
+            },
+            '56': { root: 'size-14 text-label-lg', indicator: '-right-1.5 scale-75' },
+            '48': {
+                root: 'size-12 text-label-lg',
+                indicator: '-right-1.5 scale-[.625]',
+            },
+            '40': {
+                root: 'size-10 text-label-md',
+                indicator: '-right-1.5 scale-[.5625]',
+            },
+            '32': { root: 'size-8 text-label-sm', indicator: '-right-1.5 scale-50' },
+            '24': {
+                root: 'size-6 text-label-xs',
+                indicator: '-right-1 scale-[.375]',
+            },
+            '20': {
+                root: 'size-5 text-label-xs',
+                indicator: '-right-1 scale-[.3125]',
+            },
+        },
+        color: {
+            gray: { root: 'bg-bg-soft-200 text-static-black' },
+            yellow: { root: 'bg-yellow-200 text-yellow-950' },
+            blue: { root: 'bg-blue-200 text-blue-950' },
+            sky: { root: 'bg-sky-200 text-sky-950' },
+            purple: { root: 'bg-purple-200 text-purple-950' },
+            red: { root: 'bg-red-200 text-red-950' },
+        },
+    },
+    defaultVariants: { size: '80', color: 'gray' },
+});
+/** @internal Shared by the two avatar group compositions. */
+export const AvatarSizeContext = React.createContext(undefined);
+const AppearanceContext = React.createContext({});
+const Root = React.forwardRef(function Root({ size, color, asChild, placeholderType = 'user', className, children, ...props }, ref) {
+    const groupSize = React.useContext(AvatarSizeContext);
+    const appearance = { size: size ?? groupSize, color };
+    const Tag = asChild && children ? Slot : 'div';
+    const Placeholder = placeholderType === 'company' ? IconEmptyCompany : IconEmptyUser;
+    return (_jsx(AppearanceContext.Provider, { value: appearance, children: _jsx(Tag, { ...props, ref: ref, className: avatarVariants(appearance).root({ className }), children: children || (_jsx(Placeholder, { className: avatarVariants(appearance).image() })) }) }));
+});
+function useAppearance(own) {
+    const inherited = React.useContext(AppearanceContext);
+    return avatarVariants({
+        size: own.size ?? inherited.size,
+        color: own.color ?? inherited.color,
+    });
+}
+const Image = React.forwardRef(function Image({ size, color, asChild, className, ...props }, ref) {
+    const Tag = asChild ? Slot : 'img';
+    return (_jsx(Tag, { ...props, ref: ref, className: useAppearance({ size, color }).image({ className }) }));
+});
+function Indicator({ size, color, className, position = 'bottom', ...props }) {
+    return (_jsx("div", { ...props, className: cn(useAppearance({ size, color }).indicator(), position === 'top'
+            ? 'top-0 origin-top-right'
+            : 'bottom-0 origin-bottom-right', className) }));
+}
+export const avatarStatusVariants = tv({
+    base: 'box-content size-3 rounded-full border-4 border-bg-white-0',
+    variants: {
+        status: {
+            online: 'bg-success-base',
+            offline: 'bg-faded-base',
+            busy: 'bg-error-base',
+            away: 'bg-away-base',
+        },
+    },
+    defaultVariants: { status: 'online' },
+});
+function Status({ status, className, ...props }) {
+    return (_jsx("div", { ...props, className: avatarStatusVariants({ status, className }) }));
+}
+const BrandLogo = React.forwardRef(function BrandLogo({ asChild, className, ...props }, ref) {
+    const Tag = asChild ? Slot : 'img';
+    return (_jsx(Tag, { ...props, ref: ref, className: cn('box-content size-6 rounded-full border-2 border-bg-white-0', className) }));
+});
+function Notification({ className, ...props }) {
+    return (_jsx("div", { ...props, className: cn('box-content size-3 rounded-full border-2 border-bg-white-0 bg-error-base', className) }));
+}
+Root.displayName = AVATAR_ROOT_NAME;
+Image.displayName = 'AvatarImage';
+Indicator.displayName = 'AvatarIndicator';
+Status.displayName = 'AvatarStatus';
+BrandLogo.displayName = 'AvatarBrandLogo';
+Notification.displayName = 'AvatarNotification';
+export { Root, Image, Indicator, Status, BrandLogo, Notification };

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+import { toneClasses } from "./magna-recipe.js";
+type Appearance = {
+    size: 'small' | 'medium';
+    variant: 'filled' | 'light' | 'lighter' | 'stroke';
+    color: keyof typeof toneClasses;
+    disabled: boolean;
+    square: boolean;
+};
+export declare const badgeVariants: (options?: Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) => Record<"root" | "icon" | "dot", (overrides?: (Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) | undefined) => string>;
+export declare const Root: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & Partial<Appearance> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare function Icon<T extends React.ElementType = 'div'>({ as, className, size, variant, color, disabled, square, ...props }: PolymorphicComponentProps<T, Partial<Appearance>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+export declare function Dot({ className, size, variant, color, disabled, square, ...props }: Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> & Partial<Appearance>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dot {
+    var displayName: string;
+}
+export {};

package/dist/components/ui/badge.js

@@ -0,0 +1,67 @@
+'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, toneClasses } from "./magna-recipe.js";
+const appearance = React.createContext({});
+export const badgeVariants = slotRecipe({
+    size: 'small',
+    variant: 'filled',
+    color: 'gray',
+    disabled: false,
+    square: false,
+}, ({ size, variant, color, disabled, square }) => {
+    const tone = toneClasses[color];
+    const surfaces = {
+        filled: [tone.solid, 'text-static-white'],
+        light: [tone.light, tone.deep],
+        lighter: [tone.pale, tone.ink],
+        stroke: [tone.ink, 'ring-current ring-1 ring-inset'],
+    };
+    return {
+        root: [
+            'inline-flex justify-center items-center gap-1.5 rounded-full leading-none transition duration-200 ease-out',
+            size === 'small'
+                ? 'h-4 text-subheading-2xs uppercase has-[>.dot]:gap-2'
+                : 'h-5 text-label-xs',
+            square ? ['px-1', size === 'small' ? 'min-w-4' : 'min-w-5'] : 'px-2',
+            disabled
+                ? 'pointer-events-none bg-transparent text-text-disabled-300 ring-1 ring-inset ring-stroke-soft-200'
+                : surfaces[variant],
+        ],
+        icon: ['shrink-0 -mx-1', size === 'small' ? 'size-3' : 'size-4'],
+        dot: [
+            'dot grid size-4 place-items-center before:block before:size-1 before:rounded-full before:bg-current',
+            size === 'small' ? '-mx-2' : '-mx-1.5',
+        ],
+    };
+});
+export const Root = React.forwardRef(function Badge({ size, variant, color, disabled, square, children, asChild, className, ...props }, ref) {
+    const options = { size, variant, color, disabled, square };
+    const Element = asChild ? Slot : 'div';
+    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, "aria-disabled": disabled || undefined, className: badgeVariants(options).root({ className }), ...props, children: children }) }));
+});
+Root.displayName = 'BadgeRoot';
+export function Icon({ as, className, size, variant, color, disabled, square, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        size,
+        variant,
+        color,
+        disabled,
+        square,
+    });
+    const Element = as || 'div';
+    return (_jsx(Element, { className: badgeVariants(options).icon({ className }), ...props }));
+}
+Icon.displayName = 'BadgeIcon';
+export function Dot({ className, size, variant, color, disabled, square, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        size,
+        variant,
+        color,
+        disabled,
+        square,
+    });
+    return (_jsx("div", { className: badgeVariants(options).dot({ className }), ...props }));
+}
+Dot.displayName = 'BadgeDot';

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { bannerAssets } from "./display-assets.js";
+export type BannerStatus = keyof typeof bannerAssets;
+export type BannerVariant = 'filled' | 'light' | 'lighter' | 'stroke';
+export type BannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
+    status?: BannerStatus;
+    variant?: BannerVariant;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+    icon?: React.ReactNode;
+    showIcon?: boolean;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+};
+export declare const Root: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    status?: BannerStatus;
+    variant?: BannerVariant;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+    icon?: React.ReactNode;
+    showIcon?: boolean;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/banner.js

@@ -0,0 +1,41 @@
+'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 { DisplayAsset } from "./display-asset.js";
+import { bannerAssets } from "./display-assets.js";
+const backgrounds = {
+    error: {
+        filled: 'bg-error-base',
+        light: 'bg-error-light',
+        lighter: 'bg-error-lighter',
+    },
+    warning: {
+        filled: 'bg-warning-base',
+        light: 'bg-warning-light',
+        lighter: 'bg-warning-lighter',
+    },
+    success: {
+        filled: 'bg-success-base',
+        light: 'bg-success-light',
+        lighter: 'bg-success-lighter',
+    },
+    information: {
+        filled: 'bg-information-base',
+        light: 'bg-information-light',
+        lighter: 'bg-information-lighter',
+    },
+    feature: {
+        filled: 'bg-faded-base',
+        light: 'bg-faded-light',
+        lighter: 'bg-faded-lighter',
+    },
+};
+export const Root = React.forwardRef(function Banner({ status = 'information', variant = 'filled', title, description, action, icon, showIcon = true, onDismiss, dismissLabel = 'Dismiss banner', children, className, ...props }, ref) {
+    const filled = variant === 'filled';
+    const assets = bannerAssets[status][filled ? 'filled' : 'light'];
+    return (_jsxs("div", { ref: ref, role: 'status', ...props, className: cn('relative flex w-full items-center justify-center gap-3 px-12 py-3 text-paragraph-sm', variant === 'stroke'
+            ? 'border-b border-stroke-soft-200 bg-bg-white-0'
+            : backgrounds[status][variant], filled ? 'text-static-white' : 'text-text-strong-950', className), children: [showIcon && (_jsx("span", { className: 'flex size-5 shrink-0 items-center justify-center', "aria-hidden": 'true', children: icon ?? _jsx(DisplayAsset, { src: assets.icon }) })), _jsxs("div", { className: 'flex min-w-0 flex-wrap items-center justify-center gap-x-1 gap-y-1', children: [title && _jsx("span", { className: 'text-label-sm', children: title }), title && description && _jsx("span", { "aria-hidden": 'true', children: "\u00B7" }), description && _jsx("span", { children: description }), children, action] }), onDismiss && (_jsx(CompactButton.Root, { type: 'button', size: 'medium', variant: 'ghost', "aria-label": dismissLabel, onClick: onDismiss, className: 'absolute end-3 top-1/2 -translate-y-1/2 text-inherit hover:bg-transparent hover:text-inherit', children: _jsx(DisplayAsset, { src: assets.close }) }))] }));
+});