@ultraviolet/ui 3.10.1 → 3.11.0

package/dist/components/Tabs/index.js

@@ -1,15 +1,15 @@
 'use client';
 import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
-import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectWithoutProperties.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
+import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectWithoutProperties.js";
 import { tabsContainer, tabsMenu, tabsMenuContainer } from "./styles.css.js";
 import { TabsContext } from "./TabsContext.js";
 import { Tab } from "./Tab.js";
 import { TabMenu } from "./TabMenu.js";
 import { TabMenuItem } from "./TabMenuItem.js";
-import { cn } from "@ultraviolet/utils";
 import { Children, cloneElement, isValidElement, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 
 //#region src/components/Tabs/index.tsx
 const _excluded = [

package/dist/components/Tag/index.js

@@ -5,9 +5,9 @@ import { Text } from "../Text/index.js";
 import { Loader } from "../Loader/index.js";
 import { Button } from "../Button/index.js";
 import { closeButtonTag, containerTag, textTag } from "./styles.css.js";
-import { cn } from "@ultraviolet/utils";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
 import { CopyContentIcon } from "@ultraviolet/icons/CopyContentIcon";
 import useClipboard from "react-use-clipboard";

package/dist/components/TagInput/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
 import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { Text } from "../Text/index.js";
@@ -8,9 +8,9 @@ import { Button } from "../Button/index.js";
 import { Label } from "../Label/index.js";
 import { Tag } from "../Tag/index.js";
 import { tagInput, tagInputContainer, tagInputDataContainer, tagInputStateContainer } from "./styles.css.js";
-import { cn, getUUID } from "@ultraviolet/utils";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, getUUID } from "@ultraviolet/utils";
 import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
 import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
 import { CheckCircleOutlineIcon } from "@ultraviolet/icons/CheckCircleOutlineIcon";

package/dist/components/TagList/index.js

@@ -1,14 +1,14 @@
 'use client';
 import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
 import { Tag } from "../Tag/index.js";
 import { Popover } from "../Popover/index.js";
 import { TAGS_GAP } from "./constant.js";
 import { ellipsisChild, ellipsisContainer, popoverTriggerWidthVar, tagContainer, tagListContainer, tagsWrapper } from "./styles.css.js";
-import { cn } from "@ultraviolet/utils";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 
 //#region src/components/TagList/index.tsx
 const DEFAULT_POPOVER_MAX_HEIGHT = "16rem";

package/dist/components/Text/index.js

@@ -1,15 +1,15 @@
 'use client';
 import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
-import { Tooltip } from "../Tooltip/index.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
 import recursivelyGetChildrenString from "../../helpers/recursivelyGetChildrenString.js";
 import { useIsOverflowing } from "../../hooks/useIsOverflowing.js";
+import { Tooltip } from "../Tooltip/index.js";
 import { text } from "./style.css.js";
 import { textVars } from "./variables.css.js";
-import { cn } from "@ultraviolet/utils";
 import { useRef } from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 
 //#region src/components/Text/index.tsx
 /**

package/dist/components/TextArea/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
 import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { Text } from "../Text/index.js";
@@ -10,9 +10,9 @@ import { Row } from "../Row/index.js";
 import { SIZE_HEIGHT } from "../Button/constants.js";
 import { paddingRightVar, textArea, textAreaClearableContainer, textareaWrapper } from "./styles.css.js";
 import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef } from "react";
+import { useTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useTheme } from "@ultraviolet/themes";
 import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
 import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
 import { CloseIcon } from "@ultraviolet/icons/CloseIcon";

package/dist/components/TextInput/index.js

@@ -7,9 +7,9 @@ import { Loader } from "../Loader/index.js";
 import { Button } from "../Button/index.js";
 import { Label } from "../Label/index.js";
 import { basicPrefix, basicSuffix, ctaSuffix, inputClass, inputWrapper, inputWrapperSizes, stateStack } from "./styles.css.js";
-import { cn } from "@ultraviolet/utils";
 import { forwardRef, useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
 import { AutoFixIcon } from "@ultraviolet/icons/AutoFixIcon";
 import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";

package/dist/components/TimeInput/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { Button } from "../Button/index.js";

package/dist/components/Toaster/Toaster.js

@@ -1,6 +1,6 @@
 'use client';
 import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
 import { CloseButton } from "./components/CloseButton.js";
 import { Content } from "./components/Content.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/Toaster/ToasterContainer.js

@@ -2,8 +2,8 @@
 import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { toaster } from "./styles.css.js";
 import { AUTOCLOSE_DELAY } from "./constants.js";
-import { cn } from "@ultraviolet/utils";
 import { jsx } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 import { Slide, ToastContainer } from "react-toastify";
 
 //#region src/components/Toaster/ToasterContainer.tsx

package/dist/components/Toggle/index.js

@@ -5,9 +5,9 @@ import { Tooltip } from "../Tooltip/index.js";
 import { Text } from "../Text/index.js";
 import { Row } from "../Row/index.js";
 import { checkbox, label, toggle } from "./styles.css.js";
-import { cn } from "@ultraviolet/utils";
 import { forwardRef, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 
 //#region src/components/Toggle/index.tsx
 const Toggle = forwardRef(({ checked, disabled = false, id, name, onChange, onFocus, onBlur, onKeyDown, size = "large", tooltip, labelPosition = "right", label: label$1, helper, tabIndex, required, className, "data-testid": dataTestId, value, error, "aria-label": ariaLabel, style }, ref) => {

package/dist/components/ToggleGroup/index.js

@@ -5,9 +5,9 @@ import { Text } from "../Text/index.js";
 import { Label } from "../Label/index.js";
 import { Toggle } from "../Toggle/index.js";
 import { fieldset } from "./styles.css.js";
-import { cn } from "@ultraviolet/utils";
 import { createContext, useContext, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 
 //#region src/components/ToggleGroup/index.tsx
 const ToggleGroupContext = createContext(void 0);

package/dist/components/Tooltip/index.js

@@ -2,9 +2,9 @@
 import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { Popup } from "../Popup/index.js";
 import { tooltip } from "./styles.css.js";
-import { cn } from "@ultraviolet/utils";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 
 //#region src/components/Tooltip/index.tsx
 /**

package/dist/components/TreeMapChart/index.js

@@ -1,13 +1,13 @@
 'use client';
 import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
 import { getDataColors } from "../../helpers/treeMap.js";
 import { treeMapContainer } from "./styles.css.js";
 import { Tooltip } from "./Tooltip.js";
-import { cn } from "@ultraviolet/utils";
 import { useCallback, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
 import { useTheme } from "@ultraviolet/themes";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 import { ResponsiveTreeMapHtml } from "@nivo/treemap";
 
 //#region src/components/TreeMapChart/index.tsx

package/dist/components/UnitInput/index.js

@@ -3,13 +3,13 @@ import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { Label } from "../Label/index.js";
-import { SelectInput } from "../SelectInput/index.js";
 import { Row } from "../Row/index.js";
+import { SelectInput } from "../SelectInput/index.js";
 import { unitInputNumber, unitInputNumberWrapper, unitInputSize, unitInputState, unitInputUnit, unitInputUnitWidth, widthSelectInput } from "./styles.css.js";
-import { cn } from "@ultraviolet/utils";
 import { useEffect, useId, useMemo, useState } from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
 import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
 

package/dist/components/VerificationCode/index.js

@@ -3,9 +3,9 @@ import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { Text } from "../Text/index.js";
 import { Label } from "../Label/index.js";
 import { filedSetClass, inputClass, inputSizes } from "./styles.css.js";
-import { cn } from "@ultraviolet/utils";
 import { createRef, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 
 //#region src/components/VerificationCode/index.tsx
 const DEFAULT_ON_FUNCTION = () => {};

package/dist/components/compositions/CodeEditor/index.d.ts

@@ -0,0 +1,40 @@
+import { langs } from '@uiw/codemirror-extensions-langs';
+import CodeMirror from '@uiw/react-codemirror';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
+type CodeEditorProps = {
+    value: string;
+    onChange: ComponentProps<typeof CodeMirror>['onChange'];
+    extensions: keyof typeof langs;
+    onBlur?: () => void;
+    height?: string;
+    readOnly?: boolean;
+    autoCompletion?: boolean;
+    disabled?: boolean;
+    helper?: ReactNode;
+    /**
+     * When set to true, a copy button is displayed in the top right corner of the editor.
+     * If a string is provided, it is used as the button's label. Otherwise, no label is displayed.
+     */
+    copyButton?: boolean | string;
+    label?: string;
+    /**
+     * Defines a max height and adds an expand button to see the full content of the component
+     */
+    expandableHeight?: number;
+    /** Text for the "show" button when maxLines is defined */
+    showText?: string;
+    /** Text for the "hide" button when maxLines is defined */
+    hideText?: string;
+    id?: string;
+    labelDescription?: ReactNode;
+    'aria-label'?: string;
+    'data-testid'?: string;
+    className?: string;
+    error?: string;
+    lineNumbers?: boolean;
+    style?: CSSProperties;
+    required?: boolean;
+};
+export declare const CodeEditor: ({ value, onChange, extensions, onBlur, height, readOnly, autoCompletion, disabled, label, copyButton, id, helper, labelDescription, expandableHeight, hideText, showText, 'aria-label': ariaLabel, 'data-testid': dataTestId, className, error, lineNumbers, style, required, }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/compositions/CodeEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/CodeEditor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAA;AAExD,OAAO,UAAU,MAAM,uBAAuB,CAAA;AAI9C,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EAEb,SAAS,EAEV,MAAM,OAAO,CAAA;AAmBd,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,UAAU,CAAC,CAAA;IACvD,UAAU,EAAE,MAAM,OAAO,KAAK,CAAA;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAsDD,eAAO,MAAM,UAAU,+UAkHtB,CAAA"}

package/dist/components/compositions/CodeEditor/index.js

@@ -0,0 +1,129 @@
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../Stack/index.js";
+import { Text } from "../../Text/index.js";
+import { Expandable } from "../../Expandable/index.js";
+import { Label } from "../../Label/index.js";
+import { CopyButton } from "../../CopyButton/index.js";
+import { animatedArrowIcon, centeredText, codeEditor, codeEditorWrapper, copyButton, disabledStack, maxHeightVar, showMoreButton, showMoreContainer } from "./styles.css.js";
+import { useState } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
+import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
+import { langs } from "@uiw/codemirror-extensions-langs";
+import { material } from "@uiw/codemirror-theme-material";
+import CodeMirror from "@uiw/react-codemirror";
+
+//#region src/components/compositions/CodeEditor/index.tsx
+const CodeEditorCopyButton = ({ copyButton: copyButton$1, value }) => /* @__PURE__ */ jsx(CopyButton, {
+	bordered: true,
+	className: copyButton,
+	sentiment: "neutral",
+	size: "small",
+	value,
+	children: typeof copyButton$1 === "string" ? copyButton$1 : void 0
+});
+const CodeEditorExpandable = ({ expanded, setExpanded, hideText, showText }) => /* @__PURE__ */ jsx("div", {
+	className: showMoreContainer({ expanded }),
+	children: /* @__PURE__ */ jsx("button", {
+		"aria-expanded": expanded,
+		className: showMoreButton,
+		onClick: () => setExpanded((prevState) => !prevState),
+		type: "button",
+		children: /* @__PURE__ */ jsxs(Text, {
+			as: "span",
+			className: centeredText,
+			sentiment: "neutral",
+			variant: "bodySmallStrong",
+			children: [
+				expanded ? hideText : showText,
+				"\xA0",
+				/* @__PURE__ */ jsx(ArrowDownIcon, { className: animatedArrowIcon[expanded ? "true" : "false"] })
+			]
+		})
+	})
+});
+const CodeEditor = ({ value, onChange, extensions, onBlur, height, readOnly, autoCompletion, disabled = false, label, copyButton, id, helper, labelDescription, expandableHeight, hideText = "Hide", showText = "Show", "aria-label": ariaLabel, "data-testid": dataTestId, className, error, lineNumbers = true, style, required }) => {
+	var _langs$extensions;
+	var _langs$extensions2;
+	const [expanded, setExpanded] = useState(false);
+	const expandableEnabled = expandableHeight !== void 0;
+	const isEditable = !(disabled && readOnly) && (!expandableEnabled || expanded);
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CodeMirror, {
+		"aria-disabled": disabled,
+		"aria-label": ariaLabel,
+		basicSetup: {
+			autocompletion: autoCompletion,
+			highlightActiveLine: false,
+			highlightActiveLineGutter: false,
+			lineNumbers
+		},
+		className,
+		"data-testid": dataTestId,
+		editable: isEditable,
+		extensions: [(_langs$extensions = (_langs$extensions2 = langs[extensions]) === null || _langs$extensions2 === void 0 ? void 0 : _langs$extensions2.call(langs)) !== null && _langs$extensions !== void 0 ? _langs$extensions : langs["sh"]],
+		height: expandableEnabled ? void 0 : height,
+		id,
+		onBlur,
+		onChange,
+		onUpdate: () => {
+			if (disabled) {
+				var _document$getSelectio;
+				(_document$getSelectio = document.getSelection()) === null || _document$getSelectio === void 0 || _document$getSelectio.empty();
+			}
+		},
+		readOnly: readOnly || disabled,
+		theme: material,
+		value,
+		width: "100%"
+	}), copyButton && !disabled ? /* @__PURE__ */ jsx(CodeEditorCopyButton, {
+		copyButton,
+		value
+	}) : null] });
+	return /* @__PURE__ */ jsxs(Stack, {
+		className: cn(disabled ? disabledStack : ""),
+		gap: .5,
+		style,
+		children: [
+			label ? /* @__PURE__ */ jsx(Label, {
+				labelDescription,
+				required,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: codeEditorWrapper,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn(codeEditor[disabled ? "disabled" : "default"]),
+					style: assignInlineVars({ [maxHeightVar]: !expanded && expandableHeight ? `${expandableHeight}px` : "none" }),
+					children: expandableEnabled ? /* @__PURE__ */ jsx(Expandable, {
+						minHeight: expandableHeight,
+						opened: expanded,
+						children: content
+					}) : content
+				}), expandableEnabled ? /* @__PURE__ */ jsx(CodeEditorExpandable, {
+					expanded,
+					hideText,
+					setExpanded,
+					showText
+				}) : null]
+			}),
+			error && typeof error !== "boolean" ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				sentiment: "danger",
+				variant: "caption",
+				children: error
+			}) : null,
+			!error && helper ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				prominence: "weak",
+				sentiment: "neutral",
+				variant: "caption",
+				children: helper
+			}) : null
+		]
+	});
+};
+
+//#endregion
+export { CodeEditor };

package/dist/components/compositions/CodeEditor/styles.css.d.ts

@@ -0,0 +1,19 @@
+export declare const maxHeightVar: `var(--${string})`;
+export declare const disabledStack: string;
+export declare const copyButton: string;
+export declare const codeEditor: Record<"default" | "disabled", string>;
+export declare const showMoreContainer: import("@vanilla-extract/recipes").RuntimeFn<{
+    expanded: {
+        true: {
+            boxShadow: "none";
+        };
+        false: {
+            boxShadow: `0px -22px 19px -6px ${string}`;
+        };
+    };
+}>;
+export declare const showMoreButton: string;
+export declare const centeredText: string;
+export declare const animatedArrowIcon: Record<"false" | "true", string>;
+export declare const codeEditorWrapper: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/components/compositions/CodeEditor/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/CodeEditor/styles.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,YAAY,oBAAc,CAAA;AACvC,eAAO,MAAM,aAAa,QAAmC,CAAA;AAE7D,eAAO,MAAM,UAAU,QAYrB,CAAA;AAYF,eAAO,MAAM,UAAU,wCAGrB,CAAA;AA8EF,eAAO,MAAM,iBAAiB;;;;;;;;;EAY5B,CAAA;AAEF,eAAO,MAAM,cAAc,QAOzB,CAAA;AAEF,eAAO,MAAM,YAAY,QAKvB,CAAA;AAEF,eAAO,MAAM,iBAAiB,kCAW5B,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAU5B,CAAA"}

package/dist/components/compositions/CodeEditor/styles.css.js

@@ -0,0 +1,30 @@
+/* empty css                      */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/components/compositions/CodeEditor/styles.css.ts
+var maxHeightVar = "var(--uv_q4eszs0)";
+var disabledStack = "uv_q4eszs1";
+var copyButton = "uv_q4eszs2";
+var codeEditor = {
+	"default": "uv_q4eszs4 uv_q4eszs3",
+	disabled: "uv_q4eszs5 uv_q4eszs3"
+};
+var showMoreContainer = createRuntimeFn({
+	defaultClassName: "uv_q4eszs7 uv_q4eszs6",
+	variantClassNames: { expanded: {
+		true: "uv_q4eszs8",
+		false: "uv_q4eszs9"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+var showMoreButton = "uv_q4eszsa";
+var centeredText = "uv_q4eszsb";
+var animatedArrowIcon = {
+	false: "uv_q4eszsc",
+	true: "uv_q4eszsd"
+};
+var codeEditorWrapper = "uv_q4eszse";
+
+//#endregion
+export { animatedArrowIcon, centeredText, codeEditor, codeEditorWrapper, copyButton, disabledStack, maxHeightVar, showMoreButton, showMoreContainer };

package/dist/components/compositions/ContentCard/Content.d.ts

@@ -0,0 +1,13 @@
+import type { ContentCardProps } from './type';
+export declare const LinkContent: ({ direction, disabled, }: {
+    direction: "column" | "row";
+    disabled?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CardContent: ({ title, subtitle, disabled, headingTag, description, children, }: ContentCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageContent: ({ disabled, image, direction, subContainerHeight, }: {
+    disabled?: boolean | undefined;
+    image?: string | undefined;
+    direction: "column" | "row";
+    subContainerHeight: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Content.d.ts.map

package/dist/components/compositions/ContentCard/Content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/ContentCard/Content.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AAE9C,eAAO,MAAM,WAAW;;;6CAkBvB,CAAA;AAED,eAAO,MAAM,WAAW,kIA4CvB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;6CAsBxB,CAAA"}

package/dist/components/compositions/ContentCard/Content.js

@@ -0,0 +1,65 @@
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../Stack/index.js";
+import { Text } from "../../Text/index.js";
+import { iconContainer, iconStack, imageClass, subContainerHeightVar } from "./styles.css.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
+import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
+
+//#region src/components/compositions/ContentCard/Content.tsx
+const LinkContent = ({ direction, disabled }) => /* @__PURE__ */ jsx(Stack, {
+	alignItems: direction === "column" ? "flex-end" : "center",
+	className: cn(iconStack[direction]),
+	direction,
+	flex: 1,
+	justifyContent: direction === "column" ? "center" : "flex-end",
+	children: /* @__PURE__ */ jsx("div", {
+		className: iconContainer,
+		children: /* @__PURE__ */ jsx(OpenInNewIcon, {
+			disabled,
+			sentiment: "neutral"
+		})
+	})
+});
+const CardContent = ({ title, subtitle, disabled, headingTag = "h3", description, children }) => /* @__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]
+});
+const ImageContent = ({ disabled, image, direction, subContainerHeight }) => /* @__PURE__ */ jsx("img", {
+	alt: "",
+	className: imageClass[direction],
+	"data-disabled": disabled,
+	height: direction === "column" ? 120 : void 0,
+	src: image,
+	style: assignInlineVars({ [subContainerHeightVar]: subContainerHeight }),
+	width: direction === "row" ? 220 : void 0
+});
+
+//#endregion
+export { CardContent, ImageContent, LinkContent };

package/dist/components/compositions/ContentCard/Skeleton.d.ts

@@ -0,0 +1,6 @@
+type SkeletonProps = {
+    direction: 'row' | 'column';
+};
+export declare const Skeleton: ({ direction }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/compositions/ContentCard/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/ContentCard/Skeleton.tsx"],"names":[],"mappings":"AAYA,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,QAAQ,2EAkBpB,CAAA"}

package/dist/components/compositions/ContentCard/Skeleton.js

@@ -0,0 +1,33 @@
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../Stack/index.js";
+import { paddedStack, skeletonHeightVar, skeletonImage, skeletonWidthVar } from "./styles.css.js";
+import { Skeleton as Skeleton$1 } from "../../Skeleton/index.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/compositions/ContentCard/Skeleton.tsx
+const Skeleton = ({ direction }) => /* @__PURE__ */ jsxs(Stack, {
+	direction,
+	children: [/* @__PURE__ */ jsx(Skeleton$1, {
+		className: skeletonImage[direction],
+		style: assignInlineVars({
+			[skeletonHeightVar]: direction === "column" ? "120px" : "unset",
+			[skeletonWidthVar]: direction === "row" ? "220px" : "100%"
+		}),
+		variant: "square"
+	}), /* @__PURE__ */ jsxs(Stack, {
+		className: paddedStack,
+		gap: 2,
+		children: [
+			/* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }),
+			/* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }),
+			/* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }),
+			/* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }),
+			/* @__PURE__ */ jsx(Skeleton$1, { variant: "line" })
+		]
+	})]
+});
+
+//#endregion
+export { Skeleton };

package/dist/components/compositions/ContentCard/index.d.ts

@@ -0,0 +1,8 @@
+import type { ContentCardProps } from './type';
+/**
+ * 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.
+ */
+export declare const ContentCard: import("react").ForwardRefExoticComponent<ContentCardProps & import("react").RefAttributes<HTMLAnchorElement & HTMLButtonElement & HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/compositions/ContentCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/ContentCard/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AAE9C;;;;GAIG;AACH,eAAO,MAAM,WAAW,qJAsGvB,CAAA"}