@adamosuiteservices/ui 2.10.12 → 2.10.13
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/accordion-rounded.cjs +7 -7
- package/dist/accordion-rounded.js +1 -1
- package/dist/colors.css +1 -1
- package/dist/styles.css +1 -1
- package/dist/table.cjs +5 -5
- package/dist/table.js +2 -2
- package/dist/tailwind-colors.css +1 -1
- package/dist/tailwind-theme.css +1 -1
- package/dist/themes.css +1 -1
- package/dist/tooltip.cjs +5 -4
- package/dist/tooltip.js +4 -3
- package/dist/types/theme.type.d.ts +1 -1
- package/docs/components/ui/accordion-rounded.md +7 -7
- package/docs/components/ui/accordion.md +2 -2
- package/docs/components/ui/alert.md +3 -3
- package/docs/components/ui/avatar.md +10 -10
- package/docs/components/ui/badge.md +10 -53
- package/docs/components/ui/button.md +1 -1
- package/docs/components/ui/calendar.md +1 -1
- package/docs/components/ui/combobox.md +7 -7
- package/docs/components/ui/hover-card.md +1 -1
- package/docs/components/ui/icon.md +12 -12
- package/docs/components/ui/input-group.md +9 -14
- package/docs/components/ui/popover.md +2 -2
- package/docs/components/ui/spinner.md +1 -1
- package/docs/components/ui/table.md +1 -1
- package/docs/components/ui/tooltip.md +3 -3
- package/docs/components/ui/typography.md +1 -1
- package/package.json +1 -1
package/dist/table.cjs
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./jsx-runtime-BB_1_6y_.cjs"),d=require("./index-DoxiiusW.cjs");require("react");function o({className:e,...a}){return t.jsxRuntimeExports.jsx("div",{"data-slot":"table-container",className:`
|
|
2
2
|
adm:relative adm:w-full adm:overflow-x-auto adm:rounded-xl adm:border
|
|
3
|
-
`,children:t.jsxRuntimeExports.jsx("table",{"data-slot":"table",className:d.cn("adm:w-full adm:caption-bottom adm:text-sm",e),...a})})}function r({className:e,...a}){return t.jsxRuntimeExports.jsx("thead",{"data-slot":"table-header",className:d.cn("adm:[&_tr]:border-b",e),...a})}function l({className:e,...a}){return t.jsxRuntimeExports.jsx("tbody",{"data-slot":"table-body",className:d.cn("adm:[&_tr:last-child]:border-0",e),...a})}function
|
|
3
|
+
`,children:t.jsxRuntimeExports.jsx("table",{"data-slot":"table",className:d.cn("adm:w-full adm:caption-bottom adm:text-sm",e),...a})})}function r({className:e,...a}){return t.jsxRuntimeExports.jsx("thead",{"data-slot":"table-header",className:d.cn("adm:[&_tr]:border-b",e),...a})}function l({className:e,...a}){return t.jsxRuntimeExports.jsx("tbody",{"data-slot":"table-body",className:d.cn("adm:[&_tr:last-child]:border-0",e),...a})}function m({className:e,...a}){return t.jsxRuntimeExports.jsx("tfoot",{"data-slot":"table-footer",className:d.cn(`
|
|
4
4
|
adm:border-t adm:bg-muted/50 adm:font-medium
|
|
5
5
|
adm:[&>tr]:last:border-b-0
|
|
6
|
-
`,e),...a})}function
|
|
7
|
-
adm:border-b adm:border-
|
|
6
|
+
`,e),...a})}function s({className:e,...a}){return t.jsxRuntimeExports.jsx("tr",{"data-slot":"table-row",className:d.cn(`
|
|
7
|
+
adm:border-b adm:border-border adm:transition-colors
|
|
8
8
|
adm:hover:bg-muted/50
|
|
9
9
|
adm:data-[state=selected]:bg-muted
|
|
10
10
|
`,e),...a})}function n({className:e,...a}){return t.jsxRuntimeExports.jsx("th",{"data-slot":"table-head",className:d.cn(`
|
|
11
|
-
adm:h-10 adm:bg-
|
|
11
|
+
adm:h-10 adm:bg-muted/50 adm:p-4 adm:text-left adm:align-middle
|
|
12
12
|
adm:text-xs adm:font-semibold adm:whitespace-nowrap
|
|
13
13
|
adm:text-muted-foreground adm:uppercase
|
|
14
14
|
adm:[&:has([role=checkbox])]:pr-0
|
|
@@ -18,4 +18,4 @@
|
|
|
18
18
|
adm:text-muted-foreground
|
|
19
19
|
adm:[&:has([role=checkbox])]:pr-0
|
|
20
20
|
adm:[&>[role=checkbox]]:translate-y-[2px]
|
|
21
|
-
`,e),...a})}function c({className:e,...a}){return t.jsxRuntimeExports.jsx("caption",{"data-slot":"table-caption",className:d.cn("adm:my-4 adm:text-sm adm:text-muted-foreground",e),...a})}exports.Table=o;exports.TableBody=l;exports.TableCaption=c;exports.TableCell=b;exports.TableFooter=
|
|
21
|
+
`,e),...a})}function c({className:e,...a}){return t.jsxRuntimeExports.jsx("caption",{"data-slot":"table-caption",className:d.cn("adm:my-4 adm:text-sm adm:text-muted-foreground",e),...a})}exports.Table=o;exports.TableBody=l;exports.TableCaption=c;exports.TableCell=b;exports.TableFooter=m;exports.TableHead=n;exports.TableHeader=r;exports.TableRow=s;
|
package/dist/table.js
CHANGED
|
@@ -64,7 +64,7 @@ function c({ className: a, ...t }) {
|
|
|
64
64
|
"data-slot": "table-row",
|
|
65
65
|
className: d(
|
|
66
66
|
`
|
|
67
|
-
adm:border-b adm:border-
|
|
67
|
+
adm:border-b adm:border-border adm:transition-colors
|
|
68
68
|
adm:hover:bg-muted/50
|
|
69
69
|
adm:data-[state=selected]:bg-muted
|
|
70
70
|
`,
|
|
@@ -81,7 +81,7 @@ function u({ className: a, ...t }) {
|
|
|
81
81
|
"data-slot": "table-head",
|
|
82
82
|
className: d(
|
|
83
83
|
`
|
|
84
|
-
adm:h-10 adm:bg-
|
|
84
|
+
adm:h-10 adm:bg-muted/50 adm:p-4 adm:text-left adm:align-middle
|
|
85
85
|
adm:text-xs adm:font-semibold adm:whitespace-nowrap
|
|
86
86
|
adm:text-muted-foreground adm:uppercase
|
|
87
87
|
adm:[&:has([role=checkbox])]:pr-0
|
package/dist/tailwind-colors.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@theme inline{ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-warning: var(--warning); --color-warning-foreground: oklch(1 0 0); --color-success: var(--success); --color-success-foreground: oklch(1 0 0); --color-waiting: var(--waiting); --color-waiting-foreground: oklch(1 0 0); --color-primary-25: var(--primary-25); --color-primary-50: var(--primary-50); --color-primary-100: var(--primary-100); --color-primary-200: var(--primary-200); --color-primary-300: var(--primary-300); --color-primary-400: var(--primary-400); --color-primary-500: var(--primary-500); --color-primary-600: var(--primary-600); --color-primary-700: var(--primary-700); --color-primary-800: var(--primary-800); --color-primary-900: var(--primary-900); --color-sign: var(--sign); --color-sign-25: var(--sign-25); --color-sign-50: var(--sign-50); --color-sign-100: var(--sign-100); --color-sign-200: var(--sign-200); --color-sign-300: var(--sign-300); --color-sign-400: var(--sign-400); --color-sign-500: var(--sign-500); --color-sign-600: var(--sign-600); --color-sign-700: var(--sign-700); --color-sign-800: var(--sign-800); --color-sign-900: var(--sign-900); --color-id: var(--id); --color-id-25: var(--id-25); --color-id-50: var(--id-50); --color-id-100: var(--id-100); --color-id-200: var(--id-200); --color-id-300: var(--id-300); --color-id-400: var(--id-400); --color-id-500: var(--id-500); --color-id-600: var(--id-600); --color-id-700: var(--id-700); --color-id-800: var(--id-800); --color-id-900: var(--id-900); --color-pay: var(--pay); --color-pay-25: var(--pay-25); --color-pay-50: var(--pay-50); --color-pay-100: var(--pay-100); --color-pay-200: var(--pay-200); --color-pay-300: var(--pay-300); --color-pay-400: var(--pay-400); --color-pay-500: var(--pay-500); --color-pay-600: var(--pay-600); --color-pay-700: var(--pay-700); --color-pay-800: var(--pay-800); --color-pay-900: var(--pay-900); --color-risk: var(--risk); --color-risk-25: var(--risk-25); --color-risk-50: var(--risk-50); --color-risk-100: var(--risk-100); --color-risk-200: var(--risk-200); --color-risk-300: var(--risk-300); --color-risk-400: var(--risk-400); --color-risk-500: var(--risk-500); --color-risk-600: var(--risk-600); --color-risk-700: var(--risk-700); --color-risk-800: var(--risk-800); --color-risk-900: var(--risk-900); --color-neutrals: var(--neutrals); --color-neutrals-0: var(--neutrals-0); --color-neutrals-25: var(--neutrals-25); --color-neutrals-50: var(--neutrals-50); --color-neutrals-100: var(--neutrals-100); --color-neutrals-200: var(--neutrals-200); --color-neutrals-300: var(--neutrals-300); --color-neutrals-400: var(--neutrals-400); --color-neutrals-500: var(--neutrals-500); --color-neutrals-600: var(--neutrals-600); --color-neutrals-700: var(--neutrals-700); --color-neutrals-800: var(--neutrals-800); --color-neutrals-900: var(--neutrals-900); --color-error: var(--error); --color-error-25: var(--error-25); --color-error-50: var(--error-50); --color-error-100: var(--error-100); --color-error-200: var(--error-200); --color-error-300: var(--error-300); --color-error-400: var(--error-400); --color-error-500: var(--error-500); --color-error-600: var(--error-600); --color-error-700: var(--error-700); --color-error-800: var(--error-800); --color-error-900: var(--error-900); --color-destructive-25: var(--destructive-25); --color-destructive-50: var(--destructive-50); --color-destructive-100: var(--destructive-100); --color-destructive-200: var(--destructive-200); --color-destructive-300: var(--destructive-300); --color-destructive-400: var(--destructive-400); --color-destructive-500: var(--destructive-500); --color-destructive-600: var(--destructive-600); --color-destructive-700: var(--destructive-700); --color-destructive-800: var(--destructive-800); --color-destructive-900: var(--destructive-900); --color-warning: var(--warning); --color-warning-25: var(--warning-25); --color-warning-50: var(--warning-50); --color-warning-100: var(--warning-100); --color-warning-200: var(--warning-200); --color-warning-300: var(--warning-300); --color-warning-400: var(--warning-400); --color-warning-500: var(--warning-500); --color-warning-600: var(--warning-600); --color-warning-700: var(--warning-700); --color-warning-800: var(--warning-800); --color-warning-900: var(--warning-900); --color-success: var(--success); --color-success-25: var(--success-25); --color-success-50: var(--success-50); --color-success-100: var(--success-100); --color-success-200: var(--success-200); --color-success-300: var(--success-300); --color-success-400: var(--success-400); --color-success-500: var(--success-500); --color-success-600: var(--success-600); --color-success-700: var(--success-700); --color-success-800: var(--success-800); --color-success-900: var(--success-900); --color-waiting: var(--waiting); --color-waiting-25: var(--waiting-25); --color-waiting-50: var(--waiting-50); --color-waiting-100: var(--waiting-100); --color-waiting-200: var(--waiting-200); --color-waiting-300: var(--waiting-300); --color-waiting-400: var(--waiting-400); --color-waiting-500: var(--waiting-500); --color-waiting-600: var(--waiting-600); --color-waiting-700: var(--waiting-700); --color-waiting-800: var(--waiting-800); --color-waiting-900: var(--waiting-900); }
|
|
1
|
+
@theme inline{ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-warning: var(--warning); --color-warning-foreground: oklch(1 0 0); --color-success: var(--success); --color-success-foreground: oklch(1 0 0); --color-waiting: var(--waiting); --color-waiting-foreground: oklch(1 0 0); --color-primary-25: var(--primary-25); --color-primary-50: var(--primary-50); --color-primary-100: var(--primary-100); --color-primary-200: var(--primary-200); --color-primary-300: var(--primary-300); --color-primary-400: var(--primary-400); --color-primary-500: var(--primary-500); --color-primary-600: var(--primary-600); --color-primary-700: var(--primary-700); --color-primary-800: var(--primary-800); --color-primary-900: var(--primary-900); --color-sign: var(--sign); --color-sign-25: var(--sign-25); --color-sign-50: var(--sign-50); --color-sign-100: var(--sign-100); --color-sign-200: var(--sign-200); --color-sign-300: var(--sign-300); --color-sign-400: var(--sign-400); --color-sign-500: var(--sign-500); --color-sign-600: var(--sign-600); --color-sign-700: var(--sign-700); --color-sign-800: var(--sign-800); --color-sign-900: var(--sign-900); --color-id: var(--id); --color-id-25: var(--id-25); --color-id-50: var(--id-50); --color-id-100: var(--id-100); --color-id-200: var(--id-200); --color-id-300: var(--id-300); --color-id-400: var(--id-400); --color-id-500: var(--id-500); --color-id-600: var(--id-600); --color-id-700: var(--id-700); --color-id-800: var(--id-800); --color-id-900: var(--id-900); --color-pay: var(--pay); --color-pay-25: var(--pay-25); --color-pay-50: var(--pay-50); --color-pay-100: var(--pay-100); --color-pay-200: var(--pay-200); --color-pay-300: var(--pay-300); --color-pay-400: var(--pay-400); --color-pay-500: var(--pay-500); --color-pay-600: var(--pay-600); --color-pay-700: var(--pay-700); --color-pay-800: var(--pay-800); --color-pay-900: var(--pay-900); --color-risk: var(--risk); --color-risk-25: var(--risk-25); --color-risk-50: var(--risk-50); --color-risk-100: var(--risk-100); --color-risk-200: var(--risk-200); --color-risk-300: var(--risk-300); --color-risk-400: var(--risk-400); --color-risk-500: var(--risk-500); --color-risk-600: var(--risk-600); --color-risk-700: var(--risk-700); --color-risk-800: var(--risk-800); --color-risk-900: var(--risk-900); --color-check: var(--check); --color-check-25: var(--check-25); --color-check-50: var(--check-50); --color-check-100: var(--check-100); --color-check-200: var(--check-200); --color-check-300: var(--check-300); --color-check-400: var(--check-400); --color-check-500: var(--check-500); --color-check-600: var(--check-600); --color-check-700: var(--check-700); --color-check-800: var(--check-800); --color-check-900: var(--check-900); --color-neutrals: var(--neutrals); --color-neutrals-0: var(--neutrals-0); --color-neutrals-25: var(--neutrals-25); --color-neutrals-50: var(--neutrals-50); --color-neutrals-100: var(--neutrals-100); --color-neutrals-200: var(--neutrals-200); --color-neutrals-300: var(--neutrals-300); --color-neutrals-400: var(--neutrals-400); --color-neutrals-500: var(--neutrals-500); --color-neutrals-600: var(--neutrals-600); --color-neutrals-700: var(--neutrals-700); --color-neutrals-800: var(--neutrals-800); --color-neutrals-900: var(--neutrals-900); --color-error: var(--error); --color-error-25: var(--error-25); --color-error-50: var(--error-50); --color-error-100: var(--error-100); --color-error-200: var(--error-200); --color-error-300: var(--error-300); --color-error-400: var(--error-400); --color-error-500: var(--error-500); --color-error-600: var(--error-600); --color-error-700: var(--error-700); --color-error-800: var(--error-800); --color-error-900: var(--error-900); --color-destructive-25: var(--destructive-25); --color-destructive-50: var(--destructive-50); --color-destructive-100: var(--destructive-100); --color-destructive-200: var(--destructive-200); --color-destructive-300: var(--destructive-300); --color-destructive-400: var(--destructive-400); --color-destructive-500: var(--destructive-500); --color-destructive-600: var(--destructive-600); --color-destructive-700: var(--destructive-700); --color-destructive-800: var(--destructive-800); --color-destructive-900: var(--destructive-900); --color-warning: var(--warning); --color-warning-25: var(--warning-25); --color-warning-50: var(--warning-50); --color-warning-100: var(--warning-100); --color-warning-200: var(--warning-200); --color-warning-300: var(--warning-300); --color-warning-400: var(--warning-400); --color-warning-500: var(--warning-500); --color-warning-600: var(--warning-600); --color-warning-700: var(--warning-700); --color-warning-800: var(--warning-800); --color-warning-900: var(--warning-900); --color-success: var(--success); --color-success-25: var(--success-25); --color-success-50: var(--success-50); --color-success-100: var(--success-100); --color-success-200: var(--success-200); --color-success-300: var(--success-300); --color-success-400: var(--success-400); --color-success-500: var(--success-500); --color-success-600: var(--success-600); --color-success-700: var(--success-700); --color-success-800: var(--success-800); --color-success-900: var(--success-900); --color-waiting: var(--waiting); --color-waiting-25: var(--waiting-25); --color-waiting-50: var(--waiting-50); --color-waiting-100: var(--waiting-100); --color-waiting-200: var(--waiting-200); --color-waiting-300: var(--waiting-300); --color-waiting-400: var(--waiting-400); --color-waiting-500: var(--waiting-500); --color-waiting-600: var(--waiting-600); --color-waiting-700: var(--waiting-700); --color-waiting-800: var(--waiting-800); --color-waiting-900: var(--waiting-900); }
|
package/dist/tailwind-theme.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@theme inline{ --font-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif; }@theme inline{ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-warning: var(--warning); --color-warning-foreground: oklch(1 0 0); --color-success: var(--success); --color-success-foreground: oklch(1 0 0); --color-waiting: var(--waiting); --color-waiting-foreground: oklch(1 0 0); --color-primary-25: var(--primary-25); --color-primary-50: var(--primary-50); --color-primary-100: var(--primary-100); --color-primary-200: var(--primary-200); --color-primary-300: var(--primary-300); --color-primary-400: var(--primary-400); --color-primary-500: var(--primary-500); --color-primary-600: var(--primary-600); --color-primary-700: var(--primary-700); --color-primary-800: var(--primary-800); --color-primary-900: var(--primary-900); --color-sign: var(--sign); --color-sign-25: var(--sign-25); --color-sign-50: var(--sign-50); --color-sign-100: var(--sign-100); --color-sign-200: var(--sign-200); --color-sign-300: var(--sign-300); --color-sign-400: var(--sign-400); --color-sign-500: var(--sign-500); --color-sign-600: var(--sign-600); --color-sign-700: var(--sign-700); --color-sign-800: var(--sign-800); --color-sign-900: var(--sign-900); --color-id: var(--id); --color-id-25: var(--id-25); --color-id-50: var(--id-50); --color-id-100: var(--id-100); --color-id-200: var(--id-200); --color-id-300: var(--id-300); --color-id-400: var(--id-400); --color-id-500: var(--id-500); --color-id-600: var(--id-600); --color-id-700: var(--id-700); --color-id-800: var(--id-800); --color-id-900: var(--id-900); --color-pay: var(--pay); --color-pay-25: var(--pay-25); --color-pay-50: var(--pay-50); --color-pay-100: var(--pay-100); --color-pay-200: var(--pay-200); --color-pay-300: var(--pay-300); --color-pay-400: var(--pay-400); --color-pay-500: var(--pay-500); --color-pay-600: var(--pay-600); --color-pay-700: var(--pay-700); --color-pay-800: var(--pay-800); --color-pay-900: var(--pay-900); --color-risk: var(--risk); --color-risk-25: var(--risk-25); --color-risk-50: var(--risk-50); --color-risk-100: var(--risk-100); --color-risk-200: var(--risk-200); --color-risk-300: var(--risk-300); --color-risk-400: var(--risk-400); --color-risk-500: var(--risk-500); --color-risk-600: var(--risk-600); --color-risk-700: var(--risk-700); --color-risk-800: var(--risk-800); --color-risk-900: var(--risk-900); --color-neutrals: var(--neutrals); --color-neutrals-0: var(--neutrals-0); --color-neutrals-25: var(--neutrals-25); --color-neutrals-50: var(--neutrals-50); --color-neutrals-100: var(--neutrals-100); --color-neutrals-200: var(--neutrals-200); --color-neutrals-300: var(--neutrals-300); --color-neutrals-400: var(--neutrals-400); --color-neutrals-500: var(--neutrals-500); --color-neutrals-600: var(--neutrals-600); --color-neutrals-700: var(--neutrals-700); --color-neutrals-800: var(--neutrals-800); --color-neutrals-900: var(--neutrals-900); --color-error: var(--error); --color-error-25: var(--error-25); --color-error-50: var(--error-50); --color-error-100: var(--error-100); --color-error-200: var(--error-200); --color-error-300: var(--error-300); --color-error-400: var(--error-400); --color-error-500: var(--error-500); --color-error-600: var(--error-600); --color-error-700: var(--error-700); --color-error-800: var(--error-800); --color-error-900: var(--error-900); --color-destructive-25: var(--destructive-25); --color-destructive-50: var(--destructive-50); --color-destructive-100: var(--destructive-100); --color-destructive-200: var(--destructive-200); --color-destructive-300: var(--destructive-300); --color-destructive-400: var(--destructive-400); --color-destructive-500: var(--destructive-500); --color-destructive-600: var(--destructive-600); --color-destructive-700: var(--destructive-700); --color-destructive-800: var(--destructive-800); --color-destructive-900: var(--destructive-900); --color-warning: var(--warning); --color-warning-25: var(--warning-25); --color-warning-50: var(--warning-50); --color-warning-100: var(--warning-100); --color-warning-200: var(--warning-200); --color-warning-300: var(--warning-300); --color-warning-400: var(--warning-400); --color-warning-500: var(--warning-500); --color-warning-600: var(--warning-600); --color-warning-700: var(--warning-700); --color-warning-800: var(--warning-800); --color-warning-900: var(--warning-900); --color-success: var(--success); --color-success-25: var(--success-25); --color-success-50: var(--success-50); --color-success-100: var(--success-100); --color-success-200: var(--success-200); --color-success-300: var(--success-300); --color-success-400: var(--success-400); --color-success-500: var(--success-500); --color-success-600: var(--success-600); --color-success-700: var(--success-700); --color-success-800: var(--success-800); --color-success-900: var(--success-900); --color-waiting: var(--waiting); --color-waiting-25: var(--waiting-25); --color-waiting-50: var(--waiting-50); --color-waiting-100: var(--waiting-100); --color-waiting-200: var(--waiting-200); --color-waiting-300: var(--waiting-300); --color-waiting-400: var(--waiting-400); --color-waiting-500: var(--waiting-500); --color-waiting-600: var(--waiting-600); --color-waiting-700: var(--waiting-700); --color-waiting-800: var(--waiting-800); --color-waiting-900: var(--waiting-900); }@theme inline{ --spacing: var(--space); }@theme inline{ --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); }@theme{ --animate-toast-slide-up: toast-slide-up .2s ease-out; --animate-toast-slide-down: toast-slide-down .2s ease-out forwards; @keyframes toast-slide-up { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes toast-slide-down { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } }
|
|
1
|
+
@theme inline{ --font-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif; }@theme inline{ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-warning: var(--warning); --color-warning-foreground: oklch(1 0 0); --color-success: var(--success); --color-success-foreground: oklch(1 0 0); --color-waiting: var(--waiting); --color-waiting-foreground: oklch(1 0 0); --color-primary-25: var(--primary-25); --color-primary-50: var(--primary-50); --color-primary-100: var(--primary-100); --color-primary-200: var(--primary-200); --color-primary-300: var(--primary-300); --color-primary-400: var(--primary-400); --color-primary-500: var(--primary-500); --color-primary-600: var(--primary-600); --color-primary-700: var(--primary-700); --color-primary-800: var(--primary-800); --color-primary-900: var(--primary-900); --color-sign: var(--sign); --color-sign-25: var(--sign-25); --color-sign-50: var(--sign-50); --color-sign-100: var(--sign-100); --color-sign-200: var(--sign-200); --color-sign-300: var(--sign-300); --color-sign-400: var(--sign-400); --color-sign-500: var(--sign-500); --color-sign-600: var(--sign-600); --color-sign-700: var(--sign-700); --color-sign-800: var(--sign-800); --color-sign-900: var(--sign-900); --color-id: var(--id); --color-id-25: var(--id-25); --color-id-50: var(--id-50); --color-id-100: var(--id-100); --color-id-200: var(--id-200); --color-id-300: var(--id-300); --color-id-400: var(--id-400); --color-id-500: var(--id-500); --color-id-600: var(--id-600); --color-id-700: var(--id-700); --color-id-800: var(--id-800); --color-id-900: var(--id-900); --color-pay: var(--pay); --color-pay-25: var(--pay-25); --color-pay-50: var(--pay-50); --color-pay-100: var(--pay-100); --color-pay-200: var(--pay-200); --color-pay-300: var(--pay-300); --color-pay-400: var(--pay-400); --color-pay-500: var(--pay-500); --color-pay-600: var(--pay-600); --color-pay-700: var(--pay-700); --color-pay-800: var(--pay-800); --color-pay-900: var(--pay-900); --color-risk: var(--risk); --color-risk-25: var(--risk-25); --color-risk-50: var(--risk-50); --color-risk-100: var(--risk-100); --color-risk-200: var(--risk-200); --color-risk-300: var(--risk-300); --color-risk-400: var(--risk-400); --color-risk-500: var(--risk-500); --color-risk-600: var(--risk-600); --color-risk-700: var(--risk-700); --color-risk-800: var(--risk-800); --color-risk-900: var(--risk-900); --color-check: var(--check); --color-check-25: var(--check-25); --color-check-50: var(--check-50); --color-check-100: var(--check-100); --color-check-200: var(--check-200); --color-check-300: var(--check-300); --color-check-400: var(--check-400); --color-check-500: var(--check-500); --color-check-600: var(--check-600); --color-check-700: var(--check-700); --color-check-800: var(--check-800); --color-check-900: var(--check-900); --color-neutrals: var(--neutrals); --color-neutrals-0: var(--neutrals-0); --color-neutrals-25: var(--neutrals-25); --color-neutrals-50: var(--neutrals-50); --color-neutrals-100: var(--neutrals-100); --color-neutrals-200: var(--neutrals-200); --color-neutrals-300: var(--neutrals-300); --color-neutrals-400: var(--neutrals-400); --color-neutrals-500: var(--neutrals-500); --color-neutrals-600: var(--neutrals-600); --color-neutrals-700: var(--neutrals-700); --color-neutrals-800: var(--neutrals-800); --color-neutrals-900: var(--neutrals-900); --color-error: var(--error); --color-error-25: var(--error-25); --color-error-50: var(--error-50); --color-error-100: var(--error-100); --color-error-200: var(--error-200); --color-error-300: var(--error-300); --color-error-400: var(--error-400); --color-error-500: var(--error-500); --color-error-600: var(--error-600); --color-error-700: var(--error-700); --color-error-800: var(--error-800); --color-error-900: var(--error-900); --color-destructive-25: var(--destructive-25); --color-destructive-50: var(--destructive-50); --color-destructive-100: var(--destructive-100); --color-destructive-200: var(--destructive-200); --color-destructive-300: var(--destructive-300); --color-destructive-400: var(--destructive-400); --color-destructive-500: var(--destructive-500); --color-destructive-600: var(--destructive-600); --color-destructive-700: var(--destructive-700); --color-destructive-800: var(--destructive-800); --color-destructive-900: var(--destructive-900); --color-warning: var(--warning); --color-warning-25: var(--warning-25); --color-warning-50: var(--warning-50); --color-warning-100: var(--warning-100); --color-warning-200: var(--warning-200); --color-warning-300: var(--warning-300); --color-warning-400: var(--warning-400); --color-warning-500: var(--warning-500); --color-warning-600: var(--warning-600); --color-warning-700: var(--warning-700); --color-warning-800: var(--warning-800); --color-warning-900: var(--warning-900); --color-success: var(--success); --color-success-25: var(--success-25); --color-success-50: var(--success-50); --color-success-100: var(--success-100); --color-success-200: var(--success-200); --color-success-300: var(--success-300); --color-success-400: var(--success-400); --color-success-500: var(--success-500); --color-success-600: var(--success-600); --color-success-700: var(--success-700); --color-success-800: var(--success-800); --color-success-900: var(--success-900); --color-waiting: var(--waiting); --color-waiting-25: var(--waiting-25); --color-waiting-50: var(--waiting-50); --color-waiting-100: var(--waiting-100); --color-waiting-200: var(--waiting-200); --color-waiting-300: var(--waiting-300); --color-waiting-400: var(--waiting-400); --color-waiting-500: var(--waiting-500); --color-waiting-600: var(--waiting-600); --color-waiting-700: var(--waiting-700); --color-waiting-800: var(--waiting-800); --color-waiting-900: var(--waiting-900); }@theme inline{ --spacing: var(--space); }@theme inline{ --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); }@theme{ --animate-toast-slide-up: toast-slide-up .2s ease-out; --animate-toast-slide-down: toast-slide-down .2s ease-out forwards; @keyframes toast-slide-up { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes toast-slide-down { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } }
|
package/dist/themes.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-theme=default]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--default);--primary-foreground: var(--neutrals-0);--secondary: var(--default-100);--secondary-foreground: var(--default-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--default);--chart-1: var(--default-500);--chart-2: var(--default-400);--chart-3: var(--default-300);--chart-4: var(--default-200);--chart-5: var(--default-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--default);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--default);--primary-25: var(--default-25);--primary-50: var(--default-50);--primary-100: var(--default-100);--primary-200: var(--default-200);--primary-300: var(--default-300);--primary-400: var(--default-400);--primary-500: var(--default-500);--primary-600: var(--default-600);--primary-700: var(--default-700);--primary-800: var(--default-800);--primary-900: var(--default-900)}[data-theme=default].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--default);--primary-foreground: var(--neutrals-900);--secondary: var(--default-100);--secondary-foreground: var(--default-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--default);--chart-1: var(--default-500);--chart-2: var(--default-400);--chart-3: var(--default-300);--chart-4: var(--default-200);--chart-5: var(--default-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--default);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--default)}[data-theme=sign]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--sign);--primary-foreground: var(--neutrals-0);--secondary: var(--sign-100);--secondary-foreground: var(--sign-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--sign);--chart-1: var(--sign-500);--chart-2: var(--sign-400);--chart-3: var(--sign-300);--chart-4: var(--sign-200);--chart-5: var(--sign-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--sign);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--sign);--primary-25: var(--sign-25);--primary-50: var(--sign-50);--primary-100: var(--sign-100);--primary-200: var(--sign-200);--primary-300: var(--sign-300);--primary-400: var(--sign-400);--primary-500: var(--sign-500);--primary-600: var(--sign-600);--primary-700: var(--sign-700);--primary-800: var(--sign-800);--primary-900: var(--sign-900)}[data-theme=sign].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--sign);--primary-foreground: var(--neutrals-900);--secondary: var(--sign-100);--secondary-foreground: var(--sign-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--sign);--chart-1: var(--sign-500);--chart-2: var(--sign-400);--chart-3: var(--sign-300);--chart-4: var(--sign-200);--chart-5: var(--sign-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--sign);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--sign)}[data-theme=id]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--id);--primary-foreground: var(--neutrals-0);--secondary: var(--id-100);--secondary-foreground: var(--id-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--id);--chart-1: var(--id-500);--chart-2: var(--id-400);--chart-3: var(--id-300);--chart-4: var(--id-200);--chart-5: var(--id-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--id);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--id-500);--primary-25: var(--id-25);--primary-50: var(--id-50);--primary-100: var(--id-100);--primary-200: var(--id-200);--primary-300: var(--id-300);--primary-400: var(--id-400);--primary-500: var(--id-500);--primary-600: var(--id-600);--primary-700: var(--id-700);--primary-800: var(--id-800);--primary-900: var(--id-900)}[data-theme=id].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--id);--primary-foreground: var(--neutrals-900);--secondary: var(--id-100);--secondary-foreground: var(--id-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--id);--chart-1: var(--id-500);--chart-2: var(--id-400);--chart-3: var(--id-300);--chart-4: var(--id-200);--chart-5: var(--id-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--id);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--id)}[data-theme=pay]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--pay);--primary-foreground: var(--neutrals-0);--secondary: var(--pay-100);--secondary-foreground: var(--pay-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--pay);--chart-1: var(--pay-500);--chart-2: var(--pay-400);--chart-3: var(--pay-300);--chart-4: var(--pay-200);--chart-5: var(--pay-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--pay);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--pay);--primary-25: var(--pay-25);--primary-50: var(--pay-50);--primary-100: var(--pay-100);--primary-200: var(--pay-200);--primary-300: var(--pay-300);--primary-400: var(--pay-400);--primary-500: var(--pay-500);--primary-600: var(--pay-600);--primary-700: var(--pay-700);--primary-800: var(--pay-800);--primary-900: var(--pay-900)}[data-theme=pay].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--pay);--primary-foreground: var(--neutrals-900);--secondary: var(--pay-100);--secondary-foreground: var(--pay-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--pay);--chart-1: var(--pay-500);--chart-2: var(--pay-400);--chart-3: var(--pay-300);--chart-4: var(--pay-200);--chart-5: var(--pay-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--pay);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--pay)}[data-theme=risk]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--risk);--primary-foreground: var(--neutrals-0);--secondary: var(--risk-100);--secondary-foreground: var(--risk-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--risk);--chart-1: var(--risk-500);--chart-2: var(--risk-400);--chart-3: var(--risk-300);--chart-4: var(--risk-200);--chart-5: var(--risk-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--risk);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--risk);--primary-25: var(--risk-25);--primary-50: var(--risk-50);--primary-100: var(--risk-100);--primary-200: var(--risk-200);--primary-300: var(--risk-300);--primary-400: var(--risk-400);--primary-500: var(--risk-500);--primary-600: var(--risk-600);--primary-700: var(--risk-700);--primary-800: var(--risk-800);--primary-900: var(--risk-900)}[data-theme=risk].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--risk);--primary-foreground: var(--neutrals-900);--secondary: var(--risk-100);--secondary-foreground: var(--risk-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--risk);--chart-1: var(--risk-500);--chart-2: var(--risk-400);--chart-3: var(--risk-300);--chart-4: var(--risk-200);--chart-5: var(--risk-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--risk);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--risk)}
|
|
1
|
+
[data-theme=default]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--default);--primary-foreground: var(--neutrals-0);--secondary: var(--default-100);--secondary-foreground: var(--default-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--default);--chart-1: var(--default-500);--chart-2: var(--default-400);--chart-3: var(--default-300);--chart-4: var(--default-200);--chart-5: var(--default-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--default);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--default);--primary-25: var(--default-25);--primary-50: var(--default-50);--primary-100: var(--default-100);--primary-200: var(--default-200);--primary-300: var(--default-300);--primary-400: var(--default-400);--primary-500: var(--default-500);--primary-600: var(--default-600);--primary-700: var(--default-700);--primary-800: var(--default-800);--primary-900: var(--default-900)}[data-theme=default].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--default);--primary-foreground: var(--neutrals-900);--secondary: var(--default-100);--secondary-foreground: var(--default-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--default);--chart-1: var(--default-500);--chart-2: var(--default-400);--chart-3: var(--default-300);--chart-4: var(--default-200);--chart-5: var(--default-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--default);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--default)}[data-theme=sign]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--sign);--primary-foreground: var(--neutrals-0);--secondary: var(--sign-100);--secondary-foreground: var(--sign-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--sign);--chart-1: var(--sign-500);--chart-2: var(--sign-400);--chart-3: var(--sign-300);--chart-4: var(--sign-200);--chart-5: var(--sign-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--sign);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--sign);--primary-25: var(--sign-25);--primary-50: var(--sign-50);--primary-100: var(--sign-100);--primary-200: var(--sign-200);--primary-300: var(--sign-300);--primary-400: var(--sign-400);--primary-500: var(--sign-500);--primary-600: var(--sign-600);--primary-700: var(--sign-700);--primary-800: var(--sign-800);--primary-900: var(--sign-900)}[data-theme=sign].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--sign);--primary-foreground: var(--neutrals-900);--secondary: var(--sign-100);--secondary-foreground: var(--sign-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--sign);--chart-1: var(--sign-500);--chart-2: var(--sign-400);--chart-3: var(--sign-300);--chart-4: var(--sign-200);--chart-5: var(--sign-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--sign);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--sign)}[data-theme=id]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--id);--primary-foreground: var(--neutrals-0);--secondary: var(--id-100);--secondary-foreground: var(--id-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--id);--chart-1: var(--id-500);--chart-2: var(--id-400);--chart-3: var(--id-300);--chart-4: var(--id-200);--chart-5: var(--id-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--id);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--id-500);--primary-25: var(--id-25);--primary-50: var(--id-50);--primary-100: var(--id-100);--primary-200: var(--id-200);--primary-300: var(--id-300);--primary-400: var(--id-400);--primary-500: var(--id-500);--primary-600: var(--id-600);--primary-700: var(--id-700);--primary-800: var(--id-800);--primary-900: var(--id-900)}[data-theme=id].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--id);--primary-foreground: var(--neutrals-900);--secondary: var(--id-100);--secondary-foreground: var(--id-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--id);--chart-1: var(--id-500);--chart-2: var(--id-400);--chart-3: var(--id-300);--chart-4: var(--id-200);--chart-5: var(--id-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--id);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--id)}[data-theme=pay]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--pay);--primary-foreground: var(--neutrals-0);--secondary: var(--pay-100);--secondary-foreground: var(--pay-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--pay);--chart-1: var(--pay-500);--chart-2: var(--pay-400);--chart-3: var(--pay-300);--chart-4: var(--pay-200);--chart-5: var(--pay-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--pay);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--pay);--primary-25: var(--pay-25);--primary-50: var(--pay-50);--primary-100: var(--pay-100);--primary-200: var(--pay-200);--primary-300: var(--pay-300);--primary-400: var(--pay-400);--primary-500: var(--pay-500);--primary-600: var(--pay-600);--primary-700: var(--pay-700);--primary-800: var(--pay-800);--primary-900: var(--pay-900)}[data-theme=pay].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--pay);--primary-foreground: var(--neutrals-900);--secondary: var(--pay-100);--secondary-foreground: var(--pay-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--pay);--chart-1: var(--pay-500);--chart-2: var(--pay-400);--chart-3: var(--pay-300);--chart-4: var(--pay-200);--chart-5: var(--pay-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--pay);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--pay)}[data-theme=risk]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--risk);--primary-foreground: var(--neutrals-0);--secondary: var(--risk-100);--secondary-foreground: var(--risk-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--risk);--chart-1: var(--risk-500);--chart-2: var(--risk-400);--chart-3: var(--risk-300);--chart-4: var(--risk-200);--chart-5: var(--risk-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--risk);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--risk);--primary-25: var(--risk-25);--primary-50: var(--risk-50);--primary-100: var(--risk-100);--primary-200: var(--risk-200);--primary-300: var(--risk-300);--primary-400: var(--risk-400);--primary-500: var(--risk-500);--primary-600: var(--risk-600);--primary-700: var(--risk-700);--primary-800: var(--risk-800);--primary-900: var(--risk-900)}[data-theme=risk].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--risk);--primary-foreground: var(--neutrals-900);--secondary: var(--risk-100);--secondary-foreground: var(--risk-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--risk);--chart-1: var(--risk-500);--chart-2: var(--risk-400);--chart-3: var(--risk-300);--chart-4: var(--risk-200);--chart-5: var(--risk-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--risk);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--risk)}[data-theme=check]{--background: var(--neutrals-0);--foreground: var(--neutrals-700);--card: var(--neutrals-0);--card-foreground: var(--neutrals-700);--popover: var(--neutrals-0);--popover-foreground: var(--neutrals-700);--primary: var(--check);--primary-foreground: var(--neutrals-0);--secondary: var(--check-100);--secondary-foreground: var(--check-700);--muted: var(--neutrals-100);--muted-foreground: var(--neutrals-500);--accent: var(--neutrals-100);--accent-foreground: var(--neutrals-800);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-200);--input: var(--neutrals-200);--ring: var(--check);--chart-1: var(--check-500);--chart-2: var(--check-400);--chart-3: var(--check-300);--chart-4: var(--check-200);--chart-5: var(--check-100);--sidebar: var(--neutrals-0);--sidebar-foreground: var(--neutrals-700);--sidebar-primary: var(--check);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-100);--sidebar-accent-foreground: var(--neutrals-800);--sidebar-border: var(--neutrals-200);--sidebar-ring: var(--check);--primary-25: var(--check-25);--primary-50: var(--check-50);--primary-100: var(--check-100);--primary-200: var(--check-200);--primary-300: var(--check-300);--primary-400: var(--check-400);--primary-500: var(--check-500);--primary-600: var(--check-600);--primary-700: var(--check-700);--primary-800: var(--check-800);--primary-900: var(--check-900)}[data-theme=check].dark{--background: var(--neutrals-900);--foreground: var(--neutrals-0);--card: var(--neutrals-800);--card-foreground: var(--neutrals-0);--popover: var(--neutrals-800);--popover-foreground: var(--neutrals-0);--primary: var(--check);--primary-foreground: var(--neutrals-900);--secondary: var(--check-100);--secondary-foreground: var(--check-700);--muted: var(--neutrals-800);--muted-foreground: var(--neutrals-400);--accent: var(--neutrals-800);--accent-foreground: var(--neutrals-0);--destructive: var(--error);--destructive-foreground: var(--neutrals-0);--border: var(--neutrals-0) / 10%;--input: var(--neutrals-0) / 15%;--ring: var(--check);--chart-1: var(--check-500);--chart-2: var(--check-400);--chart-3: var(--check-300);--chart-4: var(--check-200);--chart-5: var(--check-100);--sidebar: var(--neutrals-900);--sidebar-foreground: var(--neutrals-0);--sidebar-primary: var(--check);--sidebar-primary-foreground: var(--neutrals-0);--sidebar-accent: var(--neutrals-800);--sidebar-accent-foreground: var(--neutrals-0);--sidebar-border: var(--neutrals-0) / 10%;--sidebar-ring: var(--check)}
|
package/dist/tooltip.cjs
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./jsx-runtime-BB_1_6y_.cjs"),K=require("react"),E=require("./index-BWaO7kQK.cjs"),M=require("./index-_XxjJPRD.cjs"),W=require("./index-cwZN7ZY3.cjs"),J=require("./index-BaCYnOIG.cjs"),Q=require("./index-WIv2ndLu.cjs"),R=require("./index-Cqf5g2f_.cjs"),Z=require("./index-CBuLZ39k.cjs"),N=require("./index-DE3jjVoC.cjs"),ee=require("./index-CocSS1YK.cjs"),te=require("./index-BDs8lUfq.cjs"),oe=require("./index-DoxiiusW.cjs");function re(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const s=re(K);var ne=Symbol("radix.slottable");function se(e){const o=({children:t})=>c.jsxRuntimeExports.jsx(c.jsxRuntimeExports.Fragment,{children:t});return o.displayName=`${e}.Slottable`,o.__radixId=ne,o}var[O]=W.createContextScope("Tooltip",[R.createPopperScope]),D=R.createPopperScope(),q="TooltipProvider",ie=700,L="tooltip.open",[ae,k]=O(q),$=e=>{const{__scopeTooltip:o,delayDuration:t=ie,skipDelayDuration:r=300,disableHoverableContent:n=!1,children:l}=e,a=s.useRef(!0),f=s.useRef(!1),i=s.useRef(0);return s.useEffect(()=>{const p=i.current;return()=>window.clearTimeout(p)},[]),c.jsxRuntimeExports.jsx(ae,{scope:o,isOpenDelayedRef:a,delayDuration:t,onOpen:s.useCallback(()=>{window.clearTimeout(i.current),a.current=!1},[]),onClose:s.useCallback(()=>{window.clearTimeout(i.current),i.current=window.setTimeout(()=>a.current=!0,r)},[r]),isPointerInTransitRef:f,onPointerInTransitChange:s.useCallback(p=>{f.current=p},[]),disableHoverableContent:n,children:l})};$.displayName=q;var P="Tooltip",[le,_]=O(P),F=e=>{const{__scopeTooltip:o,children:t,open:r,defaultOpen:n,onOpenChange:l,disableHoverableContent:a,delayDuration:f}=e,i=k(P,e.__scopeTooltip),p=D(o),[u,x]=s.useState(null),m=Q.useId(),d=s.useRef(0),v=a??i.disableHoverableContent,
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./jsx-runtime-BB_1_6y_.cjs"),K=require("react"),E=require("./index-BWaO7kQK.cjs"),M=require("./index-_XxjJPRD.cjs"),W=require("./index-cwZN7ZY3.cjs"),J=require("./index-BaCYnOIG.cjs"),Q=require("./index-WIv2ndLu.cjs"),R=require("./index-Cqf5g2f_.cjs"),Z=require("./index-CBuLZ39k.cjs"),N=require("./index-DE3jjVoC.cjs"),ee=require("./index-CocSS1YK.cjs"),te=require("./index-BDs8lUfq.cjs"),oe=require("./index-DoxiiusW.cjs");function re(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const s=re(K);var ne=Symbol("radix.slottable");function se(e){const o=({children:t})=>c.jsxRuntimeExports.jsx(c.jsxRuntimeExports.Fragment,{children:t});return o.displayName=`${e}.Slottable`,o.__radixId=ne,o}var[O]=W.createContextScope("Tooltip",[R.createPopperScope]),D=R.createPopperScope(),q="TooltipProvider",ie=700,L="tooltip.open",[ae,k]=O(q),$=e=>{const{__scopeTooltip:o,delayDuration:t=ie,skipDelayDuration:r=300,disableHoverableContent:n=!1,children:l}=e,a=s.useRef(!0),f=s.useRef(!1),i=s.useRef(0);return s.useEffect(()=>{const p=i.current;return()=>window.clearTimeout(p)},[]),c.jsxRuntimeExports.jsx(ae,{scope:o,isOpenDelayedRef:a,delayDuration:t,onOpen:s.useCallback(()=>{window.clearTimeout(i.current),a.current=!1},[]),onClose:s.useCallback(()=>{window.clearTimeout(i.current),i.current=window.setTimeout(()=>a.current=!0,r)},[r]),isPointerInTransitRef:f,onPointerInTransitChange:s.useCallback(p=>{f.current=p},[]),disableHoverableContent:n,children:l})};$.displayName=q;var P="Tooltip",[le,_]=O(P),F=e=>{const{__scopeTooltip:o,children:t,open:r,defaultOpen:n,onOpenChange:l,disableHoverableContent:a,delayDuration:f}=e,i=k(P,e.__scopeTooltip),p=D(o),[u,x]=s.useState(null),m=Q.useId(),d=s.useRef(0),v=a??i.disableHoverableContent,g=f??i.delayDuration,h=s.useRef(!1),[y,T]=E.useControllableState({prop:r,defaultProp:n??!1,onChange:H=>{H?(i.onOpen(),document.dispatchEvent(new CustomEvent(L))):i.onClose(),l?.(H)},caller:P}),b=s.useMemo(()=>y?h.current?"delayed-open":"instant-open":"closed",[y]),j=s.useCallback(()=>{window.clearTimeout(d.current),d.current=0,h.current=!1,T(!0)},[T]),w=s.useCallback(()=>{window.clearTimeout(d.current),d.current=0,T(!1)},[T]),I=s.useCallback(()=>{window.clearTimeout(d.current),d.current=window.setTimeout(()=>{h.current=!0,T(!0),d.current=0},g)},[g,T]);return s.useEffect(()=>()=>{d.current&&(window.clearTimeout(d.current),d.current=0)},[]),c.jsxRuntimeExports.jsx(R.Root2,{...p,children:c.jsxRuntimeExports.jsx(le,{scope:o,contentId:m,open:y,stateAttribute:b,trigger:u,onTriggerChange:x,onTriggerEnter:s.useCallback(()=>{i.isOpenDelayedRef.current?I():j()},[i.isOpenDelayedRef,I,j]),onTriggerLeave:s.useCallback(()=>{v?w():(window.clearTimeout(d.current),d.current=0)},[w,v]),onOpen:j,onClose:w,disableHoverableContent:v,children:t})})};F.displayName=P;var A="TooltipTrigger",G=s.forwardRef((e,o)=>{const{__scopeTooltip:t,...r}=e,n=_(A,t),l=k(A,t),a=D(t),f=s.useRef(null),i=M.useComposedRefs(o,f,n.onTriggerChange),p=s.useRef(!1),u=s.useRef(!1),x=s.useCallback(()=>p.current=!1,[]);return s.useEffect(()=>()=>document.removeEventListener("pointerup",x),[x]),c.jsxRuntimeExports.jsx(R.Anchor,{asChild:!0,...a,children:c.jsxRuntimeExports.jsx(ee.Primitive.button,{"aria-describedby":n.open?n.contentId:void 0,"data-state":n.stateAttribute,...r,ref:i,onPointerMove:E.composeEventHandlers(e.onPointerMove,m=>{m.pointerType!=="touch"&&!u.current&&!l.isPointerInTransitRef.current&&(n.onTriggerEnter(),u.current=!0)}),onPointerLeave:E.composeEventHandlers(e.onPointerLeave,()=>{n.onTriggerLeave(),u.current=!1}),onPointerDown:E.composeEventHandlers(e.onPointerDown,()=>{n.open&&n.onClose(),p.current=!0,document.addEventListener("pointerup",x,{once:!0})}),onFocus:E.composeEventHandlers(e.onFocus,()=>{p.current||n.onOpen()}),onBlur:E.composeEventHandlers(e.onBlur,n.onClose),onClick:E.composeEventHandlers(e.onClick,n.onClose)})})});G.displayName=A;var S="TooltipPortal",[ce,ue]=O(S,{forceMount:void 0}),z=e=>{const{__scopeTooltip:o,forceMount:t,children:r,container:n}=e,l=_(S,o);return c.jsxRuntimeExports.jsx(ce,{scope:o,forceMount:t,children:c.jsxRuntimeExports.jsx(N.Presence,{present:t||l.open,children:c.jsxRuntimeExports.jsx(Z.Portal,{asChild:!0,container:n,children:r})})})};z.displayName=S;var C="TooltipContent",B=s.forwardRef((e,o)=>{const t=ue(C,e.__scopeTooltip),{forceMount:r=t.forceMount,side:n="top",...l}=e,a=_(C,e.__scopeTooltip);return c.jsxRuntimeExports.jsx(N.Presence,{present:r||a.open,children:a.disableHoverableContent?c.jsxRuntimeExports.jsx(U,{side:n,...l,ref:o}):c.jsxRuntimeExports.jsx(de,{side:n,...l,ref:o})})}),de=s.forwardRef((e,o)=>{const t=_(C,e.__scopeTooltip),r=k(C,e.__scopeTooltip),n=s.useRef(null),l=M.useComposedRefs(o,n),[a,f]=s.useState(null),{trigger:i,onClose:p}=t,u=n.current,{onPointerInTransitChange:x}=r,m=s.useCallback(()=>{f(null),x(!1)},[x]),d=s.useCallback((v,g)=>{const h=v.currentTarget,y={x:v.clientX,y:v.clientY},T=me(y,h.getBoundingClientRect()),b=ve(y,T),j=he(g.getBoundingClientRect()),w=Te([...b,...j]);f(w),x(!0)},[x]);return s.useEffect(()=>()=>m(),[m]),s.useEffect(()=>{if(i&&u){const v=h=>d(h,u),g=h=>d(h,i);return i.addEventListener("pointerleave",v),u.addEventListener("pointerleave",g),()=>{i.removeEventListener("pointerleave",v),u.removeEventListener("pointerleave",g)}}},[i,u,d,m]),s.useEffect(()=>{if(a){const v=g=>{const h=g.target,y={x:g.clientX,y:g.clientY},T=i?.contains(h)||u?.contains(h),b=!ge(y,a);T?m():b&&(m(),p())};return document.addEventListener("pointermove",v),()=>document.removeEventListener("pointermove",v)}},[i,u,a,p,m]),c.jsxRuntimeExports.jsx(U,{...e,ref:l})}),[pe,xe]=O(P,{isInside:!1}),fe=se("TooltipContent"),U=s.forwardRef((e,o)=>{const{__scopeTooltip:t,children:r,"aria-label":n,onEscapeKeyDown:l,onPointerDownOutside:a,...f}=e,i=_(C,t),p=D(t),{onClose:u}=i;return s.useEffect(()=>(document.addEventListener(L,u),()=>document.removeEventListener(L,u)),[u]),s.useEffect(()=>{if(i.trigger){const x=m=>{m.target?.contains(i.trigger)&&u()};return window.addEventListener("scroll",x,{capture:!0}),()=>window.removeEventListener("scroll",x,{capture:!0})}},[i.trigger,u]),c.jsxRuntimeExports.jsx(J.DismissableLayer,{asChild:!0,disableOutsidePointerEvents:!1,onEscapeKeyDown:l,onPointerDownOutside:a,onFocusOutside:x=>x.preventDefault(),onDismiss:u,children:c.jsxRuntimeExports.jsxs(R.Content,{"data-state":i.stateAttribute,...p,...f,ref:o,style:{...f.style,"--radix-tooltip-content-transform-origin":"var(--radix-popper-transform-origin)","--radix-tooltip-content-available-width":"var(--radix-popper-available-width)","--radix-tooltip-content-available-height":"var(--radix-popper-available-height)","--radix-tooltip-trigger-width":"var(--radix-popper-anchor-width)","--radix-tooltip-trigger-height":"var(--radix-popper-anchor-height)"},children:[c.jsxRuntimeExports.jsx(fe,{children:r}),c.jsxRuntimeExports.jsx(pe,{scope:t,isInside:!0,children:c.jsxRuntimeExports.jsx(te.Root,{id:i.contentId,role:"tooltip",children:n||r})})]})})});B.displayName=C;var V="TooltipArrow",Y=s.forwardRef((e,o)=>{const{__scopeTooltip:t,...r}=e,n=D(t);return xe(V,t).isInside?null:c.jsxRuntimeExports.jsx(R.Arrow,{...n,...r,ref:o})});Y.displayName=V;function me(e,o){const t=Math.abs(o.top-e.y),r=Math.abs(o.bottom-e.y),n=Math.abs(o.right-e.x),l=Math.abs(o.left-e.x);switch(Math.min(t,r,n,l)){case l:return"left";case n:return"right";case t:return"top";case r:return"bottom";default:throw new Error("unreachable")}}function ve(e,o,t=5){const r=[];switch(o){case"top":r.push({x:e.x-t,y:e.y+t},{x:e.x+t,y:e.y+t});break;case"bottom":r.push({x:e.x-t,y:e.y-t},{x:e.x+t,y:e.y-t});break;case"left":r.push({x:e.x+t,y:e.y-t},{x:e.x+t,y:e.y+t});break;case"right":r.push({x:e.x-t,y:e.y-t},{x:e.x-t,y:e.y+t});break}return r}function he(e){const{top:o,right:t,bottom:r,left:n}=e;return[{x:n,y:o},{x:t,y:o},{x:t,y:r},{x:n,y:r}]}function ge(e,o){const{x:t,y:r}=e;let n=!1;for(let l=0,a=o.length-1;l<o.length;a=l++){const f=o[l],i=o[a],p=f.x,u=f.y,x=i.x,m=i.y;u>r!=m>r&&t<(x-p)*(r-u)/(m-u)+p&&(n=!n)}return n}function Te(e){const o=e.slice();return o.sort((t,r)=>t.x<r.x?-1:t.x>r.x?1:t.y<r.y?-1:t.y>r.y?1:0),ye(o)}function ye(e){if(e.length<=1)return e.slice();const o=[];for(let r=0;r<e.length;r++){const n=e[r];for(;o.length>=2;){const l=o[o.length-1],a=o[o.length-2];if((l.x-a.x)*(n.y-a.y)>=(l.y-a.y)*(n.x-a.x))o.pop();else break}o.push(n)}o.pop();const t=[];for(let r=e.length-1;r>=0;r--){const n=e[r];for(;t.length>=2;){const l=t[t.length-1],a=t[t.length-2];if((l.x-a.x)*(n.y-a.y)>=(l.y-a.y)*(n.x-a.x))t.pop();else break}t.push(n)}return t.pop(),o.length===1&&t.length===1&&o[0].x===t[0].x&&o[0].y===t[0].y?o:o.concat(t)}var Ee=$,Ce=F,Re=G,be=z,je=B,we=Y;function X({delayDuration:e=0,...o}){return c.jsxRuntimeExports.jsx(Ee,{"data-slot":"tooltip-provider",delayDuration:e,...o})}function Pe({...e}){return c.jsxRuntimeExports.jsx(X,{children:c.jsxRuntimeExports.jsx(Ce,{"data-slot":"tooltip",...e})})}function _e({...e}){return c.jsxRuntimeExports.jsx(Re,{"data-slot":"tooltip-trigger",...e})}function Oe({className:e,sideOffset:o=0,children:t,...r}){return c.jsxRuntimeExports.jsx(be,{children:c.jsxRuntimeExports.jsxs(je,{"data-slot":"tooltip-content",sideOffset:o,className:oe.cn(`
|
|
2
2
|
adm:z-50 adm:w-fit
|
|
3
3
|
adm:origin-(--radix-tooltip-content-transform-origin) adm:animate-in
|
|
4
|
-
adm:rounded-md adm:bg-
|
|
5
|
-
adm:text-balance adm:text-
|
|
4
|
+
adm:rounded-md adm:bg-primary adm:px-3 adm:py-1.5 adm:text-xs
|
|
5
|
+
adm:text-balance adm:text-primary-foreground adm:fade-in-0
|
|
6
|
+
adm:zoom-in-95
|
|
6
7
|
adm:data-[side=bottom]:slide-in-from-top-2
|
|
7
8
|
adm:data-[side=left]:slide-in-from-right-2
|
|
8
9
|
adm:data-[side=right]:slide-in-from-left-2
|
|
@@ -12,5 +13,5 @@
|
|
|
12
13
|
adm:data-[state=closed]:zoom-out-95
|
|
13
14
|
`,e),...r,children:[t,c.jsxRuntimeExports.jsx(we,{className:`
|
|
14
15
|
adm:z-50 adm:size-2.5 adm:translate-y-[calc(-50%_-_2px)] adm:rotate-45
|
|
15
|
-
adm:rounded-[2px] adm:bg-
|
|
16
|
+
adm:rounded-[2px] adm:bg-primary adm:fill-primary
|
|
16
17
|
`})]})})}exports.Tooltip=Pe;exports.TooltipContent=Oe;exports.TooltipProvider=X;exports.TooltipTrigger=_e;
|
package/dist/tooltip.js
CHANGED
|
@@ -366,8 +366,9 @@ function Ue({
|
|
|
366
366
|
`
|
|
367
367
|
adm:z-50 adm:w-fit
|
|
368
368
|
adm:origin-(--radix-tooltip-content-transform-origin) adm:animate-in
|
|
369
|
-
adm:rounded-md adm:bg-
|
|
370
|
-
adm:text-balance adm:text-
|
|
369
|
+
adm:rounded-md adm:bg-primary adm:px-3 adm:py-1.5 adm:text-xs
|
|
370
|
+
adm:text-balance adm:text-primary-foreground adm:fade-in-0
|
|
371
|
+
adm:zoom-in-95
|
|
371
372
|
adm:data-[side=bottom]:slide-in-from-top-2
|
|
372
373
|
adm:data-[side=left]:slide-in-from-right-2
|
|
373
374
|
adm:data-[side=right]:slide-in-from-left-2
|
|
@@ -386,7 +387,7 @@ function Ue({
|
|
|
386
387
|
{
|
|
387
388
|
className: `
|
|
388
389
|
adm:z-50 adm:size-2.5 adm:translate-y-[calc(-50%_-_2px)] adm:rotate-45
|
|
389
|
-
adm:rounded-[2px] adm:bg-
|
|
390
|
+
adm:rounded-[2px] adm:bg-primary adm:fill-primary
|
|
390
391
|
`
|
|
391
392
|
}
|
|
392
393
|
)
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const THEMES: readonly ["default", "sign", "id", "pay", "risk"];
|
|
1
|
+
export declare const THEMES: readonly ["default", "sign", "id", "pay", "risk", "check"];
|
|
2
2
|
export type Theme = (typeof THEMES)[number];
|
|
@@ -107,7 +107,7 @@ Contenedor individual de cada item del accordion.
|
|
|
107
107
|
**Estilos aplicados**:
|
|
108
108
|
|
|
109
109
|
- `rounded-2xl`: Bordes muy redondeados
|
|
110
|
-
- `bg-
|
|
110
|
+
- `bg-muted`: Fondo gris claro
|
|
111
111
|
- `mb-4`: Margen inferior de 1rem
|
|
112
112
|
- `last:mb-0`: Sin margen en el último item
|
|
113
113
|
|
|
@@ -246,7 +246,7 @@ Solo un item abierto a la vez:
|
|
|
246
246
|
/>
|
|
247
247
|
<AccordionContent>
|
|
248
248
|
<div className="p-4 space-y-3">
|
|
249
|
-
<div className="rounded-lg border
|
|
249
|
+
<div className="rounded-lg border p-3">
|
|
250
250
|
<h4 className="text-sm font-semibold text-foreground">Full Name</h4>
|
|
251
251
|
<p className="text-sm text-foreground mt-1">Required field</p>
|
|
252
252
|
</div>
|
|
@@ -374,21 +374,21 @@ Varios items pueden estar abiertos simultáneamente:
|
|
|
374
374
|
/>
|
|
375
375
|
<AccordionContent>
|
|
376
376
|
<div className="p-4 space-y-4">
|
|
377
|
-
<div className="flex items-center justify-between p-3 bg-
|
|
377
|
+
<div className="flex items-center justify-between p-3 bg-muted rounded-lg">
|
|
378
378
|
<div>
|
|
379
379
|
<p className="text-sm font-semibold text-foreground">
|
|
380
380
|
Credit Card
|
|
381
381
|
</p>
|
|
382
382
|
<p className="text-xs text-muted-foreground">•••• 4242</p>
|
|
383
383
|
</div>
|
|
384
|
-
<span className="text-xs text-success
|
|
384
|
+
<span className="text-xs text-success font-medium">Active</span>
|
|
385
385
|
</div>
|
|
386
|
-
<div className="flex items-center justify-between p-3 bg-
|
|
386
|
+
<div className="flex items-center justify-between p-3 bg-muted rounded-lg">
|
|
387
387
|
<div>
|
|
388
388
|
<p className="text-sm font-semibold text-foreground">PayPal</p>
|
|
389
389
|
<p className="text-xs text-muted-foreground">user@example.com</p>
|
|
390
390
|
</div>
|
|
391
|
-
<span className="text-xs text-success
|
|
391
|
+
<span className="text-xs text-success font-medium">Active</span>
|
|
392
392
|
</div>
|
|
393
393
|
</div>
|
|
394
394
|
</AccordionContent>
|
|
@@ -548,7 +548,7 @@ Sin badges para diseño minimalista:
|
|
|
548
548
|
| Característica | Accordion Regular | Accordion Rounded |
|
|
549
549
|
| ------------------ | ----------------------- | --------------------------------- |
|
|
550
550
|
| Bordes | Esquinas cuadradas | `rounded-2xl` (muy redondeado) |
|
|
551
|
-
| Fondo del Item | Transparente con border | `bg-
|
|
551
|
+
| Fondo del Item | Transparente con border | `bg-muted` (gris claro) |
|
|
552
552
|
| Separación | Border entre items | Margen `mb-4` entre items |
|
|
553
553
|
| Badge Support | No (solo children) | Sí (prop `badge` dedicada) |
|
|
554
554
|
| Estilo del Título | Normal | Mayúsculas, compacto, color gris |
|
|
@@ -236,7 +236,7 @@ El trigger incluye hover effect con subrayado:
|
|
|
236
236
|
<AccordionItem value="phase-1">
|
|
237
237
|
<AccordionTrigger>
|
|
238
238
|
<div className="flex items-center gap-2">
|
|
239
|
-
<
|
|
239
|
+
<Icon symbol="check_circle" className="text-lg" />
|
|
240
240
|
Phase 1: Planning
|
|
241
241
|
</div>
|
|
242
242
|
</AccordionTrigger>
|
|
@@ -260,7 +260,7 @@ El trigger incluye hover effect con subrayado:
|
|
|
260
260
|
|
|
261
261
|
- Usa Radix UI Accordion internamente
|
|
262
262
|
- Todos los estilos tienen prefijo ``
|
|
263
|
-
- El icono
|
|
263
|
+
- El icono keyboard_arrow_down se incluye automáticamente en el trigger
|
|
264
264
|
- Las animaciones son manejadas por CSS y data attributes
|
|
265
265
|
|
|
266
266
|
## Referencias
|
|
@@ -344,15 +344,15 @@ import { Progress } from "@adamosuiteservices/ui/progress";
|
|
|
344
344
|
</div>
|
|
345
345
|
<div className="flex gap-4 justify-between">
|
|
346
346
|
<span>Memory usage:</span>
|
|
347
|
-
<span className="text-
|
|
347
|
+
<span className="text-success">-23%</span>
|
|
348
348
|
</div>
|
|
349
349
|
<div className="flex gap-4 justify-between">
|
|
350
350
|
<span>CPU usage:</span>
|
|
351
|
-
<span className="text-
|
|
351
|
+
<span className="text-success">-31%</span>
|
|
352
352
|
</div>
|
|
353
353
|
<div className="flex gap-4 justify-between">
|
|
354
354
|
<span>Battery life:</span>
|
|
355
|
-
<span className="text-
|
|
355
|
+
<span className="text-success">+18%</span>
|
|
356
356
|
</div>
|
|
357
357
|
</div>
|
|
358
358
|
</AlertDescription>
|
|
@@ -378,16 +378,16 @@ Para mostrar estado online/offline/busy:
|
|
|
378
378
|
<AvatarFallback>JD</AvatarFallback>
|
|
379
379
|
</Avatar>
|
|
380
380
|
{/* Indicador de estado */}
|
|
381
|
-
<span className="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-
|
|
381
|
+
<span className="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-success ring-2 ring-background" />
|
|
382
382
|
</div>
|
|
383
383
|
```
|
|
384
384
|
|
|
385
385
|
**Variantes de estado**:
|
|
386
386
|
|
|
387
|
-
- `bg-
|
|
387
|
+
- `bg-success`: Online
|
|
388
388
|
- `bg-gray-400`: Offline
|
|
389
|
-
- `bg-
|
|
390
|
-
- `bg-
|
|
389
|
+
- `bg-warning`: Away/Idle
|
|
390
|
+
- `bg-destructive`: Busy/Do Not Disturb
|
|
391
391
|
|
|
392
392
|
### Avatar con Badge
|
|
393
393
|
|
|
@@ -525,7 +525,7 @@ Mantén tamaños consistentes por contexto:
|
|
|
525
525
|
```tsx
|
|
526
526
|
<Avatar>
|
|
527
527
|
<AvatarImage src={url} alt="User" />
|
|
528
|
-
<AvatarFallback className="bg-
|
|
528
|
+
<AvatarFallback className="bg-primary text-primary-foreground">AB</AvatarFallback>
|
|
529
529
|
</Avatar>
|
|
530
530
|
```
|
|
531
531
|
|
|
@@ -534,11 +534,11 @@ Mantén tamaños consistentes por contexto:
|
|
|
534
534
|
```typescript
|
|
535
535
|
function getAvatarColor(name: string): string {
|
|
536
536
|
const colors = [
|
|
537
|
-
"bg-
|
|
538
|
-
"bg-
|
|
539
|
-
"bg-
|
|
540
|
-
"bg-
|
|
541
|
-
"bg-
|
|
537
|
+
"bg-destructive",
|
|
538
|
+
"bg-primary",
|
|
539
|
+
"bg-success",
|
|
540
|
+
"bg-warning",
|
|
541
|
+
"bg-primary",
|
|
542
542
|
];
|
|
543
543
|
const index = name.charCodeAt(0) % colors.length;
|
|
544
544
|
return colors[index];
|
|
@@ -499,29 +499,11 @@ Para etiquetas promocionales.
|
|
|
499
499
|
```tsx
|
|
500
500
|
import { Icon } from "@adamosuiteservices/ui/icon";
|
|
501
501
|
|
|
502
|
-
<div className="
|
|
503
|
-
|
|
504
|
-
<
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
<Badge variant="secondary">Bestseller</Badge>
|
|
508
|
-
<Badge variant="outline">Limited</Badge>
|
|
509
|
-
</div>
|
|
510
|
-
|
|
511
|
-
{/* Badges personalizados */}
|
|
512
|
-
<div className="flex gap-2">
|
|
513
|
-
<Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
|
|
514
|
-
Free Shipping
|
|
515
|
-
</Badge>
|
|
516
|
-
<Badge className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
|
|
517
|
-
<Icon symbol="star" />
|
|
518
|
-
Premium
|
|
519
|
-
</Badge>
|
|
520
|
-
<Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
|
|
521
|
-
<Icon symbol="redeem" />
|
|
522
|
-
Bundle Deal
|
|
523
|
-
</Badge>
|
|
524
|
-
</div>
|
|
502
|
+
<div className="flex gap-2">
|
|
503
|
+
<Badge variant="destructive">Sale</Badge>
|
|
504
|
+
<Badge variant="default">New</Badge>
|
|
505
|
+
<Badge variant="secondary">Bestseller</Badge>
|
|
506
|
+
<Badge variant="outline">Limited</Badge>
|
|
525
507
|
</div>;
|
|
526
508
|
```
|
|
527
509
|
|
|
@@ -548,12 +530,10 @@ import { Icon } from "@adamosuiteservices/ui/icon";
|
|
|
548
530
|
|
|
549
531
|
<div className="flex items-center gap-2">
|
|
550
532
|
<Avatar className="size-6">
|
|
551
|
-
<
|
|
533
|
+
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
|
|
534
|
+
<AvatarFallback>CN</AvatarFallback>
|
|
552
535
|
</Avatar>
|
|
553
|
-
<Badge variant="
|
|
554
|
-
<Icon symbol="verified" />
|
|
555
|
-
maxleiter
|
|
556
|
-
</Badge>
|
|
536
|
+
<Badge variant="secondary">shadcn</Badge>
|
|
557
537
|
</div>
|
|
558
538
|
</div>;
|
|
559
539
|
```
|
|
@@ -578,32 +558,9 @@ import { Icon } from "@adamosuiteservices/ui/icon";
|
|
|
578
558
|
Best Value
|
|
579
559
|
</Badge>
|
|
580
560
|
<Badge variant="outline">Free Trial</Badge>
|
|
581
|
-
|
|
582
|
-
```
|
|
583
|
-
|
|
584
|
-
### Colores Personalizados
|
|
585
|
-
|
|
586
|
-
Para casos especiales de branding.
|
|
587
|
-
|
|
588
|
-
```tsx
|
|
589
|
-
import { Icon } from "@adamosuiteservices/ui/icon";
|
|
590
|
-
|
|
591
|
-
<div className="flex gap-2">
|
|
592
|
-
<Badge className="bg-blue-500 text-white dark:bg-blue-600">
|
|
593
|
-
<Icon symbol="verified" />
|
|
594
|
-
Verified
|
|
595
|
-
</Badge>
|
|
596
|
-
<Badge className="bg-green-500 text-white dark:bg-green-600">
|
|
561
|
+
<Badge variant="success-medium">
|
|
597
562
|
<Icon symbol="check" />
|
|
598
|
-
|
|
599
|
-
</Badge>
|
|
600
|
-
<Badge className="bg-purple-500 text-white dark:bg-purple-600">
|
|
601
|
-
<Icon symbol="star" />
|
|
602
|
-
Premium
|
|
603
|
-
</Badge>
|
|
604
|
-
<Badge className="bg-orange-500 text-white dark:bg-orange-600">
|
|
605
|
-
<Icon symbol="trending_up" />
|
|
606
|
-
Trending
|
|
563
|
+
Money Back Guarantee
|
|
607
564
|
</Badge>
|
|
608
565
|
</div>;
|
|
609
566
|
```
|
|
@@ -1072,7 +1072,7 @@ function Navigation() {
|
|
|
1072
1072
|
|
|
1073
1073
|
```tsx
|
|
1074
1074
|
// ❌ Incorrecto - className sobrescribe variantes
|
|
1075
|
-
<Button className="bg-
|
|
1075
|
+
<Button className="bg-destructive">Click</Button>
|
|
1076
1076
|
|
|
1077
1077
|
// ✅ Correcto - Usa variantes predefinidas
|
|
1078
1078
|
<Button variant="destructive">Click</Button>
|
|
@@ -270,10 +270,10 @@ const options = [
|
|
|
270
270
|
searchable
|
|
271
271
|
options={frameworks}
|
|
272
272
|
classNames={{
|
|
273
|
-
trigger: "border-2 border-
|
|
274
|
-
popover: "border-
|
|
275
|
-
item: "rounded px-3 py-2 hover:bg-
|
|
276
|
-
check: "text-
|
|
273
|
+
trigger: "border-2 border-primary w-64",
|
|
274
|
+
popover: "border-border shadow-lg",
|
|
275
|
+
item: "rounded px-3 py-2 hover:bg-accent",
|
|
276
|
+
check: "text-primary",
|
|
277
277
|
}}
|
|
278
278
|
/>
|
|
279
279
|
```
|
|
@@ -335,7 +335,7 @@ const [values, setValues] = useState<string[]>([]);
|
|
|
335
335
|
{values.length > 0 && (
|
|
336
336
|
<button
|
|
337
337
|
onClick={() => setValues([])}
|
|
338
|
-
className="text-xs text-
|
|
338
|
+
className="text-xs text-primary hover:text-primary/80 underline"
|
|
339
339
|
>
|
|
340
340
|
Clear all
|
|
341
341
|
</button>
|
|
@@ -390,7 +390,7 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
|
|
|
390
390
|
<div className="flex items-center gap-2">
|
|
391
391
|
<span>{text}</span>
|
|
392
392
|
{text && (
|
|
393
|
-
<span className="px-1.5 py-0.5 text-xs bg-
|
|
393
|
+
<span className="px-1.5 py-0.5 text-xs bg-success/10 text-success rounded font-medium">
|
|
394
394
|
Active
|
|
395
395
|
</span>
|
|
396
396
|
)}
|
|
@@ -411,7 +411,7 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
|
|
|
411
411
|
renders={{
|
|
412
412
|
optionLabel: ({ option }) => (
|
|
413
413
|
<div className="flex items-center gap-2">
|
|
414
|
-
<span className="font-semibold text-
|
|
414
|
+
<span className="font-semibold text-primary">🚀</span>
|
|
415
415
|
<span>{option.label}</span>
|
|
416
416
|
</div>
|
|
417
417
|
),
|
|
@@ -192,7 +192,7 @@ import { Icon } from "@adamosuiteservices/ui/icon";
|
|
|
192
192
|
<span>4.1k</span>
|
|
193
193
|
</div>
|
|
194
194
|
<div className="flex items-center gap-1">
|
|
195
|
-
<div className="h-3 w-3 rounded-full bg-
|
|
195
|
+
<div className="h-3 w-3 rounded-full bg-primary" />
|
|
196
196
|
<span>TypeScript</span>
|
|
197
197
|
</div>
|
|
198
198
|
</div>
|