@ssa-ui-kit/core 2.33.0 → 3.1.0

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

@@ -1,11 +1,78 @@
+/**
+ * Props for the Typography component
+ *
+ * Text typography component with semantic variants, font weights, and customizable
+ * styling. Renders appropriate HTML elements based on variant while allowing
+ * custom element override via `as` prop. Supports all standard typography variants
+ * from headings to body text and captions.
+ *
+ * @example
+ * ```tsx
+ * // Heading variant
+ * <Typography variant="h1">Main Title</Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Body text with custom styling
+ * <Typography variant="body1" weight="bold" color="#333">
+ *   Important text
+ * </Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Semantic override
+ * <Typography variant="h2" as="h1">
+ *   Looks like h2, but renders as h1
+ * </Typography>
+ * ```
+ */
 export interface TypographyProps {
+    /**
+     * Typography variant determining size, line-height, and semantic HTML element
+     * - `h1`-`h6`: Heading variants (renders as h1-h6)
+     * - `subtitle`: Subtitle text (renders as h6)
+     * - `body1`-`body3`: Body text variants (renders as p)
+     * - `caption`: Caption/small text (renders as span)
+     * @default 'body1'
+     */
     variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle' | 'body1' | 'body2' | 'body3' | 'caption';
+    /**
+     * Font weight variant
+     * @default 'regular'
+     */
     weight?: 'lighter' | 'regular' | 'medium' | 'bold';
+    /**
+     * Whether to add bottom margin (gutter)
+     * Useful for spacing between typography elements
+     * @default false
+     */
     gutter?: boolean;
+    /**
+     * Text color (CSS color value)
+     * @default 'rgba(43, 45, 49, 1)'
+     */
     color?: string;
+    /**
+     * Text content to display
+     */
     children: React.ReactNode;
+    /**
+     * Override the HTML element type
+     * Allows semantic HTML override (e.g., h2 variant as h1 element)
+     */
     as?: React.ElementType;
+    /**
+     * Custom CSS class name
+     */
     className?: string;
+    /**
+     * Ref to the rendered element
+     */
     ref?: React.Ref<HTMLElement>;
+    /**
+     * HTML id attribute
+     */
     id?: string;
 }

package/dist/components/UserProfile/UserProfile.d.ts

@@ -1,2 +1,78 @@
 import { UserProfileProps } from './types';
+/**
+ * UserProfile - User profile dropdown with logout functionality
+ *
+ * A user profile component that displays user information (name, email) and a
+ * logout button in a popover dropdown. Supports custom trigger elements, additional
+ * information display, and custom content sections. Uses Popover component for
+ * positioning and interactions.
+ *
+ * Component structure:
+ * - UserProfile (main component)
+ *   - Popover (wrapper with positioning)
+ *     - PopoverTrigger (custom trigger element)
+ *     - PopoverContent (profile content)
+ *       - UserInfo (name, email, additional info)
+ *       - CustomContent (optional custom section)
+ *       - LogoutButton (logout action)
+ *
+ * @category Components
+ * @subcategory Navigation
+ *
+ * @example
+ * ```tsx
+ * // Basic user profile with icon trigger
+ * <UserProfile
+ *   name="John Doe"
+ *   email="john.doe@example.com"
+ *   trigger={<Icon name="user" size={32} />}
+ *   onClick={() => handleLogout()}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With avatar trigger and additional info
+ * <UserProfile
+ *   name="Jane Smith"
+ *   email="jane@example.com"
+ *   trigger={<Avatar src="/avatar.jpg" size={40} />}
+ *   onClick={handleLogout}
+ *   additionalInfo={[
+ *     <Typography key="role">Administrator</Typography>,
+ *     <Typography key="department">Engineering</Typography>,
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom content section
+ * <UserProfile
+ *   name="Bob Johnson"
+ *   email="bob@example.com"
+ *   trigger={<Button variant="secondary">Profile</Button>}
+ *   onClick={handleLogout}
+ *   customContent={
+ *     <div css={{ padding: '12px', borderTop: '1px solid #eee' }}>
+ *       <Button onClick={handleSettings} variant="secondary">
+ *         Settings
+ *       </Button>
+ *     </div>
+ *   }
+ *   logOutText="Sign Out"
+ * />
+ * ```
+ *
+ * @see {@link Popover} - Used for dropdown positioning and interactions
+ * @see {@link Icon} - Common trigger element
+ * @see {@link Avatar} - Common trigger element
+ *
+ * @accessibility
+ * - ARIA attributes via Popover component
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ * - Proper focus management
+ * - Semantic heading structure
+ */
 export declare const UserProfile: ({ name, email, trigger, onClick, logOutText, className, additionalInfo, customContent, }: UserProfileProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -8,8 +8,9 @@ export declare const AdditionalInfoWrapper: import("@emotion/styled").StyledComp
     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;
@@ -20,8 +21,9 @@ export declare const CustomContentWrapper: import("@emotion/styled").StyledCompo
     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;

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

@@ -1,11 +1,95 @@
 import { ReactNode } from 'react';
+/**
+ * Props for the UserProfile component
+ *
+ * A user profile dropdown component that displays user information and a logout
+ * button in a popover. Supports custom trigger elements, additional info, and
+ * custom content sections.
+ *
+ * @example
+ * ```tsx
+ * // Basic user profile
+ * <UserProfile
+ *   name="John Doe"
+ *   email="john.doe@example.com"
+ *   trigger={<Icon name="user" size={32} />}
+ *   onClick={() => handleLogout()}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With additional info
+ * <UserProfile
+ *   name="Jane Smith"
+ *   email="jane@example.com"
+ *   trigger={<Avatar src="/avatar.jpg" />}
+ *   onClick={handleLogout}
+ *   additionalInfo={[
+ *     <Typography key="role">Administrator</Typography>,
+ *     <Typography key="org">Acme Corp</Typography>,
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom content
+ * <UserProfile
+ *   name="Bob Johnson"
+ *   email="bob@example.com"
+ *   trigger={<Button>Profile</Button>}
+ *   onClick={handleLogout}
+ *   customContent={
+ *     <div>
+ *       <Button onClick={handleSettings}>Settings</Button>
+ *       <Button onClick={handlePreferences}>Preferences</Button>
+ *     </div>
+ *   }
+ *   logOutText="Sign Out"
+ * />
+ * ```
+ */
 export interface UserProfileProps {
+    /**
+     * User's full name
+     * Displayed as heading in the profile popover
+     */
     name: string;
+    /**
+     * User's email address
+     * Displayed as description text in the profile popover
+     */
     email: string;
-    trigger: string | JSX.Element;
+    /**
+     * Trigger element that opens the profile popover
+     * Can be a string, icon, avatar, button, or any React element
+     */
+    trigger: string | React.JSX.Element;
+    /**
+     * Callback function when logout button is clicked
+     * Typically handles user logout logic
+     */
     onClick: () => void;
+    /**
+     * Text for the logout button
+     * @default 'Log Out'
+     */
     logOutText?: string;
+    /**
+     * Custom CSS class name for the popover content
+     */
     className?: string;
+    /**
+     * Array of additional information elements
+     * Displayed between email and custom content sections
+     * Each element is rendered in a wrapper div
+     */
     additionalInfo?: ReactNode[];
+    /**
+     * Custom content section
+     * Displayed between user info and logout button
+     * Useful for additional actions or information
+     */
     customContent?: ReactNode;
 }

package/dist/components/WidgetCard/Title.d.ts

@@ -1,3 +1,3 @@
-export declare const WidgetCardTitle: import("@emotion/styled").StyledComponent<Omit<import("../Typography/types").TypographyProps, "ref"> & import("react").RefAttributes<HTMLElement> & {
+export declare const WidgetCardTitle: import("@emotion/styled").StyledComponent<Omit<import("..").TypographyProps, "ref"> & import("react").RefAttributes<HTMLElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/dist/components/WidgetCard/WidgetCardBase.d.ts

@@ -1,4 +1,4 @@
-export declare const WidgetCardBase: import("@emotion/styled").StyledComponent<import("../Card/types").CardProps & {
+export declare const WidgetCardBase: import("@emotion/styled").StyledComponent<import("..").CardProps & {
     theme?: import("@emotion/react").Theme;
 } & {
     isFullscreenMode?: boolean;

package/dist/components/WithLink.d.ts

@@ -4,4 +4,4 @@ export declare const WithLink: ({ link, onClick, children, className, }: {
     className?: string;
     onClick?: () => void;
     link?: To;
-}) => string | number | boolean | Iterable<import("react").ReactNode> | import("@emotion/react/jsx-runtime").JSX.Element | null | undefined;
+}) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("@emotion/react/jsx-runtime").JSX.Element | null | undefined;

package/dist/components/Wrapper/Wrapper.d.ts

@@ -1,12 +1,93 @@
 import { CommonProps } from '../../types/emotion';
+/**
+ * Wrapper - Flexible flexbox container component
+ *
+ * A styled div component that provides a flexible flexbox layout container
+ * with optional fade animation. Useful for wrapping content with consistent
+ * flex layout, alignment, and visibility animations.
+ *
+ * Features:
+ * - Flexbox layout with configurable direction and alignment
+ * - Optional fade in/out animation with configurable delay
+ * - Visibility control with smooth transitions
+ * - Full width by default
+ *
+ * @category Components
+ * @subcategory Layout
+
+ * @example
+ * ```tsx
+ * // Basic wrapper
+ * <Wrapper>
+ *   <Button>Button 1</Button>
+ *   <Button>Button 2</Button>
+ * </Wrapper>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Vertical layout
+ * <Wrapper direction="column" alignItems="flex-start">
+ *   <Typography>Item 1</Typography>
+ *   <Typography>Item 2</Typography>
+ * </Wrapper>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With fade animation
+ * <Wrapper fade isVisible={isVisible} fadeDelay={0.5}>
+ *   <Content />
+ * </Wrapper>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Conditionally visible
+ * <Wrapper isVisible={showContent}>
+ *   {showContent && <DynamicContent />}
+ * </Wrapper>
+ * ```
+ */
+/** Flex container direction (maps to CSS flex-direction) */
+export type WrapperDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+/** Cross-axis alignment (maps to CSS align-items) */
+export type WrapperAlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'start' | 'end' | 'self-start' | 'self-end' | 'normal';
+/** Main-axis alignment (maps to CSS justify-content) */
+export type WrapperJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end' | 'left' | 'right' | 'normal';
 declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    direction?: string;
-    alignItems?: string;
+    /**
+     * Flex direction (row, column, row-reverse, column-reverse)
+     * @default 'row'
+     */
+    direction?: WrapperDirection;
+    /**
+     * Align items value (flex-start, center, flex-end, stretch, baseline, etc.)
+     * @default 'center'
+     */
+    alignItems?: WrapperAlignItems;
+    /**
+     * Justify content value (flex-start, center, flex-end, space-between, etc.)
+     */
+    justifyContent?: WrapperJustifyContent;
+    /**
+     * Enable fade in/out transition animation
+     * @default false
+     */
     fade?: boolean;
+    /**
+     * Fade animation duration in seconds
+     * @default 0.3
+     */
     fadeDelay?: number;
+    /**
+     * Visibility state
+     * When false, element has opacity 0 and visibility hidden
+     * @default true
+     */
     isVisible?: boolean;
 } & CommonProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export default Wrapper;

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

@@ -1 +1,2 @@
 export { default } from './Wrapper';
+export type { WrapperDirection, WrapperAlignItems, WrapperJustifyContent, } from './Wrapper';

package/dist/components/index.d.ts

@@ -1,119 +1,147 @@
-export { default as Avatar } from './Avatar';
-export { default as Badge } from './Badge';
 export { default as Button } from './Button';
-export { default as Card } from './Card';
-export { default as CardBase } from './Card/CardBase';
-export { default as CardContent } from './CardContent';
-export { default as CardHeader } from './CardHeader';
+export type * from './Button/types';
+export * from './ButtonGroup';
+export * from './IconButton';
 export { default as Checkbox } from './Checkbox';
+export * from './Checkbox';
+export type * from './Checkbox/types';
+export { default as Input } from './Input';
+export type * from './Input/types';
+export { default as Textarea } from './Textarea';
+export * from './Textarea';
+export type * from './Textarea/types';
+export { default as TextField } from './TextField';
+export * from './TextField';
+export type * from './TextField/types';
+export * from './NumberField';
+export { default as Switch } from './Switch';
+export * from './Switch';
+export type * from './Switch/types';
+export * from './Slider';
+export { default as Radio } from './Radio';
+export type { RadioProps } from './Radio/types';
+export { default as RadioGroup } from './RadioGroup';
+export type * from './RadioGroup/types';
 export { default as Dropdown } from './Dropdown';
+export type * from './Dropdown/types';
 export { default as DropdownArrow } from './DropdownArrow';
 export { default as DropdownBase } from './DropdownBase';
 export { default as DropdownOption } from './DropdownOption';
 export { default as DropdownOptions } from './DropdownOptions';
+export type { DropdownOptionProps } from './DropdownOptions';
 export { default as DropdownToggle } from './DropdownToggle';
+export type * from './DropdownToggle/types';
+export { default as MultipleDropdown } from './MultipleDropdown';
+export { default as MultipleDropdownNotification } from './MultipleDropdownNotification';
+export { default as MultipleDropdownOptions } from './MultipleDropdownOptions';
+export * from './Typeahead';
+export * from './DatePicker';
+export * from './DateRangePicker';
+export type { CalendarType } from './DatePicker/types';
+export * from './ColorPicker';
+export * from './SearchBox';
+export type * from './SearchBox/types';
+export * from './Field';
 export { default as Form } from './Form';
 export { default as FormAction } from './FormAction';
 export { default as FormCheckbox } from './FormCheckbox';
+export * from './FormCheckbox';
 export { default as FormGroup } from './FormGroup';
 export { default as FormHelperText } from './FormHelperText';
 export { default as FormRadioGroup } from './FormRadioGroup';
-export { default as Icon } from './Icon';
-export { default as Indicator } from './Indicator';
-export { default as Input } from './Input';
+export * from './Filters';
+export * from './FiltersMultiSelect';
+export * as JsonSchema from './JsonSchemaForm';
+export { default as Table } from './Table';
+export { default as TableBody } from './TableBody';
+export { default as TableCell } from './TableCell';
+export { default as TableCellHeader } from './TableCellHeader';
+export * from './TableFilters';
+export { default as TableHead } from './TableHead';
+export { default as TableRow } from './TableRow';
+export * from './NestedTable';
+export { default as Card } from './Card';
+export type * from './Card/types';
+export { default as CardBase } from './Card/CardBase';
+export { default as CardContent } from './CardContent';
+export { default as CardHeader } from './CardHeader';
+export * from './CardList';
+export { default as Typography } from './Typography';
+export * from './Typography';
+export type * from './Typography/types';
+export { default as Badge } from './Badge';
+export type * from './Badge/types';
+export { default as Tag } from './Tag';
+export * from './Tag';
+export type * from './Tag/types';
+export * from './Chip';
+export type * from './Chip/types';
+export { default as Avatar } from './Avatar';
 export { default as Label } from './Label';
-export { default as LargeTab } from './LargeTab';
-export { default as Link } from './Link';
-export { default as Modal } from './Modal';
-export { default as ModalContent } from './ModalContent';
-export { default as ModalDialog } from './ModalDialog';
-export { default as ModalDismissButton } from './ModalDismissButton';
-export { default as ModalOpenButton } from './ModalOpenButton';
-export { default as MultipleDropdown } from './MultipleDropdown';
-export { default as MultipleDropdownNotification } from './MultipleDropdownNotification';
-export { default as MultipleDropdownOptions } from './MultipleDropdownOptions';
-export { default as NavBar } from './NavBar';
+export type * from './Label/types';
+export { default as Indicator } from './Indicator';
+export type * from './Indicator/types';
 export { default as Progress } from './Progress';
+export type * from './Progress/types';
 export { default as ProgressBar } from './ProgressBar';
+export type * from './ProgressBar/types';
 export { default as ProgressCircle } from './ProgressCircle';
+export type * from './ProgressCircle/types';
 export { default as ProgressInfo } from './ProgressInfo';
+export * from './ProgressInfo';
 export { default as ProgressLegend } from './ProgressLegend';
 export { default as ProgressLegendItem } from './ProgressLegendItem';
 export { default as ProgressVertical } from './ProgressVertical';
-export { default as Radio } from './Radio';
-export { default as RadioGroup } from './RadioGroup';
+export * from './Charts';
+export * from './ImageItem';
 export { default as ResponsiveImage } from './ResponsiveImage';
+export * from './ResponsiveImage';
+export type * from './ResponsiveImage/types';
+export { default as NavBar } from './NavBar';
+export * from './NavBar';
+export * from './CollapsibleNavBar';
+export { default as Tab } from './Tab';
+export { default as TabBar } from './TabBar';
+export * from './TabBar';
+export type * from './TabBar/types';
+export { default as LargeTab } from './LargeTab';
+export * from './LinksTabBar';
+export { default as Stepper } from './Stepper';
+export type * from './Stepper/types';
 export { default as Step } from './Step';
 export { default as StepConnector } from './StepConnector';
 export { default as StepLabel } from './StepLabel';
-export { default as Stepper } from './Stepper';
-export { default as Switch } from './Switch';
-export { default as Tab } from './Tab';
-export { default as TabBar } from './TabBar';
-export { default as Table } from './Table';
-export { default as TableBody } from './TableBody';
-export { default as TableCell } from './TableCell';
-export { default as TableCellHeader } from './TableCellHeader';
-export { default as TableHead } from './TableHead';
-export { default as TableRow } from './TableRow';
-export { default as Tag } from './Tag';
-export { default as Textarea } from './Textarea';
-export { default as TextField } from './TextField';
+export * from './Pagination';
+export { default as Link } from './Link';
+export * from './WithLink';
+export { default as Wrapper } from './Wrapper';
+export * from './Wrapper';
+export * from './WithVisibleLG';
+export * from './WithVisibleMD';
+export * from './WithVisibleSM';
+export * from './WithVisibleUpToLG';
+export { default as Modal } from './Modal';
+export * from './Modal';
+export type * from './Modal/types';
+export { default as ModalContent } from './ModalContent';
+export { default as ModalDialog } from './ModalDialog';
+export type * from './ModalDialog/types';
+export { default as ModalDismissButton } from './ModalDismissButton';
+export { default as ModalOpenButton } from './ModalOpenButton';
+export * from './Drawer';
 export { default as Tooltip } from './Tooltip';
+export * from './Tooltip';
 export { default as TooltipContent } from './TooltipContent';
 export { default as TooltipTrigger } from './TooltipTrigger';
-export { default as Typography } from './Typography';
-export { default as Wrapper } from './Wrapper';
+export * from './Popover';
+export * from './NotificationCard';
+export * from './NotificationMenu';
 export * from './AccordionGroup';
 export * from './AddNewAccountCard';
-export * from './ButtonGroup';
-export * from './CardList';
-export * from './Chip';
-export * from './Charts';
-export * from './Checkbox';
-export * from './CollapsibleNavBar';
-export * from './ColorPicker';
-export * from './DatePicker';
 export * from './PersonInfo';
-export * from './DateRangePicker';
-export * from './Drawer';
-export * from './Field';
-export * from './Filters';
-export * from './FiltersMultiSelect';
-export * from './FormCheckbox';
-export * from './FullscreenModeContext';
-export * from './Icon';
-export * from './Icon/types';
-export * from './ImageItem';
-export * from './LinksTabBar';
-export * from './Modal';
-export * from './NavBar';
-export * from './NestedTable';
-export * from './NotificationCard';
-export * from './NotificationMenu';
-export * from './NumberField';
-export * from './Pagination';
-export * from './Popover';
-export * from './ProgressInfo';
-export * from './ResponsiveImage';
-export * from './SearchBox';
-export * from './Switch';
-export * from './TabBar';
-export * from './TableFilters';
-export * from './Tag';
-export * from './Textarea';
-export * from './TextField';
-export * from './Tooltip';
-export * from './Typeahead';
-export * from './Typography';
 export * from './UserProfile';
 export * from './WidgetCard';
-export * from './WithLink';
-export * from './WithVisibleLG';
-export * from './WithVisibleMD';
-export * from './WithVisibleSM';
-export * from './WithVisibleUpToLG';
-export * from './Wrapper';
-export * as JsonSchema from './JsonSchemaForm';
-export type { DropdownOptionProps } from './DropdownOptions';
-export type { RadioProps } from './Radio/types';
+export { default as Icon } from './Icon';
+export * from './Icon';
+export * from './Icon/types';
+export * from './FullscreenModeContext';

package/dist/index.d.ts

@@ -8,3 +8,4 @@ export * as globalStyles from './styles/global';
 export * as styleUtils from './styles/safari-focus-outline';
 export * from './components';
 export * from './contexts';
+export * from './utils/react19HocCompat';