@adea-ai/ui 0.22.1 → 0.23.0

package/dist/components/ui/button.js

@@ -1,35 +1,52 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button as ButtonPrimitive } from '@base-ui/react/button';
-import { cva } from 'class-variance-authority';
-import { cn } from '#lib/utils';
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
-    variants: {
-        variant: {
-            default: 'bg-primary text-primary-foreground hover:bg-primary/80',
-            outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
-            secondary: 'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
-            ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
-            destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
-            success: 'bg-success/10 text-success hover:bg-success/20 focus-visible:border-success/40 focus-visible:ring-success/20 dark:bg-success/20 dark:hover:bg-success/30 dark:focus-visible:ring-success/40',
-            link: 'text-primary underline-offset-4 hover:underline',
-        },
-        size: {
-            default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-            lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-            icon: 'size-8',
-            'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-            'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
-            'icon-lg': 'size-9',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'default',
-    },
+import { cn } from "../../lib/utils.js";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/button.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<button data-slot=button>`);
+var buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80",
+			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+			success: "bg-success/10 text-success hover:bg-success/20 focus-visible:border-success/40 focus-visible:ring-success/20 dark:bg-success/20 dark:hover:bg-success/30 dark:focus-visible:ring-success/40",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			icon: "size-8",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
 });
-function Button({ className, variant = 'default', size = 'default', ...props }) {
-    return (_jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
+function Button(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"variant",
+		"size"
+	]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn(buttonVariants({
+				variant: local.variant,
+				size: local.size
+			}), local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
 }
+//#endregion
 export { Button, buttonVariants };

package/dist/components/ui/card.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
-declare function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-declare function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+import { type ComponentProps } from 'solid-js';
+declare function Card(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+declare function CardContent(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
 export { Card, CardContent };

package/dist/components/ui/card.js

@@ -1,9 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '#lib/utils';
-function Card({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card", className: cn('rounded-xl border bg-card text-card-foreground shadow-sm', className), ...props }));
+import { cn } from "../../lib/utils.js";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/ui/card.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=card>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=card-content>`);
+function Card(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("rounded-xl border bg-card text-card-foreground shadow-sm", local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
 }
-function CardContent({ className, ...props }) {
-    return _jsx("div", { "data-slot": "card-content", className: cn('p-4', className), ...props });
+function CardContent(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("p-4", local.class);
+		} }, rest), false, false);
+		return _el$2;
+	})();
 }
+//#endregion
 export { Card, CardContent };

