magnaui 0.1.0

package/dist/components/ui/rich-editor.js

@@ -0,0 +1,248 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { resolveMagnaAsset as __resolveMagnaAsset_1 } from "../../magna-assets.js";
+import * as React from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { TextStyleKit } from "@tiptap/extension-text-style";
+import TextAlign from "@tiptap/extension-text-align";
+import Underline from "@tiptap/extension-underline";
+import * as Dropdown from "./dropdown.js";
+import * as Popover from "./popover.js";
+import * as Input from "./input.js";
+import * as Button from "./button.js";
+import { cn } from "../../utils/cn.js";
+import styles from "./rich-editor.module.css";
+export const colors = {
+    gray: '#7b7b7b',
+    blue: '#335cff',
+    orange: '#fa7319',
+    red: '#fb3748',
+    green: '#1fc16b',
+    yellow: '#f6b51e',
+    purple: '#7d52f4',
+    sky: '#47c2ff',
+    pink: '#fb4ba3',
+    teal: '#22d3bb',
+};
+const Context = React.createContext(null);
+export function useRichEditor() {
+    const context = React.useContext(Context);
+    if (!context)
+        throw new Error('RichEditor parts must be placed inside RichEditor.Root.');
+    return context;
+}
+export const Root = React.forwardRef(function Root({ value, defaultValue = '', onValueChange, disabled = false, label = 'Rich text editor', placeholder = 'Write something…', onComment, children, className, dir, ...props }, ref) {
+    const initialValue = React.useRef(value ?? defaultValue);
+    const editor = useEditor({
+        immediatelyRender: false,
+        shouldRerenderOnTransaction: true,
+        extensions: [
+            StarterKit.configure({ underline: false, link: { openOnClick: false } }),
+            Underline,
+            TextStyleKit,
+            TextAlign.configure({ types: ['heading', 'paragraph'] }),
+        ],
+        content: initialValue.current,
+        editable: !disabled,
+        editorProps: {
+            attributes: {
+                role: 'textbox',
+                'aria-multiline': 'true',
+                'aria-label': label,
+                'aria-disabled': String(disabled),
+                'data-placeholder': placeholder,
+                ...(dir ? { dir } : {}),
+            },
+        },
+        onUpdate: ({ editor: current }) => onValueChange?.(current.getHTML()),
+    });
+    React.useEffect(() => {
+        editor?.setEditable(!disabled, false);
+    }, [editor, disabled]);
+    React.useEffect(() => {
+        editor?.setOptions({
+            editorProps: {
+                attributes: {
+                    role: 'textbox',
+                    'aria-multiline': 'true',
+                    'aria-label': label,
+                    'aria-disabled': String(disabled),
+                    'data-placeholder': placeholder,
+                    ...(dir ? { dir } : {}),
+                },
+            },
+        });
+    }, [editor, label, placeholder, disabled, dir]);
+    React.useEffect(() => {
+        if (editor && value !== undefined && value !== editor.getHTML())
+            editor.commands.setContent(value, { emitUpdate: false });
+    }, [editor, value]);
+    return (_jsx(Context.Provider, { value: { editor, disabled, onComment }, children: _jsx("div", { ...props, ref: ref, dir: dir, className: cn('min-w-0 space-y-3', className), children: children }) }));
+});
+export const Content = React.forwardRef(function Content({ className, ...props }, ref) {
+    const { editor, disabled } = useRichEditor();
+    return (_jsx(EditorContent, { ...props, ref: ref, editor: editor, "data-empty": editor?.isEmpty ?? true, "data-disabled": disabled || undefined, className: cn(styles.content, 'min-h-40 rounded-xl border border-stroke-soft-200 bg-bg-white-0 p-4 text-paragraph-sm text-text-strong-950 data-[disabled]:bg-bg-weak-50 data-[disabled]:text-text-disabled-300', className) }));
+});
+function AssetIcon({ name, className }) {
+    // The mask uses the unchanged Figma SVG at its original 20px dimensions.
+    return (_jsx("span", { "aria-hidden": 'true', className: cn('block size-5 shrink-0 bg-current', className), style: {
+            mask: `url(${__resolveMagnaAsset_1(`/magna/editor/${name}.svg`)}) center / 20px 20px no-repeat`,
+            WebkitMask: `url(${__resolveMagnaAsset_1(`/magna/editor/${name}.svg`)}) center / 20px 20px no-repeat`,
+        } }));
+}
+export const Item = React.forwardRef(function Item({ variant = 'icon', active = false, icon = 'bold', color = 'blue', className, children, ...props }, ref) {
+    return (_jsxs("button", { ...props, ref: ref, type: props.type ?? 'button', "data-editor-item": '', "aria-pressed": props['aria-pressed'] ?? active, className: cn('inline-flex h-7 shrink-0 items-center justify-center gap-0.5 rounded-md bg-bg-white-0 p-1 text-label-sm text-text-sub-600 outline-none hover:bg-bg-weak-50 focus-visible:ring-2 focus-visible:ring-primary-base disabled:cursor-not-allowed disabled:opacity-40', variant === 'text' && 'ps-2.5', variant === 'color' && 'ps-2', active && 'bg-bg-weak-50 text-text-strong-950', active && variant === 'icon' && 'text-primary-base', className), children: [variant === 'text' ? ((children ?? 'Header')) : variant === 'color' ? (_jsx("span", { "aria-hidden": 'true', className: 'block size-4 shrink-0 rounded-full', style: { backgroundColor: colors[color] } })) : ((children ?? _jsx(AssetIcon, { name: icon }))), variant !== 'icon' && (_jsx(AssetIcon, { name: active ? 'arrow-up' : 'arrow-down', className: active ? 'text-primary-base' : undefined }))] }));
+});
+export const ColorSwatch = React.forwardRef(function ColorSwatch({ color = 'gray', selected = false, className, style, ...props }, ref) {
+    return (_jsx("button", { ...props, ref: ref, type: props.type ?? 'button', "aria-label": props['aria-label'] ?? `${color} text`, "aria-pressed": selected, className: cn('relative size-4 shrink-0 rounded-full outline-none ring-offset-2 ring-offset-bg-white-0 before:absolute before:-inset-1 focus-visible:ring-2 focus-visible:ring-primary-base disabled:cursor-not-allowed disabled:opacity-40', selected && 'ring-2 ring-stroke-strong-950', className), style: { backgroundColor: colors[color], ...style } }));
+});
+export function Divider() {
+    return (_jsx("span", { "aria-hidden": 'true', className: 'block h-4 w-1 shrink-0 bg-stroke-soft-200', style: {
+            mask: `url(${__resolveMagnaAsset_1('/magna/editor/divider.svg')}) center / 4px 16px no-repeat`,
+            WebkitMask: `url(${__resolveMagnaAsset_1('/magna/editor/divider.svg')}) center / 4px 16px no-repeat`,
+        } }));
+}
+function MenuButton({ children, label, variant = 'text', icon, disabled, text, }) {
+    const [open, setOpen] = React.useState(false);
+    const { editor } = useRichEditor();
+    React.useEffect(() => {
+        if (disabled)
+            setOpen(false);
+    }, [disabled]);
+    return (_jsxs(Dropdown.Root, { open: open, onOpenChange: setOpen, children: [_jsx(Dropdown.Trigger, { asChild: true, children: _jsx(Item, { variant: variant, icon: icon, active: open, disabled: disabled, "aria-label": label, "aria-pressed": undefined, children: text }) }), _jsx(Dropdown.Content, { align: 'start', className: 'w-44', onCloseAutoFocus: (event) => {
+                    if (editor?.isFocused)
+                        event.preventDefault();
+                }, children: children })] }));
+}
+function InsertPopover({ kind }) {
+    const { editor, disabled } = useRichEditor();
+    const [open, setOpen] = React.useState(false);
+    const [value, setValue] = React.useState('');
+    const [error, setError] = React.useState('');
+    const inputId = React.useId();
+    const errorId = React.useId();
+    React.useEffect(() => {
+        if (disabled)
+            setOpen(false);
+    }, [disabled]);
+    const validLink = (candidate) => {
+        try {
+            const url = new URL(candidate);
+            return ['https:', 'http:', 'mailto:', 'tel:'].includes(url.protocol);
+        }
+        catch {
+            return false;
+        }
+    };
+    const apply = () => {
+        const next = value.trim();
+        if (!editor || disabled || !next)
+            return;
+        if (kind === 'link') {
+            if (!validLink(next)) {
+                setError('Enter a full https://, http://, mailto: or tel: address.');
+                return;
+            }
+            if (editor.state.selection.empty)
+                editor
+                    .chain()
+                    .focus()
+                    .insertContent({
+                    type: 'text',
+                    text: next,
+                    marks: [{ type: 'link', attrs: { href: next } }],
+                })
+                    .run();
+            else
+                editor
+                    .chain()
+                    .focus()
+                    .extendMarkRange('link')
+                    .setLink({ href: next })
+                    .run();
+        }
+        else
+            editor
+                .chain()
+                .focus()
+                .insertContent({ type: 'text', text: `@${next.replace(/^@/, '')} ` })
+                .run();
+        setOpen(false);
+    };
+    return (_jsxs(Popover.Root, { open: open, onOpenChange: (next) => {
+            setOpen(next);
+            setError('');
+            if (next)
+                setValue(kind === 'link'
+                    ? String(editor?.getAttributes('link').href ?? '')
+                    : '');
+        }, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Item, { icon: kind === 'link' ? 'link' : 'at', active: open || (kind === 'link' && !!editor?.isActive('link')), "aria-label": kind === 'link' ? 'Insert link' : 'Insert mention', disabled: disabled || !editor }) }), _jsxs(Popover.Content, { align: 'start', showArrow: false, className: 'w-72 space-y-3 p-4', onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                    editor?.commands.focus();
+                }, children: [_jsx("label", { htmlFor: inputId, className: 'block text-label-sm text-text-strong-950', children: kind === 'link' ? 'Link address' : 'Mention name' }), _jsx(Input.Root, { size: 'small', hasError: !!error, children: _jsx(Input.Wrapper, { children: _jsx(Input.Input, { id: inputId, value: value, onChange: (event) => {
+                                    setValue(event.target.value);
+                                    setError('');
+                                }, placeholder: kind === 'link' ? 'https://example.com' : 'Name', "aria-invalid": !!error, "aria-describedby": error ? errorId : undefined, onKeyDown: (event) => {
+                                    if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        apply();
+                                    }
+                                } }) }) }), error && (_jsx("p", { id: errorId, role: 'alert', className: 'text-paragraph-xs text-error-base', children: error })), _jsxs("div", { className: 'flex gap-2', children: [_jsx(Button.Root, { type: 'button', size: 'xsmall', disabled: !value.trim(), onClick: apply, children: "Apply" }), kind === 'link' && (_jsx(Button.Root, { type: 'button', size: 'xsmall', variant: 'neutral', mode: 'stroke', onClick: () => {
+                                    editor?.chain().focus().unsetLink().run();
+                                    setOpen(false);
+                                }, children: "Remove" }))] })] })] }));
+}
+export const Toolbar = React.forwardRef(function Toolbar({ variant = '01', showMore = true, className, onKeyDown, ...props }, ref) {
+    const { editor, disabled, onComment } = useRichEditor();
+    const unavailable = disabled || !editor;
+    const typography = variant === '01' || variant === '02';
+    const formatting = variant === '01' || variant === '03';
+    const insertion = variant === '01' || variant === '04';
+    const format = (kind) => {
+        if (!editor || disabled)
+            return;
+        const chain = editor.chain().focus();
+        if (kind === 'bold')
+            chain.toggleBold().run();
+        else if (kind === 'italic')
+            chain.toggleItalic().run();
+        else if (kind === 'underline')
+            chain.toggleUnderline().run();
+        else
+            chain.toggleStrike().run();
+    };
+    return (_jsxs("div", { ...props, ref: ref, role: 'toolbar', "aria-label": props['aria-label'] ?? 'Text formatting', "aria-orientation": 'horizontal', className: cn('flex w-fit max-w-full flex-wrap items-center gap-0.5 rounded-lg border border-stroke-soft-200 bg-bg-white-0 p-0.5 shadow-regular-xs', className), onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented ||
+                !event.currentTarget.contains(event.target) ||
+                !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+                return;
+            const items = Array.from(event.currentTarget.querySelectorAll('[data-editor-item]:not(:disabled)'));
+            const current = items.indexOf(document.activeElement);
+            if (current < 0 || !items.length)
+                return;
+            event.preventDefault();
+            const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+            const step = (event.key === 'ArrowRight' ? 1 : -1) * (rtl ? -1 : 1);
+            items[event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                    ? items.length - 1
+                    : (current + step + items.length) % items.length]?.focus();
+        }, children: [typography && (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { label: 'Text style', text: editor?.isActive('heading')
+                            ? `Heading ${editor.getAttributes('heading').level}`
+                            : 'Header', disabled: unavailable, children: [_jsx(Dropdown.Item, { onSelect: () => editor?.chain().focus().setParagraph().run(), children: "Paragraph" }), [1, 2, 3].map((level) => (_jsxs(Dropdown.Item, { onSelect: () => editor?.chain().focus().toggleHeading({ level }).run(), children: ["Heading ", level] }, level)))] }), _jsx(Divider, {}), _jsx(MenuButton, { label: 'Font size', text: String(editor?.getAttributes('textStyle').fontSize ?? '14px'), disabled: unavailable, children: [12, 14, 16, 18, 20, 24, 32].map((size) => (_jsxs(Dropdown.Item, { onSelect: () => editor?.chain().focus().setFontSize(`${size}px`).run(), children: [size, "px"] }, size))) })] })), formatting && (_jsxs(_Fragment, { children: [typography && _jsx(Divider, {}), ['bold', 'italic', 'underline', 'strike'].map((kind) => (_jsx(Item, { icon: kind, active: !!editor?.isActive(kind), disabled: unavailable, "aria-label": kind === 'strike'
+                            ? 'Strikethrough'
+                            : kind[0].toUpperCase() + kind.slice(1), onMouseDown: (event) => event.preventDefault(), onClick: () => format(kind) }, kind))), _jsx(Divider, {}), _jsx(MenuButton, { variant: 'dropdown', icon: 'align-left', label: 'Text alignment', disabled: unavailable, children: ['left', 'center', 'right', 'justify'].map((alignment) => (_jsx(Dropdown.Item, { onSelect: () => editor?.chain().focus().setTextAlign(alignment).run(), children: alignment[0].toUpperCase() + alignment.slice(1) }, alignment))) })] })), insertion && (_jsxs(_Fragment, { children: [formatting && _jsx(Divider, {}), _jsx(Item, { icon: 'comment', "aria-label": 'Add comment', disabled: unavailable || !onComment, onClick: () => {
+                            if (!editor)
+                                return;
+                            const { from, to } = editor.state.selection;
+                            onComment?.({
+                                text: editor.state.doc.textBetween(from, to, ' '),
+                                from,
+                                to,
+                            });
+                        } }), _jsx(InsertPopover, { kind: 'link' }), _jsx(InsertPopover, { kind: 'mention' })] })), showMore && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(MenuButton, { variant: 'icon', icon: 'more', label: 'More formatting', disabled: unavailable, children: [_jsx(Dropdown.Item, { disabled: !editor?.can().undo(), onSelect: () => editor?.chain().focus().undo().run(), children: "Undo" }), _jsx(Dropdown.Item, { disabled: !editor?.can().redo(), onSelect: () => editor?.chain().focus().redo().run(), children: "Redo" }), _jsx(Dropdown.Item, { onSelect: () => editor?.chain().focus().unsetAllMarks().clearNodes().run(), children: "Clear formatting" }), _jsx(Dropdown.Label, { children: "Text color" }), Object.keys(colors).map((color) => (_jsxs(Dropdown.Item, { onSelect: () => editor?.chain().focus().setColor(colors[color]).run(), children: [_jsx("span", { className: 'size-4 shrink-0 rounded-full', style: { backgroundColor: colors[color] } }), color[0].toUpperCase() + color.slice(1)] }, color)))] })] }))] }));
+});

