@ultraviolet/plus 3.4.5 → 3.5.0

package/dist/components/ContentCard/index.js

@@ -1,143 +1,110 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { activeClass, cardClass, fullHeight, iconContainer, iconStack, imageClass, subContainer, subContainerHeightVar } from "./styles.css.js";
+import { Skeleton as Skeleton$1 } from "./Skeleton.js";
 import { Stack, Text } from "@ultraviolet/ui";
 import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef, useRef, useState, useMemo, useEffect } from "react";
-import { Skeleton } from "./Skeleton.js";
-import { fullHeight, imageClass, subContainerHeightVar, subContainer, iconStack, iconContainer, cardClass, activeClass } from "./styles.css.js";
-const ContentCard = forwardRef(
-  ({
-    image,
-    direction = "column",
-    icon,
-    subtitle,
-    title,
-    headingTag = "h3",
-    description,
-    children,
-    href,
-    target = "_blank",
-    onClick,
-    disabled,
-    loading,
-    className,
-    style
-  }, ref) => {
-    const subContainerRef = useRef(null);
-    const [subContainerHeight, setSubContainerHeight] = useState(
-      subContainerRef?.current?.offsetHeight
-    );
-    const Container = useMemo(() => {
-      if (href) {
-        return "a";
-      }
-      if (onClick) {
-        return "button";
-      }
-      return "div";
-    }, [href, onClick]);
-    useEffect(
-      () => setSubContainerHeight(subContainerRef?.current?.offsetHeight),
-      [subContainerRef]
-    );
-    return /* @__PURE__ */ jsx(
-      Container,
-      {
-        className: cn(className, cardClass, onClick || href ? activeClass : ""),
-        disabled,
-        href: disabled ? void 0 : href,
-        onClick: disabled ? void 0 : onClick,
-        ref,
-        role: onClick && !href ? "button" : void 0,
-        style,
-        target,
-        children: loading ? /* @__PURE__ */ jsx(Skeleton, { direction }) : /* @__PURE__ */ jsxs(Stack, { className: fullHeight, direction, children: [
-          image ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              alt: "",
-              className: imageClass[direction],
-              "data-disabled": disabled,
-              height: direction === "column" ? 120 : void 0,
-              src: image,
-              style: assignInlineVars({
-                [subContainerHeightVar]: subContainerHeight ? `${subContainerHeight.toString()}px` : void 0
-              }),
-              width: direction === "row" ? 220 : void 0
-            }
-          ) : null,
-          /* @__PURE__ */ jsxs(Stack, { direction, flex: 1, gap: 2, children: [
-            /* @__PURE__ */ jsxs(
-              Stack,
-              {
-                alignItems: subtitle || description || children ? void 0 : "center",
-                className: subContainer[href ? direction : "noHref"],
-                direction,
-                flex: "1 1 auto",
-                gap: 2,
-                ref: subContainerRef,
-                children: [
-                  icon ?? null,
-                  /* @__PURE__ */ jsxs(Stack, { flex: "1 1 auto", gap: 2, justifyContent: "space-between", children: [
-                    /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
-                      /* @__PURE__ */ jsxs(Stack, { children: [
-                        subtitle ? /* @__PURE__ */ jsx(
-                          Text,
-                          {
-                            as: "small",
-                            disabled,
-                            prominence: "weak",
-                            sentiment: "neutral",
-                            variant: "caption",
-                            children: subtitle
-                          }
-                        ) : null,
-                        /* @__PURE__ */ jsx(
-                          Text,
-                          {
-                            as: headingTag,
-                            disabled,
-                            sentiment: "neutral",
-                            variant: "bodyStrong",
-                            children: title
-                          }
-                        )
-                      ] }),
-                      description ? /* @__PURE__ */ jsx(
-                        Text,
-                        {
-                          as: "p",
-                          disabled,
-                          sentiment: "neutral",
-                          variant: "bodySmall",
-                          children: description
-                        }
-                      ) : null
-                    ] }),
-                    children ? /* @__PURE__ */ jsx(Stack, { children }) : null
-                  ] })
-                ]
-              }
-            ),
-            href ? /* @__PURE__ */ jsx(
-              Stack,
-              {
-                alignItems: direction === "column" ? "flex-end" : "center",
-                className: iconStack[direction],
-                direction,
-                flex: 1,
-                justifyContent: direction === "column" ? "center" : "flex-end",
-                children: /* @__PURE__ */ jsx("div", { className: iconContainer, children: /* @__PURE__ */ jsx(OpenInNewIcon, { disabled, sentiment: "neutral" }) })
-              }
-            ) : null
-          ] })
-        ] })
-      }
-    );
-  }
-);
-export {
-  ContentCard
-};
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
+
+//#region src/components/ContentCard/index.tsx
+/**
+* ContentCard is a component that displays a title, subtitle, description, image and icon in a card.
+* It can take different directions to display the image and the content. You can also add more content
+* by passing children.
+*/
+const ContentCard = forwardRef(({ image, direction = "column", icon, subtitle, title, headingTag = "h3", description, children, href, target = "_blank", onClick, disabled, loading, className, style }, ref) => {
+	var _subContainerRef$curr;
+	const subContainerRef = useRef(null);
+	const [subContainerHeight, setSubContainerHeight] = useState(subContainerRef === null || subContainerRef === void 0 || (_subContainerRef$curr = subContainerRef.current) === null || _subContainerRef$curr === void 0 ? void 0 : _subContainerRef$curr.offsetHeight);
+	const Container = useMemo(() => {
+		if (href) return "a";
+		if (onClick) return "button";
+		return "div";
+	}, [href, onClick]);
+	useEffect(() => {
+		var _subContainerRef$curr2;
+		return setSubContainerHeight(subContainerRef === null || subContainerRef === void 0 || (_subContainerRef$curr2 = subContainerRef.current) === null || _subContainerRef$curr2 === void 0 ? void 0 : _subContainerRef$curr2.offsetHeight);
+	}, [subContainerRef]);
+	return /* @__PURE__ */ jsx(Container, {
+		className: cn(className, cardClass, onClick || href ? activeClass : ""),
+		disabled,
+		href: disabled ? void 0 : href,
+		onClick: disabled ? void 0 : onClick,
+		ref,
+		role: onClick && !href ? "button" : void 0,
+		style,
+		target,
+		children: loading ? /* @__PURE__ */ jsx(Skeleton$1, { direction }) : /* @__PURE__ */ jsxs(Stack, {
+			className: fullHeight,
+			direction,
+			children: [image ? /* @__PURE__ */ jsx("img", {
+				alt: "",
+				className: imageClass[direction],
+				"data-disabled": disabled,
+				height: direction === "column" ? 120 : void 0,
+				src: image,
+				style: assignInlineVars({ [subContainerHeightVar]: subContainerHeight ? `${subContainerHeight.toString()}px` : void 0 }),
+				width: direction === "row" ? 220 : void 0
+			}) : null, /* @__PURE__ */ jsxs(Stack, {
+				direction,
+				flex: 1,
+				gap: 2,
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					alignItems: subtitle || description || children ? void 0 : "center",
+					className: subContainer[href ? direction : "noHref"],
+					direction,
+					flex: "1 1 auto",
+					gap: 2,
+					ref: subContainerRef,
+					children: [icon !== null && icon !== void 0 ? icon : null, /* @__PURE__ */ jsxs(Stack, {
+						flex: "1 1 auto",
+						gap: 2,
+						justifyContent: "space-between",
+						children: [/* @__PURE__ */ jsxs(Stack, {
+							gap: .5,
+							children: [/* @__PURE__ */ jsxs(Stack, { children: [subtitle ? /* @__PURE__ */ jsx(Text, {
+								as: "small",
+								disabled,
+								prominence: "weak",
+								sentiment: "neutral",
+								variant: "caption",
+								children: subtitle
+							}) : null, /* @__PURE__ */ jsx(Text, {
+								as: headingTag,
+								disabled,
+								sentiment: "neutral",
+								variant: "bodyStrong",
+								children: title
+							})] }), description ? /* @__PURE__ */ jsx(Text, {
+								as: "p",
+								disabled,
+								sentiment: "neutral",
+								variant: "bodySmall",
+								children: description
+							}) : null]
+						}), children ? /* @__PURE__ */ jsx(Stack, { children }) : null]
+					})]
+				}), href ? /* @__PURE__ */ jsx(Stack, {
+					alignItems: direction === "column" ? "flex-end" : "center",
+					className: iconStack[direction],
+					direction,
+					flex: 1,
+					justifyContent: direction === "column" ? "center" : "flex-end",
+					children: /* @__PURE__ */ jsx("div", {
+						className: iconContainer,
+						children: /* @__PURE__ */ jsx(OpenInNewIcon, {
+							disabled,
+							sentiment: "neutral"
+						})
+					})
+				}) : null]
+			})]
+		})
+	});
+});
+
+//#endregion
+export { ContentCard };