package/dist/components/ui/dialog.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
-declare function Dialog({ ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
-declare function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;
-declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): React.JSX.Element;
-declare function DialogClose({ ...props }: DialogPrimitive.Close.Props): React.JSX.Element;
-declare function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props): React.JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
+import { Dialog as DialogPrimitive } from '@kobalte/core/dialog';
+import { type ComponentProps } from 'solid-js';
+declare function Dialog(props: ComponentProps<typeof DialogPrimitive>): import("solid-js").JSX.Element;
+declare function DialogTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function DialogPortal(props: ComponentProps<typeof DialogPrimitive.Portal>): import("solid-js").JSX.Element;
+declare function DialogClose(props: ComponentProps<typeof DialogPrimitive.CloseButton>): import("solid-js").JSX.Element;
+declare function DialogOverlay(props: ComponentProps<typeof DialogPrimitive.Overlay>): import("solid-js").JSX.Element;
+declare function DialogContent(props: ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
-}): React.JSX.Element;
-declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
-declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
+}): import("solid-js").JSX.Element;
+declare function DialogHeader(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+declare function DialogFooter(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+declare function DialogTitle(props: ComponentProps<typeof DialogPrimitive.Title>): import("solid-js").JSX.Element;
+declare function DialogDescription(props: ComponentProps<typeof DialogPrimitive.Description>): import("solid-js").JSX.Element;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/ui/dialog.js

@@ -1,36 +1,104 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
-import { X } from 'lucide-react';
-import { cn } from '#lib/utils';
-function Dialog({ ...props }) {
-    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+import { cn } from "../../lib/utils.js";
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { X } from "lucide-solid";
+import { splitProps } from "solid-js";
+import { Dialog as Dialog$1 } from "@kobalte/core/dialog";
+//#region src/components/ui/dialog.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class="fixed inset-0 z-[120] flex items-center justify-center p-4">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=dialog-header>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=dialog-footer>`);
+function Dialog(props) {
+	return createComponent(Dialog$1, mergeProps({
+		"data-slot": "dialog",
+		modal: false
+	}, props));
 }
-function DialogTrigger({ ...props }) {
-    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+function DialogTrigger(props) {
+	return createComponent(Dialog$1.Trigger, mergeProps({ "data-slot": "dialog-trigger" }, props));
 }
-function DialogPortal({ ...props }) {
-    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+function DialogPortal(props) {
+	return createComponent(Dialog$1.Portal, mergeProps({ "data-slot": "dialog-portal" }, props));
 }
-function DialogClose({ ...props }) {
-    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+function DialogClose(props) {
+	return createComponent(Dialog$1.CloseButton, mergeProps({ "data-slot": "dialog-close" }, props));
 }
-function DialogOverlay({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn('fixed inset-0 z-[120] bg-slate-950/55 backdrop-blur-[2px] transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0', className), ...props }));
+function DialogOverlay(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Dialog$1.Overlay, mergeProps({
+		"data-slot": "dialog-overlay",
+		get ["class"]() {
+			return cn("fixed inset-0 z-[120] bg-slate-950/55 backdrop-blur-[2px]", local.class);
+		}
+	}, rest));
 }
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsx(DialogPrimitive.Viewport, { "data-slot": "dialog-viewport", className: "fixed inset-0 z-[120] flex items-center justify-center p-4", children: _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn('relative grid max-h-[min(44rem,calc(100dvh-2rem))] w-full max-w-2xl gap-0 overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-2xl outline-none transition-[opacity,transform] duration-200 data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0', className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50", "aria-label": "Close dialog", children: _jsx(X, { className: "size-4", "aria-hidden": "true" }) }))] }) })] }));
+function DialogContent(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"showCloseButton"
+	]);
+	return createComponent(DialogPortal, { get children() {
+		return [createComponent(DialogOverlay, {}), (() => {
+			var _el$ = _tmpl$();
+			insert(_el$, createComponent(Dialog$1.Content, mergeProps({
+				"data-slot": "dialog-content",
+				get ["class"]() {
+					return cn("relative grid max-h-[min(44rem,calc(100dvh-2rem))] w-full max-w-2xl gap-0 overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-2xl outline-none", local.class);
+				}
+			}, rest, { get children() {
+				return [memo(() => local.children), memo(() => memo(() => !!(local.showCloseButton ?? true))() ? createComponent(Dialog$1.CloseButton, {
+					"data-slot": "dialog-close",
+					"class": "absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50",
+					"aria-label": "Close dialog",
+					get children() {
+						return createComponent(X, {
+							"class": "size-4",
+							"aria-hidden": "true"
+						});
+					}
+				}) : null)];
+			} })));
+			return _el$;
+		})()];
+	} });
 }
-function DialogHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-1.5 border-b px-6 py-5 pr-14', className), ...props }));
+function DialogHeader(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("flex flex-col gap-1.5 border-b px-6 py-5 pr-14", local.class);
+		} }, rest), false, false);
+		return _el$2;
+	})();
 }
-function DialogFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "dialog-footer", className: cn('flex flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-end', className), ...props }));
+function DialogFooter(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, mergeProps({ get ["class"]() {
+			return cn("flex flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-end", local.class);
+		} }, rest), false, false);
+		return _el$3;
+	})();
 }
-function DialogTitle({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn('text-base font-semibold tracking-tight', className), ...props }));
+function DialogTitle(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Dialog$1.Title, mergeProps({
+		"data-slot": "dialog-title",
+		get ["class"]() {
+			return cn("text-base font-semibold tracking-tight", local.class);
+		}
+	}, rest));
 }
-function DialogDescription({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn('text-sm leading-5 text-muted-foreground', className), ...props }));
+function DialogDescription(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Dialog$1.Description, mergeProps({
+		"data-slot": "dialog-description",
+		get ["class"]() {
+			return cn("text-sm leading-5 text-muted-foreground", local.class);
+		}
+	}, rest));
 }
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/components/ui/drawer.d.ts

