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.
- package/dist/react/components/badge/index.cjs.js +8 -3
- package/dist/react/components/badge/index.cjs.js.map +1 -1
- package/dist/react/components/badge/index.d.ts +10 -1
- package/dist/react/components/badge/index.esm.js +8 -3
- package/dist/react/components/badge/index.esm.js.map +1 -1
- package/dist/react/components/button/index.cjs.js +7 -2
- package/dist/react/components/button/index.cjs.js.map +1 -1
- package/dist/react/components/button/index.d.ts +4 -0
- package/dist/react/components/button/index.esm.js +7 -2
- package/dist/react/components/button/index.esm.js.map +1 -1
- package/dist/react/components/copyButton/index.cjs.js +7 -7
- package/dist/react/components/copyButton/index.cjs.js.map +1 -1
- package/dist/react/components/copyButton/index.esm.js +6 -6
- package/dist/react/components/copyButton/index.esm.js.map +1 -1
- package/dist/react/components/heading/index.cjs.js +7 -2
- package/dist/react/components/heading/index.cjs.js.map +1 -1
- package/dist/react/components/heading/index.d.ts +4 -1
- package/dist/react/components/heading/index.esm.js +7 -2
- package/dist/react/components/heading/index.esm.js.map +1 -1
- package/dist/react/components/index.cjs.js +47 -43
- package/dist/react/components/index.cjs.js.map +1 -1
- package/dist/react/components/index.d.ts +2 -0
- package/dist/react/components/index.esm.js +2 -0
- package/dist/react/components/index.esm.js.map +1 -1
- package/dist/react/components/input/index.cjs.js +7 -2
- package/dist/react/components/input/index.cjs.js.map +1 -1
- package/dist/react/components/input/index.d.ts +4 -0
- package/dist/react/components/input/index.esm.js +7 -2
- package/dist/react/components/input/index.esm.js.map +1 -1
- package/dist/react/components/overlayMenu/index.cjs.js +69 -25
- package/dist/react/components/overlayMenu/index.cjs.js.map +1 -1
- package/dist/react/components/overlayMenu/index.d.ts +9 -10
- package/dist/react/components/overlayMenu/index.esm.js +69 -25
- package/dist/react/components/overlayMenu/index.esm.js.map +1 -1
- package/dist/react/components/overlaySelect/index.cjs.js +7 -2
- package/dist/react/components/overlaySelect/index.cjs.js.map +1 -1
- package/dist/react/components/overlaySelect/index.d.ts +4 -0
- package/dist/react/components/overlaySelect/index.esm.js +7 -2
- package/dist/react/components/overlaySelect/index.esm.js.map +1 -1
- package/dist/react/components/popover/index.cjs.js +116 -0
- package/dist/react/components/popover/index.cjs.js.map +1 -0
- package/dist/react/components/popover/index.d.ts +23 -0
- package/dist/react/components/popover/index.esm.js +92 -0
- package/dist/react/components/popover/index.esm.js.map +1 -0
- package/dist/react/components/progressStepBar/index.cjs.js +7 -2
- package/dist/react/components/progressStepBar/index.cjs.js.map +1 -1
- package/dist/react/components/progressStepBar/index.d.ts +5 -2
- package/dist/react/components/progressStepBar/index.esm.js +7 -2
- package/dist/react/components/progressStepBar/index.esm.js.map +1 -1
- package/dist/react/components/select/index.cjs.js +7 -2
- package/dist/react/components/select/index.cjs.js.map +1 -1
- package/dist/react/components/select/index.d.ts +4 -0
- package/dist/react/components/select/index.esm.js +7 -2
- package/dist/react/components/select/index.esm.js.map +1 -1
- package/dist/react/components/text/index.cjs.js +8 -2
- package/dist/react/components/text/index.cjs.js.map +1 -1
- package/dist/react/components/text/index.d.ts +5 -0
- package/dist/react/components/text/index.esm.js +8 -2
- package/dist/react/components/text/index.esm.js.map +1 -1
- package/dist/react/components/textarea/index.cjs.js +9 -5
- package/dist/react/components/textarea/index.cjs.js.map +1 -1
- package/dist/react/components/textarea/index.d.ts +4 -0
- package/dist/react/components/textarea/index.esm.js +9 -5
- package/dist/react/components/textarea/index.esm.js.map +1 -1
- package/dist/react/components/tooltip/index.cjs.js +98 -0
- package/dist/react/components/tooltip/index.cjs.js.map +1 -0
- package/dist/react/components/tooltip/index.d.ts +21 -0
- package/dist/react/components/tooltip/index.esm.js +74 -0
- package/dist/react/components/tooltip/index.esm.js.map +1 -0
- package/dist/react/components/valueCard/index.cjs.js +7 -2
- package/dist/react/components/valueCard/index.cjs.js.map +1 -1
- package/dist/react/components/valueCard/index.d.ts +4 -0
- package/dist/react/components/valueCard/index.esm.js +7 -2
- package/dist/react/components/valueCard/index.esm.js.map +1 -1
- package/dist/react/hooks/index.d.ts +1 -0
- package/dist/react/hooks/useColorScheme.cjs.js +25 -0
- package/dist/react/hooks/useColorScheme.cjs.js.map +1 -0
- package/dist/react/hooks/useColorScheme.d.ts +9 -0
- package/dist/react/hooks/useColorScheme.esm.js +23 -0
- package/dist/react/hooks/useColorScheme.esm.js.map +1 -0
- package/dist/react/index.cjs.js +47 -43
- package/dist/react/index.cjs.js.map +1 -1
- package/dist/react/index.d.ts +2 -0
- package/dist/react/index.esm.js +2 -0
- package/dist/react/index.esm.js.map +1 -1
- package/dist/react-native/components/badge/index.d.ts +12 -0
- package/dist/react-native/components/button/index.d.ts +6 -0
- package/dist/react-native/components/input/index.d.ts +6 -0
- package/dist/react-native/components/valueCard/index.d.ts +4 -0
- package/dist/react-native/index.cjs.js +39 -13
- package/dist/react-native/index.cjs.js.map +1 -1
- package/dist/react-native/index.esm.js +39 -14
- package/dist/react-native/index.esm.js.map +1 -1
- package/dist/react-native/utils/index.d.ts +1 -0
- package/dist/react-native/utils/resolveColorScheme.d.ts +1 -0
- package/dist/styles.css +1 -1
- 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":"
|
|
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
|
|
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
|
|
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 =
|
|
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
|
|
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
|
|
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 =
|
|
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":"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"}
|
|
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,
|