magnaui 0.1.0

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { keyIconAssets } from "./display-assets.js";
+export type KeyIconColor = keyof typeof keyIconAssets;
+export type KeyIconSize = 32 | 40 | 48 | 56 | 64;
+export type KeyIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & {
+    color?: KeyIconColor;
+    size?: KeyIconSize;
+    variant?: 'stroke' | 'lighter';
+};
+export declare const Root: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> & {
+    color?: KeyIconColor;
+    size?: KeyIconSize;
+    variant?: "stroke" | "lighter";
+} & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { DisplayAsset } from "./display-asset.js";
+import { keyIconAssets } from "./display-assets.js";
+const tones = {
+    gray: 'bg-faded-lighter text-text-sub-600',
+    blue: 'bg-information-lighter text-information-base',
+    orange: 'bg-warning-lighter text-warning-base',
+    red: 'bg-error-lighter text-error-base',
+    green: 'bg-success-lighter text-success-base',
+    yellow: 'bg-away-lighter text-away-base',
+    purple: 'bg-feature-lighter text-feature-base',
+    pink: 'bg-highlighted-lighter text-highlighted-base',
+    teal: 'bg-verified-lighter text-verified-base',
+};
+const sizes = {
+    32: 'size-8',
+    40: 'size-10',
+    48: 'size-12',
+    56: 'size-14',
+    64: 'size-16',
+};
+const iconSizes = {
+    32: 'size-5',
+    40: 'size-5',
+    48: 'size-6',
+    56: 'size-7',
+    64: 'size-8',
+};
+export const Root = React.forwardRef(function KeyIcon({ size = 64, color = 'gray', variant = 'stroke', children, className, ...props }, ref) {
+    return (_jsx("span", { ref: ref, ...props, className: cn('inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full', sizes[size], tones[color], variant === 'stroke' &&
+            'bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200', className), children: children ? (_jsx("span", { className: cn('flex items-center justify-center [&>svg]:size-full', iconSizes[size]), children: children })) : (_jsx(DisplayAsset, { src: keyIconAssets[color][size] })) }));
+});

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-label";
+export declare const Root: React.ForwardRefExoticComponent<Omit<Primitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
+    disabled?: boolean;
+} & React.RefAttributes<HTMLLabelElement>>;
+export declare function Asterisk({ children, className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Sub({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/label.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-label";
+import { cn } from "../../utils/cn.js";
+export const Root = React.forwardRef(function Label({ disabled, className, ...props }, ref) {
+    return (_jsx(Primitive.Root, { ...props, ref: ref, "aria-disabled": disabled, className: cn('group flex cursor-pointer items-center gap-px text-label-sm text-text-strong-950 aria-disabled:text-text-disabled-300', className) }));
+});
+Root.displayName = 'LabelRoot';
+export function Asterisk({ children, className, ...props }) {
+    return (_jsx("span", { ...props, className: cn('text-primary-base group-aria-disabled:text-text-disabled-300', className), children: children ?? '*' }));
+}
+export function Sub({ className, ...props }) {
+    return (_jsx("span", { ...props, className: cn('text-paragraph-sm text-text-sub-600 group-aria-disabled:text-text-disabled-300', className) }));
+}

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

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

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

@@ -0,0 +1,38 @@
+'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 linkButtonVariants = slotRecipe({ variant: 'gray', size: 'medium', underline: false }, ({ variant, size, underline }) => ({
+    root: [
+        'group inline-flex items-center justify-center gap-1 whitespace-nowrap outline-none transition duration-200 ease-out underline underline-offset-[3px] hover:decoration-current focus-visible:decoration-current',
+        underline ? 'decoration-current' : 'decoration-transparent',
+        size === 'small' ? 'h-4 text-label-xs' : 'h-5 text-label-sm',
+        {
+            gray: 'text-text-sub-600 focus-visible:text-text-strong-950',
+            black: 'text-text-strong-950',
+            primary: 'text-primary-base hover:text-primary-darker',
+            error: 'text-error-base hover:text-red-700',
+            modifiable: '',
+        }[variant],
+        'disabled:pointer-events-none disabled:text-text-disabled-300 disabled:no-underline',
+    ],
+    icon: ['shrink-0', size === 'small' ? 'size-4' : 'size-5'],
+}));
+export const Root = React.forwardRef(function LinkButton({ variant, size, underline, asChild, className, children, ...props }, ref) {
+    const options = { variant, size, underline };
+    const Element = asChild ? Slot : 'button';
+    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, className: linkButtonVariants(options).root({ className }), ...props, children: children }) }));
+});
+Root.displayName = 'LinkButtonRoot';
+export function Icon({ as, className, variant, size, underline, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        variant,
+        size,
+        underline,
+    });
+    const Element = as || 'div';
+    return (_jsx(Element, { className: linkButtonVariants(options).icon({ className }), ...props }));
+}
+Icon.displayName = 'LinkButtonIcon';