@@ -1,16 +1,24 @@
-import * as React from 'react';
-import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
-declare function Drawer({ modal, showSwipeHandle, snapPoints, swipeDirection, ...props }: DrawerPrimitive.Root.Props & {
+import DrawerPrimitive from '@corvu/drawer';
+import type { Side } from '@corvu/drawer';
+import { type ComponentProps } from 'solid-js';
+type DrawerSide = Side;
+type DrawerProps = ComponentProps<typeof DrawerPrimitive> & {
+    /** Base UI spoke of swipe directions; corvu speaks of the side the drawer attaches to. */
+    swipeDirection?: DrawerSide;
     showSwipeHandle?: boolean;
-}): React.JSX.Element;
-declare function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props): React.JSX.Element;
-declare function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props): React.JSX.Element;
-declare function DrawerClose({ ...props }: DrawerPrimitive.Close.Props): React.JSX.Element;
-declare function DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props): React.JSX.Element;
-declare function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props): React.JSX.Element;
-declare function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props): React.JSX.Element;
-declare function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props): React.JSX.Element;
-export { Drawer, DrawerPortal, DrawerOverlay, DrawerSwipeHandle, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
+};
+declare function Drawer(props: DrawerProps): import("solid-js").JSX.Element;
+declare function DrawerTrigger(props: ComponentProps<typeof DrawerPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function DrawerPortal(props: ComponentProps<typeof DrawerPrimitive.Portal>): import("solid-js").JSX.Element;
+declare function DrawerClose(props: ComponentProps<typeof DrawerPrimitive.Close>): import("solid-js").JSX.Element;
+declare function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overlay>): import("solid-js").JSX.Element;
+declare function DrawerSwipeHandle(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {
+    showSwipeHandle?: boolean;
+};
+declare function DrawerContent(props: DrawerContentProps): import("solid-js").JSX.Element;
+declare function DrawerHeader(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+declare function DrawerFooter(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+declare function DrawerTitle(props: ComponentProps<typeof DrawerPrimitive.Label>): import("solid-js").JSX.Element;
+declare function DrawerDescription(props: ComponentProps<typeof DrawerPrimitive.Description>): import("solid-js").JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerSwipeHandle, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, type DrawerProps, };

package/dist/components/ui/drawer.js

@@ -1,75 +1,120 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
-import { cn } from '#lib/utils';
-const DrawerContext = React.createContext(null);
-function useDrawer() {
-    const context = React.useContext(DrawerContext);
-    if (!context) {
-        throw new Error('useDrawer must be used within a Drawer.');
-    }
-    return context;
+import { cn } from "../../lib/utils.js";
+import { createComponent, memo, mergeProps, spread, template } from "solid-js/web";
+import { Show, splitProps } from "solid-js";
+import DrawerPrimitive from "@corvu/drawer";
+//#region src/components/ui/drawer.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=drawer-swipe-handle aria-hidden=true>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=drawer-header>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=drawer-footer>`);
+var SIDE_DRAWER_WIDTH = "w-[var(--drawer-content-width,min(24rem,90vw))]";
+var SIDE_CLASSES = {
+	bottom: "inset-x-0 bottom-0 max-h-[calc(100dvh-2rem)] rounded-t-xl border-t",
+	top: "inset-x-0 top-0 max-h-[calc(100dvh-2rem)] rounded-b-xl border-b",
+	left: `inset-y-0 left-0 h-full ${SIDE_DRAWER_WIDTH} rounded-r-xl border-r`,
+	right: `inset-y-0 right-0 h-full ${SIDE_DRAWER_WIDTH} rounded-l-xl border-l`
+};
+function Drawer(props) {
+	const [local, rest] = splitProps(props, ["swipeDirection", "side"]);
+	return createComponent(DrawerPrimitive, mergeProps({
+		"data-slot": "drawer",
+		get side() {
+			return local.side ?? local.swipeDirection ?? "bottom";
+		}
+	}, rest));
 }
-function Drawer({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection = 'down', ...props }) {
-    const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
-    const contextValue = React.useMemo(() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }), [hasSnapPoints, modal, showSwipeHandle, swipeDirection]);
-    return (_jsx(DrawerContext.Provider, { value: contextValue, children: _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", modal: modal, snapPoints: snapPoints, swipeDirection: swipeDirection, ...props }) }));
+function DrawerTrigger(props) {
+	return createComponent(DrawerPrimitive.Trigger, mergeProps({ "data-slot": "drawer-trigger" }, props));
 }
-function DrawerTrigger({ ...props }) {
-    return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+function DrawerPortal(props) {
+	return createComponent(DrawerPrimitive.Portal, mergeProps({ "data-slot": "drawer-portal" }, props));
 }
-function DrawerPortal({ ...props }) {
-    return _jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+function DrawerClose(props) {
+	return createComponent(DrawerPrimitive.Close, mergeProps({ "data-slot": "drawer-close" }, props));
 }
-function DrawerClose({ ...props }) {
-    return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+function DrawerOverlay(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(DrawerPrimitive.Overlay, mergeProps({
+		"data-slot": "drawer-overlay",
+		get ["class"]() {
+			return cn("fixed inset-0 z-[110] bg-black/10 backdrop-blur-xs transition-opacity duration-300 data-closed:opacity-0", local.class);
+		}
+	}, rest));
 }
-function DrawerOverlay({ className, ...props }) {
-    return (_jsx(DrawerPrimitive.Backdrop, { "data-slot": "drawer-overlay", className: cn('fixed inset-0 z-[110] min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute', className), ...props }));
+function DrawerSwipeHandle(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("relative z-10 flex shrink-0 cursor-grab items-center justify-center py-2 active:cursor-grabbing after:block after:h-1 after:w-24 after:shrink-0 after:rounded-full after:bg-muted", local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
 }
-function DrawerSwipeHandle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "drawer-swipe-handle", "aria-hidden": "true", className: cn('relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing', className), ...props }));
+function DrawerContent(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"showSwipeHandle"
+	]);
+	const side = DrawerPrimitive.useContext().side;
+	return createComponent(DrawerPortal, {
+		"data-slot": "drawer-portal",
+		get children() {
+			return [createComponent(DrawerOverlay, {}), createComponent(DrawerPrimitive.Content, mergeProps({
+				"data-slot": "drawer-content",
+				get ["class"]() {
+					return cn("group/drawer-content fixed z-[110] flex flex-col overflow-hidden bg-popover text-sm text-popover-foreground shadow-lg outline-none transition-transform duration-300 ease-out will-change-transform", SIDE_CLASSES[side()], local.class);
+				}
+			}, rest, { get children() {
+				return [createComponent(Show, {
+					get when() {
+						return local.showSwipeHandle;
+					},
+					get children() {
+						return createComponent(DrawerSwipeHandle, {});
+					}
+				}), memo(() => local.children)];
+			} }))];
+		}
+	});
 }
-function DrawerContent({ className, children, ...props }) {
-    const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
-    const swipeAxis = swipeDirection === 'down' || swipeDirection === 'up' ? 'y' : 'x';
-    return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [modal === true && _jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? '' : undefined }), _jsx(DrawerPrimitive.Viewport, { "data-slot": "drawer-viewport", "data-modal": modal, className: "pointer-events-none fixed inset-0 z-[110] select-none data-[modal=true]:pointer-events-auto", children: _jsxs(DrawerPrimitive.Popup, { "data-slot": "drawer-popup", "data-swipe-axis": swipeAxis, "data-snap-points": hasSnapPoints ? '' : undefined, className: cn(
-                    // Base.
-                    'group/drawer-popup pointer-events-auto fixed z-[110] m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b', 
-                    // Nested.
-                    'data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95', 
-                    // Bleed.
-                    'after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full', 
-                    // Sizing.
-                    '[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]', 
-                    // Stack.
-                    '[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]', 
-                    // Transitions.
-                    'data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]', 
-                    // Axis: y.
-                    'data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)', 
-                    // Axis: x.
-                    'data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row', 
-                    // Direction: down.
-                    'data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]', 
-                    // Direction: up.
-                    'data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]', 
-                    // Direction: left.
-                    'data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]', 
-                    // Direction: right.
-                    'data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]', className), ...props, children: [showSwipeHandle && _jsx(DrawerSwipeHandle, {}), _jsx(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn('flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none'), children: children })] }) })] }));
+function DrawerHeader(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("flex shrink-0 flex-col gap-0.5 p-4 pb-0 text-center md:text-left", local.class);
+		} }, rest), false, false);
+		return _el$2;
+	})();
 }
