@biotechusa/pdo-ui 1.0.3 → 1.0.5

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.
@@ -0,0 +1,5 @@
1
+ export interface CircularProgressProps {
2
+ value: number;
3
+ size?: "sm" | "md" | "lg" | number;
4
+ }
5
+ export declare function CircularProgress({ value, size, }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;
@@ -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
@@ -1596,6 +1596,10 @@
1596
1596
  padding-block: calc(calc(var(--spacing) * 2) - 1px);
1597
1597
  }
1598
1598
 
1599
+ .py-\[calc\(--spacing\(4\)-1px\)\] {
1600
+ padding-block: calc(calc(var(--spacing) * 4) - 1px);
1601
+ }
1602
+
1599
1603
  .ps-1\.5 {
1600
1604
  padding-inline-start: calc(var(--spacing) * 1.5);
1601
1605
  }
@@ -3597,6 +3601,10 @@
3597
3601
  transform: translateY(calc(-100% - var(--toast-inset)));
3598
3602
  }
3599
3603
 
3604
+ .data-\[size\=touch\]\:py-\(--spacing-touch\)[data-size="touch"] {
3605
+ padding-block: var(--spacing-touch);
3606
+ }
3607
+
3600
3608
  :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
3609
  padding-inline-end: calc(var(--spacing) * 6.5);
3602
3610
  }
@@ -4873,6 +4881,7 @@
4873
4881
  --sidebar-accent-foreground: oklch(20.5% 0 0);
4874
4882
  --sidebar-border: oklch(92.2% 0 0);
4875
4883
  --sidebar-ring: oklch(70.8% 0 0);
4884
+ --spacing-touch: calc(var(--spacing) * 4);
4876
4885
  --info: var(--color-blue-500);
4877
4886
  --info-foreground: var(--color-blue-700);
4878
4887
  --success: var(--color-emerald-500);
@@ -4922,6 +4931,28 @@
4922
4931
  --warning-foreground: var(--color-amber-400);
4923
4932
  }
4924
4933
 
