@dmsi/wedgekit-react 0.0.2

package/dist/components/DateRangeInput.js

@@ -0,0 +1,171 @@
+import {
+  findDocumentRoot
+} from "../chunk-4T7F5BZZ.js";
+import {
+  InputBase
+} from "../chunk-BWRHL2AG.js";
+import "../chunk-4C66DLIJ.js";
+import {
+  CalendarRange
+} from "../chunk-FY7PTP6E.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
+import "../chunk-KX3O6GJ6.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/DateRangeInput.tsx
+import { useRef, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DateRangeInput = (_a) => {
+  var _b = _a, {
+    value,
+    onChange,
+    placeholder = "MM/DD/YYYY - MM/DD/YYYY",
+    disabled,
+    readOnly = false,
+    single = false,
+    label: label
+  } = _b, props = __objRest(_b, [
+    "value",
+    "onChange",
+    "placeholder",
+    "disabled",
+    "readOnly",
+    "single",
+    // Enables single date selection instead of range
+    "label"
+  ]);
+  const [visible, setVisible] = useState(false);
+  const popoverRef = useRef(null);
+  const triggerRef = useRef(null);
+  const [calendarPosition, setCalendarPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0
+  });
+  const [from, to] = value.split("|");
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      requestAnimationFrame(() => {
+        const rect = triggerRef.current.getBoundingClientRect();
+        setCalendarPosition({
+          top: rect.bottom + window.scrollY,
+          left: rect.left + window.scrollX,
+          width: rect.width
+        });
+      });
+    }
+  };
+  useEffect(() => {
+    updatePosition();
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (triggerRef.current) {
+      resizeObserver.observe(triggerRef.current);
+    }
+    window.addEventListener("scroll", updatePosition);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+    };
+  }, []);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      var _a2;
+      if (event.key === "Escape" && popoverRef.current) {
+        setVisible(false);
+        (_a2 = triggerRef.current) == null ? void 0 : _a2.blur();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  function handleRangeChange(fromValue, toValue) {
+    onChange(`${fromValue}|${toValue}`);
+    setVisible(false);
+  }
+  const handleFocus = () => {
+    if (readOnly) return;
+    setVisible(true);
+    updatePosition();
+  };
+  function formatDisplayValue(from2, to2) {
+    if (!from2 && !to2) return "";
+    if (from2 && to2) return `${formatDate(from2)} - ${formatDate(to2)}`;
+    if (from2) return `${formatDate(from2)} -`;
+    return "";
+  }
+  function formatDate(date) {
+    const [y, m, d] = date.split("-");
+    return `${m}/${d}/${y}`;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      InputBase,
+      __spreadProps(__spreadValues({
+        ref: (el) => {
+          triggerRef.current = el;
+        }
+      }, props), {
+        value: formatDisplayValue(from, to),
+        placeholder,
+        disabled,
+        after: /* @__PURE__ */ jsx(Icon, { name: "calendar_month" }),
+        onFocus: handleFocus,
+        readOnly,
+        label,
+        onChange: () => {
+        }
+      })
+    ),
+    visible && !readOnly && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (el) => {
+            popoverRef.current = el;
+          },
+          className: "absolute z-40 bg-white",
+          style: {
+            top: `${calendarPosition.top + 16}px`,
+            left: `${calendarPosition.left - 4}px`,
+            minWidth: `${calendarPosition.width}px`
+          },
+          children: /* @__PURE__ */ jsx(
+            CalendarRange,
+            {
+              from,
+              to,
+              onChange: handleRangeChange,
+              cardStyle: true,
+              mode: single ? "single" : "double"
+            }
+          )
+        }
+      ),
+      findDocumentRoot(popoverRef.current)
+    )
+  ] });
+};
+DateRangeInput.displayName = "DateRangeInput";
+export {
+  DateRangeInput
+};

package/dist/components/DebugJson.cjs

@@ -0,0 +1,50 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/DebugJson.tsx
+var DebugJson_exports = {};
+__export(DebugJson_exports, {
+  DebugJson: () => DebugJson
+});
+module.exports = __toCommonJS(DebugJson_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DebugJson({ data }) {
+  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) })
+  ] });
+}
+DebugJson.displayName = "dasda";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DebugJson
+});

package/dist/components/DebugJson.js

@@ -0,0 +1,27 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+
+// src/components/DebugJson.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DebugJson({ data }) {
+  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) })
+  ] });
+}
+DebugJson.displayName = "dasda";
+export {
+  DebugJson
+};

