magnaui 0.1.0

package/dist/components/ui/select.js

@@ -0,0 +1,129 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-select";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { Slottable } from "@radix-ui/react-slot";
+import { RiArrowDownSLine, RiCheckLine } from "@remixicon/react";
+import { tv } from "../../utils/tv.js";
+import { cn } from "../../utils/cn.js";
+export const selectVariants = tv({
+    slots: {
+        triggerRoot: 'group/trigger flex min-w-0 shrink-0 items-center bg-bg-white-0 text-left text-paragraph-sm text-text-strong-950 shadow-regular-xs outline-none ring-1 ring-inset ring-stroke-soft-200 transition-all duration-200 hover:bg-bg-weak-50 hover:ring-transparent focus:text-text-strong-950 focus:shadow-button-important-focus focus:ring-stroke-strong-950 disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:shadow-none disabled:ring-transparent data-[placeholder]:text-text-sub-600 data-[placeholder]:focus:text-text-strong-950 data-[placeholder]:disabled:text-text-disabled-300',
+        triggerArrow: 'ml-auto size-5 shrink-0 text-text-sub-600 transition-all duration-200 group-hover/trigger:text-text-sub-600 group-focus/trigger:text-text-strong-950 group-disabled/trigger:text-text-disabled-300 group-data-[state=open]/trigger:rotate-180 group-data-[placeholder]/trigger:text-text-soft-400',
+        triggerIcon: 'h-5 w-auto min-w-0 shrink-0 object-contain text-text-sub-600 transition-colors group-hover/trigger:text-text-sub-600 group-disabled/trigger:text-text-disabled-300 group-data-[placeholder]/trigger:text-text-soft-400 group-disabled/trigger:[&:not(.remixicon)]:opacity-[.48]',
+        selectItemIcon: 'size-5 shrink-0 bg-[length:1.25rem] text-text-sub-600 [[data-disabled]_&:not(.remixicon)]:opacity-[.48] [[data-disabled]_&]:text-text-disabled-300',
+    },
+    variants: {
+        size: { medium: {}, small: {}, xsmall: {} },
+        hasError: {
+            true: {
+                triggerRoot: 'ring-error-base focus:shadow-button-error-focus focus:ring-error-base',
+            },
+        },
+        variant: {
+            default: { triggerRoot: 'w-full rounded-full' },
+            compact: {
+                triggerRoot: 'w-auto rounded-full',
+                triggerIcon: '-ml-0.5',
+                selectItemIcon: 'group-has-[&]/trigger:-ml-0.5',
+            },
+            compactForInput: {
+                triggerRoot: 'w-auto rounded-none shadow-none ring-0 focus:bg-bg-weak-50 focus:shadow-none focus:ring-0',
+                triggerArrow: 'ml-0.5',
+            },
+            inline: {
+                triggerRoot: 'h-5 min-h-5 w-auto gap-0 rounded-none bg-transparent p-0 text-text-sub-600 shadow-none ring-0 hover:bg-transparent hover:text-text-strong-950 focus:shadow-none data-[state=open]:text-text-strong-950',
+                triggerIcon: 'mr-1.5 text-text-soft-400 group-hover/trigger:text-text-sub-600 group-data-[state=open]/trigger:text-text-sub-600',
+                triggerArrow: 'ml-0.5 group-hover/trigger:text-text-strong-950 group-data-[state=open]/trigger:text-text-strong-950',
+                selectItemIcon: 'text-text-soft-400',
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            size: 'medium',
+            variant: 'default',
+            class: { triggerRoot: 'h-10 min-h-10 gap-2 pl-3 pr-2.5' },
+        },
+        {
+            size: 'small',
+            variant: 'default',
+            class: { triggerRoot: 'h-9 min-h-9 gap-2 pl-2.5 pr-2' },
+        },
+        {
+            size: 'xsmall',
+            variant: 'default',
+            class: { triggerRoot: 'h-8 min-h-8 gap-1.5 pl-2 pr-1.5' },
+        },
+        {
+            size: 'medium',
+            variant: 'compact',
+            class: { triggerRoot: 'h-10 gap-1 pl-3 pr-2.5' },
+        },
+        {
+            size: 'small',
+            variant: 'compact',
+            class: { triggerRoot: 'h-9 gap-1 pl-3 pr-2' },
+        },
+        {
+            size: 'xsmall',
+            variant: 'compact',
+            class: {
+                triggerRoot: 'h-8 gap-0.5 pl-2.5 pr-1.5',
+                triggerIcon: 'size-4',
+                selectItemIcon: 'size-4 bg-[length:1rem]',
+            },
+        },
+        {
+            size: 'medium',
+            variant: 'compactForInput',
+            class: { triggerRoot: 'pl-2.5 pr-2', triggerIcon: 'mr-2' },
+        },
+        {
+            size: 'small',
+            variant: 'compactForInput',
+            class: { triggerRoot: 'px-2', triggerIcon: 'mr-2' },
+        },
+        {
+            size: 'xsmall',
+            variant: 'compactForInput',
+            class: {
+                triggerRoot: 'pl-2 pr-1.5',
+                triggerIcon: 'mr-1.5 size-4',
+                selectItemIcon: 'size-4 bg-[length:1rem]',
+            },
+        },
+    ],
+    defaultVariants: { variant: 'default', size: 'medium' },
+});
+const AppearanceContext = React.createContext({});
+function Root({ size, variant, hasError, children, ...props }) {
+    return (_jsx(AppearanceContext.Provider, { value: { size, variant, hasError }, children: _jsx(Primitive.Root, { ...props, children: children }) }));
+}
+const Trigger = React.forwardRef(function Trigger({ className, children, ...props }, ref) {
+    const styles = selectVariants(React.useContext(AppearanceContext));
+    return (_jsxs(Primitive.Trigger, { ...props, ref: ref, className: styles.triggerRoot({ className }), children: [_jsx(Slottable, { children: children }), _jsx(Primitive.Icon, { asChild: true, children: _jsx(RiArrowDownSLine, { className: styles.triggerArrow() }) })] }));
+});
+function TriggerIcon({ as, className, ...props }) {
+    const Tag = as || 'div';
+    return (_jsx(Tag, { ...props, className: selectVariants(React.useContext(AppearanceContext)).triggerIcon({ className }) }));
+}
+function ItemIcon({ as, className, ...props }) {
+    const Tag = as || 'div';
+    return (_jsx(Tag, { ...props, className: selectVariants(React.useContext(AppearanceContext)).selectItemIcon({ className }) }));
+}
+const Content = React.forwardRef(function Content({ children, className, position = 'popper', sideOffset = 8, collisionPadding = 8, ...props }, ref) {
+    return (_jsx(Primitive.Portal, { children: _jsx(Primitive.Content, { ...props, ref: ref, position: position, sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn('relative z-50 max-h-[--radix-select-content-available-height] min-w-[--radix-select-trigger-width] max-w-[max(var(--radix-select-trigger-width),320px)] overflow-hidden rounded-2xl bg-bg-white-0 shadow-regular-md ring-1 ring-inset ring-stroke-soft-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2', className), children: _jsxs(ScrollArea.Root, { type: 'auto', children: [_jsx(Primitive.Viewport, { asChild: true, children: _jsx(ScrollArea.Viewport, { className: 'max-h-[196px] w-full scroll-py-2 overflow-auto p-2', style: { overflowY: undefined }, children: children }) }), _jsx(ScrollArea.Scrollbar, { orientation: 'vertical', children: _jsx(ScrollArea.Thumb, { className: '!w-1 rounded bg-bg-soft-200' }) })] }) }) }));
+});
+const Item = React.forwardRef(function Item({ className, children, ...props }, ref) {
+    const small = React.useContext(AppearanceContext).size === 'xsmall';
+    return (_jsxs(Primitive.Item, { ...props, ref: ref, className: cn('group relative flex cursor-pointer select-none items-center rounded-lg p-2 text-paragraph-sm text-text-strong-950 transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-bg-weak-50 data-[disabled]:text-text-disabled-300 data-[highlighted]:outline-none', small ? 'gap-1.5 pr-[34px]' : 'gap-2 pr-9', className), children: [_jsx(Primitive.ItemText, { asChild: true, children: _jsx("span", { className: cn('flex flex-1 items-center', small ? 'gap-1.5' : 'gap-2'), children: typeof children === 'string' ? (_jsx("span", { className: 'line-clamp-1', children: children })) : (children) }) }), _jsx(Primitive.ItemIndicator, { className: 'absolute right-2 top-1/2 -translate-y-1/2', children: _jsx(RiCheckLine, { className: 'size-5 text-text-sub-600' }) })] }));
+});
+Root.displayName = 'SelectRoot';
+Trigger.displayName = 'SelectTrigger';
+TriggerIcon.displayName = 'SelectTriggerIcon';
+Content.displayName = 'SelectContent';
+Item.displayName = 'SelectItem';
+const { Group, Label: GroupLabel, Separator, Value } = Primitive;
+export { Root, Trigger, TriggerIcon, Content, Item, ItemIcon, Group, GroupLabel, Separator, Value, };

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-slider";
+declare const Root: React.ForwardRefExoticComponent<Omit<Primitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const Thumb: React.ForwardRefExoticComponent<Omit<Primitive.SliderThumbProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Root, Thumb };