4934
+ @keyframes checkmark-pop {
4935
+ 0% {
4936
+ opacity: 0;
4937
+ transform: scale(.5);
4938
+ }
4939
+
4940
+ 60% {
4941
+ opacity: 1;
4942
+ transform: scale(1.1);
4943
+ }
4944
+
4945
+ to {
4946
+ opacity: 1;
4947
+ transform: scale(1);
4948
+ }
4949
+ }
4950
+
4951
+ .checkmark-animated {
4952
+ transform-origin: 50%;
4953
+ animation: .2s ease-out forwards checkmark-pop;
4954
+ }
4955
+
4925
4956
  @property --tw-translate-x {
4926
4957
  syntax: "*";
4927
4958
  inherits: false;
package/dist/index.d.ts CHANGED
@@ -1,44 +1,48 @@
1
- import './index.css';
2
- export { Alert, AlertAction, AlertDescription, AlertTitle } from './alert';
3
- export { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } from './alert-dialog';
4
- export { Autocomplete, AutocompleteClear, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue, } from './autocomplete';
5
- export { Avatar, AvatarFallback, AvatarImage } from './avatar';
6
- export { Badge, badgeVariants } from './badge';
7
- export { Button, buttonVariants } from './button';
8
- export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardPanel, CardTitle, } from './card';
9
- export { Checkbox } from './checkbox';
10
- export { CheckboxGroup } from './checkbox-group';
11
- export { Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, } from './combobox';
12
- export { Dialog, DialogBackdrop, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, } from './dialog';
13
- export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from './empty';
14
- export { Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldValidity, } from './field';
15
- export { Fieldset, FieldsetLegend } from './fieldset';
16
- export { Form } from './form';
17
- export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, } from './frame';
18
- export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Group, GroupSeparator, GroupText, groupVariants, } from './group';
19
- export type { InputProps } from './input';
20
- export { Input } from './input';
21
- export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, } from './input-group';
22
- export { Label } from './label';
23
- export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubPopup, MenuSubTrigger, MenuTrigger, } from './menu';
24
- export { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea, } from './number-field';
25
- export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from './pagination';
26
- export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger, } from './popover';
27
- export { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, } from './progress';
28
- export { Radio, RadioGroup, RadioGroupItem } from './radio-group';
29
- export { ScrollArea, ScrollBar } from './scroll-area';
30
- export { Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, } from './select';
31
- export { Separator } from './separator';
32
- export { Sheet, SheetBackdrop, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPopup, SheetPortal, SheetTitle, SheetTrigger, sheetPopupVariants, } from './sheet';
33
- export { Skeleton } from './skeleton';
34
- export { Slider, SliderValue } from './slider';
35
- export { Spinner } from './spinner';
36
- export { Switch } from './switch';
37
- export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './table';
38
- export { Tabs, TabsContent, TabsList, TabsPanel, TabsTab, TabsTrigger, } from './tabs';
39
- export type { TextareaProps } from './textarea';
40
- export { Textarea } from './textarea';
41
- export { Toggle, toggleVariants } from './toggle';
42
- export { ToggleGroup, ToggleGroupItem, ToggleGroupSeparator, } from './toggle-group';
43
- export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, } from './toolbar';
44
- export { Tooltip, TooltipContent, TooltipPopup, TooltipProvider, TooltipTrigger, } from './tooltip';
1
+ import "./index.css";
2
+ export { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert";
3
+ export { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } from "./alert-dialog";
4
+ export { Autocomplete, AutocompleteClear, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue, } from "./autocomplete";
5
+ export { Avatar, AvatarFallback, AvatarImage } from "./avatar";
6
+ export { Badge, badgeVariants } from "./badge";
7
+ export { Button, buttonVariants } from "./button";
8
+ export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardPanel, CardTitle, } from "./card";
9
+ export { Checkbox } from "./checkbox";
10
+ export { CheckboxGroup } from "./checkbox-group";
11
+ export { Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, } from "./combobox";
12
+ export { Dialog, DialogBackdrop, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, } from "./dialog";
13
+ export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "./empty";
14
+ export { Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldValidity, } from "./field";
15
+ export { Fieldset, FieldsetLegend } from "./fieldset";
16
+ export { Form } from "./form";
17
+ export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, } from "./frame";
18
+ export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Group, GroupSeparator, GroupText, groupVariants, } from "./group";
19
+ export type { InputProps } from "./input";
20
+ export { Input } from "./input";
21
+ export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, } from "./input-group";
22
+ export { Label } from "./label";
23
+ export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubPopup, MenuSubTrigger, MenuTrigger, } from "./menu";
24
+ export { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea, } from "./number-field";
25
+ export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./pagination";
26
+ export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger, } from "./popover";
27
+ export { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, } from "./progress";
28
+ export { Radio, RadioGroup, RadioGroupItem } from "./radio-group";
29
+ export { ScrollArea, ScrollBar } from "./scroll-area";
30
+ export { Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, } from "./select";
31
+ export { Separator } from "./separator";
32
+ export { Sheet, SheetBackdrop, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPopup, SheetPortal, SheetTitle, SheetTrigger, sheetPopupVariants, } from "./sheet";
33
+ export { Skeleton } from "./skeleton";
34
+ export { Slider, SliderValue } from "./slider";
35
+ export { Spinner } from "./spinner";
36
+ export { Switch } from "./switch";
37
+ export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./table";
38
+ export { Tabs, TabsContent, TabsList, TabsPanel, TabsTab, TabsTrigger, } from "./tabs";
39
+ export type { TextareaProps } from "./textarea";
40
+ export { Textarea } from "./textarea";
41
+ export { Toggle, toggleVariants } from "./toggle";
42
+ export { ToggleGroup, ToggleGroupItem, ToggleGroupSeparator, } from "./toggle-group";
43
+ export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, } from "./toolbar";
44
+ export { Tooltip, TooltipContent, TooltipPopup, TooltipProvider, TooltipTrigger, } from "./tooltip";
45
+ export { ToastProvider, toastManager } from "./toast";
46
+ export type { ToastPosition } from "./toast";
47
+ export { CircularProgress } from "./circular-progress";
48
+ export type { CircularProgressProps } from "./circular-progress";
package/dist/index.js CHANGED
@@ -40,4 +40,6 @@ import { Toggle, toggleVariants } from "./toggle.js";
40
40
  import { ToggleGroup, ToggleGroupItem, ToggleGroupSeparator } from "./toggle-group.js";
41
41
  import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator } from "./toolbar.js";
42
42
  import { Tooltip, TooltipContent, TooltipPopup, TooltipProvider, TooltipTrigger } from "./tooltip.js";