package/dist/components/Display.cjs

@@ -0,0 +1,234 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Display.tsx
+var Display_exports = {};
+__export(Display_exports, {
+  Display: () => Display,
+  Display1: () => Display1,
+  Display2: () => Display2
+});
+module.exports = __toCommonJS(Display_exports);
+var import_clsx2 = __toESM(require("clsx"), 1);
+
+// src/classNames.ts
+var import_clsx = __toESM(require("clsx"), 1);
+var typography = {
+  display1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop"
+  ),
+  display2: (0, import_clsx.default)(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop"
+  ),
+  heading1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
+  ),
+  heading2: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
+  ),
+  heading3: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
+  ),
+  subheader: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop"
+  )
+};
+var baseTransition = (0, import_clsx.default)(
+  "transition-colors duration-100 ease-in-out"
+);
+var componentGap = (0, import_clsx.default)(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+);
+var paddingUsingComponentGap = (0, import_clsx.default)(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
+);
+var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var componentPadding = (0, import_clsx.default)(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+);
+var componentPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
+);
+var componentPaddingY = (0, import_clsx.default)(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
+);
+var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+);
+var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+var componentPaddingMinusBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
+);
+var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
+);
+var layoutPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
+);
+var layoutPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
+);
+var containerPaddingX = (0, import_clsx.default)(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
+);
+var containerPaddingY = (0, import_clsx.default)(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+var layoutGroupGapPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var layoutGroupGap = (0, import_clsx.default)(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+);
+var layoutGap = (0, import_clsx.default)(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+);
+var gapUsingContainerPadding = (0, import_clsx.default)(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
+);
+
+// src/components/Display.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Display = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as,
+    color,
+    align,
+    variant = "display1"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "color",
+    "align",
+    "variant"
+  ]);
+  const defaultElement = variant === "display1" ? "h1" : "h2";
+  const Element = as != null ? as : defaultElement;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      className: (0, import_clsx2.default)(
+        typography[variant],
+        className,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    }, props), {
+      children
+    })
+  );
+};
+Display.displayName = "Display";
+var Display1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Display, __spreadProps(__spreadValues({}, props), { variant: "display1" }));
+var Display2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Display, __spreadProps(__spreadValues({}, props), { variant: "display2" }));
+Display1.displayName = "Display1";
+Display2.displayName = "Display2";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Display,
+  Display1,
+  Display2
+});

package/dist/components/Display.js

@@ -0,0 +1,12 @@
+import {
+  Display,
+  Display1,
+  Display2
+} from "../chunk-27KIIUAR.js";
+import "../chunk-KX3O6GJ6.js";
+import "../chunk-ORMEWXMH.js";
+export {
+  Display,
+  Display1,
+  Display2
+};

package/dist/components/EditingContext.cjs

@@ -0,0 +1,73 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/EditingContext.tsx
+var EditingContext_exports = {};
+__export(EditingContext_exports, {
+  EditingContext: () => EditingContext,
+  EditingProvider: () => EditingProvider
+});
+module.exports = __toCommonJS(EditingContext_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EditingContext = (0, import_react.createContext)({
+  data: [],
+  setData: (row, key, value) => {
+    console.log(row, key, value);
+  }
+});
+var EditingProvider = ({ data, children }) => {
+  const [actual, setData] = (0, import_react.useState)(data);
+  const context = {
+    data: actual,
+    setData: (row, key, value) => {
+      setData((prev) => {
+        const newData = [...prev];
+        newData[row] = __spreadProps(__spreadValues({}, newData[row]), {
+          [key]: value
+        });
+        return newData;
+      });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditingContext, { value: context, children });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EditingContext,
+  EditingProvider
+});

package/dist/components/EditingContext.js

@@ -0,0 +1,35 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/EditingContext.tsx
+import { createContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var EditingContext = createContext({
+  data: [],
+  setData: (row, key, value) => {
+    console.log(row, key, value);
+  }
+});
+var EditingProvider = ({ data, children }) => {
+  const [actual, setData] = useState(data);
+  const context = {
+    data: actual,
+    setData: (row, key, value) => {
+      setData((prev) => {
+        const newData = [...prev];
+        newData[row] = __spreadProps(__spreadValues({}, newData[row]), {
+          [key]: value
+        });
+        return newData;
+      });
+    }
+  };
+  return /* @__PURE__ */ jsx(EditingContext, { value: context, children });
+};
+export {
+  EditingContext,
+  EditingProvider
+};