@camox/ui 0.68.0 → 0.69.0

package/dist/components/badge.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
+  variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
   size?: "default" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, size, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/bubble.d.ts

@@ -4,7 +4,7 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/components/bubble.d.ts
 declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "default" | "outline" | "destructive" | "secondary" | "ghost" | "muted" | "tinted" | null | undefined;
+  variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
   align?: "start" | "end";

package/dist/components/button.d.ts

@@ -2,8 +2,8 @@ import { Button as Button$1 } from "@base-ui/react/button";
 import { VariantProps } from "class-variance-authority";
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
-  size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+  size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
 //#endregion

package/dist/components/favicon-drop-zone.d.ts

@@ -3,7 +3,8 @@ import * as React from "react";
 /** Why `file` can't be a favicon, or `null` when it can. Mirrors the API's own checks. */
 declare function validateFaviconFile(file: File): "Use a PNG, SVG, or ICO file." | "Favicon must be 500 KB or smaller." | null;
 /**
- * A large area to drop or browse for a favicon, which previews `previewUrl` in its center.
+ * A large area to drop or browse for a favicon, which previews `previewUrl`
+ * on a light and a dark background side by side.
  * It only picks the file: saving it is up to the caller.
  */
 declare function FaviconDropZone({ previewUrl, prompt, disabled, onFileSelected, className }: {

package/dist/components/favicon-drop-zone.js

@@ -18,8 +18,17 @@ function validateFaviconFile(file) {
 	if (file.size > FAVICON_MAX_BYTES) return "Favicon must be 500 KB or smaller.";
 	return null;
 }
+/** Browsers show favicons on both, so the preview checks the icon reads on each. */
+const PREVIEW_BACKGROUNDS = [{
+	label: "Light",
+	className: "border-neutral-200 bg-white"
+}, {
+	label: "Dark",
+	className: "border-neutral-800 bg-neutral-950"
+}];
 /**
-* A large area to drop or browse for a favicon, which previews `previewUrl` in its center.
+* A large area to drop or browse for a favicon, which previews `previewUrl`
+* on a light and a dark background side by side.
 * It only picks the file: saving it is up to the caller.
 */
 function FaviconDropZone({ previewUrl, prompt, disabled, onFileSelected, className }) {
@@ -65,12 +74,21 @@ function FaviconDropZone({ previewUrl, prompt, disabled, onFileSelected, classNa
 				onClick: () => fileInputRef.current?.click(),
 				className: "hover:bg-accent/50 focus-visible:ring-ring/50 flex w-full flex-col items-center gap-5 rounded-xl border-2 border-dashed px-6 py-10 transition-colors outline-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "bg-background flex size-20 items-center justify-center rounded-2xl border shadow-xs",
-					children: /* @__PURE__ */ jsx("img", {
-						src: previewUrl,
-						alt: "",
-						className: "size-12 object-contain"
-					})
+					className: "flex gap-4",
+					children: PREVIEW_BACKGROUNDS.map((background) => /* @__PURE__ */ jsxs("span", {
+						className: "flex flex-col items-center gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("flex size-20 items-center justify-center rounded-2xl border shadow-xs", background.className),
+							children: /* @__PURE__ */ jsx("img", {
+								src: previewUrl,
+								alt: "",
+								className: "size-12 object-contain"
+							})
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-xs",
+							children: background.label
+						})]
+					}, background.label))
 				}), /* @__PURE__ */ jsxs("span", {
 					className: "space-y-1 text-center",
 					children: [/* @__PURE__ */ jsx("span", {

package/dist/components/tabs.d.ts

@@ -3,7 +3,7 @@ import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 //#region src/components/tabs.d.ts
 declare function Tabs({ className, orientation, ...props }: Tabs$1.Root.Props): import("react").JSX.Element;
 declare const tabsListVariants: (props?: ({
-  variant?: "line" | "default" | null | undefined;
+  variant?: "default" | "line" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, ...props }: Tabs$1.List.Props & VariantProps<typeof tabsListVariants>): import("react").JSX.Element;
 declare function TabsTrigger({ className, ...props }: Tabs$1.Tab.Props): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camox/ui",
-  "version": "0.68.0",
+  "version": "0.69.0",
   "license": "MIT",
   "files": [
     "dist"