@next-degree/pickle-shared-js 0.3.25 → 0.3.30

package/dist/app/page.js

@@ -2,7 +2,7 @@
 import { useState as useState2 } from "react";
 
 // src/components/ui/Combobox.tsx
-import { forwardRef as forwardRef6, useEffect, useState } from "react";
+import { forwardRef as forwardRef7, useEffect, useState } from "react";
 import { ChevronDownIcon, CircleX, icons as icons2 } from "lucide-react";
 import { cva as cva2 } from "cva";
 
@@ -342,34 +342,66 @@ function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsx7("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
+// src/components/primitives/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React5 from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx8(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
 // src/components/ui/Label.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-function Label({ text, required, className, ...props }) {
+import { InfoIcon } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function Label({ text, required, description, className, ...props }) {
   if (!text) return null;
-  return /* @__PURE__ */ jsxs5(
-    "label",
-    {
-      className: cn(
-        "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-        className
-      ),
-      ...props,
-      children: [
-        text,
-        required && /* @__PURE__ */ jsx8("span", { className: "text-red-600", children: "\xA0*" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs5("div", { className: "flex w-full flex-row gap-1", children: [
+    /* @__PURE__ */ jsxs5(
+      "label",
+      {
+        className: cn(
+          "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          className
+        ),
+        ...props,
+        children: [
+          text,
+          required && /* @__PURE__ */ jsx9("span", { className: "text-red-600", children: "\xA0*" })
+        ]
+      }
+    ),
+    !!description && /* @__PURE__ */ jsx9(TooltipProvider, { children: /* @__PURE__ */ jsxs5(Tooltip, { children: [
+      /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(InfoIcon, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx9(TooltipContent, { className: "max-w-48", children: description })
+    ] }) })
+  ] });
 }
 var Label_default = Label;
 
 // src/components/ui/Combobox.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var Combobox = forwardRef6((props, ref) => {
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var Combobox = forwardRef7((props, ref) => {
   const {
+    id,
+    name,
     value,
     label,
     options,
+    required,
+    description,
     classNames,
     multiselect,
     placeholder,
@@ -417,16 +449,25 @@ var Combobox = forwardRef6((props, ref) => {
     const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
     return isDefault ? defaultLabel : label;
   };
-  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col gap-2", className), children: [
-    isDefault && label && /* @__PURE__ */ jsx9(Label_default, { text: label, className: classNames?.label }),
+  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col gap-1", className), children: [
+    isDefault && /* @__PURE__ */ jsx10(
+      Label_default,
+      {
+        text: label,
+        htmlFor: name,
+        required,
+        description,
+        className: classNames?.label
+      }
+    ),
     /* @__PURE__ */ jsxs6("div", { className: "relative flex", children: [
       /* @__PURE__ */ jsxs6(Popover, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           PopoverTrigger,
           {
             asChild: true,
             disabled: options.length === 0,
-            "data-testid": `${props.id ?? props.name}-combobox-trigger`,
+            "data-testid": `${id ?? name}-combobox-trigger`,
             children: /* @__PURE__ */ jsxs6(
               "div",
               {
@@ -438,9 +479,9 @@ var Combobox = forwardRef6((props, ref) => {
                 ),
                 "aria-expanded": open,
                 children: [
-                  isDefault && IconComponent && /* @__PURE__ */ jsx9(IconComponent, { className: "h-4 w-4 shrink-0" }),
-                  isChip && !isEmpty && /* @__PURE__ */ jsx9(Badge, { variant: "purple", children: selected.length }),
-                  /* @__PURE__ */ jsx9(
+                  isDefault && IconComponent && /* @__PURE__ */ jsx10(IconComponent, { className: "h-4 w-4 shrink-0" }),
+                  isChip && !isEmpty && /* @__PURE__ */ jsx10(Badge, { variant: "purple", children: selected.length }),
+                  /* @__PURE__ */ jsx10(
                     "span",
                     {
                       className: cn(
@@ -450,7 +491,7 @@ var Combobox = forwardRef6((props, ref) => {
                       children: handleDisplayValue()
                     }
                   ),
-                  showChevron && /* @__PURE__ */ jsx9(
+                  showChevron && /* @__PURE__ */ jsx10(
                     ChevronDownIcon,
                     {
                       className: "shrink-0 transform group-data-[state=open]:rotate-180",
@@ -462,7 +503,7 @@ var Combobox = forwardRef6((props, ref) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           PopoverContent,
           {
             className: cn(
@@ -474,15 +515,15 @@ var Combobox = forwardRef6((props, ref) => {
             sideOffset: 4,
             align: "start",
             children: /* @__PURE__ */ jsxs6(Command, { children: [
-              !hideSearchBox && /* @__PURE__ */ jsx9(CommandInput, { placeholder: "Search..." }),
+              !hideSearchBox && /* @__PURE__ */ jsx10(CommandInput, { placeholder: "Search..." }),
               /* @__PURE__ */ jsxs6(CommandList, { children: [
-                /* @__PURE__ */ jsx9(CommandEmpty, { children: "No results" }),
-                /* @__PURE__ */ jsx9(CommandGroup, { children: options.map(({ id, ...option }) => /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(CommandEmpty, { children: "No results" }),
+                /* @__PURE__ */ jsx10(CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ jsx10(
                   CommandItem,
                   {
                     value: option.title,
                     onSelect: () => handleSelect(option.value),
-                    children: /* @__PURE__ */ jsx9(
+                    children: /* @__PURE__ */ jsx10(
                       ListItem_default,
                       {
                         className: cn(classNames?.items, "truncate py-1"),
@@ -492,22 +533,22 @@ var Combobox = forwardRef6((props, ref) => {
                       }
                     )
                   },
-                  id
+                  id2
                 )) })
               ] }),
-              !!footer && /* @__PURE__ */ jsx9(Separator, {}),
+              !!footer && /* @__PURE__ */ jsx10(Separator, {}),
               footer && footer({ close })
             ] })
           }
         )
       ] }),
-      isDefault && !isEmpty && /* @__PURE__ */ jsx9(
+      isDefault && !isEmpty && /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
           className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
           onClick: handleClear,
-          children: /* @__PURE__ */ jsx9(CircleX, { className: "h-4 w-4 text-green-100" })
+          children: /* @__PURE__ */ jsx10(CircleX, { className: "h-4 w-4 text-green-100" })
         }
       )
     ] })
@@ -543,12 +584,12 @@ var triggerVariants = cva2(
 // src/components/ui/Button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva as cva3 } from "cva";
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Button = forwardRef7(
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Button = forwardRef8(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Component = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       Component,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -650,7 +691,7 @@ var buttonVariants = cva3(
 );
 
 // src/components/demos/ComboboxDemo.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function ComboboxDemo() {
   const [selectedBands, setSelectedBands] = useState2([]);
   const [selectedFruit, setSelectedFruit] = useState2("");
@@ -691,20 +732,22 @@ function ComboboxDemo() {
     { title: "Grape", value: "Grape", id: "2", icon: "Grape" }
   ];
   return /* @__PURE__ */ jsxs7("div", { className: "flex max-w-sm flex-col flex-wrap gap-4 p-4", children: [
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       Combobox,
       {
+        required: true,
         label: "US bands from the 90's",
         placeholder: "Select a band",
         icon: "Music",
         options: bands,
         id: "bands",
         multiselect: true,
+        description: "This is a tooltip",
         onChange: setSelectedBands,
         value: selectedBands
       }
     ),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       Combobox,
       {
         label: "US bands from the 90's",
@@ -716,7 +759,7 @@ function ComboboxDemo() {
         value: selectedBands
       }
     ),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       Combobox,
       {
         label: "Fruit label",
@@ -725,13 +768,13 @@ function ComboboxDemo() {
         value: selectedFruit,
         onChange: setSelectedFruit,
         children: ({ close }) => /* @__PURE__ */ jsxs7("div", { className: "flex flex-row items-center justify-between bg-white p-2 pl-4", children: [
-          /* @__PURE__ */ jsx11(Button, { variant: "link", tabIndex: -1, onClick: close, children: "Clear" }),
-          /* @__PURE__ */ jsx11(Button, { variant: "primary", size: "small", tabIndex: -1, children: "Apply" })
+          /* @__PURE__ */ jsx12(Button, { variant: "link", tabIndex: -1, onClick: close, children: "Clear" }),
+          /* @__PURE__ */ jsx12(Button, { variant: "primary", size: "small", tabIndex: -1, children: "Apply" })
         ] })
       }
     ),
-    selectedBands.map((band) => /* @__PURE__ */ jsx11("span", { className: "text-green-80", children: band }, band)),
-    /* @__PURE__ */ jsx11("span", { className: "text-purple-100", children: selectedFruit })
+    selectedBands.map((band) => /* @__PURE__ */ jsx12("span", { className: "text-green-80", children: band }, band)),
+    /* @__PURE__ */ jsx12("span", { className: "text-purple-100", children: selectedFruit })
   ] });
 }
 var ComboboxDemo_default = ComboboxDemo;
@@ -740,25 +783,25 @@ var ComboboxDemo_default = ComboboxDemo;
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon as CheckIcon2, ChevronDownIcon as ChevronDownIcon2, X as X2 } from "lucide-react";
 import {
-  forwardRef as forwardRef8,
+  forwardRef as forwardRef9,
   useEffect as useEffect2,
   useRef,
   useState as useState3
 } from "react";
 
 // src/components/ui/ErrorMessage.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function ErrorMessage({ message, className, ...props }) {
   if (!message) return null;
-  return /* @__PURE__ */ jsx12("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
+  return /* @__PURE__ */ jsx13("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
 }
 var ErrorMessage_default = ErrorMessage;
 
 // src/components/ui/Chip.tsx
 import { cva as cva4 } from "cva";
 import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsx13("div", { className: twMerge2(chipVariants({ variant, size, className })), ...props });
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsx14("div", { className: twMerge2(chipVariants({ variant, size, className })), ...props });
 var chipVariants = cva4(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
   variants: {
     variant: {
@@ -781,9 +824,9 @@ var chipVariants = cva4(["flex", "items-center", "rounded-3xl", "border", "w-fit
 var Chip_default = Chip;
 
 // src/components/ui/Select.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var Select = forwardRef8(
-  ({ label, options, placeholder, multiselect, classNames, error, id, ...props }, ref) => {
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var Select = forwardRef9(
+  ({ label, options, placeholder, multiselect, description, classNames, error, id, ...props }, ref) => {
     const { value, defaultValue, dir, className, onChange, ...rest } = props;
     const [selected, setSelected] = useState3([]);
     const [open, setOpen] = useState3(false);
@@ -816,11 +859,20 @@ var Select = forwardRef8(
     return /* @__PURE__ */ jsxs8(
       "div",
       {
-        className: cn("flex flex-col space-y-1", className),
+        className: cn("flex w-full flex-col gap-1", className),
         ref: containerRef,
         "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
         children: [
-          /* @__PURE__ */ jsx14(Label_default, { text: label, className: classNames?.label }),
+          /* @__PURE__ */ jsx15(
+            Label_default,
+            {
+              text: label,
+              htmlFor: props.name,
+              required: props.required,
+              description,
+              className: classNames?.label
+            }
+          ),
           /* @__PURE__ */ jsxs8(
             SelectPrimitive.Root,
             {
@@ -837,11 +889,11 @@ var Select = forwardRef8(
                   {
                     ref,
                     className: cn(
-                      "group flex h-11 min-w-80 flex-row items-center justify-between gap-3 rounded-lg border px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40",
+                      "group flex h-11 w-full flex-row items-center justify-between gap-3 rounded-lg border px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40",
                       classNames?.trigger
                     ),
                     children: [
-                      /* @__PURE__ */ jsx14("span", { className: "truncate", children: /* @__PURE__ */ jsx14(
+                      /* @__PURE__ */ jsx15("span", { className: "truncate", children: /* @__PURE__ */ jsx15(
                         SelectPrimitive.Value,
                         {
                           placeholder: placeholder ?? "Select an option",
@@ -849,7 +901,7 @@ var Select = forwardRef8(
                           children: handleLabels()
                         }
                       ) }),
-                      /* @__PURE__ */ jsx14(
+                      /* @__PURE__ */ jsx15(
                         ChevronDownIcon2,
                         {
                           className: "transform text-black group-data-[state=open]:rotate-180",
@@ -859,7 +911,7 @@ var Select = forwardRef8(
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx14(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsx15(
                   SelectPrimitive.Content,
                   {
                     hideWhenDetached: true,
@@ -869,15 +921,15 @@ var Select = forwardRef8(
                     onPointerDownOutside: toggleOpen,
                     onKeyDown: closeOnEscape,
                     children: /* @__PURE__ */ jsxs8(SelectPrimitive.Viewport, { children: [
-                      multiselect && !!chipLabels?.length && /* @__PURE__ */ jsx14(
+                      multiselect && !!chipLabels?.length && /* @__PURE__ */ jsx15(
                         SelectPrimitive.Group,
                         {
                           className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
                           "data-testid": "selected-labels",
                           children: chipLabels?.map(
                             (chip) => chip && /* @__PURE__ */ jsxs8(Chip_default, { size: "small", variant: "primary", children: [
-                              /* @__PURE__ */ jsx14("span", { children: chip.title }),
-                              /* @__PURE__ */ jsx14(
+                              /* @__PURE__ */ jsx15("span", { children: chip.title }),
+                              /* @__PURE__ */ jsx15(
                                 X2,
                                 {
                                   size: 18,
@@ -890,7 +942,7 @@ var Select = forwardRef8(
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx14(Separator, {}),
+                      /* @__PURE__ */ jsx15(Separator, {}),
                       options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ jsxs8(
                         SelectPrimitive.Item,
                         {
@@ -900,8 +952,8 @@ var Select = forwardRef8(
                           onKeyDown: (e) => setValueOnEnter(e, value2),
                           onClick: () => handleChange(value2),
                           children: [
-                            /* @__PURE__ */ jsx14(SelectPrimitive.ItemText, { children: title }),
-                            /* @__PURE__ */ jsx14(
+                            /* @__PURE__ */ jsx15(SelectPrimitive.ItemText, { children: title }),
+                            /* @__PURE__ */ jsx15(
                               CheckIcon2,
                               {
                                 className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
@@ -918,7 +970,7 @@ var Select = forwardRef8(
               ]
             }
           ),
-          /* @__PURE__ */ jsx14(ErrorMessage_default, { message: error, className: "mt-1" })
+          /* @__PURE__ */ jsx15(ErrorMessage_default, { message: error })
         ]
       }
     );
@@ -928,14 +980,15 @@ Select.displayName = "Select";
 var Select_default = Select;
 
 // src/components/demos/SelectDemo.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function SelectDemo() {
   return /* @__PURE__ */ jsxs9("div", { className: "m-4", children: [
-    /* @__PURE__ */ jsx15("h3", { children: "Select" }),
-    /* @__PURE__ */ jsxs9("div", { className: "flex max-w-sm flex-col gap-4 mt-2", children: [
-      /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16("h3", { children: "Select" }),
+    /* @__PURE__ */ jsxs9("div", { className: "mt-2 flex max-w-sm flex-col gap-4", children: [
+      /* @__PURE__ */ jsx16(
         Select_default,
         {
+          required: true,
           label: "Label - Singleselect",
           placeholder: "Select an option",
           options: [
@@ -945,12 +998,13 @@ function SelectDemo() {
           ]
         }
       ),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx16(
         Select_default,
         {
           multiselect: true,
           label: "Label - Multiselect",
           placeholder: "Select an option",
+          description: "This is a tooltip",
           options: [
             { id: "1", value: "1", title: "Option 1" },
             { id: "2", value: "2", title: "Option 2" },
@@ -965,7 +1019,7 @@ function SelectDemo() {
           ]
         }
       ),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx16(
         Select_default,
         {
           disabled: true,
@@ -986,10 +1040,10 @@ var SelectDemo_default = SelectDemo;
 // src/components/ui/Input.tsx
 import { cva as cva5 } from "cva";
 import { icons as icons3, X as X3 } from "lucide-react";
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-var Input = forwardRef9(
-  ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+var Input = forwardRef10(
+  ({ label, error, description, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
     const handleClear = () => {
       onChange?.({ target: { value: "" } });
       onClear?.();
@@ -998,16 +1052,25 @@ var Input = forwardRef9(
     const placeholder = props.placeholder ?? (icon === "Search" ? "Search..." : "");
     const hasIcon = !!icon;
     const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
-    return /* @__PURE__ */ jsxs10("div", { className: "group flex w-full flex-col", "data-testid": `input-wrapper-${props.id}`, children: [
-      label && /* @__PURE__ */ jsx16(Label_default, { text: label, htmlFor: props.name, className: cn("body mb-1", classNames?.label) }),
+    return /* @__PURE__ */ jsxs10("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
+      label && /* @__PURE__ */ jsx17(
+        Label_default,
+        {
+          text: label,
+          htmlFor: props.name,
+          required: props.required,
+          description,
+          className: classNames?.label
+        }
+      ),
       /* @__PURE__ */ jsxs10("div", { className: "relative flex flex-row items-center", children: [
-        IconComponent && /* @__PURE__ */ jsx16(
+        IconComponent && /* @__PURE__ */ jsx17(
           IconComponent,
           {
             className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           "input",
           {
             className: cn(inputVariants({ theme, hasIcon })),
@@ -1019,7 +1082,7 @@ var Input = forwardRef9(
             ...props
           }
         ),
-        hasIcon && value && /* @__PURE__ */ jsx16(
+        hasIcon && value && /* @__PURE__ */ jsx17(
           X3,
           {
             className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
@@ -1028,7 +1091,7 @@ var Input = forwardRef9(
           }
         )
       ] }),
-      /* @__PURE__ */ jsx16(ErrorMessage_default, { message: error, className: "mt-1" })
+      /* @__PURE__ */ jsx17(ErrorMessage_default, { message: error })
     ] });
   }
 );
@@ -1084,34 +1147,202 @@ var inputVariants = cva5(
 var Input_default = Input;
 
 // src/components/demos/InputDemo.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function InputDemo() {
   return /* @__PURE__ */ jsxs11("div", { className: "m-4", children: [
-    /* @__PURE__ */ jsx17("h3", { children: "Input" }),
+    /* @__PURE__ */ jsx18("h3", { children: "Input" }),
     /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ jsx17("div", { className: "bg-green-80 p-2", children: /* @__PURE__ */ jsx17(Input_default, { theme: "dark", icon: "Search" }) }),
-      /* @__PURE__ */ jsx17("div", { className: "p-2", children: /* @__PURE__ */ jsx17(Input_default, {}) }),
-      /* @__PURE__ */ jsx17("div", { className: "p-2", children: /* @__PURE__ */ jsx17(Input_default, { icon: "MapPin" }) })
+      /* @__PURE__ */ jsx18("div", { className: "bg-green-80 p-2", children: /* @__PURE__ */ jsx18(Input_default, { theme: "dark", icon: "Search" }) }),
+      /* @__PURE__ */ jsx18("div", { className: "p-2", children: /* @__PURE__ */ jsx18(Input_default, { label: "Required input", required: true, description: "This is a tooltip" }) }),
+      /* @__PURE__ */ jsx18("div", { className: "p-2", children: /* @__PURE__ */ jsx18(Input_default, { icon: "MapPin" }) })
     ] })
   ] });
 }
 var InputDemo_default = InputDemo;
 
+// src/components/ui/Counter.tsx
+import { cva as cva6 } from "cva";
+import { Minus as Minus2, Plus } from "lucide-react";
+import { forwardRef as forwardRef11, useEffect as useEffect3, useState as useState4 } from "react";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var Counter = forwardRef11(
+  ({ label, error, min, max, step = 1, description, theme, value, classNames, onChange, ...props }, ref) => {
+    const [count, setCount] = useState4(0);
+    useEffect3(() => {
+      setCount(value ?? 0);
+    }, [value]);
+    const handleChange = (e) => {
+      const newValue = parseInt(e.target.value.replace(/\D/g, ""), 10);
+      if (isNaN(newValue)) return;
+      if (min && newValue < min) {
+        onChange?.(min);
+        setCount(min);
+        return;
+      }
+      if (max && newValue > max) {
+        onChange?.(max);
+        setCount(max);
+        return;
+      }
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    const decrement = () => {
+      const proposedValue = count - step;
+      const newValue = Math.max(min ?? -Infinity, proposedValue);
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    const increment = () => {
+      const proposedValue = count + step;
+      const newValue = Math.min(max ?? Infinity, proposedValue);
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    return /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        className: cn("flex w-auto flex-col gap-1", classNames?.root),
+        "data-testid": `counter-wrapper-${props.id}`,
+        children: [
+          label && /* @__PURE__ */ jsx19(
+            Label_default,
+            {
+              text: label,
+              htmlFor: props.name,
+              required: props.required,
+              description,
+              className: classNames?.label
+            }
+          ),
+          /* @__PURE__ */ jsxs12("div", { className: "relative flex w-[122px] flex-row items-center", children: [
+            /* @__PURE__ */ jsx19(
+              "button",
+              {
+                type: "button",
+                className: "absolute inset-y-0 left-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
+                onClick: decrement,
+                children: /* @__PURE__ */ jsx19(Minus2, { className: "h-4 w-4 text-green-100" })
+              }
+            ),
+            /* @__PURE__ */ jsx19(
+              "input",
+              {
+                className: cn(counterVariants({ theme }), classNames?.input),
+                ref,
+                value: count,
+                onChange: handleChange,
+                "data-testid": `counter-element-${props.id}`,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx19(
+              "button",
+              {
+                type: "button",
+                className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
+                onClick: increment,
+                children: /* @__PURE__ */ jsx19(Plus, { className: "h-4 w-4 text-green-100" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx19(ErrorMessage_default, { message: error })
+        ]
+      }
+    );
+  }
+);
+Counter.displayName = "Counter";
+var counterVariants = cva6(
+  [
+    "border-input",
+    "placeholder:text-muted-foreground",
+    "focus-visible:ring-ring",
+    "inline-flex",
+    "w-[122px]",
+    "h-11",
+    "items-center",
+    "justify-start",
+    "gap-3",
+    "rounded-lg",
+    "bg-transparent",
+    "px-3",
+    "pt-0.5",
+    "text-sm",
+    "text-center",
+    "shadow-sm",
+    "ring-grey-50",
+    "transition-colors",
+    "focus-visible:outline-none",
+    "focus-visible:ring-1",
+    "disabled:cursor-not-allowed",
+    "disabled:opacity-50",
+    "appearance-none",
+    "[&::-webkit-search-cancel-button]:appearance-none",
+    "[&::-webkit-search-decoration]:appearance-none",
+    "[&::-webkit-search-results-button]:appearance-none",
+    "[&::-webkit-search-results-decoration]:appearance-none",
+    "[&::-ms-clear]:display-none",
+    "[&::-ms-reveal]:display-none"
+  ],
+  {
+    variants: {
+      theme: {
+        light: "text-grey-80 border",
+        dark: "text-white"
+      },
+      hasIcon: {
+        false: "pl-3",
+        true: "pl-8"
+      }
+    },
+    defaultVariants: {
+      theme: "light",
+      hasIcon: false
+    }
+  }
+);
+
+// src/components/demos/CounterDemo.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+function CounterDemo() {
+  const [count, setCount] = useState5(0);
+  return /* @__PURE__ */ jsxs13("div", { className: "m-4", children: [
+    /* @__PURE__ */ jsx20("h3", { children: "Counter" }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ jsx20("div", { className: "p-2", children: /* @__PURE__ */ jsx20(
+        Counter,
+        {
+          label: "Required Counter",
+          required: true,
+          value: count,
+          onChange: setCount,
+          description: "This is a tooltip"
+        }
+      ) }),
+      /* @__PURE__ */ jsx20("div", { className: "p-2", children: /* @__PURE__ */ jsx20(Counter, { min: 0, max: 10, step: 2 }) })
+    ] })
+  ] });
+}
+var CounterDemo_default = CounterDemo;
+
 // src/components/demos/index.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function Demos() {
-  return /* @__PURE__ */ jsxs12("div", { children: [
-    /* @__PURE__ */ jsx18(ComboboxDemo_default, {}),
-    /* @__PURE__ */ jsx18(SelectDemo_default, {}),
-    /* @__PURE__ */ jsx18(InputDemo_default, {})
+  return /* @__PURE__ */ jsxs14("div", { children: [
+    /* @__PURE__ */ jsx21(ComboboxDemo_default, {}),
+    /* @__PURE__ */ jsx21(SelectDemo_default, {}),
+    /* @__PURE__ */ jsx21(InputDemo_default, {}),
+    /* @__PURE__ */ jsx21(CounterDemo_default, {})
   ] });
 }
 var demos_default = Demos;
 
 // src/app/page.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 async function Page() {
-  return /* @__PURE__ */ jsx19(demos_default, {});
+  return /* @__PURE__ */ jsx22(demos_default, {});
 }
 var page_default = Page;
 export {