@ssa-ui-kit/core 2.33.0 → 3.0.0

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

@@ -1,30 +1,158 @@
+/**
+ * Checkbox data structure
+ * Maps filter group names to arrays of selected item names
+ */
 export type CheckboxData = Record<string, string[]>;
+/**
+ * Not changed data structure
+ * Tracks checkbox states that haven't been modified
+ */
 export type NotChangedData = Record<string, Record<string, boolean>>;
+/**
+ * Single filter item configuration
+ * Represents an individual checkbox option within a filter group
+ */
 export interface SingleItem {
+    /**
+     * Unique identifier for the item
+     */
     key: string;
+    /**
+     * Item name/identifier
+     */
     name: string;
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * Item content configuration
+     */
     content: {
+        /**
+         * State path for nested data structures
+         */
         statePath: string[];
+        /**
+         * Display text for the checkbox label
+         */
         text: string;
     };
 }
+/**
+ * Accordion group information
+ * Represents a filter group with collapsible accordion functionality
+ */
 export interface AccordionInfo {
+    /**
+     * Unique identifier for the accordion group
+     */
     id: string;
+    /**
+     * Group title displayed in accordion header
+     */
     title: string;
+    /**
+     * Whether the accordion is initially open
+     */
     isOpened: boolean;
+    /**
+     * ARIA controls attribute for accessibility
+     */
     ariaControls: string;
+    /**
+     * Whether the entire group is disabled
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * Filter items within this group
+     */
     items: Record<string, SingleItem>;
+    /**
+     * Currently selected items (committed state)
+     */
     selectedItems: string[];
+    /**
+     * Draft selected items (uncommitted changes)
+     * Used to track temporary selections before submit
+     */
     selectedItemsDraft?: string[];
 }
+/**
+ * Table filter configuration
+ * Maps filter group names to their accordion information
+ */
 export type TableFilterConfig = Record<string, AccordionInfo>;
+/**
+ * Props for the TableFilters component
+ *
+ * A comprehensive filter component for table data that provides grouped checkbox
+ * filters in a popover with accordion-style collapsible groups. Supports submit,
+ * reset, and clear actions with draft state management.
+ *
+ * @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' },
+ *       },
+ *       inactive: {
+ *         key: 'inactive',
+ *         name: 'inactive',
+ *         content: { statePath: [], text: 'Inactive' },
+ *       },
+ *     },
+ *     selectedItems: [],
+ *   },
+ * };
+ *
+ * <TableFilters
+ *   checkboxData={filterConfig}
+ *   onSubmit={() => console.log('Filters applied')}
+ *   onReset={() => console.log('Filters reset')}
+ *   onClear={() => console.log('Filters cleared')}
+ * />
+ * ```
+ */
 export interface TableFiltersView {
+    /**
+     * Filter configuration data
+     * Maps group names to accordion information with checkbox items
+     */
+    checkboxData?: TableFilterConfig;
+    /**
+     * Callback when filters are submitted/applied
+     * Called when user clicks submit button
+     */
+    onSubmit?: () => void;
+    /**
+     * Callback when filters are reset
+     * Called when user clicks cancel button (resets to initial state)
+     */
     onReset?: () => void;
+    /**
+     * Callback when filters are cleared
+     * Called when user clicks clear button (removes all selections)
+     */
     onClear?: () => void;
-    onSubmit?: () => void;
+    /**
+     * Callback when a checkbox is toggled
+     * Provides group name and item name for the toggled checkbox
+     */
     onCheckboxToggle?: (groupName: string, name: string) => void;
+    /**
+     * Callback when filter button visibility changes
+     * Called when filter groups are added/removed to show/hide filter button
+     */
     handleMoreButtonVisibleChange?: (isVisible: boolean) => void;
-    checkboxData?: TableFilterConfig;
 }

package/dist/components/TableHead/TableHead.d.ts

@@ -1,4 +1,41 @@
 import { CommonProps } from '../../types/emotion';
+/**
+ * TableHead - Header section container for table columns
+ *
+ * A styled thead element that wraps table header rows. Provides styling
+ * for the table header section including bold font weight, border styling,
+ * and rounded corners. Used with TableRow and TableCellHeader components.
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * // Basic table head
+ * <Table>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCellHeader>Name</TableCellHeader>
+ *       <TableCellHeader>Email</TableCellHeader>
+ *       <TableCellHeader>Role</TableCellHeader>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     // data rows go here
+ *   </TableBody>
+ * </Table>
+ * ```
+ *
+ * @see {@link Table} - Parent table component
+ * @see {@link TableRow} - Row component for header
+ * @see {@link TableCellHeader} - Header cell component
+ * @see {@link TableBody} - Body section component
+ *
+ * @accessibility
+ * - Semantic HTML thead element
+ * - Proper table structure for screen readers
+ * - Supports ARIA attributes via CommonProps
+ */
 declare const TableHead: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/dist/components/TableRow/TableRow.d.ts