package/dist/components/ContentCard/styles.css.d.ts

@@ -5,7 +5,7 @@ export declare const activeClass: string;
 export declare const cardClass: string;
 export declare const iconContainer: string;
 export declare const iconStack: Record<"column" | "row", string>;
-export declare const subContainer: Record<"column" | "row" | "noHref", string>;
+export declare const subContainer: Record<"column" | "noHref" | "row", string>;
 export declare const imageClass: Record<"column" | "row", string>;
 export declare const fullHeight: string;
 export declare const skeletonImage: Record<"column" | "row", string>;

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

@@ -1,27 +1,32 @@
-/* empty css                          */
+/* empty css                                              */
+/* empty css                      */
+
+//#region src/components/ContentCard/styles.css.ts
 var subContainerHeightVar = "var(--uv_plus_u4r1ts0)";
 var skeletonHeightVar = "var(--uv_plus_u4r1ts1)";
 var skeletonWidthVar = "var(--uv_plus_u4r1ts2)";
 var activeClass = "uv_plus_u4r1ts3";
 var cardClass = "uv_plus_u4r1ts4";
 var iconContainer = "uv_plus_u4r1ts5";
-var iconStack = { column: "uv_plus_u4r1ts6", row: "uv_plus_u4r1ts7" };
-var subContainer = { column: "uv_plus_u4r1ts9 uv_plus_u4r1ts8", noHref: "uv_plus_u4r1tsa uv_plus_u4r1ts8", row: "uv_plus_u4r1tsb uv_plus_u4r1ts8" };
-var imageClass = { column: "uv_plus_u4r1tsd uv_plus_u4r1tsc", row: "uv_plus_u4r1tse uv_plus_u4r1tsc" };
+var iconStack = {
+	column: "uv_plus_u4r1ts6",
+	row: "uv_plus_u4r1ts7"
+};
+var subContainer = {
+	column: "uv_plus_u4r1ts9 uv_plus_u4r1ts8",
+	noHref: "uv_plus_u4r1tsa uv_plus_u4r1ts8",
+	row: "uv_plus_u4r1tsb uv_plus_u4r1ts8"
+};
+var imageClass = {
+	column: "uv_plus_u4r1tsd uv_plus_u4r1tsc",
+	row: "uv_plus_u4r1tse uv_plus_u4r1tsc"
+};
 var fullHeight = "uv_plus_u4r1tsf";
-var skeletonImage = { column: "uv_plus_u4r1tsh uv_plus_u4r1tsg", row: "uv_plus_u4r1tsi uv_plus_u4r1tsg" };
-var paddedStack = "uv_plus_u4r1tsj";
-export {
-  activeClass,
-  cardClass,
-  fullHeight,
-  iconContainer,
-  iconStack,
-  imageClass,
-  paddedStack,
-  skeletonHeightVar,
-  skeletonImage,
-  skeletonWidthVar,
-  subContainer,
-  subContainerHeightVar
+var skeletonImage = {
+	column: "uv_plus_u4r1tsh uv_plus_u4r1tsg",
+	row: "uv_plus_u4r1tsi uv_plus_u4r1tsg"
 };
+var paddedStack = "uv_plus_u4r1tsj";
+
+//#endregion
+export { activeClass, cardClass, fullHeight, iconContainer, iconStack, imageClass, paddedStack, skeletonHeightVar, skeletonImage, skeletonWidthVar, subContainer, subContainerHeightVar };

package/dist/components/ContentCardGroup/Card.js

@@ -1,71 +1,57 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { customStack, fullHeightStack, iconWrapper, styledWrapper } from "./styles.css.js";
 import { Stack, Text } from "@ultraviolet/ui";
 import { forwardRef } from "react";
-import { styledWrapper, fullHeightStack, customStack, iconWrapper } from "./styles.css.js";
-const Card = forwardRef(
-  ({
-    title,
-    titleAs,
-    subtitle,
-    subtitleAs,
-    description,
-    children,
-    href,
-    target = "_blank",
-    style
-  }, ref) => /* @__PURE__ */ jsx(
-    "a",
-    {
-      className: styledWrapper,
-      href,
-      ref,
-      style,
-      target,
-      children: /* @__PURE__ */ jsxs(
-        Stack,
-        {
-          alignItems: "center",
-          className: fullHeightStack,
-          direction: "row",
-          gap: 2,
-          justifyContent: "space-between",
-          children: [
-            /* @__PURE__ */ jsxs(Stack, { className: customStack, gap: "0.5", children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                subtitle ? /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    as: subtitleAs ?? "h5",
-                    oneLine: true,
-                    prominence: "weak",
-                    sentiment: "neutral",
-                    variant: "caption",
-                    children: subtitle
-                  }
-                ) : null,
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    as: titleAs ?? "h3",
-                    oneLine: true,
-                    sentiment: "neutral",
-                    variant: "bodyStrong",
-                    children: title
-                  }
-                )
-              ] }),
-              description ? /* @__PURE__ */ jsx(Text, { as: "p", oneLine: true, sentiment: "neutral", variant: "bodySmall", children: description }) : null,
-              children
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: iconWrapper, children: /* @__PURE__ */ jsx(OpenInNewIcon, { sentiment: "neutral" }) })
-          ]
-        }
-      )
-    }
-  )
-);
-export {
-  Card
-};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
+
+//#region src/components/ContentCardGroup/Card.tsx
+const Card$1 = forwardRef(({ title, titleAs, subtitle, subtitleAs, description, children, href, target = "_blank", style }, ref) => /* @__PURE__ */ jsx("a", {
+	className: styledWrapper,
+	href,
+	ref,
+	style,
+	target,
+	children: /* @__PURE__ */ jsxs(Stack, {
+		alignItems: "center",
+		className: fullHeightStack,
+		direction: "row",
+		gap: 2,
+		justifyContent: "space-between",
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			className: customStack,
+			gap: "0.5",
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [subtitle ? /* @__PURE__ */ jsx(Text, {
+					as: subtitleAs !== null && subtitleAs !== void 0 ? subtitleAs : "h5",
+					oneLine: true,
+					prominence: "weak",
+					sentiment: "neutral",
+					variant: "caption",
+					children: subtitle
+				}) : null, /* @__PURE__ */ jsx(Text, {
+					as: titleAs !== null && titleAs !== void 0 ? titleAs : "h3",
+					oneLine: true,
+					sentiment: "neutral",
+					variant: "bodyStrong",
+					children: title
+				})] }),
+				description ? /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					oneLine: true,
+					sentiment: "neutral",
+					variant: "bodySmall",
+					children: description
+				}) : null,
+				children
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: iconWrapper,
+			children: /* @__PURE__ */ jsx(OpenInNewIcon, { sentiment: "neutral" })
+		})]
+	})
+}));
+
+//#endregion
+export { Card$1 as Card };

package/dist/components/ContentCardGroup/SkeletonCard.js

@@ -1,15 +1,29 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Stack, Skeleton } from "@ultraviolet/ui";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { skeletonWrapper, squareSkeleton } from "./styles.css.js";
-const SkeletonCard = () => /* @__PURE__ */ jsx("div", { className: skeletonWrapper, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
-  /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
-    /* @__PURE__ */ jsx(Skeleton, { variant: "line" }),
-    /* @__PURE__ */ jsx(Skeleton, { variant: "line" }),
-    /* @__PURE__ */ jsx(Skeleton, { variant: "line" })
-  ] }),
-  /* @__PURE__ */ jsx(Skeleton, { className: squareSkeleton, variant: "square" })
-] }) });
-export {
-  SkeletonCard
-};
+import { Skeleton, Stack } from "@ultraviolet/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ContentCardGroup/SkeletonCard.tsx
+const SkeletonCard = () => /* @__PURE__ */ jsx("div", {
+	className: skeletonWrapper,
+	children: /* @__PURE__ */ jsxs(Stack, {
+		alignItems: "center",
+		direction: "row",
+		justifyContent: "space-between",
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			gap: 2,
+			children: [
+				/* @__PURE__ */ jsx(Skeleton, { variant: "line" }),
+				/* @__PURE__ */ jsx(Skeleton, { variant: "line" }),
+				/* @__PURE__ */ jsx(Skeleton, { variant: "line" })
+			]
+		}), /* @__PURE__ */ jsx(Skeleton, {
+			className: squareSkeleton,
+			variant: "square"
+		})]
+	})
+});
+
+//#endregion
+export { SkeletonCard };

package/dist/components/ContentCardGroup/index.d.ts

@@ -6,15 +6,15 @@ type BaseContentCardGroupProps = {
 };
 export declare const ContentCardGroup: import("react").ForwardRefExoticComponent<BaseContentCardGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
     Card: import("react").ForwardRefExoticComponent<{
-        title?: string;
-        titleAs?: import("react").ElementType;
-        subtitle?: string;
-        subtitleAs?: import("react").ElementType;
-        description?: string;
+        title?: string | undefined;
+        titleAs?: import("react").ElementType | undefined;
+        subtitle?: string | undefined;
+        subtitleAs?: import("react").ElementType | undefined;
+        description?: string | undefined;
         children?: ReactNode;
         href: string;
-        target?: import("react").AnchorHTMLAttributes<HTMLAnchorElement>["target"];
-        style?: CSSProperties;
+        target?: import("react").HTMLAttributeAnchorTarget | undefined;
+        style?: CSSProperties | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
 };
 export {};

package/dist/components/ContentCardGroup/index.js

@@ -1,26 +1,21 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { Stack } from "@ultraviolet/ui";
-import { forwardRef, Children } from "react";
-import { Card } from "./Card.js";
-import { SkeletonCard } from "./SkeletonCard.js";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { groupCardWrapper } from "./styles.css.js";
-const BaseContentCardGroup = forwardRef(({ children, loading, style }, ref) => /* @__PURE__ */ jsx(
-  Stack,
-  {
-    className: groupCardWrapper,
-    direction: "column",
-    ref,
-    style,
-    children: loading ? Children.map(children, (_child, index) => (
-      // biome-ignore lint/suspicious/noArrayIndexKey: error
-      /* @__PURE__ */ jsx(SkeletonCard, {}, index)
-    )) : children
-  }
-));
-const ContentCardGroup = Object.assign(BaseContentCardGroup, {
-  Card
-});
-export {
-  ContentCardGroup
-};
+import { Card as Card$1 } from "./Card.js";
+import { SkeletonCard } from "./SkeletonCard.js";
+import { Stack } from "@ultraviolet/ui";
+import { Children, forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ContentCardGroup/index.tsx
+const BaseContentCardGroup = forwardRef(({ children, loading, style }, ref) => /* @__PURE__ */ jsx(Stack, {
+	className: groupCardWrapper,
+	direction: "column",
+	ref,
+	style,
+	children: loading ? Children.map(children, (_child, index) => /* @__PURE__ */ jsx(SkeletonCard, {}, index)) : children
+}));
+const ContentCardGroup = Object.assign(BaseContentCardGroup, { Card: Card$1 });
+
+//#endregion
+export { ContentCardGroup };

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

@@ -1,5 +1,6 @@
-/* empty css                                                  */
-/* empty css                          */
+/* empty css                      */
+
+//#region src/components/ContentCardGroup/styles.css.ts
 var customStack = "uv_plus_1gpmh3x0";
 var styledWrapper = "uv_plus_1gpmh3x1";
 var iconWrapper = "uv_plus_1gpmh3x2";
@@ -7,12 +8,6 @@ var fullHeightStack = "uv_plus_1gpmh3x3";
 var groupCardWrapper = "uv_plus_1gpmh3x4";
 var skeletonWrapper = "uv_plus_1gpmh3x5";
 var squareSkeleton = "uv_plus_1gpmh3x6";
-export {
-  customStack,
-  fullHeightStack,
-  groupCardWrapper,
-  iconWrapper,
-  skeletonWrapper,
-  squareSkeleton,
-  styledWrapper
-};
+
+//#endregion
+export { customStack, fullHeightStack, groupCardWrapper, iconWrapper, skeletonWrapper, squareSkeleton, styledWrapper };