package/dist/components/ui/magna-recipe.d.ts

@@ -0,0 +1,83 @@
+import type { ClassValue } from "../../utils/tv.js";
+type ClassInput = {
+    class?: ClassValue;
+    className?: ClassValue;
+};
+/** Resolve explicit options without letting an omitted child prop erase its parent. */
+export declare function mergeOptions<T extends object>(...sources: (Partial<T> | undefined)[]): T;
+/** A typed slot recipe. Slot calls may override state as well as append classes. */
+export declare function slotRecipe<P extends object, S extends string>(defaults: P, describe: (options: P) => Record<S, ClassValue>): (options?: Partial<P> & ClassInput) => Record<S, (overrides?: Partial<P> & ClassInput) => string>;
+/** Semantic color recipes shared by small information surfaces. */
+export declare const toneClasses: {
+    gray: {
+        solid: string;
+        light: string;
+        pale: string;
+        ink: string;
+        deep: string;
+    };
+    blue: {
+        solid: string;
+        light: string;
+        pale: string;
+        ink: string;
+        deep: string;
+    };
+    orange: {
+        solid: string;
+        light: string;
+        pale: string;
+        ink: string;
+        deep: string;
+    };
+    red: {
+        solid: string;
+        light: string;
+        pale: string;
+        ink: string;
+        deep: string;
+    };
+    green: {
+        solid: string;
+        light: string;
+        pale: string;
+        ink: string;
+        deep: string;
+    };
+    yellow: {
+        solid: string;
+        light: string;
+        pale: string;
+        ink: string;
+        deep: string;
+    };
+    purple: {
+        solid: string;
+        light: string;
+        pale: string;
+        ink: string;
+        deep: string;
+    };
+    sky: {
+        solid: string;
+        light: string;
+        pale: string;
+        ink: string;
+        deep: string;
+    };
+    pink: {
+        solid: string;
+        light: string;
+        pale: string;
+        ink: string;
+        deep: string;
+    };
+    teal: {
+        solid: string;
+        light: string;
+        pale: string;
+        ink: string;
+        deep: string;
+    };
+};
+export {};

package/dist/components/ui/magna-recipe.js

