@aurora-ds/components 1.1.6 → 1.1.7

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, SVGProps, ButtonHTMLAttributes, Ref, FC, AnchorHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties, FormEvent, InputHTMLAttributes } from 'react';
+import { ComponentType, SVGProps, ButtonHTMLAttributes, Ref, FC, AnchorHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties, FormEvent, InputHTMLAttributes, AriaRole, AriaAttributes } from 'react';
 
 declare const lightPalette: {
     surfaceBackground: string;
@@ -188,13 +188,19 @@ declare const themeShadows: {
 
 /**
  * Default spacing tokens
+ *
+ * ⚠️ Token keys MUST stay CSS-custom-property safe (letters, digits, hyphens only).
+ * They are turned into CSS variables (e.g. `smPlus` → `--theme-spacing-sm-plus`) by
+ * the theme proxy, so characters like `+` would produce invalid variable names and
+ * silently break any style that uses them.
  */
 declare const themeSpacing: {
     none: string;
     '2xs': string;
     xs: string;
-    'xs+': string;
+    xsPlus: string;
     sm: string;
+    smPlus: string;
     md: string;
     lg: string;
     xl: string;
@@ -754,6 +760,24 @@ type SelectProps = {
 
 declare const Select: FC<SelectProps>;
 
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> & {
+    ref?: Ref<HTMLInputElement>;
+    /** Visible label rendered next to the checkbox. */
+    label?: ReactNode;
+    /** Helper text or validation message rendered below the checkbox row. */
+    helperText?: string;
+    /** Size variant controlling checkbox box size and text scale. @default 'md' */
+    size?: TextFieldSize;
+    /** Semantic status affecting border and helper text color. @default 'default' */
+    status?: TextFieldStatus;
+    /** Sets the native checkbox in indeterminate (mixed) state. */
+    indeterminate?: boolean;
+    /** @deprecated Use `status='error'` instead. Kept for backward compatibility. */
+    error?: boolean;
+};
+
+declare const Checkbox: FC<CheckboxProps>;
+
 type BoxProps = HTMLAttributes<HTMLDivElement> & BoxStyleProps & {
     ref?: Ref<HTMLDivElement>;
 };
@@ -926,6 +950,128 @@ declare const Grid: FC<GridProps>;
  */
 declare const Stack: FC<StackProps>;
 
+/**
+ * Layout variant for the Drawer.
+ * - `'permanent'` — inline drawer that pushes page content (default on desktop).
+ * - `'temporary'` — portal overlay with backdrop that slides in from the left (default on mobile).
+ *
+ * Omitting the prop enables auto-detection based on viewport width.
+ */
+type DrawerVariant = 'permanent' | 'temporary';
+type DrawerProps = {
+    /** Height of the drawer container. @default '100dvh' */
+    height?: CSSProperties['height'];
+    /** Content of the drawer — use Drawer.Header, Drawer.Body, Drawer.Footer. */
+    children: ReactNode;
+    /** Controlled expanded/collapsed state. For `temporary` variant, controls open/closed. */
+    isExpanded: boolean;
+    /** Callback fired when the consumer should toggle the expanded state. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Layout variant.
+     * - `'permanent'`: inline, pushes content (default on desktop).
+     * - `'temporary'`: portal overlay with backdrop (default on mobile).
+     *
+     * If omitted, auto-detects based on viewport width.
+     */
+    variant?: DrawerVariant;
+    /**
+     * Called when the temporary drawer overlay requests to be closed
+     * (backdrop click or Escape key). Falls back to `onExpandedChange(false)`
+     * if not provided.
+     */
+    onClose?: () => void;
+    /** ARIA role applied to the root navigation container. @default 'navigation' */
+    role?: AriaRole;
+    /** Accessible name for the drawer landmark. @default 'Navigation' */
+    ariaLabel?: string;
+    /** Id of the element that labels the drawer landmark. */
+    ariaLabelledBy?: string;
+    /** Id of the element that describes the drawer landmark. */
+    ariaDescribedBy?: string;
+};
+
+type DrawerHeaderProps = Omit<BoxProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'> & {
+    /** ARIA role applied to the header container. */
+    role?: AriaRole;
+    /** Accessible name for the header region. */
+    ariaLabel?: string;
+    /** Id of the element that labels the header region. */
+    ariaLabelledBy?: string;
+    /** Id of the element that describes the header region. */
+    ariaDescribedBy?: string;
+};
+
+type DrawerBodyProps = Omit<BoxProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'> & {
+    /** ARIA role applied to the body container. */
+    role?: AriaRole;
+    /** Accessible name for the body region. */
+    ariaLabel?: string;
+    /** Id of the element that labels the body region. */
+    ariaLabelledBy?: string;
+    /** Id of the element that describes the body region. */
+    ariaDescribedBy?: string;
+};
+
+type DrawerFooterProps = Omit<BoxProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'> & {
+    /** ARIA role applied to the footer container. */
+    role?: AriaRole;
+    /** Accessible name for the footer region. */
+    ariaLabel?: string;
+    /** Id of the element that labels the footer region. */
+    ariaLabelledBy?: string;
+    /** Id of the element that describes the footer region. */
+    ariaDescribedBy?: string;
+};
+
+/** SVG icon component for DrawerItem slots. */
+type DrawerItemIcon = ComponentType<SVGProps<SVGSVGElement>>;
+type DrawerItemProps = {
+    /** SVG icon shown in both expanded and collapsed states. */
+    startIcon: DrawerItemIcon;
+    /** Text label — visible when expanded, shown as tooltip when collapsed. */
+    label: string;
+    /** Marks the item as selected/active. @default false */
+    selected?: boolean;
+    /** Extra content rendered after the label in expanded mode only (e.g. a badge). */
+    endContent?: ReactNode;
+    /** When provided, renders the item as an anchor `<a>` for navigation. */
+    href?: string;
+    /** Click handler (used for simple actions when no `href` is set). */
+    onClick?: () => void;
+    /** Prevents interaction and dims the item. @default false */
+    disabled?: boolean;
+    /** Accessible label override (by default uses `label` when collapsed). */
+    ariaLabel?: string;
+    /** Id of the element that labels this item. */
+    ariaLabelledBy?: string;
+    /** Id of the element that describes this item. */
+    ariaDescribedBy?: string;
+    /** Id of the element controlled by this item. */
+    ariaControls?: string;
+    /** Whether the controlled element is expanded/collapsed. */
+    ariaExpanded?: boolean;
+    /** Indicates popup behavior when item triggers a menu/dialog/listbox/tree/grid. */
+    ariaHasPopup?: AriaAttributes['aria-haspopup'];
+    /** Explicit current state. Defaults to `page` when `selected` is true. */
+    ariaCurrent?: AriaAttributes['aria-current'];
+};
+
+type DrawerComponent = FC<DrawerProps> & {
+    Header: FC<DrawerHeaderProps>;
+    Body: FC<DrawerBodyProps>;
+    Footer: FC<DrawerFooterProps>;
+    Item: FC<DrawerItemProps>;
+};
+
+declare const Drawer: DrawerComponent;
+
+type DrawerContextValue = {
+    /** Whether the drawer is in expanded (true) or collapsed (false) state. */
+    isExpanded: boolean;
+};
+declare const useDrawerContext: () => DrawerContextValue;
+
 type AlertProps = {
     /** Visual style of the alert. @default 'default' */
     variant?: AlertVariant;
@@ -966,6 +1112,25 @@ type AlertComponent = FC<AlertProps> & {
 
 declare const Alert: AlertComponent;
 
+type BackdropProps = {
+    /** Whether the backdrop is fully visible (opacity 1). Transition is handled internally. */
+    visible: boolean;
+    /** Click handler — typically used to close the overlay. */
+    onClick?: () => void;
+};
+
+/**
+ * Semi-transparent full-screen overlay used to visually block page content
+ * while a modal element (dialog, temporary drawer…) is open.
+ *
+ * The `visible` prop drives the opacity transition: `false` = transparent,
+ * `true` = `rgba(0,0,0,0.5)`. Mount/unmount is managed by the parent.
+ *
+ * @example
+ * <Backdrop visible={isFadingIn} onClick={onClose} />
+ */
+declare const Backdrop: FC<BackdropProps>;
+
 type DialogProps = {
     /** Whether the dialog is visible. */
     open: boolean;
@@ -1080,5 +1245,5 @@ declare const lightTheme: Theme;
 
 declare const darkTheme: Theme;
 
-export { Alert, Badge, Box, Button, Card, Dialog, Form, Grid, Icon, IconButton, InfoBubble, Link, Menu, Select, Skeleton, Stack, Switch, Text, TextField, Tooltip, darkTheme, lightTheme };
-export type { AlertBodyProps, AlertProps, AlertTitleProps, AlertVariant, BadgeColor, BadgeIcon, BadgeProps, BadgeSize, BadgeVariant, BoxProps, ButtonColor, ButtonIcon, ButtonProps, ButtonSize, ButtonVariant, CardBodyProps, CardHeaderProps, CardProps, CardVariant, DialogBodyProps, DialogHeaderProps, DialogProps, 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, 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 };

package/package.json

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