@luscii-healthtech/web-ui 40.5.0 → 40.6.0

package/dist/index.development.js

@@ -2993,7 +2993,7 @@ const FlyOutMenuContent = React__namespace.forwardRef((_a, ref) => {
   } = _a, props = __rest(_a, ["className", "sideOffset", "align", "container"]);
   return jsxRuntime.jsx(FlyOutMenuPrimitive__namespace.Portal, { container, children: jsxRuntime.jsx(FlyOutMenuPrimitive__namespace.Content, Object.assign({ onClick: (event) => {
     event.stopPropagation();
-  }, ref, align, sideOffset, className: cn("ui:z-50 ui:min-w-[8rem] ui:max-w-[30ch] ui:overflow-hidden ui:border ui:border-color-border ui:bg-white ui:shadow-large ui:radius-m", "ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2", className) }, props)) });
+  }, ref, align, sideOffset, className: cn("ui:z-50 ui:min-w-[8rem] ui:max-w-[55ch] ui:overflow-hidden ui:border ui:border-color-border ui:bg-white ui:shadow-large ui:radius-m", "ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2", className) }, props)) });
 });
 FlyOutMenuContent.displayName = FlyOutMenuPrimitive__namespace.Content.displayName;
 const FlyOutMenuItem = React__namespace.forwardRef((_a, ref) => {
@@ -4389,25 +4389,42 @@ const StyledSelect = React__namespace.default.forwardRef((_a, ref) => {
     "ui:rounded-r ui:border-r": hasSuffix
   }, "ui:flex ui:flex-col ui:items-center ui:p-3", "ui:text-sm", "ui:text-slate-500", "ui:bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative", {
     "ui:flex ui:grow": width === "full"
-  }), children: [jsxRuntime.jsx("select", Object.assign({ ref, className: classNames__default.default("styled-select", "ui:block ui:min-w-[4rem]", calculateResponsiveWidthClasses(width), {
-    "ui:bg-slate-50 ui:text-slate-400": attributes.disabled,
-    "ui:text-slate-800": !attributes.disabled,
-    "ui:border-input-border": !attributes.disabled && !isError,
-    "ui:hover:border-input-border-dark": !attributes.disabled,
-    "ui:border-red-700": isError,
-    "ui:focus:outline-negative": isError,
-    "ui:focus:border-primary": !isError,
-    "ui:focus:outline-primary": !isError,
-    "ui:bg-white": !attributes.disabled
-  }, "ui:h-11", "ui:p-2", "ui:border", "ui:text-base ui:sm:text-sm", "ui:placeholder-slate-500", "ui:border-solid", "ui:transition-colors", "ui:duration-300", {
-    "ui:rounded": hasNoExtraContent,
-    "ui:rounded-l": hasSuffix,
-    "ui:rounded-r": hasPrefix,
-    "ui:order-2": hasPrefix,
-    "ui:order-1": hasSuffix
-  }, "ui:shadow-default", className) }, attributes, { children })), jsxRuntime.jsx("div", { className: "ui:pointer-events-none ui:absolute ui:right-0 ui:top-1/2", style: {
+  }), children: [jsxRuntime.jsx("select", Object.assign({ ref, className: classNames__default.default(
+    "styled-select",
+    "ui:block ui:min-w-[4rem]",
+    calculateResponsiveWidthClasses(width),
+    {
+      "ui:bg-slate-50 ui:text-slate-400": attributes.disabled,
+      "ui:text-slate-800": !attributes.disabled,
+      "ui:border-input-border": !attributes.disabled && !isError,
+      "ui:hover:border-input-border-dark": !attributes.disabled,
+      "ui:border-red-700": isError,
+      "ui:focus:outline-negative": isError,
+      "ui:focus:border-primary": !isError,
+      "ui:focus:outline-primary": !isError,
+      "ui:bg-white": !attributes.disabled
+    },
+    "ui:h-11",
+    "ui:p-2 ui:pr-10",
+    // pr-10 to account for the chevron icon
+    "ui:border",
+    "ui:text-base ui:sm:text-sm",
+    "ui:placeholder-slate-500",
+    "ui:border-solid",
+    "ui:transition-colors",
+    "ui:duration-300",
+    {
+      "ui:rounded": hasNoExtraContent,
+      "ui:rounded-l": hasSuffix,
+      "ui:rounded-r": hasPrefix,
+      "ui:order-2": hasPrefix,
+      "ui:order-1": hasSuffix
+    },
+    "ui:shadow-default",
+    className
+  ) }, attributes, { children })), jsxRuntime.jsx("div", { className: "ui:pointer-events-none ui:absolute ui:right-0 ui:top-1/2 ui:z-20", style: {
     transform: "translateY(-50%)"
-  }, children: jsxRuntime.jsx(ChevronDownIcon, { className: classNames__default.default("ui:mr-3 ui:h-6 ui:w-6 ui:bg-white ui:text-slate-300") }) })] })] });
+  }, children: jsxRuntime.jsx(ChevronDownIcon, { className: classNames__default.default("ui:mr-3 ui:h-6 ui:w-6 ui:text-slate-300") }) })] })] });
 });
 
 const LabeledSelect = React__namespace.default.forwardRef((props, ref) => {
@@ -5841,6 +5858,74 @@ PageWithCenteredContentLayout.displayName = "PageWithCenteredContentLayout";
 PageWithCenteredContentLayout.Header = Header;
 PageWithCenteredContentLayout.Main = Main;
 
+const InputSelectInput = React__namespace.default.forwardRef((props, ref) => {
+  return jsxRuntime.jsx(Input, Object.assign({ ref }, props));
+});
+InputSelectInput.displayName = "InputSelect.Input";
+
+const InputSelectSelect = React__namespace.default.forwardRef((props, ref) => {
+  return jsxRuntime.jsx(StyledSelect, Object.assign({ ref }, props));
+});
+InputSelectSelect.displayName = "InputSelect.Select";
+
+const createStyledSelectChild = (child, isFirstChild) => {
+  const isDisabled = child.props.disabled;
+  const isError = child.props.isError;
+  const zIndexClass = isDisabled ? "ui:relative" : isError ? "ui:relative ui:z-[2] ui:hover:z-[3] ui:focus:z-[4]" : "ui:relative ui:z-0 ui:hover:z-[3] ui:focus:z-[4]";
+  const borderRadiusClass = isFirstChild ? "ui:rounded-r-none ui:focus:rounded-r-none" : "ui:rounded-l-none ui:focus:rounded-l-none";
+  const marginClass = isFirstChild ? "" : "ui:-ml-px";
+  return React__namespace.default.cloneElement(child, Object.assign(Object.assign({}, child.props), { className: classNames__default.default(child.props.className, zIndexClass, marginClass, borderRadiusClass), style: Object.assign({ backgroundColor: "var(--ui-color-background)", color: "var(--ui-color-on-surface-variant)" }, child.props.style) }));
+};
+const createStyledInputChild = (child, isFirstChild) => {
+  const isFullWidth = child.props.width === "full";
+  const hasExplicitWidth = child.props.width !== void 0;
+  const isDisabled = child.props.isDisabled;
+  const isError = child.props.isError;
+  const zIndexClass = isDisabled ? "ui:relative" : isError ? "ui:relative ui:z-[2] ui:hover:z-[3] ui:focus:z-[4]" : isFirstChild ? "ui:relative ui:z-[1] ui:focus:z-[4]" : "ui:relative ui:z-0 ui:focus:z-[4]";
+  const borderRadiusClass = isFirstChild ? "ui:rounded-r-none ui:focus:rounded-r-none" : "ui:rounded-l-none ui:focus:rounded-l-none";
+  const marginClass = hasExplicitWidth ? "" : isFirstChild ? "ui:-mr-px" : "ui:-ml-px";
+  const styledInput = React__namespace.default.cloneElement(child, Object.assign(Object.assign({}, child.props), { className: classNames__default.default(child.props.className, zIndexClass, borderRadiusClass, marginClass) }));
+  if (isFullWidth) {
+    return jsxRuntime.jsx("div", { className: "ui:flex-1", children: styledInput });
+  }
+  return styledInput;
+};
+
+const InputSelect = React__namespace.default.forwardRef((props, ref) => {
+  const { className, children } = props;
+  const childrenArray = React__namespace.default.Children.toArray(children);
+  if (childrenArray.length !== 2) {
+    console.error("InputSelect requires exactly 2 children: InputSelect.Input and InputSelect.Select");
+    return null;
+  }
+  const inputChild = childrenArray.find((child) => React__namespace.default.isValidElement(child) && child.type === InputSelectInput);
+  const selectChild = childrenArray.find((child) => React__namespace.default.isValidElement(child) && child.type === InputSelectSelect);
+  if (!inputChild || !selectChild) {
+    console.error("InputSelect requires exactly one InputSelect.Input and one InputSelect.Select");
+    return null;
+  }
+  const styledChildren = childrenArray.map((child, index) => {
+    if (!React__namespace.default.isValidElement(child)) {
+      return child;
+    }
+    const isFirstChild = index === 0;
+    const isSelectChild = child.type === InputSelectSelect;
+    const isInputChild = child.type === InputSelectInput;
+    if (isSelectChild) {
+      return createStyledSelectChild(child, isFirstChild);
+    } else if (isInputChild) {
+      return createStyledInputChild(child, isFirstChild);
+    }
+    return child;
+  });
+  return jsxRuntime.jsx(Stack, { ref, axis: "x", className, children: styledChildren });
+});
+InputSelect.displayName = "InputSelect";
+const InputSelectWithSubComponents = Object.assign(InputSelect, {
+  Input: InputSelectInput,
+  Select: InputSelectSelect
+});
+
 Object.defineProperty(exports, "Toaster", {
     enumerable: true,
     get: function () { return sonner.Toaster; }
@@ -5973,6 +6058,7 @@ exports.ImageLibraryIcon = ImageLibraryIcon;
 exports.InfoField = InfoField;
 exports.InfoIcon = InfoIcon;
 exports.Input = Input;
+exports.InputSelect = InputSelectWithSubComponents;
 exports.LabelText = LabelText;
 exports.LabeledDatePicker = LabeledDatePicker;
 exports.LabeledInput = LabeledInput;