shapes-ui 0.4.2 → 0.6.0

package/src/components/ui/select.tsx

@@ -41,7 +41,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] dark:bg-input/30 dark:hover:bg-input/50 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",
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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",
         className,
       )}
       {...props}
@@ -79,10 +79,10 @@ function SelectPopup({
         className="isolate z-50"
       >
         <SelectPrimitive.Popup
-          data-slot="select-content"
+          data-slot="select-popup"
           data-align-trigger={alignItemWithTrigger}
           className={cn(
-            "text-popover-foreground relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto bg-popup p-1 shadow-md ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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",
+            "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popup text-popup-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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",
             className,
           )}
           {...props}
@@ -111,7 +111,7 @@ function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Prop
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-1.5 py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
       )}
       {...props}
@@ -148,7 +148,7 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
       className={cn(
-        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popup py-1 [&_svg:not([class*='size-'])]:size-3",
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popup py-1 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -166,7 +166,7 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"
       className={cn(
-        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popup py-1 [&_svg:not([class*='size-'])]:size-3",
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popup py-1 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

package/src/components/ui/slider.tsx

@@ -20,7 +20,10 @@ function Slider({
 
   return (
     <SliderPrimitive.Root
-      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
+      className={cn(
+        "data-horizontal:w-full data-vertical:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
+        className,
+      )}
       data-slot="slider"
       defaultValue={defaultValue}
       value={value}
@@ -29,14 +32,14 @@ function Slider({
       thumbAlignment="edge"
       {...props}
     >
-      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
-        <SliderPrimitive.Track className="relative h-1.5 grow overflow-hidden border bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1">
-          <SliderPrimitive.Indicator className="bg-primary select-none data-horizontal:h-full data-vertical:w-full" />
+      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col">
+        <SliderPrimitive.Track className="relative h-1.5 grow overflow-hidden rounded-full border bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1">
+          <SliderPrimitive.Indicator className="bg-primary select-none data-horizontal:h-full data-vertical:w-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
         </SliderPrimitive.Track>
         {Array.from({ length: _values.length }, (_, index) => (
           <SliderPrimitive.Thumb
             key={index}
-            className="relative block size-3.5 shrink-0 border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px] disabled:pointer-events-none disabled:opacity-50"
+            className="relative block size-3.5 shrink-0 rounded-full border border-ring bg-primary ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px] disabled:pointer-events-none disabled:opacity-50"
           />
         ))}
       </SliderPrimitive.Control>

package/src/components/ui/switch.tsx

@@ -5,7 +5,6 @@ import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 import { cn } from "@/lib/utils";
 
 function Switch({
-  children,
   className,
   size = "default",
   ...props
@@ -13,23 +12,20 @@ function Switch({
   size?: "sm" | "default";
 }) {
   return (
-    <label
-      id={props.id}
-      htmlFor={props.id}
-      className={cn("flex items-center gap-1.5 text-sm", className)}
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all 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 data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 data-unchecked:bg-input data-[size=default]:h-[18.4px] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-unchecked:bg-input/80",
+        className,
+      )}
+      {...props}
     >
-      <SwitchPrimitive.Root
-        data-size={size}
-        className={cn(
-          "peer group/switch relative inline-flex w-fit shrink-0 items-center border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 data-unchecked:bg-input data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-unchecked:bg-input/80",
-          className,
-        )}
-        {...props}
-      >
-        <SwitchPrimitive.Thumb className="pointer-events-none block bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground" />
-      </SwitchPrimitive.Root>
-      {children}
-    </label>
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
   );
 }
 

package/src/components/ui/tabs.tsx

@@ -10,14 +10,17 @@ function Tabs({ className, orientation = "horizontal", ...props }: TabsPrimitive
     <TabsPrimitive.Root
       data-slot="tabs"
       data-orientation={orientation}
-      className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row data-[orientation=horizontal]:**:data-[slot=tabs-list]:h-8 data-[orientation=horizontal]:**:data-[slot=tabs-list]:flex-row data-[orientation=vertical]:**:data-[slot=tabs-list]:h-fit data-[orientation=vertical]:**:data-[slot=tabs-list]:flex-col",
+        className,
+      )}
       {...props}
     />
   );
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list relative inline-flex w-max overflow-hidden rounded-2xl p-0.5 text-muted-foreground group-data-[orientation=horizontal]/tabs:items-center group-data-[orientation=horizontal]/tabs:justify-center group-data-[orientation=vertical]/tabs:items-stretch group-data-[orientation=vertical]/tabs:justify-start data-[orientation=horizontal]:items-center data-[orientation=horizontal]:justify-center data-[orientation=vertical]:items-stretch data-[orientation=vertical]:justify-start data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -32,6 +35,7 @@ const tabsListVariants = cva(
 );
 
 function TabsList({
+  children,
   className,
   variant = "default",
   ...props
@@ -42,7 +46,19 @@ function TabsList({
       data-variant={variant}
       className={cn(tabsListVariants({ variant }), className)}
       {...props}
-    />
+    >
+      {children}
+      <TabsPrimitive.Indicator
+        className={cn(
+          "pointer-events-none absolute rounded-xl border border-input bg-card shadow-sm transition-[left,right,top,bottom,width,height,transform] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+          "data-[orientation=horizontal]:top-(--active-tab-top) data-[orientation=horizontal]:left-(--active-tab-left) data-[orientation=horizontal]:h-(--active-tab-height) data-[orientation=horizontal]:w-(--active-tab-width)",
+          "data-[orientation=vertical]:top-(--active-tab-top) data-[orientation=vertical]:left-(--active-tab-left) data-[orientation=vertical]:h-(--active-tab-height) data-[orientation=vertical]:w-(--active-tab-width)",
+          "group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:border-0 group-data-[variant=line]/tabs-list:bg-foreground group-data-[variant=line]/tabs-list:shadow-none",
+          "group-data-[variant=line]/tabs-list:data-[orientation=horizontal]:top-auto group-data-[variant=line]/tabs-list:data-[orientation=horizontal]:bottom-0 group-data-[variant=line]/tabs-list:data-[orientation=horizontal]:h-0.5",
+          "group-data-[variant=line]/tabs-list:data-[orientation=vertical]:right-auto group-data-[variant=line]/tabs-list:data-[orientation=vertical]:left-0 group-data-[variant=line]/tabs-list:data-[orientation=vertical]:w-0.5",
+        )}
+      />
+    </TabsPrimitive.List>
   );
 }
 
@@ -51,10 +67,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "relative z-10 inline-flex h-7 flex-none items-center justify-center rounded-xl border border-transparent px-2 py-0.5 text-center text-sm font-medium whitespace-nowrap text-muted-foreground transition-[color,transform,opacity] duration-200 ease-out group-data-[orientation=vertical]/tabs:w-full group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:border-0 group-data-[variant=line]/tabs-list:bg-transparent hover:text-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring group-data-[variant=line]/tabs-list:focus-visible:border-transparent group-data-[variant=line]/tabs-list:focus-visible:ring-0 group-data-[variant=line]/tabs-list:focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:text-card-foreground data-[orientation=vertical]:h-fit data-[orientation=vertical]:w-full [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -62,14 +75,14 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
   );
 }
 
-function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+function TabsPanel({ className, ...props }: TabsPrimitive.Panel.Props) {
   return (
     <TabsPrimitive.Panel
-      data-slot="tabs-content"
+      data-slot="tabs-panel"
       className={cn("flex-1 text-sm outline-none", className)}
       {...props}
     />
   );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+export { Tabs, TabsList, TabsTrigger, TabsPanel, tabsListVariants };

package/src/components/ui/toast.tsx

@@ -1,48 +1,191 @@
 "use client";
 
 import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import { cva, type VariantProps } from "class-variance-authority";
 import { AlertCircle, CheckCircle2 } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
 type ToastTypes = "default" | "success" | "error";
 
+const toastViewportVariants = cva("fixed z-50 w-80 outline-none", {
+  variants: {
+    position: {
+      "top-left": "top-4 right-auto bottom-auto left-4",
+      "top-center": "top-4 right-0 bottom-auto left-0 mx-auto",
+      "top-right": "top-4 right-4 bottom-auto left-auto",
+      "bottom-left": "top-auto right-auto bottom-4 left-4",
+      "bottom-center": "top-auto right-0 bottom-4 left-0 mx-auto",
+      "bottom-right": "top-auto right-4 bottom-4 left-auto",
+    },
+  },
+  defaultVariants: {
+    position: "bottom-right",
+  },
+});
+
+const stackedToastVariants = cva(
+  "absolute z-[calc(1000-var(--toast-index))] h-(--height) w-full rounded-lg border bg-popup bg-clip-padding p-4 select-none [--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s] after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:h-(--toast-height) data-limited:opacity-0 data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+  {
+    variants: {
+      vertical: {
+        top: "top-0 origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] after:bottom-full data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-starting-style:transform-[translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:transform-[translateY(-150%)]",
+        bottom:
+          "bottom-0 origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] after:top-full data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-starting-style:transform-[translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:transform-[translateY(150%)]",
+      },
+      horizontal: {
+        left: "right-auto left-0",
+        center: "right-0 left-0 mx-auto",
+        right: "right-0 left-auto",
+      },
+    },
+    defaultVariants: {
+      vertical: "bottom",
+      horizontal: "right",
+    },
+  },
+);
+
+const anchoredToastVariants = cva(
+  "pointer-events-auto w-80 rounded-lg border bg-popup bg-clip-padding p-4 data-ending-style:opacity-0 data-starting-style:opacity-0",
+);
+
+const toastContentVariants = cva(
+  "overflow-hidden transition-opacity duration-250 data-behind:pointer-events-none data-behind:opacity-0 data-expanded:pointer-events-auto data-expanded:opacity-100",
+);
+
+const toastBodyVariants = cva("flex items-center gap-3");
+
+type ToastPosition = NonNullable<VariantProps<typeof toastViewportVariants>["position"]>;
+type StackVertical = NonNullable<VariantProps<typeof stackedToastVariants>["vertical"]>;
+type StackHorizontal = NonNullable<VariantProps<typeof stackedToastVariants>["horizontal"]>;
+type ToastManager = ReturnType<typeof ToastPrimitive.createToastManager>;
+
+interface ToastProviderProps {
+  children: React.ReactNode;
+  position?: ToastPosition;
+  limit?: number;
+  timeout?: number;
+  toastManager?: ToastManager;
+}
+
 const globalToastManager = ToastPrimitive.createToastManager();
-export const toast = globalToastManager;
+export const globalToast = globalToastManager;
+
+export function ToastProvider({
+  children,
+  position = "bottom-right",
+  limit = 5,
+  timeout = 5000,
+  toastManager,
+}: ToastProviderProps) {
+  const localToastManagerRef = React.useRef<ToastManager | null>(null);
+
+  if (!localToastManagerRef.current) {
+    localToastManagerRef.current = ToastPrimitive.createToastManager();
+  }
+
+  const manager = toastManager ?? localToastManagerRef.current;
 
-export function ToastProvider({ children }: { children: React.ReactNode }) {
   return (
-    <ToastPrimitive.Provider toastManager={globalToastManager} limit={5} timeout={5000}>
+    <ToastPrimitive.Provider toastManager={manager} limit={limit} timeout={timeout}>
       {children}
       <ToastPrimitive.Portal>
-        <ToastPrimitive.Viewport className="fixed right-4 bottom-4 z-50 flex flex-col gap-2">
-          <ToastViewportConsumer />
+        <ToastPrimitive.Viewport className={cn(toastViewportVariants({ position }))}>
+          <ToastStackConsumer position={position} />
+        </ToastPrimitive.Viewport>
+        <ToastPrimitive.Viewport className="pointer-events-none fixed inset-0 z-50 outline-none">
+          <ToastAnchorConsumer />
         </ToastPrimitive.Viewport>
       </ToastPrimitive.Portal>
     </ToastPrimitive.Provider>
   );
 }
 
-function ToastViewportConsumer() {
+function ToastStackConsumer({ position }: { position: ToastPosition }) {
   const { toasts } = ToastPrimitive.useToastManager();
+  const stackToasts = toasts.filter((currentToast) => !currentToast.positionerProps?.anchor);
+
   return (
     <>
-      {toasts.map((toast) => (
-        <Toast key={toast.id} toast={toast} />
+      {stackToasts.map((currentToast) => (
+        <Toast key={currentToast.id} toast={currentToast} position={position} />
       ))}
     </>
   );
 }
 
-function Toast({ className, toast, ...props }: ToastPrimitive.Root.Props) {
+function ToastAnchorConsumer() {
+  const { toasts } = ToastPrimitive.useToastManager();
+  const anchorToasts = toasts.filter((currentToast) =>
+    Boolean(currentToast.positionerProps?.anchor),
+  );
+
+  return (
+    <>
+      {anchorToasts.map((currentToast) => {
+        const { className, ...positionerProps } = currentToast.positionerProps ?? {};
+
+        return (
+          <ToastPrimitive.Positioner
+            key={currentToast.id}
+            toast={currentToast}
+            className={cn("pointer-events-none z-[calc(1000-var(--toast-index))]", className)}
+            {...positionerProps}
+          >
+            <AnchoredToast toast={currentToast} />
+          </ToastPrimitive.Positioner>
+        );
+      })}
+    </>
+  );
+}
+
+function Toast({
+  className,
+  toast,
+  position,
+  ...props
+}: ToastPrimitive.Root.Props & { position: ToastPosition }) {
+  const { vertical, horizontal } = getStackPlacement(position);
+
+  return (
+    <ToastPrimitive.Root
+      toast={toast}
+      className={cn(stackedToastVariants({ vertical, horizontal, className }))}
+      {...props}
+    >
+      <ToastPrimitive.Content className={cn(toastContentVariants())}>
+        <ToastBody toast={toast} />
+      </ToastPrimitive.Content>
+    </ToastPrimitive.Root>
+  );
+}
+
+function AnchoredToast({ className, toast, ...props }: ToastPrimitive.Root.Props) {
+  return (
+    <ToastPrimitive.Root
+      toast={toast}
+      className={cn(anchoredToastVariants({ className }))}
+      {...props}
+    >
+      <ToastPrimitive.Content className={cn(toastContentVariants())}>
+        <ToastBody toast={toast} />
+      </ToastPrimitive.Content>
+    </ToastPrimitive.Root>
+  );
+}
+
+function ToastBody({ toast }: { toast: ToastPrimitive.Root.Props["toast"] }) {
   let icon;
 
   switch (toast.type as ToastTypes) {
     case "success":
-      icon = <CheckCircle2 className="h-4 w-4 text-green-600" />;
+      icon = <CheckCircle2 className="h-4 w-4 text-success" />;
       break;
     case "error":
-      icon = <AlertCircle className="h-4 w-4 text-red-600" />;
+      icon = <AlertCircle className="h-4 w-4 text-destructive" />;
       break;
     default:
       icon = null;
@@ -50,27 +193,45 @@ function Toast({ className, toast, ...props }: ToastPrimitive.Root.Props) {
   }
 
   return (
-    <ToastPrimitive.Root
-      toast={toast}
-      className={cn(
-        "flex w-80 items-center gap-3 rounded-lg border bg-popup p-4 shadow-md",
-        className,
-      )}
-      {...props}
-    >
-      {icon && <div>{icon}</div>}
+    <div className={cn(toastBodyVariants())}>
+      {icon ? <div>{icon}</div> : null}
       <div className="flex flex-1 flex-col">
-        {toast.title && (
-          <ToastPrimitive.Title className="text-sm font-medium">{toast.title}</ToastPrimitive.Title>
-        )}
-        {toast.description && (
-          <ToastPrimitive.Description className="text-sm text-muted-foreground">
-            {toast.description}
-          </ToastPrimitive.Description>
-        )}
+        {toast.title ? <ToastPrimitive.Title className="text-sm font-medium" /> : null}
+        {toast.description ? (
+          <ToastPrimitive.Description className="text-sm text-muted-foreground" />
+        ) : null}
+        {toast.actionProps ? (
+          <ToastPrimitive.Action className="mt-2 inline-flex h-7 items-center justify-center self-start rounded-md border px-2.5 text-xs font-medium hover:bg-muted" />
+        ) : null}
       </div>
-    </ToastPrimitive.Root>
+    </div>
   );
 }
 
+function getStackPlacement(position: ToastPosition): {
+  vertical: StackVertical;
+  horizontal: StackHorizontal;
+} {
+  const vertical: StackVertical = position.startsWith("top") ? "top" : "bottom";
+
+  let horizontal: StackHorizontal = "center";
+  if (position.endsWith("left")) {
+    horizontal = "left";
+  }
+  if (position.endsWith("right")) {
+    horizontal = "right";
+  }
+
+  return {
+    vertical,
+    horizontal,
+  };
+}
+
+function useToast<Data extends object = any>() {
+  return ToastPrimitive.useToastManager<Data>();
+}
+
 export { ToastProvider as Toast };
+export { useToast };
+export type { ToastPosition, ToastManager };

package/src/components/ui/toggle.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const toggleVariants = cva(
-  "group/toggle inline-flex items-center justify-center gap-1 rounded text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_[data-slot=fill]_*]:fill-transparent data-[pressed]:[&_[data-slot=fill]_*]:fill-current",
   {
     variants: {
       variant: {

package/src/components/ui/toolbar.tsx

@@ -4,10 +4,12 @@ import { Toolbar as ToolbarPrimitive } from "@base-ui/react";
 
 import { cn } from "@/lib/utils";
 
+import { Input } from "./input";
+
 function Toolbar({ className, ...props }: ToolbarPrimitive.Root.Props) {
   return (
     <ToolbarPrimitive.Root
-      className={cn("flex h-9 items-center justify-evenly gap-1  border bg-muted p-1", className)}
+      className={cn("flex h-9 items-center justify-evenly gap-1 rounded-xl border p-1", className)}
       {...props}
     />
   );
@@ -22,18 +24,29 @@ function ToolbarLink({ className, ...props }: ToolbarPrimitive.Link.Props) {
 }
 
 function ToolbarInput({ className, ...props }: ToolbarPrimitive.Input.Props) {
-  return <ToolbarPrimitive.Input className={cn(className)} {...props} />;
+  return (
+    <ToolbarPrimitive.Input
+      className={cn(
+        "rounded-none border-0 ring-0 outline-0 focus:ring-0 focus-visible:ring-0 focus-visible:outline-0",
+        className,
+      )}
+      render={<Input />}
+      {...props}
+    />
+  );
 }
 
 function ToolbarGroup({ className, ...props }: ToolbarPrimitive.Group.Props) {
-  return <ToolbarPrimitive.Group className={cn(className)} {...props} />;
+  return (
+    <ToolbarPrimitive.Group className={cn("flex items-center gap-0.5", className)} {...props} />
+  );
 }
 
 function ToolbarSeparator({ className, ...props }: ToolbarPrimitive.Separator.Props) {
   return (
     <ToolbarPrimitive.Separator
       className={cn(
-        "shrink-0 bg-primary/40 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        "shrink-0 bg-primary/30 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
         className,
       )}
       {...props}

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipPopup({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-popup"
+          className={cn(
+            "z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md bg-foreground px-3 py-1.5 text-xs text-background data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipPopup, TooltipProvider };