@vritti/quantum-ui 0.1.21 → 0.1.22
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/PhoneField.js +2 -2
- package/dist/PhoneField.js.map +1 -1
- package/dist/TextField.js +1 -1
- package/dist/TextField.js.map +1 -1
- package/dist/ThemeToggle.js +15 -3
- package/dist/ThemeToggle.js.map +1 -1
- package/dist/assets/quantum-ui.css +181 -109
- package/package.json +8 -8
package/dist/TextField.js
CHANGED
|
@@ -11,7 +11,7 @@ function Input({ className, type, ...props }) {
|
|
|
11
11
|
"data-slot": "input",
|
|
12
12
|
className: cn(
|
|
13
13
|
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
14
|
-
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[
|
|
14
|
+
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[1px]",
|
|
15
15
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
16
16
|
className
|
|
17
17
|
),
|
package/dist/TextField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","sources":["../shadcn/shadcnInput/Input.tsx","../lib/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../utils';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n return (\n <input\n type={type}\n data-slot='input'\n className={cn(\n 'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[
|
|
1
|
+
{"version":3,"file":"TextField.js","sources":["../shadcn/shadcnInput/Input.tsx","../lib/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../utils';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n return (\n <input\n type={type}\n data-slot='input'\n className={cn(\n 'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[1px]',\n 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n className\n )}\n {...props}\n />\n );\n}\n\nexport { Input };\n","import React from 'react';\nimport { Input } from '../../../shadcn/shadcnInput';\nimport { cn } from '../../../shadcn/utils';\nimport { Field, FieldDescription, FieldError, FieldLabel } from '../Field';\n\nexport interface TextFieldProps extends React.ComponentProps<'input'> {\n /**\n * Label for the field\n */\n label?: string;\n\n /**\n * Helper text to display below the field\n */\n description?: React.ReactNode;\n\n /**\n * Error message to display\n */\n error?: string;\n\n /**\n * Element to display at the start of the input (e.g., icon)\n */\n startAdornment?: React.ReactNode;\n\n /**\n * Element to display at the end of the input (e.g., icon button)\n */\n endAdornment?: React.ReactNode;\n}\n\n// TextField molecule - Input + Label composition using Field system\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n ({ label, description, error, className, id, startAdornment, endAdornment, ...props }, ref) => {\n return (\n <Field >\n {label && <FieldLabel>{label}</FieldLabel>}\n\n <div className='relative'>\n {startAdornment && (\n <div className='absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none'>\n {startAdornment}\n </div>\n )}\n <Input\n aria-invalid={!!error}\n ref={ref}\n className={cn(className, startAdornment && 'pl-10', endAdornment && 'pr-10')}\n id={id}\n {...props}\n />\n {endAdornment && (\n <div className='absolute inset-y-0 right-0 flex items-center pr-3'>{endAdornment}</div>\n )}\n </div>\n\n {description && !error && <FieldDescription>{description}</FieldDescription>}\n {error && <FieldError>{error}</FieldError>}\n </Field>\n );\n }\n);\n\nTextField.displayName = 'TextField';\n"],"names":["React"],"mappings":";;;;;AAIA,SAAS,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,OAAM,EAAkC;AAC3E,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,WAAA,EAAU,OAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,icAAA;AAAA,QACA,+EAAA;AAAA,QACA,wGAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;ACeO,MAAM,YAAYA,cAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,KAAA,EAAO,WAAA,EAAa,KAAA,EAAO,SAAA,EAAW,EAAA,EAAI,cAAA,EAAgB,YAAA,EAAc,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC7F,IAAA,4BACG,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,KAAA,oBAAS,GAAA,CAAC,cAAY,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBAE7B,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EACZ,QAAA,EAAA;AAAA,QAAA,cAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sEAAA,EACZ,QAAA,EAAA,cAAA,EACH,CAAA;AAAA,wBAEF,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,cAAA,EAAc,CAAC,CAAC,KAAA;AAAA,YAChB,GAAA;AAAA,YACA,WAAW,EAAA,CAAG,SAAA,EAAW,cAAA,IAAkB,OAAA,EAAS,gBAAgB,OAAO,CAAA;AAAA,YAC3E,EAAA;AAAA,YACC,GAAG;AAAA;AAAA,SACN;AAAA,QACC,YAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qDAAqD,QAAA,EAAA,YAAA,EAAa;AAAA,OAAA,EAErF,CAAA;AAAA,MAEC,WAAA,IAAe,CAAC,KAAA,oBAAS,GAAA,CAAC,oBAAkB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,MACxD,KAAA,oBAAS,GAAA,CAAC,UAAA,EAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,KAAA,EAC/B,CAAA;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;;;;"}
|
package/dist/ThemeToggle.js
CHANGED
|
@@ -64,11 +64,23 @@ const ThemeToggle = ({ className, size = "md" }) => {
|
|
|
64
64
|
variant: "ghost",
|
|
65
65
|
size: size === "md" ? "default" : size,
|
|
66
66
|
onClick: toggleTheme,
|
|
67
|
-
className
|
|
67
|
+
className: `text-foreground ${className}`,
|
|
68
68
|
"aria-label": `Switch to ${isDarkMode ? "light" : "dark"} theme`,
|
|
69
69
|
children: [
|
|
70
|
-
/* @__PURE__ */ jsx(
|
|
71
|
-
|
|
70
|
+
/* @__PURE__ */ jsx(
|
|
71
|
+
Sun,
|
|
72
|
+
{
|
|
73
|
+
className: `h-4 w-4 transition-all ${isDarkMode ? "scale-0 -rotate-90" : "scale-100 rotate-0"}`,
|
|
74
|
+
"aria-hidden": true
|
|
75
|
+
}
|
|
76
|
+
),
|
|
77
|
+
/* @__PURE__ */ jsx(
|
|
78
|
+
Moon,
|
|
79
|
+
{
|
|
80
|
+
className: `absolute h-4 w-4 transition-all ${isDarkMode ? "scale-100 rotate-0" : "scale-0 rotate-90"}`,
|
|
81
|
+
"aria-hidden": true
|
|
82
|
+
}
|
|
83
|
+
)
|
|
72
84
|
]
|
|
73
85
|
}
|
|
74
86
|
);
|
package/dist/ThemeToggle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeToggle.js","sources":["../node_modules/lucide-react/dist/esm/icons/moon.js","../node_modules/lucide-react/dist/esm/icons/sun.js","../lib/components/ThemeToggle/ThemeToggle.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.544.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n [\n \"path\",\n {\n d: \"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\",\n key: \"kfwtm\"\n }\n ]\n];\nconst Moon = createLucideIcon(\"moon\", __iconNode);\n\nexport { __iconNode, Moon as default };\n//# sourceMappingURL=moon.js.map\n","/**\n * @license lucide-react v0.544.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n [\"circle\", { cx: \"12\", cy: \"12\", r: \"4\", key: \"4exip2\" }],\n [\"path\", { d: \"M12 2v2\", key: \"tus03m\" }],\n [\"path\", { d: \"M12 20v2\", key: \"1lh1kg\" }],\n [\"path\", { d: \"m4.93 4.93 1.41 1.41\", key: \"149t6j\" }],\n [\"path\", { d: \"m17.66 17.66 1.41 1.41\", key: \"ptbguv\" }],\n [\"path\", { d: \"M2 12h2\", key: \"1t8f8n\" }],\n [\"path\", { d: \"M20 12h2\", key: \"1q8mjw\" }],\n [\"path\", { d: \"m6.34 17.66-1.41 1.41\", key: \"1m8zz5\" }],\n [\"path\", { d: \"m19.07 4.93-1.41 1.41\", key: \"1shlcs\" }]\n];\nconst Sun = createLucideIcon(\"sun\", __iconNode);\n\nexport { __iconNode, Sun as default };\n//# sourceMappingURL=sun.js.map\n","import React, { useLayoutEffect, useState } from 'react';\nimport { Moon, Sun } from 'lucide-react';\nimport { Button } from '../Button/Button';\n\nexport interface ThemeToggleProps {\n /**\n * Custom className for the toggle button\n */\n className?: string;\n\n /**\n * Size of the toggle button\n */\n size?: 'sm' | 'md' | 'lg';\n}\n\nexport const ThemeToggle: React.FC<ThemeToggleProps> = ({ className, size = 'md' }) => {\n const [isDarkMode, setIsDarkMode] = useState(false);\n\n useLayoutEffect(() => {\n // Check for saved theme preference or system preference\n const savedTheme = localStorage.getItem('theme');\n const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n const shouldUseDark = savedTheme === 'dark' || (!savedTheme && systemPrefersDark);\n\n setIsDarkMode(shouldUseDark);\n document.documentElement.classList.toggle('dark', shouldUseDark);\n }, []);\n\n const toggleTheme = () => {\n const newDarkMode = !isDarkMode;\n setIsDarkMode(newDarkMode);\n\n // Update DOM and localStorage\n document.documentElement.classList.toggle('dark', newDarkMode);\n localStorage.setItem('theme', newDarkMode ? 'dark' : 'light');\n };\n\n return (\n <Button\n variant='ghost'\n size={size === 'md' ? 'default' : size}\n onClick={toggleTheme}\n className={className}\n aria-label={`Switch to ${isDarkMode ? 'light' : 'dark'} theme`}\n >\n <Sun
|
|
1
|
+
{"version":3,"file":"ThemeToggle.js","sources":["../node_modules/lucide-react/dist/esm/icons/moon.js","../node_modules/lucide-react/dist/esm/icons/sun.js","../lib/components/ThemeToggle/ThemeToggle.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.544.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n [\n \"path\",\n {\n d: \"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\",\n key: \"kfwtm\"\n }\n ]\n];\nconst Moon = createLucideIcon(\"moon\", __iconNode);\n\nexport { __iconNode, Moon as default };\n//# sourceMappingURL=moon.js.map\n","/**\n * @license lucide-react v0.544.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n [\"circle\", { cx: \"12\", cy: \"12\", r: \"4\", key: \"4exip2\" }],\n [\"path\", { d: \"M12 2v2\", key: \"tus03m\" }],\n [\"path\", { d: \"M12 20v2\", key: \"1lh1kg\" }],\n [\"path\", { d: \"m4.93 4.93 1.41 1.41\", key: \"149t6j\" }],\n [\"path\", { d: \"m17.66 17.66 1.41 1.41\", key: \"ptbguv\" }],\n [\"path\", { d: \"M2 12h2\", key: \"1t8f8n\" }],\n [\"path\", { d: \"M20 12h2\", key: \"1q8mjw\" }],\n [\"path\", { d: \"m6.34 17.66-1.41 1.41\", key: \"1m8zz5\" }],\n [\"path\", { d: \"m19.07 4.93-1.41 1.41\", key: \"1shlcs\" }]\n];\nconst Sun = createLucideIcon(\"sun\", __iconNode);\n\nexport { __iconNode, Sun as default };\n//# sourceMappingURL=sun.js.map\n","import React, { useLayoutEffect, useState } from 'react';\nimport { Moon, Sun } from 'lucide-react';\nimport { Button } from '../Button/Button';\n\nexport interface ThemeToggleProps {\n /**\n * Custom className for the toggle button\n */\n className?: string;\n\n /**\n * Size of the toggle button\n */\n size?: 'sm' | 'md' | 'lg';\n}\n\nexport const ThemeToggle: React.FC<ThemeToggleProps> = ({ className, size = 'md' }) => {\n const [isDarkMode, setIsDarkMode] = useState(false);\n\n useLayoutEffect(() => {\n // Check for saved theme preference or system preference\n const savedTheme = localStorage.getItem('theme');\n const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n const shouldUseDark = savedTheme === 'dark' || (!savedTheme && systemPrefersDark);\n\n setIsDarkMode(shouldUseDark);\n document.documentElement.classList.toggle('dark', shouldUseDark);\n }, []);\n\n const toggleTheme = () => {\n const newDarkMode = !isDarkMode;\n setIsDarkMode(newDarkMode);\n\n // Update DOM and localStorage\n document.documentElement.classList.toggle('dark', newDarkMode);\n localStorage.setItem('theme', newDarkMode ? 'dark' : 'light');\n };\n\n return (\n <Button\n variant='ghost'\n size={size === 'md' ? 'default' : size}\n onClick={toggleTheme}\n className={`text-foreground ${className}`}\n aria-label={`Switch to ${isDarkMode ? 'light' : 'dark'} theme`}\n >\n <Sun\n className={`h-4 w-4 transition-all ${isDarkMode ? 'scale-0 -rotate-90' : 'scale-100 rotate-0'}`}\n aria-hidden\n />\n <Moon\n className={`absolute h-4 w-4 transition-all ${isDarkMode ? 'scale-100 rotate-0' : 'scale-0 rotate-90'}`}\n aria-hidden\n />\n </Button>\n );\n};"],"names":["__iconNode"],"mappings":"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","x_google_ignoreList":[0,1]}
|
|
@@ -131,128 +131,200 @@
|
|
|
131
131
|
opacity: 1;
|
|
132
132
|
color: var(--PhoneInputCountrySelectArrow-color--focus);
|
|
133
133
|
}/**
|
|
134
|
-
*
|
|
134
|
+
* quantum-ui CSS - Theme Variables and Component Styles
|
|
135
135
|
*
|
|
136
|
-
* This file contains
|
|
137
|
-
*
|
|
138
|
-
* 2. PhoneInput component overrides - for h-9 container sizing
|
|
136
|
+
* This file contains only CSS custom properties and component-specific styles.
|
|
137
|
+
* The consuming application should import Tailwind CSS separately.
|
|
139
138
|
*
|
|
140
|
-
*
|
|
141
|
-
*
|
|
139
|
+
* Usage in consuming app:
|
|
140
|
+
* @import 'tailwindcss';
|
|
141
|
+
* @import '@vritti/quantum-ui/index.css';
|
|
142
142
|
*/
|
|
143
|
-
|
|
144
143
|
:root {
|
|
145
|
-
--background: oklch(1 0 0);
|
|
146
|
-
--foreground: oklch(0.
|
|
147
|
-
--card: oklch(1 0 0);
|
|
148
|
-
--card-foreground: oklch(0.
|
|
149
|
-
--popover: oklch(1 0 0);
|
|
150
|
-
--popover-foreground: oklch(0.
|
|
151
|
-
--primary: oklch(0.
|
|
152
|
-
--primary-foreground: oklch(1 0 0);
|
|
153
|
-
--secondary: oklch(0.
|
|
154
|
-
--secondary-foreground: oklch(0.
|
|
155
|
-
--muted: oklch(0.
|
|
156
|
-
--muted-foreground: oklch(0.
|
|
157
|
-
--accent: oklch(0.
|
|
158
|
-
--accent-foreground: oklch(0.
|
|
159
|
-
--destructive: oklch(0.
|
|
160
|
-
--destructive-foreground: oklch(1 0 0);
|
|
161
|
-
--
|
|
162
|
-
--
|
|
163
|
-
--
|
|
164
|
-
--
|
|
165
|
-
--border: oklch(0.
|
|
166
|
-
--input: oklch(0.
|
|
167
|
-
--ring: oklch(0.
|
|
168
|
-
--chart-1: oklch(0.
|
|
169
|
-
--chart-2: oklch(0.
|
|
170
|
-
--chart-3: oklch(0.
|
|
171
|
-
--chart-4: oklch(0.
|
|
172
|
-
--chart-5: oklch(0.
|
|
173
|
-
--sidebar: oklch(0.
|
|
174
|
-
--sidebar-foreground: oklch(0.
|
|
175
|
-
--sidebar-primary: oklch(0.
|
|
176
|
-
--sidebar-primary-foreground: oklch(1 0 0);
|
|
177
|
-
--sidebar-accent: oklch(0.
|
|
178
|
-
--sidebar-accent-foreground: oklch(0.
|
|
179
|
-
--sidebar-border: oklch(0.
|
|
180
|
-
--sidebar-ring: oklch(0.
|
|
181
|
-
--font-sans:
|
|
182
|
-
|
|
183
|
-
--font-
|
|
184
|
-
--
|
|
185
|
-
--
|
|
186
|
-
--shadow-
|
|
187
|
-
--shadow-
|
|
188
|
-
--shadow-
|
|
189
|
-
--shadow: 0
|
|
190
|
-
--shadow-
|
|
191
|
-
--shadow-
|
|
192
|
-
--shadow-
|
|
193
|
-
--shadow-
|
|
194
|
-
--
|
|
144
|
+
--background: oklch(1.0000 0 0);
|
|
145
|
+
--foreground: oklch(0.2302 0.0547 256.1829);
|
|
146
|
+
--card: oklch(1.0000 0 0);
|
|
147
|
+
--card-foreground: oklch(0.2302 0.0547 256.1829);
|
|
148
|
+
--popover: oklch(1.0000 0 0);
|
|
149
|
+
--popover-foreground: oklch(0.2302 0.0547 256.1829);
|
|
150
|
+
--primary: oklch(0.5789 0.1833 256.2496);
|
|
151
|
+
--primary-foreground: oklch(1.0000 0 0);
|
|
152
|
+
--secondary: oklch(0.9732 0.0131 251.5574);
|
|
153
|
+
--secondary-foreground: oklch(0.5789 0.1833 256.2496);
|
|
154
|
+
--muted: oklch(0.9802 0.0068 247.8944);
|
|
155
|
+
--muted-foreground: oklch(0.5435 0.0511 251.7257);
|
|
156
|
+
--accent: oklch(0.9512 0.0194 252.8790);
|
|
157
|
+
--accent-foreground: oklch(0.5789 0.1833 256.2496);
|
|
158
|
+
--destructive: oklch(0.5771 0.2152 27.3250);
|
|
159
|
+
--destructive-foreground: oklch(1.0000 0 0);
|
|
160
|
+
--warning: oklch(0.7500 0.1500 85);
|
|
161
|
+
--warning-foreground: oklch(0.2302 0.0547 256.1829);
|
|
162
|
+
--success: oklch(0.6500 0.1500 145);
|
|
163
|
+
--success-foreground: oklch(1.0000 0 0);
|
|
164
|
+
--border: oklch(0.9467 0.0207 248.0465);
|
|
165
|
+
--input: oklch(0.9467 0.0207 248.0465);
|
|
166
|
+
--ring: oklch(0.5789 0.1833 256.2496);
|
|
167
|
+
--chart-1: oklch(0.5789 0.1833 256.2496);
|
|
168
|
+
--chart-2: oklch(0.6856 0.1417 256.6754);
|
|
169
|
+
--chart-3: oklch(0.7729 0.1535 163.2231);
|
|
170
|
+
--chart-4: oklch(0.8369 0.1644 84.4286);
|
|
171
|
+
--chart-5: oklch(0.6368 0.2078 25.3313);
|
|
172
|
+
--sidebar: oklch(0.2302 0.0547 256.1829);
|
|
173
|
+
--sidebar-foreground: oklch(0.9732 0.0131 251.5574);
|
|
174
|
+
--sidebar-primary: oklch(0.5789 0.1833 256.2496);
|
|
175
|
+
--sidebar-primary-foreground: oklch(1.0000 0 0);
|
|
176
|
+
--sidebar-accent: oklch(0.4154 0.0726 251.2023);
|
|
177
|
+
--sidebar-accent-foreground: oklch(0.9732 0.0131 251.5574);
|
|
178
|
+
--sidebar-border: oklch(0.3397 0.0721 253.1046);
|
|
179
|
+
--sidebar-ring: oklch(0.5789 0.1833 256.2496);
|
|
180
|
+
--font-sans: 'IBM Plex Sans', sans-serif;
|
|
181
|
+
--font-serif: 'Playfair Display', serif;
|
|
182
|
+
--font-mono: 'JetBrains Mono', monospace;
|
|
183
|
+
--radius: 0.75rem;
|
|
184
|
+
--shadow-x: 0rem;
|
|
185
|
+
--shadow-y: 0.75rem;
|
|
186
|
+
--shadow-blur: 1.5rem;
|
|
187
|
+
--shadow-spread: 0.25rem;
|
|
188
|
+
--shadow-opacity: 0.08;
|
|
189
|
+
--shadow-color: #0A1D36;
|
|
190
|
+
--shadow-2xs: 0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.04);
|
|
191
|
+
--shadow-xs: 0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.04);
|
|
192
|
+
--shadow-sm: 0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08), 0rem 1px 2px -0.75px hsl(214.0909 68.7500% 12.5490% / 0.08);
|
|
193
|
+
--shadow: 0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08), 0rem 1px 2px -0.75px hsl(214.0909 68.7500% 12.5490% / 0.08);
|
|
194
|
+
--shadow-md: 0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08), 0rem 2px 4px -0.75px hsl(214.0909 68.7500% 12.5490% / 0.08);
|
|
195
|
+
--shadow-lg: 0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08), 0rem 4px 6px -0.75px hsl(214.0909 68.7500% 12.5490% / 0.08);
|
|
196
|
+
--shadow-xl: 0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.08), 0rem 8px 10px -0.75px hsl(214.0909 68.7500% 12.5490% / 0.08);
|
|
197
|
+
--shadow-2xl: 0rem 0.75rem 1.5rem 0.25rem hsl(214.0909 68.7500% 12.5490% / 0.20);
|
|
198
|
+
--tracking-normal: 0.01em;
|
|
195
199
|
--spacing: 0.25rem;
|
|
196
200
|
}
|
|
197
|
-
|
|
198
201
|
.dark {
|
|
199
|
-
--background: oklch(0.
|
|
200
|
-
--foreground: oklch(0.
|
|
201
|
-
--card: oklch(0.
|
|
202
|
-
--card-foreground: oklch(0.
|
|
203
|
-
--popover: oklch(0.
|
|
204
|
-
--popover-foreground: oklch(0.
|
|
205
|
-
--primary: oklch(0.
|
|
206
|
-
--primary-foreground: oklch(
|
|
207
|
-
--secondary: oklch(0.
|
|
208
|
-
--secondary-foreground: oklch(0.
|
|
209
|
-
--muted: oklch(0.
|
|
210
|
-
--muted-foreground: oklch(0.
|
|
211
|
-
--accent: oklch(0.
|
|
212
|
-
--accent-foreground: oklch(0.
|
|
213
|
-
--destructive: oklch(0.
|
|
214
|
-
--destructive-foreground: oklch(1 0 0);
|
|
215
|
-
--
|
|
216
|
-
--
|
|
217
|
-
--
|
|
218
|
-
--
|
|
219
|
-
--border: oklch(0.
|
|
220
|
-
--input: oklch(0.
|
|
221
|
-
--ring: oklch(0.
|
|
222
|
-
--chart-1: oklch(0.
|
|
223
|
-
--chart-2: oklch(0.
|
|
224
|
-
--chart-3: oklch(0.
|
|
225
|
-
--chart-4: oklch(0.
|
|
226
|
-
--chart-5: oklch(0.
|
|
227
|
-
--sidebar: oklch(0.
|
|
228
|
-
--sidebar-foreground: oklch(0.
|
|
229
|
-
--sidebar-primary: oklch(0.
|
|
230
|
-
--sidebar-primary-foreground: oklch(
|
|
231
|
-
--sidebar-accent: oklch(0.
|
|
232
|
-
--sidebar-accent-foreground: oklch(0.
|
|
233
|
-
--sidebar-border: oklch(0.
|
|
234
|
-
--sidebar-ring: oklch(0.
|
|
235
|
-
--font-sans:
|
|
236
|
-
|
|
237
|
-
--font-
|
|
238
|
-
--
|
|
239
|
-
--
|
|
240
|
-
--shadow-
|
|
241
|
-
--shadow-
|
|
242
|
-
--shadow-
|
|
243
|
-
--shadow: 0
|
|
244
|
-
--shadow-
|
|
245
|
-
--shadow-
|
|
246
|
-
--shadow-
|
|
247
|
-
--shadow-
|
|
202
|
+
--background: oklch(0.1591 0 0);
|
|
203
|
+
--foreground: oklch(0.9653 0.0069 247.8959);
|
|
204
|
+
--card: oklch(0.2178 0 0);
|
|
205
|
+
--card-foreground: oklch(0.9653 0.0069 247.8959);
|
|
206
|
+
--popover: oklch(0.1591 0 0);
|
|
207
|
+
--popover-foreground: oklch(0.9653 0.0069 247.8959);
|
|
208
|
+
--primary: oklch(0.5789 0.1833 256.2496);
|
|
209
|
+
--primary-foreground: oklch(0.9653 0.0069 247.8959);
|
|
210
|
+
--secondary: oklch(0.2931 0 0);
|
|
211
|
+
--secondary-foreground: oklch(0.8765 0.0112 225.9985);
|
|
212
|
+
--muted: oklch(0.2178 0 0);
|
|
213
|
+
--muted-foreground: oklch(0.7064 0.0268 229.3065);
|
|
214
|
+
--accent: oklch(0.2645 0 0);
|
|
215
|
+
--accent-foreground: oklch(0.5789 0.1833 256.2496);
|
|
216
|
+
--destructive: oklch(0.6539 0.1926 25.1437);
|
|
217
|
+
--destructive-foreground: oklch(1.0000 0 0);
|
|
218
|
+
--warning: oklch(0.8000 0.1600 90);
|
|
219
|
+
--warning-foreground: oklch(0.1591 0 0);
|
|
220
|
+
--success: oklch(0.7000 0.1600 150);
|
|
221
|
+
--success-foreground: oklch(0.1591 0 0);
|
|
222
|
+
--border: oklch(0.2931 0 0);
|
|
223
|
+
--input: oklch(0.2931 0 0);
|
|
224
|
+
--ring: oklch(0.5789 0.1833 256.2496);
|
|
225
|
+
--chart-1: oklch(0.5789 0.1833 256.2496);
|
|
226
|
+
--chart-2: oklch(0.6856 0.1417 256.6754);
|
|
227
|
+
--chart-3: oklch(0.6731 0.1624 144.2083);
|
|
228
|
+
--chart-4: oklch(0.8442 0.1722 84.9338);
|
|
229
|
+
--chart-5: oklch(0.6083 0.2090 27.0276);
|
|
230
|
+
--sidebar: oklch(0.1591 0 0);
|
|
231
|
+
--sidebar-foreground: oklch(0.9653 0.0069 247.8959);
|
|
232
|
+
--sidebar-primary: oklch(0.5789 0.1833 256.2496);
|
|
233
|
+
--sidebar-primary-foreground: oklch(0.9653 0.0069 247.8959);
|
|
234
|
+
--sidebar-accent: oklch(0.2931 0 0);
|
|
235
|
+
--sidebar-accent-foreground: oklch(0.9653 0.0069 247.8959);
|
|
236
|
+
--sidebar-border: oklch(0.2178 0 0);
|
|
237
|
+
--sidebar-ring: oklch(0.5789 0.1833 256.2496);
|
|
238
|
+
--font-sans: 'IBM Plex Sans', sans-serif;
|
|
239
|
+
--font-serif: 'Playfair Display', serif;
|
|
240
|
+
--font-mono: 'JetBrains Mono', monospace;
|
|
241
|
+
--radius: 0.75rem;
|
|
242
|
+
--shadow-x: 0rem;
|
|
243
|
+
--shadow-y: 0.5rem;
|
|
244
|
+
--shadow-blur: 1.25rem;
|
|
245
|
+
--shadow-spread: 0.25rem;
|
|
246
|
+
--shadow-opacity: 0.35;
|
|
247
|
+
--shadow-color: #000000;
|
|
248
|
+
--shadow-2xs: 0rem 0.5rem 1.25rem 0.25rem hsl(0 0% 0% / 0.17);
|
|
249
|
+
--shadow-xs: 0rem 0.5rem 1.25rem 0.25rem hsl(0 0% 0% / 0.17);
|
|
250
|
+
--shadow-sm: 0rem 0.5rem 1.25rem 0.25rem hsl(0 0% 0% / 0.35), 0rem 1px 2px -0.75px hsl(0 0% 0% / 0.35);
|
|
251
|
+
--shadow: 0rem 0.5rem 1.25rem 0.25rem hsl(0 0% 0% / 0.35), 0rem 1px 2px -0.75px hsl(0 0% 0% / 0.35);
|
|
252
|
+
--shadow-md: 0rem 0.5rem 1.25rem 0.25rem hsl(0 0% 0% / 0.35), 0rem 2px 4px -0.75px hsl(0 0% 0% / 0.35);
|
|
253
|
+
--shadow-lg: 0rem 0.5rem 1.25rem 0.25rem hsl(0 0% 0% / 0.35), 0rem 4px 6px -0.75px hsl(0 0% 0% / 0.35);
|
|
254
|
+
--shadow-xl: 0rem 0.5rem 1.25rem 0.25rem hsl(0 0% 0% / 0.35), 0rem 8px 10px -0.75px hsl(0 0% 0% / 0.35);
|
|
255
|
+
--shadow-2xl: 0rem 0.5rem 1.25rem 0.25rem hsl(0 0% 0% / 0.88);
|
|
248
256
|
}
|
|
257
|
+
@theme inline {
|
|
258
|
+
--color-background: var(--background);
|
|
259
|
+
--color-foreground: var(--foreground);
|
|
260
|
+
--color-card: var(--card);
|
|
261
|
+
--color-card-foreground: var(--card-foreground);
|
|
262
|
+
--color-popover: var(--popover);
|
|
263
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
264
|
+
--color-primary: var(--primary);
|
|
265
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
266
|
+
--color-secondary: var(--secondary);
|
|
267
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
268
|
+
--color-muted: var(--muted);
|
|
269
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
270
|
+
--color-accent: var(--accent);
|
|
271
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
272
|
+
--color-destructive: var(--destructive);
|
|
273
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
274
|
+
--color-warning: var(--warning);
|
|
275
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
276
|
+
--color-success: var(--success);
|
|
277
|
+
--color-success-foreground: var(--success-foreground);
|
|
278
|
+
--color-border: var(--border);
|
|
279
|
+
--color-input: var(--input);
|
|
280
|
+
--color-ring: var(--ring);
|
|
281
|
+
--color-chart-1: var(--chart-1);
|
|
282
|
+
--color-chart-2: var(--chart-2);
|
|
283
|
+
--color-chart-3: var(--chart-3);
|
|
284
|
+
--color-chart-4: var(--chart-4);
|
|
285
|
+
--color-chart-5: var(--chart-5);
|
|
286
|
+
--color-sidebar: var(--sidebar);
|
|
287
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
288
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
289
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
290
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
291
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
292
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
293
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
294
|
+
|
|
295
|
+
--font-sans: var(--font-sans);
|
|
296
|
+
--font-mono: var(--font-mono);
|
|
297
|
+
--font-serif: var(--font-serif);
|
|
298
|
+
|
|
299
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
300
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
301
|
+
--radius-lg: var(--radius);
|
|
302
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
303
|
+
|
|
304
|
+
--shadow-2xs: var(--shadow-2xs);
|
|
305
|
+
--shadow-xs: var(--shadow-xs);
|
|
306
|
+
--shadow-sm: var(--shadow-sm);
|
|
307
|
+
--shadow: var(--shadow);
|
|
308
|
+
--shadow-md: var(--shadow-md);
|
|
309
|
+
--shadow-lg: var(--shadow-lg);
|
|
310
|
+
--shadow-xl: var(--shadow-xl);
|
|
311
|
+
--shadow-2xl: var(--shadow-2xl);
|
|
249
312
|
|
|
313
|
+
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
|
|
314
|
+
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
|
|
315
|
+
--tracking-normal: var(--tracking-normal);
|
|
316
|
+
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
|
|
317
|
+
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
|
|
318
|
+
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
|
|
319
|
+
}
|
|
320
|
+
body {
|
|
321
|
+
letter-spacing: var(--tracking-normal);
|
|
322
|
+
}
|
|
250
323
|
/* PhoneInput flag sizing overrides for h-9 (36px) container */
|
|
251
324
|
.PhoneInput {
|
|
252
325
|
--PhoneInputCountryFlag-height: 1rem;
|
|
253
326
|
}
|
|
254
|
-
|
|
255
327
|
.PhoneInputCountryIcon {
|
|
256
328
|
max-width: 1rem;
|
|
257
329
|
max-height: 1rem;
|
|
258
|
-
}
|
|
330
|
+
}
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
8
|
-
"version": "0.1.
|
|
8
|
+
"version": "0.1.22",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"sideEffects": false,
|
|
11
11
|
"repository": {
|
|
@@ -120,9 +120,9 @@
|
|
|
120
120
|
},
|
|
121
121
|
"devDependencies": {
|
|
122
122
|
"@eslint/js": "^9.25.0",
|
|
123
|
-
"@storybook/addon-docs": "10.0.
|
|
124
|
-
"@storybook/addon-themes": "^10.0.
|
|
125
|
-
"@storybook/react-vite": "10.0.
|
|
123
|
+
"@storybook/addon-docs": "10.0.8",
|
|
124
|
+
"@storybook/addon-themes": "^10.0.8",
|
|
125
|
+
"@storybook/react-vite": "10.0.8",
|
|
126
126
|
"@tailwindcss/postcss": "^4.1.13",
|
|
127
127
|
"@types/node": "^22.18.1",
|
|
128
128
|
"@types/react": "^19.1.2",
|
|
@@ -132,14 +132,14 @@
|
|
|
132
132
|
"eslint": "^9.25.0",
|
|
133
133
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
134
134
|
"eslint-plugin-react-refresh": "^0.4.19",
|
|
135
|
-
"eslint-plugin-storybook": "10.0.
|
|
135
|
+
"eslint-plugin-storybook": "10.0.8",
|
|
136
136
|
"glob": "^11.0.2",
|
|
137
137
|
"globals": "^16.0.0",
|
|
138
138
|
"react": "^19.1.0",
|
|
139
139
|
"react-dom": "^19.1.0",
|
|
140
140
|
"react-router-dom": "^7.9.4",
|
|
141
|
-
"storybook": "10.0.
|
|
142
|
-
"tailwindcss": "^4.1.
|
|
141
|
+
"storybook": "10.0.8",
|
|
142
|
+
"tailwindcss": "^4.1.17",
|
|
143
143
|
"tw-animate-css": "^1.3.8",
|
|
144
144
|
"typescript": "~5.8.3",
|
|
145
145
|
"typescript-eslint": "^8.30.1",
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
"@radix-ui/react-select": "^2.2.6",
|
|
155
155
|
"@radix-ui/react-separator": "^1.1.8",
|
|
156
156
|
"@radix-ui/react-slot": "^1.2.3",
|
|
157
|
-
"@tailwindcss/vite": "^4.1.
|
|
157
|
+
"@tailwindcss/vite": "^4.1.17",
|
|
158
158
|
"axios": "^1.12.2",
|
|
159
159
|
"class-variance-authority": "^0.7.1",
|
|
160
160
|
"clsx": "^2.1.1",
|