@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
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Menu as MenuPrimitive } from "@base-ui-components/react/menu";
|
|
2
|
+
import type * as React from "react";
|
|
3
|
+
declare const Menu: typeof MenuPrimitive.Root;
|
|
4
|
+
declare const MenuPortal: React.ForwardRefExoticComponent<import("@base-ui-components/react/menu").MenuPortalProps & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare function MenuTrigger(props: MenuPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function MenuPopup({ className, sideOffset, align, alignOffset, side, ...props }: MenuPrimitive.Popup.Props & {
|
|
7
|
+
align?: MenuPrimitive.Positioner.Props["align"];
|
|
8
|
+
sideOffset?: MenuPrimitive.Positioner.Props["sideOffset"];
|
|
9
|
+
alignOffset?: MenuPrimitive.Positioner.Props["alignOffset"];
|
|
10
|
+
side?: MenuPrimitive.Positioner.Props["side"];
|
|
11
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
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 & {
|
|
14
|
+
inset?: boolean;
|
|
15
|
+
variant?: "default" | "destructive";
|
|
16
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function MenuCheckboxItem({ className, children, checked, ...props }: MenuPrimitive.CheckboxItem.Props): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
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;
|
|
20
|
+
declare function MenuGroupLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
|
|
21
|
+
inset?: boolean;
|
|
22
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
declare function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare function MenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
declare function MenuSub(props: MenuPrimitive.SubmenuRoot.Props): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
declare function MenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
|
|
27
|
+
inset?: boolean;
|
|
28
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
declare function MenuSubPopup({ className, sideOffset, alignOffset, align, ...props }: MenuPrimitive.Popup.Props & {
|
|
30
|
+
align?: MenuPrimitive.Positioner.Props["align"];
|
|
31
|
+
sideOffset?: MenuPrimitive.Positioner.Props["sideOffset"];
|
|
32
|
+
alignOffset?: MenuPrimitive.Positioner.Props["alignOffset"];
|
|
33
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
export { Menu, Menu as DropdownMenu, MenuPortal, MenuPortal as DropdownMenuPortal, MenuTrigger, MenuTrigger as DropdownMenuTrigger, MenuPopup, MenuPopup as DropdownMenuContent, MenuGroup, MenuGroup as DropdownMenuGroup, MenuItem, MenuItem as DropdownMenuItem, MenuCheckboxItem, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuRadioGroup, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioItem, MenuRadioItem as DropdownMenuRadioItem, MenuGroupLabel, MenuGroupLabel as DropdownMenuLabel, MenuSeparator, MenuSeparator as DropdownMenuSeparator, MenuShortcut, MenuShortcut as DropdownMenuShortcut, MenuSub, MenuSub as DropdownMenuSub, MenuSubTrigger, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubPopup, MenuSubPopup as DropdownMenuSubContent, };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { NumberField as NumberFieldPrimitive } from "@base-ui-components/react/number-field";
|
|
2
|
+
declare function NumberField({ id, className, size, ...props }: NumberFieldPrimitive.Root.Props & {
|
|
3
|
+
size?: "sm" | "default" | "lg";
|
|
4
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function NumberFieldGroup({ className, ...props }: NumberFieldPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function NumberFieldDecrement({ className, ...props }: NumberFieldPrimitive.Decrement.Props): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function NumberFieldIncrement({ className, ...props }: NumberFieldPrimitive.Increment.Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function NumberFieldInput({ className, ...props }: NumberFieldPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function NumberFieldScrubArea({ className, label, ...props }: NumberFieldPrimitive.ScrubArea.Props & {
|
|
10
|
+
label: string;
|
|
11
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export { NumberField, NumberFieldScrubArea, NumberFieldDecrement, NumberFieldIncrement, NumberFieldGroup, NumberFieldInput, };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { useRender } from "@base-ui-components/react/use-render";
|
|
2
|
+
import type * as React from "react";
|
|
3
|
+
import { type Button } from "../button";
|
|
4
|
+
declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function PaginationItem({ ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
type PaginationLinkProps = {
|
|
8
|
+
isActive?: boolean;
|
|
9
|
+
size?: React.ComponentProps<typeof Button>["size"];
|
|
10
|
+
} & useRender.ComponentProps<"a">;
|
|
11
|
+
declare function PaginationLink({ className, isActive, size, render, ...props }: PaginationLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
12
|
+
declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Popover as PopoverPrimitive } from "@base-ui-components/react/popover";
|
|
2
|
+
declare const Popover: typeof PopoverPrimitive.Root;
|
|
3
|
+
declare function PopoverTrigger(props: PopoverPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function PopoverPopup({ children, className, side, align, sideOffset, alignOffset, tooltipStyle, ...props }: PopoverPrimitive.Popup.Props & {
|
|
5
|
+
side?: PopoverPrimitive.Positioner.Props["side"];
|
|
6
|
+
align?: PopoverPrimitive.Positioner.Props["align"];
|
|
7
|
+
sideOffset?: PopoverPrimitive.Positioner.Props["sideOffset"];
|
|
8
|
+
alignOffset?: PopoverPrimitive.Positioner.Props["alignOffset"];
|
|
9
|
+
tooltipStyle?: boolean;
|
|
10
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function PopoverClose({ ...props }: PopoverPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export { Popover, PopoverTrigger, PopoverPopup, PopoverPopup as PopoverContent, PopoverTitle, PopoverDescription, PopoverClose, };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Progress as ProgressPrimitive } from "@base-ui-components/react/progress";
|
|
2
|
+
declare function Progress({ className, children, ...props }: ProgressPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export { Progress, ProgressLabel, ProgressTrack, ProgressIndicator, ProgressValue, };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Radio as RadioPrimitive } from "@base-ui-components/react/radio";
|
|
2
|
+
import { RadioGroup as RadioGroupPrimitive } from "@base-ui-components/react/radio-group";
|
|
3
|
+
declare function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function Radio({ className, ...props }: RadioPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export { RadioGroup, Radio, Radio as RadioGroupItem };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ScrollArea as ScrollAreaPrimitive } from "@base-ui-components/react/scroll-area";
|
|
2
|
+
declare function ScrollArea({ className, children, orientation, ...props }: ScrollAreaPrimitive.Root.Props & {
|
|
3
|
+
orientation?: "horizontal" | "vertical" | "both";
|
|
4
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function ScrollBar({ className, orientation, ...props }: ScrollAreaPrimitive.Scrollbar.Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export { ScrollArea, ScrollBar };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Select as SelectPrimitive } from "@base-ui-components/react/select";
|
|
2
|
+
declare const Select: typeof SelectPrimitive.Root;
|
|
3
|
+
declare function SelectTrigger({ className, size, children, ...props }: SelectPrimitive.Trigger.Props & {
|
|
4
|
+
size?: "sm" | "default" | "lg";
|
|
5
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function SelectPopup({ className, children, sideOffset, alignItemWithTrigger, ...props }: SelectPrimitive.Popup.Props & {
|
|
8
|
+
sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"];
|
|
9
|
+
alignItemWithTrigger?: SelectPrimitive.Positioner.Props["alignItemWithTrigger"];
|
|
10
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function SelectGroup(props: SelectPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare function SelectGroupLabel(props: SelectPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export { Select, SelectPopup as SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Dialog as SheetPrimitive } from "@base-ui-components/react/dialog";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const Sheet: typeof SheetPrimitive.Root;
|
|
4
|
+
declare function SheetTrigger(props: SheetPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function SheetPortal(props: SheetPrimitive.Portal.Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function SheetClose(props: SheetPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare const sheetPopupVariants: (props?: ({
|
|
8
|
+
inset?: boolean | null | undefined;
|
|
9
|
+
side?: "left" | "right" | "bottom" | "top" | null | undefined;
|
|
10
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
|
+
declare function SheetBackdrop({ className, ...props }: SheetPrimitive.Backdrop.Props): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function SheetPopup({ className, children, showCloseButton, side, inset, ...props }: SheetPrimitive.Popup.Props & {
|
|
13
|
+
showCloseButton?: boolean;
|
|
14
|
+
} & VariantProps<typeof sheetPopupVariants>): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export { Sheet, SheetBackdrop, SheetClose, SheetPopup as SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetBackdrop as SheetOverlay, SheetPopup, sheetPopupVariants, SheetPortal, SheetTitle, SheetTrigger, };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { Slider as SliderPrimitive } from "@base-ui-components/react/slider";
|
|
2
|
+
declare function Slider({ className, children, defaultValue, value, min, max, ...props }: SliderPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function SliderValue({ className, ...props }: SliderPrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export { Slider, SliderValue };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type * as React from "react";
|
|
2
|
+
declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function TableHead({ className, ...props }: React.ComponentProps<"th">): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function TableCell({ className, ...props }: React.ComponentProps<"td">): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs";
|
|
2
|
+
type TabsVariant = "default" | "underline";
|
|
3
|
+
declare function Tabs({ className, ...props }: TabsPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function TabsList({ variant, className, children, ...props }: TabsPrimitive.List.Props & {
|
|
5
|
+
variant?: TabsVariant;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function TabsTab({ className, ...props }: TabsPrimitive.Tab.Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function TabsPanel({ className, ...props }: TabsPrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Tabs, TabsList, TabsTab, TabsTab as TabsTrigger, TabsPanel, TabsPanel as TabsContent, };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type * as React from "react";
|
|
2
|
+
type TextareaProps = React.ComponentProps<"textarea"> & {
|
|
3
|
+
size?: "sm" | "default" | "lg" | number;
|
|
4
|
+
unstyled?: boolean;
|
|
5
|
+
};
|
|
6
|
+
declare function Textarea({ className, size, unstyled, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export { Textarea, type TextareaProps };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Toggle as TogglePrimitive } from "@base-ui-components/react/toggle";
|
|
2
|
+
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui-components/react/toggle-group";
|
|
3
|
+
import type { VariantProps } from "class-variance-authority";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { Separator } from "../separator";
|
|
6
|
+
import { type toggleVariants } from "../toggle";
|
|
7
|
+
declare function ToggleGroup({ className, variant, size, orientation, children, ...props }: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function Toggle({ className, children, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function ToggleGroupSeparator({ className, orientation, ...props }: {
|
|
10
|
+
className?: string;
|
|
11
|
+
} & React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export { ToggleGroup, Toggle, Toggle as ToggleGroupItem, ToggleGroupSeparator };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Toggle as TogglePrimitive } from "@base-ui-components/react/toggle";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const toggleVariants: (props?: ({
|
|
4
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
5
|
+
variant?: "default" | "outline" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export { Toggle, toggleVariants };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Toolbar as ToolbarPrimitive } from "@base-ui-components/react/toolbar";
|
|
2
|
+
declare function Toolbar({ className, ...props }: ToolbarPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function ToolbarButton({ className, ...props }: ToolbarPrimitive.Button.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function ToolbarLink({ className, ...props }: ToolbarPrimitive.Link.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function ToolbarInput({ className, ...props }: ToolbarPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function ToolbarGroup({ className, ...props }: ToolbarPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function ToolbarSeparator({ className, ...props }: ToolbarPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarButton, ToolbarLink, ToolbarInput, };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Tooltip as TooltipPrimitive } from "@base-ui-components/react/tooltip";
|
|
2
|
+
declare const TooltipProvider: import("react").FC<import("@base-ui-components/react/tooltip").TooltipProviderProps>;
|
|
3
|
+
declare const Tooltip: typeof TooltipPrimitive.Root;
|
|
4
|
+
declare function TooltipTrigger(props: TooltipPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function TooltipPopup({ className, align, sideOffset, side, children, ...props }: TooltipPrimitive.Popup.Props & {
|
|
6
|
+
align?: TooltipPrimitive.Positioner.Props["align"];
|
|
7
|
+
side?: TooltipPrimitive.Positioner.Props["side"];
|
|
8
|
+
sideOffset?: TooltipPrimitive.Positioner.Props["sideOffset"];
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { TooltipProvider, Tooltip, TooltipTrigger, TooltipPopup, TooltipPopup as TooltipContent, };
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "tw-animate-css";
|
|
3
|
+
|
|
4
|
+
@custom-variant dark (&:is(.dark *));
|
|
5
|
+
|
|
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);
|
|
40
|
+
|
|
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);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.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);
|
|
82
|
+
|
|
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);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@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);
|
|
128
|
+
|
|
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);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@layer base {
|
|
138
|
+
* {
|
|
139
|
+
@apply border-border outline-ring/50;
|
|
140
|
+
}
|
|
141
|
+
body {
|
|
142
|
+
@apply bg-background text-foreground;
|
|
143
|
+
}
|
|
144
|
+
}
|
package/dist/switch.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Switch } from "@base-ui-components/react/switch";
|
|
3
|
+
import { cn } from "../lib/utils";
|
|
4
|
+
function switch_Switch({ className, ...props }) {
|
|
5
|
+
return /*#__PURE__*/ jsx(Switch.Root, {
|
|
6
|
+
className: cn("group/switch inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-4.5 w-7.5 shrink-0 items-center rounded-full p-px outline-none transition-all 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 data-checked:bg-primary data-unchecked:bg-input", className),
|
|
7
|
+
"data-slot": "switch",
|
|
8
|
+
...props,
|
|
9
|
+
children: /*#__PURE__*/ jsx(Switch.Thumb, {
|
|
10
|
+
className: cn("pointer-events-none block size-4 rounded-full bg-background shadow-sm transition-[translate,width] group-active/switch:w-4.5 data-checked:translate-x-3 data-unchecked:translate-x-0 data-checked:group-active/switch:translate-x-2.5"),
|
|
11
|
+
"data-slot": "switch-thumb"
|
|
12
|
+
})
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
export { switch_Switch as Switch };
|
package/dist/table.js
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../lib/utils";
|
|
3
|
+
function Table({ className, ...props }) {
|
|
4
|
+
return /*#__PURE__*/ jsx("div", {
|
|
5
|
+
className: "relative w-full overflow-x-auto",
|
|
6
|
+
"data-slot": "table-container",
|
|
7
|
+
children: /*#__PURE__*/ jsx("table", {
|
|
8
|
+
className: cn("w-full caption-bottom in-data-[slot=frame]:border-separate in-data-[slot=frame]:border-spacing-0 text-sm", className),
|
|
9
|
+
"data-slot": "table",
|
|
10
|
+
...props
|
|
11
|
+
})
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
function TableHeader({ className, ...props }) {
|
|
15
|
+
return /*#__PURE__*/ jsx("thead", {
|
|
16
|
+
className: cn("[&_tr]:border-b in-data-[slot=frame]:**:[th]:h-9 in-data-[slot=frame]:*:[tr]:border-none in-data-[slot=frame]:*:[tr]:hover:bg-transparent", className),
|
|
17
|
+
"data-slot": "table-header",
|
|
18
|
+
...props
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
function TableBody({ className, ...props }) {
|
|
22
|
+
return /*#__PURE__*/ jsx("tbody", {
|
|
23
|
+
className: cn("relative in-data-[slot=frame]:rounded-xl in-data-[slot=frame]:shadow-xs before:pointer-events-none before:absolute before:inset-px not-in-data-[slot=frame]:before:hidden before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_tr:last-child]:border-0 in-data-[slot=frame]:*:[tr]:border-0 in-data-[slot=frame]:*:[tr]:*:[td]:border-b in-data-[slot=frame]:*:[tr]:*:[td]:bg-card in-data-[slot=frame]:*:[tr]:*:[td]:bg-clip-padding in-data-[slot=frame]:*:[tr]:first:*:[td]:first:rounded-ss-xl in-data-[slot=frame]:*:[tr]:*:[td]:first:border-s in-data-[slot=frame]:*:[tr]:first:*:[td]:border-t in-data-[slot=frame]:*:[tr]:last:*:[td]:last:rounded-ee-xl in-data-[slot=frame]:*:[tr]:*:[td]:last:border-e in-data-[slot=frame]:*:[tr]:first:*:[td]:last:rounded-se-xl in-data-[slot=frame]:*:[tr]:last:*:[td]:first:rounded-es-xl in-data-[slot=frame]:*:[tr]:hover:*:[td]:bg-muted/32", className),
|
|
24
|
+
"data-slot": "table-body",
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function TableFooter({ className, ...props }) {
|
|
29
|
+
return /*#__PURE__*/ jsx("tfoot", {
|
|
30
|
+
className: cn("border-t in-data-[slot=frame]:border-none bg-muted/72 in-data-[slot=frame]:bg-transparent font-medium [&>tr]:last:border-b-0 in-data-[slot=frame]:*:[tr]:hover:bg-transparent", className),
|
|
31
|
+
"data-slot": "table-footer",
|
|
32
|
+
...props
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
function TableRow({ className, ...props }) {
|
|
36
|
+
return /*#__PURE__*/ jsx("tr", {
|
|
37
|
+
className: cn("border-b transition-colors hover:bg-muted in-data-[slot=frame]:hover:bg-transparent data-[state=selected]:bg-muted in-data-[slot=frame]:data-[state=selected]:bg-transparent", className),
|
|
38
|
+
"data-slot": "table-row",
|
|
39
|
+
...props
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
function TableHead({ className, ...props }) {
|
|
43
|
+
return /*#__PURE__*/ jsx("th", {
|
|
44
|
+
className: cn("h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground has-[[role=checkbox]]:pe-0 [&>[role=checkbox]]:translate-y-[2px]", className),
|
|
45
|
+
"data-slot": "table-head",
|
|
46
|
+
...props
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
function TableCell({ className, ...props }) {
|
|
50
|
+
return /*#__PURE__*/ jsx("td", {
|
|
51
|
+
className: cn("whitespace-nowrap p-2 align-middle has-[[role=checkbox]]:pe-0 [&>[role=checkbox]]:translate-y-[2px]", className),
|
|
52
|
+
"data-slot": "table-cell",
|
|
53
|
+
...props
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
function TableCaption({ className, ...props }) {
|
|
57
|
+
return /*#__PURE__*/ jsx("caption", {
|
|
58
|
+
className: cn("in-data-[slot=frame]:my-4 mt-4 text-muted-foreground text-sm", className),
|
|
59
|
+
"data-slot": "table-caption",
|
|
60
|
+
...props
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
|
package/dist/tabs.js
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Tabs } from "@base-ui-components/react/tabs";
|
|
3
|
+
import { cn } from "../lib/utils";
|
|
4
|
+
function tabs_Tabs({ className, ...props }) {
|
|
5
|
+
return /*#__PURE__*/ jsx(Tabs.Root, {
|
|
6
|
+
className: cn("flex flex-col gap-2 data-[orientation=vertical]:flex-row", className),
|
|
7
|
+
"data-slot": "tabs",
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
function TabsList({ variant = "default", className, children, ...props }) {
|
|
12
|
+
return /*#__PURE__*/ jsxs(Tabs.List, {
|
|
13
|
+
className: cn("relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground", "data-[orientation=vertical]:flex-col", "default" === variant ? "rounded-lg bg-muted p-0.5 text-muted-foreground/64" : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-trigger]:hover:bg-accent", className),
|
|
14
|
+
"data-slot": "tabs-list",
|
|
15
|
+
...props,
|
|
16
|
+
children: [
|
|
17
|
+
children,
|
|
18
|
+
/*#__PURE__*/ jsx(Tabs.Indicator, {
|
|
19
|
+
className: cn("-translate-y-(--active-tab-bottom) absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) transition-[width,translate] duration-200 ease-in-out", "underline" === variant ? "data-[orientation=vertical]:-translate-x-px z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=horizontal]:translate-y-px" : "-z-1 rounded-md bg-background shadow-sm dark:bg-accent"),
|
|
20
|
+
"data-slot": "tab-indicator"
|
|
21
|
+
})
|
|
22
|
+
]
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
function TabsTab({ className, ...props }) {
|
|
26
|
+
return /*#__PURE__*/ jsx(Tabs.Tab, {
|
|
27
|
+
className: cn("flex flex-1 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-sm outline-none transition-[color,background-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:opacity-64 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "hover:text-muted-foreground data-selected:text-foreground", "gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1.5)-1px)]", "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start", className),
|
|
28
|
+
"data-slot": "tabs-trigger",
|
|
29
|
+
...props
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
function TabsPanel({ className, ...props }) {
|
|
33
|
+
return /*#__PURE__*/ jsx(Tabs.Panel, {
|
|
34
|
+
className: cn("flex-1 outline-none", className),
|
|
35
|
+
"data-slot": "tabs-content",
|
|
36
|
+
...props
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
export { tabs_Tabs as Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTab, TabsTab as TabsTrigger };
|
package/dist/textarea.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Field } from "@base-ui-components/react/field";
|
|
3
|
+
import { mergeProps } from "@base-ui-components/react/merge-props";
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
function Textarea({ className, size = "default", unstyled = false, ...props }) {
|
|
6
|
+
return /*#__PURE__*/ jsx("span", {
|
|
7
|
+
className: cn(!unstyled && "relative inline-flex w-full rounded-lg border border-input bg-background bg-clip-padding text-base shadow-xs ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] 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] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:bg-clip-border dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)]", className) || void 0,
|
|
8
|
+
"data-size": size,
|
|
9
|
+
"data-slot": "textarea-control",
|
|
10
|
+
children: /*#__PURE__*/ jsx(Field.Control, {
|
|
11
|
+
render: (defaultProps)=>/*#__PURE__*/ jsx("textarea", {
|
|
12
|
+
className: cn("field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5", "sm" === size && "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5", "lg" === size && "min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5"),
|
|
13
|
+
"data-slot": "textarea",
|
|
14
|
+
...mergeProps(defaultProps, props)
|
|
15
|
+
})
|
|
16
|
+
})
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
export { Textarea };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ToggleGroup } from "@base-ui-components/react/toggle-group";
|
|
3
|
+
import { createContext, useContext } from "react";
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
import { Separator } from "./separator.js";
|
|
6
|
+
import { Toggle } from "./toggle.js";
|
|
7
|
+
const ToggleGroupContext = /*#__PURE__*/ createContext({
|
|
8
|
+
size: "default",
|
|
9
|
+
variant: "default"
|
|
10
|
+
});
|
|
11
|
+
function toggle_group_ToggleGroup({ className, variant = "default", size = "default", orientation = "horizontal", children, ...props }) {
|
|
12
|
+
return /*#__PURE__*/ jsx(ToggleGroup, {
|
|
13
|
+
className: cn("flex w-fit *:focus-visible:z-10", "horizontal" === orientation ? "*:pointer-coarse:after:min-w-auto" : "*:pointer-coarse:after:min-h-auto", "default" === variant ? "gap-0.5" : "horizontal" === orientation ? "*:not-first:before:-start-[0.5px] *:not-last:before:-end-[0.5px] *:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none" : "*:not-first:before:-top-[0.5px] *:not-last:before:-bottom-[0.5px] flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-last:before:hidden *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block", className),
|
|
14
|
+
"data-size": size,
|
|
15
|
+
"data-slot": "toggle-group",
|
|
16
|
+
"data-variant": variant,
|
|
17
|
+
orientation: orientation,
|
|
18
|
+
...props,
|
|
19
|
+
children: /*#__PURE__*/ jsx(ToggleGroupContext.Provider, {
|
|
20
|
+
value: {
|
|
21
|
+
size,
|
|
22
|
+
variant
|
|
23
|
+
},
|
|
24
|
+
children: children
|
|
25
|
+
})
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function toggle_group_Toggle({ className, children, variant, size, ...props }) {
|
|
29
|
+
const context = useContext(ToggleGroupContext);
|
|
30
|
+
const resolvedVariant = context.variant || variant;
|
|
31
|
+
const resolvedSize = context.size || size;
|
|
32
|
+
return /*#__PURE__*/ jsx(Toggle, {
|
|
33
|
+
className: className,
|
|
34
|
+
"data-size": resolvedSize,
|
|
35
|
+
"data-variant": resolvedVariant,
|
|
36
|
+
size: resolvedSize,
|
|
37
|
+
variant: resolvedVariant,
|
|
38
|
+
...props,
|
|
39
|
+
children: children
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
function ToggleGroupSeparator({ className, orientation = "vertical", ...props }) {
|
|
43
|
+
return /*#__PURE__*/ jsx(Separator, {
|
|
44
|
+
className: className,
|
|
45
|
+
orientation: orientation,
|
|
46
|
+
...props
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
export { toggle_group_Toggle as Toggle, toggle_group_ToggleGroup as ToggleGroup, toggle_group_Toggle as ToggleGroupItem, ToggleGroupSeparator };
|
package/dist/toggle.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Toggle } from "@base-ui-components/react/toggle";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
const toggleVariants = cva("relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-sm outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-accent data-pressed:text-accent-foreground data-pressed:transition-none dark:data-pressed:bg-input/80 dark:hover:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
6
|
+
defaultVariants: {
|
|
7
|
+
size: "default",
|
|
8
|
+
variant: "default"
|
|
9
|
+
},
|
|
10
|
+
variants: {
|
|
11
|
+
size: {
|
|
12
|
+
default: "h-8 min-w-8 px-[calc(--spacing(2)-1px)]",
|
|
13
|
+
lg: "h-9 min-w-9 px-[calc(--spacing(2.5)-1px)]",
|
|
14
|
+
sm: "h-7 min-w-7 px-[calc(--spacing(1.5)-1px)]"
|
|
15
|
+
},
|
|
16
|
+
variant: {
|
|
17
|
+
default: "border-transparent",
|
|
18
|
+
outline: "border-border bg-clip-padding shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/4%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
function toggle_Toggle({ className, variant, size, ...props }) {
|
|
23
|
+
return /*#__PURE__*/ jsx(Toggle, {
|
|
24
|
+
className: cn(toggleVariants({
|
|
25
|
+
className,
|
|
26
|
+
size,
|
|
27
|
+
variant
|
|
28
|
+
})),
|
|
29
|
+
"data-slot": "toggle",
|
|
30
|
+
...props
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
export { toggle_Toggle as Toggle, toggleVariants };
|