@lumx/react 3.10.1-alpha.5 → 3.10.1-alpha.7

package/_internal/Falsy.d.ts

@@ -0,0 +1,7 @@
+/**
+ * JS falsy values.
+ * (excluding `NaN` as it can't be distinguished from `number`)
+ */
+type Falsy = false | undefined | null | 0 | '';
+
+export type { Falsy as F };

package/index.d.ts

@@ -1,6 +1,292 @@
-import { K as Kind, C as Comp, G as GenericProps, H as HasTheme, a as HorizontalAlignment, S as Size, b as ColorPalette, E as Emphasis, V as ValueOf, A as Alignment, c as VerticalAlignment, O as Orientation, d as ColorVariant, T as Typography, e as TextElement, W as WhiteSpace, f as HeadingElement, g as AspectRatio, F as Falsy, h as HasClassName, i as ComponentRef, j as HasAriaLabelOrLabelledBy, k as HasCloseMode, l as GlobalSize, m as TypographyInterface, n as Theme } from './_internal/index.js';
-export { r as Callback, o as Color, q as TypographyCustom, p as TypographyTitleCustom } from './_internal/index.js';
-import React, { ReactNode, SyntheticEvent, ReactElement, MouseEventHandler, KeyboardEventHandler, AriaAttributes, DetailedHTMLProps, ButtonHTMLAttributes, InputHTMLAttributes, Ref, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key } from 'react';
+import React, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, AriaAttributes, DetailedHTMLProps, ButtonHTMLAttributes, InputHTMLAttributes, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key } from 'react';
+import { F as Falsy } from './_internal/Falsy.js';
+
+/**
+ * Callback function type alias (use for readability)
+ */
+type Callback = () => void;
+
+/** LumX Component Type. */
+type Comp<P, T = HTMLElement> = {
+    (props: P & {
+        ref?: Ref<T>;
+    }): ReactElement | null;
+    /** React component type. */
+    readonly $$typeof: symbol;
+    /** Component default props. */
+    defaultProps?: Partial<P>;
+    /** Component name. */
+    displayName?: string;
+    /** Component base class name. */
+    className?: string;
+};
+
+/**
+ * Extract ref type for a component or JSX intrinsic element
+ *
+ * @example ComponentRef<'div'> => React.Ref<HTMLDivElement>
+ * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
+ */
+type ComponentRef<C> = C extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[C]['ref'] : C extends Comp<any, infer T> ? React.Ref<T> : C extends React.JSXElementConstructor<{
+    ref?: infer R;
+}> ? R : never;
+
+interface HasClassName {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
+}
+
+/**
+ * Define a generic props types.
+ */
+interface GenericProps extends HasClassName {
+    /**
+     * Any prop (particularly any supported prop for a HTML element).
+     */
+    [propName: string]: any;
+}
+
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
+    /**
+     * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+     * Although it is not recommended, aria-label can be used instead if no visible element is available.
+     */
+    'aria-labelledby': T;
+    /** The label of the dialog. */
+    'aria-label'?: undefined;
+} : {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+};
+
+interface HasCloseMode {
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
+}
+
+interface HasTheme {
+    /**
+     * Theme adapting the component to light or dark background.
+     */
+    theme?: Theme;
+}
+
+/** Union type of all heading elements */
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+/** Union type of all text elements */
+type TextElement = 'span' | 'p' | HeadingElement;
+
+/** Get types of the values of a record. */
+type ValueOf<T extends Record<any, any>> = T[keyof T];
+
+/**
+ * Alignments.
+ */
+declare const Alignment: {
+    readonly bottom: "bottom";
+    readonly center: "center";
+    readonly end: "end";
+    readonly left: "left";
+    readonly right: "right";
+    readonly spaceAround: "space-around";
+    readonly spaceBetween: "space-between";
+    readonly spaceEvenly: "space-evenly";
+    readonly start: "start";
+    readonly top: "top";
+};
+type Alignment = ValueOf<typeof Alignment>;
+type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
+type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+declare const ColorPalette: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly blue: "blue";
+    readonly dark: "dark";
+    readonly green: "green";
+    readonly yellow: "yellow";
+    readonly red: "red";
+    readonly light: "light";
+    readonly grey: "grey";
+};
+type ColorPalette = ValueOf<typeof ColorPalette>;
+type Color = ColorPalette | string;
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+declare const ColorVariant: {
+    readonly D1: "D1";
+    readonly D2: "D2";
+    readonly L1: "L1";
+    readonly L2: "L2";
+    readonly L3: "L3";
+    readonly L4: "L4";
+    readonly L5: "L5";
+    readonly L6: "L6";
+    readonly N: "N";
+};
+type ColorVariant = ValueOf<typeof ColorVariant>;
+declare const Theme: {
+    readonly light: "light";
+    readonly dark: "dark";
+};
+type Theme = ValueOf<typeof Theme>;
+declare const Size: {
+    readonly xxs: "xxs";
+    readonly xs: "xs";
+    readonly s: "s";
+    readonly m: "m";
+    readonly l: "l";
+    readonly xl: "xl";
+    readonly xxl: "xxl";
+    readonly tiny: "tiny";
+    readonly regular: "regular";
+    readonly medium: "medium";
+    readonly big: "big";
+    readonly huge: "huge";
+};
+type Size = ValueOf<typeof Size>;
+type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+declare const Orientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+type Orientation = ValueOf<typeof Orientation>;
+declare const Emphasis: {
+    readonly low: "low";
+    readonly medium: "medium";
+    readonly high: "high";
+};
+type Emphasis = ValueOf<typeof Emphasis>;
+/**
+ * List of typographies that can't be customized.
+ */
+declare const TypographyInterface: {
+    readonly overline: "overline";
+    readonly caption: "caption";
+    readonly body1: "body1";
+    readonly body2: "body2";
+    readonly subtitle1: "subtitle1";
+    readonly subtitle2: "subtitle2";
+    readonly title: "title";
+    readonly headline: "headline";
+    readonly display1: "display1";
+};
+type TypographyInterface = ValueOf<typeof TypographyInterface>;
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+declare const TypographyTitleCustom: {
+    readonly title1: "custom-title1";
+    readonly title2: "custom-title2";
+    readonly title3: "custom-title3";
+    readonly title4: "custom-title4";
+    readonly title5: "custom-title5";
+    readonly title6: "custom-title6";
+};
+type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+declare const TypographyCustom: {
+    readonly intro: "custom-intro";
+    readonly 'body-large': "custom-body-large";
+    readonly body: "custom-body";
+    readonly quote: "custom-quote";
+    readonly 'publish-info': "custom-publish-info";
+    readonly button: "custom-button";
+    readonly title1: "custom-title1";
+    readonly title2: "custom-title2";
+    readonly title3: "custom-title3";
+    readonly title4: "custom-title4";
+    readonly title5: "custom-title5";
+    readonly title6: "custom-title6";
+};
+type TypographyCustom = ValueOf<typeof TypographyCustom>;
+/**
+ * List of all typographies.
+ */
+declare const Typography: {
+    readonly custom: {
+        readonly intro: "custom-intro";
+        readonly 'body-large': "custom-body-large";
+        readonly body: "custom-body";
+        readonly quote: "custom-quote";
+        readonly 'publish-info': "custom-publish-info";
+        readonly button: "custom-button";
+        readonly title1: "custom-title1";
+        readonly title2: "custom-title2";
+        readonly title3: "custom-title3";
+        readonly title4: "custom-title4";
+        readonly title5: "custom-title5";
+        readonly title6: "custom-title6";
+    };
+    readonly overline: "overline";
+    readonly caption: "caption";
+    readonly body1: "body1";
+    readonly body2: "body2";
+    readonly subtitle1: "subtitle1";
+    readonly subtitle2: "subtitle2";
+    readonly title: "title";
+    readonly headline: "headline";
+    readonly display1: "display1";
+};
+type Typography = TypographyInterface | TypographyCustom;
+/**
+ * All available aspect ratios.
+ */
+declare const AspectRatio: {
+    /** Intrinsic content ratio. */
+    readonly original: "original";
+    /** Ratio 3:1 */
+    readonly panoramic: "panoramic";
+    /** Ratio 16:9 */
+    readonly wide: "wide";
+    /** Ratio 3:2 */
+    readonly horizontal: "horizontal";
+    /** Ratio 3:2 */
+    readonly vertical: "vertical";
+    /** Ratio 1:1 */
+    readonly square: "square";
+    /** Ratio constrained by the parent. */
+    readonly free: "free";
+};
+type AspectRatio = ValueOf<typeof AspectRatio>;
+/**
+ * Semantic info about the purpose of the component
+ */
+declare const Kind: {
+    readonly info: "info";
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+};
+type Kind = ValueOf<typeof Kind>;
+/**
+ * All available white-space values
+ * */
+declare const WhiteSpace: {
+    normal: string;
+    nowrap: string;
+    pre: string;
+    'pre-wrap': string;
+    'pre-line': string;
+    'break-spaces': string;
+};
+type WhiteSpace = ValueOf<typeof WhiteSpace>;
 
 interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     /** Message variant. */
@@ -1837,7 +2123,7 @@ declare const NavigationItem: (<E extends React.ElementType = "a">(props: React.
     ref?: ComponentRef<E> | undefined;
 }) => React.JSX.Element) & {
     displayName: string;
-    className: string;
+    className: "lumx-navigation-item";
 };
 
 type NavigationProps = React.ComponentProps<'nav'> & HasClassName & HasTheme & {
@@ -3021,4 +3307,4 @@ declare const ThemeProvider: React.FC<{
 /** Get the theme in the current context. */
 declare function useTheme(): ThemeContextValue;
 
-export { AlertDialog, type AlertDialogProps, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, type AutocompleteMultipleProps, type AutocompleteProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BadgeWrapper, type BadgeWrapperProps, type BaseButtonProps, Button, ButtonEmphasis, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, ColorPalette, ColorVariant, CommentBlock, type CommentBlockProps, CommentBlockVariant, DatePicker, DatePickerControlled, type DatePickerControlledProps, DatePickerField, type DatePickerFieldProps, type DatePickerProps, Dialog, type DialogProps, type DialogSizes, Divider, type DividerProps, DragHandle, type DragHandleProps, Dropdown, type DropdownProps, type Elevation, Emphasis, ExpansionPanel, type ExpansionPanelProps, Flag, type FlagProps, FlexBox, type FlexBoxProps, type FlexHorizontalAlignment, type FlexVerticalAlignment, type FocusPoint, type GapSize, GenericBlock, GenericBlockGapSize, type GenericBlockProps, GenericProps, GlobalSize, Grid, GridColumn, type GridColumnGapSize, type GridColumnProps, GridItem, type GridItemProps, type GridProps, Heading, HeadingElement, HeadingLevelProvider, type HeadingLevelProviderProps, type HeadingProps, HorizontalAlignment, Icon, IconButton, type IconButtonProps, type IconProps, type IconSizes, ImageBlock, ImageBlockCaptionPosition, type ImageBlockProps, type ImageBlockSize, ImageLightbox, type ImageLightboxProps, InlineList, type InlineListProps, InputHelper, type InputHelperProps, InputLabel, type InputLabelProps, Kind, Lightbox, type LightboxProps, Link, LinkPreview, type LinkPreviewProps, type LinkProps, List, ListDivider, type ListDividerProps, ListItem, type ListItemProps, type ListItemSize, type ListProps, ListSubheader, type ListSubheaderProps, type MarginAutoAlignment, Message, type MessageProps, Mosaic, type MosaicProps, Navigation, type NavigationProps, Notification, type NotificationProps, type Offset, Orientation, Placement, Popover, PopoverDialog, type PopoverDialogProps, type PopoverProps, PostBlock, type PostBlockProps, Progress, ProgressCircular, type ProgressCircularProps, type ProgressCircularSize, ProgressLinear, type ProgressLinearProps, type ProgressProps, ProgressTracker, type ProgressTrackerProps, ProgressTrackerProvider, type ProgressTrackerProviderProps, ProgressTrackerStep, ProgressTrackerStepPanel, type ProgressTrackerStepPanelProps, type ProgressTrackerStepProps, ProgressVariant, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, Select, SelectMultiple, SelectMultipleField, type SelectMultipleProps, type SelectProps, SelectVariant, SideNavigation, SideNavigationItem, type SideNavigationItemProps, type SideNavigationProps, Size, SkeletonCircle, type SkeletonCircleProps, SkeletonRectangle, type SkeletonRectangleProps, SkeletonRectangleVariant, SkeletonTypography, type SkeletonTypographyProps, Slider, type SliderProps, Slides, type SlidesProps, Slideshow, SlideshowControls, type SlideshowControlsProps, SlideshowItem, type SlideshowItemProps, type SlideshowProps, Switch, type SwitchProps, Tab, TabList, TabListLayout, type TabListProps, TabPanel, type TabPanelProps, type TabProps, TabProvider, type TabProviderProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableCellVariant, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Text, TextElement, TextField, type TextFieldProps, type TextProps, ThOrder, Theme, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, type ThumbnailProps, type ThumbnailSize, ThumbnailVariant, Toolbar, type ToolbarProps, Tooltip, type TooltipPlacement, type TooltipProps, Typography, TypographyInterface, Uploader, type UploaderProps, type UploaderSize, UploaderVariant, UserBlock, type UserBlockProps, type UserBlockSize, VerticalAlignment, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, type AlertDialogProps, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, type AutocompleteMultipleProps, type AutocompleteProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BadgeWrapper, type BadgeWrapperProps, type BaseButtonProps, Button, ButtonEmphasis, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type Callback, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type Color, ColorPalette, ColorVariant, CommentBlock, type CommentBlockProps, CommentBlockVariant, DatePicker, DatePickerControlled, type DatePickerControlledProps, DatePickerField, type DatePickerFieldProps, type DatePickerProps, Dialog, type DialogProps, type DialogSizes, Divider, type DividerProps, DragHandle, type DragHandleProps, Dropdown, type DropdownProps, type Elevation, Emphasis, ExpansionPanel, type ExpansionPanelProps, Flag, type FlagProps, FlexBox, type FlexBoxProps, type FlexHorizontalAlignment, type FlexVerticalAlignment, type FocusPoint, type GapSize, GenericBlock, GenericBlockGapSize, type GenericBlockProps, type GenericProps, type GlobalSize, Grid, GridColumn, type GridColumnGapSize, type GridColumnProps, GridItem, type GridItemProps, type GridProps, Heading, type HeadingElement, HeadingLevelProvider, type HeadingLevelProviderProps, type HeadingProps, type HorizontalAlignment, Icon, IconButton, type IconButtonProps, type IconProps, type IconSizes, ImageBlock, ImageBlockCaptionPosition, type ImageBlockProps, type ImageBlockSize, ImageLightbox, type ImageLightboxProps, InlineList, type InlineListProps, InputHelper, type InputHelperProps, InputLabel, type InputLabelProps, Kind, Lightbox, type LightboxProps, Link, LinkPreview, type LinkPreviewProps, type LinkProps, List, ListDivider, type ListDividerProps, ListItem, type ListItemProps, type ListItemSize, type ListProps, ListSubheader, type ListSubheaderProps, type MarginAutoAlignment, Message, type MessageProps, Mosaic, type MosaicProps, Navigation, type NavigationProps, Notification, type NotificationProps, type Offset, Orientation, Placement, Popover, PopoverDialog, type PopoverDialogProps, type PopoverProps, PostBlock, type PostBlockProps, Progress, ProgressCircular, type ProgressCircularProps, type ProgressCircularSize, ProgressLinear, type ProgressLinearProps, type ProgressProps, ProgressTracker, type ProgressTrackerProps, ProgressTrackerProvider, type ProgressTrackerProviderProps, ProgressTrackerStep, ProgressTrackerStepPanel, type ProgressTrackerStepPanelProps, type ProgressTrackerStepProps, ProgressVariant, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, Select, SelectMultiple, SelectMultipleField, type SelectMultipleProps, type SelectProps, SelectVariant, SideNavigation, SideNavigationItem, type SideNavigationItemProps, type SideNavigationProps, Size, SkeletonCircle, type SkeletonCircleProps, SkeletonRectangle, type SkeletonRectangleProps, SkeletonRectangleVariant, SkeletonTypography, type SkeletonTypographyProps, Slider, type SliderProps, Slides, type SlidesProps, Slideshow, SlideshowControls, type SlideshowControlsProps, SlideshowItem, type SlideshowItemProps, type SlideshowProps, Switch, type SwitchProps, Tab, TabList, TabListLayout, type TabListProps, TabPanel, type TabPanelProps, type TabProps, TabProvider, type TabProviderProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableCellVariant, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Text, type TextElement, TextField, type TextFieldProps, type TextProps, ThOrder, Theme, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, type ThumbnailProps, type ThumbnailSize, ThumbnailVariant, Toolbar, type ToolbarProps, Tooltip, type TooltipPlacement, type TooltipProps, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, type UploaderProps, type UploaderSize, UploaderVariant, UserBlock, type UserBlockProps, type UserBlockSize, type VerticalAlignment, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };