@dimasbaguspm/versaur 0.0.0

package/dist/components/tabs/helpers.d.ts

@@ -0,0 +1,8 @@
+export declare const tabsTriggerVariants: (props?: ({
+    active?: boolean | null | undefined;
+    color?: "primary" | "secondary" | "tertiary" | "ghost" | "neutral" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const tabsContainerVariants: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const tabsIndicatorVariants: (props?: ({
+    color?: "primary" | "secondary" | "tertiary" | "ghost" | "neutral" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,2 @@
+export { Tabs } from './tabs';
+export * from './types';

package/dist/components/tabs/tabs.atoms.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { TabsTriggerProps, TabsIndicatorProps } from './types';
+/**
+ * TabsTrigger: Individual tab button
+ */
+export declare const TabsTrigger: React.FC<TabsTriggerProps>;
+/**
+ * TabsIndicator: Animated underline indicator for active tab
+ */
+export declare const TabsIndicator: React.FC<TabsIndicatorProps>;

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TabsRootProps } from './types';
+export declare const Tabs: React.FC<TabsRootProps> & {
+    Trigger: React.FC<import('./types').TabsTriggerProps>;
+};

package/dist/components/tabs/tabs.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from './tabs';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+/**
+ * Basic vertical tabs
+ */
+export declare const Basic: Story;
+/**
+ * Tabs with color variants
+ */
+export declare const ColorVariants: Story;
+/**
+ * Tabs with scroll behavior
+ */
+export declare const ScrollBehavior: Story;

package/dist/components/tabs/types.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode, HTMLAttributes } from 'react';
+/**
+ * TabsContextValue: Shared state for compound/context Tabs
+ */
+export interface TabsContextValue {
+    /** Currently active tab value */
+    activeTab: string;
+    /** Set active tab */
+    setActiveTab: (tab: string) => void;
+    /** Default color for triggers */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral';
+}
+/**
+ * TabsRootProps: Props for Tabs root
+ */
+export interface TabsRootProps extends HTMLAttributes<HTMLDivElement> {
+    /** Controlled tab value */
+    value: string;
+    /** Callback when tab changes */
+    onValueChange: (tab: string) => void;
+    /** Color for triggers */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral';
+    /** Children: Tabs.Trigger */
+    children: ReactNode;
+}
+/**
+ * TabsTriggerProps: Individual tab button
+ */
+export interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    /** Tab value (unique string) */
+    value: string;
+    /** Children: tab label */
+    children: ReactNode;
+}
+/**
+ * TabsIndicatorProps: Animated underline indicator for active tab
+ */
+export interface TabsIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    left: number;
+    width: number;
+}

package/dist/components/tabs/use-tab-indicator.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+/**
+ * useTabIndicatorAndFocus
+ * Handles indicator position and focusing the active tab in a tablist
+ * @param value - active tab value
+ * @param containerRef - ref to the tablist container
+ * @param children - tablist children (for effect dependency)
+ * @returns { left: number, width: number }
+ */
+export declare function useTabIndicatorAndFocus(value: string, containerRef: React.RefObject<HTMLDivElement | null>, children: React.ReactNode): {
+    left: number;
+    width: number;
+};

package/dist/components/tabs.js

@@ -0,0 +1,4 @@
+import { T as r } from "../tabs-C8aRKfxS.js";
+export {
+  r as Tabs
+};

package/dist/components/text/helpers.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Text variants for Versaur design system
+ * Supports color, underline, and capitalization
+ */
+/**
+ * Extended text variants for Versaur design system
+ * Adds support for align, italic, clamp, ellipsis, fontWeight, fontSize, lineHeight
+ */
+export declare const textVariants: (props?: ({
+    color?: "primary" | "secondary" | "tertiary" | "ghost" | "neutral" | "success" | "info" | "warning" | "danger" | null | undefined;
+    hasUnderline?: boolean | null | undefined;
+    isCapitalize?: boolean | null | undefined;
+    align?: "center" | "right" | "left" | "justify" | null | undefined;
+    italic?: boolean | null | undefined;
+    clamp?: 2 | 1 | "none" | 3 | 4 | 5 | null | undefined;
+    ellipsis?: boolean | null | undefined;
+    as?: "span" | "label" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,2 @@
+export { Text } from './text';
+export type * from './types';

package/dist/components/text/text.d.ts

@@ -0,0 +1,7 @@
+import { TextProps } from './types';
+/**
+ * Text component for Versaur UI
+ * Provides semantic typography, color, underline, and capitalization support
+ * @example <Text as="h1" color="primary" hasUnderline isCapitalize>bar</Text>
+ */
+export declare const Text: import('react').ForwardRefExoticComponent<TextProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/text/text.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Text } from './text';
+declare const meta: Meta<typeof Text>;
+export default meta;
+type Story = StoryObj<typeof Text>;
+export declare const Default: Story;
+export declare const Heading: Story;
+export declare const SubHeading: Story;
+export declare const Paragraph: Story;
+export declare const ItalicText: Story;
+export declare const UnderlineCapitalize: Story;
+export declare const ClampEllipsis: Story;
+export declare const ColorVariants: Story;
+export declare const AsVariants: Story;

package/dist/components/text/types.d.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes, ElementType, ReactNode } from 'react';
+/**
+ * TextProps defines the props for the Text component
+ * @property as - HTML element to render (e.g., 'span', 'h1', 'p')
+ * @property color - Versaur color system (primary, secondary, tertiary, ghost, neutral, success, info, warning, danger)
+ * @property hasUnderline - Whether to underline the text
+ * @property isCapitalize - Whether to capitalize the text
+ * @property className - Additional CSS classes
+ * @property children - Text content
+ */
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    /** HTML element to render (e.g., 'span', 'h1', 'p') */
+    as?: ElementType;
+    /** Versaur color system */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger';
+    /** Underline text */
+    hasUnderline?: boolean;
+    /** Capitalize text */
+    isCapitalize?: boolean;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /** Italic text */
+    italic?: boolean;
+    /** Clamp lines (1-5) or none */
+    clamp?: 1 | 2 | 3 | 4 | 5 | 'none';
+    /** Ellipsis (truncate) */
+    ellipsis?: boolean;
+    /** Text content */
+    children: ReactNode;
+}

package/dist/components/text-input/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare const textInputVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "neutral" | "success" | "info" | "warning" | "danger" | "primary-outline" | "secondary-outline" | "tertiary-outline" | "ghost-outline" | "neutral-outline" | "success-outline" | "info-outline" | "warning-outline" | "danger-outline" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/text-input/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from './text-input';
+export type { TextInputProps } from './types';

package/dist/components/text-input/text-input.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { TextInputProps } from './types';
+/**
+ * TextInput component for Versaur UI
+ *
+ * Provides a styled input field with semantic color, variant, error, and disabled support
+ * Follows browser standards and accessibility best practices
+ */
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/text-input/text-input.stories.d.ts

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TextInput } from './text-input';
+declare const meta: Meta<typeof TextInput>;
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+export declare const Default: Story;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const WithLeftContent: Story;
+export declare const WithRightContent: Story;
+export declare const WithBothContent: Story;
+export declare const Outline: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const AllVariants: Story;
+export declare const WithLabelAndCustomId: Story;
+export declare const LabelWithError: Story;

package/dist/components/text-input/types.d.ts

@@ -0,0 +1,33 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+/**
+ * Props for the TextInput component
+ */
+export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * Visual style variant supporting Versaur color system
+     * Core variants: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
+     * Semantic variants: success, info, warning, danger
+     * Each variant supports outline form for flexible design expression
+     */
+    variant?: 'primary' | 'primary-outline' | 'secondary' | 'secondary-outline' | 'tertiary' | 'tertiary-outline' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'success' | 'success-outline' | 'info' | 'info-outline' | 'warning' | 'warning-outline' | 'danger' | 'danger-outline';
+    /**
+     * Label text to display above the input
+     */
+    label: ReactNode;
+    /**
+     * Optional content to display inside the input (left)
+     */
+    leftContent?: ReactNode;
+    /**
+     * Optional content to display inside the input (right)
+     */
+    rightContent?: ReactNode;
+    /**
+     * Helper text to display below the input
+     */
+    helperText?: ReactNode;
+    /**
+     * Error message for invalid state
+     */
+    error?: ReactNode;
+}

package/dist/components/text-input.js

@@ -0,0 +1,4 @@
+import { T as o } from "../text-input-BsWvUk_H.js";
+export {
+  o as TextInput
+};

package/dist/components/text.js

@@ -0,0 +1,4 @@
+import { T as r } from "../text-B7e-au41.js";
+export {
+  r as Text
+};

package/dist/components/textarea-input/helpers.d.ts

@@ -0,0 +1,4 @@
+export declare const textAreaInputVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "neutral" | "success" | "info" | "warning" | "danger" | "primary-outline" | "secondary-outline" | "tertiary-outline" | "ghost-outline" | "neutral-outline" | "success-outline" | "info-outline" | "warning-outline" | "danger-outline" | null | undefined;
+    fieldSizing?: "content" | "fixed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/textarea-input/index.d.ts

@@ -0,0 +1,2 @@
+export { TextAreaInput } from './textarea-input';
+export type { TextAreaInputProps } from './types';

package/dist/components/textarea-input/textarea-input.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { TextAreaInputProps } from './types';
+/**
+ * TextAreaInput component for Versaur UI
+ *
+ * Provides a styled textarea field with semantic color, variant, error, and disabled support
+ * Supports field-sizing for auto-resizing and configurable rows
+ * Follows browser standards and accessibility best practices
+ */
+export declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/textarea-input/textarea-input.stories.d.ts

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TextAreaInput } from './textarea-input';
+/**
+ * TextAreaInput provides a styled textarea field for multi-line text input.
+ * It supports field-sizing for auto-resizing, configurable minimum height,
+ * and all the variant styles from the Versaur design system.
+ */
+declare const meta: Meta<typeof TextAreaInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Default textarea with primary variant and fixed sizing
+ */
+export declare const Default: Story;
+/**
+ * Auto-resizing textarea that grows with content using field-sizing: content
+ */
+export declare const AutoResize: Story;
+/**
+ * Custom row configuration for larger text areas
+ */
+export declare const CustomRows: Story;
+/**
+ * All color variants showcasing the Versaur design system
+ */
+export declare const Variants: Story;
+/**
+ * Outline variants for subtle styling
+ */
+export declare const OutlineVariants: Story;
+/**
+ * Semantic variants for different states and contexts
+ */
+export declare const SemanticVariants: Story;
+/**
+ * Error state with validation message
+ */
+export declare const WithError: Story;
+/**
+ * With helper text for additional guidance
+ */
+export declare const WithHelperText: Story;
+/**
+ * Disabled state for read-only scenarios
+ */
+export declare const Disabled: Story;
+/**
+ * Form example showing practical usage in a contact form
+ */
+export declare const ContactForm: Story;

package/dist/components/textarea-input/types.d.ts

@@ -0,0 +1,40 @@
+import { TextareaHTMLAttributes, ReactNode } from 'react';
+/**
+ * Props for the TextAreaInput component
+ */
+export interface TextAreaInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    /**
+     * Visual style variant supporting Versaur color system
+     * Core variants: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
+     * Semantic variants: success, info, warning, danger
+     * Each variant supports outline form for flexible design expression
+     */
+    variant?: 'primary' | 'primary-outline' | 'secondary' | 'secondary-outline' | 'tertiary' | 'tertiary-outline' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'success' | 'success-outline' | 'info' | 'info-outline' | 'warning' | 'warning-outline' | 'danger' | 'danger-outline';
+    /**
+     * Label text to display above the textarea
+     */
+    label: ReactNode;
+    /**
+     * Helper text to display below the textarea
+     */
+    helperText?: ReactNode;
+    /**
+     * Error message for invalid state
+     */
+    error?: ReactNode;
+    /**
+     * Minimum number of rows for the textarea
+     */
+    minRows?: number;
+    /**
+     * Maximum number of rows for the textarea
+     * Only applies when fieldSizing is 'fixed'
+     */
+    maxRows?: number;
+    /**
+     * Enable field-sizing CSS property for auto-resizing
+     * 'content' - Auto-resize to fit content (ignores maxRows)
+     * 'fixed' - Fixed size with manual resize handle (respects minRows/maxRows)
+     */
+    fieldSizing?: 'content' | 'fixed';
+}

