@mithrl/design-system 0.1.0

package/dist/components/global-app-bar/GlobalAppBar.d.ts

@@ -0,0 +1,77 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type HTMLAttributes, type MouseEventHandler } from "react";
+import { type AccountMenuProps } from "../account-menu/AccountMenu";
+import { type DropdownMenuProps } from "../dropdown-menu/DropdownMenu";
+import { type ThemeMode } from "../switch/Switch";
+
+type BrandLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "className" | "href">;
+type AccountButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-controls" | "aria-expanded" | "aria-haspopup" | "aria-label" | "children" | "className" | "onClick" | "type">;
+export type GlobalAppBarProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    /** Home destination used by the official Mithrl brand action. */
+    brandHref?: string;
+    /** Accessible destination name for the brand action. */
+    brandLabel?: string;
+    /** Additional native attributes for the brand link. */
+    brandLinkProps?: BrandLinkProps;
+    /** Controlled active theme. */
+    theme?: ThemeMode;
+    /** Initial active theme for uncontrolled use. */
+    defaultTheme?: ThemeMode;
+    /** Called when the theme switch requests a new mode. */
+    onThemeChange?: (theme: ThemeMode) => void;
+    /** Required accessible name for the account-menu button. */
+    accountLabel: string;
+    /** Approved account-menu content rendered from the Avatar trigger. */
+    accountMenu: AccountMenuProps;
+    /** Optional account image passed to Avatar. */
+    accountImageSrc?: string;
+    /** One- or two-grapheme Avatar fallback. */
+    accountInitials?: string;
+    /** Called when the account-menu button is activated. */
+    onAccountClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Controlled account-menu visibility. */
+    accountMenuOpen?: DropdownMenuProps["open"];
+    /** Initial account-menu visibility for uncontrolled use. */
+    defaultAccountMenuOpen?: DropdownMenuProps["defaultOpen"];
+    /** Called when account-menu visibility changes. */
+    onAccountMenuOpenChange?: DropdownMenuProps["onOpenChange"];
+    /** Additional native attributes for the account-menu button. */
+    accountButtonProps?: AccountButtonProps;
+};
+/**
+ * Persistent Home-level application anchor. Workspace structure, project
+ * context, search, creation, and page-local actions intentionally stay out of
+ * this composite.
+ */
+export declare const GlobalAppBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    /** Home destination used by the official Mithrl brand action. */
+    brandHref?: string;
+    /** Accessible destination name for the brand action. */
+    brandLabel?: string;
+    /** Additional native attributes for the brand link. */
+    brandLinkProps?: BrandLinkProps;
+    /** Controlled active theme. */
+    theme?: ThemeMode;
+    /** Initial active theme for uncontrolled use. */
+    defaultTheme?: ThemeMode;
+    /** Called when the theme switch requests a new mode. */
+    onThemeChange?: (theme: ThemeMode) => void;
+    /** Required accessible name for the account-menu button. */
+    accountLabel: string;
+    /** Approved account-menu content rendered from the Avatar trigger. */
+    accountMenu: AccountMenuProps;
+    /** Optional account image passed to Avatar. */
+    accountImageSrc?: string;
+    /** One- or two-grapheme Avatar fallback. */
+    accountInitials?: string;
+    /** Called when the account-menu button is activated. */
+    onAccountClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Controlled account-menu visibility. */
+    accountMenuOpen?: DropdownMenuProps["open"];
+    /** Initial account-menu visibility for uncontrolled use. */
+    defaultAccountMenuOpen?: DropdownMenuProps["defaultOpen"];
+    /** Called when account-menu visibility changes. */
+    onAccountMenuOpenChange?: DropdownMenuProps["onOpenChange"];
+    /** Additional native attributes for the account-menu button. */
+    accountButtonProps?: AccountButtonProps;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,41 @@
+import { type VariantProps } from "class-variance-authority";
+import type { ComponentType, HTMLAttributes, SVGProps } from "react";
+
+export declare const iconVariants: (props?: ({
+    size?: "default" | "large" | "medium" | "small" | "xsmall" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type IconSize = NonNullable<VariantProps<typeof iconVariants>["size"]>;
+/**
+ * Component type that matches Lucide's React icon components. Any
+ * `lucide-react` glyph satisfies this contract; custom SVG components can
+ * conform by forwarding standard SVG attributes.
+ */
+export type IconGlyphComponent = ComponentType<SVGProps<SVGSVGElement> & {
+    size?: string | number;
+    strokeWidth?: string | number;
+    absoluteStrokeWidth?: boolean;
+}>;
+export type IconProps = Omit<HTMLAttributes<HTMLSpanElement>, "aria-label" | "aria-hidden" | "role"> & VariantProps<typeof iconVariants> & {
+    /**
+     * Approved Lucide glyph component (or any SVG component with a
+     * compatible signature). Mirrors the Figma "Instance Swap" contract.
+     */
+    glyph: IconGlyphComponent;
+    /**
+     * Accessible name. When present the wrapper is exposed as `role="img"`
+     * with `aria-label={label}`. When omitted the wrapper is decorative and
+     * hidden from assistive technology — the correct default for icons that
+     * sit next to a visible label.
+     */
+    label?: string;
+};
+/**
+ * A size-constrained, semantically colored wrapper around an approved
+ * Lucide glyph. Icon is visual content only; interactive behavior belongs
+ * to the owning control (Button, IconButton, link).
+ *
+ * Color follows the design system contract: the SVG uses `currentColor`
+ * so the owning component or a standalone semantic context provides color
+ * through CSS.
+ */
+export declare function Icon({ glyph: Glyph, size, label, className, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon-button/IconButton.d.ts

@@ -0,0 +1,57 @@
+import { type VariantProps } from "class-variance-authority";
+import { type ButtonHTMLAttributes } from "react";
+import { type IconGlyphComponent } from "../icon/Icon";
+
+export declare const iconButtonVariants: (props?: ({
+    variant?: "brand" | "destructive" | "ghost" | "outline" | "primary" | "secondary" | null | undefined;
+    size?: "comfortable" | "compact" | "default" | "large" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type IconButtonVariant = NonNullable<VariantProps<typeof iconButtonVariants>["variant"]>;
+export type IconButtonSize = NonNullable<VariantProps<typeof iconButtonVariants>["size"]>;
+export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "aria-label"> & VariantProps<typeof iconButtonVariants> & {
+    /**
+     * Approved Lucide glyph rendered inside the circular container. Mirrors
+     * the Figma "Icon" Instance Swap contract. Ignored while `loading` is
+     * `true` — the component renders `LoaderCircle` instead.
+     */
+    icon: IconGlyphComponent;
+    /**
+     * Required accessible name. Icon Button has no visible text, so the
+     * accessible label is the only carrier of intent for assistive tech.
+     */
+    "aria-label": string;
+    /**
+     * Replaces the icon with a rotating `LoaderCircle`, blocks activation,
+     * and exposes `aria-busy="true"`. Preserves circle and target geometry.
+     */
+    loading?: boolean;
+};
+/**
+ * A circular, icon-only action control. Owns interactive semantics,
+ * state, focus, and loading behavior. Composes the `Icon` primitive for
+ * the glyph so stroke and sizing follow the design system contract.
+ *
+ * Icon Button is a separate primitive from Button (which requires a
+ * visible text label) and Icon (which is non-interactive visual content).
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "children"> & VariantProps<(props?: ({
+    variant?: "brand" | "destructive" | "ghost" | "outline" | "primary" | "secondary" | null | undefined;
+    size?: "comfortable" | "compact" | "default" | "large" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    /**
+     * Approved Lucide glyph rendered inside the circular container. Mirrors
+     * the Figma "Icon" Instance Swap contract. Ignored while `loading` is
+     * `true` — the component renders `LoaderCircle` instead.
+     */
+    icon: IconGlyphComponent;
+    /**
+     * Required accessible name. Icon Button has no visible text, so the
+     * accessible label is the only carrier of intent for assistive tech.
+     */
+    "aria-label": string;
+    /**
+     * Replaces the icon with a rotating `LoaderCircle`, blocks activation,
+     * and exposes `aria-busy="true"`. Preserves circle and target geometry.
+     */
+    loading?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/link/Link.d.ts

@@ -0,0 +1,39 @@
+import { type VariantProps } from "class-variance-authority";
+import { type AnchorHTMLAttributes, type ReactNode } from "react";
+import { type IconGlyphComponent } from "../icon/Icon";
+
+export declare const linkVariants: (props?: ({
+    context?: "inline" | "standalone" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type LinkContext = NonNullable<VariantProps<typeof linkVariants>["context"]>;
+export type LinkPreviewState = "hover" | "focus" | "pressed";
+type NativeLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "aria-disabled" | "children" | "href"> & {
+    /** A Link always identifies a native anchor destination. */
+    href: string;
+    /** Required visible destination label or inline text content. */
+    children: ReactNode;
+    /** Storybook-only state hook used to review native CSS states. */
+    "data-preview-state"?: LinkPreviewState;
+};
+type InlineLinkProps = NativeLinkProps & {
+    context?: "inline";
+    leadingIcon?: never;
+    trailingIcon?: never;
+};
+type StandaloneLinkProps = NativeLinkProps & ({
+    context: "standalone";
+    leadingIcon?: IconGlyphComponent;
+    trailingIcon?: never;
+} | {
+    context: "standalone";
+    leadingIcon?: never;
+    trailingIcon?: IconGlyphComponent;
+});
+export type LinkProps = InlineLinkProps | StandaloneLinkProps;
+/**
+ * A native anchor for navigation and resource destinations. Inline and
+ * Standalone share the same semantic color and underline contract; optional
+ * decorative icons are limited to one slot on Standalone links.
+ */
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/components/panel-tabs/PanelTabs.d.ts

@@ -0,0 +1,46 @@
+import { type HTMLAttributes } from "react";
+import { type IconGlyphComponent } from "../icon/Icon";
+
+export type PanelTabItem = {
+    /** Stable value used for selection, closing, and change events. */
+    value: string;
+    /** Visible label and accessible name for the tab. */
+    label: string;
+    /** Optional decorative leading glyph from the approved Icon inventory. */
+    icon?: IconGlyphComponent;
+    /** Shows the independent close affordance when `onClose` is provided. */
+    closable?: boolean;
+    /** Optional explicit label for the close action. */
+    closeLabel?: string;
+    /** ID of the panel controlled by this tab. */
+    panelId?: string;
+    /** Optional explicit tab ID used by the associated panel. */
+    id?: string;
+};
+export type PanelTabsProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> & {
+    items: readonly PanelTabItem[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial selected value for uncontrolled use. */
+    defaultValue?: string;
+    /** Called after a tab is selected. */
+    onValueChange?: (value: string) => void;
+    /** Called when a close affordance or the Delete key requests removal. */
+    onClose?: (value: string) => void;
+};
+/**
+ * Compact, scrollable tabs for switching among open tools, artifacts, files,
+ * and analyses inside a panel. Close is an independent action rather than a
+ * nested button inside the tab control.
+ */
+export declare const PanelTabs: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> & {
+    items: readonly PanelTabItem[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial selected value for uncontrolled use. */
+    defaultValue?: string;
+    /** Called after a tab is selected. */
+    onValueChange?: (value: string) => void;
+    /** Called when a close affordance or the Delete key requests removal. */
+    onClose?: (value: string) => void;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/progress-indicator/ProgressIndicator.d.ts

@@ -0,0 +1,28 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes } from "react";
+
+export declare const progressIndicatorVariants: (props?: ({
+    size?: "default" | "small" | "xsmall" | null | undefined;
+    tone?: "brand" | "neutral" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ProgressIndicatorSize = NonNullable<VariantProps<typeof progressIndicatorVariants>["size"]>;
+export type ProgressIndicatorTone = NonNullable<VariantProps<typeof progressIndicatorVariants>["tone"]>;
+type RestrictedProgressIndicatorAttribute = "aria-atomic" | "aria-busy" | "aria-hidden" | "aria-label" | "aria-live" | "children" | "onClick" | "onDoubleClick" | "onKeyDown" | "onKeyUp" | "role" | "tabIndex";
+type ProgressIndicatorBaseProps = Omit<HTMLAttributes<HTMLSpanElement>, RestrictedProgressIndicatorAttribute> & VariantProps<typeof progressIndicatorVariants>;
+type InformativeProgressIndicatorProps = {
+    /** Concise accessible name announced through the status live region. */
+    label: string;
+    decorative?: false;
+};
+type DecorativeProgressIndicatorProps = {
+    /** Use only when nearby visible text already communicates progress. */
+    decorative: true;
+    label?: never;
+};
+export type ProgressIndicatorProps = ProgressIndicatorBaseProps & (InformativeProgressIndicatorProps | DecorativeProgressIndicatorProps);
+/**
+ * Circular indeterminate progress feedback. Informative and decorative use
+ * are intentionally mutually exclusive so loading semantics stay explicit.
+ */
+export declare const ProgressIndicator: import("react").ForwardRefExoticComponent<ProgressIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/project-card/ProjectCard.d.ts

@@ -0,0 +1,59 @@
+import { type AnchorHTMLAttributes } from "react";
+
+export type ProjectCardPresentation = "grid" | "list";
+export type ProjectCardPreviewArtwork = "rings" | "split-response" | "mini-matrices" | "dot-series" | "broken-chain" | "orbital-pairs" | "pulse-clusters" | "ladder-sequence" | "alternating-targets" | "offset-constellations" | "mirrored-waves" | "binary-colonies" | "crossing-signals" | "nested-cadence" | "fragmented-axis";
+export type ProjectCardPreviewState = "hover" | "pressed" | "focus-visible";
+export type ProjectCardActivity = {
+    kind: "created" | "updated";
+    /** Localized human-readable date, without the Created/Updated prefix. */
+    label: string;
+    /** Complete machine-readable timestamp for the semantic time element. */
+    dateTime: string;
+};
+export type ProjectCardCreator = {
+    name: string;
+    initials?: string;
+    imageSrc?: string;
+};
+export type ProjectCardMetric = {
+    label: string;
+    value: number | string;
+};
+type NativeProjectCardProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "className" | "href" | "title">;
+export type ProjectCardProps = NativeProjectCardProps & {
+    /** Native title tooltips conflict with the compact creator Tooltip. */
+    title?: never;
+    href: string;
+    name: string;
+    presentation?: ProjectCardPresentation;
+    previewArtwork: ProjectCardPreviewArtwork;
+    activity: ProjectCardActivity;
+    description?: string;
+    creator?: ProjectCardCreator;
+    metrics?: readonly ProjectCardMetric[];
+    headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+    className?: string;
+    /** Review-only forced state used by Storybook and visual regression tests. */
+    "data-preview-state"?: ProjectCardPreviewState;
+};
+/**
+ * One native project destination for Home. Collection layout, project scope,
+ * sorting, and Grid/List switching remain owned by Project Library.
+ */
+export declare const ProjectCard: import("react").ForwardRefExoticComponent<NativeProjectCardProps & {
+    /** Native title tooltips conflict with the compact creator Tooltip. */
+    title?: never;
+    href: string;
+    name: string;
+    presentation?: ProjectCardPresentation;
+    previewArtwork: ProjectCardPreviewArtwork;
+    activity: ProjectCardActivity;
+    description?: string;
+    creator?: ProjectCardCreator;
+    metrics?: readonly ProjectCardMetric[];
+    headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+    className?: string;
+    /** Review-only forced state used by Storybook and visual regression tests. */
+    "data-preview-state"?: ProjectCardPreviewState;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,23 @@
+import { type InputHTMLAttributes } from "react";
+
+export type RadioPreviewState = "hover" | "pressed" | "focus";
+export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "aria-checked" | "children" | "className" | "type"> & {
+    /** Class applied to the 28px visual root. */
+    className?: string;
+    /** Class applied directly to the native radio input. */
+    inputClassName?: string;
+    /** Storybook-only hook for reviewing non-persistent CSS states. */
+    "data-preview-state"?: RadioPreviewState;
+};
+/**
+ * Native form radio with the approved compact Mithrl visual. Visible labels,
+ * descriptions, validation, and group policy belong to the owning composition.
+ */
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-checked" | "children" | "className" | "type"> & {
+    /** Class applied to the 28px visual root. */
+    className?: string;
+    /** Class applied directly to the native radio input. */
+    inputClassName?: string;
+    /** Storybook-only hook for reviewing non-persistent CSS states. */
+    "data-preview-state"?: RadioPreviewState;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/segmented-tabs/SegmentedTabs.d.ts

@@ -0,0 +1,61 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes } from "react";
+import { type IconGlyphComponent } from "../icon/Icon";
+
+export declare const segmentedTabsVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SegmentedTabsSize = NonNullable<VariantProps<typeof segmentedTabsVariants>["size"]>;
+export type SegmentedTabsActivationMode = "automatic" | "manual";
+export type SegmentedTabItem = {
+    /** Stable value used for selection and change events. */
+    value: string;
+    /** Visible label and accessible name for the tab. */
+    label: string;
+    /** Optional decorative leading glyph from the approved Icon inventory. */
+    icon?: IconGlyphComponent;
+    /** Optional short count or compact status value. */
+    badge?: string | number;
+    /** Prevents selection and removes the tab from arrow-key navigation. */
+    disabled?: boolean;
+    /** ID of the panel controlled by this tab. */
+    panelId?: string;
+    /** Optional explicit tab ID used by the associated panel. */
+    id?: string;
+};
+type SegmentedTabsBaseProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> & VariantProps<typeof segmentedTabsVariants> & {
+    items: readonly SegmentedTabItem[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial selected value for uncontrolled use. */
+    defaultValue?: string;
+    /** Called after an enabled tab is selected. */
+    onValueChange?: (value: string) => void;
+    /** Selection follows focus by default. Manual mode waits for Enter/Space. */
+    activationMode?: SegmentedTabsActivationMode;
+    /** Distributes the items equally across the available width. */
+    fullWidth?: boolean;
+};
+export type SegmentedTabsProps = SegmentedTabsBaseProps;
+/**
+ * Single-select local view navigation with roving keyboard focus.
+ *
+ * Segmented Tabs changes the active panel inside one local context. It is not
+ * a filter, multi-select control, action group, or top-level navigation.
+ */
+export declare const SegmentedTabs: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> & VariantProps<(props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    items: readonly SegmentedTabItem[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial selected value for uncontrolled use. */
+    defaultValue?: string;
+    /** Called after an enabled tab is selected. */
+    onValueChange?: (value: string) => void;
+    /** Selection follows focus by default. Manual mode waits for Enter/Space. */
+    activationMode?: SegmentedTabsActivationMode;
+    /** Distributes the items equally across the available width. */
+    fullWidth?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,40 @@
+import { type VariantProps } from "class-variance-authority";
+import { type ReactNode, type SelectHTMLAttributes } from "react";
+
+export declare const selectVariants: (props?: ({
+    size?: "comfortable" | "large" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SelectSize = NonNullable<VariantProps<typeof selectVariants>["size"]>;
+export type SelectPreviewState = "hover" | "focus";
+export type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "className" | "multiple" | "size"> & {
+    /** Multi-select is outside v1 and must not be forwarded at runtime. */
+    multiple?: never;
+    /** Approved control geometry. Native multi-row `size` is outside v1. */
+    size?: SelectSize;
+    /** Decorative, non-interactive visual shown before the selected value. */
+    leadingVisual?: ReactNode;
+    /** Class applied to the visual root. */
+    className?: string;
+    /** Class applied directly to the native select element. */
+    selectClassName?: string;
+    /** Storybook-only hook used to review non-persistent CSS states. */
+    "data-preview-state"?: SelectPreviewState;
+};
+/**
+ * A native single-select control. Labels, supporting messages, validation
+ * timing, and product-specific widths belong to the containing composition.
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement>, "className" | "multiple" | "size"> & {
+    /** Multi-select is outside v1 and must not be forwarded at runtime. */
+    multiple?: never;
+    /** Approved control geometry. Native multi-row `size` is outside v1. */
+    size?: SelectSize;
+    /** Decorative, non-interactive visual shown before the selected value. */
+    leadingVisual?: ReactNode;
+    /** Class applied to the visual root. */
+    className?: string;
+    /** Class applied directly to the native select element. */
+    selectClassName?: string;
+    /** Storybook-only hook used to review non-persistent CSS states. */
+    "data-preview-state"?: SelectPreviewState;
+} & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/components/separator/Separator.d.ts

@@ -0,0 +1,35 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes } from "react";
+
+export declare const separatorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    emphasis?: "default" | "soft" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SeparatorOrientation = NonNullable<VariantProps<typeof separatorVariants>["orientation"]>;
+export type SeparatorEmphasis = NonNullable<VariantProps<typeof separatorVariants>["emphasis"]>;
+export type SeparatorProps = Omit<HTMLAttributes<HTMLDivElement>, "aria-hidden" | "aria-orientation" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "children" | "role" | "tabIndex"> & {
+    /** Direction in which the one-pixel rule extends. */
+    orientation?: SeparatorOrientation;
+    /** Semantic color treatment for the rule. */
+    emphasis?: SeparatorEmphasis;
+    /**
+     * Removes the rule from the accessibility tree by default. Set to false
+     * only when the division itself conveys a meaningful content grouping.
+     */
+    decorative?: boolean;
+};
+/**
+ * A static one-pixel boundary between adjacent content groups or regions.
+ * Separator owns no spacing or interaction and is decorative by default.
+ */
+export declare const Separator: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "aria-hidden" | "aria-orientation" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "children" | "role" | "tabIndex"> & {
+    /** Direction in which the one-pixel rule extends. */
+    orientation?: SeparatorOrientation;
+    /** Semantic color treatment for the rule. */
+    emphasis?: SeparatorEmphasis;
+    /**
+     * Removes the rule from the accessibility tree by default. Set to false
+     * only when the division itself conveys a meaningful content grouping.
+     */
+    decorative?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,17 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes } from "react";
+
+export declare const skeletonVariants: (props?: ({
+    radius?: "full" | "large" | "medium" | "small" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SkeletonRadius = NonNullable<VariantProps<typeof skeletonVariants>["radius"]>;
+type RestrictedSkeletonAttribute = "aria-atomic" | "aria-busy" | "aria-hidden" | "aria-label" | "aria-live" | "children" | "onClick" | "onDoubleClick" | "onKeyDown" | "onKeyUp" | "role" | "tabIndex";
+export type SkeletonProps = Omit<HTMLAttributes<HTMLDivElement>, RestrictedSkeletonAttribute> & VariantProps<typeof skeletonVariants>;
+/**
+ * Decorative loading surface. The owning composition supplies width, height,
+ * busy state, and one accessible loading message for the region.
+ */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, RestrictedSkeletonAttribute> & VariantProps<(props?: ({
+    radius?: "full" | "large" | "medium" | "small" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/standard-tabs/StandardTabs.d.ts

@@ -0,0 +1,54 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes } from "react";
+
+export declare const standardTabsVariants: (props?: ({
+    size?: "compact" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type StandardTabsSize = NonNullable<VariantProps<typeof standardTabsVariants>["size"]>;
+export type StandardTabsActivationMode = "automatic" | "manual";
+export type StandardTabItem = {
+    /** Stable value used for selection and change events. */
+    value: string;
+    /** Required visible label and accessible name. */
+    label: string;
+    /** Prevents selection and removes the item from roving keyboard focus. */
+    disabled?: boolean;
+    /** ID of the tabpanel controlled by this item. */
+    panelId?: string;
+    /** Optional explicit tab ID for the tabpanel's aria-labelledby. */
+    id?: string;
+};
+type StandardTabsBaseProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> & VariantProps<typeof standardTabsVariants> & {
+    items: readonly StandardTabItem[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial selected value for uncontrolled use. */
+    defaultValue?: string;
+    /** Called after an enabled tab is selected. */
+    onValueChange?: (value: string) => void;
+    /** Selection follows focus by default. Manual mode waits for Enter/Space. */
+    activationMode?: StandardTabsActivationMode;
+    /** Gives every item an equal share of the available owner width. */
+    fullWidth?: boolean;
+};
+export type StandardTabsProps = StandardTabsBaseProps;
+/**
+ * Quiet, horizontal single-select navigation for stable peer content views.
+ * The consumer owns the associated tabpanels and their mounting behavior.
+ */
+export declare const StandardTabs: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> & VariantProps<(props?: ({
+    size?: "compact" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    items: readonly StandardTabItem[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial selected value for uncontrolled use. */
+    defaultValue?: string;
+    /** Called after an enabled tab is selected. */
+    onValueChange?: (value: string) => void;
+    /** Selection follows focus by default. Manual mode waits for Enter/Space. */
+    activationMode?: StandardTabsActivationMode;
+    /** Gives every item an equal share of the available owner width. */
+    fullWidth?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};