@dmsi/wedgekit-react 0.0.25 → 0.0.27

package/dist/components/DateInput.cjs

@@ -204,18 +204,21 @@ var Label = (_a) => {
     padded,
     className,
     color,
-    align
+    align,
+    id
   } = _b, props = __objRest(_b, [
     "as",
     "padded",
     "className",
     "color",
-    "align"
+    "align",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx2.default)(
         typography.label,
         align === "left" && "text-left",
@@ -302,6 +305,7 @@ function formatCurrencyDisplay(value) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
+    id,
     before,
     after,
     type,
@@ -318,6 +322,7 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus
   } = _b, props = __objRest(_b, [
+    "id",
     "before",
     "after",
     "type",
@@ -339,6 +344,7 @@ var InputBase = (_a) => {
     "data-focus": focus || null
   };
   const inputRef = (0, import_react.useRef)(null);
+  const inputId = `${id}-input`;
   (0, import_react.useEffect)(() => {
     var _a2;
     const input = inputRef.current;
@@ -379,6 +385,8 @@ var InputBase = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "label",
     {
+      id,
+      htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx4.default)(
         "w-full flex flex-col",
@@ -392,6 +400,7 @@ var InputBase = (_a) => {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Label,
             {
+              id: id ? `${id}-label` : void 0,
               className: (0, import_clsx4.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
@@ -428,7 +437,7 @@ var InputBase = (_a) => {
                   type,
                   required
                 }, props), attributes), {
-                  id: props.id,
+                  id: inputId,
                   className: (0, import_clsx4.default)(
                     "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
                     "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
@@ -446,7 +455,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -460,7 +469,8 @@ var Input = (_a) => {
     value: propValue,
     onChange,
     onBlur,
-    onClear
+    onClear,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -469,7 +479,8 @@ var Input = (_a) => {
     "value",
     "onChange",
     "onBlur",
-    "onClear"
+    "onClear",
+    "id"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -495,7 +506,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+    const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+      id
+    }), getDecimalPlaceholder(decimals)), {
       value: propValue
     });
     switch (variant) {
@@ -542,6 +555,7 @@ var Input = (_a) => {
         return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           Icon,
           {
+            id: id ? `${id}-clear-button` : void 0,
             name: "close",
             onClick: handleSearchReset,
             className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
@@ -688,7 +702,8 @@ function DateCell(_a) {
     onMouseEnter,
     onMouseLeave,
     cellPadding = "",
-    isRangeDisabled = false
+    isRangeDisabled = false,
+    id
   } = _b, props = __objRest(_b, [
     "date",
     "isInMonth",
@@ -702,11 +717,13 @@ function DateCell(_a) {
     "onMouseEnter",
     "onMouseLeave",
     "cellPadding",
-    "isRangeDisabled"
+    "isRangeDisabled",
+    "id"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      id,
       className: (0, import_clsx5.default)(
         "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
         typography.caption,
@@ -752,7 +769,8 @@ function CalendarRange({
   isDateAvailable,
   mode = "double",
   cardStyle = false,
-  disableRange = false
+  disableRange = false,
+  id
 }) {
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   const parseDate = (d) => {
@@ -821,6 +839,7 @@ function CalendarRange({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
+      id,
       className: (0, import_clsx5.default)(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
         layoutPaddding,
@@ -860,6 +879,7 @@ function CalendarRange({
                           idx === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             "button",
                             {
+                              id: id ? `${id}-prev-month-button` : void 0,
                               type: "button",
                               className: (0, import_clsx5.default)(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -877,6 +897,7 @@ function CalendarRange({
                           (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             "button",
                             {
+                              id: id ? `${id}-next-month-button` : void 0,
                               type: "button",
                               className: (0, import_clsx5.default)(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -919,6 +940,7 @@ function CalendarRange({
                       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         DateCell,
                         {
+                          id: id ? `${id}-date-${date.toString()}` : void 0,
                           date,
                           isInMonth: !!isInMonth,
                           isToday: !!isToday,
@@ -984,6 +1006,7 @@ function findDocumentRoot(element) {
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var DateInput = (_a) => {
   var _b = _a, {
+    id,
     value,
     onChange,
     placeholder = "MM/DD/YYYY",
@@ -991,6 +1014,7 @@ var DateInput = (_a) => {
     readOnly = false,
     label
   } = _b, props = __objRest(_b, [
+    "id",
     "value",
     "onChange",
     "placeholder",
@@ -1079,6 +1103,7 @@ var DateInput = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       InputBase,
       __spreadProps(__spreadValues({
+        id,
         ref: (el) => {
           triggerRef.current = el;
         }
@@ -1110,6 +1135,7 @@ var DateInput = (_a) => {
           children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             CalendarRange,
             {
+              id: id ? `${id}-calendar` : void 0,
               from,
               to: to || from,
               onChange: handleDateChange,

package/dist/components/DateInput.js

@@ -3,11 +3,11 @@ import {
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-OISE6NMA.js";
-import "../chunk-S7R37IUP.js";
+} from "../chunk-QV2EFOYF.js";
+import "../chunk-S5K22XTH.js";
 import {
   CalendarRange
-} from "../chunk-OUTEIXV4.js";
+} from "../chunk-OUSNH76S.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -24,6 +24,7 @@ import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DateInput = (_a) => {
   var _b = _a, {
+    id,
     value,
     onChange,
     placeholder = "MM/DD/YYYY",
@@ -31,6 +32,7 @@ var DateInput = (_a) => {
     readOnly = false,
     label
   } = _b, props = __objRest(_b, [
+    "id",
     "value",
     "onChange",
     "placeholder",
@@ -119,6 +121,7 @@ var DateInput = (_a) => {
     /* @__PURE__ */ jsx(
       InputBase,
       __spreadProps(__spreadValues({
+        id,
         ref: (el) => {
           triggerRef.current = el;
         }
@@ -150,6 +153,7 @@ var DateInput = (_a) => {
           children: /* @__PURE__ */ jsx(
             CalendarRange,
             {
+              id: id ? `${id}-calendar` : void 0,
               from,
               to: to || from,
               onChange: handleDateChange,

package/dist/components/DateRangeInput.cjs

@@ -204,18 +204,21 @@ var Label = (_a) => {
     padded,
     className,
     color,
-    align
+    align,
+    id
   } = _b, props = __objRest(_b, [
     "as",
     "padded",
     "className",
     "color",
-    "align"
+    "align",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx2.default)(
         typography.label,
         align === "left" && "text-left",
@@ -302,6 +305,7 @@ function formatCurrencyDisplay(value) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
+    id,
     before,
     after,
     type,
@@ -318,6 +322,7 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus
   } = _b, props = __objRest(_b, [
+    "id",
     "before",
     "after",
     "type",
@@ -339,6 +344,7 @@ var InputBase = (_a) => {
     "data-focus": focus || null
   };
   const inputRef = (0, import_react.useRef)(null);
+  const inputId = `${id}-input`;
   (0, import_react.useEffect)(() => {
     var _a2;
     const input = inputRef.current;
@@ -379,6 +385,8 @@ var InputBase = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "label",
     {
+      id,
+      htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx4.default)(
         "w-full flex flex-col",
@@ -392,6 +400,7 @@ var InputBase = (_a) => {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Label,
             {
+              id: id ? `${id}-label` : void 0,
               className: (0, import_clsx4.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
@@ -428,7 +437,7 @@ var InputBase = (_a) => {
                   type,
                   required
                 }, props), attributes), {
-                  id: props.id,
+                  id: inputId,
                   className: (0, import_clsx4.default)(
                     "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
                     "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
@@ -446,7 +455,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -460,7 +469,8 @@ var Input = (_a) => {
     value: propValue,
     onChange,
     onBlur,
-    onClear
+    onClear,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -469,7 +479,8 @@ var Input = (_a) => {
     "value",
     "onChange",
     "onBlur",
-    "onClear"
+    "onClear",
+    "id"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -495,7 +506,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+    const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+      id
+    }), getDecimalPlaceholder(decimals)), {
       value: propValue
     });
     switch (variant) {
@@ -542,6 +555,7 @@ var Input = (_a) => {
         return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           Icon,
           {
+            id: id ? `${id}-clear-button` : void 0,
             name: "close",
             onClick: handleSearchReset,
             className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
@@ -688,7 +702,8 @@ function DateCell(_a) {
     onMouseEnter,
     onMouseLeave,
     cellPadding = "",
-    isRangeDisabled = false
+    isRangeDisabled = false,
+    id
   } = _b, props = __objRest(_b, [
     "date",
     "isInMonth",
@@ -702,11 +717,13 @@ function DateCell(_a) {
     "onMouseEnter",
     "onMouseLeave",
     "cellPadding",
-    "isRangeDisabled"
+    "isRangeDisabled",
+    "id"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      id,
       className: (0, import_clsx5.default)(
         "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
         typography.caption,
@@ -752,7 +769,8 @@ function CalendarRange({
   isDateAvailable,
   mode = "double",
   cardStyle = false,
-  disableRange = false
+  disableRange = false,
+  id
 }) {
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   const parseDate = (d) => {
@@ -821,6 +839,7 @@ function CalendarRange({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
+      id,
       className: (0, import_clsx5.default)(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
         layoutPaddding,
@@ -860,6 +879,7 @@ function CalendarRange({
                           idx === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             "button",
                             {
+                              id: id ? `${id}-prev-month-button` : void 0,
                               type: "button",
                               className: (0, import_clsx5.default)(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -877,6 +897,7 @@ function CalendarRange({
                           (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             "button",
                             {
+                              id: id ? `${id}-next-month-button` : void 0,
                               type: "button",
                               className: (0, import_clsx5.default)(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -919,6 +940,7 @@ function CalendarRange({
                       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         DateCell,
                         {
+                          id: id ? `${id}-date-${date.toString()}` : void 0,
                           date,
                           isInMonth: !!isInMonth,
                           isToday: !!isToday,
@@ -984,6 +1006,7 @@ function findDocumentRoot(element) {
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var DateRangeInput = (_a) => {
   var _b = _a, {
+    id,
     value,
     onChange,
     placeholder = "MM/DD/YYYY - MM/DD/YYYY",
@@ -992,6 +1015,7 @@ var DateRangeInput = (_a) => {
     single = false,
     label: label
   } = _b, props = __objRest(_b, [
+    "id",
     "value",
     "onChange",
     "placeholder",
@@ -1081,6 +1105,7 @@ var DateRangeInput = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       InputBase,
       __spreadProps(__spreadValues({
+        id,
         ref: (el) => {
           triggerRef.current = el;
         }
@@ -1112,6 +1137,7 @@ var DateRangeInput = (_a) => {
           children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             CalendarRange,
             {
+              id: id ? `${id}-calendar` : void 0,
               from,
               to,
               onChange: handleRangeChange,

package/dist/components/DateRangeInput.js

@@ -3,11 +3,11 @@ import {
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-OISE6NMA.js";
-import "../chunk-S7R37IUP.js";
+} from "../chunk-QV2EFOYF.js";
+import "../chunk-S5K22XTH.js";
 import {
   CalendarRange
-} from "../chunk-OUTEIXV4.js";
+} from "../chunk-OUSNH76S.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -24,6 +24,7 @@ import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DateRangeInput = (_a) => {
   var _b = _a, {
+    id,
     value,
     onChange,
     placeholder = "MM/DD/YYYY - MM/DD/YYYY",
@@ -32,6 +33,7 @@ var DateRangeInput = (_a) => {
     single = false,
     label: label
   } = _b, props = __objRest(_b, [
+    "id",
     "value",
     "onChange",
     "placeholder",
@@ -121,6 +123,7 @@ var DateRangeInput = (_a) => {
     /* @__PURE__ */ jsx(
       InputBase,
       __spreadProps(__spreadValues({
+        id,
         ref: (el) => {
           triggerRef.current = el;
         }
@@ -152,6 +155,7 @@ var DateRangeInput = (_a) => {
           children: /* @__PURE__ */ jsx(
             CalendarRange,
             {
+              id: id ? `${id}-calendar` : void 0,
               from,
               to,
               onChange: handleRangeChange,

package/dist/components/DebugJson.cjs

@@ -26,24 +26,32 @@ __export(DebugJson_exports, {
 module.exports = __toCommonJS(DebugJson_exports);
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-function DebugJson({ data }) {
+function DebugJson({ data, id }) {
   const [open, setOpen] = (0, import_react.useState)(false);
   if (process.env.NODE_ENV !== "development") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-2 rounded bg-neutral-100  border border-red-500 my-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        onClick: () => setOpen((prev) => !prev),
-        className: "px-4 py-2 border rounded bg-white",
-        children: open ? "Hide JSON" : "Show JSON"
-      }
-    ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "mt-4", children: JSON.stringify(data, null, 4) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      id,
+      className: "p-2 rounded bg-neutral-100  border border-red-500 my-4",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            id: id ? `${id}-toggle-button` : void 0,
+            onClick: () => setOpen((prev) => !prev),
+            className: "px-4 py-2 border rounded bg-white",
+            children: open ? "Hide JSON" : "Show JSON"
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "mt-4", children: JSON.stringify(data, null, 4) })
+      ]
+    }
+  );
 }
-DebugJson.displayName = "dasda";
+DebugJson.displayName = "DebugJson";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DebugJson

package/dist/components/DebugJson.js

@@ -4,24 +4,32 @@ import "../chunk-ORMEWXMH.js";
 // src/components/DebugJson.tsx
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function DebugJson({ data }) {
+function DebugJson({ data, id }) {
   const [open, setOpen] = useState(false);
   if (process.env.NODE_ENV !== "development") {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: "p-2 rounded bg-neutral-100  border border-red-500 my-4", children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => setOpen((prev) => !prev),
-        className: "px-4 py-2 border rounded bg-white",
-        children: open ? "Hide JSON" : "Show JSON"
-      }
-    ),
-    open && /* @__PURE__ */ jsx("pre", { className: "mt-4", children: JSON.stringify(data, null, 4) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      className: "p-2 rounded bg-neutral-100  border border-red-500 my-4",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            id: id ? `${id}-toggle-button` : void 0,
+            onClick: () => setOpen((prev) => !prev),
+            className: "px-4 py-2 border rounded bg-white",
+            children: open ? "Hide JSON" : "Show JSON"
+          }
+        ),
+        open && /* @__PURE__ */ jsx("pre", { className: "mt-4", children: JSON.stringify(data, null, 4) })
+      ]
+    }
+  );
 }
-DebugJson.displayName = "dasda";
+DebugJson.displayName = "DebugJson";
 export {
   DebugJson
 };

package/dist/components/Display.cjs

@@ -201,20 +201,23 @@ var Display = (_a) => {
     as,
     color,
     align,
-    variant = "display1"
+    variant = "display1",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "color",
     "align",
-    "variant"
+    "variant",
+    "id"
   ]);
   const defaultElement = variant === "display1" ? "h1" : "h2";
   const Element = as != null ? as : defaultElement;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx2.default)(
         typography[variant],
         className,

package/dist/components/Display.js

@@ -2,7 +2,7 @@ import {
   Display,
   Display1,
   Display2
-} from "../chunk-ZFGGZXB6.js";
+} from "../chunk-AY7ELVQY.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/EditingContext.cjs

@@ -50,7 +50,10 @@ var EditingContext = (0, import_react.createContext)({
     console.log(row, key, value);
   }
 });
-var EditingProvider = ({ data, children }) => {
+var EditingProvider = ({
+  data,
+  children
+}) => {
   const [actual, setData] = (0, import_react.useState)(data);
   const context = {
     data: actual,

package/dist/components/EditingContext.js

@@ -13,7 +13,10 @@ var EditingContext = createContext({
     console.log(row, key, value);
   }
 });
-var EditingProvider = ({ data, children }) => {
+var EditingProvider = ({
+  data,
+  children
+}) => {
   const [actual, setData] = useState(data);
   const context = {
     data: actual,