package/dist/components/textarea-input.js

@@ -0,0 +1,4 @@
+import { T as t } from "../textarea-input-DZExXEE8.js";
+export {
+  t as TextAreaInput
+};

package/dist/components/tile/helpers.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Tile component variants using class-variance-authority
+ */
+export declare const tileVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "neutral" | "success" | "info" | "warning" | "danger" | "white" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+    shape?: "square" | "rounded" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,2 @@
+export { Tile } from './tile';
+export type { TileProps } from './types';

package/dist/components/tile/tile.d.ts

@@ -0,0 +1,11 @@
+import { TileProps } from './types';
+/**
+ * Tile component - A flexible box container with various styling options
+ *
+ * Features:
+ * - Multiple color variants with soft backgrounds
+ * - Configurable padding sizes
+ * - Rounded or square shapes
+ * - Accessible and semantic
+ */
+export declare const Tile: import('react').ForwardRefExoticComponent<TileProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/tile/tile.stories.d.ts

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tile } from './tile';
+/**
+ * The Tile component is a flexible box container that provides a foundation for
+ * content layouts. It offers multiple color variants with soft backgrounds,
+ * configurable padding sizes, and shape options for rounded or square corners.
+ * Perfect for creating cards, panels, sections, and other content containers.
+ */
+declare const meta: Meta<typeof Tile>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Default tile with white background and medium padding
+ */
+export declare const Default: Story;
+/**
+ * All available color variants demonstrating the soft color palette
+ */
+export declare const Variants: Story;
+/**
+ * Different padding sizes from extra small to extra large
+ */
+export declare const Sizes: Story;
+/**
+ * Shape options: rounded corners (default) vs square corners
+ */
+export declare const Shapes: Story;
+/**
+ * Practical use case: Information card with content and styling
+ */
+export declare const InfoCard: Story;
+/**
+ * Dashboard-style layout using multiple tiles
+ */
+export declare const Dashboard: Story;

package/dist/components/tile/types.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { tileVariants } from './helpers';
+/**
+ * Props for the Tile component
+ */
+export interface TileProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof tileVariants> {
+    /**
+     * Visual appearance variant
+     * @default 'white'
+     */
+    variant?: 'white' | 'neutral' | 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'success' | 'info' | 'warning' | 'danger';
+    /**
+     * Size variant affecting padding
+     * @default 'md'
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Shape variant for border radius
+     * @default 'rounded'
+     */
+    shape?: 'rounded' | 'square';
+}

package/dist/components/tile.js

@@ -0,0 +1,4 @@
+import { T as r } from "../tile-Du7YciCG.js";
+export {
+  r as Tile
+};

package/dist/components/top-bar/helpers.d.ts

