magnaui 0.1.0

package/dist/components/magna/logo.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveMagnaAsset as __resolveMagnaAsset_1 } from "../../magna-assets.js";
+import { cn } from "../../utils/cn.js";
+import { magnaLogoVariants } from "./logo-variants.js";
+const themeVariants = {
+    horizontal: ['horizontal-color-black', 'horizontal-color-white'],
+    'tagline-horizontal': [
+        'tagline-horizontal-color-black',
+        'tagline-horizontal-color-white',
+    ],
+    'tagline-stacked': [
+        'tagline-stacked-color-black',
+        'tagline-stacked-color-white',
+    ],
+    'tagline-inline': [
+        'tagline-inline-color-black',
+        'tagline-inline-color-white',
+    ],
+};
+/** Exact Figma SVG artwork with optional theme-aware layout aliases. */
+export function MagnaLogo({ className, label, variant = 'stacked', ...props }) {
+    const fixedVariant = magnaLogoVariants.find((item) => item.id === variant);
+    const themePair = variant in themeVariants
+        ? themeVariants[variant]
+        : undefined;
+    return (_jsx("span", { ...props, role: label ? 'img' : undefined, "aria-label": label, "aria-hidden": label ? undefined : true, className: cn('inline-flex shrink-0 items-center justify-center', variant === 'glyph' || variant.startsWith('glyph-')
+            ? 'size-9'
+            : variant === 'stacked' || variant.includes('stacked')
+                ? 'size-48'
+                : 'h-24 w-64', className), children: variant === 'stacked' ? (
+        // The embedded SVG inherits this color scheme, so only its wordmark
+        // switches color. The supplied red/green/blue artwork stays untouched.
+        // eslint-disable-next-line @next/next/no-img-element
+        _jsx("img", { src: __resolveMagnaAsset_1("/magna/magna-logo-stacked.svg"), width: 1200, height: 1200, alt: '', className: 'block h-auto w-full [color-scheme:light] dark:[color-scheme:dark]' })) : variant === 'glyph' ? (_jsxs(_Fragment, { children: [_jsx("img", { src: __resolveMagnaAsset_1("/magna/magna-logo.svg"), width: 625.116, height: 431.19, alt: '', className: 'block h-auto w-full dark:hidden' }), _jsx("img", { src: __resolveMagnaAsset_1("/magna/magna-logo-dark.svg"), width: 625.116, height: 431.19, alt: '', className: 'hidden h-auto w-full dark:block' })] })) : fixedVariant ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        _jsx("img", { src: fixedVariant.src, width: fixedVariant.width, height: fixedVariant.height, alt: '', className: 'block h-auto max-h-full w-full object-contain' })) : (themePair?.map((id, index) => {
+            const artwork = magnaLogoVariants.find((item) => item.id === id);
+            return (
+            // eslint-disable-next-line @next/next/no-img-element
+            _jsx("img", { src: artwork.src, width: artwork.width, height: artwork.height, alt: '', className: cn('h-auto max-h-full w-full object-contain', index === 0 ? 'block dark:hidden' : 'hidden dark:block') }, id));
+        })) }));
+}

