@lumx/react 3.20.1-alpha.24 → 3.20.1-alpha.26

package/index.d.ts

@@ -1,356 +1,11 @@
-import { F as Falsy } from './_internal/Falsy.js';
+import { Kind, HorizontalAlignment, Size, ColorPalette, Emphasis, Alignment, VerticalAlignment, Orientation, ColorWithVariants, ColorVariant, Typography, WhiteSpace, AspectRatio, GlobalSize, TypographyInterface, Theme } from '@lumx/core/js/constants';
+export * from '@lumx/core/js/constants';
+import * as _lumx_core_js_types from '@lumx/core/js/types';
+import { GenericProps, HasTheme, ValueOf, HasCloseMode, TextElement, HeadingElement, Falsy, HasClassName, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
+export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
 import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, AriaAttributes, DetailedHTMLProps, ButtonHTMLAttributes, InputHTMLAttributes, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key, ElementType } from 'react';
 
-/** Get types of the values of a record. */
-type ValueOf<T extends Record<any, any>> = T[keyof T];
-
-/**
- * The down key code.
- */
-declare const DOWN_KEY_CODE = 40;
-/**
- * The enter/return key code.
- */
-declare const ENTER_KEY_CODE = 13;
-/**
- * The space key code.
- */
-declare const SPACE_KEY_CODE = 32;
-/**
- * The escape key code.
- */
-declare const ESCAPE_KEY_CODE = 27;
-/**
- * The left key code.
- */
-declare const LEFT_KEY_CODE = 37;
-/**
- * The right key code.
- */
-declare const RIGHT_KEY_CODE = 39;
-/**
- * The tab key code.
- */
-declare const TAB_KEY_CODE = 9;
-/**
- * The up key code.
- */
-declare const UP_KEY_CODE = 38;
-/**
- * The up key code.
- */
-declare const BACKSPACE_KEY_CODE = 8;
-
-/**
- * The prefix to use for the CSS classes.
- */
-declare const CSS_PREFIX = "lumx";
-
-/**
- * Animation duration constants. Take into consideration that if you change one of these variables,
- * you need to update their scss counterpart as well
- */
-declare const DIALOG_TRANSITION_DURATION = 400;
-declare const EXPANSION_PANEL_TRANSITION_DURATION = 400;
-declare const NOTIFICATION_TRANSITION_DURATION = 200;
-declare const SLIDESHOW_TRANSITION_DURATION = 5000;
-/**
- * Delay on hover after which we open or close the tooltip.
- * Only applies to devices supporting pointer hover.
- */
-declare const TOOLTIP_HOVER_DELAY: {
-    open: number;
-    close: number;
-};
-/**
- * Delay on long press after which we open or close the tooltip.
- * Only applies to devices not supporting pointer hover.
- */
-declare const TOOLTIP_LONG_PRESS_DELAY: {
-    open: number;
-    close: number;
-};
-/**
- * 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'>;
-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>;
-/**
- * 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>;
-/** ColorPalette with all possible color variant combination */
-type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
-
-/**
- * Callback function type alias (use for readability)
- */
-type Callback = () => void;
-
-/**
- * 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 HasClassName {
-    /**
-     * Class name forwarded to the root element of the component.
-     */
-    className?: string;
-}
-
-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;
-}
-
-/**
- * Define a generic props types.
- */
-interface GenericProps extends HasClassName {
-    /**
-     * Any prop (particularly any supported prop for a HTML element).
-     */
-    [propName: string]: any;
-}
-
-/** Union type of all heading elements */
-type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
-/**
- * A point coordinate in 2D space
- */
-type Point = {
-    x: number;
-    y: number;
-};
-
-/** Predicate function type */
-type Predicate<T> = (t: T) => boolean;
-
-/**
- * Rectangle size
- */
-type RectSize = {
-    width: number;
-    height: number;
-};
-
-/** Union type of all text elements */
-type TextElement = 'span' | 'p' | HeadingElement;
-
 /** LumX Component Type. */
 type Comp<P, T = HTMLElement> = {
     (props: P & {
@@ -1574,7 +1229,7 @@ declare const HeadingLevelProvider: React.FC<HeadingLevelProviderProps>;
 
 declare const useHeadingLevel: () => {
     level: number;
-    headingElement: HeadingElement;
+    headingElement: _lumx_core_js_types.HeadingElement;
 };
 
 type GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;
@@ -3497,4 +3152,4 @@ declare const ThemeProvider: React__default.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, BACKSPACE_KEY_CODE, Badge, type BadgeProps, BadgeWrapper, type BadgeWrapperProps, type BaseButtonProps, Button, ButtonEmphasis, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, CSS_PREFIX, type Callback, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type Color, ColorPalette, ColorVariant, type ColorWithVariants, CommentBlock, type CommentBlockProps, CommentBlockVariant, DIALOG_TRANSITION_DURATION, DOWN_KEY_CODE, DatePicker, DatePickerControlled, type DatePickerControlledProps, DatePickerField, type DatePickerFieldProps, type DatePickerProps, Dialog, type DialogProps, type DialogSizes, Divider, type DividerProps, DragHandle, type DragHandleProps, Dropdown, type DropdownProps, ENTER_KEY_CODE, ESCAPE_KEY_CODE, EXPANSION_PANEL_TRANSITION_DURATION, type Elevation, Emphasis, ExpansionPanel, type ExpansionPanelProps, Falsy, 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, type HasAriaLabelOrLabelledBy, type HasClassName, type HasCloseMode, type HasTheme, 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, LEFT_KEY_CODE, 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, NOTIFICATION_TRANSITION_DURATION, Navigation, type NavigationProps, Notification, type NotificationProps, type Offset, Orientation, Placement, type Point, Popover, PopoverDialog, type PopoverDialogProps, type PopoverProps, PostBlock, type PostBlockProps, type Predicate, Progress, ProgressCircular, type ProgressCircularProps, type ProgressCircularSize, ProgressLinear, type ProgressLinearProps, type ProgressProps, ProgressTracker, type ProgressTrackerProps, ProgressTrackerProvider, type ProgressTrackerProviderProps, ProgressTrackerStep, ProgressTrackerStepPanel, type ProgressTrackerStepPanelProps, type ProgressTrackerStepProps, ProgressVariant, RIGHT_KEY_CODE, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RectSize, SLIDESHOW_TRANSITION_DURATION, SPACE_KEY_CODE, 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_KEY_CODE, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY, 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, UP_KEY_CODE, Uploader, type UploaderProps, type UploaderSize, UploaderVariant, UserBlock, type UserBlockProps, type UserBlockSize, type ValueOf, type VerticalAlignment, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, type AlertDialogProps, 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, 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, ExpansionPanel, type ExpansionPanelProps, Flag, type FlagProps, FlexBox, type FlexBoxProps, type FlexHorizontalAlignment, type FlexVerticalAlignment, type FocusPoint, type GapSize, GenericBlock, GenericBlockGapSize, type GenericBlockProps, Grid, GridColumn, type GridColumnGapSize, type GridColumnProps, GridItem, type GridItemProps, type GridProps, Heading, HeadingLevelProvider, type HeadingLevelProviderProps, type HeadingProps, 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, 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, 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, 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, TextField, type TextFieldProps, type TextProps, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, type ThumbnailProps, type ThumbnailSize, ThumbnailVariant, Toolbar, type ToolbarProps, Tooltip, type TooltipPlacement, type TooltipProps, Uploader, type UploaderProps, type UploaderSize, UploaderVariant, UserBlock, type UserBlockProps, type UserBlockSize, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };