@ssa-ui-kit/core 2.33.0 → 3.1.0

package/dist/components/TooltipTrigger/TooltipTrigger.d.ts

@@ -1,3 +1,29 @@
 import { TooltipTriggerProps } from '../Tooltip/types';
-declare const TooltipTrigger: ({ children, className }: TooltipTriggerProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+/**
+ * TooltipTrigger - Trigger element for tooltip activation
+ *
+ * Wraps a single React element to make it trigger the tooltip. The wrapped
+ * element receives tooltip interaction props (onMouseEnter, onMouseLeave, onClick, etc.)
+ * and Floating UI reference props for positioning.
+ *
+ * Must be used within a Tooltip component and must have a single child element
+ * (not a fragment or array). Returns null if children is not a valid element.
+ *
+ * @category Components
+ * @subcategory Overlay
+ *
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button>Hover me</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>Tooltip content</TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @see {@link Tooltip} - Parent component that provides context
+ * @see {@link TooltipContent} - Content component that displays tooltip
+ */
+declare const TooltipTrigger: ({ children, className }: TooltipTriggerProps) => import("react").ReactElement<TooltipTriggerProps, string | import("react").JSXElementConstructor<any>> | null;
 export default TooltipTrigger;

package/dist/components/Typeahead/Typeahead.context.d.ts

@@ -6,11 +6,11 @@ export declare const TypeaheadContext: React.Context<{
     isDisabled: boolean | undefined;
     optionsWithKey: Record<string | number, import("./types").TypeaheadOptionProps>;
     selectedItems: import("./types").TypeaheadValue[];
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     firstSuggestion: string;
     isMultiple: boolean | undefined;
     typeaheadId: string;
-    triggerRef: React.RefObject<HTMLDivElement>;
+    triggerRef: React.RefObject<HTMLDivElement | null>;
     className: string | undefined;
     startIcon: React.ReactNode;
     endIcon: React.ReactNode;
@@ -23,8 +23,14 @@ export declare const TypeaheadContext: React.Context<{
     status: "error" | "success" | "basic";
     error: import("react-hook-form").FieldError | import("react-hook-form").Merge<import("react-hook-form").FieldError, import("react-hook-form").FieldErrorsImpl<any>> | undefined;
     placeholder: string | null | undefined;
-    options: (React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null)[];
-    useFormResult: UseFormReturn<FieldValues, any, undefined>;
+    options: (React.ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];
+    customOptionValue: string | null;
+    handleChange: ({ value, shouldClose, resetInput, }: {
+        value?: string | number;
+        shouldClose?: boolean;
+        resetInput?: boolean;
+    }) => void;
+    useFormResult: UseFormReturn<FieldValues, any, FieldValues>;
     register: import("react-hook-form").UseFormRegister<FieldValues>;
     setValue: import("react-hook-form").UseFormSetValue<FieldValues>;
     onChange: ((selectedItem: import("./types").TypeaheadValue, isSelected: boolean) => void) | undefined;

package/dist/components/Typeahead/Typeahead.d.ts

@@ -1,11 +1,175 @@
 import { TypeaheadProps } from './types';
 /**
- * The structure of the component:
- * - TypeaheadTrigger
- * - TypeaheadOptions
- * - FormHelperText
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
- **/
-export declare const Typeahead: ({ name, label, selectedItems, defaultSelectedItems, isOpen, isDisabled, isMultiple, children, className, startIcon, endIcon, error, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, popoverClassName, optionsClassName, wrapperClassName, filterOptions, width, onChange, onEmptyChange, onClearAll, onRemoveSelectedClick, renderOption, }: TypeaheadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+ * Typeahead - Advanced autocomplete search component with dropdown functionality
+ *
+ * A powerful autocomplete component that provides search-as-you-type functionality
+ * with dropdown suggestions. Supports both single and multiple selection modes,
+ * filtering, custom rendering, custom values (user-typed values not in options list),
+ * and integrates seamlessly with React Hook Form for validation and form management.
+ *
+ * Component structure:
+ * - Typeahead (root container with context)
+ *   - TypeaheadTrigger (search input with selected items display)
+ *   - TypeaheadOptions (filtered dropdown options list)
+ *   - FormHelperText (validation messages and helper text)
+ *
+ * @category Form Controls
+ * @subcategory Selection
+ *
+ * @example
+ * ```tsx
+ * // Single selection with React Hook Form
+ * const form = useForm();
+ * return (
+ *   <FormProvider {...form}>
+ *     <Typeahead
+ *       name="language"
+ *       label="Programming Language"
+ *       placeholder="Select a language"
+ *       validationSchema={{ required: 'Language is required' }}>
+ *       {languages.map(lang => (
+ *         <TypeaheadOption key={lang.id} value={lang.id} label={lang.name}>
+ *           {lang.name}
+ *         </TypeaheadOption>
+ *       ))}
+ *     </Typeahead>
+ *   </FormProvider>
+ * );
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multiple selection
+ * <Typeahead
+ *   name="tags"
+ *   isMultiple
+ *   label="Tags"
+ *   selectedItems={selected}
+ *   onChange={(item, isSelected) => handleToggle(item, isSelected)}>
+ *   {options.map(opt => (
+ *     <TypeaheadOption key={opt.id} value={opt.id}>
+ *       {opt.label}
+ *     </TypeaheadOption>
+ *   ))}
+ * </Typeahead>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom values - allows users to type and add values not in options
+ * <Typeahead
+ *   name="tags"
+ *   isMultiple
+ *   allowCustomValues={true}
+ *   label="Tags">
+ *   {options.map(opt => (
+ *     <TypeaheadOption key={opt.id} value={opt.id}>
+ *       {opt.label}
+ *     </TypeaheadOption>
+ *   ))}
+ * </Typeahead>
+ * // Users can type "custom-tag" and press Enter to add it
+ * // Custom values appear in blue in the dropdown and selected items
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom option rendering
+ * <Typeahead
+ *   name="users"
+ *   label="Select User"
+ *   renderOption={({ value, label, input }) => (
+ *     <div>
+ *       <Avatar src={users[value].avatar} />
+ *       <span>{highlightMatch(label, input)}</span>
+ *     </div>
+ *   )}>
+ *   {users.map(user => (
+ *     <TypeaheadOption key={user.id} value={user.id} label={user.name} />
+ *   ))}
+ * </Typeahead>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Schema validation in Form Builder (JsonSchemaForm)
+ * // For single select - use 'required' in schema
+ * const schema = {
+ *   type: 'string',
+ *   title: 'Select field title',
+ *   enum: ['Option 1', 'Option 2'],
+ *   // required: ['selectField'] // Add to top-level required array
+ * };
+ *
+ * // For multiple select (array) - use 'required' + 'minItems'
+ * const schema = {
+ *   type: 'array',
+ *   title: 'Select multiple fields title',
+ *   items: {
+ *     type: 'string',
+ *     enum: ['Option 1', 'Option 2', 'Option 3'],
+ *   },
+ *   minItems: 1, // Ensures at least one item is selected
+ *   // required: ['selectMultipleField'] // Add to top-level required array
+ * };
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Schema validation in standalone mode (React Hook Form)
+ * // For single select - use 'required' in validationSchema
+ * <Typeahead
+ *   name="language"
+ *   label="Language"
+ *   validationSchema={{
+ *     required: 'Language is required',
+ *   }}>
+ *   {options.map(opt => (
+ *     <TypeaheadOption key={opt.id} value={opt.id}>
+ *       {opt.label}
+ *     </TypeaheadOption>
+ *   ))}
+ * </Typeahead>
+ *
+ * // For multiple select - use 'validate' function to check array length
+ * <Typeahead
+ *   name="tags"
+ *   isMultiple
+ *   label="Tags"
+ *   validationSchema={{
+ *     validate: (value: string[]) => {
+ *       if (!value || value.length === 0) {
+ *         return 'At least one tag is required';
+ *       }
+ *       return true;
+ *     },
+ *   }}>
+ *   {options.map(opt => (
+ *     <TypeaheadOption key={opt.id} value={opt.id}>
+ *       {opt.label}
+ *     </TypeaheadOption>
+ *   ))}
+ * </Typeahead>
+ * ```
+ *
+ * @note Validation differences:
+ * - **Form Builder (JsonSchemaForm)**: Uses JSON Schema validation. For arrays, use `minItems` property
+ *   (e.g., `minItems: 1` to require at least one selection). The `required` array at the schema root
+ *   marks fields as required.
+ * - **Standalone mode**: Uses React Hook Form validation. For arrays, use a `validate` function to check
+ *   array length, as React Hook Form doesn't have a built-in `minItems` rule. The `required` rule works
+ *   for single select fields.
+ *
+ * @see {@link TypeaheadOption} - Child component for individual options
+ * @see {@link Popover} - Used for dropdown positioning
+ *
+ * @accessibility
+ * - ARIA attributes set according to WAI-ARIA combobox pattern
+ * - Keyboard navigation (Arrow keys, Enter, Escape, Tab)
+ * - Screen reader friendly
+ * - Focus management with trap
+ * - Search input filtering
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+ */
+export declare const Typeahead: ({ name, label, selectedItems, defaultSelectedItems, isOpen, isDisabled, isMultiple, children, className, startIcon, endIcon, error, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, popoverClassName, optionsClassName, wrapperClassName, filterOptions, autoSelect, allowCustomValues, width, onChange, onEmptyChange, onClearAll, onRemoveSelectedClick, renderOption, }: TypeaheadProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Typeahead/components/TypeaheadOption.d.ts

@@ -1,2 +1,2 @@
 import { TypeaheadItemProps } from '../types';
-export declare const TypeaheadOption: ({ children, avatar, ...rest }: TypeaheadItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TypeaheadOption: ({ children, avatar, isCustomValue, ...rest }: TypeaheadItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Typeahead/styles.d.ts

@@ -10,13 +10,14 @@ export declare const TypeaheadOption: import("@emotion/styled").StyledComponent<
     as?: React.ElementType;
 } & TypeaheadItemProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const TypeaheadInput: (theme: Theme) => string;
-export declare const TypeaheadInputPlaceholder: string;
+export declare const TypeaheadInputPlaceholder: (theme: Theme) => string;
 export declare const TypeaheadInputWrapper: string;
 export declare const TypeaheadItem: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
 } & {
     isDisabled?: boolean;
+    isCustomValue?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TypeaheadItemAvatar: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
@@ -27,16 +28,20 @@ export declare const TypeaheadItemLabel: import("@emotion/styled").StyledCompone
     as?: React.ElementType;
 } & {
     isDisabled?: boolean;
+    isCustomValue?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TypeaheadItemCross: import("@emotion/styled").StyledComponent<import("../Button/types").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+export declare const TypeaheadItemCross: import("@emotion/styled").StyledComponent<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: Theme;
+} & {
+    isCustomValue?: boolean;
 }, {}, {}>;
 export declare const TypeaheadInputsGroupWrapper: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
 } & {
-    direction?: string;
-    alignItems?: string;
+    direction?: import("../Wrapper").WrapperDirection;
+    alignItems?: import("../Wrapper").WrapperAlignItems;
+    justifyContent?: import("../Wrapper").WrapperJustifyContent;
     fade?: boolean;
     fadeDelay?: number;
     isVisible?: boolean;
@@ -45,7 +50,7 @@ export declare const TypeaheadInputsGroupWrapper: import("@emotion/styled").Styl
 } & {
     isOpen: boolean;
 }, {}, {}>;
-export declare const TypeaheadTrigger: import("@emotion/styled").StyledComponent<Omit<import("react").HTMLProps<HTMLElement> & import("../Button/types").ButtonProps & import("../Popover/types").PopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLElement> & {
+export declare const TypeaheadTrigger: import("@emotion/styled").StyledComponent<Omit<import("react").HTMLProps<HTMLElement> & import("..").ButtonProps & import("../Popover/types").PopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLElement> & {
     theme?: Theme;
 } & {
     isOpen: boolean;

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

@@ -1,53 +1,243 @@
 import { CommonProps } from '../../types/emotion';
 import { FieldError } from 'react-hook-form';
+/**
+ * Allowed value types for Typeahead options
+ */
 export type TypeaheadValue = string | number;
+/**
+ * Props for TypeaheadOption component
+ * Record type that allows any string or number properties.
+ * Common properties include: value, label, children, avatar, etc.
+ */
 export type TypeaheadOptionProps = Record<string, TypeaheadValue>;
+/**
+ * Props for the Typeahead component
+ *
+ * An advanced autocomplete component with search-as-you-type functionality.
+ * Supports single and multiple selection, filtering, custom rendering, and
+ * React Hook Form integration for validation.
+ *
+ * @example
+ * ```tsx
+ * <Typeahead
+ *   name="language"
+ *   label="Language"
+ *   placeholder="Select language"
+ *   validationSchema={{ required: 'Required' }}>
+ *   {options.map(opt => (
+ *     <TypeaheadOption key={opt.id} value={opt.id} label={opt.name}>
+ *       {opt.name}
+ *     </TypeaheadOption>
+ *   ))}
+ * </Typeahead>
+ * ```
+ */
 export interface TypeaheadProps {
+    /**
+     * Controlled selected items (array of values)
+     * When provided, controls the selected items externally
+     */
     selectedItems?: Array<TypeaheadValue>;
+    /**
+     * Default selected items for uncontrolled mode
+     */
     defaultSelectedItems?: Array<TypeaheadValue>;
+    /**
+     * Enable multiple selection mode
+     * When true, allows selecting multiple options
+     * @default false
+     */
     isMultiple?: boolean;
+    /**
+     * Whether the component is disabled
+     * Disabled typeahead cannot be interacted with
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * TypeaheadOption components as children
+     * Each child should be a TypeaheadOption component
+     */
     children?: React.ReactNode;
+    /**
+     * Custom CSS class name for the trigger input
+     */
     className?: string;
+    /**
+     * Custom CSS class name for the popover container
+     */
     popoverClassName?: string;
+    /**
+     * Custom CSS class name for the options list
+     */
     optionsClassName?: string;
+    /**
+     * Custom CSS class name for the wrapper container
+     */
     wrapperClassName?: string;
+    /**
+     * Width of the component
+     * Can be a number (pixels) or string (CSS value)
+     * @default 300
+     */
     width?: string | number;
+    /**
+     * Controlled open state
+     * When provided, controls dropdown open/closed state externally
+     */
     isOpen?: boolean;
+    /**
+     * Icon or element to display at the start of the input
+     */
     startIcon?: React.ReactNode;
+    /**
+     * Icon or element to display at the end of the input
+     */
     endIcon?: React.ReactNode;
+    /**
+     * Custom CSS class name for the start icon
+     */
     startIconClassName?: string;
+    /**
+     * Custom CSS class name for the end icon
+     */
     endIconClassName?: string;
+    /**
+     * Form field name (required for React Hook Form integration)
+     * @default 'typeahead-search'
+     */
     name?: string;
+    /**
+     * Label text displayed above the input
+     */
     label?: string;
+    /**
+     * Helper text displayed below the input
+     */
     helperText?: string;
+    /**
+     * Field error from React Hook Form
+     */
     error?: FieldError;
+    /**
+     * Whether to show success state
+     * @default false
+     */
     success?: boolean;
+    /**
+     * Validation schema for React Hook Form
+     * Used for form validation rules
+     */
     validationSchema?: Record<string, unknown>;
+    /**
+     * Placeholder text for the input
+     * @default 'Select something'
+     */
     placeholder?: string | null;
+    /**
+     * Whether to filter options based on input
+     * When false, all options are always shown
+     * @default true
+     */
     filterOptions?: boolean;
+    /**
+     * Whether to automatically select the first option on filter
+     * @default true
+     */
     autoSelect?: boolean;
+    /**
+     * Allow adding custom values not in the options list.
+     * When true, the current input is shown as the first dropdown option (highlighted)
+     * and can be selected or added with Enter.
+     * @default true
+     */
+    allowCustomValues?: boolean;
+    /**
+     * Callback fired when an option is selected/deselected
+     * Receives the selected item value and whether it's selected
+     */
     onChange?: (selectedItem: TypeaheadValue, isSelected: boolean) => void;
+    /**
+     * Callback fired when "Clear All" is clicked (multiple mode)
+     */
     onClearAll?: () => void;
+    /**
+     * Callback fired when a selected item's remove button is clicked
+     * Receives the item value to be removed
+     */
     onRemoveSelectedClick?: (selectedItem: TypeaheadValue) => void;
+    /**
+     * Callback fired when the selection becomes empty or non-empty
+     * Receives a boolean indicating if selection is empty
+     */
     onEmptyChange?: (isEmpty?: boolean) => void;
+    /**
+     * Custom render function for options
+     * Allows customizing the appearance of each option
+     * Receives value, input text, and label
+     */
     renderOption?: (data: {
         value: string | number;
         input: string;
         label: string;
     }) => React.ReactNode;
 }
-export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'defaultSelectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'validationSchema' | 'error' | 'success' | 'placeholder' | 'filterOptions' | 'autoSelect'>;
+/**
+ * Props used by the useTypeahead hook
+ * Internal type that picks specific props from TypeaheadProps
+ */
+export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'defaultSelectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'validationSchema' | 'error' | 'success' | 'placeholder' | 'filterOptions' | 'autoSelect' | 'allowCustomValues'>;
+/**
+ * Props for TypeaheadOptions container component
+ */
 export interface TypeaheadItemsListProps extends CommonProps {
     children?: React.ReactNode;
     noItemsMessage?: string;
 }
+/**
+ * Props for TypeaheadOption component
+ */
 export interface TypeaheadItemProps extends CommonProps {
+    /**
+     * Whether this option is currently selected
+     */
     isActive?: boolean;
+    /**
+     * Whether this option is disabled
+     */
     isDisabled?: boolean;
+    /**
+     * Value of the option (must be unique)
+     */
     value?: string | number;
+    /**
+     * Label text for the option
+     * Used for filtering and display
+     */
     label?: string | number;
+    /**
+     * Content to display in the option
+     * Can be custom React nodes
+     */
     children?: React.ReactNode;
+    /**
+     * Avatar or icon to display before the option content
+     */
     avatar?: React.ReactNode;
+    /**
+     * Click handler for the option
+     */
     onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * When true, option is a user-typed custom value (shown first, highlighted in blue)
+     */
+    isCustomValue?: boolean;
+    /**
+     * ARIA role for the option (e.g. 'option')
+     */
+    role?: string;
+    /**
+     * ARIA selected state
+     */
+    'aria-selected'?: boolean;
 }

package/dist/components/Typeahead/useTypeahead.d.ts

@@ -1,16 +1,21 @@
 import React from 'react';
 import { OpenChangeReason } from '@floating-ui/react';
 import { TypeaheadOptionProps, TypeaheadValue, UseTypeaheadProps } from './types';
-export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: providedSelectedItems, defaultSelectedItems, isDisabled, isMultiple, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, filterOptions, autoSelect, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, }: UseTypeaheadProps) => {
+type HandleChangeParams = {
+    value?: string | number;
+    shouldClose?: boolean;
+    resetInput?: boolean;
+};
+export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: providedSelectedItems, defaultSelectedItems, isDisabled, isMultiple, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, filterOptions, autoSelect, allowCustomValues, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, }: UseTypeaheadProps) => {
     isOpen: boolean;
     isDisabled: boolean | undefined;
     optionsWithKey: Record<string | number, TypeaheadOptionProps>;
     selectedItems: TypeaheadValue[];
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     firstSuggestion: string;
     isMultiple: boolean | undefined;
     typeaheadId: string;
-    triggerRef: React.RefObject<HTMLDivElement>;
+    triggerRef: React.RefObject<HTMLDivElement | null>;
     className: string | undefined;
     startIcon: React.ReactNode;
     endIcon: React.ReactNode;
@@ -23,8 +28,10 @@ export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: p
     status: "error" | "success" | "basic";
     error: import("react-hook-form").FieldError | import("react-hook-form").Merge<import("react-hook-form").FieldError, import("react-hook-form").FieldErrorsImpl<any>> | undefined;
     placeholder: string | null | undefined;
-    options: (React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null)[];
-    useFormResult: import("react-hook-form").UseFormReturn<import("react-hook-form").FieldValues, any, undefined>;
+    options: (React.ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];
+    customOptionValue: string | null;
+    handleChange: ({ value, shouldClose, resetInput, }: HandleChangeParams) => void;
+    useFormResult: import("react-hook-form").UseFormReturn<import("react-hook-form").FieldValues, any, import("react-hook-form").FieldValues>;
     register: import("react-hook-form").UseFormRegister<import("react-hook-form").FieldValues>;
     setValue: import("react-hook-form").UseFormSetValue<import("react-hook-form").FieldValues>;
     onChange: ((selectedItem: TypeaheadValue, isSelected: boolean) => void) | undefined;
@@ -36,3 +43,4 @@ export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: p
     handleRemoveSelectedClick: (value: string | number) => (e: React.MouseEvent) => void;
 };
 export type UseTypeaheadResult = ReturnType<typeof useTypeahead>;
+export {};

package/dist/components/Typography/Typography.d.ts

@@ -1,3 +1,53 @@
 import { TypographyProps } from './types';
+/**
+ * Typography - Text typography component with semantic variants
+ *
+ * A flexible typography component that provides consistent text styling across
+ * the application. Supports semantic HTML variants (headings, body text, captions)
+ * with customizable font weights, colors, and spacing. Automatically renders
+ * appropriate HTML elements based on variant while allowing semantic override.
+ *
+ * @category Components
+ * @subcategory Display
+ *
+ * @example
+ * ```tsx
+ * // Heading
+ * <Typography variant="h1">Main Title</Typography>
+ * <Typography variant="h2">Section Title</Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Body text
+ * <Typography variant="body1">
+ *   This is regular body text
+ * </Typography>
+ * <Typography variant="body2" weight="bold" color="#333">
+ *   This is bold, darker body text
+ * </Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Semantic override
+ * <Typography variant="h2" as="h1">
+ *   Looks like h2 but semantically is h1
+ * </Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With gutter for spacing
+ * <Typography variant="body1" gutter>
+ *   This text has bottom margin
+ * </Typography>
+ * ```
+ *
+ * @accessibility
+ * - Uses semantic HTML elements by default
+ * - Supports proper heading hierarchy
+ * - Respects user font size preferences
+ */
 declare const Typography: import("react").ForwardRefExoticComponent<Omit<TypographyProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
 export default Typography;