@wellingtonhlc/shared-ui 0.29.0 → 0.29.2

package/dist/components/Sidebar.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../utils/cn';
+const Root = forwardRef(function SidebarRoot({ ariaLabel = 'Menu lateral', children, className, desktopWidthClass = 'lg:w-72', isOpen, mobileWidthClass = 'w-72', }, ref) {
+    return (_jsx("aside", { ref: ref, "aria-label": ariaLabel, "data-open": isOpen, className: cn('border-app-border bg-[var(--sidebar-background)] fixed inset-y-0 left-0 z-[var(--z-navigation)] flex h-full w-20 shrink-0 -translate-x-full flex-col justify-between overflow-visible border-r px-2 transition-[width,transform] duration-[var(--duration-slow)] ease-in-out data-[open=true]:w-4/5 data-[open=true]:translate-x-0 md:static md:z-[var(--z-navigation-desktop)] md:w-20 md:translate-x-0 md:shadow-none md:data-[open=true]:w-72', isOpen && `${mobileWidthClass} ${desktopWidthClass}`, className), children: children }));
+});
+function Content({ ariaLabel = 'Navegação principal', children, className }) {
+    return (_jsx("nav", { "aria-label": ariaLabel, className: cn('flex min-h-0 w-full flex-1 flex-col', className), children: children }));
+}
+function Header({ children, className }) {
+    return _jsx("div", { className: cn('flex h-16 w-full flex-none items-center', className), children: children });
+}
+function List({ children, className, isOpen }) {
+    const listRef = useRef(null);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const activeItem = listRef.current?.querySelector('[data-sidebar-active="true"]');
+        activeItem?.scrollIntoView({ block: 'nearest' });
+    }, [children, isOpen]);
+    return (_jsx("ul", { ref: listRef, className: cn('flex min-h-0 w-full flex-1 flex-col gap-2', isOpen ? 'overflow-y-auto overflow-x-hidden' : 'overflow-visible', className), children: children }));
+}
+function Footer({ children, className }) {
+    return _jsx("footer", { className: cn('border-app-border flex w-full flex-col border-t py-2', className), children: children });
+}
+function Separator({ className, flush = false }) {
+    return (_jsx("div", { "aria-hidden": "true", className: cn('border-app-border w-full border-t', flush && 'my-0', className) }));
+}
+const ToggleButton = forwardRef(function SidebarToggleButton({ className, closedLabel = 'Abrir menu lateral', icon, isOpen, onToggle, openLabel = 'Recolher menu lateral' }, ref) {
+    return (_jsx("button", { ref: ref, type: "button", onClick: onToggle, "aria-label": isOpen ? openLabel : closedLabel, "aria-expanded": isOpen, "data-open": isOpen, className: cn('text-foreground-muted focus-visible:ring-brand/35 flex w-full flex-none cursor-pointer items-center rounded-xl bg-transparent transition-[background-color,color] focus-visible:ring-2 focus-visible:outline-none hover:bg-[var(--sidebar-item-hover)] hover:text-foreground', className), children: _jsx("span", { className: "grid w-16 min-w-16 flex-none place-items-center py-2", children: icon }) }));
+});
+const ActionButton = forwardRef(function SidebarActionButton({ active = false, className, expanded = false, icon, isOpen, label, labelClassName, showChevron = false, size = 'default', title, tone = 'nav', type = 'button', ...props }, ref) {
+    return (_jsxs("button", { ref: ref, type: type, title: title ? (typeof label === 'string' && !isOpen ? label : undefined) : undefined, "data-open": isOpen, "data-sidebar-active": active ? 'true' : undefined, className: cn(sidebarButtonClasses(active, size, tone), showChevron && isOpen && 'pr-2', className), ...props, children: [_jsx("span", { className: cn('grid w-16 min-w-16 flex-none place-items-center transition-colors', size === 'compact' ? 'h-9' : 'h-11', active ? 'text-current' : 'text-current'), children: icon }), _jsx("span", { className: cn('min-w-0 flex-1 truncate text-left font-medium whitespace-nowrap transition-opacity duration-[var(--duration-normal)]', size === 'compact' ? 'text-xs max-md:text-base' : 'text-[length:var(--font-size-compact)] max-md:text-base', isOpen ? 'opacity-100' : 'pointer-events-none w-0 opacity-0', labelClassName), children: label }), _jsx("span", { className: cn('flex-none place-items-center', isOpen ? 'grid' : 'hidden', size === 'compact' ? 'h-9 w-6' : 'h-11 w-7', showChevron && isOpen ? 'opacity-100' : 'opacity-0'), children: _jsx(ChevronIcon, { expanded: expanded }) })] }));
+});
+const SubActionButton = forwardRef(function SidebarSubActionButton({ active = false, className, isOpen, label, size = 'compact', title, type = 'button', ...props }, ref) {
+    return (_jsx("button", { ref: ref, type: type, title: title ? (typeof label === 'string' && !isOpen ? label : undefined) : undefined, "data-sidebar-active": active ? 'true' : undefined, className: cn('focus-visible:ring-brand/35 flex w-full cursor-pointer items-center rounded-xl font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none', size === 'compact' ? 'h-9 min-h-9 text-xs' : 'h-11 min-h-11 text-[length:var(--font-size-compact)]', isOpen ? 'justify-start pl-16' : 'justify-center', subActionButtonTone(active, size), className), ...props, children: _jsx("span", { className: cn('truncate', isOpen ? 'opacity-100' : 'sr-only'), children: label }) }));
+});
+function NavGroup({ active = false, className, collapsible = false, defaultExpanded, icon, isOpen, items, subItemSize = 'compact', title, }) {
+    const itemByKey = useMemo(() => new Map(items.map((item) => [item.key, item])), [items]);
+    const [expanded, setExpanded] = useState(defaultExpanded ?? (active ? !collapsible : false));
+    const [hovered, setHovered] = useState(false);
+    const [labelVisible, setLabelVisible] = useState(isOpen);
+    const openHoverTimerRef = useRef(null);
+    const closeHoverTimerRef = useRef(null);
+    const groupActive = active || items.some((item) => item.active);
+    const singleItem = !collapsible && items.length === 1 ? items[0] : null;
+    useEffect(() => {
+        if (isOpen) {
+            setLabelVisible(true);
+            return undefined;
+        }
+        setLabelVisible(false);
+        return undefined;
+    }, [isOpen]);
+    useEffect(() => {
+        if (groupActive) {
+            setExpanded(true);
+        }
+    }, [groupActive]);
+    useEffect(() => () => {
+        clearHoverTimer(openHoverTimerRef);
+        clearHoverTimer(closeHoverTimerRef);
+    }, []);
+    function handleSingleItemClick(event) {
+        singleItem?.onSelect?.(event);
+    }
+    function handleGroupClick(event) {
+        if (!isOpen) {
+            items[0]?.onSelect?.(event);
+            return;
+        }
+        if (collapsible) {
+            setExpanded((current) => !current);
+        }
+    }
+    function handleMouseEnter() {
+        clearHoverTimer(closeHoverTimerRef);
+        clearHoverTimer(openHoverTimerRef);
+        openHoverTimerRef.current = setTimeout(() => setHovered(true), 280);
+    }
+    function handleMouseLeave() {
+        clearHoverTimer(openHoverTimerRef);
+        clearHoverTimer(closeHoverTimerRef);
+        closeHoverTimerRef.current = setTimeout(() => setHovered(false), 350);
+    }
+    function handleItemSelect(event) {
+        const key = event.currentTarget.dataset.sidebarItemKey;
+        const item = key ? itemByKey.get(key) : undefined;
+        item?.onSelect?.(event);
+        setHovered(false);
+    }
+    if (singleItem) {
+        return (_jsx("li", { className: cn('w-full', className), children: _jsx(ActionButton, { active: singleItem.active, icon: singleItem.icon ?? icon, isOpen: isOpen, label: singleItem.label, onClick: handleSingleItemClick, title: singleItem.title, tone: "subtle" }) }));
+    }
+    return (_jsxs("li", { className: cn('relative w-full', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx(ActionButton, { active: groupActive, "aria-expanded": isOpen ? expanded : undefined, icon: icon, isOpen: isOpen, label: title, labelClassName: labelVisible ? 'opacity-100' : 'opacity-0', onClick: handleGroupClick, expanded: expanded, showChevron: collapsible && isOpen, tone: "subtle" }), isOpen ? (_jsx("div", { className: "grid grid-rows-[0fr] opacity-0 transition-[grid-template-rows,opacity] duration-[var(--duration-normal)] ease-out data-[expanded=true]:grid-rows-[1fr] data-[expanded=true]:opacity-100", "data-expanded": expanded, children: _jsx("div", { className: "relative min-h-0 overflow-hidden", children: _jsx("ul", { className: "flex w-full flex-col", children: items.map((item, index) => (_jsxs("li", { className: "relative w-full", children: [_jsx("span", { "aria-hidden": "true", className: cn('bg-app-border absolute left-8 top-0 w-px', index === items.length - 1 ? 'h-1/2' : 'bottom-0') }), _jsx("span", { "aria-hidden": "true", className: "bg-app-border absolute left-8 top-1/2 h-px w-5" }), _jsx(SubActionButton, { active: item.active, "data-sidebar-item-key": item.key, isOpen: isOpen, label: item.label, onClick: handleItemSelect, size: subItemSize, title: item.title })] }, item.key))) }) }) })) : (_jsx(Flyout, { open: hovered, title: title, items: items, onItemSelect: handleItemSelect }))] }));
+}
+function Flyout({ items, onItemSelect, open, title }) {
+    return (_jsxs("div", { className: "border-app-border bg-[var(--sidebar-flyout-background)] invisible pointer-events-none absolute left-[calc(100%+0.375rem)] top-0 z-[var(--z-flyout)] min-w-52 -translate-x-2 overflow-hidden rounded-xl border p-2 opacity-0 shadow-[var(--shadow-flyout)] transition-[opacity,transform,visibility] duration-[var(--duration-fast)] data-[open=true]:visible data-[open=true]:pointer-events-auto data-[open=true]:translate-x-0 data-[open=true]:opacity-100", "data-open": open, children: [_jsx("span", { "aria-hidden": "true", className: "absolute right-full top-0 h-full w-2.5" }), _jsx("p", { className: "text-foreground-muted mb-2 text-[length:var(--font-size-caption)] font-semibold uppercase tracking-[var(--letter-spacing-caps)]", children: title }), _jsx("div", { className: "flex max-h-[calc(100vh-5rem)] flex-col overflow-y-auto", children: items.map((item) => (_jsxs("button", { type: "button", "data-sidebar-item-key": item.key, onClick: onItemSelect, className: cn('group focus-visible:ring-brand/35 flex h-9 min-h-9 w-full cursor-pointer items-center gap-2 rounded-lg text-left text-xs font-medium leading-none transition-colors focus-visible:ring-2 focus-visible:outline-none', item.active
+                        ? '!bg-transparent text-foreground font-semibold'
+                        : '!bg-transparent text-foreground-muted hover:text-foreground hover:font-semibold'), children: [_jsx("span", { className: "grid h-3.5 w-3.5 flex-none place-items-center text-current transition-colors [&>svg]:h-3.5 [&>svg]:w-3.5", children: item.icon }), _jsx("span", { className: "flex min-h-4 items-center leading-none", children: item.label })] }, item.key))) })] }));
+}
+function subActionButtonTone(active, size) {
+    if (size === 'compact') {
+        return active
+            ? '!bg-transparent text-foreground font-semibold'
+            : '!bg-transparent text-foreground-muted hover:text-foreground hover:font-semibold';
+    }
+    return active
+        ? 'bg-transparent text-foreground font-semibold'
+        : 'text-foreground-muted hover:text-foreground hover:font-semibold';
+}
+function sidebarButtonClasses(active, size, tone) {
+    return cn('group focus-visible:ring-brand/35 flex w-full cursor-pointer items-center rounded-xl bg-transparent text-left transition-colors focus-visible:ring-2 focus-visible:outline-none', size === 'compact' ? 'h-9 min-h-9' : 'h-11 min-h-11', actionButtonTone(active, tone));
+}
+function actionButtonTone(active, tone) {
+    if (tone === 'subtle') {
+        return active
+            ? '!bg-[var(--sidebar-item-active)] text-foreground font-semibold hover:!bg-[var(--sidebar-item-hover)]'
+            : '!bg-transparent text-foreground-muted hover:!bg-[var(--sidebar-item-hover)] hover:text-foreground hover:font-semibold';
+    }
+    return active
+        ? 'bg-[var(--sidebar-neutral-active)] text-foreground font-semibold'
+        : 'text-foreground-muted hover:bg-[var(--sidebar-neutral-hover)] hover:text-foreground';
+}
+function clearHoverTimer(timerRef) {
+    if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+    }
+}
+function ChevronIcon({ expanded }) {
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", className: cn('h-4 w-4 transition-transform duration-[var(--duration-normal)]', expanded && 'rotate-180'), fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.8", children: _jsx("path", { d: "m6 8 4 4 4-4" }) }));
+}
+export const Sidebar = {
+    Root,
+    Content,
+    Header,
+    List,
+    Footer,
+    Separator,
+    ToggleButton,
+    ActionButton,
+    SubActionButton,
+    NavGroup,
+    Flyout,
+};

