@conatel-sa/react-ui 0.1.0

package/README.md

@@ -0,0 +1,62 @@
+# React Component Library
+
+A React component library built with **Vite** (library mode) and **TypeScript**, ready to publish as an npm package.
+
+> **All commands run inside Docker containers — nothing needs to be installed on the host machine.**
+
+## Stack
+
+| Tool | Purpose |
+|---|---|
+| React 18 | UI framework |
+| TypeScript | Type safety |
+| Vite | Bundler (library mode) |
+| vite-plugin-dts | Auto-generate `.d.ts` declarations |
+| CSS Modules | Scoped styles |
+| Docker | Containerised development |
+
+## Getting Started
+
+```bash
+# Build the Docker image and install dependencies
+docker compose build
+```
+
+## Workflow
+
+| Task | Command |
+|---|---|
+| Install deps | `docker compose run --rm app npm install` |
+| Build library | `docker compose run --rm app npm run build` |
+| Start dev server | `docker compose up` |
+| Lint | `docker compose run --rm app npm run lint` |
+
+The dev server is available at **http://localhost:5173**.
+
+## Project Structure
+
+```
+src/
+├── components/
+│   └── Button/
+│       ├── Button.tsx          # Component implementation
+│       ├── Button.module.css   # Scoped styles
+│       └── index.ts            # Public export
+├── dev/
+│   └── main.tsx                # Dev playground (not included in build)
+├── index.ts                    # Library entry point
+└── vite-env.d.ts
+```
+
+## Adding a New Component
+
+1. Create `src/components/MyComponent/MyComponent.tsx`
+2. Add styles in `src/components/MyComponent/MyComponent.module.css`
+3. Export from `src/components/MyComponent/index.ts`
+4. Re-export from `src/index.ts`
+
+## Publishing
+
+1. Update `name`, `version`, and `author` in `package.json`
+2. Build: `docker compose run --rm app npm run build`
+3. Publish: `docker compose run --rm app npm publish`

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    variant?: AlertVariant;
+    title?: React.ReactNode;
+    /** Icon slot — accepts any ReactNode (e.g. lucide-react icon) */
+    icon?: React.ReactNode;
+    onClose?: () => void;
+}
+export declare function Alert({ variant, title, icon, onClose, className, children, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarShape = 'circle' | 'square';
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    /** Fallback initials displayed when src is not provided */
+    initials?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    /** Status indicator dot */
+    status?: 'online' | 'away' | 'busy' | 'offline';
+}
+export declare function Avatar({ src, alt, initials, size, shape, status, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+type BadgeSize = 'sm' | 'md';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Renders a small dot instead of text */
+    dot?: boolean;
+}
+export declare function Badge({ variant, size, dot, className, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    /** Button size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Shows a spinner and disables the button */
+    loading?: boolean;
+    /** Icon rendered before the label */
+    iconLeft?: React.ReactNode;
+    /** Icon rendered after the label */
+    iconRight?: React.ReactNode;
+    /** Renders the button as full-width */
+    fullWidth?: boolean;
+}
+export declare function Button({ variant, size, loading, fullWidth, disabled, className, children, iconLeft, iconRight, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Adds a visible border. Defaults true. */
+    bordered?: boolean;
+    /** Removes the shadow */
+    flat?: boolean;
+    /** Removes padding */
+    noPadding?: boolean;
+    /** Makes the card respond to hover */
+    hoverable?: boolean;
+}
+export declare function Card({ bordered, flat, noPadding, hoverable, className, children, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function CardHeader({ className, children, ...props }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function CardBody({ className, children, ...props }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function CardFooter({ className, children, ...props }: CardFooterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Card, CardHeader, CardBody, CardFooter } from './Card';
+export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps } from './Card';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Label text displayed next to the checkbox */
+    label?: React.ReactNode;
+    /** Shows an error visual state */
+    error?: boolean;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+    orientation?: 'horizontal' | 'vertical';
+    /** Optional centered label */
+    label?: React.ReactNode;
+}
+export declare function Divider({ orientation, label, className, ...props }: DividerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps } from './Divider';

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Main illustration or icon */
+    illustration?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Primary call-to-action */
+    action?: React.ReactNode;
+}
+export declare function EmptyState({ illustration, title, description, action, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';

package/dist/components/FormField/FormField.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface FormFieldProps {
+    /** Input label */
+    label?: React.ReactNode;
+    /** Helper text shown below the input */
+    hint?: React.ReactNode;
+    /** Error message shown below the input (overrides hint) */
+    error?: React.ReactNode;
+    /** Associates the label with an input via `for` attribute */
+    htmlFor?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function FormField({ label, hint, error, htmlFor, required, children, className, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { FormField } from './FormField';
+export type { FormFieldProps } from './FormField';

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Icon shown to the left inside the input */
+    iconLeft?: React.ReactNode;
+    /** Icon shown to the right inside the input */
+    iconRight?: React.ReactNode;
+    /** Shows an error state border */
+    error?: boolean;
+    /** Fills the parent's width */
+    fullWidth?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps } from './Input';

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: React.ReactNode;
+    size?: ModalSize;
+    /** Prevents closing the modal by clicking the backdrop */
+    persistent?: boolean;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+}
+export declare function Modal({ open, onClose, title, size, persistent, children, footer, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';

package/dist/components/Navbar/Navbar.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
+    /** Left-most content — typically a logo or brand */
+    brand?: React.ReactNode;
+    /** Action area rendered on the right */
+    actions?: React.ReactNode;
+    /** Transparent background (useful over images) */
+    transparent?: boolean;
+}
+export declare function Navbar({ brand, actions, transparent, className, children, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+export interface NavItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    active?: boolean;
+}
+export declare function NavItem({ active, className, children, ...props }: NavItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Navbar, NavItem } from './Navbar';
+export type { NavbarProps, NavItemProps } from './Navbar';

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Value between 0 and 100 */
+    value: number;
+    /** Visual size of the bar */
+    size?: 'sm' | 'md' | 'lg';
+    /** Display a label above the bar */
+    label?: React.ReactNode;
+    /** Show the percentage as text */
+    showValue?: boolean;
+    /** Color variant */
+    variant?: 'primary' | 'success' | 'warning' | 'error';
+}
+export declare function Progress({ value, size, label, showValue, variant, className, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Progress } from './Progress';
+export type { ProgressProps } from './Progress';

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    error?: boolean;
+    fullWidth?: boolean;
+    placeholder?: string;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

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

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps } from './Select';

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
+    size?: SpinnerSize;
+    /** Accessible label — defaults to 'Loading' */
+    label?: string;
+}
+export declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';

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

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Enables zebra striping on rows */
+    striped?: boolean;
+    /** Compact row padding */
+    dense?: boolean;
+    /** Border around all cells */
+    bordered?: boolean;
+    /** Sticks the header to the top when scrolling */
+    stickyHeader?: boolean;
+    children: React.ReactNode;
+}
+export declare function Table({ striped, dense, bordered, stickyHeader, className, children, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableHead({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+export declare function TableBody({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    selected?: boolean;
+    clickable?: boolean;
+}
+export declare function TableRow({ selected, clickable, className, children, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    align?: 'left' | 'center' | 'right';
+}
+export declare function TableCell({ align, className, children, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    sortDirection?: 'asc' | 'desc' | 'none';
+    onSort?: () => void;
+}
+export declare function TableHeaderCell({ align, sortable, sortDirection, onSort, className, children, ...props }: TableHeaderCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Table, TableHead, TableBody, TableRow, TableCell, TableHeaderCell } from './Table';
+export type { TableProps, TableRowProps, TableCellProps, TableHeaderCellProps } from './Table';

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface TabsProps {
+    defaultTab?: string;
+    activeTab?: string;
+    onTabChange?: (id: string) => void;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Tabs({ defaultTab, activeTab: controlled, onTabChange, children, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function TabList({ children, className, ...props }: TabListProps): import("react/jsx-runtime").JSX.Element;
+export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    id: string;
+}
+export declare function Tab({ id, children, className, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    id: string;
+}
+export declare function TabPanel({ id, children, className, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,2 @@
+export { Tabs, TabList, Tab, TabPanel } from './Tabs';
+export type { TabsProps, TabListProps, TabProps, TabPanelProps } from './Tabs';

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: boolean;
+    fullWidth?: boolean;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Label displayed next to the toggle */
+    label?: React.ReactNode;
+    /** Size of the toggle control */
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,2 @@
+export { Toggle } from './Toggle';
+export type { ToggleProps } from './Toggle';

package/dist/components/Typography/Heading.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** Semantic heading level (h1–h6). Defaults to 2. */
+    level?: HeadingLevel;
+    /** Visual size, independent of semantic level. Defaults to match the level. */
+    size?: HeadingSize;
+    /** Reduces the font weight to medium (500). Defaults false (bold). */
+    light?: boolean;
+}
+export declare function Heading({ level, size, light, className, children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Typography/Text.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+type TextSize = 'xs' | 'sm' | 'base' | 'lg';
+type TextWeight = 'light' | 'regular' | 'medium' | 'semibold' | 'bold';
+type TextColor = 'default' | 'muted' | 'subtle' | 'inverse' | 'primary' | 'error';
+type TextAlign = 'left' | 'center' | 'right';
+export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    /** Rendered HTML element. Defaults to 'p'. */
+    as?: 'p' | 'span' | 'div' | 'label' | 'small' | 'strong' | 'em';
+    size?: TextSize;
+    weight?: TextWeight;
+    color?: TextColor;
+    align?: TextAlign;
+    /** Clamp text to a fixed number of lines. */
+    clamp?: number;
+}
+export declare function Text({ as: Tag, size, weight, color, align, clamp, className, style, children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+export { Heading } from './Heading';
+export type { HeadingProps } from './Heading';
+export { Text } from './Text';
+export type { TextProps } from './Text';

package/dist/index.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";:root{--font-sans: "Poppins", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-lg: 1.0625rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed:1.625;--weight-light: 300;--weight-regular: 400;--weight-medium: 500;--weight-semibold:600;--weight-bold: 700;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-none: 0;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgba(0,0,0,.05);--shadow-sm: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);--shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);--z-base: 0;--z-raised: 10;--z-dropdown:100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-toast: 500;--z-tooltip: 600;--duration-fast: .1s;--duration-base: .15s;--duration-slow: .25s;--ease-default: cubic-bezier(.4, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--color-success: #16a34a;--color-success-light: #dcfce7;--color-warning: #d97706;--color-warning-light: #fef3c7;--color-error: #dc2626;--color-error-light: #fee2e2;--color-info: #2563eb;--color-info-light: #dbeafe}.theme-conatel{--color-brand: #CC032E;--color-brand-hover: #a80025;--color-brand-active: #8a001e;--color-brand-light: #fce8ec;--color-brand-contrast: #ffffff;--color-accent: #757578;--color-accent-hover: #5e5e60;--color-accent-light: #f3f3f3;--color-primary: var(--color-brand);--color-primary-hover: var(--color-brand-hover);--color-primary-active: var(--color-brand-active);--color-primary-light: var(--color-brand-light);--color-primary-contrast: var(--color-brand-contrast);--color-secondary: var(--color-accent);--color-secondary-hover: var(--color-accent-hover);--color-secondary-light: var(--color-accent-light);--color-secondary-contrast: #ffffff;--color-neutral-50: #fafafa;--color-neutral-100: #f5f5f5;--color-neutral-200: #e5e5e5;--color-neutral-300: #d4d4d4;--color-neutral-400: #a3a3a3;--color-neutral-500: #737373;--color-neutral-600: #525252;--color-neutral-700: #404040;--color-neutral-800: #262626;--color-neutral-900: #171717;--color-bg: #ffffff;--color-bg-alt: #f9f9f9;--color-surface: #ffffff;--color-surface-raised: #ffffff;--color-overlay: rgba(0, 0, 0, .45);--color-text: #1a1a1a;--color-text-muted: #6b6b6b;--color-text-subtle: #9b9b9b;--color-text-inverse: #ffffff;--color-text-link: var(--color-brand);--color-text-link-hover: var(--color-brand-hover);--color-border: #e0e0e0;--color-border-strong:#b0b0b0;--color-border-focus: var(--color-brand);--focus-ring: 0 0 0 3px rgba(204, 3, 46, .25);--input-bg: #ffffff;--input-border: var(--color-border);--input-border-focus: var(--color-brand);--input-radius: var(--radius-md);--btn-radius: var(--radius-md);--card-bg: var(--color-surface);--card-border: var(--color-border);--card-radius: var(--radius-lg);--card-shadow: var(--shadow-sm);--badge-radius: var(--radius-full);--badge-primary-bg: var(--color-brand-light);--badge-primary-text: var(--color-brand)}.theme-vivion{--color-brand: #009CDE;--color-brand-hover: #007ab5;--color-brand-active: #005e8f;--color-brand-light: #e5f5fd;--color-brand-contrast: #ffffff;--color-accent: #BCC0C3;--color-accent-hover: #9ea3a7;--color-accent-light: #f4f5f5;--color-tertiary: #4F4F50;--color-tertiary-hover: #383839;--color-primary: var(--color-brand);--color-primary-hover: var(--color-brand-hover);--color-primary-active: var(--color-brand-active);--color-primary-light: var(--color-brand-light);--color-primary-contrast: var(--color-brand-contrast);--color-secondary: var(--color-accent);--color-secondary-hover: var(--color-accent-hover);--color-secondary-light: var(--color-accent-light);--color-secondary-contrast: #1a1a1a;--color-neutral-50: #fafafa;--color-neutral-100: #f5f5f5;--color-neutral-200: #e5e5e5;--color-neutral-300: #d4d4d4;--color-neutral-400: #a3a3a3;--color-neutral-500: #737373;--color-neutral-600: #525252;--color-neutral-700: #404040;--color-neutral-800: #262626;--color-neutral-900: #171717;--color-bg: #ffffff;--color-bg-alt: #f8fafc;--color-surface: #ffffff;--color-surface-raised: #ffffff;--color-overlay: rgba(0, 0, 0, .45);--color-text: #1a1a1a;--color-text-muted: #4F4F50;--color-text-subtle: #9b9b9b;--color-text-inverse: #ffffff;--color-text-link: var(--color-brand);--color-text-link-hover: var(--color-brand-hover);--color-border: #e0e0e0;--color-border-strong:#b0b0b0;--color-border-focus: var(--color-brand);--focus-ring: 0 0 0 3px rgba(0, 156, 222, .25);--input-bg: #ffffff;--input-border: var(--color-border);--input-border-focus: var(--color-brand);--input-radius: var(--radius-md);--btn-radius: var(--radius-md);--card-bg: var(--color-surface);--card-border: var(--color-border);--card-radius: var(--radius-lg);--card-shadow: var(--shadow-sm);--badge-radius: var(--radius-full);--badge-primary-bg: var(--color-brand-light);--badge-primary-text: var(--color-brand)}._button_19xgv_1{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1.5px solid transparent;border-radius:var(--btn-radius, var(--radius-md));font-family:var(--font-sans);font-weight:var(--weight-medium);line-height:var(--leading-tight);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default);text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none}._button_19xgv_1:focus-visible{box-shadow:var(--focus-ring)}._button_19xgv_1:disabled,._button_19xgv_1._loading_19xgv_28{opacity:.5;cursor:not-allowed;pointer-events:none}._fullWidth_19xgv_34{width:100%}._sm_19xgv_39{padding:var(--space-1) var(--space-3);font-size:var(--text-sm)}._md_19xgv_44{padding:var(--space-2) var(--space-4);font-size:var(--text-base)}._lg_19xgv_49{padding:var(--space-3) var(--space-6);font-size:var(--text-lg)}._primary_19xgv_55{background-color:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}._primary_19xgv_55:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}._primary_19xgv_55:active:not(:disabled){background-color:var(--color-primary-active);border-color:var(--color-primary-active)}._secondary_19xgv_71{background-color:transparent;color:var(--color-primary);border-color:var(--color-primary)}._secondary_19xgv_71:hover:not(:disabled){background-color:var(--color-primary-light)}._secondary_19xgv_71:active:not(:disabled){background-color:var(--color-primary-light);border-color:var(--color-primary-active);color:var(--color-primary-active)}._ghost_19xgv_87{background-color:transparent;color:var(--color-text);border-color:transparent}._ghost_19xgv_87:hover:not(:disabled){background-color:var(--color-neutral-100)}._ghost_19xgv_87:active:not(:disabled){background-color:var(--color-neutral-200)}._danger_19xgv_101{background-color:var(--color-error);color:#fff;border-color:var(--color-error)}._danger_19xgv_101:hover:not(:disabled){filter:brightness(.9)}._icon_19xgv_112{display:inline-flex;align-items:center;flex-shrink:0;font-size:1.1em}._spinner_19xgv_120{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--radius-full);animation:_spin_19xgv_120 .6s linear infinite;flex-shrink:0}@keyframes _spin_19xgv_120{to{transform:rotate(360deg)}}._heading_7brqj_1{font-family:var(--font-sans);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--color-text);margin:0}._light_7brqj_9{font-weight:var(--weight-medium)}._size-xs_7brqj_14{font-size:var(--text-xs)}._size-sm_7brqj_15{font-size:var(--text-sm)}._size-md_7brqj_16{font-size:var(--text-base)}._size-lg_7brqj_17{font-size:var(--text-lg)}._size-xl_7brqj_18{font-size:var(--text-xl)}._size-2xl_7brqj_19{font-size:var(--text-2xl)}._size-3xl_7brqj_20{font-size:var(--text-3xl)}._size-4xl_7brqj_21{font-size:var(--text-4xl)}._text_11yq7_1{font-family:var(--font-sans);line-height:var(--leading-normal);margin:0}._size-xs_11yq7_8{font-size:var(--text-xs)}._size-sm_11yq7_9{font-size:var(--text-sm)}._size-base_11yq7_10{font-size:var(--text-base)}._size-lg_11yq7_11{font-size:var(--text-lg)}._weight-light_11yq7_14{font-weight:var(--weight-light)}._weight-regular_11yq7_15{font-weight:var(--weight-regular)}._weight-medium_11yq7_16{font-weight:var(--weight-medium)}._weight-semibold_11yq7_17{font-weight:var(--weight-semibold)}._weight-bold_11yq7_18{font-weight:var(--weight-bold)}._color-default_11yq7_21{color:var(--color-text)}._color-muted_11yq7_22{color:var(--color-text-muted)}._color-subtle_11yq7_23{color:var(--color-text-subtle)}._color-inverse_11yq7_24{color:var(--color-text-inverse)}._color-primary_11yq7_25{color:var(--color-primary)}._color-error_11yq7_26{color:var(--color-error)}._align-left_11yq7_29{text-align:left}._align-center_11yq7_30{text-align:center}._align-right_11yq7_31{text-align:right}._wrapper_1p1s3_1{position:relative;display:inline-flex;align-items:center}._fullWidth_1p1s3_7,._fullWidth_1p1s3_7 ._input_1p1s3_8{width:100%}._input_1p1s3_8{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--color-text);background:var(--input-bg, var(--color-bg));border:1.5px solid var(--input-border, var(--color-border));border-radius:var(--input-radius, var(--radius-md));padding:var(--space-2) var(--space-3);outline:none;transition:border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default);width:100%}._input_1p1s3_8::placeholder{color:var(--color-text-subtle)}._input_1p1s3_8:focus{border-color:var(--input-border-focus, var(--color-primary));box-shadow:var(--focus-ring)}._input_1p1s3_8:disabled{opacity:.5;cursor:not-allowed;background:var(--color-neutral-100)}._error_1p1s3_44 ._input_1p1s3_8{border-color:var(--color-error)}._error_1p1s3_44 ._input_1p1s3_8:focus{border-color:var(--color-error);box-shadow:0 0 0 3px rgba(var(--color-error),.2)}._iconLeft_1p1s3_54,._iconRight_1p1s3_55{position:absolute;display:flex;align-items:center;color:var(--color-text-muted);pointer-events:none;font-size:1rem}._iconLeft_1p1s3_54{left:var(--space-3)}._iconRight_1p1s3_55{right:var(--space-3)}._hasIconLeft_1p1s3_67{padding-left:calc(var(--space-3) * 2 + 1rem)}._hasIconRight_1p1s3_68{padding-right:calc(var(--space-3) * 2 + 1rem)}._disabled_1p1s3_70{opacity:.5}._textarea_1bjw2_1{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--color-text);background:var(--input-bg, var(--color-bg));border:1.5px solid var(--input-border, var(--color-border));border-radius:var(--input-radius, var(--radius-md));padding:var(--space-2) var(--space-3);outline:none;resize:vertical;min-height:100px;transition:border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default)}._textarea_1bjw2_1::placeholder{color:var(--color-text-subtle)}._textarea_1bjw2_1:focus{border-color:var(--input-border-focus, var(--color-primary));box-shadow:var(--focus-ring)}._textarea_1bjw2_1:disabled{opacity:.5;cursor:not-allowed;background:var(--color-neutral-100)}._error_1bjw2_33{border-color:var(--color-error)}._fullWidth_1bjw2_37{width:100%}._wrapper_714yq_1{position:relative;display:inline-block}._fullWidth_714yq_6,._fullWidth_714yq_6 ._select_714yq_7{width:100%}._select_714yq_7{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--color-text);background:var(--input-bg, var(--color-bg));border:1.5px solid var(--input-border, var(--color-border));border-radius:var(--input-radius, var(--radius-md));padding:var(--space-2) var(--space-8) var(--space-2) var(--space-3);outline:none;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;transition:border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default)}._select_714yq_7:focus{border-color:var(--input-border-focus, var(--color-primary));box-shadow:var(--focus-ring)}._select_714yq_7:disabled{opacity:.5;cursor:not-allowed;background:var(--color-neutral-100)}._error_714yq_41{border-color:var(--color-error)}._arrow_714yq_45{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-text-muted);font-size:.85rem}._wrapper_1fw7k_1{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}._disabled_1fw7k_9{opacity:.5;cursor:not-allowed}._input_1fw7k_15{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}._box_1fw7k_24{flex-shrink:0;width:1.125rem;height:1.125rem;border:1.5px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg);display:flex;align-items:center;justify-content:center;transition:border-color var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default)}._box_1fw7k_24:after{content:"";display:block;width:.3rem;height:.55rem;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translateY(-1px);opacity:0;transition:opacity var(--duration-fast) var(--ease-default)}._input_1fw7k_15:checked+._box_1fw7k_24{background:var(--color-primary);border-color:var(--color-primary)}._input_1fw7k_15:checked+._box_1fw7k_24:after{opacity:1}._input_1fw7k_15:focus-visible+._box_1fw7k_24{box-shadow:var(--focus-ring);border-color:var(--color-primary)}._error_1fw7k_69 ._box_1fw7k_24{border-color:var(--color-error)}._label_1fw7k_73{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text);line-height:var(--leading-normal)}._wrapper_1nf2t_1{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}._disabled_1nf2t_9{opacity:.5;cursor:not-allowed}._input_1nf2t_14{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}._track_1nf2t_23{flex-shrink:0;position:relative;display:inline-block;background:var(--color-border-strong);border-radius:var(--radius-full);transition:background var(--duration-fast) var(--ease-default)}._input_1nf2t_14:checked~._track_1nf2t_23{background:var(--color-primary)}._input_1nf2t_14:focus-visible~._track_1nf2t_23{box-shadow:var(--focus-ring)}._thumb_1nf2t_41{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-xs);transition:left var(--duration-fast) var(--ease-default)}._sm_1nf2t_52 ._track_1nf2t_23{width:2rem;height:1.1rem}._sm_1nf2t_52 ._thumb_1nf2t_41{width:.8rem;height:.8rem;left:.15rem}._sm_1nf2t_52 ._input_1nf2t_14:checked~._track_1nf2t_23 ._thumb_1nf2t_41{left:calc(100% - .8rem - .15rem)}._md_1nf2t_56 ._track_1nf2t_23{width:2.5rem;height:1.375rem}._md_1nf2t_56 ._thumb_1nf2t_41{width:1rem;height:1rem;left:.2rem}._md_1nf2t_56 ._input_1nf2t_14:checked~._track_1nf2t_23 ._thumb_1nf2t_41{left:calc(100% - 1.2rem)}._lg_1nf2t_60 ._track_1nf2t_23{width:3rem;height:1.625rem}._lg_1nf2t_60 ._thumb_1nf2t_41{width:1.2rem;height:1.2rem;left:.2rem}._lg_1nf2t_60 ._input_1nf2t_14:checked~._track_1nf2t_23 ._thumb_1nf2t_41{left:calc(100% - 1.4rem)}._label_1nf2t_64{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text);line-height:var(--leading-normal)}._field_1e976_1{display:flex;flex-direction:column;gap:var(--space-1)}._label_1e976_7{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);line-height:var(--leading-normal)}._required_1e976_15{color:var(--color-error)}._control_1e976_19{display:flex;flex-direction:column}._hint_1e976_24{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:var(--leading-normal)}._error_1e976_32{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-error);margin:0;line-height:var(--leading-normal)}._badge_1izwp_1{display:inline-flex;align-items:center;gap:var(--space-1);border-radius:var(--badge-radius, var(--radius-full));font-family:var(--font-sans);font-weight:var(--weight-medium);line-height:1;white-space:nowrap}._sm_1izwp_13{padding:.15rem var(--space-2);font-size:var(--text-xs)}._md_1izwp_14{padding:.25rem var(--space-2);font-size:var(--text-sm)}._default_1izwp_17{background:var(--color-neutral-100);color:var(--color-text-muted)}._primary_1izwp_21{background:var(--badge-primary-bg, var(--color-primary-light));color:var(--badge-primary-text, var(--color-primary))}._success_1izwp_25{background:var(--color-success-light);color:var(--color-success)}._warning_1izwp_29{background:var(--color-warning-light);color:var(--color-warning)}._error_1izwp_33{background:var(--color-error-light);color:var(--color-error)}._info_1izwp_37{background:var(--color-info-light);color:var(--color-info)}._dot_1izwp_43{display:inline-block;width:.5rem;height:.5rem;border-radius:var(--radius-full)}._dot-default_1izwp_50{background:var(--color-neutral-400)}._dot-primary_1izwp_51{background:var(--color-primary)}._dot-success_1izwp_52{background:var(--color-success)}._dot-warning_1izwp_53{background:var(--color-warning)}._dot-error_1izwp_54{background:var(--color-error)}._dot-info_1izwp_55{background:var(--color-info)}._alert_b0dm3_1{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border-left:4px solid;font-family:var(--font-sans)}._info_b0dm3_11{background:var(--color-info-light);border-color:var(--color-info);color:var(--color-text)}._success_b0dm3_12{background:var(--color-success-light);border-color:var(--color-success);color:var(--color-text)}._warning_b0dm3_13{background:var(--color-warning-light);border-color:var(--color-warning);color:var(--color-text)}._error_b0dm3_14{background:var(--color-error-light);border-color:var(--color-error);color:var(--color-text)}._icon_b0dm3_16{flex-shrink:0;font-size:1.25rem;display:flex;margin-top:.05rem}._info_b0dm3_11 ._icon_b0dm3_16{color:var(--color-info)}._success_b0dm3_12 ._icon_b0dm3_16{color:var(--color-success)}._warning_b0dm3_13 ._icon_b0dm3_16{color:var(--color-warning)}._error_b0dm3_14 ._icon_b0dm3_16{color:var(--color-error)}._body_b0dm3_28{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}._title_b0dm3_35{font-weight:var(--weight-semibold);font-size:var(--text-sm);margin:0;color:var(--color-text)}._message_b0dm3_42{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-normal)}._close_b0dm3_48{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:.875rem;padding:0;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity var(--duration-fast) var(--ease-default)}._close_b0dm3_48:hover{opacity:1}@keyframes _spin_51uef_6{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._spinner_51uef_6{animation:_spin_51uef_6 .8s linear infinite;color:var(--color-primary)}._xs_51uef_12{width:.75rem;height:.75rem}._sm_51uef_13{width:1rem;height:1rem}._md_51uef_14{width:1.5rem;height:1.5rem}._lg_51uef_15{width:2rem;height:2rem}._xl_51uef_16{width:3rem;height:3rem}._track_51uef_18{stroke:currentColor;opacity:.2}._arc_51uef_23{stroke:currentColor;stroke-dasharray:40 100}._wrapper_4mwzk_1{display:flex;flex-direction:column;gap:var(--space-1);width:100%}._header_4mwzk_8{display:flex;justify-content:space-between;align-items:baseline}._label_4mwzk_14{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text)}._value_4mwzk_21{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted)}._track_4mwzk_27{width:100%;background:var(--color-neutral-200);border-radius:var(--radius-full);overflow:hidden}._sm_4mwzk_34{height:4px}._md_4mwzk_35{height:8px}._lg_4mwzk_36{height:12px}._bar_4mwzk_38{height:100%;border-radius:var(--radius-full);transition:width var(--duration-base) var(--ease-out)}._primary_4mwzk_44{background:var(--color-primary)}._success_4mwzk_45{background:var(--color-success)}._warning_4mwzk_46{background:var(--color-warning)}._error_4mwzk_47{background:var(--color-error)}._card_15t3h_1{background:var(--card-bg, var(--color-surface));border-radius:var(--card-radius, var(--radius-lg));overflow:hidden;transition:box-shadow var(--duration-fast) var(--ease-default)}._bordered_15t3h_8{border:1px solid var(--card-border, var(--color-border))}._shadow_15t3h_12{box-shadow:var(--card-shadow, var(--shadow-sm))}._padded_15t3h_16{padding:var(--space-5)}._hoverable_15t3h_20:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}._header_15t3h_25{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}._body_15t3h_34{padding:var(--space-5)}._footer_15t3h_38{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-2)}@keyframes _fadeIn_zdfp2_1{0%{opacity:0}to{opacity:1}}@keyframes _slideUp_zdfp2_1{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}._backdrop_zdfp2_11{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-overlay, rgba(0, 0, 0, .45));display:flex;align-items:center;justify-content:center;z-index:var(--z-modal, 400);padding:var(--space-4);animation:_fadeIn_zdfp2_1 var(--duration-fast) var(--ease-out)}._dialog_zdfp2_23{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;max-height:90vh;width:100%;outline:none;animation:_slideUp_zdfp2_1 var(--duration-base) var(--ease-out);overflow:hidden}._sm_zdfp2_37{max-width:28rem}._md_zdfp2_38{max-width:36rem}._lg_zdfp2_39{max-width:48rem}._xl_zdfp2_40{max-width:64rem}._full_zdfp2_41{max-width:100%;max-height:100vh;border-radius:0}._header_zdfp2_44{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);flex-shrink:0}._title_zdfp2_53{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text)}._closeBtn_zdfp2_60{background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:1rem;padding:var(--space-1);border-radius:var(--radius-sm);display:flex;align-items:center;transition:color var(--duration-fast) var(--ease-default)}._closeBtn_zdfp2_60:hover{color:var(--color-text)}._closeBtn_zdfp2_60:focus-visible{outline:none;box-shadow:var(--focus-ring)}._body_zdfp2_83{padding:var(--space-5);overflow-y:auto;flex:1}._footer_zdfp2_90{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);flex-shrink:0}._tabs_173uv_1{display:flex;flex-direction:column}._tabList_173uv_6{display:flex;border-bottom:2px solid var(--color-border);gap:0;overflow-x:auto}._tab_173uv_1{padding:var(--space-2) var(--space-4);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap;transition:color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default)}._tab_173uv_1:hover:not(:disabled){color:var(--color-text)}._tab_173uv_1:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm) var(--radius-sm) 0 0}._tab_173uv_1._active_173uv_40{color:var(--color-primary);border-bottom-color:var(--color-primary)}._tab_173uv_1:disabled{opacity:.4;cursor:not-allowed}._panel_173uv_50{padding:var(--space-4) 0;outline:none}._navbar_lkae1_1{background:var(--color-surface);border-bottom:1px solid var(--color-border);width:100%;position:sticky;top:0;z-index:var(--z-sticky, 300)}._transparent_lkae1_10{background:transparent;border-color:transparent}._inner_lkae1_15{max-width:1280px;margin:0 auto;padding:0 var(--space-5);height:4rem;display:flex;align-items:center;gap:var(--space-6)}._brand_lkae1_25{flex-shrink:0}._nav_lkae1_1{display:flex;align-items:center;gap:var(--space-1);flex:1}._actions_lkae1_36{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}._navItem_lkae1_43{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);text-decoration:none;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);transition:color var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default)}._navItem_lkae1_43:hover{color:var(--color-text);background:var(--color-neutral-100)}._navItem_lkae1_43._active_lkae1_60{color:var(--color-primary);background:var(--color-primary-light)}._wrapper_1byef_1{width:100%;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-lg)}._table_1byef_8{width:100%;border-collapse:collapse;font-family:var(--font-sans);font-size:var(--text-sm)}._thead_1byef_16{background:var(--color-neutral-50)}._headerCell_1byef_20{text-align:left;font-weight:var(--weight-semibold);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);white-space:nowrap}._stickyHeader_1byef_29 ._thead_1byef_16 ._headerCell_1byef_20{position:sticky;top:0;background:var(--color-neutral-50);z-index:1}._sortable_1byef_36{cursor:pointer;-webkit-user-select:none;user-select:none}._sortable_1byef_36:hover{background:var(--color-neutral-100)}._headerContent_1byef_45{display:inline-flex;align-items:center;gap:var(--space-1)}._sortIcon_1byef_51{font-size:.75rem;color:var(--color-text-subtle)}._cell_1byef_57{padding:var(--space-3) var(--space-4);color:var(--color-text);border-bottom:1px solid var(--color-border);vertical-align:middle}._align-left_1byef_65{text-align:left}._align-center_1byef_66{text-align:center}._align-right_1byef_67{text-align:right}._row_1byef_70:last-child ._cell_1byef_57{border-bottom:none}._row_1byef_70:hover ._cell_1byef_57{background:var(--color-neutral-50)}._clickable_1byef_78{cursor:pointer}._selected_1byef_82 ._cell_1byef_57{background:var(--color-primary-light)}._striped_1byef_87 tbody tr:nth-child(2n) ._cell_1byef_57{background:var(--color-neutral-50)}._dense_1byef_91 ._cell_1byef_57,._dense_1byef_91 ._headerCell_1byef_20{padding:var(--space-2) var(--space-3)}._bordered_1byef_96 ._cell_1byef_57,._bordered_1byef_96 ._headerCell_1byef_20{border:1px solid var(--color-border)}._wrapper_9j0zo_1{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:visible;flex-shrink:0}._circle_9j0zo_11{border-radius:var(--radius-full)}._square_9j0zo_12{border-radius:var(--radius-md)}._xs_9j0zo_15{width:1.5rem;height:1.5rem;font-size:.55rem}._sm_9j0zo_16{width:2rem;height:2rem;font-size:.7rem}._md_9j0zo_17{width:2.5rem;height:2.5rem;font-size:.875rem}._lg_9j0zo_18{width:3.5rem;height:3.5rem;font-size:1.25rem}._xl_9j0zo_19{width:5rem;height:5rem;font-size:1.75rem}._img_9j0zo_21{width:100%;height:100%;object-fit:cover;border-radius:inherit}._initials_9j0zo_28{font-family:var(--font-sans);font-weight:var(--weight-semibold);color:var(--color-primary-contrast);background:var(--color-primary);border-radius:inherit;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-transform:uppercase}._status_9j0zo_43{position:absolute;bottom:2%;right:2%;width:25%;height:25%;min-width:8px;min-height:8px;border-radius:var(--radius-full);border:2px solid var(--color-bg)}._status-online_9j0zo_55{background:var(--color-success)}._status-away_9j0zo_56{background:var(--color-warning)}._status-busy_9j0zo_57{background:var(--color-error)}._status-offline_9j0zo_58{background:var(--color-neutral-400)}._horizontal_1qukl_1{border:none;border-top:1px solid var(--color-border);margin:var(--space-4) 0}._vertical_1qukl_7{display:inline-block;width:1px;height:1em;background:var(--color-border);vertical-align:middle;margin:0 var(--space-2)}._withLabel_1qukl_16{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-4) 0}._line_1qukl_23{flex:1;height:1px;background:var(--color-border)}._labelText_1qukl_29{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-subtle);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}._wrapper_etwtw_1{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-12, 3rem) var(--space-6);gap:var(--space-3)}._illustration_etwtw_11{font-size:4rem;color:var(--color-neutral-300);margin-bottom:var(--space-2)}._title_etwtw_17{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0}._description_etwtw_25{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text-muted);margin:0;max-width:32rem;line-height:var(--leading-relaxed)}._action_etwtw_34{margin-top:var(--space-2)}

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+export { ThemeProvider, ThemeContext, useTheme } from './theme';
+export type { Theme, ThemeContextValue, ThemeProviderProps } from './theme';
+export { Button } from './components/Button';
+export type { ButtonProps } from './components/Button';
+export { Heading, Text } from './components/Typography';
+export type { HeadingProps, TextProps } from './components/Typography';
+export { Input } from './components/Input';
+export type { InputProps } from './components/Input';
+export { Textarea } from './components/Textarea';
+export type { TextareaProps } from './components/Textarea';
+export { Select } from './components/Select';
+export type { SelectProps } from './components/Select';
+export { Checkbox } from './components/Checkbox';
+export type { CheckboxProps } from './components/Checkbox';
+export { Toggle } from './components/Toggle';
+export type { ToggleProps } from './components/Toggle';
+export { FormField } from './components/FormField';
+export type { FormFieldProps } from './components/FormField';
+export { Badge } from './components/Badge';
+export type { BadgeProps } from './components/Badge';
+export { Alert } from './components/Alert';
+export type { AlertProps } from './components/Alert';
+export { Spinner } from './components/Spinner';
+export type { SpinnerProps } from './components/Spinner';
+export { Progress } from './components/Progress';
+export type { ProgressProps } from './components/Progress';
+export { Card, CardHeader, CardBody, CardFooter } from './components/Card';
+export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps } from './components/Card';
+export { Modal } from './components/Modal';
+export type { ModalProps } from './components/Modal';
+export { Tabs, TabList, Tab, TabPanel } from './components/Tabs';
+export type { TabsProps, TabListProps, TabProps, TabPanelProps } from './components/Tabs';
+export { Navbar, NavItem } from './components/Navbar';
+export type { NavbarProps, NavItemProps } from './components/Navbar';
+export { Table, TableHead, TableBody, TableRow, TableCell, TableHeaderCell } from './components/Table';
+export type { TableProps, TableRowProps, TableCellProps, TableHeaderCellProps } from './components/Table';
+export { Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+export { Divider } from './components/Divider';
+export type { DividerProps } from './components/Divider';
+export { EmptyState } from './components/EmptyState';
+export type { EmptyStateProps } from './components/EmptyState';