43
- export { 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, 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, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupSeparator, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, Tooltip, TooltipContent, TooltipPopup, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, groupVariants, sheetPopupVariants, toggleVariants };
43
+ import { ToastProvider, toastManager } from "./toast.js";
44
+ import { CircularProgress } from "./circular-progress.js";
45
+ export { 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): import("react/jsx-runtime").JSX.Element;
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
- --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);
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
- --info: var(--color-blue-500);
42
- --info-foreground: var(--color-blue-700);
43
- --success: var(--color-emerald-500);
44
- --success-foreground: var(--color-emerald-700);
45
- --warning: var(--color-amber-500);
46
- --warning-foreground: var(--color-amber-700);
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
- --background: oklch(0.145 0 0);
51
- --foreground: oklch(0.985 0 0);
52
- --card: oklch(0.145 0 0);
53
- --card-foreground: oklch(0.985 0 0);
54
- --popover: oklch(0.145 0 0);
55
- --popover-foreground: oklch(0.985 0 0);
56
- --primary: oklch(0.985 0 0);
57
- --primary-foreground: oklch(0.205 0 0);
58
- --secondary: oklch(0.269 0 0);
59
- --secondary-foreground: oklch(0.985 0 0);
60
- --muted: oklch(0.269 0 0);
61
- --muted-foreground: oklch(0.708 0 0);
62
- --accent: oklch(0.269 0 0);
63
- --accent-foreground: oklch(0.985 0 0);
64
- --destructive: oklch(0.396 0.141 25.723);
65
- --destructive-foreground: oklch(0.637 0.237 25.331);
66
- --border: oklch(0.269 0 0);
67
- --input: oklch(0.269 0 0);
68
- --ring: oklch(0.439 0 0);
69
- --chart-1: oklch(0.488 0.243 264.376);
70
- --chart-2: oklch(0.696 0.17 162.48);
71
- --chart-3: oklch(0.769 0.188 70.08);
72
- --chart-4: oklch(0.627 0.265 303.9);
73
- --chart-5: oklch(0.645 0.246 16.439);
74
- --sidebar: oklch(0.205 0 0);
75
- --sidebar-foreground: oklch(0.985 0 0);
76
- --sidebar-primary: oklch(0.488 0.243 264.376);
77
- --sidebar-primary-foreground: oklch(0.985 0 0);
78
- --sidebar-accent: oklch(0.269 0 0);
79
- --sidebar-accent-foreground: oklch(0.985 0 0);
80
- --sidebar-border: oklch(0.269 0 0);
81
- --sidebar-ring: oklch(0.439 0 0);
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
- --info: var(--color-blue-500);
84
- --info-foreground: var(--color-blue-400);
85
- --success: var(--color-emerald-500);
86
- --success-foreground: var(--color-emerald-400);
87
- --warning: var(--color-amber-500);
88
- --warning-foreground: var(--color-amber-400);
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
- --color-background: var(--background);
93
- --color-foreground: var(--foreground);
94
- --color-card: var(--card);
95
- --color-card-foreground: var(--card-foreground);
96
- --color-popover: var(--popover);
97
- --color-popover-foreground: var(--popover-foreground);
98
- --color-primary: var(--primary);
99
- --color-primary-foreground: var(--primary-foreground);
100
- --color-secondary: var(--secondary);
101
- --color-secondary-foreground: var(--secondary-foreground);
102
- --color-muted: var(--muted);
103
- --color-muted-foreground: var(--muted-foreground);
104
- --color-accent: var(--accent);
105
- --color-accent-foreground: var(--accent-foreground);
106
- --color-destructive: var(--destructive);
107
- --color-destructive-foreground: var(--destructive-foreground);
108
- --color-border: var(--border);
109
- --color-input: var(--input);
110
- --color-ring: var(--ring);
111
- --color-chart-1: var(--chart-1);
112
- --color-chart-2: var(--chart-2);
113
- --color-chart-3: var(--chart-3);
114
- --color-chart-4: var(--chart-4);
115
- --color-chart-5: var(--chart-5);
116
- --radius-sm: calc(var(--radius) - 4px);
117
- --radius-md: calc(var(--radius) - 2px);
118
- --radius-lg: var(--radius);
119
- --radius-xl: calc(var(--radius) + 4px);
120
- --color-sidebar: var(--sidebar);
121
- --color-sidebar-foreground: var(--sidebar-foreground);
122
- --color-sidebar-primary: var(--sidebar-primary);
123
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
124
- --color-sidebar-accent: var(--sidebar-accent);
125
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
126
- --color-sidebar-border: var(--sidebar-border);
127
- --color-sidebar-ring: var(--sidebar-ring);
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
- --color-info: var(--info);
130
- --color-info-foreground: var(--info-foreground);
131
- --color-success: var(--success);
132
- --color-success-foreground: var(--success-foreground);
133
- --color-warning: var(--warning);
134
- --color-warning-foreground: var(--warning-foreground);
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
- @apply border-border outline-ring/50;
140
- }
141
- body {
142
- @apply bg-background text-foreground;
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
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@biotechusa/pdo-ui",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {