@websolutespa/ask-ui 1.0.3 → 1.0.4

package/dist/components/input-otp.d.mts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { OTPInput } from "input-otp";
+
+//#region src/components/input-otp.d.ts
+declare function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function InputOTPGroup({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function InputOTPSeparator({
+  ...props
+}: React.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input-otp.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { MinusIcon } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OTPInput, OTPInputContext } from "input-otp";
+//#region src/components/input-otp.tsx
+function InputOTP({ className, containerClassName, ...props }) {
+	return /* @__PURE__ */ jsx(OTPInput, {
+		"data-slot": "input-otp",
+		containerClassName: cn("cn-input-otp flex items-center has-disabled:opacity-50", containerClassName),
+		spellCheck: false,
+		className: cn("disabled:cursor-not-allowed", className),
+		...props
+	});
+}
+function InputOTPGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-group",
+		className: cn("flex items-center rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className),
+		...props
+	});
+}
+function InputOTPSlot({ index, className, ...props }) {
+	const { char, hasFakeCaret, isActive } = React.useContext(OTPInputContext)?.slots[index] ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": isActive,
+		className: cn("relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className),
+		...props,
+		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" })
+		})]
+	});
+}
+function InputOTPSeparator({ ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-separator",
+		className: "flex items-center [&_svg:not([class*='size-'])]:size-4",
+		role: "separator",
+		...props,
+		children: /* @__PURE__ */ jsx(MinusIcon, {})
+	});
+}
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input.d.mts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/input.d.ts
+declare function Input({
+  className,
+  type,
+  ...props
+}: React.ComponentProps<'input'>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Input };

package/dist/components/input.mjs

@@ -0,0 +1,14 @@
+import { cn } from "../lib/utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/input.tsx
+function Input({ className, type, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+		...props
+	});
+}
+//#endregion
+export { Input };

package/dist/components/item.d.mts

@@ -0,0 +1,62 @@
+import { Separator } from "./separator.mjs";
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/item.d.ts
+declare function ItemGroup({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>): _$react_jsx_runtime0.JSX.Element;
+declare const itemVariants: (props?: ({
+  variant?: "default" | "outline" | "muted" | null | undefined;
+  size?: "default" | "xs" | "sm" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+declare function Item({
+  className,
+  variant,
+  size,
+  asChild,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & {
+  asChild?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+declare const itemMediaVariants: (props?: ({
+  variant?: "image" | "default" | "icon" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+declare function ItemMedia({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>): _$react_jsx_runtime0.JSX.Element;
+declare function ItemContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function ItemTitle({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function ItemDescription({
+  className,
+  ...props
+}: React.ComponentProps<'p'>): _$react_jsx_runtime0.JSX.Element;
+declare function ItemActions({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function ItemHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function ItemFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/components/item.mjs

@@ -0,0 +1,117 @@
+import { cn } from "../lib/utils.mjs";
+import { Separator as Separator$1 } from "./separator.mjs";
+import { Slot } from "radix-ui";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/item.tsx
+function ItemGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "list",
+		"data-slot": "item-group",
+		className: cn("group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2", className),
+		...props
+	});
+}
+function ItemSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Separator$1, {
+		"data-slot": "item-separator",
+		orientation: "horizontal",
+		className: cn("my-2", className),
+		...props
+	});
+}
+const itemVariants = cva("group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted", {
+	variants: {
+		variant: {
+			default: "border-transparent",
+			outline: "border-border",
+			muted: "border-transparent bg-muted/50"
+		},
+		size: {
+			default: "gap-3.5 px-4 py-3.5",
+			sm: "gap-2.5 px-3 py-2.5",
+			xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Item({ className, variant = "default", size = "default", asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "div", {
+		"data-slot": "item",
+		"data-variant": variant,
+		"data-size": size,
+		className: cn(itemVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+}
+const itemMediaVariants = cva("flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "[&_svg:not([class*='size-'])]:size-4",
+		image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function ItemMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-media",
+		"data-variant": variant,
+		className: cn(itemMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+function ItemContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-content",
+		className: cn("flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", className),
+		...props
+	});
+}
+function ItemTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-title",
+		className: cn("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", className),
+		...props
+	});
+}
+function ItemDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "item-description",
+		className: cn("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
+}
+function ItemActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-actions",
+		className: cn("flex items-center gap-2", className),
+		...props
+	});
+}
+function ItemHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-header",
+		className: cn("flex basis-full items-center justify-between gap-2", className),
+		...props
+	});
+}
+function ItemFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-footer",
+		className: cn("flex basis-full items-center justify-between gap-2", className),
+		...props
+	});
+}
+//#endregion
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/components/kbd.d.mts

@@ -0,0 +1,13 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/kbd.d.ts
+declare function Kbd({
+  className,
+  ...props
+}: React.ComponentProps<'kbd'>): _$react_jsx_runtime0.JSX.Element;
+declare function KbdGroup({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Kbd, KbdGroup };

package/dist/components/kbd.mjs

@@ -0,0 +1,19 @@
+import { cn } from "../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/kbd.tsx
+function Kbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3", className),
+		...props
+	});
+}
+function KbdGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd-group",
+		className: cn("inline-flex items-center gap-1", className),
+		...props
+	});
+}
+//#endregion
+export { Kbd, KbdGroup };

