@lumx/core 4.17.1-alpha.2 → 4.17.1-alpha.3

package/js/constants/browser/index.js

@@ -1,14 +0,0 @@
-/**
- * Check if we are running in a true browser (not SSR and not jsdom test environment).
- */
-const IS_BROWSER = typeof window !== 'undefined' && !window.navigator.userAgent.includes('jsdom');
-/**
- * Optional global `window` instance (not defined when running SSR).
- */
-const WINDOW = typeof window !== 'undefined' ? window : undefined;
-/**
- * Optional global `document` instance (not defined when running SSR).
- */
-const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
-
-export { DOCUMENT, IS_BROWSER, WINDOW };

package/js/constants/className/index.d.ts

@@ -1,4 +0,0 @@
-/**
- * Visually hidden a11y utility class name
- */
-export declare const VISUALLY_HIDDEN = "visually-hidden";

package/js/constants/className/index.js

@@ -1,6 +0,0 @@
-/**
- * Visually hidden a11y utility class name
- */
-const VISUALLY_HIDDEN = 'visually-hidden';
-
-export { VISUALLY_HIDDEN };

package/js/constants/components/index.d.ts

@@ -1,24 +0,0 @@
-/**
- * Animation duration constants. Take into consideration that if you change one of these variables,
- * you need to update their scss counterpart as well
- */
-export declare const DIALOG_TRANSITION_DURATION = 400;
-export declare const EXPANSION_PANEL_TRANSITION_DURATION = 400;
-export declare const NOTIFICATION_TRANSITION_DURATION = 200;
-export declare const SLIDESHOW_TRANSITION_DURATION = 5000;
-/**
- * Delay on hover after which we open or close the tooltip.
- * Only applies to devices supporting pointer hover.
- */
-export 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.
- */
-export declare const TOOLTIP_LONG_PRESS_DELAY: {
-    open: number;
-    close: number;
-};

package/js/constants/enums/index.d.ts

@@ -1,210 +0,0 @@
-import type { ValueOf } from '@lumx/core/js/types';
-/**
- * Alignments.
- */
-export 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";
-};
-export type Alignment = ValueOf<typeof Alignment>;
-export type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
-export type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
-export declare const Theme: {
-    readonly light: "light";
-    readonly dark: "dark";
-};
-export type Theme = ValueOf<typeof Theme>;
-export 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";
-};
-export type Size = ValueOf<typeof Size>;
-export type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-export type AbstractSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
-export declare const Orientation: {
-    readonly horizontal: "horizontal";
-    readonly vertical: "vertical";
-};
-export type Orientation = ValueOf<typeof Orientation>;
-export declare const Emphasis: {
-    readonly low: "low";
-    readonly medium: "medium";
-    readonly high: "high";
-};
-export type Emphasis = ValueOf<typeof Emphasis>;
-/**
- * List of typographies that can't be customized.
- */
-export 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";
-};
-export type TypographyInterface = ValueOf<typeof TypographyInterface>;
-/**
- * List of title typographies that can be customized (via CSS variables).
- */
-export 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";
-};
-export type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
-/**
- * List of typographies that can be customized (via CSS variables).
- */
-export 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";
-};
-export type TypographyCustom = ValueOf<typeof TypographyCustom>;
-/**
- * List of all typographies.
- */
-export 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";
-};
-export type Typography = TypographyInterface | TypographyCustom;
-/**
- * All available aspect ratios.
- */
-export 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";
-};
-export type AspectRatio = ValueOf<typeof AspectRatio>;
-/**
- * Semantic info about the purpose of the component
- */
-export declare const Kind: {
-    readonly info: "info";
-    readonly success: "success";
-    readonly warning: "warning";
-    readonly error: "error";
-};
-export type Kind = ValueOf<typeof Kind>;
-/**
- * All available white-space values
- * */
-export declare const WhiteSpace: {
-    normal: string;
-    nowrap: string;
-    pre: string;
-    'pre-wrap': string;
-    'pre-line': string;
-    'break-spaces': string;
-};
-export type WhiteSpace = ValueOf<typeof WhiteSpace>;
-/**
- * See SCSS variable $lumx-color-palette
- */
-export 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";
-};
-export type ColorPalette = ValueOf<typeof ColorPalette>;
-export type Color = ColorPalette | string;
-/**
- * See SCSS variable $lumx-color-variants
- */
-export 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";
-};
-export type ColorVariant = ValueOf<typeof ColorVariant>;
-/** ColorPalette with all possible color variant combination */
-export type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
-export declare const REAL_SIZE_FOR_LUMX_SIZE: {
-    xxs: number;
-    xs: number;
-    s: number;
-    m: number;
-    l: number;
-    xl: number;
-    xxl: number;
-};

package/js/constants/enums/index.js

@@ -1,164 +0,0 @@
-/**
- * Alignments.
- */
-const Alignment = {
-    bottom: 'bottom',
-    center: 'center',
-    end: 'end',
-    left: 'left',
-    right: 'right',
-    spaceAround: 'space-around',
-    spaceBetween: 'space-between',
-    spaceEvenly: 'space-evenly',
-    start: 'start',
-    top: 'top',
-};
-const Theme = {
-    light: 'light',
-    dark: 'dark',
-};
-const Size = {
-    xxs: 'xxs',
-    xs: 'xs',
-    s: 's',
-    m: 'm',
-    l: 'l',
-    xl: 'xl',
-    xxl: 'xxl',
-    tiny: 'tiny',
-    regular: 'regular',
-    medium: 'medium',
-    big: 'big',
-    huge: 'huge',
-};
-const Orientation = {
-    horizontal: 'horizontal',
-    vertical: 'vertical',
-};
-const Emphasis = {
-    low: 'low',
-    medium: 'medium',
-    high: 'high',
-};
-/**
- * List of typographies that can't be customized.
- */
-const TypographyInterface = {
-    overline: 'overline',
-    caption: 'caption',
-    body1: 'body1',
-    body2: 'body2',
-    subtitle1: 'subtitle1',
-    subtitle2: 'subtitle2',
-    title: 'title',
-    headline: 'headline',
-    display1: 'display1',
-};
-/**
- * List of title typographies that can be customized (via CSS variables).
- */
-const TypographyTitleCustom = {
-    title1: 'custom-title1',
-    title2: 'custom-title2',
-    title3: 'custom-title3',
-    title4: 'custom-title4',
-    title5: 'custom-title5',
-    title6: 'custom-title6',
-};
-/**
- * List of typographies that can be customized (via CSS variables).
- */
-const TypographyCustom = {
-    ...TypographyTitleCustom,
-    intro: 'custom-intro',
-    'body-large': 'custom-body-large',
-    body: 'custom-body',
-    quote: 'custom-quote',
-    'publish-info': 'custom-publish-info',
-    button: 'custom-button',
-};
-/**
- * List of all typographies.
- */
-const Typography = {
-    ...TypographyInterface,
-    custom: TypographyCustom,
-};
-/**
- * All available aspect ratios.
- */
-const AspectRatio = {
-    /** Intrinsic content ratio. */
-    original: 'original',
-    /** Ratio 3:1 */
-    panoramic: 'panoramic',
-    /** Ratio 16:9 */
-    wide: 'wide',
-    /** Ratio 3:2 */
-    horizontal: 'horizontal',
-    /** Ratio 3:2 */
-    vertical: 'vertical',
-    /** Ratio 1:1 */
-    square: 'square',
-    /** Ratio constrained by the parent. */
-    free: 'free',
-};
-/**
- * Semantic info about the purpose of the component
- */
-const Kind = {
-    info: 'info',
-    success: 'success',
-    warning: 'warning',
-    error: 'error',
-};
-/**
- * All available white-space values
- * */
-const WhiteSpace = {
-    normal: 'normal',
-    nowrap: 'nowrap',
-    pre: 'pre',
-    'pre-wrap': 'pre-wrap',
-    'pre-line': 'pre-line',
-    'break-spaces': 'break-spaces',
-};
-/**
- * See SCSS variable $lumx-color-palette
- */
-const ColorPalette = {
-    primary: 'primary',
-    secondary: 'secondary',
-    blue: 'blue',
-    dark: 'dark',
-    green: 'green',
-    yellow: 'yellow',
-    red: 'red',
-    light: 'light',
-    grey: 'grey',
-};
-/**
- * See SCSS variable $lumx-color-variants
- */
-const ColorVariant = {
-    D1: 'D1',
-    D2: 'D2',
-    L1: 'L1',
-    L2: 'L2',
-    L3: 'L3',
-    L4: 'L4',
-    L5: 'L5',
-    L6: 'L6',
-    N: 'N',
-};
-const REAL_SIZE_FOR_LUMX_SIZE = {
-    [Size.xxs]: 14,
-    [Size.xs]: 20,
-    [Size.s]: 24,
-    [Size.m]: 36,
-    [Size.l]: 64,
-    [Size.xl]: 128,
-    [Size.xxl]: 256,
-};
-
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, REAL_SIZE_FOR_LUMX_SIZE, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace };

package/js/constants/keycodes/index.d.ts

@@ -1,36 +0,0 @@
-/**
- * The down key code.
- */
-export declare const DOWN_KEY_CODE = 40;
-/**
- * The enter/return key code.
- */
-export declare const ENTER_KEY_CODE = 13;
-/**
- * The space key code.
- */
-export declare const SPACE_KEY_CODE = 32;
-/**
- * The escape key code.
- */
-export declare const ESCAPE_KEY_CODE = 27;
-/**
- * The left key code.
- */
-export declare const LEFT_KEY_CODE = 37;
-/**
- * The right key code.
- */
-export declare const RIGHT_KEY_CODE = 39;
-/**
- * The tab key code.
- */
-export declare const TAB_KEY_CODE = 9;
-/**
- * The up key code.
- */
-export declare const UP_KEY_CODE = 38;
-/**
- * The up key code.
- */
-export declare const BACKSPACE_KEY_CODE = 8;

package/js/types/AriaAttributes.d.ts

@@ -1,29 +0,0 @@
-/**
- * ARIA attributes type for components.
- * All attributes are optional.
- *
- * This is a custom interface containing only the ARIA attributes
- * actually used in the @lumx/core components, avoiding dependency on React types.
- */
-export interface AriaAttributes {
-    /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
-    'aria-expanded'?: boolean | 'true' | 'false';
-    /** Indicates the availability and type of interactive popup element that can be triggered by the element. */
-    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
-    /** Indicates the current "pressed" state of toggle buttons. */
-    'aria-pressed'?: boolean | 'false' | 'mixed' | 'true';
-    /** Defines a string value that labels the current element. */
-    'aria-label'?: string;
-    /** Identifies the element (or elements) that labels the current element. */
-    'aria-labelledby'?: string;
-    /** Identifies the element (or elements) that describes the object. */
-    'aria-describedby'?: string;
-    /** Indicates whether the element is exposed to an accessibility API. */
-    'aria-hidden'?: boolean | 'true' | 'false';
-    /** Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. */
-    'aria-disabled'?: boolean | 'true' | 'false';
-    /** Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. */
-    'aria-checked'?: boolean | 'false' | 'mixed' | 'true';
-    /** Indicates whether items in a table or grid are sorted in ascending or descending order. */
-    'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
-}

package/js/types/Booleanish.d.ts

@@ -1 +0,0 @@
-export type Booleanish = boolean | 'true' | 'false';

package/js/types/Callback.d.ts

@@ -1,4 +0,0 @@
-/**
- * Callback function type alias (use for readability)
- */
-export type Callback = () => void;

package/js/types/CommonRef.d.ts

@@ -1 +0,0 @@
-export type CommonRef = any;

package/js/types/Direction.d.ts

@@ -1 +0,0 @@
-export type Direction = 'top' | 'right' | 'bottom' | 'left' | 'vertical' | 'horizontal' | 'all';

package/js/types/Falsy.d.ts

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

package/js/types/GenericProps.d.ts

@@ -1,10 +0,0 @@
-import type { HasClassName } from './HasClassName';
-/**
- * Define a generic props types.
- */
-export interface GenericProps extends HasClassName {
-    /**
-     * Any prop (particularly any supported prop for a HTML element).
-     */
-    [propName: string]: any;
-}

package/js/types/HasAriaDisabled.d.ts

@@ -1,5 +0,0 @@
-import { Booleanish } from './Booleanish';
-export interface HasAriaDisabled {
-    /** Similar to `disabled` but does not block pointer events or focus */
-    'aria-disabled'?: Booleanish;
-}

package/js/types/HasAriaLabelOrLabelledBy.d.ts

@@ -1,17 +0,0 @@
-/**
- * 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.
- */
-export 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;
-};

package/js/types/HasChecked.d.ts

@@ -1,6 +0,0 @@
-export interface HasChecked<C = boolean> {
-    /** Component checked state. */
-    isChecked?: C;
-    /** @alias isChecked */
-    checked?: boolean;
-}

package/js/types/HasClassName.d.ts

@@ -1,6 +0,0 @@
-export interface HasClassName {
-    /**
-     * Class name forwarded to the root element of the component.
-     */
-    className?: string;
-}

package/js/types/HasCloseMode.d.ts

@@ -1,7 +0,0 @@
-export 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';
-}

package/js/types/HasDisabled.d.ts

@@ -1,6 +0,0 @@
-export interface HasDisabled {
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** @alias isDisabled */
-    disabled?: boolean;
-}

package/js/types/HasPolymorphicAs.d.ts

@@ -1,8 +0,0 @@
-import type React from 'react';
-import { ElementType } from './JSXElement';
-export type HasPolymorphicAs<E extends ElementType> = React.ComponentPropsWithoutRef<E> & {
-    /**
-     * Customize the rendered component.
-     */
-    as?: E;
-};

package/js/types/HasRequiredLinkHref.d.ts

@@ -1,3 +0,0 @@
-export type HasRequiredLinkHref<E> = E extends 'a' ? {
-    href: string;
-} : Record<string, unknown>;

package/js/types/HasTheme.d.ts

@@ -1,7 +0,0 @@
-import type { Theme } from '../constants';
-export interface HasTheme {
-    /**
-     * Theme adapting the component to light or dark background.
-     */
-    theme?: Theme;
-}

package/js/types/HeadingElement.d.ts

@@ -1,2 +0,0 @@
-/** Union type of all heading elements */
-export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/js/types/JSXElement.d.ts

@@ -1,9 +0,0 @@
-import type React from 'react';
-/**
- * Framework-agnostic type for renderable content.
- * Vue components should cast VNode[] from slots to this type.
- *
- * Note: Uses type-only import to avoid runtime dependencies.
- */
-export type JSXElement = React.ReactNode;
-export type ElementType = React.ElementType;

package/js/types/KebabCase.d.ts

@@ -1,2 +0,0 @@
-/** Transform a string literal into kebab case */
-export type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T> ? `${Uncapitalize<C>}${KebabCase<T>}` : `${Uncapitalize<C>}-${KebabCase<T>}` : S;

package/js/types/LumxClassName.d.ts

@@ -1,3 +0,0 @@
-import type { KebabCase } from './KebabCase';
-/** Transform the component name into the lumx class name. */
-export type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;

package/js/types/ObjectValues.d.ts

@@ -1,5 +0,0 @@
-/**
- * Returns a union type of the given generic values.
- *
- */
-export type ObjectValues<T> = T[keyof T];

package/js/types/Point.d.ts

@@ -1,7 +0,0 @@
-/**
- * A point coordinate in 2D space
- */
-export type Point = {
-    x: number;
-    y: number;
-};

package/js/types/Predicate.d.ts

@@ -1,2 +0,0 @@
-/** Predicate function type */
-export type Predicate<T> = (t: T) => boolean;

package/js/types/RectSize.d.ts

@@ -1,7 +0,0 @@
-/**
- * Rectangle size
- */
-export type RectSize = {
-    width: number;
-    height: number;
-};