-function DrawerHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "drawer-header", className: cn('flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left', className), ...props }));
+function DrawerFooter(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, mergeProps({ get ["class"]() {
+			return cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", local.class);
+		} }, rest), false, false);
+		return _el$3;
+	})();
 }
-function DrawerFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "drawer-footer", className: cn('mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0', className), ...props }));
+function DrawerTitle(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(DrawerPrimitive.Label, mergeProps({
+		"data-slot": "drawer-title",
+		get ["class"]() {
+			return cn("text-base font-medium text-foreground", local.class);
+		}
+	}, rest));
 }
-function DrawerTitle({ className, ...props }) {
-    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn('text-base font-medium text-foreground', className), ...props }));
+function DrawerDescription(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(DrawerPrimitive.Description, mergeProps({
+		"data-slot": "drawer-description",
+		get ["class"]() {
+			return cn("text-sm text-balance text-muted-foreground", local.class);
+		}
+	}, rest));
 }
-function DrawerDescription({ className, ...props }) {
-    return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn('text-sm text-balance text-muted-foreground', className), ...props }));
-}
-export { Drawer, DrawerPortal, DrawerOverlay, DrawerSwipeHandle, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
+//#endregion
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger };

package/dist/components/ui/dropdown-menu.d.ts

@@ -1,29 +1,35 @@
-import * as React from 'react';
-import { Menu as MenuPrimitive } from '@base-ui/react/menu';
-declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): React.JSX.Element;
-declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): React.JSX.Element;
-declare function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props): React.JSX.Element;
-declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): React.JSX.Element;
-declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): React.JSX.Element;
-declare function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
+import { DropdownMenu as DropdownMenuPrimitive } from '@kobalte/core/dropdown-menu';
+import { type ComponentProps } from 'solid-js';
+type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Content> & {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    alignOffset?: number;
+};
+declare function DropdownMenu(props: ComponentProps<typeof DropdownMenuPrimitive>): import("solid-js").JSX.Element;
+declare function DropdownMenuPortal(props: ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("solid-js").JSX.Element;
+declare function DropdownMenuTrigger(props: ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function DropdownMenuContent(props: DropdownMenuContentProps): import("solid-js").JSX.Element;
+declare function DropdownMenuGroup(props: ComponentProps<typeof DropdownMenuPrimitive.Group>): import("solid-js").JSX.Element;
+declare function DropdownMenuLabel(props: ComponentProps<typeof DropdownMenuPrimitive.GroupLabel> & {
     inset?: boolean;
-}): React.JSX.Element;
-declare function DropdownMenuItem({ className, inset, variant, ...props }: MenuPrimitive.Item.Props & {
+}): import("solid-js").JSX.Element;
+declare function DropdownMenuItem(props: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: 'default' | 'destructive';
-}): React.JSX.Element;
-declare function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props): React.JSX.Element;
-declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
+}): import("solid-js").JSX.Element;
+declare function DropdownMenuSub(props: ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("solid-js").JSX.Element;
+declare function DropdownMenuSubTrigger(props: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean;
-}): React.JSX.Element;
-declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): React.JSX.Element;
-declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: MenuPrimitive.CheckboxItem.Props & {
+}): import("solid-js").JSX.Element;
+declare function DropdownMenuSubContent(props: ComponentProps<typeof DropdownMenuContent>): import("solid-js").JSX.Element;
+declare function DropdownMenuCheckboxItem(props: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
     inset?: boolean;
-}): React.JSX.Element;
-declare function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props): React.JSX.Element;
-declare function DropdownMenuRadioItem({ className, children, inset, ...props }: MenuPrimitive.RadioItem.Props & {
+}): import("solid-js").JSX.Element;
+declare function DropdownMenuRadioGroup(props: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("solid-js").JSX.Element;
+declare function DropdownMenuRadioItem(props: ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
     inset?: boolean;
-}): React.JSX.Element;
-declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): React.JSX.Element;
-declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+}): import("solid-js").JSX.Element;
+declare function DropdownMenuSeparator(props: ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("solid-js").JSX.Element;
+declare function DropdownMenuShortcut(props: ComponentProps<'span'>): import("solid-js").JSX.Element;
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };