@aurora-ds/components 1.0.0 → 1.1.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, SVGProps, HTMLAttributes, Ref, FC, ReactNode, ButtonHTMLAttributes, CSSProperties, FormEvent, InputHTMLAttributes } from 'react';
+import { ComponentType, SVGProps, ButtonHTMLAttributes, Ref, FC, AnchorHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties, FormEvent, InputHTMLAttributes } from 'react';
 
 declare const lightPalette: {
     surfaceBackground: string;
@@ -249,6 +249,106 @@ declare module '@aurora-ds/theme' {
     }
 }
 
+/** SVG icon component used by button slots and loading state. */
+type ButtonIcon = ComponentType<SVGProps<SVGSVGElement>>;
+/** Visual style of the button surface. */
+type ButtonVariant = 'contained' | 'outlined' | 'text';
+/** Semantic color intent of the button. */
+type ButtonColor = 'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+/** Size token controlling height, padding and label scale. */
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+    /** Visual style. @default 'contained' */
+    variant?: ButtonVariant;
+    /** Semantic color. @default 'primary' */
+    color?: ButtonColor;
+    /** Size token controlling height, padding and font size. @default 'md' */
+    size?: ButtonSize;
+    /** Explicit width for the button. Accepts numbers (px) or any CSS width value. */
+    width?: number | string;
+    /** Flex grow factor applied to the button container. */
+    flexGrow?: number;
+    /** Flex shrink factor applied to the button container. */
+    flexShrink?: number;
+    /** Show a spinner and disable interaction. */
+    isLoading?: boolean;
+    /** Native button type. @default 'button' */
+    type?: 'button' | 'submit' | 'reset';
+    /** SVG icon component rendered before the label (inherits the button color). */
+    startIcon?: ButtonIcon;
+    /** SVG icon component rendered after the label (inherits the button color). */
+    endIcon?: ButtonIcon;
+};
+
+/**
+ * Theme-aware button built on `createVariants`.
+ *
+ * @example <Button onClick={save}>Save</Button>
+ * @example <Button variant='outlined' color='error' startIcon={IconRegistry.CloseIcon}>Delete</Button>
+ * @example <Button color='success' isLoading width='100%'>Submitting…</Button>
+ */
+declare const Button: FC<ButtonProps>;
+
+type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> & {
+    /** Ref forwarded to the underlying button element. */
+    ref?: Ref<HTMLButtonElement>;
+    /** SVG icon component to render inside the button. */
+    icon: ButtonIcon;
+    /** Accessible label — required since there is no visible text. */
+    ariaLabel: string;
+    /** Visual style. @default 'contained' */
+    variant?: ButtonVariant;
+    /** Semantic color. @default 'primary' */
+    color?: ButtonColor;
+    /** Size token controlling width, height and padding. @default 'md' */
+    size?: ButtonSize;
+    /** Show a spinner and disable interaction. */
+    isLoading?: boolean;
+    /** Native button type. @default 'button' */
+    type?: 'button' | 'submit' | 'reset';
+};
+
+/**
+ * Square icon-only button.
+ * `ariaLabel` is mandatory since there is no visible text.
+ *
+ * @example <IconButton icon={CloseIcon} ariaLabel={t('common.close')} />
+ * @example <IconButton icon={DeleteIcon} ariaLabel={t('actions.delete')} variant='outlined' color='error' />
+ * @example <IconButton icon={SaveIcon} ariaLabel={t('actions.save')} isLoading />
+ */
+declare const IconButton: FC<IconButtonProps>;
+
+type LinkUnderline = 'always' | 'hover' | 'none';
+
+/** SVG icon component, e.g. imported via `?react` or taken from the `IconRegistry`. */
+type LinkIcon = ComponentType<SVGProps<SVGSVGElement>>;
+type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /** React 19 ref prop. */
+    ref?: Ref<HTMLAnchorElement>;
+    /** Controls when the underline is visible. @default 'hover' */
+    underline?: LinkUnderline;
+    /** Open in a new tab with `rel="noopener noreferrer"`. */
+    external?: boolean;
+    /** Prevent navigation and style as inactive. */
+    disabled?: boolean;
+    /** SVG icon rendered before the text. */
+    startIcon?: LinkIcon;
+    /** SVG icon rendered after the text. */
+    endIcon?: LinkIcon;
+};
+
+/**
+ * Theme-aware anchor element with optional icons and underline control.
+ *
+ * @example <Link href='/about'>About</Link>
+ * @example <Link href='https://example.com' external>External site</Link>
+ * @example <Link href='/profile' underline='always' startIcon={UserIcon}>Profile</Link>
+ * @example <Link href='/terms' underline='none'>Terms</Link>
+ */
+declare const Link: FC<LinkProps>;
+
 /** SVG icon component used by badge icon slots. */
 type BadgeIcon = ComponentType<SVGProps<SVGSVGElement>>;
 /** Visual style of the badge surface. */
