@dmsi/wedgekit-react 0.0.44 → 0.0.46

package/dist/components/SideMenuItem.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-IOSLZ3WW.js";
+} from "../chunk-KXUUKAQM.js";
 import {
   Paragraph
 } from "../chunk-VG4EPHJA.js";

package/dist/components/Stack.cjs

@@ -183,6 +183,7 @@ var Stack = (_a) => {
         "max-w-screen",
         width !== "fit" && "w-full",
         width === "full" && "w-full",
+        width === "max" && "w-max",
         centered && "mx-auto",
         overflowY == "auto" && "overflow-y-auto",
         overflowY == "hidden" && "overflow-y-hidden",

package/dist/components/Stack.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-IOSLZ3WW.js";
+} from "../chunk-KXUUKAQM.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Stack

package/dist/components/Stepper.cjs

@@ -458,7 +458,8 @@ var InputBase = (_a) => {
     inputContainerRef,
     removeBorder,
     wrapperClassName,
-    focus
+    focus,
+    fullWidth = true
   } = _b, props = __objRest(_b, [
     "id",
     "before",
@@ -475,7 +476,8 @@ var InputBase = (_a) => {
     "inputContainerRef",
     "removeBorder",
     "wrapperClassName",
-    "focus"
+    "focus",
+    "fullWidth"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -497,7 +499,7 @@ var InputBase = (_a) => {
     }
   }, [selectOnFocus]);
   const inputBaseClass = (0, import_clsx5.default)(
-    "w-full",
+    fullWidth ? "w-full" : "w-fit",
     "flex flex-row items-center",
     "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
     componentGap,

package/dist/components/Stepper.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   InputBase
-} from "../chunk-DVXLTLKP.js";
+} from "../chunk-724LJWFR.js";
 import "../chunk-S5K22XTH.js";
 import {
   Button

package/dist/components/Swatch.cjs

@@ -362,6 +362,7 @@ var Stack = (_a) => {
         "max-w-screen",
         width !== "fit" && "w-full",
         width === "full" && "w-full",
+        width === "max" && "w-max",
         centered && "mx-auto",
         overflowY == "auto" && "overflow-y-auto",
         overflowY == "hidden" && "overflow-y-hidden",

package/dist/components/Swatch.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-IOSLZ3WW.js";
+} from "../chunk-KXUUKAQM.js";
 import {
   Display1
 } from "../chunk-AY7ELVQY.js";

package/dist/components/Time.cjs

@@ -319,7 +319,8 @@ var InputBase = (_a) => {
     inputContainerRef,
     removeBorder,
     wrapperClassName,
-    focus
+    focus,
+    fullWidth = true
   } = _b, props = __objRest(_b, [
     "id",
     "before",
@@ -336,7 +337,8 @@ var InputBase = (_a) => {
     "inputContainerRef",
     "removeBorder",
     "wrapperClassName",
-    "focus"
+    "focus",
+    "fullWidth"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -358,7 +360,7 @@ var InputBase = (_a) => {
     }
   }, [selectOnFocus]);
   const inputBaseClass = (0, import_clsx4.default)(
-    "w-full",
+    fullWidth ? "w-full" : "w-fit",
     "flex flex-row items-center",
     "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
     componentGap,
@@ -831,6 +833,7 @@ var Stack = (_a) => {
         "max-w-screen",
         width !== "fit" && "w-full",
         width === "full" && "w-full",
+        width === "max" && "w-max",
         centered && "mx-auto",
         overflowY == "auto" && "overflow-y-auto",
         overflowY == "hidden" && "overflow-y-hidden",

package/dist/components/Time.js

@@ -1,12 +1,12 @@
 import {
   Stack
-} from "../chunk-IOSLZ3WW.js";
+} from "../chunk-KXUUKAQM.js";
 import {
   findDocumentRoot
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-DVXLTLKP.js";
+} from "../chunk-724LJWFR.js";
 import "../chunk-S5K22XTH.js";
 import {
   Icon

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.44",
+  "version": "0.0.46",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/DateRangeInput.tsx

@@ -159,67 +159,76 @@ export const DateRangeInput = ({
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (readOnly) return;
-    
+
     const rawValue = event.target.value;
     const cursorPosition = event.target.selectionStart || 0;
-    
+
     if (shouldPreventManualDash(rawValue)) {
       handleManualDashRemoval(rawValue, cursorPosition);
       return;
     }
-    
+
     setIsTyping(true);
-    
+
     const formattedValue = formatInputValue(rawValue);
-    const finalValue = shouldAutoInsertDash(formattedValue, rawValue) 
+    const finalValue = shouldAutoInsertDash(formattedValue, rawValue)
       ? `${formattedValue} - `
       : formattedValue;
-    
+
     setInputValue(finalValue);
-    
+
     const newCursorPosition = calculateNewCursorPosition(
       rawValue,
       formattedValue,
       finalValue,
-      cursorPosition
+      cursorPosition,
     );
-    
+
     requestAnimationFrame(() => {
       setCursorPosition(newCursorPosition);
     });
-    
+
     updateParentValue(finalValue);
   };
 
   const shouldPreventManualDash = (value: string): boolean => {
-    return !disableRange && value.includes('-') && !value.includes(' - ');
+    return !disableRange && value.includes("-") && !value.includes(" - ");
   };
 
-  const handleManualDashRemoval = (rawValue: string, cursorPosition: number) => {
-    const cleanValue = rawValue.replace(/-/g, '');
+  const handleManualDashRemoval = (
+    rawValue: string,
+    cursorPosition: number,
+  ) => {
+    const cleanValue = rawValue.replace(/-/g, "");
     const formattedCleanValue = formatInputValue(cleanValue);
     setInputValue(formattedCleanValue);
-    
+
     requestAnimationFrame(() => {
-      const newPosition = Math.min(cursorPosition - 1, formattedCleanValue.length);
+      const newPosition = Math.min(
+        cursorPosition - 1,
+        formattedCleanValue.length,
+      );
       setCursorPosition(newPosition);
     });
   };
 
-  const shouldAutoInsertDash = (formattedValue: string, rawValue: string): boolean => {
-    if (disableRange || formattedValue.includes(' - ')) {
+  const shouldAutoInsertDash = (
+    formattedValue: string,
+    rawValue: string,
+  ): boolean => {
+    if (disableRange || formattedValue.includes(" - ")) {
       return false;
     }
-    
+
     const completeDate = formattedValue.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
     if (!completeDate || rawValue.length !== formattedValue.length) {
       return false;
     }
-    
+
     // Only add dash if user just completed typing the year
     const prevLength = rawValue.length - 1;
     const prevFormatted = formatInputValue(rawValue.slice(0, prevLength));
-    
+
     return !prevFormatted.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
   };
 
@@ -227,13 +236,18 @@ export const DateRangeInput = ({
     rawValue: string,
     formattedValue: string,
     finalValue: string,
-    originalPosition: number
+    originalPosition: number,
   ): number => {
     if (finalValue !== formattedValue) {
       return finalValue.length; // Place cursor after auto-inserted dash
     }
-    
-    return calculateCursorPositionHelper(rawValue, finalValue, originalPosition, disableRange);
+
+    return calculateCursorPositionHelper(
+      rawValue,
+      finalValue,
+      originalPosition,
+      disableRange,
+    );
   };
 
   const setCursorPosition = (position: number) => {
@@ -262,7 +276,7 @@ export const DateRangeInput = ({
       onChange("");
       return;
     }
-    
+
     const rangeMatch = value.match(/^(.+?)\s*-\s*(.+)$/);
     if (rangeMatch) {
       updateCompleteRange(rangeMatch);
@@ -275,7 +289,7 @@ export const DateRangeInput = ({
     const [, fromStr, toStr] = rangeMatch;
     const fromDate = parseInputDate(fromStr.trim());
     const toDate = parseInputDate(toStr.trim());
-    
+
     if (fromDate && toDate && isValidDateRange(fromDate, toDate)) {
       onChange(`${fromDate}|${toDate}`);
     }
@@ -290,7 +304,7 @@ export const DateRangeInput = ({
 
   const handleBlur = () => {
     setIsTyping(false);
-    
+
     // If the input is invalid, revert to the last valid value or empty
     if (disableRange) {
       const parsedDate = parseInputDate(inputValue);
@@ -305,7 +319,7 @@ export const DateRangeInput = ({
         const [, fromStr, toStr] = rangeMatch;
         const fromDate = parseInputDate(fromStr.trim());
         const toDate = parseInputDate(toStr.trim());
-        
+
         // Only accept if both dates are valid AND the range is valid (to >= from)
         if (!fromDate || !toDate || !isValidDateRange(fromDate, toDate)) {
           // Invalid range - clear the input
@@ -314,7 +328,7 @@ export const DateRangeInput = ({
         }
       } else {
         // Check if input is just a dash or incomplete second date
-        if (inputValue.includes(' - ')) {
+        if (inputValue.includes(" - ")) {
           // Has dash but incomplete second date - clear the input
           setInputValue("");
           onChange("");
@@ -341,19 +355,20 @@ export const DateRangeInput = ({
       event.preventDefault();
       return;
     }
-    
+
     if (event.key === "Backspace") {
       const input = event.target as HTMLInputElement;
       const cursorPosition = input.selectionStart || 0;
       const value = input.value;
-      
+
       // If cursor is right after a slash, move it before the slash
       if (cursorPosition > 0 && value[cursorPosition - 1] === "/") {
         event.preventDefault();
-        const newValue = value.slice(0, cursorPosition - 2) + value.slice(cursorPosition);
+        const newValue =
+          value.slice(0, cursorPosition - 2) + value.slice(cursorPosition);
         const formattedValue = formatInputValue(newValue);
         setInputValue(formattedValue);
-        
+
         // Set cursor position after the deletion
         requestAnimationFrame(() => {
           if (triggerRef.current) {
@@ -361,24 +376,24 @@ export const DateRangeInput = ({
             triggerRef.current.setSelectionRange(newPosition, newPosition);
           }
         });
-        
+
         setIsTyping(true);
         return;
       }
-      
+
       // Handle deletion when cursor is on or near the dash separator
-      if (!disableRange && value.includes(' - ')) {
-        const dashIndex = value.indexOf(' - ');
+      if (!disableRange && value.includes(" - ")) {
+        const dashIndex = value.indexOf(" - ");
         const dashStart = dashIndex;
         const dashEnd = dashIndex + 3; // " - " is 3 characters
-        
+
         // If cursor is within the dash area (including spaces)
         if (cursorPosition >= dashStart && cursorPosition <= dashEnd) {
           event.preventDefault();
-          
+
           // Remove the entire range and the last digit of the year from the first date
           const beforeDash = value.slice(0, dashStart).trim();
-          
+
           // Extract the year part and remove the last digit
           const yearMatch = beforeDash.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
           if (yearMatch) {
@@ -387,28 +402,31 @@ export const DateRangeInput = ({
             const newValue = `${month}/${day}/${truncatedYear}`;
             const formattedValue = formatInputValue(newValue);
             setInputValue(formattedValue);
-            
+
             // Update the value - no valid date yet since year is incomplete
             onChange("");
-            
+
             // Position cursor at the end
             requestAnimationFrame(() => {
               if (triggerRef.current) {
-                triggerRef.current.setSelectionRange(formattedValue.length, formattedValue.length);
+                triggerRef.current.setSelectionRange(
+                  formattedValue.length,
+                  formattedValue.length,
+                );
               }
             });
           } else {
             // Fallback to original behavior
             const formattedValue = formatInputValue(beforeDash);
             setInputValue(formattedValue);
-            
+
             const singleDate = parseInputDate(beforeDash);
             if (singleDate && isValidDate(singleDate)) {
               onChange(`${singleDate}|`);
             } else {
               onChange("");
             }
-            
+
             requestAnimationFrame(() => {
               if (triggerRef.current) {
                 const newPosition = formattedValue.length;
@@ -416,56 +434,59 @@ export const DateRangeInput = ({
               }
             });
           }
-          
+
           setIsTyping(true);
           return;
         }
-        
+
         // If cursor is right after the dash, remove the second date
         if (cursorPosition === dashEnd) {
           event.preventDefault();
-          
+
           const beforeDash = value.slice(0, dashStart).trim();
           const newValue = `${beforeDash} - `;
           setInputValue(newValue);
-          
+
           // Update the value to only have the first date as partial range
           const singleDate = parseInputDate(beforeDash);
           if (singleDate && isValidDate(singleDate)) {
             onChange(`${singleDate}|`);
           }
-          
+
           // Position cursor after the dash
           requestAnimationFrame(() => {
             if (triggerRef.current) {
-              triggerRef.current.setSelectionRange(newValue.length, newValue.length);
+              triggerRef.current.setSelectionRange(
+                newValue.length,
+                newValue.length,
+              );
             }
           });
-          
+
           setIsTyping(true);
           return;
         }
       }
     }
-    
+
     if (event.key === "Delete") {
       const input = event.target as HTMLInputElement;
       const cursorPosition = input.selectionStart || 0;
       const value = input.value;
-      
+
       // Handle deletion when cursor is on or near the dash separator
-      if (!disableRange && value.includes(' - ')) {
-        const dashIndex = value.indexOf(' - ');
+      if (!disableRange && value.includes(" - ")) {
+        const dashIndex = value.indexOf(" - ");
         const dashStart = dashIndex;
         const dashEnd = dashIndex + 3; // " - " is 3 characters
-        
+
         // If cursor is within the dash area or right before it
         if (cursorPosition >= dashStart && cursorPosition <= dashEnd) {
           event.preventDefault();
-          
+
           // Remove the dash and second date, and the last digit of the year from the first date
           const beforeDash = value.slice(0, dashStart).trim();
-          
+
           // Extract the year part and remove the last digit
           const yearMatch = beforeDash.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
           if (yearMatch) {
@@ -474,28 +495,31 @@ export const DateRangeInput = ({
             const newValue = `${month}/${day}/${truncatedYear}`;
             const formattedValue = formatInputValue(newValue);
             setInputValue(formattedValue);
-            
+
             // Update the value - no valid date yet since year is incomplete
             onChange("");
-            
+
             // Position cursor at the end
             requestAnimationFrame(() => {
               if (triggerRef.current) {
-                triggerRef.current.setSelectionRange(formattedValue.length, formattedValue.length);
+                triggerRef.current.setSelectionRange(
+                  formattedValue.length,
+                  formattedValue.length,
+                );
               }
             });
           } else {
             // Fallback to original behavior
             const formattedValue = formatInputValue(beforeDash);
             setInputValue(formattedValue);
-            
+
             const singleDate = parseInputDate(beforeDash);
             if (singleDate && isValidDate(singleDate)) {
               onChange(`${singleDate}|`);
             } else {
               onChange("");
             }
-            
+
             requestAnimationFrame(() => {
               if (triggerRef.current) {
                 const newPosition = formattedValue.length;
@@ -503,13 +527,13 @@ export const DateRangeInput = ({
               }
             });
           }
-          
+
           setIsTyping(true);
           return;
         }
       }
     }
-    
+
     if (event.key === "Enter") {
       if (disableRange) {
         const parsedDate = parseInputDate(inputValue);
@@ -525,7 +549,7 @@ export const DateRangeInput = ({
           const [, fromStr, toStr] = rangeMatch;
           const fromDate = parseInputDate(fromStr.trim());
           const toDate = parseInputDate(toStr.trim());
-          
+
           if (fromDate && toDate && isValidDateRange(fromDate, toDate)) {
             onChange(`${fromDate}|${toDate}`);
             setVisible(false);
@@ -617,38 +641,51 @@ function formatInputValueHelper(value: string, disableRange: boolean): string {
     return formatInputValue(value);
   }
 
-  if (value.includes(' - ')) {
-    const [from, to] = value.split(' - ');
+  if (value.includes(" - ")) {
+    const [from, to] = value.split(" - ");
     const fromFormatted = formatInputValue(from);
-    const toFormatted = formatInputValue(to || '');
+    const toFormatted = formatInputValue(to || "");
     return `${fromFormatted} - ${toFormatted}`;
   }
-  
-  const cleanValue = value.replace(/-/g, '');
+
+  const cleanValue = value.replace(/-/g, "");
   return formatInputValue(cleanValue);
 }
 
-function calculateCursorPositionHelper(originalValue: string, formattedValue: string, originalPosition: number, disableRange: boolean): number {
+function calculateCursorPositionHelper(
+  originalValue: string,
+  formattedValue: string,
+  originalPosition: number,
+  disableRange: boolean,
+): number {
   // Handle range input cursor positioning
-  if (!disableRange && formattedValue.includes(' - ')) {
-    const dashPosition = formattedValue.indexOf(' - ');
-    const originalDashPosition = originalValue.indexOf('-');
-    
+  if (!disableRange && formattedValue.includes(" - ")) {
+    const dashPosition = formattedValue.indexOf(" - ");
+    const originalDashPosition = originalValue.indexOf("-");
+
     // If cursor was after the dash in original, maintain relative position
-    if (originalDashPosition !== -1 && originalPosition > originalDashPosition) {
-      const afterDashDigits = originalValue.slice(originalDashPosition + 1).replace(/\D/g, "").length;
+    if (
+      originalDashPosition !== -1 &&
+      originalPosition > originalDashPosition
+    ) {
+      const afterDashDigits = originalValue
+        .slice(originalDashPosition + 1)
+        .replace(/\D/g, "").length;
       const formattedAfterDash = formattedValue.slice(dashPosition + 3);
-      
+
       let newPosition = dashPosition + 3;
       let digitCount = 0;
-      
+
       for (let i = 0; i < formattedAfterDash.length; i++) {
         if (/\d/.test(formattedAfterDash[i])) {
           digitCount++;
           if (digitCount >= afterDashDigits) {
             // Check if we're at a position where a slash was auto-inserted in the second date
             // If the next character is a slash, place cursor after it
-            if (i + 1 < formattedAfterDash.length && formattedAfterDash[i + 1] === '/') {
+            if (
+              i + 1 < formattedAfterDash.length &&
+              formattedAfterDash[i + 1] === "/"
+            ) {
               newPosition = dashPosition + 3 + i + 2;
             } else {
               newPosition = dashPosition + 3 + i + 1;
@@ -660,38 +697,46 @@ function calculateCursorPositionHelper(originalValue: string, formattedValue: st
           newPosition = dashPosition + 3 + i + 1;
         }
       }
-      
+
       return Math.min(newPosition, formattedValue.length);
     }
   }
-  
-  return calculateCursorPosition(originalValue, formattedValue, originalPosition);
+
+  return calculateCursorPosition(
+    originalValue,
+    formattedValue,
+    originalPosition,
+  );
 }
 
-function formatDisplayValueHelper(from?: string, to?: string, disableRange?: boolean) {
+function formatDisplayValueHelper(
+  from?: string,
+  to?: string,
+  disableRange?: boolean,
+) {
   if (!from && !to) {
     return "";
   }
-  
+
   // Validate dates before displaying
   const fromValid = from ? isValidDate(from) : false;
   const toValid = to ? isValidDate(to) : false;
-  
+
   if (disableRange) {
     return fromValid && from ? formatDate(from) : "";
   }
-  
+
   // Return formatted display if we have a complete, valid range
   if (fromValid && toValid && from && to && isValidDateRange(from, to)) {
     return `${formatDate(from)} - ${formatDate(to)}`;
   }
-  
+
   // If we have a valid from date but no to date, show the from date only
   // This preserves the previous valid state during editing
   if (fromValid && !to && from) {
     return `${formatDate(from)} - `;
   }
-  
+
   // Return empty string if no valid dates or invalid range
   return "";
-}
+}