dash-ui-kit 2.0.0-dev → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (97) hide show
  1. package/dist/react/components/badge/index.cjs.js +8 -3
  2. package/dist/react/components/badge/index.cjs.js.map +1 -1
  3. package/dist/react/components/badge/index.d.ts +10 -1
  4. package/dist/react/components/badge/index.esm.js +8 -3
  5. package/dist/react/components/badge/index.esm.js.map +1 -1
  6. package/dist/react/components/button/index.cjs.js +7 -2
  7. package/dist/react/components/button/index.cjs.js.map +1 -1
  8. package/dist/react/components/button/index.d.ts +4 -0
  9. package/dist/react/components/button/index.esm.js +7 -2
  10. package/dist/react/components/button/index.esm.js.map +1 -1
  11. package/dist/react/components/copyButton/index.cjs.js +7 -7
  12. package/dist/react/components/copyButton/index.cjs.js.map +1 -1
  13. package/dist/react/components/copyButton/index.esm.js +6 -6
  14. package/dist/react/components/copyButton/index.esm.js.map +1 -1
  15. package/dist/react/components/heading/index.cjs.js +7 -2
  16. package/dist/react/components/heading/index.cjs.js.map +1 -1
  17. package/dist/react/components/heading/index.d.ts +4 -1
  18. package/dist/react/components/heading/index.esm.js +7 -2
  19. package/dist/react/components/heading/index.esm.js.map +1 -1
  20. package/dist/react/components/index.cjs.js +47 -43
  21. package/dist/react/components/index.cjs.js.map +1 -1
  22. package/dist/react/components/index.d.ts +2 -0
  23. package/dist/react/components/index.esm.js +2 -0
  24. package/dist/react/components/index.esm.js.map +1 -1
  25. package/dist/react/components/input/index.cjs.js +7 -2
  26. package/dist/react/components/input/index.cjs.js.map +1 -1
  27. package/dist/react/components/input/index.d.ts +4 -0
  28. package/dist/react/components/input/index.esm.js +7 -2
  29. package/dist/react/components/input/index.esm.js.map +1 -1
  30. package/dist/react/components/overlayMenu/index.cjs.js +69 -25
  31. package/dist/react/components/overlayMenu/index.cjs.js.map +1 -1
  32. package/dist/react/components/overlayMenu/index.d.ts +9 -10
  33. package/dist/react/components/overlayMenu/index.esm.js +69 -25
  34. package/dist/react/components/overlayMenu/index.esm.js.map +1 -1
  35. package/dist/react/components/overlaySelect/index.cjs.js +7 -2
  36. package/dist/react/components/overlaySelect/index.cjs.js.map +1 -1
  37. package/dist/react/components/overlaySelect/index.d.ts +4 -0
  38. package/dist/react/components/overlaySelect/index.esm.js +7 -2
  39. package/dist/react/components/overlaySelect/index.esm.js.map +1 -1
  40. package/dist/react/components/popover/index.cjs.js +116 -0
  41. package/dist/react/components/popover/index.cjs.js.map +1 -0
  42. package/dist/react/components/popover/index.d.ts +23 -0
  43. package/dist/react/components/popover/index.esm.js +92 -0
  44. package/dist/react/components/popover/index.esm.js.map +1 -0
  45. package/dist/react/components/progressStepBar/index.cjs.js +7 -2
  46. package/dist/react/components/progressStepBar/index.cjs.js.map +1 -1
  47. package/dist/react/components/progressStepBar/index.d.ts +5 -2
  48. package/dist/react/components/progressStepBar/index.esm.js +7 -2
  49. package/dist/react/components/progressStepBar/index.esm.js.map +1 -1
  50. package/dist/react/components/select/index.cjs.js +7 -2
  51. package/dist/react/components/select/index.cjs.js.map +1 -1
  52. package/dist/react/components/select/index.d.ts +4 -0
  53. package/dist/react/components/select/index.esm.js +7 -2
  54. package/dist/react/components/select/index.esm.js.map +1 -1
  55. package/dist/react/components/text/index.cjs.js +8 -2
  56. package/dist/react/components/text/index.cjs.js.map +1 -1
  57. package/dist/react/components/text/index.d.ts +5 -0
  58. package/dist/react/components/text/index.esm.js +8 -2
  59. package/dist/react/components/text/index.esm.js.map +1 -1
  60. package/dist/react/components/textarea/index.cjs.js +9 -5
  61. package/dist/react/components/textarea/index.cjs.js.map +1 -1
  62. package/dist/react/components/textarea/index.d.ts +4 -0
  63. package/dist/react/components/textarea/index.esm.js +9 -5
  64. package/dist/react/components/textarea/index.esm.js.map +1 -1
  65. package/dist/react/components/tooltip/index.cjs.js +98 -0
  66. package/dist/react/components/tooltip/index.cjs.js.map +1 -0
  67. package/dist/react/components/tooltip/index.d.ts +21 -0
  68. package/dist/react/components/tooltip/index.esm.js +74 -0
  69. package/dist/react/components/tooltip/index.esm.js.map +1 -0
  70. package/dist/react/components/valueCard/index.cjs.js +7 -2
  71. package/dist/react/components/valueCard/index.cjs.js.map +1 -1
  72. package/dist/react/components/valueCard/index.d.ts +4 -0
  73. package/dist/react/components/valueCard/index.esm.js +7 -2
  74. package/dist/react/components/valueCard/index.esm.js.map +1 -1
  75. package/dist/react/hooks/index.d.ts +1 -0
  76. package/dist/react/hooks/useColorScheme.cjs.js +25 -0
  77. package/dist/react/hooks/useColorScheme.cjs.js.map +1 -0
  78. package/dist/react/hooks/useColorScheme.d.ts +9 -0
  79. package/dist/react/hooks/useColorScheme.esm.js +23 -0
  80. package/dist/react/hooks/useColorScheme.esm.js.map +1 -0
  81. package/dist/react/index.cjs.js +47 -43
  82. package/dist/react/index.cjs.js.map +1 -1
  83. package/dist/react/index.d.ts +2 -0
  84. package/dist/react/index.esm.js +2 -0
  85. package/dist/react/index.esm.js.map +1 -1
  86. package/dist/react-native/components/badge/index.d.ts +12 -0
  87. package/dist/react-native/components/button/index.d.ts +6 -0
  88. package/dist/react-native/components/input/index.d.ts +6 -0
  89. package/dist/react-native/components/valueCard/index.d.ts +4 -0
  90. package/dist/react-native/index.cjs.js +39 -13
  91. package/dist/react-native/index.cjs.js.map +1 -1
  92. package/dist/react-native/index.esm.js +39 -14
  93. package/dist/react-native/index.esm.js.map +1 -1
  94. package/dist/react-native/utils/index.d.ts +1 -0
  95. package/dist/react-native/utils/resolveColorScheme.d.ts +1 -0
  96. package/dist/styles.css +1 -1
  97. package/package.json +2 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/text/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst textStyles = cva(\n '', {\n variants: {\n reset: {\n false: 'inline whitespace-normal',\n true: ''\n },\n theme: {\n light: 'text-gray-900',\n dark: 'text-gray-100'\n },\n color: {\n default: '',\n blue: '!text-dash-brand',\n 'blue-dark': '!text-dash-brand-dark dark:text-dash-brand-dim',\n red: 'text-red-700'\n },\n size: {\n xs: 'text-[0.625rem]',\n sm: 'text-sm',\n md: 'text-base',\n lg: 'text-lg',\n xl: 'text-xl'\n },\n weight: {\n normal: 'font-normal',\n medium: 'font-medium',\n bold: 'font-bold'\n },\n italic: {\n false: '',\n true: 'italic'\n },\n underline: {\n false: '',\n true: 'underline'\n },\n lineThrough: {\n false: '',\n true: 'line-through'\n },\n transform: {\n none: '',\n uppercase: 'uppercase',\n capitalize: 'capitalize'\n },\n opacity: {\n 0: 'opacity-0',\n 10: 'opacity-10',\n 20: 'opacity-20',\n 30: 'opacity-30',\n 40: 'opacity-40',\n 50: 'opacity-50',\n 60: 'opacity-60',\n 70: 'opacity-70',\n 80: 'opacity-80',\n 90: 'opacity-90',\n 100: 'opacity-100'\n },\n monospace: {\n false: '',\n true: 'font-grotesque'\n },\n dim: {\n false: '',\n true: '!opacity-60'\n }\n },\n defaultVariants: {\n reset: false,\n theme: 'light',\n color: 'default',\n size: 'md',\n weight: 'normal',\n italic: false,\n underline: false,\n lineThrough: false,\n transform: 'none',\n opacity: 100,\n monospace: false,\n dim: false\n }\n }\n)\n\ntype TextVariants = Omit<VariantProps<typeof textStyles>, 'theme'>\n\nexport interface TextProps extends TextVariants {\n /** Render as this element or component (e.g. 'h1' or Link). */\n as?: React.ElementType\n /** Additional CSS classes. */\n className?: string\n /** Text children. */\n children?: React.ReactNode\n}\n\n/**\n * A versatile text component with size, color, weight, decoration,\n * transform, opacity, monospace, dimming, and theme-aware defaults.\n */\nexport const Text: React.FC<TextProps> = ({ as, className = '', children, ...variantProps }) => {\n const { theme } = useTheme()\n\n const classes = textStyles({\n ...variantProps,\n theme\n }) + (className !== '' ? ` ${className}` : '')\n\n const Component = as ?? 'span'\n return <Component className={classes}>{children}</Component>\n}\n\nexport default Text\n"],"names":["textStyles","cva","variants","reset","false","true","theme","light","dark","color","default","blue","red","size","xs","sm","md","lg","xl","weight","normal","medium","bold","italic","underline","lineThrough","transform","none","uppercase","capitalize","opacity","monospace","dim","defaultVariants","Text","_a","as","className","children","variantProps","__rest","useTheme","classes","Object","assign","Component","_jsx"],"mappings":";;;;;;;AAIA,MAAMA,UAAU,GAAGC,GAAG,CACpB,EAAE,EAAE;AACFC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,0BAA0B;AACjCC,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,eAAe;AACtBC,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,KAAK,EAAE;AACLC,MAAAA,OAAO,EAAE,EAAE;AACXC,MAAAA,IAAI,EAAE,kBAAkB;AACxB,MAAA,WAAW,EAAE,gDAAgD;AAC7DC,MAAAA,GAAG,EAAE;KACN;AACDC,IAAAA,IAAI,EAAE;AACJC,MAAAA,EAAE,EAAE,iBAAiB;AACrBC,MAAAA,EAAE,EAAE,SAAS;AACbC,MAAAA,EAAE,EAAE,WAAW;AACfC,MAAAA,EAAE,EAAE,SAAS;AACbC,MAAAA,EAAE,EAAE;KACL;AACDC,IAAAA,MAAM,EAAE;AACNC,MAAAA,MAAM,EAAE,aAAa;AACrBC,MAAAA,MAAM,EAAE,aAAa;AACrBC,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,MAAM,EAAE;AACNnB,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,IAAI,EAAE;KACP;AACDmB,IAAAA,SAAS,EAAE;AACTpB,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,IAAI,EAAE;KACP;AACDoB,IAAAA,WAAW,EAAE;AACXrB,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,IAAI,EAAE;KACP;AACDqB,IAAAA,SAAS,EAAE;AACTC,MAAAA,IAAI,EAAE,EAAE;AACRC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,UAAU,EAAE;KACb;AACDC,IAAAA,OAAO,EAAE;AACP,MAAA,CAAC,EAAE,WAAW;AACd,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,GAAG,EAAE;KACN;AACDC,IAAAA,SAAS,EAAE;AACT3B,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,IAAI,EAAE;KACP;AACD2B,IAAAA,GAAG,EAAE;AACH5B,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,IAAI,EAAE;AACP;GACF;AACD4B,EAAAA,eAAe,EAAE;AACf9B,IAAAA,KAAK,EAAE,KAAK;AACZG,IAAAA,KAAK,EAAE,OAAO;AACdG,IAAAA,KAAK,EAAE,SAAS;AAChBI,IAAAA,IAAI,EAAE,IAAI;AACVM,IAAAA,MAAM,EAAE,QAAQ;AAChBI,IAAAA,MAAM,EAAE,KAAK;AACbC,IAAAA,SAAS,EAAE,KAAK;AAChBC,IAAAA,WAAW,EAAE,KAAK;AAClBC,IAAAA,SAAS,EAAE,MAAM;AACjBI,IAAAA,OAAO,EAAE,GAAG;AACZC,IAAAA,SAAS,EAAE,KAAK;AAChBC,IAAAA,GAAG,EAAE;AACN;AACF,CAAA,CACF;AAaD;;;AAGG;AACUE,MAAAA,IAAI,GAAyBC,EAAiD,IAAI;EAArD,IAAA;MAAEC,EAAE;AAAEC,MAAAA,SAAS,GAAG,EAAE;AAAEC,MAAAA;AAAQ,KAAA,GAAAH,EAAmB;AAAdI,IAAAA,YAAY,GAA/CC,MAAA,CAAAL,EAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,UAAA,CAAiD,CAAF;EACvF,MAAM;AAAE7B,IAAAA;GAAO,GAAGmC,QAAQ,EAAE;AAE5B,EAAA,MAAMC,OAAO,GAAG1C,UAAU,CACrB2C,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAC,MAAA,CAAA,EAAA,EAAAL,YAAY;AACfjC,IAAAA;AAAK,GAAA,CAAA,CACL,IAAI+B,SAAS,KAAK,EAAE,GAAG,CAAA,CAAA,EAAIA,SAAS,CAAA,CAAE,GAAG,EAAE,CAAC;AAE9C,EAAA,MAAMQ,SAAS,GAAGT,EAAE,KAAA,IAAA,IAAFA,EAAE,KAAF,MAAA,GAAAA,EAAE,GAAI,MAAM;EAC9B,OAAOU,GAAA,CAACD,SAAS,EAAC;AAAAR,IAAAA,SAAS,EAAEK,OAAO;AAAAJ,IAAAA,QAAA,EAAGA;AAAQ,GAAA,CAAa;AAC9D;;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/text/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst textStyles = cva(\n '', {\n variants: {\n reset: {\n false: 'inline whitespace-normal',\n true: ''\n },\n theme: {\n light: 'text-gray-900',\n dark: 'text-gray-100'\n },\n color: {\n default: '',\n blue: '!text-dash-brand',\n 'blue-dark': '!text-dash-brand-dark dark:text-dash-brand-dim',\n red: 'text-red-700'\n },\n size: {\n xs: 'text-[0.625rem]',\n sm: 'text-sm',\n md: 'text-base',\n lg: 'text-lg',\n xl: 'text-xl'\n },\n weight: {\n normal: 'font-normal',\n medium: 'font-medium',\n bold: 'font-bold'\n },\n italic: {\n false: '',\n true: 'italic'\n },\n underline: {\n false: '',\n true: 'underline'\n },\n lineThrough: {\n false: '',\n true: 'line-through'\n },\n transform: {\n none: '',\n uppercase: 'uppercase',\n capitalize: 'capitalize'\n },\n opacity: {\n 0: 'opacity-0',\n 10: 'opacity-10',\n 20: 'opacity-20',\n 30: 'opacity-30',\n 40: 'opacity-40',\n 50: 'opacity-50',\n 60: 'opacity-60',\n 70: 'opacity-70',\n 80: 'opacity-80',\n 90: 'opacity-90',\n 100: 'opacity-100'\n },\n monospace: {\n false: '',\n true: 'font-grotesque'\n },\n dim: {\n false: '',\n true: '!opacity-60'\n }\n },\n defaultVariants: {\n reset: false,\n theme: 'light',\n color: 'default',\n size: 'md',\n weight: 'normal',\n italic: false,\n underline: false,\n lineThrough: false,\n transform: 'none',\n opacity: 100,\n monospace: false,\n dim: false\n }\n }\n)\n\ntype TextVariants = Omit<VariantProps<typeof textStyles>, 'theme'>\n\ntype TextColor = 'default' | 'blue' | 'blue-dark' | 'red'\n\nexport interface TextProps extends TextVariants {\n /** Render as this element or component (e.g. 'h1' or Link). */\n as?: React.ElementType\n /** Additional CSS classes. */\n className?: string\n /** Text children. */\n children?: React.ReactNode\n /** Color override for light theme. */\n colorLight?: TextColor\n /** Color override for dark theme. */\n colorDark?: TextColor\n}\n\n/**\n * A versatile text component with size, color, weight, decoration,\n * transform, opacity, monospace, dimming, and theme-aware defaults.\n */\nexport const Text: React.FC<TextProps> = ({ as, className = '', children, color, colorLight, colorDark, ...variantProps }) => {\n const { theme } = useTheme()\n const effectiveColor = useColorScheme(color, colorLight, colorDark)\n\n const classes = textStyles({\n ...variantProps,\n color: effectiveColor,\n theme\n }) + (className !== '' ? ` ${className}` : '')\n\n const Component = as ?? 'span'\n return <Component className={classes}>{children}</Component>\n}\n\nexport default Text\n"],"names":["textStyles","cva","variants","reset","false","true","theme","light","dark","color","default","blue","red","size","xs","sm","md","lg","xl","weight","normal","medium","bold","italic","underline","lineThrough","transform","none","uppercase","capitalize","opacity","monospace","dim","defaultVariants","Text","_a","as","className","children","colorLight","colorDark","variantProps","__rest","useTheme","effectiveColor","useColorScheme","classes","Object","assign","Component","_jsx"],"mappings":"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"}