@@ -366,77 +466,6 @@ interface InfoBubbleProps {
  */
 declare const InfoBubble: FC<InfoBubbleProps>;
 
-/** SVG icon component used by button slots and loading state. */
-type ButtonIcon = ComponentType<SVGProps<SVGSVGElement>>;
-/** Visual style of the button surface. */
-type ButtonVariant = 'contained' | 'outlined' | 'text';
-/** Semantic color intent of the button. */
-type ButtonColor = 'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
-/** Size token controlling height, padding and label scale. */
-type ButtonSize = 'sm' | 'md' | 'lg';
-
-type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    ref?: Ref<HTMLButtonElement>;
-    /** Visual style. @default 'contained' */
-    variant?: ButtonVariant;
-    /** Semantic color. @default 'primary' */
-    color?: ButtonColor;
-    /** Size token controlling height, padding and font size. @default 'md' */
-    size?: ButtonSize;
-    /** Explicit width for the button. Accepts numbers (px) or any CSS width value. */
-    width?: number | string;
-    /** Flex grow factor applied to the button container. */
-    flexGrow?: number;
-    /** Flex shrink factor applied to the button container. */
-    flexShrink?: number;
-    /** Show a spinner and disable interaction. */
-    isLoading?: boolean;
-    /** Native button type. @default 'button' */
-    type?: 'button' | 'submit' | 'reset';
-    /** SVG icon component rendered before the label (inherits the button color). */
-    startIcon?: ButtonIcon;
-    /** SVG icon component rendered after the label (inherits the button color). */
-    endIcon?: ButtonIcon;
-};
-
-/**
- * Theme-aware button built on `createVariants`.
- *
- * @example <Button onClick={save}>Save</Button>
- * @example <Button variant='outlined' color='error' startIcon={IconRegistry.CloseIcon}>Delete</Button>
- * @example <Button color='success' isLoading width='100%'>Submitting…</Button>
- */
-declare const Button: FC<ButtonProps>;
-
-type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> & {
-    /** Ref forwarded to the underlying button element. */
-    ref?: Ref<HTMLButtonElement>;
-    /** SVG icon component to render inside the button. */
-    icon: ButtonIcon;
-    /** Accessible label — required since there is no visible text. */
-    ariaLabel: string;
-    /** Visual style. @default 'contained' */
-    variant?: ButtonVariant;
-    /** Semantic color. @default 'primary' */
-    color?: ButtonColor;
-    /** Size token controlling width, height and padding. @default 'md' */
-    size?: ButtonSize;
-    /** Show a spinner and disable interaction. */
-    isLoading?: boolean;
-    /** Native button type. @default 'button' */
-    type?: 'button' | 'submit' | 'reset';
-};
-
-/**
- * Square icon-only button.
- * `ariaLabel` is mandatory since there is no visible text.
- *
- * @example <IconButton icon={CloseIcon} ariaLabel={t('common.close')} />
- * @example <IconButton icon={DeleteIcon} ariaLabel={t('actions.delete')} variant='outlined' color='error' />
- * @example <IconButton icon={SaveIcon} ariaLabel={t('actions.save')} isLoading />
- */
-declare const IconButton: FC<IconButtonProps>;
-
 type IconProps = HTMLAttributes<HTMLDivElement> & {
     ref?: Ref<HTMLDivElement>;
     /** SVG component to render — import with `?react` (e.g. `import MyIcon from './my-icon.svg?react'`). */
@@ -471,6 +500,44 @@ type IconStyleParams = {
  */
 declare const Icon: FC<IconProps>;
 
+/** Shape variant of the Skeleton placeholder. */
+type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
+/**
+ * Animation applied to the Skeleton.
+ * - `'shimmer'` — sliding gradient highlight (default).
+ * - `false`     — no animation (useful when `prefers-reduced-motion` is handled manually).
+ */
+type SkeletonAnimation = 'shimmer' | false;
+
+type SkeletonProps = HTMLAttributes<HTMLSpanElement> & {
+    ref?: Ref<HTMLSpanElement>;
+    /** Shape of the placeholder: `'text'` | `'circular'` | `'rectangular'` | `'rounded'`. @default 'rounded' */
+    variant?: SkeletonVariant;
+    /** Loading animation: `'shimmer'` (default) or `false` to disable. */
+    animation?: SkeletonAnimation;
+    /** Explicit width; falls back to `100%` when omitted. */
+    width?: CSSProperties['width'];
+    /** Explicit height; falls back to the variant default when omitted. */
+    height?: CSSProperties['height'];
+};
+
+/**
+ * Block-level placeholder rendered while content is loading.
+ *
+ * @example // Text line
+ * <Skeleton variant='text' width={200} />
+ *
+ * @example // Avatar
+ * <Skeleton variant='circular' width={40} height={40} />
+ *
+ * @example // Card thumbnail
+ * <Skeleton variant='rounded' width='100%' height={160} />
+ *
+ * @example // No animation
+ * <Skeleton variant='rectangular' width='100%' height={80} animation={false} />
+ */
+declare const Skeleton: FC<SkeletonProps>;
+
 type TextVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'strong';
 type TextVariantStyle = {
     /** HTML tag to render. */
@@ -685,6 +752,172 @@ type SelectProps = {
 
 declare const Select: FC<SelectProps>;
 
+type BoxProps = HTMLAttributes<HTMLDivElement> & BoxStyleProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+/** Style props accepted by Box — token-aware for spacing/color/radius/shadow/zIndex. */
+type BoxStyleProps = {
+    display?: CSSProperties['display'];
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+    minWidth?: CSSProperties['minWidth'];
+    maxWidth?: CSSProperties['maxWidth'];
+    minHeight?: CSSProperties['minHeight'];
+    maxHeight?: CSSProperties['maxHeight'];
+    padding?: keyof Theme['spacing'];
+    paddingTop?: keyof Theme['spacing'];
+    paddingRight?: keyof Theme['spacing'];
+    paddingBottom?: keyof Theme['spacing'];
+    paddingLeft?: keyof Theme['spacing'];
+    /** Horizontal padding (left + right). */
+    px?: keyof Theme['spacing'];
+    /** Vertical padding (top + bottom). */
+    py?: keyof Theme['spacing'];
+    margin?: keyof Theme['spacing'];
+    marginTop?: keyof Theme['spacing'];
+    marginRight?: keyof Theme['spacing'];
+    marginBottom?: keyof Theme['spacing'];
+    marginLeft?: keyof Theme['spacing'];
+    /** Horizontal margin (left + right). */
+    mx?: keyof Theme['spacing'];
+    /** Vertical margin (top + bottom). */
+    my?: keyof Theme['spacing'];
+    gap?: keyof Theme['spacing'];
+    rowGap?: keyof Theme['spacing'];
+    columnGap?: keyof Theme['spacing'];
+    flexDirection?: CSSProperties['flexDirection'];
+    flexWrap?: CSSProperties['flexWrap'];
+    alignItems?: CSSProperties['alignItems'];
+    justifyContent?: CSSProperties['justifyContent'];
+    gridTemplateColumns?: CSSProperties['gridTemplateColumns'];
+    gridTemplateRows?: CSSProperties['gridTemplateRows'];
+    flex?: CSSProperties['flex'];
+    flexGrow?: CSSProperties['flexGrow'];
+    flexShrink?: CSSProperties['flexShrink'];
+    flexBasis?: CSSProperties['flexBasis'];
+    alignSelf?: CSSProperties['alignSelf'];
+    justifySelf?: CSSProperties['justifySelf'];
+    gridColumn?: CSSProperties['gridColumn'];
+    gridRow?: CSSProperties['gridRow'];
+    order?: CSSProperties['order'];
+    position?: CSSProperties['position'];
+    top?: CSSProperties['top'];
+    right?: CSSProperties['right'];
+    bottom?: CSSProperties['bottom'];
+    left?: CSSProperties['left'];
+    inset?: CSSProperties['inset'];
+    zIndex?: keyof Theme['zIndex'];
+    overflow?: CSSProperties['overflow'];
+    overflowX?: CSSProperties['overflowX'];
+    overflowY?: CSSProperties['overflowY'];
+    backgroundColor?: keyof Theme['colors'];
+    color?: keyof Theme['colors'];
+    borderRadius?: keyof Theme['radius'];
+    boxShadow?: keyof Theme['shadows'];
+    border?: CSSProperties['border'];
+    borderColor?: keyof Theme['colors'];
+    borderWidth?: CSSProperties['borderWidth'];
+    borderStyle?: CSSProperties['borderStyle'];
+    textAlign?: CSSProperties['textAlign'];
+    cursor?: CSSProperties['cursor'];
+    opacity?: CSSProperties['opacity'];
+};
+
+/**
+ * A plain `div` enriched with convenient, token-aware style props.
+ *
+ * Spacing / color / radius / shadow / z-index props accept theme tokens only
+ * (e.g. `padding='md'`, `backgroundColor='surfacePaper'`).
+ * Dimensions and position offsets accept any CSS value.
+ * All native `div` attributes are forwarded, and `ref` points to the element.
+ *
+ * @example <Box padding='md' backgroundColor='surfacePaper' borderRadius='lg'>Content</Box>
+ * @example <Box display='flex' gap='sm' alignItems='center'>…</Box>
+ */
+declare const Box: FC<BoxProps>;
+
+type CardProps = BoxProps & {
+    /** Visual style. @default 'outlined' */
+    variant?: CardVariant;
+};
+
+type CardHeaderProps = {
+    /** Main label of the card header. */
+    label: string;
+    /** Optional icon rendered before the label. */
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Optional actions rendered on the right side (e.g. buttons, IconButton). */
+    actions?: ReactNode;
+};
+
+type CardBodyProps = {
+    /** Card body content. */
+    children: ReactNode;
+    /** Vertical padding using a spacing token. @default 'md' */
+    py?: keyof Theme['spacing'];
+    /** Horizontal padding using a spacing token. @default 'md' */
+    px?: keyof Theme['spacing'];
+};
+
+type CardVariant = 'elevated' | 'outlined';
+type CardComponent = FC<CardProps> & {
+    Header: FC<CardHeaderProps>;
+    Body: FC<CardBodyProps>;
+};
+
+declare const Card: CardComponent;
+
+/**
+ * Extra CSS Grid props not covered by BoxProps.
+ * `columns` and `rows` are convenience shorthands:
+ * a number is expanded to `repeat(n, 1fr)`, a string is forwarded as-is.
+ */
+type GridStyleProps = {
+    /** Shorthand for `gridTemplateColumns`. A number expands to `repeat(n, 1fr)`. */
+    columns?: number | CSSProperties['gridTemplateColumns'];
+    /** Shorthand for `gridTemplateRows`. A number expands to `repeat(n, 1fr)`. */
+    rows?: number | CSSProperties['gridTemplateRows'];
+    autoFlow?: CSSProperties['gridAutoFlow'];
+    autoColumns?: CSSProperties['gridAutoColumns'];
+    autoRows?: CSSProperties['gridAutoRows'];
+    alignContent?: CSSProperties['alignContent'];
+    justifyItems?: CSSProperties['justifyItems'];
+    placeItems?: CSSProperties['placeItems'];
+    placeContent?: CSSProperties['placeContent'];
+};
+type GridProps = Omit<BoxProps, 'display'> & GridStyleProps & {
+    /** Defaults to `'grid'`. */
+    display?: 'grid' | 'inline-grid';
+};
+
+/**
+ * A CSS Grid `Box` with convenience props for common grid patterns.
+ *
+ * Defaults to `display: grid`. The `columns` and `rows` shorthands accept either a
+ * number (expanded to `repeat(n, 1fr)`) or any valid CSS `grid-template-*` string.
+ * All `Box` style props remain available (`gap`, `rowGap`, `columnGap`,
+ * `gridTemplateColumns`, `gridTemplateRows`, `alignItems`, `justifyContent`, …).
+ *
+ * @example <Grid columns={3} gap='md'>…</Grid>
+ * @example <Grid columns='repeat(auto-fill, minmax(200px, 1fr))' gap='lg'>…</Grid>
+ * @example <Grid rows={2} autoFlow='column' gap='sm' alignItems='center'>…</Grid>
+ */
+declare const Grid: FC<GridProps>;
+
+type StackProps = BoxProps;
+
+/**
+ * A flex `Box` for laying out children along a single axis.
+ *
+ * Defaults to `display: flex` and a vertical (`column`) direction. Every
+ * `Box` style prop is available (`gap`, `alignItems`, `justifyContent`, …),
+ * and `display` can still be overridden (e.g. `'inline-flex'`).
+ *
+ * @example <Stack gap='sm'>…</Stack>
+ * @example <Stack flexDirection='row' gap='md' alignItems='center' justifyContent='space-between'>…</Stack>
+ */
+declare const Stack: FC<StackProps>;
+
 type AlertProps = {
     /** Visual style of the alert. @default 'default' */
     variant?: AlertVariant;
@@ -826,5 +1059,5 @@ declare const lightTheme: Theme;
 
 declare const darkTheme: Theme;
 
-export { Alert, Badge, Button, Dialog, Form, Icon, IconButton, InfoBubble, Menu, Select, Switch, Text, TextField, Tooltip, darkTheme, lightTheme };
-export type { AlertBodyProps, AlertProps, AlertTitleProps, AlertVariant, BadgeColor, BadgeIcon, BadgeProps, BadgeSize, BadgeVariant, ButtonColor, ButtonIcon, ButtonProps, ButtonSize, ButtonVariant, DialogBodyProps, DialogHeaderProps, DialogProps, FormProps, IconButtonProps, IconProps, IconStyleParams, InfoBubbleProps, MenuGroupProps, MenuItemProps, MenuProps, Palette, SelectOption, SelectProps, SwitchColor, SwitchProps, SwitchSize, TextFieldProps, TextFieldSize, TextFieldStatus, TextProps, TextStyleParams, TextVariantStyle, TextVariants, Theme, TooltipPlacement, TooltipProps };
+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 };

package/package.json

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