@camox/ui 0.43.0 → 0.45.0

package/dist/components/accordion.d.ts

@@ -0,0 +1,10 @@
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+//#region src/components/accordion.d.ts
+declare function Accordion({ ...props }: Accordion$1.Root.Props): import("react").JSX.Element;
+declare function AccordionItem({ ...props }: Accordion$1.Item.Props): import("react").JSX.Element;
+declare function AccordionHeader({ ...props }: Accordion$1.Header.Props): import("react").JSX.Element;
+declare function AccordionTrigger({ ...props }: Accordion$1.Trigger.Props): import("react").JSX.Element;
+/** Animates its height open and closed, from the height Base UI measures. */
+declare function AccordionPanel({ className, ...props }: Accordion$1.Panel.Props): import("react").JSX.Element;
+//#endregion
+export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger };

package/dist/components/accordion.js

@@ -0,0 +1,40 @@
+import { cn } from "../lib/utils.js";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/accordion.tsx
+function Accordion({ ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Root, {
+		"data-slot": "accordion",
+		...props
+	});
+}
+function AccordionItem({ ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Item, {
+		"data-slot": "accordion-item",
+		...props
+	});
+}
+function AccordionHeader({ ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Header, {
+		"data-slot": "accordion-header",
+		...props
+	});
+}
+function AccordionTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Trigger, {
+		"data-slot": "accordion-trigger",
+		...props
+	});
+}
+/** Animates its height open and closed, from the height Base UI measures. */
+function AccordionPanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Panel, {
+		"data-slot": "accordion-panel",
+		className: cn("h-(--accordion-panel-height) overflow-hidden transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none", className),
+		...props
+	});
+}
+
+//#endregion
+export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger };

package/dist/components/alert-dialog.d.ts

@@ -1,58 +1,20 @@
 import { Button } from "./button.js";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 import * as React from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/alert-dialog.d.ts
-declare function AlertDialog({
-  ...props
-}: AlertDialog$1.Root.Props): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogTrigger({
-  ...props
-}: AlertDialog$1.Trigger.Props): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogPortal({
-  ...props
-}: AlertDialog$1.Portal.Props): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogOverlay({
-  className,
-  ...props
-}: AlertDialog$1.Backdrop.Props): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogContent({
-  className,
-  size,
-  ...props
-}: AlertDialog$1.Popup.Props & {
+declare function AlertDialog({ ...props }: AlertDialog$1.Root.Props): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: AlertDialog$1.Trigger.Props): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: AlertDialog$1.Portal.Props): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: AlertDialog$1.Backdrop.Props): React.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: AlertDialog$1.Popup.Props & {
   size?: "default" | "sm";
-}): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Title>): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Description>): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof Button>): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogCancel({
-  className,
-  variant,
-  size,
-  ...props
-}: AlertDialog$1.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): _$react_jsx_runtime0.JSX.Element;
+}): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialog$1.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialog$1.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialog$1.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
 //#endregion
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/alert-dialog.js

@@ -1,8 +1,8 @@
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/alert-dialog.tsx
 function AlertDialog({ ...props }) {

package/dist/components/alert.d.ts

@@ -1,28 +1,12 @@
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/components/alert.d.ts
 declare const alertVariants: (props?: ({
-  variant?: "default" | "destructive" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-declare function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): _$react_jsx_runtime0.JSX.Element;
-declare function AlertTitle({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-declare function AlertAction({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+  variant?: "default" | "destructive" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 //#endregion
 export { Alert, AlertAction, AlertDescription, AlertTitle };

package/dist/components/alert.js

@@ -1,13 +1,14 @@
 import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
 import "react";
 import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
 
 //#region src/components/alert.tsx
 const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
 	variants: { variant: {
 		default: "bg-card text-card-foreground",
-		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
+		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+		warning: "border-amber-500/30 bg-amber-500/10 text-amber-900 *:data-[slot=alert-description]:text-amber-900/90 dark:text-amber-200 dark:*:data-[slot=alert-description]:text-amber-200/90"
 	} },
 	defaultVariants: { variant: "default" }
 });

package/dist/components/avatar.d.ts

@@ -1,34 +1,13 @@
 import * as React from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
-
 //#region src/components/avatar.d.ts
-declare function Avatar({
-  className,
-  size,
-  ...props
-}: Avatar$1.Root.Props & {
+declare function Avatar({ className, size, ...props }: Avatar$1.Root.Props & {
   size?: "default" | "sm" | "lg";
-}): _$react_jsx_runtime0.JSX.Element;
-declare function AvatarImage({
-  className,
-  ...props
-}: Avatar$1.Image.Props): _$react_jsx_runtime0.JSX.Element;
-declare function AvatarFallback({
-  className,
-  ...props
-}: Avatar$1.Fallback.Props): _$react_jsx_runtime0.JSX.Element;
-declare function AvatarBadge({
-  className,
-  ...props
-}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
-declare function AvatarGroup({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-declare function AvatarGroupCount({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: Avatar$1.Image.Props): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: Avatar$1.Fallback.Props): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 //#endregion
 export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/components/avatar.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
-import "react";
 import { jsx } from "react/jsx-runtime";
+import "react";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 
 //#region src/components/avatar.tsx

package/dist/components/badge.d.ts

@@ -1,19 +1,10 @@
-import * as _$react from "react";
 import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/components/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+  variant?: "default" | "outline" | "link" | "destructive" | "secondary" | "ghost" | null | undefined;
   size?: "default" | "sm" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-declare function Badge({
-  className,
-  variant,
-  size,
-  render,
-  ...props
-}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, size, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
 export { Badge, badgeVariants };

package/dist/components/bubble.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/bubble.d.ts
+declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const bubbleVariants: (props?: ({
+  variant?: "default" | "outline" | "destructive" | "secondary" | "muted" | "tinted" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
+  align?: "start" | "end";
+}): React.JSX.Element;
+declare function BubbleContent({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function BubbleReactions({ side, align, className, ...props }: React.ComponentProps<"div"> & {
+  align?: "start" | "end";
+  side?: "top" | "bottom";
+}): React.JSX.Element;
+//#endregion
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };

package/dist/components/bubble.js

@@ -0,0 +1,75 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/bubble.tsx
+function BubbleGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble-group",
+		className: cn("flex min-w-0 flex-col gap-2", className),
+		...props
+	});
+}
+const bubbleVariants = cva("group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full", {
+	variants: { variant: {
+		default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+		secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+		muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+		tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+		outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+		ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+		destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Bubble({ variant = "default", align = "start", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble",
+		"data-variant": variant,
+		"data-align": align,
+		className: cn(bubbleVariants({ variant }), className),
+		...props
+	});
+}
+function BubbleContent({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50", className) }, props),
+		render,
+		state: { slot: "bubble-content" }
+	});
+}
+const bubbleReactionsVariants = cva("absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0", {
+	variants: {
+		side: {
+			top: "top-0 -translate-y-3/4",
+			bottom: "bottom-0 translate-y-3/4"
+		},
+		align: {
+			start: "left-3",
+			end: "right-3"
+		}
+	},
+	defaultVariants: {
+		side: "bottom",
+		align: "end"
+	}
+});
+function BubbleReactions({ side = "bottom", align = "end", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble-reactions",
+		"data-align": align,
+		"data-side": side,
+		className: cn(bubbleReactionsVariants({
+			side,
+			align
+		}), className),
+		...props
+	});
+}
+
+//#endregion
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };

package/dist/components/button-group.d.ts

@@ -1,28 +1,12 @@
 import { Separator } from "./separator.js";
-import * as _$react from "react";
 import { VariantProps } from "class-variance-authority";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/components/button-group.d.ts
 declare const buttonGroupVariants: (props?: ({
   orientation?: "horizontal" | "vertical" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-declare function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): _$react_jsx_runtime0.JSX.Element;
-declare function ButtonGroupText({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
-declare function ButtonGroupSeparator({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<typeof Separator>): _$react_jsx_runtime0.JSX.Element;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react").JSX.Element;
+declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
 //#endregion
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/components/button-group.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.js";
 import { Separator } from "./separator.js";
-import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 

package/dist/components/button.d.ts

@@ -1,18 +1,10 @@
 import { Button as Button$1 } from "@base-ui/react/button";
 import { VariantProps } from "class-variance-authority";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
-  size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-declare function Button({
-  className,
-  variant,
-  size,
-  ...props
-}: Button$1.Props & VariantProps<typeof buttonVariants>): _$react_jsx_runtime0.JSX.Element;
+  variant?: "default" | "outline" | "link" | "destructive" | "secondary" | "ghost" | null | undefined;
+  size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
 //#endregion
 export { Button, buttonVariants };

package/dist/components/button.js

@@ -1,16 +1,16 @@
 import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
 
 //#region src/components/button.tsx
 const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-md 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 shadow-xs hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-accent/50",
+			outline: "border-border bg-background shadow-xs 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 dark:aria-expanded:bg-input/50",
 			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-			ghost: "hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:hover:bg-accent/50",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 dark:aria-expanded: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",
 			link: "text-primary underline-offset-4 hover:underline"
 		},

package/dist/components/checkbox.d.ts

@@ -0,0 +1,5 @@
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+//#region src/components/checkbox.d.ts
+declare function Checkbox({ className, ...props }: Checkbox$1.Root.Props): import("react").JSX.Element;
+//#endregion
+export { Checkbox };

package/dist/components/checkbox.js

@@ -0,0 +1,21 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { CheckIcon } from "lucide-react";
+
+//#region src/components/checkbox.tsx
+function Checkbox({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox$1.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 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 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 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		})
+	});
+}
+
+//#endregion
+export { Checkbox };

package/dist/components/command.d.ts

@@ -1,61 +1,25 @@
 import { Dialog } from "./dialog.js";
 import * as React from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { Command as Command$1 } from "cmdk";
-
+import { Command as Command$1, defaultFilter as commandFilter } from "cmdk";
 //#region src/components/command.d.ts
-declare function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command$1>): _$react_jsx_runtime0.JSX.Element;
-declare function CommandDialog({
-  title,
-  description,
-  children,
-  className,
-  showCloseButton,
-  ...props
-}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+declare function Command({ className, ...props }: React.ComponentProps<typeof Command$1>): React.JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
   title?: string;
   description?: string;
   className?: string;
   showCloseButton?: boolean;
   children: React.ReactNode;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function CommandInput({
-  className,
-  inputGroupClassName,
-  ...props
-}: React.ComponentProps<typeof Command$1.Input> & {
+}): React.JSX.Element;
+declare function CommandInput({ className, inputGroupClassName, ...props }: React.ComponentProps<typeof Command$1.Input> & {
   inputGroupClassName?: string;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command$1.List>): _$react_jsx_runtime0.JSX.Element;
-declare function CommandEmpty({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command$1.Empty>): _$react_jsx_runtime0.JSX.Element;
-declare function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command$1.Group>): _$react_jsx_runtime0.JSX.Element;
-declare function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command$1.Separator>): _$react_jsx_runtime0.JSX.Element;
-declare function CommandItem({
-  className,
-  children,
-  hideCheck,
-  ...props
-}: React.ComponentProps<typeof Command$1.Item> & {
+}): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof Command$1.List>): React.JSX.Element;
+declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof Command$1.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof Command$1.Group>): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof Command$1.Separator>): React.JSX.Element;
+declare function CommandItem({ className, children, hideCheck, ...props }: React.ComponentProps<typeof Command$1.Item> & {
   hideCheck?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
+}): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 //#endregion
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, commandFilter };

package/dist/components/command.js

@@ -1,10 +1,10 @@
 import { cn } from "../lib/utils.js";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
 import { InputGroup, InputGroupAddon } from "./input-group.js";
-import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Command as Command$1 } from "cmdk";
+import "react";
 import { CheckIcon, SearchIcon } from "lucide-react";
+import { Command as Command$1, defaultFilter as commandFilter } from "cmdk";
 
 //#region src/components/command.tsx
 function Command({ className, ...props }) {
@@ -86,4 +86,4 @@ function CommandShortcut({ className, ...props }) {
 }
 
 //#endregion
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, commandFilter };