package/dist/components/magna/navigation.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface MagnaNavItem {
+    label: string;
+    href: string;
+    icon: 'chat' | 'apps' | 'folder' | 'store' | 'book' | 'notifications';
+}
+export declare const defaultNavItems: MagnaNavItem[];
+/** Figma Sidebar 199714:167527 and Magan bar 199714:167174. */
+export declare function MagnaNavigation({ orientation, items, active, className, footer, }: {
+    orientation?: 'vertical' | 'horizontal';
+    items?: MagnaNavItem[];
+    active?: string;
+    className?: string;
+    footer?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/magna/navigation.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveMagnaAsset as __resolveMagnaAsset_1 } from "../../magna-assets.js";
+import { cn } from "../../utils/cn.js";
+import { MagnaLogo } from "./logo.js";
+export const defaultNavItems = [
+    { label: 'Chat', href: '#chat', icon: 'chat' },
+    { label: 'Apps', href: '#apps', icon: 'apps' },
+    { label: 'Files', href: '#files', icon: 'folder' },
+    { label: 'Store', href: '#components', icon: 'store' },
+];
+/** Figma Sidebar 199714:167527 and Magan bar 199714:167174. */
+export function MagnaNavigation({ orientation = 'vertical', items = defaultNavItems, active, className, footer, }) {
+    const vertical = orientation === 'vertical';
+    return (_jsxs("nav", { "aria-label": 'Magna navigation', className: cn('flex shrink-0 gap-5 bg-bg-white-0 p-5', vertical ? 'w-[74px] flex-col' : 'min-h-[74px] w-full items-center', className), children: [_jsx("a", { href: '#top', "aria-label": 'MagnaUI home', className: 'flex size-[34px] shrink-0 items-center justify-center rounded-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base', children: _jsx(MagnaLogo, { variant: 'glyph', className: 'size-6' }) }), _jsx("div", { className: cn('shrink-0 bg-stroke-soft-200', vertical ? 'h-px w-full' : 'h-6 w-px') }), _jsx("div", { className: cn('flex flex-1 gap-3', vertical ? 'flex-col' : 'min-w-0 overflow-x-auto py-1'), children: items.map((item) => (_jsx("a", { href: item.href, "aria-label": item.label, title: item.label, "aria-current": active === item.label ? 'page' : undefined, className: cn('flex size-[34px] shrink-0 items-center justify-center rounded-lg hover:bg-bg-weak-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base', active === item.label && 'bg-bg-soft-200'), children: _jsx("img", { src: __resolveMagnaAsset_1(`/magna/icons/${item.icon}.svg`), width: 22, height: 22, alt: '', className: 'size-[22px] dark:invert' }) }, item.label))) }), footer] }));
+}

package/dist/components/magna/project-context.d.ts

@@ -0,0 +1,11 @@
+/** Project context below the composer, from Figma 199719:168289. */
+export declare function ProjectContext({ files, instructions, onAddFile, onEditInstructions, className, }: {
+    files: {
+        name: string;
+        href: string;
+    }[];
+    instructions: string;
+    onAddFile?: () => void;
+    onEditInstructions?: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/magna/project-context.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveMagnaAsset as __resolveMagnaAsset_1 } from "../../magna-assets.js";
+import { cn } from "../../utils/cn.js";
+/** Project context below the composer, from Figma 199719:168289. */
+export function ProjectContext({ files, instructions, onAddFile, onEditInstructions, className, }) {
+    return (_jsxs("div", { className: cn('grid w-full max-w-[700px] gap-6 px-6 sm:grid-cols-2', className), children: [_jsxs("div", { className: 'flex min-w-0 items-center gap-4', children: [_jsxs("div", { className: 'min-w-0 flex-1 text-label-xs', children: [_jsx("p", { children: "Project files" }), _jsxs("p", { className: 'mt-1 text-text-soft-400', children: [files.length, " files"] })] }), _jsxs("div", { className: 'flex gap-2', children: [files.slice(0, 3).map((file) => (_jsx("a", { href: file.href, title: file.name, "aria-label": file.name, className: 'flex size-7 items-center justify-center rounded-full border border-stroke-soft-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base', children: _jsx("img", { src: __resolveMagnaAsset_1("/magna/file.png"), width: 20, height: 20, alt: '', className: 'size-5 object-contain' }) }, file.name))), _jsx("button", { type: 'button', "aria-label": 'Add project file', onClick: onAddFile, disabled: !onAddFile, className: 'size-7 rounded-full border border-stroke-soft-200 text-label-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base disabled:opacity-40', children: "+" })] })] }), _jsxs("div", { className: 'flex min-w-0 items-center gap-4 sm:border-s sm:border-stroke-soft-200 sm:ps-6', children: [_jsxs("div", { className: 'min-w-0 flex-1 text-label-xs', children: [_jsx("p", { children: "Instructions" }), _jsx("p", { className: 'mt-1 truncate text-text-soft-400', title: instructions, children: instructions })] }), _jsx("button", { type: 'button', onClick: onEditInstructions, disabled: !onEditInstructions, className: 'rounded-full border border-stroke-soft-200 px-2 py-1 text-label-xs focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base disabled:opacity-40', children: "Edit" })] })] }));
+}

package/dist/components/magna/voice-orb.d.ts

@@ -0,0 +1,7 @@
+export interface VoiceOrbProps {
+    state: 'listening' | 'speaking';
+    level?: number | (() => number);
+    paused?: boolean;
+}
+/** Decorative voice activity. The surrounding panel supplies its accessible status. */
+export declare function VoiceOrb({ state, level, paused }: VoiceOrbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/magna/voice-orb.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useInteractionPreferences } from "../interactions/preferences.js";
+import styles from "./voice-orb.module.css";
+const clampLevel = (level) => Number.isFinite(level) ? Math.max(0, Math.min(1, level)) : 0;
+/** Decorative voice activity. The surrounding panel supplies its accessible status. */
+export function VoiceOrb({ state, level = 0, paused = false }) {
+    const orbRef = React.useRef(null);
+    const { reducedMotion } = useInteractionPreferences();
+    const [inView, setInView] = React.useState(true);
+    const [pageVisible, setPageVisible] = React.useState(true);
+    const motionPaused = paused || reducedMotion || !inView || !pageVisible;
+    React.useEffect(() => {
+        const updateVisibility = () => setPageVisible(!document.hidden);
+        updateVisibility();
+        document.addEventListener('visibilitychange', updateVisibility);
+        const observer = typeof IntersectionObserver === 'undefined'
+            ? null
+            : new IntersectionObserver(([entry]) => setInView(entry.isIntersecting));
+        if (orbRef.current)
+            observer?.observe(orbRef.current);
+        return () => {
+            document.removeEventListener('visibilitychange', updateVisibility);
+            observer?.disconnect();
+        };
+    }, []);
+    React.useEffect(() => {
+        const orb = orbRef.current;
+        if (!orb || motionPaused)
+            return;
+        if (typeof level === 'number') {
+            orb.style.setProperty('--voice-level', String(clampLevel(level)));
+            return;
+        }
+        let frame = 0;
+        let lastSample = -Infinity;
+        const sample = (time) => {
+            if (time - lastSample >= 1000 / 30) {
+                orb.style.setProperty('--voice-level', String(clampLevel(level())));
+                lastSample = time;
+            }
+            frame = requestAnimationFrame(sample);
+        };
+        frame = requestAnimationFrame(sample);
+        return () => cancelAnimationFrame(frame);
+    }, [level, motionPaused]);
+    return (_jsx("div", { ref: orbRef, "aria-hidden": 'true', className: styles.orb, "data-state": state, "data-paused": motionPaused || undefined, children: _jsxs("div", { className: styles.surface, children: [_jsx("div", { className: styles.colorCloud }), _jsx("div", { className: styles.accentCloud }), _jsx("div", { className: styles.light })] }) }));
+}

package/dist/components/magna/voice-orb.module.css

@@ -0,0 +1,146 @@
+.orb {
+  --voice-level: 0;
+  --cloud-duration: 8s;
+  --breath-duration: 5s;
+  position: relative;
+  isolation: isolate;
+  width: 128px;
+  height: 128px;
+  flex-shrink: 0;
+  overflow: hidden;
+  contain: paint;
+  border-radius: 50%;
+  background: #d8f8e8;
+}
+
+.orb[data-state='speaking'] {
+  --cloud-duration: 3.2s;
+  --breath-duration: 2.4s;
+}
+
+.surface {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  background: radial-gradient(
+      ellipse at 22% 16%,
+      #fff 5%,
+      #f8fffb 28%,
+      transparent 64%
+    ),
+    radial-gradient(
+      ellipse at 75% 95%,
+      #079662 8%,
+      #47cf94 34%,
+      transparent 72%
+    ),
+    linear-gradient(145deg, #effff6 12%, #cbf5dc 48%, #20b77b);
+  animation: orb-breathe var(--breath-duration) ease-in-out infinite alternate;
+}
+
+.colorCloud {
+  position: absolute;
+  inset: -22%;
+  border-radius: 42%;
+  background: radial-gradient(
+      ellipse at 25% 76%,
+      #079b66 2%,
+      #25bf86 20%,
+      transparent 45%
+    ),
+    radial-gradient(
+      ellipse at 80% 61%,
+      #18a86c 3%,
+      #48d599 22%,
+      transparent 48%
+    ),
+    radial-gradient(
+      ellipse at 48% 52%,
+      #b9f5d5 6%,
+      #70dda5 26%,
+      transparent 57%
+    );
+  filter: blur(7px);
+  opacity: calc(0.82 + var(--voice-level) * 0.18);
+  animation: color-flow var(--cloud-duration) ease-in-out infinite alternate;
+  transition: opacity 120ms linear;
+}
+
+.accentCloud {
+  position: absolute;
+  inset: -24%;
+  background: radial-gradient(
+      ellipse at 25% 23%,
+      #fff 5%,
+      #fafffc 21%,
+      transparent 43%
+    ),
+    radial-gradient(ellipse at 58% 36%, #fff 2%, #effff6 18%, transparent 40%),
+    radial-gradient(
+      ellipse at 79% 56%,
+      #e0ffed 3%,
+      #b4f1d0 16%,
+      transparent 36%
+    );
+  filter: blur(5px);
+  animation: accent-flow calc(var(--cloud-duration) * 1.3) ease-in-out infinite
+    alternate;
+}
+
+.light {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+      ellipse at 33% 7%,
+      rgb(255 255 255 / 56%),
+      transparent 54%
+    ),
+    radial-gradient(ellipse at 67% 98%, rgb(0 104 67 / 19%), transparent 54%);
+  box-shadow:
+    inset 0 0 1px 1px rgb(255 255 255 / 44%),
+    inset 0 -5px 12px rgb(7 125 79 / 12%);
+}
+
+@keyframes orb-breathe {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(calc(1.035 + var(--voice-level) * 0.04));
+  }
+}
+
+@keyframes color-flow {
+  from {
+    transform: translate(-5%, 4%) rotate(-12deg)
+      scale(calc(1 + var(--voice-level) * 0.12));
+  }
+  to {
+    transform: translate(7%, -6%) rotate(14deg)
+      scale(calc(1.07 + var(--voice-level) * 0.16));
+  }
+}
+
+@keyframes accent-flow {
+  from {
+    transform: translate(3%, -4%) rotate(7deg);
+  }
+  to {
+    transform: translate(-6%, 7%) rotate(-12deg)
+      scale(calc(0.97 - var(--voice-level) * 0.08));
+  }
+}
+
+.orb[data-paused] * {
+  animation-play-state: paused;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .orb * {
+    animation: none;
+    transition: none;
+  }
+}

package/dist/components/theme-switch.d.ts

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

package/dist/components/theme-switch.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "next-themes";
+import { RiSunLine, RiMoonLine, RiEqualizer3Fill } from "@remixicon/react";
+import * as Segments from "./ui/segmented-control.js";
+const choices = [
+    { value: 'light', label: 'Light theme', icon: RiSunLine },
+    { value: 'dark', label: 'Dark theme', icon: RiMoonLine },
+    { value: 'system', label: 'System theme', icon: RiEqualizer3Fill },
+];
+export default function ThemeSwitch() {
+    const theme = useTheme();
+    return (_jsx(Segments.Root, { value: theme.theme, onValueChange: theme.setTheme, children: _jsx(Segments.List, { children: choices.map(({ value, label, icon: Icon }) => (_jsx(Segments.Trigger, { value: value, "aria-label": label, className: 'aspect-square', children: _jsx(Icon, { className: 'size-4' }) }, value))) }) }));
+}

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-accordion";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+export declare const Root: React.ForwardRefExoticComponent<(Primitive.AccordionSingleProps | Primitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+export declare const Header: React.ForwardRefExoticComponent<Primitive.AccordionHeaderProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const Item: React.ForwardRefExoticComponent<Omit<Primitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Trigger: React.ForwardRefExoticComponent<Omit<Primitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function Icon<T extends React.ElementType = 'div'>({ as, className, ...props }: PolymorphicComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Arrow({ openIcon: Expand, closeIcon: Collapse, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    openIcon?: React.ElementType;
+    closeIcon?: React.ElementType;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Content: React.ForwardRefExoticComponent<Omit<Primitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/accordion.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-accordion";
+import { RiAddLine, RiSubtractLine } from "@remixicon/react";
+import { cn } from "../../utils/cn.js";
+export const Root = Primitive.Root;
+export const Header = Primitive.Header;
+export const Item = React.forwardRef(function Item({ className, ...props }, ref) {
+    return (_jsx(Primitive.Item, { ...props, ref: ref, className: cn('group/accordion rounded-10 bg-bg-white-0 p-3.5 ring-1 ring-inset ring-stroke-soft-200 transition-colors duration-200 ease-out', 'hover:bg-bg-weak-50 hover:ring-transparent has-[:focus-visible]:bg-bg-weak-50 has-[:focus-visible]:ring-transparent data-[state=open]:bg-bg-weak-50 data-[state=open]:ring-transparent', className) }));
+});
+export const Trigger = React.forwardRef(function Trigger({ className, ...props }, ref) {
+    return (_jsx(Primitive.Trigger, { ...props, ref: ref, className: cn('-m-3.5 grid w-[calc(100%+theme(space.7))] auto-cols-auto grid-flow-col grid-cols-[auto,minmax(0,1fr)] items-center gap-2.5 p-3.5 text-left text-label-sm text-text-strong-950 outline-none', className) }));
+});
+export function Icon({ as, className, ...props }) {
+    const Element = as ?? 'div';
+    return (_jsx(Element, { ...props, className: cn('size-5 text-text-sub-600', className) }));
+}
+export function Arrow({ openIcon: Expand = RiAddLine, closeIcon: Collapse = RiSubtractLine, className, ...props }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Expand, { ...props, className: cn('size-5 text-text-soft-400 transition-colors duration-200 ease-out group-hover/accordion:text-text-sub-600 group-data-[state=open]/accordion:hidden', className) }), _jsx(Collapse, { ...props, className: cn('hidden size-5 text-text-sub-600 group-data-[state=open]/accordion:block', className) })] }));
+}
+export const Content = React.forwardRef(function Content({ className, children, ...props }, ref) {
+    return (_jsx(Primitive.Content, { ...props, ref: ref, className: 'overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down', children: _jsx("div", { className: cn('pt-1.5 text-paragraph-sm text-text-sub-600', className), children: children }) }));
+});

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as Button from "./button.js";
+export declare const Root: React.ForwardRefExoticComponent<React.OlHTMLAttributes<HTMLOListElement> & React.RefAttributes<HTMLOListElement>>;
+export type ItemProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, 'title'> & {
+    actor: React.ReactNode;
+    action?: React.ReactNode;
+    subject?: React.ReactNode;
+    timestamp?: React.ReactNode;
+    dateTime?: string;
+    avatar?: React.ReactNode;
+    leading?: React.ReactNode;
+    onMore?: () => void;
+    moreLabel?: string;
+};
+export declare const Item: React.ForwardRefExoticComponent<Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> & {
+    actor: React.ReactNode;
+    action?: React.ReactNode;
+    subject?: React.ReactNode;
+    timestamp?: React.ReactNode;
+    dateTime?: string;
+    avatar?: React.ReactNode;
+    leading?: React.ReactNode;
+    onMore?: () => void;
+    moreLabel?: string;
+} & React.RefAttributes<HTMLLIElement>>;
+export type SelectedFilterProps = Omit<React.ComponentPropsWithoutRef<typeof Button.Root>, 'onChange'> & {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    icon?: React.ReactNode;
+    showIcon?: boolean;
+};
+export declare const SelectedFilter: React.ForwardRefExoticComponent<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement> & Partial<{
+    variant: "primary" | "neutral" | "error";
+    mode: "filled" | "stroke" | "lighter" | "ghost";
+    size: "medium" | "small" | "xsmall" | "xxsmall";
+}> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>, "ref">, "onChange"> & {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    icon?: React.ReactNode;
+    showIcon?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type FileProps = React.HTMLAttributes<HTMLDivElement> & {
+    filename: string;
+    sizeLabel?: string;
+    href?: string;
+    onDownload?: () => void;
+    disabled?: boolean;
+    downloadLabel?: string;
+};
+export declare function File({ filename, sizeLabel, href, onDownload, disabled, downloadLabel, className, ...props }: FileProps): import("react/jsx-runtime").JSX.Element;
+export type CommentProps = React.HTMLAttributes<HTMLDivElement> & {
+    onReply?: () => void;
+    replyLabel?: string;
+    disabled?: boolean;
+};
+export declare function Comment({ children, onReply, replyLabel, disabled, className, ...props }: CommentProps): import("react/jsx-runtime").JSX.Element;
+export type TaskStatusProps = React.HTMLAttributes<HTMLSpanElement> & {
+    status?: 'success' | 'warning' | 'pending' | 'error';
+};
+export declare function TaskStatus({ status, children, className, ...props }: TaskStatusProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+'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 LinkButton from "./link-button.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 const Root = React.forwardRef(function Root({ className, ...props }, ref) {
+    return (_jsx("ol", { ref: ref, ...props, className: cn('flex w-full max-w-[640px] flex-col gap-6', className) }));
+});
+export const Item = React.forwardRef(function Item({ actor, action, subject, timestamp, dateTime, avatar, leading, onMore, moreLabel = 'More activity actions', children, className, ...props }, ref) {
+    return (_jsxs("li", { ref: ref, ...props, className: cn('flex w-full items-start gap-4', !children && 'items-center', className), children: [(leading || avatar) && (_jsx("div", { className: 'flex size-8 shrink-0 items-center justify-center rounded-full bg-bg-white-0', children: leading ?? avatar })), _jsxs("div", { className: 'flex min-w-0 flex-1 flex-col gap-2', children: [_jsxs("div", { className: 'flex flex-wrap items-baseline gap-x-1 text-paragraph-sm text-text-sub-600', children: [_jsx("span", { className: 'text-label-sm text-text-strong-950', children: actor }), action && _jsx("span", { children: action }), subject && (_jsx("span", { className: 'text-label-sm text-text-strong-950', children: subject })), timestamp && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": 'true', className: 'text-text-disabled-300', children: "\u30FB" }), _jsx("time", { dateTime: dateTime, className: 'text-text-soft-400', children: timestamp })] }))] }), children && (_jsx("div", { className: 'flex min-w-0 flex-wrap items-center gap-2', children: children }))] }), onMore && (_jsx(CompactButton.Root, { type: 'button', size: 'medium', variant: 'ghost', "aria-label": moreLabel, onClick: onMore, children: image('activity-more') }))] }));
+});
+export const SelectedFilter = React.forwardRef(function SelectedFilter({ pressed, defaultPressed = false, onPressedChange, icon, showIcon = true, children = 'Selected', className, onClick, disabled, ...props }, ref) {
+    const [internal, setInternal] = React.useState(defaultPressed);
+    const active = pressed ?? internal;
+    return (_jsxs(Button.Root, { ...props, ref: ref, type: 'button', size: 'xxsmall', variant: active ? 'primary' : 'neutral', mode: active ? 'lighter' : 'stroke', disabled: disabled, "aria-pressed": active, className: cn('h-7 gap-1.5 px-2.5 shadow-none', className), onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented) {
+                if (pressed === undefined)
+                    setInternal(!active);
+                onPressedChange?.(!active);
+            }
+        }, children: [showIcon &&
+                (icon ?? image(active ? 'selected-filter-active' : 'selected-filter')), children] }));
+});
+export function File({ filename, sizeLabel, href, onDownload, disabled = false, downloadLabel, className, ...props }) {
+    const label = downloadLabel ?? `Download ${filename}`;
+    const action = (_jsxs(_Fragment, { children: [image('download', 'group-hover/download:hidden'), image('download-hover', 'hidden group-hover/download:block')] }));
+    return (_jsxs("div", { ...props, className: cn('inline-flex min-w-0 max-w-full items-stretch overflow-hidden rounded-full bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200', className), children: [_jsxs("span", { className: 'flex min-w-0 items-center gap-1.5 border-e border-stroke-soft-200 py-1 pe-[9px] ps-1.5', children: [image('attachment'), _jsx("span", { className: 'truncate text-label-sm text-text-sub-600', children: filename }), sizeLabel && (_jsx("span", { className: '-ms-0.5 shrink-0 text-paragraph-sm text-text-soft-400', children: sizeLabel }))] }), href && !disabled ? (_jsx(CompactButton.Root, { asChild: true, variant: 'ghost', className: 'group/download h-auto w-7 rounded-none', "aria-label": label, children: _jsx("a", { href: href, download: true, onClick: onDownload, children: action }) })) : (_jsx(CompactButton.Root, { type: 'button', variant: 'ghost', disabled: disabled || !onDownload, className: 'group/download h-auto w-7 rounded-none', "aria-label": label, onClick: onDownload, children: action }))] }));
+}
+export function Comment({ children, onReply, replyLabel = 'Reply', disabled = false, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cn('flex max-w-full flex-wrap items-center gap-1.5 rounded-xl rounded-ss bg-bg-white-0 py-2 pe-3.5 ps-2 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200 transition-colors hover:bg-bg-weak-50 hover:ring-transparent', className), children: [image('comment'), _jsx("span", { className: 'min-w-0 text-label-sm text-text-sub-600', children: children }), _jsx(LinkButton.Root, { type: 'button', size: 'medium', variant: 'primary', disabled: disabled || !onReply, onClick: onReply, children: replyLabel })] }));
+}
+export function TaskStatus({ status = 'success', children = '12 tasks completed', className, ...props }) {
+    return (_jsxs("span", { ...props, className: cn('inline-flex max-w-full items-center gap-1.5 rounded-full bg-bg-white-0 py-1 pe-2.5 ps-1.5 text-label-sm text-text-sub-600 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200', className), children: [_jsxs("span", { className: 'sr-only', children: [status, ": "] }), image(`status-${status}`), _jsx("span", { children: children })] }));
+}

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { RiCloseLine } from "@remixicon/react";
+import type { ClassValue } from "../../utils/tv.js";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type Appearance = {
+    variant: 'filled' | 'light' | 'lighter' | 'stroke';
+    status: 'error' | 'warning' | 'success' | 'information' | 'feature';
+    size: 'xsmall' | 'small' | 'large';
+};
+export declare const alertVariants: (options?: Partial<Appearance> & {
+    class?: ClassValue;
+    className?: ClassValue;
+}) => Record<"closeIcon" | "root" | "wrapper" | "icon", (overrides?: (Partial<Appearance> & {
+    class?: ClassValue;
+    className?: ClassValue;
+}) | undefined) => string>;
+export type AlertProps = React.HTMLAttributes<HTMLDivElement> & Partial<Appearance> & {
+    wrapperClassName?: ClassValue;
+};
+export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Partial<Appearance> & {
+    wrapperClassName?: ClassValue;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare function Icon<T extends React.ElementType = 'div'>({ as, className, variant, status, size, ...props }: PolymorphicComponentProps<T, Partial<Appearance>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+export declare function CloseIcon<T extends React.ElementType = typeof RiCloseLine>({ as, className, variant, status, size, ...props }: PolymorphicComponentProps<T, Partial<Appearance>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CloseIcon {
+    var displayName: string;
+}
+export {};

package/dist/components/ui/alert.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { RiCloseLine } from "@remixicon/react";
+import { mergeOptions, slotRecipe, toneClasses } from "./magna-recipe.js";
+const appearance = React.createContext({});
+const tones = {
+    error: toneClasses.red,
+    warning: toneClasses.orange,
+    success: toneClasses.green,
+    information: toneClasses.blue,
+    feature: toneClasses.gray,
+};
+export const alertVariants = slotRecipe({ variant: 'filled', status: 'information', size: 'small' }, ({ variant, status, size }) => {
+    const filled = variant === 'filled';
+    const tone = tones[status];
+    return {
+        root: [
+            'w-full',
+            filled ? ['text-static-white', tone.solid] : 'text-text-strong-950',
+            variant === 'light' && tone.light,
+            variant === 'lighter' && tone.pale,
+            variant === 'stroke' &&
+                'bg-bg-white-0 shadow-regular-md ring-inset ring-1 ring-stroke-soft-200',
+            {
+                xsmall: 'p-2 rounded-lg text-paragraph-xs',
+                small: 'py-2 px-2.5 rounded-lg text-paragraph-sm',
+                large: 'p-3.5 pb-4 rounded-xl text-paragraph-sm',
+            }[size],
+        ],
+        wrapper: [
+            'grid grid-flow-col auto-cols-auto grid-cols-[minmax(0,1fr)] items-start w-full has-[>svg:first-child]:grid-cols-[auto_minmax(0,1fr)] transition duration-200 ease-out group-data-[expanded=false]/toast:group-data-[front=false]/toast:opacity-0',
+            size === 'large' ? 'gap-3' : 'gap-2',
+        ],
+        icon: [
+            'shrink-0',
+            size === 'xsmall' ? 'size-4' : 'size-5',
+            !filled && tone.ink,
+        ],
+        closeIcon: [
+            size === 'xsmall' ? 'size-4' : 'size-5',
+            filled
+                ? 'text-static-white opacity-[.72]'
+                : 'text-text-strong-950 opacity-40',
+        ],
+    };
+});
+export const Root = React.forwardRef(function Alert({ variant, status, size, children, className, wrapperClassName, ...props }, ref) {
+    const options = { variant, status, size };
+    const styles = alertVariants(options);
+    return (_jsx(appearance.Provider, { value: options, children: _jsx("div", { ref: ref, className: styles.root({ className }), ...props, children: _jsx("div", { className: styles.wrapper({ class: wrapperClassName }), children: children }) }) }));
+});
+Root.displayName = 'AlertRoot';
+export function Icon({ as, className, variant, status, size, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        variant,
+        status,
+        size,
+    });
+    const Element = as || 'div';
+    return (_jsx(Element, { className: alertVariants(options).icon({ className }), ...props }));
+}
+Icon.displayName = 'AlertIcon';
+export function CloseIcon({ as, className, variant, status, size, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        variant,
+        status,
+        size,
+    });
+    const Element = as || RiCloseLine;
+    return (_jsx(Element, { className: alertVariants(options).closeIcon({ className }), ...props }));
+}
+CloseIcon.displayName = 'AlertCloseIcon';

package/dist/components/ui/avatar-empty-icons.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+export declare function IconEmptyUser(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare function IconEmptyCompany(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/avatar-empty-icons.js

@@ -0,0 +1,14 @@
+// MagnaUI Avatar Empty Icons v0.0.0
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+export function IconEmptyUser(props) {
+    const clipPathId = React.useId();
+    return (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 80 80', ...props, children: [_jsxs("g", { fill: '#fff', clipPath: `url(#${clipPathId})`, children: [_jsx("ellipse", { cx: 40, cy: 78, fillOpacity: 0.72, rx: 32, ry: 24 }), _jsx("circle", { cx: 40, cy: 32, r: 16, opacity: 0.9 })] }), _jsx("defs", { children: _jsx("clipPath", { id: clipPathId, children: _jsx("rect", { width: 80, height: 80, fill: '#fff', rx: 40 }) }) })] }));
+}
+export function IconEmptyCompany(props) {
+    const clipPathId = React.useId();
+    const filterId1 = React.useId();
+    const filterId2 = React.useId();
+    return (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 56, height: 56, fill: 'none', viewBox: '0 0 56 56', ...props, children: [_jsxs("g", { clipPath: `url(#${clipPathId})`, children: [_jsx("rect", { width: 56, height: 56, className: 'fill-bg-soft-200', rx: 28 }), _jsx("path", { className: 'fill-bg-soft-200', d: 'M0 0h56v56H0z' }), _jsx("g", { filter: `url(#${filterId1})`, opacity: 0.48, children: _jsx("path", { fill: '#fff', d: 'M7 24.9a2.8 2.8 0 012.8-2.8h21a2.8 2.8 0 012.8 2.8v49a2.8 2.8 0 01-2.8 2.8h-21A2.8 2.8 0 017 73.9v-49z' }) }), _jsx("path", { className: 'fill-bg-soft-200', d: 'M12.6 28.7a.7.7 0 01.7-.7h4.2a.7.7 0 01.7.7v4.2a.7.7 0 01-.7.7h-4.2a.7.7 0 01-.7-.7v-4.2zm0 9.8a.7.7 0 01.7-.7h4.2a.7.7 0 01.7.7v4.2a.7.7 0 01-.7.7h-4.2a.7.7 0 01-.7-.7v-4.2zm0 9.8a.7.7 0 01.7-.7h4.2a.7.7 0 01.7.7v4.2a.7.7 0 01-.7.7h-4.2a.7.7 0 01-.7-.7v-4.2z' }), _jsx("g", { filter: `url(#${filterId2})`, children: _jsx("path", { fill: '#fff', fillOpacity: 0.8, d: 'M21 14a2.8 2.8 0 012.8-2.8h21a2.8 2.8 0 012.8 2.8v49a2.8 2.8 0 01-2.8 2.8h-21A2.8 2.8 0 0121 63V14z' }) }), _jsx("path", { className: 'fill-bg-soft-200', d: 'M26.6 17.8a.7.7 0 01.7-.7h4.2a.7.7 0 01.7.7V22a.7.7 0 01-.7.7h-4.2a.7.7 0 01-.7-.7v-4.2zm0 9.8a.7.7 0 01.7-.7h4.2a.7.7 0 01.7.7v4.2a.7.7 0 01-.7.7h-4.2a.7.7 0 01-.7-.7v-4.2zm0 9.8a.7.7 0 01.7-.7h4.2a.7.7 0 01.7.7v4.2a.7.7 0 01-.7.7h-4.2a.7.7 0 01-.7-.7v-4.2zm0 9.8a.7.7 0 01.7-.7h4.2a.7.7 0 01.7.7v4.2a.7.7 0 01-.7.7h-4.2a.7.7 0 01-.7-.7v-4.2zm9.8-29.4a.7.7 0 01.7-.7h4.2a.7.7 0 01.7.7V22a.7.7 0 01-.7.7h-4.2a.7.7 0 01-.7-.7v-4.2zm0 9.8a.7.7 0 01.7-.7h4.2a.7.7 0 01.7.7v4.2a.7.7 0 01-.7.7h-4.2a.7.7 0 01-.7-.7v-4.2zm0 9.8a.7.7 0 01.7-.7h4.2a.7.7 0 01.7.7v4.2a.7.7 0 01-.7.7h-4.2a.7.7 0 01-.7-.7v-4.2zm0 9.8a.7.7 0 01.7-.7h4.2a.7.7 0 01.7.7v4.2a.7.7 0 01-.7.7h-4.2a.7.7 0 01-.7-.7v-4.2z' })] }), _jsxs("defs", { children: [_jsxs("filter", { id: filterId1, width: 34.6, height: 62.6, x: 3, y: 18.1, colorInterpolationFilters: 'sRGB', filterUnits: 'userSpaceOnUse', children: [_jsx("feFlood", { floodOpacity: 0, result: 'BackgroundImageFix' }), _jsx("feGaussianBlur", { in: 'BackgroundImageFix', stdDeviation: 2 }), _jsx("feComposite", { in2: 'SourceAlpha', operator: 'in', result: 'effect1_backgroundBlur_36237_4888' }), _jsx("feBlend", { in: 'SourceGraphic', in2: 'effect1_backgroundBlur_36237_4888', result: 'shape' })] }), _jsxs("filter", { id: filterId2, width: 42.6, height: 70.6, x: 13, y: 3.2, colorInterpolationFilters: 'sRGB', filterUnits: 'userSpaceOnUse', children: [_jsx("feFlood", { floodOpacity: 0, result: 'BackgroundImageFix' }), _jsx("feGaussianBlur", { in: 'BackgroundImageFix', stdDeviation: 4 }), _jsx("feComposite", { in2: 'SourceAlpha', operator: 'in', result: 'effect1_backgroundBlur_36237_4888' }), _jsx("feBlend", { in: 'SourceGraphic', in2: 'effect1_backgroundBlur_36237_4888', result: 'shape' }), _jsx("feColorMatrix", { in: 'SourceAlpha', result: 'hardAlpha', values: '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' }), _jsx("feOffset", { dy: 4 }), _jsx("feGaussianBlur", { stdDeviation: 2 }), _jsx("feComposite", { in2: 'hardAlpha', k2: -1, k3: 1, operator: 'arithmetic' }), _jsx("feColorMatrix", { values: '0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0' }), _jsx("feBlend", { in2: 'shape', result: 'effect2_innerShadow_36237_4888' })] }), _jsx("clipPath", { id: clipPathId, children: _jsx("rect", { width: 56, height: 56, fill: '#fff', rx: 28 }) })] })] }));
+}