@cntyclub/ui-react 0.1.0

package/src/components/ui/timeline.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+function Timeline({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      className={cn(
+        "flex flex-col [&>li:last-child_[data-slot=timeline-connector]]:hidden",
+        className,
+      )}
+      data-slot="timeline"
+      {...props}
+    />
+  );
+}
+
+function TimelineItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      className={cn("group/timeline-item flex gap-4", className)}
+      data-slot="timeline-item"
+      {...props}
+    />
+  );
+}
+
+/** The marker column: a dot and the connecting line beneath it. */
+function TimelineDot({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className="flex w-7 shrink-0 flex-col items-center"
+      data-slot="timeline-marker"
+    >
+      <div
+        className={cn(
+          "mt-0.5 flex size-3 shrink-0 items-center justify-center rounded-full border-2 border-primary bg-background [&_svg]:size-3.5 has-[svg]:mt-0 has-[svg]:size-7 has-[svg]:border-transparent has-[svg]:bg-primary has-[svg]:text-primary-foreground",
+          className,
+        )}
+        data-slot="timeline-dot"
+        {...props}
+      >
+        {children}
+      </div>
+      <div
+        className="my-1 w-0.5 flex-1 rounded-full bg-border"
+        data-slot="timeline-connector"
+      />
+    </div>
+  );
+}
+
+function TimelineContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-1 flex-col gap-1 pb-8 group-last/timeline-item:pb-0",
+        className,
+      )}
+      data-slot="timeline-content"
+      {...props}
+    />
+  );
+}
+
+function TimelineTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("font-medium text-sm leading-tight", className)}
+      data-slot="timeline-title"
+      {...props}
+    />
+  );
+}
+
+function TimelineTime({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "font-medium text-muted-foreground text-xs tabular-nums",
+        className,
+      )}
+      data-slot="timeline-time"
+      {...props}
+    />
+  );
+}
+
+function TimelineDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="timeline-description"
+      {...props}
+    />
+  );
+}
+
+export {
+  Timeline,
+  TimelineItem,
+  TimelineDot,
+  TimelineContent,
+  TimelineTitle,
+  TimelineTime,
+  TimelineDescription,
+};

package/src/components/ui/toast.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import { Toast } from "@base-ui/react/toast";
+import {
+  CircleAlertIcon,
+  CircleCheckIcon,
+  InfoIcon,
+  LoaderCircleIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import { buttonVariants } from "./button";
+import { cn } from "../../lib/utils/css";
+
+const toastManager = Toast.createToastManager();
+const anchoredToastManager = Toast.createToastManager();
+
+const TOAST_ICONS = {
+  error: CircleAlertIcon,
+  info: InfoIcon,
+  loading: LoaderCircleIcon,
+  success: CircleCheckIcon,
+  warning: TriangleAlertIcon,
+} as const;
+
+type ToastPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+
+interface ToastProviderProps extends Toast.Provider.Props {
+  position?: ToastPosition;
+}
+
+function ToastProvider({
+  children,
+  position = "bottom-right",
+  ...props
+}: ToastProviderProps) {
+  return (
+    <Toast.Provider toastManager={toastManager} {...props}>
+      {children}
+      <Toasts position={position} />
+    </Toast.Provider>
+  );
+}
+
+function Toasts({ position = "bottom-right" }: { position: ToastPosition }) {
+  const { toasts } = Toast.useToastManager();
+  const isTop = position.startsWith("top");
+
+  return (
+    <Toast.Portal data-slot="toast-portal">
+      <Toast.Viewport
+        className={cn(
+          "fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]",
+          // Vertical positioning
+          "data-[position*=top]:top-(--toast-inset)",
+          "data-[position*=bottom]:bottom-(--toast-inset)",
+          // Horizontal positioning
+          "data-[position*=left]:left-(--toast-inset)",
+          "data-[position*=right]:right-(--toast-inset)",
+          "data-[position*=center]:-translate-x-1/2 data-[position*=center]:left-1/2",
+        )}
+        data-position={position}
+        data-slot="toast-viewport"
+      >
+        {toasts.map((toast) => {
+          const Icon = toast.type
+            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]
+            : null;
+
+          return (
+            <Toast.Root
+              className={cn(
+                "absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+                // Base positioning using data-position
+                "data-[position*=right]:right-0 data-[position*=right]:left-auto",
+                "data-[position*=left]:right-auto data-[position*=left]:left-0",
+                "data-[position*=center]:right-0 data-[position*=center]:left-0",
+                "data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top",
+                "data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom",
+                // Gap fill for hover
+                "after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full",
+                "data-[position*=top]:after:top-full",
+                "data-[position*=bottom]:after:bottom-full",
+                // Define some variables
+                "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]",
+                // Define offset-y variable
+                "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]",
+                "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]",
+                // Default state transform
+                "data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]",
+                "data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]",
+                // Limited state
+                "data-limited:opacity-0",
+                // Expanded state
+                "data-expanded:h-(--toast-height)",
+                "data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]",
+                // Starting and ending animations
+                "data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]",
+                "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]",
+                "data-ending-style:opacity-0",
+                // Ending animations (direction-aware)
+                "data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
+                "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+                "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+                "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
+                "data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]",
+                // Ending animations (expanded)
+                "data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]",
+              )}
+              data-position={position}
+              key={toast.id}
+              swipeDirection={
+                position.includes("center")
+                  ? [isTop ? "up" : "down"]
+                  : position.includes("left")
+                    ? ["left", isTop ? "up" : "down"]
+                    : ["right", isTop ? "up" : "down"]
+              }
+              toast={toast}
+            >
+              <Toast.Content className="pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100">
+                <div className="flex gap-2">
+                  {Icon && (
+                    <div
+                      className="[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+                      data-slot="toast-icon"
+                    >
+                      <Icon className="in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80" />
+                    </div>
+                  )}
+
+                  <div className="flex flex-col gap-0.5">
+                    <Toast.Title
+                      className="font-medium"
+                      data-slot="toast-title"
+                    />
+                    <Toast.Description
+                      className="text-muted-foreground"
+                      data-slot="toast-description"
+                    />
+                  </div>
+                </div>
+                {toast.actionProps && (
+                  <Toast.Action
+                    className={buttonVariants({ size: "xs" })}
+                    data-slot="toast-action"
+                  >
+                    {toast.actionProps.children}
+                  </Toast.Action>
+                )}
+              </Toast.Content>
+            </Toast.Root>
+          );
+        })}
+      </Toast.Viewport>
+    </Toast.Portal>
+  );
+}
+
+function AnchoredToastProvider({ children, ...props }: Toast.Provider.Props) {
+  return (
+    <Toast.Provider toastManager={anchoredToastManager} {...props}>
+      {children}
+      <AnchoredToasts />
+    </Toast.Provider>
+  );
+}
+
+function AnchoredToasts() {
+  const { toasts } = Toast.useToastManager();
+
+  return (
+    <Toast.Portal data-slot="toast-portal-anchored">
+      <Toast.Viewport
+        className="outline-none"
+        data-slot="toast-viewport-anchored"
+      >
+        {toasts.map((toast) => {
+          const Icon = toast.type
+            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]
+            : null;
+          const tooltipStyle =
+            (toast.data as { tooltipStyle?: boolean })?.tooltipStyle ?? false;
+          const positionerProps = toast.positionerProps;
+
+          if (!positionerProps?.anchor) {
+            return null;
+          }
+
+          return (
+            <Toast.Positioner
+              className="z-50 max-w-[min(--spacing(64),var(--available-width))]"
+              data-slot="toast-positioner"
+              key={toast.id}
+              sideOffset={positionerProps.sideOffset ?? 4}
+              toast={toast}
+            >
+              <Toast.Root
+                className={cn(
+                  "relative text-balance border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/6%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+                  tooltipStyle
+                    ? "rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]"
+                    : "rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]",
+                )}
+                data-slot="toast-popup"
+                toast={toast}
+              >
+                {tooltipStyle ? (
+                  <Toast.Content className="pointer-events-auto px-2 py-1">
+                    <Toast.Title data-slot="toast-title" />
+                  </Toast.Content>
+                ) : (
+                  <Toast.Content className="pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm">
+                    <div className="flex gap-2">
+                      {Icon && (
+                        <div
+                          className="[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+                          data-slot="toast-icon"
+                        >
+                          <Icon className="in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80" />
+                        </div>
+                      )}
+
+                      <div className="flex flex-col gap-0.5">
+                        <Toast.Title
+                          className="font-medium"
+                          data-slot="toast-title"
+                        />
+                        <Toast.Description
+                          className="text-muted-foreground"
+                          data-slot="toast-description"
+                        />
+                      </div>
+                    </div>
+                    {toast.actionProps && (
+                      <Toast.Action
+                        className={buttonVariants({ size: "xs" })}
+                        data-slot="toast-action"
+                      >
+                        {toast.actionProps.children}
+                      </Toast.Action>
+                    )}
+                  </Toast.Content>
+                )}
+              </Toast.Root>
+            </Toast.Positioner>
+          );
+        })}
+      </Toast.Viewport>
+    </Toast.Portal>
+  );
+}
+
+export {
+  ToastProvider,
+  type ToastPosition,
+  toastManager,
+  AnchoredToastProvider,
+  anchoredToastManager,
+};

