@skalar-saas/design-system 0.1.67

package/dist/shared/ui/Table/index.d.ts

@@ -0,0 +1,15 @@
+export { Table, type TableProps, type TableColumn, type TableAction, type SortDirection } from './Table';
+export { TableRoot, type TableRootProps } from './TableRoot';
+export { TableHeader, type TableHeaderProps } from './TableHeader';
+export { TableBody, type TableBodyProps } from './TableBody';
+export { TableRow, type TableRowProps } from './TableRow';
+export { TableCell, type TableCellProps } from './TableCell';
+export { TableColumnHeader, type TableColumnHeaderProps } from './TableColumnHeader';
+export { TableEmptyState, type TableEmptyStateProps } from './TableEmptyState';
+export { TableProvider, useTableContext, type TableContextValue, type TableLayoutOptions } from './TableContext';
+export { TablePagination } from './TablePagination';
+export { TableColumnFilter } from './TableColumnFilter';
+export { TableColumnVisibility } from './TableColumnVisibility';
+export type { TableConfig, TableColumnConfig, TableApiResponse, ColumnDataType, FilterType } from './types';
+export { parseTableConfig, parseColumnConfig, addSelectionColumn } from './configParser';
+export * from './mockData';

package/dist/shared/ui/Table/mockData.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Mock data simulating API responses for the Table component
+ * This demonstrates how the table would receive configuration and data from the backend
+ */
+import type { TableApiResponse, TableConfig } from './types';
+export interface ApiUser extends Record<string, unknown> {
+    id: number;
+    avatar: string;
+    name: string;
+    email: string;
+    status: 'active' | 'inactive' | 'pending';
+    role: string;
+    department: string;
+    createdAt: string;
+    loginCount: number;
+    isVerified: boolean;
+}
+export declare const usersTableConfig: TableConfig;
+export declare const usersTableData: ApiUser[];
+export declare const usersApiResponse: TableApiResponse<ApiUser>;
+export interface Product extends Record<string, unknown> {
+    id: number;
+    name: string;
+    category: string;
+    price: number;
+    stock: number;
+    isActive: boolean;
+    lastUpdated: string;
+    sku: string;
+}
+export declare const productsTableConfig: TableConfig;
+export declare const productsTableData: Product[];
+export declare const productsApiResponse: TableApiResponse<Product>;

package/dist/shared/ui/Table/types.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Types for JSON-based table configuration
+ * These types represent the structure that would come from the API
+ */
+export type ColumnDataType = 'text' | 'number' | 'date' | 'boolean' | 'avatar' | 'tag' | 'email' | 'custom';
+export type FilterType = 'text' | 'select' | 'date' | 'number' | 'boolean' | 'multiselect';
+/**
+ * Column configuration from API
+ */
+export interface TableColumnConfig {
+    /** Unique identifier for the column */
+    id: string;
+    /** Header label */
+    header: string;
+    /** Data type for automatic rendering */
+    dataType: ColumnDataType;
+    /** Enable sorting for this column */
+    sortable?: boolean;
+    /** Enable filtering for this column */
+    filterable?: boolean;
+    /** Filter configuration */
+    filterConfig?: {
+        type: FilterType;
+        options?: Array<{
+            label: string;
+            value: string | number;
+        }>;
+    };
+    /** Column width (optional) */
+    width?: string;
+    /** Component-specific props */
+    componentProps?: Record<string, unknown>;
+}
+/**
+ * Complete table configuration from API
+ */
+export interface TableConfig {
+    /** Table metadata */
+    title: string;
+    /** Column definitions */
+    columns: TableColumnConfig[];
+    /** Feature flags */
+    features?: {
+        selectable?: boolean;
+        virtualized?: boolean;
+        pagination?: boolean;
+        sorting?: boolean;
+        filtering?: boolean;
+    };
+    /** Pagination config */
+    pagination?: {
+        itemsPerPage: number;
+        currentPage: number;
+        totalPages: number;
+        totalItems: number;
+    };
+}
+/**
+ * API response structure
+ */
+export interface TableApiResponse<T = unknown> {
+    /** Table configuration */
+    config: TableConfig;
+    /** Actual data rows */
+    data: T[];
+}

package/dist/shared/ui/Tabs/Tabs.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+type TabVariant = "line" | "line-icons" | "line-full-width" | "pill" | "only-icon";
+/**
+ * Defines the shape for a single tab's data, including its label,
+ * icon (optional), and the content to be displayed.
+ */
+export interface TabItem {
+    id: number | string;
+    label: string;
+    icon?: React.ReactNode;
+    selectedIcon?: React.ReactNode;
+    content: React.ReactNode;
+}
+/**
+ * Defines the public API for the Tabs component.
+ */
+export interface TabsProps {
+    /** The visual style of the tabs. */
+    variant?: TabVariant;
+    /** An array of tab objects to be rendered. */
+    tabs: TabItem[];
+    /** Optional custom classes for the container. */
+    className?: string;
+    /** The index of the selected tab. */
+    selectedIndex?: number;
+    /** Callback fired when a tab is selected. */
+    onChange?: (index: number) => void;
+    /** Optional custom padding bottom for tab buttons. Accepts any CSS value (e.g., '8px', '12px', '1rem'). */
+    customPaddingBottom?: string;
+    /** Controls the spacing between tabs and content. Accepts size names or pixel values. Default is 'sm' (16px). */
+    contentSpacing?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | number;
+    /** Enable full height mode with flex layout. Useful for tabs that need to fill parent container. Default is false. */
+    fullHeight?: boolean;
+    /** Controls the gap between icon and label in tabs. Default is 4 (16px). Accepts values 0-8. */
+    iconLabelGap?: number;
+    /** Controls the size of icons in tabs. Default is 20px. */
+    iconSize?: number;
+    /** Show border on line variants. Default is true. */
+    showBorder?: boolean;
+    /** Fixed height for the tab list header in pixels. When set, tabs are vertically centered (e.g., 56 for 56px). */
+    headerHeight?: number;
+    /** Horizontal padding for individual tab buttons in pixels (e.g., 16 for 16px). */
+    tabPaddingX?: number;
+    /** Optional custom classes for the tab list. */
+    tabListClassName?: string;
+}
+/**
+ * @file An accessible and themeable tabs component for content navigation.
+ * @description This component renders a set of tabs and their corresponding content panels.
+ * It is built on top of Headless UI for robust accessibility, keyboard navigation, and state management.
+ * The visual appearance is controlled by the `variant` prop, which selects a style from a centralized configuration.
+ *
+ * @param {TabVariant} [variant='line'] - The visual style of the tabs.
+ * @param {TabItem[]} tabs - An array of objects, where each object defines a tab's label, icon, and content.
+ * @param {string} [className] - Optional CSS classes for additional styling on the main container.
+ * @returns {JSX.Element} The rendered Tabs element.
+ */
+export declare const Tabs: ({ variant, tabs, className, selectedIndex, onChange, customPaddingBottom, contentSpacing, fullHeight, iconLabelGap, iconSize, showBorder, headerHeight, tabPaddingX, tabListClassName, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Tabs/index.d.ts

@@ -0,0 +1 @@
+export { Tabs, type TabsProps, type TabItem } from './Tabs';

package/dist/shared/ui/Tag/Tag.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+type TagVariant = "primary" | "secondary" | "tertiary" | "quaternary" | "success" | "danger" | "warning" | "info";
+type TagSize = "xs" | "sm";
+/**
+ * Defines the public API for the Tag component, extending standard button element attributes.
+ */
+export interface TagProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: TagVariant;
+    size?: TagSize;
+    leadingIcon?: React.ReactNode | boolean;
+    trailingIcon?: React.ReactNode | boolean;
+    onTrailingIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    children: React.ReactNode;
+}
+/**
+ * @file A styled Tag component that functions as an interactive button.
+ * @description This component is typically used for filters, categories, or actions that might
+ * open a dropdown. It features a configurable leading icon and a fixed trailing icon.
+ * Its appearance is determined by a combination of `variant` and `size` props.
+ *
+ * @param {TagVariant} [variant='primary'] - The color theme of the tag.
+ * @param {TagSize} [size='sm'] - The size of the tag.
+ * @param {React.ReactNode | boolean} [leadingIcon=true] - If `true`, shows a default icon. Can also accept a custom icon component.
+ * @param {React.ReactNode} children - The text content of the tag.
+ * @param {boolean} [disabled] - If true, the tag will be non-interactive.
+ * @returns {JSX.Element} The rendered Tag element.
+ */
+export declare const Tag: ({ variant, size, leadingIcon, trailingIcon, onTrailingIconClick, children, className, disabled, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Tag/index.d.ts

@@ -0,0 +1 @@
+export { Tag } from './Tag';

package/dist/shared/ui/TextArea/TextArea.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+type TextAreaVariant = 'default' | 'danger';
+type TextAreaResize = 'none' | 'vertical' | 'horizontal' | 'both';
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    variant?: TextAreaVariant;
+    label?: string;
+    hint?: string;
+    resize?: TextAreaResize;
+    customFontWeight?: number;
+    customBackground?: string;
+}
+/**
+ * @file A styled multi-line text input component for forms.
+ * @description This component provides a complete textarea unit, including a label, hint text,
+ * and different visual states. Its appearance is controlled by the `variant` prop, which
+ * pulls styles from a centralized configuration object for easy theming and maintenance.
+ *
+ * @param {TextAreaVariant} [variant='default'] - The visual variant of the textarea.
+ * @param {string} [label] - The text label displayed above the textarea.
+ * @param {string} [hint] - Helper text or an error message displayed below.
+ * @param {TextAreaResize} [resize='vertical'] - Controls if and how the textarea can be resized.
+ * @param {number} [customFontWeight] - Custom font weight (numeric value like 400, 500, 600, 700, etc.). Overrides default weight.
+ * @param {string} [customBackground] - Custom background color (supports CSS color values or CSS variable names like 'med-em').
+ * @param {boolean} [disabled] - If true, the textarea will be non-interactive.
+ * @returns {JSX.Element} The rendered TextArea element.
+ */
+export declare const TextArea: ({ variant, label, hint, disabled, resize, className, customFontWeight, customBackground, ...props }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/TextArea/index.d.ts

@@ -0,0 +1 @@
+export { TextArea } from './TextArea';

package/dist/shared/ui/ThemeToggle/ThemeToggle.d.ts

@@ -0,0 +1,29 @@
+export interface ThemeToggleProps {
+    /** Current theme: 'dark' or 'light' */
+    theme?: 'dark' | 'light';
+    /** Callback to toggle theme */
+    onToggle: () => void;
+    /** Optional custom class name */
+    className?: string;
+}
+/**
+ * A simple theme toggle button component.
+ * This component is framework-agnostic and doesn't manage theme state internally.
+ *
+ * @example
+ * ```tsx
+ * // With next-themes
+ * import { useTheme } from 'next-themes';
+ *
+ * function MyComponent() {
+ *   const { theme, setTheme } = useTheme();
+ *   return (
+ *     <ThemeToggle
+ *       theme={theme as 'dark' | 'light'}
+ *       onToggle={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function ThemeToggle({ theme, onToggle, className }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/ThemeToggle/index.d.ts

@@ -0,0 +1 @@
+export { ThemeToggle } from './ThemeToggle';

package/dist/shared/ui/Toast/Toast.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from "react";
+export interface ToastProps {
+    title?: string;
+    description?: string;
+    variant?: "default" | "danger" | "success" | "warning" | "custom";
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    onOpenChange?: (open: boolean) => void;
+    duration?: number;
+    children?: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+    iconSize?: number;
+}
+export declare const ToastComponent: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLLIElement>>;
+/**
+ * Hook to access toast functionality.
+ * @throws {Error} If used outside of ToastProvider
+ * @returns {ToastContextValue} Toast context value
+ *
+ * @example
+ * const { toast } = useToast();
+ *  // Example usage:
+ * toast({
+ *   title: "Notification",
+ *   description: "This is a toast notification",
+ *   variant: "success",
+ *   action: {
+ *     label: "Undo",
+ *     onClick: () => console.log("Undo clicked"),
+ *   },
+ * });
+ *
+ */
+export declare const useToast: () => {
+    toast: (options: Omit<ToastProps, "children" | "onOpenChange">) => void;
+};
+/**
+ * Provides a context for toast functionality.
+ *
+ * @example
+ * <ToastProvider>
+ *   <MyComponent />
+ * </ToastProvider>
+ *
+ * @param {ReactNode} children - The children elements to render inside the provider.
+ *
+ * @returns {ReactElement} - The rendered provider element.
+ */
+export declare const ToastProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/Toast/index.d.ts

@@ -0,0 +1,2 @@
+export { ToastComponent as Toast, ToastProvider, useToast, type ToastProps } from './Toast';
+export { ToastViewport } from '@radix-ui/react-toast';

package/dist/shared/ui/Toggle/Toggle.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+type ToggleSize = 'small' | 'medium' | 'large';
+/**
+ * Defines the public API for the Toggle component, omitting the native 'size'
+ * attribute to avoid conflicts with the custom size prop.
+ */
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** The size of the toggle switch. */
+    size?: ToggleSize;
+}
+/**
+ * @file A customizable toggle switch component for binary state selection.
+ * @description This component renders a visually styled toggle that wraps a native,
+ * accessible checkbox input. It uses the `peer` utility from Tailwind CSS to react
+ * to the state of the hidden checkbox.
+ *
+ * @param {'small' | 'medium' | 'large'} [size='medium'] - The size of the toggle switch.
+ * @param {boolean} [checked] - The controlled state of the toggle (on/off).
+ * @param {boolean} [disabled] - If true, the toggle will be non-interactive.
+ * @param {function} [onChange] - The callback function fired when the toggle state changes.
+ * @returns {JSX.Element} The rendered Toggle element.
+ */
+export declare const Toggle: ({ size, checked, disabled, className, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Toggle/index.d.ts

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

package/dist/shared/ui/Tooltip/Tooltip.d.ts

@@ -0,0 +1,103 @@
+import React from 'react';
+import type { ButtonVariant, ButtonHierarchy, ButtonSize } from '../Button/Button';
+/**
+ * Tooltip positioning
+ */
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Configuration for a button in the tooltip
+ */
+export interface TooltipButtonConfig {
+    /** The text to display on the button */
+    text: string;
+    /** Click handler for the button */
+    onClick: () => void;
+    /** Button variant. Defaults to 'neutral'. */
+    variant?: ButtonVariant;
+    /** Button hierarchy. Defaults to 'secondary'. */
+    hierarchy?: ButtonHierarchy;
+    /** Button size. Defaults to 'xs'. */
+    size?: ButtonSize;
+    /** Whether the button is disabled. Defaults to false. */
+    disabled?: boolean;
+}
+/**
+ * Defines the public API for the Tooltip component.
+ */
+export interface TooltipProps {
+    /** The element that triggers the tooltip on hover. */
+    children: React.ReactElement;
+    /** The content to display inside the tooltip. */
+    content: React.ReactNode;
+    /** The preferred side of the trigger to render against. Defaults to 'top'. */
+    side?: TooltipSide;
+    /** The distance in pixels from the trigger. Defaults to 5. */
+    sideOffset?: number;
+    /** Whether to show the tooltip arrow. Defaults to true. */
+    showArrow?: boolean;
+    /** Optional custom classes for the tooltip content. */
+    className?: string;
+    /** Optional custom max width. Defaults to 'max-w-xs'. */
+    maxWidth?: string;
+    /** Optional delay duration in milliseconds before showing tooltip. */
+    delayDuration?: number;
+    /** Whether the tooltip is disabled. Defaults to false. */
+    disabled?: boolean;
+    /** Optional primary button configuration */
+    primaryButton?: TooltipButtonConfig;
+    /** Optional secondary button configuration */
+    secondaryButton?: TooltipButtonConfig;
+    /** Optional custom background color. Overrides default white background. */
+    customBackground?: string;
+    /** Optional custom text color. Overrides default text-high-em. */
+    customTextColor?: string;
+    /** Optional custom font size. Overrides default text-xs. */
+    customFontSize?: string;
+}
+/**
+ * @file A reusable tooltip component for providing contextual information.
+ * @description This component wraps any trigger element and displays a tooltip with additional
+ * information on hover. Built on top of Radix UI's Tooltip primitive for robust accessibility
+ * and positioning.
+ *
+ * Designed to be used with any element that needs contextual help or additional information.
+ *
+ * **Important:** This component requires a `TooltipProvider` to be present in the component tree.
+ * Add `<TooltipProvider>` at your app root or page level:
+ *
+ * ```tsx
+ * import { TooltipProvider } from '@radix-ui/react-tooltip';
+ *
+ * function App() {
+ *   return (
+ *     <TooltipProvider delayDuration={200}>
+ *       <YourComponents />
+ *     </TooltipProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @param {React.ReactElement} children - The element that triggers the tooltip.
+ * @param {React.ReactNode} content - The content to be shown inside the tooltip.
+ * @param {TooltipVariant} [variant='neutral'] - The visual variant (neutral, success, danger, warning, info).
+ * @param {TooltipSide} [side='top'] - The preferred side to render the tooltip.
+ * @param {number} [sideOffset=5] - The distance in pixels from the trigger.
+ * @param {boolean} [showArrow=true] - Whether to display the tooltip arrow.
+ * @param {string} [className] - Optional custom classes for the tooltip content.
+ * @param {string} [maxWidth='max-w-xs'] - Optional custom max width class.
+ * @param {number} [delayDuration] - Optional delay before showing tooltip (inherited from provider if not set).
+ * @param {boolean} [disabled=false] - Whether the tooltip is disabled.
+ * @returns {JSX.Element} The rendered Tooltip element.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="This is helpful information">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ *
+ * <Tooltip content="Additional info" side="right">
+ *   <Icon name="info" />
+ * </Tooltip>
+ * ```
+ */
+export declare const Tooltip: ({ children, content, side, sideOffset, showArrow, className, maxWidth, delayDuration, disabled, primaryButton, secondaryButton, customBackground, customTextColor, customFontSize, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip, type TooltipProps, type TooltipSide, type TooltipButtonConfig } from './Tooltip';

package/dist/shared/ui/TypesPanel/TypesPanel.d.ts

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+/**
+ * Props for the TypesPanel component
+ */
+export interface TypesPanelProps {
+    /**
+     * Content to be rendered inside the panel
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS classes to apply to the panel container
+     */
+    className?: string;
+    /**
+     * Which side should have a border
+     * - 'left': Left border
+     * - 'right': Right border
+     * - 'none': No border
+     */
+    borderSide?: 'left' | 'right' | 'none';
+    /**
+     * Border color style from design system
+     * - 'surface-3': Lighter border (default)
+     * - 'surface-4': Darker border
+     */
+    borderStyle?: 'surface-3' | 'surface-4';
+}
+export declare const TypesPanel: React.NamedExoticComponent<TypesPanelProps>;

package/dist/shared/ui/TypesPanel/index.d.ts

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

package/dist/shared/ui/TypesPanelBodyGrid/TypesPanelBodyGrid.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+/**
+ * Field type item structure
+ */
+export interface FieldType {
+    id: string;
+    label: string;
+    icon: React.ReactNode;
+    category: string;
+}
+/**
+ * Category structure
+ */
+export interface Category {
+    id: string;
+    title: string;
+    items: FieldType[];
+}
+/**
+ * Props interface for the TypesPanelBodyGrid component.
+ */
+export interface TypesPanelBodyGridProps {
+    /**
+     * Array of categories with items to display
+     * Component will render these categories in grid layout
+     */
+    categories?: Category[];
+    /**
+     * Optional callback when an item is clicked
+     */
+    onItemClick?: (itemId: string) => void;
+    /**
+     * Optional custom render function for each item
+     * Allows consumers to wrap items with custom behavior (e.g., drag & drop)
+     * If not provided, uses default GridDraggableItem rendering
+     */
+    renderItem?: (item: FieldType, options: {
+        onClick: () => void;
+    }) => React.ReactNode;
+    /**
+     * Optional custom CSS classes
+     */
+    className?: string;
+}
+export declare const TypesPanelBodyGrid: React.FC<TypesPanelBodyGridProps>;

package/dist/shared/ui/TypesPanelBodyGrid/index.d.ts

@@ -0,0 +1,2 @@
+export { TypesPanelBodyGrid } from './TypesPanelBodyGrid';
+export type { TypesPanelBodyGridProps, FieldType, Category, } from './TypesPanelBodyGrid';

package/dist/shared/ui/TypesPanelBodyList/TypesPanelBodyList.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+/**
+ * Field type item structure
+ */
+export interface FieldType {
+    id: string;
+    label: string;
+    icon: React.ReactNode;
+    category: string;
+}
+/**
+ * Category structure
+ */
+export interface Category {
+    id: string;
+    title: string;
+    items: FieldType[];
+}
+/**
+ * Props interface for the TypesPanelBodyList component.
+ */
+export interface TypesPanelBodyListProps {
+    /**
+     * Array of categories with items to display
+     * Component will render these categories in list layout
+     */
+    categories?: Category[];
+    /**
+     * Optional callback when an item is clicked
+     */
+    onItemClick?: (itemId: string) => void;
+    /**
+     * Optional custom render function for each item
+     * Allows consumers to wrap items with custom behavior (e.g., drag & drop)
+     * If not provided, uses default DragAndDropListItem rendering
+     */
+    renderItem?: (item: FieldType, options: {
+        onClick: () => void;
+    }) => React.ReactNode;
+    /**
+     * Optional custom CSS classes
+     */
+    className?: string;
+}
+export declare const TypesPanelBodyList: React.FC<TypesPanelBodyListProps>;

package/dist/shared/ui/TypesPanelBodyList/index.d.ts

@@ -0,0 +1,2 @@
+export { TypesPanelBodyList } from './TypesPanelBodyList';
+export type { TypesPanelBodyListProps, FieldType, Category, } from './TypesPanelBodyList';

package/dist/shared/ui/TypesPanelHeader/TypesPanelHeader.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+/**
+ * Props interface for the TypesPanelHeader component.
+ */
+export interface TypesPanelHeaderProps {
+    /**
+     * Optional custom CSS classes
+     */
+    className?: string;
+    /**
+     * Selected category type (controlled)
+     */
+    selectedType?: string;
+    /**
+     * Callback when category type changes
+     */
+    onTypeChange?: (type: string) => void;
+    /**
+     * Selected view mode (list/grid)
+     */
+    selectedView?: string | number;
+    /**
+     * Callback when view mode changes
+     */
+    onViewChange?: (view: string | number) => void;
+}
+export declare const TypesPanelHeader: React.FC<TypesPanelHeaderProps>;

package/dist/shared/ui/TypesPanelHeader/index.d.ts

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