@dmsi/wedgekit-react 0.0.160 → 0.0.162

package/dist/components/index.js

@@ -4,21 +4,6 @@ import {
 import {
   Select
 } from "../chunk-XH65MD2C.js";
-import {
-  PaymentOnAccountModal
-} from "../chunk-RUTYNLKS.js";
-import "../chunk-NT2ZKA4W.js";
-import "../chunk-WFGKIR5A.js";
-import "../chunk-BATIOCXB.js";
-import "../chunk-5GOJRLQO.js";
-import "../chunk-4RJKB7LC.js";
-import "../chunk-C4JGTH6G.js";
-import "../chunk-SYEJVSE4.js";
-import "../chunk-R7ELP5C5.js";
-import "../chunk-ZFOANBWG.js";
-import "../chunk-PLMGI5K5.js";
-import "../chunk-AZ7LVLOK.js";
-import "../chunk-EPQLWHCL.js";
 import {
   Checkbox
 } from "../chunk-WFQEE2OO.js";
@@ -27,10 +12,10 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-4NCDT5ZY.js";
+} from "../chunk-SBSHZ327.js";
 import {
   Menu
-} from "../chunk-YR7JUKYO.js";
+} from "../chunk-RLK4TBXR.js";
 import "../chunk-5GUW4DUY.js";
 import {
   MenuOption
@@ -38,7 +23,7 @@ import {
 import {
   useInfiniteScroll
 } from "../chunk-WNQ53SVY.js";
-import "../chunk-4T7F5BZZ.js";
+import "../chunk-6LN6QT6M.js";
 import {
   Search
 } from "../chunk-PMBEIP24.js";
@@ -1124,7 +1109,6 @@ export {
   Menu,
   MenuOption,
   Paragraph,
-  PaymentOnAccountModal,
   Search,
   Select,
   Subheader,

package/dist/index.css

@@ -1872,9 +1872,6 @@
   .py-\[calc\(var\(--spacing-mobile-component-padding\)_\+_3px\)\] {
     padding-block: calc(var(--spacing-mobile-component-padding) + 3px);
   }
-  .py-desktop-component-padding {
-    padding-block: var(--spacing-desktop-component-padding);
-  }
   .py-mobile-component-gap {
     padding-block: var(--spacing-mobile-component-gap);
   }
@@ -1893,9 +1890,6 @@
   .pt-\[7px\] {
     padding-top: 7px;
   }
-  .pr-desktop-component-padding {
-    padding-right: var(--spacing-desktop-component-padding);
-  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }

package/dist/utils/index.cjs

@@ -133,8 +133,14 @@ function findPositionAfterDigitCount(formattedValue, targetDigitCount) {
   return formattedValue.length;
 }
 function calculateCursorPosition(originalValue, formattedValue, originalPosition) {
-  const targetDigitCount = countDigitsUpToCursor(originalValue, originalPosition);
-  const newPosition = findPositionAfterDigitCount(formattedValue, targetDigitCount);
+  const targetDigitCount = countDigitsUpToCursor(
+    originalValue,
+    originalPosition
+  );
+  const newPosition = findPositionAfterDigitCount(
+    formattedValue,
+    targetDigitCount
+  );
   return Math.min(newPosition, formattedValue.length);
 }
 function parseDateParts(dateString) {
@@ -179,6 +185,7 @@ function formatDate(date) {
     }
     return formatDatePartsToDisplay(year, month, day);
   } catch (error) {
+    console.error("Error formatting date:", error);
     return "";
   }
 }

package/dist/utils/index.js

@@ -12,7 +12,7 @@ import {
   isValidDateRangeOrder,
   parseDateParts,
   parseInputDate
-} from "../chunk-IDN3IN2A.js";
+} from "../chunk-M3433XEJ.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue,

package/package.json

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

package/src/components/CalendarRange.tsx

@@ -1,7 +1,6 @@
 import clsx from "clsx";
 import {
   typography,
-  componentGap,
   componentPadding,
   layoutPaddding,
   layoutGap,
@@ -154,7 +153,7 @@ export function CalendarRange({
     if (!d) {
       return undefined;
     }
-    
+
     try {
       if (typeof d === "number") {
         return Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
@@ -167,6 +166,7 @@ export function CalendarRange({
       return undefined;
     } catch (error) {
       // If parsing fails, return current date instead of throwing
+      console.error("Invalid date format:", d, error);
       return Temporal.Now.plainDateISO();
     }
   };
@@ -305,9 +305,7 @@ export function CalendarRange({
             <React.Fragment key={month.name + month.year}>
               <div
                 // key={month.name + month.year}
-                className={clsx(
-                  "flex flex-col",
-                )}
+                className={clsx("flex flex-col")}
               >
                 <div
                   className={clsx(
@@ -319,7 +317,9 @@ export function CalendarRange({
                   {idx === 0 ? (
                     <button
                       id={id ? `${id}-prev-month-button` : undefined}
-                      data-testid={testid ? `${testid}-prev-month-button` : undefined}
+                      data-testid={
+                        testid ? `${testid}-prev-month-button` : undefined
+                      }
                       type="button"
                       className={clsx(
                         "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -346,7 +346,9 @@ export function CalendarRange({
                   {(mode === "double" ? idx === 1 : true) ? (
                     <button
                       id={id ? `${id}-next-month-button` : undefined}
-                      data-testid={testid ? `${testid}-next-month-button` : undefined}
+                      data-testid={
+                        testid ? `${testid}-next-month-button` : undefined
+                      }
                       type="button"
                       className={clsx(
                         "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -368,7 +370,7 @@ export function CalendarRange({
                       className={clsx(
                         typography.caption,
                         "text-text-secondary-normal text-center",
-                        "w-10"
+                        "w-10",
                       )}
                     >
                       {d}
@@ -427,7 +429,11 @@ export function CalendarRange({
                       <DateCell
                         key={i}
                         id={id ? `${id}-date-${date.toString()}` : undefined}
-                        testid={testid ? `${testid}-date-${date.toString()}` : undefined}
+                        testid={
+                          testid
+                            ? `${testid}-date-${date.toString()}`
+                            : undefined
+                        }
                         date={date}
                         isInMonth={!!isInMonth}
                         isToday={!!isToday}

package/src/components/DataTable.tsx

@@ -5,7 +5,6 @@ import React, {
   PropsWithChildren,
   ReactNode,
   useContext,
-  useEffect,
   useState,
 } from "react";
 
@@ -218,7 +217,7 @@ const EditingContext = createContext<{
 }>({
   data: [],
   setValue: (row: number, key: string, value: string) => {
-    console.log(row, key, value);
+    console.warn("TODO: Implement setValue logic", row, key, value);
   },
 });
 
@@ -226,7 +225,6 @@ type EditingProviderProps = PropsWithChildren<{ data: OrderRow[] }>;
 
 export const EditingProvider = ({ data, children }: EditingProviderProps) => {
   const [actual, setData] = useState(data);
-  useEffect(() => console.log("data changed"), [actual]);
   const context = {
     data: actual,
     setValue: (row: number, key: string, value: string) => {

package/src/components/EditingContext.tsx

@@ -8,10 +8,11 @@ type EditingContextType<T> = {
 };
 
 // TODO: Update "any" we shouldn't have this for typesafe devx
-export const EditingContext = createContext<EditingContextType<any>>({
+export const EditingContext = createContext<EditingContextType<unknown>>({
   data: [],
-  setData: (row: number, key: string, value: string) => {
-    console.log(row, key, value);
+  setData: (/**row: number, key: string, value: string */) => {
+    // console.log(row, key, value);
+    // TODO: Implement setData logic
   },
 });
 

package/src/components/MobileDataGrid.tsx

@@ -68,7 +68,15 @@ export function MobileDataGrid<T extends RowData>({
   );
 }
 
-function MobileDataGridHeader({ header, id, testid }: { header: string; id?: string; testid?: string }) {
+function MobileDataGridHeader({
+  header,
+  id,
+  testid,
+}: {
+  header: string;
+  id?: string;
+  testid?: string;
+}) {
   return (
     <div id={id} data-testid={testid} className="sticky top-0">
       <Theme theme="brand">
@@ -95,7 +103,7 @@ function MobileDataGridCard<T extends RowData>({
   renderLink,
   renderChevron,
   id,
-  testid
+  testid,
 }: {
   data: T;
   columns: MobileColumnDef<T>[];
@@ -115,7 +123,7 @@ function MobileDataGridCard<T extends RowData>({
               testid={testid ? `${testid}-docs-button` : undefined}
               iconOnly
               variant="tertiary"
-              onClick={() => console.log("Edit", data.id)}
+              onClick={() => console.warn("TODO: Implement Edit", data.id)}
               leftIcon={<Icon name="docs" />}
             ></Button>
             <Button
@@ -123,7 +131,7 @@ function MobileDataGridCard<T extends RowData>({
               testid={testid ? `${testid}-swap-button` : undefined}
               iconOnly
               variant="tertiary"
-              onClick={() => console.log("Edit", data.id)}
+              onClick={() => console.warn("TODO: Implement Edit", data.id)}
               leftIcon={<Icon name="swap_vert" />}
             ></Button>
           </Stack>

package/src/components/NavigationTabs.tsx

@@ -27,7 +27,7 @@ export const NavigationTabs = ({
   onTabChange,
   colorPrimitives = "dmsi",
 }: NavigationTabsProps) => {
-  const [selectedTab, setSelectedTab] = useState<string>(tabs[0]?.id!);
+  const [selectedTab, setSelectedTab] = useState<string>(tabs[0]?.id ?? "");
 
   const handleTabClick = (id: string) => {
     setSelectedTab(id);

package/src/components/index.ts

@@ -18,6 +18,5 @@ export { MenuOption } from "./MenuOption";
 export { Search } from "./Search";
 export { Tooltip } from "./Tooltip";
 export { Input } from "./Input";
-export { PaymentOnAccountModal } from "./PaymentOnAccountModal";
 export { Accordion } from "./Accordion";
 export { Card } from "./Card";

package/src/utils/date.ts

@@ -10,13 +10,13 @@ export function parseInputDate(input: string): string | null {
   if (!match) {
     return null;
   }
-  
+
   const [, month, day, year] = match;
-  
+
   // Pad with zeros if necessary
   const paddedMonth = month.padStart(2, "0");
   const paddedDay = day.padStart(2, "0");
-  
+
   return `${year}-${paddedMonth}-${paddedDay}`;
 }
 
@@ -25,7 +25,11 @@ export function parseInputDate(input: string): string | null {
  */
 export function isValidDate(dateString: string): boolean {
   const date = new Date(dateString);
-  return date instanceof Date && !isNaN(date.getTime()) && dateString === date.toISOString().split("T")[0];
+  return (
+    date instanceof Date &&
+    !isNaN(date.getTime()) &&
+    dateString === date.toISOString().split("T")[0]
+  );
 }
 
 /**
@@ -34,17 +38,17 @@ export function isValidDate(dateString: string): boolean {
 export function formatInputValue(value: string): string {
   // Remove all non-digits
   const digits = value.replace(/\D/g, "");
-  
+
   // Return digits as-is if less than 2
   if (digits.length < 2) {
     return digits;
   }
-  
+
   // Format with full MM/DD/YYYY pattern if 4 or more digits
   if (digits.length >= 4) {
     return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
   }
-  
+
   // Format with MM/DD pattern for 2-3 digits
   return `${digits.slice(0, 2)}/${digits.slice(2)}`;
 }
@@ -66,9 +70,12 @@ export function isSlash(character: string): boolean {
 /**
  * Count digits up to cursor position
  */
-export function countDigitsUpToCursor(value: string, cursorPosition: number): number {
+export function countDigitsUpToCursor(
+  value: string,
+  cursorPosition: number,
+): number {
   let digitCount = 0;
-  
+
   for (let i = 0; i < cursorPosition && i < value.length; i++) {
     if (!isDigit(value[i])) {
       continue;
@@ -76,69 +83,84 @@ export function countDigitsUpToCursor(value: string, cursorPosition: number): nu
 
     digitCount++;
   }
-  
+
   return digitCount;
 }
 
 /**
  * Find position after specific digit count
  */
-export function findPositionAfterDigitCount(formattedValue: string, targetDigitCount: number): number {
+export function findPositionAfterDigitCount(
+  formattedValue: string,
+  targetDigitCount: number,
+): number {
   let currentDigitCount = 0;
-  
+
   for (let i = 0; i < formattedValue.length; i++) {
     if (!isDigit(formattedValue[i])) {
       continue;
     }
-    
+
     currentDigitCount++;
-    
+
     if (currentDigitCount !== targetDigitCount) {
       continue;
     }
-    
+
     const positionAfterDigit = i + 1;
     const nextCharacter = formattedValue[positionAfterDigit];
-    
+
     // Place cursor after slash if it follows the target digit
     if (nextCharacter && isSlash(nextCharacter)) {
       return positionAfterDigit + 1;
     }
-    
+
     return positionAfterDigit;
   }
-  
+
   return formattedValue.length;
 }
 
 /**
  * Calculate cursor position after formatting
  */
-export function calculateCursorPosition(originalValue: string, formattedValue: string, originalPosition: number): number {
-  const targetDigitCount = countDigitsUpToCursor(originalValue, originalPosition);
-  const newPosition = findPositionAfterDigitCount(formattedValue, targetDigitCount);
-  
+export function calculateCursorPosition(
+  originalValue: string,
+  formattedValue: string,
+  originalPosition: number,
+): number {
+  const targetDigitCount = countDigitsUpToCursor(
+    originalValue,
+    originalPosition,
+  );
+  const newPosition = findPositionAfterDigitCount(
+    formattedValue,
+    targetDigitCount,
+  );
+
   return Math.min(newPosition, formattedValue.length);
 }
 
 /**
  * Parse date parts from YYYY-MM-DD format
  */
-export function parseDateParts(dateString: string): { year: number; month: number; day: number } | null {
+export function parseDateParts(
+  dateString: string,
+): { year: number; month: number; day: number } | null {
   const [yearStr, monthStr, dayStr] = dateString.split("-");
-  
+
   if (!yearStr || !monthStr || !dayStr) {
     return null;
   }
-  
+
   const year = parseInt(yearStr, 10);
   const month = parseInt(monthStr, 10);
   const day = parseInt(dayStr, 10);
-  
+
   if (isNaN(year) || isNaN(month) || isNaN(day)) {
     return null;
   }
-  
+
   return { year, month, day };
 }
 
@@ -158,10 +180,14 @@ export function isValidDateRange(month: number, day: number): boolean {
 /**
  * Format date parts to display format (MM/DD/YYYY)
  */
-export function formatDatePartsToDisplay(year: number, month: number, day: number): string {
+export function formatDatePartsToDisplay(
+  year: number,
+  month: number,
+  day: number,
+): string {
   const paddedMonth = month.toString().padStart(2, "0");
   const paddedDay = day.toString().padStart(2, "0");
-  
+
   return `${paddedMonth}/${paddedDay}/${year}`;
 }
 
@@ -172,21 +198,22 @@ export function formatDate(date: string): string {
   if (!date) {
     return "";
   }
-  
+
   try {
     const dateParts = parseDateParts(date);
     if (!dateParts) {
       return "";
     }
-    
+
     const { year, month, day } = dateParts;
-    
+
     if (!isValidDateRange(month, day)) {
       return "";
     }
-    
+
     return formatDatePartsToDisplay(year, month, day);
   } catch (error) {
+    console.error("Error formatting date:", error);
     return "";
   }
 }
@@ -194,11 +221,14 @@ export function formatDate(date: string): string {
 /**
  * Validate if date range is valid (to >= from)
  */
-export function isValidDateRangeOrder(fromDate: string, toDate: string): boolean {
+export function isValidDateRangeOrder(
+  fromDate: string,
+  toDate: string,
+): boolean {
   if (!fromDate || !toDate || !isValidDate(fromDate) || !isValidDate(toDate)) {
     return false;
   }
-  
+
   // Check if 'to' date is not earlier than 'from' date
   const from = new Date(fromDate);
   const to = new Date(toDate);

package/src/utils.ts

@@ -9,7 +9,7 @@ export function findDocumentRoot(
   if (!element || !(element instanceof Node)) {
     return window.document.body;
   }
-  var currentElement = element;
+  let currentElement = element;
   while (currentElement && currentElement.parentNode) {
     if (currentElement.parentNode === document) {
       return document.body;

package/dist/chunk-BATIOCXB.js

@@ -1,138 +0,0 @@
-import {
-  Paragraph
-} from "./chunk-HVI3CL7Y.js";
-import {
-  baseTransition,
-  componentGap
-} from "./chunk-RDLEIAQU.js";
-import {
-  __objRest,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Radio.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Radio = (_a) => {
-  var _b = _a, {
-    className,
-    label,
-    error,
-    disabled,
-    checked,
-    readOnly,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "label",
-    "error",
-    "disabled",
-    "checked",
-    "readOnly",
-    "id",
-    "testid"
-  ]);
-  const radioId = id;
-  const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
-  const defaultClassName = clsx(
-    !error && !disabled && "border-border-primary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-focus:border-border-action-hover peer-focus:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active peer-checked:border-0 peer-checked:bg-background-action-secondary-hover"
-  );
-  const errorClassName = clsx(
-    error && !disabled && "border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-focus:border-border-action-critical-hover peer-focus:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active peer-checked:bg-background-action-critical-secondary-hover peer-checked:border-0 "
-  );
-  const disabledClassName = clsx(
-    disabled && "peer-disabled:bg-background-action-secondary-disabled peer-disabled:border-border-primary-normal peer-checked:border-0"
-  );
-  const readonlyClassName = clsx(
-    readOnly && "peer-read-only:bg-background-action-secondary-disabled peer-read-only:border-border-primary-normal peer-checked:border-0"
-  );
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      htmlFor: radioId,
-      className: clsx(
-        "flex items-center",
-        componentGap,
-        disabled ? "cursor-default" : "cursor-pointer",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            __spreadValues({
-              id: radioId,
-              "data-testid": testid,
-              type: "radio",
-              className: "sr-only peer",
-              disabled,
-              checked,
-              readOnly
-            }, props)
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(
-                "size-6 rounded-full border flex items-center justify-center",
-                baseTransition,
-                defaultClassName,
-                errorClassName,
-                disabledClassName,
-                readonlyClassName
-              ),
-              children: checked && /* @__PURE__ */ jsx(
-                RadioIcon,
-                {
-                  className: clsx(
-                    "transition-colors",
-                    !error && !disabled && "text-icon-on-action-secondary-normal hover:text-icon-on-action-secondary-hover active:text-icon-on-action-secondary-active peer-hover:text-icon-on-action-secondary-hover peer-focus:text-icon-on-action-secondary-hover peer-active:text-icon-on-action-secondary-active",
-                    error && !disabled && "text-icon-action-critical-secondary-normal hover:text-icon-action-critical-secondary-hover active:text-icon-action-critical-secondary-active peer-hover:text-icon-action-critical-secondary-hover peer-focus:text-icon-action-critical-secondary-hover peer-active:text-icon-action-critical-secondary-active",
-                    disabled && "text-icon-on-action-secondary-disabled",
-                    readOnly && "text-icon-on-action-secondary-disabled"
-                  )
-                }
-              )
-            }
-          )
-        ] }),
-        label && /* @__PURE__ */ jsx(Paragraph, { id: radioId ? `${radioId}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, color: paragraphColor, children: label })
-      ]
-    }
-  );
-};
-Radio.displayName = "Radio";
-var RadioIcon = ({ className }) => {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "1",
-            y: "1",
-            width: "22",
-            height: "22",
-            rx: "11",
-            stroke: "currentColor",
-            strokeWidth: "2"
-          }
-        ),
-        /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "8", fill: "currentColor" })
-      ]
-    }
-  );
-};
-RadioIcon.displayName = "RadioIcon";
-
-export {
-  Radio
-};

package/dist/chunk-EPQLWHCL.js

@@ -1,11 +0,0 @@
-// src/components/HorizontalDivider.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-function HorizontalDivider({ id, testid, hideOnMobile }) {
-  const hideOnMobileStyle = clsx(hideOnMobile && "hidden desktop:block");
-  return /* @__PURE__ */ jsx("hr", { id, "data-testid": testid, className: clsx("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
-}
-
-export {
-  HorizontalDivider
-};