package/src/components/ui/toggle-group.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import type { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Separator } from "./separator";
+import {
+  Toggle as ToggleComponent,
+  type toggleVariants,
+} from "./toggle";
+import { cn } from "../../lib/utils/css";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+});
+
+function ToggleGroup({
+  className,
+  variant = "default",
+  size = "default",
+  orientation = "horizontal",
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive
+      className={cn(
+        "flex w-fit *:focus-visible:z-10 dark:*:[[data-slot=separator]:has(+[data-slot=toggle]:hover)]:before:bg-input/64 dark:*:[[data-slot=separator]:has(+[data-slot=toggle][data-pressed])]:before:bg-input dark:*:[[data-slot=toggle]:hover+[data-slot=separator]]:before:bg-input/64 dark:*:[[data-slot=toggle][data-pressed]+[data-slot=separator]]:before:bg-input",
+        orientation === "horizontal"
+          ? "*:pointer-coarse:after:min-w-auto"
+          : "*:pointer-coarse:after:min-h-auto",
+        variant === "default"
+          ? "gap-0.5"
+          : orientation === "horizontal"
+            ? "*:not-first:not-data-[slot=separator]:before:-start-[0.5px] *:not-last:not-data-[slot=separator]:before:-end-[0.5px] *:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none"
+            : "*:not-first:not-data-[slot=separator]:before:-top-[0.5px] *:not-last:not-data-[slot=separator]:before:-bottom-[0.5px] flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:data-[slot=toggle]:not-last:before:hidden dark:*:last:before:hidden dark:*:first:before:block",
+        className,
+      )}
+      data-size={size}
+      data-slot="toggle-group"
+      data-variant={variant}
+      orientation={orientation}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ size, variant }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  );
+}
+
+function Toggle({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  const resolvedVariant = context.variant || variant;
+  const resolvedSize = context.size || size;
+
+  return (
+    <ToggleComponent
+      className={className}
+      data-size={resolvedSize}
+      data-variant={resolvedVariant}
+      size={resolvedSize}
+      variant={resolvedVariant}
+      {...props}
+    >
+      {children}
+    </ToggleComponent>
+  );
+}
+
+function ToggleGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      className={cn(
+        "pointer-events-none relative bg-input before:absolute before:inset-0 dark:before:bg-input/32",
+        className,
+      )}
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+export { ToggleGroup, Toggle, Toggle as ToggleGroupItem, ToggleGroupSeparator };

package/src/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils/css";
+
+const toggleVariants = cva(
+  "[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-[box-shadow,background-color] duration-100 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-input/64 data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:transition-transform [&_svg]:duration-150 [&_svg]:ease-[cubic-bezier(0.34,1.56,0.64,1)] data-pressed:[&_svg]:scale-115",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8",
+        lg: "h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9",
+        sm: "h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7",
+      },
+      variant: {
+        default: "border-transparent",
+        outline:
+          "border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/32 dark:data-pressed:bg-input dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none",
+      },
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      className={cn(toggleVariants({ className, size, variant }))}
+      data-slot="toggle"
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/src/components/ui/toolbar.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar";
+
+import { cn } from "../../lib/utils/css";
+
+function Toolbar({ className, ...props }: ToolbarPrimitive.Root.Props) {
+  return (
+    <ToolbarPrimitive.Root
+      className={cn(
+        "relative flex gap-2 rounded-xl border bg-card not-dark:bg-clip-padding p-1 text-card-foreground",
+        className,
+      )}
+      data-slot="toolbar"
+      {...props}
+    />
+  );
+}
+
+function ToolbarButton({ className, ...props }: ToolbarPrimitive.Button.Props) {
+  return (
+    <ToolbarPrimitive.Button
+      className={cn(
+        "transition-[box-shadow,background-color,color,filter] duration-150 ease-out [:active:not(:disabled)]:brightness-95",
+        className,
+      )}
+      data-slot="toolbar-button"
+      {...props}
+    />
+  );
+}
+
+function ToolbarLink({ className, ...props }: ToolbarPrimitive.Link.Props) {
+  return (
+    <ToolbarPrimitive.Link
+      className={cn(
+        "transition-[color,opacity] duration-150 ease-out",
+        className,
+      )}
+      data-slot="toolbar-link"
+      {...props}
+    />
+  );
+}
+
+function ToolbarInput({ className, ...props }: ToolbarPrimitive.Input.Props) {
+  return (
+    <ToolbarPrimitive.Input
+      className={cn(className)}
+      data-slot="toolbar-input"
+      {...props}
+    />
+  );
+}
+
+function ToolbarGroup({ className, ...props }: ToolbarPrimitive.Group.Props) {
+  return (
+    <ToolbarPrimitive.Group
+      className={cn("flex items-center gap-1", className)}
+      data-slot="toolbar-group"
+      {...props}
+    />
+  );
+}
+
+function ToolbarSeparator({
+  className,
+  ...props
+}: ToolbarPrimitive.Separator.Props) {
+  return (
+    <ToolbarPrimitive.Separator
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:my-0.5 data-[orientation=vertical]:my-1.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
+        className,
+      )}
+      data-slot="toolbar-separator"
+      {...props}
+    />
+  );
+}
+
+export {
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSeparator,
+  ToolbarButton,
+  ToolbarLink,
+  ToolbarInput,
+};