@ultraviolet/ui 3.9.0 → 3.10.0

package/dist/components/SelectableCard/IllustrationContainer.js

@@ -1,66 +1,62 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import * as ProductIcon from "@ultraviolet/icons/product";
-import { useTheme } from "@ultraviolet/themes";
-import { useState, useEffect } from "react";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack } from "../Stack/index.js";
-import { illustrationSelectableCard, divSelectableCard, imageSelectableCard } from "./styles.css.js";
-const IllustrationContainer = ({
-  children: subChildren,
-  productIcon,
-  illustration
-}) => {
-  const theme = useTheme();
-  const [svgContent, setSvgContent] = useState(null);
-  const ProductIconUsed = productIcon ? (
-    // biome-ignore lint/performance/noDynamicNamespaceImportAccess: to fix
-    ProductIcon[`${productIcon.charAt(0).toUpperCase() + productIcon.slice(1)}ProductIcon`]
-  ) : null;
-  useEffect(() => {
-    if (illustration?.endsWith(".svg")) {
-      fetch(illustration).then(async (response) => response.text()).then((svg) => {
-        const updatedSvg = svg.replace(
-          /fill="[^"]*"/g,
-          `fill="${theme.colors.neutral.backgroundStronger}"`
-        ).replace(/width="[^"]*"/g, `width="220px"`).replace(/height="[^"]*"/g, `height="220px"`);
-        setSvgContent(updatedSvg);
-      }).catch(() => null);
-    }
-  });
-  if (ProductIconUsed || illustration) {
-    return /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        alignItems: "stretch",
-        direction: "row",
-        flex: 1,
-        justifyContent: "space-between",
-        width: "100%",
-        children: [
-          /* @__PURE__ */ jsx(Stack, { className: illustrationSelectableCard, children: subChildren }),
-          /* @__PURE__ */ jsx(Stack, { justifyContent: "center", children: ProductIconUsed ? /* @__PURE__ */ jsx(ProductIconUsed, { size: "large" }) : null }),
-          illustration ? /* @__PURE__ */ jsx("div", { className: divSelectableCard, children: illustration.endsWith(".svg") && svgContent ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: imageSelectableCard,
-              dangerouslySetInnerHTML: { __html: svgContent }
-            }
-          ) : /* @__PURE__ */ jsx(
-            "img",
-            {
-              alt: "illustration",
-              className: imageSelectableCard,
-              height: 220,
-              src: illustration,
-              width: 220
-            }
-          ) }) : null
-        ]
-      }
-    );
-  }
-  return subChildren;
-};
-export {
-  IllustrationContainer
+import { divSelectableCard, illustrationSelectableCard, imageSelectableCard } from "./styles.css.js";
+import { _asyncToGenerator } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/asyncToGenerator.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@ultraviolet/themes";
+import * as ProductIcon from "@ultraviolet/icons/product";
+
+//#region src/components/SelectableCard/IllustrationContainer.tsx
+const IllustrationContainer = ({ children: subChildren, productIcon, illustration }) => {
+	const theme = useTheme();
+	const [svgContent, setSvgContent] = useState(null);
+	const ProductIconUsed = productIcon ? ProductIcon[`${productIcon.charAt(0).toUpperCase() + productIcon.slice(1)}ProductIcon`] : null;
+	useEffect(() => {
+		if (illustration === null || illustration === void 0 ? void 0 : illustration.endsWith(".svg")) fetch(illustration).then(function() {
+			var _ref = _asyncToGenerator(function* (response) {
+				return response.text();
+			});
+			return function(_x) {
+				return _ref.apply(this, arguments);
+			};
+		}()).then((svg) => {
+			setSvgContent(svg.replace(/fill="[^"]*"/g, `fill="${theme.colors.neutral.backgroundStronger}"`).replace(/width="[^"]*"/g, `width="220px"`).replace(/height="[^"]*"/g, `height="220px"`));
+		}).catch(() => null);
+	});
+	if (ProductIconUsed || illustration) return /* @__PURE__ */ jsxs(Stack, {
+		alignItems: "stretch",
+		direction: "row",
+		flex: 1,
+		justifyContent: "space-between",
+		width: "100%",
+		children: [
+			/* @__PURE__ */ jsx(Stack, {
+				className: illustrationSelectableCard,
+				children: subChildren
+			}),
+			/* @__PURE__ */ jsx(Stack, {
+				justifyContent: "center",
+				children: ProductIconUsed ? /* @__PURE__ */ jsx(ProductIconUsed, { size: "large" }) : null
+			}),
+			illustration ? /* @__PURE__ */ jsx("div", {
+				className: divSelectableCard,
+				children: illustration.endsWith(".svg") && svgContent ? /* @__PURE__ */ jsx("div", {
+					className: imageSelectableCard,
+					dangerouslySetInnerHTML: { __html: svgContent }
+				}) : /* @__PURE__ */ jsx("img", {
+					alt: "illustration",
+					className: imageSelectableCard,
+					height: 220,
+					src: illustration,
+					width: 220
+				})
+			}) : null
+		]
+	});
+	return subChildren;
 };
+
+//#endregion
+export { IllustrationContainer };

package/dist/components/SelectableCard/MultiStateInput.d.ts

@@ -1,3 +1,3 @@
 import type { MultiStateProps } from './types';
-export declare const MultiStateInput: ({ checked, disabled, id, label, "aria-label": ariaLabel, innerRef, isError, name, onBlur, onChange, onFocus, type, value, }: MultiStateProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MultiStateInput: ({ checked, disabled, id, label, 'aria-label': ariaLabel, innerRef, isError, name, onBlur, onChange, onFocus, type, value, }: MultiStateProps) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=MultiStateInput.d.ts.map

package/dist/components/SelectableCard/MultiStateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStateInput.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/MultiStateInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,eAAO,MAAM,eAAe,GAAI,6HAc7B,eAAe,mDA4EjB,CAAA"}
+{"version":3,"file":"MultiStateInput.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/MultiStateInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,eAAO,MAAM,eAAe,kMA0F3B,CAAA"}

package/dist/components/SelectableCard/MultiStateInput.js

@@ -1,94 +1,73 @@
-import { jsx } from "react/jsx-runtime";
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
 import { Checkbox } from "../Checkbox/index.js";
 import { Radio } from "../Radio/index.js";
-import { Toggle } from "../Toggle/index.js";
 import { selectableElementSelectableCard } from "./styles.css.js";
-const MultiStateInput = ({
-  checked,
-  disabled,
-  id,
-  label,
-  "aria-label": ariaLabel,
-  innerRef,
-  isError,
-  name,
-  onBlur,
-  onChange,
-  onFocus,
-  type,
-  value
-}) => {
-  if (!type) {
-    return null;
-  }
-  if (type === "checkbox") {
-    const labelProps = label ? { "aria-label": void 0, children: label } : { "aria-label": ariaLabel };
-    return /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked,
-        className: selectableElementSelectableCard,
-        "data-error": isError,
-        disabled,
-        error: isError,
-        id,
-        name,
-        onBlur,
-        onChange,
-        onFocus,
-        ref: innerRef,
-        tabIndex: -1,
-        value,
-        ...labelProps
-      }
-    );
-  }
-  if (type === "radio") {
-    const labelProps = label ? { label } : { "aria-label": ariaLabel };
-    return /* @__PURE__ */ jsx(
-      Radio,
-      {
-        checked,
-        className: selectableElementSelectableCard,
-        "data-error": isError,
-        disabled,
-        error: isError,
-        id,
-        name,
-        onBlur,
-        onChange,
-        onFocus,
-        ref: innerRef,
-        tabIndex: -1,
-        value,
-        ...labelProps
-      }
-    );
-  }
-  if (type === "toggle") {
-    const labelProps = label ? { label } : { "aria-label": ariaLabel };
-    return /* @__PURE__ */ jsx(
-      Toggle,
-      {
-        checked,
-        className: selectableElementSelectableCard,
-        "data-error": isError,
-        disabled,
-        error: isError,
-        id,
-        name,
-        onBlur,
-        onChange,
-        onFocus,
-        ref: innerRef,
-        tabIndex: -1,
-        value,
-        ...labelProps
-      }
-    );
-  }
-  return null;
-};
-export {
-  MultiStateInput
+import { Toggle } from "../Toggle/index.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SelectableCard/MultiStateInput.tsx
+const MultiStateInput = ({ checked, disabled, id, label, "aria-label": ariaLabel, innerRef, isError, name, onBlur, onChange, onFocus, type, value }) => {
+	if (!type) return null;
+	if (type === "checkbox") {
+		const labelProps = label ? {
+			"aria-label": void 0,
+			children: label
+		} : { "aria-label": ariaLabel };
+		return /* @__PURE__ */ jsx(Checkbox, _objectSpread2({
+			checked,
+			className: selectableElementSelectableCard,
+			"data-error": isError,
+			disabled,
+			error: isError,
+			id,
+			name,
+			onBlur,
+			onChange,
+			onFocus,
+			ref: innerRef,
+			tabIndex: -1,
+			value
+		}, labelProps));
+	}
+	if (type === "radio") {
+		const labelProps = label ? { label } : { "aria-label": ariaLabel };
+		return /* @__PURE__ */ jsx(Radio, _objectSpread2({
+			checked,
+			className: selectableElementSelectableCard,
+			"data-error": isError,
+			disabled,
+			error: isError,
+			id,
+			name,
+			onBlur,
+			onChange,
+			onFocus,
+			ref: innerRef,
+			tabIndex: -1,
+			value
+		}, labelProps));
+	}
+	if (type === "toggle") {
+		const labelProps = label ? { label } : { "aria-label": ariaLabel };
+		return /* @__PURE__ */ jsx(Toggle, _objectSpread2({
+			checked,
+			className: selectableElementSelectableCard,
+			"data-error": isError,
+			disabled,
+			error: isError,
+			id,
+			name,
+			onBlur,
+			onChange,
+			onFocus,
+			ref: innerRef,
+			tabIndex: -1,
+			value
+		}, labelProps));
+	}
+	return null;
 };
+
+//#endregion
+export { MultiStateInput };

package/dist/components/SelectableCard/SelectableCard.js

@@ -1,165 +1,117 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef, useRef, useMemo, useCallback } from "react";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
 import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";
+import { containerSelectableCard, indentedCard, labelContainerSelectableCardLabel, labelContainerSelectableCardNoLabel, stackSelectableCard } from "./styles.css.js";
 import { IllustrationContainer } from "./IllustrationContainer.js";
 import { MultiStateInput } from "./MultiStateInput.js";
-import { stackSelectableCard, indentedCard, containerSelectableCard, labelContainerSelectableCardLabel, labelContainerSelectableCardNoLabel } from "./styles.css.js";
-import { widthSelectable, labelDisplay, inputDisplay } from "./variables.css.js";
-const SelectableCard = forwardRef(
-  ({
-    name,
-    value,
-    onChange,
-    showTick = false,
-    type = "radio",
-    checked = false,
-    disabled = false,
-    children,
-    className,
-    isError,
-    onFocus,
-    onBlur,
-    tooltip,
-    id,
-    label,
-    "data-testid": dataTestId,
-    productIcon,
-    illustration,
-    "aria-label": ariaLabel,
-    style,
-    indented = true
-  }, ref) => {
-    const innerRef = useRef(null);
-    const childrenRef = useRef(null);
-    const image = useMemo(() => {
-      if (illustration) {
-        return "illustration";
-      }
-      if (productIcon) {
-        return "icon";
-      }
-      return "none";
-    }, [illustration, productIcon]);
-    const ParentContainer = useCallback(
-      ({ children: subChildren }) => {
-        if (tooltip) {
-          return /* @__PURE__ */ jsx(Stack, { flex: 1, children: /* @__PURE__ */ jsx(Tooltip, { containerFullHeight: true, text: tooltip, children: subChildren }) });
-        }
-        return /* @__PURE__ */ jsx(Tooltip, { children: subChildren });
-      },
-      [tooltip]
-    );
-    const onKeyDown = useCallback(
-      (event) => {
-        if (event.key === " " && innerRef?.current) {
-          event.preventDefault();
-          innerRef.current.click();
-        }
-      },
-      [innerRef]
-    );
-    const isComplexChildren = ["function", "array", "object"].includes(
-      typeof children
-    );
-    const onClickContainer = useCallback(
-      (event) => {
-        if (innerRef.current && !disabled) {
-          const inputElement = innerRef.current;
-          const labelElement = document.querySelector(
-            `label[for="${inputElement.id}"]`
-          );
-          const targetNode = event.target;
-          if (!(inputElement.contains(targetNode) || labelElement?.contains(targetNode))) {
-            inputElement.click();
-          }
-        }
-      },
-      [disabled]
-    );
-    return /* @__PURE__ */ jsx(ParentContainer, { children: /* @__PURE__ */ jsx(
-      Stack,
-      {
-        alignItems: "flex-start",
-        className: cn(
-          className,
-          containerSelectableCard({
-            cursor: (type === "checkbox" || type === "toggle") && isComplexChildren ? "default" : "custom",
-            image
-          }),
-          label ? labelContainerSelectableCardLabel : labelContainerSelectableCardNoLabel
-        ),
-        "data-checked": checked,
-        "data-disabled": disabled,
-        "data-error": isError,
-        "data-testid": dataTestId,
-        "data-type": type,
-        direction: label ? "column" : "row",
-        flex: 1,
-        gap: 0.5,
-        onClick: (type === "checkbox" || type === "toggle") && isComplexChildren ? void 0 : onClickContainer,
-        onKeyDown,
-        ref,
-        role: "button",
-        style: {
-          ...assignInlineVars({
-            [inputDisplay]: showTick ? "inline" : "none",
-            [labelDisplay]: showTick || label ? "inline" : "none",
-            [widthSelectable]: label ? "100%" : "auto"
-          }),
-          ...style
-        },
-        tabIndex: disabled ? void 0 : 0,
-        children: /* @__PURE__ */ jsxs(
-          IllustrationContainer,
-          {
-            illustration,
-            productIcon,
-            children: [
-              /* @__PURE__ */ jsx(
-                MultiStateInput,
-                {
-                  "aria-label": ariaLabel,
-                  checked,
-                  "data-error": isError,
-                  disabled,
-                  id,
-                  innerRef,
-                  isError,
-                  label,
-                  name,
-                  onBlur,
-                  onChange,
-                  onFocus,
-                  type,
-                  value
-                }
-              ),
-              children ? /* @__PURE__ */ jsx(
-                Stack,
-                {
-                  className: cn(
-                    stackSelectableCard,
-                    !!label && showTick && indented ? indentedCard : void 0
-                  ),
-                  "data-has-default-cursor": (type === "checkbox" || type === "toggle") && isComplexChildren,
-                  "data-has-label": !!label && showTick,
-                  onKeyDown: (event) => event.stopPropagation(),
-                  ref: childrenRef,
-                  width: "100%",
-                  children: typeof children === "function" ? children({ checked, disabled }) : children
-                }
-              ) : null
-            ]
-          }
-        )
-      }
-    ) });
-  }
-);
-export {
-  SelectableCard
-};
+import { inputDisplay, labelDisplay, widthSelectable } from "./variables.css.js";
+import { cn } from "@ultraviolet/utils";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/SelectableCard/SelectableCard.tsx
+/**
+* SelectableCard is a component that can be used to create a radio or checkbox card.
+* It can be used to create a list of selectable items or a single selectable item.
+*/
+const SelectableCard = forwardRef(({ name, value, onChange, showTick = false, type = "radio", checked = false, disabled = false, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, productIcon, illustration, "aria-label": ariaLabel, style, indented = true }, ref) => {
+	const innerRef = useRef(null);
+	const childrenRef = useRef(null);
+	const image = useMemo(() => {
+		if (illustration) return "illustration";
+		if (productIcon) return "icon";
+		return "none";
+	}, [illustration, productIcon]);
+	const ParentContainer = useCallback(({ children: subChildren }) => {
+		if (tooltip) return /* @__PURE__ */ jsx(Stack, {
+			flex: 1,
+			children: /* @__PURE__ */ jsx(Tooltip, {
+				containerFullHeight: true,
+				text: tooltip,
+				children: subChildren
+			})
+		});
+		return /* @__PURE__ */ jsx(Tooltip, { children: subChildren });
+	}, [tooltip]);
+	const onKeyDown = useCallback((event) => {
+		if (event.key === " " && (innerRef === null || innerRef === void 0 ? void 0 : innerRef.current)) {
+			event.preventDefault();
+			innerRef.current.click();
+		}
+	}, [innerRef]);
+	const isComplexChildren = [
+		"function",
+		"array",
+		"object"
+	].includes(typeof children);
+	const onClickContainer = useCallback((event) => {
+		if (innerRef.current && !disabled) {
+			const inputElement = innerRef.current;
+			const labelElement = document.querySelector(`label[for="${inputElement.id}"]`);
+			const targetNode = event.target;
+			if (!(inputElement.contains(targetNode) || (labelElement === null || labelElement === void 0 ? void 0 : labelElement.contains(targetNode)))) inputElement.click();
+		}
+	}, [disabled]);
+	return /* @__PURE__ */ jsx(ParentContainer, { children: /* @__PURE__ */ jsx(Stack, {
+		alignItems: "flex-start",
+		className: cn(className, containerSelectableCard({
+			cursor: (type === "checkbox" || type === "toggle") && isComplexChildren ? "default" : "custom",
+			image
+		}), label ? labelContainerSelectableCardLabel : labelContainerSelectableCardNoLabel),
+		"data-checked": checked,
+		"data-disabled": disabled,
+		"data-error": isError,
+		"data-testid": dataTestId,
+		"data-type": type,
+		direction: label ? "column" : "row",
+		flex: 1,
+		gap: .5,
+		onClick: (type === "checkbox" || type === "toggle") && isComplexChildren ? void 0 : onClickContainer,
+		onKeyDown,
+		ref,
+		role: "button",
+		style: _objectSpread2(_objectSpread2({}, assignInlineVars({
+			[inputDisplay]: showTick ? "inline" : "none",
+			[labelDisplay]: showTick || label ? "inline" : "none",
+			[widthSelectable]: label ? "100%" : "auto"
+		})), style),
+		tabIndex: disabled ? void 0 : 0,
+		children: /* @__PURE__ */ jsxs(IllustrationContainer, {
+			illustration,
+			productIcon,
+			children: [/* @__PURE__ */ jsx(MultiStateInput, {
+				"aria-label": ariaLabel,
+				checked,
+				"data-error": isError,
+				disabled,
+				id,
+				innerRef,
+				isError,
+				label,
+				name,
+				onBlur,
+				onChange,
+				onFocus,
+				type,
+				value
+			}), children ? /* @__PURE__ */ jsx(Stack, {
+				className: cn(stackSelectableCard, !!label && showTick && indented ? indentedCard : void 0),
+				"data-has-default-cursor": (type === "checkbox" || type === "toggle") && isComplexChildren,
+				"data-has-label": !!label && showTick,
+				onKeyDown: (event) => event.stopPropagation(),
+				ref: childrenRef,
+				width: "100%",
+				children: typeof children === "function" ? children({
+					checked,
+					disabled
+				}) : children
+			}) : null]
+		})
+	}) });
+});
+
+//#endregion
+export { SelectableCard };

package/dist/components/SelectableCard/styles.css.js

@@ -1,6 +1,26 @@
-/* empty css                          */
+/* empty css                      */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var containerSelectableCard = createRuntimeFn({ defaultClassName: "uv_475tnd0", variantClassNames: { cursor: { custom: "uv_475tnd1", "default": "uv_475tnd2" }, image: { icon: "uv_475tnd3", illustration: "uv_475tnd4", none: "uv_475tnd5" } }, defaultVariants: { cursor: "custom", image: "none" }, compoundVariants: [] });
+
+//#region src/components/SelectableCard/styles.css.ts
+var containerSelectableCard = createRuntimeFn({
+	defaultClassName: "uv_475tnd0",
+	variantClassNames: {
+		cursor: {
+			custom: "uv_475tnd1",
+			"default": "uv_475tnd2"
+		},
+		image: {
+			icon: "uv_475tnd3",
+			illustration: "uv_475tnd4",
+			none: "uv_475tnd5"
+		}
+	},
+	defaultVariants: {
+		cursor: "custom",
+		image: "none"
+	},
+	compoundVariants: []
+});
 var labelContainerSelectableCardLabel = "uv_475tnd6";
 var labelContainerSelectableCardNoLabel = "uv_475tnd7";
 var divSelectableCard = "uv_475tnd8";
@@ -9,14 +29,6 @@ var illustrationSelectableCard = "uv_475tnda";
 var stackSelectableCard = "uv_475tndb";
 var indentedCard = "uv_475tndc";
 var selectableElementSelectableCard = "uv_475tndd";
-export {
-  containerSelectableCard,
-  divSelectableCard,
-  illustrationSelectableCard,
-  imageSelectableCard,
-  indentedCard,
-  labelContainerSelectableCardLabel,
-  labelContainerSelectableCardNoLabel,
-  selectableElementSelectableCard,
-  stackSelectableCard
-};
+
+//#endregion
+export { containerSelectableCard, divSelectableCard, illustrationSelectableCard, imageSelectableCard, indentedCard, labelContainerSelectableCardLabel, labelContainerSelectableCardNoLabel, selectableElementSelectableCard, stackSelectableCard };

package/dist/components/SelectableCard/types.d.ts

@@ -3,7 +3,7 @@ import type { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactNode, R
 import type { LabelProp, PascalToCamelCaseWithoutSuffix } from '../../types';
 export type SelectableCardProps = {
     name?: string;
-    children?: (({ disabled, checked, }: Pick<SelectableCardProps, 'checked' | 'disabled'>) => ReactNode) | ReactNode;
+    children?: (({ disabled, checked }: Pick<SelectableCardProps, 'checked' | 'disabled'>) => ReactNode) | ReactNode;
     value: string | number;
     onChange: ChangeEventHandler<HTMLInputElement>;
     showTick?: boolean;