@stackframe/stack-ui 2.5.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/CHANGELOG.md +12 -0
- package/LICENSE +7 -0
- package/dist/components/ui/accordion.d.ts +7 -0
- package/dist/components/ui/accordion.js +14 -0
- package/dist/components/ui/alert.d.ts +8 -0
- package/dist/components/ui/alert.js +23 -0
- package/dist/components/ui/aspect-ratio.d.ts +4 -0
- package/dist/components/ui/aspect-ratio.js +4 -0
- package/dist/components/ui/avatar.d.ts +6 -0
- package/dist/components/ui/avatar.js +12 -0
- package/dist/components/ui/badge.d.ts +9 -0
- package/dist/components/ui/badge.js +22 -0
- package/dist/components/ui/breadcrumb.d.ts +19 -0
- package/dist/components/ui/breadcrumb.js +23 -0
- package/dist/components/ui/button.d.ts +15 -0
- package/dist/components/ui/button.js +44 -0
- package/dist/components/ui/calendar.d.ts +8 -0
- package/dist/components/ui/calendar.js +40 -0
- package/dist/components/ui/card.d.ts +9 -0
- package/dist/components/ui/card.js +18 -0
- package/dist/components/ui/checkbox.d.ts +4 -0
- package/dist/components/ui/checkbox.js +9 -0
- package/dist/components/ui/collapsible.d.ts +6 -0
- package/dist/components/ui/collapsible.js +6 -0
- package/dist/components/ui/command.d.ts +82 -0
- package/dist/components/ui/command.js +29 -0
- package/dist/components/ui/container.d.ts +6 -0
- package/dist/components/ui/container.js +19 -0
- package/dist/components/ui/context-menu.d.ts +27 -0
- package/dist/components/ui/context-menu.js +34 -0
- package/dist/components/ui/dialog.d.ts +20 -0
- package/dist/components/ui/dialog.js +24 -0
- package/dist/components/ui/dropdown-menu.d.ts +27 -0
- package/dist/components/ui/dropdown-menu.js +36 -0
- package/dist/components/ui/form.d.ts +23 -0
- package/dist/components/ui/form.js +63 -0
- package/dist/components/ui/hover-card.d.ts +6 -0
- package/dist/components/ui/hover-card.js +10 -0
- package/dist/components/ui/inline-code.d.ts +3 -0
- package/dist/components/ui/inline-code.js +29 -0
- package/dist/components/ui/input-otp.d.ts +32 -0
- package/dist/components/ui/input-otp.js +19 -0
- package/dist/components/ui/input.d.ts +9 -0
- package/dist/components/ui/input.js +23 -0
- package/dist/components/ui/label.d.ts +6 -0
- package/dist/components/ui/label.js +12 -0
- package/dist/components/ui/link.d.ts +12 -0
- package/dist/components/ui/link.js +11 -0
- package/dist/components/ui/menubar.d.ts +31 -0
- package/dist/components/ui/menubar.js +36 -0
- package/dist/components/ui/navigation-menu.d.ts +12 -0
- package/dist/components/ui/navigation-menu.js +24 -0
- package/dist/components/ui/password-input.d.ts +4 -0
- package/dist/components/ui/password-input.js +13 -0
- package/dist/components/ui/popover.d.ts +7 -0
- package/dist/components/ui/popover.js +11 -0
- package/dist/components/ui/progress.d.ts +4 -0
- package/dist/components/ui/progress.js +8 -0
- package/dist/components/ui/radio-group.d.ts +5 -0
- package/dist/components/ui/radio-group.js +15 -0
- package/dist/components/ui/scroll-area.d.ts +5 -0
- package/dist/components/ui/scroll-area.js +12 -0
- package/dist/components/ui/select.d.ts +13 -0
- package/dist/components/ui/select.js +27 -0
- package/dist/components/ui/separator.d.ts +4 -0
- package/dist/components/ui/separator.js +8 -0
- package/dist/components/ui/sheet.d.ts +26 -0
- package/dist/components/ui/sheet.js +37 -0
- package/dist/components/ui/skeleton.d.ts +5 -0
- package/dist/components/ui/skeleton.js +38 -0
- package/dist/components/ui/slider.d.ts +4 -0
- package/dist/components/ui/slider.js +8 -0
- package/dist/components/ui/spinner.d.ts +2 -0
- package/dist/components/ui/spinner.js +7 -0
- package/dist/components/ui/switch.d.ts +11 -0
- package/dist/components/ui/switch.js +25 -0
- package/dist/components/ui/table.d.ts +10 -0
- package/dist/components/ui/table.js +20 -0
- package/dist/components/ui/tabs.d.ts +7 -0
- package/dist/components/ui/tabs.js +13 -0
- package/dist/components/ui/textarea.d.ts +5 -0
- package/dist/components/ui/textarea.js +8 -0
- package/dist/components/ui/toast.d.ts +15 -0
- package/dist/components/ui/toast.js +34 -0
- package/dist/components/ui/toaster.d.ts +1 -0
- package/dist/components/ui/toaster.js +10 -0
- package/dist/components/ui/toggle-group.d.ts +12 -0
- package/dist/components/ui/toggle-group.js +21 -0
- package/dist/components/ui/toggle.d.ts +12 -0
- package/dist/components/ui/toggle.js +26 -0
- package/dist/components/ui/tooltip.d.ts +7 -0
- package/dist/components/ui/tooltip.js +12 -0
- package/dist/components/ui/typography.d.ts +10 -0
- package/dist/components/ui/typography.js +33 -0
- package/dist/components/ui/use-toast.d.ts +44 -0
- package/dist/components/ui/use-toast.js +131 -0
- package/dist/index.d.ts +47 -0
- package/dist/index.js +47 -0
- package/dist/lib/utils.d.ts +2 -0
- package/dist/lib/utils.js +5 -0
- package/package.json +83 -0
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { CheckIcon } from "@radix-ui/react-icons";
|
|
5
|
+
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
|
6
|
+
import { cn } from "../../lib/utils";
|
|
7
|
+
const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
|
|
8
|
+
return (_jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref: ref }));
|
|
9
|
+
});
|
|
10
|
+
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
|
|
11
|
+
const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
|
|
12
|
+
return (_jsx(RadioGroupPrimitive.Item, { ref: ref, className: cn("aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx(CheckIcon, { className: "h-3.5 w-3.5 fill-primary" }) }) }));
|
|
13
|
+
});
|
|
14
|
+
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
|
15
|
+
export { RadioGroup, RadioGroupItem };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
3
|
+
declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
export { ScrollArea, ScrollBar };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
|
|
7
|
+
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
8
|
+
const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, orientation: orientation, className: cn("flex touch-none select-none", orientation === "vertical" &&
|
|
9
|
+
"h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" &&
|
|
10
|
+
"h-2.5 flex-col border-t border-t-transparent p-[1px]", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" }) })));
|
|
11
|
+
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
|
12
|
+
export { ScrollArea, ScrollBar };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
3
|
+
declare const Select: React.FC<SelectPrimitive.SelectProps>;
|
|
4
|
+
declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
|
|
6
|
+
declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
7
|
+
declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
9
|
+
declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
12
|
+
declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, } from "@radix-ui/react-icons";
|
|
5
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
6
|
+
import { cn } from "../../lib/utils";
|
|
7
|
+
const Select = SelectPrimitive.Root;
|
|
8
|
+
const SelectGroup = SelectPrimitive.Group;
|
|
9
|
+
const SelectValue = SelectPrimitive.Value;
|
|
10
|
+
const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(CaretSortIcon, { className: "h-4 w-4 opacity-50" }) })] })));
|
|
11
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
12
|
+
const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUpIcon, {}) })));
|
|
13
|
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
14
|
+
const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDownIcon, {}) })));
|
|
15
|
+
SelectScrollDownButton.displayName =
|
|
16
|
+
SelectPrimitive.ScrollDownButton.displayName;
|
|
17
|
+
const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" &&
|
|
18
|
+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
|
|
19
|
+
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
|
|
20
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
21
|
+
const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", className), ...props })));
|
|
22
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
23
|
+
const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
|
|
24
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
25
|
+
const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
|
|
26
|
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
27
|
+
export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
3
|
+
declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
export { Separator };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (_jsx(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className), ...props })));
|
|
7
|
+
Separator.displayName = SeparatorPrimitive.Root.displayName;
|
|
8
|
+
export { Separator };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
3
|
+
import { type VariantProps } from "class-variance-authority";
|
|
4
|
+
declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
|
|
5
|
+
declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
7
|
+
declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
|
|
8
|
+
declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
9
|
+
declare const sheetVariants: (props?: ({
|
|
10
|
+
side?: "top" | "right" | "bottom" | "left" | null | undefined;
|
|
11
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
|
+
interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
|
|
13
|
+
hasCloseButton?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
16
|
+
declare const SheetHeader: {
|
|
17
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
displayName: string;
|
|
19
|
+
};
|
|
20
|
+
declare const SheetFooter: {
|
|
21
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
displayName: string;
|
|
23
|
+
};
|
|
24
|
+
declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
25
|
+
declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
26
|
+
export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
5
|
+
import { Cross2Icon } from "@radix-ui/react-icons";
|
|
6
|
+
import { cva } from "class-variance-authority";
|
|
7
|
+
import { cn } from "../../lib/utils";
|
|
8
|
+
const Sheet = SheetPrimitive.Root;
|
|
9
|
+
const SheetTrigger = SheetPrimitive.Trigger;
|
|
10
|
+
const SheetClose = SheetPrimitive.Close;
|
|
11
|
+
const SheetPortal = SheetPrimitive.Portal;
|
|
12
|
+
const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Overlay, { className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props, ref: ref })));
|
|
13
|
+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
|
14
|
+
const sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-100 data-[state=open]:duration-100", {
|
|
15
|
+
variants: {
|
|
16
|
+
side: {
|
|
17
|
+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
18
|
+
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
19
|
+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
|
20
|
+
right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
defaultVariants: {
|
|
24
|
+
side: "right",
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
const SheetContent = React.forwardRef(({ side = "right", hasCloseButton = true, className, children, ...props }, ref) => (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { ref: ref, className: cn(sheetVariants({ side }), className), ...props, children: [children, hasCloseButton ? _jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(Cross2Icon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }) : null] })] })));
|
|
28
|
+
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
|
29
|
+
const SheetHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props }));
|
|
30
|
+
SheetHeader.displayName = "SheetHeader";
|
|
31
|
+
const SheetFooter = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
|
|
32
|
+
SheetFooter.displayName = "SheetFooter";
|
|
33
|
+
const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold text-foreground", className), ...props })));
|
|
34
|
+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
|
35
|
+
const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Description, { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
|
|
36
|
+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
37
|
+
export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const Skeleton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
3
|
+
deactivated?: boolean | undefined;
|
|
4
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
5
|
+
export { Skeleton };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import styled, { keyframes } from 'styled-components';
|
|
5
|
+
const getFilterString = (brightness1, brightness2) => {
|
|
6
|
+
return `
|
|
7
|
+
0% {
|
|
8
|
+
filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(${brightness1});
|
|
9
|
+
}
|
|
10
|
+
100% {
|
|
11
|
+
filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(${brightness2});
|
|
12
|
+
}
|
|
13
|
+
`;
|
|
14
|
+
};
|
|
15
|
+
const animationLight = keyframes `${getFilterString(0.8, 0.9)}`;
|
|
16
|
+
const animationDark = keyframes `${getFilterString(0.2, 0.1)}`;
|
|
17
|
+
const Primitive = styled("span") `
|
|
18
|
+
&[data-stack-state="activated"], &[data-stack-state="activated"] * {
|
|
19
|
+
pointer-events: none !important;
|
|
20
|
+
-webkit-user-select: none !important;
|
|
21
|
+
-moz-user-select: none !important;
|
|
22
|
+
user-select: none !important;
|
|
23
|
+
cursor: default !important;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&[data-stack-state="activated"] {
|
|
27
|
+
animation: ${animationLight} 1s infinite alternate-reverse !important;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
html[data-stack-theme='dark'] &[data-stack-state="activated"] {
|
|
31
|
+
animation: ${animationDark} 1s infinite alternate-reverse !important;
|
|
32
|
+
}
|
|
33
|
+
`;
|
|
34
|
+
const Skeleton = React.forwardRef((props, ref) => {
|
|
35
|
+
return _jsx(Primitive, { ref: ref, "data-stack-state": props.deactivated ? "deactivated" : "activated", ...props });
|
|
36
|
+
});
|
|
37
|
+
Skeleton.displayName = "Skeleton";
|
|
38
|
+
export { Skeleton };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as SliderPrimitive from "@radix-ui/react-slider";
|
|
3
|
+
declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
4
|
+
export { Slider };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as SliderPrimitive from "@radix-ui/react-slider";
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
const Slider = React.forwardRef(({ className, ...props }, ref) => (_jsxs(SliderPrimitive.Root, { ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }), _jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })] })));
|
|
7
|
+
Slider.displayName = SliderPrimitive.Root.displayName;
|
|
8
|
+
export { Slider };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ReloadIcon } from "@radix-ui/react-icons";
|
|
3
|
+
import React from "react";
|
|
4
|
+
export const Spinner = React.forwardRef((props, ref) => {
|
|
5
|
+
return (_jsx("span", { ref: ref, ...props, children: _jsx(ReloadIcon, { className: "animate-spin" }) }));
|
|
6
|
+
});
|
|
7
|
+
Spinner.displayName = "Spinner";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
3
|
+
interface OriginalSwitchProps extends React.ComponentProps<typeof SwitchPrimitives.Root> {
|
|
4
|
+
}
|
|
5
|
+
interface AsyncSwitchProps extends OriginalSwitchProps {
|
|
6
|
+
onCheckedChange?: (checked: boolean) => Promise<void> | void;
|
|
7
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;
|
|
8
|
+
loading?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const Switch: React.ForwardRefExoticComponent<Omit<AsyncSwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
11
|
+
export { Switch };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
|
|
7
|
+
import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
|
|
8
|
+
import { Spinner } from "./spinner";
|
|
9
|
+
const OriginalSwitch = React.forwardRef(({ className, ...props }, ref) => (_jsx(SwitchPrimitives.Root, { className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className), ...props, ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0") }) })));
|
|
10
|
+
OriginalSwitch.displayName = SwitchPrimitives.Root.displayName;
|
|
11
|
+
const Switch = React.forwardRef(({ loading: loadingProp, onClick, onCheckedChange, ...props }, ref) => {
|
|
12
|
+
const [handleClick, isLoadingClick] = useAsyncCallback(async (e) => {
|
|
13
|
+
await onClick?.(e);
|
|
14
|
+
}, [onClick]);
|
|
15
|
+
const [handleCheckedChange, isLoadingCheckedChange] = useAsyncCallback(async (checked) => {
|
|
16
|
+
await onCheckedChange?.(checked);
|
|
17
|
+
}, [onCheckedChange]);
|
|
18
|
+
const loading = loadingProp || isLoadingClick || isLoadingCheckedChange;
|
|
19
|
+
return (_jsxs("span", { className: "relative leading-[0]", children: [_jsx(OriginalSwitch, { ...props, ref: ref, onClick: (e) => runAsynchronouslyWithAlert(handleClick(e)), onCheckedChange: (checked) => runAsynchronouslyWithAlert(handleCheckedChange(checked)), disabled: props.disabled || loading, style: {
|
|
20
|
+
visibility: loading ? "hidden" : "visible",
|
|
21
|
+
...props.style,
|
|
22
|
+
} }), _jsx("span", { className: cn("absolute inset-0 flex items-center justify-center", !loading && "hidden"), children: _jsx(Spinner, {}) })] }));
|
|
23
|
+
});
|
|
24
|
+
Switch.displayName = "Switch";
|
|
25
|
+
export { Switch };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
|
|
3
|
+
declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
4
|
+
declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
5
|
+
declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
6
|
+
declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
|
|
7
|
+
declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
|
|
8
|
+
declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
|
|
9
|
+
declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
|
|
10
|
+
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { cn } from "../../lib/utils";
|
|
4
|
+
const Table = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", { ref: ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })));
|
|
5
|
+
Table.displayName = "Table";
|
|
6
|
+
const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("[&_tr]:border-b", className), ...props })));
|
|
7
|
+
TableHeader.displayName = "TableHeader";
|
|
8
|
+
const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn("[&_tr:last-child]:border-0", className), ...props })));
|
|
9
|
+
TableBody.displayName = "TableBody";
|
|
10
|
+
const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })));
|
|
11
|
+
TableFooter.displayName = "TableFooter";
|
|
12
|
+
const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn("border-b data-[state=selected]:bg-muted", props.onClick ? "hover:bg-muted/50 cursor-pointer" : "", className), ...props })));
|
|
13
|
+
TableRow.displayName = "TableRow";
|
|
14
|
+
const TableHead = React.forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props })));
|
|
15
|
+
TableHead.displayName = "TableHead";
|
|
16
|
+
const TableCell = React.forwardRef(({ className, ...props }, ref) => (_jsx("td", { ref: ref, className: cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props })));
|
|
17
|
+
TableCell.displayName = "TableCell";
|
|
18
|
+
const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })));
|
|
19
|
+
TableCaption.displayName = "TableCaption";
|
|
20
|
+
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
3
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
const Tabs = TabsPrimitive.Root;
|
|
7
|
+
const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground", className), ...props })));
|
|
8
|
+
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
9
|
+
const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className), ...props })));
|
|
10
|
+
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
11
|
+
const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), ...props })));
|
|
12
|
+
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
13
|
+
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { cn } from "../../lib/utils";
|
|
4
|
+
const Textarea = React.forwardRef(({ className, ...props }, ref) => {
|
|
5
|
+
return (_jsx("textarea", { className: cn("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref, ...props }));
|
|
6
|
+
});
|
|
7
|
+
Textarea.displayName = "Textarea";
|
|
8
|
+
export { Textarea };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as ToastPrimitives from "@radix-ui/react-toast";
|
|
3
|
+
import { type VariantProps } from "class-variance-authority";
|
|
4
|
+
declare const ToastProvider: React.FC<ToastPrimitives.ToastProviderProps>;
|
|
5
|
+
declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
|
|
6
|
+
declare const Toast: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ({
|
|
7
|
+
variant?: "default" | "destructive" | null | undefined;
|
|
8
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLLIElement>>;
|
|
9
|
+
declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
10
|
+
declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
11
|
+
declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastTitleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
12
|
+
declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
|
|
14
|
+
type ToastActionElement = React.ReactElement<typeof ToastAction>;
|
|
15
|
+
export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { Cross2Icon } from "@radix-ui/react-icons";
|
|
5
|
+
import * as ToastPrimitives from "@radix-ui/react-toast";
|
|
6
|
+
import { cva } from "class-variance-authority";
|
|
7
|
+
import { cn } from "../../lib/utils";
|
|
8
|
+
const ToastProvider = ToastPrimitives.Provider;
|
|
9
|
+
const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Viewport, { ref: ref, className: cn("fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]", className), ...props })));
|
|
10
|
+
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
|
11
|
+
const toastVariants = cva("group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", {
|
|
12
|
+
variants: {
|
|
13
|
+
variant: {
|
|
14
|
+
default: "border bg-background text-foreground",
|
|
15
|
+
destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
defaultVariants: {
|
|
19
|
+
variant: "default",
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
|
|
23
|
+
return (_jsx(ToastPrimitives.Root, { ref: ref, className: cn(toastVariants({ variant }), className), ...props }));
|
|
24
|
+
});
|
|
25
|
+
Toast.displayName = ToastPrimitives.Root.displayName;
|
|
26
|
+
const ToastAction = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Action, { ref: ref, className: cn("inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive", className), ...props })));
|
|
27
|
+
ToastAction.displayName = ToastPrimitives.Action.displayName;
|
|
28
|
+
const ToastClose = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Close, { ref: ref, className: cn("absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600", className), "toast-close": "", ...props, children: _jsx(Cross2Icon, { className: "h-4 w-4" }) })));
|
|
29
|
+
ToastClose.displayName = ToastPrimitives.Close.displayName;
|
|
30
|
+
const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Title, { ref: ref, className: cn("text-sm font-semibold [&+div]:text-xs", className), ...props })));
|
|
31
|
+
ToastTitle.displayName = ToastPrimitives.Title.displayName;
|
|
32
|
+
const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Description, { ref: ref, className: cn("text-sm opacity-90", className), ...props })));
|
|
33
|
+
ToastDescription.displayName = ToastPrimitives.Description.displayName;
|
|
34
|
+
export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function Toaster(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, } from "./toast";
|
|
4
|
+
import { useToast } from "./use-toast";
|
|
5
|
+
export function Toaster() {
|
|
6
|
+
const { toasts } = useToast();
|
|
7
|
+
return (_jsxs(ToastProvider, { children: [toasts.map(function ({ id, title, description, action, ...props }) {
|
|
8
|
+
return (_jsxs(Toast, { ...props, children: [_jsxs("div", { className: "grid gap-1", children: [title && _jsx(ToastTitle, { children: title }), description && (_jsx(ToastDescription, { children: description }))] }), action, _jsx(ToastClose, {})] }, id));
|
|
9
|
+
}), _jsx(ToastViewport, {})] }));
|
|
10
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
3
|
+
import { VariantProps } from "class-variance-authority";
|
|
4
|
+
declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
|
|
5
|
+
variant?: "default" | "outline" | null | undefined;
|
|
6
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
9
|
+
variant?: "default" | "outline" | null | undefined;
|
|
10
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
11
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
|
|
12
|
+
export { ToggleGroup, ToggleGroupItem };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
import { toggleVariants } from "./toggle";
|
|
7
|
+
const ToggleGroupContext = React.createContext({
|
|
8
|
+
size: "default",
|
|
9
|
+
variant: "default",
|
|
10
|
+
});
|
|
11
|
+
const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => (_jsx(ToggleGroupPrimitive.Root, { ref: ref, className: cn("flex items-center justify-center gap-1", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size }, children: children }) })));
|
|
12
|
+
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
|
13
|
+
const ToggleGroupItem = React.forwardRef(({ className, children, variant, size, ...props }, ref) => {
|
|
14
|
+
const context = React.useContext(ToggleGroupContext);
|
|
15
|
+
return (_jsx(ToggleGroupPrimitive.Item, { ref: ref, className: cn(toggleVariants({
|
|
16
|
+
variant: context.variant || variant,
|
|
17
|
+
size: context.size || size,
|
|
18
|
+
}), className), ...props, children: children }));
|
|
19
|
+
});
|
|
20
|
+
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
|
21
|
+
export { ToggleGroup, ToggleGroupItem };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
|
3
|
+
import { type VariantProps } from "class-variance-authority";
|
|
4
|
+
declare const toggleVariants: (props?: ({
|
|
5
|
+
variant?: "default" | "outline" | null | undefined;
|
|
6
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
9
|
+
variant?: "default" | "outline" | null | undefined;
|
|
10
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
11
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
|
|
12
|
+
export { Toggle, toggleVariants };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
|
5
|
+
import { cva } from "class-variance-authority";
|
|
6
|
+
import { cn } from "../../lib/utils";
|
|
7
|
+
const toggleVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground", {
|
|
8
|
+
variants: {
|
|
9
|
+
variant: {
|
|
10
|
+
default: "bg-transparent",
|
|
11
|
+
outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
|
|
12
|
+
},
|
|
13
|
+
size: {
|
|
14
|
+
default: "h-9 px-3",
|
|
15
|
+
sm: "h-8 px-2",
|
|
16
|
+
lg: "h-10 px-3",
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
defaultVariants: {
|
|
20
|
+
variant: "default",
|
|
21
|
+
size: "default",
|
|
22
|
+
},
|
|
23
|
+
});
|
|
24
|
+
const Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => (_jsx(TogglePrimitive.Root, { ref: ref, className: cn(toggleVariants({ variant, size, className })), ...props })));
|
|
25
|
+
Toggle.displayName = TogglePrimitive.Root.displayName;
|
|
26
|
+
export { Toggle, toggleVariants };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
3
|
+
declare const TooltipProvider: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipProviderProps & React.RefAttributes<void>>;
|
|
4
|
+
declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
|
|
5
|
+
declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
const TooltipProvider = React.forwardRef((props, ref) => (_jsx(TooltipPrimitive.Provider, { delayDuration: 0, ...props })));
|
|
7
|
+
TooltipProvider.displayName = TooltipPrimitive.Provider.displayName;
|
|
8
|
+
const Tooltip = TooltipPrimitive.Root;
|
|
9
|
+
const TooltipTrigger = TooltipPrimitive.Trigger;
|
|
10
|
+
const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props })));
|
|
11
|
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
12
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import React from "react";
|
|
3
|
+
declare const typographyVariants: (props?: ({
|
|
4
|
+
type?: "h2" | "h3" | "label" | "p" | "h1" | "h4" | "footnote" | null | undefined;
|
|
5
|
+
variant?: "destructive" | "success" | "secondary" | "primary" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
interface TypographyProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof typographyVariants> {
|
|
8
|
+
}
|
|
9
|
+
declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
10
|
+
export { Typography };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../lib/utils";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import React from "react";
|
|
5
|
+
const typographyVariants = cva("text-md", {
|
|
6
|
+
variants: {
|
|
7
|
+
type: {
|
|
8
|
+
h1: "text-3xl font-bold",
|
|
9
|
+
h2: "text-2xl font-semibold",
|
|
10
|
+
h3: "text-xl font-medium",
|
|
11
|
+
h4: "text-lg font-medium",
|
|
12
|
+
p: "text-md",
|
|
13
|
+
label: "text-sm",
|
|
14
|
+
footnote: "text-xs",
|
|
15
|
+
},
|
|
16
|
+
variant: {
|
|
17
|
+
primary: "text-black dark:text-white",
|
|
18
|
+
secondary: "text-zinc-600 dark:text-zinc-400",
|
|
19
|
+
destructive: "text-destructive",
|
|
20
|
+
success: "text-green-500",
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
defaultVariants: {
|
|
24
|
+
type: "p",
|
|
25
|
+
variant: "primary",
|
|
26
|
+
},
|
|
27
|
+
});
|
|
28
|
+
const Typography = React.forwardRef(({ className, type, variant, ...props }, ref) => {
|
|
29
|
+
const Comp = (type === 'footnote' || type === 'label' ? 'p' : type) || 'p';
|
|
30
|
+
return (_jsx(Comp, { className: cn(typographyVariants({ type, variant, className })), ref: ref, ...props }));
|
|
31
|
+
});
|
|
32
|
+
Typography.displayName = "Typography";
|
|
33
|
+
export { Typography };
|