@mt-gloss/ui 0.0.2

package/lib/Accordion.d.ts

@@ -0,0 +1,103 @@
+import { default as React } from 'react';
+export type AccordionShowCount = 'always' | 'collapsed-only' | 'never';
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content of the accordion (AccordionItem components)
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Accordion - container for collapsible sections
+ *
+ * DOM Structure: `<div class="gloss-accordion">`
+ *
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem defaultOpen>
+ *     <AccordionTrigger>Section 1</AccordionTrigger>
+ *     <AccordionContent>Content here</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the item is expanded by default (uncontrolled)
+     */
+    defaultOpen?: boolean;
+    /**
+     * Controlled open state
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * When to show the item count badge
+     * - 'always': Always show count
+     * - 'collapsed-only': Show count only when collapsed (default)
+     * - 'never': Never show count
+     */
+    showCount?: AccordionShowCount;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Content of the item (AccordionTrigger and AccordionContent)
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * AccordionItem - individual collapsible section
+ *
+ * DOM Structure: `<div class="gloss-accordion-item">`
+ */
+export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Icon to display on the left side
+     */
+    icon?: React.ReactNode;
+    /**
+     * Content of the trigger (label text)
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * AccordionTrigger - clickable header that toggles the accordion
+ *
+ * DOM Structure: `<button class="gloss-accordion-trigger">`
+ */
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content to display when expanded
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * AccordionContent - collapsible content area
+ *
+ * DOM Structure: `<div class="gloss-accordion-content">`
+ */
+export declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;

package/lib/AsyncLoader.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+export interface AsyncLoaderProps {
+    /**
+     * Color variant for the loading animation
+     * @default 'blue'
+     */
+    color?: 'blue' | 'green';
+    /**
+     * Whether the loading animation is active
+     */
+    isLoading?: boolean;
+    /**
+     * Content to wrap (typically an Input component)
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * AsyncLoader component - perimeter-tracing SVG animation wrapper
+ *
+ * DOM Structure:
+ * - `.gloss-async` wrapper (with `--loading` and `--{color}` modifiers)
+ * - `.gloss-async__container` containing two SVG elements
+ * - `.gloss-async__rect` (static background rect)
+ * - `.gloss-async__chaser` (animated chasing rect)
+ *
+ * @example
+ * ```tsx
+ * <AsyncLoader isLoading color="blue">
+ *   <Input value="checking..." />
+ * </AsyncLoader>
+ *
+ * <AsyncLoader isLoading color="green">
+ *   <Input status="success" value="verified" />
+ * </AsyncLoader>
+ * ```
+ */
+export declare const AsyncLoader: React.ForwardRefExoticComponent<AsyncLoaderProps & React.RefAttributes<HTMLDivElement>>;

package/lib/Badge.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Color variant of the badge
+     */
+    variant?: BadgeVariant;
+    /**
+     * Size of the badge
+     */
+    size?: BadgeSize;
+    /**
+     * Whether to display as a small dot (ignores children)
+     */
+    dot?: boolean;
+    /**
+     * Whether the badge should have a subtle/soft appearance
+     */
+    soft?: boolean;
+    /**
+     * Content of the badge
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Badge component - small status indicator for labeling and categorization
+ *
+ * DOM Structure: `<span class="gloss-badge">`
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="error" dot />
+ * <Badge variant="primary" size="lg">New</Badge>
+ * ```
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/lib/Button.d.ts

@@ -0,0 +1,73 @@
+import { default as React } from 'react';
+import { IconSlotProps } from './types/icon';
+import { TooltipPlacement } from './Tooltip';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'danger-outline';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, IconSlotProps {
+    /**
+     * Visual style variant
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Loading state - shows spinner and disables interaction
+     */
+    isLoading?: boolean;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Error state - shows error icon and makes button clickable to fix errors
+     * If string, displays as tooltip. If true, shows icon without tooltip.
+     */
+    error?: string | boolean;
+    /**
+     * Renders button as icon-only (square aspect ratio)
+     * Requires leftIcon or rightIcon, and aria-label for accessibility
+     */
+    iconOnly?: boolean;
+    /**
+     * Makes button full width of container
+     */
+    fullWidth?: boolean;
+    /**
+     * Tooltip content - wraps button with Tooltip component
+     */
+    tooltip?: React.ReactNode;
+    /**
+     * Tooltip placement
+     * @default 'top'
+     */
+    tooltipPlacement?: TooltipPlacement;
+    /**
+     * Delay before showing tooltip (ms)
+     * @default 200
+     */
+    tooltipDelay?: number;
+    /**
+     * Content of the button
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Button component with tactile feedback and multiple variants
+ *
+ * DOM Structure: `<button class="gloss-btn gloss-btn--{variant}">`
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary">Save</Button>
+ * <Button variant="secondary" disabled>Cancel</Button>
+ * <Button variant="ghost" isLoading>Loading...</Button>
+ * ```
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/ButtonGroup.d.ts

@@ -0,0 +1,72 @@
+import { default as React } from 'react';
+import { ButtonVariant } from './Button';
+export interface ButtonGroupProps {
+    /**
+     * Button elements to group
+     */
+    children: React.ReactNode;
+    /**
+     * Orientation of the group
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Visual style for connected buttons (removes gaps, merges borders)
+     * @default false
+     */
+    attached?: boolean;
+    /**
+     * Size applied to all child buttons via context
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Variant applied to all child buttons via context
+     */
+    variant?: ButtonVariant;
+    /**
+     * Full width distribution - buttons share available space equally
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Gap between buttons when not attached
+     * @default 'md'
+     */
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Context for sharing ButtonGroup props with child buttons
+ */
+export interface ButtonGroupContextValue {
+    size?: 'sm' | 'md' | 'lg';
+    variant?: ButtonVariant;
+    isInGroup: boolean;
+}
+export declare const ButtonGroupContext: React.Context<ButtonGroupContextValue>;
+/**
+ * ButtonGroup component for grouping related buttons
+ *
+ * DOM Structure: `<div class="gloss-btn-group">`
+ *
+ * @example
+ * ```tsx
+ * // Attached button group
+ * <ButtonGroup attached>
+ *   <Button>Left</Button>
+ *   <Button>Center</Button>
+ *   <Button>Right</Button>
+ * </ButtonGroup>
+ *
+ * // Vertical button group
+ * <ButtonGroup orientation="vertical" variant="secondary">
+ *   <Button>Option 1</Button>
+ *   <Button>Option 2</Button>
+ *   <Button>Option 3</Button>
+ * </ButtonGroup>
+ * ```
+ */
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

package/lib/Card.d.ts

@@ -0,0 +1,140 @@
+import { default as React } from 'react';
+export type CardVariant = 'elevated' | 'outlined' | 'filled';
+export type CardSize = 'sm' | 'md' | 'lg';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual style variant
+     * - elevated: Default style with shadow (default)
+     * - outlined: Border-focused, no shadow
+     * - filled: Subtle background fill
+     */
+    variant?: CardVariant;
+    /**
+     * Size of the card (affects padding)
+     */
+    size?: CardSize;
+    /**
+     * Whether the card should have interactive hover effects
+     */
+    interactive?: boolean;
+    /**
+     * Whether the card is in a selected state
+     */
+    selected?: boolean;
+    /**
+     * Content of the card
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Card component - flexible container for grouping related content
+ *
+ * DOM Structure: `<div class="gloss-card">`
+ *
+ * @example
+ * ```tsx
+ * <Card variant="elevated" interactive>
+ *   <CardHeader>
+ *     <CardTitle>Title</CardTitle>
+ *   </CardHeader>
+ *   <CardBody>Content here</CardBody>
+ *   <CardFooter>Actions</CardFooter>
+ * </Card>
+ * ```
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+    /**
+     * Height of the media container
+     */
+    height?: number | string;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * CardMedia - media/image section of a card
+ *
+ * DOM Structure: `<div class="gloss-card__media">`
+ */
+export declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * CardHeader - header section of a card
+ *
+ * DOM Structure: `<div class="gloss-card__header">`
+ */
+export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * HTML heading level (h1-h6)
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * CardTitle - title element for card headers
+ *
+ * DOM Structure: `<h3 class="gloss-card__title">`
+ */
+export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface CardSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * CardSubtitle - subtitle element for card headers
+ *
+ * DOM Structure: `<p class="gloss-card__subtitle">`
+ */
+export declare const CardSubtitle: React.ForwardRefExoticComponent<CardSubtitleProps & React.RefAttributes<HTMLParagraphElement>>;
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * CardBody - main content section of a card
+ *
+ * DOM Structure: `<div class="gloss-card__body">`
+ */
+export declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Alignment of actions
+     */
+    align?: 'start' | 'center' | 'end' | 'between';
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * CardActions - inline action area (different from Footer, no background)
+ *
+ * DOM Structure: `<div class="gloss-card__actions">`
+ */
+export declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * CardFooter - footer/action section of a card (with background)
+ *
+ * DOM Structure: `<div class="gloss-card__footer">`
+ */
+export declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;

package/lib/Checkbox.d.ts

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /**
+     * Whether the checkbox is checked (controlled)
+     */
+    checked?: boolean;
+    /**
+     * Default checked state (uncontrolled)
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state
+     * (represents a partially-selected parent of a group)
+     */
+    indeterminate?: boolean;
+    /**
+     * Callback when checked state changes
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Callback with just the boolean value (convenience)
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Label text displayed next to the checkbox
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper text displayed below the checkbox
+     */
+    helperText?: string;
+    /**
+     * Validation/status state
+     * @default 'default'
+     */
+    status?: 'default' | 'success' | 'error';
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Size of the checkbox
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Position of the label relative to the checkbox
+     * @default 'right'
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Checkbox component for boolean input with label support
+ *
+ * Supports controlled/uncontrolled modes, indeterminate state, and form integration.
+ * Uses convex physics - checkbox elevates slightly on hover.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox label="Accept terms" />
+ * <Checkbox label="Subscribe" defaultChecked />
+ * <Checkbox label="Select all" indeterminate />
+ * <Checkbox label="Agree" status="error" helperText="Required" />
+ * ```
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;