package/dist/components/ui/slider.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slottable } from "@radix-ui/react-slot";
+import * as Primitive from "@radix-ui/react-slider";
+import { cn } from "../../utils/cn.js";
+const Root = React.forwardRef(function Root({ children, className, orientation = 'horizontal', ...props }, ref) {
+    const vertical = orientation === 'vertical';
+    return (_jsxs(Primitive.Root, { ...props, orientation: orientation, ref: ref, className: cn('relative flex touch-none select-none items-center', vertical ? 'h-full w-4 flex-col' : 'h-4 w-full', className), children: [_jsx(Primitive.Track, { className: cn('relative overflow-hidden rounded-full bg-bg-soft-200', vertical ? 'h-full w-1.5' : 'h-1.5 w-full'), children: _jsx(Primitive.Range, { className: cn('absolute bg-primary-base', vertical ? 'w-full' : 'h-full') }) }), _jsx(Slottable, { children: children })] }));
+});
+const Thumb = React.forwardRef(function Thumb({ className, ...props }, ref) {
+    return (_jsx(Primitive.Thumb, { ...props, ref: ref, className: cn('box-content block size-1.5 shrink-0 cursor-pointer rounded-full border-[5px] border-static-white bg-primary-base shadow-toggle-switch outline-none focus-visible:ring-2 focus-visible:ring-primary-alpha-24 data-[disabled]:cursor-default', className) }));
+});
+Root.displayName = 'SliderRoot';
+Thumb.displayName = 'SliderThumb';
+export { Root, Thumb };

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type Brand = 'apple' | 'twitter' | 'google' | 'facebook' | 'linkedin' | 'github' | 'dropbox';
+type Appearance = {
+    brand?: Brand;
+    mode: 'filled' | 'stroke';
+};
+export declare const socialButtonVariants: (options?: Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) => Record<"root" | "icon", (overrides?: (Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) | undefined) => string>;
+export declare const Root: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & Partial<Appearance> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare function Icon<T extends React.ElementType = 'div'>({ as, className, brand, mode, ...props }: PolymorphicComponentProps<T, Partial<Appearance>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { mergeOptions, slotRecipe } from "./magna-recipe.js";
+const appearance = React.createContext({});
+const filled = {
+    apple: 'bg-static-black before:bg-white-alpha-16',
+    twitter: 'bg-static-black before:bg-white-alpha-16',
+    google: 'bg-[#f14336] before:bg-static-black/[.16]',
+    facebook: 'bg-[#1977f3] before:bg-static-black/[.16]',
+    linkedin: 'bg-[#0077b5] before:bg-static-black/[.16]',
+    github: 'bg-[#24292f] before:bg-white-alpha-16',
+    dropbox: 'bg-[#3984ff] before:bg-static-black/[.16]',
+};
+export const socialButtonVariants = slotRecipe({ mode: 'filled' }, ({ brand, mode }) => ({
+    root: [
+        'relative inline-flex h-10 items-center justify-center gap-3.5 rounded-full px-4 whitespace-nowrap text-label-sm outline-none transition duration-200 ease-out focus-visible:shadow-button-important-focus',
+        mode === 'filled'
+            ? [
+                'text-static-white before:pointer-events-none before:absolute before:inset-0 before:rounded-full before:opacity-0 before:transition-opacity before:duration-200 before:ease-out hover:before:opacity-100',
+                brand && filled[brand],
+            ]
+            : [
+                'bg-bg-white-0 text-text-strong-950 shadow-regular-xs ring-inset ring-1 ring-stroke-soft-200 hover:bg-bg-weak-50 hover:shadow-none hover:ring-transparent focus-visible:ring-stroke-strong-950',
+                brand === 'apple' && 'text-social-apple',
+                brand === 'twitter' && 'text-social-twitter',
+                brand === 'github' && 'text-social-github',
+            ],
+    ],
+    icon: 'relative z-10 shrink-0 -mx-1.5 size-5',
+}));
+export const Root = React.forwardRef(function SocialButton({ brand, mode, asChild, className, children, ...props }, ref) {
+    const options = { brand, mode };
+    const Element = asChild ? Slot : 'button';
+    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, className: socialButtonVariants(options).root({ className }), ...props, children: children }) }));
+});
+Root.displayName = 'SocialButtonRoot';
+export function Icon({ as, className, brand, mode, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        brand,
+        mode,
+    });
+    const Element = as || 'div';
+    return (_jsx(Element, { className: socialButtonVariants(options).icon({ className }), ...props }));
+}
+Icon.displayName = 'SocialButtonIcon';