package/dist/components/StatCard.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export type StatCardVariant = 'default' | 'success' | 'info' | 'warning' | 'danger';
+export type StatCardSize = 'sm' | 'md' | 'lg';
+export interface StatCardProps<TValue> {
+    className?: string;
+    description?: ReactNode;
+    format?: (value: TValue) => ReactNode;
+    icon?: ReactNode;
+    label: ReactNode;
+    size?: StatCardSize;
+    value: TValue;
+    variant?: StatCardVariant;
+    valueClassName?: string;
+}
+export declare function StatCard<TValue>({ className, description, format, icon, label, size, value, variant, valueClassName, }: StatCardProps<TValue>): import("react").JSX.Element;
+//# sourceMappingURL=StatCard.d.ts.map

package/dist/components/StatCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../../src/components/StatCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AACpF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,aAAa,CAAC,MAAM;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAmED,wBAAgB,QAAQ,CAAC,MAAM,EAAE,EAC/B,SAAS,EACT,WAAW,EACX,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAW,EACX,KAAK,EACL,OAAmB,EACnB,cAAc,GACf,EAAE,aAAa,CAAC,MAAM,CAAC,+BAiCvB"}

package/dist/components/StatCard.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../utils/cn';
+const variantClasses = {
+    default: {
+        container: 'app-stat-card--default shadow-sm',
+        label: 'app-stat-card__label--default',
+        value: 'app-stat-card__value--default',
+        description: 'app-stat-card__description--default',
+        icon: 'app-stat-card__icon--default',
+    },
+    success: {
+        container: 'app-stat-card--success shadow-sm',
+        label: 'app-stat-card__label--success',
+        value: 'app-stat-card__value--success',
+        description: 'app-stat-card__description--success',
+        icon: 'app-stat-card__icon--success',
+    },
+    info: {
+        container: 'app-stat-card--info shadow-sm',
+        label: 'app-stat-card__label--info',
+        value: 'app-stat-card__value--info',
+        description: 'app-stat-card__description--info',
+        icon: 'app-stat-card__icon--info',
+    },
+    warning: {
+        container: 'app-stat-card--warning shadow-sm',
+        label: 'app-stat-card__label--warning',
+        value: 'app-stat-card__value--warning',
+        description: 'app-stat-card__description--warning',
+        icon: 'app-stat-card__icon--warning',
+    },
+    danger: {
+        container: 'app-stat-card--danger shadow-sm',
+        label: 'app-stat-card__label--danger',
+        value: 'app-stat-card__value--danger',
+        description: 'app-stat-card__description--danger',
+        icon: 'app-stat-card__icon--danger',
+    },
+};
+const sizeClasses = {
+    sm: {
+        container: 'px-3 py-3',
+        icon: 'size-4',
+        value: 'text-lg',
+    },
+    md: {
+        container: 'px-4 py-4',
+        icon: 'size-5',
+        value: 'text-2xl',
+    },
+    lg: {
+        container: 'px-4 py-4',
+        icon: 'size-5',
+        value: 'text-3xl',
+    },
+};
+export function StatCard({ className, description, format, icon, label, size = 'md', value, variant = 'default', valueClassName, }) {
+    const variantStyle = variantClasses[variant];
+    const sizeStyle = sizeClasses[size];
+    const formattedValue = format ? format(value) : String(value ?? '-');
+    return (_jsxs("div", { className: cn('app-stat-card rounded-xl border', variantStyle.container, sizeStyle.container, className), children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: cn('min-w-0 text-xs font-medium tracking-wide uppercase', variantStyle.label), children: label }), icon && (_jsx("div", { className: cn('shrink-0 [&>svg]:size-full', sizeStyle.icon, variantStyle.icon), children: icon }))] }), _jsx("div", { className: cn('mt-1 font-semibold', sizeStyle.value, variantStyle.value, valueClassName), children: formattedValue }), description && (_jsx("div", { className: cn('mt-1 text-xs', size === 'lg' && 'min-h-8 leading-4', variantStyle.description), children: description }))] }));
+}

package/dist/components/Switch.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type FieldValues } from 'react-hook-form';
+export interface SwitchProps<TFieldValues extends FieldValues = FieldValues> extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    errorMessage?: string;
+    wrapperClassName?: string;
+    labelClassName?: string;
+    labelPosition?: 'top' | 'right' | 'bottom' | 'left';
+    display?: 'field' | 'inline';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    control?: unknown;
+    rules?: unknown;
+}
+export declare function Switch<TFieldValues extends FieldValues = FieldValues>(props: SwitchProps<TFieldValues>): React.JSX.Element;
+export declare namespace Switch {
+    var displayName: string;
+}
+//# sourceMappingURL=Switch.d.ts.map

package/dist/components/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/components/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,WAAW,EAGjB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,WAAW,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACzE,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAyJD,wBAAgB,MAAM,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,qBAMtG;yBANe,MAAM"}

package/dist/components/Switch.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useController, } from 'react-hook-form';
+import { cn } from '../utils/cn';
+import { FieldControl } from './FieldControl';
+const switchSizeClasses = {
+    xs: {
+        root: 'h-4 w-7 min-w-7 max-w-7 p-0.5',
+        thumb: 'size-3',
+        offset: 12,
+    },
+    sm: {
+        root: 'h-5 w-9 min-w-9 max-w-9 p-0.5',
+        thumb: 'size-4',
+        offset: 16,
+    },
+    md: {
+        root: 'h-5 w-10 min-w-10 max-w-10 p-0.5',
+        thumb: 'size-4',
+        offset: 20,
+    },
+    lg: {
+        root: 'h-6 w-11 min-w-11 max-w-11 p-0.5',
+        thumb: 'size-5',
+        offset: 20,
+    },
+};
+function SwitchBase({ checked, className, errorMessage, id, inputChecked, inputDisabled, inputName, inputOnBlur, label, labelClassName = '', labelPosition = 'left', display = 'field', name, onChange, onCheckedChange, size = 'md', wrapperClassName, ...props }) {
+    const resolvedChecked = inputChecked ?? checked;
+    const resolvedName = inputName ?? name;
+    const resolvedDisabled = inputDisabled ?? props.disabled;
+    const componentId = id || resolvedName;
+    const isHorizontal = labelPosition === 'left' || labelPosition === 'right';
+    const sizeClasses = switchSizeClasses[size];
+    function handleClick() {
+        const nextChecked = !resolvedChecked;
+        onCheckedChange?.(nextChecked);
+        onChange?.(nextChecked);
+    }
+    const button = (controlId, describedBy, disabled = resolvedDisabled) => (_jsx("button", { type: "button", role: "switch", "aria-checked": !!resolvedChecked, "aria-label": label, "aria-describedby": describedBy, id: controlId, name: resolvedName, onClick: handleClick, onBlur: inputOnBlur, disabled: disabled, "data-checked": !!resolvedChecked, className: cn('app-switch focus:ring-brand/50 inline-flex shrink-0 flex-none self-center rounded-full transition-colors duration-[var(--duration-normal)] focus:ring-2 focus:ring-offset-2 focus:outline-none', sizeClasses.root, disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer', className), ...props, children: _jsx("span", { className: cn('app-switch__thumb block rounded-full shadow-sm transition-transform duration-[var(--duration-normal)]', sizeClasses.thumb), style: { transform: `translateX(${resolvedChecked ? sizeClasses.offset : 0}px)` } }) }));
+    if (display === 'inline') {
+        const labelElement = label ? (_jsx("span", { className: cn('min-w-0 flex-1 text-sm font-medium leading-snug text-foreground', labelClassName), children: label })) : null;
+        const isLabelAfter = labelPosition === 'right' || labelPosition === 'bottom';
+        const isVertical = labelPosition === 'top' || labelPosition === 'bottom';
+        return (_jsxs("div", { className: cn('flex gap-3', isVertical ? 'flex-col items-start' : 'items-center justify-between', resolvedDisabled && 'opacity-70', wrapperClassName), "data-disabled": resolvedDisabled || undefined, children: [!isLabelAfter && labelElement, button(componentId, undefined, resolvedDisabled), isLabelAfter && labelElement] }));
+    }
+    return (_jsx(FieldControl, { label: label, id: componentId, labelClassName: cn('whitespace-nowrap leading-none', isHorizontal && 'self-center', labelClassName), labelPosition: labelPosition, wrapperClassName: wrapperClassName, errorMessage: errorMessage, size: size, disabled: resolvedDisabled, children: ({ controlId, describedBy, disabled }) => (button(controlId, describedBy, disabled)) }));
+}
+function HookFormSwitch(props) {
+    const { control, name, rules, ...rest } = props;
+    const { field } = useController({
+        control: control,
+        name: name,
+        rules: rules,
+    });
+    return _jsx(SwitchBase, { ...rest, name: name, inputName: field.name, inputChecked: !!field.value, inputDisabled: field.disabled, inputOnBlur: () => field.onBlur(), onCheckedChange: (nextChecked) => field.onChange(nextChecked) });
+}
+export function Switch(props) {
+    if (props.control && props.name) {
+        return _jsx(HookFormSwitch, { ...props });
+    }
+    return _jsx(SwitchBase, { ...props });
+}
+Switch.displayName = 'Switch';

package/dist/components/Table.d.ts

@@ -0,0 +1,65 @@
+import { type ButtonHTMLAttributes, type ColHTMLAttributes, type HTMLAttributes, type TableHTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
+import { Pagination } from './Pagination';
+interface TableRootProps extends TableHTMLAttributes<HTMLTableElement> {
+    chrome?: 'default' | 'flat';
+    density?: 'default' | 'compact';
+    fill?: boolean;
+    layout?: 'auto' | 'fixed';
+    isFramed?: boolean;
+    viewportClassName?: string;
+    wrapperClassName?: string;
+    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+}
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    isInteractive?: boolean;
+}
+export declare const TABLE_ACTION_CELL_WIDTH_PX: number;
+/**
+ * O rotulo "Ações" ocupa ~45px. Um grupo com um unico botao (28px) nao o comporta,
+ * entao o grupo inteiro respeita este minimo — sem nunca absorver a sobra da tabela.
+ */
+export declare const TABLE_ACTION_GROUP_MIN_WIDTH_PX = 56;
+/**
+ * Folga entre o icone da ponta e a borda da tabela: sem ela o botao encosta na
+ * moldura. Entra como padding, entao o valor inteiro vira folga na borda
+ * (centralizar o botao mandaria metade dela para o vao entre icones).
+ */
+export declare const TABLE_ACTION_EDGE_GUTTER_PX = 12;
+export declare function getTableActionColumnWidth(actionCount?: number, hasEdgeGutter?: boolean): number;
+export type TableActionColumnSize = 'sm' | 'md' | 'lg';
+interface TableActionHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    size?: TableActionColumnSize;
+}
+interface TableActionColProps extends ColHTMLAttributes<HTMLTableColElement> {
+    actionCount?: number;
+    hasEdgeGutter?: boolean;
+}
+interface TableActionCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+}
+/**
+ * Tonalidade semantica do icone. Todas mantem o corpo do `ghost` (sem preenchimento
+ * nem borda) e so trocam a cor: icone tonalizado em repouso e hover com a mesma cor
+ * suavizada, igual ao default faz com a `--brand`.
+ */
+export type TableActionTone = 'default' | 'success' | 'danger';
+interface TableActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: 'xs' | 'sm';
+    tone?: TableActionTone;
+    tooltip?: string;
+}
+export declare const Table: {
+    Root: import("react").ForwardRefExoticComponent<TableRootProps & import("react").RefAttributes<HTMLTableElement>>;
+    Header: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Footer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Row: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+    Head: import("react").ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>>;
+    ActionHead: import("react").ForwardRefExoticComponent<TableActionHeadProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    ActionCol: import("react").ForwardRefExoticComponent<TableActionColProps & import("react").RefAttributes<HTMLTableColElement>>;
+    Cell: import("react").ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>>;
+    ActionCell: import("react").ForwardRefExoticComponent<TableActionCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    Action: import("react").ForwardRefExoticComponent<TableActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Pagination: typeof Pagination;
+};
+export {};
+//# sourceMappingURL=Table.d.ts.map

package/dist/components/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EAEtB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,UAAU,cAAe,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACpE,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC/C;AA6ED,UAAU,aAAc,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA4CD,eAAO,MAAM,0BAA0B,QAAqD,CAAC;AAE7F;;;GAGG;AACH,eAAO,MAAM,+BAA+B,KAAK,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAyB9C,wBAAgB,yBAAyB,CAAC,WAAW,SAAI,EAAE,aAAa,UAAQ,UAQ/E;AAED,MAAM,MAAM,qBAAqB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvD,UAAU,oBAAqB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IAC3E,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AA+BD,UAAU,mBAAoB,SAAQ,iBAAiB,CAAC,mBAAmB,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAYD,UAAU,oBAAqB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;CAAG;AA8BhF;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAiB/D,UAAU,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACxE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAoBD,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAajB,CAAC"}

package/dist/components/Table.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, isValidElement, } from 'react';
+import { cn } from '../utils/cn';
+import { Button } from './Button';
+import { Pagination } from './Pagination';
+const Root = forwardRef(({ children, chrome = 'default', className, density = 'default', fill = true, layout = 'auto', isFramed = true, viewportClassName, wrapperClassName, wrapperProps, ...props }, ref) => {
+    const childNodes = Children.toArray(children);
+    const tableChildren = childNodes.filter((child) => !isValidElement(child) || child.type !== Pagination);
+    const paginationChildren = childNodes.filter((child) => isValidElement(child) && child.type === Pagination);
+    const { className: wrapperPropsClassName, ...resolvedWrapperProps } = wrapperProps ?? {};
+    return (_jsxs("div", { ...resolvedWrapperProps, "data-slot": "table-root", className: cn('bg-surface flex w-full min-w-0 flex-col overflow-hidden', fill && 'h-full min-h-0 grow', isFramed && 'border-app-border rounded-[var(--radius)] border', isFramed && chrome === 'default' && 'shadow-[var(--shadow-sm)]', density === 'compact' && '[&_td]:py-2 [&_th]:py-2', wrapperPropsClassName, wrapperClassName), children: [_jsx("div", { className: cn('min-h-0 flex-1 overflow-auto', viewportClassName), children: _jsx("table", { ref: ref, className: cn('w-full border-separate border-spacing-0 caption-bottom text-sm text-foreground', layout === 'fixed' && 'table-fixed', className), ...props, children: tableChildren }) }), paginationChildren.length > 0 && (_jsx("div", { "data-slot": "table-pagination", className: cn('border-app-border bg-background-secondary shrink-0 border-t px-3 py-2', density === 'compact' && 'px-3 py-2'), children: paginationChildren }))] }));
+});
+Root.displayName = 'Table.Root';
+const Header = forwardRef(({ className, ...props }, ref) => _jsx("thead", { ref: ref, className: cn('bg-background-secondary', className), ...props }));
+Header.displayName = 'Table.Header';
+const Body = forwardRef(({ className, ...props }, ref) => _jsx("tbody", { ref: ref, className: className, ...props }));
+Body.displayName = 'Table.Body';
+const Footer = forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn('border-app-border bg-background border-t font-medium', className), ...props })));
+Footer.displayName = 'Table.Footer';
+const Row = forwardRef(({ className, isInteractive = true, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('transition-colors hover:bg-[color-mix(in_srgb,var(--brand)_5%,transparent)] has-[td[data-slot=table-action-cell]:hover]:bg-transparent last:[&>td]:border-b-0', isInteractive && 'cursor-pointer', className), ...props })));
+Row.displayName = 'Table.Row';
+const Head = forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('border-app-border bg-background-secondary sticky top-0 z-[var(--z-table-header)] h-10 whitespace-nowrap border-b px-3 py-2.5 text-left align-middle text-xs font-extrabold tracking-[var(--letter-spacing-label)] text-foreground-muted uppercase', className), ...props })));
+Head.displayName = 'Table.Head';
+const Cell = forwardRef(({ className, ...props }, ref) => (_jsx("td", { ref: ref, className: cn('border-app-border border-b px-3 py-2.5 align-middle text-foreground', className), ...props })));
+Cell.displayName = 'Table.Cell';
+/** Tamanho `xs` do Button (min-h-7): nao encolher abaixo disso. */
+const ACTION_BUTTON_SIZE_PX = 28;
+const ACTION_CELL_PADDING_PX = 2;
+export const TABLE_ACTION_CELL_WIDTH_PX = ACTION_BUTTON_SIZE_PX + ACTION_CELL_PADDING_PX * 2;
+/**
+ * O rotulo "Ações" ocupa ~45px. Um grupo com um unico botao (28px) nao o comporta,
+ * entao o grupo inteiro respeita este minimo — sem nunca absorver a sobra da tabela.
+ */
+export const TABLE_ACTION_GROUP_MIN_WIDTH_PX = 56;
+/**
+ * Folga entre o icone da ponta e a borda da tabela: sem ela o botao encosta na
+ * moldura. Entra como padding, entao o valor inteiro vira folga na borda
+ * (centralizar o botao mandaria metade dela para o vao entre icones).
+ */
+export const TABLE_ACTION_EDGE_GUTTER_PX = 12;
+/**
+ * A folga vale para a celula que encosta na moldura — `:first-child`/`:last-child`
+ * dizem isso sem prop nenhuma, entao qualquer tabela que use `Table.ActionCell`
+ * ganha o comportamento (e o `ActionHead` recebe o mesmo recuo, o que mantem o
+ * rotulo centralizado sobre os icones, e nao sobre o grupo + folga).
+ */
+const ACTION_EDGE_PAD_VAR = '--table-action-edge-pad';
+const actionEdgeStyle = {
+    [ACTION_EDGE_PAD_VAR]: `${ACTION_CELL_PADDING_PX + TABLE_ACTION_EDGE_GUTTER_PX}px`,
+};
+const actionEdgeClasses = 'first:[padding-inline-start:var(--table-action-edge-pad)] last:[padding-inline-end:var(--table-action-edge-pad)]';
+/**
+ * O Head traz `px-3`, entao o ActionHead precisa de `!` para reduzir o padding —
+ * e `!important` ganha de regra normal mesmo com especificidade menor. Logo a
+ * folga da ponta tambem precisa ser `!` aqui, senao o rotulo fica fora de centro.
+ */
+const actionEdgeImportantClasses = 'first:[padding-inline-start:var(--table-action-edge-pad)]! last:[padding-inline-end:var(--table-action-edge-pad)]!';
+export function getTableActionColumnWidth(actionCount = 1, hasEdgeGutter = false) {
+    const columnCount = Math.max(actionCount, 1);
+    const groupWidth = Math.max(columnCount * TABLE_ACTION_CELL_WIDTH_PX, TABLE_ACTION_GROUP_MIN_WIDTH_PX);
+    return groupWidth / columnCount + (hasEdgeGutter ? TABLE_ACTION_EDGE_GUTTER_PX : 0);
+}
+const actionColumnWidthClasses = {
+    sm: 'w-16',
+    md: 'w-20',
+    lg: 'w-28',
+};
+const ActionHead = forwardRef(({ children = 'Ações', className, colSpan, size = 'sm', style, ...props }, ref) => (_jsx(Head, { ref: ref, colSpan: colSpan, 
+    // O sufixo `!` vence o `px-3` do Head: o cn do pacote nao usa tailwind-merge.
+    className: cn(!colSpan && actionColumnWidthClasses[size], 'px-0.5!', actionEdgeImportantClasses, 'text-center', className), style: { ...actionEdgeStyle, ...style }, ...props, children: children })));
+ActionHead.displayName = 'Table.ActionHead';
+const ActionCol = forwardRef(({ actionCount = 1, hasEdgeGutter = false, style, ...props }, ref) => {
+    const width = `${getTableActionColumnWidth(actionCount, hasEdgeGutter)}px`;
+    return _jsx("col", { ref: ref, style: { ...style, width, minWidth: width, maxWidth: width }, ...props });
+});
+ActionCol.displayName = 'Table.ActionCol';
+const ActionCell = forwardRef(({ children, className, style, ...props }, ref) => (_jsx("td", { ref: ref, "data-slot": "table-action-cell", className: cn('border-app-border border-b px-0.5 py-0.5 text-center align-middle', actionEdgeClasses, className), 
+    // A largura e obrigatoria: em layout `auto` (tabela sem colgroup) uma celula
+    // sem width volta a absorver a sobra da tabela. Em `fixed` quem manda e o
+    // <col>, e na ponta o proprio padding faz a celula crescer o necessario.
+    style: {
+        ...actionEdgeStyle,
+        ...style,
+        width: `${TABLE_ACTION_CELL_WIDTH_PX}px`,
+        minWidth: `${TABLE_ACTION_CELL_WIDTH_PX}px`,
+    }, ...props, children: _jsx("div", { className: "flex min-h-7 items-center justify-center", children: children }) })));
+ActionCell.displayName = 'Table.ActionCell';
+/**
+ * Os tons usam os tokens semanticos de icone, que preservam saturacao e contraste
+ * nos temas claro e escuro sem repetir hexadecimais no componente.
+ *
+ * `!` obrigatorio: o cn do pacote nao usa tailwind-merge, entao sem ele o
+ * `text-foreground-muted`/`hover:bg` do ghost venceria pela ordem do CSS.
+ */
+const actionToneClasses = {
+    default: '',
+    success: 'text-[var(--status-success-icon)]! hover:bg-[color-mix(in_srgb,var(--status-success-icon)_10%,transparent)]! hover:text-[var(--status-success-icon)]! dark:hover:bg-[color-mix(in_srgb,var(--status-success-icon)_16%,transparent)]!',
+    danger: 'text-[var(--status-danger-icon)]! hover:bg-[color-mix(in_srgb,var(--status-danger-icon)_10%,transparent)]! hover:text-[var(--status-danger-icon)]! dark:hover:bg-[color-mix(in_srgb,var(--status-danger-icon)_16%,transparent)]!',
+};
+const Action = forwardRef(({ className, size = 'xs', tone = 'default', tooltip, ...props }, ref) => (
+// `props` vem primeiro: o corpo (variant/size/className) e do Table.Action, e nao
+// pode ser sobrescrito por quem chama — o tom e a unica alavanca de cor.
+_jsx(Button, { ...props, ref: ref, "aria-label": props['aria-label'] ?? tooltip, className: cn('size-7 min-h-7 min-w-7 p-0', actionToneClasses[tone], className), size: size, variant: "ghost", tooltip: tooltip })));
+Action.displayName = 'Table.Action';
+export const Table = {
+    Root,
+    Header,
+    Body,
+    Footer,
+    Row,
+    Head,
+    ActionHead,
+    ActionCol,
+    Cell,
+    ActionCell,
+    Action,
+    Pagination,
+};

package/dist/components/TabsUnderlined.d.ts

@@ -0,0 +1,23 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface UnderlinedTabItem {
+    id: string;
+    label: string;
+    visible?: boolean;
+    children: ReactNode;
+}
+export interface TabsUnderlinedProps {
+    items: UnderlinedTabItem[];
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    listClassName?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+    tabWidth?: CSSProperties['width'];
+    tabMinWidth?: CSSProperties['minWidth'];
+    tabMaxWidth?: CSSProperties['maxWidth'];
+    truncateLabels?: boolean;
+}
+export declare function TabsUnderlined({ className, contentClassName, defaultValue, items, listClassName, onValueChange, tabMaxWidth, tabMinWidth, tabWidth, triggerClassName, truncateLabels, value, }: TabsUnderlinedProps): import("react").JSX.Element;
+//# sourceMappingURL=TabsUnderlined.d.ts.map

package/dist/components/TabsUnderlined.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsUnderlined.d.ts","sourceRoot":"","sources":["../../src/components/TabsUnderlined.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAW9E,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,cAAsB,EACtB,KAAK,GACN,EAAE,mBAAmB,+BA4DrB"}

package/dist/components/TabsUnderlined.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import * as Tabs from '@radix-ui/react-tabs';
+import { cn } from '../utils/cn';
+const DEFAULT_TAB_MIN_WIDTH = '8.75rem';
+const TAB_BAR_BACKGROUND = 'bg-[var(--tabs-background)]';
+const TAB_INACTIVE_BACKGROUND = 'bg-[var(--tabs-background)]';
+const TAB_INACTIVE_HOVER_BACKGROUND = 'hover:bg-[color-mix(in_srgb,var(--foreground-muted)_8%,var(--tabs-background))]';
+export function TabsUnderlined({ className, contentClassName, defaultValue, items, listClassName, onValueChange, tabMaxWidth, tabMinWidth, tabWidth, triggerClassName, truncateLabels = false, value, }) {
+    const visibleItems = useMemo(() => items.filter((item) => item.visible ?? true), [items]);
+    const initialValue = defaultValue && visibleItems.some((item) => item.id === defaultValue)
+        ? defaultValue
+        : visibleItems[0]?.id || '';
+    const [internalValue, setInternalValue] = useState(initialValue);
+    const resolvedValue = value ?? internalValue;
+    function handleValueChange(nextValue) {
+        setInternalValue(nextValue);
+        onValueChange?.(nextValue);
+    }
+    return (_jsx("div", { className: cn('border-app-border bg-surface flex h-full min-w-0 flex-col overflow-hidden rounded-xl border', className), children: _jsxs(Tabs.Root, { value: resolvedValue, onValueChange: handleValueChange, className: "flex min-w-0 flex-1 flex-col", children: [_jsx(Tabs.List, { className: cn("flex min-w-0 overflow-x-auto overflow-y-hidden rounded-t-[calc(var(--radius-xl)-1px)] text-sm after:min-w-0 after:flex-1 after:border-b after:border-app-border after:bg-[var(--tabs-background)] after:content-['']", TAB_BAR_BACKGROUND, listClassName), children: visibleItems.map((item) => (_jsx(TabTrigger, { value: item.id, className: triggerClassName, maxWidth: tabMaxWidth, minWidth: tabMinWidth, width: tabWidth, truncate: truncateLabels, children: item.label }, item.id))) }), visibleItems.map((item) => (_jsx(Tabs.Content, { value: item.id, className: cn('flex h-full min-w-0 flex-1 flex-col overflow-hidden', contentClassName), children: item.children }, item.id)))] }) }));
+}
+function TabTrigger({ children, className, value, maxWidth, minWidth, width, truncate, }) {
+    const style = {
+        maxWidth,
+        minWidth: minWidth ?? DEFAULT_TAB_MIN_WIDTH,
+        width,
+    };
+    return (_jsx(Tabs.Trigger, { value: value, style: style, className: cn('text-foreground-muted hover:text-foreground focus-visible:ring-brand/50 border-b-app-border data-[state=active]:border-app-border data-[state=active]:!border-b-transparent data-[state=active]:bg-surface data-[state=active]:text-foreground inline-flex shrink-0 cursor-pointer items-center justify-center border border-t-0 border-x-transparent px-4 py-2 text-sm font-medium transition-colors first:border-l-0 focus:outline-none focus-visible:ring-2', TAB_INACTIVE_BACKGROUND, TAB_INACTIVE_HOVER_BACKGROUND, className), children: _jsx("span", { className: cn('min-w-0', truncate && 'overflow-hidden text-ellipsis whitespace-nowrap'), children: children }) }));
+}

package/dist/components/TextField.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type FormControlVariant } from './form-control-helpers';
+export type TextFieldVariant = FormControlVariant;
+export type TextFieldIconPosition = 'left' | 'right';
+export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    wrapperClassName?: string;
+    labelClassName?: string;
+    label?: string;
+    errorMessage?: string;
+    error?: string;
+    helperText?: string;
+    hasValidation?: boolean;
+    roundedFull?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    labelPosition?: 'top' | 'right' | 'bottom' | 'left';
+    variant?: TextFieldVariant;
+    icon?: React.ReactNode;
+    iconPosition?: TextFieldIconPosition;
+    children?: React.ReactNode;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    adornmentClassName?: string;
+}
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=TextField.d.ts.map

package/dist/components/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../src/components/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjF,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AAClD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC/F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,SAAS,yFA+KrB,CAAC"}