@biotechusa/pdo-ui 1.0.4 → 1.0.6
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.d.ts +6 -0
- package/dist/accordion.js +45 -0
- package/dist/button.d.ts +1 -1
- package/dist/circular-progress.d.ts +5 -0
- package/dist/circular-progress.js +66 -0
- package/dist/index.css +85 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +3 -1
- package/dist/input.d.ts +1 -1
- package/dist/input.js +1 -1
- package/dist/menu.d.ts +10 -4
- package/dist/menu.js +12 -8
- package/dist/styles.css +146 -125
- package/package.json +1 -1
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Accordion as AccordionPrimitive } from "@base-ui-components/react/accordion";
|
|
2
|
+
declare function Accordion(props: AccordionPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function AccordionPanel({ className, children, ...props }: AccordionPrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export { Accordion, AccordionItem, AccordionTrigger, AccordionPanel, AccordionPanel as AccordionContent, };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Accordion } from "@base-ui-components/react/accordion";
|
|
3
|
+
import { ChevronDownIcon } from "lucide-react";
|
|
4
|
+
import { cn } from "./lib/utils.js";
|
|
5
|
+
function accordion_Accordion(props) {
|
|
6
|
+
return /*#__PURE__*/ jsx(Accordion.Root, {
|
|
7
|
+
"data-slot": "accordion",
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
function AccordionItem({ className, ...props }) {
|
|
12
|
+
return /*#__PURE__*/ jsx(Accordion.Item, {
|
|
13
|
+
className: cn("border-b last:border-b-0", className),
|
|
14
|
+
"data-slot": "accordion-item",
|
|
15
|
+
...props
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
function AccordionTrigger({ className, children, ...props }) {
|
|
19
|
+
return /*#__PURE__*/ jsx(Accordion.Header, {
|
|
20
|
+
className: "flex",
|
|
21
|
+
children: /*#__PURE__*/ jsxs(Accordion.Trigger, {
|
|
22
|
+
className: cn("flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 [&[data-panel-open]>svg]:rotate-180", className),
|
|
23
|
+
"data-slot": "accordion-trigger",
|
|
24
|
+
...props,
|
|
25
|
+
children: [
|
|
26
|
+
children,
|
|
27
|
+
/*#__PURE__*/ jsx(ChevronDownIcon, {
|
|
28
|
+
className: "pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-72 transition-transform duration-200 ease-in-out"
|
|
29
|
+
})
|
|
30
|
+
]
|
|
31
|
+
})
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
function AccordionPanel({ className, children, ...props }) {
|
|
35
|
+
return /*#__PURE__*/ jsx(Accordion.Panel, {
|
|
36
|
+
className: "h-(--accordion-panel-height) overflow-hidden text-muted-foreground text-sm transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0",
|
|
37
|
+
"data-slot": "accordion-panel",
|
|
38
|
+
...props,
|
|
39
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
40
|
+
className: cn("pt-0 pb-4", className),
|
|
41
|
+
children: children
|
|
42
|
+
})
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
export { accordion_Accordion as Accordion, AccordionPanel as AccordionContent, AccordionItem, AccordionPanel, AccordionTrigger };
|
package/dist/button.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { useRender } from "@base-ui-components/react/use-render";
|
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
3
|
import type * as React from "react";
|
|
4
4
|
declare const buttonVariants: (props?: ({
|
|
5
|
-
size?: "
|
|
5
|
+
size?: "default" | "touch" | "icon" | "sm" | "lg" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
|
|
6
6
|
variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "destructive-outline" | "ghost" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
8
|
interface ButtonProps extends useRender.ComponentProps<"button"> {
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
const SIZE_MAP = {
|
|
3
|
+
sm: 12,
|
|
4
|
+
md: 14,
|
|
5
|
+
lg: 18
|
|
6
|
+
};
|
|
7
|
+
function getColor(value) {
|
|
8
|
+
if (0 === value) return "var(--muted-foreground)";
|
|
9
|
+
if (value > 0 && value <= 25) return "var(--chart-1)";
|
|
10
|
+
if (value > 25 && value <= 50) return "var(--warning)";
|
|
11
|
+
if (value > 50 && value < 100) return "var(--info)";
|
|
12
|
+
if (value > 99) return "var(--success)";
|
|
13
|
+
}
|
|
14
|
+
function CircularProgress({ value, size = "md" }) {
|
|
15
|
+
const pct = Math.min(100, Math.max(0, value));
|
|
16
|
+
const sizePx = "number" == typeof size ? size : SIZE_MAP[size];
|
|
17
|
+
const r = 2;
|
|
18
|
+
const dash = 11.3097335529;
|
|
19
|
+
const gap = 22.6194671058;
|
|
20
|
+
const strokeDashoffset = dash - pct / 100 * dash;
|
|
21
|
+
const color = getColor(value);
|
|
22
|
+
if (100 === pct) return /*#__PURE__*/ jsx("svg", {
|
|
23
|
+
width: sizePx,
|
|
24
|
+
height: sizePx,
|
|
25
|
+
viewBox: "0 0 14 14",
|
|
26
|
+
fill: color,
|
|
27
|
+
"aria-hidden": "true",
|
|
28
|
+
className: "checkmark-animated",
|
|
29
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
30
|
+
fillRule: "evenodd",
|
|
31
|
+
clipRule: "evenodd",
|
|
32
|
+
d: "M7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0ZM11.101 5.10104C11.433 4.76909 11.433 4.23091 11.101 3.89896C10.7691 3.56701 10.2309 3.56701 9.89896 3.89896L5.5 8.29792L4.10104 6.89896C3.7691 6.56701 3.2309 6.56701 2.89896 6.89896C2.56701 7.2309 2.56701 7.7691 2.89896 8.10104L4.89896 10.101C5.2309 10.433 5.7691 10.433 6.10104 10.101L11.101 5.10104Z"
|
|
33
|
+
})
|
|
34
|
+
});
|
|
35
|
+
return /*#__PURE__*/ jsxs("svg", {
|
|
36
|
+
width: sizePx,
|
|
37
|
+
height: sizePx,
|
|
38
|
+
viewBox: "0 0 14 14",
|
|
39
|
+
fill: "none",
|
|
40
|
+
children: [
|
|
41
|
+
/*#__PURE__*/ jsx("circle", {
|
|
42
|
+
cx: "7",
|
|
43
|
+
cy: "7",
|
|
44
|
+
r: "6",
|
|
45
|
+
fill: "none",
|
|
46
|
+
stroke: color,
|
|
47
|
+
strokeWidth: "1.5",
|
|
48
|
+
strokeDasharray: "3.14 0",
|
|
49
|
+
strokeDashoffset: "-0.7"
|
|
50
|
+
}),
|
|
51
|
+
/*#__PURE__*/ jsx("circle", {
|
|
52
|
+
className: "transition-colors duration-300",
|
|
53
|
+
cx: "7",
|
|
54
|
+
cy: "7",
|
|
55
|
+
r: r,
|
|
56
|
+
fill: "none",
|
|
57
|
+
stroke: color,
|
|
58
|
+
strokeWidth: "4",
|
|
59
|
+
strokeDasharray: `${dash} ${gap}`,
|
|
60
|
+
strokeDashoffset: strokeDashoffset,
|
|
61
|
+
transform: "rotate(-90 7 7)"
|
|
62
|
+
})
|
|
63
|
+
]
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
export { CircularProgress };
|
package/dist/index.css
CHANGED
|
@@ -702,6 +702,10 @@
|
|
|
702
702
|
height: 100%;
|
|
703
703
|
}
|
|
704
704
|
|
|
705
|
+
.h-\(--accordion-panel-height\) {
|
|
706
|
+
height: var(--accordion-panel-height);
|
|
707
|
+
}
|
|
708
|
+
|
|
705
709
|
.h-\(--active-tab-height\) {
|
|
706
710
|
height: var(--active-tab-height);
|
|
707
711
|
}
|
|
@@ -834,6 +838,10 @@
|
|
|
834
838
|
width: calc(var(--spacing) * 80);
|
|
835
839
|
}
|
|
836
840
|
|
|
841
|
+
.w-\[480px\] {
|
|
842
|
+
width: 480px;
|
|
843
|
+
}
|
|
844
|
+
|
|
837
845
|
.w-\[calc\(100\%-\(--spacing\(12\)\)\)\] {
|
|
838
846
|
width: calc(100% - (calc(var(--spacing) * 12)));
|
|
839
847
|
}
|
|
@@ -850,6 +858,10 @@
|
|
|
850
858
|
width: 100%;
|
|
851
859
|
}
|
|
852
860
|
|
|
861
|
+
.w-screen {
|
|
862
|
+
width: 100vw;
|
|
863
|
+
}
|
|
864
|
+
|
|
853
865
|
.max-w-\(--available-width\) {
|
|
854
866
|
max-width: var(--available-width);
|
|
855
867
|
}
|
|
@@ -967,6 +979,11 @@
|
|
|
967
979
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
968
980
|
}
|
|
969
981
|
|
|
982
|
+
.translate-y-0\.5 {
|
|
983
|
+
--tw-translate-y: calc(var(--spacing) * .5);
|
|
984
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
985
|
+
}
|
|
986
|
+
|
|
970
987
|
.scale-84 {
|
|
971
988
|
--tw-scale-x: 84%;
|
|
972
989
|
--tw-scale-y: 84%;
|
|
@@ -1596,6 +1613,10 @@
|
|
|
1596
1613
|
padding-block: calc(calc(var(--spacing) * 2) - 1px);
|
|
1597
1614
|
}
|
|
1598
1615
|
|
|
1616
|
+
.py-\[calc\(--spacing\(4\)-1px\)\] {
|
|
1617
|
+
padding-block: calc(calc(var(--spacing) * 4) - 1px);
|
|
1618
|
+
}
|
|
1619
|
+
|
|
1599
1620
|
.ps-1\.5 {
|
|
1600
1621
|
padding-inline-start: calc(var(--spacing) * 1.5);
|
|
1601
1622
|
}
|
|
@@ -1616,6 +1637,10 @@
|
|
|
1616
1637
|
padding-inline-end: calc(calc(var(--spacing) * 3) - 1px);
|
|
1617
1638
|
}
|
|
1618
1639
|
|
|
1640
|
+
.pt-0 {
|
|
1641
|
+
padding-top: calc(var(--spacing) * 0);
|
|
1642
|
+
}
|
|
1643
|
+
|
|
1619
1644
|
.pt-6 {
|
|
1620
1645
|
padding-top: calc(var(--spacing) * 6);
|
|
1621
1646
|
}
|
|
@@ -1624,6 +1649,10 @@
|
|
|
1624
1649
|
padding-top: calc(calc(var(--spacing) * 3) - 1px);
|
|
1625
1650
|
}
|
|
1626
1651
|
|
|
1652
|
+
.pb-4 {
|
|
1653
|
+
padding-bottom: calc(var(--spacing) * 4);
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1627
1656
|
.pb-\[calc\(--spacing\(3\)-1px\)\] {
|
|
1628
1657
|
padding-bottom: calc(calc(var(--spacing) * 3) - 1px);
|
|
1629
1658
|
}
|
|
@@ -1916,6 +1945,12 @@
|
|
|
1916
1945
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1917
1946
|
}
|
|
1918
1947
|
|
|
1948
|
+
.transition-\[height\] {
|
|
1949
|
+
transition-property: height;
|
|
1950
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1951
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1952
|
+
}
|
|
1953
|
+
|
|
1919
1954
|
.transition-\[opacity\,translate\] {
|
|
1920
1955
|
transition-property: opacity, translate;
|
|
1921
1956
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
@@ -1970,6 +2005,12 @@
|
|
|
1970
2005
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1971
2006
|
}
|
|
1972
2007
|
|
|
2008
|
+
.transition-transform {
|
|
2009
|
+
transition-property: transform, translate, scale, rotate;
|
|
2010
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
2011
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
2012
|
+
}
|
|
2013
|
+
|
|
1973
2014
|
.delay-300 {
|
|
1974
2015
|
transition-delay: .3s;
|
|
1975
2016
|
}
|
|
@@ -2576,6 +2617,11 @@
|
|
|
2576
2617
|
display: none;
|
|
2577
2618
|
}
|
|
2578
2619
|
|
|
2620
|
+
.last\:border-b-0:last-child {
|
|
2621
|
+
border-bottom-style: var(--tw-border-style);
|
|
2622
|
+
border-bottom-width: 0;
|
|
2623
|
+
}
|
|
2624
|
+
|
|
2579
2625
|
.empty\:m-0:empty {
|
|
2580
2626
|
margin: calc(var(--spacing) * 0);
|
|
2581
2627
|
}
|
|
@@ -3174,6 +3220,10 @@
|
|
|
3174
3220
|
}
|
|
3175
3221
|
}
|
|
3176
3222
|
|
|
3223
|
+
.data-ending-style\:h-0[data-ending-style] {
|
|
3224
|
+
height: calc(var(--spacing) * 0);
|
|
3225
|
+
}
|
|
3226
|
+
|
|
3177
3227
|
.data-ending-style\:-translate-x-12[data-ending-style] {
|
|
3178
3228
|
--tw-translate-x: calc(var(--spacing) * -12);
|
|
3179
3229
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
@@ -3312,6 +3362,10 @@
|
|
|
3312
3362
|
color: var(--foreground);
|
|
3313
3363
|
}
|
|
3314
3364
|
|
|
3365
|
+
.data-starting-style\:h-0[data-starting-style] {
|
|
3366
|
+
height: calc(var(--spacing) * 0);
|
|
3367
|
+
}
|
|
3368
|
+
|
|
3315
3369
|
.data-starting-style\:-translate-x-12[data-starting-style] {
|
|
3316
3370
|
--tw-translate-x: calc(var(--spacing) * -12);
|
|
3317
3371
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
@@ -3597,6 +3651,10 @@
|
|
|
3597
3651
|
transform: translateY(calc(-100% - var(--toast-inset)));
|
|
3598
3652
|
}
|
|
3599
3653
|
|
|
3654
|
+
.data-\[size\=touch\]\:py-\(--spacing-touch\)[data-size="touch"] {
|
|
3655
|
+
padding-block: var(--spacing-touch);
|
|
3656
|
+
}
|
|
3657
|
+
|
|
3600
3658
|
:is(.has-\[\+\[data-slot\=autocomplete-trigger\]\,\+\[data-slot\=autocomplete-clear\]\]\:\*\:data-\[slot\=autocomplete-input\]\:pe-6\.5:has( + [data-slot="autocomplete-trigger"], + [data-slot="autocomplete-clear"]) > *)[data-slot="autocomplete-input"] {
|
|
3601
3659
|
padding-inline-end: calc(var(--spacing) * 6.5);
|
|
3602
3660
|
}
|
|
@@ -4609,6 +4667,10 @@
|
|
|
4609
4667
|
border-bottom-width: 0;
|
|
4610
4668
|
}
|
|
4611
4669
|
|
|
4670
|
+
.\[\&\[data-panel-open\]\>svg\]\:rotate-180[data-panel-open] > svg {
|
|
4671
|
+
rotate: 180deg;
|
|
4672
|
+
}
|
|
4673
|
+
|
|
4612
4674
|
[data-size="sm"] + .\[\[data-size\=sm\]\+\&\]\:px-\[calc\(--spacing\(2\.5\)-1px\)\] {
|
|
4613
4675
|
padding-inline: calc(calc(var(--spacing) * 2.5) - 1px);
|
|
4614
4676
|
}
|
|
@@ -4873,6 +4935,7 @@
|
|
|
4873
4935
|
--sidebar-accent-foreground: oklch(20.5% 0 0);
|
|
4874
4936
|
--sidebar-border: oklch(92.2% 0 0);
|
|
4875
4937
|
--sidebar-ring: oklch(70.8% 0 0);
|
|
4938
|
+
--spacing-touch: calc(var(--spacing) * 4);
|
|
4876
4939
|
--info: var(--color-blue-500);
|
|
4877
4940
|
--info-foreground: var(--color-blue-700);
|
|
4878
4941
|
--success: var(--color-emerald-500);
|
|
@@ -4922,6 +4985,28 @@
|
|
|
4922
4985
|
--warning-foreground: var(--color-amber-400);
|
|
4923
4986
|
}
|
|
4924
4987
|
|
|
4988
|
+
@keyframes checkmark-pop {
|
|
4989
|
+
0% {
|
|
4990
|
+
opacity: 0;
|
|
4991
|
+
transform: scale(.5);
|
|
4992
|
+
}
|
|
4993
|
+
|
|
4994
|
+
60% {
|
|
4995
|
+
opacity: 1;
|
|
4996
|
+
transform: scale(1.1);
|
|
4997
|
+
}
|
|
4998
|
+
|
|
4999
|
+
to {
|
|
5000
|
+
opacity: 1;
|
|
5001
|
+
transform: scale(1);
|
|
5002
|
+
}
|
|
5003
|
+
}
|
|
5004
|
+
|
|
5005
|
+
.checkmark-animated {
|
|
5006
|
+
transform-origin: 50%;
|
|
5007
|
+
animation: .2s ease-out forwards checkmark-pop;
|
|
5008
|
+
}
|
|
5009
|
+
|
|
4925
5010
|
@property --tw-translate-x {
|
|
4926
5011
|
syntax: "*";
|
|
4927
5012
|
inherits: false;
|
package/dist/index.d.ts
CHANGED
|
@@ -44,3 +44,6 @@ export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, Toolba
|
|
|
44
44
|
export { Tooltip, TooltipContent, TooltipPopup, TooltipProvider, TooltipTrigger, } from "./tooltip";
|
|
45
45
|
export { ToastProvider, toastManager } from "./toast";
|
|
46
46
|
export type { ToastPosition } from "./toast";
|
|
47
|
+
export { CircularProgress } from "./circular-progress";
|
|
48
|
+
export type { CircularProgressProps } from "./circular-progress";
|
|
49
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionPanel, AccordionTrigger, } from "./accordion";
|
package/dist/index.js
CHANGED
|
@@ -41,4 +41,6 @@ import { ToggleGroup, ToggleGroupItem, ToggleGroupSeparator } from "./toggle-gro
|
|
|
41
41
|
import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator } from "./toolbar.js";
|
|
42
42
|
import { Tooltip, TooltipContent, TooltipPopup, TooltipProvider, TooltipTrigger } from "./tooltip.js";
|
|
43
43
|
import { ToastProvider, toastManager } from "./toast.js";
|
|
44
|
-
|
|
44
|
+
import { CircularProgress } from "./circular-progress.js";
|
|
45
|
+
import { Accordion, AccordionContent, AccordionItem, AccordionPanel, AccordionTrigger } from "./accordion.js";
|
|
46
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionPanel, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Autocomplete, AutocompleteClear, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue, Avatar, AvatarFallback, AvatarImage, Badge, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardPanel, CardTitle, Checkbox, CheckboxGroup, CircularProgress, Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Dialog, DialogBackdrop, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldValidity, Fieldset, FieldsetLegend, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, Group, GroupSeparator, GroupText, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubPopup, MenuSubTrigger, MenuTrigger, NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Radio, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPopup, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, SliderValue, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsPanel, TabsTab, TabsTrigger, Textarea, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupSeparator, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, Tooltip, TooltipContent, TooltipPopup, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, groupVariants, sheetPopupVariants, toastManager, toggleVariants };
|
package/dist/input.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Input as InputPrimitive } from "@base-ui-components/react/input";
|
|
2
2
|
import type * as React from "react";
|
|
3
3
|
type InputProps = Omit<InputPrimitive.Props & React.RefAttributes<HTMLInputElement>, "size"> & {
|
|
4
|
-
size?: "sm" | "default" | "lg" | number;
|
|
4
|
+
size?: "sm" | "default" | "lg" | "touch" | number;
|
|
5
5
|
unstyled?: boolean;
|
|
6
6
|
};
|
|
7
7
|
declare function Input({ className, size, unstyled, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/input.js
CHANGED
|
@@ -7,7 +7,7 @@ function input_Input({ className, size = "default", unstyled = false, ...props }
|
|
|
7
7
|
"data-size": size,
|
|
8
8
|
"data-slot": "input-control",
|
|
9
9
|
children: /*#__PURE__*/ jsx(Input, {
|
|
10
|
-
className: cn("w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground/64", "sm" === size && "px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]", "lg" === size && "py-[calc(--spacing(2)-1px)]", "search" === props.type && "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none", "file" === props.type && "text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm"),
|
|
10
|
+
className: cn("w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground/64", "sm" === size && "px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]", "lg" === size && "py-[calc(--spacing(2)-1px)]", "touch" === size && "py-[calc(--spacing(4)-1px)] px-[calc(--spacing(4)-1px)]", "search" === props.type && "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none", "file" === props.type && "text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm"),
|
|
11
11
|
"data-slot": "input",
|
|
12
12
|
size: "number" == typeof size ? size : void 0,
|
|
13
13
|
...props
|
package/dist/menu.d.ts
CHANGED
|
@@ -10,21 +10,27 @@ declare function MenuPopup({ className, sideOffset, align, alignOffset, side, ..
|
|
|
10
10
|
side?: MenuPrimitive.Positioner.Props["side"];
|
|
11
11
|
}): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
declare function MenuGroup(props: MenuPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
declare function MenuItem({ className, inset, variant, ...props }: MenuPrimitive.Item.Props & {
|
|
13
|
+
declare function MenuItem({ className, inset, variant, size, ...props }: MenuPrimitive.Item.Props & {
|
|
14
14
|
inset?: boolean;
|
|
15
15
|
variant?: "default" | "destructive";
|
|
16
|
+
size?: "default" | "touch";
|
|
17
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare function MenuCheckboxItem({ className, children, checked, size, ...props }: MenuPrimitive.CheckboxItem.Props & {
|
|
19
|
+
size?: "default" | "touch";
|
|
16
20
|
}): import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
declare function MenuCheckboxItem({ className, children, checked, ...props }: MenuPrimitive.CheckboxItem.Props): import("react/jsx-runtime").JSX.Element;
|
|
18
21
|
declare function MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props): import("react/jsx-runtime").JSX.Element;
|
|
19
|
-
declare function MenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props
|
|
22
|
+
declare function MenuRadioItem({ className, children, size, ...props }: MenuPrimitive.RadioItem.Props & {
|
|
23
|
+
size?: "default" | "touch";
|
|
24
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
20
25
|
declare function MenuGroupLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
|
|
21
26
|
inset?: boolean;
|
|
22
27
|
}): import("react/jsx-runtime").JSX.Element;
|
|
23
28
|
declare function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
|
|
24
29
|
declare function MenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
25
30
|
declare function MenuSub(props: MenuPrimitive.SubmenuRoot.Props): import("react/jsx-runtime").JSX.Element;
|
|
26
|
-
declare function MenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
|
|
31
|
+
declare function MenuSubTrigger({ className, inset, children, size, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
|
|
27
32
|
inset?: boolean;
|
|
33
|
+
size?: "default" | "touch";
|
|
28
34
|
}): import("react/jsx-runtime").JSX.Element;
|
|
29
35
|
declare function MenuSubPopup({ className, sideOffset, alignOffset, align, ...props }: MenuPrimitive.Popup.Props & {
|
|
30
36
|
align?: MenuPrimitive.Positioner.Props["align"];
|
package/dist/menu.js
CHANGED
|
@@ -36,20 +36,22 @@ function MenuGroup(props) {
|
|
|
36
36
|
...props
|
|
37
37
|
});
|
|
38
38
|
}
|
|
39
|
-
function MenuItem({ className, inset, variant = "default", ...props }) {
|
|
39
|
+
function MenuItem({ className, inset, variant = "default", size = "default", ...props }) {
|
|
40
40
|
return /*#__PURE__*/ jsx(Menu.Item, {
|
|
41
|
-
className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
|
|
41
|
+
className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[size=touch]:py-(--spacing-touch)", className),
|
|
42
42
|
"data-inset": inset,
|
|
43
43
|
"data-slot": "menu-item",
|
|
44
44
|
"data-variant": variant,
|
|
45
|
+
"data-size": size,
|
|
45
46
|
...props
|
|
46
47
|
});
|
|
47
48
|
}
|
|
48
|
-
function MenuCheckboxItem({ className, children, checked, ...props }) {
|
|
49
|
+
function MenuCheckboxItem({ className, children, checked, size = "default", ...props }) {
|
|
49
50
|
return /*#__PURE__*/ jsxs(Menu.CheckboxItem, {
|
|
50
51
|
checked: checked,
|
|
51
|
-
className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
|
|
52
|
+
className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[size=touch]:py-(--spacing-touch)", className),
|
|
52
53
|
"data-slot": "menu-checkbox-item",
|
|
54
|
+
"data-size": size,
|
|
53
55
|
...props,
|
|
54
56
|
children: [
|
|
55
57
|
/*#__PURE__*/ jsx(Menu.CheckboxItemIndicator, {
|
|
@@ -69,10 +71,11 @@ function MenuRadioGroup(props) {
|
|
|
69
71
|
...props
|
|
70
72
|
});
|
|
71
73
|
}
|
|
72
|
-
function MenuRadioItem({ className, children, ...props }) {
|
|
74
|
+
function MenuRadioItem({ className, children, size = "default", ...props }) {
|
|
73
75
|
return /*#__PURE__*/ jsxs(Menu.RadioItem, {
|
|
74
|
-
className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
|
|
76
|
+
className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[size=touch]:py-(--spacing-touch)", className),
|
|
75
77
|
"data-slot": "menu-radio-item",
|
|
78
|
+
"data-size": size,
|
|
76
79
|
...props,
|
|
77
80
|
children: [
|
|
78
81
|
/*#__PURE__*/ jsx(Menu.RadioItemIndicator, {
|
|
@@ -114,11 +117,12 @@ function MenuSub(props) {
|
|
|
114
117
|
...props
|
|
115
118
|
});
|
|
116
119
|
}
|
|
117
|
-
function MenuSubTrigger({ className, inset, children, ...props }) {
|
|
120
|
+
function MenuSubTrigger({ className, inset, children, size = "default", ...props }) {
|
|
118
121
|
return /*#__PURE__*/ jsxs(Menu.SubmenuTrigger, {
|
|
119
|
-
className: cn("flex items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className),
|
|
122
|
+
className: cn("flex items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none data-[size=touch]:py-(--spacing-touch)", className),
|
|
120
123
|
"data-inset": inset,
|
|
121
124
|
"data-slot": "menu-sub-trigger",
|
|
125
|
+
"data-size": size,
|
|
122
126
|
...props,
|
|
123
127
|
children: [
|
|
124
128
|
children,
|
package/dist/styles.css
CHANGED
|
@@ -4,141 +4,162 @@
|
|
|
4
4
|
@custom-variant dark (&:is(.dark *));
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
7
|
+
--background: oklch(1 0 0);
|
|
8
|
+
--foreground: oklch(0.145 0 0);
|
|
9
|
+
--card: oklch(1 0 0);
|
|
10
|
+
--card-foreground: oklch(0.145 0 0);
|
|
11
|
+
--popover: oklch(1 0 0);
|
|
12
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
13
|
+
--primary: oklch(0.205 0 0);
|
|
14
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
15
|
+
--secondary: oklch(0.97 0 0);
|
|
16
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
17
|
+
--muted: oklch(0.97 0 0);
|
|
18
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
19
|
+
--accent: oklch(0.97 0 0);
|
|
20
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
21
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
22
|
+
--destructive-foreground: oklch(0.577 0.245 27.325);
|
|
23
|
+
--border: oklch(0.922 0 0);
|
|
24
|
+
--input: oklch(0.922 0 0);
|
|
25
|
+
--ring: oklch(0.708 0 0);
|
|
26
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
27
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
28
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
29
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
30
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
31
|
+
--radius: 0.625rem;
|
|
32
|
+
--sidebar: oklch(0.985 0 0);
|
|
33
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
34
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
35
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
36
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
37
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
38
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
39
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
40
|
+
--spacing-touch: calc(var(--spacing) * 4);
|
|
40
41
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
42
|
+
--info: var(--color-blue-500);
|
|
43
|
+
--info-foreground: var(--color-blue-700);
|
|
44
|
+
--success: var(--color-emerald-500);
|
|
45
|
+
--success-foreground: var(--color-emerald-700);
|
|
46
|
+
--warning: var(--color-amber-500);
|
|
47
|
+
--warning-foreground: var(--color-amber-700);
|
|
47
48
|
}
|
|
48
49
|
|
|
49
50
|
.dark {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
51
|
+
--background: oklch(0.145 0 0);
|
|
52
|
+
--foreground: oklch(0.985 0 0);
|
|
53
|
+
--card: oklch(0.145 0 0);
|
|
54
|
+
--card-foreground: oklch(0.985 0 0);
|
|
55
|
+
--popover: oklch(0.145 0 0);
|
|
56
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
57
|
+
--primary: oklch(0.985 0 0);
|
|
58
|
+
--primary-foreground: oklch(0.205 0 0);
|
|
59
|
+
--secondary: oklch(0.269 0 0);
|
|
60
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
61
|
+
--muted: oklch(0.269 0 0);
|
|
62
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
63
|
+
--accent: oklch(0.269 0 0);
|
|
64
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
65
|
+
--destructive: oklch(0.396 0.141 25.723);
|
|
66
|
+
--destructive-foreground: oklch(0.637 0.237 25.331);
|
|
67
|
+
--border: oklch(0.269 0 0);
|
|
68
|
+
--input: oklch(0.269 0 0);
|
|
69
|
+
--ring: oklch(0.439 0 0);
|
|
70
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
71
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
72
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
73
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
74
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
75
|
+
--sidebar: oklch(0.205 0 0);
|
|
76
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
77
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
78
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
79
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
80
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
81
|
+
--sidebar-border: oklch(0.269 0 0);
|
|
82
|
+
--sidebar-ring: oklch(0.439 0 0);
|
|
82
83
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
--info: var(--color-blue-500);
|
|
85
|
+
--info-foreground: var(--color-blue-400);
|
|
86
|
+
--success: var(--color-emerald-500);
|
|
87
|
+
--success-foreground: var(--color-emerald-400);
|
|
88
|
+
--warning: var(--color-amber-500);
|
|
89
|
+
--warning-foreground: var(--color-amber-400);
|
|
89
90
|
}
|
|
90
91
|
|
|
91
92
|
@theme inline {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
93
|
+
--color-background: var(--background);
|
|
94
|
+
--color-foreground: var(--foreground);
|
|
95
|
+
--color-card: var(--card);
|
|
96
|
+
--color-card-foreground: var(--card-foreground);
|
|
97
|
+
--color-popover: var(--popover);
|
|
98
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
99
|
+
--color-primary: var(--primary);
|
|
100
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
101
|
+
--color-secondary: var(--secondary);
|
|
102
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
103
|
+
--color-muted: var(--muted);
|
|
104
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
105
|
+
--color-accent: var(--accent);
|
|
106
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
107
|
+
--color-destructive: var(--destructive);
|
|
108
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
109
|
+
--color-border: var(--border);
|
|
110
|
+
--color-input: var(--input);
|
|
111
|
+
--color-ring: var(--ring);
|
|
112
|
+
--color-chart-1: var(--chart-1);
|
|
113
|
+
--color-chart-2: var(--chart-2);
|
|
114
|
+
--color-chart-3: var(--chart-3);
|
|
115
|
+
--color-chart-4: var(--chart-4);
|
|
116
|
+
--color-chart-5: var(--chart-5);
|
|
117
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
118
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
119
|
+
--radius-lg: var(--radius);
|
|
120
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
121
|
+
--color-sidebar: var(--sidebar);
|
|
122
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
123
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
124
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
125
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
126
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
127
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
128
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
128
129
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
130
|
+
--color-info: var(--info);
|
|
131
|
+
--color-info-foreground: var(--info-foreground);
|
|
132
|
+
--color-success: var(--success);
|
|
133
|
+
--color-success-foreground: var(--success-foreground);
|
|
134
|
+
--color-warning: var(--warning);
|
|
135
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
135
136
|
}
|
|
136
137
|
|
|
137
138
|
@layer base {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
139
|
+
* {
|
|
140
|
+
@apply border-border outline-ring/50;
|
|
141
|
+
}
|
|
142
|
+
body {
|
|
143
|
+
@apply bg-background text-foreground;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
@keyframes checkmark-pop {
|
|
148
|
+
0% {
|
|
149
|
+
opacity: 0;
|
|
150
|
+
transform: scale(0.5);
|
|
151
|
+
}
|
|
152
|
+
60% {
|
|
153
|
+
opacity: 1;
|
|
154
|
+
transform: scale(1.1);
|
|
155
|
+
}
|
|
156
|
+
100% {
|
|
157
|
+
opacity: 1;
|
|
158
|
+
transform: scale(1);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.checkmark-animated {
|
|
163
|
+
animation: checkmark-pop 200ms ease-out forwards;
|
|
164
|
+
transform-origin: center;
|
|
144
165
|
}
|