@ultraviolet/ui 3.0.0 → 3.1.1

package/dist/components/Snippet/index.js

@@ -1,11 +1,12 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { ArrowDownIcon } from "@ultraviolet/icons";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useReducer, Children } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { CopyButton } from "../CopyButton/index.js";
 import { Expandable } from "../Expandable/index.js";
+import { Label } from "../Label/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { snippetContainer, stackStyle, buttonContainer, showMoreContainer, showMoreButton, centeredText, animatedArrowIcon, pretext, line, prefix, rowsVar } from "./styles.css.js";
@@ -55,7 +56,10 @@ const Snippet = ({
   rows = 4,
   noExpandable = false,
   onCopy,
-  style
+  style,
+  helper,
+  label,
+  labelDescription
 }) => {
   const theme = useTheme();
   const [showMore, setShowMore] = useReducer(
@@ -67,81 +71,85 @@ const Snippet = ({
   const multiline = numberOfLines > 1;
   const hasShowMoreButton = numberOfLines > rows && multiline && !noExpandable;
   const minHeight = rows * Number.parseFloat(theme.typography.code.lineHeight) * 16 + Number.parseFloat(theme.space[4]) * 16;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `${className ? `${className} ` : ""}${snippetContainer[multiline ? "multiline" : "oneLine"]}`,
-      "data-testid": dataTestId,
-      style,
-      children: /* @__PURE__ */ jsxs(Stack, { className: stackStyle, children: [
-        hasShowMoreButton ? /* @__PURE__ */ jsx(Expandable, { minHeight, opened: showMore, children: /* @__PURE__ */ jsx(
-          CodeContent,
-          {
-            lines,
-            multiline,
-            noExpandable,
-            prefix: prefix2,
-            rows,
-            children
-          }
-        ) }) : /* @__PURE__ */ jsx(
-          CodeContent,
-          {
-            lines,
-            multiline,
-            noExpandable,
-            prefix: prefix2,
-            rows,
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: buttonContainer[multiline && numberOfLines > 1 ? "multiline" : "oneLine"],
-            children: /* @__PURE__ */ jsx(
-              CopyButton,
-              {
-                copiedText,
-                copyText,
-                onCopy,
-                sentiment: "neutral",
-                value: children
-              }
-            )
-          }
-        ),
-        hasShowMoreButton ? /* @__PURE__ */ jsx("div", { className: showMoreContainer[showMore ? "true" : "false"], children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            "aria-expanded": showMore,
-            className: showMoreButton,
-            onClick: setShowMore,
-            type: "button",
-            children: /* @__PURE__ */ jsxs(
-              Text,
-              {
-                as: "span",
-                className: centeredText,
-                sentiment: "neutral",
-                variant: "bodySmallStrong",
-                children: [
-                  showMore ? hideText : showText,
-                  " ",
-                  /* @__PURE__ */ jsx(
-                    ArrowDownIcon,
-                    {
-                      className: animatedArrowIcon[showMore ? "true" : "false"]
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ) }) : null
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, width: "100%", children: [
+    label ? /* @__PURE__ */ jsx(Label, { labelDescription, children: label }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${className ? `${className} ` : ""}${snippetContainer[multiline ? "multiline" : "oneLine"]}`,
+        "data-testid": dataTestId,
+        style,
+        children: /* @__PURE__ */ jsxs(Stack, { className: stackStyle, children: [
+          hasShowMoreButton ? /* @__PURE__ */ jsx(Expandable, { minHeight, opened: showMore, children: /* @__PURE__ */ jsx(
+            CodeContent,
+            {
+              lines,
+              multiline,
+              noExpandable,
+              prefix: prefix2,
+              rows,
+              children
+            }
+          ) }) : /* @__PURE__ */ jsx(
+            CodeContent,
+            {
+              lines,
+              multiline,
+              noExpandable,
+              prefix: prefix2,
+              rows,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: buttonContainer[multiline && numberOfLines > 1 ? "multiline" : "oneLine"],
+              children: /* @__PURE__ */ jsx(
+                CopyButton,
+                {
+                  copiedText,
+                  copyText,
+                  onCopy,
+                  sentiment: "neutral",
+                  value: children
+                }
+              )
+            }
+          ),
+          hasShowMoreButton ? /* @__PURE__ */ jsx("div", { className: showMoreContainer[showMore ? "true" : "false"], children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-expanded": showMore,
+              className: showMoreButton,
+              onClick: setShowMore,
+              type: "button",
+              children: /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  as: "span",
+                  className: centeredText,
+                  sentiment: "neutral",
+                  variant: "bodySmallStrong",
+                  children: [
+                    showMore ? hideText : showText,
+                    " ",
+                    /* @__PURE__ */ jsx(
+                      ArrowDownIcon,
+                      {
+                        className: animatedArrowIcon[showMore ? "true" : "false"]
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ) }) : null
+        ] })
+      }
+    ),
+    helper ? /* @__PURE__ */ jsx(Text, { as: "p", prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null
+  ] });
 };
 export {
   Snippet

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

@@ -7,15 +7,15 @@ export declare const tagInputContainer: import("@vanilla-extract/recipes").Runti
     size: {
         large: {
             padding: `calc(var(--${string}) - 1px) var(--${string})`;
-            height: `var(--${string})`;
+            minHeight: `var(--${string})`;
         };
         small: {
             padding: `calc(var(--${string}) - 1px) var(--${string})`;
-            height: `var(--${string})`;
+            minHeight: `var(--${string})`;
         };
         medium: {
             padding: `calc(var(--${string}) - 1px) var(--${string})`;
-            height: `var(--${string})`;
+            minHeight: `var(--${string})`;
         };
     };
 }>;

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

@@ -26,4 +26,4 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<{
     value?: string;
     defaultValue?: string;
     onChangeValue?: (value: string) => void;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "disabled" | "id" | "autoComplete" | "role" | "autoFocus" | "tabIndex" | "aria-atomic" | "aria-label" | "aria-labelledby" | "aria-live" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "name" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "disabled" | "id" | "autoComplete" | "role" | "autoFocus" | "tabIndex" | "aria-atomic" | "aria-label" | "aria-labelledby" | "aria-live" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "name" | "required" | "placeholder" | "readOnly"> & import("react").RefAttributes<HTMLInputElement>>;