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

package/_internal/IconButton-10585058.js

@@ -0,0 +1,72 @@
+import { f as forwardRef, _ as _extends } from './forwardRef-49d2bb84.js';
+import { B as ButtonRoot } from './ButtonRoot-ab633b1d.js';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { u as useTheme, T as ThemeProvider } from './ThemeContext-3181f000.js';
+import { Tooltip } from './components/tooltip-84ffb4f9.js';
+import { Emphasis, Size, Theme } from '@lumx/core/js/constants';
+import { Icon } from './components/icon-2e7345ad.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'IconButton';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  emphasis: Emphasis.high,
+  size: Size.m
+};
+
+/**
+ * IconButton component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const IconButton = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    emphasis = DEFAULT_PROPS.emphasis,
+    image,
+    icon,
+    label,
+    size = DEFAULT_PROPS.size,
+    theme = defaultTheme,
+    tooltipProps,
+    hideTooltip,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({
+    label: hideTooltip ? '' : label
+  }, tooltipProps), /*#__PURE__*/React.createElement(ButtonRoot, _extends({
+    ref: ref,
+    emphasis,
+    size,
+    theme
+  }, forwardedProps, {
+    "aria-label": label,
+    variant: "icon"
+  }), image ? /*#__PURE__*/React.createElement("img", {
+    // no need to set alt as an aria-label is already set on the button
+    alt: "",
+    src: image
+  }) : /*#__PURE__*/React.createElement(ThemeProvider, {
+    value: undefined
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }))));
+});
+IconButton.displayName = COMPONENT_NAME;
+IconButton.className = CLASSNAME;
+IconButton.defaultProps = DEFAULT_PROPS;
+
+export { IconButton as I };
+//# sourceMappingURL=IconButton-10585058.js.map

package/_internal/IconButton-10585058.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton-10585058.js","sources":["../../src/components/button/IconButton.tsx"],"sourcesContent":["import { Emphasis, Icon, Size, Theme, ThemeProvider, Tooltip, TooltipProps } from '@lumx/react';\nimport { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';\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\nexport interface IconButtonProps extends BaseButtonProps {\n    /**\n     * Icon (SVG path).\n     * If `image` is also set, `image` will be used instead.\n     */\n    icon?: string;\n    /**\n     * Image (image url).\n     * Has priority over `icon`.\n     */\n    image?: string;\n    /**\n     * Label text (required for a11y purpose).\n     * If you really don't want an aria-label, you can set an empty label (this is not recommended).\n     */\n    label: string;\n    /**\n     * Props to pass to the tooltip.\n     * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.\n     * */\n    tooltipProps?: Partial<TooltipProps>;\n    /** Whether the tooltip should be hidden or not. */\n    hideTooltip?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'IconButton';\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<IconButtonProps> = {\n    emphasis: Emphasis.high,\n    size: Size.m,\n};\n\n/**\n * IconButton component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const IconButton = forwardRef<IconButtonProps, HTMLButtonElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        emphasis = DEFAULT_PROPS.emphasis,\n        image,\n        icon,\n        label,\n        size = DEFAULT_PROPS.size,\n        theme = defaultTheme,\n        tooltipProps,\n        hideTooltip,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>\n            <ButtonRoot ref={ref} {...{ emphasis, size, theme, ...forwardedProps }} aria-label={label} variant=\"icon\">\n                {image ? (\n                    <img\n                        // no need to set alt as an aria-label is already set on the button\n                        alt=\"\"\n                        src={image}\n                    />\n                ) : (\n                    <ThemeProvider value={undefined}>\n                        <Icon icon={icon as string} />\n                    </ThemeProvider>\n                )}\n            </ButtonRoot>\n        </Tooltip>\n    );\n});\nIconButton.displayName = COMPONENT_NAME;\nIconButton.className = CLASSNAME;\nIconButton.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","emphasis","Emphasis","high","size","Size","m","IconButton","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","image","icon","label","theme","tooltipProps","hideTooltip","forwardedProps","React","createElement","Tooltip","_extends","ButtonRoot","variant","alt","src","ThemeProvider","value","undefined","Icon","displayName","className","defaultProps"],"mappings":";;;;;;;;AA+BA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAuC,GAAG;EAC5CC,QAAQ,EAAEC,QAAQ,CAACC,IAAI;EACvBC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAqC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFb,QAAQ,GAAGD,aAAa,CAACC,QAAQ;IACjCc,KAAK;IACLC,IAAI;IACJC,KAAK;IACLb,IAAI,GAAGJ,aAAa,CAACI,IAAI;AACzBc,IAAAA,KAAK,GAAGP,YAAY;IACpBQ,YAAY;IACZC,WAAW;IACX,GAAGC,cAAAA;AACP,GAAC,GAAGZ,KAAK,CAAA;AAET,EAAA,oBACIa,KAAA,CAAAC,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AAACR,IAAAA,KAAK,EAAEG,WAAW,GAAG,EAAE,GAAGH,KAAAA;GAAWE,EAAAA,YAAY,gBACtDG,KAAA,CAAAC,aAAA,CAACG,UAAU,EAAAD,QAAA,CAAA;AAACf,IAAAA,GAAG,EAAEA,GAAI;IAAOT,QAAQ;IAAEG,IAAI;AAAEc,IAAAA,KAAAA;AAAK,GAAA,EAAKG,cAAc,EAAA;AAAI,IAAA,YAAA,EAAYJ,KAAM;AAACU,IAAAA,OAAO,EAAC,MAAA;AAAM,GAAA,CAAA,EACpGZ,KAAK,gBACFO,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACI;AACAK,IAAAA,GAAG,EAAC,EAAE;AACNC,IAAAA,GAAG,EAAEd,KAAAA;AAAM,GACd,CAAC,gBAEFO,KAAA,CAAAC,aAAA,CAACO,aAAa,EAAA;AAACC,IAAAA,KAAK,EAAEC,SAAAA;AAAU,GAAA,eAC5BV,KAAA,CAAAC,aAAA,CAACU,IAAI,EAAA;AAACjB,IAAAA,IAAI,EAAEA,IAAAA;GAAiB,CAClB,CAEX,CACP,CAAC,CAAA;AAElB,CAAC,EAAC;AACFT,UAAU,CAAC2B,WAAW,GAAGrC,cAAc,CAAA;AACvCU,UAAU,CAAC4B,SAAS,GAAGrC,SAAS,CAAA;AAChCS,UAAU,CAAC6B,YAAY,GAAGpC,aAAa;;;;"}

package/_internal/ImageCaption-4279b2b6.js

@@ -0,0 +1,65 @@
+import { c as classNames, _ as _extends } from './forwardRef-49d2bb84.js';
+import { u as useTheme } from './ThemeContext-3181f000.js';
+import { FlexBox } from './components/flex-box-c8701a85.js';
+import { T as Text } from './index-b4d256e7.js';
+
+/** Internal component used to render image captions */
+const ImageCaption = props => {
+  const defaultTheme = useTheme();
+  const {
+    baseClassName,
+    theme = defaultTheme,
+    as = 'figcaption',
+    title,
+    titleProps,
+    description,
+    descriptionProps,
+    tags,
+    captionStyle,
+    align,
+    truncate
+  } = props;
+  if (!title && !description && !tags) return null;
+  const titleColor = {
+    color: theme === 'dark' ? 'light' : 'dark'
+  };
+  const baseColor = {
+    color: theme === 'dark' ? 'light' : 'dark',
+    colorVariant: 'L2'
+  };
+
+  // Display description as string or HTML
+  const descriptionContent = typeof description === 'string' ? {
+    children: description
+  } : {
+    dangerouslySetInnerHTML: description
+  };
+  return /*#__PURE__*/React.createElement(FlexBox, {
+    as: as,
+    className: classNames(baseClassName && `${baseClassName}__wrapper`),
+    style: captionStyle,
+    orientation: "vertical",
+    vAlign: align,
+    hAlign: align === 'center' ? align : undefined,
+    gap: "regular"
+  }, (title || description) && /*#__PURE__*/React.createElement(Text, _extends({
+    as: "p",
+    className: classNames(baseClassName && `${baseClassName}__caption`),
+    truncate: truncate
+  }, baseColor), title && /*#__PURE__*/React.createElement(Text, _extends({}, titleProps, {
+    as: "span",
+    className: classNames(titleProps?.className, baseClassName && `${baseClassName}__title`),
+    typography: "subtitle1"
+  }, titleColor), title), ' ', description && /*#__PURE__*/React.createElement(Text, _extends({}, descriptionProps, {
+    as: "span",
+    className: classNames(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
+    typography: "body1"
+  }, descriptionContent))), tags && /*#__PURE__*/React.createElement(FlexBox, {
+    className: classNames(baseClassName && `${baseClassName}__tags`),
+    orientation: "horizontal",
+    vAlign: align
+  }, tags));
+};
+
+export { ImageCaption as I };
+//# sourceMappingURL=ImageCaption-4279b2b6.js.map

package/_internal/ImageCaption-4279b2b6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCaption-4279b2b6.js","sources":["../../src/components/image-block/ImageCaption.tsx"],"sourcesContent":["import { CSSProperties, ReactNode } from 'react';\n\nimport { FlexBox, HorizontalAlignment, Text, TextProps, useTheme } from '@lumx/react';\nimport { HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';\nimport classNames from 'classnames';\n\ntype As = 'div' | 'figcaption';\n\ntype ForwardedTextProps = Omit<TextProps, 'as' | 'typography' | 'color' | 'colorVariant'>;\n\nexport type ImageCaptionMetadata = {\n    /** Image title to display in the caption. */\n    title?: string;\n    /** Props to pass to the title. */\n    titleProps?: ForwardedTextProps;\n    /** Image description. Can be either a string, or sanitized html. */\n    description?: string | { __html: string };\n    /** Props to pass to the title. */\n    descriptionProps?: ForwardedTextProps;\n    /** Tag content. */\n    tags?: ReactNode;\n    /** Caption custom CSS style. */\n    captionStyle?: CSSProperties;\n};\n\nexport type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &\n    HasPolymorphicAs<AS> &\n    ImageCaptionMetadata & {\n        /** Base className for sub elements */\n        baseClassName?: string;\n        /** Alignment. */\n        align?: HorizontalAlignment;\n        /** Truncate text on title & description (no line wrapping). */\n        truncate?: TextProps['truncate'];\n    };\n\n/** Internal component used to render image captions */\nexport const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {\n    const defaultTheme = useTheme();\n    const {\n        baseClassName,\n        theme = defaultTheme,\n        as = 'figcaption',\n        title,\n        titleProps,\n        description,\n        descriptionProps,\n        tags,\n        captionStyle,\n        align,\n        truncate,\n    } = props;\n    if (!title && !description && !tags) return null;\n\n    const titleColor = { color: theme === 'dark' ? 'light' : 'dark' } as const;\n    const baseColor = { color: theme === 'dark' ? 'light' : 'dark', colorVariant: 'L2' } as const;\n\n    // Display description as string or HTML\n    const descriptionContent =\n        typeof description === 'string' ? { children: description } : { dangerouslySetInnerHTML: description };\n\n    return (\n        <FlexBox\n            as={as}\n            className={classNames(baseClassName && `${baseClassName}__wrapper`)}\n            style={captionStyle}\n            orientation=\"vertical\"\n            vAlign={align}\n            hAlign={align === 'center' ? align : undefined}\n            gap=\"regular\"\n        >\n            {(title || description) && (\n                <Text\n                    as=\"p\"\n                    className={classNames(baseClassName && `${baseClassName}__caption`)}\n                    truncate={truncate}\n                    {...baseColor}\n                >\n                    {title && (\n                        <Text\n                            {...titleProps}\n                            as=\"span\"\n                            className={classNames(titleProps?.className, baseClassName && `${baseClassName}__title`)}\n                            typography=\"subtitle1\"\n                            {...titleColor}\n                        >\n                            {title}\n                        </Text>\n                    )}{' '}\n                    {description && (\n                        <Text\n                            {...descriptionProps}\n                            as=\"span\"\n                            className={classNames(\n                                descriptionProps?.className,\n                                baseClassName && `${baseClassName}__description`,\n                            )}\n                            typography=\"body1\"\n                            {...descriptionContent}\n                        />\n                    )}\n                </Text>\n            )}\n            {tags && (\n                <FlexBox\n                    className={classNames(baseClassName && `${baseClassName}__tags`)}\n                    orientation=\"horizontal\"\n                    vAlign={align}\n                >\n                    {tags}\n                </FlexBox>\n            )}\n        </FlexBox>\n    );\n};\n"],"names":["ImageCaption","props","defaultTheme","useTheme","baseClassName","theme","as","title","titleProps","description","descriptionProps","tags","captionStyle","align","truncate","titleColor","color","baseColor","colorVariant","descriptionContent","children","dangerouslySetInnerHTML","React","createElement","FlexBox","className","classNames","style","orientation","vAlign","hAlign","undefined","gap","Text","_extends","typography"],"mappings":"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"}