@pixpilot/shadcn 1.2.5 → 1.2.7

package/dist/components/ui/color-picker.d.ts

@@ -78,7 +78,10 @@ declare function ColorPickerContent(props: React.ComponentProps<typeof PopoverCo
 declare function ColorPickerArea(props: DivProps): react_jsx_runtime41.JSX.Element;
 declare function ColorPickerHueSlider(props: React.ComponentProps<typeof SliderPrimitive.Root>): react_jsx_runtime41.JSX.Element;
 declare function ColorPickerAlphaSlider(props: React.ComponentProps<typeof SliderPrimitive.Root>): react_jsx_runtime41.JSX.Element;
-declare function ColorPickerSwatch(props: DivProps): react_jsx_runtime41.JSX.Element;
+interface ColorPickerSwatchProps extends Omit<DivProps, 'color'> {
+  color?: string;
+}
+declare function ColorPickerSwatch(props: ColorPickerSwatchProps): react_jsx_runtime41.JSX.Element;
 declare function ColorPickerEyeDropper(props: React.ComponentProps<typeof Button>): react_jsx_runtime41.JSX.Element | null;
 interface ColorPickerFormatSelectProps extends Omit<React.ComponentProps<typeof Select>, 'value' | 'onValueChange'>, Pick<React.ComponentProps<typeof SelectTrigger>, 'size' | 'className'> {}
 declare function ColorPickerFormatSelect(props: ColorPickerFormatSelectProps): react_jsx_runtime41.JSX.Element;

package/dist/components/ui/color-picker.js

@@ -231,8 +231,17 @@ function hslToRgb(hsl, alpha = 1) {
 		a: alpha
 	};
 }
+function isTransparent(color) {
+	return color.trim().toLowerCase() === "transparent";
+}
 function parseColorString(value) {
 	const trimmed = value.trim();
+	if (isTransparent(trimmed)) return {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 0
+	};
 	if (trimmed.startsWith("#")) {
 		const hexMatch = trimmed.match(/^#([a-f0-9]{3}|[a-f0-9]{4}|[a-f0-9]{6}|[a-f0-9]{8})$/i);
 		if (hexMatch) {
@@ -701,17 +710,21 @@ function ColorPickerAlphaSlider(props) {
 	});
 }
 function ColorPickerSwatch(props) {
-	const { asChild, className,...swatchProps } = props;
+	const { asChild, className, color: colorProp, style: styleProp,...swatchProps } = props;
 	const context = useColorPickerContext(SWATCH_NAME);
-	const color = useStore((state) => state.color);
+	const storeColor = useStore((state) => state.color);
 	const format = useStore((state) => state.format);
+	const color = React.useMemo(() => {
+		if (colorProp === void 0) return storeColor;
+		return parseColorString(colorProp);
+	}, [colorProp, storeColor]);
 	const backgroundStyle = React.useMemo(() => {
-		if (!color) return { background: "linear-gradient(to bottom right, transparent calc(50% - 1px), hsl(var(--destructive)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat" };
+		if (!color) return { backgroundColor: colorProp };
 		const colorString = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
 		if (color.a < 1) return { background: `linear-gradient(${colorString}, ${colorString}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0% 50% / 8px 8px` };
 		return { backgroundColor: colorString };
-	}, [color]);
-	const ariaLabel = !color ? "No color selected" : `Current color: ${colorToString(color, format)}`;
+	}, [color, colorProp]);
+	const ariaLabel = color ? `Current color: ${colorToString(color, format)}` : colorProp ? `Current color: ${colorProp}` : "No color selected";
 	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
 		role: "img",
 		"aria-label": ariaLabel,
@@ -720,7 +733,8 @@ function ColorPickerSwatch(props) {
 		className: cn("box-border size-8 rounded-sm border shadow-sm", context.disabled && "opacity-50", className),
 		style: {
 			...backgroundStyle,
-			forcedColorAdjust: "none"
+			forcedColorAdjust: "none",
+			...styleProp
 		}
 	});
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn",
   "type": "module",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "A collection of reusable UI components built with shadcn/ui and Radix UI primitives.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",