@elsapiens/ui 0.1.4 → 0.1.6

package/dist/index.d.ts

@@ -609,6 +609,12 @@ interface ModalProps {
     children: ReactNode;
     /** Optional footer content (typically action buttons) */
     footer?: ReactNode;
+    /** Whether the modal body should be scrollable (default: true) */
+    scrollable?: boolean;
+    /** Whether the modal body should have padding (default: true) */
+    padded?: boolean;
+    /** Custom header content, replaces the default title bar */
+    header?: ReactNode;
 }
 /**
  * A dialog overlay component for displaying content that requires user attention.
@@ -660,7 +666,7 @@ interface ModalProps {
  *   <ImportantFormThatShouldNotBeAccidentallyClosed />
  * </Modal>
  */
-declare function Modal({ isOpen, onClose, title, description, size, closeOnOutsideClick, closeOnEscape, showCloseButton, children, footer, }: ModalProps): react.ReactPortal | null;
+declare function Modal({ isOpen, onClose, title, description, size, closeOnOutsideClick, closeOnEscape, showCloseButton, children, footer, scrollable, padded, header, }: ModalProps): react.ReactPortal | null;
 /**
  * Props for the ConfirmDialog component.
  */
@@ -856,6 +862,10 @@ interface TooltipProps {
     delayDuration?: number;
     /** Additional CSS classes for the tooltip */
     className?: string;
+    /** Additional CSS classes for the trigger wrapper element */
+    wrapperClassName?: string;
+    /** Additional inline styles for the trigger wrapper element (useful for fixed positioning) */
+    wrapperStyle?: React.CSSProperties;
 }
 /**
  * A floating label that appears on hover/focus to provide additional context.
@@ -892,7 +902,7 @@ interface TooltipProps {
  *   <InfoIcon />
  * </Tooltip>
  */