package/dist/components/ui/rich-editor.module.css

@@ -0,0 +1,58 @@
+.content :global(.tiptap) {
+  min-height: 128px;
+  outline: none;
+  overflow-wrap: anywhere;
+}
+.content :global(.tiptap):focus-visible {
+  outline: 2px solid var(--primary-base);
+  outline-offset: 8px;
+  border-radius: 4px;
+}
+.content :global(.tiptap) p {
+  margin: 0 0 0.5em;
+}
+.content :global(.tiptap) > :last-child {
+  margin-bottom: 0;
+}
+.content :global(.tiptap) h1 {
+  font-size: 2em;
+  font-weight: 600;
+  line-height: 1.25;
+}
+.content :global(.tiptap) h2 {
+  font-size: 1.5em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+.content :global(.tiptap) h3 {
+  font-size: 1.25em;
+  font-weight: 600;
+}
+.content :global(.tiptap) ul {
+  list-style: disc;
+  padding-inline-start: 1.5em;
+}
+.content :global(.tiptap) ol {
+  list-style: decimal;
+  padding-inline-start: 1.5em;
+}
+.content :global(.tiptap) a {
+  color: var(--primary-base);
+  text-decoration: underline;
+}
+.content :global(.tiptap) blockquote {
+  border-inline-start: 2px solid currentColor;
+  padding-inline-start: 1em;
+}
+.content :global(.tiptap) code {
+  border-radius: 4px;
+  background: rgb(123 123 123 / 0.1);
+  padding: 0.125em 0.25em;
+}
+.content[data-empty='true'] :global(.tiptap)::before {
+  content: attr(data-placeholder);
+  float: inline-start;
+  color: var(--text-soft-400);
+  height: 0;
+  pointer-events: none;
+}

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-scroll-area";
+export type ScrollAreaSize = 'medium' | 'small' | 'xsmall';
+export type ScrollAreaVariant = 'default' | 'lighter';
+type Appearance = {
+    size?: ScrollAreaSize;
+    variant?: ScrollAreaVariant;
+};
+export declare const Root: React.ForwardRefExoticComponent<Omit<Primitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & Appearance & React.RefAttributes<HTMLDivElement>>;
+export declare const Viewport: React.ForwardRefExoticComponent<Omit<Primitive.ScrollAreaViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Scrollbar: React.ForwardRefExoticComponent<Omit<Primitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & Appearance & React.RefAttributes<HTMLDivElement>>;
+export declare const Thumb: React.ForwardRefExoticComponent<Omit<Primitive.ScrollAreaThumbProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Corner: React.ForwardRefExoticComponent<Primitive.ScrollAreaCornerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-scroll-area";
+import { cn } from "../../utils/cn.js";
+const widths = { medium: 20, small: 16, xsmall: 12 };
+const Context = React.createContext({
+    size: 'medium',
+    variant: 'default',
+});
+export const Root = React.forwardRef(function Root({ size = 'medium', variant = 'default', className, children, ...props }, ref) {
+    return (_jsx(Context.Provider, { value: { size, variant }, children: _jsx(Primitive.Root, { ...props, ref: ref, className: cn('relative overflow-hidden', className), children: children }) }));
+});
+export const Viewport = React.forwardRef(function Viewport({ className, tabIndex = 0, ...props }, ref) {
+    return (_jsx(Primitive.Viewport, { ...props, ref: ref, tabIndex: tabIndex, className: cn('size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-base', className) }));
+});
+export const Scrollbar = React.forwardRef(function Scrollbar({ size, variant, orientation = 'vertical', className, style, children, ...props }, ref) {
+    const inherited = React.useContext(Context);
+    const resolvedSize = size ?? inherited.size;
+    const resolvedVariant = variant ?? inherited.variant;
+    const width = widths[resolvedSize];
+    const vertical = orientation === 'vertical';
+    return (_jsx(Primitive.Scrollbar, { ...props, ref: ref, orientation: orientation, className: cn('flex touch-none select-none border-stroke-soft-200', vertical ? 'border-s' : 'flex-col border-t', resolvedVariant === 'lighter' ? 'bg-bg-weak-50' : 'bg-bg-white-0', className), style: {
+            ...(vertical
+                ? { width, padding: `8px ${(width - 5) / 2}px` }
+                : { height: width, padding: `${(width - 5) / 2}px 8px` }),
+            ...style,
+        }, children: _jsx(Context.Provider, { value: { size: resolvedSize, variant: resolvedVariant }, children: children ?? _jsx(Thumb, {}) }) }));
+});
+export const Thumb = React.forwardRef(function Thumb({ className, ...props }, ref) {
+    const { variant } = React.useContext(Context);
+    return (_jsx(Primitive.Thumb, { ...props, ref: ref, className: cn('relative flex-1 rounded-full before:absolute before:left-1/2 before:top-1/2 before:min-h-5 before:min-w-5 before:-translate-x-1/2 before:-translate-y-1/2', variant === 'lighter' ? 'bg-stroke-sub-300' : 'bg-stroke-soft-200', className) }));
+});
+export const Corner = Primitive.Corner;

package/dist/components/ui/segmented-control.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as Tabs from "@radix-ui/react-tabs";
+export declare const Root: React.ForwardRefExoticComponent<Tabs.TabsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Content: React.ForwardRefExoticComponent<Tabs.TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const List: React.ForwardRefExoticComponent<Omit<Tabs.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    floatingBgClassName?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Trigger: React.ForwardRefExoticComponent<Omit<Tabs.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/segmented-control.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as Tabs from "@radix-ui/react-tabs";
+import { Slottable } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+import { useTabObserver } from "../../hooks/use-tab-observer.js";
+export const Root = Tabs.Root;
+export const Content = Tabs.Content;
+export const List = React.forwardRef(function List({ children, className, floatingBgClassName, ...props }, ref) {
+    const [selection, setSelection] = React.useState({ x: 0, width: 0 });
+    const { listRef, mounted } = useTabObserver({
+        onActiveTabChange: (_index, tab) => setSelection({ x: tab.offsetLeft, width: tab.offsetWidth }),
+    });
+    const connect = React.useCallback((node) => {
+        listRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [listRef, ref]);
+    return (_jsxs(Tabs.List, { ...props, ref: connect, className: cn('relative isolate grid w-full auto-cols-fr grid-flow-col gap-1 rounded-full bg-bg-weak-50 p-1', className), children: [_jsx(Slottable, { children: children }), _jsx("div", { "aria-hidden": 'true', className: cn('absolute inset-y-1 left-0 -z-10 rounded-full bg-bg-white-0 shadow-toggle-switch transition-transform duration-300', !mounted && 'hidden', floatingBgClassName), style: {
+                    width: selection.width,
+                    transform: `translateX(${selection.x}px)`,
+                    transitionTimingFunction: 'cubic-bezier(.65,0,.35,1)',
+                } })] }));
+});
+export const Trigger = React.forwardRef(function Trigger({ className, ...props }, ref) {
+    return (_jsx(Tabs.Trigger, { ...props, ref: ref, className: cn('peer relative z-10 inline-flex h-7 items-center justify-center gap-1.5 whitespace-nowrap rounded-full px-1 text-label-sm text-text-soft-400 outline-none transition duration-300 ease-out data-[state=active]:text-text-strong-950', className) }));
+});

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

@@ -0,0 +1,212 @@
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-select";
+import { type VariantProps } from "../../utils/tv.js";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+export declare const selectVariants: import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    size: {
+        medium: {};
+        small: {};
+        xsmall: {};
+    };
+    hasError: {
+        true: {
+            triggerRoot: string;
+        };
+    };
+    variant: {
+        default: {
+            triggerRoot: string;
+        };
+        compact: {
+            triggerRoot: string;
+            triggerIcon: string;
+            selectItemIcon: string;
+        };
+        compactForInput: {
+            triggerRoot: string;
+            triggerArrow: string;
+        };
+        inline: {
+            triggerRoot: string;
+            triggerIcon: string;
+            triggerArrow: string;
+            selectItemIcon: string;
+        };
+    };
+}, {
+    triggerRoot: string;
+    triggerArrow: string;
+    triggerIcon: string;
+    selectItemIcon: string;
+}, undefined, {
+    responsiveVariants?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | {
+        size?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | undefined;
+        variant?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | undefined;
+        hasError?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | undefined;
+    } | undefined;
+} & import("../../vendor/tailwind-variants/config.js").TWMConfig & {
+    twMergeConfig: {
+        extend: {
+            classGroups: {
+                'font-size': {
+                    text: string[];
+                }[];
+                shadow: {
+                    shadow: string[];
+                }[];
+                rounded: {
+                    rounded: string[];
+                }[];
+            };
+        };
+    };
+}, {
+    size: {
+        medium: {};
+        small: {};
+        xsmall: {};
+    };
+    hasError: {
+        true: {
+            triggerRoot: string;
+        };
+    };
+    variant: {
+        default: {
+            triggerRoot: string;
+        };
+        compact: {
+            triggerRoot: string;
+            triggerIcon: string;
+            selectItemIcon: string;
+        };
+        compactForInput: {
+            triggerRoot: string;
+            triggerArrow: string;
+        };
+        inline: {
+            triggerRoot: string;
+            triggerIcon: string;
+            triggerArrow: string;
+            selectItemIcon: string;
+        };
+    };
+}, {
+    triggerRoot: string;
+    triggerArrow: string;
+    triggerIcon: string;
+    selectItemIcon: string;
+}, import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    size: {
+        medium: {};
+        small: {};
+        xsmall: {};
+    };
+    hasError: {
+        true: {
+            triggerRoot: string;
+        };
+    };
+    variant: {
+        default: {
+            triggerRoot: string;
+        };
+        compact: {
+            triggerRoot: string;
+            triggerIcon: string;
+            selectItemIcon: string;
+        };
+        compactForInput: {
+            triggerRoot: string;
+            triggerArrow: string;
+        };
+        inline: {
+            triggerRoot: string;
+            triggerIcon: string;
+            triggerArrow: string;
+            selectItemIcon: string;
+        };
+    };
+}, {
+    triggerRoot: string;
+    triggerArrow: string;
+    triggerIcon: string;
+    selectItemIcon: string;
+}, undefined, import("../../vendor/tailwind-variants/config.js").TVConfig<{
+    size: {
+        medium: {};
+        small: {};
+        xsmall: {};
+    };
+    hasError: {
+        true: {
+            triggerRoot: string;
+        };
+    };
+    variant: {
+        default: {
+            triggerRoot: string;
+        };
+        compact: {
+            triggerRoot: string;
+            triggerIcon: string;
+            selectItemIcon: string;
+        };
+        compactForInput: {
+            triggerRoot: string;
+            triggerArrow: string;
+        };
+        inline: {
+            triggerRoot: string;
+            triggerIcon: string;
+            triggerArrow: string;
+            selectItemIcon: string;
+        };
+    };
+}, {
+    size: {
+        medium: {};
+        small: {};
+        xsmall: {};
+    };
+    hasError: {
+        true: {
+            triggerRoot: string;
+        };
+    };
+    variant: {
+        default: {
+            triggerRoot: string;
+        };
+        compact: {
+            triggerRoot: string;
+            triggerIcon: string;
+            selectItemIcon: string;
+        };
+        compactForInput: {
+            triggerRoot: string;
+            triggerArrow: string;
+        };
+        inline: {
+            triggerRoot: string;
+            triggerIcon: string;
+            triggerArrow: string;
+            selectItemIcon: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type Appearance = VariantProps<typeof selectVariants>;
+declare function Root({ size, variant, hasError, children, ...props }: React.ComponentProps<typeof Primitive.Root> & Appearance): import("react/jsx-runtime").JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+declare const Trigger: React.ForwardRefExoticComponent<Omit<Primitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare function TriggerIcon<T extends React.ElementType = 'div'>({ as, className, ...props }: PolymorphicComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace TriggerIcon {
+    var displayName: string;
+}
+declare function ItemIcon<T extends React.ElementType = 'div'>({ as, className, ...props }: PolymorphicComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+declare const Content: React.ForwardRefExoticComponent<Omit<Primitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Item: React.ForwardRefExoticComponent<Omit<Primitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Group: React.ForwardRefExoticComponent<Primitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>, GroupLabel: React.ForwardRefExoticComponent<Primitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>>, Separator: React.ForwardRefExoticComponent<Primitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>, Value: React.ForwardRefExoticComponent<Primitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+export { Root, Trigger, TriggerIcon, Content, Item, ItemIcon, Group, GroupLabel, Separator, Value, };