dash-ui-kit 1.0.93 → 2.0.0-dev

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

@@ -0,0 +1,95 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var Popover = require('@radix-ui/react-popover');
+var index = require('../icons/index.cjs.js');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+var copyToClipboard = require('../../utils/copyToClipboard.cjs.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var Popover__namespace = /*#__PURE__*/_interopNamespaceDefault(Popover);
+
+const copyBtn = classVarianceAuthority.cva('p-0 flex-shrink-0 h-[max-content] min-w-0 bg-transparent transition-colors', {
+  variants: {
+    theme: {
+      light: 'hover:text-gray-600 active:text-gray-800',
+      dark: 'hover:text-gray-300 active:text-gray-100'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const CopyButton = _a => {
+  var {
+      text,
+      className,
+      onCopy
+    } = _a,
+    props = tslib.__rest(_a, ["text", "className", "onCopy"]);
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const [open, setOpen] = React.useState(false);
+  const handleCopy = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyToClipboard.copyToClipboard(text, onCopy);
+    setOpen(true);
+    setTimeout(() => setOpen(false), 1000);
+  };
+  return jsxRuntime.jsxs(Popover__namespace.Root, {
+    open: open,
+    children: [jsxRuntime.jsx(Popover__namespace.Trigger, {
+      asChild: true,
+      children: jsxRuntime.jsx("button", Object.assign({
+        type: 'button',
+        className: `${copyBtn({
+          theme
+        })} ${className !== null && className !== void 0 ? className : ''} hover:cursor-pointer`,
+        onClick: handleCopy
+      }, props, {
+        children: jsxRuntime.jsx(index.CopyIcon, {
+          className: 'w-4 h-4 transition',
+          color: theme === 'light' ? '#000000' : '#ffffff'
+        })
+      }))
+    }), jsxRuntime.jsx(Popover__namespace.Portal, {
+      children: jsxRuntime.jsxs(Popover__namespace.Content, {
+        className: 'bg-white text-gray-900 text-sm px-2 py-1 rounded shadow-lg',
+        side: 'top',
+        sideOffset: 5,
+        children: ["Copied", jsxRuntime.jsx(Popover__namespace.Arrow, {
+          className: 'fill-white'
+        })]
+      })
+    })]
+  });
+};
+
+exports.CopyButton = CopyButton;
+exports.default = CopyButton;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/copyButton/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { cva } from 'class-variance-authority'\nimport * as Popover from '@radix-ui/react-popover'\nimport { CopyIcon } from '../icons'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport copyToClipboard, { CopyResult } from '../../utils/copyToClipboard'\n\nconst copyBtn = cva(\n  'p-0 flex-shrink-0 h-[max-content] min-w-0 bg-transparent transition-colors',\n  {\n    variants: {\n      theme: {\n        light: 'hover:text-gray-600 active:text-gray-800',\n        dark: 'hover:text-gray-300 active:text-gray-100'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nexport interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onCopy'> {\n  /** Text to copy into clipboard */\n  text: string\n  /** Optional callback that will be called with the copy result */\n  onCopy?: (result: CopyResult) => void\n}\n\nexport const CopyButton: React.FC<CopyButtonProps> = ({ text, className, onCopy, ...props }) => {\n  const { theme } = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleCopy = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation()\n    e.preventDefault()\n    copyToClipboard(text, onCopy)\n    setOpen(true)\n    setTimeout(() => setOpen(false), 1000)\n  }\n\n  return (\n    <Popover.Root open={open}>\n      <Popover.Trigger asChild>\n        <button\n          type='button'\n          className={`${copyBtn({ theme })} ${className ?? ''} hover:cursor-pointer`}\n          onClick={handleCopy}\n          {...props}\n        >\n          <CopyIcon\n            className='w-4 h-4 transition'\n            color={theme === 'light' ? '#000000' : '#ffffff'}\n          />\n        </button>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          className='bg-white text-gray-900 text-sm px-2 py-1 rounded shadow-lg'\n          side='top'\n          sideOffset={5}\n        >\n          Copied\n          <Popover.Arrow className='fill-white' />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nexport default CopyButton\n"],"names":["copyBtn","cva","variants","theme","light","dark","defaultVariants","CopyButton","_a","text","className","onCopy","props","__rest","useTheme","open","setOpen","useState","handleCopy","e","stopPropagation","preventDefault","copyToClipboard","setTimeout","_jsxs","Popover","Root","children","_jsx","Trigger","asChild","Object","assign","type","onClick","CopyIcon","color","Portal","Content","side","sideOffset","Arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAMA,OAAO,GAAGC,0BAAG,CACjB,4EAA4E,EAC5E;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,0CAA0C;AACjDC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,eAAe,EAAE;AACfH,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CACF;AASYI,MAAAA,UAAU,GAA+BC,EAAqC,IAAI;MAAzC;MAAEC,IAAI;MAAEC,SAAS;AAAEC,MAAAA;UAAkB;AAAPC,IAAAA,KAAK,GAAnCC,YAAA,CAAAL,EAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,QAAA,CAAqC,CAAF;EACvF,MAAM;AAAEL,IAAAA;GAAO,GAAGW,qBAAQ,EAAE;EAC5B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,UAAU,GAAIC,CAAsC,IAAI;IAC5DA,CAAC,CAACC,eAAe,EAAE;IACnBD,CAAC,CAACE,cAAc,EAAE;AAClBC,IAAAA,+BAAe,CAACb,IAAI,EAAEE,MAAM,CAAC;IAC7BK,OAAO,CAAC,IAAI,CAAC;IACbO,UAAU,CAAC,MAAMP,OAAO,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;GACvC;AAED,EAAA,OACEQ,gBAACC,kBAAO,CAACC,IAAI,EAAC;AAAAX,IAAAA,IAAI,EAAEA,IAAI;AACtBY,IAAAA,QAAA,EAAA,CAAAC,cAAA,CAACH,kBAAO,CAACI,OAAO,EAAC;AAAAC,MAAAA,OAAO,EACtB,IAAA;MAAAH,QAAA,EAAAC,cAAA,CAAA,QAAA,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACEC,QAAAA,IAAI,EAAC,QAAQ;QACbvB,SAAS,EAAE,CAAGV,EAAAA,OAAO,CAAC;AAAEG,UAAAA;AAAK,SAAE,CAAC,CAAA,CAAA,EAAIO,SAAS,KAAT,IAAA,IAAAA,SAAS,KAAT,MAAA,GAAAA,SAAS,GAAI,EAAE,CAAuB,qBAAA,CAAA;AAC1EwB,QAAAA,OAAO,EAAEhB;OACL,EAAAN,KAAK;kBAETgB,cAAC,CAAAO,cAAQ,EACP;AAAAzB,UAAAA,SAAS,EAAC,oBAAoB;AAC9B0B,UAAAA,KAAK,EAAEjC,KAAK,KAAK,OAAO,GAAG,SAAS,GAAG;SACvC;AAAA,OAAA,CAAA;AAEY,KAAA,CAAA,EAClByB,cAAC,CAAAH,kBAAO,CAACY,MAAM,EAAA;AAAAV,MAAAA,QAAA,EACbH,eAAC,CAAAC,kBAAO,CAACa,OAAO;AACd5B,QAAAA,SAAS,EAAC,4DAA4D;AACtE6B,QAAAA,IAAI,EAAC,KAAK;AACVC,QAAAA,UAAU,EAAE,CAAC;QAGbb,QAAA,EAAA,CAAA,QAAA,EAAAC,cAAA,CAACH,kBAAO,CAACgB,KAAK,EAAC;AAAA/B,UAAAA,SAAS,EAAC;UAAe;OACxB;AAAA,KAAA,CACH;AACJ,GAAA,CAAA;AAEnB;;;;;"}

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { cva } from 'class-variance-authority';
+import * as Popover from '@radix-ui/react-popover';
+import { CopyIcon } from '../icons/index.esm.js';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { copyToClipboard } from '../../utils/copyToClipboard.esm.js';
+
+const copyBtn = cva('p-0 flex-shrink-0 h-[max-content] min-w-0 bg-transparent transition-colors', {
+  variants: {
+    theme: {
+      light: 'hover:text-gray-600 active:text-gray-800',
+      dark: 'hover:text-gray-300 active:text-gray-100'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const CopyButton = _a => {
+  var {
+      text,
+      className,
+      onCopy
+    } = _a,
+    props = __rest(_a, ["text", "className", "onCopy"]);
+  const {
+    theme
+  } = useTheme();
+  const [open, setOpen] = useState(false);
+  const handleCopy = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyToClipboard(text, onCopy);
+    setOpen(true);
+    setTimeout(() => setOpen(false), 1000);
+  };
+  return jsxs(Popover.Root, {
+    open: open,
+    children: [jsx(Popover.Trigger, {
+      asChild: true,
+      children: jsx("button", Object.assign({
+        type: 'button',
+        className: `${copyBtn({
+          theme
+        })} ${className !== null && className !== void 0 ? className : ''} hover:cursor-pointer`,
+        onClick: handleCopy
+      }, props, {
+        children: jsx(CopyIcon, {
+          className: 'w-4 h-4 transition',
+          color: theme === 'light' ? '#000000' : '#ffffff'
+        })
+      }))
+    }), jsx(Popover.Portal, {
+      children: jsxs(Popover.Content, {
+        className: 'bg-white text-gray-900 text-sm px-2 py-1 rounded shadow-lg',
+        side: 'top',
+        sideOffset: 5,
+        children: ["Copied", jsx(Popover.Arrow, {
+          className: 'fill-white'
+        })]
+      })
+    })]
+  });
+};
+
+export { CopyButton, CopyButton as default };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/copyButton/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { cva } from 'class-variance-authority'\nimport * as Popover from '@radix-ui/react-popover'\nimport { CopyIcon } from '../icons'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport copyToClipboard, { CopyResult } from '../../utils/copyToClipboard'\n\nconst copyBtn = cva(\n  'p-0 flex-shrink-0 h-[max-content] min-w-0 bg-transparent transition-colors',\n  {\n    variants: {\n      theme: {\n        light: 'hover:text-gray-600 active:text-gray-800',\n        dark: 'hover:text-gray-300 active:text-gray-100'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nexport interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onCopy'> {\n  /** Text to copy into clipboard */\n  text: string\n  /** Optional callback that will be called with the copy result */\n  onCopy?: (result: CopyResult) => void\n}\n\nexport const CopyButton: React.FC<CopyButtonProps> = ({ text, className, onCopy, ...props }) => {\n  const { theme } = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleCopy = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation()\n    e.preventDefault()\n    copyToClipboard(text, onCopy)\n    setOpen(true)\n    setTimeout(() => setOpen(false), 1000)\n  }\n\n  return (\n    <Popover.Root open={open}>\n      <Popover.Trigger asChild>\n        <button\n          type='button'\n          className={`${copyBtn({ theme })} ${className ?? ''} hover:cursor-pointer`}\n          onClick={handleCopy}\n          {...props}\n        >\n          <CopyIcon\n            className='w-4 h-4 transition'\n            color={theme === 'light' ? '#000000' : '#ffffff'}\n          />\n        </button>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          className='bg-white text-gray-900 text-sm px-2 py-1 rounded shadow-lg'\n          side='top'\n          sideOffset={5}\n        >\n          Copied\n          <Popover.Arrow className='fill-white' />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nexport default CopyButton\n"],"names":["copyBtn","cva","variants","theme","light","dark","defaultVariants","CopyButton","_a","text","className","onCopy","props","__rest","useTheme","open","setOpen","useState","handleCopy","e","stopPropagation","preventDefault","copyToClipboard","setTimeout","_jsxs","Popover","Root","children","_jsx","Trigger","asChild","Object","assign","type","onClick","CopyIcon","color","Portal","Content","side","sideOffset","Arrow"],"mappings":";;;;;;;;;;;AAOA,MAAMA,OAAO,GAAGC,GAAG,CACjB,4EAA4E,EAC5E;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,0CAA0C;AACjDC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,eAAe,EAAE;AACfH,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CACF;AASYI,MAAAA,UAAU,GAA+BC,EAAqC,IAAI;MAAzC;MAAEC,IAAI;MAAEC,SAAS;AAAEC,MAAAA;UAAkB;AAAPC,IAAAA,KAAK,GAAnCC,MAAA,CAAAL,EAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,QAAA,CAAqC,CAAF;EACvF,MAAM;AAAEL,IAAAA;GAAO,GAAGW,QAAQ,EAAE;EAC5B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,UAAU,GAAIC,CAAsC,IAAI;IAC5DA,CAAC,CAACC,eAAe,EAAE;IACnBD,CAAC,CAACE,cAAc,EAAE;AAClBC,IAAAA,eAAe,CAACb,IAAI,EAAEE,MAAM,CAAC;IAC7BK,OAAO,CAAC,IAAI,CAAC;IACbO,UAAU,CAAC,MAAMP,OAAO,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;GACvC;AAED,EAAA,OACEQ,KAACC,OAAO,CAACC,IAAI,EAAC;AAAAX,IAAAA,IAAI,EAAEA,IAAI;AACtBY,IAAAA,QAAA,EAAA,CAAAC,GAAA,CAACH,OAAO,CAACI,OAAO,EAAC;AAAAC,MAAAA,OAAO,EACtB,IAAA;MAAAH,QAAA,EAAAC,GAAA,CAAA,QAAA,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACEC,QAAAA,IAAI,EAAC,QAAQ;QACbvB,SAAS,EAAE,CAAGV,EAAAA,OAAO,CAAC;AAAEG,UAAAA;AAAK,SAAE,CAAC,CAAA,CAAA,EAAIO,SAAS,KAAT,IAAA,IAAAA,SAAS,KAAT,MAAA,GAAAA,SAAS,GAAI,EAAE,CAAuB,qBAAA,CAAA;AAC1EwB,QAAAA,OAAO,EAAEhB;OACL,EAAAN,KAAK;kBAETgB,GAAC,CAAAO,QAAQ,EACP;AAAAzB,UAAAA,SAAS,EAAC,oBAAoB;AAC9B0B,UAAAA,KAAK,EAAEjC,KAAK,KAAK,OAAO,GAAG,SAAS,GAAG;SACvC;AAAA,OAAA,CAAA;AAEY,KAAA,CAAA,EAClByB,GAAC,CAAAH,OAAO,CAACY,MAAM,EAAA;AAAAV,MAAAA,QAAA,EACbH,IAAC,CAAAC,OAAO,CAACa,OAAO;AACd5B,QAAAA,SAAS,EAAC,4DAA4D;AACtE6B,QAAAA,IAAI,EAAC,KAAK;AACVC,QAAAA,UAAU,EAAE,CAAC;QAGbb,QAAA,EAAA,CAAA,QAAA,EAAAC,GAAA,CAACH,OAAO,CAACgB,KAAK,EAAC;AAAA/B,UAAAA,SAAS,EAAC;UAAe;OACxB;AAAA,KAAA,CACH;AACJ,GAAA,CAAA;AAEnB;;;;"}

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

@@ -0,0 +1,74 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Dash Logo component with customizable size and color
+ * Original aspect ratio: 30:25 (1.2:1)
+ *
+ * Color can be set via:
+ * - color prop (takes precedence)
+ * - CSS class with text color (e.g., "text-dash-primary-dark-blue")
+ *
+ * SVG is wrapped in a container that centers the logo and supports:
+ * - containerPadding: padding around the logo
+ * - containerSize: width/height of the container
+ * - containerClassName: CSS class for the container
+ * - minWidth/minHeight: min-content (adapts to logo size)
+ */
+const DashLogo = ({
+  color,
+  size,
+  width,
+  height,
+  className = '',
+  onClick,
+  containerPadding,
+  containerSize,
+  containerClassName = ''
+}) => {
+  const logoWidth = width || size || 30;
+  const logoHeight = height || (size ? size * 25 / 30 : 25);
+  const containerStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minWidth: 'min-content',
+    minHeight: 'min-content',
+    padding: typeof containerPadding === 'number' ? `${containerPadding}px` : containerPadding,
+    width: typeof containerSize === 'number' ? `${containerSize}px` : containerSize,
+    height: typeof containerSize === 'number' ? `${containerSize}px` : containerSize,
+    cursor: onClick ? 'pointer' : 'default'
+  };
+  return jsxRuntime.jsx("div", {
+    className: containerClassName,
+    style: containerStyle,
+    onClick: onClick,
+    children: jsxRuntime.jsxs("svg", {
+      width: logoWidth,
+      height: logoHeight,
+      viewBox: '0 0 30 25',
+      fill: 'none',
+      xmlns: 'http://www.w3.org/2000/svg',
+      className: `text-dash-brand ${className}`,
+      style: {
+        color: color || 'var(--color-dash-brand, #4C7EFF)'
+      },
+      children: [jsxRuntime.jsx("path", {
+        d: 'M19.6465 0C29.2466 2.13767e-05 30.9542 5.2464 29.585 12.6006C28.6773 17.5547 26.3845 21.3391 22.5537 23.1084C20.8153 23.9084 19.1848 24.3555 15.3389 24.3555H4.44629L5.33887 19.293H14.9229C20.6921 19.3084 22.2159 16.8009 22.9697 14.6162C23.2467 13.8008 23.9084 11.2619 23.9238 9.76953C23.9699 6.84642 22.5383 5.07715 17.6768 5.07715L7.81543 5.06152L8.72363 0H19.6465Z',
+        fill: color || 'currentColor'
+      }), jsxRuntime.jsx("path", {
+        d: 'M15.2002 9.63184C15.2002 9.63184 15.0775 10.232 14.7236 11.709C14.4621 12.8321 14.0462 14.6934 11.1846 14.6934H0C0.00327153 14.6775 0.12745 14.0734 0.476562 12.6162C0.73811 11.493 1.15435 9.63184 4.01562 9.63184H15.2002Z',
+        fill: color || 'currentColor'
+      })]
+    })
+  });
+};
+
+exports.DashLogo = DashLogo;
+exports.default = DashLogo;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/dashLogo/index.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface DashLogoProps {\n  color?: string\n  size?: number\n  width?: number\n  height?: number\n  className?: string\n  onClick?: () => void\n  containerPadding?: string | number\n  containerSize?: string | number\n  containerClassName?: string\n}\n\n/**\n * Dash Logo component with customizable size and color\n * Original aspect ratio: 30:25 (1.2:1)\n * \n * Color can be set via:\n * - color prop (takes precedence)\n * - CSS class with text color (e.g., \"text-dash-primary-dark-blue\")\n * \n * SVG is wrapped in a container that centers the logo and supports:\n * - containerPadding: padding around the logo\n * - containerSize: width/height of the container \n * - containerClassName: CSS class for the container\n * - minWidth/minHeight: min-content (adapts to logo size)\n */\nexport const DashLogo: React.FC<DashLogoProps> = ({\n  color,\n  size,\n  width,\n  height,\n  className = '',\n  onClick,\n  containerPadding,\n  containerSize,\n  containerClassName = ''\n}) => {\n  const logoWidth = width || size || 30\n  const logoHeight = height || (size ? (size * 25) / 30 : 25)\n\n  const containerStyle: React.CSSProperties = {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    minWidth: 'min-content',\n    minHeight: 'min-content',\n    padding: typeof containerPadding === 'number' ? `${containerPadding}px` : containerPadding,\n    width: typeof containerSize === 'number' ? `${containerSize}px` : containerSize,\n    height: typeof containerSize === 'number' ? `${containerSize}px` : containerSize,\n    cursor: onClick ? 'pointer' : 'default'\n  }\n\n  return (\n    <div\n      className={containerClassName}\n      style={containerStyle}\n      onClick={onClick}\n    >\n      <svg\n        width={logoWidth}\n        height={logoHeight}\n        viewBox='0 0 30 25'\n        fill='none'\n        xmlns='http://www.w3.org/2000/svg'\n        className={`text-dash-brand ${className}`}\n        style={{ \n          color: color || 'var(--color-dash-brand, #4C7EFF)'\n        }}\n      >\n        <path\n          d='M19.6465 0C29.2466 2.13767e-05 30.9542 5.2464 29.585 12.6006C28.6773 17.5547 26.3845 21.3391 22.5537 23.1084C20.8153 23.9084 19.1848 24.3555 15.3389 24.3555H4.44629L5.33887 19.293H14.9229C20.6921 19.3084 22.2159 16.8009 22.9697 14.6162C23.2467 13.8008 23.9084 11.2619 23.9238 9.76953C23.9699 6.84642 22.5383 5.07715 17.6768 5.07715L7.81543 5.06152L8.72363 0H19.6465Z'\n          fill={color || 'currentColor'}\n        />\n        <path\n          d='M15.2002 9.63184C15.2002 9.63184 15.0775 10.232 14.7236 11.709C14.4621 12.8321 14.0462 14.6934 11.1846 14.6934H0C0.00327153 14.6775 0.12745 14.0734 0.476562 12.6162C0.73811 11.493 1.15435 9.63184 4.01562 9.63184H15.2002Z'\n          fill={color || 'currentColor'}\n        />\n      </svg>\n    </div>\n  )\n}\n\nexport default DashLogo\n"],"names":["DashLogo","color","size","width","height","className","onClick","containerPadding","containerSize","containerClassName","logoWidth","logoHeight","containerStyle","display","justifyContent","alignItems","minWidth","minHeight","padding","cursor","_jsx","style","children","_jsxs","viewBox","fill","xmlns","d"],"mappings":";;;;;;;;AAcA;;;;;;;;;;;;;AAaG;AACI,MAAMA,QAAQ,GAA4BA,CAAC;EAChDC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,MAAM;AACNC,EAAAA,SAAS,GAAG,EAAE;EACdC,OAAO;EACPC,gBAAgB;EAChBC,aAAa;AACbC,EAAAA,kBAAkB,GAAG;AAAE,CACxB,KAAI;AACH,EAAA,MAAMC,SAAS,GAAGP,KAAK,IAAID,IAAI,IAAI,EAAE;AACrC,EAAA,MAAMS,UAAU,GAAGP,MAAM,KAAKF,IAAI,GAAIA,IAAI,GAAG,EAAE,GAAI,EAAE,GAAG,EAAE,CAAC;AAE3D,EAAA,MAAMU,cAAc,GAAwB;AAC1CC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,cAAc,EAAE,QAAQ;AACxBC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,QAAQ,EAAE,aAAa;AACvBC,IAAAA,SAAS,EAAE,aAAa;IACxBC,OAAO,EAAE,OAAOX,gBAAgB,KAAK,QAAQ,GAAG,CAAGA,EAAAA,gBAAgB,CAAI,EAAA,CAAA,GAAGA,gBAAgB;IAC1FJ,KAAK,EAAE,OAAOK,aAAa,KAAK,QAAQ,GAAG,CAAGA,EAAAA,aAAa,CAAI,EAAA,CAAA,GAAGA,aAAa;IAC/EJ,MAAM,EAAE,OAAOI,aAAa,KAAK,QAAQ,GAAG,CAAGA,EAAAA,aAAa,CAAI,EAAA,CAAA,GAAGA,aAAa;AAChFW,IAAAA,MAAM,EAAEb,OAAO,GAAG,SAAS,GAAG;GAC/B;EAED,OACEc,cACE,CAAA,KAAA,EAAA;AAAAf,IAAAA,SAAS,EAAEI,kBAAkB;AAC7BY,IAAAA,KAAK,EAAET,cAAc;AACrBN,IAAAA,OAAO,EAAEA,OAAO;AAEhBgB,IAAAA,QAAA,EAAAC,eAAA,CAAA,KAAA,EAAA;AACEpB,MAAAA,KAAK,EAAEO,SAAS;AAChBN,MAAAA,MAAM,EAAEO,UAAU;AAClBa,MAAAA,OAAO,EAAC,WAAW;AACnBC,MAAAA,IAAI,EAAC,MAAM;AACXC,MAAAA,KAAK,EAAC,4BAA4B;MAClCrB,SAAS,EAAE,CAAmBA,gBAAAA,EAAAA,SAAS,CAAE,CAAA;AACzCgB,MAAAA,KAAK,EAAE;QACLpB,KAAK,EAAEA,KAAK,IAAI;OACjB;AAEDqB,MAAAA,QAAA,EAAA,CAAAF,cAAA,CAAA,MAAA,EAAA;AACEO,QAAAA,CAAC,EAAC,gXAAgX;QAClXF,IAAI,EAAExB,KAAK,IAAI;AAAc,OAAA,CAC7B,EACFmB,cAAA,CAAA,MAAA,EAAA;AACEO,QAAAA,CAAC,EAAC,8NAA8N;QAChOF,IAAI,EAAExB,KAAK,IAAI;AACf,OAAA,CAAA;KAAA;AAEA,GAAA,CAAA;AAEV;;;;;"}

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

@@ -0,0 +1,69 @@
+"use client";
+
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+/**
+ * Dash Logo component with customizable size and color
+ * Original aspect ratio: 30:25 (1.2:1)
+ *
+ * Color can be set via:
+ * - color prop (takes precedence)
+ * - CSS class with text color (e.g., "text-dash-primary-dark-blue")
+ *
+ * SVG is wrapped in a container that centers the logo and supports:
+ * - containerPadding: padding around the logo
+ * - containerSize: width/height of the container
+ * - containerClassName: CSS class for the container
+ * - minWidth/minHeight: min-content (adapts to logo size)
+ */
+const DashLogo = ({
+  color,
+  size,
+  width,
+  height,
+  className = '',
+  onClick,
+  containerPadding,
+  containerSize,
+  containerClassName = ''
+}) => {
+  const logoWidth = width || size || 30;
+  const logoHeight = height || (size ? size * 25 / 30 : 25);
+  const containerStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minWidth: 'min-content',
+    minHeight: 'min-content',
+    padding: typeof containerPadding === 'number' ? `${containerPadding}px` : containerPadding,
+    width: typeof containerSize === 'number' ? `${containerSize}px` : containerSize,
+    height: typeof containerSize === 'number' ? `${containerSize}px` : containerSize,
+    cursor: onClick ? 'pointer' : 'default'
+  };
+  return jsx("div", {
+    className: containerClassName,
+    style: containerStyle,
+    onClick: onClick,
+    children: jsxs("svg", {
+      width: logoWidth,
+      height: logoHeight,
+      viewBox: '0 0 30 25',
+      fill: 'none',
+      xmlns: 'http://www.w3.org/2000/svg',
+      className: `text-dash-brand ${className}`,
+      style: {
+        color: color || 'var(--color-dash-brand, #4C7EFF)'
+      },
+      children: [jsx("path", {
+        d: 'M19.6465 0C29.2466 2.13767e-05 30.9542 5.2464 29.585 12.6006C28.6773 17.5547 26.3845 21.3391 22.5537 23.1084C20.8153 23.9084 19.1848 24.3555 15.3389 24.3555H4.44629L5.33887 19.293H14.9229C20.6921 19.3084 22.2159 16.8009 22.9697 14.6162C23.2467 13.8008 23.9084 11.2619 23.9238 9.76953C23.9699 6.84642 22.5383 5.07715 17.6768 5.07715L7.81543 5.06152L8.72363 0H19.6465Z',
+        fill: color || 'currentColor'
+      }), jsx("path", {
+        d: 'M15.2002 9.63184C15.2002 9.63184 15.0775 10.232 14.7236 11.709C14.4621 12.8321 14.0462 14.6934 11.1846 14.6934H0C0.00327153 14.6775 0.12745 14.0734 0.476562 12.6162C0.73811 11.493 1.15435 9.63184 4.01562 9.63184H15.2002Z',
+        fill: color || 'currentColor'
+      })]
+    })
+  });
+};
+
+export { DashLogo, DashLogo as default };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/dashLogo/index.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface DashLogoProps {\n  color?: string\n  size?: number\n  width?: number\n  height?: number\n  className?: string\n  onClick?: () => void\n  containerPadding?: string | number\n  containerSize?: string | number\n  containerClassName?: string\n}\n\n/**\n * Dash Logo component with customizable size and color\n * Original aspect ratio: 30:25 (1.2:1)\n * \n * Color can be set via:\n * - color prop (takes precedence)\n * - CSS class with text color (e.g., \"text-dash-primary-dark-blue\")\n * \n * SVG is wrapped in a container that centers the logo and supports:\n * - containerPadding: padding around the logo\n * - containerSize: width/height of the container \n * - containerClassName: CSS class for the container\n * - minWidth/minHeight: min-content (adapts to logo size)\n */\nexport const DashLogo: React.FC<DashLogoProps> = ({\n  color,\n  size,\n  width,\n  height,\n  className = '',\n  onClick,\n  containerPadding,\n  containerSize,\n  containerClassName = ''\n}) => {\n  const logoWidth = width || size || 30\n  const logoHeight = height || (size ? (size * 25) / 30 : 25)\n\n  const containerStyle: React.CSSProperties = {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    minWidth: 'min-content',\n    minHeight: 'min-content',\n    padding: typeof containerPadding === 'number' ? `${containerPadding}px` : containerPadding,\n    width: typeof containerSize === 'number' ? `${containerSize}px` : containerSize,\n    height: typeof containerSize === 'number' ? `${containerSize}px` : containerSize,\n    cursor: onClick ? 'pointer' : 'default'\n  }\n\n  return (\n    <div\n      className={containerClassName}\n      style={containerStyle}\n      onClick={onClick}\n    >\n      <svg\n        width={logoWidth}\n        height={logoHeight}\n        viewBox='0 0 30 25'\n        fill='none'\n        xmlns='http://www.w3.org/2000/svg'\n        className={`text-dash-brand ${className}`}\n        style={{ \n          color: color || 'var(--color-dash-brand, #4C7EFF)'\n        }}\n      >\n        <path\n          d='M19.6465 0C29.2466 2.13767e-05 30.9542 5.2464 29.585 12.6006C28.6773 17.5547 26.3845 21.3391 22.5537 23.1084C20.8153 23.9084 19.1848 24.3555 15.3389 24.3555H4.44629L5.33887 19.293H14.9229C20.6921 19.3084 22.2159 16.8009 22.9697 14.6162C23.2467 13.8008 23.9084 11.2619 23.9238 9.76953C23.9699 6.84642 22.5383 5.07715 17.6768 5.07715L7.81543 5.06152L8.72363 0H19.6465Z'\n          fill={color || 'currentColor'}\n        />\n        <path\n          d='M15.2002 9.63184C15.2002 9.63184 15.0775 10.232 14.7236 11.709C14.4621 12.8321 14.0462 14.6934 11.1846 14.6934H0C0.00327153 14.6775 0.12745 14.0734 0.476562 12.6162C0.73811 11.493 1.15435 9.63184 4.01562 9.63184H15.2002Z'\n          fill={color || 'currentColor'}\n        />\n      </svg>\n    </div>\n  )\n}\n\nexport default DashLogo\n"],"names":["DashLogo","color","size","width","height","className","onClick","containerPadding","containerSize","containerClassName","logoWidth","logoHeight","containerStyle","display","justifyContent","alignItems","minWidth","minHeight","padding","cursor","_jsx","style","children","_jsxs","viewBox","fill","xmlns","d"],"mappings":";;;;AAcA;;;;;;;;;;;;;AAaG;AACI,MAAMA,QAAQ,GAA4BA,CAAC;EAChDC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,MAAM;AACNC,EAAAA,SAAS,GAAG,EAAE;EACdC,OAAO;EACPC,gBAAgB;EAChBC,aAAa;AACbC,EAAAA,kBAAkB,GAAG;AAAE,CACxB,KAAI;AACH,EAAA,MAAMC,SAAS,GAAGP,KAAK,IAAID,IAAI,IAAI,EAAE;AACrC,EAAA,MAAMS,UAAU,GAAGP,MAAM,KAAKF,IAAI,GAAIA,IAAI,GAAG,EAAE,GAAI,EAAE,GAAG,EAAE,CAAC;AAE3D,EAAA,MAAMU,cAAc,GAAwB;AAC1CC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,cAAc,EAAE,QAAQ;AACxBC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,QAAQ,EAAE,aAAa;AACvBC,IAAAA,SAAS,EAAE,aAAa;IACxBC,OAAO,EAAE,OAAOX,gBAAgB,KAAK,QAAQ,GAAG,CAAGA,EAAAA,gBAAgB,CAAI,EAAA,CAAA,GAAGA,gBAAgB;IAC1FJ,KAAK,EAAE,OAAOK,aAAa,KAAK,QAAQ,GAAG,CAAGA,EAAAA,aAAa,CAAI,EAAA,CAAA,GAAGA,aAAa;IAC/EJ,MAAM,EAAE,OAAOI,aAAa,KAAK,QAAQ,GAAG,CAAGA,EAAAA,aAAa,CAAI,EAAA,CAAA,GAAGA,aAAa;AAChFW,IAAAA,MAAM,EAAEb,OAAO,GAAG,SAAS,GAAG;GAC/B;EAED,OACEc,GACE,CAAA,KAAA,EAAA;AAAAf,IAAAA,SAAS,EAAEI,kBAAkB;AAC7BY,IAAAA,KAAK,EAAET,cAAc;AACrBN,IAAAA,OAAO,EAAEA,OAAO;AAEhBgB,IAAAA,QAAA,EAAAC,IAAA,CAAA,KAAA,EAAA;AACEpB,MAAAA,KAAK,EAAEO,SAAS;AAChBN,MAAAA,MAAM,EAAEO,UAAU;AAClBa,MAAAA,OAAO,EAAC,WAAW;AACnBC,MAAAA,IAAI,EAAC,MAAM;AACXC,MAAAA,KAAK,EAAC,4BAA4B;MAClCrB,SAAS,EAAE,CAAmBA,gBAAAA,EAAAA,SAAS,CAAE,CAAA;AACzCgB,MAAAA,KAAK,EAAE;QACLpB,KAAK,EAAEA,KAAK,IAAI;OACjB;AAEDqB,MAAAA,QAAA,EAAA,CAAAF,GAAA,CAAA,MAAA,EAAA;AACEO,QAAAA,CAAC,EAAC,gXAAgX;QAClXF,IAAI,EAAExB,KAAK,IAAI;AAAc,OAAA,CAC7B,EACFmB,GAAA,CAAA,MAAA,EAAA;AACEO,QAAAA,CAAC,EAAC,8NAA8N;QAChOF,IAAI,EAAExB,KAAK,IAAI;AACf,OAAA,CAAA;KAAA;AAEA,GAAA,CAAA;AAEV;;;;"}

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

@@ -0,0 +1,120 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var index = require('../icons/index.cjs.js');
+var index$1 = require('../timeDelta/index.cjs.js');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+
+const wrapperStyles = classVarianceAuthority.cva('');
+const infoContainer = classVarianceAuthority.cva('flex flex-wrap items-center whitespace-nowrap -mt-1 -mb-1');
+const itemStyles = classVarianceAuthority.cva('mt-1 mb-1 mr-2 last:mr-0');
+const dateTextStyles = classVarianceAuthority.cva('text-[0.813rem]', {
+  variants: {
+    theme: {
+      light: 'text-gray-900',
+      dark: 'text-gray-100'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const deltaContainerStyles = classVarianceAuthority.cva('inline-block px-[10px] py-[3px] border rounded-[4px] text-[0.688rem]', {
+  variants: {
+    theme: {
+      light: 'border-[rgba(147,170,178,0.4)] text-[var(--chakra-colors-gray-250)]',
+      dark: 'border-gray-600 text-gray-400'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+/**
+ * DateBlock component displays a date, optional calendar icon,
+ * and relative time via TimeDelta. It can also show an optional
+ * tooltip with the relative time when hovered. Supports light/dark theme.
+ */
+const DateBlock = ({
+  timestamp,
+  format = 'all',
+  showTime = false,
+  // showRelativeTooltip = false,
+  className = ''
+}) => {
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const date = new Date(timestamp);
+  if (isNaN(date.getTime())) return null;
+  const modes = {
+    all: {
+      calendarIcon: true,
+      date: true,
+      delta: true
+    },
+    deltaOnly: {
+      calendarIcon: false,
+      date: false,
+      delta: true
+    },
+    dateOnly: {
+      calendarIcon: false,
+      date: true,
+      delta: false
+    }
+  };
+  const options = Object.assign({
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric'
+  }, showTime ? {
+    hour: '2-digit',
+    minute: '2-digit'
+  } : {});
+  const formattedDate = date.toLocaleDateString('en-GB', options);
+  // const tooltipContent = showRelativeTooltip
+  //   ? <TimeDelta endDate={timestamp} showTimestampTooltip={false} />
+  //   : null
+  const content = jsxRuntime.jsxs("div", {
+    className: infoContainer(),
+    children: [modes[format].calendarIcon && jsxRuntime.jsx(index.CalendarIcon, {
+      className: `${itemStyles()} w-[12px] h-[14px]`,
+      color: theme === 'dark' ? '#9CA3AF' : '#93AAB2'
+    }), modes[format].date && jsxRuntime.jsx("div", {
+      className: `${itemStyles()} ${dateTextStyles({
+        theme
+      })}`,
+      children: formattedDate
+    }), modes[format].delta && jsxRuntime.jsx("div", {
+      className: `${itemStyles()} ${deltaContainerStyles({
+        theme
+      })}`,
+      children: jsxRuntime.jsx(index$1.TimeDelta, {
+        endDate: date,
+        showTimestampTooltip: format !== 'all'
+      })
+    })]
+  });
+  const wrapperClass = `${wrapperStyles()} ${className !== '' ? ` ${className}` : ''}`;
+  return jsxRuntime.jsx("div", {
+    className: wrapperClass,
+    children: content
+  });
+  // return tooltipContent ? (
+  //   <Tooltip placement="top" content={tooltipContent}>
+  //     <div className={wrapperClass}>{content}</div>
+  //   </Tooltip>
+  // ) : (
+  //   <div className={wrapperClass}>{content}</div>
+  // )
+};
+
+exports.DateBlock = DateBlock;
+exports.default = DateBlock;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/dateBlock/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { CalendarIcon } from '../icons'\nimport { TimeDelta } from '../timeDelta'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst wrapperStyles = cva('')\n\nconst infoContainer = cva(\n  'flex flex-wrap items-center whitespace-nowrap -mt-1 -mb-1'\n)\n\nconst itemStyles = cva(\n  'mt-1 mb-1 mr-2 last:mr-0'\n)\n\nconst dateTextStyles = cva(\n  'text-[0.813rem]',\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\nconst deltaContainerStyles = cva(\n  'inline-block px-[10px] py-[3px] border rounded-[4px] text-[0.688rem]',\n  {\n    variants: {\n      theme: {\n        light: 'border-[rgba(147,170,178,0.4)] text-[var(--chakra-colors-gray-250)]',\n        dark: 'border-gray-600 text-gray-400'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nexport type DateBlockFormat = 'all' | 'deltaOnly' | 'dateOnly'\n\nexport interface DateBlockProps {\n  /** Unix timestamp (ms), Date object, or parsable date string */\n  timestamp: number | Date | string\n  /** Display format: full date+delta, delta only, or date only */\n  format?: DateBlockFormat\n  /** Include hours and minutes in formatted date */\n  showTime?: boolean\n  /** Show a tooltip with relative time */\n  showRelativeTooltip?: boolean\n  /** Additional CSS classes for wrapper div */\n  className?: string\n}\n\n/**\n * DateBlock component displays a date, optional calendar icon,\n * and relative time via TimeDelta. It can also show an optional\n * tooltip with the relative time when hovered. Supports light/dark theme.\n */\nexport const DateBlock: React.FC<DateBlockProps> = ({\n  timestamp,\n  format = 'all',\n  showTime = false,\n  // showRelativeTooltip = false,\n  className = ''\n}) => {\n  const { theme } = useTheme()\n  const date = new Date(timestamp)\n  if (isNaN(date.getTime())) return null\n\n  const modes = {\n    all: { calendarIcon: true, date: true, delta: true },\n    deltaOnly: { calendarIcon: false, date: false, delta: true },\n    dateOnly: { calendarIcon: false, date: true, delta: false }\n  } as const\n\n  const options: Intl.DateTimeFormatOptions = {\n    day: 'numeric',\n    month: 'short',\n    year: 'numeric',\n    ...(showTime ? { hour: '2-digit', minute: '2-digit' } : {})\n  }\n\n  const formattedDate = date.toLocaleDateString('en-GB', options)\n\n  // const tooltipContent = showRelativeTooltip\n  //   ? <TimeDelta endDate={timestamp} showTimestampTooltip={false} />\n  //   : null\n\n  const content = (\n    <div className={infoContainer()}>\n      {modes[format].calendarIcon && (\n        <CalendarIcon\n          className={`${itemStyles()} w-[12px] h-[14px]`}\n          color={theme === 'dark' ? '#9CA3AF' : '#93AAB2'}\n        />\n      )}\n      {modes[format].date && (\n        <div className={`${itemStyles()} ${dateTextStyles({ theme })}`}>{formattedDate}</div>\n      )}\n      {modes[format].delta && (\n        <div className={`${itemStyles()} ${deltaContainerStyles({ theme })}`}>\n          <TimeDelta\n            endDate={date}\n            showTimestampTooltip={format !== 'all'}\n          />\n        </div>\n      )}\n    </div>\n  )\n\n  const wrapperClass = `${wrapperStyles()} ${className !== '' ? ` ${className}` : ''}`\n\n  return <div className={wrapperClass}>{content}</div>\n\n  // return tooltipContent ? (\n  //   <Tooltip placement=\"top\" content={tooltipContent}>\n  //     <div className={wrapperClass}>{content}</div>\n  //   </Tooltip>\n  // ) : (\n  //   <div className={wrapperClass}>{content}</div>\n  // )\n}\n\nexport default DateBlock "],"names":["wrapperStyles","cva","infoContainer","itemStyles","dateTextStyles","variants","theme","light","dark","defaultVariants","deltaContainerStyles","DateBlock","timestamp","format","showTime","className","useTheme","date","Date","isNaN","getTime","modes","all","calendarIcon","delta","deltaOnly","dateOnly","options","Object","assign","day","month","year","hour","minute","formattedDate","toLocaleDateString","content","_jsxs","children","_jsx","CalendarIcon","color","TimeDelta","endDate","showTimestampTooltip","wrapperClass"],"mappings":"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"}

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

@@ -0,0 +1,115 @@
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { CalendarIcon } from '../icons/index.esm.js';
+import { TimeDelta } from '../timeDelta/index.esm.js';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+
+const wrapperStyles = cva('');
+const infoContainer = cva('flex flex-wrap items-center whitespace-nowrap -mt-1 -mb-1');
+const itemStyles = cva('mt-1 mb-1 mr-2 last:mr-0');
+const dateTextStyles = cva('text-[0.813rem]', {
+  variants: {
+    theme: {
+      light: 'text-gray-900',
+      dark: 'text-gray-100'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const deltaContainerStyles = cva('inline-block px-[10px] py-[3px] border rounded-[4px] text-[0.688rem]', {
+  variants: {
+    theme: {
+      light: 'border-[rgba(147,170,178,0.4)] text-[var(--chakra-colors-gray-250)]',
+      dark: 'border-gray-600 text-gray-400'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+/**
+ * DateBlock component displays a date, optional calendar icon,
+ * and relative time via TimeDelta. It can also show an optional
+ * tooltip with the relative time when hovered. Supports light/dark theme.
+ */
+const DateBlock = ({
+  timestamp,
+  format = 'all',
+  showTime = false,
+  // showRelativeTooltip = false,
+  className = ''
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const date = new Date(timestamp);
+  if (isNaN(date.getTime())) return null;
+  const modes = {
+    all: {
+      calendarIcon: true,
+      date: true,
+      delta: true
+    },
+    deltaOnly: {
+      calendarIcon: false,
+      date: false,
+      delta: true
+    },
+    dateOnly: {
+      calendarIcon: false,
+      date: true,
+      delta: false
+    }
+  };
+  const options = Object.assign({
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric'
+  }, showTime ? {
+    hour: '2-digit',
+    minute: '2-digit'
+  } : {});
+  const formattedDate = date.toLocaleDateString('en-GB', options);
+  // const tooltipContent = showRelativeTooltip
+  //   ? <TimeDelta endDate={timestamp} showTimestampTooltip={false} />
+  //   : null
+  const content = jsxs("div", {
+    className: infoContainer(),
+    children: [modes[format].calendarIcon && jsx(CalendarIcon, {
+      className: `${itemStyles()} w-[12px] h-[14px]`,
+      color: theme === 'dark' ? '#9CA3AF' : '#93AAB2'
+    }), modes[format].date && jsx("div", {
+      className: `${itemStyles()} ${dateTextStyles({
+        theme
+      })}`,
+      children: formattedDate
+    }), modes[format].delta && jsx("div", {
+      className: `${itemStyles()} ${deltaContainerStyles({
+        theme
+      })}`,
+      children: jsx(TimeDelta, {
+        endDate: date,
+        showTimestampTooltip: format !== 'all'
+      })
+    })]
+  });
+  const wrapperClass = `${wrapperStyles()} ${className !== '' ? ` ${className}` : ''}`;
+  return jsx("div", {
+    className: wrapperClass,
+    children: content
+  });
+  // return tooltipContent ? (
+  //   <Tooltip placement="top" content={tooltipContent}>
+  //     <div className={wrapperClass}>{content}</div>
+  //   </Tooltip>
+  // ) : (
+  //   <div className={wrapperClass}>{content}</div>
+  // )
+};
+
+export { DateBlock, DateBlock as default };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/dateBlock/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { CalendarIcon } from '../icons'\nimport { TimeDelta } from '../timeDelta'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst wrapperStyles = cva('')\n\nconst infoContainer = cva(\n  'flex flex-wrap items-center whitespace-nowrap -mt-1 -mb-1'\n)\n\nconst itemStyles = cva(\n  'mt-1 mb-1 mr-2 last:mr-0'\n)\n\nconst dateTextStyles = cva(\n  'text-[0.813rem]',\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\nconst deltaContainerStyles = cva(\n  'inline-block px-[10px] py-[3px] border rounded-[4px] text-[0.688rem]',\n  {\n    variants: {\n      theme: {\n        light: 'border-[rgba(147,170,178,0.4)] text-[var(--chakra-colors-gray-250)]',\n        dark: 'border-gray-600 text-gray-400'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nexport type DateBlockFormat = 'all' | 'deltaOnly' | 'dateOnly'\n\nexport interface DateBlockProps {\n  /** Unix timestamp (ms), Date object, or parsable date string */\n  timestamp: number | Date | string\n  /** Display format: full date+delta, delta only, or date only */\n  format?: DateBlockFormat\n  /** Include hours and minutes in formatted date */\n  showTime?: boolean\n  /** Show a tooltip with relative time */\n  showRelativeTooltip?: boolean\n  /** Additional CSS classes for wrapper div */\n  className?: string\n}\n\n/**\n * DateBlock component displays a date, optional calendar icon,\n * and relative time via TimeDelta. It can also show an optional\n * tooltip with the relative time when hovered. Supports light/dark theme.\n */\nexport const DateBlock: React.FC<DateBlockProps> = ({\n  timestamp,\n  format = 'all',\n  showTime = false,\n  // showRelativeTooltip = false,\n  className = ''\n}) => {\n  const { theme } = useTheme()\n  const date = new Date(timestamp)\n  if (isNaN(date.getTime())) return null\n\n  const modes = {\n    all: { calendarIcon: true, date: true, delta: true },\n    deltaOnly: { calendarIcon: false, date: false, delta: true },\n    dateOnly: { calendarIcon: false, date: true, delta: false }\n  } as const\n\n  const options: Intl.DateTimeFormatOptions = {\n    day: 'numeric',\n    month: 'short',\n    year: 'numeric',\n    ...(showTime ? { hour: '2-digit', minute: '2-digit' } : {})\n  }\n\n  const formattedDate = date.toLocaleDateString('en-GB', options)\n\n  // const tooltipContent = showRelativeTooltip\n  //   ? <TimeDelta endDate={timestamp} showTimestampTooltip={false} />\n  //   : null\n\n  const content = (\n    <div className={infoContainer()}>\n      {modes[format].calendarIcon && (\n        <CalendarIcon\n          className={`${itemStyles()} w-[12px] h-[14px]`}\n          color={theme === 'dark' ? '#9CA3AF' : '#93AAB2'}\n        />\n      )}\n      {modes[format].date && (\n        <div className={`${itemStyles()} ${dateTextStyles({ theme })}`}>{formattedDate}</div>\n      )}\n      {modes[format].delta && (\n        <div className={`${itemStyles()} ${deltaContainerStyles({ theme })}`}>\n          <TimeDelta\n            endDate={date}\n            showTimestampTooltip={format !== 'all'}\n          />\n        </div>\n      )}\n    </div>\n  )\n\n  const wrapperClass = `${wrapperStyles()} ${className !== '' ? ` ${className}` : ''}`\n\n  return <div className={wrapperClass}>{content}</div>\n\n  // return tooltipContent ? (\n  //   <Tooltip placement=\"top\" content={tooltipContent}>\n  //     <div className={wrapperClass}>{content}</div>\n  //   </Tooltip>\n  // ) : (\n  //   <div className={wrapperClass}>{content}</div>\n  // )\n}\n\nexport default DateBlock "],"names":["wrapperStyles","cva","infoContainer","itemStyles","dateTextStyles","variants","theme","light","dark","defaultVariants","deltaContainerStyles","DateBlock","timestamp","format","showTime","className","useTheme","date","Date","isNaN","getTime","modes","all","calendarIcon","delta","deltaOnly","dateOnly","options","Object","assign","day","month","year","hour","minute","formattedDate","toLocaleDateString","content","_jsxs","children","_jsx","CalendarIcon","color","TimeDelta","endDate","showTimestampTooltip","wrapperClass"],"mappings":"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"}