@@ -0,0 +1,26 @@
+/**
+ * TopBarRoot styles
+ */
+export declare const topBarRootStyles: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * TopBarLeading styles
+ */
+export declare const topBarLeadingStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * TopBarTrailing styles
+ */
+export declare const topBarTrailingStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * TopBarNavItem styles
+ */
+export declare const topBarNavItemStyles: (props?: ({
+    active?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * TopBarNav styles (container for navigation items)
+ */
+export declare const topBarNavStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * TopBarActions styles (container for action items)
+ */
+export declare const topBarActionsStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/top-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { TopBar } from './top-bar';
+export * from './types';

package/dist/components/top-bar/top-bar.atoms.d.ts

@@ -0,0 +1,6 @@
+import { TopBarLeadingProps, TopBarTrailingProps, TopBarNavItemProps } from './types';
+export declare const TopBarNav: import('react').ForwardRefExoticComponent<TopBarLeadingProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const TopBarActions: import('react').ForwardRefExoticComponent<TopBarTrailingProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const TopBarLeading: import('react').ForwardRefExoticComponent<TopBarLeadingProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const TopBarTrailing: import('react').ForwardRefExoticComponent<TopBarTrailingProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const TopBarNavItem: import('react').ForwardRefExoticComponent<TopBarNavItemProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/top-bar/top-bar.d.ts

@@ -0,0 +1,8 @@
+import { TopBarProps } from './types';
+export declare const TopBar: import('react').ForwardRefExoticComponent<TopBarProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Leading: import('react').ForwardRefExoticComponent<import('./types').TopBarLeadingProps & import('react').RefAttributes<HTMLDivElement>>;
+    Trailing: import('react').ForwardRefExoticComponent<import('./types').TopBarTrailingProps & import('react').RefAttributes<HTMLDivElement>>;
+    NavItem: import('react').ForwardRefExoticComponent<import('./types').TopBarNavItemProps & import('react').RefAttributes<HTMLDivElement>>;
+    Nav: import('react').ForwardRefExoticComponent<import('./types').TopBarLeadingProps & import('react').RefAttributes<HTMLDivElement>>;
+    Actions: import('react').ForwardRefExoticComponent<import('./types').TopBarTrailingProps & import('react').RefAttributes<HTMLDivElement>>;
+};

package/dist/components/top-bar/top-bar.stories.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./types').TopBarProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Leading: import('react').ForwardRefExoticComponent<import('./types').TopBarLeadingProps & import('react').RefAttributes<HTMLDivElement>>;
+        Trailing: import('react').ForwardRefExoticComponent<import('./types').TopBarTrailingProps & import('react').RefAttributes<HTMLDivElement>>;
+        NavItem: import('react').ForwardRefExoticComponent<import('./types').TopBarNavItemProps & import('react').RefAttributes<HTMLDivElement>>;
+        Nav: import('react').ForwardRefExoticComponent<import('./types').TopBarLeadingProps & import('react').RefAttributes<HTMLDivElement>>;
+        Actions: import('react').ForwardRefExoticComponent<import('./types').TopBarTrailingProps & import('react').RefAttributes<HTMLDivElement>>;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/top-bar/types.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from 'react';
+/**
+ * TopBarRoot - main container for TopBar layout
+ * Provides horizontal layout for desktop navigation/header
+ * Compound pattern: Leading, Trailing, NavItem
+ */
+export type TopBarProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * TopBarLeading - left section (logo, brand, nav)
+ */
+export interface TopBarLeadingProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom class for leading section
+     */
+    className?: string;
+}
+/**
+ * TopBarTrailing - right section (actions, profile, etc)
+ */
+export interface TopBarTrailingProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom class for trailing section
+     */
+    className?: string;
+}
+/**
+ * TopBarNavItem - navigation item (link, button, etc)
+ */
+export interface TopBarNavItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the nav item is active
+     */
+    active?: boolean;
+    /**
+     * Custom class for nav item
+     */
+    className?: string;
+}

package/dist/components/top-bar.js

@@ -0,0 +1,4 @@
+import { T as a } from "../top-bar-ErHvwR4K.js";
+export {
+  a as TopBar
+};