@camox/ui 0.32.0 → 0.33.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camox/ui",
-  "version": "0.32.0",
+  "version": "0.33.1",
   "license": "MIT",
   "files": [
     "src"
@@ -27,10 +27,6 @@
       "types": "./src/components/badge.tsx",
       "default": "./src/components/badge.tsx"
     },
-    "./breadcrumb": {
-      "types": "./src/components/breadcrumb.tsx",
-      "default": "./src/components/breadcrumb.tsx"
-    },
     "./button-group": {
       "types": "./src/components/button-group.tsx",
       "default": "./src/components/button-group.tsx"

package/src/components/floating-toolbar.tsx

@@ -6,7 +6,7 @@ function FloatingToolbar({ className, ...props }: React.ComponentProps<"menu">)
       role="toolbar"
       data-slot="floating-toolbar"
       className={cn(
-        "absolute left-[50%] z-30 flex translate-x-[-50%] items-center rounded-xl border-1 bg-background/95 p-2 shadow-2xl backdrop-blur-lg transition-all duration-200",
+        "absolute left-[50%] z-30 flex translate-x-[-50%] items-center rounded-xl border-1 bg-background p-2 shadow-2xl transition-all duration-200",
         className,
       )}
       {...props}

package/src/components/toaster.tsx

@@ -1,11 +1,13 @@
 import type { ToasterProps } from "sonner";
 import { Toaster as Sonner, toast } from "sonner";
 
-const Toaster = ({ theme = "system", ...props }: ToasterProps) => {
+import { cn } from "../lib/utils";
+
+const Toaster = ({ theme = "system", className, ...props }: ToasterProps) => {
   return (
     <Sonner
       theme={theme as ToasterProps["theme"]}
-      className="toaster group"
+      className={cn("toaster group camox-studio-theme", theme === "dark" && "dark", className)}
       style={
         {
           "--normal-bg": "var(--popover)",

package/src/styles/globals.css

@@ -1,7 +1,8 @@
 @custom-variant dark (&:is(.dark *));
 @source "../";
 
-:root {
+:root,
+.camox-studio-theme {
   --background: oklch(1 0 0);
   --foreground: theme(--color-zinc-950);
   --card: oklch(1 0 0);
@@ -37,7 +38,8 @@
   --sidebar-ring: theme(--color-zinc-400);
 }
 
-.dark {
+.dark,
+.camox-studio-theme.dark {
   --background: theme(--color-zinc-950);
   --foreground: theme(--color-zinc-50);
   --card: theme(--color-zinc-900);

package/src/components/breadcrumb.tsx

@@ -1,103 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../lib/utils";
-
-function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
-  return (
-    <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
-  );
-}
-
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
-  return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn(
-        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-item"
-      className={cn("inline-flex items-center gap-1.5", className)}
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) {
-  return useRender({
-    defaultTagName: "a",
-    props: mergeProps<"a">(
-      {
-        className: cn("transition-colors hover:text-foreground", className),
-      },
-      props,
-    ),
-    render,
-    state: {
-      slot: "breadcrumb-link",
-    },
-  });
-}
-
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-page"
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={cn("font-normal text-foreground", className)}
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-separator"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
-      {...props}
-    >
-      {children ?? <ChevronRightIcon />}
-    </li>
-  );
-}
-
-function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-ellipsis"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("flex size-5 items-center justify-center [&>svg]:size-4", className)}
-      {...props}
-    >
-      <MoreHorizontalIcon />
-      <span className="sr-only">More</span>
-    </span>
-  );
-}
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-};