@@ -10,6 +10,7 @@ var React = require('react');
10
10
  var index = require('../button/index.cjs.js');
11
11
  var classVarianceAuthority = require('class-variance-authority');
12
12
  var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
13
+ var useColorScheme = require('../../hooks/useColorScheme.cjs.js');
13
14
 
14
15
  const textareaContainer = classVarianceAuthority.cva('relative flex items-baseline transition-all w-full', {
15
16
  variants: {
@@ -147,7 +148,7 @@ const textarea = classVarianceAuthority.cva('w-full bg-transparent outline-none
147
148
  * />
148
149
  */
149
150
  const Textarea = _a => {
150
- var _b, _c;
151
+ var _b, _c, _d;
151
152
  var {
152
153
  className = '',
153
154
  onChange,
@@ -156,18 +157,21 @@ const Textarea = _a => {
156
157
  rows = 3,
157
158
  size = 'xl',
158
159
  variant = 'outlined',
159
- colorScheme = 'default',
160
+ colorScheme,
161
+ colorSchemeLight,
162
+ colorSchemeDark,
160
163
  font = 'main',
161
164
  weight = 'light',
162
165
  error = false,
163
166
  success = false,
164
167
  disabled = false
165
168
  } = _a,
166
- props = tslib.__rest(_a, ["className", "onChange", "showPasteButton", "validator", "rows", "size", "variant", "colorScheme", "font", "weight", "error", "success", "disabled"]);
169
+ props = tslib.__rest(_a, ["className", "onChange", "showPasteButton", "validator", "rows", "size", "variant", "colorScheme", "colorSchemeLight", "colorSchemeDark", "font", "weight", "error", "success", "disabled"]);
167
170
  const {
168
171
  theme
169
172
  } = ThemeContext.useTheme();
170
- const [value, setValue] = React.useState((_c = (_b = props.value) !== null && _b !== void 0 ? _b : props.defaultValue) !== null && _c !== void 0 ? _c : '');
173
+ const effectiveColorScheme = (_b = useColorScheme.useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
174
+ const [value, setValue] = React.useState((_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.defaultValue) !== null && _d !== void 0 ? _d : '');
171
175
  const [isValid, setIsValid] = React.useState(null);
172
176
  const textareaRef = React.useRef(null);
173
177
  const handleChange = e => {
@@ -207,7 +211,7 @@ const Textarea = _a => {
207
211
  };
208
212
  const hasValue = value !== '';
209
213
  // Determine color scheme based on state
210
- let finalColorScheme = colorScheme;
214
+ let finalColorScheme = effectiveColorScheme;
211
215
  let finalIsValid = isValid;
212
216
  if (error) {
213
217
  finalColorScheme = 'error';
@@ -1 +1 @@
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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"}
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'\nimport { useColorScheme } from '../../hooks/useColorScheme'\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 /** Color scheme override for light theme */\n colorSchemeLight?: 'default' | 'brand' | 'error' | 'success'\n /** Color scheme override for dark theme */\n colorSchemeDark?: 'default' | 'brand' | 'error' | 'success'\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,\n colorSchemeLight,\n colorSchemeDark,\n font = 'main',\n weight = 'light',\n error = false,\n success = false,\n disabled = false,\n ...props\n}) => {\n const { theme } = useTheme()\n const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\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 = effectiveColorScheme\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","colorSchemeLight","colorSchemeDark","props","__rest","useTheme","effectiveColorScheme","_b","useColorScheme","value","setValue","useState","_d","_c","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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"}
@@ -20,6 +20,10 @@ export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
20
20
  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
21
21
  error?: boolean;
22
22
  success?: boolean;
23
+ /** Color scheme override for light theme */
24
+ colorSchemeLight?: 'default' | 'brand' | 'error' | 'success';
25
+ /** Color scheme override for dark theme */
26
+ colorSchemeDark?: 'default' | 'brand' | 'error' | 'success';
23
27
  }
24
28
  /**
25
29
  * A versatile textarea component that adapts to light/dark theme,
@@ -6,6 +6,7 @@ import { useState, useRef } from 'react';
6
6
  import { Button } from '../button/index.esm.js';
7
7
  import { cva } from 'class-variance-authority';
8
8
  import { useTheme } from '../../contexts/ThemeContext.esm.js';
9
+ import { useColorScheme } from '../../hooks/useColorScheme.esm.js';
9
10
 
10
11
  const textareaContainer = cva('relative flex items-baseline transition-all w-full', {
11
12
  variants: {
@@ -143,7 +144,7 @@ const textarea = cva('w-full bg-transparent outline-none resize-none transition-
143
144
  * />
144
145
  */
145
146
  const Textarea = _a => {
146
- var _b, _c;
147
+ var _b, _c, _d;
147
148
  var {
148
149
  className = '',
149
150
  onChange,
@@ -152,18 +153,21 @@ const Textarea = _a => {
152
153
  rows = 3,
153
154
  size = 'xl',
154
155
  variant = 'outlined',
155
- colorScheme = 'default',
156
+ colorScheme,
157
+ colorSchemeLight,
158
+ colorSchemeDark,
156
159
  font = 'main',
157
160
  weight = 'light',
158
161
  error = false,
159
162
  success = false,
160
163
  disabled = false
161
164
  } = _a,
162
- props = __rest(_a, ["className", "onChange", "showPasteButton", "validator", "rows", "size", "variant", "colorScheme", "font", "weight", "error", "success", "disabled"]);
165
+ props = __rest(_a, ["className", "onChange", "showPasteButton", "validator", "rows", "size", "variant", "colorScheme", "colorSchemeLight", "colorSchemeDark", "font", "weight", "error", "success", "disabled"]);
163
166
  const {
164
167
  theme
165
168
  } = useTheme();
166
- const [value, setValue] = useState((_c = (_b = props.value) !== null && _b !== void 0 ? _b : props.defaultValue) !== null && _c !== void 0 ? _c : '');
169
+ const effectiveColorScheme = (_b = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
170
+ const [value, setValue] = useState((_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.defaultValue) !== null && _d !== void 0 ? _d : '');
167
171
  const [isValid, setIsValid] = useState(null);
168
172
  const textareaRef = useRef(null);
169
173
  const handleChange = e => {
@@ -203,7 +207,7 @@ const Textarea = _a => {
203
207
  };
204
208
  const hasValue = value !== '';
205
209
  // Determine color scheme based on state
206
- let finalColorScheme = colorScheme;
210
+ let finalColorScheme = effectiveColorScheme;
207
211
  let finalIsValid = isValid;
208
212
  if (error) {
209
213
  finalColorScheme = 'error';
@@ -1 +1 @@
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;;;;"}
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'\nimport { useColorScheme } from '../../hooks/useColorScheme'\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 /** Color scheme override for light theme */\n colorSchemeLight?: 'default' | 'brand' | 'error' | 'success'\n /** Color scheme override for dark theme */\n colorSchemeDark?: 'default' | 'brand' | 'error' | 'success'\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,\n colorSchemeLight,\n colorSchemeDark,\n font = 'main',\n weight = 'light',\n error = false,\n success = false,\n disabled = false,\n ...props\n}) => {\n const { theme } = useTheme()\n const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\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 = effectiveColorScheme\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","colorSchemeLight","colorSchemeDark","props","__rest","useTheme","effectiveColorScheme","_b","useColorScheme","value","setValue","useState","_d","_c","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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"}
@@ -0,0 +1,98 @@
1
+ "use client";
2
+
3
+ 'use strict';
4
+
5
+ Object.defineProperty(exports, '__esModule', { value: true });
6
+
7
+ var jsxRuntime = require('react/jsx-runtime');
8
+ var React = require('react');
9
+ var TooltipPrimitive = require('@radix-ui/react-tooltip');
10
+ var classVarianceAuthority = require('class-variance-authority');
11
+ var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
12
+
13
+ function _interopNamespaceDefault(e) {
14
+ var n = Object.create(null);
15
+ if (e) {
16
+ Object.keys(e).forEach(function (k) {
17
+ if (k !== 'default') {
18
+ var d = Object.getOwnPropertyDescriptor(e, k);
19
+ Object.defineProperty(n, k, d.get ? d : {
20
+ enumerable: true,
21
+ get: function () { return e[k]; }
22
+ });
23
+ }
24
+ });
25
+ }
26
+ n.default = e;
27
+ return Object.freeze(n);
28
+ }
29
+
30
+ var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
31
+
32
+ const tooltipContent = classVarianceAuthority.cva(['z-50 rounded px-2 py-1 text-sm leading-none', 'select-none', 'animate-in fade-in-0 zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2', 'data-[side=left]:slide-in-from-right-2', 'data-[side=right]:slide-in-from-left-2', 'data-[side=top]:slide-in-from-bottom-2'].join(' '), {
33
+ variants: {
34
+ theme: {
35
+ light: 'bg-white text-gray-900 shadow-lg',
36
+ dark: 'bg-gray-950 text-gray-50 shadow-lg'
37
+ }
38
+ },
39
+ defaultVariants: {
40
+ theme: 'light'
41
+ }
42
+ });
43
+ const tooltipArrow = classVarianceAuthority.cva('', {
44
+ variants: {
45
+ theme: {
46
+ light: 'fill-white',
47
+ dark: 'fill-gray-950'
48
+ }
49
+ },
50
+ defaultVariants: {
51
+ theme: 'light'
52
+ }
53
+ });
54
+ const Tooltip = ({
55
+ content,
56
+ children,
57
+ side = 'top',
58
+ sideOffset = 6,
59
+ delayDuration = 300,
60
+ open,
61
+ onOpenChange,
62
+ defaultOpen
63
+ }) => {
64
+ const {
65
+ theme
66
+ } = ThemeContext.useTheme();
67
+ return jsxRuntime.jsx(TooltipPrimitive__namespace.Provider, {
68
+ delayDuration: delayDuration,
69
+ children: jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, {
70
+ open: open,
71
+ defaultOpen: defaultOpen,
72
+ onOpenChange: onOpenChange,
73
+ children: [jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, {
74
+ asChild: true,
75
+ children: /*#__PURE__*/React.isValidElement(children) ? children : jsxRuntime.jsx("span", {
76
+ children: children
77
+ })
78
+ }), jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, {
79
+ children: jsxRuntime.jsxs(TooltipPrimitive__namespace.Content, {
80
+ side: side,
81
+ sideOffset: sideOffset,
82
+ className: tooltipContent({
83
+ theme
84
+ }),
85
+ children: [content, jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, {
86
+ className: tooltipArrow({
87
+ theme
88
+ })
89
+ })]
90
+ })
91
+ })]
92
+ })
93
+ });
94
+ };
95
+
96
+ exports.Tooltip = Tooltip;
97
+ exports.default = Tooltip;
98
+ //# sourceMappingURL=index.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/tooltip/index.tsx"],"sourcesContent":["import React from 'react'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { cva } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst tooltipContent = cva(\n [\n 'z-50 rounded px-2 py-1 text-sm leading-none',\n 'select-none',\n 'animate-in fade-in-0 zoom-in-95',\n 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n ].join(' '),\n {\n variants: {\n theme: {\n light: 'bg-white text-gray-900 shadow-lg',\n dark: 'bg-gray-950 text-gray-50 shadow-lg',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\nconst tooltipArrow = cva('', {\n variants: {\n theme: {\n light: 'fill-white',\n dark: 'fill-gray-950',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\nexport interface TooltipProps {\n /** Tooltip label content */\n content: React.ReactNode\n /** Element that triggers the tooltip */\n children: React.ReactNode\n /** Which side the tooltip appears on */\n side?: 'top' | 'bottom' | 'left' | 'right'\n /** Offset from the trigger in pixels */\n sideOffset?: number\n /** Delay in ms before tooltip opens */\n delayDuration?: number\n /** Controlled open state */\n open?: boolean\n /** Called when open state changes */\n onOpenChange?: (open: boolean) => void\n /** Default open (uncontrolled) */\n defaultOpen?: boolean\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n content,\n children,\n side = 'top',\n sideOffset = 6,\n delayDuration = 300,\n open,\n onOpenChange,\n defaultOpen,\n}) => {\n const { theme } = useTheme()\n\n return (\n <TooltipPrimitive.Provider delayDuration={delayDuration}>\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n >\n <TooltipPrimitive.Trigger asChild>\n {/* Wrap in span to safely attach ref when child is a plain string/fragment */}\n {React.isValidElement(children) ? children : <span>{children}</span>}\n </TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n side={side}\n sideOffset={sideOffset}\n className={tooltipContent({ theme })}\n >\n {content}\n <TooltipPrimitive.Arrow className={tooltipArrow({ theme })} />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.Provider>\n )\n}\n\nexport default Tooltip\n"],"names":["tooltipContent","cva","join","variants","theme","light","dark","defaultVariants","tooltipArrow","Tooltip","content","children","side","sideOffset","delayDuration","open","onOpenChange","defaultOpen","useTheme","_jsx","TooltipPrimitive","Provider","_jsxs","Root","Trigger","asChild","React","isValidElement","Portal","Content","className","Arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,cAAc,GAAGC,0BAAG,CACxB,CACE,6CAA6C,EAC7C,aAAa,EACb,iCAAiC,EACjC,gGAAgG,EAChG,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,CACzC,CAACC,IAAI,CAAC,GAAG,CAAC,EACX;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,kCAAkC;AACzCC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,eAAe,EAAE;AACfH,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CACF;AAED,MAAMI,YAAY,GAAGP,0BAAG,CAAC,EAAE,EAAE;AAC3BE,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,YAAY;AACnBC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,eAAe,EAAE;AACfH,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CAAC;AAqBK,MAAMK,OAAO,GAA2BA,CAAC;EAC9CC,OAAO;EACPC,QAAQ;AACRC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,UAAU,GAAG,CAAC;AACdC,EAAAA,aAAa,GAAG,GAAG;EACnBC,IAAI;EACJC,YAAY;AACZC,EAAAA;AAAW,CACZ,KAAI;EACH,MAAM;AAAEb,IAAAA;GAAO,GAAGc,qBAAQ,EAAE;AAE5B,EAAA,OACEC,eAACC,2BAAgB,CAACC,QAAQ,EAAC;AAAAP,IAAAA,aAAa,EAAEA,aAAa;AACrDH,IAAAA,QAAA,EAAAW,eAAA,CAACF,2BAAgB,CAACG,IAAI;AACpBR,MAAAA,IAAI,EAAEA,IAAI;AACVE,MAAAA,WAAW,EAAEA,WAAW;AACxBD,MAAAA,YAAY,EAAEA,YAAY;AAAAL,MAAAA,QAAA,EAAA,CAE1BQ,eAACC,2BAAgB,CAACI,OAAO,EAAC;AAAAC,QAAAA,OAAO,EAE9B,IAAA;AAAAd,QAAAA,QAAA,eAAAe,KAAK,CAACC,cAAc,CAAChB,QAAQ,CAAC,GAAGA,QAAQ,GAAGQ,cAAA,CAAA,MAAA,EAAA;AAAAR,UAAAA,QAAA,EAAOA;SAAQ;QACnC,EAC3BQ,cAAA,CAACC,2BAAgB,CAACQ,MAAM;kBACtBN,eAAC,CAAAF,2BAAgB,CAACS,OAAO,EACvB;AAAAjB,UAAAA,IAAI,EAAEA,IAAI;AACVC,UAAAA,UAAU,EAAEA,UAAU;UACtBiB,SAAS,EAAE9B,cAAc,CAAC;AAAEI,YAAAA;WAAO,CAAC;UAAAO,QAAA,EAAA,CAEnCD,OAAO,EACRS,cAAA,CAACC,2BAAgB,CAACW,KAAK,EAAC;YAAAD,SAAS,EAAEtB,YAAY,CAAC;AAAEJ,cAAAA;aAAO;AAAC,WAAA,CAAI;;AAExC,OAAA,CAAA;KAAA;AAEF,GAAA,CAAA;AAEhC;;;;;"}
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ export interface TooltipProps {
3
+ /** Tooltip label content */
4
+ content: React.ReactNode;
5
+ /** Element that triggers the tooltip */
6
+ children: React.ReactNode;
7
+ /** Which side the tooltip appears on */
8
+ side?: 'top' | 'bottom' | 'left' | 'right';
9
+ /** Offset from the trigger in pixels */
10
+ sideOffset?: number;
11
+ /** Delay in ms before tooltip opens */
12
+ delayDuration?: number;
13
+ /** Controlled open state */
14
+ open?: boolean;
15
+ /** Called when open state changes */
16
+ onOpenChange?: (open: boolean) => void;
17
+ /** Default open (uncontrolled) */
18
+ defaultOpen?: boolean;
19
+ }
20
+ export declare const Tooltip: React.FC<TooltipProps>;
21
+ export default Tooltip;
@@ -0,0 +1,74 @@
1
+ "use client";
2
+
3
+ import { jsx, jsxs } from 'react/jsx-runtime';
4
+ import React from 'react';
5
+ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
6
+ import { cva } from 'class-variance-authority';
7
+ import { useTheme } from '../../contexts/ThemeContext.esm.js';
8
+
9
+ const tooltipContent = cva(['z-50 rounded px-2 py-1 text-sm leading-none', 'select-none', 'animate-in fade-in-0 zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2', 'data-[side=left]:slide-in-from-right-2', 'data-[side=right]:slide-in-from-left-2', 'data-[side=top]:slide-in-from-bottom-2'].join(' '), {
10
+ variants: {
11
+ theme: {
12
+ light: 'bg-white text-gray-900 shadow-lg',
13
+ dark: 'bg-gray-950 text-gray-50 shadow-lg'
14
+ }
15
+ },
16
+ defaultVariants: {
17
+ theme: 'light'
18
+ }
19
+ });
20
+ const tooltipArrow = cva('', {
21
+ variants: {
22
+ theme: {
23
+ light: 'fill-white',
24
+ dark: 'fill-gray-950'
25
+ }
26
+ },
27
+ defaultVariants: {
28
+ theme: 'light'
29
+ }
30
+ });
31
+ const Tooltip = ({
32
+ content,
33
+ children,
34
+ side = 'top',
35
+ sideOffset = 6,
36
+ delayDuration = 300,
37
+ open,
38
+ onOpenChange,
39
+ defaultOpen
40
+ }) => {
41
+ const {
42
+ theme
43
+ } = useTheme();
44
+ return jsx(TooltipPrimitive.Provider, {
45
+ delayDuration: delayDuration,
46
+ children: jsxs(TooltipPrimitive.Root, {
47
+ open: open,
48
+ defaultOpen: defaultOpen,
49
+ onOpenChange: onOpenChange,
50
+ children: [jsx(TooltipPrimitive.Trigger, {
51
+ asChild: true,
52
+ children: /*#__PURE__*/React.isValidElement(children) ? children : jsx("span", {
53
+ children: children
54
+ })
55
+ }), jsx(TooltipPrimitive.Portal, {
56
+ children: jsxs(TooltipPrimitive.Content, {
57
+ side: side,
58
+ sideOffset: sideOffset,
59
+ className: tooltipContent({
60
+ theme
61
+ }),
62
+ children: [content, jsx(TooltipPrimitive.Arrow, {
63
+ className: tooltipArrow({
64
+ theme
65
+ })
66
+ })]
67
+ })
68
+ })]
69
+ })
70
+ });
71
+ };
72
+
73
+ export { Tooltip, Tooltip as default };
74
+ //# sourceMappingURL=index.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/tooltip/index.tsx"],"sourcesContent":["import React from 'react'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { cva } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst tooltipContent = cva(\n [\n 'z-50 rounded px-2 py-1 text-sm leading-none',\n 'select-none',\n 'animate-in fade-in-0 zoom-in-95',\n 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n ].join(' '),\n {\n variants: {\n theme: {\n light: 'bg-white text-gray-900 shadow-lg',\n dark: 'bg-gray-950 text-gray-50 shadow-lg',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\nconst tooltipArrow = cva('', {\n variants: {\n theme: {\n light: 'fill-white',\n dark: 'fill-gray-950',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\nexport interface TooltipProps {\n /** Tooltip label content */\n content: React.ReactNode\n /** Element that triggers the tooltip */\n children: React.ReactNode\n /** Which side the tooltip appears on */\n side?: 'top' | 'bottom' | 'left' | 'right'\n /** Offset from the trigger in pixels */\n sideOffset?: number\n /** Delay in ms before tooltip opens */\n delayDuration?: number\n /** Controlled open state */\n open?: boolean\n /** Called when open state changes */\n onOpenChange?: (open: boolean) => void\n /** Default open (uncontrolled) */\n defaultOpen?: boolean\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n content,\n children,\n side = 'top',\n sideOffset = 6,\n delayDuration = 300,\n open,\n onOpenChange,\n defaultOpen,\n}) => {\n const { theme } = useTheme()\n\n return (\n <TooltipPrimitive.Provider delayDuration={delayDuration}>\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n >\n <TooltipPrimitive.Trigger asChild>\n {/* Wrap in span to safely attach ref when child is a plain string/fragment */}\n {React.isValidElement(children) ? children : <span>{children}</span>}\n </TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n side={side}\n sideOffset={sideOffset}\n className={tooltipContent({ theme })}\n >\n {content}\n <TooltipPrimitive.Arrow className={tooltipArrow({ theme })} />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.Provider>\n )\n}\n\nexport default Tooltip\n"],"names":["tooltipContent","cva","join","variants","theme","light","dark","defaultVariants","tooltipArrow","Tooltip","content","children","side","sideOffset","delayDuration","open","onOpenChange","defaultOpen","useTheme","_jsx","TooltipPrimitive","Provider","_jsxs","Root","Trigger","asChild","React","isValidElement","Portal","Content","className","Arrow"],"mappings":";;;;;;;;AAKA,MAAMA,cAAc,GAAGC,GAAG,CACxB,CACE,6CAA6C,EAC7C,aAAa,EACb,iCAAiC,EACjC,gGAAgG,EAChG,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,CACzC,CAACC,IAAI,CAAC,GAAG,CAAC,EACX;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,kCAAkC;AACzCC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,eAAe,EAAE;AACfH,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CACF;AAED,MAAMI,YAAY,GAAGP,GAAG,CAAC,EAAE,EAAE;AAC3BE,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,YAAY;AACnBC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,eAAe,EAAE;AACfH,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CAAC;AAqBK,MAAMK,OAAO,GAA2BA,CAAC;EAC9CC,OAAO;EACPC,QAAQ;AACRC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,UAAU,GAAG,CAAC;AACdC,EAAAA,aAAa,GAAG,GAAG;EACnBC,IAAI;EACJC,YAAY;AACZC,EAAAA;AAAW,CACZ,KAAI;EACH,MAAM;AAAEb,IAAAA;GAAO,GAAGc,QAAQ,EAAE;AAE5B,EAAA,OACEC,IAACC,gBAAgB,CAACC,QAAQ,EAAC;AAAAP,IAAAA,aAAa,EAAEA,aAAa;AACrDH,IAAAA,QAAA,EAAAW,IAAA,CAACF,gBAAgB,CAACG,IAAI;AACpBR,MAAAA,IAAI,EAAEA,IAAI;AACVE,MAAAA,WAAW,EAAEA,WAAW;AACxBD,MAAAA,YAAY,EAAEA,YAAY;AAAAL,MAAAA,QAAA,EAAA,CAE1BQ,IAACC,gBAAgB,CAACI,OAAO,EAAC;AAAAC,QAAAA,OAAO,EAE9B,IAAA;AAAAd,QAAAA,QAAA,eAAAe,KAAK,CAACC,cAAc,CAAChB,QAAQ,CAAC,GAAGA,QAAQ,GAAGQ,GAAA,CAAA,MAAA,EAAA;AAAAR,UAAAA,QAAA,EAAOA;SAAQ;QACnC,EAC3BQ,GAAA,CAACC,gBAAgB,CAACQ,MAAM;kBACtBN,IAAC,CAAAF,gBAAgB,CAACS,OAAO,EACvB;AAAAjB,UAAAA,IAAI,EAAEA,IAAI;AACVC,UAAAA,UAAU,EAAEA,UAAU;UACtBiB,SAAS,EAAE9B,cAAc,CAAC;AAAEI,YAAAA;WAAO,CAAC;UAAAO,QAAA,EAAA,CAEnCD,OAAO,EACRS,GAAA,CAACC,gBAAgB,CAACW,KAAK,EAAC;YAAAD,SAAS,EAAEtB,YAAY,CAAC;AAAEJ,cAAAA;aAAO;AAAC,WAAA,CAAI;;AAExC,OAAA,CAAA;KAAA;AAEF,GAAA,CAAA;AAEhC;;;;"}
@@ -8,6 +8,7 @@ var tslib = require('tslib');
8
8
  var jsxRuntime = require('react/jsx-runtime');
9
9
  var classVarianceAuthority = require('class-variance-authority');
10
10
  var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
11
+ var useColorScheme = require('../../hooks/useColorScheme.cjs.js');
11
12
 
12
13
  const valueCard = classVarianceAuthority.cva('flex items-center transition-all outline outline-1 outline-offset-[-1px]', {
13
14
  variants: {
@@ -136,10 +137,13 @@ const valueCard = classVarianceAuthority.cva('flex items-center transition-all o
136
137
  * </ValueCard>
137
138
  */
138
139
  const ValueCard = _a => {
140
+ var _b;
139
141
  var {
140
142
  as,
141
143
  link = '',
142
144
  colorScheme,
145
+ colorSchemeLight,
146
+ colorSchemeDark,
143
147
  size,
144
148
  clickable = false,
145
149
  loading,
@@ -147,14 +151,15 @@ const ValueCard = _a => {
147
151
  className = '',
148
152
  children
149
153
  } = _a,
150
- props = tslib.__rest(_a, ["as", "link", "colorScheme", "size", "clickable", "loading", "border", "className", "children"]);
154
+ props = tslib.__rest(_a, ["as", "link", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "clickable", "loading", "border", "className", "children"]);
151
155
  const {
152
156
  theme
153
157
  } = ThemeContext.useTheme();
158
+ const effectiveColorScheme = (_b = useColorScheme.useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
154
159
  const isClickable = Boolean(link !== '' || clickable);
155
160
  const classes = valueCard({
156
161
  theme,
157
- colorScheme,
162
+ colorScheme: effectiveColorScheme,
158
163
  size,
159
164
  clickable: isClickable,
160
165
  loading,