@biotechusa/pdo-ui 1.0.0
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/README.md +23 -0
- package/dist/alert-dialog.js +80 -0
- package/dist/alert.js +49 -0
- package/dist/autocomplete.js +137 -0
- package/dist/avatar.js +25 -0
- package/dist/badge.js +43 -0
- package/dist/button.js +52 -0
- package/dist/card.js +52 -0
- package/dist/checkbox-group.js +10 -0
- package/dist/checkbox.js +47 -0
- package/dist/combobox.js +214 -0
- package/dist/dialog.js +89 -0
- package/dist/empty.js +85 -0
- package/dist/field.js +34 -0
- package/dist/fieldset.js +18 -0
- package/dist/form.js +11 -0
- package/dist/frame.js +45 -0
- package/dist/group.js +48 -0
- package/dist/index.css +5026 -0
- package/dist/index.js +43 -0
- package/dist/input-group.js +66 -0
- package/dist/input.js +17 -0
- package/dist/label.js +10 -0
- package/dist/lib/utils.d.ts +2 -0
- package/dist/menu.js +141 -0
- package/dist/number-field.js +88 -0
- package/dist/pagination.js +95 -0
- package/dist/popover.js +52 -0
- package/dist/progress.js +42 -0
- package/dist/radio-group.js +23 -0
- package/dist/scroll-area.js +44 -0
- package/dist/select.js +118 -0
- package/dist/separator.js +12 -0
- package/dist/sheet.js +104 -0
- package/dist/skeleton.js +10 -0
- package/dist/slider.js +61 -0
- package/dist/spinner.js +12 -0
- package/dist/src/alert-dialog.d.ts +12 -0
- package/dist/src/alert.d.ts +10 -0
- package/dist/src/autocomplete.d.ts +23 -0
- package/dist/src/avatar.d.ts +5 -0
- package/dist/src/badge.d.ts +12 -0
- package/dist/src/button.d.ts +13 -0
- package/dist/src/card.d.ts +9 -0
- package/dist/src/checkbox-group.d.ts +3 -0
- package/dist/src/checkbox.d.ts +3 -0
- package/dist/src/combobox.d.ts +25 -0
- package/dist/src/dialog.d.ts +14 -0
- package/dist/src/empty.d.ts +11 -0
- package/dist/src/field.d.ts +8 -0
- package/dist/src/fieldset.d.ts +4 -0
- package/dist/src/form.d.ts +3 -0
- package/dist/src/frame.d.ts +8 -0
- package/dist/src/group.d.ts +17 -0
- package/dist/src/index.d.ts +44 -0
- package/dist/src/input-group.d.ts +13 -0
- package/dist/src/input.d.ts +8 -0
- package/dist/src/label.d.ts +3 -0
- package/dist/src/menu.d.ts +34 -0
- package/dist/src/number-field.d.ts +12 -0
- package/dist/src/pagination.d.ts +15 -0
- package/dist/src/popover.d.ts +14 -0
- package/dist/src/progress.d.ts +7 -0
- package/dist/src/radio-group.d.ts +5 -0
- package/dist/src/scroll-area.d.ts +6 -0
- package/dist/src/select.d.ts +15 -0
- package/dist/src/separator.d.ts +3 -0
- package/dist/src/sheet.d.ts +19 -0
- package/dist/src/skeleton.d.ts +2 -0
- package/dist/src/slider.d.ts +4 -0
- package/dist/src/spinner.d.ts +2 -0
- package/dist/src/switch.d.ts +3 -0
- package/dist/src/table.d.ts +10 -0
- package/dist/src/tabs.d.ts +9 -0
- package/dist/src/textarea.d.ts +7 -0
- package/dist/src/toggle-group.d.ts +12 -0
- package/dist/src/toggle.d.ts +8 -0
- package/dist/src/toolbar.d.ts +8 -0
- package/dist/src/tooltip.d.ts +10 -0
- package/dist/styles.css +144 -0
- package/dist/switch.js +15 -0
- package/dist/table.js +63 -0
- package/dist/tabs.js +39 -0
- package/dist/textarea.js +19 -0
- package/dist/toggle-group.js +49 -0
- package/dist/toggle.js +33 -0
- package/dist/toolbar.js +46 -0
- package/dist/tooltip.js +29 -0
- package/package.json +76 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import "./index.css";
|
|
2
|
+
import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert.js";
|
|
3
|
+
import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./alert-dialog.js";
|
|
4
|
+
import { Autocomplete, AutocompleteClear, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue } from "./autocomplete.js";
|
|
5
|
+
import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
|
|
6
|
+
import { Badge, badgeVariants } from "./badge.js";
|
|
7
|
+
import { Button, buttonVariants } from "./button.js";
|
|
8
|
+
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardPanel, CardTitle } from "./card.js";
|
|
9
|
+
import { Checkbox } from "./checkbox.js";
|
|
10
|
+
import { CheckboxGroup } from "./checkbox-group.js";
|
|
11
|
+
import { Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue } from "./combobox.js";
|
|
12
|
+
import { Dialog, DialogBackdrop, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger } from "./dialog.js";
|
|
13
|
+
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
|
|
14
|
+
import { Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldValidity } from "./field.js";
|
|
15
|
+
import { Fieldset, FieldsetLegend } from "./fieldset.js";
|
|
16
|
+
import { Form } from "./form.js";
|
|
17
|
+
import { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from "./frame.js";
|
|
18
|
+
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Group, GroupSeparator, GroupText, groupVariants } from "./group.js";
|
|
19
|
+
import { Input } from "./input.js";
|
|
20
|
+
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group.js";
|
|
21
|
+
import { Label } from "./label.js";
|
|
22
|
+
import { 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.js";
|
|
23
|
+
import { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea } from "./number-field.js";
|
|
24
|
+
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination.js";
|
|
25
|
+
import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger } from "./popover.js";
|
|
26
|
+
import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "./progress.js";
|
|
27
|
+
import { Radio, RadioGroup, RadioGroupItem } from "./radio-group.js";
|
|
28
|
+
import { ScrollArea, ScrollBar } from "./scroll-area.js";
|
|
29
|
+
import { Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectSeparator, SelectTrigger, SelectValue } from "./select.js";
|
|
30
|
+
import { Separator } from "./separator.js";
|
|
31
|
+
import { Sheet, SheetBackdrop, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPopup, SheetPortal, SheetTitle, SheetTrigger, sheetPopupVariants } from "./sheet.js";
|
|
32
|
+
import { Skeleton } from "./skeleton.js";
|
|
33
|
+
import { Slider, SliderValue } from "./slider.js";
|
|
34
|
+
import { Spinner } from "./spinner.js";
|
|
35
|
+
import { Switch } from "./switch.js";
|
|
36
|
+
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
|
|
37
|
+
import { Tabs, TabsContent, TabsList, TabsPanel, TabsTab, TabsTrigger } from "./tabs.js";
|
|
38
|
+
import { Textarea } from "./textarea.js";
|
|
39
|
+
import { Toggle, toggleVariants } from "./toggle.js";
|
|
40
|
+
import { ToggleGroup, ToggleGroupItem, ToggleGroupSeparator } from "./toggle-group.js";
|
|
41
|
+
import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator } from "./toolbar.js";
|
|
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 };
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
import { cn } from "../lib/utils";
|
|
4
|
+
import { Input } from "./input.js";
|
|
5
|
+
import { Textarea } from "./textarea.js";
|
|
6
|
+
function InputGroup({ className, ...props }) {
|
|
7
|
+
return /*#__PURE__*/ jsx("div", {
|
|
8
|
+
className: cn("relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background bg-clip-padding text-base/5 shadow-xs ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/8%)] *:[&:is([data-slot=input-control],[data-slot=textarea-control])]:contents *:[&:is([data-slot=input-control],[data-slot=textarea-control])]:before:hidden has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-3 has-data-[align=block-start]:**:[input]:pb-[calc(--spacing(3)-1px)] **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]", className),
|
|
9
|
+
"data-slot": "input-group",
|
|
10
|
+
role: "group",
|
|
11
|
+
...props
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
const inputGroupAddonVariants = cva("flex h-auto cursor-text select-none items-center justify-center gap-2 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 not-has-[button]:**:[svg]:opacity-72", {
|
|
15
|
+
defaultVariants: {
|
|
16
|
+
align: "inline-start"
|
|
17
|
+
},
|
|
18
|
+
variants: {
|
|
19
|
+
align: {
|
|
20
|
+
"block-end": "order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]",
|
|
21
|
+
"block-start": "order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]",
|
|
22
|
+
"inline-end": "has-[>[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 order-last pe-[calc(--spacing(3)-1px)] has-[>kbd]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]",
|
|
23
|
+
"inline-start": "has-[>[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 order-first ps-[calc(--spacing(3)-1px)] has-[>kbd]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
function InputGroupAddon({ className, align = "inline-start", ...props }) {
|
|
28
|
+
return /*#__PURE__*/ jsx("div", {
|
|
29
|
+
className: cn(inputGroupAddonVariants({
|
|
30
|
+
align
|
|
31
|
+
}), className),
|
|
32
|
+
"data-align": align,
|
|
33
|
+
"data-slot": "input-group-addon",
|
|
34
|
+
onMouseDown: (e)=>{
|
|
35
|
+
const target = e.target;
|
|
36
|
+
const isInteractive = target.closest("button, a");
|
|
37
|
+
if (isInteractive) return;
|
|
38
|
+
e.preventDefault();
|
|
39
|
+
const parent = e.currentTarget.parentElement;
|
|
40
|
+
const input = parent?.querySelector("input, textarea");
|
|
41
|
+
if (input && !parent?.querySelector("input:focus, textarea:focus")) input.focus();
|
|
42
|
+
},
|
|
43
|
+
...props
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
function InputGroupText({ className, ...props }) {
|
|
47
|
+
return /*#__PURE__*/ jsx("span", {
|
|
48
|
+
className: cn("flex items-center gap-2 text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className),
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
function InputGroupInput({ className, ...props }) {
|
|
53
|
+
return /*#__PURE__*/ jsx(Input, {
|
|
54
|
+
className: className,
|
|
55
|
+
unstyled: true,
|
|
56
|
+
...props
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
function InputGroupTextarea({ className, ...props }) {
|
|
60
|
+
return /*#__PURE__*/ jsx(Textarea, {
|
|
61
|
+
className: className,
|
|
62
|
+
unstyled: true,
|
|
63
|
+
...props
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea };
|
package/dist/input.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Input } from "@base-ui-components/react/input";
|
|
3
|
+
import { cn } from "../lib/utils";
|
|
4
|
+
function input_Input({ className, size = "default", unstyled = false, ...props }) {
|
|
5
|
+
return /*#__PURE__*/ jsx("span", {
|
|
6
|
+
className: cn(!unstyled && "relative inline-flex w-full rounded-lg border border-input bg-background bg-clip-padding text-base/5 shadow-xs ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)]", className) || void 0,
|
|
7
|
+
"data-size": size,
|
|
8
|
+
"data-slot": "input-control",
|
|
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"),
|
|
11
|
+
"data-slot": "input",
|
|
12
|
+
size: "number" == typeof size ? size : void 0,
|
|
13
|
+
...props
|
|
14
|
+
})
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
export { input_Input as Input };
|
package/dist/label.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../lib/utils";
|
|
3
|
+
function Label({ className, ...props }) {
|
|
4
|
+
return /*#__PURE__*/ jsx("label", {
|
|
5
|
+
className: cn("inline-flex items-center gap-2 text-sm/4", className),
|
|
6
|
+
"data-slot": "label",
|
|
7
|
+
...props
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
export { Label };
|
package/dist/menu.js
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Menu } from "@base-ui-components/react/menu";
|
|
3
|
+
import { CheckIcon, ChevronRightIcon } from "lucide-react";
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
const menu_Menu = Menu.Root;
|
|
6
|
+
const MenuPortal = Menu.Portal;
|
|
7
|
+
function MenuTrigger(props) {
|
|
8
|
+
return /*#__PURE__*/ jsx(Menu.Trigger, {
|
|
9
|
+
"data-slot": "menu-trigger",
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function MenuPopup({ className, sideOffset = 4, align = "center", alignOffset = 4, side = "right", ...props }) {
|
|
14
|
+
return /*#__PURE__*/ jsx(Menu.Portal, {
|
|
15
|
+
children: /*#__PURE__*/ jsx(Menu.Positioner, {
|
|
16
|
+
align: align,
|
|
17
|
+
alignOffset: alignOffset,
|
|
18
|
+
className: "z-50",
|
|
19
|
+
"data-slot": "menu-positioner",
|
|
20
|
+
side: side,
|
|
21
|
+
sideOffset: sideOffset,
|
|
22
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
23
|
+
className: cn("relative flex origin-(--transform-origin) rounded-lg border bg-popover bg-clip-padding shadow-lg transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-starting-style:scale-98 has-data-starting-style:opacity-0 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]", className),
|
|
24
|
+
children: /*#__PURE__*/ jsx(Menu.Popup, {
|
|
25
|
+
className: "max-h-(--available-height) not-[class*='w-']:min-w-32 overflow-y-auto p-1",
|
|
26
|
+
"data-slot": "menu-popup",
|
|
27
|
+
...props
|
|
28
|
+
})
|
|
29
|
+
})
|
|
30
|
+
})
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
function MenuGroup(props) {
|
|
34
|
+
return /*#__PURE__*/ jsx(Menu.Group, {
|
|
35
|
+
"data-slot": "menu-group",
|
|
36
|
+
...props
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
function MenuItem({ className, inset, variant = "default", ...props }) {
|
|
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),
|
|
42
|
+
"data-inset": inset,
|
|
43
|
+
"data-slot": "menu-item",
|
|
44
|
+
"data-variant": variant,
|
|
45
|
+
...props
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
function MenuCheckboxItem({ className, children, checked, ...props }) {
|
|
49
|
+
return /*#__PURE__*/ jsxs(Menu.CheckboxItem, {
|
|
50
|
+
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
|
+
"data-slot": "menu-checkbox-item",
|
|
53
|
+
...props,
|
|
54
|
+
children: [
|
|
55
|
+
/*#__PURE__*/ jsx(Menu.CheckboxItemIndicator, {
|
|
56
|
+
className: "col-start-1",
|
|
57
|
+
children: /*#__PURE__*/ jsx(CheckIcon, {})
|
|
58
|
+
}),
|
|
59
|
+
/*#__PURE__*/ jsx("span", {
|
|
60
|
+
className: "col-start-2",
|
|
61
|
+
children: children
|
|
62
|
+
})
|
|
63
|
+
]
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
function MenuRadioGroup(props) {
|
|
67
|
+
return /*#__PURE__*/ jsx(Menu.RadioGroup, {
|
|
68
|
+
"data-slot": "menu-radio-group",
|
|
69
|
+
...props
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
function MenuRadioItem({ className, children, ...props }) {
|
|
73
|
+
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),
|
|
75
|
+
"data-slot": "menu-radio-item",
|
|
76
|
+
...props,
|
|
77
|
+
children: [
|
|
78
|
+
/*#__PURE__*/ jsx(Menu.RadioItemIndicator, {
|
|
79
|
+
className: "col-start-1",
|
|
80
|
+
children: /*#__PURE__*/ jsx(CheckIcon, {})
|
|
81
|
+
}),
|
|
82
|
+
/*#__PURE__*/ jsx("span", {
|
|
83
|
+
className: "col-start-2",
|
|
84
|
+
children: children
|
|
85
|
+
})
|
|
86
|
+
]
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function MenuGroupLabel({ className, inset, ...props }) {
|
|
90
|
+
return /*#__PURE__*/ jsx(Menu.GroupLabel, {
|
|
91
|
+
className: cn("px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-9 sm:data-inset:ps-8", className),
|
|
92
|
+
"data-inset": inset,
|
|
93
|
+
"data-slot": "menu-label",
|
|
94
|
+
...props
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
function MenuSeparator({ className, ...props }) {
|
|
98
|
+
return /*#__PURE__*/ jsx(Menu.Separator, {
|
|
99
|
+
className: cn("mx-2 my-1 h-px bg-border", className),
|
|
100
|
+
"data-slot": "menu-separator",
|
|
101
|
+
...props
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
function MenuShortcut({ className, ...props }) {
|
|
105
|
+
return /*#__PURE__*/ jsx("span", {
|
|
106
|
+
className: cn("ms-auto text-muted-foreground/64 text-xs tracking-widest", className),
|
|
107
|
+
"data-slot": "menu-shortcut",
|
|
108
|
+
...props
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
function MenuSub(props) {
|
|
112
|
+
return /*#__PURE__*/ jsx(Menu.SubmenuRoot, {
|
|
113
|
+
"data-slot": "menu-sub",
|
|
114
|
+
...props
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
function MenuSubTrigger({ className, inset, children, ...props }) {
|
|
118
|
+
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),
|
|
120
|
+
"data-inset": inset,
|
|
121
|
+
"data-slot": "menu-sub-trigger",
|
|
122
|
+
...props,
|
|
123
|
+
children: [
|
|
124
|
+
children,
|
|
125
|
+
/*#__PURE__*/ jsx(ChevronRightIcon, {
|
|
126
|
+
className: "ms-auto"
|
|
127
|
+
})
|
|
128
|
+
]
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
function MenuSubPopup({ className, sideOffset = 8, alignOffset = -4, align = "start", ...props }) {
|
|
132
|
+
return /*#__PURE__*/ jsx(MenuPopup, {
|
|
133
|
+
align: align,
|
|
134
|
+
alignOffset: alignOffset,
|
|
135
|
+
className: className,
|
|
136
|
+
"data-slot": "menu-sub-content",
|
|
137
|
+
sideOffset: sideOffset,
|
|
138
|
+
...props
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
export { menu_Menu as DropdownMenu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuGroup as DropdownMenuGroup, MenuItem as DropdownMenuItem, MenuGroupLabel as DropdownMenuLabel, MenuPortal as DropdownMenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuSub as DropdownMenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubTrigger as DropdownMenuSubTrigger, MenuTrigger as DropdownMenuTrigger, menu_Menu as Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubPopup, MenuSubTrigger, MenuTrigger };
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { NumberField } from "@base-ui-components/react/number-field";
|
|
3
|
+
import { MinusIcon, PlusIcon } from "lucide-react";
|
|
4
|
+
import { createContext, useContext, useId } from "react";
|
|
5
|
+
import { cn } from "../lib/utils";
|
|
6
|
+
import { Label } from "./label.js";
|
|
7
|
+
const NumberFieldContext = /*#__PURE__*/ createContext(null);
|
|
8
|
+
function number_field_NumberField({ id, className, size = "default", ...props }) {
|
|
9
|
+
const generatedId = useId();
|
|
10
|
+
const fieldId = id ?? generatedId;
|
|
11
|
+
return /*#__PURE__*/ jsx(NumberFieldContext.Provider, {
|
|
12
|
+
value: {
|
|
13
|
+
fieldId
|
|
14
|
+
},
|
|
15
|
+
children: /*#__PURE__*/ jsx(NumberField.Root, {
|
|
16
|
+
className: cn("flex w-full flex-col items-start gap-2", className),
|
|
17
|
+
"data-size": size,
|
|
18
|
+
"data-slot": "number-field",
|
|
19
|
+
id: fieldId,
|
|
20
|
+
...props
|
|
21
|
+
})
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
function NumberFieldGroup({ className, ...props }) {
|
|
25
|
+
return /*#__PURE__*/ jsx(NumberField.Group, {
|
|
26
|
+
className: cn("relative flex w-full justify-between rounded-lg border border-input bg-background bg-clip-padding text-sm shadow-xs ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/48 data-disabled:pointer-events-none data-disabled:opacity-64 dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] [[data-disabled],:focus-within,[aria-invalid]]:shadow-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
|
|
27
|
+
"data-slot": "number-field-group",
|
|
28
|
+
...props
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
function NumberFieldDecrement({ className, ...props }) {
|
|
32
|
+
return /*#__PURE__*/ jsx(NumberField.Decrement, {
|
|
33
|
+
className: cn("relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent", className),
|
|
34
|
+
"data-slot": "number-field-decrement",
|
|
35
|
+
...props,
|
|
36
|
+
children: /*#__PURE__*/ jsx(MinusIcon, {})
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
function NumberFieldIncrement({ className, ...props }) {
|
|
40
|
+
return /*#__PURE__*/ jsx(NumberField.Increment, {
|
|
41
|
+
className: cn("relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent", className),
|
|
42
|
+
"data-slot": "number-field-increment",
|
|
43
|
+
...props,
|
|
44
|
+
children: /*#__PURE__*/ jsx(PlusIcon, {})
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
function NumberFieldInput({ className, ...props }) {
|
|
48
|
+
return /*#__PURE__*/ jsx(NumberField.Input, {
|
|
49
|
+
className: cn("w-full min-w-0 flex-1 bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] in-data-[size=lg]:py-[calc(--spacing(2)-1px)] in-data-[size=sm]:py-[calc(--spacing(1)-1px)] py-[calc(--spacing(1.5)-1px)] text-center tabular-nums outline-none", className),
|
|
50
|
+
"data-slot": "number-field-input",
|
|
51
|
+
...props
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
function NumberFieldScrubArea({ className, label, ...props }) {
|
|
55
|
+
const context = useContext(NumberFieldContext);
|
|
56
|
+
if (!context) throw new Error("NumberFieldScrubArea must be used within a NumberField component for accessibility.");
|
|
57
|
+
return /*#__PURE__*/ jsxs(NumberField.ScrubArea, {
|
|
58
|
+
className: cn("flex cursor-ew-resize", className),
|
|
59
|
+
"data-slot": "number-field-scrub-area",
|
|
60
|
+
...props,
|
|
61
|
+
children: [
|
|
62
|
+
/*#__PURE__*/ jsx(Label, {
|
|
63
|
+
className: "cursor-ew-resize",
|
|
64
|
+
htmlFor: context.fieldId,
|
|
65
|
+
children: label
|
|
66
|
+
}),
|
|
67
|
+
/*#__PURE__*/ jsx(NumberField.ScrubAreaCursor, {
|
|
68
|
+
className: "drop-shadow-[0_1px_1px_#0008] filter",
|
|
69
|
+
children: /*#__PURE__*/ jsx(CursorGrowIcon, {})
|
|
70
|
+
})
|
|
71
|
+
]
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
function CursorGrowIcon(props) {
|
|
75
|
+
return /*#__PURE__*/ jsx("svg", {
|
|
76
|
+
fill: "black",
|
|
77
|
+
height: "14",
|
|
78
|
+
stroke: "white",
|
|
79
|
+
viewBox: "0 0 24 14",
|
|
80
|
+
width: "26",
|
|
81
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
82
|
+
...props,
|
|
83
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
84
|
+
d: "M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z"
|
|
85
|
+
})
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
export { number_field_NumberField as NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea };
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { mergeProps } from "@base-ui-components/react/merge-props";
|
|
3
|
+
import { useRender } from "@base-ui-components/react/use-render";
|
|
4
|
+
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
|
|
5
|
+
import { cn } from "../lib/utils";
|
|
6
|
+
import { buttonVariants } from "./button.js";
|
|
7
|
+
function Pagination({ className, ...props }) {
|
|
8
|
+
return /*#__PURE__*/ jsx("nav", {
|
|
9
|
+
"aria-label": "pagination",
|
|
10
|
+
className: cn("mx-auto flex w-full justify-center", className),
|
|
11
|
+
"data-slot": "pagination",
|
|
12
|
+
...props
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function PaginationContent({ className, ...props }) {
|
|
16
|
+
return /*#__PURE__*/ jsx("ul", {
|
|
17
|
+
className: cn("flex flex-row items-center gap-1", className),
|
|
18
|
+
"data-slot": "pagination-content",
|
|
19
|
+
...props
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
function PaginationItem({ ...props }) {
|
|
23
|
+
return /*#__PURE__*/ jsx("li", {
|
|
24
|
+
"data-slot": "pagination-item",
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function PaginationLink({ className, isActive, size = "icon", render, ...props }) {
|
|
29
|
+
const defaultProps = {
|
|
30
|
+
"aria-current": isActive ? "page" : void 0,
|
|
31
|
+
className: render ? className : cn(buttonVariants({
|
|
32
|
+
size,
|
|
33
|
+
variant: isActive ? "outline" : "ghost"
|
|
34
|
+
}), className),
|
|
35
|
+
"data-active": isActive,
|
|
36
|
+
"data-slot": "pagination-link"
|
|
37
|
+
};
|
|
38
|
+
return useRender({
|
|
39
|
+
defaultTagName: "a",
|
|
40
|
+
props: mergeProps(defaultProps, props),
|
|
41
|
+
render
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
function PaginationPrevious({ className, ...props }) {
|
|
45
|
+
return /*#__PURE__*/ jsxs(PaginationLink, {
|
|
46
|
+
"aria-label": "Go to previous page",
|
|
47
|
+
className: cn("max-sm:aspect-square max-sm:p-0", className),
|
|
48
|
+
size: "default",
|
|
49
|
+
...props,
|
|
50
|
+
children: [
|
|
51
|
+
/*#__PURE__*/ jsx(ChevronLeftIcon, {
|
|
52
|
+
className: "sm:-ms-1"
|
|
53
|
+
}),
|
|
54
|
+
/*#__PURE__*/ jsx("span", {
|
|
55
|
+
className: "max-sm:hidden",
|
|
56
|
+
children: "Previous"
|
|
57
|
+
})
|
|
58
|
+
]
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
function PaginationNext({ className, ...props }) {
|
|
62
|
+
return /*#__PURE__*/ jsxs(PaginationLink, {
|
|
63
|
+
"aria-label": "Go to next page",
|
|
64
|
+
className: cn("max-sm:aspect-square max-sm:p-0", className),
|
|
65
|
+
size: "default",
|
|
66
|
+
...props,
|
|
67
|
+
children: [
|
|
68
|
+
/*#__PURE__*/ jsx("span", {
|
|
69
|
+
className: "max-sm:hidden",
|
|
70
|
+
children: "Next"
|
|
71
|
+
}),
|
|
72
|
+
/*#__PURE__*/ jsx(ChevronRightIcon, {
|
|
73
|
+
className: "sm:-me-1"
|
|
74
|
+
})
|
|
75
|
+
]
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
function PaginationEllipsis({ className, ...props }) {
|
|
79
|
+
return /*#__PURE__*/ jsxs("span", {
|
|
80
|
+
"aria-hidden": true,
|
|
81
|
+
className: cn("flex min-w-7 justify-center", className),
|
|
82
|
+
"data-slot": "pagination-ellipsis",
|
|
83
|
+
...props,
|
|
84
|
+
children: [
|
|
85
|
+
/*#__PURE__*/ jsx(MoreHorizontalIcon, {
|
|
86
|
+
className: "size-4"
|
|
87
|
+
}),
|
|
88
|
+
/*#__PURE__*/ jsx("span", {
|
|
89
|
+
className: "sr-only",
|
|
90
|
+
children: "More pages"
|
|
91
|
+
})
|
|
92
|
+
]
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
|
package/dist/popover.js
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Popover } from "@base-ui-components/react/popover";
|
|
3
|
+
import { cn } from "../lib/utils";
|
|
4
|
+
const popover_Popover = Popover.Root;
|
|
5
|
+
function PopoverTrigger(props) {
|
|
6
|
+
return /*#__PURE__*/ jsx(Popover.Trigger, {
|
|
7
|
+
"data-slot": "popover-trigger",
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
function PopoverPopup({ children, className, side = "bottom", align = "center", sideOffset = 4, alignOffset = 0, tooltipStyle = false, ...props }) {
|
|
12
|
+
return /*#__PURE__*/ jsx(Popover.Portal, {
|
|
13
|
+
children: /*#__PURE__*/ jsx(Popover.Positioner, {
|
|
14
|
+
align: align,
|
|
15
|
+
alignOffset: alignOffset,
|
|
16
|
+
className: "z-50",
|
|
17
|
+
"data-slot": "popover-positioner",
|
|
18
|
+
side: side,
|
|
19
|
+
sideOffset: sideOffset,
|
|
20
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
21
|
+
className: cn("relative flex origin-(--transform-origin) rounded-lg border bg-popover bg-clip-padding shadow-lg transition-[scale,opacity] not-[class*='w-']:[min-w-80] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-starting-style:scale-98 has-data-starting-style:opacity-0 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]", tooltipStyle && "w-fit text-balance rounded-md text-xs shadow-black/5 shadow-md before:rounded-[calc(var(--radius-md)-1px)]", className),
|
|
22
|
+
children: /*#__PURE__*/ jsx(Popover.Popup, {
|
|
23
|
+
className: cn("max-h-(--available-height) w-full overflow-y-auto p-4 outline-none", tooltipStyle && "px-[calc(--spacing(2)+1px)] py-[calc(--spacing(1)+1px)]"),
|
|
24
|
+
"data-slot": "popover-content",
|
|
25
|
+
...props,
|
|
26
|
+
children: children
|
|
27
|
+
})
|
|
28
|
+
})
|
|
29
|
+
})
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
function PopoverClose({ ...props }) {
|
|
33
|
+
return /*#__PURE__*/ jsx(Popover.Close, {
|
|
34
|
+
"data-slot": "popover-close",
|
|
35
|
+
...props
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
function PopoverTitle({ className, ...props }) {
|
|
39
|
+
return /*#__PURE__*/ jsx(Popover.Title, {
|
|
40
|
+
className: cn("font-semibold text-lg leading-none", className),
|
|
41
|
+
"data-slot": "popover-title",
|
|
42
|
+
...props
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
function PopoverDescription({ className, ...props }) {
|
|
46
|
+
return /*#__PURE__*/ jsx(Popover.Description, {
|
|
47
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
48
|
+
"data-slot": "popover-description",
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
export { popover_Popover as Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger };
|
package/dist/progress.js
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Progress } from "@base-ui-components/react/progress";
|
|
3
|
+
import { cn } from "../lib/utils";
|
|
4
|
+
function progress_Progress({ className, children, ...props }) {
|
|
5
|
+
return /*#__PURE__*/ jsx(Progress.Root, {
|
|
6
|
+
className: cn("flex w-full flex-col gap-2", className),
|
|
7
|
+
"data-slot": "progress",
|
|
8
|
+
...props,
|
|
9
|
+
children: children ? children : /*#__PURE__*/ jsx(ProgressTrack, {
|
|
10
|
+
children: /*#__PURE__*/ jsx(ProgressIndicator, {})
|
|
11
|
+
})
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
function ProgressLabel({ className, ...props }) {
|
|
15
|
+
return /*#__PURE__*/ jsx(Progress.Label, {
|
|
16
|
+
className: cn("font-medium text-sm", className),
|
|
17
|
+
"data-slot": "progress-label",
|
|
18
|
+
...props
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
function ProgressTrack({ className, ...props }) {
|
|
22
|
+
return /*#__PURE__*/ jsx(Progress.Track, {
|
|
23
|
+
className: cn("block h-1.5 w-full overflow-hidden rounded-full bg-input", className),
|
|
24
|
+
"data-slot": "progress-track",
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function ProgressIndicator({ className, ...props }) {
|
|
29
|
+
return /*#__PURE__*/ jsx(Progress.Indicator, {
|
|
30
|
+
className: cn("bg-primary transition-all duration-500", className),
|
|
31
|
+
"data-slot": "progress-indicator",
|
|
32
|
+
...props
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
function ProgressValue({ className, ...props }) {
|
|
36
|
+
return /*#__PURE__*/ jsx(Progress.Value, {
|
|
37
|
+
className: cn("text-sm tabular-nums", className),
|
|
38
|
+
"data-slot": "progress-value",
|
|
39
|
+
...props
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
export { progress_Progress as Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Radio } from "@base-ui-components/react/radio";
|
|
3
|
+
import { RadioGroup } from "@base-ui-components/react/radio-group";
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
function radio_group_RadioGroup({ className, ...props }) {
|
|
6
|
+
return /*#__PURE__*/ jsx(RadioGroup, {
|
|
7
|
+
className: cn("flex flex-col gap-3", className),
|
|
8
|
+
"data-slot": "radio-group",
|
|
9
|
+
...props
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
function radio_group_Radio({ className, ...props }) {
|
|
13
|
+
return /*#__PURE__*/ jsx(Radio.Root, {
|
|
14
|
+
className: cn("relative inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-input bg-background bg-clip-padding shadow-xs outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-full not-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-64 aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 dark:not-data-checked:bg-input/32 dark:bg-clip-border dark:aria-invalid:ring-destructive/24 dark:not-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] [:disabled,[data-checked],[aria-invalid]]:shadow-none", className),
|
|
15
|
+
"data-slot": "radio",
|
|
16
|
+
...props,
|
|
17
|
+
children: /*#__PURE__*/ jsx(Radio.Indicator, {
|
|
18
|
+
className: "-inset-px absolute flex size-4 items-center justify-center rounded-full before:size-1.5 before:rounded-full before:bg-primary-foreground data-unchecked:hidden data-checked:bg-primary",
|
|
19
|
+
"data-slot": "radio-indicator"
|
|
20
|
+
})
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
export { radio_group_Radio as Radio, radio_group_RadioGroup as RadioGroup, radio_group_Radio as RadioGroupItem };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { ScrollArea } from "@base-ui-components/react/scroll-area";
|
|
3
|
+
import { cn } from "../lib/utils";
|
|
4
|
+
function scroll_area_ScrollArea({ className, children, orientation, ...props }) {
|
|
5
|
+
return /*#__PURE__*/ jsxs(ScrollArea.Root, {
|
|
6
|
+
className: "min-h-0",
|
|
7
|
+
...props,
|
|
8
|
+
children: [
|
|
9
|
+
/*#__PURE__*/ jsx(ScrollArea.Viewport, {
|
|
10
|
+
className: cn("size-full overscroll-contain rounded-[inherit] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background", className),
|
|
11
|
+
"data-slot": "scroll-area-viewport",
|
|
12
|
+
children: children
|
|
13
|
+
}),
|
|
14
|
+
"both" === orientation ? /*#__PURE__*/ jsxs(Fragment, {
|
|
15
|
+
children: [
|
|
16
|
+
/*#__PURE__*/ jsx(ScrollBar, {
|
|
17
|
+
orientation: "vertical"
|
|
18
|
+
}),
|
|
19
|
+
/*#__PURE__*/ jsx(ScrollBar, {
|
|
20
|
+
orientation: "horizontal"
|
|
21
|
+
})
|
|
22
|
+
]
|
|
23
|
+
}) : /*#__PURE__*/ jsx(ScrollBar, {
|
|
24
|
+
orientation: orientation
|
|
25
|
+
}),
|
|
26
|
+
/*#__PURE__*/ jsx(ScrollArea.Corner, {
|
|
27
|
+
"data-slot": "scroll-area-corner"
|
|
28
|
+
})
|
|
29
|
+
]
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
function ScrollBar({ className, orientation = "vertical", ...props }) {
|
|
33
|
+
return /*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
|
|
34
|
+
className: cn("m-0.5 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100", className),
|
|
35
|
+
"data-slot": "scroll-area-scrollbar",
|
|
36
|
+
orientation: orientation,
|
|
37
|
+
...props,
|
|
38
|
+
children: /*#__PURE__*/ jsx(ScrollArea.Thumb, {
|
|
39
|
+
className: "relative flex-1 rounded-full bg-foreground/20",
|
|
40
|
+
"data-slot": "scroll-area-thumb"
|
|
41
|
+
})
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
export { scroll_area_ScrollArea as ScrollArea, ScrollBar };
|