magnaui 0.2.0 → 0.3.1

package/README.md

@@ -2,14 +2,16 @@
 
 React components, theme tokens, and original Magna artwork for authorized Magna AI applications.
 
-MagnaUI `0.2.0` includes AI conversation components, React 18.3 and React 19 support, RTL direction support, and isolated styles for Tailwind 4 applications.
+MagnaUI `0.3.1` includes AI conversation components, React 18.3 and React 19 support, RTL direction support, and isolated styles for Tailwind 4 applications.
 
 **Usage terms:** Public package visibility permits downloading the distribution; it does not grant an open-source license to Magna-owned materials. Use is restricted to the owner and expressly authorized users under `LICENSE` in the installed package. Third-party materials retain their own terms in `THIRD_PARTY_NOTICES.md`.
 
+Internal teams may use MagnaUI in Magna AI projects covered by the owner’s authorization. Keep that approval with your project records; public npm access or organization membership alone does not extend permission to unrelated projects.
+
 ## Install
 
 ```sh
-npm install magnaui@^0.2.0
+npm install magnaui@^0.3.1
 ```
 
 Use matching `react` and `react-dom` versions: `^18.3.1` or `^19.0.0`. Next.js 15 applications can keep React 19. The package ships ESM JavaScript, TypeScript declarations, compiled CSS, fonts, and artwork. Use Next.js, Vite, or another modern bundler that supports CSS Modules and static package assets. Next.js itself is not a library dependency.
@@ -26,7 +28,7 @@ No Tailwind plugin, `@source` scan, or Tailwind 3 configuration is required for
 ```tsx
 'use client';
 
-import { Button, Checkbox, MagnaLogo } from 'magnaui';
+import { Button, Checkbox, MagnaLogo } from 'magnaui/core';
 
 export function Workspace() {
   return (
@@ -47,25 +49,65 @@ For a narrower import, component modules also have subpaths:
 
 ```tsx
 import * as Button from 'magnaui/ui/button';
-import { MagnaLogo } from 'magnaui/magna';
-import { BorderBeam } from 'magnaui/interactions';
+import { MagnaLogo } from 'magnaui/magna/logo';
+import { BorderBeam } from 'magnaui/interactions/border-beam';
+```
+
+## Optional editor and effects
+
+Starting in 0.3.0, editor and animation engines are optional peers. A basic install does not download Tiptap, Three.js, or the effects packages. Use `magnaui/core` for base UI, branding, providers, and AI message components, or `magnaui/ui/*` and `magnaui/magna/*` for individual modules.
+
+```tsx
+import { Button, DirectionProvider, MagnaLogo } from 'magnaui/core';
+import { ChatMessage } from 'magnaui/magna/chat-message';
+```
+
+Install only the engines required by the feature you import:
+
+| Feature/subpath | Additional packages |
+| --- | --- |
+| `magnaui/ui/rich-editor` | All Tiptap packages in the command below |
+| `magnaui/magna/chat-composer` | `border-beam@1.4.1 voice-glow@0.2.1` |
+| `magnaui/magna/chat-activity` | `thinking-orbs@0.3.2` |
+| `magnaui/interactions/border-beam` | `border-beam@1.4.1` |
+| `magnaui/interactions/thinking-orb` | `thinking-orbs@0.3.2` |
+| `magnaui/interactions/bot-avatar` | `bot-avatars@0.1.1` |
+| `magnaui/interactions/liquid` | `liquid-gooey@0.2.2` |
+| `magnaui/interactions/voice-beam` | `voice-glow@0.2.1` |
+| `magnaui/interactions/metal-fx` | `metal-fx@2.0.11` |
+| `magnaui/interactions/image-generation` | `img-fx@0.5.1 three@0.149.0` |
+
+```sh
+# Rich editor
+npm install @tiptap/core@3.31.3 @tiptap/extension-bubble-menu@3.31.3 @tiptap/extension-floating-menu@3.31.3 @tiptap/extension-text-align@3.31.3 @tiptap/extension-text-style@3.31.3 @tiptap/extension-underline@3.31.3 @tiptap/pm@3.31.3 @tiptap/react@3.31.3 @tiptap/starter-kit@3.31.3
+
+# Animated chat composer and activity
+npm install border-beam@1.4.1 voice-glow@0.2.1 thinking-orbs@0.3.2
+```
+
+The existing full `magnaui`, `magnaui/magna`, and `magnaui/interactions` barrels retain their exports. Full-root examples in this guide require all optional engines because bundlers and TypeScript can traverse re-exports even when only one symbol is imported. To preserve an existing full-root application, install all engines once:
+
+```sh
+npm install @tiptap/core@3.31.3 @tiptap/extension-bubble-menu@3.31.3 @tiptap/extension-floating-menu@3.31.3 @tiptap/extension-text-align@3.31.3 @tiptap/extension-text-style@3.31.3 @tiptap/extension-underline@3.31.3 @tiptap/pm@3.31.3 @tiptap/react@3.31.3 @tiptap/starter-kit@3.31.3 border-beam@1.4.1 bot-avatars@0.1.1 img-fx@0.5.1 liquid-gooey@0.2.2 metal-fx@2.0.11 thinking-orbs@0.3.2 three@0.149.0 voice-glow@0.2.1
 ```
 
+For a smaller installation, switch ordinary UI imports to `magnaui/core` and feature imports to the individual subpaths above. Setting `interactions={false}` hides effects but does not change a module's dependency requirements. All component designs and existing prop defaults are preserved.
+
 ## Included components
 
-MagnaUI `0.2.0` includes **68 base component families**, **10 Magna workspace components**, **7 interaction adapters**, and **7 AI conversation components**, with their public component parts and types.
+MagnaUI `0.3.1` includes base component families, Magna workspace components, interaction adapters, and AI conversation components, with their public component parts and types.
 
 | Group              | Public component families                                                                                                                                                                                                                                       |
 | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Actions            | `Button`, `ButtonGroup`, `CompactButton`, `FancyButton`, `LinkButton`, `SocialButton`                                                                                                                                                                           |
-| Forms and input    | `Checkbox`, `ColorPicker`, `CounterInput`, `DatePicker`, `DigitInput`, `FileUpload`, `Filter`, `Hint`, `InlineInput`, `Input`, `Label`, `PasswordStrength`, `Radio`, `Rating`, `RichEditor`, `Select`, `Slider`, `Switch`, `TagInput`, `Textarea`, `TimePicker` |
+| Forms and input    | `Checkbox`, `Combobox`, `ColorPicker`, `CounterInput`, `DatePicker`, `DigitInput`, `FileUpload`, `Filter`, `Hint`, `InlineInput`, `Input`, `Label`, `PasswordStrength`, `Radio`, `Rating`, `RichEditor`, `Select`, `Slider`, `Switch`, `TagInput`, `Textarea`, `TimePicker` |
 | Navigation         | `Accordion`, `Breadcrumb`, `CommandMenu`, `DotStepper`, `HorizontalStepper`, `Pagination`, `SegmentedControl`, `TabMenuHorizontal`, `TabMenuVertical`, `VerticalStepper`                                                                                        |
-| Feedback           | `Alert`, `Banner`, `Notification`, `NotificationFeed`, `ProgressBar`, `ProgressCircle`, `StatusBadge`, `Tooltip`                                                                                                                                                |
+| Feedback           | `Alert`, `Banner`, `Notification`, `NotificationFeed`, `ProgressBar`, `ProgressCircle`, `Skeleton`, `StatusBadge`, `Tooltip`                                                                                                                                                |
 | Overlays           | `Drawer`, `Dropdown`, `Modal`, `Popover`, `StatusModal`                                                                                                                                                                                                         |
-| Data and content   | `ActivityFeed`, `ChartLegend`, `ContentCard`, `ContentLabel`, `Divider`, `Kbd`, `ScrollArea`, `Table`, `Tag`                                                                                                                                                    |
+| Data and content   | `ActivityFeed`, `ChartLegend`, `ContentCard`, `ContentLabel`, `Divider`, `Highlight`, `Kbd`, `Panel`, `Quote`, `Resizable`, `ScrollArea`, `Table`, `Tag`                                                                                                                                                    |
 | Identity and icons | `Avatar`, `AvatarEmptyIcons`, `AvatarGroup`, `AvatarGroupCompact`, `Badge`, `FileFormatIcon`, `KeyIcon`, `PaymentIcon`, `RatingIcons`                                                                                                                           |
 
-- **Magna workspace:** `AppIcon`, `AppLauncher`, `MagnaLogo`, `ChatComposer`, `ChatActivity`, `DesktopButton`, `DesktopSwitch`, `FileTile`, `MagnaNavigation`, and `ProjectContext`.
+- **Magna workspace:** `AppIcon`, `AppLauncher`, `BrandLogo`, `MagnaLogo`, `ChatComposer`, `ChatActivity`, `DesktopButton`, `DesktopSwitch`, `FileTile`, `MagnaNavigation`, and `ProjectContext`.
 - **AI conversations:** `ChatMessage`, `ChatConversation`, `ChatAttachment`, `ChatReasoning`, `ChatToolCall`, `ChatSources`, and `ChatSuggestions`.
 - **Interactions:** `BorderBeam`, `ThinkingOrb`, `BotAvatar`, `Liquid`, `VoiceBeam`, `MetalFx`, and `ImageGeneration`.
 - **Providers and helpers:** `ThemeProvider`, `useTheme`, `ThemeSwitch`, `TooltipProvider`, `NotificationProvider`, `notification`, `useNotification`, `useTabObserver`, `DirectionProvider`, `useDirection`, `createMagnaTheme`, and application, navigation, and logo metadata.

package/dist/components/magna/brand-logo.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef } from "react";
+export type BrandLogoProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
+    src: string;
+    darkSrc?: string;
+    /** Organisation name, or an empty string when the enclosing link names it. */
+    alt: string;
+    width?: number;
+    height?: number;
+    imageClassName?: string;
+};
+/** Tenant artwork for a header or navigation rail, with one accessible name. */
+export declare function BrandLogo({ src, darkSrc, alt, width, height, className, imageClassName, style, ...props }: BrandLogoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/magna/brand-logo.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { magnaClasses as __magnaClasses_1 } from "../../magna-classes.js";
+import { cn } from "../../utils/cn.js";
+/** Tenant artwork for a header or navigation rail, with one accessible name. */
+export function BrandLogo({ src, darkSrc, alt, width = 32, height = 32, className, imageClassName, style, ...props }) {
+    return (_jsxs("span", { ...props, role: alt ? 'img' : undefined, "aria-label": alt || undefined, "aria-hidden": alt ? undefined : true, className: __magnaClasses_1(__magnaClasses_1(cn('inline-flex shrink-0 items-center justify-center', className), className), className), style: { width, height, ...style }, "data-magnaui": '', children: [_jsx("img", { src: src, alt: '', width: width, height: height, className: __magnaClasses_1(__magnaClasses_1(cn('h-full w-full object-contain', darkSrc ? 'block dark:hidden' : 'block', imageClassName), imageClassName), imageClassName), "data-magnaui": '' }), darkSrc && (
+            // eslint-disable-next-line @next/next/no-img-element
+            _jsx("img", { src: darkSrc, alt: '', width: width, height: height, className: __magnaClasses_1(__magnaClasses_1(cn('hidden h-full w-full object-contain dark:block', imageClassName), imageClassName), imageClassName), "data-magnaui": '' }))] }));
+}

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

@@ -13,3 +13,5 @@ export { ChatMessage, type ChatMessageProps } from "./chat-message.js";
 export { ChatAttachment, type ChatAttachmentProps } from "./chat-attachment.js";
 export { ChatConversation, type ChatConversationProps, } from "./chat-conversation.js";
 export { ChatReasoning, ChatToolCall, ChatSources, ChatSuggestions, type ChatReasoningProps, type ChatToolCallProps, type ChatToolCallStatus, type ChatSourcesProps, type ChatSource, type ChatSuggestionsProps, } from "./chat-response.js";
+export { BrandLogo, type BrandLogoProps } from "./brand-logo.js";
+export type { MagnaNavigationProps } from "./navigation.js";

package/dist/components/magna/index.js

@@ -13,3 +13,4 @@ export { ChatMessage } from "./chat-message.js";
 export { ChatAttachment } from "./chat-attachment.js";
 export { ChatConversation, } from "./chat-conversation.js";
 export { ChatReasoning, ChatToolCall, ChatSources, ChatSuggestions, } from "./chat-response.js";
+export { BrandLogo } from "./brand-logo.js";

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

@@ -5,11 +5,18 @@ export interface MagnaNavItem {
     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, }: {
+export type MagnaNavigationProps = {
     orientation?: 'vertical' | 'horizontal';
     items?: MagnaNavItem[];
     active?: string;
     className?: string;
     footer?: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+    /** Logo artwork placed inside the home link; defaults to the Magna glyph. */
+    brand?: React.ReactNode;
+    brandHref?: string;
+    brandLabel?: string;
+    brandClassName?: string;
+    navigationLabel?: string;
+};
+/** Figma Sidebar 199714:167527 and Magan bar 199714:167174. */
+export declare function MagnaNavigation({ orientation, items, active, className, footer, brand, brandHref, brandLabel, brandClassName, navigationLabel, }: MagnaNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/magna/navigation.js

@@ -11,7 +11,7 @@ export const defaultNavItems = [
     { 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, }) {
+export function MagnaNavigation({ orientation = 'vertical', items = defaultNavItems, active, className, footer, brand, brandHref = '#top', brandLabel = 'MagnaUI home', brandClassName, navigationLabel = 'Magna navigation', }) {
     const vertical = orientation === 'vertical';
-    return (_jsxs("nav", { "aria-label": 'Magna navigation', className: __magnaClasses_1(__magnaClasses_1(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), className), className), "data-magnaui": '', children: [_jsx("a", { href: '#top', "aria-label": 'MagnaUI home', className: __magnaClasses_1('flex size-[34px] shrink-0 items-center justify-center rounded-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base'), "data-magnaui": '', children: _jsx(MagnaLogo, { variant: 'glyph', className: __magnaClasses_1('size-6'), "data-magnaui": '' }) }), _jsx("div", { className: __magnaClasses_1(__magnaClasses_1(cn('shrink-0 bg-stroke-soft-200', vertical ? 'h-px w-full' : 'h-6 w-px'))), "data-magnaui": '' }), _jsx("div", { className: __magnaClasses_1(__magnaClasses_1(cn('flex flex-1 gap-3', vertical ? 'flex-col' : 'min-w-0 overflow-x-auto py-1'))), "data-magnaui": '', children: items.map((item) => (_jsx("a", { href: item.href, "aria-label": item.label, title: item.label, "aria-current": active === item.label ? 'page' : undefined, className: __magnaClasses_1(__magnaClasses_1(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'))), "data-magnaui": '', children: _jsx("img", { src: __resolveMagnaAsset_1(`/magna/icons/${item.icon}.svg`), width: 22, height: 22, alt: '', className: __magnaClasses_1('size-[22px] dark:invert'), "data-magnaui": '' }) }, item.label))) }), footer] }));
+    return (_jsxs("nav", { "aria-label": navigationLabel, className: __magnaClasses_1(__magnaClasses_1(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), className), className), "data-magnaui": '', children: [_jsx("a", { href: brandHref, "aria-label": brandLabel, className: __magnaClasses_1(__magnaClasses_1(cn('flex size-[34px] shrink-0 items-center justify-center rounded-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base', brandClassName), brandClassName), brandClassName), "data-magnaui": '', children: brand ?? _jsx(MagnaLogo, { variant: 'glyph', className: __magnaClasses_1('size-6'), "data-magnaui": '' }) }), _jsx("div", { className: __magnaClasses_1(__magnaClasses_1(cn('shrink-0 bg-stroke-soft-200', vertical ? 'h-px w-full' : 'h-6 w-px'))), "data-magnaui": '' }), _jsx("div", { className: __magnaClasses_1(__magnaClasses_1(cn('flex flex-1 gap-3', vertical ? 'flex-col' : 'min-w-0 overflow-x-auto py-1'))), "data-magnaui": '', children: items.map((item) => (_jsx("a", { href: item.href, "aria-label": item.label, title: item.label, "aria-current": active === item.label ? 'page' : undefined, className: __magnaClasses_1(__magnaClasses_1(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'))), "data-magnaui": '', children: _jsx("img", { src: __resolveMagnaAsset_1(`/magna/icons/${item.icon}.svg`), width: 22, height: 22, alt: '', className: __magnaClasses_1('size-[22px] dark:invert'), "data-magnaui": '' }) }, item.label))) }), footer] }));
 }

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

@@ -36,7 +36,7 @@ export declare const SelectedFilter: React.ForwardRefExoticComponent<Omit<Omit<R
     size: "medium" | "small" | "xsmall" | "xxsmall";
 }> & {
     asChild?: boolean;
-} & React.RefAttributes<HTMLButtonElement>, "ref">, "onChange"> & {
+} & import("./hit-area.js").HitAreaProps & React.RefAttributes<HTMLButtonElement>, "ref">, "onChange"> & {
     pressed?: boolean;
     defaultPressed?: boolean;
     onPressedChange?: (pressed: boolean) => void;

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+import { type HitAreaProps } from "./hit-area.js";
 type Appearance = {
     variant: 'primary' | 'neutral' | 'error';
     mode: 'filled' | 'stroke' | 'lighter' | 'ghost';
@@ -14,7 +15,7 @@ export declare const buttonVariants: (options?: Partial<Appearance> & {
 }) | undefined) => string>;
 export declare const Root: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & Partial<Appearance> & {
     asChild?: boolean;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & HitAreaProps & React.RefAttributes<HTMLButtonElement>>;
 export declare function Icon<T extends React.ElementType = 'div'>({ as, className, variant, mode, size, ...props }: PolymorphicComponentProps<T, Partial<Appearance>>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Icon {
     var displayName: string;

package/dist/components/ui/button.js

@@ -4,6 +4,8 @@ import { magnaRecipe as __magnaRecipe_1, magnaClasses as __magnaClasses_1 } from
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { mergeOptions, slotRecipe } from "./magna-recipe.js";
+import { touchHitArea } from "./hit-area.js";
+import { cn } from "../../utils/cn.js";
 const appearance = React.createContext({});
 const dimensions = {
     medium: 'h-10 px-3.5 gap-3',
@@ -45,10 +47,12 @@ export const buttonVariants = __magnaRecipe_1(slotRecipe({ variant: 'primary', m
     ],
     icon: 'flex shrink-0 justify-center items-center size-5 -mx-1',
 })));
-export const Root = React.forwardRef(function Button({ variant, mode, size, asChild, className, children, ...props }, ref) {
+export const Root = React.forwardRef(function Button({ variant, mode, size, asChild, hitArea = 'visual', className, children, ...props }, ref) {
     const options = { variant, mode, size };
     const Element = asChild ? Slot : 'button';
-    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, className: __magnaClasses_1(buttonVariants(options).root({ className }), className), ...props, "data-magnaui": '', children: children }) }));
+    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, className: __magnaClasses_1(buttonVariants(options).root({
+                className: __magnaClasses_1(cn(hitArea === 'touch' && touchHitArea, className), className),
+            }), className), ...props, "data-magnaui": '', children: children }) }));
 });
 Root.displayName = 'ButtonRoot';
 export function Icon({ as, className, variant, mode, size, ...props }) {

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as Aria from "react-aria-components";
+import { type Direction } from "./direction-provider.js";
+export type ComboboxProps<T extends object> = Aria.ComboBoxProps<T> & {
+    dir?: Direction;
+    lang?: string;
+};
+/** An editable, non-modal select. React Aria owns filtering and active-descendant navigation. */
+export declare function Root<T extends object>({ className, dir, lang, allowsEmptyCollection, ...props }: ComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const Label: React.ForwardRefExoticComponent<Aria.LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export declare const Control: React.ForwardRefExoticComponent<Aria.GroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Input: React.ForwardRefExoticComponent<Aria.InputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Trigger: React.ForwardRefExoticComponent<Aria.ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export type ContentProps = Aria.PopoverProps & {
+    lang?: string;
+};
+export declare const Content: React.ForwardRefExoticComponent<Aria.PopoverProps & {
+    lang?: string;
+} & React.RefAttributes<HTMLElement>>;
+export declare function List<T extends object>({ className, ...props }: Aria.ListBoxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Item<T extends object>({ className, children, textValue, ...props }: Aria.ListBoxItemProps<T>): import("react/jsx-runtime").JSX.Element;
+/** Supply through List.renderEmptyState so empty text is not treated as an option. */
+export declare function Empty({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const Description: React.ForwardRefExoticComponent<Aria.TextProps & React.RefAttributes<HTMLElement>>;
+export declare const Error: React.ForwardRefExoticComponent<Aria.FieldErrorProps & React.RefAttributes<HTMLElement>>;

package/dist/components/ui/combobox.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { magnaClasses as __magnaClasses_1 } from "../../magna-classes.js";
+import * as React from "react";
+import * as Aria from "react-aria-components";
+import { RiArrowDownSLine, RiCheckLine } from "@remixicon/react";
+import { cn } from "../../utils/cn.js";
+import { DirectionProvider, useDirection, useDirectionAttributes, } from "./direction-provider.js";
+// Resolve render-prop classes once. The named local also lets the package
+// compiler preserve caller Tailwind classes rather than namespace them.
+function classes(base, extra) {
+    return (state) => {
+        const className = typeof extra === 'function' ? extra(state) : extra;
+        return __magnaClasses_1(cn(base, className), className);
+    };
+}
+/** An editable, non-modal select. React Aria owns filtering and active-descendant navigation. */
+export function Root({ className, dir, lang, allowsEmptyCollection = true, ...props }) {
+    const direction = useDirection(dir);
+    const attributes = useDirectionAttributes(direction, lang);
+    return (_jsx(DirectionProvider, { dir: direction, lang: attributes.lang, className: __magnaClasses_1('contents'), "data-magnaui": '', children: _jsx(Aria.ComboBox, { ...props, allowsEmptyCollection: allowsEmptyCollection, className: __magnaClasses_1(classes('flex min-w-0 flex-col gap-1.5', className), className), "data-magnaui": '' }) }));
+}
+export const Label = React.forwardRef(function Label({ className, ...props }, ref) {
+    return (_jsx(Aria.Label, { ...props, ref: ref, className: __magnaClasses_1(__magnaClasses_1(cn('text-start text-label-sm text-text-strong-950', className), className), className), "data-magnaui": '' }));
+});
+export const Control = React.forwardRef(function Control({ className, ...props }, ref) {
+    return (_jsx(Aria.Group, { role: 'presentation', ...props, ref: ref, className: __magnaClasses_1(classes('flex min-w-0 items-center gap-1 rounded-full bg-bg-white-0 pe-2 ps-3 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200 transition-colors data-[disabled]:bg-bg-weak-50 data-[hovered]:bg-bg-weak-50 data-[disabled]:shadow-none data-[focus-within]:shadow-button-important-focus data-[disabled]:ring-transparent data-[focus-within]:ring-stroke-strong-950 data-[invalid]:ring-error-base', className), className), "data-magnaui": '' }));
+});
+export const Input = React.forwardRef(function Input({ className, onKeyDown, ...props }, ref) {
+    return (_jsx(Aria.Input, { ...props, ref: ref, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.altKey ||
+                event.ctrlKey ||
+                event.metaKey ||
+                event.shiftKey ||
+                event.nativeEvent.isComposing ||
+                event.currentTarget.readOnly)
+                return;
+            const expanded = event.currentTarget.getAttribute('aria-expanded') === 'true';
+            // Some React Aria versions leave the native default unhandled when
+            // navigation reaches a collection boundary. Keep those keys in the
+            // list instead of scrolling the page and dismissing the suggestions.
+            if (event.key === 'ArrowDown' ||
+                event.key === 'ArrowUp' ||
+                (expanded &&
+                    ['Home', 'End', 'PageUp', 'PageDown'].includes(event.key)))
+                event.preventDefault();
+        }, className: __magnaClasses_1(classes('h-10 min-w-0 flex-1 bg-transparent text-start text-paragraph-sm text-text-strong-950 outline-none placeholder:text-text-soft-400 disabled:text-text-disabled-300', className), className), "data-magnaui": '' }));
+});
+export const Trigger = React.forwardRef(function Trigger({ className, children, ...props }, ref) {
+    return (_jsx(Aria.Button, { ...props, ref: ref, className: __magnaClasses_1(classes('flex size-7 shrink-0 items-center justify-center rounded-full text-text-sub-600 outline-none data-[hovered]:bg-bg-soft-200 data-[disabled]:text-text-disabled-300 data-[focus-visible]:ring-2 data-[focus-visible]:ring-primary-base', className), className), "data-magnaui": '', children: children ?? _jsx(RiArrowDownSLine, { className: __magnaClasses_1('size-5'), "aria-hidden": 'true', "data-magnaui": '' }) }));
+});
+export const Content = React.forwardRef(function Content({ className, lang, children, offset = 6, ...props }, ref) {
+    const attributes = useDirectionAttributes(undefined, lang);
+    return (_jsx(Aria.Popover, { ...props, ref: ref, offset: offset, isNonModal: true, className: __magnaClasses_1(classes('z-50 min-w-[--trigger-width] max-w-[calc(100vw-24px)] overflow-hidden rounded-2xl bg-bg-white-0 p-1 shadow-regular-md outline-none ring-1 ring-inset ring-stroke-soft-200', className), className), "data-magnaui": '', children: (state) => (_jsx("div", { ...attributes, "data-magnaui": '', children: typeof children === 'function' ? children(state) : children })) }));
+});
+export function List({ className, ...props }) {
+    return (_jsx(Aria.ListBox, { ...props, className: __magnaClasses_1(classes('max-h-[min(320px,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain p-1 outline-none', className), className), "data-magnaui": '' }));
+}
+export function Item({ className, children, textValue, ...props }) {
+    return (_jsx(Aria.ListBoxItem, { ...props, textValue: textValue ?? (typeof children === 'string' ? children : undefined), className: __magnaClasses_1(classes('flex min-h-9 cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 text-start text-paragraph-sm text-text-strong-950 outline-none data-[focused]:bg-bg-weak-50 data-[selected]:bg-primary-alpha-10 data-[disabled]:text-text-disabled-300 data-[disabled]:opacity-60', className), className), "data-magnaui": '', children: (state) => (_jsxs(_Fragment, { children: [_jsx("span", { className: __magnaClasses_1('min-w-0 flex-1'), "data-magnaui": '', children: typeof children === 'function' ? children(state) : children }), state.isSelected && (_jsx(RiCheckLine, { className: __magnaClasses_1('size-4 shrink-0 text-primary-base'), "aria-hidden": 'true', "data-magnaui": '' }))] })) }));
+}
+/** Supply through List.renderEmptyState so empty text is not treated as an option. */
+export function Empty({ className, ...props }) {
+    return (_jsx("div", { ...props, className: __magnaClasses_1(__magnaClasses_1(cn('px-3 py-4 text-center text-paragraph-sm text-text-soft-400', className), className), className), "data-magnaui": '' }));
+}
+export const Description = React.forwardRef(function Description({ className, ...props }, ref) {
+    return (_jsx(Aria.Text, { ...props, ref: ref, slot: 'description', className: __magnaClasses_1(__magnaClasses_1(cn('text-start text-paragraph-xs text-text-sub-600', className), className), className), "data-magnaui": '' }));
+});
+export const Error = React.forwardRef(function Error({ className, ...props }, ref) {
+    return (_jsx(Aria.FieldError, { ...props, ref: ref, className: __magnaClasses_1(classes('text-start text-paragraph-xs text-error-base', className), className), "data-magnaui": '' }));
+});

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

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

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

@@ -4,6 +4,8 @@ import { magnaRecipe as __magnaRecipe_1, magnaClasses as __magnaClasses_1 } from
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { mergeOptions, slotRecipe } from "./magna-recipe.js";
+import { touchHitArea } from "./hit-area.js";
+import { cn } from "../../utils/cn.js";
 const appearance = React.createContext({});
 const surfaces = {
     stroke: 'border border-stroke-soft-200 bg-bg-white-0 shadow-regular-xs hover:border-transparent hover:shadow-none focus-visible:border-transparent focus-visible:shadow-none',
@@ -23,10 +25,12 @@ export const compactButtonVariants = __magnaRecipe_1(slotRecipe({ variant: 'stro
     ],
     icon: size === 'large' ? 'size-5' : 'size-[18px]',
 })));
-export const Root = React.forwardRef(function CompactButton({ variant, size, fullRadius, asChild, className, children, ...props }, ref) {
+export const Root = React.forwardRef(function CompactButton({ variant, size, fullRadius, asChild, hitArea = 'visual', className, children, ...props }, ref) {
     const options = { variant, size, fullRadius };
     const Element = asChild ? Slot : 'button';
-    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, className: __magnaClasses_1(compactButtonVariants(options).root({ className }), className), ...props, "data-magnaui": '', children: children }) }));
+    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, className: __magnaClasses_1(compactButtonVariants(options).root({
+                className: __magnaClasses_1(cn(hitArea === 'touch' && touchHitArea, className), className),
+            }), className), ...props, "data-magnaui": '', children: children }) }));
 });
 Root.displayName = 'CompactButtonRoot';
 export function Icon({ as, variant, size, className, ...props }) {

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

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

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type HighlightProps = React.HTMLAttributes<HTMLElement> & {
+    tone?: 'primary' | 'warning' | 'neutral';
+};
+/** Semantic highlighted text; content remains text rather than injected HTML. */
+export declare function Root({ tone, className, ...props }: HighlightProps): import("react/jsx-runtime").JSX.Element;
+export type HighlightTextProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    children: string;
+    match: string | readonly string[];
+    caseSensitive?: boolean;
+    tone?: HighlightProps['tone'];
+    markClassName?: string;
+};
+/** Highlight literal search terms, longest first; punctuation is never a regular expression. */
+export declare function Text({ children, match, caseSensitive, tone, markClassName, ...props }: HighlightTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/highlight.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { magnaClasses as __magnaClasses_1 } from "../../magna-classes.js";
+import { cn } from "../../utils/cn.js";
+/** Semantic highlighted text; content remains text rather than injected HTML. */
+export function Root({ tone = 'primary', className, ...props }) {
+    return (_jsx("mark", { ...props, className: __magnaClasses_1(__magnaClasses_1(cn('rounded-sm px-0.5 text-inherit [box-decoration-break:clone]', tone === 'primary' && 'bg-primary-alpha-24', tone === 'warning' && 'bg-warning-light', tone === 'neutral' && 'bg-bg-soft-200', className), className), className), "data-magnaui": '' }));
+}
+/** Highlight literal search terms, longest first; punctuation is never a regular expression. */
+export function Text({ children, match, caseSensitive = false, tone, markClassName, ...props }) {
+    const terms = [...new Set(typeof match === 'string' ? [match] : match)]
+        .filter(Boolean)
+        .sort((a, b) => b.length - a.length);
+    const pattern = terms
+        .map((term) => term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+        .join('|');
+    const parts = pattern
+        ? children.split(new RegExp(`(${pattern})`, caseSensitive ? 'gu' : 'giu'))
+        : [children];
+    return (_jsx("span", { ...props, "data-magnaui": '', children: parts.map((part, index) => index % 2 ? (_jsx(Root, { tone: tone, className: __magnaClasses_1(markClassName, markClassName), "data-magnaui": '', children: part }, index)) : (part)) }));
+}

package/dist/components/ui/hit-area.d.ts

@@ -0,0 +1,6 @@
+/** Extend the existing control's hit box without adding a tab stop or changing layout. */
+export declare const touchHitArea = "after:absolute after:left-1/2 after:top-1/2 after:h-full after:w-full after:min-h-[44px] after:min-w-[44px] after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']";
+export type HitAreaProps = {
+    /** Touch adds a 44 px minimum hit area. Leave space around adjacent controls. */
+    hitArea?: 'visual' | 'touch';
+};

package/dist/components/ui/hit-area.js

@@ -0,0 +1,2 @@
+/** Extend the existing control's hit box without adding a tab stop or changing layout. */
+export const touchHitArea = "after:absolute after:left-1/2 after:top-1/2 after:h-full after:w-full after:min-h-[44px] after:min-w-[44px] after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']";

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

@@ -5,10 +5,24 @@ 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 type ModalSize = 'small' | 'medium' | 'large' | 'xlarge' | 'full';
+export declare const modalContentVariants: (options?: Partial<{
+    size: ModalSize;
+}> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) => Record<"root", (overrides?: (Partial<{
+    size: ModalSize;
+}> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) | undefined) => string>;
 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;
+    /** Small preserves the original 400 px maximum. All sizes fit the viewport. */
+    size?: ModalSize;
 } & 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>>;

package/dist/components/ui/modal.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { magnaClasses as __magnaClasses_1 } from "../../magna-classes.js";
+import { magnaRecipe as __magnaRecipe_1, magnaClasses as __magnaClasses_1 } from "../../magna-classes.js";
 import * as React from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import { Slottable } from "@radix-ui/react-slot";
@@ -8,17 +8,33 @@ import { RiCloseLine } from "@remixicon/react";
 import * as CompactButton from "./compact-button.js";
 import { cn } from "../../utils/cn.js";
 import { useDirectionAttributes } from "./direction-provider.js";
+import { slotRecipe } from "./magna-recipe.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';
+const widths = {
+    small: 'max-w-[400px]',
+    medium: 'max-w-[560px]',
+    large: 'max-w-[720px]',
+    xlarge: 'max-w-[960px]',
+    full: 'max-w-none',
+};
+export const modalContentVariants = __magnaRecipe_1(slotRecipe({ size: 'small' }, ({ size }) => ({
+    root: [
+        'relative w-full rounded-20 bg-bg-white-0 shadow-regular-md outline-none',
+        widths[size],
+        fade,
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+    ],
+})));
 export const Overlay = React.forwardRef(function Overlay({ className, ...props }, ref) {
     return (_jsx(Dialog.Overlay, { ...props, ref: ref, className: __magnaClasses_1(__magnaClasses_1(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), className), className), "data-magnaui": '' }));
 });
-export const Content = React.forwardRef(function Content({ children, className, overlayClassName, showClose = true, ...props }, ref) {
+export const Content = React.forwardRef(function Content({ children, className, overlayClassName, showClose = true, size = 'small', ...props }, ref) {
     const direction = useDirectionAttributes(props.dir, props.lang);
-    return (_jsx(Portal, { children: _jsx(Overlay, { className: __magnaClasses_1(overlayClassName, overlayClassName), "data-magnaui": '', children: _jsxs(Dialog.Content, { ...props, ...direction, ref: ref, className: __magnaClasses_1(__magnaClasses_1(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), className), className), "data-magnaui": '', children: [_jsx(Slottable, { children: children }), showClose && (_jsx(Close, { asChild: true, children: _jsx(CompactButton.Root, { "aria-label": 'Close dialog', size: 'large', variant: 'ghost', className: __magnaClasses_1('absolute end-4 top-4'), "data-magnaui": '', children: _jsx(CompactButton.Icon, { as: RiCloseLine }) }) }))] }) }) }));
+    return (_jsx(Portal, { children: _jsx(Overlay, { className: __magnaClasses_1(overlayClassName, overlayClassName), "data-magnaui": '', children: _jsxs(Dialog.Content, { ...props, ...direction, ref: ref, className: __magnaClasses_1(modalContentVariants({ size }).root({ className }), className), "data-magnaui": '', children: [_jsx(Slottable, { children: children }), showClose && (_jsx(Close, { asChild: true, children: _jsx(CompactButton.Root, { "aria-label": 'Close dialog', size: 'large', variant: 'ghost', className: __magnaClasses_1('absolute end-4 top-4'), "data-magnaui": '', children: _jsx(CompactButton.Icon, { as: RiCloseLine }) }) }))] }) }) }));
 });
 export const Title = React.forwardRef(function Title({ className, ...props }, ref) {
     return (_jsx(Dialog.Title, { ...props, ref: ref, className: __magnaClasses_1(__magnaClasses_1(cn('text-label-sm text-text-strong-950', className), className), className), "data-magnaui": '' }));

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+export type PanelProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Apply the surface to a single semantic child, such as a section or form. */
+    asChild?: boolean;
+};
+/** A neutral Magna surface for forms, tables, and other block content. */
+export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /** Apply the surface to a single semantic child, such as a section or form. */
+    asChild?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/panel.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { magnaClasses as __magnaClasses_1 } from "../../magna-classes.js";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+/** A neutral Magna surface for forms, tables, and other block content. */
+export const Root = React.forwardRef(function Panel({ asChild, className, ...props }, ref) {
+    const Element = asChild ? Slot : 'div';
+    return (_jsx(Element, { ...props, ref: ref, className: __magnaClasses_1(__magnaClasses_1(cn('min-w-0 rounded-xl bg-bg-white-0 p-4 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200', className), className), className), "data-magnaui": '' }));
+});
+Root.displayName = 'PanelRoot';

package/dist/components/ui/progress-bar.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 type Appearance = {
     color: 'blue' | 'red' | 'orange' | 'green';
+    /** Unknown completion. A null value also selects this state. */
+    indeterminate: boolean;
 };
 export declare const progressBarVariants: (options?: Partial<Appearance> & {
     class?: import("tailwind-merge").ClassNameValue;
@@ -10,7 +12,7 @@ export declare const progressBarVariants: (options?: Partial<Appearance> & {
     className?: import("tailwind-merge").ClassNameValue;
 }) | undefined) => string>;
 export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Partial<Appearance> & {
-    value?: number;
+    value?: number | null;
     max?: number;
 } & React.RefAttributes<HTMLDivElement>>;
 export type LabelProps = React.ComponentPropsWithoutRef<typeof Root> & {
@@ -22,7 +24,7 @@ export type LabelProps = React.ComponentPropsWithoutRef<typeof Root> & {
     showPercentage?: boolean;
 };
 export declare const Label: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & Partial<Appearance> & {
-    value?: number;
+    value?: number | null;
     max?: number;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & {
     label: React.ReactNode;