@@ -0,0 +1,99 @@
+import { cn } from "../../utils/cn.js";
+/** Resolve explicit options without letting an omitted child prop erase its parent. */
+export function mergeOptions(...sources) {
+    const result = {};
+    for (const source of sources) {
+        for (const [key, value] of Object.entries(source ?? {})) {
+            if (value !== undefined)
+                result[key] = value;
+        }
+    }
+    return result;
+}
+/** A typed slot recipe. Slot calls may override state as well as append classes. */
+export function slotRecipe(defaults, describe) {
+    return (options = {}) => {
+        const resolved = mergeOptions(defaults, options);
+        const names = Object.keys(describe(resolved));
+        return Object.fromEntries(names.map((name) => [
+            name,
+            (overrides = {}) => {
+                const classes = describe(mergeOptions(resolved, overrides))[name];
+                return cn(classes, name === 'root' && options.class, name === 'root' && options.className, overrides.class, overrides.className);
+            },
+        ]));
+    };
+}
+/** Semantic color recipes shared by small information surfaces. */
+export const toneClasses = {
+    gray: {
+        solid: 'bg-faded-base',
+        light: 'bg-faded-light',
+        pale: 'bg-faded-lighter',
+        ink: 'text-faded-base',
+        deep: 'text-faded-dark',
+    },
+    blue: {
+        solid: 'bg-information-base',
+        light: 'bg-information-light',
+        pale: 'bg-information-lighter',
+        ink: 'text-information-base',
+        deep: 'text-information-dark',
+    },
+    orange: {
+        solid: 'bg-warning-base',
+        light: 'bg-warning-light',
+        pale: 'bg-warning-lighter',
+        ink: 'text-warning-base',
+        deep: 'text-warning-dark',
+    },
+    red: {
+        solid: 'bg-error-base',
+        light: 'bg-error-light',
+        pale: 'bg-error-lighter',
+        ink: 'text-error-base',
+        deep: 'text-error-dark',
+    },
+    green: {
+        solid: 'bg-success-base',
+        light: 'bg-success-light',
+        pale: 'bg-success-lighter',
+        ink: 'text-success-base',
+        deep: 'text-success-dark',
+    },
+    yellow: {
+        solid: 'bg-away-base',
+        light: 'bg-away-light',
+        pale: 'bg-away-lighter',
+        ink: 'text-away-base',
+        deep: 'text-away-dark',
+    },
+    purple: {
+        solid: 'bg-feature-base',
+        light: 'bg-feature-light',
+        pale: 'bg-feature-lighter',
+        ink: 'text-feature-base',
+        deep: 'text-feature-dark',
+    },
+    sky: {
+        solid: 'bg-verified-base',
+        light: 'bg-verified-light',
+        pale: 'bg-verified-lighter',
+        ink: 'text-verified-base',
+        deep: 'text-verified-dark',
+    },
+    pink: {
+        solid: 'bg-highlighted-base',
+        light: 'bg-highlighted-light',
+        pale: 'bg-highlighted-lighter',
+        ink: 'text-highlighted-base',
+        deep: 'text-highlighted-dark',
+    },
+    teal: {
+        solid: 'bg-stable-base',
+        light: 'bg-stable-light',
+        pale: 'bg-stable-lighter',
+        ink: 'text-stable-base',
+        deep: 'text-stable-dark',
+    },
+};

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { type RemixiconComponentType } from "@remixicon/react";
+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 Portal: React.FC<Dialog.DialogPortalProps>;
+export declare const Overlay: React.ForwardRefExoticComponent<Omit<Dialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Content: React.ForwardRefExoticComponent<Omit<Dialog.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    overlayClassName?: string;
+    showClose?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Title: React.ForwardRefExoticComponent<Omit<Dialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const Description: React.ForwardRefExoticComponent<Omit<Dialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare function Header({ title, description, icon: Icon, children, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    icon?: RemixiconComponentType;
+    title?: string;
+    description?: string;
+}): import("react/jsx-runtime").JSX.Element;
+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/modal.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { Slottable } from "@radix-ui/react-slot";
+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 Portal = Dialog.Portal;
+const fade = 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0';
+export const Overlay = React.forwardRef(function Overlay({ className, ...props }, ref) {
+    return (_jsx(Dialog.Overlay, { ...props, ref: ref, className: cn('fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-overlay p-4 backdrop-blur-[10px]', fade, className) }));
+});
+export const Content = React.forwardRef(function Content({ children, className, overlayClassName, showClose = true, ...props }, ref) {
+    return (_jsx(Portal, { children: _jsx(Overlay, { className: overlayClassName, children: _jsxs(Dialog.Content, { ...props, ref: ref, className: cn('relative w-full max-w-[400px] rounded-20 bg-bg-white-0 shadow-regular-md outline-none', fade, 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', className), children: [_jsx(Slottable, { children: children }), showClose && (_jsx(Close, { asChild: true, children: _jsx(CompactButton.Root, { "aria-label": 'Close dialog', size: 'large', variant: 'ghost', className: 'absolute right-4 top-4', 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('text-label-sm text-text-strong-950', className) }));
+});
+export const Description = React.forwardRef(function Description({ className, ...props }, ref) {
+    return (_jsx(Dialog.Description, { ...props, ref: ref, className: cn('text-paragraph-xs text-text-sub-600', className) }));
+});
+export function Header({ title, description, icon: Icon, children, className, ...props }) {
+    const content = children ?? (_jsxs(_Fragment, { children: [Icon && (_jsx("span", { className: 'flex size-10 shrink-0 items-center justify-center rounded-full bg-bg-white-0 ring-1 ring-inset ring-stroke-soft-200', children: _jsx(Icon, { className: 'size-5 text-text-sub-600' }) })), (title || description) && (_jsxs("div", { className: 'flex-1 space-y-1', children: [title && _jsx(Title, { children: title }), description && _jsx(Description, { children: description })] }))] }));
+    return (_jsx("div", { ...props, className: cn('relative flex items-start gap-3.5 py-4 pl-5 pr-14 before:absolute before:inset-x-0 before:bottom-0 before:border-b before:border-stroke-soft-200', className), children: content }));
+}
+export function Body({ className, ...props }) {
+    return _jsx("div", { ...props, className: cn('p-5', className) });
+}
+export function Footer({ className, ...props }) {
+    return (_jsx("div", { ...props, className: cn('flex items-center justify-between gap-3 border-t border-stroke-soft-200 px-5 py-4', className) }));
+}

package/dist/components/ui/notification-feed.d.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+import * as TabMenu from "./tab-menu-horizontal.js";
+export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export type ItemProps = Omit<React.HTMLAttributes<HTMLElement>, 'title'> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    timestamp?: React.ReactNode;
+    dateTime?: string;
+    avatar?: React.ReactNode;
+    company?: React.ReactNode;
+    variant?: 'basic' | 'file' | 'buttons' | 'message';
+    file?: {
+        name: string;
+        sizeLabel?: string;
+        href?: string;
+        onOpen?: () => void;
+    };
+    message?: React.ReactNode;
+    onApprove?: () => void;
+    onDeny?: () => void;
+    onMore?: () => void;
+    disabled?: boolean;
+    unread?: boolean;
+    approveLabel?: string;
+    denyLabel?: string;
+};
+export declare const Item: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    timestamp?: React.ReactNode;
+    dateTime?: string;
+    avatar?: React.ReactNode;
+    company?: React.ReactNode;
+    variant?: "basic" | "file" | "buttons" | "message";
+    file?: {
+        name: string;
+        sizeLabel?: string;
+        href?: string;
+        onOpen?: () => void;
+    };
+    message?: React.ReactNode;
+    onApprove?: () => void;
+    onDeny?: () => void;
+    onMore?: () => void;
+    disabled?: boolean;
+    unread?: boolean;
+    approveLabel?: string;
+    denyLabel?: string;
+} & React.RefAttributes<HTMLElement>>;
+export type FeedTab = {
+    value: string;
+    label: string;
+    count?: number;
+    disabled?: boolean;
+    separator?: boolean;
+};
+export type TabsProps = React.ComponentPropsWithoutRef<typeof TabMenu.Root> & {
+    tabs?: FeedTab[];
+    onFilter?: () => void;
+    filterLabel?: string;
+};
+export declare function Tabs({ tabs, onFilter, filterLabel, children, className, defaultValue, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare const Content: React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/notification-feed.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 TabMenu from "./tab-menu-horizontal.js";
+import * as Badge from "./badge.js";
+const image = (name) => (_jsx("img", { src: __resolveMagnaAsset_1(`/magna/feeds/${name}.svg`), alt: '', "aria-hidden": 'true', className: 'block max-w-none shrink-0' }));
+export const Root = React.forwardRef(function Root({ className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cn('w-full max-w-[540px] bg-bg-white-0', className) }));
+});
+export const Item = React.forwardRef(function Item({ title, description, timestamp, dateTime, avatar, company, variant = 'basic', file, message, onApprove, onDeny, onMore, disabled = false, unread = false, approveLabel = 'Approve', denyLabel = 'Deny', children, className, ...props }, ref) {
+    const attachment = file && (_jsxs(_Fragment, { children: [image('notification-attachment'), _jsx("span", { className: 'truncate', children: file.name }), file.sizeLabel && (_jsx("span", { className: '-ms-0.5 shrink-0 text-text-soft-400', children: file.sizeLabel }))] }));
+    return (_jsxs("article", { ...props, ref: ref, "data-unread": unread || undefined, className: cn('group/notification relative flex w-full max-w-[524px] items-start gap-[15px] rounded-xl bg-bg-white-0 p-3 transition-colors focus-within:bg-bg-weak-50 hover:bg-bg-weak-50', className), children: [avatar && _jsx("div", { className: 'size-10 shrink-0', children: avatar }), _jsxs("div", { className: cn('flex min-w-0 flex-1 flex-col', variant === 'buttons' ? 'gap-4' : 'gap-3'), children: [_jsxs("div", { className: 'space-y-1', children: [_jsxs("div", { className: 'text-label-sm text-text-strong-950', children: [title, unread && _jsx("span", { className: 'sr-only', children: ", unread" })] }), _jsxs("div", { className: 'flex flex-wrap items-start gap-1 text-paragraph-xs text-text-sub-600', children: [timestamp && _jsx("time", { dateTime: dateTime, children: timestamp }), timestamp && description && (_jsx("span", { "aria-hidden": 'true', className: 'w-2 text-center text-text-soft-400', children: "\u2219" })), company && _jsx("span", { className: 'shrink-0', children: company }), description && _jsx("span", { className: 'min-w-0', children: description })] })] }), variant === 'buttons' && (_jsxs("div", { className: 'flex flex-wrap gap-2.5', children: [_jsx(Button.Root, { type: 'button', size: 'xsmall', variant: 'neutral', mode: 'stroke', disabled: disabled || !onDeny, onClick: onDeny, children: denyLabel }), _jsx(Button.Root, { type: 'button', size: 'xsmall', disabled: disabled || !onApprove, onClick: onApprove, children: approveLabel })] })), variant === 'file' &&
+                        file &&
+                        (file.href && !disabled ? (_jsx(Button.Root, { asChild: true, variant: 'neutral', mode: 'stroke', className: 'h-auto max-w-full gap-1 self-start rounded-lg p-2 text-paragraph-sm', children: _jsx("a", { href: file.href, download: true, onClick: file.onOpen, children: attachment }) })) : (_jsx(Button.Root, { type: 'button', variant: 'neutral', mode: 'stroke', disabled: disabled || !file.onOpen, className: 'h-auto max-w-full gap-1 self-start rounded-lg p-2 text-paragraph-sm', onClick: file.onOpen, children: attachment }))), variant === 'message' && message && (_jsx("div", { className: 'max-w-full self-start rounded-lg rounded-ee-[10px] rounded-ss border border-stroke-soft-200 bg-bg-white-0 px-3 py-2 text-paragraph-sm text-text-sub-600 shadow-regular-xs', children: message })), children] }), onMore && (_jsx(CompactButton.Root, { type: 'button', variant: 'ghost', disabled: disabled, "aria-label": 'More notification actions', onClick: onMore, className: 'my-2 opacity-100 focus-visible:opacity-100 sm:opacity-0 sm:group-focus-within/notification:opacity-100 sm:group-hover/notification:opacity-100', children: image('notification-more') }))] }));
+});
+const defaultTabs = [
+    { value: 'all', label: 'All' },
+    { value: 'inbox', label: 'Inbox', count: 2 },
+    { value: 'following', label: 'Following' },
+    { value: 'archived', label: 'Archived', separator: true },
+];
+export function Tabs({ tabs = defaultTabs, onFilter, filterLabel = 'Filter notifications', children, className, defaultValue, ...props }) {
+    return (_jsxs(TabMenu.Root, { ...props, defaultValue: defaultValue ?? tabs[0]?.value, className: cn('w-full max-w-[540px]', className), children: [_jsxs("div", { className: 'flex items-center border-b border-stroke-soft-200 bg-bg-white-0 px-5', children: [_jsx(TabMenu.List, { "aria-label": 'Notification views', wrapperClassName: 'min-w-0 flex-1', className: 'h-[47px] gap-5 border-0', children: tabs.map((tab) => (_jsxs(TabMenu.Trigger, { value: tab.value, disabled: tab.disabled, className: cn('h-[47px] gap-1 focus-visible:underline disabled:opacity-50', tab.separator &&
+                                'before:me-4 before:h-5 before:w-px before:bg-stroke-soft-200'), children: [_jsx("span", { children: tab.label }), tab.count !== undefined && (_jsx(Badge.Root, { size: 'small', color: 'red', variant: 'filled', className: 'min-w-4 px-0.5', children: tab.count }))] }, tab.value))) }), onFilter && (_jsx(CompactButton.Root, { type: 'button', variant: 'ghost', "aria-label": filterLabel, onClick: onFilter, className: 'ms-3', children: image('notification-filter') }))] }), children] }));
+}
+export const Content = TabMenu.Content;

package/dist/components/ui/notification-provider.d.ts

@@ -0,0 +1 @@
+export declare function NotificationProvider(): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/notification-provider.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import * as Toast from "./notification.js";
+import { useNotification } from "../../hooks/use-notification.js";
+export function NotificationProvider() {
+    const store = useNotification();
+    const toasts = store.notifications.map((entry) => {
+        const { id, ...props } = entry;
+        return _createElement(Toast.Root, { ...props, key: id });
+    });
+    return (_jsxs(Toast.Provider, { children: [toasts, _jsx(Toast.Viewport, {})] }));
+}

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as Toast from "@radix-ui/react-toast";
+import * as Alert from "./alert.js";
+export declare const Provider: React.FC<Toast.ToastProviderProps>;
+export declare const Action: React.ForwardRefExoticComponent<Toast.ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
+export type NotificationProps = React.ComponentPropsWithoutRef<typeof Toast.Root> & Pick<React.ComponentPropsWithoutRef<typeof Alert.Root>, 'variant' | 'status'> & {
+    title?: string;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+    disableDismiss?: boolean;
+};
+export declare const Viewport: React.ForwardRefExoticComponent<Omit<Toast.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+export declare const Root: React.ForwardRefExoticComponent<Omit<Toast.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & Pick<Omit<React.HTMLAttributes<HTMLDivElement> & Partial<{
+    variant: "filled" | "light" | "lighter" | "stroke";
+    status: "error" | "warning" | "success" | "information" | "feature";
+    size: "xsmall" | "small" | "large";
+}> & {
+    wrapperClassName?: import("tailwind-merge").ClassNameValue;
+} & React.RefAttributes<HTMLDivElement>, "ref">, "status" | "variant"> & {
+    title?: string;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+    disableDismiss?: boolean;
+} & React.RefAttributes<HTMLLIElement>>;

package/dist/components/ui/notification.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as Toast from "@radix-ui/react-toast";
+import { RiAlertFill, RiCheckboxCircleFill, RiErrorWarningFill, RiInformationFill, RiMagicFill, } from "@remixicon/react";
+import * as Alert from "./alert.js";
+import { cn } from "../../utils/cn.js";
+export const Provider = Toast.Provider;
+export const Action = Toast.Action;
+const statusIcons = {
+    success: RiCheckboxCircleFill,
+    warning: RiAlertFill,
+    error: RiErrorWarningFill,
+    information: RiInformationFill,
+    feature: RiMagicFill,
+};
+export const Viewport = React.forwardRef(function Viewport({ className, ...props }, ref) {
+    return (_jsx(Toast.Viewport, { ...props, ref: ref, className: cn('fixed left-0 top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-5 p-4 sm:bottom-0 sm:left-auto sm:right-0 sm:top-auto sm:max-w-[438px] sm:flex-col sm:p-6', className) }));
+});
+export const Root = React.forwardRef(function Root({ status, variant = 'filled', title, description, action, disableDismiss = false, asChild = true, className, ...props }, ref) {
+    const Symbol = statusIcons[status] ?? RiErrorWarningFill;
+    return (_jsx(Toast.Root, { ...props, ref: ref, asChild: asChild, className: cn('data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:max-[639px]:slide-out-to-top-full data-[state=open]:max-[639px]:slide-in-from-top-full data-[state=closed]:sm:slide-out-to-right-full data-[state=open]:sm:slide-in-from-right-full', className), children: _jsxs(Alert.Root, { variant: variant, status: status, size: 'large', children: [_jsx(Alert.Icon, { as: Symbol, "aria-hidden": 'true' }), _jsxs("div", { className: 'flex w-full flex-col gap-2.5', children: [_jsxs("div", { className: 'flex w-full flex-col gap-1', children: [title && (_jsx(Toast.Title, { className: 'text-label-sm', children: title })), description && (_jsx(Toast.Description, { children: description }))] }), action && _jsx("div", { className: 'flex items-center gap-2', children: action })] }), !disableDismiss && (_jsx(Toast.Close, { "aria-label": 'Close', children: _jsx(Alert.CloseIcon, {}) }))] }) }));
+});

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type Appearance = {
+    variant?: 'basic' | 'rounded' | 'group';
+};
+export declare function Root({ asChild, variant, className, ...props }: React.HTMLAttributes<HTMLDivElement> & Appearance & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Appearance & {
+    asChild?: boolean;
+    current?: boolean;
+};
+export declare const Item: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & Appearance & {
+    asChild?: boolean;
+    current?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare const NavButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "current"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function NavIcon<T extends React.ElementType = 'div'>({ as, variant: _variant, className, ...props }: PolymorphicComponentProps<T, Appearance>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/pagination.js

@@ -0,0 +1,38 @@
+'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";
+const Mode = React.createContext('basic');
+export function Root({ asChild, variant = 'basic', className, ...props }) {
+    const Element = asChild ? Slot : 'div';
+    return (_jsx(Mode.Provider, { value: variant, children: _jsx(Element, { ...props, className: cn('flex flex-wrap items-center justify-center', variant === 'group'
+                ? 'divide-x divide-stroke-soft-200 overflow-hidden rounded-full border border-stroke-soft-200'
+                : 'gap-2', className) }) }));
+}
+function usePageStyle(variant, navigation) {
+    const inherited = React.useContext(Mode);
+    const grouped = (variant ?? inherited) === 'group';
+    return cn('flex h-8 items-center justify-center text-text-sub-600 transition duration-200 ease-out hover:bg-bg-weak-50', navigation
+        ? grouped
+            ? 'w-10 px-1.5'
+            : 'w-8 rounded-full'
+        : cn('px-1.5 text-center text-label-sm', grouped
+            ? 'min-w-10'
+            : 'min-w-8 rounded-full ring-1 ring-inset ring-stroke-soft-200 hover:ring-transparent'));
+}
+export const Item = React.forwardRef(function Item({ asChild, current, variant, className, ...props }, ref) {
+    const classes = usePageStyle(variant, false);
+    const Element = asChild ? Slot : 'button';
+    return (_jsx(Element, { type: asChild ? undefined : 'button', ...props, ref: ref, "aria-current": current ? 'page' : undefined, className: cn(classes, current && 'text-text-strong-950', className) }));
+});
+export const NavButton = React.forwardRef(function NavButton({ asChild, variant, className, ...props }, ref) {
+    const classes = usePageStyle(variant, true);
+    const Element = asChild ? Slot : 'button';
+    return (_jsx(Element, { type: asChild ? undefined : 'button', ...props, ref: ref, className: cn(classes, className) }));
+});
+export function NavIcon({ as, variant: _variant, className, ...props }) {
+    void _variant;
+    const Element = as ?? 'div';
+    return _jsx(Element, { ...props, className: cn('size-5', className) });
+}

package/dist/components/ui/password-strength.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export type PasswordRequirement = {
+    label: string;
+    test: (value: string) => boolean;
+};
+export type PasswordStrengthProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    value?: string;
+    requirements?: readonly PasswordRequirement[];
+    heading?: React.ReactNode;
+};
+export declare const defaultRequirements: readonly PasswordRequirement[];
+export declare const Root: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    value?: string;
+    requirements?: readonly PasswordRequirement[];
+    heading?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;