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

package/dist/components/demos/index.cjs

@@ -767,10 +767,370 @@ function ComboboxDemo() {
 }
 var ComboboxDemo_default = ComboboxDemo;
 
-// src/components/demos/index.tsx
+// src/components/ui/Select.tsx
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
+var import_lucide_react7 = require("lucide-react");
+var import_react5 = require("react");
+
+// src/components/ui/ErrorMessage.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+function ErrorMessage({ message, className, ...props }) {
+  if (!message) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
+}
+var ErrorMessage_default = ErrorMessage;
+
+// src/components/ui/Chip.tsx
+var import_cva4 = require("cva");
+var import_tailwind_merge2 = require("tailwind-merge");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_tailwind_merge2.twMerge)(chipVariants({ variant, size, className })), ...props });
+var chipVariants = (0, import_cva4.cva)(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
+  variants: {
+    variant: {
+      neutral: ["text-grey-80", "border-grey-10"],
+      primary: ["text-purple-100", "border-purple-20"],
+      danger: ["text-pumpkin-100", "border-pumpkin-20"],
+      onboarding: ["text-green-100", "bg-green-10", "cursor-pointer"],
+      onboardingSelected: ["text-white", "bg-green-90", "cursor-pointer"]
+    },
+    size: {
+      small: ["text-sm", "leading-5", "px-2", "py-1", "gap-1.5"],
+      medium: ["text-base", "leading-6", "px-3", "py-2", "gap-2"]
+    }
+  },
+  defaultVariants: {
+    variant: "neutral",
+    size: "medium"
+  }
+});
+var Chip_default = Chip;
+
+// src/components/ui/Select.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Select = (0, import_react5.forwardRef)(
+  ({ label, options, placeholder, multiselect, classNames, error, id, ...props }, ref) => {
+    const { value, defaultValue, dir, className, onChange, ...rest } = props;
+    const [selected, setSelected] = (0, import_react5.useState)([]);
+    const [open, setOpen] = (0, import_react5.useState)(false);
+    const containerRef = (0, import_react5.useRef)(null);
+    (0, import_react5.useEffect)(() => {
+      if (!value) return setSelected([]);
+      setSelected(Array.isArray(value) ? value : [value]);
+    }, [value]);
+    const toggleOpen = () => setOpen((prev) => !prev);
+    const closeOnEscape = (event) => event.key === "Escape" && setOpen(false);
+    const setValueOnEnter = (event, value2) => event.key === "Enter" && handleChange(value2);
+    const chipLabels = selected?.map((s) => options?.find(({ value: value2 }) => value2 === s)).filter(Boolean);
+    function handleLabels() {
+      if (multiselect) {
+        return selected.map((o) => options?.find((option) => option.value === o)?.title).join(", ");
+      }
+      return options?.find((option) => option.value === selected.join())?.title;
+    }
+    function handleOnOpenChange(isOpen) {
+      if (!multiselect || isOpen) setOpen(isOpen);
+    }
+    function handleChange(newValue) {
+      let newSelected = [];
+      setSelected((prev) => {
+        newSelected = prev.includes(newValue) ? prev.filter((item) => item !== newValue) : [...prev, newValue];
+        return multiselect ? newSelected : [newValue];
+      });
+      onChange?.(multiselect ? newSelected : newValue);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        className: cn("flex flex-col space-y-1", className),
+        ref: containerRef,
+        "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Label_default, { text: label, className: classNames?.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            SelectPrimitive.Root,
+            {
+              open,
+              value: selected.join(","),
+              onOpenChange: handleOnOpenChange,
+              onValueChange: multiselect ? void 0 : handleChange,
+              defaultValue: typeof defaultValue === "string" ? defaultValue : void 0,
+              dir: dir === "rtl" ? "rtl" : "ltr",
+              ...rest,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                  SelectPrimitive.Trigger,
+                  {
+                    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",
+                      classNames?.trigger
+                    ),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "truncate", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        SelectPrimitive.Value,
+                        {
+                          placeholder: placeholder ?? "Select an option",
+                          "aria-label": handleLabels(),
+                          children: handleLabels()
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        import_lucide_react7.ChevronDownIcon,
+                        {
+                          className: "transform text-black group-data-[state=open]:rotate-180",
+                          size: "16"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  SelectPrimitive.Content,
+                  {
+                    hideWhenDetached: true,
+                    className: "z-10 max-h-[var(--radix-select-content-available-height)] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md bg-white py-2 shadow-lg",
+                    position: "popper",
+                    sideOffset: 4,
+                    onPointerDownOutside: toggleOpen,
+                    onKeyDown: closeOnEscape,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(SelectPrimitive.Viewport, { children: [
+                      multiselect && !!chipLabels?.length && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        SelectPrimitive.Group,
+                        {
+                          className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
+                          "data-testid": "selected-labels",
+                          children: chipLabels?.map(
+                            (chip) => chip && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Chip_default, { size: "small", variant: "primary", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: chip.title }),
+                              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                                import_lucide_react7.X,
+                                {
+                                  size: 18,
+                                  "data-testid": `chip-remove-${chip.value}`,
+                                  className: "cursor-pointer",
+                                  onClick: () => handleChange(chip.value)
+                                }
+                              )
+                            ] }, chip.title)
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Separator, {}),
+                      options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                        SelectPrimitive.Item,
+                        {
+                          value: value2,
+                          className: "group relative cursor-pointer px-4 py-2 text-left text-sm hover:bg-purple-50 focus:bg-purple-50 focus:outline-none data-[state=checked]:bg-purple-50 data-[state=checked]:pr-10 data-[state=checked]:text-purple-100",
+                          "data-state": selected.includes(value2) ? "checked" : "unchecked",
+                          onKeyDown: (e) => setValueOnEnter(e, value2),
+                          onClick: () => handleChange(value2),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectPrimitive.ItemText, { children: title }),
+                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                              import_lucide_react7.CheckIcon,
+                              {
+                                className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
+                                size: 16
+                              }
+                            )
+                          ]
+                        },
+                        id2
+                      ))
+                    ] })
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ErrorMessage_default, { message: error, className: "mt-1" })
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+var Select_default = Select;
+
+// src/components/demos/SelectDemo.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function SelectDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "m-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { children: "Select" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex max-w-sm flex-col gap-4 mt-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Select_default,
+        {
+          label: "Label - Singleselect",
+          placeholder: "Select an option",
+          options: [
+            { id: "1", value: "1", title: "Option 1" },
+            { id: "2", value: "2", title: "Option 2" },
+            { id: "3", value: "3", title: "Option 3" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Select_default,
+        {
+          multiselect: true,
+          label: "Label - Multiselect",
+          placeholder: "Select an option",
+          options: [
+            { id: "1", value: "1", title: "Option 1" },
+            { id: "2", value: "2", title: "Option 2" },
+            { id: "3", value: "3", title: "Option 3" },
+            { id: "4", value: "4", title: "Option 4" },
+            { id: "5", value: "5", title: "Option 5" },
+            { id: "6", value: "6", title: "Option 6" },
+            { id: "7", value: "7", title: "Option 7" },
+            { id: "8", value: "8", title: "Option 8" },
+            { id: "9", value: "9", title: "Option 9" },
+            { id: "10", value: "10", title: "Option 10" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Select_default,
+        {
+          disabled: true,
+          label: "Label - Disabled",
+          placeholder: "Select an option",
+          options: [
+            { id: "1", value: "1", title: "Option 1" },
+            { id: "2", value: "2", title: "Option 2" },
+            { id: "3", value: "3", title: "Option 3" }
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var SelectDemo_default = SelectDemo;
+
+// src/components/ui/Input.tsx
+var import_cva5 = require("cva");
+var import_lucide_react8 = require("lucide-react");
+var import_react6 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Input = (0, import_react6.forwardRef)(
+  ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
+    const handleClear = () => {
+      onChange?.({ target: { value: "" } });
+      onClear?.();
+    };
+    const IconComponent = icon && import_lucide_react8.icons[icon];
+    const placeholder = props.placeholder ?? (icon === "Search" ? "Search..." : "");
+    const hasIcon = !!icon;
+    const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "group flex w-full flex-col", "data-testid": `input-wrapper-${props.id}`, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, htmlFor: props.name, className: cn("body mb-1", classNames?.label) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative flex flex-row items-center", children: [
+        IconComponent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          IconComponent,
+          {
+            className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "input",
+          {
+            className: cn(inputVariants({ theme, hasIcon })),
+            ref,
+            placeholder,
+            value,
+            onChange,
+            "data-testid": `input-element-${props.id}`,
+            ...props
+          }
+        ),
+        hasIcon && value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_lucide_react8.X,
+          {
+            className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
+            onClick: handleClear,
+            "data-testid": "clear-button"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ErrorMessage_default, { message: error, className: "mt-1" })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var inputVariants = (0, import_cva5.cva)(
+  [
+    "border-input",
+    "placeholder:text-muted-foreground",
+    "focus-visible:ring-ring",
+    "inline-flex",
+    "w-full",
+    "h-11",
+    "items-center",
+    "justify-start",
+    "gap-3",
+    "rounded-lg",
+    "bg-transparent",
+    "px-3",
+    "pt-0.5",
+    "text-sm",
+    "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
+    }
+  }
+);
+var Input_default = Input;
+
+// src/components/demos/InputDemo.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function InputDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "m-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { children: "Input" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "bg-green-80 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Input_default, { theme: "dark", icon: "Search" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Input_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Input_default, { icon: "MapPin" }) })
+    ] })
+  ] });
+}
+var InputDemo_default = InputDemo;
+
+// src/components/demos/index.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Demos() {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ComboboxDemo_default, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ComboboxDemo_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectDemo_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputDemo_default, {})
+  ] });
 }
 var demos_default = Demos;
 //# sourceMappingURL=index.cjs.map