dash-ui-kit 1.0.93 → 2.0.0-dev

package/dist/react/components/timeDelta/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type TimeDeltaFormat } from '../../utils/datetime';
+import { type TimeDeltaFormat } from '../../../shared/utils/datetime';
 export interface TimeDeltaProps {
     /** Start date for delta calculation, defaults to now */
     startDate?: Date | number | string;

package/dist/react/components/timeDelta/index.esm.js

@@ -0,0 +1,88 @@
+"use client";
+
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { cva } from 'class-variance-authority';
+import { NotActive } from '../notActive/index.esm.js';
+import { getTimeDelta } from '../../shared/utils/datetime.esm.js';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+
+const wrapperStyles = cva('inline', {
+  variants: {
+    theme: {
+      light: 'text-gray-900',
+      dark: 'text-gray-100'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+/**
+ * TimeDelta component renews a human-readable delta string periodically,
+ * and optionally wraps it in a tooltip showing the exact date/time.
+ * Supports light/dark theme.
+ */
+const TimeDelta = ({
+  startDate,
+  endDate,
+  // showTimestampTooltip = true,
+  // tooltipDate,
+  format = 'default'
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const [timeDelta, setTimeDelta] = useState(null);
+  // const tooltipDateObj = new Date(tooltipDate ?? endDate)
+  useEffect(() => {
+    if (endDate == null) {
+      setTimeDelta(null);
+      return;
+    }
+    let timeoutId;
+    const updateDelta = () => {
+      const start = startDate != null ? new Date(startDate) : new Date();
+      const end = new Date(endDate);
+      setTimeDelta(getTimeDelta(start, end, format));
+      const now = new Date();
+      const diffMs = Math.abs(end.getTime() - now.getTime());
+      if (diffMs > 60000) {
+        const msToNextMinute = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
+        timeoutId = setTimeout(updateDelta, msToNextMinute);
+      } else {
+        timeoutId = setTimeout(updateDelta, 1000);
+      }
+    };
+    updateDelta();
+    return () => clearTimeout(timeoutId);
+  }, [startDate, endDate, format]);
+  if (timeDelta == null || timeDelta === '') {
+    return jsx(NotActive, {});
+  }
+  // const showTooltip = showTimestampTooltip && format !== 'detailed' && !isNaN(tooltipDateObj.getTime())
+  const content = jsx("span", {
+    className: wrapperStyles({
+      theme
+    }),
+    children: timeDelta
+  });
+  // if (showTooltip) {
+  //   return (
+  //     <Tooltip
+  //       placement="top"
+  //       content={
+  //         <span className={tooltipContentStyles()}>
+  //           {tooltipDateObj.toLocaleDateString()}{' '}{tooltipDateObj.toLocaleTimeString()}
+  //         </span>
+  //       }
+  //     >
+  //       {content}
+  //     </Tooltip>
+  //   )
+  // }
+  return content;
+};
+
+export { TimeDelta, TimeDelta as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/react/components/timeDelta/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/timeDelta/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { cva } from 'class-variance-authority'\nimport { NotActive } from '../notActive'\nimport { getTimeDelta, type TimeDeltaFormat } from '../../../shared/utils/datetime'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst wrapperStyles = cva(\n  'inline',\n  {\n    variants: {\n      theme: {\n        light: 'text-gray-900',\n        dark: 'text-gray-100'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nexport interface TimeDeltaProps {\n  /** Start date for delta calculation, defaults to now */\n  startDate?: Date | number | string\n  /** End date or timestamp */\n  endDate: Date | number | string\n  /** Show tooltip with exact timestamp */\n  showTimestampTooltip?: boolean\n  /** Override date for tooltip instead of endDate */\n  tooltipDate?: Date | number | string\n  /** Format mode: 'default' shows delta and tooltip, 'detailed' suppresses tooltip */\n  format?: TimeDeltaFormat\n}\n\n/**\n * TimeDelta component renews a human-readable delta string periodically,\n * and optionally wraps it in a tooltip showing the exact date/time.\n * Supports light/dark theme.\n */\nexport const TimeDelta: React.FC<TimeDeltaProps> = ({\n  startDate,\n  endDate,\n  // showTimestampTooltip = true,\n  // tooltipDate,\n  format = 'default'\n}) => {\n  const { theme } = useTheme()\n  const [timeDelta, setTimeDelta] = useState<string | null>(null)\n  // const tooltipDateObj = new Date(tooltipDate ?? endDate)\n\n  useEffect(() => {\n    if (endDate == null) {\n      setTimeDelta(null)\n      return\n    }\n\n    let timeoutId: ReturnType<typeof setTimeout>\n\n    const updateDelta = (): void => {\n      const start = startDate != null ? new Date(startDate) : new Date()\n      const end = new Date(endDate)\n      setTimeDelta(getTimeDelta(start, end, format))\n\n      const now = new Date()\n      const diffMs = Math.abs(end.getTime() - now.getTime())\n      if (diffMs > 60_000) {\n        const msToNextMinute = (60 - now.getSeconds()) * 1000 - now.getMilliseconds()\n        timeoutId = setTimeout(updateDelta, msToNextMinute)\n      } else {\n        timeoutId = setTimeout(updateDelta, 1000)\n      }\n    }\n\n    updateDelta()\n\n    return () => clearTimeout(timeoutId)\n  }, [startDate, endDate, format])\n\n  if (timeDelta == null || timeDelta === '') {\n    return <NotActive />\n  }\n\n  // const showTooltip = showTimestampTooltip && format !== 'detailed' && !isNaN(tooltipDateObj.getTime())\n  const content = <span className={wrapperStyles({ theme })}>{timeDelta}</span>\n\n  // if (showTooltip) {\n  //   return (\n  //     <Tooltip\n  //       placement=\"top\"\n  //       content={\n  //         <span className={tooltipContentStyles()}>\n  //           {tooltipDateObj.toLocaleDateString()}{' '}{tooltipDateObj.toLocaleTimeString()}\n  //         </span>\n  //       }\n  //     >\n  //       {content}\n  //     </Tooltip>\n  //   )\n  // }\n\n  return content\n}\n\nexport default TimeDelta "],"names":["wrapperStyles","cva","variants","theme","light","dark","defaultVariants","TimeDelta","startDate","endDate","format","useTheme","timeDelta","setTimeDelta","useState","useEffect","timeoutId","updateDelta","start","Date","end","getTimeDelta","now","diffMs","Math","abs","getTime","msToNextMinute","getSeconds","getMilliseconds","setTimeout","clearTimeout","_jsx","NotActive","content","className","children"],"mappings":";;;;;;;;;AAMA,MAAMA,aAAa,GAAGC,GAAG,CACvB,QAAQ,EACR;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,eAAe;AACtBC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,eAAe,EAAE;AACfH,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CACF;AAeD;;;;AAIG;AACI,MAAMI,SAAS,GAA6BA,CAAC;EAClDC,SAAS;EACTC,OAAO;AACP;AACA;AACAC,EAAAA,MAAM,GAAG;AACV,CAAA,KAAI;EACH,MAAM;AAAEP,IAAAA;GAAO,GAAGQ,QAAQ,EAAE;EAC5B,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,QAAQ,CAAgB,IAAI,CAAC;AAC/D;AAEAC,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIN,OAAO,IAAI,IAAI,EAAE;MACnBI,YAAY,CAAC,IAAI,CAAC;AAClB,MAAA;AACF;AAEA,IAAA,IAAIG,SAAwC;IAE5C,MAAMC,WAAW,GAAGA,MAAW;AAC7B,MAAA,MAAMC,KAAK,GAAGV,SAAS,IAAI,IAAI,GAAG,IAAIW,IAAI,CAACX,SAAS,CAAC,GAAG,IAAIW,IAAI,EAAE;AAClE,MAAA,MAAMC,GAAG,GAAG,IAAID,IAAI,CAACV,OAAO,CAAC;MAC7BI,YAAY,CAACQ,YAAY,CAACH,KAAK,EAAEE,GAAG,EAAEV,MAAM,CAAC,CAAC;AAE9C,MAAA,MAAMY,GAAG,GAAG,IAAIH,IAAI,EAAE;AACtB,MAAA,MAAMI,MAAM,GAAGC,IAAI,CAACC,GAAG,CAACL,GAAG,CAACM,OAAO,EAAE,GAAGJ,GAAG,CAACI,OAAO,EAAE,CAAC;MACtD,IAAIH,MAAM,GAAG,KAAM,EAAE;AACnB,QAAA,MAAMI,cAAc,GAAG,CAAC,EAAE,GAAGL,GAAG,CAACM,UAAU,EAAE,IAAI,IAAI,GAAGN,GAAG,CAACO,eAAe,EAAE;AAC7Eb,QAAAA,SAAS,GAAGc,UAAU,CAACb,WAAW,EAAEU,cAAc,CAAC;AACrD,OAAC,MAAM;AACLX,QAAAA,SAAS,GAAGc,UAAU,CAACb,WAAW,EAAE,IAAI,CAAC;AAC3C;KACD;AAEDA,IAAAA,WAAW,EAAE;AAEb,IAAA,OAAO,MAAMc,YAAY,CAACf,SAAS,CAAC;GACrC,EAAE,CAACR,SAAS,EAAEC,OAAO,EAAEC,MAAM,CAAC,CAAC;AAEhC,EAAA,IAAIE,SAAS,IAAI,IAAI,IAAIA,SAAS,KAAK,EAAE,EAAE;AACzC,IAAA,OAAOoB,GAAA,CAACC,SAAS,EAAA,EAAA,CAAG;AACtB;AAEA;AACA,EAAA,MAAMC,OAAO,GAAGF,GAAM,CAAA,MAAA,EAAA;IAAAG,SAAS,EAAEnC,aAAa,CAAC;AAAEG,MAAAA;AAAO,KAAA,CAAC;AAAGiC,IAAAA,QAAA,EAAAxB;IAAiB;AAE7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,EAAA,OAAOsB,OAAO;AAChB;;;;"}

package/dist/react/components/transactionStatusIcon/index.cjs.js

@@ -0,0 +1,59 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+var index = require('../icons/index.cjs.js');
+
+/**
+ * Renders an icon corresponding to the given `status`.
+ * If `status` is not recognized, returns null.
+ * Colors adapt to light/dark theme unless overridden.
+ */
+const TransactionStatusIcon = _a => {
+  var {
+      status,
+      color
+    } = _a,
+    props = tslib.__rest(_a, ["status", "color"]);
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const map = {
+    SUCCESS: index.SuccessIcon,
+    FAIL: index.ErrorIcon,
+    QUEUED: index.QueuedIcon,
+    POOLED: index.PooledIcon,
+    BROADCASTED: index.BroadcastedIcon
+  };
+  const IconComponent = map[status];
+  // Default colors based on theme, if no color override provided
+  const defaultColors = {
+    light: {
+      SUCCESS: '#1CC400',
+      FAIL: '#F45858',
+      QUEUED: '#F4A358',
+      POOLED: '#008DE4',
+      BROADCASTED: '#008DE4'
+    },
+    dark: {
+      SUCCESS: '#22D32E',
+      FAIL: '#FF6B6B',
+      QUEUED: '#FFB366',
+      POOLED: '#42A5F5',
+      BROADCASTED: '#42A5F5'
+    }
+  };
+  const iconColor = color !== null && color !== void 0 ? color : defaultColors[theme][status];
+  return IconComponent != null ? jsxRuntime.jsx(IconComponent, Object.assign({
+    color: iconColor
+  }, props)) : null;
+};
+
+exports.TransactionStatusIcon = TransactionStatusIcon;
+exports.default = TransactionStatusIcon;
+//# sourceMappingURL=index.cjs.js.map

package/dist/react/components/transactionStatusIcon/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/transactionStatusIcon/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport {\n  SuccessIcon,\n  ErrorIcon,\n  QueuedIcon,\n  PooledIcon,\n  BroadcastedIcon\n} from '../icons'\n\n/**\n * Available status keys for which an icon will be rendered.\n */\nexport type StatusKey =\n  | 'SUCCESS'\n  | 'FAIL'\n  | 'QUEUED'\n  | 'POOLED'\n  | 'BROADCASTED'\n\n/**\n * Props for the TransactionStatusIcon component.\n * Inherits all props of SuccessIcon (assumed representative of all icons),\n * plus a `status` field to choose which icon to render.\n */\nexport interface TransactionStatusIconProps\n  extends Omit<React.ComponentProps<typeof SuccessIcon>, 'size' | 'color'> {\n  /** Which status icon to show. */\n  status: StatusKey\n  /** Optional override for icon size. */\n  size?: number\n  /** Optional override for icon color. */\n  color?: string\n}\n\n/**\n * Renders an icon corresponding to the given `status`.\n * If `status` is not recognized, returns null.\n * Colors adapt to light/dark theme unless overridden.\n */\nexport const TransactionStatusIcon: React.FC<TransactionStatusIconProps> = ({ status, color, ...props }) => {\n  const { theme } = useTheme()\n  \n  const map = {\n    SUCCESS: SuccessIcon,\n    FAIL: ErrorIcon,\n    QUEUED: QueuedIcon,\n    POOLED: PooledIcon,\n    BROADCASTED: BroadcastedIcon\n  } as const\n\n  const IconComponent = map[status]\n\n  // Default colors based on theme, if no color override provided\n  const defaultColors = {\n    light: {\n      SUCCESS: '#1CC400',\n      FAIL: '#F45858',\n      QUEUED: '#F4A358',\n      POOLED: '#008DE4',\n      BROADCASTED: '#008DE4'\n    },\n    dark: {\n      SUCCESS: '#22D32E',\n      FAIL: '#FF6B6B',\n      QUEUED: '#FFB366',\n      POOLED: '#42A5F5',\n      BROADCASTED: '#42A5F5'\n    }\n  }\n\n  const iconColor = color ?? defaultColors[theme][status]\n\n  return IconComponent != null ? <IconComponent color={iconColor} {...props} /> : null\n}\n\nexport default TransactionStatusIcon "],"names":["TransactionStatusIcon","_a","status","color","props","__rest","theme","useTheme","map","SUCCESS","SuccessIcon","FAIL","ErrorIcon","QUEUED","QueuedIcon","POOLED","PooledIcon","BROADCASTED","BroadcastedIcon","IconComponent","defaultColors","light","dark","iconColor","_jsx","Object","assign"],"mappings":";;;;;;;;;;;AAmCA;;;;AAIG;AACUA,MAAAA,qBAAqB,GAA0CC,EAA2B,IAAI;MAA/B;MAAEC,MAAM;AAAEC,MAAAA;AAAK,KAAA,GAAAF,EAAY;IAAPG,KAAK,GAAAC,YAAA,CAAAJ,EAAA,EAAzB,mBAA2B,CAAF;EACnG,MAAM;AAAEK,IAAAA;GAAO,GAAGC,qBAAQ,EAAE;AAE5B,EAAA,MAAMC,GAAG,GAAG;AACVC,IAAAA,OAAO,EAAEC,iBAAW;AACpBC,IAAAA,IAAI,EAAEC,eAAS;AACfC,IAAAA,MAAM,EAAEC,gBAAU;AAClBC,IAAAA,MAAM,EAAEC,gBAAU;AAClBC,IAAAA,WAAW,EAAEC;GACL;AAEV,EAAA,MAAMC,aAAa,GAAGX,GAAG,CAACN,MAAM,CAAC;AAEjC;AACA,EAAA,MAAMkB,aAAa,GAAG;AACpBC,IAAAA,KAAK,EAAE;AACLZ,MAAAA,OAAO,EAAE,SAAS;AAClBE,MAAAA,IAAI,EAAE,SAAS;AACfE,MAAAA,MAAM,EAAE,SAAS;AACjBE,MAAAA,MAAM,EAAE,SAAS;AACjBE,MAAAA,WAAW,EAAE;KACd;AACDK,IAAAA,IAAI,EAAE;AACJb,MAAAA,OAAO,EAAE,SAAS;AAClBE,MAAAA,IAAI,EAAE,SAAS;AACfE,MAAAA,MAAM,EAAE,SAAS;AACjBE,MAAAA,MAAM,EAAE,SAAS;AACjBE,MAAAA,WAAW,EAAE;AACd;GACF;AAED,EAAA,MAAMM,SAAS,GAAGpB,KAAK,KAAA,IAAA,IAALA,KAAK,KAAL,MAAA,GAAAA,KAAK,GAAIiB,aAAa,CAACd,KAAK,CAAC,CAACJ,MAAM,CAAC;EAEvD,OAAOiB,aAAa,IAAI,IAAI,GAAGK,eAACL,aAAa,EAAAM,MAAA,CAAAC,MAAA,CAAA;AAACvB,IAAAA,KAAK,EAAEoB;KAAenB,KAAK,CAAA,CAAI,GAAG,IAAI;AACtF;;;;;"}

package/dist/react/components/transactionStatusIcon/index.esm.js

@@ -0,0 +1,54 @@
+"use client";
+
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { BroadcastedIcon, PooledIcon, QueuedIcon, ErrorIcon, SuccessIcon } from '../icons/index.esm.js';
+
+/**
+ * Renders an icon corresponding to the given `status`.
+ * If `status` is not recognized, returns null.
+ * Colors adapt to light/dark theme unless overridden.
+ */
+const TransactionStatusIcon = _a => {
+  var {
+      status,
+      color
+    } = _a,
+    props = __rest(_a, ["status", "color"]);
+  const {
+    theme
+  } = useTheme();
+  const map = {
+    SUCCESS: SuccessIcon,
+    FAIL: ErrorIcon,
+    QUEUED: QueuedIcon,
+    POOLED: PooledIcon,
+    BROADCASTED: BroadcastedIcon
+  };
+  const IconComponent = map[status];
+  // Default colors based on theme, if no color override provided
+  const defaultColors = {
+    light: {
+      SUCCESS: '#1CC400',
+      FAIL: '#F45858',
+      QUEUED: '#F4A358',
+      POOLED: '#008DE4',
+      BROADCASTED: '#008DE4'
+    },
+    dark: {
+      SUCCESS: '#22D32E',
+      FAIL: '#FF6B6B',
+      QUEUED: '#FFB366',
+      POOLED: '#42A5F5',
+      BROADCASTED: '#42A5F5'
+    }
+  };
+  const iconColor = color !== null && color !== void 0 ? color : defaultColors[theme][status];
+  return IconComponent != null ? jsx(IconComponent, Object.assign({
+    color: iconColor
+  }, props)) : null;
+};
+
+export { TransactionStatusIcon, TransactionStatusIcon as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/react/components/transactionStatusIcon/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/transactionStatusIcon/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport {\n  SuccessIcon,\n  ErrorIcon,\n  QueuedIcon,\n  PooledIcon,\n  BroadcastedIcon\n} from '../icons'\n\n/**\n * Available status keys for which an icon will be rendered.\n */\nexport type StatusKey =\n  | 'SUCCESS'\n  | 'FAIL'\n  | 'QUEUED'\n  | 'POOLED'\n  | 'BROADCASTED'\n\n/**\n * Props for the TransactionStatusIcon component.\n * Inherits all props of SuccessIcon (assumed representative of all icons),\n * plus a `status` field to choose which icon to render.\n */\nexport interface TransactionStatusIconProps\n  extends Omit<React.ComponentProps<typeof SuccessIcon>, 'size' | 'color'> {\n  /** Which status icon to show. */\n  status: StatusKey\n  /** Optional override for icon size. */\n  size?: number\n  /** Optional override for icon color. */\n  color?: string\n}\n\n/**\n * Renders an icon corresponding to the given `status`.\n * If `status` is not recognized, returns null.\n * Colors adapt to light/dark theme unless overridden.\n */\nexport const TransactionStatusIcon: React.FC<TransactionStatusIconProps> = ({ status, color, ...props }) => {\n  const { theme } = useTheme()\n  \n  const map = {\n    SUCCESS: SuccessIcon,\n    FAIL: ErrorIcon,\n    QUEUED: QueuedIcon,\n    POOLED: PooledIcon,\n    BROADCASTED: BroadcastedIcon\n  } as const\n\n  const IconComponent = map[status]\n\n  // Default colors based on theme, if no color override provided\n  const defaultColors = {\n    light: {\n      SUCCESS: '#1CC400',\n      FAIL: '#F45858',\n      QUEUED: '#F4A358',\n      POOLED: '#008DE4',\n      BROADCASTED: '#008DE4'\n    },\n    dark: {\n      SUCCESS: '#22D32E',\n      FAIL: '#FF6B6B',\n      QUEUED: '#FFB366',\n      POOLED: '#42A5F5',\n      BROADCASTED: '#42A5F5'\n    }\n  }\n\n  const iconColor = color ?? defaultColors[theme][status]\n\n  return IconComponent != null ? <IconComponent color={iconColor} {...props} /> : null\n}\n\nexport default TransactionStatusIcon "],"names":["TransactionStatusIcon","_a","status","color","props","__rest","theme","useTheme","map","SUCCESS","SuccessIcon","FAIL","ErrorIcon","QUEUED","QueuedIcon","POOLED","PooledIcon","BROADCASTED","BroadcastedIcon","IconComponent","defaultColors","light","dark","iconColor","_jsx","Object","assign"],"mappings":";;;;;;;AAmCA;;;;AAIG;AACUA,MAAAA,qBAAqB,GAA0CC,EAA2B,IAAI;MAA/B;MAAEC,MAAM;AAAEC,MAAAA;AAAK,KAAA,GAAAF,EAAY;IAAPG,KAAK,GAAAC,MAAA,CAAAJ,EAAA,EAAzB,mBAA2B,CAAF;EACnG,MAAM;AAAEK,IAAAA;GAAO,GAAGC,QAAQ,EAAE;AAE5B,EAAA,MAAMC,GAAG,GAAG;AACVC,IAAAA,OAAO,EAAEC,WAAW;AACpBC,IAAAA,IAAI,EAAEC,SAAS;AACfC,IAAAA,MAAM,EAAEC,UAAU;AAClBC,IAAAA,MAAM,EAAEC,UAAU;AAClBC,IAAAA,WAAW,EAAEC;GACL;AAEV,EAAA,MAAMC,aAAa,GAAGX,GAAG,CAACN,MAAM,CAAC;AAEjC;AACA,EAAA,MAAMkB,aAAa,GAAG;AACpBC,IAAAA,KAAK,EAAE;AACLZ,MAAAA,OAAO,EAAE,SAAS;AAClBE,MAAAA,IAAI,EAAE,SAAS;AACfE,MAAAA,MAAM,EAAE,SAAS;AACjBE,MAAAA,MAAM,EAAE,SAAS;AACjBE,MAAAA,WAAW,EAAE;KACd;AACDK,IAAAA,IAAI,EAAE;AACJb,MAAAA,OAAO,EAAE,SAAS;AAClBE,MAAAA,IAAI,EAAE,SAAS;AACfE,MAAAA,MAAM,EAAE,SAAS;AACjBE,MAAAA,MAAM,EAAE,SAAS;AACjBE,MAAAA,WAAW,EAAE;AACd;GACF;AAED,EAAA,MAAMM,SAAS,GAAGpB,KAAK,KAAA,IAAA,IAALA,KAAK,KAAL,MAAA,GAAAA,KAAK,GAAIiB,aAAa,CAACd,KAAK,CAAC,CAACJ,MAAM,CAAC;EAEvD,OAAOiB,aAAa,IAAI,IAAI,GAAGK,IAACL,aAAa,EAAAM,MAAA,CAAAC,MAAA,CAAA;AAACvB,IAAAA,KAAK,EAAEoB;KAAenB,KAAK,CAAA,CAAI,GAAG,IAAI;AACtF;;;;"}

package/dist/react/components/valueCard/index.cjs.js

@@ -0,0 +1,176 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+
+const valueCard = classVarianceAuthority.cva('flex items-center transition-all outline outline-1 outline-offset-[-1px]', {
+  variants: {
+    theme: {
+      light: 'outline-gray-200',
+      dark: 'bg-gray-800/50 outline-gray-400'
+    },
+    colorScheme: {
+      default: '',
+      transparent: 'bg-transparent',
+      green: 'text-green-500 bg-green-200 outline-green-400',
+      lightBlue: 'bg-dash-brand-dim/10 !outline-dash-brand/20',
+      white: 'bg-white',
+      lightGray: 'bg-dash-primary-die-subdued',
+      yellow: 'bg-dash-yellow-light !outline-dash-yellow'
+    },
+    size: {
+      xs: 'px-[0.5rem] py-[0.25rem] rounded-[0.25rem]',
+      sm: 'dash-block-sm',
+      md: 'dash-block-md',
+      xl: 'dash-block-xl'
+    },
+    clickable: {
+      false: '',
+      true: 'cursor-pointer transition-colors active:translate-y-px active:opacity-90'
+    },
+    loading: {
+      false: '',
+      true: 'animate-pulse'
+    },
+    border: {
+      false: '!outline-none',
+      true: ''
+    }
+  },
+  compoundVariants: [
+  // default scheme hover
+  {
+    theme: 'light',
+    colorScheme: 'default',
+    clickable: true,
+    class: 'hover:bg-gray-200/50'
+  }, {
+    theme: 'dark',
+    colorScheme: 'default',
+    clickable: true,
+    class: 'hover:bg-gray-700/50'
+  },
+  // transparent scheme hover
+  {
+    theme: 'light',
+    colorScheme: 'transparent',
+    clickable: true,
+    class: 'hover:bg-gray-100'
+  }, {
+    theme: 'dark',
+    colorScheme: 'transparent',
+    clickable: true,
+    class: 'hover:bg-gray-900'
+  },
+  // green scheme hover
+  {
+    theme: 'light',
+    colorScheme: 'green',
+    clickable: true,
+    class: 'hover:bg-green-300'
+  }, {
+    theme: 'dark',
+    colorScheme: 'green',
+    clickable: true,
+    class: 'hover:bg-green-400'
+  },
+  // green lightBlue
+  {
+    colorScheme: 'lightBlue',
+    clickable: true,
+    class: 'hover:bg-dash-brand/15'
+  },
+  // white
+  {
+    theme: 'light',
+    colorScheme: 'white',
+    clickable: true,
+    class: 'hover:bg-gray-100'
+  }, {
+    theme: 'dark',
+    colorScheme: 'white',
+    clickable: true,
+    class: 'hover:bg-gray-100'
+  },
+  // lightGray scheme hover
+  {
+    theme: 'light',
+    colorScheme: 'lightGray',
+    clickable: true,
+    class: 'hover:bg-dash-primary-die'
+  }, {
+    theme: 'dark',
+    colorScheme: 'lightGray',
+    clickable: true,
+    class: 'hover:bg-gray-600'
+  },
+  // yellow scheme hover
+  {
+    colorScheme: 'yellow',
+    clickable: true,
+    class: 'hover:bg-dash-yellow'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    colorScheme: 'default',
+    size: 'md',
+    clickable: false,
+    loading: false,
+    border: true
+  }
+});
+/**
+ * A card container that adapts to light/dark theme,
+ * supports various color schemes, sizes, clickability,
+ * loading state, and optional border styling.
+ *
+ * @example
+ * <ValueCard colorScheme="green" border as={Link} link="/foo">
+ *   Go
+ * </ValueCard>
+ */
+const ValueCard = _a => {
+  var {
+      as,
+      link = '',
+      colorScheme,
+      size,
+      clickable = false,
+      loading,
+      border,
+      className = '',
+      children
+    } = _a,
+    props = tslib.__rest(_a, ["as", "link", "colorScheme", "size", "clickable", "loading", "border", "className", "children"]);
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const isClickable = Boolean(link !== '' || clickable);
+  const classes = valueCard({
+    theme,
+    colorScheme,
+    size,
+    clickable: isClickable,
+    loading,
+    border
+  }) + ' ' + String(className);
+  // choose element: custom `as`, or <a> if link, else <div>
+  const Component = as !== null && as !== void 0 ? as : link !== '' ? 'a' : 'div';
+  const mergedProps = Object.assign(Object.assign({}, props), {
+    className: classes
+  });
+  if (link !== '') mergedProps.href = link;
+  return jsxRuntime.jsx(Component, Object.assign({}, mergedProps, {
+    children: children
+  }));
+};
+
+exports.ValueCard = ValueCard;
+exports.default = ValueCard;
+//# sourceMappingURL=index.cjs.js.map

package/dist/react/components/valueCard/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/valueCard/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst valueCard = cva(\n  'flex items-center transition-all outline outline-1 outline-offset-[-1px]',\n  {\n    variants: {\n      theme: {\n        light: 'outline-gray-200',\n        dark: 'bg-gray-800/50 outline-gray-400'\n      },\n      colorScheme: {\n        default: '',\n        transparent: 'bg-transparent',\n        green: 'text-green-500 bg-green-200 outline-green-400',\n        lightBlue: 'bg-dash-brand-dim/10 !outline-dash-brand/20',\n        white: 'bg-white',\n        lightGray: 'bg-dash-primary-die-subdued',\n        yellow: 'bg-dash-yellow-light !outline-dash-yellow'\n      },\n      size: {\n        xs: 'px-[0.5rem] py-[0.25rem] rounded-[0.25rem]',\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      clickable: {\n        false: '',\n        true: 'cursor-pointer transition-colors active:translate-y-px active:opacity-90'\n      },\n      loading: {\n        false: '',\n        true: 'animate-pulse'\n      },\n      border: {\n        false: '!outline-none',\n        true: ''\n      }\n    },\n    compoundVariants: [\n      // default scheme hover\n      { theme: 'light', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-200/50' },\n      { theme: 'dark', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-700/50' },\n      // transparent scheme hover\n      { theme: 'light', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-900' },\n      // green scheme hover\n      { theme: 'light', colorScheme: 'green', clickable: true, class: 'hover:bg-green-300' },\n      { theme: 'dark', colorScheme: 'green', clickable: true, class: 'hover:bg-green-400' },\n      // green lightBlue\n      { colorScheme: 'lightBlue', clickable: true, class: 'hover:bg-dash-brand/15' },\n      // white\n      { theme: 'light', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      // lightGray scheme hover\n      { theme: 'light', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-dash-primary-die' },\n      { theme: 'dark', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-gray-600' },\n      // yellow scheme hover\n      { colorScheme: 'yellow', clickable: true, class: 'hover:bg-dash-yellow' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'md',\n      clickable: false,\n      loading: false,\n      border: true\n    }\n  }\n)\n\ntype ValueCardVariants = VariantProps<typeof valueCard>\n\nexport interface ValueCardProps extends Omit<ValueCardVariants, 'theme'> {\n  /** If you pass an `as` component, it'll receive `href` when `link` is set */\n  as?: React.ElementType\n  /** Only applies `href` if `as` is `'a'` or a component that accepts `href` */\n  link?: string\n  className?: string\n  children: React.ReactNode\n  /** Additional props to pass to the underlying element */\n  [key: string]: any\n}\n\n/**\n * A card container that adapts to light/dark theme,\n * supports various color schemes, sizes, clickability,\n * loading state, and optional border styling.\n *\n * @example\n * <ValueCard colorScheme=\"green\" border as={Link} link=\"/foo\">\n *   Go\n * </ValueCard>\n */\nexport const ValueCard: React.FC<ValueCardProps> = ({\n  as,\n  link = '',\n  colorScheme,\n  size,\n  clickable = false,\n  loading,\n  border,\n  className = '',\n  children,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const isClickable = Boolean(link !== '' || clickable)\n\n  const classes = valueCard({\n    theme,\n    colorScheme,\n    size,\n    clickable: isClickable,\n    loading,\n    border\n  }) + ' ' + (String(className))\n\n  // choose element: custom `as`, or <a> if link, else <div>\n  const Component = as ?? (link !== '' ? 'a' : 'div')\n\n  const mergedProps: any = { ...props, className: classes }\n  if (link !== '') mergedProps.href = link\n\n  return <Component {...mergedProps}>{children}</Component>\n}\n\nexport default ValueCard "],"names":["valueCard","cva","variants","theme","light","dark","colorScheme","default","transparent","green","lightBlue","white","lightGray","yellow","size","xs","sm","md","xl","clickable","false","true","loading","border","compoundVariants","class","defaultVariants","ValueCard","_a","as","link","className","children","props","__rest","useTheme","isClickable","Boolean","classes","String","Component","mergedProps","href","_jsx","Object","assign"],"mappings":"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"}

package/dist/react/components/valueCard/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const valueCard: (props?: ({
     theme?: "light" | "dark" | null | undefined;
-    colorScheme?: "white" | "default" | "lightBlue" | "lightGray" | "green" | "transparent" | "yellow" | null | undefined;
+    colorScheme?: "white" | "default" | "lightBlue" | "lightGray" | "green" | "yellow" | "transparent" | null | undefined;
     size?: "xs" | "sm" | "xl" | "md" | null | undefined;
     clickable?: boolean | null | undefined;
     loading?: boolean | null | undefined;

package/dist/react/components/valueCard/index.esm.js

@@ -0,0 +1,171 @@
+"use client";
+
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+
+const valueCard = cva('flex items-center transition-all outline outline-1 outline-offset-[-1px]', {
+  variants: {
+    theme: {
+      light: 'outline-gray-200',
+      dark: 'bg-gray-800/50 outline-gray-400'
+    },
+    colorScheme: {
+      default: '',
+      transparent: 'bg-transparent',
+      green: 'text-green-500 bg-green-200 outline-green-400',
+      lightBlue: 'bg-dash-brand-dim/10 !outline-dash-brand/20',
+      white: 'bg-white',
+      lightGray: 'bg-dash-primary-die-subdued',
+      yellow: 'bg-dash-yellow-light !outline-dash-yellow'
+    },
+    size: {
+      xs: 'px-[0.5rem] py-[0.25rem] rounded-[0.25rem]',
+      sm: 'dash-block-sm',
+      md: 'dash-block-md',
+      xl: 'dash-block-xl'
+    },
+    clickable: {
+      false: '',
+      true: 'cursor-pointer transition-colors active:translate-y-px active:opacity-90'
+    },
+    loading: {
+      false: '',
+      true: 'animate-pulse'
+    },
+    border: {
+      false: '!outline-none',
+      true: ''
+    }
+  },
+  compoundVariants: [
+  // default scheme hover
+  {
+    theme: 'light',
+    colorScheme: 'default',
+    clickable: true,
+    class: 'hover:bg-gray-200/50'
+  }, {
+    theme: 'dark',
+    colorScheme: 'default',
+    clickable: true,
+    class: 'hover:bg-gray-700/50'
+  },
+  // transparent scheme hover
+  {
+    theme: 'light',
+    colorScheme: 'transparent',
+    clickable: true,
+    class: 'hover:bg-gray-100'
+  }, {
+    theme: 'dark',
+    colorScheme: 'transparent',
+    clickable: true,
+    class: 'hover:bg-gray-900'
+  },
+  // green scheme hover
+  {
+    theme: 'light',
+    colorScheme: 'green',
+    clickable: true,
+    class: 'hover:bg-green-300'
+  }, {
+    theme: 'dark',
+    colorScheme: 'green',
+    clickable: true,
+    class: 'hover:bg-green-400'
+  },
+  // green lightBlue
+  {
+    colorScheme: 'lightBlue',
+    clickable: true,
+    class: 'hover:bg-dash-brand/15'
+  },
+  // white
+  {
+    theme: 'light',
+    colorScheme: 'white',
+    clickable: true,
+    class: 'hover:bg-gray-100'
+  }, {
+    theme: 'dark',
+    colorScheme: 'white',
+    clickable: true,
+    class: 'hover:bg-gray-100'
+  },
+  // lightGray scheme hover
+  {
+    theme: 'light',
+    colorScheme: 'lightGray',
+    clickable: true,
+    class: 'hover:bg-dash-primary-die'
+  }, {
+    theme: 'dark',
+    colorScheme: 'lightGray',
+    clickable: true,
+    class: 'hover:bg-gray-600'
+  },
+  // yellow scheme hover
+  {
+    colorScheme: 'yellow',
+    clickable: true,
+    class: 'hover:bg-dash-yellow'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    colorScheme: 'default',
+    size: 'md',
+    clickable: false,
+    loading: false,
+    border: true
+  }
+});
+/**
+ * A card container that adapts to light/dark theme,
+ * supports various color schemes, sizes, clickability,
+ * loading state, and optional border styling.
+ *
+ * @example
+ * <ValueCard colorScheme="green" border as={Link} link="/foo">
+ *   Go
+ * </ValueCard>
+ */
+const ValueCard = _a => {
+  var {
+      as,
+      link = '',
+      colorScheme,
+      size,
+      clickable = false,
+      loading,
+      border,
+      className = '',
+      children
+    } = _a,
+    props = __rest(_a, ["as", "link", "colorScheme", "size", "clickable", "loading", "border", "className", "children"]);
+  const {
+    theme
+  } = useTheme();
+  const isClickable = Boolean(link !== '' || clickable);
+  const classes = valueCard({
+    theme,
+    colorScheme,
+    size,
+    clickable: isClickable,
+    loading,
+    border
+  }) + ' ' + String(className);
+  // choose element: custom `as`, or <a> if link, else <div>
+  const Component = as !== null && as !== void 0 ? as : link !== '' ? 'a' : 'div';
+  const mergedProps = Object.assign(Object.assign({}, props), {
+    className: classes
+  });
+  if (link !== '') mergedProps.href = link;
+  return jsx(Component, Object.assign({}, mergedProps, {
+    children: children
+  }));
+};
+
+export { ValueCard, ValueCard as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/react/components/valueCard/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/valueCard/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst valueCard = cva(\n  'flex items-center transition-all outline outline-1 outline-offset-[-1px]',\n  {\n    variants: {\n      theme: {\n        light: 'outline-gray-200',\n        dark: 'bg-gray-800/50 outline-gray-400'\n      },\n      colorScheme: {\n        default: '',\n        transparent: 'bg-transparent',\n        green: 'text-green-500 bg-green-200 outline-green-400',\n        lightBlue: 'bg-dash-brand-dim/10 !outline-dash-brand/20',\n        white: 'bg-white',\n        lightGray: 'bg-dash-primary-die-subdued',\n        yellow: 'bg-dash-yellow-light !outline-dash-yellow'\n      },\n      size: {\n        xs: 'px-[0.5rem] py-[0.25rem] rounded-[0.25rem]',\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      clickable: {\n        false: '',\n        true: 'cursor-pointer transition-colors active:translate-y-px active:opacity-90'\n      },\n      loading: {\n        false: '',\n        true: 'animate-pulse'\n      },\n      border: {\n        false: '!outline-none',\n        true: ''\n      }\n    },\n    compoundVariants: [\n      // default scheme hover\n      { theme: 'light', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-200/50' },\n      { theme: 'dark', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-700/50' },\n      // transparent scheme hover\n      { theme: 'light', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-900' },\n      // green scheme hover\n      { theme: 'light', colorScheme: 'green', clickable: true, class: 'hover:bg-green-300' },\n      { theme: 'dark', colorScheme: 'green', clickable: true, class: 'hover:bg-green-400' },\n      // green lightBlue\n      { colorScheme: 'lightBlue', clickable: true, class: 'hover:bg-dash-brand/15' },\n      // white\n      { theme: 'light', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      // lightGray scheme hover\n      { theme: 'light', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-dash-primary-die' },\n      { theme: 'dark', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-gray-600' },\n      // yellow scheme hover\n      { colorScheme: 'yellow', clickable: true, class: 'hover:bg-dash-yellow' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'md',\n      clickable: false,\n      loading: false,\n      border: true\n    }\n  }\n)\n\ntype ValueCardVariants = VariantProps<typeof valueCard>\n\nexport interface ValueCardProps extends Omit<ValueCardVariants, 'theme'> {\n  /** If you pass an `as` component, it'll receive `href` when `link` is set */\n  as?: React.ElementType\n  /** Only applies `href` if `as` is `'a'` or a component that accepts `href` */\n  link?: string\n  className?: string\n  children: React.ReactNode\n  /** Additional props to pass to the underlying element */\n  [key: string]: any\n}\n\n/**\n * A card container that adapts to light/dark theme,\n * supports various color schemes, sizes, clickability,\n * loading state, and optional border styling.\n *\n * @example\n * <ValueCard colorScheme=\"green\" border as={Link} link=\"/foo\">\n *   Go\n * </ValueCard>\n */\nexport const ValueCard: React.FC<ValueCardProps> = ({\n  as,\n  link = '',\n  colorScheme,\n  size,\n  clickable = false,\n  loading,\n  border,\n  className = '',\n  children,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const isClickable = Boolean(link !== '' || clickable)\n\n  const classes = valueCard({\n    theme,\n    colorScheme,\n    size,\n    clickable: isClickable,\n    loading,\n    border\n  }) + ' ' + (String(className))\n\n  // choose element: custom `as`, or <a> if link, else <div>\n  const Component = as ?? (link !== '' ? 'a' : 'div')\n\n  const mergedProps: any = { ...props, className: classes }\n  if (link !== '') mergedProps.href = link\n\n  return <Component {...mergedProps}>{children}</Component>\n}\n\nexport default ValueCard "],"names":["valueCard","cva","variants","theme","light","dark","colorScheme","default","transparent","green","lightBlue","white","lightGray","yellow","size","xs","sm","md","xl","clickable","false","true","loading","border","compoundVariants","class","defaultVariants","ValueCard","_a","as","link","className","children","props","__rest","useTheme","isClickable","Boolean","classes","String","Component","mergedProps","href","_jsx","Object","assign"],"mappings":"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"}