@ngrr/ds 0.1.6 → 0.1.7

package/dist/components/atoms/Attachment/AttachmentCard/AttachmentCard.d.ts

@@ -0,0 +1,21 @@
+export type AttachmentCardVariant = 'file' | 'picture';
+export type AttachmentCardDescriptionPosition = 'inside' | 'outside';
+export type AttachmentCardAction = 'none' | 'more' | 'remove';
+export interface AttachmentCardProps {
+    variant?: AttachmentCardVariant;
+    descriptionPosition?: AttachmentCardDescriptionPosition;
+    loading?: boolean;
+    title?: string;
+    metaData?: string;
+    hasMetadata?: boolean;
+    showDescription?: boolean;
+    imageSrc?: string;
+    imageAlt?: string;
+    action?: AttachmentCardAction;
+    showActionOnHover?: boolean;
+    onActionClick?: () => void;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function AttachmentCard({ variant, descriptionPosition, loading, title, metaData, hasMetadata, showDescription, imageSrc, imageAlt, action, showActionOnHover, onActionClick, className, 'aria-label': ariaLabel, }: AttachmentCardProps): import("react/jsx-runtime").JSX.Element;
+export default AttachmentCard;

package/dist/components/atoms/Attachment/AttachmentCard/index.d.ts

@@ -0,0 +1,2 @@
+export { AttachmentCard } from './AttachmentCard';
+export type { AttachmentCardProps, AttachmentCardVariant, AttachmentCardDescriptionPosition, AttachmentCardAction, } from './AttachmentCard';

package/dist/components/atoms/Attachment/AttachmentChip/AttachmentChip.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { FileThumbnailVariant } from '../FileThumbnail';
+export type AttachmentChipSize = 'md' | 'sm';
+export type AttachmentChipAction = 'none' | 'more' | 'remove';
+export interface AttachmentChipMenuOption {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface AttachmentChipProps {
+    fileName: string;
+    fileSize: string;
+    previewVariant?: FileThumbnailVariant;
+    previewSrc?: string;
+    size?: AttachmentChipSize;
+    disabled?: boolean;
+    loading?: boolean;
+    action?: AttachmentChipAction;
+    menuOptions?: AttachmentChipMenuOption[];
+    onMenuSelect?: (optionId: string) => void;
+    onRemove?: () => void;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function AttachmentChip({ fileName, fileSize, previewVariant, previewSrc, size, disabled, loading, action, menuOptions, onMenuSelect, onRemove, className, 'aria-label': ariaLabel, }: AttachmentChipProps): import("react/jsx-runtime").JSX.Element;
+export default AttachmentChip;

package/dist/components/atoms/Attachment/AttachmentChip/index.d.ts

@@ -0,0 +1,2 @@
+export { AttachmentChip } from './AttachmentChip';
+export type { AttachmentChipProps, AttachmentChipAction, AttachmentChipSize, AttachmentChipMenuOption, } from './AttachmentChip';

package/dist/components/atoms/Attachment/AttachmentField/AttachmentField.d.ts

@@ -0,0 +1,20 @@
+export interface AttachmentFieldProps {
+    id?: string;
+    label?: string;
+    showLabel?: boolean;
+    helperText?: string;
+    showHelpText?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    accept?: string;
+    uploadButtonLabel?: string;
+    value?: File | null;
+    defaultValue?: File | null;
+    onChange?: (file: File | null) => void;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function AttachmentField({ id, label, showLabel, helperText, showHelpText, error, errorMessage, disabled, loading, accept, uploadButtonLabel, value, defaultValue, onChange, className, 'aria-label': ariaLabel, }: AttachmentFieldProps): import("react/jsx-runtime").JSX.Element;
+export default AttachmentField;

package/dist/components/atoms/Attachment/AttachmentField/index.d.ts

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

package/dist/components/atoms/Attachment/FileRow/FileRow.d.ts

@@ -0,0 +1,18 @@
+import { FileThumbnailVariant } from '../FileThumbnail';
+export type FileRowState = 'default' | 'hover' | 'uploading';
+export interface FileRowProps {
+    fileName?: string;
+    fileType?: string;
+    fileSize?: string;
+    previewVariant?: FileThumbnailVariant;
+    previewSrc?: string;
+    state?: FileRowState;
+    uploadProgress?: number;
+    className?: string;
+    onCopyLink?: () => void;
+    onDownload?: () => void;
+    onCancelUpload?: () => void;
+    'aria-label'?: string;
+}
+export declare function FileRow({ fileName, fileType, fileSize, previewVariant, previewSrc, state, uploadProgress, className, onCopyLink, onDownload, onCancelUpload, 'aria-label': ariaLabel, }: FileRowProps): import("react/jsx-runtime").JSX.Element;
+export default FileRow;

package/dist/components/atoms/Attachment/FileRow/index.d.ts

@@ -0,0 +1,2 @@
+export { FileRow } from './FileRow';
+export type { FileRowProps, FileRowState } from './FileRow';

package/dist/components/atoms/Attachment/FileThumbnail/FileThumbnail.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export type FileThumbnailVariant = 'file' | 'image';
+export type FileThumbnailSize = 'xxSmall' | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge';
+export interface FileThumbnailProps {
+    variant?: FileThumbnailVariant;
+    size?: FileThumbnailSize;
+    imageSrc?: string;
+    imageAlt?: string;
+    icon?: React.ReactNode;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function FileThumbnail({ variant, size, imageSrc, imageAlt, icon, className, 'aria-label': ariaLabel, }: FileThumbnailProps): import("react/jsx-runtime").JSX.Element;
+export default FileThumbnail;

package/dist/components/atoms/Attachment/FileThumbnail/index.d.ts

@@ -0,0 +1,2 @@
+export { FileThumbnail } from './FileThumbnail';
+export type { FileThumbnailProps, FileThumbnailVariant, FileThumbnailSize } from './FileThumbnail';

package/dist/components/atoms/Attachment/index.d.ts

@@ -0,0 +1,10 @@
+export { FileThumbnail } from './FileThumbnail';
+export type { FileThumbnailProps, FileThumbnailVariant, FileThumbnailSize } from './FileThumbnail';
+export { AttachmentChip } from './AttachmentChip';
+export type { AttachmentChipProps, AttachmentChipAction, AttachmentChipSize, AttachmentChipMenuOption, } from './AttachmentChip';
+export { AttachmentField } from './AttachmentField';
+export type { AttachmentFieldProps } from './AttachmentField';
+export { AttachmentCard } from './AttachmentCard';
+export type { AttachmentCardProps, AttachmentCardVariant, AttachmentCardDescriptionPosition, AttachmentCardAction, } from './AttachmentCard';
+export { FileRow } from './FileRow';
+export type { FileRowProps, FileRowState } from './FileRow';

package/dist/components/atoms/Avatar/Avatar.d.ts

@@ -0,0 +1,74 @@
+import { default as React } from 'react';
+import { LucideIcon } from 'lucide-react';
+export type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type AvatarVariant = 'profile' | 'organization';
+export type AvatarFill = 'picture' | 'initials' | 'icon';
+export interface AvatarProps {
+    /** Visual size of the avatar. Default: `'md'` (40×40px). */
+    size?: AvatarSize;
+    /** Shape: circle for a person, rounded square for an org. Default: `'profile'`. */
+    variant?: AvatarVariant;
+    /** Content fill type. Priority: picture → initials → icon. Default: `'initials'`. */
+    fill?: AvatarFill;
+    /** Image URL — used when `fill='picture'`. */
+    src?: string;
+    /**
+     * 1–2 character string shown when `fill='initials'`.
+     * Will be trimmed to 2 chars and uppercased automatically.
+     */
+    initials?: string;
+    /**
+     * Lucide icon component rendered when `fill='icon'`.
+     * Pass the component reference, not JSX: `icon={Star}` not `icon={<Star />}`.
+     * Falls back to `User` (profile) or `Building2` (organization) when omitted.
+     * Swap the default any time by changing the import at the top of Avatar.tsx.
+     */
+    icon?: LucideIcon;
+    /** Entity name — sets `aria-label`. Required for meaningful avatars. */
+    name?: string;
+    /** Alt text for the image when `fill='picture'`. Defaults to `name`. */
+    alt?: string;
+    /** Additional CSS class names forwarded to the root element. */
+    className?: string;
+    /** Optional inline styles for host contexts (e.g. AvatarGroup stacking order). */
+    style?: React.CSSProperties;
+}
+export type AvatarGroupSize = 'xxs' | 'xs' | 'sm';
+export interface AvatarItem {
+    src?: string;
+    initials?: string;
+    /** Required — used to build the accessible `aria-label` for the group. */
+    name: string;
+    variant?: AvatarVariant;
+    fill?: AvatarFill;
+}
+export interface AvatarGroupProps {
+    /** Size of each avatar in the group. Limited to xxs/xs/sm per design spec. Default: `'sm'`. */
+    size?: AvatarGroupSize;
+    /** Ordered list of avatar data to render. */
+    avatars: AvatarItem[];
+    /** Maximum number of avatars to show before the "+N" overflow counter. Default: `5`. */
+    maxVisible?: number;
+    /** Additional CSS class names forwarded to the group container. */
+    className?: string;
+    /**
+     * Accessible label for the group.
+     * Auto-generated from names when omitted: "Ana Costa, João Silva, and 2 others".
+     */
+    'aria-label'?: string;
+}
+/**
+ * Avatar — visual identity marker for a person or organization.
+ *
+ * Fill priority: picture → initials → icon.
+ * Always provide a `name` prop so screen readers can announce the identity.
+ */
+export declare function Avatar({ size, variant, fill, src, initials, icon, name, alt, className, style, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AvatarGroup — overlapping stack of avatars with an optional overflow counter.
+ *
+ * Only supports the three smallest sizes (xxs, xs, sm) per design specification.
+ * Provide `aria-label` or ensure each `AvatarItem` has a `name` — the group
+ * builds an accessible summary label from names automatically.
+ */
+export declare function AvatarGroup({ size, avatars, maxVisible, className, 'aria-label': ariaLabel, }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar, AvatarGroup } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarVariant, AvatarFill, AvatarGroupProps, AvatarGroupSize, AvatarItem, } from './Avatar';

package/dist/components/atoms/Badge/Badge.d.ts

@@ -0,0 +1,40 @@
+export type BadgeSize = 'sm' | 'lg' | 'dot';
+export type BadgeVariant = 'highlight-soft' | 'highlight-strong' | 'informative' | 'critical';
+export interface BadgeProps {
+    /**
+     * Visual size of the badge.
+     * - `sm`  — 16 × 16 px minimum; shows count text.
+     * - `lg`  — 24 × 24 px minimum; shows count text.
+     * - `dot` — 8 × 8 px circle; no text; use for presence/status signals only.
+     * @default 'sm'
+     */
+    size?: BadgeSize;
+    /**
+     * Semantic colour variant.
+     * - `highlight-soft`   — light teal bg, teal text.
+     * - `highlight-strong` — filled teal bg, white text.
+     * - `informative`      — neutral gray bg, secondary text.
+     * - `critical`         — filled red bg, white text.
+     * @default 'highlight-soft'
+     */
+    variant?: BadgeVariant;
+    /**
+     * Numeric count to display on `sm` and `lg` badges.
+     * Values > 99 are automatically rendered as "99+".
+     * Ignored when `size='dot'`.
+     */
+    count?: number;
+    /** Additional CSS class names to merge onto the root element. */
+    className?: string;
+    /**
+     * Accessible label. Badge components are typically decorative — the host
+     * element (e.g. the button or avatar the badge overlays) should carry the
+     * accessible description. Provide `aria-label` only when the badge is
+     * rendered in isolation and needs its own description.
+     *
+     * Dot badges are `aria-hidden="true"` by default; supplying `aria-label`
+     * overrides that and makes them visible to assistive technology.
+     */
+    'aria-label'?: string;
+}
+export declare function Badge({ size, variant, count, className, 'aria-label': ariaLabel, }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeSize, BadgeVariant } from './Badge';

package/dist/components/atoms/Button/Button.d.ts

@@ -0,0 +1,158 @@
+import { default as React } from 'react';
+/**
+ * Visual hierarchy variant.
+ *
+ * - `'primary'`   — filled CTA. Highest visual weight. One per view.
+ * - `'secondary'` — outlined surface. Supports the primary action.
+ * - `'ghost'`     — transparent background. Utility / low-emphasis actions.
+ * - `'plain'`     — text-only, no container. Lowest weight. `sm` size only.
+ *
+ * Maps to Figma "Variant" property.
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'plain';
+/**
+ * Size of the button.
+ *
+ * - `'md'` — 32 px tall (`control/button/inset/standard` = 8 px padding).
+ * - `'sm'` — 24 px tall (`control/button/inset/small` = 4 px padding).
+ *
+ * `plain` variant is available in `sm` only.
+ *
+ * Maps to Figma "Size" property (Medium → `md`, Small → `sm`).
+ */
+export type ButtonSize = 'sm' | 'md';
+export interface ButtonProps {
+    /**
+     * Visual hierarchy variant.
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Size of the button.
+     * Controls padding (`control/button/inset/*`) and border-radius (`control/radius/*`).
+     * Height is derived: padding × 2 + 16 px icon/text line-height.
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * Prevents all interaction. Maps to the native `disabled` attribute.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Processing state. Replaces the leading icon with a spinner, disables
+     * interaction, and sets `aria-busy="true"`.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether to render the leading icon slot.
+     * Provide `leadingIcon` with the actual icon element.
+     * Replaced by the spinner when `loading` is `true`.
+     * @default false
+     */
+    showLeadingIcon?: boolean;
+    /**
+     * Icon element rendered in the leading position.
+     * Use any 16 × 16 SVG icon component.
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Whether to show the label / `children`.
+     * Set to `false` for icon-only buttons — always supply `aria-label`.
+     * @default true
+     */
+    showLabel?: boolean;
+    /** The button label text (or any inline ReactNode). */
+    children?: React.ReactNode;
+    /**
+     * Whether to render the trailing icon slot.
+     * Provide `trailingIcon` with the actual icon element.
+     * Hidden when `loading` is `true`.
+     * @default false
+     */
+    showTrailingIcon?: boolean;
+    /**
+     * Icon element rendered in the trailing position.
+     * Use any 16 × 16 SVG icon component.
+     */
+    trailingIcon?: React.ReactNode;
+    /**
+     * Whether to render an inline keyboard shortcut badge.
+     * Also supply `shortcutAriaLabel` (required by `<Shortcut>`).
+     * Hidden when `loading` is `true`.
+     * @default false
+     */
+    shortcut?: boolean;
+    /**
+     * Key string displayed inside the shortcut badge.
+     * e.g. `'⌘K'`, `'⌘ ⇧ P'`, `'Ctrl K'`.
+     * @default '⌘K'
+     */
+    shortcutLabel?: string;
+    /**
+     * Plain-English screen-reader label for the shortcut badge.
+     * Required when `shortcut` is `true`. e.g. `'Command K'`.
+     */
+    shortcutAriaLabel?: string;
+    /**
+     * Applies danger/red colour treatment — signals an irreversible or harmful action.
+     * Shares the same variants, sizes, and layout as the Main button.
+     * Use sparingly; reserve for actions that cannot be undone or carry significant
+     * consequences (e.g. "Delete record", "Remove member").
+     * @default false
+     */
+    destructive?: boolean;
+    /**
+     * HTML `type` attribute on the underlying `<button>`.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /** Click handler. Not called when `disabled` or `loading`. */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Accessible label. Required for icon-only buttons (when `showLabel={false}`).
+     */
+    'aria-label'?: string;
+    /**
+     * Indicates the button opens a popup (menu, listbox, dialog, etc.).
+     * Use `"true"` or `"menu"` for dropdown triggers. Omit for regular buttons.
+     */
+    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** Additional CSS class names. */
+    className?: string;
+}
+/**
+ * **Button** — triggers an action.
+ *
+ * Implements the DS-Nagarro Main button specification with four variants,
+ * two sizes, icon slots, keyboard shortcut badge, and loading state.
+ *
+ * Styles live in `Button.css` alongside this file. All CSS values reference
+ * `tokens.css` via `var()` — adjust a token there to update all states at once.
+ *
+ * ### Layout
+ * Height is controlled by padding alone (no explicit height):
+ * - `md` — 8 px padding (all sides) + 16 px content = **32 px**
+ * - `sm` — 4 px padding (all sides) + 16 px content = **24 px**
+ *
+ * ### Usage
+ * ```tsx
+ * // Primary
+ * <Button onClick={save}>Save changes</Button>
+ *
+ * // Secondary with leading icon
+ * <Button variant="secondary" showLeadingIcon leadingIcon={<DownloadIcon />}>
+ *   Export
+ * </Button>
+ *
+ * // Icon-only — aria-label is required
+ * <Button variant="ghost" showLabel={false}
+ *   showLeadingIcon leadingIcon={<MoreIcon />} aria-label="More options" />
+ *
+ * // Loading
+ * <Button loading>Saving…</Button>
+ * ```
+ */
+export declare function Button({ variant, size, disabled, loading, destructive, showLeadingIcon, leadingIcon, showLabel, children, showTrailingIcon, trailingIcon, shortcut, shortcutLabel, shortcutAriaLabel, type, onClick, 'aria-label': ariaLabel, 'aria-haspopup': ariaHasPopup, className, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/components/atoms/Button/ToggleButton.d.ts

@@ -0,0 +1,17 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import { ButtonSize, ButtonVariant } from './Button';
+export type ToggleButtonSize = ButtonSize;
+export type ToggleButtonVariant = Exclude<ButtonVariant, 'plain'>;
+export interface ToggleButtonProps {
+    size?: ToggleButtonSize;
+    variant?: ToggleButtonVariant;
+    selected?: boolean;
+    disabled?: boolean;
+    icon: ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    onSelectedChange?: (selected: boolean) => void;
+    className?: string;
+    'aria-label': string;
+}
+export declare function ToggleButton({ size, variant, selected, disabled, icon, onClick, onSelectedChange, className, 'aria-label': ariaLabel, }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+export default ToggleButton;

package/dist/components/atoms/Button/VerticalButton.d.ts

@@ -0,0 +1,90 @@
+import { default as React } from 'react';
+/**
+ * Visual hierarchy variant for the Vertical button.
+ * `ghost` is the default — matches the typical toolbar context.
+ */
+export type VerticalButtonVariant = 'primary' | 'secondary' | 'ghost';
+/**
+ * Size of the Vertical button icon circle.
+ * - `'md'` — 32 × 32 px icon area (default)
+ * - `'sm'` — 24 × 24 px icon area
+ */
+export type VerticalButtonSize = 'sm' | 'md';
+export interface VerticalButtonProps {
+    /**
+     * Visual hierarchy variant.
+     * @default 'ghost'
+     */
+    variant?: VerticalButtonVariant;
+    /**
+     * Size of the icon circle.
+     * @default 'md'
+     */
+    size?: VerticalButtonSize;
+    /**
+     * Prevents all interaction. Maps to the native `disabled` attribute.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows a spinner in the icon area and sets `aria-busy`. The icon is
+     * hidden while loading is active.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Renders a small notification badge dot on the top-right of the icon area.
+     * @default false
+     */
+    badge?: boolean;
+    /**
+     * Controls visibility of the text label below the icon area.
+     * Set to `false` to render an icon-only button (supply `aria-label` instead).
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * Icon element rendered inside the icon circle (16 × 16 px).
+     */
+    icon?: React.ReactNode;
+    /**
+     * Label text displayed below the icon area in micro typography (12 px).
+     */
+    children?: React.ReactNode;
+    /**
+     * Accessible label. Required when `showLabel` is `false` or when
+     * `children` is absent.
+     */
+    'aria-label'?: string;
+    /** Click handler. Not called when `disabled` or `loading`. */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Additional CSS class names applied to the outer button element. */
+    className?: string;
+}
+/**
+ * **VerticalButton** — a stacked icon circle + label button.
+ *
+ * Implements the DS-Nagarro Vertical button specification (Figma node 107:87).
+ *
+ * The visual treatment (background fill, shadow, border-radius) applies only
+ * to the inner icon circle. The text label sits below it in micro typography
+ * with a 4 px gap. Hover and focus states change the circle's appearance only.
+ *
+ * Common uses: bottom navigation bars, toolbar action groups where a visible
+ * label reinforces the icon meaning.
+ *
+ * ### Usage
+ * ```tsx
+ * <VerticalButton icon={<HomeIcon />} onClick={() => navigate('/')}>
+ *   Home
+ * </VerticalButton>
+ *
+ * // Icon-only (no label):
+ * <VerticalButton icon={<HomeIcon />} showLabel={false} aria-label="Home" />
+ *
+ * // With notification badge:
+ * <VerticalButton icon={<InboxIcon />} badge>Inbox</VerticalButton>
+ * ```
+ */
+export declare function VerticalButton({ variant, size, disabled, loading, badge, showLabel, icon, children, 'aria-label': ariaLabel, onClick, className, }: VerticalButtonProps): import("react/jsx-runtime").JSX.Element;
+export default VerticalButton;

package/dist/components/atoms/Button/index.d.ts

@@ -0,0 +1,6 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+export { ToggleButton } from './ToggleButton';
+export type { ToggleButtonProps, ToggleButtonVariant, ToggleButtonSize } from './ToggleButton';
+export { VerticalButton } from './VerticalButton';
+export type { VerticalButtonProps, VerticalButtonVariant, VerticalButtonSize } from './VerticalButton';

package/dist/components/atoms/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export type ButtonGroupSize = 'md' | 'sm';
+export interface ButtonGroupProps {
+    size?: ButtonGroupSize;
+    /**
+     * Adds standard spacing between adjacent buttons.
+     * When false, buttons are glued edge-to-edge.
+     * Mirrors the Figma variant `Space between=True`.
+     * @default false
+     */
+    spaceBetween?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function ButtonGroup({ size, spaceBetween, children, className, 'aria-label': ariaLabel, }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export default ButtonGroup;

package/dist/components/atoms/ButtonGroup/ButtonGroupVertical.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export type ButtonGroupVerticalSize = 'md' | 'sm';
+export interface ButtonGroupVerticalProps {
+    size?: ButtonGroupVerticalSize;
+    /**
+     * Adds standard spacing between vertically stacked buttons.
+     * When false, buttons are glued edge-to-edge.
+     * Mirrors the Figma variant `Space between=True`.
+     * @default false
+     */
+    spaceBetween?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function ButtonGroupVertical({ size, spaceBetween, children, className, 'aria-label': ariaLabel, }: ButtonGroupVerticalProps): import("react/jsx-runtime").JSX.Element;
+export default ButtonGroupVertical;

package/dist/components/atoms/ButtonGroup/SplitButton/SplitButton.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { ButtonSize } from '../../Button/Button';
+export type SplitButtonSize = ButtonSize;
+/** Visual hierarchy variant applied to both button segments. */
+export type SplitButtonVariant = 'primary' | 'secondary';
+export interface SplitButtonProps {
+    /** 'md' = 32 px (default). 'sm' = 24 px for dense layouts. */
+    size?: SplitButtonSize;
+    /** Visual hierarchy variant. Applied to both button segments. @default 'secondary' */
+    variant?: SplitButtonVariant;
+    /** Label text for the main action button. */
+    children?: React.ReactNode;
+    /** Optional leading icon for the main action button. */
+    leadingIcon?: React.ReactNode;
+    /** Disables both button segments. */
+    disabled?: boolean;
+    /** Loading state on the main button; trigger is also disabled while loading. */
+    loading?: boolean;
+    /**
+     * Icon displayed in the trigger (dropdown) button.
+     * Defaults to a built-in ChevronDown if omitted.
+     */
+    triggerIcon?: React.ReactNode;
+    /** Click handler for the main action button. */
+    onMainClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Click handler for the trigger (dropdown) button. */
+    onDropdownClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * TODO(DSN-POPOVER): when SplitButton renders a menu directly, wire it through
+     * PopoverWrapper anchored positioning (below-first, flip fallback, viewport clamping).
+     */
+    /** Accessible label for the trigger button. Defaults to "More options". */
+    dropdownAriaLabel?: string;
+    className?: string;
+}
+export declare function SplitButton({ size, variant, children, leadingIcon, disabled, loading, triggerIcon, onMainClick, onDropdownClick, dropdownAriaLabel, className, }: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
+export default SplitButton;

package/dist/components/atoms/ButtonGroup/SplitButton/index.d.ts

@@ -0,0 +1,2 @@
+export { SplitButton } from './SplitButton';
+export type { SplitButtonProps, SplitButtonSize, SplitButtonVariant } from './SplitButton';

package/dist/components/atoms/ButtonGroup/index.d.ts

@@ -0,0 +1,6 @@
+export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps, ButtonGroupSize } from './ButtonGroup';
+export { ButtonGroupVertical } from './ButtonGroupVertical';
+export type { ButtonGroupVerticalProps, ButtonGroupVerticalSize } from './ButtonGroupVertical';
+export { SplitButton } from './SplitButton';
+export type { SplitButtonProps, SplitButtonSize, SplitButtonVariant } from './SplitButton';