@naeil/ui 0.2.0 → 0.3.0

package/dist/{chunk-SYI3IKIC.js → chunk-QKVN6Q6C.js}

@@ -11,10 +11,14 @@ import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
 var badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-sm border px-2 py-0.5 text-[11px] font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:ring-accent/25 focus-visible:ring-[2px] focus-visible:outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden",
+  "inline-flex items-center justify-center rounded-sm border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none ui-focus aria-invalid:border-error transition-colors overflow-hidden",
   {
     variants: {
       variant: {
+        success: "bg-success-bg text-success border-transparent",
+        warning: "bg-warning-bg text-warning border-transparent",
+        error: "bg-error-bg text-error border-transparent",
+        info: "bg-info-bg text-info border-transparent",
         default: "bg-primary text-primary-foreground border-transparent [a&]:hover:bg-primary/90",
         secondary: "bg-secondary text-secondary-foreground border-transparent [a&]:hover:bg-secondary/80",
         outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
@@ -50,6 +54,78 @@ function Badge(_a) {
 // src/components/ui/dropdown-menu.tsx
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+
+// src/lib/design/modal-inert.ts
+import { useEffect, useMemo, useState } from "react";
+var ownershipKey = /* @__PURE__ */ Symbol.for("@naeil/ui/radix-hidden-inert/v1");
+function ownershipFor(doc) {
+  var _a;
+  const shared = doc;
+  return (_a = shared[ownershipKey]) != null ? _a : shared[ownershipKey] = /* @__PURE__ */ new WeakMap();
+}
+function useRadixHiddenInert(content) {
+  useEffect(() => {
+    if (!content) return;
+    const doc = content.ownerDocument;
+    const ownership = ownershipFor(doc);
+    const held = /* @__PURE__ */ new Set();
+    function release(element) {
+      held.delete(element);
+      const state = ownership.get(element);
+      if (!state || --state.users > 0) return;
+      element.inert = state.original;
+      ownership.delete(element);
+    }
+    function sync() {
+      const hidden = (content == null ? void 0 : content.isConnected) && content.dataset.state === "open" ? [...doc.querySelectorAll('[data-aria-hidden="true"][aria-hidden="true"]')].filter((element) => !element.contains(content)) : [];
+      const desired = new Set(hidden);
+      for (const element of held) if (!desired.has(element)) release(element);
+      for (const element of desired) {
+        if (held.has(element)) continue;
+        let state = ownership.get(element);
+        if (!state) {
+          state = { users: 0, original: element.inert };
+          ownership.set(element, state);
+        }
+        state.users++;
+        held.add(element);
+        element.inert = true;
+      }
+    }
+    const observer = new MutationObserver(sync);
+    observer.observe(doc.body, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["aria-hidden", "data-aria-hidden", "data-state"]
+    });
+    sync();
+    return () => {
+      observer.disconnect();
+      for (const element of held) release(element);
+    };
+  }, [content]);
+}
+function assignObjectRef(ref, node) {
+  ref.current = node;
+}
+function useOverlayRef(consumerRef) {
+  const [node, setNode] = useState(null);
+  const ref = useMemo(() => (value) => {
+    setNode(value);
+    const cleanup = typeof consumerRef === "function" ? consumerRef(value) : void 0;
+    if (consumerRef && typeof consumerRef !== "function") assignObjectRef(consumerRef, value);
+    return () => {
+      setNode(null);
+      if (typeof cleanup === "function") cleanup();
+      else if (typeof consumerRef === "function") consumerRef(null);
+      else if (consumerRef) assignObjectRef(consumerRef, null);
+    };
+  }, [consumerRef]);
+  return [node, ref];
+}
+
+// src/components/ui/dropdown-menu.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function DropdownMenu(_a) {
   var props = __objRest(_a, []);
@@ -70,19 +146,24 @@ function DropdownMenuTrigger(_a) {
 }
 function DropdownMenuContent(_a) {
   var _b = _a, {
+    ref,
     className,
     sideOffset = 4
   } = _b, props = __objRest(_b, [
+    "ref",
     "className",
     "sideOffset"
   ]);
+  const [content, contentRef] = useOverlayRef(ref);
+  useRadixHiddenInert(content);
   return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
     DropdownMenuPrimitive.Content,
     __spreadValues({
+      ref: contentRef,
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "bg-card/95 text-popover-foreground backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border-subtle p-1 shadow-md",
+        "ui-menu ui-popup z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border-strong p-1 shadow-md",
         className
       )
     }, props)
@@ -109,7 +190,7 @@ function DropdownMenuItem(_a) {
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "focus:bg-surface-subtle data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-150 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-surface-subtle data-[variant=destructive]:text-error data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-error data-[variant=destructive]:*:[svg]:!text-error [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-base outline-hidden select-none transition-colors duration-(--ui-motion-fast) data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )
     }, props)
@@ -130,7 +211,7 @@ function DropdownMenuCheckboxItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "dropdown-menu-checkbox-item",
       className: cn(
-        "focus:bg-surface-subtle relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none transition-colors duration-150 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-surface-subtle relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-base outline-hidden select-none transition-colors duration-(--ui-motion-fast) data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked
@@ -164,7 +245,7 @@ function DropdownMenuRadioItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "dropdown-menu-radio-item",
       className: cn(
-        "focus:bg-surface-subtle relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none transition-colors duration-150 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-surface-subtle relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-base outline-hidden select-none transition-colors duration-(--ui-motion-fast) data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )
     }, props), {
@@ -246,7 +327,7 @@ function DropdownMenuSubTrigger(_a) {
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "focus:bg-surface-subtle data-[state=open]:bg-surface-subtle [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-150 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-surface-subtle data-[state=open]:bg-surface-subtle [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-base outline-hidden select-none transition-colors duration-(--ui-motion-fast) data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )
     }, props), {
@@ -268,7 +349,7 @@ function DropdownMenuSubContent(_a) {
     __spreadValues({
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
-        "bg-card/95 text-popover-foreground backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg border border-border-subtle p-1 shadow-lg",
+        "ui-menu ui-popup z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-border-strong p-1 shadow-lg",
         className
       )
     }, props)
@@ -280,26 +361,26 @@ import { cva as cva2 } from "class-variance-authority";
 import { Slot as Slot2 } from "radix-ui";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var buttonVariants = cva2(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-150 cursor-pointer active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-accent focus-visible:ring-accent/25 focus-visible:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap ui-control ui-focus rounded-md text-base font-medium transition-colors duration-(--ui-motion-fast) cursor-pointer  disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0  ui-focus aria-invalid:border-error",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow-[inset_0_1px_0_0_var(--color-primary-foreground)/0.1] hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-        outline: "border border-border-subtle bg-background hover:bg-surface-subtle",
+        default: "bg-primary text-primary-foreground hover:bg-primary-hover",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 ",
+        outline: "border border-border-strong bg-background hover:bg-surface-subtle",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-surface-subtle",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
+        default: "px-4 has-[>svg]:px-3",
+        xs: "gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "rounded-md px-6 has-[>svg]:px-4",
+        icon: "",
+        "icon-xs": "rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "",
+        "icon-lg": ""
       }
     },
     defaultVariants: {
@@ -335,6 +416,8 @@ function Button(_a) {
 export {
   badgeVariants,
   Badge,
+  useRadixHiddenInert,
+  useOverlayRef,
   DropdownMenu,
   DropdownMenuPortal,
   DropdownMenuTrigger,

package/dist/components/index.d.ts

@@ -79,8 +79,8 @@ declare function Logo({ size, mono, className, }: {
 type HeadingProps = React$1.HTMLAttributes<HTMLHeadingElement> & {
     children: React$1.ReactNode;
 };
-declare const pageTitleClass = "text-foreground text-4xl font-bold tracking-tight lg:text-5xl";
-declare const sectionTitleClass = "text-foreground text-lg font-bold";
+declare const pageTitleClass = "text-foreground text-3xl font-semibold leading-tight";
+declare const sectionTitleClass = "text-foreground text-xl font-semibold";
 declare function PageTitle({ className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
 declare function SectionTitle({ className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/index.js

@@ -6,7 +6,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from "../chunk-SYI3IKIC.js";
+} from "../chunk-QKVN6Q6C.js";
 import {
   __objRest,
   __spreadProps,
@@ -665,7 +665,7 @@ function useIsMounted() {
   );
 }
 function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
   const mounted = useIsMounted();
   if (!mounted) {
     return /* @__PURE__ */ jsx4(Button, { variant: "outline", size: "sm", className: "w-24", children: "\u2026" });
@@ -676,8 +676,8 @@ function ThemeToggle() {
       variant: "outline",
       size: "sm",
       className: "w-24",
-      onClick: () => setTheme(theme === "dark" ? "light" : "dark"),
-      children: theme === "dark" ? "\u2600\uFE0F Light" : "\u{1F319} Dark"
+      onClick: () => setTheme(resolvedTheme === "dark" ? "light" : "dark"),
+      children: resolvedTheme === "dark" ? "\u2600\uFE0F Light" : "\u{1F319} Dark"
     }
   );
 }
@@ -708,17 +708,17 @@ function useIsMounted2() {
   );
 }
 function ThemeToggleIcon() {
-  const { theme, setTheme } = useTheme2();
+  const { resolvedTheme, setTheme } = useTheme2();
   const mounted = useIsMounted2();
   if (!mounted) {
     return /* @__PURE__ */ jsx6("div", { className: "h-4 w-4" });
   }
-  const isDark = theme === "dark";
+  const isDark = resolvedTheme === "dark";
   return /* @__PURE__ */ jsx6(
     "button",
     {
       onClick: () => setTheme(isDark ? "light" : "dark"),
-      className: "text-muted-foreground hover:text-foreground transition-colors",
+      className: "ui-control ui-focus inline-flex w-11 items-center justify-center text-muted-foreground hover:text-foreground",
       "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode",
       children: isDark ? /* @__PURE__ */ jsxs4(
         "svg",
@@ -807,8 +807,8 @@ function Logo3({
 
 // src/components/typography.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-var pageTitleClass = "text-foreground text-4xl font-bold tracking-tight lg:text-5xl";
-var sectionTitleClass = "text-foreground text-lg font-bold";
+var pageTitleClass = "text-foreground text-3xl font-semibold leading-tight";
+var sectionTitleClass = "text-foreground text-xl font-semibold";
 function PageTitle(_a) {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsx8("h1", __spreadProps(__spreadValues({ className: cn(pageTitleClass, className) }, props), { children }));

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { Avatar as Avatar$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1 } from 'radix-ui';
+import { Avatar as Avatar$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, Select as Select$1, Switch as Switch$1, Checkbox as Checkbox$1, Tabs as Tabs$1 } from 'radix-ui';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { ToasterProps } from 'sonner';
@@ -15,7 +15,7 @@ declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div"
 declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "outline" | "destructive" | null | undefined;
+    variant?: "success" | "warning" | "error" | "info" | "default" | "secondary" | "outline" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
@@ -56,7 +56,7 @@ declare function DialogDescription({ className, ...props }: React.ComponentProps
 declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Root>): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Portal>): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Trigger>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenu$1.Content>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuContent({ ref, className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenu$1.Content>): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Group>): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenu$1.Item> & {
     inset?: boolean;
@@ -80,4 +80,26 @@ declare function Input({ className, type, ...props }: React.ComponentProps<"inpu
 
 declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
 
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardElevated, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Toaster, badgeVariants, buttonVariants };
+declare const Select: React.FC<Select$1.SelectProps>;
+declare const SelectValue: React.ForwardRefExoticComponent<Select$1.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectGroup: React.ForwardRefExoticComponent<Select$1.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare function SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof Select$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function SelectContent({ ref, className, children, position, sideOffset, ...props }: React.ComponentProps<typeof Select$1.Content>): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof Select$1.Item>): react_jsx_runtime.JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof Select$1.Label>): react_jsx_runtime.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof Select$1.ScrollUpButton>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof Select$1.ScrollDownButton>): react_jsx_runtime.JSX.Element;
+
+declare function Switch({ className, ...props }: React.ComponentProps<typeof Switch$1.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof Checkbox$1.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Tabs({ className, ...props }: React.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime.JSX.Element;
+declare function TabsList({ className, ...props }: React.ComponentProps<typeof Tabs$1.List>): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof Tabs$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof Tabs$1.Content>): react_jsx_runtime.JSX.Element;
+
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardElevated, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, badgeVariants, buttonVariants };