package/dist/components/label.d.mts

@@ -0,0 +1,11 @@
+import { Label } from "radix-ui";
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/label.d.ts
+declare function Label$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label.Root>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Label$1 as Label };

package/dist/components/label.mjs

@@ -0,0 +1,15 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { Label } from "radix-ui";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/label.tsx
+function Label$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Label.Root, {
+		"data-slot": "label",
+		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		...props
+	});
+}
+//#endregion
+export { Label$1 as Label };

package/dist/components/menubar.d.mts

@@ -0,0 +1,90 @@
+import { Menubar } from "radix-ui";
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/menubar.d.ts
+declare function Menubar$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menubar.Root>): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof Menubar.Menu>): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof Menubar.Group>): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof Menubar.Portal>): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof Menubar.RadioGroup>): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menubar.Trigger>): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarContent({
+  className,
+  align,
+  alignOffset,
+  sideOffset,
+  ...props
+}: React.ComponentProps<typeof Menubar.Content>): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React.ComponentProps<typeof Menubar.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof Menubar.CheckboxItem> & {
+  inset?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof Menubar.RadioItem> & {
+  inset?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof Menubar.Label> & {
+  inset?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menubar.Separator>): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof Menubar.Sub>): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof Menubar.SubTrigger> & {
+  inset?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menubar.SubContent>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Menubar$1 as Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };

package/dist/components/menubar.mjs

@@ -0,0 +1,135 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { Menubar } from "radix-ui";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/menubar.tsx
+function Menubar$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Root, {
+		"data-slot": "menubar",
+		className: cn("flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs", className),
+		...props
+	});
+}
+function MenubarMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Menu, {
+		"data-slot": "menubar-menu",
+		...props
+	});
+}
+function MenubarGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Group, {
+		"data-slot": "menubar-group",
+		...props
+	});
+}
+function MenubarPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Portal, {
+		"data-slot": "menubar-portal",
+		...props
+	});
+}
+function MenubarRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.RadioGroup, {
+		"data-slot": "menubar-radio-group",
+		...props
+	});
+}
+function MenubarTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Trigger, {
+		"data-slot": "menubar-trigger",
+		className: cn("flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted", className),
+		...props
+	});
+}
+function MenubarContent({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }) {
+	return /* @__PURE__ */ jsx(MenubarPortal, { children: /* @__PURE__ */ jsx(Menubar.Content, {
+		"data-slot": "menubar-content",
+		align,
+		alignOffset,
+		sideOffset,
+		className: cn("z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className),
+		...props
+	}) });
+}
+function MenubarItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Item, {
+		"data-slot": "menubar-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/menubar-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		...props
+	});
+}
+function MenubarCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menubar.CheckboxItem, {
+		"data-slot": "menubar-checkbox-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+			children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function MenubarRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menubar.RadioItem, {
+		"data-slot": "menubar-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+			children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function MenubarLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Label, {
+		"data-slot": "menubar-label",
+		"data-inset": inset,
+		className: cn("px-2 py-1.5 text-sm font-medium data-inset:pl-8", className),
+		...props
+	});
+}
+function MenubarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Separator, {
+		"data-slot": "menubar-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function MenubarShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "menubar-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground", className),
+		...props
+	});
+}
+function MenubarSub({ ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Sub, {
+		"data-slot": "menubar-sub",
+		...props
+	});
+}
+function MenubarSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menubar.SubTrigger, {
+		"data-slot": "menubar-sub-trigger",
+		"data-inset": inset,
+		className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })]
+	});
+}
+function MenubarSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.SubContent, {
+		"data-slot": "menubar-sub-content",
+		className: cn("z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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
+	});
+}
+//#endregion
+export { Menubar$1 as Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };

package/dist/components/native-select.d.mts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/native-select.d.ts
+type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
+  size?: 'sm' | 'default';
+};
+declare function NativeSelect({
+  className,
+  size,
+  ...props
+}: NativeSelectProps): _$react_jsx_runtime0.JSX.Element;
+declare function NativeSelectOption({
+  ...props
+}: React.ComponentProps<'option'>): _$react_jsx_runtime0.JSX.Element;
+declare function NativeSelectOptGroup({
+  className,
+  ...props
+}: React.ComponentProps<'optgroup'>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/dist/components/native-select.mjs

@@ -0,0 +1,37 @@
+import { cn } from "../lib/utils.mjs";
+import { ChevronDownIcon } from "lucide-react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/native-select.tsx
+function NativeSelect({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className),
+		"data-slot": "native-select-wrapper",
+		"data-size": size,
+		children: [/* @__PURE__ */ jsx("select", {
+			"data-slot": "native-select",
+			"data-size": size,
+			className: "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+			...props
+		}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
+			"aria-hidden": "true",
+			"data-slot": "native-select-icon"
+		})]
+	});
+}
+function NativeSelectOption({ ...props }) {
+	return /* @__PURE__ */ jsx("option", {
+		"data-slot": "native-select-option",
+		...props
+	});
+}
+function NativeSelectOptGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("optgroup", {
+		"data-slot": "native-select-optgroup",
+		className: cn(className),
+		...props
+	});
+}
+//#endregion
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };