lecom-ui 5.4.44 → 5.4.45

package/dist/components/Accordion/Accordion.js

@@ -1,9 +1,14 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { cn } from '../../lib/utils.js';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { cva } from 'class-variance-authority';
 import { ChevronDown } from 'lucide-react';
+import { initializeI18n } from '../../i18n/index.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+import { Typography } from '../Typography/Typography.js';
 
+initializeI18n();
 const accordionVariants = cva(
   "flex flex-1 items-center justify-between gap-4 transition-all w-full outline-none",
   {
@@ -26,6 +31,20 @@ const accordionVariants = cva(
 const Accordion = AccordionPrimitive.Root;
 const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
 AccordionItem.displayName = "AccordionItem";
+const AccordionIcon = ({ disabled }) => {
+  const { t } = useTranslation();
+  const icon = /* @__PURE__ */ React.createElement(
+    ChevronDown,
+    {
+      className: cn(
+        "size-5 shrink-0 text-grey-800 transition-transform duration-200",
+        disabled && "text-grey-300"
+      )
+    }
+  );
+  return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Typography, { className: "inline-flex" }, icon)), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, /* @__PURE__ */ React.createElement(Typography, { className: "[[data-state=open]_&]:hidden" }, t("accordion.expand")), /* @__PURE__ */ React.createElement(Typography, { className: "hidden [[data-state=open]_&]:inline" }, t("accordion.collapse")))));
+};
+AccordionIcon.displayName = "AccordionIcon";
 const AccordionTrigger = React.forwardRef(
   ({
     className,
@@ -43,30 +62,14 @@ const AccordionTrigger = React.forwardRef(
       ref,
       className: cn(
         accordionVariants({ variant, size, className }),
-        iconDirection === "down-to-up" && "[&[data-state=open]>svg]:rotate-180",
-        iconDirection === "right-to-down" && "[&>svg]:rotate-[-90deg] [&[data-state=open]>svg]:rotate-0"
+        iconDirection === "down-to-up" && "[&[data-state=open]_svg]:rotate-180",
+        iconDirection === "right-to-down" && "[&_svg]:rotate-[-90deg] [&[data-state=open]_svg]:rotate-0"
       ),
       ...props,
       disabled,
       asChild
     },
-    asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, iconPosition === "left" && /* @__PURE__ */ React.createElement(
-      ChevronDown,
-      {
-        className: cn(
-          "size-5 shrink-0 text-grey-800 transition-transform duration-200",
-          disabled && "text-grey-300"
-        )
-      }
-    ), children, iconPosition === "right" && /* @__PURE__ */ React.createElement(
-      ChevronDown,
-      {
-        className: cn(
-          "size-5 shrink-0 text-grey-800 transition-transform duration-200",
-          disabled && "text-grey-300"
-        )
-      }
-    ))
+    asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, iconPosition === "left" && /* @__PURE__ */ React.createElement(AccordionIcon, { disabled }), children, iconPosition === "right" && /* @__PURE__ */ React.createElement(AccordionIcon, { disabled }))
   ))
 );
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;

package/dist/components/Chart/Chart.js

@@ -1,7 +1,7 @@
 import React__default, { forwardRef, useId, useMemo, useContext } from 'react';
 import { cn } from '../../lib/utils.js';
 import { ResponsiveContainer, Legend, Tooltip } from 'recharts';
-export { Bar, BarChart, CartesianGrid, Label, LabelList, XAxis, YAxis } from 'recharts';
+export { Bar, BarChart, CartesianGrid, Label as ChartLabel, LabelList, XAxis, YAxis } from 'recharts';
 
 const THEMES = { light: "", dark: ".dark" };
 const ChartContext = React__default.createContext(null);

package/dist/components/Combobox/Combobox.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { cva } from 'class-variance-authority';
 import { ChevronUpIcon, ChevronDownIcon, Check, Plus } from 'lucide-react';
+import { useDynamicMaxHeight } from '../../hooks/useDynamicMaxHeight.js';
 import { initializeI18n } from '../../i18n/index.js';
 import { cn } from '../../lib/utils.js';
 import { Button } from '../Button/Button.js';
@@ -309,7 +310,7 @@ const comboboxTriggerVariants = cva(
       },
       status: {
         default: "border border-grey-400 hover:border-grey-500 focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4 outline-none",
-        error: "border-none focus:border-none focus:ring-0 outline-red-600"
+        error: "border border-red-600 hover:border-red-500 focus:border-red-600 focus:ring-0 outline-none"
       },
       disabled: {
         true: "disabled:bg-grey-100 pointer-events-none",
@@ -409,12 +410,20 @@ function Combobox({
   showSearch = true,
   size = "medium",
   allowCreate = false,
-  onCreateOption
+  onCreateOption,
+  dynamicHeight = true,
+  dynamicHeightBottomPadding = 50,
+  dynamicHeightMinHeight = 120
 }) {
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
   const [search, setSearch] = React.useState("");
   const commandListRef = React.useRef(null);
+  const { ref: dynamicHeightRef, style: dynamicHeightStyle } = useDynamicMaxHeight({
+    enabled: open && dynamicHeight,
+    bottomPadding: dynamicHeightBottomPadding,
+    minHeight: dynamicHeightMinHeight
+  });
   const lastOpenOptionsRef = React.useRef(options);
   React.useEffect(() => {
     if (open) {
@@ -474,10 +483,14 @@ function Combobox({
     ), /* @__PURE__ */ React.createElement(
       "div",
       {
-        ref: commandListRef,
+        ref: (node) => {
+          commandListRef.current = node;
+          dynamicHeightRef.current = node;
+        },
         key: search,
+        style: dynamicHeightStyle,
         className: cn(
-          "max-h-44 overflow-y-auto overflow-x-hidden",
+          "overflow-y-auto overflow-x-hidden",
           "[&::-webkit-scrollbar]:w-1.5",
           "[&::-webkit-scrollbar-track]:bg-transparent",
           "[&::-webkit-scrollbar-thumb]:bg-grey-300",

package/dist/components/CustomTagInput/CustomTagInput.js

@@ -19,7 +19,8 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
   isDragging,
   onMouseDown,
   isAllSelected = false,
-  defaultColor
+  defaultColor,
+  maxEditLength
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [editValue, setEditValue] = React.useState(item.label);
@@ -88,7 +89,13 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
         ref: inputRef,
         type: "text",
         value: editValue,
-        onChange: (e) => setEditValue(e.target.value),
+        onChange: (e) => {
+          let newValue = e.target.value;
+          if (maxEditLength !== void 0 && newValue.length > maxEditLength) {
+            newValue = newValue.slice(0, maxEditLength);
+          }
+          setEditValue(newValue);
+        },
         onKeyDown: handleKeyDown,
         onBlur: handleBlur,
         className: "bg-transparent border-none outline-none [color:inherit] body-small-400 min-w-[60px] w-full",
@@ -169,18 +176,22 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
   onSpacerClick,
   onMouseDown,
   isAllSelected = false,
-  defaultColor
+  defaultColor,
+  maxEditLength,
+  remainingCharacters
 }) {
   const showInlineInput = insertAtIndex === index;
   const showDragIndicator = dragOverIndex === index && draggedIndex !== null && draggedIndex !== index;
-  const showSpacer = !readOnly && insertAtIndex !== index + 1;
+  const isMaxLengthReached = remainingCharacters !== void 0 && remainingCharacters <= 0;
+  const showSpacer = !readOnly && insertAtIndex !== index + 1 && !isMaxLengthReached;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, showInlineInput && /* @__PURE__ */ React.createElement(
     InlineInput,
     {
       onAdd: onInlineAdd,
       onCancel: onInlineCancel,
       placeholder: inlinePlaceholder,
-      color: defaultColor
+      color: defaultColor,
+      maxLength: remainingCharacters
     }
   ), /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-0.5 relative" }, /* @__PURE__ */ React.createElement(
     CustomTagItemComponent,
@@ -198,7 +209,8 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
       isDragging: draggedIndex === index,
       onMouseDown,
       isAllSelected,
-      defaultColor
+      defaultColor,
+      maxEditLength
     }
   ), showDragIndicator && /* @__PURE__ */ React.createElement("div", { className: "w-1 h-6 bg-blue-500 rounded-full animate-pulse self-center" }), showSpacer && /* @__PURE__ */ React.createElement(
     "div",
@@ -212,7 +224,7 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
     }
   )));
 });
-const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placeholder, color }) {
+const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placeholder, color, maxLength }) {
   const [value, setValue] = React.useState("");
   const inputRef = React.useRef(null);
   React.useEffect(() => {
@@ -247,7 +259,13 @@ const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placehol
       ref: inputRef,
       type: "text",
       value,
-      onChange: (e) => setValue(e.target.value),
+      onChange: (e) => {
+        let newValue = e.target.value;
+        if (maxLength !== void 0 && newValue.length > maxLength) {
+          newValue = newValue.slice(0, maxLength);
+        }
+        setValue(newValue);
+      },
       onKeyDown: handleKeyDown,
       onBlur: handleBlur,
       placeholder,
@@ -257,7 +275,8 @@ const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placehol
     }
   ));
 });
-function useTagManagement(value, onChange, allowDuplicates) {
+function useTagManagement(value, onChange, allowDuplicates, maxLength) {
+  const getTotalCharacters = React.useCallback(() => value.reduce((total, item) => total + item.label.length, 0), [value]);
   const isDuplicateTag = React.useCallback(
     (label) => value.some(
       (item) => item.label.toLowerCase() === label.toLowerCase()
@@ -287,28 +306,39 @@ function useTagManagement(value, onChange, allowDuplicates) {
     (newLabel, atIndex) => {
       const trimmedValue = newLabel.trim();
       if (!trimmedValue) return;
+      if (maxLength !== void 0) {
+        const currentTotal = getTotalCharacters();
+        if (currentTotal + trimmedValue.length > maxLength) {
+          return;
+        }
+      }
       if (!allowDuplicates && isDuplicateTag(trimmedValue)) {
         return;
       }
       const newItem = createTagItem(trimmedValue);
       addTagAtPosition(newItem, atIndex);
     },
-    [allowDuplicates, isDuplicateTag, addTagAtPosition, createTagItem]
+    [allowDuplicates, isDuplicateTag, addTagAtPosition, createTagItem, maxLength, getTotalCharacters]
   );
   const handleAddMultipleTags = React.useCallback(
     (labels) => {
-      const newItems = labels.map((label) => label.trim()).filter((label) => {
-        if (!label) return false;
-        if (!allowDuplicates && isDuplicateTag(label)) {
-          return false;
+      let currentTotal = getTotalCharacters();
+      const newItems = [];
+      for (const label of labels) {
+        const trimmed = label.trim();
+        if (!trimmed) continue;
+        if (!allowDuplicates && isDuplicateTag(trimmed)) continue;
+        if (maxLength !== void 0 && currentTotal + trimmed.length > maxLength) {
+          break;
         }
-        return true;
-      }).map((label) => createTagItem(label));
+        newItems.push(createTagItem(trimmed));
+        currentTotal += trimmed.length;
+      }
       if (newItems.length > 0) {
         onChange([...value, ...newItems]);
       }
     },
-    [value, onChange, allowDuplicates, isDuplicateTag, createTagItem]
+    [value, onChange, allowDuplicates, isDuplicateTag, createTagItem, maxLength, getTotalCharacters]
   );
   const handleRemove = React.useCallback(
     (id) => {
@@ -431,7 +461,7 @@ function useDragAndDrop(value, onChange, containerRef) {
     handleMouseDown
   };
 }
-function useInlineInputHandlers(insertAtIndex, setInsertAtIndex, handleAddTag, readOnly, disabled) {
+function useInlineInputHandlers(insertAtIndex, setInsertAtIndex, handleAddTag, readOnly, disabled, isMaxLengthReached) {
   const handleInlineAdd = React.useCallback(
     (newLabel) => {
       if (insertAtIndex !== null) {
@@ -446,12 +476,12 @@ function useInlineInputHandlers(insertAtIndex, setInsertAtIndex, handleAddTag, r
   }, [setInsertAtIndex]);
   const handleSpacerClick = React.useCallback(
     (index) => {
-      const canInsert = !readOnly && !disabled;
+      const canInsert = !readOnly && !disabled && !isMaxLengthReached;
       if (canInsert) {
         setInsertAtIndex(index);
       }
     },
-    [readOnly, disabled, setInsertAtIndex]
+    [readOnly, disabled, isMaxLengthReached, setInsertAtIndex]
   );
   return { handleInlineAdd, handleInlineCancel, handleSpacerClick };
 }
@@ -567,9 +597,19 @@ function useInputHandlers(inputValue, setInputValue, value, onChange, handleAddT
   );
   return { handleKeyDown, handlePaste };
 }
-function useTagEditHandler(value, onChange, onTagEdit) {
+function useTagEditHandler(value, onChange, onTagEdit, maxLength) {
   const handleEdit = React.useCallback(
     (id, newLabel) => {
+      if (maxLength !== void 0) {
+        value.find((item) => item.id === id);
+        const otherItemsTotal = value.reduce(
+          (total, item) => total + (item.id !== id ? item.label.length : 0),
+          0
+        );
+        if (otherItemsTotal + newLabel.length > maxLength) {
+          return;
+        }
+      }
       const updatedItems = value.map(
         (item) => item.id === id ? { ...item, label: newLabel } : item
       );
@@ -579,7 +619,7 @@ function useTagEditHandler(value, onChange, onTagEdit) {
         onTagEdit(editedItem);
       }
     },
-    [value, onChange, onTagEdit]
+    [value, onChange, onTagEdit, maxLength]
   );
   return { handleEdit };
 }
@@ -643,12 +683,17 @@ function useContainerKeyHandler(containerRef, value, onChange, inputRef, setInpu
   );
   return { handleContainerKeyDown };
 }
-function useContainerStyles(variant, radius, disabled, className, maxHeight) {
+const STATUS_STYLES = {
+  default: "",
+  error: "border-red-600 hover:border-red-600 focus:border-red-600 focus-within:border-red-600 focus:ring-0"
+};
+function useContainerStyles(variant, radius, disabled, className, maxHeight, status = "default") {
   const textareaRadius = radius === "full" ? "large" : radius;
   const containerClassNames = cn(
     textareaVariants({ variant, radius: textareaRadius }),
     "min-h-10 cursor-text overflow-hidden pr-0.5 py-1",
     disabled && "opacity-50 pointer-events-none cursor-not-allowed",
+    STATUS_STYLES[status],
     className
   );
   const containerStyles = React.useMemo(
@@ -685,7 +730,9 @@ function CustomTagInputRenderer({
   handleMouseDown,
   isAllSelected,
   setIsAllSelected,
-  defaultColor
+  defaultColor,
+  isMaxLengthReached,
+  remainingCharacters
 }) {
   const showFinalInlineInput = insertAtIndex === value.length;
   const inputPlaceholder = value.length === 0 ? placeholder : "";
@@ -712,7 +759,9 @@ function CustomTagInputRenderer({
       onSpacerClick: handleSpacerClick,
       onMouseDown: handleMouseDown,
       isAllSelected,
-      defaultColor
+      defaultColor,
+      maxEditLength: remainingCharacters !== void 0 ? remainingCharacters + item.label.length : void 0,
+      remainingCharacters
     }
   )), showFinalInlineInput && /* @__PURE__ */ React.createElement(
     InlineInput,
@@ -720,17 +769,29 @@ function CustomTagInputRenderer({
       onAdd: handleInlineAdd,
       onCancel: handleInlineCancel,
       placeholder: inlinePlaceholder,
-      color: defaultColor
+      color: defaultColor,
+      maxLength: remainingCharacters
     }
   ), !readOnly && /* @__PURE__ */ React.createElement(
     "span",
     {
       ref: inputRef,
-      contentEditable: !disabled,
+      contentEditable: !disabled && !isMaxLengthReached,
       suppressContentEditableWarning: true,
       onInput: (e) => {
         const target = e.target;
-        setInputValue(target.textContent || "");
+        let content = target.textContent || "";
+        if (remainingCharacters !== void 0 && content.length > remainingCharacters) {
+          content = content.slice(0, remainingCharacters);
+          target.textContent = content;
+          const range = document.createRange();
+          const selection = window.getSelection();
+          range.selectNodeContents(target);
+          range.collapse(false);
+          selection?.removeAllRanges();
+          selection?.addRange(range);
+        }
+        setInputValue(content);
       },
       onKeyDown: handleKeyDown,
       onPaste: handlePaste,
@@ -757,6 +818,8 @@ function CustomTagInput(props) {
     enableReorder = true,
     onTagEdit,
     color = "blue",
+    maxLength,
+    status = "default",
     ...restProps
   } = props;
   const [inputValue, setInputValue] = React.useState("");
@@ -768,7 +831,8 @@ function CustomTagInput(props) {
   const { handleAddTag, handleAddMultipleTags, handleRemove } = useTagManagement(
     value,
     onChange,
-    allowDuplicates
+    allowDuplicates,
+    maxLength
   );
   const { draggedIndex, dragOverIndex, handleDragStart, handleDragOver, handleDrag, handleDragEnd, handleMouseDown } = useDragAndDrop(value, onChange, containerRef);
   const { handleKeyDown, handlePaste } = useInputHandlers(
@@ -783,7 +847,7 @@ function CustomTagInput(props) {
     setIsAllSelected,
     isAllSelected
   );
-  const { handleEdit } = useTagEditHandler(value, onChange, onTagEdit);
+  const { handleEdit } = useTagEditHandler(value, onChange, onTagEdit, maxLength);
   const { handleContainerClick } = useContainerClickHandler(disabled, inputRef, setIsAllSelected);
   const { handleContainerKeyDown } = useContainerKeyHandler(
     containerRef,
@@ -795,19 +859,27 @@ function CustomTagInput(props) {
     setIsAllSelected,
     isAllSelected
   );
+  const totalCharacters = React.useMemo(
+    () => value.reduce((total, item) => total + item.label.length, 0),
+    [value]
+  );
+  const isMaxLengthReached = maxLength !== void 0 && totalCharacters >= maxLength;
+  const remainingCharacters = maxLength !== void 0 ? Math.max(0, maxLength - totalCharacters) : void 0;
   const { handleInlineAdd, handleInlineCancel, handleSpacerClick } = useInlineInputHandlers(
     insertAtIndex,
     setInsertAtIndex,
     handleAddTag,
     readOnly,
-    disabled
+    disabled,
+    isMaxLengthReached
   );
   const { containerClassNames, containerStyles } = useContainerStyles(
     variant,
     radius,
     disabled,
     className,
-    maxHeight
+    maxHeight,
+    status
   );
   return /* @__PURE__ */ React.createElement(
     "div",
@@ -858,7 +930,9 @@ function CustomTagInput(props) {
           handleMouseDown,
           isAllSelected,
           setIsAllSelected,
-          defaultColor: color
+          defaultColor: color,
+          isMaxLengthReached,
+          remainingCharacters
         }
       )
     )

package/dist/components/Dialog/Dialog.js

@@ -13,7 +13,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[100] bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
@@ -25,7 +25,7 @@ const DialogContent = React.forwardRef(({ className, children, noClose, ...props
   {
     ref,
     className: cn(
-      "fixed left-[50%] top-[50%] z-50 flex flex-col w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-sm:h-full",
+      "fixed left-[50%] top-[50%] z-[100] flex flex-col w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-sm:h-full",
       className
     ),
     ...props

package/dist/components/Input/Input.js

@@ -3,9 +3,8 @@ import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
 
 const inputVariants = cva(
-  `flex w-full rounded-sm border border-grey-400 bg-background px-3 py-2
+  `flex w-full rounded-sm border bg-background px-3 py-2
   placeholder:text-grey-500 outline-none
-  hover:border-grey-500 focus:bg-background focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4
   disabled:cursor-not-allowed disabled:bg-grey-100 disabled:border-grey-400
   transition-all duration-300`,
   {
@@ -25,12 +24,17 @@ const inputVariants = cva(
         default: "rounded-sm",
         large: "rounded-3xl",
         full: "rounded-full"
+      },
+      status: {
+        default: "border-grey-400 hover:border-grey-500 focus:bg-background focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4",
+        error: "border-red-600 hover:border-red-600 focus:border-red-600 focus:ring-0"
       }
     },
     defaultVariants: {
       size: "default",
       variant: "default",
-      radius: "default"
+      radius: "default",
+      status: "default"
     }
   }
 );
@@ -48,6 +52,7 @@ const Input = React.forwardRef(
     sufix,
     prefix,
     radius,
+    status,
     iconBefore,
     iconAfter,
     type,
@@ -57,7 +62,7 @@ const Input = React.forwardRef(
     ...props
   }, ref) => {
     const inputStyles = () => cn(
-      inputVariants({ size, variant, radius }),
+      inputVariants({ size, variant, radius, status }),
       prefix && "rounded-l-none",
       sufix && "rounded-r-none",
       iconBefore && "pl-10",

package/dist/components/Label/Label.js

@@ -4,13 +4,49 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 
 const labelVariants = cva(
-  "body-medium-400 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      variant: {
+        "heading-xxlarge-500": "heading-xxlarge-500",
+        "heading-xlarge-500": "heading-xlarge-500",
+        "heading-large-600": "heading-large-600",
+        "heading-large-500": "heading-large-500",
+        "heading-medium-600": "heading-medium-600",
+        "heading-medium-500": "heading-medium-500",
+        "heading-small-600": "heading-small-600",
+        "heading-small-500": "heading-small-500",
+        "heading-xsmall-600": "heading-xsmall-600",
+        "heading-xsmall-500": "heading-xsmall-500",
+        "heading-xxsmall-600": "heading-xxsmall-600",
+        "heading-xxsmall-500": "heading-xxsmall-500",
+        "body-large-700": "body-large-700",
+        "body-large-500": "body-large-500",
+        "body-large-400": "body-large-400",
+        "body-medium-700": "body-medium-700",
+        "body-medium-500": "body-medium-500",
+        "body-medium-400": "body-medium-400",
+        "body-small-700": "body-small-700",
+        "body-small-500": "body-small-500",
+        "body-small-400": "body-small-400",
+        "code-medium-400": "code-medium-400"
+      },
+      status: {
+        default: "",
+        error: "text-red-600"
+      }
+    },
+    defaultVariants: {
+      variant: "body-medium-400",
+      status: "default"
+    }
+  }
 );
-const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+const Label = React.forwardRef(({ className, variant, status, ...props }, ref) => /* @__PURE__ */ React.createElement(
   LabelPrimitive.Root,
   {
     ref,
-    className: cn(labelVariants(), className),
+    className: cn(labelVariants({ variant, status }), className),
     ...props
   }
 ));