@aurora-ds/components 1.2.0 → 1.4.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, SVGProps, ButtonHTMLAttributes, Ref, FC, AnchorHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties, FormEvent, InputHTMLAttributes, AriaRole, AriaAttributes } from 'react';
+import { ComponentType, SVGProps, ButtonHTMLAttributes, Ref, FC, AnchorHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties, FormEvent, InputHTMLAttributes, MouseEvent, AriaRole, AriaAttributes } from 'react';
 
 declare const lightPalette: {
     surfaceBackground: string;
@@ -335,6 +335,8 @@ type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'
 declare const IconButton: FC<IconButtonProps>;
 
 type LinkUnderline = 'always' | 'hover' | 'none';
+/** Controls the link color palette. `'default'` uses the brand blue, `'secondary'` uses `textSecondary`. */
+type LinkColor = 'default' | 'secondary';
 
 /** SVG icon component, e.g. imported via `?react` or taken from the `IconRegistry`. */
 type LinkIcon = ComponentType<SVGProps<SVGSVGElement>>;
@@ -343,6 +345,12 @@ type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
     ref?: Ref<HTMLAnchorElement>;
     /** Controls when the underline is visible. @default 'hover' */
     underline?: LinkUnderline;
+    /**
+     * Color palette variant. `'default'` uses the brand blue link color,
+     * `'secondary'` uses the `textSecondary` color token.
+     * @default 'default'
+     */
+    color?: LinkColor;
     /**
      * Open in a new tab with `rel="noopener noreferrer"`.
      * @a11y Recommended — warn users that a new tab will open (via visible text or `aria-label`).
@@ -1046,6 +1054,61 @@ declare const Grid: FC<GridProps>;
  */
 declare const Stack: FC<StackProps>;
 
+/** Separator character rendered between breadcrumb items. */
+type BreadcrumbSeparator = '/' | '-' | '>';
+
+type BreadcrumbProps = {
+    /** Breadcrumb items — use `Breadcrumb.Item` as children. */
+    children: ReactNode;
+    /**
+     * Character rendered between each breadcrumb item.
+     * @default '/'
+     */
+    separator?: BreadcrumbSeparator;
+    /**
+     * Accessible label for the `<nav>` landmark.
+     * @default 'Breadcrumb'
+     * @a11y Recommended — describe the navigation to assistive technologies.
+     */
+    ariaLabel?: string;
+};
+
+type BreadcrumbItemProps = {
+    /** Text label of the breadcrumb item. */
+    label: string;
+    /**
+     * URL to navigate to.
+     * Can be omitted when using SPA navigation via `onClick` (e.g. React Router).
+     */
+    href?: string;
+    /**
+     * SPA navigation handler (e.g. React Router's `navigate`).
+     * When provided without `href`, the link stays accessible: `role="link"`,
+     * `tabIndex={0}` and Enter-key activation are handled automatically by `Link`.
+     *
+     * @example
+     * <Breadcrumb.Item label="Products" onClick={() => navigate('/products')} />
+     */
+    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Marks this item as the current page. Renders as bold text (non-clickable)
+     * and sets `aria-current="page"`.
+     * @default false
+     */
+    current?: boolean;
+    /**
+     * Injected internally by `Breadcrumb` — hides the separator for the first item.
+     * @internal
+     */
+    isFirst?: boolean;
+};
+
+type BreadcrumbComponent = FC<BreadcrumbProps> & {
+    Item: FC<BreadcrumbItemProps>;
+};
+
+declare const Breadcrumb: BreadcrumbComponent;
+
 /**
  * Layout variant for the Drawer.
  * - `'permanent'` — inline drawer that pushes page content (default on desktop).
@@ -1228,6 +1291,62 @@ type DrawerContextValue = {
 };
 declare const useDrawerContext: () => DrawerContextValue;
 
+type TabsProps = {
+    /** Children — typically a `Tabs.List` with `Tabs.Tab`s and one or more `Tabs.Panel`s. */
+    children: ReactNode;
+    /** Controlled selected tab value. */
+    value?: string;
+    /** Default selected tab value when uncontrolled. */
+    defaultValue?: string;
+    /** Called whenever the selected tab changes. */
+    onChange?: (value: string) => void;
+    /** Optional id prefix used to derive `id`/`aria-controls`/`aria-labelledby`. */
+    id?: string;
+};
+
+type TabsListProps = {
+    /** `Tabs.Tab` children. */
+    children: ReactNode;
+    /** Accessible label for the tablist (required by WAI-ARIA when no visible label exists). */
+    ariaLabel?: string;
+    /** Id of an element labelling the tablist (alternative to `ariaLabel`). */
+    ariaLabelledBy?: string;
+};
+
+type TabItemProps = {
+    /** Unique value identifying this tab — must match the corresponding `Tabs.Panel` value. */
+    value: string;
+    /** Visible label of the tab. */
+    label: string;
+    /**
+     * Disables the tab. Sets `aria-disabled="true"` without removing the element from
+     * the focus tree — screen readers can still announce its existence.
+     * Click and keyboard activation are blocked programmatically.
+     * Disabled tabs are skipped during ArrowLeft/Right/Home/End keyboard navigation.
+     */
+    disabled?: boolean;
+};
+
+type TabsPanelProps = {
+    /** Value of the tab this panel is associated with. */
+    value: string;
+    /** Panel content. Only rendered when its tab is active (no DOM cost when inactive). */
+    children: ReactNode;
+    /**
+     * Keep the panel mounted even when inactive (set `hidden` instead of unmount).
+     * Useful when the panel holds expensive state that should survive tab switches.
+     */
+    keepMounted?: boolean;
+};
+
+type TabsComponent = FC<TabsProps> & {
+    List: FC<TabsListProps>;
+    Tab: FC<TabItemProps>;
+    Panel: FC<TabsPanelProps>;
+};
+
+declare const Tabs: TabsComponent;
+
 type AlertProps = {
     /**
      * Visual style of the alert. @default 'default'
@@ -1432,5 +1551,5 @@ declare const lightTheme: Theme;
 
 declare const darkTheme: Theme;
 
-export { Alert, Backdrop, Badge, Box, Button, Card, Checkbox, Dialog, Drawer, Form, Grid, Icon, IconButton, InfoBubble, Link, Menu, Select, Skeleton, Stack, Switch, Text, TextField, Tooltip, darkTheme, lightTheme, useDrawerContext };
-export type { AlertBodyProps, AlertProps, AlertTitleProps, AlertVariant, BackdropProps, BadgeColor, BadgeIcon, BadgeProps, BadgeSize, BadgeVariant, BoxProps, ButtonColor, ButtonIcon, ButtonProps, ButtonSize, ButtonVariant, CardBodyProps, CardHeaderProps, CardProps, CardVariant, CheckboxProps, DialogBodyProps, DialogHeaderProps, DialogProps, DrawerBodyProps, DrawerFooterProps, DrawerHeaderProps, DrawerItemIcon, DrawerItemProps, DrawerProps, DrawerVariant, FormProps, GridProps, GridStyleProps, IconButtonProps, IconProps, IconStyleParams, InfoBubbleProps, LinkIcon, LinkProps, LinkUnderline, MenuGroupProps, MenuItemProps, MenuProps, Palette, SelectOption, SelectProps, SkeletonAnimation, SkeletonProps, SkeletonVariant, StackProps, SwitchColor, SwitchProps, SwitchSize, TextFieldProps, TextFieldSize, TextFieldStatus, TextProps, TextStyleParams, TextVariantStyle, TextVariants, Theme, TooltipPlacement, TooltipProps };
+export { Alert, Backdrop, Badge, Box, Breadcrumb, Button, Card, Checkbox, Dialog, Drawer, Form, Grid, Icon, IconButton, InfoBubble, Link, Menu, Select, Skeleton, Stack, Switch, Tabs, Text, TextField, Tooltip, darkTheme, lightTheme, useDrawerContext };
+export type { AlertBodyProps, AlertProps, AlertTitleProps, AlertVariant, BackdropProps, BadgeColor, BadgeIcon, BadgeProps, BadgeSize, BadgeVariant, BoxProps, BreadcrumbItemProps, BreadcrumbProps, BreadcrumbSeparator, ButtonColor, ButtonIcon, ButtonProps, ButtonSize, ButtonVariant, CardBodyProps, CardHeaderProps, CardProps, CardVariant, CheckboxProps, DialogBodyProps, DialogHeaderProps, DialogProps, DrawerBodyProps, DrawerFooterProps, DrawerHeaderProps, DrawerItemIcon, DrawerItemProps, DrawerProps, DrawerVariant, FormProps, GridProps, GridStyleProps, IconButtonProps, IconProps, IconStyleParams, InfoBubbleProps, LinkColor, LinkIcon, LinkProps, LinkUnderline, MenuGroupProps, MenuItemProps, MenuProps, Palette, SelectOption, SelectProps, SkeletonAnimation, SkeletonProps, SkeletonVariant, StackProps, SwitchColor, SwitchProps, SwitchSize, TabItemProps, TabsListProps, TabsPanelProps, TabsProps, TextFieldProps, TextFieldSize, TextFieldStatus, TextProps, TextStyleParams, TextVariantStyle, TextVariants, Theme, TooltipPlacement, TooltipProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurora-ds/components",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "type": "module",
   "description": "Aurora DS - React Components Library",
   "main": "dist/cjs/index.js",