@next-degree/pickle-shared-js 0.3.24 → 0.3.27

package/dist/components/demos/index.js

@@ -343,10 +343,10 @@ function Badge({ className, variant, ...props }) {
 }
 
 // src/components/ui/Label.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-function Label({ text, className, ...props }) {
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function Label({ text, required, className, ...props }) {
   if (!text) return null;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs5(
     "label",
     {
       className: cn(
@@ -354,19 +354,25 @@ function Label({ text, className, ...props }) {
         className
       ),
       ...props,
-      children: text
+      children: [
+        text,
+        required && /* @__PURE__ */ jsx8("span", { className: "text-red-600", children: "\xA0*" })
+      ]
     }
   );
 }
 var Label_default = Label;
 
 // src/components/ui/Combobox.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var Combobox = forwardRef6((props, ref) => {
   const {
+    id,
+    name,
     value,
     label,
     options,
+    required,
     classNames,
     multiselect,
     placeholder,
@@ -414,17 +420,17 @@ var Combobox = forwardRef6((props, ref) => {
     const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
     return isDefault ? defaultLabel : label;
   };
-  return /* @__PURE__ */ jsxs5("div", { className: cn("flex flex-col gap-2", className), children: [
-    isDefault && label && /* @__PURE__ */ jsx9(Label_default, { text: label, className: classNames?.label }),
-    /* @__PURE__ */ jsxs5("div", { className: "relative flex", children: [
-      /* @__PURE__ */ jsxs5(Popover, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col gap-1", className), children: [
+    isDefault && /* @__PURE__ */ jsx9(Label_default, { text: label, htmlFor: name, required, className: classNames?.label }),
+    /* @__PURE__ */ jsxs6("div", { className: "relative flex", children: [
+      /* @__PURE__ */ jsxs6(Popover, { open, onOpenChange: setOpen, children: [
         /* @__PURE__ */ jsx9(
           PopoverTrigger,
           {
             asChild: true,
             disabled: options.length === 0,
-            "data-testid": `${props.id ?? props.name}-combobox-trigger`,
-            children: /* @__PURE__ */ jsxs5(
+            "data-testid": `${id ?? name}-combobox-trigger`,
+            children: /* @__PURE__ */ jsxs6(
               "div",
               {
                 ref,
@@ -470,11 +476,11 @@ var Combobox = forwardRef6((props, ref) => {
             collisionPadding: 8,
             sideOffset: 4,
             align: "start",
-            children: /* @__PURE__ */ jsxs5(Command, { children: [
+            children: /* @__PURE__ */ jsxs6(Command, { children: [
               !hideSearchBox && /* @__PURE__ */ jsx9(CommandInput, { placeholder: "Search..." }),
-              /* @__PURE__ */ jsxs5(CommandList, { children: [
+              /* @__PURE__ */ jsxs6(CommandList, { children: [
                 /* @__PURE__ */ jsx9(CommandEmpty, { children: "No results" }),
-                /* @__PURE__ */ jsx9(CommandGroup, { children: options.map(({ id, ...option }) => /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx9(CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ jsx9(
                   CommandItem,
                   {
                     value: option.title,
@@ -489,7 +495,7 @@ var Combobox = forwardRef6((props, ref) => {
                       }
                     )
                   },
-                  id
+                  id2
                 )) })
               ] }),
               !!footer && /* @__PURE__ */ jsx9(Separator, {}),
@@ -647,7 +653,7 @@ var buttonVariants = cva3(
 );
 
 // src/components/demos/ComboboxDemo.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function ComboboxDemo() {
   const [selectedBands, setSelectedBands] = useState2([]);
   const [selectedFruit, setSelectedFruit] = useState2("");
@@ -687,10 +693,11 @@ function ComboboxDemo() {
     { title: "Cherry", value: "Cherry", id: "1", icon: "Cherry" },
     { title: "Grape", value: "Grape", id: "2", icon: "Grape" }
   ];
-  return /* @__PURE__ */ jsxs6("div", { className: "flex max-w-sm flex-col flex-wrap gap-4 p-4", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: "flex max-w-sm flex-col flex-wrap gap-4 p-4", children: [
     /* @__PURE__ */ jsx11(
       Combobox,
       {
+        required: true,
         label: "US bands from the 90's",
         placeholder: "Select a band",
         icon: "Music",
@@ -721,7 +728,7 @@ function ComboboxDemo() {
         options: fruits,
         value: selectedFruit,
         onChange: setSelectedFruit,
-        children: ({ close }) => /* @__PURE__ */ jsxs6("div", { className: "flex flex-row items-center justify-between bg-white p-2 pl-4", children: [
+        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" })
         ] })
@@ -778,7 +785,7 @@ 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 jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var Select = forwardRef8(
   ({ label, options, placeholder, multiselect, classNames, error, id, ...props }, ref) => {
     const { value, defaultValue, dir, className, onChange, ...rest } = props;
@@ -810,15 +817,23 @@ var Select = forwardRef8(
       });
       onChange?.(multiselect ? newSelected : newValue);
     }
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       "div",
       {
-        className: cn("flex flex-col space-y-1", className),
+        className: cn("flex 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__ */ jsxs7(
+          /* @__PURE__ */ jsx14(
+            Label_default,
+            {
+              text: label,
+              htmlFor: props.name,
+              required: props.required,
+              className: classNames?.label
+            }
+          ),
+          /* @__PURE__ */ jsxs8(
             SelectPrimitive.Root,
             {
               open,
@@ -829,7 +844,7 @@ var Select = forwardRef8(
               dir: dir === "rtl" ? "rtl" : "ltr",
               ...rest,
               children: [
-                /* @__PURE__ */ jsxs7(
+                /* @__PURE__ */ jsxs8(
                   SelectPrimitive.Trigger,
                   {
                     ref,
@@ -865,14 +880,14 @@ var Select = forwardRef8(
                     sideOffset: 4,
                     onPointerDownOutside: toggleOpen,
                     onKeyDown: closeOnEscape,
-                    children: /* @__PURE__ */ jsxs7(SelectPrimitive.Viewport, { children: [
+                    children: /* @__PURE__ */ jsxs8(SelectPrimitive.Viewport, { children: [
                       multiselect && !!chipLabels?.length && /* @__PURE__ */ jsx14(
                         SelectPrimitive.Group,
                         {
                           className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
                           "data-testid": "selected-labels",
                           children: chipLabels?.map(
-                            (chip) => chip && /* @__PURE__ */ jsxs7(Chip_default, { size: "small", variant: "primary", children: [
+                            (chip) => chip && /* @__PURE__ */ jsxs8(Chip_default, { size: "small", variant: "primary", children: [
                               /* @__PURE__ */ jsx14("span", { children: chip.title }),
                               /* @__PURE__ */ jsx14(
                                 X2,
@@ -888,7 +903,7 @@ var Select = forwardRef8(
                         }
                       ),
                       /* @__PURE__ */ jsx14(Separator, {}),
-                      options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ jsxs7(
+                      options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ jsxs8(
                         SelectPrimitive.Item,
                         {
                           value: value2,
@@ -915,7 +930,7 @@ var Select = forwardRef8(
               ]
             }
           ),
-          /* @__PURE__ */ jsx14(ErrorMessage_default, { message: error, className: "mt-1" })
+          /* @__PURE__ */ jsx14(ErrorMessage_default, { message: error })
         ]
       }
     );
@@ -925,14 +940,15 @@ Select.displayName = "Select";
 var Select_default = Select;
 
 // src/components/demos/SelectDemo.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function SelectDemo() {
-  return /* @__PURE__ */ jsxs8("div", { className: "m-4", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "m-4", children: [
     /* @__PURE__ */ jsx15("h3", { children: "Select" }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex max-w-sm flex-col gap-4 mt-2", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "mt-2 flex max-w-sm flex-col gap-4", children: [
       /* @__PURE__ */ jsx15(
         Select_default,
         {
+          required: true,
           label: "Label - Singleselect",
           placeholder: "Select an option",
           options: [
@@ -984,7 +1000,7 @@ var SelectDemo_default = SelectDemo;
 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 jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var Input = forwardRef9(
   ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
     const handleClear = () => {
@@ -995,9 +1011,17 @@ var Input = forwardRef9(
     const placeholder = props.placeholder ?? (icon === "Search" ? "Search..." : "");
     const hasIcon = !!icon;
     const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
-    return /* @__PURE__ */ jsxs9("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) }),
-      /* @__PURE__ */ jsxs9("div", { className: "relative flex flex-row items-center", children: [
+    return /* @__PURE__ */ jsxs10("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
+      label && /* @__PURE__ */ jsx16(
+        Label_default,
+        {
+          text: label,
+          htmlFor: props.name,
+          required: props.required,
+          className: classNames?.label
+        }
+      ),
+      /* @__PURE__ */ jsxs10("div", { className: "relative flex flex-row items-center", children: [
         IconComponent && /* @__PURE__ */ jsx16(
           IconComponent,
           {
@@ -1025,7 +1049,7 @@ var Input = forwardRef9(
           }
         )
       ] }),
-      /* @__PURE__ */ jsx16(ErrorMessage_default, { message: error, className: "mt-1" })
+      /* @__PURE__ */ jsx16(ErrorMessage_default, { message: error })
     ] });
   }
 );
@@ -1081,13 +1105,13 @@ var inputVariants = cva5(
 var Input_default = Input;
 
 // src/components/demos/InputDemo.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function InputDemo() {
-  return /* @__PURE__ */ jsxs10("div", { className: "m-4", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "m-4", children: [
     /* @__PURE__ */ jsx17("h3", { children: "Input" }),
-    /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2 md:flex-row", children: [
+    /* @__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, { label: "Required input", required: true }) }),
       /* @__PURE__ */ jsx17("div", { className: "p-2", children: /* @__PURE__ */ jsx17(Input_default, { icon: "MapPin" }) })
     ] })
   ] });
@@ -1095,9 +1119,9 @@ function InputDemo() {
 var InputDemo_default = InputDemo;
 
 // src/components/demos/index.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function Demos() {
-  return /* @__PURE__ */ jsxs11("div", { children: [
+  return /* @__PURE__ */ jsxs12("div", { children: [
     /* @__PURE__ */ jsx18(ComboboxDemo_default, {}),
     /* @__PURE__ */ jsx18(SelectDemo_default, {}),
     /* @__PURE__ */ jsx18(InputDemo_default, {})