@@ -1,8 +1,3 @@
-import { CommonProps } from '../../types/emotion';
-declare const TableRow: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & CommonProps & {
-    isDisabled?: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+import { TableRowProps } from './types';
+declare const TableRow: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
 export default TableRow;

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

@@ -0,0 +1,34 @@
+import { HTMLAttributes } from 'react';
+import { CommonProps } from '../../types/emotion';
+/**
+ * Props for the TableRow component
+ *
+ * A styled table row component that represents a single row in a table.
+ * Supports disabled state for non-interactive rows.
+ *
+ * @example
+ * ```tsx
+ * // Basic table row
+ * <TableRow>
+ *   <TableCell>Data 1</TableCell>
+ *   <TableCell>Data 2</TableCell>
+ * </TableRow>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Disabled table row (aria-disabled is automatically set)
+ * <TableRow isDisabled>
+ *   <TableCell>Disabled Row</TableCell>
+ * </TableRow>
+ * ```
+ */
+export interface TableRowProps extends CommonProps, HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Whether the row is disabled
+     * Disabled rows have reduced opacity and no pointer cursor.
+     * Automatically sets aria-disabled attribute when true.
+     * @default false
+     */
+    isDisabled?: boolean;
+}

package/dist/components/TextField/TextField.d.ts

@@ -1,3 +1,79 @@
 import { TextFieldProps } from './types';
+/**
+ * TextField - Ready-to-use text input (single- or multi-line) with label and validation UI.
+ *
+ * Purpose: one component for text inputs with built-in label, helper text, validation
+ * error/success display, and optional character counting. Renders as Input or Textarea
+ * based on the `multirow` prop. Automatically manages status (basic, error, success)
+ * from props. Use when you want a complete text field without composing Field primitives;
+ * use Field when you need custom layout or non-text controls.
+ *
+ * @category Form Controls
+ * @subcategory Input
+ *
+ * @example
+ * ```tsx
+ * // Single-line text field
+ * const { register } = useForm();
+ * <TextField
+ *   name="username"
+ *   label="Username"
+ *   placeholder="Enter your username"
+ *   register={register}
+ *   helperText="Choose a unique username"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multi-line text field with character count
+ * <TextField
+ *   name="description"
+ *   label="Description"
+ *   multirow
+ *   rows={5}
+ *   maxLength={500}
+ *   register={register}
+ *   helperText="Tell us about yourself"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Text field with validation errors
+ * <TextField
+ *   name="email"
+ *   label="Email Address"
+ *   register={register}
+ *   errors={errors.email}
+ *   helperText="We'll never share your email"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Success state
+ * <TextField
+ *   name="username"
+ *   label="Username"
+ *   register={register}
+ *   success={isValid}
+ *   helperText="Username is available!"
+ * />
+ * ```
+ *
+ * @see {@link Input} - For single-line input component
+ * @see {@link Textarea} - For multi-line textarea component
+ * @see {@link Field} - For more advanced field layout with Field.Root
+ *
+ * @note React Hook Form integration is optional. If `register` is not provided,
+ * the component will still work but validation features will be unavailable.
+ *
+ * @accessibility
+ * - Full keyboard navigation support
+ * - Screen reader friendly with proper labels
+ * - ARIA attributes via React Hook Form (when register is provided)
+ * - Error messages announced to screen readers
+ */
 declare const TextField: ({ multirow, name, label, errors, helperText, success, disabled, maxLength, ...props }: TextFieldProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default TextField;

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

@@ -1,11 +1,91 @@
 import type { UseFormReturn, FieldError } from 'react-hook-form';
 import { InputProps } from '../Input/types';
+/**
+ * Props for the TextField component
+ *
+ * A unified text input component that can render as either a single-line Input
+ * or multi-line Textarea based on the `multirow` prop. Includes built-in label,
+ * helper text, error handling, and character counting. Automatically switches
+ * between Input and Textarea components while maintaining consistent API.
+ *
+ * @example
+ * ```tsx
+ * // Single-line text field
+ * const { register } = useForm();
+ * <TextField
+ *   name="username"
+ *   label="Username"
+ *   placeholder="Enter your username"
+ *   register={register}
+ *   helperText="Choose a unique username"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multi-line text field
+ * <TextField
+ *   name="description"
+ *   label="Description"
+ *   multirow
+ *   rows={5}
+ *   maxLength={500}
+ *   register={register}
+ *   helperText="Maximum 500 characters"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Text field with validation
+ * <TextField
+ *   name="email"
+ *   label="Email"
+ *   register={register}
+ *   errors={errors.email}
+ *   helperText="We'll never share your email"
+ * />
+ * ```
+ *
+ * @note React Hook Form integration is optional. If `register` is not provided,
+ * the component will still work but validation features will be unavailable.
+ */
 export interface TextFieldProps extends InputProps, Partial<Pick<UseFormReturn, 'register'>> {
+    /**
+     * Label text displayed above the input field
+     */
     label?: string;
+    /**
+     * React Hook Form field error object
+     * Used to display validation error messages
+     */
     errors?: FieldError;
+    /**
+     * Whether to display success state styling
+     * When true, status is set to 'success'
+     * @default false
+     */
     success?: boolean;
+    /**
+     * Helper text displayed below the input
+     * Shown when no errors are present
+     */
     helperText?: string;
+    /**
+     * Number of rows for multi-row text fields
+     * Only applies when `multirow` is true
+     * @default undefined (uses Textarea default)
+     */
     rows?: number;
+    /**
+     * Whether to render as multi-line textarea
+     * When true, uses Textarea component; when false, uses Input component
+     * @default false
+     */
     multirow?: boolean;
+    /**
+     * Maximum character length
+     * When provided, displays character count (e.g., "45 / 500")
+     */
     maxLength?: number;
 }

package/dist/components/Textarea/Textarea.d.ts

@@ -1,4 +1,85 @@
 import React from 'react';
 import { TextareaProps } from './types';
+/**
+ * Textarea - Multi-line text input component
+ *
+ * A textarea component with React Hook Form integration, validation support,
+ * character limits, and paste handling. Designed for longer text input such as
+ * comments, descriptions, messages, or any multi-line content.
+ *
+ * @category Form Controls
+ * @subcategory Input
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea with React Hook Form
+ * const { register } = useForm();
+ * <Textarea
+ *   name="message"
+ *   placeholder="Enter your message"
+ *   register={register}
+ *   rows={5}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Textarea with validation and character limit
+ * const { register } = useForm();
+ * const [charCount, setCharCount] = useState(0);
+ *
+ * <Textarea
+ *   name="description"
+ *   placeholder="Describe your project..."
+ *   register={register}
+ *   validationSchema={{
+ *     required: 'Description is required',
+ *     maxLength: { value: 500, message: 'Maximum 500 characters' }
+ *   }}
+ *   maxLength={500}
+ *   rows={8}
+ *   setCountChar={(e) => setCharCount(e.target.value.length)}
+ * />
+ * <span>{charCount} / 500 characters</span>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using with Field component
+ * <Field.Root>
+ *   <Field.Label htmlFor="comments">Comments</Field.Label>
+ *   <Field.Control>
+ *     <Textarea
+ *       id="comments"
+ *       name="comments"
+ *       register={register}
+ *       rows={6}
+ *       css={{ width: '100%', border: '0 !important' }}
+ *     />
+ *   </Field.Control>
+ *   <Field.Description>Optional feedback or notes</Field.Description>
+ * </Field.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Standalone textarea without React Hook Form
+ * <Textarea
+ *   name="notes"
+ *   placeholder="Enter notes..."
+ *   rows={5}
+ *   onChange={(e) => handleChange(e.target.value)}
+ * />
+ * ```
+ *
+ * @see {@link Field} - Use Field.Root to wrap Textarea for labels and validation
+ * @see {@link Input} - For single-line text input
+ *
+ * @accessibility
+ * - Full keyboard navigation support
+ * - Screen reader friendly
+ * - ARIA attributes via React Hook Form (when register is provided)
+ * - Respects disabled and readOnly states
+ */
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default Textarea;

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

@@ -1,16 +1,111 @@
 import { ReactEventHandler } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
+/**
+ * Props for the Textarea component
+ *
+ * A multi-line text input component with React Hook Form integration and validation.
+ * Supports character limits, paste handling, and all standard textarea features.
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea with React Hook Form
+ * const { register } = useForm();
+ * <Textarea
+ *   name="message"
+ *   placeholder="Enter your message"
+ *   register={register}
+ *   rows={5}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Textarea with validation and character limit
+ * <Textarea
+ *   name="description"
+ *   register={register}
+ *   validationSchema={{
+ *     required: 'Description is required',
+ *     maxLength: { value: 500, message: 'Maximum 500 characters' }
+ *   }}
+ *   maxLength={500}
+ *   rows={10}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Read-only textarea
+ * <Textarea
+ *   name="readonly-content"
+ *   register={register}
+ *   readOnly
+ *   rows={8}
+ * />
+ * ```
+ *
+ * @note React Hook Form integration is optional. If `register` is not provided,
+ * the component will still work but validation features will be unavailable.
+ */
 export interface TextareaProps extends Partial<Pick<UseFormReturn, 'register'>> {
+    /**
+     * Name attribute for the textarea, required for React Hook Form integration
+     */
     name: string;
+    /**
+     * Placeholder text displayed when textarea is empty
+     */
     placeholder?: string;
+    /**
+     * React Hook Form validation schema
+     * Object containing validation rules (required, maxLength, pattern, etc.)
+     */
     validationSchema?: Record<string, unknown>;
+    /**
+     * Whether the textarea is disabled
+     * Disabled textarea elements cannot be edited
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Whether the textarea is read-only
+     * Read-only textarea elements can be focused and scrolled but not edited
+     * @default false
+     */
     readOnly?: boolean;
+    /**
+     * Number of visible text rows
+     * Determines the initial height of the textarea
+     * @default 10
+     */
     rows?: number;
+    /**
+     * Maximum character length for the textarea
+     * Use with setCountChar callback to track character count
+     */
     maxLength?: number;
+    /**
+     * Custom element type to render as (for composition)
+     */
     as?: React.ElementType;
+    /**
+     * Custom CSS class name
+     */
     className?: string;
+    /**
+     * Title attribute for the textarea element
+     * Provides tooltip text on hover
+     */
     title?: string;
+    /**
+     * Paste event handler
+     * Fired when content is pasted into the textarea
+     */
     onPaste?: React.ClipboardEventHandler<HTMLTextAreaElement>;
+    /**
+     * Callback function to track character count
+     * Called with the event when content changes
+     * Useful for displaying character count UI
+     */
     setCountChar?: ReactEventHandler;
 }

package/dist/components/Tooltip/SimpleChartTooltip.d.ts

@@ -1,2 +1,3 @@
+import { LineSeries } from '@nivo/line';
 import { SimpleChartTooltipProps } from './types';
-export declare const SimpleChartTooltip: ({ point, size, renderValue, }: SimpleChartTooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SimpleChartTooltip: <Series extends LineSeries>({ point, size, renderValue, }: SimpleChartTooltipProps<Series>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,76 @@
 import { TooltipProps } from './types';
+/**
+ * Tooltip - Contextual information component
+ *
+ * A flexible tooltip system built on Floating UI that provides contextual
+ * information when users interact with trigger elements. Uses a compound
+ * component pattern with Tooltip (root), TooltipTrigger (activator), and
+ * TooltipContent (display).
+ *
+ * Supports multiple interaction modes (hover, click, follow cursor), flexible
+ * positioning with auto-adjustment, and customizable appearance with size
+ * variants and optional arrows.
+ *
+ * @category Components
+ * @subcategory Overlay
+ *
+ * @example
+ * ```tsx
+ * // Basic tooltip on hover
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button>Hover me</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>This is helpful information</TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tooltip with custom placement
+ * <Tooltip placement="bottom" size="large">
+ *   <TooltipTrigger>
+ *     <Icon name="info" />
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <div>
+ *       <strong>Detailed Information</strong>
+ *       <p>This is a larger tooltip with more content</p>
+ *     </div>
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Click-to-open tooltip
+ * <Tooltip enableClick enableHover={false}>
+ *   <TooltipTrigger>
+ *     <Button>Click for info</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>Information that appears on click</TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tooltip without arrow
+ * <Tooltip hasArrow={false}>
+ *   <TooltipTrigger>
+ *     <span>?</span>
+ *   </TooltipTrigger>
+ *   <TooltipContent>No arrow tooltip</TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @see {@link TooltipTrigger} - Trigger element component
+ * @see {@link TooltipContent} - Content display component
+ *
+ * @accessibility
+ * - Keyboard accessible (ESC to close)
+ * - Focus management for click-triggered tooltips
+ * - ARIA attributes automatically applied
+ * - Screen reader friendly
+ */
 declare const Tooltip: ({ children, ...props }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Tooltip;