@voyantjs/ui 0.6.7
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 +30 -0
- package/dist/components/accordion.d.ts +7 -0
- package/dist/components/accordion.d.ts.map +1 -0
- package/dist/components/accordion.js +17 -0
- package/dist/components/alert-dialog.d.ts +19 -0
- package/dist/components/alert-dialog.d.ts.map +1 -0
- package/dist/components/alert-dialog.js +42 -0
- package/dist/components/alert.d.ts +11 -0
- package/dist/components/alert.d.ts.map +1 -0
- package/dist/components/alert.js +27 -0
- package/dist/components/aspect-ratio.d.ts +5 -0
- package/dist/components/aspect-ratio.d.ts.map +1 -0
- package/dist/components/aspect-ratio.js +8 -0
- package/dist/components/avatar.d.ts +12 -0
- package/dist/components/avatar.d.ts.map +1 -0
- package/dist/components/avatar.js +22 -0
- package/dist/components/badge.d.ts +8 -0
- package/dist/components/badge.d.ts.map +1 -0
- package/dist/components/badge.js +33 -0
- package/dist/components/breadcrumb.d.ts +11 -0
- package/dist/components/breadcrumb.d.ts.map +1 -0
- package/dist/components/breadcrumb.js +36 -0
- package/dist/components/button-group.d.ts +11 -0
- package/dist/components/button-group.d.ts.map +1 -0
- package/dist/components/button-group.js +36 -0
- package/dist/components/button.d.ts +9 -0
- package/dist/components/button.d.ts.map +1 -0
- package/dist/components/button.js +34 -0
- package/dist/components/calendar.d.ts +11 -0
- package/dist/components/calendar.d.ts.map +1 -0
- package/dist/components/calendar.js +76 -0
- package/dist/components/card.d.ts +12 -0
- package/dist/components/card.d.ts.map +1 -0
- package/dist/components/card.js +24 -0
- package/dist/components/carousel.d.ts +29 -0
- package/dist/components/carousel.d.ts.map +1 -0
- package/dist/components/carousel.js +91 -0
- package/dist/components/chart.d.ts +45 -0
- package/dist/components/chart.d.ts.map +1 -0
- package/dist/components/chart.js +121 -0
- package/dist/components/checkbox.d.ts +4 -0
- package/dist/components/checkbox.d.ts.map +1 -0
- package/dist/components/checkbox.js +8 -0
- package/dist/components/collapsible.d.ts +6 -0
- package/dist/components/collapsible.d.ts.map +1 -0
- package/dist/components/collapsible.js +12 -0
- package/dist/components/combobox.d.ts +25 -0
- package/dist/components/combobox.d.ts.map +1 -0
- package/dist/components/combobox.js +57 -0
- package/dist/components/command.d.ts +20 -0
- package/dist/components/command.d.ts.map +1 -0
- package/dist/components/command.js +35 -0
- package/dist/components/confirm-action-button.d.ts +14 -0
- package/dist/components/confirm-action-button.d.ts.map +1 -0
- package/dist/components/confirm-action-button.js +21 -0
- package/dist/components/context-menu.d.ts +30 -0
- package/dist/components/context-menu.d.ts.map +1 -0
- package/dist/components/context-menu.js +50 -0
- package/dist/components/contract-template-authoring-help.d.ts +32 -0
- package/dist/components/contract-template-authoring-help.d.ts.map +1 -0
- package/dist/components/contract-template-authoring-help.js +37 -0
- package/dist/components/country-combobox.d.ts +9 -0
- package/dist/components/country-combobox.d.ts.map +1 -0
- package/dist/components/country-combobox.js +47 -0
- package/dist/components/currency-combobox.d.ts +14 -0
- package/dist/components/currency-combobox.d.ts.map +1 -0
- package/dist/components/currency-combobox.js +53 -0
- package/dist/components/dashboard-widgets.d.ts +66 -0
- package/dist/components/dashboard-widgets.d.ts.map +1 -0
- package/dist/components/dashboard-widgets.js +64 -0
- package/dist/components/data-table-column-header.d.ts +9 -0
- package/dist/components/data-table-column-header.d.ts.map +1 -0
- package/dist/components/data-table-column-header.js +12 -0
- package/dist/components/data-table-pagination.d.ts +7 -0
- package/dist/components/data-table-pagination.d.ts.map +1 -0
- package/dist/components/data-table-pagination.js +11 -0
- package/dist/components/data-table.d.ts +22 -0
- package/dist/components/data-table.d.ts.map +1 -0
- package/dist/components/data-table.js +55 -0
- package/dist/components/date-picker.d.ts +38 -0
- package/dist/components/date-picker.d.ts.map +1 -0
- package/dist/components/date-picker.js +120 -0
- package/dist/components/date-time-picker.d.ts +30 -0
- package/dist/components/date-time-picker.d.ts.map +1 -0
- package/dist/components/date-time-picker.js +75 -0
- package/dist/components/dialog.d.ts +18 -0
- package/dist/components/dialog.d.ts.map +1 -0
- package/dist/components/dialog.js +37 -0
- package/dist/components/direction.d.ts +2 -0
- package/dist/components/direction.d.ts.map +1 -0
- package/dist/components/direction.js +1 -0
- package/dist/components/drawer.d.ts +14 -0
- package/dist/components/drawer.d.ts.map +1 -0
- package/dist/components/drawer.js +34 -0
- package/dist/components/dropdown-menu.d.ts +30 -0
- package/dist/components/dropdown-menu.d.ts.map +1 -0
- package/dist/components/dropdown-menu.js +50 -0
- package/dist/components/empty.d.ts +12 -0
- package/dist/components/empty.d.ts.map +1 -0
- package/dist/components/empty.js +33 -0
- package/dist/components/field.d.ts +25 -0
- package/dist/components/field.d.ts.map +1 -0
- package/dist/components/field.js +65 -0
- package/dist/components/hover-card.d.ts +6 -0
- package/dist/components/hover-card.d.ts.map +1 -0
- package/dist/components/hover-card.js +13 -0
- package/dist/components/index.d.ts +86 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +85 -0
- package/dist/components/input-group.d.ts +19 -0
- package/dist/components/input-group.d.ts.map +1 -0
- package/dist/components/input-group.js +73 -0
- package/dist/components/input-otp.d.ts +12 -0
- package/dist/components/input-otp.d.ts.map +1 -0
- package/dist/components/input-otp.js +20 -0
- package/dist/components/input.d.ts +4 -0
- package/dist/components/input.d.ts.map +1 -0
- package/dist/components/input.js +7 -0
- package/dist/components/item.d.ts +23 -0
- package/dist/components/item.d.ts.map +1 -0
- package/dist/components/item.js +78 -0
- package/dist/components/kbd.d.ts +4 -0
- package/dist/components/kbd.d.ts.map +1 -0
- package/dist/components/kbd.js +9 -0
- package/dist/components/label.d.ts +4 -0
- package/dist/components/label.d.ts.map +1 -0
- package/dist/components/label.js +8 -0
- package/dist/components/menubar.d.ts +30 -0
- package/dist/components/menubar.d.ts.map +1 -0
- package/dist/components/menubar.js +56 -0
- package/dist/components/native-select.d.ts +9 -0
- package/dist/components/native-select.d.ts.map +1 -0
- package/dist/components/native-select.js +13 -0
- package/dist/components/navigation-menu.d.ts +12 -0
- package/dist/components/navigation-menu.d.ts.map +1 -0
- package/dist/components/navigation-menu.js +31 -0
- package/dist/components/notification-deliveries-page.d.ts +2 -0
- package/dist/components/notification-deliveries-page.d.ts.map +1 -0
- package/dist/components/notification-deliveries-page.js +22 -0
- package/dist/components/notification-delivery-detail-dialog.d.ts +8 -0
- package/dist/components/notification-delivery-detail-dialog.d.ts.map +1 -0
- package/dist/components/notification-delivery-detail-dialog.js +29 -0
- package/dist/components/notification-reminder-rule-dialog.d.ts +10 -0
- package/dist/components/notification-reminder-rule-dialog.d.ts.map +1 -0
- package/dist/components/notification-reminder-rule-dialog.js +123 -0
- package/dist/components/notification-reminder-rules-page.d.ts +2 -0
- package/dist/components/notification-reminder-rules-page.d.ts.map +1 -0
- package/dist/components/notification-reminder-rules-page.js +35 -0
- package/dist/components/notification-reminder-runs-page.d.ts +2 -0
- package/dist/components/notification-reminder-runs-page.d.ts.map +1 -0
- package/dist/components/notification-reminder-runs-page.js +20 -0
- package/dist/components/notification-template-authoring-help.d.ts +11 -0
- package/dist/components/notification-template-authoring-help.d.ts.map +1 -0
- package/dist/components/notification-template-authoring-help.js +6 -0
- package/dist/components/notification-template-detail-page.d.ts +6 -0
- package/dist/components/notification-template-detail-page.d.ts.map +1 -0
- package/dist/components/notification-template-detail-page.js +145 -0
- package/dist/components/notification-template-dialog.d.ts +10 -0
- package/dist/components/notification-template-dialog.d.ts.map +1 -0
- package/dist/components/notification-template-dialog.js +296 -0
- package/dist/components/notification-templates-page.d.ts +2 -0
- package/dist/components/notification-templates-page.d.ts.map +1 -0
- package/dist/components/notification-templates-page.js +33 -0
- package/dist/components/overview-metric.d.ts +12 -0
- package/dist/components/overview-metric.d.ts.map +1 -0
- package/dist/components/overview-metric.js +6 -0
- package/dist/components/pagination.d.ts +18 -0
- package/dist/components/pagination.d.ts.map +1 -0
- package/dist/components/pagination.js +26 -0
- package/dist/components/popover.d.ts +10 -0
- package/dist/components/popover.d.ts.map +1 -0
- package/dist/components/popover.js +22 -0
- package/dist/components/progress.d.ts +8 -0
- package/dist/components/progress.d.ts.map +1 -0
- package/dist/components/progress.js +19 -0
- package/dist/components/radio-group.d.ts +6 -0
- package/dist/components/radio-group.d.ts.map +1 -0
- package/dist/components/radio-group.js +11 -0
- package/dist/components/resizable.d.ts +8 -0
- package/dist/components/resizable.d.ts.map +1 -0
- package/dist/components/resizable.js +13 -0
- package/dist/components/rich-text-editor.d.ts +13 -0
- package/dist/components/rich-text-editor.d.ts.map +1 -0
- package/dist/components/rich-text-editor.js +71 -0
- package/dist/components/rich-text-variable-extension.d.ts +6 -0
- package/dist/components/rich-text-variable-extension.d.ts.map +1 -0
- package/dist/components/rich-text-variable-extension.js +117 -0
- package/dist/components/scroll-area.d.ts +5 -0
- package/dist/components/scroll-area.d.ts.map +1 -0
- package/dist/components/scroll-area.js +10 -0
- package/dist/components/select.d.ts +16 -0
- package/dist/components/select.d.ts.map +1 -0
- package/dist/components/select.js +33 -0
- package/dist/components/selection-action-bar.d.ts +8 -0
- package/dist/components/selection-action-bar.d.ts.map +1 -0
- package/dist/components/selection-action-bar.js +7 -0
- package/dist/components/separator.d.ts +4 -0
- package/dist/components/separator.d.ts.map +1 -0
- package/dist/components/separator.js +7 -0
- package/dist/components/sheet.d.ts +15 -0
- package/dist/components/sheet.d.ts.map +1 -0
- package/dist/components/sheet.js +37 -0
- package/dist/components/sidebar-core.d.ts +34 -0
- package/dist/components/sidebar-core.d.ts.map +1 -0
- package/dist/components/sidebar-core.js +112 -0
- package/dist/components/sidebar-menu.d.ts +33 -0
- package/dist/components/sidebar-menu.d.ts.map +1 -0
- package/dist/components/sidebar-menu.js +128 -0
- package/dist/components/sidebar.d.ts +3 -0
- package/dist/components/sidebar.d.ts.map +1 -0
- package/dist/components/sidebar.js +2 -0
- package/dist/components/skeleton.d.ts +7 -0
- package/dist/components/skeleton.d.ts.map +1 -0
- package/dist/components/skeleton.js +6 -0
- package/dist/components/slider.d.ts +4 -0
- package/dist/components/slider.d.ts.map +1 -0
- package/dist/components/slider.js +9 -0
- package/dist/components/sonner.d.ts +4 -0
- package/dist/components/sonner.d.ts.map +1 -0
- package/dist/components/sonner.js +24 -0
- package/dist/components/spinner.d.ts +3 -0
- package/dist/components/spinner.d.ts.map +1 -0
- package/dist/components/spinner.js +7 -0
- package/dist/components/switch.d.ts +6 -0
- package/dist/components/switch.d.ts.map +1 -0
- package/dist/components/switch.js +7 -0
- package/dist/components/table.d.ts +11 -0
- package/dist/components/table.d.ts.map +1 -0
- package/dist/components/table.js +27 -0
- package/dist/components/tabs.d.ts +11 -0
- package/dist/components/tabs.d.ts.map +1 -0
- package/dist/components/tabs.js +28 -0
- package/dist/components/textarea.d.ts +4 -0
- package/dist/components/textarea.d.ts.map +1 -0
- package/dist/components/textarea.js +6 -0
- package/dist/components/toggle-group.d.ts +11 -0
- package/dist/components/toggle-group.d.ts.map +1 -0
- package/dist/components/toggle-group.js +24 -0
- package/dist/components/toggle.d.ts +9 -0
- package/dist/components/toggle.d.ts.map +1 -0
- package/dist/components/toggle.js +25 -0
- package/dist/components/tooltip.d.ts +7 -0
- package/dist/components/tooltip.d.ts.map +1 -0
- package/dist/components/tooltip.js +16 -0
- package/dist/components/typography.d.ts +18 -0
- package/dist/components/typography.d.ts.map +1 -0
- package/dist/components/typography.js +48 -0
- package/dist/hooks/use-mobile.d.ts +2 -0
- package/dist/hooks/use-mobile.d.ts.map +1 -0
- package/dist/hooks/use-mobile.js +15 -0
- package/dist/lib/crop-image.d.ts +4 -0
- package/dist/lib/crop-image.d.ts.map +1 -0
- package/dist/lib/crop-image.js +30 -0
- package/dist/lib/utils.d.ts +3 -0
- package/dist/lib/utils.d.ts.map +1 -0
- package/dist/lib/utils.js +5 -0
- package/dist/lib/zod-resolver.d.ts +4 -0
- package/dist/lib/zod-resolver.d.ts.map +1 -0
- package/dist/lib/zod-resolver.js +39 -0
- package/package.json +108 -0
- package/postcss.config.mjs +6 -0
- package/src/styles/globals.css +157 -0
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../lib/utils";
|
|
3
|
+
function Card({ className, size = "default", ...props }) {
|
|
4
|
+
return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className), ...props }));
|
|
5
|
+
}
|
|
6
|
+
function CardHeader({ className, ...props }) {
|
|
7
|
+
return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4", className), ...props }));
|
|
8
|
+
}
|
|
9
|
+
function CardTitle({ className, ...props }) {
|
|
10
|
+
return (_jsx("div", { "data-slot": "card-title", className: cn("font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm", className), ...props }));
|
|
11
|
+
}
|
|
12
|
+
function CardDescription({ className, ...props }) {
|
|
13
|
+
return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
|
|
14
|
+
}
|
|
15
|
+
function CardAction({ className, ...props }) {
|
|
16
|
+
return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
|
|
17
|
+
}
|
|
18
|
+
function CardContent({ className, ...props }) {
|
|
19
|
+
return (_jsx("div", { "data-slot": "card-content", className: cn("px-6 group-data-[size=sm]/card:px-4", className), ...props }));
|
|
20
|
+
}
|
|
21
|
+
function CardFooter({ className, ...props }) {
|
|
22
|
+
return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4", className), ...props }));
|
|
23
|
+
}
|
|
24
|
+
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Button } from "./button";
|
|
4
|
+
type CarouselApi = UseEmblaCarouselType[1];
|
|
5
|
+
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
|
6
|
+
type CarouselOptions = UseCarouselParameters[0];
|
|
7
|
+
type CarouselPlugin = UseCarouselParameters[1];
|
|
8
|
+
type CarouselProps = {
|
|
9
|
+
opts?: CarouselOptions;
|
|
10
|
+
plugins?: CarouselPlugin;
|
|
11
|
+
orientation?: "horizontal" | "vertical";
|
|
12
|
+
setApi?: (api: CarouselApi) => void;
|
|
13
|
+
};
|
|
14
|
+
type CarouselContextProps = {
|
|
15
|
+
carouselRef: ReturnType<typeof useEmblaCarousel>[0];
|
|
16
|
+
api: ReturnType<typeof useEmblaCarousel>[1];
|
|
17
|
+
scrollPrev: () => void;
|
|
18
|
+
scrollNext: () => void;
|
|
19
|
+
canScrollPrev: boolean;
|
|
20
|
+
canScrollNext: boolean;
|
|
21
|
+
} & CarouselProps;
|
|
22
|
+
declare function useCarousel(): CarouselContextProps;
|
|
23
|
+
declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"section"> & CarouselProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
declare function CarouselItem({ className, ...props }: React.ComponentProps<"article">): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel, };
|
|
29
|
+
//# sourceMappingURL=carousel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,gBAAgB,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAElF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAA;IACnD,GAAG,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3C,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,EAAE,OAAO,CAAA;IACtB,aAAa,EAAE,OAAO,CAAA;CACvB,GAAG,aAAa,CAAA;AAIjB,iBAAS,WAAW,yBAQnB;AAED,iBAAS,QAAQ,CAAC,EAChB,WAA0B,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,aAAa,2CA+EjD;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW5E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,2CAe7E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CAuBrC;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CAuBrC;AAED,OAAO,EACL,QAAQ,EACR,KAAK,WAAW,EAChB,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,WAAW,GACZ,CAAA"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import useEmblaCarousel from "embla-carousel-react";
|
|
4
|
+
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { cn } from "../lib/utils";
|
|
7
|
+
import { Button } from "./button";
|
|
8
|
+
const CarouselContext = React.createContext(null);
|
|
9
|
+
function useCarousel() {
|
|
10
|
+
const context = React.useContext(CarouselContext);
|
|
11
|
+
if (!context) {
|
|
12
|
+
throw new Error("useCarousel must be used within a <Carousel />");
|
|
13
|
+
}
|
|
14
|
+
return context;
|
|
15
|
+
}
|
|
16
|
+
function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
|
|
17
|
+
const [carouselRef, api] = useEmblaCarousel({
|
|
18
|
+
...opts,
|
|
19
|
+
axis: orientation === "horizontal" ? "x" : "y",
|
|
20
|
+
}, plugins);
|
|
21
|
+
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
|
|
22
|
+
const [canScrollNext, setCanScrollNext] = React.useState(false);
|
|
23
|
+
const onSelect = React.useCallback((api) => {
|
|
24
|
+
if (!api)
|
|
25
|
+
return;
|
|
26
|
+
setCanScrollPrev(api.canScrollPrev());
|
|
27
|
+
setCanScrollNext(api.canScrollNext());
|
|
28
|
+
}, []);
|
|
29
|
+
const scrollPrev = React.useCallback(() => {
|
|
30
|
+
api?.scrollPrev();
|
|
31
|
+
}, [api]);
|
|
32
|
+
const scrollNext = React.useCallback(() => {
|
|
33
|
+
api?.scrollNext();
|
|
34
|
+
}, [api]);
|
|
35
|
+
const handleKeyDown = React.useCallback((event) => {
|
|
36
|
+
if (event.key === "ArrowLeft") {
|
|
37
|
+
event.preventDefault();
|
|
38
|
+
scrollPrev();
|
|
39
|
+
}
|
|
40
|
+
else if (event.key === "ArrowRight") {
|
|
41
|
+
event.preventDefault();
|
|
42
|
+
scrollNext();
|
|
43
|
+
}
|
|
44
|
+
}, [scrollPrev, scrollNext]);
|
|
45
|
+
React.useEffect(() => {
|
|
46
|
+
if (!api || !setApi)
|
|
47
|
+
return;
|
|
48
|
+
setApi(api);
|
|
49
|
+
}, [api, setApi]);
|
|
50
|
+
React.useEffect(() => {
|
|
51
|
+
if (!api)
|
|
52
|
+
return;
|
|
53
|
+
onSelect(api);
|
|
54
|
+
api.on("reInit", onSelect);
|
|
55
|
+
api.on("select", onSelect);
|
|
56
|
+
return () => {
|
|
57
|
+
api?.off("select", onSelect);
|
|
58
|
+
};
|
|
59
|
+
}, [api, onSelect]);
|
|
60
|
+
return (_jsx(CarouselContext.Provider, { value: {
|
|
61
|
+
carouselRef,
|
|
62
|
+
api: api,
|
|
63
|
+
opts,
|
|
64
|
+
orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
|
65
|
+
scrollPrev,
|
|
66
|
+
scrollNext,
|
|
67
|
+
canScrollPrev,
|
|
68
|
+
canScrollNext,
|
|
69
|
+
}, children: _jsx("section", { onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", ...props, children: children }) }));
|
|
70
|
+
}
|
|
71
|
+
function CarouselContent({ className, ...props }) {
|
|
72
|
+
const { carouselRef, orientation } = useCarousel();
|
|
73
|
+
return (_jsx("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-content", children: _jsx("div", { className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className), ...props }) }));
|
|
74
|
+
}
|
|
75
|
+
function CarouselItem({ className, ...props }) {
|
|
76
|
+
const { orientation } = useCarousel();
|
|
77
|
+
return (_jsx("article", { "aria-roledescription": "slide", "data-slot": "carousel-item", className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className), ...props }));
|
|
78
|
+
}
|
|
79
|
+
function CarouselPrevious({ className, variant = "outline", size = "icon-sm", ...props }) {
|
|
80
|
+
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
|
81
|
+
return (_jsxs(Button, { "data-slot": "carousel-previous", variant: variant, size: size, className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal"
|
|
82
|
+
? "top-1/2 -left-12 -translate-y-1/2"
|
|
83
|
+
: "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev, ...props, children: [_jsx(ChevronLeftIcon, {}), _jsx("span", { className: "sr-only", children: "Previous slide" })] }));
|
|
84
|
+
}
|
|
85
|
+
function CarouselNext({ className, variant = "outline", size = "icon-sm", ...props }) {
|
|
86
|
+
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
|
87
|
+
return (_jsxs(Button, { "data-slot": "carousel-next", variant: variant, size: size, className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal"
|
|
88
|
+
? "top-1/2 -right-12 -translate-y-1/2"
|
|
89
|
+
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext, ...props, children: [_jsx(ChevronRightIcon, {}), _jsx("span", { className: "sr-only", children: "Next slide" })] }));
|
|
90
|
+
}
|
|
91
|
+
export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel, };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as RechartsPrimitive from "recharts";
|
|
3
|
+
declare const THEMES: {
|
|
4
|
+
readonly light: "";
|
|
5
|
+
readonly dark: ".dark";
|
|
6
|
+
};
|
|
7
|
+
type TooltipValueType = number | string | Array<number | string>;
|
|
8
|
+
type TooltipNameType = number | string;
|
|
9
|
+
export type ChartConfig = Record<string, {
|
|
10
|
+
label?: React.ReactNode;
|
|
11
|
+
icon?: React.ComponentType;
|
|
12
|
+
} & ({
|
|
13
|
+
color?: string;
|
|
14
|
+
theme?: never;
|
|
15
|
+
} | {
|
|
16
|
+
color?: never;
|
|
17
|
+
theme: Record<keyof typeof THEMES, string>;
|
|
18
|
+
})>;
|
|
19
|
+
declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
|
|
20
|
+
config: ChartConfig;
|
|
21
|
+
children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
|
|
22
|
+
initialDimension?: {
|
|
23
|
+
width: number;
|
|
24
|
+
height: number;
|
|
25
|
+
};
|
|
26
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
declare const ChartStyle: ({ id, config }: {
|
|
28
|
+
id: string;
|
|
29
|
+
config: ChartConfig;
|
|
30
|
+
}) => import("react/jsx-runtime").JSX.Element | null;
|
|
31
|
+
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
|
|
32
|
+
declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
|
|
33
|
+
hideLabel?: boolean;
|
|
34
|
+
hideIndicator?: boolean;
|
|
35
|
+
indicator?: "line" | "dot" | "dashed";
|
|
36
|
+
nameKey?: string;
|
|
37
|
+
labelKey?: string;
|
|
38
|
+
} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): import("react/jsx-runtime").JSX.Element | null;
|
|
39
|
+
declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
|
|
40
|
+
declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
|
|
41
|
+
hideIcon?: boolean;
|
|
42
|
+
nameKey?: string;
|
|
43
|
+
} & RechartsPrimitive.DefaultLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
|
|
44
|
+
export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, };
|
|
45
|
+
//# sourceMappingURL=chart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,UAAU,CAAA;AAK7C,QAAA,MAAM,MAAM;;;CAAwC,CAAA;AAGpD,KAAK,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAEtC,MAAM,MAAM,WAAW,GAAG,MAAM,CAC9B,MAAM,EACN;IACE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC3B,GAAG,CACA;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACjC;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,OAAO,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,CAChE,CACF,CAAA;AAkBD,iBAAS,cAAc,CAAC,EACtB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,MAAM,EACN,gBAAoC,EACpC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,EAAE,WAAW,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,UAAU,CAAC,CAAA;IACxF,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF,2CAsBA;AAED,QAAA,MAAM,UAAU,GAAI,gBAAgB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,mDA4BtE,CAAA;AAED,QAAA,MAAM,YAAY,kCAA4B,CAAA;AAE9C,iBAAS,mBAAmB,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAiB,EACjB,SAAiB,EACjB,aAAqB,EACrB,KAAK,EACL,cAAc,EACd,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,OAAO,CAAC,GACvD,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,IAAI,CACN,iBAAiB,CAAC,0BAA0B,CAAC,gBAAgB,EAAE,eAAe,CAAC,EAC/E,oBAAoB,CACrB,kDAkHF;AAED,QAAA,MAAM,WAAW,sGAA2B,CAAA;AAE5C,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAgB,EAChB,OAAO,EACP,aAAwB,EACxB,OAAO,GACR,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,GAAG,iBAAiB,CAAC,yBAAyB,kDA6C9C;AA2BD,OAAO,EACL,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,mBAAmB,GACpB,CAAA"}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import * as RechartsPrimitive from "recharts";
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
// Format: { THEME_NAME: CSS_SELECTOR }
|
|
6
|
+
const THEMES = { light: "", dark: ".dark" };
|
|
7
|
+
const INITIAL_DIMENSION = { width: 320, height: 200 };
|
|
8
|
+
const ChartContext = React.createContext(null);
|
|
9
|
+
function useChart() {
|
|
10
|
+
const context = React.useContext(ChartContext);
|
|
11
|
+
if (!context) {
|
|
12
|
+
throw new Error("useChart must be used within a <ChartContainer />");
|
|
13
|
+
}
|
|
14
|
+
return context;
|
|
15
|
+
}
|
|
16
|
+
function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
|
|
17
|
+
const uniqueId = React.useId();
|
|
18
|
+
const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
|
|
19
|
+
return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
|
|
20
|
+
}
|
|
21
|
+
const ChartStyle = ({ id, config }) => {
|
|
22
|
+
const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
|
|
23
|
+
if (!colorConfig.length) {
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
return (_jsx("style", {
|
|
27
|
+
// biome-ignore lint/security/noDangerouslySetInnerHtml: Chart CSS variables are generated from local config, not user HTML.
|
|
28
|
+
dangerouslySetInnerHTML: {
|
|
29
|
+
__html: Object.entries(THEMES)
|
|
30
|
+
.map(([theme, prefix]) => `
|
|
31
|
+
${prefix} [data-chart=${id}] {
|
|
32
|
+
${colorConfig
|
|
33
|
+
.map(([key, itemConfig]) => {
|
|
34
|
+
const color = itemConfig.theme?.[theme] ?? itemConfig.color;
|
|
35
|
+
return color ? ` --color-${key}: ${color};` : null;
|
|
36
|
+
})
|
|
37
|
+
.join("\n")}
|
|
38
|
+
}
|
|
39
|
+
`)
|
|
40
|
+
.join("\n"),
|
|
41
|
+
} }));
|
|
42
|
+
};
|
|
43
|
+
const ChartTooltip = RechartsPrimitive.Tooltip;
|
|
44
|
+
function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
|
|
45
|
+
const { config } = useChart();
|
|
46
|
+
const tooltipLabel = React.useMemo(() => {
|
|
47
|
+
if (hideLabel || !payload?.length) {
|
|
48
|
+
return null;
|
|
49
|
+
}
|
|
50
|
+
const [item] = payload;
|
|
51
|
+
const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
|
|
52
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
53
|
+
const value = !labelKey && typeof label === "string" ? (config[label]?.label ?? label) : itemConfig?.label;
|
|
54
|
+
if (labelFormatter) {
|
|
55
|
+
return (_jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) }));
|
|
56
|
+
}
|
|
57
|
+
if (!value) {
|
|
58
|
+
return null;
|
|
59
|
+
}
|
|
60
|
+
return _jsx("div", { className: cn("font-medium", labelClassName), children: value });
|
|
61
|
+
}, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
|
|
62
|
+
if (!active || !payload?.length) {
|
|
63
|
+
return null;
|
|
64
|
+
}
|
|
65
|
+
const nestLabel = payload.length === 1 && indicator !== "dot";
|
|
66
|
+
return (_jsxs("div", { className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
|
|
67
|
+
.filter((item) => item.type !== "none")
|
|
68
|
+
.map((item) => {
|
|
69
|
+
const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
|
|
70
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
71
|
+
const indicatorColor = color ?? item.payload?.fill ?? item.color;
|
|
72
|
+
const itemKey = `${key}-${item.name ?? item.dataKey ?? "value"}`;
|
|
73
|
+
return (_jsx("div", { className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, payload.indexOf(item), item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
|
|
74
|
+
"h-2.5 w-2.5": indicator === "dot",
|
|
75
|
+
"w-1": indicator === "line",
|
|
76
|
+
"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
|
|
77
|
+
"my-0.5": nestLabel && indicator === "dashed",
|
|
78
|
+
}), style: {
|
|
79
|
+
"--color-bg": indicatorColor,
|
|
80
|
+
"--color-border": indicatorColor,
|
|
81
|
+
} }))), _jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number"
|
|
82
|
+
? item.value.toLocaleString()
|
|
83
|
+
: String(item.value) }))] })] })) }, itemKey));
|
|
84
|
+
}) })] }));
|
|
85
|
+
}
|
|
86
|
+
const ChartLegend = RechartsPrimitive.Legend;
|
|
87
|
+
function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, }) {
|
|
88
|
+
const { config } = useChart();
|
|
89
|
+
if (!payload?.length) {
|
|
90
|
+
return null;
|
|
91
|
+
}
|
|
92
|
+
return (_jsx("div", { className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className), children: payload
|
|
93
|
+
.filter((item) => item.type !== "none")
|
|
94
|
+
.map((item) => {
|
|
95
|
+
const key = `${nameKey ?? item.dataKey ?? "value"}`;
|
|
96
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
97
|
+
const itemKey = `${key}-${item.value ?? item.color ?? "legend"}`;
|
|
98
|
+
return (_jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
|
|
99
|
+
backgroundColor: item.color,
|
|
100
|
+
} })), itemConfig?.label] }, itemKey));
|
|
101
|
+
}) }));
|
|
102
|
+
}
|
|
103
|
+
function getPayloadConfigFromPayload(config, payload, key) {
|
|
104
|
+
if (typeof payload !== "object" || payload === null) {
|
|
105
|
+
return undefined;
|
|
106
|
+
}
|
|
107
|
+
const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
|
|
108
|
+
? payload.payload
|
|
109
|
+
: undefined;
|
|
110
|
+
let configLabelKey = key;
|
|
111
|
+
if (key in payload && typeof payload[key] === "string") {
|
|
112
|
+
configLabelKey = payload[key];
|
|
113
|
+
}
|
|
114
|
+
else if (payloadPayload &&
|
|
115
|
+
key in payloadPayload &&
|
|
116
|
+
typeof payloadPayload[key] === "string") {
|
|
117
|
+
configLabelKey = payloadPayload[key];
|
|
118
|
+
}
|
|
119
|
+
return configLabelKey in config ? config[configLabelKey] : config[key];
|
|
120
|
+
}
|
|
121
|
+
export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAIvE,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,2CAkBtE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
|
|
3
|
+
import { CheckIcon } from "lucide-react";
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
function Checkbox({ className, ...props }) {
|
|
6
|
+
return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
|
|
7
|
+
}
|
|
8
|
+
export { Checkbox };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
|
|
2
|
+
declare function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
|
|
6
|
+
//# sourceMappingURL=collapsible.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../src/components/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAEhF,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,2CAEjE;AAED,iBAAS,kBAAkB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,2CAE3E;AAED,iBAAS,kBAAkB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,2CAEzE;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
|
|
3
|
+
function Collapsible({ ...props }) {
|
|
4
|
+
return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
|
|
5
|
+
}
|
|
6
|
+
function CollapsibleTrigger({ ...props }) {
|
|
7
|
+
return _jsx(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-trigger", ...props });
|
|
8
|
+
}
|
|
9
|
+
function CollapsibleContent({ ...props }) {
|
|
10
|
+
return _jsx(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", ...props });
|
|
11
|
+
}
|
|
12
|
+
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Combobox as ComboboxPrimitive } from "@base-ui/react";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
declare const Combobox: typeof ComboboxPrimitive.Root;
|
|
4
|
+
declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxPrimitive.Input.Props & {
|
|
7
|
+
showTrigger?: boolean;
|
|
8
|
+
showClear?: boolean;
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxPrimitive.Chip.Props & {
|
|
20
|
+
showRemove?: boolean;
|
|
21
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
|
|
24
|
+
export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
|
|
25
|
+
//# sourceMappingURL=combobox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAE9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,QAAQ,+BAAyB,CAAA;AAEvC,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,2CAEjE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,OAAO,CAAC,KAAK,2CAW1F;AAeD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAgB,EAChB,WAAkB,EAClB,SAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,GAAG;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,2CAoBA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,IAAe,EACf,UAAc,EACd,KAAe,EACf,WAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,GAC9B,IAAI,CACF,iBAAiB,CAAC,UAAU,CAAC,KAAK,EAClC,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,aAAa,GAAG,QAAQ,CAC3D,2CAuBF;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,2CAW1E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,2CAoBpF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,2CAE5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,UAAU,CAAC,KAAK,2CAQjF;AAED,iBAAS,kBAAkB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,UAAU,CAAC,KAAK,2CAE3E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,2CAW5E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,SAAS,CAAC,KAAK,2CAQpF;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,qBAAqB,CAAC,OAAO,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,2CAW7F;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,UAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,GAAG;IAChC,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,2CAsBA;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,2CAQjF;AAED,iBAAS,iBAAiB,2CAEzB;AAED,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,aAAa,EACb,aAAa,EACb,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,aAAa,EACb,iBAAiB,GAClB,CAAA"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Combobox as ComboboxPrimitive } from "@base-ui/react";
|
|
3
|
+
import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { cn } from "../lib/utils";
|
|
6
|
+
import { Button } from "./button";
|
|
7
|
+
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group";
|
|
8
|
+
const Combobox = ComboboxPrimitive.Root;
|
|
9
|
+
function ComboboxValue({ ...props }) {
|
|
10
|
+
return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
|
|
11
|
+
}
|
|
12
|
+
function ComboboxTrigger({ className, children, ...props }) {
|
|
13
|
+
return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", className: cn("[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })] }));
|
|
14
|
+
}
|
|
15
|
+
function ComboboxClear({ className, ...props }) {
|
|
16
|
+
return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs" }), className: cn(className), ...props, children: _jsx(XIcon, { className: "pointer-events-none" }) }));
|
|
17
|
+
}
|
|
18
|
+
function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
|
|
19
|
+
return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
|
|
20
|
+
}
|
|
21
|
+
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
|
|
22
|
+
return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
|
|
23
|
+
}
|
|
24
|
+
function ComboboxList({ className, ...props }) {
|
|
25
|
+
return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className), ...props }));
|
|
26
|
+
}
|
|
27
|
+
function ComboboxItem({ className, children, ...props }) {
|
|
28
|
+
return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
|
|
29
|
+
}
|
|
30
|
+
function ComboboxGroup({ className, ...props }) {
|
|
31
|
+
return _jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props });
|
|
32
|
+
}
|
|
33
|
+
function ComboboxLabel({ className, ...props }) {
|
|
34
|
+
return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
|
|
35
|
+
}
|
|
36
|
+
function ComboboxCollection({ ...props }) {
|
|
37
|
+
return _jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });
|
|
38
|
+
}
|
|
39
|
+
function ComboboxEmpty({ className, ...props }) {
|
|
40
|
+
return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className), ...props }));
|
|
41
|
+
}
|
|
42
|
+
function ComboboxSeparator({ className, ...props }) {
|
|
43
|
+
return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
|
|
44
|
+
}
|
|
45
|
+
function ComboboxChips({ className, ...props }) {
|
|
46
|
+
return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className), ...props }));
|
|
47
|
+
}
|
|
48
|
+
function ComboboxChip({ className, children, showRemove = true, ...props }) {
|
|
49
|
+
return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
|
|
50
|
+
}
|
|
51
|
+
function ComboboxChipsInput({ className, ...props }) {
|
|
52
|
+
return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn("min-w-16 flex-1 outline-none", className), ...props }));
|
|
53
|
+
}
|
|
54
|
+
function useComboboxAnchor() {
|
|
55
|
+
return React.useRef(null);
|
|
56
|
+
}
|
|
57
|
+
export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Command as CommandPrimitive } from "cmdk";
|
|
2
|
+
import type * as React from "react";
|
|
3
|
+
import { Dialog } from "./dialog";
|
|
4
|
+
declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
|
|
6
|
+
title?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
showCloseButton?: boolean;
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function CommandItem({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };
|
|
20
|
+
//# sourceMappingURL=command.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../src/components/command.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAA;AAElD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,MAAM,EAA+D,MAAM,UAAU,CAAA;AAG9F,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,2CAWtF;AAED,iBAAS,aAAa,CAAC,EACrB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,2CAeA;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAkBrD;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAW/F;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAQrD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAWrD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,2CAQzD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAcpD;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW7E;AAED,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,eAAe,GAChB,CAAA"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Command as CommandPrimitive } from "cmdk";
|
|
4
|
+
import { CheckIcon, SearchIcon } from "lucide-react";
|
|
5
|
+
import { cn } from "../lib/utils";
|
|
6
|
+
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
|
|
7
|
+
import { InputGroup, InputGroupAddon } from "./input-group";
|
|
8
|
+
function Command({ className, ...props }) {
|
|
9
|
+
return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", className), ...props }));
|
|
10
|
+
}
|
|
11
|
+
function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
|
|
12
|
+
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className), showCloseButton: showCloseButton, children: children })] }));
|
|
13
|
+
}
|
|
14
|
+
function CommandInput({ className, ...props }) {
|
|
15
|
+
return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
|
|
16
|
+
}
|
|
17
|
+
function CommandList({ className, ...props }) {
|
|
18
|
+
return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className), ...props }));
|
|
19
|
+
}
|
|
20
|
+
function CommandEmpty({ className, ...props }) {
|
|
21
|
+
return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: cn("py-6 text-center text-sm", className), ...props }));
|
|
22
|
+
}
|
|
23
|
+
function CommandGroup({ className, ...props }) {
|
|
24
|
+
return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn("overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className), ...props }));
|
|
25
|
+
}
|
|
26
|
+
function CommandSeparator({ className, ...props }) {
|
|
27
|
+
return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn("-mx-1 h-px w-auto bg-border", className), ...props }));
|
|
28
|
+
}
|
|
29
|
+
function CommandItem({ className, children, ...props }) {
|
|
30
|
+
return (_jsxs(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:**:[svg]:text-foreground", className), ...props, children: [children, _jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })] }));
|
|
31
|
+
}
|
|
32
|
+
function CommandShortcut({ className, ...props }) {
|
|
33
|
+
return (_jsx("span", { "data-slot": "command-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className), ...props }));
|
|
34
|
+
}
|
|
35
|
+
export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type * as React from "react";
|
|
2
|
+
import { Button } from "./button";
|
|
3
|
+
declare function ConfirmActionButton({ buttonLabel, confirmLabel, title, description, onConfirm, disabled, variant, confirmVariant, }: {
|
|
4
|
+
buttonLabel: string;
|
|
5
|
+
confirmLabel: string;
|
|
6
|
+
title: string;
|
|
7
|
+
description: React.ReactNode;
|
|
8
|
+
onConfirm: () => Promise<void> | void;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
variant?: React.ComponentProps<typeof Button>["variant"];
|
|
11
|
+
confirmVariant?: React.ComponentProps<typeof Button>["variant"];
|
|
12
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export { ConfirmActionButton };
|
|
14
|
+
//# sourceMappingURL=confirm-action-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confirm-action-button.d.ts","sourceRoot":"","sources":["../../src/components/confirm-action-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAanC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,iBAAS,mBAAmB,CAAC,EAC3B,WAAW,EACX,YAAY,EACZ,KAAK,EACL,WAAW,EACX,SAAS,EACT,QAAgB,EAChB,OAAmB,EACnB,cAA0B,GAC3B,EAAE;IACD,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAChE,2CA0CA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Loader2 } from "lucide-react";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./alert-dialog";
|
|
5
|
+
import { Button } from "./button";
|
|
6
|
+
function ConfirmActionButton({ buttonLabel, confirmLabel, title, description, onConfirm, disabled = false, variant = "outline", confirmVariant = "default", }) {
|
|
7
|
+
const [open, setOpen] = useState(false);
|
|
8
|
+
const [pending, setPending] = useState(false);
|
|
9
|
+
const handleConfirm = async () => {
|
|
10
|
+
setPending(true);
|
|
11
|
+
try {
|
|
12
|
+
await onConfirm();
|
|
13
|
+
setOpen(false);
|
|
14
|
+
}
|
|
15
|
+
finally {
|
|
16
|
+
setPending(false);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
return (_jsxs(AlertDialog, { open: open, onOpenChange: setOpen, children: [_jsx(AlertDialogTrigger, { disabled: disabled || pending, render: _jsx(Button, { variant: variant, size: "sm" }), children: buttonLabel }), _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: pending, children: "Cancel" }), _jsxs(AlertDialogAction, { variant: confirmVariant, disabled: pending, onClick: () => void handleConfirm(), children: [pending ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : null, confirmLabel] })] })] })] }));
|
|
20
|
+
}
|
|
21
|
+
export { ConfirmActionButton };
|