analytica-frontend-lib 1.0.49 → 1.0.51

package/dist/index.js

@@ -3353,14 +3353,27 @@ var import_react12 = require("react");
 var import_phosphor_react10 = require("phosphor-react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var VARIANT_CLASSES4 = {
-  outlined: "border rounded-sm focus:border-primary-950",
+  outlined: "border rounded-lg focus:border-primary-950",
   underlined: "border-b focus:border-primary-950",
-  rounded: "border rounded-4xl focus:border-primary-950"
+  rounded: "border rounded-full focus:border-primary-950"
 };
 var SIZE_CLASSES11 = {
   small: "text-sm",
   medium: "text-md",
-  large: "text-lg"
+  large: "text-lg",
+  "extra-large": "text-lg"
+};
+var HEIGHT_CLASSES = {
+  small: "h-8",
+  medium: "h-9",
+  large: "h-10",
+  "extra-large": "h-12"
+};
+var PADDING_CLASSES = {
+  small: "px-2 py-1",
+  medium: "px-3 py-2",
+  large: "px-4 py-3",
+  "extra-large": "px-5 py-4"
 };
 var SIDE_CLASSES2 = {
   top: "bottom-full -translate-y-1",
@@ -3373,14 +3386,15 @@ var ALIGN_CLASSES2 = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-function createSelectStore() {
+function createSelectStore(onValueChange) {
   return (0, import_zustand3.create)((set) => ({
     open: false,
     setOpen: (open) => set({ open }),
     value: "",
     setValue: (value) => set({ value }),
     selectedLabel: "",
-    setSelectedLabel: (label) => set({ selectedLabel: label })
+    setSelectedLabel: (label) => set({ selectedLabel: label }),
+    onValueChange
   }));
 }
 var useSelectStore = (externalStore) => {
@@ -3399,15 +3413,24 @@ function getLabelAsNode(children) {
   if (flattened.length === 1) return flattened[0];
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: flattened });
 }
-var injectStore2 = (children, store) => {
+var injectStore2 = (children, store, size, selectId) => {
   return import_react12.Children.map(children, (child) => {
     if ((0, import_react12.isValidElement)(child)) {
       const typedChild = child;
       const newProps = {
         store
       };
+      if (typedChild.type === SelectTrigger) {
+        newProps.size = size;
+        newProps.selectId = selectId;
+      }
       if (typedChild.props.children) {
-        newProps.children = injectStore2(typedChild.props.children, store);
+        newProps.children = injectStore2(
+          typedChild.props.children,
+          store,
+          size,
+          selectId
+        );
       }
       return (0, import_react12.cloneElement)(typedChild, newProps);
     }
@@ -3419,16 +3442,19 @@ var Select = ({
   defaultValue = "",
   value: propValue,
   onValueChange,
-  size = "small"
+  size = "small",
+  label,
+  helperText,
+  errorMessage,
+  id
 }) => {
   const storeRef = (0, import_react12.useRef)(null);
-  storeRef.current ??= createSelectStore();
+  storeRef.current ??= createSelectStore(onValueChange);
   const store = storeRef.current;
   const selectRef = (0, import_react12.useRef)(null);
-  const { open, setOpen, setValue, value, selectedLabel } = (0, import_zustand3.useStore)(
-    store,
-    (s) => s
-  );
+  const { open, setOpen, setValue, selectedLabel } = (0, import_zustand3.useStore)(store, (s) => s);
+  const generatedId = (0, import_react12.useId)();
+  const selectId = id ?? `select-${generatedId}`;
   const findLabelForValue = (children2, targetValue) => {
     let found = null;
     const search = (nodes) => {
@@ -3448,8 +3474,8 @@ var Select = ({
   };
   (0, import_react12.useEffect)(() => {
     if (!selectedLabel && defaultValue) {
-      const label = findLabelForValue(children, defaultValue);
-      if (label) store.setState({ selectedLabel: label });
+      const label2 = findLabelForValue(children, defaultValue);
+      if (label2) store.setState({ selectedLabel: label2 });
     }
   }, [children, defaultValue, selectedLabel]);
   (0, import_react12.useEffect)(() => {
@@ -3487,19 +3513,33 @@ var Select = ({
       document.removeEventListener("keydown", handleArrowKeys);
     };
   }, [open]);
-  (0, import_react12.useEffect)(() => {
-    setValue(value);
-    onValueChange?.(value);
-  }, [value, onValueChange]);
   (0, import_react12.useEffect)(() => {
     if (propValue) {
       setValue(propValue);
-      const label = findLabelForValue(children, propValue);
-      if (label) store.setState({ selectedLabel: label });
+      const label2 = findLabelForValue(children, propValue);
+      if (label2) store.setState({ selectedLabel: label2 });
     }
   }, [propValue]);
   const sizeClasses = SIZE_CLASSES11[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "label",
+      {
+        htmlFor: selectId,
+        className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `relative ${sizeClasses}`, ref: selectRef, children: injectStore2(children, store, size, selectId) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
+      helperText && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react10.WarningCircle, { size: 16 }),
+        " ",
+        errorMessage
+      ] })
+    ] })
+  ] });
 };
 var SelectValue = ({
   placeholder,
@@ -3517,18 +3557,24 @@ var SelectTrigger = (0, import_react12.forwardRef)(
     variant = "outlined",
     store: externalStore,
     disabled,
+    size = "medium",
+    selectId,
     ...props
   }, ref) => {
     const store = useSelectStore(externalStore);
     const open = (0, import_zustand3.useStore)(store, (s) => s.open);
     const toggleOpen = () => store.setState({ open: !open });
     const variantClasses = VARIANT_CLASSES4[variant];
+    const heightClasses = HEIGHT_CLASSES[size];
+    const paddingClasses = PADDING_CLASSES[size];
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "button",
       {
         ref,
+        id: selectId,
         className: `
-        flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2
+        flex min-w-[220px] w-full items-center justify-between border-border-300
+        ${heightClasses} ${paddingClasses}
         ${invalid && `${variant == "underlined" ? "border-b-2" : "border-2"} border-indicator-error text-text-600`}
         ${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
         ${!invalid && !disabled ? "text-text-700" : ""}
@@ -3594,7 +3640,8 @@ var SelectItem = (0, import_react12.forwardRef)(
       value: selectedValue,
       setValue,
       setOpen,
-      setSelectedLabel
+      setSelectedLabel,
+      onValueChange
     } = (0, import_zustand3.useStore)(store, (s) => s);
     const handleClick = (e) => {
       const labelNode = getLabelAsNode(children);
@@ -3602,6 +3649,7 @@ var SelectItem = (0, import_react12.forwardRef)(
         setValue(value);
         setSelectedLabel(labelNode);
         setOpen(false);
+        onValueChange?.(value);
       }
       props.onClick?.(e);
     };