magnaui 0.1.0

package/dist/components/ui/tab-menu-vertical.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as Tabs from "@radix-ui/react-tabs";
+import { cn } from "../../utils/cn.js";
+export const Content = Tabs.Content;
+export const Root = React.forwardRef(function Root(props, ref) {
+    return _jsx(Tabs.Root, { ...props, ref: ref, orientation: 'vertical' });
+});
+export const List = React.forwardRef(function List({ className, ...props }, ref) {
+    return (_jsx(Tabs.List, { ...props, ref: ref, className: cn('w-full space-y-2', className) }));
+});
+export const Trigger = React.forwardRef(function Trigger({ className, ...props }, ref) {
+    return (_jsx(Tabs.Trigger, { ...props, ref: ref, className: cn('group/tab-item grid w-full auto-cols-auto grid-flow-col grid-cols-[auto,minmax(0,1fr)] items-center gap-1.5 rounded-full p-2 text-left text-label-sm text-text-sub-600 outline-none transition duration-200 ease-out hover:bg-bg-weak-50 data-[state=active]:bg-bg-weak-50 data-[state=active]:text-text-strong-950', className) }));
+});
+export function Icon({ as, className, ...props }) {
+    const Element = as ?? 'div';
+    return (_jsx(Element, { ...props, className: cn('size-5 text-text-sub-600 transition-colors duration-200 ease-out group-data-[state=active]/tab-item:text-primary-base', className) }));
+}
+export function ArrowIcon({ as, className, ...props }) {
+    const Element = as ?? 'div';
+    return (_jsx(Element, { ...props, className: cn('size-5 scale-75 rounded-full bg-bg-white-0 p-px text-text-sub-600 opacity-0 shadow-regular-xs transition ease-out group-data-[state=active]/tab-item:scale-100 group-data-[state=active]/tab-item:opacity-100', className) }));
+}

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Root as Divider } from "./divider.js";
+export type SortingIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    direction?: 'none' | 'ascending' | 'descending';
+};
+export declare const SortingIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    direction?: "none" | "ascending" | "descending";
+} & React.RefAttributes<HTMLSpanElement>>;
+export declare const Root: React.ForwardRefExoticComponent<React.TableHTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+export declare const Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & {
+    spacing?: number;
+} & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const Head: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+export declare const Row: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+export declare const Cell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+export declare const Caption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export declare function RowDivider({ className, dividerClassName, ...props }: React.ComponentPropsWithoutRef<typeof Divider> & {
+    dividerClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace RowDivider {
+    var displayName: string;
+}

package/dist/components/ui/table.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Root as Divider } from "./divider.js";
+import { cn } from "../../utils/cn.js";
+import { DisplayAsset } from "./display-asset.js";
+import { sortingAssets } from "./display-assets.js";
+export const SortingIcon = React.forwardRef(function SortingIcon({ direction = 'none', className, ...props }, ref) {
+    return (_jsx("span", { ref: ref, "aria-hidden": 'true', ...props, className: cn('inline-flex size-5 shrink-0 items-center justify-center', className), children: _jsx(DisplayAsset, { src: sortingAssets[direction === 'ascending'
+                ? 'up'
+                : direction === 'descending'
+                    ? 'down'
+                    : 'default'] }) }));
+});
+export const Root = React.forwardRef(function Table({ className, ...props }, ref) {
+    return (_jsx("div", { className: cn('w-full overflow-x-auto', className), children: _jsx("table", { ...props, ref: ref, className: 'w-full' }) }));
+});
+export const Header = React.forwardRef(function TableHeader(props, ref) {
+    return _jsx("thead", { ...props, ref: ref });
+});
+export const Body = React.forwardRef(function TableBody({ spacing = 8, children, ...props }, ref) {
+    return (_jsxs("tbody", { ...props, ref: ref, children: [spacing > 0 && (_jsx("tr", { "aria-hidden": 'true', children: _jsx("td", { colSpan: 999, className: 'p-0', style: { height: spacing } }) })), children] }));
+});
+export const Head = React.forwardRef(function TableHead({ className, ...props }, ref) {
+    return (_jsx("th", { ...props, ref: ref, className: cn('bg-bg-weak-50 px-3 py-2 text-left text-paragraph-sm text-text-sub-600 first:rounded-l-lg last:rounded-r-lg', className) }));
+});
+export const Row = React.forwardRef(function TableRow({ className, ...props }, ref) {
+    return _jsx("tr", { ...props, ref: ref, className: cn('group/row', className) });
+});
+export const Cell = React.forwardRef(function TableCell({ className, ...props }, ref) {
+    return (_jsx("td", { ...props, ref: ref, className: cn('h-16 px-3 transition duration-200 ease-out first:rounded-l-xl last:rounded-r-xl group-hover/row:bg-bg-weak-50', className) }));
+});
+export const Caption = React.forwardRef(function TableCaption({ className, ...props }, ref) {
+    return (_jsx("caption", { ...props, ref: ref, className: cn('mt-4 text-paragraph-sm text-text-sub-600', className) }));
+});
+export function RowDivider({ className, dividerClassName, ...props }) {
+    return (_jsx("tr", { className: className, "aria-hidden": 'true', children: _jsx("td", { colSpan: 999, className: 'py-1', children: _jsx(Divider, { variant: 'line-spacing', className: dividerClassName, ...props }) }) }));
+}
+Root.displayName = 'Table';
+Header.displayName = 'TableHeader';
+Body.displayName = 'TableBody';
+Head.displayName = 'TableHead';
+Row.displayName = 'TableRow';
+Cell.displayName = 'TableCell';
+Caption.displayName = 'TableCaption';
+RowDivider.displayName = 'TableRowDivider';

package/dist/components/ui/tag-input.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export type TagInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue'> & {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (tags: string[]) => void;
+    size?: 'medium' | 'small' | 'xsmall';
+    hasError?: boolean;
+    maxTags?: number;
+};
+declare const Root: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "value"> & {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (tags: string[]) => void;
+    size?: "medium" | "small" | "xsmall";
+    hasError?: boolean;
+    maxTags?: number;
+} & React.RefAttributes<HTMLInputElement>>;
+export { Root };

