@shellui/core 0.0.4

package/src/components/ui/drawer.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import {
+  forwardRef,
+  type ComponentProps,
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  type ReactNode,
+  type CSSProperties,
+  type HTMLAttributes,
+} from 'react';
+import { Drawer as VaulDrawer } from 'vaul';
+import { cn } from '@/lib/utils';
+import { Z_INDEX } from '@/lib/z-index';
+
+export type DrawerDirection = 'top' | 'bottom' | 'left' | 'right';
+
+const Drawer = ({
+  open,
+  onOpenChange,
+  direction = 'right',
+  ...props
+}: ComponentProps<typeof VaulDrawer.Root> & {
+  direction?: DrawerDirection;
+}) => (
+  <VaulDrawer.Root
+    open={open}
+    onOpenChange={onOpenChange}
+    direction={direction}
+    {...props}
+  />
+);
+Drawer.displayName = 'Drawer';
+
+const DrawerTrigger = VaulDrawer.Trigger;
+DrawerTrigger.displayName = 'DrawerTrigger';
+
+const DrawerPortal = VaulDrawer.Portal;
+(DrawerPortal as unknown as { displayName: string }).displayName = 'DrawerPortal';
+
+const DrawerOverlay = forwardRef<
+  ComponentRef<typeof VaulDrawer.Overlay>,
+  ComponentPropsWithoutRef<typeof VaulDrawer.Overlay>
+>(({ className, ...props }, ref) => (
+  <VaulDrawer.Overlay
+    ref={ref}
+    data-drawer-overlay
+    className={cn('fixed inset-0 bg-[hsl(var(--background)/0.8)] backdrop-blur-[1px]', className)}
+    style={{ zIndex: Z_INDEX.DRAWER_OVERLAY }}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = VaulDrawer.Overlay.displayName;
+
+/** Base layout classes per direction — max dimension is applied via style so size prop can override. */
+const drawerContentByDirection: Record<DrawerDirection, string> = {
+  bottom: 'fixed inset-x-0 bottom-0 mt-24 flex h-auto flex-col border border-border bg-background',
+  top: 'fixed inset-x-0 top-0 mb-24 flex h-auto flex-col border border-border bg-background',
+  left: 'fixed inset-y-0 left-0 mr-24 flex h-full w-auto flex-col border border-border bg-background',
+  right:
+    'fixed inset-y-0 right-0 ml-24 flex h-full w-auto flex-col border border-border bg-background',
+};
+
+interface DrawerContentProps extends Omit<
+  ComponentPropsWithoutRef<typeof VaulDrawer.Content>,
+  'direction'
+> {
+  direction?: DrawerDirection;
+  /** CSS length: height for top/bottom (e.g. "80vh", "400px"), width for left/right (e.g. "50vw", "320px") */
+  size?: string | null;
+  className?: string;
+  children?: ReactNode;
+  style?: CSSProperties;
+}
+
+const DrawerContent = forwardRef<ComponentRef<typeof VaulDrawer.Content>, DrawerContentProps>(
+  ({ className, direction = 'right', size, children, style, ...props }, ref) => {
+    const pos: DrawerDirection = direction;
+    const isVertical = pos === 'top' || pos === 'bottom';
+    // Set dimension via inline style; use both width/height and max so Vaul/defaults don't override.
+    const effectiveSize = size?.trim() || (isVertical ? '80vh' : '80vw');
+    const sizeStyle = isVertical
+      ? { height: effectiveSize, maxHeight: effectiveSize }
+      : { width: effectiveSize, maxWidth: effectiveSize };
+    return (
+      <DrawerPortal>
+        <DrawerOverlay />
+        <VaulDrawer.Content
+          ref={ref}
+          data-drawer-content
+          className={cn('outline-none', drawerContentByDirection[pos], className)}
+          style={{
+            backgroundColor: 'hsl(var(--background))',
+            zIndex: Z_INDEX.DRAWER_CONTENT,
+            ...sizeStyle,
+            ...style,
+          }}
+          {...props}
+        >
+          {children}
+          <VaulDrawer.Close
+            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer"
+            aria-label="Close"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="h-4 w-4"
+            >
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+            <span className="sr-only">Close</span>
+          </VaulDrawer.Close>
+        </VaulDrawer.Content>
+      </DrawerPortal>
+    );
+  },
+);
+DrawerContent.displayName = 'DrawerContent';
+
+const DrawerClose = VaulDrawer.Close;
+DrawerClose.displayName = 'DrawerClose';
+
+const DrawerHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    data-drawer-header
+    className={cn(
+      'flex flex-col space-y-2 border-b border-border/60 px-6 pt-5 pb-4 text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+const DrawerFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'mt-auto flex flex-col-reverse gap-2 border-t border-border px-6 py-4 sm:flex-row sm:justify-end',
+      className,
+    )}
+    {...props}
+  />
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+const DrawerTitle = forwardRef<
+  ComponentRef<typeof VaulDrawer.Title>,
+  ComponentPropsWithoutRef<typeof VaulDrawer.Title>
+>(({ className, ...props }, ref) => (
+  <VaulDrawer.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = VaulDrawer.Title.displayName;
+
+const DrawerDescription = forwardRef<
+  ComponentRef<typeof VaulDrawer.Description>,
+  ComponentPropsWithoutRef<typeof VaulDrawer.Description>
+>(({ className, ...props }, ref) => (
+  <VaulDrawer.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = VaulDrawer.Description.displayName;
+
+const DrawerHandle = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    data-drawer-handle
+    className={cn('mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted', className)}
+    {...props}
+  />
+);
+DrawerHandle.displayName = 'DrawerHandle';
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerClose,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerHandle,
+};

package/src/components/ui/select.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, type SelectHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        className={cn(
+          'select-field flex h-10 w-full rounded-md border border-input bg-background pl-3 pr-10 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </select>
+    );
+  },
+);
+Select.displayName = 'Select';
+
+export { Select };

package/src/components/ui/sidebar.tsx

@@ -0,0 +1,406 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  forwardRef,
+  type ReactNode,
+  type HTMLAttributes,
+  type ButtonHTMLAttributes,
+  type AnchorHTMLAttributes,
+} from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Z_INDEX } from '@/lib/z-index';
+
+type SidebarContextValue = {
+  isCollapsed: boolean;
+  toggle: () => void;
+};
+
+const SidebarContext = createContext<SidebarContextValue | undefined>(undefined);
+
+const useSidebar = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider');
+  }
+  return context;
+};
+
+const SidebarProvider = ({ children }: { children: ReactNode }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const toggle = useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+
+  return (
+    <SidebarContext.Provider value={{ isCollapsed, toggle }}>{children}</SidebarContext.Provider>
+  );
+};
+
+const Sidebar = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { isCollapsed } = useSidebar();
+
+    return (
+      <div
+        ref={ref}
+        data-sidebar="sidebar"
+        data-collapsed={isCollapsed}
+        className={cn(
+          'flex h-full flex-col gap-2 border-r bg-sidebar-background p-2 text-sidebar-foreground transition-all duration-300 ease-in-out overflow-hidden',
+          isCollapsed ? 'w-0 border-r-0 p-0' : 'w-64',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Sidebar.displayName = 'Sidebar';
+
+const SidebarTrigger = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { toggle, isCollapsed } = useSidebar();
+
+    return (
+      <button
+        ref={ref}
+        onClick={toggle}
+        className={cn(
+          'relative flex items-center justify-center rounded-md p-2 text-foreground transition-colors hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring shadow-lg backdrop-blur-md cursor-pointer bg-background/95 border border-border',
+          className,
+        )}
+        aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        style={{ zIndex: Z_INDEX.SIDEBAR_TRIGGER }}
+        {...props}
+      >
+        <img
+          src={isCollapsed ? '/icons/panel-left.svg' : '/icons/panel-left-closed.svg'}
+          alt=""
+          className="h-5 w-5 transition-transform duration-300"
+        />
+      </button>
+    );
+  },
+);
+SidebarTrigger.displayName = 'SidebarTrigger';
+
+const SidebarHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex flex-col gap-2 p-2', className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarHeader.displayName = 'SidebarHeader';
+
+const SidebarContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex flex-1 flex-col gap-2 overflow-auto', className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarContent.displayName = 'SidebarContent';
+
+const SidebarFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex flex-col gap-2 p-2', className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarFooter.displayName = 'SidebarFooter';
+
+const SidebarGroup = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('group/sidebar-group', className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarGroup.displayName = 'SidebarGroup';
+
+const SidebarGroupLabel = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+          className,
+        )}
+        style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+        {...props}
+      />
+    );
+  },
+);
+SidebarGroupLabel.displayName = 'SidebarGroupLabel';
+
+const SidebarGroupAction = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+  }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button';
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        'absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1.5 text-sidebar-foreground outline-none ring-sidebar-ring transition-opacity hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:opacity-100 focus-visible:ring-2 group-hover/sidebar-group:opacity-100 peer-data-[size=sm]/sidebar-group-action:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupAction.displayName = 'SidebarGroupAction';
+
+const SidebarGroupContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('w-full text-sm', className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarGroupContent.displayName = 'SidebarGroupContent';
+
+const sidebarMenuButtonVariants = cva(
+  'flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:bg-sidebar-accent focus-visible:text-sidebar-accent-foreground focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-ring))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-base',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const SidebarMenuButton = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement> &
+    VariantProps<typeof sidebarMenuButtonVariants> & {
+      asChild?: boolean;
+      isActive?: boolean;
+    }
+>(({ className, variant, size, asChild = false, isActive, children, ...props }, ref) => {
+  const { isCollapsed } = useSidebar();
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      ref={ref}
+      data-active={isActive}
+      data-collapsed={isCollapsed}
+      className={cn(
+        sidebarMenuButtonVariants({ variant, size }),
+        isCollapsed && 'justify-center',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+});
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+
+const SidebarMenu = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <ul
+        ref={ref}
+        className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarMenu.displayName = 'SidebarMenu';
+
+const SidebarMenuItem = forwardRef<HTMLLIElement, HTMLAttributes<HTMLLIElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <li
+        ref={ref}
+        className={cn('group/menu-item relative', className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+
+const SidebarMenuAction = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+  }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button';
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        'absolute right-2 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-md p-1 text-sidebar-foreground opacity-0 transition-opacity group-hover/menu-item:opacity-100 group-focus/menu-item:opacity-100 [&:has(~:hover)]:opacity-100 [&:has(~:focus)]:opacity-100',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = 'SidebarMenuAction';
+
+const SidebarMenuBadge = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'absolute right-2 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-md px-1.5 py-0.5 text-xs font-medium tabular-nums text-sidebar-foreground',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
+
+const SidebarMenuSkeleton = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn('flex items-center gap-2 px-2 py-1.5', className)}
+      {...props}
+    >
+      {showIcon && <div className="flex h-4 w-4 rounded-md bg-sidebar-primary/10" />}
+      <div className="flex flex-1 flex-col gap-1.5">
+        <div className="h-2.5 w-16 rounded-md bg-sidebar-primary/10" />
+        <div className="h-2.5 w-24 rounded-md bg-sidebar-primary/10" />
+      </div>
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
+
+const SidebarMenuSub = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <ul
+        ref={ref}
+        className={cn(
+          'ml-4 mt-1 flex min-w-0 flex-col gap-0.5 border-l border-sidebar-border pl-2.5',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarMenuSub.displayName = 'SidebarMenuSub';
+
+const SidebarMenuSubButton = forwardRef<
+  HTMLAnchorElement,
+  AnchorHTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    isActive?: boolean;
+  }
+>(({ className, asChild = false, size = 'md', isActive, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a';
+  return (
+    <Comp
+      ref={ref}
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'flex min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md p-2 text-sidebar-foreground outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        size === 'lg' && 'text-base',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
+
+const SidebarMenuSubItem = forwardRef<HTMLLIElement, HTMLAttributes<HTMLLIElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <li
+        ref={ref}
+        className={cn('group/menu-sub-item relative', className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
+
+export {
+  Sidebar,
+  SidebarProvider,
+  SidebarTrigger,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+};

package/src/components/ui/sonner.tsx

@@ -0,0 +1,36 @@
+import type { ComponentProps } from 'react';
+import { useSettings } from '@/features/settings/hooks/useSettings';
+import { Toaster as Sonner } from 'sonner';
+import { Z_INDEX } from '@/lib/z-index';
+
+type ToasterProps = ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { settings } = useSettings();
+
+  return (
+    <Sonner
+      position="top-center"
+      theme={settings.appearance.theme as 'light' | 'dark' | 'system'}
+      className="toaster group"
+      style={{
+        zIndex: Z_INDEX.TOAST,
+        // Re-enable pointer events so toasts stay clickable when a Radix modal is open
+        // (Radix sets body.style.pointerEvents = 'none' and only the dialog content gets 'auto')
+        pointerEvents: 'auto',
+      }}
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };