@grasp-labs/ds-react-components 0.13.0

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,31 @@
+import { CardProps } from '../card/Card';
+export type DialogProps = {
+    /** Whether the dialog is open */
+    isOpen: boolean;
+    /** Callback function called when the dialog should be closed */
+    onClose: () => void;
+    /** Whether clicking the backdrop should close the dialog */
+    closeOnBackdropClick?: boolean;
+    /** Whether pressing Escape should close the dialog */
+    closeOnEscape?: boolean;
+    /** Whether to show close button in header */
+    showClose?: boolean;
+    /** Additional CSS classes for the dialog backdrop */
+    backdropClassName?: string;
+    /** Size variant for the dialog */
+    size?: "sm" | "lg";
+} & CardProps;
+/**
+ * A modal dialog component built on top of the Card component.
+ *
+ * Features:
+ * - Backdrop click to close (optional)
+ * - Escape key to close (optional)
+ * - Prevents body scroll when open
+ * - Optional close button in header
+ * - Customizable backdrop and card styling
+ *
+ * @param props - The props for the Dialog component
+ * @returns A modal dialog with backdrop
+ */
+export declare const Dialog: ({ isOpen, onClose, closeOnBackdropClick, closeOnEscape, showClose, backdropClassName, size, className, title, headerActions, footerActions, children, headerClassName, bodyClassName, footerClassName, }: DialogProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,2 @@
+export { Dialog, type DialogProps } from './Dialog';
+export { ConfirmationDialog, type ConfirmationDialogProps, } from './ConfirmationDialog';

package/dist/components/dynamicIcon/DynamicIcon.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { IconName } from '../../icons/icons';
+import { IconProps } from '../../types/IconComponent';
+export type DynamicIconProps = IconProps & {
+    name: IconName;
+    fallback?: ReactNode;
+};
+export declare function DynamicIcon({ name, fallback, ...props }: DynamicIconProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/field/Field.d.ts

@@ -0,0 +1,82 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type FieldProps = HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+    disabled?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * Field is the root component for form fields with inline label layout.
+ * The label is positioned on the left side inline with the input control.
+ *
+ * @example
+ * <Field>
+ *   <FieldLabel>Email</FieldLabel>
+ *   <FieldContent>
+ *     <input type="email" />
+ *     <FieldMessage error>Invalid email format</FieldMessage>
+ *   </FieldContent>
+ * </Field>
+ */
+export declare const Field: ({ disabled, className, children, ref, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element;
+export type FieldLabelProps = HTMLAttributes<HTMLLabelElement> & {
+    children: ReactNode;
+    htmlFor: string;
+    required?: boolean;
+    ref?: React.Ref<HTMLLabelElement>;
+};
+/**
+ * FieldLabel renders a label for the field input, positioned on the left side inline.
+ */
+export declare const FieldLabel: ({ className, children, required, htmlFor, ref, ...props }: FieldLabelProps) => import("react/jsx-runtime").JSX.Element;
+export type FieldContentProps = HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * FieldContent wraps the control, description, and error message in a vertical layout.
+ * This is positioned to the right of the label in the inline layout.
+ */
+export declare const FieldContent: ({ className, children, ref, ...props }: FieldContentProps) => import("react/jsx-runtime").JSX.Element;
+export type FieldMessageProps = HTMLAttributes<HTMLParagraphElement> & {
+    children?: ReactNode;
+    error?: boolean;
+    ref?: React.Ref<HTMLParagraphElement>;
+};
+/**
+ * FieldMessage renders helper text or error messages below the input control.
+ * When error is true, it displays in red with appropriate ARIA attributes.
+ * When error is false (default), it displays as secondary text for descriptions.
+ */
+export declare const FieldMessage: ({ className, children, error, ref, ...props }: FieldMessageProps) => import("react/jsx-runtime").JSX.Element | null;
+export type FieldSetProps = HTMLAttributes<HTMLFieldSetElement> & {
+    children: ReactNode;
+    disabled?: boolean;
+    ref?: React.Ref<HTMLFieldSetElement>;
+};
+/**
+ * FieldSet is a semantic container for grouping related fields.
+ */
+export declare const FieldSet: ({ className, children, disabled, ref, ...props }: FieldSetProps) => import("react/jsx-runtime").JSX.Element;
+export type FieldLegendProps = HTMLAttributes<HTMLLegendElement> & {
+    children: ReactNode;
+    ref?: React.Ref<HTMLLegendElement>;
+};
+/**
+ * FieldLegend renders a title/legend for a group of related fields.
+ */
+export declare const FieldLegend: ({ className, children, ref, ...props }: FieldLegendProps) => import("react/jsx-runtime").JSX.Element;
+export type FieldGroupProps = HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * FieldGroup provides vertical spacing between multiple Field components.
+ */
+export declare const FieldGroup: ({ className, children, ref, ...props }: FieldGroupProps) => import("react/jsx-runtime").JSX.Element;
+export type FieldSeparatorProps = HTMLAttributes<HTMLHRElement> & {
+    ref?: React.Ref<HTMLHRElement>;
+};
+/**
+ * FieldSeparator renders a visual divider between field sections.
+ */
+export declare const FieldSeparator: ({ className, ref, ...props }: FieldSeparatorProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+export { Field } from './Field';
+export type { FieldProps } from './Field';
+export { FieldLabel } from './Field';
+export type { FieldLabelProps } from './Field';
+export { FieldContent } from './Field';
+export type { FieldContentProps } from './Field';
+export { FieldMessage } from './Field';
+export type { FieldMessageProps } from './Field';
+export { FieldSet } from './Field';
+export type { FieldSetProps } from './Field';
+export { FieldLegend } from './Field';
+export type { FieldLegendProps } from './Field';
+export { FieldGroup } from './Field';
+export type { FieldGroupProps } from './Field';
+export { FieldSeparator } from './Field';
+export type { FieldSeparatorProps } from './Field';

package/dist/components/flow/FlowTile.d.ts

@@ -0,0 +1,3 @@
+import { Node, NodeProps } from '@xyflow/react';
+import { FlowData } from './types';
+export declare const FlowTile: ({ data, selected }: NodeProps<Node<FlowData>>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flow/MetadataList.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+type MetadataListProps = {
+    metadata: Record<string, ReactNode>;
+};
+export declare function MetadataList({ metadata }: MetadataListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/flow/StatusIcon.d.ts

@@ -0,0 +1,5 @@
+import { FlowStatus } from './types';
+export type StatusIconProps = {
+    status: FlowStatus | undefined;
+};
+export declare const StatusIcon: ({ status }: StatusIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flow/TileHeader.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { FlowStatus } from './types';
+export type TileHeaderProps = {
+    title: string;
+    headerAction: ReactNode | undefined;
+    status: FlowStatus | undefined;
+};
+export declare const TileHeader: ({ title, status, headerAction, }: TileHeaderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export * from './FlowTile';
+export * from './types';

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

@@ -0,0 +1,15 @@
+import { Position } from '@xyflow/system';
+import { ReactNode } from 'react';
+import { IconName } from '../../icons';
+export type FlowStatus = "success" | "warning" | "error" | "pending" | "not-run";
+export type FlowPosition = Position | "none";
+export type FlowData = {
+    title: string;
+    status?: FlowStatus;
+    iconName?: IconName;
+    metadata?: Record<string, ReactNode>;
+    children?: ReactNode;
+    headerAction?: ReactNode;
+    targetPosition?: FlowPosition;
+    sourcePosition?: FlowPosition;
+};

package/dist/components/iconButton/IconButton.d.ts

@@ -0,0 +1,15 @@
+import { ComponentType, SVGProps } from 'react';
+import { BaseButtonProps } from '../baseButton';
+export type IconButtonProps = Omit<BaseButtonProps, "children"> & {
+    size?: "small" | "medium" | "large";
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    "aria-label"?: string;
+};
+/**
+ * A circular icon-only button component for actions requiring minimal visual footprint.
+ * Requires an icon and aria-label for accessibility compliance.
+ *
+ * @param props - The props for the IconButton component.
+ * @returns The rendered circular icon button.
+ */
+export declare const IconButton: ({ size, icon: Icon, className, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export * from './IconButton';

package/dist/components/jsonEditor/JsonEditor.d.ts

@@ -0,0 +1,7 @@
+import { JsonEditorProps as JsonEditorReactProps } from 'json-edit-react';
+export type JsonEditorProps<T extends Record<string, unknown> | null> = JsonEditorReactProps & {
+    data: T;
+    loadingMessage?: string;
+    onUpdate: (newData: unknown) => void;
+};
+export declare function JsonEditor<T extends Record<string, unknown> | null>({ data, onUpdate, collapse, loadingMessage, ...rest }: JsonEditorProps<T>): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/list/List.d.ts

@@ -0,0 +1,28 @@
+import { BaseOption } from '../../types/BaseOption';
+export type ListType = "single" | "multi";
+export type ListProps = {
+    options: BaseOption[];
+    type: ListType;
+    disabled?: boolean;
+    error?: boolean;
+    listClassName?: string;
+    highlightedIndex?: number;
+    itemsClassName?: string;
+    label?: string;
+} & ({
+    type: "single";
+    selected: string | number | null;
+    onChange: (selected: string | number | null) => void;
+} | {
+    type: "multi";
+    selected: Array<string | number>;
+    onChange: (selected: Array<string | number>) => void;
+});
+/**
+ * A flexible list component supporting both single and multi-selection modes.
+ * Handles selection state changes with proper keyboard navigation and accessibility.
+ *
+ * @param props - The props for the List component.
+ * @returns The rendered list with selectable items.
+ */
+export declare const List: ({ options, type, error, disabled, selected, onChange, listClassName, itemsClassName, highlightedIndex, }: ListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/list/ListItem.d.ts

@@ -0,0 +1,20 @@
+import { HTMLProps } from 'react';
+import { BaseOption } from '../../types/BaseOption';
+export type ListItemProps = HTMLProps<HTMLLIElement> & {
+    option: BaseOption;
+    type: "multi" | "single";
+    highlighted?: boolean;
+    selected?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    itemsClassName?: string;
+};
+export declare const EMPTY_OPTION_ID = "EMPTY";
+/**
+ * A list item component that renders individual options within a List.
+ * Supports checkbox display for multi-select mode and various visual states.
+ *
+ * @param props - The props for the ListItem component.
+ * @returns The rendered list item element.
+ */
+export declare const ListItem: ({ option, highlighted, selected, type, error, disabled, itemsClassName, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { List, type ListProps, type ListType } from './List';
+export { EMPTY_OPTION_ID, ListItem, type ListItemProps } from './ListItem';

package/dist/components/logo/Logo.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from '../../types/IconComponent';
+export type LogoProps = IconProps & {
+    appName?: string;
+};
+export declare const Logo: ({ appName, ...rest }: LogoProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/menu/Menu.d.ts

@@ -0,0 +1,51 @@
+import { JSX, ReactElement, ReactNode } from 'react';
+/**
+ * Represents a single route in the menu.
+ */
+export type MenuRoute = {
+    /** Unique path of the route, used as key and for navigation */
+    path: string;
+    /** Display title of the menu item */
+    title: string;
+    /** Optional icon element to render next to the title */
+    icon?: ReactNode;
+    /** Nested children entries for submenus */
+    children?: MenuRoute[];
+    /** Permissions required to display this route */
+    permissions?: string[];
+    /** Whether this route should be hidden from the menu */
+    hideMenu?: boolean;
+};
+/**
+ * Props for the `Menu` component.
+ */
+export type MenuProps = {
+    /** React element to display as the menu logo (e.g. an SVG component or img element) */
+    logo: ReactElement;
+    /** Text to display in the footer */
+    footerText: string;
+    /** Array of routes to display in the menu */
+    routes: MenuRoute[];
+    /** Current user permissions used to filter routes */
+    permissions?: string[];
+    /** Optional additional class names for styling */
+    className?: string;
+};
+/**
+ * `Menu` is a vertical navigation component that displays a header with a logo,
+ * a list of navigable entries (filtered by permissions), and a footer.
+ *
+ * @example
+ * ```tsx
+ * <Menu
+ *   logo={<MyLogo />}
+ *   footerText="© 2025 My Company"
+ *   routes={[
+ *     { path: "/dashboard", title: "Dashboard", icon: <DashboardIcon /> },
+ *     { path: "/settings", title: "Settings", icon: <SettingsIcon />, permissions: ["admin"] }
+ *   ]}
+ *   permissions={["admin"]}
+ * />
+ * ```
+ */
+export declare const Menu: ({ logo, footerText, routes, permissions, className, }: MenuProps) => JSX.Element;

package/dist/components/menu/MenuEntry.d.ts

@@ -0,0 +1,73 @@
+import { JSX, ReactNode } from 'react';
+/**
+ * Represents a child route/entry in the menu hierarchy.
+ */
+export type MenuChild = {
+    /** Unique path of the child entry (if navigable) */
+    path?: string;
+    /** Display title of the menu item */
+    title: string;
+    /** Optional icon for the menu item */
+    icon?: ReactNode;
+    /** Nested children for submenus */
+    children?: MenuChild[];
+    /** Required permissions for the entry */
+    permissions?: string[];
+    /** Whether this entry should be hidden from the menu */
+    hideMenu?: boolean;
+};
+/**
+ * Props for the `MenuEntry` component.
+ */
+export type MenuEntryProps = {
+    /** Icon to display before the title */
+    icon?: ReactNode;
+    /** Title text of the menu item */
+    title: string;
+    /** Path used for navigation when clicked (ignored if it has children) */
+    path?: string;
+    /** Nested children menu entries */
+    childrenEntries?: MenuChild[];
+    /** Current user permissions for filtering children */
+    permissions?: string[];
+    /** The currently active path to highlight the entry */
+    activePath?: string;
+    /** Navigation handler function, typically from `useNavigate` */
+    onNavigate?: (path: string) => void;
+    /** className applied to root div element */
+    className?: string;
+    /** Depth level for recursive padding (internal prop, defaults to 0) */
+    depth?: number;
+};
+/**
+ * `MenuEntry` renders a single menu item.
+ *
+ * - If the entry has children, it can expand/collapse to reveal them.
+ * - If it has a `path`, clicking navigates to that path via `onNavigate`.
+ * - Entries are filtered by `permissions` and `hideMenu` before rendering.
+ *
+ * @example
+ * ```tsx
+ * <MenuEntry
+ *   title="Settings"
+ *   path="/settings"
+ *   icon={<SettingsIcon />}
+ *   activePath="/settings/profile"
+ *   onNavigate={(path) => console.log("Navigate to:", path)}
+ * />
+ *
+ * <MenuEntry
+ *   title="Admin"
+ *   icon={<AdminIcon />}
+ *   childrenEntries={[
+ *     { title: "Users", path: "/admin/users" },
+ *     { title: "Roles", path: "/admin/roles" }
+ *   ]}
+ *   permissions={["admin"]}
+ *   activePath="/admin/users"
+ *   onNavigate={navigate}
+ * />
+ * ```
+ */
+declare const MenuEntry: ({ icon, title, path, childrenEntries, permissions, className, activePath, onNavigate, depth, }: MenuEntryProps) => JSX.Element;
+export default MenuEntry;

package/dist/components/menu/MenuFooter.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'react';
+/**
+ * Props for the `MenuFooter` component.
+ */
+export type MenuFooterProps = {
+    /**
+     * Text to display in the footer.
+     * Typically used for copyright, branding, or version info.
+     */
+    text: string;
+};
+/**
+ * `MenuFooter` renders a simple text footer for the menu.
+ * It is always pinned to the bottom of the navigation container.
+ *
+ * @example
+ * ```tsx
+ * <MenuFooter text="© 2025 My Company" />
+ * <MenuFooter text="v2.1.0" />
+ * ```
+ */
+declare const MenuFooter: ({ text }: MenuFooterProps) => JSX.Element;
+export default MenuFooter;

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

@@ -0,0 +1,11 @@
+/**
+ * Barrel exports for the Menu system.
+ * Allows importing the main menu component.
+ *
+ * @example
+ * ```tsx
+ * import { Menu } from "@/components/Menu";
+ * ```
+ */
+export { Menu } from './Menu';
+export type { MenuProps, MenuRoute } from './Menu';

package/dist/components/multiSelect/MultiSelect.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement } from 'react';
+import { BaseOption } from '../../types/BaseOption';
+export type MultiSelectProps<Option extends BaseOption> = {
+    value: Option[];
+    setValue: (value: Option[] | ((prevState: Option[]) => Option[])) => void;
+    prefixContent?: ReactElement;
+    suffixContent?: ReactElement;
+    options: Option[];
+    id?: string;
+    error?: boolean;
+    disabled?: boolean;
+    emptyPlaceholder?: string;
+    addMorePlaceholder?: string;
+    toggleAriaLabel?: string;
+    noOptionsText?: string;
+    ref?: React.Ref<HTMLInputElement>;
+    maxHeight?: number;
+    listClassName?: string;
+};
+/**
+ * A multi-selection dropdown component with tag-based display of selected items.
+ * Supports search filtering, tag removal, and keyboard navigation.
+ *
+ * @template Option - The option type extending BaseOption.
+ * @param props - The props for the MultiSelect component.
+ * @returns The rendered multi-select dropdown with tag list.
+ */
+export declare const MultiSelect: <Option extends BaseOption>({ value, setValue, options, id, error, prefixContent, suffixContent, disabled, emptyPlaceholder, addMorePlaceholder, toggleAriaLabel, noOptionsText, ref, maxHeight, listClassName, }: MultiSelectProps<Option>) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode, RefObject } from 'react';
+export type PopoverPlacement = "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
+export type PopoverProps = {
+    /** The element that triggers the popover */
+    children: ReactNode;
+    /** The content to display inside the popover */
+    content: ReactNode;
+    /** Whether the popover is open */
+    isOpen: boolean;
+    /** Callback function called when the popover should be closed */
+    onClose?: () => void;
+    /** Whether clicking outside should close the popover */
+    closeOnClickOutside?: boolean;
+    /** Whether pressing Escape should close the popover */
+    closeOnEscape?: boolean;
+    /** Preferred placement of the popover relative to the trigger */
+    placement?: PopoverPlacement;
+    /** Whether to show an arrow pointing to the trigger element */
+    showArrow?: boolean;
+    /** Additional CSS classes for the trigger wrapper */
+    triggerClassName?: string;
+    /** Additional CSS classes for the popover content */
+    className?: string;
+    /** Additional CSS classes for the arrow */
+    arrowClassName?: string;
+    /** Offset distance from the trigger element in pixels */
+    offset?: number;
+    /** Whether the popover should render via a React portal */
+    renderInPortal?: boolean;
+    /** Optional id applied to the popover panel */
+    id?: string;
+    /** ARIA role describing the type of popover */
+    role?: "dialog" | "menu" | "listbox" | "tooltip";
+    /** Accessible label for the popover panel */
+    ariaLabel?: string;
+    /** Id of the element labelling the popover panel */
+    ariaLabelledBy?: string;
+    /** Id of the element describing the popover panel */
+    ariaDescribedBy?: string;
+    /** Element to focus when the popover opens */
+    initialFocusRef?: RefObject<HTMLElement>;
+    /** Whether focus should return to the previously focused element on close */
+    returnFocusOnClose?: boolean;
+};
+/**
+ * A popover component that displays floating content relative to a trigger element.
+ * Uses Card-like styling and supports multiple placement options.
+ *
+ * Features:
+ * - Multiple placement options (top, bottom, left, right with start/end variants)
+ * - Optional arrow pointing to the trigger element
+ * - Click outside to close (optional)
+ * - Escape key to close (optional)
+ * - Automatic positioning with offset control
+ * - Card-like styling for consistency
+ *
+ * @param props - The props for the Popover component
+ * @returns A popover with trigger and floating content
+ */
+export declare const Popover: ({ children, content, isOpen, onClose, closeOnClickOutside, closeOnEscape, placement, showArrow, triggerClassName, className, arrowClassName, offset, renderInPortal, id, role, ariaLabel, ariaLabelledBy, ariaDescribedBy, initialFocusRef, returnFocusOnClose, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Popover } from './Popover';
+export type { PopoverProps, PopoverPlacement } from './Popover';

package/dist/components/radioButton/RadioButton.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+export type RadioButtonProps = {
+    /** The value of the radio button */
+    value: string;
+    /** The visible label text for the radio */
+    label: string;
+    /** Whether the radio button is currently selected */
+    checked?: boolean;
+    /** Whether the radio is in an error state */
+    error?: boolean;
+    /** Callback fired when selection changes */
+    onChange?: (value: string) => void;
+    /** Whether the radio button is disabled */
+    disabled?: boolean;
+    /** Optional id (auto-generated if not provided) */
+    id?: string;
+    /** Name of the radio group */
+    name?: string;
+    /** Additional class names for the container */
+    className?: string;
+    /** Optional extra label content (e.g. tooltip, icon) */
+    children?: ReactNode;
+    /** Ref for the input element (React 19 style) */
+    ref?: React.Ref<HTMLInputElement>;
+};
+/**
+ * A custom radio button component with native input styling.
+ */
+export declare const RadioButton: ({ value, label, error, checked, disabled, onChange, className, children, id, name, ref, }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/select/Select.d.ts

@@ -0,0 +1,30 @@
+import { ReactElement } from 'react';
+import { BaseOption } from '../../types/BaseOption';
+export type SelectProps<Option extends BaseOption> = {
+    value: Option | null;
+    setValue: (value: Option | null) => void;
+    prefixContent?: ReactElement;
+    suffixContent?: ReactElement;
+    options: Option[];
+    id?: string;
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    toggleAriaLabel?: string;
+    noOptionsText?: string;
+    ref?: React.Ref<HTMLInputElement>;
+    disableSearch?: boolean;
+    className?: string;
+    containerClassName?: string;
+    listClassName?: string;
+    maxHeight?: number;
+};
+/**
+ * A dropdown select component with search functionality and keyboard navigation.
+ * Built with Downshift for accessibility and supports custom option filtering.
+ *
+ * @template Option - The option type extending BaseOption.
+ * @param props - The props for the Select component.
+ * @returns The rendered select dropdown component.
+ */
+export declare const Select: <Option extends BaseOption>({ value, setValue, options, id, prefixContent, suffixContent, error, disabled, placeholder, toggleAriaLabel, noOptionsText, ref, disableSearch, className, containerClassName, listClassName, maxHeight, }: SelectProps<Option>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export { Select, type SelectProps } from './Select';

package/dist/components/tabPanel/Tab.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export type TabProps = {
+    /** Tab label text */
+    label: string;
+    /** Unique name/key for the tab */
+    name: string;
+    /** Tab content to display when active */
+    children: ReactNode;
+    /** Whether the tab is active/selected */
+    isActive?: boolean;
+    /** Click handler for tab selection */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Icon to display before the text */
+    icon?: ReactNode;
+};
+/**
+ * A single tab component that can be used within a TabPanel.
+ * Contains both the tab button and the content to display when active.
+ */
+export declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLButtonElement>>;