@lumx/react 3.20.1-alpha.13 → 3.20.1-alpha.14

package/_internal/components/side-navigation-75b22f19.js

@@ -1,159 +0,0 @@
-import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
-import { Children } from 'react';
-import { i as isComponent } from '../isComponent-78df9309.js';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useTheme } from '../ThemeContext-3181f000.js';
-import isEmpty from 'lodash/isEmpty';
-import { mdiChevronUp, mdiChevronDown } from '@lumx/icons';
-import { u as useId } from '../useId-3a1facc0.js';
-import { R as RawClickable } from '../RawClickable-c76bbc4c.js';
-import { Theme, Emphasis, Size } from '@lumx/core/js/constants';
-import { Icon } from './icon-2e7345ad.js';
-import { I as IconButton } from '../IconButton-10585058.js';
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1 = 'SideNavigation';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
-
-/**
- * SideNavigation component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const SideNavigation = forwardRef((props, ref) => {
-  const defaultTheme = useTheme();
-  const {
-    children,
-    className,
-    theme = defaultTheme,
-    ...forwardedProps
-  } = props;
-  const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
-  return /*#__PURE__*/React.createElement("ul", _extends({
-    ref: ref
-  }, forwardedProps, {
-    className: classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$1)
-  }), content);
-});
-SideNavigation.displayName = COMPONENT_NAME$1;
-SideNavigation.className = CLASSNAME$1;
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SideNavigationItem';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  emphasis: Emphasis.high,
-  closeMode: 'unmount'
-};
-
-/**
- * SideNavigationItem component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const SideNavigationItem = forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    emphasis = DEFAULT_PROPS.emphasis,
-    icon,
-    isOpen,
-    isSelected,
-    label,
-    linkAs,
-    linkProps,
-    onActionClick,
-    onClick,
-    toggleButtonProps,
-    closeMode = DEFAULT_PROPS.closeMode,
-    ...forwardedProps
-  } = props;
-  const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
-  const hasContent = !isEmpty(content);
-  const shouldSplitActions = Boolean(onActionClick);
-  const showChildren = hasContent && isOpen;
-  const contentId = useId();
-  const ariaProps = {};
-  if (hasContent) {
-    ariaProps['aria-expanded'] = !!showChildren;
-    // Associate with content ID only if in DOM (shown or hidden and not unmounted)
-    ariaProps['aria-controls'] = showChildren || closeMode === 'hide' ? contentId : undefined;
-  }
-  return /*#__PURE__*/React.createElement("li", _extends({
-    ref: ref
-  }, forwardedProps, {
-    className: classNames(className, handleBasicClasses({
-      emphasis,
-      isOpen: showChildren,
-      isSelected,
-      prefix: CLASSNAME
-    }))
-  }), shouldSplitActions ? /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME}__wrapper`
-  }, /*#__PURE__*/React.createElement(RawClickable, _extends({
-    as: linkAs || (linkProps?.href ? 'a' : 'button')
-  }, linkProps, {
-    className: `${CLASSNAME}__link`,
-    onClick: onClick
-  }), icon && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME}__icon`,
-    icon: icon,
-    size: Size.xs
-  }), /*#__PURE__*/React.createElement("span", null, label)), /*#__PURE__*/React.createElement(IconButton, _extends({}, toggleButtonProps, {
-    className: `${CLASSNAME}__toggle`,
-    icon: isOpen ? mdiChevronUp : mdiChevronDown,
-    size: Size.m,
-    emphasis: Emphasis.low,
-    onClick: onActionClick
-  }, ariaProps))) : /*#__PURE__*/React.createElement(RawClickable, _extends({
-    as: linkAs || (linkProps?.href ? 'a' : 'button')
-  }, linkProps, {
-    className: `${CLASSNAME}__link`,
-    onClick: onClick
-  }, ariaProps), icon && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME}__icon`,
-    icon: icon,
-    size: Size.xs
-  }), /*#__PURE__*/React.createElement("span", null, label), hasContent && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME}__chevron`,
-    icon: isOpen ? mdiChevronUp : mdiChevronDown,
-    size: Size.xs
-  })), (closeMode === 'hide' || showChildren) && /*#__PURE__*/React.createElement("ul", {
-    className: `${CLASSNAME}__children`,
-    id: contentId
-  }, content));
-});
-SideNavigationItem.displayName = COMPONENT_NAME;
-SideNavigationItem.className = CLASSNAME;
-SideNavigationItem.defaultProps = DEFAULT_PROPS;
-
-export { SideNavigation, SideNavigationItem };
-//# sourceMappingURL=side-navigation-75b22f19.js.map

package/_internal/components/side-navigation-75b22f19.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"side-navigation-75b22f19.js","sources":["../../../src/components/side-navigation/SideNavigation.tsx","../../../src/components/side-navigation/SideNavigationItem.tsx"],"sourcesContent":["import { Children, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { SideNavigationItem, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface SideNavigationProps extends GenericProps, HasTheme {\n    /** SideNavigationItem elements. */\n    children: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SideNavigation';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SideNavigation component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SideNavigation = forwardRef<SideNavigationProps, HTMLUListElement>((props, ref) => {\n    const defaultTheme = useTheme();\n    const { children, className, theme = defaultTheme, ...forwardedProps } = props;\n    const content = Children.toArray(children).filter(isComponent(SideNavigationItem));\n\n    return (\n        <ul\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME)}\n        >\n            {content}\n        </ul>\n    );\n});\nSideNavigation.displayName = COMPONENT_NAME;\nSideNavigation.className = CLASSNAME;\n","import { Children, ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { mdiChevronDown, mdiChevronUp } from '@lumx/icons';\nimport { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';\nimport { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\n\n/**\n * Defines the props of the component.\n */\nexport interface SideNavigationItemProps extends GenericProps, HasCloseMode {\n    /** SideNavigationItem elements. */\n    children?: ReactNode;\n    /** Emphasis variant. */\n    emphasis?: Emphasis;\n    /** Label content. */\n    label: string | ReactNode;\n    /** Icon (SVG path). */\n    icon?: string;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Whether the component is selected or not. */\n    isSelected?: boolean;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Props to pass to the link (minus those already set by the SideNavigationItem props). */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */\n    toggleButtonProps: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color' | 'size'>;\n    /** On action button click callback. */\n    onActionClick?(evt: React.MouseEvent): void;\n    /** On click callback. */\n    onClick?(evt: React.MouseEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SideNavigationItem';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<SideNavigationItemProps> = {\n    emphasis: Emphasis.high,\n    closeMode: 'unmount',\n};\n\n/**\n * SideNavigationItem component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElement>((props, ref) => {\n    const {\n        children,\n        className,\n        emphasis = DEFAULT_PROPS.emphasis,\n        icon,\n        isOpen,\n        isSelected,\n        label,\n        linkAs,\n        linkProps,\n        onActionClick,\n        onClick,\n        toggleButtonProps,\n        closeMode = DEFAULT_PROPS.closeMode,\n        ...forwardedProps\n    } = props;\n\n    const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));\n    const hasContent = !isEmpty(content);\n    const shouldSplitActions = Boolean(onActionClick);\n    const showChildren = hasContent && isOpen;\n\n    const contentId = useId();\n    const ariaProps: any = {};\n    if (hasContent) {\n        ariaProps['aria-expanded'] = !!showChildren;\n        // Associate with content ID only if in DOM (shown or hidden and not unmounted)\n        ariaProps['aria-controls'] = showChildren || closeMode === 'hide' ? contentId : undefined;\n    }\n\n    return (\n        <li\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    emphasis,\n                    isOpen: showChildren,\n                    isSelected,\n                    prefix: CLASSNAME,\n                }),\n            )}\n        >\n            {shouldSplitActions ? (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    <RawClickable\n                        as={linkAs || (linkProps?.href ? 'a' : 'button')}\n                        {...(linkProps as any)}\n                        className={`${CLASSNAME}__link`}\n                        onClick={onClick}\n                    >\n                        {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}\n                        <span>{label}</span>\n                    </RawClickable>\n\n                    <IconButton\n                        {...toggleButtonProps}\n                        className={`${CLASSNAME}__toggle`}\n                        icon={isOpen ? mdiChevronUp : mdiChevronDown}\n                        size={Size.m}\n                        emphasis={Emphasis.low}\n                        onClick={onActionClick}\n                        {...ariaProps}\n                    />\n                </div>\n            ) : (\n                <RawClickable\n                    as={linkAs || (linkProps?.href ? 'a' : 'button')}\n                    {...linkProps}\n                    className={`${CLASSNAME}__link`}\n                    onClick={onClick}\n                    {...ariaProps}\n                >\n                    {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}\n                    <span>{label}</span>\n                    {hasContent && (\n                        <Icon\n                            className={`${CLASSNAME}__chevron`}\n                            icon={isOpen ? mdiChevronUp : mdiChevronDown}\n                            size={Size.xs}\n                        />\n                    )}\n                </RawClickable>\n            )}\n\n            {(closeMode === 'hide' || showChildren) && (\n                <ul className={`${CLASSNAME}__children`} id={contentId}>\n                    {content}\n                </ul>\n            )}\n        </li>\n    );\n});\nSideNavigationItem.displayName = COMPONENT_NAME;\nSideNavigationItem.className = CLASSNAME;\nSideNavigationItem.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","SideNavigation","forwardRef","props","ref","defaultTheme","useTheme","children","className","theme","forwardedProps","content","Children","toArray","filter","isComponent","SideNavigationItem","React","createElement","_extends","classNames","Theme","dark","displayName","DEFAULT_PROPS","emphasis","Emphasis","high","closeMode","icon","isOpen","isSelected","label","linkAs","linkProps","onActionClick","onClick","toggleButtonProps","hasContent","isEmpty","shouldSplitActions","Boolean","showChildren","contentId","useId","ariaProps","undefined","handleBasicClasses","prefix","RawClickable","as","href","Icon","size","Size","xs","IconButton","mdiChevronUp","mdiChevronDown","m","low","id","defaultProps"],"mappings":"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"}

package/_internal/components/skeleton-361ce335.js

@@ -1,174 +0,0 @@
-import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useTheme } from '../ThemeContext-3181f000.js';
-import { Theme } from '@lumx/core/js/constants';
-
-/**
- * Defines the props of the component.
- */
-
-const DEFAULT_PROPS$2 = {};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$2 = 'SkeletonCircle';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
-
-/**
- * SkeletonCircle component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const SkeletonCircle = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    className,
-    size,
-    color,
-    theme = defaultTheme,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, forwardedProps, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$2,
-      size,
-      color,
-      theme
-    }))
-  }));
-});
-SkeletonCircle.displayName = COMPONENT_NAME$2;
-SkeletonCircle.defaultProps = DEFAULT_PROPS$2;
-SkeletonCircle.className = CLASSNAME$2;
-
-/**
- * Skeleton variants.
- */
-const SkeletonRectangleVariant = {
-  squared: 'squared',
-  rounded: 'rounded',
-  pill: 'pill'
-};
-
-/**
- * Defines the props of the component.
- */
-
-const DEFAULT_PROPS$1 = {
-  variant: SkeletonRectangleVariant.squared
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1 = 'SkeletonRectangle';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
-
-/**
- * SkeletonRectangle component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const SkeletonRectangle = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    aspectRatio,
-    className,
-    height,
-    theme = defaultTheme,
-    variant = DEFAULT_PROPS$1.variant,
-    width,
-    color,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, forwardedProps, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$1,
-      aspectRatio,
-      height: aspectRatio ? undefined : height,
-      theme,
-      variant,
-      width,
-      color
-    }))
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1}__inner`
-  }));
-});
-SkeletonRectangle.displayName = COMPONENT_NAME$1;
-SkeletonRectangle.className = CLASSNAME$1;
-SkeletonRectangle.defaultProps = DEFAULT_PROPS$1;
-
-/**
- * Defines the props of the component.
- */
-
-const DEFAULT_PROPS = {};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SkeletonTypography';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * SkeletonTypography component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const SkeletonTypography = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    className,
-    theme = defaultTheme,
-    typography,
-    width,
-    color,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, forwardedProps, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      theme,
-      typography,
-      color
-    })),
-    style: {
-      ...forwardedProps.style,
-      width
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME}__inner`
-  }));
-});
-SkeletonTypography.displayName = COMPONENT_NAME;
-SkeletonTypography.defaultProps = DEFAULT_PROPS;
-SkeletonTypography.className = CLASSNAME;
-
-export { SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography };
-//# sourceMappingURL=skeleton-361ce335.js.map

package/_internal/components/skeleton-361ce335.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton-361ce335.js","sources":["../../../src/components/skeleton/SkeletonCircle.tsx","../../../src/components/skeleton/SkeletonRectangle.tsx","../../../src/components/skeleton/SkeletonTypography.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { GlobalSize, Theme, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonCircleProps extends GenericProps, HasTheme {\n    /** Size variant. */\n    size: GlobalSize;\n    /** The color of the skeleton. */\n    color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonCircleProps> = {};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonCircle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonCircle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { className, size, color, theme = defaultTheme, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, color, theme }))}\n        />\n    );\n});\nSkeletonCircle.displayName = COMPONENT_NAME;\nSkeletonCircle.defaultProps = DEFAULT_PROPS;\nSkeletonCircle.className = CLASSNAME;\n","import classNames from 'classnames';\n\nimport { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Skeleton variants.\n */\nexport const SkeletonRectangleVariant = { squared: 'squared', rounded: 'rounded', pill: 'pill' } as const;\nexport type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonRectangleProps extends GenericProps, HasTheme {\n    /** Aspect ratio (use with width and not height). */\n    aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;\n    /** Height size. */\n    height?: GlobalSize;\n    /** Border variant. */\n    variant?: SkeletonRectangleVariant;\n    /** Width size. */\n    width?: GlobalSize;\n    /** The color of the skeleton. */\n    color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonRectangleProps> = {\n    variant: SkeletonRectangleVariant.squared,\n};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonRectangle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonRectangle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SkeletonRectangle = forwardRef<SkeletonRectangleProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        aspectRatio,\n        className,\n        height,\n        theme = defaultTheme,\n        variant = DEFAULT_PROPS.variant,\n        width,\n        color,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    aspectRatio,\n                    height: aspectRatio ? undefined : height,\n                    theme,\n                    variant,\n                    width,\n                    color,\n                }),\n            )}\n        >\n            <div className={`${CLASSNAME}__inner`} />\n        </div>\n    );\n});\nSkeletonRectangle.displayName = COMPONENT_NAME;\nSkeletonRectangle.className = CLASSNAME;\nSkeletonRectangle.defaultProps = DEFAULT_PROPS;\n","import { CSSProperties } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme, TypographyInterface, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonTypographyProps extends GenericProps, HasTheme {\n    /** Typography variant. */\n    typography: TypographyInterface;\n    /** Width CSS property. */\n    width?: CSSProperties['width'];\n    /** The color of the skeleton. */\n    color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonTypographyProps> = {};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonTypography';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonTypography component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SkeletonTypography = forwardRef<SkeletonTypographyProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { className, theme = defaultTheme, typography, width, color, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, typography, color }))}\n            style={{ ...forwardedProps.style, width }}\n        >\n            <div className={`${CLASSNAME}__inner`} />\n        </div>\n    );\n});\nSkeletonTypography.displayName = COMPONENT_NAME;\nSkeletonTypography.defaultProps = DEFAULT_PROPS;\nSkeletonTypography.className = CLASSNAME;\n"],"names":["DEFAULT_PROPS","COMPONENT_NAME","CLASSNAME","getRootClassName","SkeletonCircle","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","size","color","theme","forwardedProps","React","createElement","_extends","classNames","handleBasicClasses","prefix","displayName","defaultProps","SkeletonRectangleVariant","squared","rounded","pill","variant","SkeletonRectangle","aspectRatio","height","width","undefined","SkeletonTypography","typography","style"],"mappings":"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"}

package/_internal/components/slider-8094cb5c.js

@@ -1,305 +0,0 @@
-import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
-import React__default, { useMemo, useRef } from 'react';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useId } from '../useId-3a1facc0.js';
-import { u as useTheme } from '../ThemeContext-3181f000.js';
-import { u as useDisableStateProps } from '../useDisableStateProps-fffc365f.js';
-import { Theme } from '@lumx/core/js/constants';
-import { InputLabel } from './input-label-5e509a1b.js';
-import { InputHelper } from './input-helper-e644e05e.js';
-
-const useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
-
-/**
- * https://github.com/facebook/react/issues/14099#issuecomment-440013892
- *
- * @param fn A function to run
- * @return A React callback
- */
-function useEventCallback(fn) {
-  const ref = React__default.useRef(fn);
-  useEnhancedEffect(() => {
-    ref.current = fn;
-  });
-  return React__default.useCallback(event => ref.current(event), []);
-}
-
-/**
- * Clamp value in range.
- *
- * @param value Value to clamp.
- * @param min   Minimum value.
- * @param max   Maximum value.
- * @return Clamped value.
- */
-const clamp = (value, min, max) => {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
-};
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Slider';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  precision: 0,
-  steps: 0
-};
-
-/**
- * Convert a percent value to a value in range min - max.
- *
- * @param percent   Value to convert.
- * @param min       Minimum value.
- * @param max       Maximum value.
- * @param precision Precision.
- * @return Value in range min - max
- */
-const computeValueFromPercent = (percent, min, max, precision = 0) => Number((min + percent * (max - min)).toFixed(precision));
-
-/**
- * Convert a value in range min - max to a percent value.
- *
- * @param value Value to convert.
- * @param min   Minimum value.
- * @param max   Maximum value.
- * @return Value in percent
- */
-const computePercentFromValue = (value, min, max) => Number((value - min) / (max - min));
-
-/**
- * Slider component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Slider = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    className,
-    helper,
-    hideMinMaxLabel,
-    id,
-    label,
-    max,
-    min,
-    name,
-    onChange,
-    onMouseDown,
-    precision = DEFAULT_PROPS.precision,
-    steps = DEFAULT_PROPS.steps,
-    theme = defaultTheme,
-    value,
-    ...forwardedProps
-  } = otherProps;
-  const generatedId = useId();
-  const sliderId = id || generatedId;
-  const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
-  const sliderRef = useRef(null);
-
-  // build a lookup array for the steps.
-  const availableSteps = useMemo(() => {
-    if (!steps) return [];
-    const available = [0];
-    const percentStep = 1 / ((max - min) / steps);
-    let ptr = 0;
-    while (ptr + percentStep < 1) {
-      ptr += percentStep;
-      available.push(ptr);
-    }
-    return available;
-  }, [steps, min, max]);
-
-  /**
-   * Try to find the closest step to the current slider position.
-   *
-   * @param percentValue Reference value
-   * @return The closest step value
-   */
-  const findClosestStep = percentValue => {
-    const closest = availableSteps.reduce((acc, step) => {
-      const aDst = Math.abs(percentValue - step);
-      if (aDst < acc.dst) {
-        return {
-          dst: aDst,
-          val: step
-        };
-      }
-      return acc;
-    }, {
-      dst: Infinity,
-      val: -1
-    });
-    return closest.val;
-  };
-
-  /**
-   * Convert slider's handle position to percent.
-   *
-   * @param event The interaction event
-   * @param slider the slider element
-   * @return The computed percent value
-   */
-  const getPercentValue = (event, slider) => {
-    const {
-      width,
-      left
-    } = slider.getBoundingClientRect();
-    let percent = (event.pageX - left - window.pageXOffset) / width;
-    percent = clamp(percent, 0, 1);
-    if (steps) {
-      percent = findClosestStep(percent);
-    }
-    return percent;
-  };
-
-  /**
-   * Register a handler for the mouse move event.
-   */
-  const handleMove = useEventCallback(event => {
-    const {
-      current: slider
-    } = sliderRef;
-    if (!slider || !onChange) return;
-    const newValue = getPercentValue(event, slider);
-    onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
-  });
-
-  /**
-   * Register a handler for the mouse up event.
-   * Clean a all listeners.
-   */
-  const handleEnd = useEventCallback(() => {
-    document.body.removeEventListener('mousemove', handleMove);
-    document.body.removeEventListener('mouseup', handleEnd);
-    document.body.removeEventListener('touchmove', handleMove);
-    document.body.removeEventListener('touchend', handleEnd);
-  });
-
-  /**
-   * Move to the next or previous value (i.e. + or - 10%) or next step
-   * @param previous Should seek the previous value.
-   */
-  const hopToValue = (previous = false) => {
-    const oldPercent = computePercentFromValue(value, min, max);
-    let percent = clamp(oldPercent + (previous ? -0.1 : 0.1), 0, 1);
-    if (steps) {
-      percent = oldPercent + availableSteps[1] * (previous ? -1 : 1);
-      percent = findClosestStep(percent);
-    }
-    if (onChange) {
-      onChange(computeValueFromPercent(percent, min, max, precision), name);
-    }
-  };
-
-  /**
-   * Register a handler for keyboard interactions
-   */
-  const handleKeyDown = useEventCallback(event => {
-    if (event.key === 'ArrowRight') {
-      hopToValue();
-    } else if (event.key === 'ArrowLeft') {
-      hopToValue(true);
-    }
-  });
-
-  /**
-   * Register a handler for the mouseDown event.
-   */
-  const handleMouseDown = useEventCallback(event => {
-    onMouseDown?.(event);
-    const {
-      current: slider
-    } = sliderRef;
-    if (isAnyDisabled || !slider) return;
-    const newValue = getPercentValue(event, slider);
-    if (onChange) {
-      onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
-    }
-    document.body.addEventListener('mousemove', handleMove);
-    document.body.addEventListener('mouseup', handleEnd);
-  });
-  const percentString = `${computePercentFromValue(value, min, max) * 100}%`;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, forwardedProps, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      theme,
-      hasLabel: Boolean(label)
-    })),
-    onMouseDown: handleMouseDown
-  }), label && /*#__PURE__*/React.createElement(InputLabel, {
-    id: sliderLabelId,
-    htmlFor: sliderId,
-    className: `${CLASSNAME}__label`,
-    theme: theme
-  }, label), helper && /*#__PURE__*/React.createElement(InputHelper, {
-    className: `${CLASSNAME}__helper`,
-    theme: theme
-  }, helper), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME}__ui-wrapper`
-  }, !hideMinMaxLabel && /*#__PURE__*/React.createElement("span", {
-    className: `${CLASSNAME}__value-label ${CLASSNAME}__value-label--min`
-  }, min), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME}__wrapper`,
-    ref: sliderRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME}__track ${CLASSNAME}__track--background`
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME}__track ${CLASSNAME}__track--active`,
-    style: {
-      width: percentString
-    }
-  }), steps ? /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME}__ticks`
-  }, availableSteps.map((step, idx) => /*#__PURE__*/React.createElement("div", {
-    key: `tick_${idx}`,
-    className: `${CLASSNAME}__tick`,
-    style: {
-      left: `${step * 100}%`
-    }
-  }))) : null, /*#__PURE__*/React.createElement("button", _extends({
-    type: "button",
-    "aria-labelledby": sliderLabelId,
-    name: name,
-    id: sliderId,
-    className: `${CLASSNAME}__handle`,
-    style: {
-      left: percentString
-    },
-    onKeyDown: isAnyDisabled ? undefined : handleKeyDown
-  }, disabledStateProps))), !hideMinMaxLabel && /*#__PURE__*/React.createElement("span", {
-    className: `${CLASSNAME}__value-label ${CLASSNAME}__value-label--max`
-  }, max)));
-});
-Slider.displayName = COMPONENT_NAME;
-Slider.className = CLASSNAME;
-Slider.defaultProps = DEFAULT_PROPS;
-
-export { Slider, clamp };
-//# sourceMappingURL=slider-8094cb5c.js.map