@lumx/react 3.20.1-alpha.29 → 3.20.1-alpha.30

package/_internal/IconButton-8d61f5be.js

@@ -0,0 +1,77 @@
+import { B as ButtonRoot } from './ButtonRoot-a70baf82.js';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { u as useTheme, T as ThemeProvider } from './ThemeContext-3181f000.js';
+import { f as forwardRef } from './forwardRef-8bce732e.js';
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip } from './components/tooltip-dcb43bbe.js';
+import { Emphasis, Size, Theme } from '@lumx/core/js/constants';
+import { Icon } from './components/icon-ee15673b.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__*/jsx(Tooltip, {
+    label: hideTooltip ? '' : label,
+    ...tooltipProps,
+    children: /*#__PURE__*/jsx(ButtonRoot, {
+      ref: ref,
+      emphasis,
+      size,
+      theme,
+      ...forwardedProps,
+      "aria-label": label,
+      variant: "icon",
+      children: image ? /*#__PURE__*/jsx("img", {
+        // no need to set alt as an aria-label is already set on the button
+        alt: "",
+        src: image
+      }) : /*#__PURE__*/jsx(ThemeProvider, {
+        value: undefined,
+        children: /*#__PURE__*/jsx(Icon, {
+          icon: icon
+        })
+      })
+    })
+  });
+});
+IconButton.displayName = COMPONENT_NAME;
+IconButton.className = CLASSNAME;
+IconButton.defaultProps = DEFAULT_PROPS;
+
+export { IconButton as I };
+//# sourceMappingURL=IconButton-8d61f5be.js.map

package/_internal/IconButton-8d61f5be.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton-8d61f5be.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","_jsx","Tooltip","children","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;EAET,oBACIa,GAAA,CAACC,OAAO,EAAA;AAACN,IAAAA,KAAK,EAAEG,WAAW,GAAG,EAAE,GAAGH,KAAM;AAAA,IAAA,GAAKE,YAAY;IAAAK,QAAA,eACtDF,GAAA,CAACG,UAAU,EAAA;AAACf,MAAAA,GAAG,EAAEA,GAAI;MAAOT,QAAQ;MAAEG,IAAI;MAAEc,KAAK;AAAE,MAAA,GAAGG,cAAc;AAAI,MAAA,YAAA,EAAYJ,KAAM;AAACS,MAAAA,OAAO,EAAC,MAAM;MAAAF,QAAA,EACpGT,KAAK,gBACFO,GAAA,CAAA,KAAA,EAAA;AACI;AACAK,QAAAA,GAAG,EAAC,EAAE;AACNC,QAAAA,GAAG,EAAEb,KAAAA;AAAM,OACd,CAAC,gBAEFO,GAAA,CAACO,aAAa,EAAA;AAACC,QAAAA,KAAK,EAAEC,SAAU;QAAAP,QAAA,eAC5BF,GAAA,CAACU,IAAI,EAAA;AAAChB,UAAAA,IAAI,EAAEA,IAAAA;SAAiB,CAAA;OAClB,CAAA;KAEX,CAAA;AAAC,GACR,CAAC,CAAA;AAElB,CAAC,EAAC;AACFT,UAAU,CAAC0B,WAAW,GAAGpC,cAAc,CAAA;AACvCU,UAAU,CAAC2B,SAAS,GAAGpC,SAAS,CAAA;AAChCS,UAAU,CAAC4B,YAAY,GAAGnC,aAAa;;;;"}

package/_internal/ImageCaption-db44ec9e.js

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { u as useTheme } from './ThemeContext-3181f000.js';
+import { FlexBox } from './components/flex-box-15be92f6.js';
+import { T as Text } from './index-25c9e8c2.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__*/jsxs(FlexBox, {
+    as: as,
+    className: classNames(baseClassName && `${baseClassName}__wrapper`),
+    style: captionStyle,
+    orientation: "vertical",
+    vAlign: align,
+    hAlign: align === 'center' ? align : undefined,
+    gap: "regular",
+    children: [(title || description) && /*#__PURE__*/jsxs(Text, {
+      as: "p",
+      className: classNames(baseClassName && `${baseClassName}__caption`),
+      truncate: truncate,
+      ...baseColor,
+      children: [title && /*#__PURE__*/jsx(Text, {
+        ...titleProps,
+        as: "span",
+        className: classNames(titleProps?.className, baseClassName && `${baseClassName}__title`),
+        typography: "subtitle1",
+        ...titleColor,
+        children: title
+      }), ' ', description && /*#__PURE__*/jsx(Text, {
+        ...descriptionProps,
+        as: "span",
+        className: classNames(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
+        typography: "body1",
+        ...descriptionContent
+      })]
+    }), tags && /*#__PURE__*/jsx(FlexBox, {
+      className: classNames(baseClassName && `${baseClassName}__tags`),
+      orientation: "horizontal",
+      vAlign: align,
+      children: tags
+    })]
+  });
+};
+
+export { ImageCaption as I };
+//# sourceMappingURL=ImageCaption-db44ec9e.js.map

package/_internal/ImageCaption-db44ec9e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCaption-db44ec9e.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","_jsxs","FlexBox","className","classNames","style","orientation","vAlign","hAlign","undefined","gap","Text","_jsx","typography"],"mappings":"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"}