-declare function Tooltip({ content, children, side, delayDuration, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ content, children, side, delayDuration, className, wrapperClassName, wrapperStyle, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Hook to detect mobile viewport based on window width.

package/dist/index.js

@@ -2838,7 +2838,10 @@ function Modal({
   closeOnEscape = true,
   showCloseButton = true,
   children,
-  footer
+  footer,
+  scrollable = true,
+  padded = true,
+  header
 }) {
   const modalRef = useRef7(null);
   const previousActiveElement = useRef7(null);
@@ -2911,7 +2914,7 @@ function Modal({
                 ),
                 onClick: (e) => e.stopPropagation(),
                 children: [
-                  (title || showCloseButton) && /* @__PURE__ */ jsxs10(
+                  header ? /* @__PURE__ */ jsx10("div", { className: "flex-none rounded-t-lg bg-card border-b border-border", children: header }) : title || showCloseButton ? /* @__PURE__ */ jsxs10(
                     "div",
                     {
                       className: "flex items-start justify-between border-b border-border bg-card rounded-t-lg",
@@ -2958,12 +2961,15 @@ function Modal({
                         )
                       ]
                     }
-                  ),
+                  ) : null,
                   /* @__PURE__ */ jsx10(
                     "div",
                     {
-                      className: "overflow-y-auto flex-1 min-h-0",
-                      style: { padding: "var(--modal-padding)" },
+                      className: cn10(
+                        "flex-1 min-h-0",
+                        scrollable ? "overflow-y-auto" : "overflow-hidden"
+                      ),
+                      style: padded ? { padding: "var(--modal-padding)" } : void 0,
                       children
                     }
                   ),
@@ -3238,7 +3244,9 @@ function Tooltip({
   children,
   side = "top",
   delayDuration = 200,
-  className
+  className,
+  wrapperClassName,
+  wrapperStyle
 }) {
   const [isOpen, setIsOpen] = useState9(false);
   const [position, setPosition] = useState9({ top: 0, left: 0 });
@@ -3290,7 +3298,8 @@ function Tooltip({
       "div",
       {
         ref: triggerRef,
-        className: "inline-block",
+        className: cn12("inline-block", wrapperClassName),
+        style: wrapperStyle,
         onMouseEnter: showTooltip,
         onMouseLeave: hideTooltip,
         onFocus: showTooltip,
@@ -6605,7 +6614,7 @@ var NumericInput = forwardRef12(
     const displayValue = value !== null && value !== void 0 ? String(value) : "";
     return /* @__PURE__ */ jsxs21("div", { className: "w-full", children: [
       /* @__PURE__ */ jsxs21("div", { className: "relative", children: [
-        prefix && /* @__PURE__ */ jsx22("div", { className: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-muted-foreground", children: prefix }),
+        prefix && /* @__PURE__ */ jsx22("div", { className: "el-input-prefix-icon", children: prefix }),
         /* @__PURE__ */ jsx22(
           "input",
           {
@@ -6619,14 +6628,14 @@ var NumericInput = forwardRef12(
             className: cn22(
               "el-input el-input-md el-numeric-input",
               error && "el-input-invalid",
-              prefix && "pl-8",
-              suffix && "pr-8",
+              prefix && "el-input-has-prefix-narrow",
+              suffix && "el-input-has-suffix",
               className
             ),
             ...props
           }
         ),
-        suffix && /* @__PURE__ */ jsx22("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-muted-foreground", children: suffix })
+        suffix && /* @__PURE__ */ jsx22("div", { className: "el-input-suffix-icon", children: suffix })
       ] }),
       !hideMessage && error && /* @__PURE__ */ jsx22("div", { className: "el-field-message", children: /* @__PURE__ */ jsx22("p", { className: "el-field-error", children: error }) })
     ] });
@@ -6755,10 +6764,10 @@ function PhoneInput({
           hasError && "el-input-invalid"
         ),
         children: [
-          /* @__PURE__ */ jsx23("div", { className: "flex-shrink-0 border-r border-input flex items-stretch overflow-hidden pl-2", children: /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx23("div", { className: "flex-shrink-0 border-r border-input flex items-center el-pl-md", children: /* @__PURE__ */ jsx23(
             SearchableSelect,
             {
-              className: "!border-0 !h-full !shadow-none !ring-0 !outline-none focus:!ring-0 focus:!outline-none focus-within:!ring-0 focus-within:!outline-none !rounded-none min-w-[100px] [&>button]:!border-0 [&>button]:!shadow-none [&>button]:!ring-0 [&>button]:!rounded-none [&>button]:h-full [&>button]:!ml-0",
+              className: "!border-0 !shadow-none !ring-0 !outline-none focus:!ring-0 focus:!outline-none focus-within:!ring-0 focus-within:!outline-none !rounded-none [&>button]:!border-0 [&>button]:!shadow-none [&>button]:!ring-0 [&>button]:!rounded-none [&>button]:!bg-transparent [&>button>svg]:hidden [&>button]:el-px-md",
               disabled,
               options: COUNTRY_OPTIONS,
               placeholder: "Country",
@@ -13085,9 +13094,9 @@ var Summary = forwardRef44(
                 ref: scrollContainerRef,
                 className: "overflow-x-auto hide-native-scrollbar",
                 onScroll: handleScroll,
-                children: /* @__PURE__ */ jsx58("div", { ref: itemsContainerRef, className: "flex items-center", children: items.map((item, index) => /* @__PURE__ */ jsxs49("div", { className: "flex items-center", children: [
+                children: /* @__PURE__ */ jsx58("div", { ref: itemsContainerRef, className: "flex items-center el-px-md", children: items.map((item, index) => /* @__PURE__ */ jsxs49("div", { className: "flex items-center", children: [
                   /* @__PURE__ */ jsx58(SummaryItem, { ...item }),
-                  showDividers && index < items.length - 1 && /* @__PURE__ */ jsx58("div", { className: "w-px h-8 bg-border flex-shrink-0" })
+                  showDividers && index < items.length - 1 && /* @__PURE__ */ jsx58("div", { className: "w-px h-8 bg-border flex-shrink-0 el-mx-md" })
                 ] }, index)) })
               }
             ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elsapiens/ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "UI components for elSapiens SDK",
   "license": "MIT",
   "type": "module",
@@ -20,14 +20,6 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup src/index.ts --format esm --dts --clean --external react --external react-dom --external lucide-react",
-    "dev": "tsup src/index.ts --format esm --dts --watch --external react --external react-dom --external lucide-react",
-    "clean": "rm -rf dist",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
   "publishConfig": {
     "access": "public"
   },
@@ -49,5 +41,13 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --external react --external react-dom --external lucide-react",
+    "dev": "tsup src/index.ts --format esm --dts --watch --external react --external react-dom --external lucide-react",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}