dash-ui-kit 1.0.93 → 2.0.0-dev

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

@@ -0,0 +1,256 @@
+"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 index = require('../button/index.cjs.js');
+var classVarianceAuthority = require('class-variance-authority');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+
+const textareaContainer = classVarianceAuthority.cva('relative flex items-baseline transition-all w-full', {
+  variants: {
+    theme: {
+      light: 'bg-white',
+      dark: 'bg-gray-800'
+    },
+    hasValue: {
+      true: '',
+      false: ''
+    },
+    colorScheme: {
+      default: 'focus-within:ring-blue-500/20',
+      brand: 'focus-within:ring-dash-brand/20',
+      error: 'focus-within:ring-red-500/20',
+      success: 'focus-within:ring-green-500/20'
+    },
+    size: {
+      sm: 'dash-block-sm',
+      md: 'dash-block-md',
+      xl: 'dash-block-xl'
+    },
+    variant: {
+      outlined: 'outline outline-1 outline-offset-[-1px]'
+    },
+    isValid: {
+      true: '',
+      false: '',
+      null: ''
+    },
+    disabled: {
+      false: '',
+      true: 'opacity-60 cursor-not-allowed'
+    }
+  },
+  compoundVariants: [
+  // Outlined variant colors
+  {
+    variant: 'outlined',
+    colorScheme: 'default',
+    class: 'outline-[rgba(17,17,17,0.32)] focus-within:outline-[rgba(17,17,17,0.6)]'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'brand',
+    class: 'outline-dash-brand/30 focus-within:outline-dash-brand'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'error',
+    isValid: false,
+    class: 'outline-red-500 focus-within:outline-red-500'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'success',
+    isValid: true,
+    class: 'outline-green-500 focus-within:outline-green-500'
+  },
+  // Outlined variant with focus ring
+  {
+    variant: 'outlined',
+    class: 'focus-within:ring-2'
+  },
+  // Add extra padding for PASTE button when no value
+  {
+    hasValue: false,
+    size: 'sm',
+    class: 'pr-[70px]'
+  }, {
+    hasValue: false,
+    size: 'md',
+    class: 'pr-[70px]'
+  }, {
+    hasValue: false,
+    size: 'xl',
+    class: 'pr-[70px]'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    hasValue: false,
+    colorScheme: 'default',
+    size: 'xl',
+    variant: 'outlined',
+    isValid: null,
+    disabled: false
+  }
+});
+const textarea = classVarianceAuthority.cva('w-full bg-transparent outline-none resize-none transition-all text-[0.875rem] leading-[1.0625rem] placeholder:text-opacity-60', {
+  variants: {
+    theme: {
+      light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',
+      dark: 'text-white placeholder:text-gray-400'
+    },
+    font: {
+      main: 'font-dash-main',
+      grotesque: 'font-dash-grotesque'
+    },
+    weight: {
+      light: 'font-light',
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold'
+    },
+    size: {
+      sm: '',
+      md: '',
+      xl: ''
+    },
+    disabled: {
+      false: '',
+      true: 'cursor-not-allowed'
+    }
+  },
+  defaultVariants: {
+    theme: 'light',
+    font: 'main',
+    weight: 'light',
+    size: 'xl',
+    disabled: false
+  }
+});
+/**
+ * A versatile textarea component that adapts to light/dark theme,
+ * supports various color schemes, sizes, variants, and states.
+ * Includes optional paste functionality and validation.
+ *
+ * @example
+ * <Textarea
+ *   placeholder='Enter your message'
+ *   colorScheme='brand'
+ *   size='xl'
+ *   font='grotesque'
+ *   weight='medium'
+ *   rows={4}
+ *   showPasteButton={true}
+ * />
+ */
+const Textarea = _a => {
+  var _b, _c;
+  var {
+      className = '',
+      onChange,
+      showPasteButton = true,
+      validator = null,
+      rows = 3,
+      size = 'xl',
+      variant = 'outlined',
+      colorScheme = 'default',
+      font = 'main',
+      weight = 'light',
+      error = false,
+      success = false,
+      disabled = false
+    } = _a,
+    props = tslib.__rest(_a, ["className", "onChange", "showPasteButton", "validator", "rows", "size", "variant", "colorScheme", "font", "weight", "error", "success", "disabled"]);
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const [value, setValue] = React.useState((_c = (_b = props.value) !== null && _b !== void 0 ? _b : props.defaultValue) !== null && _c !== void 0 ? _c : '');
+  const [isValid, setIsValid] = React.useState(null);
+  const textareaRef = React.useRef(null);
+  const handleChange = e => {
+    const newValue = e.target.value;
+    setValue(newValue);
+    if (typeof onChange === 'function') {
+      onChange(newValue);
+    }
+    validateInput(newValue);
+  };
+  const validateInput = input => {
+    if (validator === null) {
+      setIsValid(null);
+      return;
+    }
+    if (typeof validator === 'function') {
+      setIsValid(validator(input));
+    } else {
+      setIsValid(Boolean(validator));
+    }
+  };
+  const handlePaste = () => {
+    navigator.clipboard.readText().then(text => {
+      if (text !== '') {
+        setValue(text);
+        if (textareaRef.current != null) {
+          textareaRef.current.value = text;
+        }
+        if (onChange != null) {
+          onChange(text);
+        }
+        validateInput(text);
+      }
+    }).catch(err => {
+      console.error('Failed to read clipboard contents: ', err);
+    });
+  };
+  const hasValue = value !== '';
+  // Determine color scheme based on state
+  let finalColorScheme = colorScheme;
+  let finalIsValid = isValid;
+  if (error) {
+    finalColorScheme = 'error';
+    finalIsValid = false;
+  } else if (success) {
+    finalColorScheme = 'success';
+    finalIsValid = true;
+  }
+  const containerClasses = textareaContainer({
+    theme,
+    hasValue,
+    colorScheme: finalColorScheme,
+    size,
+    variant,
+    isValid: finalIsValid,
+    disabled
+  });
+  const textareaClasses = textarea({
+    theme,
+    font,
+    weight,
+    size,
+    disabled
+  }) + ' ' + className;
+  return jsxRuntime.jsxs("div", {
+    className: containerClasses,
+    children: [jsxRuntime.jsx("textarea", Object.assign({
+      ref: textareaRef,
+      value: value,
+      onChange: handleChange,
+      rows: rows,
+      className: textareaClasses,
+      disabled: disabled
+    }, props)), showPasteButton && !hasValue && !disabled && jsxRuntime.jsx(index.Button, {
+      colorScheme: 'brand',
+      size: 'sm',
+      onClick: handlePaste,
+      className: `absolute top-1/2 !-translate-y-1/2 ${size === 'sm' ? 'right-3' : size === 'md' ? 'right-[1.125rem]' : 'right-[1.5625rem]'}`,
+      children: "PASTE"
+    })]
+  });
+};
+
+exports.Textarea = Textarea;
+exports.default = Textarea;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/textarea/index.tsx"],"sourcesContent":["import React, { useState, useRef, TextareaHTMLAttributes } from 'react'\nimport { Button } from '../button'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst textareaContainer = cva(\n  'relative flex items-baseline transition-all w-full',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white',\n        dark: 'bg-gray-800'\n      },\n      hasValue: {\n        true: '',\n        false: ''\n      },\n      colorScheme: {\n        default: 'focus-within:ring-blue-500/20',\n        brand: 'focus-within:ring-dash-brand/20',\n        error: 'focus-within:ring-red-500/20',\n        success: 'focus-within:ring-green-500/20'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      variant: {\n        outlined: 'outline outline-1 outline-offset-[-1px]'\n      },\n      isValid: {\n        true: '',\n        false: '',\n        null: ''\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outlined variant colors\n      {\n        variant: 'outlined',\n        colorScheme: 'default',\n        class: 'outline-[rgba(17,17,17,0.32)] focus-within:outline-[rgba(17,17,17,0.6)]'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'brand',\n        class: 'outline-dash-brand/30 focus-within:outline-dash-brand'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'error',\n        isValid: false,\n        class: 'outline-red-500 focus-within:outline-red-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'success',\n        isValid: true,\n        class: 'outline-green-500 focus-within:outline-green-500'\n      },\n      // Outlined variant with focus ring\n      {\n        variant: 'outlined',\n        class: 'focus-within:ring-2'\n      },\n      // Add extra padding for PASTE button when no value\n      { hasValue: false, size: 'sm', class: 'pr-[70px]' },\n      { hasValue: false, size: 'md', class: 'pr-[70px]' },\n      { hasValue: false, size: 'xl', class: 'pr-[70px]' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      hasValue: false,\n      colorScheme: 'default',\n      size: 'xl',\n      variant: 'outlined',\n      isValid: null,\n      disabled: false\n    }\n  }\n)\n\nconst textarea = cva(\n  'w-full bg-transparent outline-none resize-none transition-all text-[0.875rem] leading-[1.0625rem] placeholder:text-opacity-60',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n        dark: 'text-white placeholder:text-gray-400'\n      },\n      font: {\n        main: 'font-dash-main',\n        grotesque: 'font-dash-grotesque'\n      },\n      weight: {\n        light: 'font-light',\n        normal: 'font-normal',\n        medium: 'font-medium',\n        semibold: 'font-semibold',\n        bold: 'font-bold'\n      },\n      size: {\n        sm: '',\n        md: '',\n        xl: ''\n      },\n      disabled: {\n        false: '',\n        true: 'cursor-not-allowed'\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      font: 'main',\n      weight: 'light',\n      size: 'xl',\n      disabled: false\n    }\n  }\n)\n\ntype TextareaVariants = VariantProps<typeof textareaContainer>\n\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'size'>, Omit<TextareaVariants, 'theme' | 'hasValue' | 'isValid' | 'disabled'> {\n  className?: string\n  onChange?: (value: string) => void\n  showPasteButton?: boolean\n  validator?: ((value: string) => boolean) | boolean\n  rows?: number\n  font?: 'main' | 'grotesque'\n  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'\n  error?: boolean\n  success?: boolean\n}\n\n/**\n * A versatile textarea component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * Includes optional paste functionality and validation.\n *\n * @example\n * <Textarea\n *   placeholder='Enter your message'\n *   colorScheme='brand'\n *   size='xl'\n *   font='grotesque'\n *   weight='medium'\n *   rows={4}\n *   showPasteButton={true}\n * />\n */\nexport const Textarea: React.FC<TextareaProps> = ({\n  className = '',\n  onChange,\n  showPasteButton = true,\n  validator = null,\n  rows = 3,\n  size = 'xl',\n  variant = 'outlined',\n  colorScheme = 'default',\n  font = 'main',\n  weight = 'light',\n  error = false,\n  success = false,\n  disabled = false,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const [value, setValue] = useState<string>((props.value as string) ?? (props.defaultValue as string) ?? '')\n  const [isValid, setIsValid] = useState<boolean | null>(null)\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const newValue = e.target.value\n    setValue(newValue)\n\n    if (typeof onChange === 'function') {\n      onChange(newValue)\n    }\n\n    validateInput(newValue)\n  }\n\n  const validateInput = (input: string): void => {\n    if (validator === null) {\n      setIsValid(null)\n      return\n    }\n\n    if (typeof validator === 'function') {\n      setIsValid(validator(input))\n    } else {\n      setIsValid(Boolean(validator))\n    }\n  }\n\n  const handlePaste = (): void => {\n    navigator.clipboard.readText()\n      .then((text) => {\n        if (text !== '') {\n          setValue(text)\n          if (textareaRef.current != null) {\n            textareaRef.current.value = text\n          }\n          if (onChange != null) {\n            onChange(text)\n          }\n          validateInput(text)\n        }\n      })\n      .catch((err) => {\n        console.error('Failed to read clipboard contents: ', err)\n      })\n  }\n\n  const hasValue = value !== ''\n\n  // Determine color scheme based on state\n  let finalColorScheme = colorScheme\n  let finalIsValid: boolean | null = isValid\n  \n  if (error) {\n    finalColorScheme = 'error'\n    finalIsValid = false\n  } else if (success) {\n    finalColorScheme = 'success'\n    finalIsValid = true\n  }\n\n  const containerClasses = textareaContainer({\n    theme,\n    hasValue,\n    colorScheme: finalColorScheme,\n    size,\n    variant,\n    isValid: finalIsValid,\n    disabled\n  })\n\n  const textareaClasses = textarea({\n    theme,\n    font,\n    weight,\n    size,\n    disabled\n  }) + ' ' + className\n\n  return (\n    <div className={containerClasses}>\n      <textarea\n        ref={textareaRef}\n        value={value}\n        onChange={handleChange}\n        rows={rows}\n        className={textareaClasses}\n        disabled={disabled}\n        {...props}\n      />\n\n      {showPasteButton && !hasValue && !disabled && (\n        <Button \n          colorScheme='brand' \n          size='sm' \n          onClick={handlePaste}\n          className={`absolute top-1/2 !-translate-y-1/2 ${\n            size === 'sm' ? 'right-3' : \n            size === 'md' ? 'right-[1.125rem]' : \n            'right-[1.5625rem]'\n          }`}\n        >\n          PASTE\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport default Textarea "],"names":["textareaContainer","cva","variants","theme","light","dark","hasValue","true","false","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","isValid","null","disabled","compoundVariants","class","defaultVariants","textarea","font","main","grotesque","weight","normal","medium","semibold","bold","Textarea","_a","className","onChange","showPasteButton","validator","rows","props","__rest","useTheme","value","setValue","useState","_c","_b","defaultValue","setIsValid","textareaRef","useRef","handleChange","e","newValue","target","validateInput","input","Boolean","handlePaste","navigator","clipboard","readText","then","text","current","catch","err","console","finalColorScheme","finalIsValid","containerClasses","textareaClasses","_jsxs","children","_jsx","Object","assign","ref","Button","onClick"],"mappings":"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"}

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

@@ -0,0 +1,251 @@
+"use client";
+
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { Button } from '../button/index.esm.js';
+import { cva } from 'class-variance-authority';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+
+const textareaContainer = cva('relative flex items-baseline transition-all w-full', {
+  variants: {
+    theme: {
+      light: 'bg-white',
+      dark: 'bg-gray-800'
+    },
+    hasValue: {
+      true: '',
+      false: ''
+    },
+    colorScheme: {
+      default: 'focus-within:ring-blue-500/20',
+      brand: 'focus-within:ring-dash-brand/20',
+      error: 'focus-within:ring-red-500/20',
+      success: 'focus-within:ring-green-500/20'
+    },
+    size: {
+      sm: 'dash-block-sm',
+      md: 'dash-block-md',
+      xl: 'dash-block-xl'
+    },
+    variant: {
+      outlined: 'outline outline-1 outline-offset-[-1px]'
+    },
+    isValid: {
+      true: '',
+      false: '',
+      null: ''
+    },
+    disabled: {
+      false: '',
+      true: 'opacity-60 cursor-not-allowed'
+    }
+  },
+  compoundVariants: [
+  // Outlined variant colors
+  {
+    variant: 'outlined',
+    colorScheme: 'default',
+    class: 'outline-[rgba(17,17,17,0.32)] focus-within:outline-[rgba(17,17,17,0.6)]'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'brand',
+    class: 'outline-dash-brand/30 focus-within:outline-dash-brand'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'error',
+    isValid: false,
+    class: 'outline-red-500 focus-within:outline-red-500'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'success',
+    isValid: true,
+    class: 'outline-green-500 focus-within:outline-green-500'
+  },
+  // Outlined variant with focus ring
+  {
+    variant: 'outlined',
+    class: 'focus-within:ring-2'
+  },
+  // Add extra padding for PASTE button when no value
+  {
+    hasValue: false,
+    size: 'sm',
+    class: 'pr-[70px]'
+  }, {
+    hasValue: false,
+    size: 'md',
+    class: 'pr-[70px]'
+  }, {
+    hasValue: false,
+    size: 'xl',
+    class: 'pr-[70px]'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    hasValue: false,
+    colorScheme: 'default',
+    size: 'xl',
+    variant: 'outlined',
+    isValid: null,
+    disabled: false
+  }
+});
+const textarea = cva('w-full bg-transparent outline-none resize-none transition-all text-[0.875rem] leading-[1.0625rem] placeholder:text-opacity-60', {
+  variants: {
+    theme: {
+      light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',
+      dark: 'text-white placeholder:text-gray-400'
+    },
+    font: {
+      main: 'font-dash-main',
+      grotesque: 'font-dash-grotesque'
+    },
+    weight: {
+      light: 'font-light',
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold'
+    },
+    size: {
+      sm: '',
+      md: '',
+      xl: ''
+    },
+    disabled: {
+      false: '',
+      true: 'cursor-not-allowed'
+    }
+  },
+  defaultVariants: {
+    theme: 'light',
+    font: 'main',
+    weight: 'light',
+    size: 'xl',
+    disabled: false
+  }
+});
+/**
+ * A versatile textarea component that adapts to light/dark theme,
+ * supports various color schemes, sizes, variants, and states.
+ * Includes optional paste functionality and validation.
+ *
+ * @example
+ * <Textarea
+ *   placeholder='Enter your message'
+ *   colorScheme='brand'
+ *   size='xl'
+ *   font='grotesque'
+ *   weight='medium'
+ *   rows={4}
+ *   showPasteButton={true}
+ * />
+ */
+const Textarea = _a => {
+  var _b, _c;
+  var {
+      className = '',
+      onChange,
+      showPasteButton = true,
+      validator = null,
+      rows = 3,
+      size = 'xl',
+      variant = 'outlined',
+      colorScheme = 'default',
+      font = 'main',
+      weight = 'light',
+      error = false,
+      success = false,
+      disabled = false
+    } = _a,
+    props = __rest(_a, ["className", "onChange", "showPasteButton", "validator", "rows", "size", "variant", "colorScheme", "font", "weight", "error", "success", "disabled"]);
+  const {
+    theme
+  } = useTheme();
+  const [value, setValue] = useState((_c = (_b = props.value) !== null && _b !== void 0 ? _b : props.defaultValue) !== null && _c !== void 0 ? _c : '');
+  const [isValid, setIsValid] = useState(null);
+  const textareaRef = useRef(null);
+  const handleChange = e => {
+    const newValue = e.target.value;
+    setValue(newValue);
+    if (typeof onChange === 'function') {
+      onChange(newValue);
+    }
+    validateInput(newValue);
+  };
+  const validateInput = input => {
+    if (validator === null) {
+      setIsValid(null);
+      return;
+    }
+    if (typeof validator === 'function') {
+      setIsValid(validator(input));
+    } else {
+      setIsValid(Boolean(validator));
+    }
+  };
+  const handlePaste = () => {
+    navigator.clipboard.readText().then(text => {
+      if (text !== '') {
+        setValue(text);
+        if (textareaRef.current != null) {
+          textareaRef.current.value = text;
+        }
+        if (onChange != null) {
+          onChange(text);
+        }
+        validateInput(text);
+      }
+    }).catch(err => {
+      console.error('Failed to read clipboard contents: ', err);
+    });
+  };
+  const hasValue = value !== '';
+  // Determine color scheme based on state
+  let finalColorScheme = colorScheme;
+  let finalIsValid = isValid;
+  if (error) {
+    finalColorScheme = 'error';
+    finalIsValid = false;
+  } else if (success) {
+    finalColorScheme = 'success';
+    finalIsValid = true;
+  }
+  const containerClasses = textareaContainer({
+    theme,
+    hasValue,
+    colorScheme: finalColorScheme,
+    size,
+    variant,
+    isValid: finalIsValid,
+    disabled
+  });
+  const textareaClasses = textarea({
+    theme,
+    font,
+    weight,
+    size,
+    disabled
+  }) + ' ' + className;
+  return jsxs("div", {
+    className: containerClasses,
+    children: [jsx("textarea", Object.assign({
+      ref: textareaRef,
+      value: value,
+      onChange: handleChange,
+      rows: rows,
+      className: textareaClasses,
+      disabled: disabled
+    }, props)), showPasteButton && !hasValue && !disabled && jsx(Button, {
+      colorScheme: 'brand',
+      size: 'sm',
+      onClick: handlePaste,
+      className: `absolute top-1/2 !-translate-y-1/2 ${size === 'sm' ? 'right-3' : size === 'md' ? 'right-[1.125rem]' : 'right-[1.5625rem]'}`,
+      children: "PASTE"
+    })]
+  });
+};
+
+export { Textarea, Textarea as default };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/textarea/index.tsx"],"sourcesContent":["import React, { useState, useRef, TextareaHTMLAttributes } from 'react'\nimport { Button } from '../button'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst textareaContainer = cva(\n  'relative flex items-baseline transition-all w-full',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white',\n        dark: 'bg-gray-800'\n      },\n      hasValue: {\n        true: '',\n        false: ''\n      },\n      colorScheme: {\n        default: 'focus-within:ring-blue-500/20',\n        brand: 'focus-within:ring-dash-brand/20',\n        error: 'focus-within:ring-red-500/20',\n        success: 'focus-within:ring-green-500/20'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      variant: {\n        outlined: 'outline outline-1 outline-offset-[-1px]'\n      },\n      isValid: {\n        true: '',\n        false: '',\n        null: ''\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outlined variant colors\n      {\n        variant: 'outlined',\n        colorScheme: 'default',\n        class: 'outline-[rgba(17,17,17,0.32)] focus-within:outline-[rgba(17,17,17,0.6)]'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'brand',\n        class: 'outline-dash-brand/30 focus-within:outline-dash-brand'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'error',\n        isValid: false,\n        class: 'outline-red-500 focus-within:outline-red-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'success',\n        isValid: true,\n        class: 'outline-green-500 focus-within:outline-green-500'\n      },\n      // Outlined variant with focus ring\n      {\n        variant: 'outlined',\n        class: 'focus-within:ring-2'\n      },\n      // Add extra padding for PASTE button when no value\n      { hasValue: false, size: 'sm', class: 'pr-[70px]' },\n      { hasValue: false, size: 'md', class: 'pr-[70px]' },\n      { hasValue: false, size: 'xl', class: 'pr-[70px]' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      hasValue: false,\n      colorScheme: 'default',\n      size: 'xl',\n      variant: 'outlined',\n      isValid: null,\n      disabled: false\n    }\n  }\n)\n\nconst textarea = cva(\n  'w-full bg-transparent outline-none resize-none transition-all text-[0.875rem] leading-[1.0625rem] placeholder:text-opacity-60',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n        dark: 'text-white placeholder:text-gray-400'\n      },\n      font: {\n        main: 'font-dash-main',\n        grotesque: 'font-dash-grotesque'\n      },\n      weight: {\n        light: 'font-light',\n        normal: 'font-normal',\n        medium: 'font-medium',\n        semibold: 'font-semibold',\n        bold: 'font-bold'\n      },\n      size: {\n        sm: '',\n        md: '',\n        xl: ''\n      },\n      disabled: {\n        false: '',\n        true: 'cursor-not-allowed'\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      font: 'main',\n      weight: 'light',\n      size: 'xl',\n      disabled: false\n    }\n  }\n)\n\ntype TextareaVariants = VariantProps<typeof textareaContainer>\n\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'size'>, Omit<TextareaVariants, 'theme' | 'hasValue' | 'isValid' | 'disabled'> {\n  className?: string\n  onChange?: (value: string) => void\n  showPasteButton?: boolean\n  validator?: ((value: string) => boolean) | boolean\n  rows?: number\n  font?: 'main' | 'grotesque'\n  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'\n  error?: boolean\n  success?: boolean\n}\n\n/**\n * A versatile textarea component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * Includes optional paste functionality and validation.\n *\n * @example\n * <Textarea\n *   placeholder='Enter your message'\n *   colorScheme='brand'\n *   size='xl'\n *   font='grotesque'\n *   weight='medium'\n *   rows={4}\n *   showPasteButton={true}\n * />\n */\nexport const Textarea: React.FC<TextareaProps> = ({\n  className = '',\n  onChange,\n  showPasteButton = true,\n  validator = null,\n  rows = 3,\n  size = 'xl',\n  variant = 'outlined',\n  colorScheme = 'default',\n  font = 'main',\n  weight = 'light',\n  error = false,\n  success = false,\n  disabled = false,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const [value, setValue] = useState<string>((props.value as string) ?? (props.defaultValue as string) ?? '')\n  const [isValid, setIsValid] = useState<boolean | null>(null)\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const newValue = e.target.value\n    setValue(newValue)\n\n    if (typeof onChange === 'function') {\n      onChange(newValue)\n    }\n\n    validateInput(newValue)\n  }\n\n  const validateInput = (input: string): void => {\n    if (validator === null) {\n      setIsValid(null)\n      return\n    }\n\n    if (typeof validator === 'function') {\n      setIsValid(validator(input))\n    } else {\n      setIsValid(Boolean(validator))\n    }\n  }\n\n  const handlePaste = (): void => {\n    navigator.clipboard.readText()\n      .then((text) => {\n        if (text !== '') {\n          setValue(text)\n          if (textareaRef.current != null) {\n            textareaRef.current.value = text\n          }\n          if (onChange != null) {\n            onChange(text)\n          }\n          validateInput(text)\n        }\n      })\n      .catch((err) => {\n        console.error('Failed to read clipboard contents: ', err)\n      })\n  }\n\n  const hasValue = value !== ''\n\n  // Determine color scheme based on state\n  let finalColorScheme = colorScheme\n  let finalIsValid: boolean | null = isValid\n  \n  if (error) {\n    finalColorScheme = 'error'\n    finalIsValid = false\n  } else if (success) {\n    finalColorScheme = 'success'\n    finalIsValid = true\n  }\n\n  const containerClasses = textareaContainer({\n    theme,\n    hasValue,\n    colorScheme: finalColorScheme,\n    size,\n    variant,\n    isValid: finalIsValid,\n    disabled\n  })\n\n  const textareaClasses = textarea({\n    theme,\n    font,\n    weight,\n    size,\n    disabled\n  }) + ' ' + className\n\n  return (\n    <div className={containerClasses}>\n      <textarea\n        ref={textareaRef}\n        value={value}\n        onChange={handleChange}\n        rows={rows}\n        className={textareaClasses}\n        disabled={disabled}\n        {...props}\n      />\n\n      {showPasteButton && !hasValue && !disabled && (\n        <Button \n          colorScheme='brand' \n          size='sm' \n          onClick={handlePaste}\n          className={`absolute top-1/2 !-translate-y-1/2 ${\n            size === 'sm' ? 'right-3' : \n            size === 'md' ? 'right-[1.125rem]' : \n            'right-[1.5625rem]'\n          }`}\n        >\n          PASTE\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport default Textarea "],"names":["textareaContainer","cva","variants","theme","light","dark","hasValue","true","false","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","isValid","null","disabled","compoundVariants","class","defaultVariants","textarea","font","main","grotesque","weight","normal","medium","semibold","bold","Textarea","_a","className","onChange","showPasteButton","validator","rows","props","__rest","useTheme","value","setValue","useState","_c","_b","defaultValue","setIsValid","textareaRef","useRef","handleChange","e","newValue","target","validateInput","input","Boolean","handlePaste","navigator","clipboard","readText","then","text","current","catch","err","console","finalColorScheme","finalIsValid","containerClasses","textareaClasses","_jsxs","children","_jsx","Object","assign","ref","Button","onClick"],"mappings":";;;;;;;;;AAKA,MAAMA,iBAAiB,GAAGC,GAAG,CAC3B,oDAAoD,EACpD;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,UAAU;AACjBC,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAE,EAAE;AACRC,MAAAA,KAAK,EAAE;KACR;AACDC,IAAAA,WAAW,EAAE;AACXC,MAAAA,OAAO,EAAE,+BAA+B;AACxCC,MAAAA,KAAK,EAAE,iCAAiC;AACxCC,MAAAA,KAAK,EAAE,8BAA8B;AACrCC,MAAAA,OAAO,EAAE;KACV;AACDC,IAAAA,IAAI,EAAE;AACJC,MAAAA,EAAE,EAAE,eAAe;AACnBC,MAAAA,EAAE,EAAE,eAAe;AACnBC,MAAAA,EAAE,EAAE;KACL;AACDC,IAAAA,OAAO,EAAE;AACPC,MAAAA,QAAQ,EAAE;KACX;AACDC,IAAAA,OAAO,EAAE;AACPb,MAAAA,IAAI,EAAE,EAAE;AACRC,MAAAA,KAAK,EAAE,EAAE;AACTa,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,QAAQ,EAAE;AACRd,MAAAA,KAAK,EAAE,EAAE;AACTD,MAAAA,IAAI,EAAE;AACP;GACF;AACDgB,EAAAA,gBAAgB,EAAE;AAChB;AACA,EAAA;AACEL,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,SAAS;AACtBe,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEN,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,OAAO;AACpBe,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEN,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,OAAO;AACpBW,IAAAA,OAAO,EAAE,KAAK;AACdI,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEN,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,SAAS;AACtBW,IAAAA,OAAO,EAAE,IAAI;AACbI,IAAAA,KAAK,EAAE;GACR;AACD;AACA,EAAA;AACEN,IAAAA,OAAO,EAAE,UAAU;AACnBM,IAAAA,KAAK,EAAE;GACR;AACD;AACA,EAAA;AAAElB,IAAAA,QAAQ,EAAE,KAAK;AAAEQ,IAAAA,IAAI,EAAE,IAAI;AAAEU,IAAAA,KAAK,EAAE;AAAa,GAAA,EACnD;AAAElB,IAAAA,QAAQ,EAAE,KAAK;AAAEQ,IAAAA,IAAI,EAAE,IAAI;AAAEU,IAAAA,KAAK,EAAE;AAAa,GAAA,EACnD;AAAElB,IAAAA,QAAQ,EAAE,KAAK;AAAEQ,IAAAA,IAAI,EAAE,IAAI;AAAEU,IAAAA,KAAK,EAAE;AAAa,GAAA,CACpD;AACDC,EAAAA,eAAe,EAAE;AACftB,IAAAA,KAAK,EAAE,OAAO;AACdG,IAAAA,QAAQ,EAAE,KAAK;AACfG,IAAAA,WAAW,EAAE,SAAS;AACtBK,IAAAA,IAAI,EAAE,IAAI;AACVI,IAAAA,OAAO,EAAE,UAAU;AACnBE,IAAAA,OAAO,EAAE,IAAI;AACbE,IAAAA,QAAQ,EAAE;AACX;AACF,CAAA,CACF;AAED,MAAMI,QAAQ,GAAGzB,GAAG,CAClB,+HAA+H,EAC/H;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,sDAAsD;AAC7DC,MAAAA,IAAI,EAAE;KACP;AACDsB,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,EAAE,gBAAgB;AACtBC,MAAAA,SAAS,EAAE;KACZ;AACDC,IAAAA,MAAM,EAAE;AACN1B,MAAAA,KAAK,EAAE,YAAY;AACnB2B,MAAAA,MAAM,EAAE,aAAa;AACrBC,MAAAA,MAAM,EAAE,aAAa;AACrBC,MAAAA,QAAQ,EAAE,eAAe;AACzBC,MAAAA,IAAI,EAAE;KACP;AACDpB,IAAAA,IAAI,EAAE;AACJC,MAAAA,EAAE,EAAE,EAAE;AACNC,MAAAA,EAAE,EAAE,EAAE;AACNC,MAAAA,EAAE,EAAE;KACL;AACDK,IAAAA,QAAQ,EAAE;AACRd,MAAAA,KAAK,EAAE,EAAE;AACTD,MAAAA,IAAI,EAAE;AACP;GACF;AACDkB,EAAAA,eAAe,EAAE;AACftB,IAAAA,KAAK,EAAE,OAAO;AACdwB,IAAAA,IAAI,EAAE,MAAM;AACZG,IAAAA,MAAM,EAAE,OAAO;AACfhB,IAAAA,IAAI,EAAE,IAAI;AACVQ,IAAAA,QAAQ,EAAE;AACX;AACF,CAAA,CACF;AAgBD;;;;;;;;;;;;;;;AAeG;AACUa,MAAAA,QAAQ,GAA6BC,EAejD,IAAI;;MAf6C;AAChDC,MAAAA,SAAS,GAAG,EAAE;MACdC,QAAQ;AACRC,MAAAA,eAAe,GAAG,IAAI;AACtBC,MAAAA,SAAS,GAAG,IAAI;AAChBC,MAAAA,IAAI,GAAG,CAAC;AACR3B,MAAAA,IAAI,GAAG,IAAI;AACXI,MAAAA,OAAO,GAAG,UAAU;AACpBT,MAAAA,WAAW,GAAG,SAAS;AACvBkB,MAAAA,IAAI,GAAG,MAAM;AACbG,MAAAA,MAAM,GAAG,OAAO;AAChBlB,MAAAA,KAAK,GAAG,KAAK;AACbC,MAAAA,OAAO,GAAG,KAAK;AACfS,MAAAA,QAAQ,GAAG;AAAK,KAAA,GAAAc,EAEjB;AADIM,IAAAA,KAAK,GAdwCC,MAAA,CAAAP,EAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,MAAA,EAAA,MAAA,EAAA,SAAA,EAAA,aAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,CAejD,CADS;EAER,MAAM;AAAEjC,IAAAA;GAAO,GAAGyC,QAAQ,EAAE;AAC5B,EAAA,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAS,CAAAC,EAAA,GAAA,CAAAC,EAAA,GAACP,KAAK,CAACG,KAAgB,mCAAKH,KAAK,CAACQ,YAAuB,MAAI,IAAA,IAAAF,EAAA,KAAA,MAAA,GAAAA,EAAA,GAAA,EAAE,CAAC;EAC3G,MAAM,CAAC5B,OAAO,EAAE+B,UAAU,CAAC,GAAGJ,QAAQ,CAAiB,IAAI,CAAC;AAC5D,EAAA,MAAMK,WAAW,GAAGC,MAAM,CAAsB,IAAI,CAAC;EAErD,MAAMC,YAAY,GAAIC,CAAyC,IAAU;AACvE,IAAA,MAAMC,QAAQ,GAAGD,CAAC,CAACE,MAAM,CAACZ,KAAK;IAC/BC,QAAQ,CAACU,QAAQ,CAAC;AAElB,IAAA,IAAI,OAAOlB,QAAQ,KAAK,UAAU,EAAE;MAClCA,QAAQ,CAACkB,QAAQ,CAAC;AACpB;IAEAE,aAAa,CAACF,QAAQ,CAAC;GACxB;EAED,MAAME,aAAa,GAAIC,KAAa,IAAU;IAC5C,IAAInB,SAAS,KAAK,IAAI,EAAE;MACtBW,UAAU,CAAC,IAAI,CAAC;AAChB,MAAA;AACF;AAEA,IAAA,IAAI,OAAOX,SAAS,KAAK,UAAU,EAAE;AACnCW,MAAAA,UAAU,CAACX,SAAS,CAACmB,KAAK,CAAC,CAAC;AAC9B,KAAC,MAAM;AACLR,MAAAA,UAAU,CAACS,OAAO,CAACpB,SAAS,CAAC,CAAC;AAChC;GACD;EAED,MAAMqB,WAAW,GAAGA,MAAW;IAC7BC,SAAS,CAACC,SAAS,CAACC,QAAQ,EAAE,CAC3BC,IAAI,CAAEC,IAAI,IAAI;MACb,IAAIA,IAAI,KAAK,EAAE,EAAE;QACfpB,QAAQ,CAACoB,IAAI,CAAC;AACd,QAAA,IAAId,WAAW,CAACe,OAAO,IAAI,IAAI,EAAE;AAC/Bf,UAAAA,WAAW,CAACe,OAAO,CAACtB,KAAK,GAAGqB,IAAI;AAClC;QACA,IAAI5B,QAAQ,IAAI,IAAI,EAAE;UACpBA,QAAQ,CAAC4B,IAAI,CAAC;AAChB;QACAR,aAAa,CAACQ,IAAI,CAAC;AACrB;AACF,KAAC,CAAC,CACDE,KAAK,CAAEC,GAAG,IAAI;AACbC,MAAAA,OAAO,CAAC1D,KAAK,CAAC,qCAAqC,EAAEyD,GAAG,CAAC;AAC3D,KAAC,CAAC;GACL;AAED,EAAA,MAAM/D,QAAQ,GAAGuC,KAAK,KAAK,EAAE;AAE7B;EACA,IAAI0B,gBAAgB,GAAG9D,WAAW;EAClC,IAAI+D,YAAY,GAAmBpD,OAAO;AAE1C,EAAA,IAAIR,KAAK,EAAE;AACT2D,IAAAA,gBAAgB,GAAG,OAAO;AAC1BC,IAAAA,YAAY,GAAG,KAAK;GACrB,MAAM,IAAI3D,OAAO,EAAE;AAClB0D,IAAAA,gBAAgB,GAAG,SAAS;AAC5BC,IAAAA,YAAY,GAAG,IAAI;AACrB;EAEA,MAAMC,gBAAgB,GAAGzE,iBAAiB,CAAC;IACzCG,KAAK;IACLG,QAAQ;AACRG,IAAAA,WAAW,EAAE8D,gBAAgB;IAC7BzD,IAAI;IACJI,OAAO;AACPE,IAAAA,OAAO,EAAEoD,YAAY;AACrBlD,IAAAA;AACD,GAAA,CAAC;EAEF,MAAMoD,eAAe,GAAGhD,QAAQ,CAAC;IAC/BvB,KAAK;IACLwB,IAAI;IACJG,MAAM;IACNhB,IAAI;AACJQ,IAAAA;AACD,GAAA,CAAC,GAAG,GAAG,GAAGe,SAAS;EAEpB,OACEsC,IAAA,CAAA,KAAA,EAAA;AAAKtC,IAAAA,SAAS,EAAEoC,gBAAgB;IAC9BG,QAAA,EAAA,CAAAC,GAAA,CAAA,UAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACEC,MAAAA,GAAG,EAAE5B,WAAW;AAChBP,MAAAA,KAAK,EAAEA,KAAK;AACZP,MAAAA,QAAQ,EAAEgB,YAAY;AACtBb,MAAAA,IAAI,EAAEA,IAAI;AACVJ,MAAAA,SAAS,EAAEqC,eAAe;AAC1BpD,MAAAA,QAAQ,EAAEA;AAAQ,KAAA,EACdoB,KAAK,CACT,CAAA,EAEDH,eAAe,IAAI,CAACjC,QAAQ,IAAI,CAACgB,QAAQ,IACxCuD,GAAC,CAAAI,MAAM,EACL;AAAAxE,MAAAA,WAAW,EAAC,OAAO;AACnBK,MAAAA,IAAI,EAAC,IAAI;AACToE,MAAAA,OAAO,EAAErB,WAAW;AACpBxB,MAAAA,SAAS,EAAE,CAAA,mCAAA,EACTvB,IAAI,KAAK,IAAI,GAAG,SAAS,GACzBA,IAAI,KAAK,IAAI,GAAG,kBAAkB,GAClC,mBACF,CAAE,CAAA;AAAA8D,MAAAA,QAAA,EAAA;AAAA,KAAA,CAIL;AAAA,GAAA,CACG;AAEV;;;;"}

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

@@ -0,0 +1,93 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var index = require('../notActive/index.cjs.js');
+var datetime = require('../../shared/utils/datetime.cjs.js');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+
+const wrapperStyles = classVarianceAuthority.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
+  } = ThemeContext.useTheme();
+  const [timeDelta, setTimeDelta] = React.useState(null);
+  // const tooltipDateObj = new Date(tooltipDate ?? endDate)
+  React.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(datetime.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 jsxRuntime.jsx(index.NotActive, {});
+  }
+  // const showTooltip = showTimestampTooltip && format !== 'detailed' && !isNaN(tooltipDateObj.getTime())
+  const content = jsxRuntime.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;
+};
+
+exports.TimeDelta = TimeDelta;
+exports.default = TimeDelta;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.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,0BAAG,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,qBAAQ,EAAE;EAC5B,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAQ,CAAgB,IAAI,CAAC;AAC/D;AAEAC,EAAAA,eAAS,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,qBAAY,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,cAAA,CAACC,eAAS,EAAA,EAAA,CAAG;AACtB;AAEA;AACA,EAAA,MAAMC,OAAO,GAAGF,cAAM,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;;;;;"}