@ssa-ui-kit/core 2.33.0 → 3.0.0

package/dist/components/Switch/Switch.d.ts

@@ -1,3 +1,68 @@
 import { SwitchProps } from './types';
-declare const Switch: ({ label, isDisabled }: SwitchProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Switch - Toggle switch component for binary states
+ *
+ * A toggle switch component for enabling/disabling features or settings.
+ * Displays an on/off toggle that users can click to change state. Must be
+ * used within SwitchContextProvider which manages the switch state and
+ * provides toggle functionality.
+ *
+ * Colors are sourced from `theme.palette` for consistency with Button,
+ * Checkbox, and Radio. Pass `color="custom"` together with the `colors`
+ * object to supply arbitrary CSS color values.
+ *
+ * The off state always shows a neutral grey background. The disabled state
+ * always uses `greyFocused40`, regardless of color variant.
+ *
+ * @category Form Controls
+ * @subcategory Input
+ *
+ * @example
+ * ```tsx
+ * // Default (primary / blue)
+ * <SwitchContextProvider initialState={false}>
+ *   <Switch label="Enable notifications" />
+ * </SwitchContextProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Success (green) variant
+ * <SwitchContextProvider initialState={false}>
+ *   <Switch label="Enable feature" color="success" />
+ * </SwitchContextProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Disabled (muted grey, cannot toggle)
+ * <SwitchContextProvider initialState={true}>
+ *   <Switch label="Locked feature" isDisabled />
+ * </SwitchContextProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom color escape hatch
+ * <SwitchContextProvider initialState={false}>
+ *   <Switch
+ *     label="Custom toggle"
+ *     color="custom"
+ *     colors={{ on: '#ff0000', offOutline: '#ff9999' }}
+ *   />
+ * </SwitchContextProvider>
+ * ```
+ *
+ * @see {@link SwitchContextProvider} - Required parent component for state management
+ *
+ * @accessibility
+ * - Uses role="switch" for proper ARIA semantics
+ * - aria-checked reflects current state
+ * - aria-readonly reflects disabled state
+ * - aria-label provided via label prop
+ * - Keyboard accessible (Space/Enter to toggle)
+ *
+ * @requires SwitchContextProvider - Must be wrapped in SwitchContextProvider
+ */
+declare const Switch: ({ label, isDisabled, color, colors, }: SwitchProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Switch;

package/dist/components/Switch/SwitchBase.d.ts

@@ -1,5 +1,9 @@
+interface SwitchBaseProps {
+    onColor: string;
+    offOutlineColor: string;
+}
 declare const SwitchBase: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+} & SwitchBaseProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 export default SwitchBase;

package/dist/components/Switch/SwitchContext.d.ts

@@ -1,10 +1,60 @@
+/**
+ * Switch context value
+ * Provides switch state and toggle function to Switch component
+ */
 export interface SwitchContext {
+    /**
+     * Current state of the switch
+     * - `true`: Switch is on/enabled
+     * - `false`: Switch is off/disabled (default)
+     */
     isOn: boolean;
+    /** Function to toggle switch state */
     toggle: () => void;
 }
+/**
+ * Default context value for SwitchContext
+ * Used as fallback when context is accessed outside SwitchContextProvider
+ * @default isOn: false - Switch defaults to off state
+ */
 export declare const SwitchContext: import("react").Context<SwitchContext>;
+/**
+ * Hook to access Switch context
+ *
+ * @returns Switch context with isOn state and toggle function
+ * @throws Error if used outside SwitchContextProvider
+ */
 export declare const useSwitchContext: () => SwitchContext;
+/**
+ * SwitchContextProvider - Context provider for Switch component
+ *
+ * Provides switch state management and toggle functionality to child Switch
+ * components. Manages the on/off state internally and exposes it via context.
+ *
+ * @category Form Controls
+ * @subcategory Context
+ *
+ * @example
+ * ```tsx
+ * <SwitchContextProvider initialState={false}>
+ *   <Switch label="Enable feature" />
+ * </SwitchContextProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multiple switches sharing state (if needed)
+ * <SwitchContextProvider initialState={true}>
+ *   <Switch label="Switch 1" />
+ *   <Switch label="Switch 2" />
+ * </SwitchContextProvider>
+ * ```
+ *
+ * @see {@link Switch} - Component that consumes this context
+ */
 export declare const SwitchContextProvider: ({ initialState, children, }: {
+    /** Initial on/off state of the switch */
     initialState?: boolean;
+    /** Child components (typically Switch component) */
     children: React.ReactNode;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,78 @@
+/**
+ * Props for the Switch component
+ *
+ * Toggle switch component for binary on/off states. Must be used within
+ * SwitchContextProvider to access toggle state and functionality.
+ *
+ * Colors are driven by `theme.palette` for consistency with Button, Checkbox,
+ * and Radio:
+ * - `primary` (default) — blue; uses `palette.primary.main` for the on-state
+ *   background, `palette.primary.light` for the off-state focus outline.
+ * - `success` — green; uses `palette.success.main` for the on-state background,
+ *   `palette.success.light` for the off-state focus outline.
+ * - `custom` — no built-in color; supply exact values via the `colors` prop.
+ *
+ * The off state always uses a neutral grey background regardless of variant.
+ * Disabled state always uses `greyFocused40` (semi-transparent grey, same for all variants).
+ *
+ * @example
+ * ```tsx
+ * // Default (primary / blue)
+ * <SwitchContextProvider initialState={false}>
+ *   <Switch label="Enable notifications" />
+ * </SwitchContextProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Success (green) variant
+ * <SwitchContextProvider initialState={false}>
+ *   <Switch label="Enable feature" color="success" />
+ * </SwitchContextProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom color escape hatch
+ * <SwitchContextProvider initialState={false}>
+ *   <Switch
+ *     label="Custom toggle"
+ *     color="custom"
+ *     colors={{
+ *       on: '#ff0000',
+ *       offOutline: '#ff9999',
+ *     }}
+ *   />
+ * </SwitchContextProvider>
+ * ```
+ */
 export interface SwitchProps {
+    /**
+     * Accessible label for the switch
+     * Used as aria-label for screen readers
+     */
     label: string;
+    /**
+     * Whether the switch is disabled
+     * Disabled switches cannot be toggled and appear visually muted
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * Palette-based color variant.
+     * - `primary` — blue (uses `palette.primary`)
+     * - `success` — green (uses `palette.success`)
+     * - `custom` — no built-in color; supply exact values via the `colors` prop
+     * @default 'primary'
+     */
+    color?: 'primary' | 'success' | 'custom';
+    /**
+     * Fine-grained color overrides — only applied when `color="custom"`.
+     */
+    colors?: {
+        /** Background color when the switch is on (checked) */
+        on?: string;
+        /** Border color of the outline shown when off and focused/hovered */
+        offOutline?: string;
+    };
 }

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

@@ -1,4 +1,78 @@
 import { CommonProps } from '../../types/emotion';
+/**
+ * Table - Base table component for displaying tabular data
+ *
+ * A styled table element that serves as the foundation for displaying
+ * structured tabular data. Works in conjunction with TableHead, TableBody,
+ * TableRow, TableCell, and TableCellHeader components to create complete
+ * data tables with proper semantics and styling.
+ *
+ * Component structure:
+ * - Table (root container)
+ *   - TableHead (header section with column headers)
+ *     - TableRow
+ *       - TableCellHeader (header cells)
+ *   - TableBody (body section with data rows)
+ *     - TableRow (data rows)
+ *       - TableCell (data cells)
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * // Basic table
+ * <Table>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCellHeader>Name</TableCellHeader>
+ *       <TableCellHeader>Email</TableCellHeader>
+ *       <TableCellHeader>Role</TableCellHeader>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     {users.map(user => (
+ *       <TableRow key={user.id}>
+ *         <TableCell>{user.name}</TableCell>
+ *         <TableCell>{user.email}</TableCell>
+ *         <TableCell>{user.role}</TableCell>
+ *       </TableRow>
+ *     ))}
+ *   </TableBody>
+ * </Table>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table with custom styling
+ * <Table css={{ border: '1px solid #ccc' }}>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCellHeader>Column 1</TableCellHeader>
+ *       <TableCellHeader align="center">Column 2</TableCellHeader>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>Data 1</TableCell>
+ *       <TableCell align="center">Data 2</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ *
+ * @see {@link TableHead} - Header section component
+ * @see {@link TableBody} - Body section component
+ * @see {@link TableRow} - Row component
+ * @see {@link TableCell} - Data cell component
+ * @see {@link TableCellHeader} - Header cell component
+ *
+ * @accessibility
+ * - Semantic HTML table element
+ * - Proper table structure for screen readers
+ * - Keyboard navigation support
+ * - ARIA attributes when needed
+ */
 declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/dist/components/TableBody/TableBody.d.ts

@@ -1,4 +1,59 @@
 import { CommonProps } from '../../types/emotion';
+/**
+ * TableBody - Body section container for table data rows
+ *
+ * A styled tbody element that wraps table data rows. Provides styling
+ * for the table body section including hover effects on rows, rounded
+ * corners for the last row, and proper spacing. Used with TableRow and
+ * TableCell components.
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * // Basic table body
+ * <Table>
+ *   <TableHead>
+ *     // header rows go here
+ *   </TableHead>
+ *   <TableBody>
+ *     {data.map(item => (
+ *       <TableRow key={item.id}>
+ *         <TableCell>{item.name}</TableCell>
+ *         <TableCell>{item.email}</TableCell>
+ *         <TableCell>{item.role}</TableCell>
+ *       </TableRow>
+ *     ))}
+ *   </TableBody>
+ * </Table>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table body with disabled rows (aria-disabled is automatically set)
+ * <TableBody>
+ *   {items.map(item => (
+ *     <TableRow
+ *       key={item.id}
+ *       isDisabled={item.disabled}>
+ *       <TableCell>{item.name}</TableCell>
+ *     </TableRow>
+ *   ))}
+ * </TableBody>
+ * ```
+ *
+ * @see {@link Table} - Parent table component
+ * @see {@link TableRow} - Row component for data
+ * @see {@link TableCell} - Data cell component
+ * @see {@link TableHead} - Header section component
+ *
+ * @accessibility
+ * - Semantic HTML tbody element
+ * - Proper table structure for screen readers
+ * - Hover effects respect aria-disabled attribute
+ * - Supports ARIA attributes via CommonProps
+ */
 declare const TableBody: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/dist/components/TableCell/TableCell.d.ts

@@ -1,8 +1,60 @@
-import { CommonProps } from '../../types/emotion';
+import { TableCellProps } from './types';
+/**
+ * TableCell - Table data cell component
+ *
+ * A styled td element that represents a single data cell in a table row.
+ * Used within TableRow components in the TableBody section. Supports
+ * text alignment customization. For header cells, use TableCellHeader instead.
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * // Basic table cell
+ * <TableRow>
+ *   <TableCell>John Doe</TableCell>
+ *   <TableCell>john@example.com</TableCell>
+ *   <TableCell>Admin</TableCell>
+ * </TableRow>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table cell with center alignment
+ * <TableRow>
+ *   <TableCell>Name</TableCell>
+ *   <TableCell align="center">Status</TableCell>
+ *   <TableCell align="right">Price</TableCell>
+ * </TableRow>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table cell with custom content
+ * <TableRow>
+ *   <TableCell>
+ *     <Badge color="success">Active</Badge>
+ *   </TableCell>
+ *   <TableCell>
+ *     <Button size="small">Edit</Button>
+ *   </TableCell>
+ * </TableRow>
+ * ```
+ *
+ * @see {@link Table} - Parent table component
+ * @see {@link TableRow} - Row component (use this in TableBody)
+ * @see {@link TableCellHeader} - Header cell component (use in TableHead)
+ * @see {@link TableHead} - Header section component
+ * @see {@link TableBody} - Body section component
+ *
+ * @accessibility
+ * - Semantic HTML td element
+ * - Proper table structure for screen readers
+ * - Supports ARIA attributes via CommonProps
+ */
 declare const TableCell: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & {
-    align?: string;
-} & CommonProps, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+} & TableCellProps, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
 export default TableCell;

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

@@ -0,0 +1,33 @@
+import { HTMLAttributes } from 'react';
+import { CommonProps } from '../../types/emotion';
+/**
+ * Props for the TableCell component
+ *
+ * A styled table cell component that represents a single data cell in a table row.
+ * Supports text alignment customization.
+ *
+ * @example
+ * ```tsx
+ * // Basic table cell
+ * <TableCell>Data content</TableCell>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table cell with center alignment
+ * <TableCell align="center">Centered</TableCell>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table cell with right alignment
+ * <TableCell align="right">Right aligned</TableCell>
+ * ```
+ */
+export interface TableCellProps extends CommonProps, Omit<HTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /**
+     * Text alignment for the cell content
+     * @default 'left'
+     */
+    align?: 'left' | 'center' | 'right' | 'justify';
+}

package/dist/components/TableCellHeader/TableCellHeader.d.ts

@@ -1,3 +1,64 @@
-import TableCell from '../TableCell/TableCell';
-declare const TableCellHeader: (props: React.ComponentProps<typeof TableCell>) => import("@emotion/react/jsx-runtime").JSX.Element;
+import React from 'react';
+import { TableCellHeaderProps } from './types';
+/**
+ * TableCellHeader - Table header cell component
+ *
+ * A wrapper component that renders TableCell as a semantic th element for
+ * table headers. Used within TableRow components in the TableHead section.
+ * Provides the same styling and props as TableCell but with proper semantic
+ * HTML for header cells.
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * // Basic table header
+ * <TableHead>
+ *   <TableRow>
+ *     <TableCellHeader>Name</TableCellHeader>
+ *     <TableCellHeader>Email</TableCellHeader>
+ *     <TableCellHeader>Role</TableCellHeader>
+ *   </TableRow>
+ * </TableHead>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table header with alignment
+ * <TableHead>
+ *   <TableRow>
+ *     <TableCellHeader>Product</TableCellHeader>
+ *     <TableCellHeader align="center">Quantity</TableCellHeader>
+ *     <TableCellHeader align="right">Price</TableCellHeader>
+ *   </TableRow>
+ * </TableHead>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table header with custom content
+ * <TableHead>
+ *   <TableRow>
+ *     <TableCellHeader>
+ *       <Icon name="user" /> User
+ *     </TableCellHeader>
+ *     <TableCellHeader>Email</TableCellHeader>
+ *   </TableRow>
+ * </TableHead>
+ * ```
+ *
+ * @see {@link Table} - Parent table component
+ * @see {@link TableHead} - Header section component (use this component here)
+ * @see {@link TableRow} - Row component (use in TableHead)
+ * @see {@link TableCell} - Data cell component (use in TableBody)
+ * @see {@link TableBody} - Body section component
+ *
+ * @accessibility
+ * - Semantic HTML th element (renders as th)
+ * - Proper table header semantics for screen readers
+ * - Supports ARIA attributes via TableCellProps
+ * - Better accessibility than using TableCell in headers
+ */
+declare const TableCellHeader: ({ children, ...props }: React.PropsWithChildren<TableCellHeaderProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default TableCellHeader;

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

@@ -0,0 +1,28 @@
+import { TableCellProps } from '../TableCell/types';
+/**
+ * Props for the TableCellHeader component
+ *
+ * A wrapper component that renders TableCell as a th element for table headers.
+ * Inherits all props from TableCell but renders as a header cell semantically.
+ *
+ * @example
+ * ```tsx
+ * // Basic table cell header
+ * <TableRow>
+ *   <TableCellHeader>Name</TableCellHeader>
+ *   <TableCellHeader>Email</TableCellHeader>
+ *   <TableCellHeader>Role</TableCellHeader>
+ * </TableRow>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table cell header with alignment
+ * <TableRow>
+ *   <TableCellHeader>Name</TableCellHeader>
+ *   <TableCellHeader align="center">Status</TableCellHeader>
+ *   <TableCellHeader align="right">Price</TableCellHeader>
+ * </TableRow>
+ * ```
+ */
+export type TableCellHeaderProps = TableCellProps;

package/dist/components/TableFilters/TableFilters.d.ts

@@ -1,2 +1,74 @@
 import { TableFiltersView } from './types';
+/**
+ * TableFilters - Filter component for table data with grouped checkboxes
+ *
+ * A comprehensive filter component that provides grouped checkbox filters in a
+ * popover with accordion-style collapsible groups. Supports draft state management
+ * with submit, reset, and clear actions. Displays notification badge with selected
+ * filter group count.
+ *
+ * Component structure:
+ * - TableFilters (main component)
+ *   - Popover (wrapper with trigger and content)
+ *     - TableFilterTriggerWithNotification (trigger button with badge)
+ *     - PopoverContent (filter content)
+ *       - AccordionGroup (collapsible filter groups)
+ *         - TableFiltersAccordion (individual filter group)
+ *           - TableFiltersAccordionContent
+ *             - TableFilterCheckbox (filter items)
+ *       - TableFiltersButtons (submit, cancel, clear actions)
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * const filterConfig: TableFilterConfig = {
+ *   status: {
+ *     id: 'status',
+ *     title: 'Status',
+ *     isOpened: true,
+ *     ariaControls: 'status-controls',
+ *     items: {
+ *       active: {
+ *         key: 'active',
+ *         name: 'active',
+ *         content: { statePath: [], text: 'Active' },
+ *       },
+ *     },
+ *     selectedItems: [],
+ *   },
+ * };
+ *
+ * <TableFilters
+ *   checkboxData={filterConfig}
+ *   onSubmit={() => applyFilters()}
+ *   onReset={() => resetFilters()}
+ *   onClear={() => clearFilters()}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With checkbox toggle callback
+ * <TableFilters
+ *   checkboxData={filterConfig}
+ *   onCheckboxToggle={(groupName, itemName) => {
+ *     console.log(`Toggled ${itemName} in ${groupName}`);
+ *   }}
+ *   onSubmit={handleSubmit}
+ * />
+ * ```
+ *
+ * @see {@link AccordionGroup} - Used for collapsible filter groups
+ * @see {@link Popover} - Used for filter popover overlay
+ * @see {@link TableFilterConfig} - Configuration type for filter data
+ *
+ * @accessibility
+ * - ARIA attributes for accordion groups
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ * - Proper focus management
+ * - Notification badge for selected filters
+ */
 export declare const TableFilters: ({ checkboxData, onReset, onSubmit, onClear, onCheckboxToggle, handleMoreButtonVisibleChange, }: TableFiltersView) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/TableFilters/hooks/useTableData.d.ts

@@ -2,7 +2,7 @@ import { BaseSyntheticEvent } from 'react';
 import { TableFilterConfig } from '../types';
 export interface UseTableDataParameters {
     initialState?: TableFilterConfig;
-    wrapperRef?: React.RefObject<HTMLElement>;
+    wrapperRef?: React.RefObject<HTMLElement | null>;
     updatedCheckboxData?: TableFilterConfig;
     handleCancel?: () => void;
     handleClear?: () => void;
@@ -15,8 +15,8 @@ export interface UseTableDataParameters {
 }
 export declare const useTableData: ({ initialState, wrapperRef, updatedCheckboxData, handleCancel, handleSubmit, handleClear, handleDropdownChange, }: UseTableDataParameters) => {
     checkboxData: TableFilterConfig;
-    wrapperRef: import("react").RefObject<HTMLElement> | undefined;
-    refsList: import("react").MutableRefObject<HTMLElement | null>[];
+    wrapperRef: import("react").RefObject<HTMLElement | null> | undefined;
+    refsList: import("react").RefObject<HTMLElement | null>[];
     setElementRef: (groupName: string, element: HTMLElement | null) => void;
     onCheckboxToggle: (groupName: string, name: string | number) => void;
     onDropdownChange: (groupName: string, name: string | number) => void;