package/dist/components/ui/status-badge.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type Appearance = {
+    variant: 'stroke' | 'light';
+    status: 'completed' | 'pending' | 'failed' | 'disabled';
+};
+export declare const statusBadgeVariants: (options?: Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) => Record<"root" | "icon" | "dot", (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, status, ...props }: PolymorphicComponentProps<T, Partial<Appearance>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+export declare function Dot({ className, variant, status, ...props }: React.HTMLAttributes<HTMLDivElement> & Partial<Appearance>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dot {
+    var displayName: string;
+}
+export {};

package/dist/components/ui/status-badge.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { mergeOptions, slotRecipe, toneClasses } from "./magna-recipe.js";
+const appearance = React.createContext({});
+const tones = {
+    completed: toneClasses.green,
+    pending: toneClasses.orange,
+    failed: toneClasses.red,
+    disabled: toneClasses.gray,
+};
+export const statusBadgeVariants = slotRecipe({ variant: 'stroke', status: 'disabled' }, ({ variant, status }) => ({
+    root: [
+        'inline-flex h-6 gap-2 items-center justify-center rounded-full px-2 text-label-xs whitespace-nowrap has-[>.dot]:gap-1.5',
+        variant === 'stroke'
+            ? 'bg-bg-white-0 text-text-sub-600 ring-1 ring-inset ring-stroke-soft-200'
+            : [
+                tones[status].pale,
+                status === 'disabled' ? 'text-text-sub-600' : tones[status].ink,
+            ],
+    ],
+    icon: ['size-4 -mx-1', tones[status].ink],
+    dot: [
+        'dot grid size-4 -mx-1 place-items-center before:block before:size-1.5 before:rounded-full before:bg-current',
+        tones[status].ink,
+    ],
+}));
+export const Root = React.forwardRef(function StatusBadge({ variant, status, asChild, children, className, ...props }, ref) {
+    const options = { variant, status };
+    const Element = asChild ? Slot : 'div';
+    return (_jsx(appearance.Provider, { value: options, children: _jsx(Element, { ref: ref, className: statusBadgeVariants(options).root({ className }), ...props, children: children }) }));
+});
+Root.displayName = 'StatusBadgeRoot';
+export function Icon({ as, className, variant, status, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        variant,
+        status,
+    });
+    const Element = as || 'div';
+    return (_jsx(Element, { className: statusBadgeVariants(options).icon({ className }), ...props }));
+}
+Icon.displayName = 'StatusBadgeIcon';
+export function Dot({ className, variant, status, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        variant,
+        status,
+    });
+    return (_jsx("div", { className: statusBadgeVariants(options).dot({ className }), ...props }));
+}
+Dot.displayName = 'StatusBadgeDot';

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as Modal from "./modal.js";
+import { statusModalAssets } from "./display-assets.js";
+export declare const Root: React.FC<import("@radix-ui/react-dialog").DialogProps>;
+export declare const Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Close: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export type StatusModalStatus = keyof typeof statusModalAssets;
+export type StatusModalProps = Omit<React.ComponentPropsWithoutRef<typeof Modal.Content>, 'title'> & {
+    status?: StatusModalStatus;
+    alignment?: 'horizontal' | 'vertical';
+    title: React.ReactNode;
+    description: React.ReactNode;
+    icon?: React.ReactNode;
+    footer?: React.ReactNode;
+};
+export declare const Content: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    overlayClassName?: string;
+    showClose?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref">, "title"> & {
+    status?: StatusModalStatus;
+    alignment?: "horizontal" | "vertical";
+    title: React.ReactNode;
+    description: React.ReactNode;
+    icon?: React.ReactNode;
+    footer?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/status-modal.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import * as Modal from "./modal.js";
+import { DisplayAsset } from "./display-asset.js";
+import { statusModalAssets } from "./display-assets.js";
+export const Root = Modal.Root;
+export const Trigger = Modal.Trigger;
+export const Close = Modal.Close;
+const backgrounds = {
+    error: 'bg-error-lighter',
+    warning: 'bg-warning-lighter',
+    success: 'bg-success-lighter',
+    information: 'bg-information-lighter',
+};
+export const Content = React.forwardRef(function StatusModalContent({ status = 'information', alignment = 'horizontal', title, description, icon, footer, children, className, showClose = false, ...props }, ref) {
+    return (_jsxs(Modal.Content, { ref: ref, ...props, showClose: showClose, className: cn('max-w-[440px] overflow-hidden ring-1 ring-inset ring-stroke-soft-200', className), children: [_jsxs("div", { className: cn('flex gap-4 p-5', alignment === 'vertical'
+                    ? 'flex-col items-center text-center'
+                    : 'items-start'), children: [_jsx("span", { "aria-hidden": 'true', className: cn('flex size-10 shrink-0 items-center justify-center rounded-[10px]', backgrounds[status]), children: icon ?? _jsx(DisplayAsset, { src: statusModalAssets[status] }) }), _jsxs("div", { className: 'min-w-0 space-y-1', children: [_jsx(Modal.Title, { className: 'text-label-md', children: title }), _jsx(Modal.Description, { className: 'text-paragraph-sm', children: description }), children] })] }), footer && _jsx(Modal.Footer, { className: 'flex-wrap', children: footer })] }));
+});

package/dist/components/ui/svg-rating-icons.d.ts

@@ -0,0 +1,11 @@
+/** ======== STAR ======== */
+export declare function SVGStarFill(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SVGStarHalf(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SVGStarLine(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare function StarRating({ rating }: {
+    rating: number;
+}): import("react/jsx-runtime").JSX.Element;
+/** ======== HEART ======== */
+export declare function SVGHeartFill(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SVGHeartHalf(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SVGHeartLine(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/svg-rating-icons.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** ======== STAR ======== */
+export function SVGStarFill(props) {
+    return (_jsx("svg", { viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', ...props, children: _jsx("path", { d: 'M18.75 7.69221L12.5925 6.95272L9.99671 1.25L7.40096 6.95272L1.25 7.69221L5.7975 11.9626L4.59491 18.125L9.99671 15.0538L15.4051 18.125L14.2025 11.9626L18.75 7.69221Z', fill: 'currentColor' }) }));
+}
+export function SVGStarHalf(props) {
+    return (_jsx("svg", { viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', ...props, children: _jsx("path", { d: 'M18.75 7.69476L12.5925 6.95497L9.99671 1.25L7.40096 6.95497L1.25 7.69476L5.7975 11.9602L4.58834 18.125L9.99671 15.0526L15.4051 18.125L14.1959 11.9602L18.7434 7.69476H18.75ZM10.0033 13.533V4.43572L11.7119 8.19461L15.7665 8.68113L12.7699 11.4936L13.5651 15.5524L10.0033 13.533Z', fill: 'currentColor' }) }));
+}
+export function SVGStarLine(props) {
+    return (_jsx("svg", { viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', ...props, children: _jsx("path", { d: 'M15.4117 18.125L10.0033 15.0526L4.59491 18.125L5.80407 11.9602L1.25 7.69476L7.40096 6.95498L9.99671 1.25L12.5925 6.95498L18.75 7.69476L14.2025 11.9602L15.4117 18.125ZM10.0033 13.5264L13.5651 15.5458L12.7699 11.487L15.7665 8.67447L11.7119 8.18794L10.0033 4.42906L8.29469 8.18794L4.24005 8.67447L7.23667 11.487L6.44151 15.5458L10.0033 13.5264Z', fill: 'currentColor' }) }));
+}
+export function StarRating({ rating }) {
+    const getStarIcon = (i) => {
+        if (rating >= i + 1) {
+            return _jsx(SVGStarFill, { className: 'size-5 text-yellow-500' }, i);
+        }
+        else if (rating >= i + 0.5) {
+            return _jsx(SVGStarHalf, { className: 'size-5 text-yellow-500' }, i);
+        }
+        return _jsx(SVGStarLine, { className: 'size-5 text-stroke-sub-300' }, i);
+    };
+    return (_jsx("div", { className: 'flex gap-0.5', children: Array.from({ length: 5 }, (_, i) => getStarIcon(i)) }));
+}
+/** ======== HEART ======== */
+export function SVGHeartFill(props) {
+    return (_jsx("svg", { viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', ...props, children: _jsx("path", { d: 'M13.375 3.125C15.6535 3.125 17.5 4.98311 17.5 7.58446C17.5 12.7872 11.875 15.7601 10 16.875C8.125 15.7601 2.5 12.7872 2.5 7.58446C2.5 4.98311 4.375 3.125 6.625 3.125C8.02 3.125 9.25 3.86824 10 4.61149C10.75 3.86824 11.98 3.125 13.375 3.125Z', fill: 'currentColor' }) }));
+}
+export function SVGHeartHalf(props) {
+    return (_jsx("svg", { viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', ...props, children: _jsx("path", { d: 'M13.375 3.125C12.2 3.125 10.9438 3.68226 10.0063 4.61521C9.06875 3.68226 7.8 3.125 6.625 3.125C4.3125 3.125 2.5 5.08481 2.5 7.59563C2.5 9.81216 3.525 11.8909 5.55 13.7881C7 15.1469 8.5875 16.0798 9.6875 16.7185L10.0437 16.875L10.3562 16.6934C11.3438 16.1174 13 15.1469 14.45 13.7881C16.475 11.8972 17.5 9.81216 17.5 7.59563C17.5 5.04724 15.725 3.125 13.375 3.125ZM13.6 12.8677C12.4 13.9948 11.0312 14.815 10.0063 15.4224C10.0438 13.688 10.0312 8.6538 10.0063 6.36214L10.8813 5.50433C11.15 5.24135 12.1125 4.37728 13.375 4.37728C15.0125 4.37728 16.25 5.76104 16.25 7.59563C16.25 9.43021 15.3562 11.221 13.6 12.8677Z', fill: 'currentColor' }) }));
+}
+export function SVGHeartLine(props) {
+    return (_jsx("svg", { viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', ...props, children: _jsx("path", { d: 'M10.0437 16.875L9.6875 16.7185C8.5875 16.0735 7 15.1406 5.55 13.7881C3.525 11.8909 2.5 9.8059 2.5 7.59563C2.5 5.08481 4.3125 3.125 6.625 3.125C7.8 3.125 9.0625 3.68226 10 4.61521C10.9375 3.68226 12.2 3.125 13.375 3.125C15.725 3.125 17.5 5.04724 17.5 7.59563C17.5 9.81216 16.475 11.8909 14.45 13.7881C13 15.1469 11.3438 16.1174 10.3562 16.6934L10.0437 16.875ZM6.625 4.37728C4.9875 4.37728 3.75 5.76104 3.75 7.59563C3.75 9.43021 4.64375 11.221 6.4 12.8677C7.63125 14.0198 9.00625 14.8651 10 15.4474C11.0312 14.8401 12.3813 14.0073 13.6 12.8677C15.3562 11.221 16.25 9.449 16.25 7.59563C16.25 5.74226 15.0125 4.37728 13.375 4.37728C12.1125 4.37728 11.1438 5.24135 10.8813 5.50433L10 6.37466L9.11875 5.50433C8.85 5.24135 7.8875 4.37728 6.625 4.37728Z', fill: 'currentColor' }) }));
+}

package/dist/components/ui/switch-compositions.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { type SwitchProps } from "./switch.js";
+type ContentProps = {
+    label: React.ReactNode;
+    sublabel?: React.ReactNode;
+    description?: React.ReactNode;
+    badge?: React.ReactNode;
+};
+export type SwitchLabelProps = Omit<SwitchProps, 'children' | 'asChild'> & ContentProps & {
+    flip?: boolean;
+    action?: React.ReactNode;
+    switchClassName?: string;
+};
+export type SwitchCardProps = Omit<SwitchLabelProps, 'flip' | 'action'> & {
+    variant?: 'basic' | 'icon' | 'avatar' | 'card-provider' | 'brand' | 'company';
+    /** Supply an icon, avatar, payment-provider mark, brand, or company logo. */
+    leading?: React.ReactNode;
+};
+export type IntegrationSwitchProps = Omit<SwitchLabelProps, 'flip'> & {
+    orientation?: 'horizontal' | 'vertical';
+    appearance?: 'card' | 'list';
+    /** Brand mark. Card and list slots are 24 and 32 px respectively. */
+    leading?: React.ReactNode;
+    showSwitch?: boolean;
+};
+/** Figma Switch Label: 8 px control gap, optional supporting copy and action. */
+export declare const Label: React.ForwardRefExoticComponent<Omit<SwitchProps, "children" | "asChild"> & ContentProps & {
+    flip?: boolean;
+    action?: React.ReactNode;
+    switchClassName?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+/** Figma Switch Card: 12 px corners, 16 px inset, 14 px leading-content gap. */
+export declare const Card: React.ForwardRefExoticComponent<Omit<SwitchLabelProps, "action" | "flip"> & {
+    variant?: "basic" | "icon" | "avatar" | "card-provider" | "brand" | "company";
+    /** Supply an icon, avatar, payment-provider mark, brand, or company logo. */
+    leading?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+/** Integration composition: horizontal/vertical, card/list, optional brand/action/control. */
+export declare const Integration: React.ForwardRefExoticComponent<Omit<SwitchLabelProps, "flip"> & {
+    orientation?: "horizontal" | "vertical";
+    appearance?: "card" | "list";
+    /** Brand mark. Card and list slots are 24 and 32 px respectively. */
+    leading?: React.ReactNode;
+    showSwitch?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/ui/switch-compositions.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import * as FieldLabel from "./label.js";
+import { Root } from "./switch.js";
+function TextContent({ label, sublabel, description, badge, id, disabled, card, large, showSwitch = true, fullWidth, className, }) {
+    return (_jsxs("div", { className: cn('min-w-0 flex-1 space-y-1', fullWidth && 'w-full', className), children: [_jsxs("div", { className: 'flex min-h-5 flex-wrap items-center gap-1', children: [_jsx(FieldLabel.Root, { asChild: !showSwitch, id: `${id}-label`, htmlFor: showSwitch ? id : undefined, className: cn('min-w-0 text-start', large
+                            ? 'text-label-md'
+                            : description
+                                ? 'text-label-sm'
+                                : 'text-paragraph-sm', disabled ? 'text-text-sub-600' : 'text-text-strong-950', card && 'after:absolute after:inset-0 after:rounded-xl', disabled && 'cursor-not-allowed', !showSwitch && 'cursor-default'), children: _jsx("span", { children: label }) }), sublabel && (_jsx("span", { className: cn('text-paragraph-xs', disabled ? 'text-text-soft-400' : 'text-text-sub-600'), children: sublabel })), badge] }), description && (_jsx("p", { id: `${id}-description`, className: cn(large ? 'text-paragraph-sm' : 'text-paragraph-xs', disabled ? 'text-text-soft-400' : 'text-text-sub-600'), children: description }))] }));
+}
+const descriptionIds = (id, description, additional) => [description ? `${id}-description` : undefined, additional]
+    .filter(Boolean)
+    .join(' ') || undefined;
+/** Figma Switch Label: 8 px control gap, optional supporting copy and action. */
+export const Label = React.forwardRef(function SwitchLabel({ id: providedId, label, sublabel, description, badge, flip = false, action, disabled, dir, className, switchClassName, ...props }, ref) {
+    const generatedId = React.useId();
+    const id = providedId ?? generatedId;
+    return (_jsxs("div", { dir: dir, className: cn('flex w-[300px] max-w-full items-start gap-2', flip && 'flex-row-reverse', className), children: [_jsx(Root, { ...props, ref: ref, id: id, disabled: disabled, dir: dir, "aria-labelledby": props['aria-labelledby'] ?? `${id}-label`, "aria-describedby": descriptionIds(id, description, props['aria-describedby']), className: switchClassName }), _jsxs("div", { className: 'min-w-0 flex-1 space-y-2.5', children: [_jsx(TextContent, { id, label, sublabel, description, badge, disabled }), action] })] }));
+});
+Label.displayName = 'SwitchLabel';
+/** Figma Switch Card: 12 px corners, 16 px inset, 14 px leading-content gap. */
+export const Card = React.forwardRef(function SwitchCard({ id: providedId, label, sublabel, description, badge, leading, variant = 'basic', disabled, dir, className, switchClassName, state = 'default', ...props }, ref) {
+    const generatedId = React.useId();
+    const id = providedId ?? generatedId;
+    return (_jsxs("div", { dir: dir, "data-disabled": disabled || undefined, "data-visual-state": state, className: cn('group/switch-card relative flex w-[360px] max-w-full items-start gap-3.5 rounded-xl bg-bg-white-0 p-4 ring-1 ring-inset ring-stroke-soft-200 transition-colors motion-reduce:transition-none', disabled
+            ? 'cursor-not-allowed'
+            : 'shadow-regular-xs hover:bg-bg-weak-50 hover:shadow-none hover:ring-transparent has-[[data-state=checked]]:!bg-bg-white-0 has-[[data-state=checked]]:!shadow-none has-[[data-state=checked]]:!ring-primary-base data-[visual-state=hover]:bg-bg-weak-50 data-[visual-state=hover]:shadow-none data-[visual-state=hover]:ring-transparent', className), children: [variant !== 'basic' && leading && (_jsx("div", { className: cn('pointer-events-none flex shrink-0 items-center justify-center', (variant === 'icon' ||
+                    variant === 'avatar' ||
+                    variant === 'company') &&
+                    'size-10 rounded-full', variant === 'icon' &&
+                    'bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200 [&>svg]:size-5', variant === 'avatar' && 'overflow-hidden', variant === 'card-provider' && 'h-6 w-8', variant === 'brand' && 'size-8', variant === 'company' && 'bg-bg-white-0'), children: leading })), _jsx(TextContent, { id, label, sublabel, description, badge, disabled, card: true }), _jsx(Root, { ...props, ref: ref, id: id, disabled: disabled, dir: dir, state: state, "aria-labelledby": props['aria-labelledby'] ?? `${id}-label`, "aria-describedby": descriptionIds(id, description, props['aria-describedby']), className: cn('relative z-[1]', switchClassName) })] }));
+});
+Card.displayName = 'SwitchCard';
+/** Integration composition: horizontal/vertical, card/list, optional brand/action/control. */
+export const Integration = React.forwardRef(function IntegrationSwitch({ id: providedId, label, sublabel, description, badge, leading, action, orientation = 'horizontal', appearance = 'card', showSwitch = true, disabled, dir, className, switchClassName, ...props }, ref) {
+    const generatedId = React.useId();
+    const id = providedId ?? generatedId;
+    const vertical = orientation === 'vertical';
+    const card = appearance === 'card';
+    return (_jsxs("div", { dir: dir, className: cn('relative flex max-w-full gap-3.5', vertical
+            ? 'w-[378px] flex-col items-start'
+            : 'w-[613px] flex-wrap items-center', card &&
+            'rounded-xl bg-bg-white-0 p-4 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200', className), children: [(leading || (vertical && showSwitch)) && (_jsx("div", { className: cn('shrink-0', card ? 'size-10' : 'size-12'), children: leading && (_jsx("div", { className: 'flex size-full items-center justify-center rounded-full bg-bg-white-0 p-2 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200', children: leading })) })), _jsx(TextContent, { id, label, sublabel, description, badge, disabled, showSwitch, large: !card, fullWidth: vertical, className: !vertical ? 'min-w-[min(100%,10rem)]' : undefined }), action && (_jsx("div", { className: cn('shrink-0', vertical && 'w-full [&>*]:w-full'), children: action })), showSwitch && (_jsx(Root, { ...props, ref: ref, id: id, disabled: disabled, dir: dir, "aria-labelledby": props['aria-labelledby'] ?? `${id}-label`, "aria-describedby": descriptionIds(id, description, props['aria-describedby']), className: cn(!vertical && 'ms-auto', vertical &&
+                    (card
+                        ? 'absolute end-[19px] top-[19px]'
+                        : 'absolute end-3 top-3'), switchClassName) }))] }));
+});
+Integration.displayName = 'IntegrationSwitch';

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-switch";
+export type SwitchProps = React.ComponentPropsWithoutRef<typeof Primitive.Root> & {
+    /** Optional design-state preview; normal pointer and keyboard states still work. */
+    state?: 'default' | 'hover' | 'pressed';
+};
+/** Figma Switch [1.1]: 38 × 20 control, 34 × 16 track, 18 × 14 thumb. */
+declare const Root: React.ForwardRefExoticComponent<Omit<Primitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    /** Optional design-state preview; normal pointer and keyboard states still work. */
+    state?: "default" | "hover" | "pressed";
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Root };
+export { Label, Card, Integration } from "./switch-compositions.js";
+export type { SwitchLabelProps, SwitchCardProps, IntegrationSwitchProps, } from "./switch-compositions.js";

package/dist/components/ui/switch.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slottable } from "@radix-ui/react-slot";
+import * as Primitive from "@radix-ui/react-switch";
+import { cn } from "../../utils/cn.js";
+/** Figma Switch [1.1]: 38 × 20 control, 34 × 16 track, 18 × 14 thumb. */
+const Root = React.forwardRef(function Root({ disabled, state = 'default', className, children, ...props }, ref) {
+    return (_jsxs(Primitive.Root, { ...props, disabled: disabled, "data-visual-state": state, ref: ref, className: cn('group/switch relative block h-5 w-[38px] shrink-0 rounded-full p-0 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-base disabled:cursor-not-allowed', className), children: [_jsx("span", { "aria-hidden": 'true', className: cn('pointer-events-none absolute inset-x-0.5 top-0.5 block h-4 rounded-full transition-colors duration-200 motion-reduce:transition-none', disabled
+                    ? 'bg-bg-white-0 ring-1 ring-inset ring-stroke-soft-200'
+                    : 'bg-bg-soft-200 group-hover/switch-card:bg-bg-sub-300 group-hover/switch:bg-bg-sub-300 group-active/switch:!bg-bg-soft-200 group-data-[state=checked]/switch:bg-primary-base group-data-[state=checked]/switch:group-data-[visual-state=hover]/switch:bg-[--primary-dark] group-data-[state=checked]/switch:group-data-[visual-state=pressed]/switch:!bg-primary-base group-data-[visual-state=hover]/switch:bg-bg-sub-300 group-data-[visual-state=pressed]/switch:!bg-bg-soft-200 group-data-[state=checked]/switch:group-hover/switch-card:bg-[--primary-dark] group-data-[state=checked]/switch:group-hover/switch:bg-[--primary-dark] group-data-[state=checked]/switch:group-active/switch:!bg-primary-base') }), _jsx(Primitive.Thumb, { className: cn('pointer-events-none absolute start-[3px] top-[3px] block h-[14px] w-[18px] rounded-full transition-transform duration-200 data-[state=checked]:translate-x-[14px] motion-reduce:transition-none rtl:data-[state=checked]:-translate-x-[14px]', disabled
+                    ? 'border border-static-white bg-bg-soft-200'
+                    : 'bg-static-white shadow-switch-thumb') }), _jsx(Slottable, { children: children })] }));
+});
+Root.displayName = 'Switch';
+export { Root };
+export { Label, Card, Integration } from "./switch-compositions.js";

package/dist/components/ui/tab-menu-horizontal.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import * as Tabs from "@radix-ui/react-tabs";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+export declare const Content: React.ForwardRefExoticComponent<Tabs.TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<Tabs.TabsProps & React.RefAttributes<HTMLDivElement>, "ref">, "orientation"> & React.RefAttributes<HTMLDivElement>>;
+export declare const List: React.ForwardRefExoticComponent<Omit<Tabs.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    wrapperClassName?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Trigger: React.ForwardRefExoticComponent<Omit<Tabs.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function Icon<T extends React.ElementType = 'div'>({ as, className, ...props }: PolymorphicComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowIcon<T extends React.ElementType = 'div'>({ as, className, ...props }: PolymorphicComponentProps<T, React.HTMLAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,49 @@
+'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 Content = Tabs.Content;
+export const Root = React.forwardRef(function Root({ className, ...props }, ref) {
+    return (_jsx(Tabs.Root, { ...props, ref: ref, orientation: 'horizontal', className: cn('w-full', className) }));
+});
+export const List = React.forwardRef(function List({ children, className, wrapperClassName, ...props }, ref) {
+    const scroll = React.useRef(null);
+    const [position, setPosition] = React.useState({ left: 0, width: 0 });
+    const { listRef, mounted } = useTabObserver({
+        onActiveTabChange: (_index, tab) => {
+            setPosition({ left: tab.offsetLeft, width: tab.offsetWidth });
+            const container = scroll.current;
+            if (container)
+                container.scrollTo({
+                    left: tab.offsetLeft + (tab.offsetWidth - container.clientWidth) / 2,
+                    behavior: 'smooth',
+                });
+        },
+    });
+    const connect = React.useCallback((node) => {
+        listRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [listRef, ref]);
+    return (_jsx("div", { ref: scroll, className: cn('relative grid overflow-x-auto overflow-y-hidden overscroll-contain', wrapperClassName), children: _jsxs(Tabs.List, { ...props, ref: connect, className: cn('group/tab-list relative flex h-12 items-center gap-6 whitespace-nowrap border-y border-stroke-soft-200', className), children: [_jsx(Slottable, { children: children }), _jsx("span", { "aria-hidden": 'true', className: cn('pointer-events-none absolute -bottom-px left-0 h-0.5 bg-primary-base opacity-0 transition-all duration-300 group-has-[[data-state=active]]/tab-list:opacity-100', !mounted && 'hidden'), style: {
+                        transform: `translateX(${position.left}px)`,
+                        width: position.width,
+                        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('group/tab-item inline-flex h-12 items-center justify-center gap-1.5 py-3.5 text-label-sm text-text-sub-600 outline-none transition duration-200 ease-out 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 text-text-sub-600', className) }));
+}

package/dist/components/ui/tab-menu-vertical.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as Tabs from "@radix-ui/react-tabs";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+export declare const Content: React.ForwardRefExoticComponent<Tabs.TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<Tabs.TabsProps & React.RefAttributes<HTMLDivElement>, "ref">, "orientation"> & React.RefAttributes<HTMLDivElement>>;
+export declare const List: React.ForwardRefExoticComponent<Omit<Tabs.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Trigger: React.ForwardRefExoticComponent<Omit<Tabs.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function Icon<T extends React.ElementType = 'div'>({ as, className, ...props }: PolymorphicComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowIcon<T extends React.ElementType = 'div'>({ as, className, ...props }: PolymorphicComponentProps<T>): import("react/jsx-runtime").JSX.Element;