@bunnix/components 0.9.2 → 0.9.4

package/src/components/DatePicker.mjs

@@ -1,7 +1,7 @@
-import Bunnix, { ForEach, useMemo, useRef, useState } from "@bunnix/core";
+import Bunnix, { ForEach, useMemo, useRef, useState, useEffect } from "@bunnix/core";
 import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 import Icon from "./Icon.mjs";
-const { div, button, span, hr } = Bunnix;
+const { div, label, input: inputEl, button, span, hr } = Bunnix;
 
 const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 
@@ -10,7 +10,44 @@ const isSameDay = (a, b) =>
 
 const toMidnight = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
 
-const formatDate = (date, formatter) => (date ? formatter.format(date) : "");
+const formatDate = (date, format = "DD/MM/YYYY") => {
+  if (!date) return "";
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+  return `${day}/${month}/${year}`;
+};
+
+const parseDate = (str) => {
+  if (!str) return null;
+  const parts = str.split("/");
+  if (parts.length !== 3) return null;
+  const day = parseInt(parts[0], 10);
+  const month = parseInt(parts[1], 10) - 1;
+  const year = parseInt(parts[2], 10);
+  if (isNaN(day) || isNaN(month) || isNaN(year)) return null;
+  const date = new Date(year, month, day);
+  if (date.getDate() !== day || date.getMonth() !== month || date.getFullYear() !== year) {
+    return null;
+  }
+  return date;
+};
+
+const applyDateMask = (value) => {
+  // Remove all non-digits
+  const digits = value.replace(/\D/g, "");
+  
+  // Apply mask DD/MM/YYYY
+  let masked = "";
+  for (let i = 0; i < digits.length && i < 8; i++) {
+    if (i === 2 || i === 4) {
+      masked += "/";
+    }
+    masked += digits[i];
+  }
+  
+  return masked;
+};
 
 const buildCalendar = (viewDate) => {
   if (!viewDate) return [];
@@ -49,25 +86,33 @@ const buildCalendar = (viewDate) => {
 
 export default function DatePicker({
   id,
-  placeholder,
+  placeholder = "DD/MM/YYYY",
   range = false,
   variant = "regular",
   size = "regular",
+  label: labelText,
+  disabled = false,
+  value,
+  onInput,
+  onChange,
+  onFocus,
+  onBlur,
+  input,
+  change,
+  focus,
+  blur,
   class: className = ""
 } = {}) {
   const popoverRef = useRef(null);
+  const inputRef = useRef(null);
   const pickerId = id || `datepicker-${Math.random().toString(36).slice(2, 8)}`;
   const anchorName = `--${pickerId}`;
 
-  const formatter = useMemo([], () => {
-    return new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
-  });
-
-  const selectedStart = useState(null);
+  const selectedStart = useState(value || null);
   const selectedEnd = useState(null);
-  const inputValue = useState("");
+  const inputValue = useState(value ? formatDate(value) : "");
 
-  const viewDate = useState(new Date());
+  const viewDate = useState(value || new Date());
 
   const calendar = useMemo([viewDate], (value) => buildCalendar(value));
   const monthLabel = useMemo([viewDate], (value) => {
@@ -92,15 +137,47 @@ export default function DatePicker({
     }
   };
 
+  // Handle click outside and escape key for manual popover
+  useEffect((popoverElement) => {
+    if (!popoverElement) return;
+
+    const handleClickOutside = (e) => {
+      if (!popoverElement.matches(":popover-open")) return;
+      
+      const input = inputRef.current;
+      const isClickInside = popoverElement.contains(e.target);
+      const isClickOnInput = input && input.contains(e.target);
+      
+      if (!isClickInside && !isClickOnInput) {
+        closePopover();
+      }
+    };
+
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && popoverElement.matches(":popover-open")) {
+        closePopover();
+        inputRef.current?.focus();
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside, true);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, popoverRef);
+
   const setSelection = (start, end = null) => {
     selectedStart.set(start);
     selectedEnd.set(end);
     if (range) {
-      const startText = formatDate(start, formatter.get());
-      const endText = end ? formatDate(end, formatter.get()) : "";
+      const startText = formatDate(start);
+      const endText = end ? formatDate(end) : "";
       inputValue.set(endText ? `${startText} - ${endText}` : startText);
     } else {
-      inputValue.set(formatDate(start, formatter.get()));
+      inputValue.set(formatDate(start));
     }
   };
 
@@ -118,6 +195,12 @@ export default function DatePicker({
     } else {
       setSelection(date, null);
       closePopover();
+      
+      // Trigger change handlers
+      const handleChange = onChange ?? change;
+      if (handleChange) {
+        handleChange({ target: { value: formatDate(date) }, date });
+      }
     }
     viewDate.set(new Date(date.getFullYear(), date.getMonth(), 1));
   };
@@ -143,66 +226,159 @@ export default function DatePicker({
     selectedEnd.set(null);
     inputValue.set("");
     closePopover();
+    
+    const handleChange = onChange ?? change;
+    if (handleChange) {
+      handleChange({ target: { value: "" }, date: null });
+    }
   };
 
-  // Single reactive source for the label text
-  const displayLabel = inputValue.map(v => {
-    if (v) return v;
-    if (placeholder) return placeholder;
-
-    const today = new Date();
-    const fmt = formatter.get();
+  const handleOK = () => {
+    // Update the main input with the currently selected date when OK is clicked
+    const start = selectedStart.get();
+    const end = selectedEnd.get();
+    
     if (range) {
-      const tomorrow = new Date(today);
-      tomorrow.setDate(today.getDate() + 1);
-      return `${formatDate(today, fmt)} - ${formatDate(tomorrow, fmt)}`;
+      if (start && end) {
+        const startText = formatDate(start);
+        const endText = formatDate(end);
+        const value = `${startText} - ${endText}`;
+        inputValue.set(value);
+        
+        const handleChange = onChange ?? change;
+        if (handleChange) {
+          handleChange({ target: { value }, dateStart: start, dateEnd: end });
+        }
+      } else if (start) {
+        const value = formatDate(start);
+        inputValue.set(value);
+        
+        const handleChange = onChange ?? change;
+        if (handleChange) {
+          handleChange({ target: { value }, dateStart: start, dateEnd: null });
+        }
+      }
+    } else {
+      if (start) {
+        const value = formatDate(start);
+        inputValue.set(value);
+        
+        const handleChange = onChange ?? change;
+        if (handleChange) {
+          handleChange({ target: { value }, date: start });
+        }
+      }
     }
-    return formatDate(today, fmt);
-  });
+    
+    closePopover();
+  };
 
-  const hasValue = inputValue.map(v => !!v);
+  const handleInputChange = (e) => {
+    const rawValue = e.target.value;
+    const maskedValue = applyDateMask(rawValue);
+    inputValue.set(maskedValue);
+    
+    // Try to parse the date if complete
+    if (maskedValue.length === 10) {
+      const parsedDate = parseDate(maskedValue);
+      if (parsedDate) {
+        selectedStart.set(parsedDate);
+        viewDate.set(new Date(parsedDate.getFullYear(), parsedDate.getMonth(), 1));
+        
+        const handleChange = onChange ?? change;
+        if (handleChange) {
+          handleChange({ target: { value: maskedValue }, date: parsedDate });
+        }
+      }
+    }
+    
+    const handleInput = onInput ?? input;
+    if (handleInput) {
+      handleInput(e);
+    }
+  };
 
-  // DatePicker does not support small size (clamps to regular)
-  const normalizeSize = (value) => clampSize(value, ["xsmall", "regular", "large", "xlarge"], "regular");
+  const handleInputFocus = (e) => {
+    openPopover();
+    
+    const handleFocus = onFocus ?? focus;
+    if (handleFocus) {
+      handleFocus(e);
+    }
+  };
+
+  const handleInputBlur = (e) => {
+    // Don't close popover on blur - let it handle its own dismissal
+    // The popover will close when clicking outside or pressing escape
+    
+    const handleBlur = onBlur ?? blur;
+    if (handleBlur) {
+      handleBlur(e);
+    }
+  };
+
+  const handleCalendarIconClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const input = inputRef.current;
+    if (input) {
+      input.focus();
+    }
+  };
+
+  // DatePicker supports regular, large, xlarge (no xsmall, small)
+  const normalizeSize = (value) => clampSize(value, ["regular", "large", "xlarge"], "regular");
   const normalizedSize = normalizeSize(size);
   const sizeToken = toSizeToken(normalizedSize);
+  const sizeClass = sizeToken === "xl" ? "input-xl" : sizeToken === "lg" ? "input-lg" : "";
   const variantClass = variant === "rounded" ? "rounded-full" : "";
-  const triggerSizeClass = sizeToken === "xl"
-    ? "dropdown-xl"
-    : sizeToken === "lg"
-      ? "dropdown-lg"
-      : "";
-  const iconSizeValue = normalizedSize === "small"
-    ? "small"
-    : normalizedSize === "large"
-      ? "large"
-      : normalizedSize === "xlarge"
-        ? "xlarge"
-        : undefined;
-
-  return div({ class: `datepicker-wrapper ${className}`.trim() }, [
-    button({
-      id: pickerId,
-      class: `dropdown-trigger datepicker-trigger justify-start ${variantClass} ${triggerSizeClass} no-chevron`.trim(),
-      style: `anchor-name: ${anchorName}`,
-      click: openPopover
-    }, [
-      span({ class: hasValue.map(h => h ? "" : "text-tertiary") }, displayLabel),
-      Icon({ name: "calendar", fill: "quaternary", size: iconSizeValue, class: "ml-auto" })
+  const iconSizeValue = normalizedSize === "large"
+    ? "large"
+    : normalizedSize === "xlarge"
+      ? "xlarge"
+      : undefined;
+
+  return div({ class: `column-container no-margin shrink-0 gap-0 ${className}`.trim() }, [
+    labelText && label({ class: "label select-none" }, labelText),
+    div({ class: "datepicker-input-wrapper w-full relative" }, [
+      inputEl({
+        ref: inputRef,
+        id: pickerId,
+        type: "text",
+        value: inputValue,
+        placeholder,
+        disabled,
+        autocomplete: "off",
+        class: `input ${sizeClass} ${variantClass} pr-xl`.trim(),
+        style: `anchor-name: ${anchorName}`,
+        input: handleInputChange,
+        focus: handleInputFocus,
+        blur: handleInputBlur,
+        maxlength: "10"
+      }),
+      button({
+        class: "datepicker-icon-button",
+        type: "button",
+        disabled,
+        click: handleCalendarIconClick,
+        tabindex: "-1"
+      }, [
+        Icon({ name: "calendar", fill: "quaternary", size: iconSizeValue })
+      ])
     ]),
     div({
       ref: popoverRef,
-      popover: "auto",
+      popover: "manual",
       class: "datepicker-popover popover-base",
       style: `--anchor-id: ${anchorName}`
     }, [
       div({ class: "card column-container shadow gap-0 p-0 bg-base datepicker-card" }, [
         div({ class: "row-container items-center justify-between datepicker-header p-sm no-margin" }, [
-          button({ class: "btn btn-flat datepicker-nav", click: handlePrevMonth }, [
+          button({ type: "button", class: "btn btn-flat datepicker-nav", click: handlePrevMonth }, [
             span({ class: "icon icon-chevron-left icon-base" })
           ]),
           span({ class: "datepicker-title" }, monthLabel),
-          button({ class: "btn btn-flat datepicker-nav", click: handleNextMonth }, [
+          button({ type: "button", class: "btn btn-flat datepicker-nav", click: handleNextMonth }, [
             span({ class: "icon icon-chevron-right icon-base" })
           ])
         ]),
@@ -231,6 +407,7 @@ export default function DatePicker({
               ].filter(Boolean).join(" ");
 
               return button({
+                type: "button",
                 class: classNames,
                 click: () => handleDayClick(cell.date)
               }, cell.date.getDate().toString());
@@ -239,9 +416,9 @@ export default function DatePicker({
         ]),
         hr({ class: "no-margin" }),
         div({ class: "row-container justify-center items-center gap-md p-base shrink-0 datepicker-footer" }, [
-          button({ class: "btn btn-flat", click: handleClear }, "Clear"),
-          button({ class: "btn btn-flat", click: handleToday }, "Today"),
-          button({ class: "btn", click: closePopover }, "OK")
+          button({ type: "button", class: "btn btn-flat", click: handleClear }, "Clear"),
+          button({ type: "button", class: "btn btn-flat", click: handleToday }, "Today"),
+          button({ type: "button", class: "btn", click: handleOK }, "OK")
         ])
       ])
     ])

package/src/components/Dialog.mjs

@@ -136,7 +136,7 @@ export default function Dialog() {
     VStack({
       ref: panelRef,
       gap: "regular",
-      class: "box-capsule dialog-panel shadow bg-base p-lg items-stretch dialog-appear"
+      class: "box-capsule dialog-panel shadow bg-base border-solid p-lg items-stretch dialog-appear"
     }, [
       HStack({ alignment: "leading", gap: "small", class: "items-center w-full" }, [
         Text({ type: "heading4", class: "no-margin" }, dialogState.map((value) => value.title)),

package/src/components/InputField.mjs

@@ -1,5 +1,6 @@
-import Bunnix, { useRef, useEffect } from "@bunnix/core";
+import Bunnix, { useRef, useEffect, useState } from "@bunnix/core";
 import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
+import { applyMask, getMaskMaxLength } from "../utils/maskUtils.mjs";
 const { div, label, input: inputEl, datalist, option, span } = Bunnix;
 
 export default function InputField({
@@ -11,6 +12,8 @@ export default function InputField({
   placeholder,
   label: labelText,
   disabled = false,
+  autocomplete,
+  mask,
   suggestions = [],
   onInput,
   onChange,
@@ -26,6 +29,10 @@ export default function InputField({
 } = {}) {
   const inputRef = useRef(null);
   const listId = suggestions.length > 0 ? `list-${Math.random().toString(36).slice(2, 8)}` : null;
+  
+  // Initialize masked value based on initial value and mask
+  const initialMaskedValue = mask && value ? applyMask(value, mask) : (value || "");
+  const maskedValue = useState(initialMaskedValue);
 
   // InputField supports regular, large, xlarge (no xsmall, small)
   const normalizeSize = (value) => clampSize(value, ["regular", "large", "xlarge"], "regular");
@@ -48,19 +55,61 @@ export default function InputField({
   const handleBlur = onBlur ?? blur;
   const handleKeyDown = onKeyDown ?? keydown;
 
+  const handleMaskedInput = (e) => {
+    if (mask) {
+      const rawValue = e.target.value;
+      const masked = applyMask(rawValue, mask);
+      maskedValue.set(masked);
+      
+      // Update the input element value
+      e.target.value = masked;
+      
+      // Create a new event with the masked value
+      const maskedEvent = {
+        ...e,
+        target: { ...e.target, value: masked }
+      };
+      
+      if (handleInput) {
+        handleInput(maskedEvent);
+      }
+      if (handleChange) {
+        handleChange(maskedEvent);
+      }
+    } else {
+      if (handleInput) {
+        handleInput(e);
+      }
+    }
+  };
+
+  const handleMaskedChange = (e) => {
+    if (!mask && handleChange) {
+      handleChange(e);
+    }
+  };
+
+  // Determine maxlength based on mask
+  const maxLength = mask ? getMaskMaxLength(mask) : rest.maxlength;
+  
+  // Remove maxlength from rest to avoid override
+  const { maxlength: _maxlength, ...restWithoutMaxLength } = rest;
+
   const inputElement = inputEl({
     ref: inputRef,
     type,
-    value: value ?? "",
+    value: mask ? maskedValue : (value ?? ""),
     placeholder: placeholder ?? "", // Ensure placeholder is never undefined to avoid "false" text
     disabled,
+    autocomplete: autocomplete ?? "off", // Default to off to prevent browser autocomplete suggestions
+    maxlength: maxLength,
     class: `input ${combinedClass}`.trim(),
-    input: handleInput,
-    change: handleChange,
+    input: handleMaskedInput,
+    change: handleMaskedChange,
     focus: handleFocus,
     blur: handleBlur,
     keydown: handleKeyDown,
-    ...rest
+    ...restWithoutMaxLength
   });
 
   const iconSizeClass = sizeToken === "xl"
@@ -76,7 +125,7 @@ export default function InputField({
       ])
     : inputElement;
 
-  return div({ class: "column-container no-margin shrink-0" }, [
+  return div({ class: "column-container no-margin shrink-0 gap-0" }, [
     labelText && label({ class: "label select-none" }, labelText),
     inputBlock,
     listId && datalist({ id: listId },

package/src/components/ProgressBar.mjs

@@ -0,0 +1,81 @@
+import Bunnix from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
+
+const { div } = Bunnix;
+
+export default function ProgressBar({
+  value = 0,
+  min = 0,
+  max = 100,
+  size,
+  color = "default",
+  class: className = "",
+  ...rest
+} = {}) {
+  const isState = (val) => val && typeof val.map === "function";
+  const normalizeSize = (val) =>
+    clampSize(val, ["xsmall", "small", "regular", "large", "xlarge"], "regular");
+
+  const sizeState = isState(size) ? size : null;
+  const classState = isState(className) ? className : null;
+  const colorState = isState(color) ? color : null;
+  const valueState = isState(value) ? value : null;
+  const minState = isState(min) ? min : null;
+  const maxState = isState(max) ? max : null;
+
+  const buildClass = (sizeValue, classValue) => {
+    const normalizedSize = normalizeSize(sizeValue);
+    const sizeToken = toSizeToken(normalizedSize);
+    const sizeClass = sizeToken ? `progress-bar-${sizeToken}` : "";
+    return `progress-bar ${sizeClass} ${classValue || ""}`.trim();
+  };
+
+  const buildFillClass = (colorValue) => {
+    const resolvedColor = colorValue || "default";
+    return `progress-bar-fill text-${resolvedColor}`.trim();
+  };
+
+  const clampPercent = (val, minValue, maxValue) => {
+    const safeMin = Number.isFinite(Number(minValue)) ? Number(minValue) : 0;
+    const safeMax = Number.isFinite(Number(maxValue)) ? Number(maxValue) : 100;
+    const safeValue = Number.isFinite(Number(val)) ? Number(val) : 0;
+
+    if (safeMax <= safeMin) return 0;
+
+    const rawPercent = ((safeValue - safeMin) / (safeMax - safeMin)) * 100;
+    return Math.min(100, Math.max(0, rawPercent));
+  };
+
+  const buildFillStyle = (val, minValue, maxValue) =>
+    `width: ${clampPercent(val, minValue, maxValue)}%;`;
+
+  const combinedClass = sizeState
+    ? sizeState.map((value) => buildClass(value, classState ? classState.get() : className))
+    : classState
+      ? classState.map((value) => buildClass(size, value))
+      : buildClass(size, className);
+
+  const fillClass = colorState ? colorState.map((value) => buildFillClass(value)) : buildFillClass(color);
+
+  const fillStyle = valueState
+    ? valueState.map((val) =>
+        buildFillStyle(val, minState ? minState.get() : min, maxState ? maxState.get() : max)
+      )
+    : minState
+      ? minState.map((val) => buildFillStyle(value, val, maxState ? maxState.get() : max))
+      : maxState
+        ? maxState.map((val) => buildFillStyle(value, min, val))
+        : buildFillStyle(value, min, max);
+
+  return div(
+    {
+      class: combinedClass,
+      role: "progressbar",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      ...rest,
+    },
+    [div({ class: fillClass, style: fillStyle })],
+  );
+}