package/dist/components/ui/tag-input.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as Input from "./input.js";
+import * as Tag from "./tag.js";
+import { FormAsset } from "./form-asset.js";
+import { cn } from "../../utils/cn.js";
+const Root = React.forwardRef(function TagInput({ value, defaultValue = [], onValueChange, size = 'medium', hasError, maxTags, className, disabled, readOnly, name, onKeyDown, onChange, ...props }, ref) {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const [draft, setDraft] = React.useState('');
+    const tags = value ?? internal;
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => inputRef.current);
+    React.useEffect(() => {
+        inputRef.current?.setCustomValidity(props.required && tags.length === 0 ? 'Add at least one tag.' : '');
+    }, [props.required, tags.length]);
+    const update = (next) => {
+        if (disabled || readOnly)
+            return;
+        if (value === undefined)
+            setInternal(next);
+        onValueChange?.(next);
+    };
+    const add = () => {
+        const next = draft.trim();
+        if (!next ||
+            tags.includes(next) ||
+            (maxTags !== undefined && tags.length >= maxTags))
+            return;
+        update([...tags, next]);
+        setDraft('');
+    };
+    return (_jsxs("div", { className: cn('flex w-full flex-col gap-2', className), children: [_jsx(Input.Root, { size: size, hasError: hasError, children: _jsx(Input.Wrapper, { children: _jsx(Input.Input, { ...props, ref: inputRef, required: props.required && tags.length === 0, disabled: disabled, readOnly: readOnly, "aria-invalid": hasError || props['aria-invalid'], value: draft, onChange: (event) => {
+                            setDraft(event.target.value);
+                            onChange?.(event);
+                        }, onKeyDown: (event) => {
+                            onKeyDown?.(event);
+                            if (event.defaultPrevented ||
+                                event.nativeEvent.isComposing ||
+                                readOnly ||
+                                disabled)
+                                return;
+                            if (event.key === 'Enter' || event.key === ',') {
+                                event.preventDefault();
+                                add();
+                            }
+                            if (event.key === 'Backspace' && !draft && tags.length) {
+                                event.preventDefault();
+                                update(tags.slice(0, -1));
+                            }
+                        } }) }) }), tags.length > 0 && (_jsx("ul", { className: 'flex flex-wrap gap-2', "aria-label": 'Selected tags', children: tags.map((tag, index) => (_jsx("li", { children: _jsxs(Tag.Root, { disabled: disabled, children: [_jsx("span", { children: tag }), !readOnly && (_jsx(Tag.DismissButton, { disabled: disabled, "aria-label": `Remove ${tag}`, onClick: () => {
+                                    update(tags.filter((_, i) => i !== index));
+                                    inputRef.current?.focus();
+                                }, children: _jsx(FormAsset, { file: '36c22.svg', className: 'size-4' }) }))] }) }, `${tag}-${index}`))) })), name &&
+                tags.map((tag, index) => (_jsx("input", { type: 'hidden', name: name, value: tag, disabled: disabled }, index))), _jsxs("span", { className: 'sr-only', role: 'status', children: [tags.length, " tags selected"] })] }));
+});
+export { Root };

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type Appearance = {
+    variant: 'stroke' | 'gray';
+    disabled: boolean;
+};
+export declare const tagVariants: (options?: Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) => Record<"root" | "icon" | "dismissButton" | "dismissIcon", (overrides?: (Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) | undefined) => string>;
+export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Partial<Appearance> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare function Icon<T extends React.ElementType = 'div'>({ as, className, variant, disabled, ...props }: PolymorphicComponentProps<T, Partial<Appearance>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+export declare const DismissButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & Partial<Appearance> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare function DismissIcon<T extends React.ElementType = 'div'>({ as, className, variant, disabled, ...props }: PolymorphicComponentProps<T, Partial<Appearance>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DismissIcon {
+    var displayName: string;
+}
+export {};

package/dist/components/ui/tag.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { RiCloseFill } from "@remixicon/react";
+import { mergeOptions, slotRecipe } from "./magna-recipe.js";
+const appearance = React.createContext({});
+export const tagVariants = slotRecipe({ variant: 'stroke', disabled: false }, ({ variant, disabled }) => ({
+    root: [
+        'group/tag inline-flex items-center h-6 gap-2 px-2 rounded-[28px] text-label-xs ring-inset ring-1 transition duration-200 ease-out',
+        disabled
+            ? 'pointer-events-none bg-bg-weak-50 text-text-disabled-300 ring-transparent'
+            : [
+                'text-text-sub-600',
+                variant === 'stroke'
+                    ? 'bg-bg-white-0 ring-stroke-soft-200 hover:bg-bg-weak-50 hover:ring-transparent focus-within:bg-bg-weak-50 focus-within:ring-transparent'
+                    : 'bg-bg-weak-50 ring-transparent hover:bg-bg-white-0 hover:ring-stroke-soft-200',
+            ],
+    ],
+    icon: [
+        'shrink-0 size-4 -mx-1 transition duration-200 ease-out',
+        disabled
+            ? 'text-text-disabled-300 [&:not(.remixicon)]:opacity-[.48]'
+            : 'text-text-soft-400 group-hover/tag:text-text-sub-600',
+    ],
+    dismissButton: 'group/dismiss-button shrink-0 size-4 -ml-1.5 -mr-1 outline-none focus-visible:ring-2 focus-visible:ring-primary-base',
+    dismissIcon: [
+        'size-4 transition duration-200 ease-out',
+        disabled ? 'text-text-disabled-300' : 'text-text-soft-400',
+        !disabled &&
+            variant === 'stroke' &&
+            'group-hover/dismiss-button:text-text-sub-600 group-focus/dismiss-button:text-text-sub-600',
+    ],
+}));
+export const Root = React.forwardRef(function Tag({ variant, disabled, asChild, children, className, ...props }, ref) {
+    const options = { variant, disabled };
+    const Element = asChild ? Slot : 'div';
+    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, "aria-disabled": disabled, className: tagVariants(options).root({ className }), ...props, children: children }) }));
+});
+Root.displayName = 'TagRoot';
+export function Icon({ as, className, variant, disabled, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        variant,
+        disabled,
+    });
+    const Element = as || 'div';
+    return (_jsx(Element, { className: tagVariants(options).icon({ className }), ...props }));
+}
+Icon.displayName = 'TagIcon';
+export const DismissButton = React.forwardRef(function TagDismissButton({ asChild, children, className, variant, disabled, ...props }, ref) {
+    const options = mergeOptions(React.useContext(appearance), {
+        variant,
+        disabled,
+    });
+    const Element = asChild ? Slot : 'button';
+    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, type: 'button', "aria-label": 'Remove tag', disabled: options.disabled, className: tagVariants(options).dismissButton({ className }), ...props, children: children ?? _jsx(DismissIcon, { as: RiCloseFill }) }) }));
+});
+DismissButton.displayName = 'TagDismissButton';
+export function DismissIcon({ as, className, variant, disabled, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        variant,
+        disabled,
+    });
+    const Element = as || 'div';
+    return (_jsx(Element, { className: tagVariants(options).dismissIcon({ className }), ...props }));
+}
+DismissIcon.displayName = 'TagDismissIcon';

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    hasError?: boolean;
+} & ({
+    simple: true;
+    children?: never;
+    containerClassName?: never;
+} | {
+    simple?: false;
+    children?: React.ReactNode;
+    containerClassName?: string;
+});
+declare const Root: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare function CharCounter({ current, max, className, ...props }: React.HTMLAttributes<HTMLSpanElement> & {
+    current?: number;
+    max?: number;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare namespace CharCounter {
+    var displayName: string;
+}
+export { Root, CharCounter };

package/dist/components/ui/textarea.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const fieldText = 'block w-full resize-none text-paragraph-sm text-text-strong-950 outline-none placeholder:select-none placeholder:text-text-soft-400 focus:placeholder:text-text-sub-600 disabled:text-text-disabled-300 disabled:placeholder:text-text-disabled-300';
+function surface(error, simple) {
+    return cn('rounded-xl bg-bg-white-0 shadow-regular-xs ring-1 ring-inset transition-all duration-200', error ? 'ring-error-base' : 'ring-stroke-soft-200', simple
+        ? 'disabled:bg-bg-weak-50 disabled:ring-transparent hover:[&:not(:focus)]:bg-bg-weak-50'
+        : 'has-[:disabled]:pointer-events-none has-[:disabled]:bg-bg-weak-50 has-[:disabled]:ring-transparent hover:[&:not(:focus-within)]:bg-bg-weak-50', error
+        ? simple
+            ? 'focus:shadow-button-error-focus focus:ring-error-base'
+            : 'focus-within:shadow-button-error-focus focus-within:ring-error-base'
+        : simple
+            ? 'focus:shadow-button-important-focus focus:ring-stroke-strong-950 hover:[&:not(:focus)]:ring-transparent'
+            : 'focus-within:shadow-button-important-focus focus-within:ring-stroke-strong-950 hover:[&:not(:focus-within)]:ring-transparent');
+}
+const Root = React.forwardRef(function Root({ simple = false, hasError, containerClassName, className, children, ...props }, ref) {
+    const input = (_jsx("textarea", { ...props, ref: ref, className: cn(fieldText, simple
+            ? cn(surface(hasError, true), 'min-h-28 px-3 py-2.5')
+            : 'min-h-[82px] flex-1 bg-transparent pl-3 pr-2.5 pt-2.5 group-hover/textarea:placeholder:text-text-sub-600', className) }));
+    if (simple)
+        return input;
+    return (_jsxs("div", { className: cn(surface(hasError, false), 'group/textarea relative flex min-h-28 w-full resize-y flex-col gap-2 overflow-hidden pb-2.5 [&::-webkit-resizer]:opacity-0', containerClassName), children: [input, _jsxs("div", { className: 'pointer-events-none flex items-center justify-end gap-1.5 pl-3 pr-2.5', children: [children, _jsxs("span", { "aria-hidden": 'true', className: 'relative block size-3 text-text-soft-400', children: [_jsx("span", { className: 'absolute bottom-[3px] right-[1px] h-px w-2.5 origin-right -rotate-45 bg-current' }), _jsx("span", { className: 'absolute bottom-[1px] right-[1px] h-px w-[5px] origin-right -rotate-45 bg-current' })] })] })] }));
+});
+function CharCounter({ current, max, className, ...props }) {
+    if (current === undefined || max === undefined)
+        return null;
+    return (_jsxs("span", { ...props, className: cn('text-subheading-2xs text-text-soft-400 group-has-[:disabled]/textarea:text-text-disabled-300', current > max && 'text-error-base', className), children: [current, "/", max] }));
+}
+Root.displayName = 'TextareaRoot';
+CharCounter.displayName = 'TextareaCounter';
+export { Root, CharCounter };

package/dist/components/ui/time-picker.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import * as RadioGroup from "@radix-ui/react-radio-group";
+export type Availability = 'available' | 'busy' | 'in-meeting' | 'offline';
+export type CheckPosition = 'right' | 'center';
+export type StatusProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    status?: Availability;
+    selected?: boolean;
+};
+export declare const Status: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    status?: Availability;
+    selected?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type DurationProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    selected?: boolean;
+    minutes?: number;
+};
+export declare const Duration: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    selected?: boolean;
+    minutes?: number;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare const Root: React.ForwardRefExoticComponent<Omit<RadioGroup.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ItemProps = React.ComponentPropsWithoutRef<typeof RadioGroup.Item> & {
+    time?: string;
+    period?: string;
+    endTime?: string;
+    endPeriod?: string;
+    checkPosition?: CheckPosition;
+};
+export declare const Item: React.ForwardRefExoticComponent<Omit<RadioGroup.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    time?: string;
+    period?: string;
+    endTime?: string;
+    endPeriod?: string;
+    checkPosition?: CheckPosition;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/time-picker.js

@@ -0,0 +1,46 @@
+'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";
+/* eslint-disable @next/next/no-img-element -- Preserve exact Figma SVG dimensions and bytes. */
+import * as React from "react";
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import { cn } from "../../utils/cn.js";
+const focus = 'outline-none focus-visible:ring-2 focus-visible:ring-primary-base focus-visible:ring-offset-2 focus-visible:ring-offset-bg-white-0';
+const pill = 'inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-full py-1 text-label-sm transition-colors disabled:cursor-not-allowed';
+const labels = {
+    available: 'Available',
+    busy: 'Busy',
+    'in-meeting': 'In-meeting',
+    offline: 'Offline',
+};
+const selectedColors = {
+    available: 'bg-success-lighter text-success-dark',
+    busy: 'bg-error-lighter text-error-dark',
+    'in-meeting': 'bg-warning-lighter text-warning-dark',
+    offline: 'bg-faded-lighter text-faded-dark',
+};
+function Asset({ name, className }) {
+    // Figma exports retain their intrinsic 12/14/16px dimensions.
+    return (_jsx("img", { src: __resolveMagnaAsset_1(`/magna/editor/${name}.svg`), alt: '', "aria-hidden": 'true', draggable: false, className: cn('max-w-none shrink-0', className) }));
+}
+export const Status = React.forwardRef(function Status({ status = 'available', selected = false, disabled, className, children, ...props }, ref) {
+    return (_jsxs("button", { ...props, ref: ref, type: props.type ?? 'button', disabled: disabled, "aria-pressed": selected, className: cn(pill, focus, 'gap-1 pe-2.5 ps-1.5', disabled
+            ? 'bg-bg-weak-50 text-text-disabled-300'
+            : selected
+                ? selectedColors[status]
+                : 'border border-stroke-soft-200 bg-bg-white-0 text-text-sub-600 shadow-regular-xs hover:bg-bg-weak-50 hover:shadow-none', className), children: [_jsx(Asset, { name: `status-${disabled ? 'disabled' : status}` }), children ?? labels[status]] }));
+});
+export const Duration = React.forwardRef(function Duration({ selected = false, minutes = 30, disabled, children, className, ...props }, ref) {
+    return (_jsxs("button", { ...props, ref: ref, type: props.type ?? 'button', disabled: disabled, "aria-pressed": selected, className: cn(pill, focus, 'gap-1.5 px-2.5', disabled
+            ? 'bg-bg-weak-50 text-text-disabled-300'
+            : selected
+                ? 'bg-primary-alpha-10 text-primary-base'
+                : 'border border-stroke-soft-200 bg-bg-white-0 text-text-sub-600 shadow-regular-xs hover:bg-bg-weak-50 hover:shadow-none', className), children: [selected && !disabled && _jsx(Asset, { name: 'duration-check' }), children ?? `${minutes} min`] }));
+});
+export const Root = React.forwardRef(function Root({ className, orientation = 'vertical', ...props }, ref) {
+    return (_jsx(RadioGroup.Root, { ...props, ref: ref, orientation: orientation, className: cn('flex w-full max-w-[292px] flex-col gap-1', className) }));
+});
+export const Item = React.forwardRef(function Item({ time = '09:30', period = 'AM', endTime, endPeriod = period, checkPosition = 'right', className, children, ...props }, ref) {
+    const check = (_jsx(RadioGroup.Indicator, { className: 'shrink-0 group-disabled/time:hidden', children: _jsx(Asset, { name: 'time-check', className: 'dark:invert' }) }));
+    return (_jsxs(RadioGroup.Item, { ...props, ref: ref, className: cn('group/time flex h-9 w-full items-center gap-2.5 whitespace-nowrap rounded-full bg-bg-white-0 px-3 py-2 text-start text-label-sm text-text-sub-600 hover:bg-bg-weak-50 disabled:cursor-not-allowed disabled:!bg-bg-white-0 disabled:!text-text-disabled-300 data-[state=checked]:bg-bg-weak-50 data-[state=checked]:text-text-strong-950', focus, className), children: [_jsx("span", { className: 'flex min-w-0 flex-1 items-center gap-[3px]', children: children ?? (_jsxs(_Fragment, { children: [_jsx("span", { children: time }), _jsx("span", { className: 'text-text-soft-400 group-disabled/time:text-text-disabled-300', children: period })] })) }), checkPosition === 'center' && check, endTime && (_jsxs("span", { className: 'flex min-w-0 flex-1 items-center justify-end gap-[3px]', children: [_jsx("span", { children: endTime }), _jsx("span", { className: 'text-text-soft-400 group-disabled/time:text-text-disabled-300', children: endPeriod })] })), checkPosition === 'right' && check] }));
+});