dawn-ui-react 1.0.0-alpha.25 → 1.0.0-alpha.27

package/dist/components/colour-picker/colour-picker-lightness-slider.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ColourPickerLightnessSliderProps } from './colour-picker.types';
+export declare const ColourPickerLightnessSlider: ({ className, ref, ...props }: ColourPickerLightnessSliderProps) => React.JSX.Element;

package/dist/components/colour-picker/colour-picker.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ColourPickerProps, ColourPickerContextType } from './colour-picker.types';
-export declare const ColourPicker: ({ variant, defaultColour, defaultPalette, paletteLimit, className, children, ref, ...props }: ColourPickerProps) => React.JSX.Element;
+export declare const ColourPicker: ({ variant, value: controlledValue, defaultColour, defaultPalette, paletteLimit, onValueChange, className, children, ref, ...props }: ColourPickerProps) => React.JSX.Element;
 export declare const useColourPicker: () => ColourPickerContextType;

package/dist/components/colour-picker/colour-picker.types.d.ts

@@ -15,6 +15,7 @@ export type ColourPickerContextType = {
     setSaturation: (saturation: number) => void;
     setValue: (value: number) => void;
     setAlpha: (alpha: number) => void;
+    setLightness: (lightness: number) => void;
     valueType: ValueType;
     setValueType: (valueType: ValueType) => void;
     palette: chroma.Color[];
@@ -45,6 +46,9 @@ export type ColourPickerAction = {
 } | {
     type: 'set_alpha';
     alpha: number;
+} | {
+    type: 'set_lightness';
+    lightness: number;
 } | {
     type: 'set_value_type';
     valueType: ValueType;
@@ -56,9 +60,11 @@ export type ColourPickerAction = {
     colour: chroma.Color;
 };
 export type ColourPickerProps = React.ComponentProps<'div'> & VariantProps<typeof colourPickerVariants> & {
+    value?: string | chroma.Color;
     defaultColour?: string;
     defaultPalette?: string[];
     paletteLimit?: number;
+    onValueChange?: (colour: chroma.Color) => void;
 };
 export declare const colourPickerVariants: (props?: ({
     variant?: "ghost" | "outline" | "elevated" | null | undefined;
@@ -76,6 +82,7 @@ export type ValueType = {
 export type ColourPickerInputProps = React.ComponentProps<typeof InputGroup>;
 export type ColourPickerAreaProps = React.ComponentProps<'div'>;
 export type ColourPickerHueSliderProps = Partial<React.ComponentProps<typeof ColourChannelSlider>>;
+export type ColourPickerLightnessSliderProps = Partial<React.ComponentProps<typeof ColourChannelSlider>>;
 export type ColourPickerTransparencySliderProps = Partial<React.ComponentProps<typeof ColourChannelSlider>>;
 export type ColourPickerValueTypeProps = React.ComponentProps<typeof SelectTrigger>;
 export type ColourPickerRowProps = React.ComponentProps<'div'>;

package/dist/dawn-ui-react.js

@@ -34483,9 +34483,9 @@ var qH = ({ content: e, ...t }) => /* @__PURE__ */ b(KH, {
 }, LU = mr("", {
 	variants: {
 		variant: {
-			default: "space-y-md [&_[role=presentation]]:top-1/2 [&_[role=tablist]]:bg-surface-low",
-			ghost: "space-y-md [&_[role=presentation]]:top-1/2 [&_[role=presentation]]:border [&_[role=tablist]]:rounded-lg",
-			underline: "space-y-md [&_[role=tablist]]:border-border [&_[role=tablist]]:pb-md"
+			default: "space-y-xs [&_[role=presentation]]:top-1/2 [&_[role=tablist]]:bg-surface-low",
+			ghost: "space-y-2xs [&_[role=presentation]]:top-1/2 [&_[role=presentation]]:rounded-full [&_[role=presentation]]:border [&_[role=tablist]]:rounded-full",
+			underline: "space-y-xs [&_[role=tablist]]:border-border"
 		},
 		size: {
 			small: "",
@@ -34685,7 +34685,7 @@ var qH = ({ content: e, ...t }) => /* @__PURE__ */ b(KH, {
 	className: X("relative z-0 flex", e),
 	...t
 }), VU = ({ className: e, ...t }) => /* @__PURE__ */ b(Hx, {
-	className: X("relative flex grow items-center justify-start overflow-auto p-3xs", e),
+	className: X("relative flex grow flex-col items-center justify-start gap-md", e),
 	...t
 }), HU = ({ className: e, ...t }) => /* @__PURE__ */ b(zx, {
 	className: X("inline-flex items-center justify-center gap-xs text-center break-keep whitespace-nowrap text-on-surface transition-colors duration-300 outline-none select-none hover:cursor-pointer focus-visible:relative focus-visible:before:absolute focus-visible:before:outline", e),
@@ -37006,6 +37006,10 @@ var _q = _W, vq = mr("flex flex-col space-y-sm", {
 			...e,
 			alpha: t.alpha
 		};
+		case "set_lightness": return {
+			...e,
+			value: t.lightness
+		};
 		case "set_value_type": return {
 			...e,
 			valueType: t.valueType
@@ -37020,10 +37024,10 @@ var _q = _W, vq = mr("flex flex-col space-y-sm", {
 		};
 		default: return e;
 	}
-}, Cq = ({ variant: e, defaultColour: n, defaultPalette: r, paletteLimit: i, className: a, children: o, ref: s, ...c }) => {
-	let [l, u] = t.useReducer(Sq, {
-		defaultColour: n,
-		defaultPalette: r
+}, Cq = ({ variant: e, value: n, defaultColour: r, defaultPalette: i, paletteLimit: a, onValueChange: o, className: s, children: c, ref: l, ...u }) => {
+	let [d, f] = t.useReducer(Sq, {
+		defaultColour: r,
+		defaultPalette: i
 	}, ({ defaultColour: e, defaultPalette: t }) => {
 		let n = _q(e ?? "#ffffff"), [r, i, a] = n.hsv();
 		return {
@@ -37034,62 +37038,68 @@ var _q = _W, vq = mr("flex flex-col space-y-sm", {
 			valueType: bq[0],
 			palette: (t ?? []).map((e) => _q(e))
 		};
-	}), { hue: d, saturation: f, value: p, alpha: m, valueType: h, palette: g } = l, _ = t.useMemo(() => _q.hsv(d, f, p).alpha(m), [
-		d,
-		f,
+	}), { hue: p, saturation: m, value: h, alpha: g, valueType: _, palette: v } = d, y = t.useMemo(() => _q.hsv(p, m, h).alpha(g), [
 		p,
-		m
-	]), v = t.useCallback((e) => u({
-		type: "set_colour",
-		colour: e
-	}), []), y = t.useCallback((e) => u({
-		type: "set_hue",
-		hue: e
-	}), []), x = t.useCallback((e) => u({
-		type: "set_saturation",
-		saturation: e
-	}), []), S = t.useCallback((e) => u({
-		type: "set_value",
-		value: e
-	}), []), C = t.useCallback((e) => u({
-		type: "set_alpha",
-		alpha: e
-	}), []), w = t.useCallback((e) => u({
+		m,
+		h,
+		g
+	]), x = t.useMemo(() => n === void 0 ? y : _q(n), [n, y]), [S, C, w] = x.hsv(), T = S == null || Number.isNaN(S) ? p : S, E = C == null || Number.isNaN(C) ? m : C, D = w, O = x.alpha(), k = t.useCallback((e) => {
+		n === void 0 && f({
+			type: "set_colour",
+			colour: e
+		}), o?.(e);
+	}, [n, o]), A = t.useCallback((e) => k(_q.hsv(e, E, D).alpha(O)), [
+		O,
+		E,
+		k,
+		D
+	]), j = t.useCallback((e) => k(_q.hsv(T, e, D).alpha(O)), [
+		O,
+		T,
+		k,
+		D
+	]), M = t.useCallback((e) => k(_q.hsv(T, E, e).alpha(O)), [
+		O,
+		T,
+		E,
+		k
+	]), N = t.useCallback((e) => k(x.alpha(e)), [x, k]), P = t.useCallback((e) => k(x.set("hsl.l", e)), [x, k]), F = t.useCallback((e) => f({
 		type: "set_value_type",
 		valueType: e
-	}), []), T = t.useCallback((e) => u({
+	}), []), I = t.useCallback((e) => f({
 		type: "set_palette",
 		palette: e
-	}), []), E = t.useCallback((e) => {
-		if (!(i && g.length >= i)) return u({
+	}), []), L = t.useCallback((e) => {
+		if (!(a && v.length >= a)) return f({
 			type: "add_palette_colour",
 			colour: e
 		});
-	}, [g, i]);
+	}, [v, a]);
 	return /* @__PURE__ */ b(xq.Provider, {
 		value: {
-			colour: _,
-			setColour: v,
-			hue: d,
-			saturation: f,
-			value: p,
-			alpha: m,
-			setHue: y,
-			setSaturation: x,
-			setValue: S,
-			setAlpha: C,
-			valueType: h,
-			setValueType: w,
-			palette: g,
-			setPalette: T,
-			addPaletteColour: E,
-			paletteLimit: i
+			colour: x,
+			setColour: k,
+			hue: T,
+			saturation: E,
+			value: D,
+			alpha: O,
+			setHue: A,
+			setSaturation: j,
+			setValue: M,
+			setAlpha: N,
+			setLightness: P,
+			valueType: _,
+			setValueType: F,
+			palette: v,
+			setPalette: I,
+			addPaletteColour: L,
+			paletteLimit: a
 		},
 		children: /* @__PURE__ */ b("div", {
-			className: X(vq({ variant: e }), a),
-			ref: s,
-			...c,
-			children: o
+			className: X(vq({ variant: e }), s),
+			ref: l,
+			...u,
+			children: c
 		})
 	});
 }, wq = () => {
@@ -37097,9 +37107,9 @@ var _q = _W, vq = mr("flex flex-col space-y-sm", {
 	if (!e) throw Error("useColourPicker must be used within a ColourPicker");
 	return e;
 }, Tq = ({ className: e, ref: t, ...n }) => {
-	let { colour: r, hue: i, saturation: a, value: o, setSaturation: s, setValue: c } = wq(), l = _q.hsv(i, 1, 1).hex(), u = (e) => {
+	let { colour: r, hue: i, saturation: a, value: o, alpha: s, setColour: c } = wq(), l = _q.hsv(i, 1, 1).hex(), u = (e) => {
 		let t = e.currentTarget.getBoundingClientRect(), n = Math.min(Math.max((e.clientX - t.left) / t.width, 0), 1), r = Math.min(Math.max(1 - (e.clientY - t.top) / t.height, 0), 1);
-		s(n), c(r);
+		c(_q.hsv(i, n, r).alpha(s));
 	}, d = (e) => {
 		e.currentTarget.setPointerCapture(e.pointerId), u(e);
 	};
@@ -46757,12 +46767,12 @@ var u5 = ({ row: e, className: t, children: n, ref: r, ...i }) => /* @__PURE__ *
 	ref: i,
 	...a,
 	children: r
-}), Zue = mr("flex flex-col gap-3xs data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_[role=\"group\"]]:outline [&_[role=\"group\"]]:outline-transparent [&_[role=\"group\"]]:transition-all aria-invalid:[&_[role=\"group\"]]:bg-error-container aria-invalid:[&_[role=\"group\"]]:outline-error-border aria-invalid:[&_[role=\"group\"]]:focus-within:outline-error-border-strong aria-invalid:[&_[role=\"group\"]]:not-focus-within:hover:outline-error-border data-[disabled]:[&_[role=\"group\"]]:cursor-not-allowed data-[invalid]:[&_[role=\"group\"]]:bg-error-container data-[invalid]:[&_[role=\"group\"]]:outline-error-border data-[invalid]:[&_[role=\"group\"]]:focus-within:outline-error-border-strong data-[invalid]:[&_[role=\"group\"]]:not-focus-within:hover:outline-error-border aria-invalid:[&_input]:text-error-on-container aria-invalid:[&_input]:caret-error-border-strong data-[invalid]:[&_input]:text-error-on-container data-[invalid]:[&_input]:caret-error-border-strong", {
+}), Zue = mr("flex flex-col gap-3xs data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_[role=\"group\"]]:rounded-full [&_[role=\"group\"]]:outline [&_[role=\"group\"]]:outline-transparent [&_[role=\"group\"]]:transition-all aria-invalid:[&_[role=\"group\"]]:bg-error-container aria-invalid:[&_[role=\"group\"]]:outline-error-border aria-invalid:[&_[role=\"group\"]]:focus-within:outline-error-border-strong aria-invalid:[&_[role=\"group\"]]:not-focus-within:hover:outline-error-border data-[disabled]:[&_[role=\"group\"]]:cursor-not-allowed data-[invalid]:[&_[role=\"group\"]]:bg-error-container data-[invalid]:[&_[role=\"group\"]]:outline-error-border data-[invalid]:[&_[role=\"group\"]]:focus-within:outline-error-border-strong data-[invalid]:[&_[role=\"group\"]]:not-focus-within:hover:outline-error-border aria-invalid:[&_input]:text-error-on-container aria-invalid:[&_input]:caret-error-border-strong data-[invalid]:[&_input]:text-error-on-container data-[invalid]:[&_input]:caret-error-border-strong", {
 	variants: {
 		size: {
-			small: "[&_[role=\"group\"]]:h-lg [&_[role=\"group\"]]:rounded-lg [&_input]:style-text-default--1",
-			medium: "[&_[role=\"group\"]]:h-xl [&_[role=\"group\"]]:rounded-xl [&_input]:style-text-default-0",
-			large: "[&_[role=\"group\"]]:h-2xl [&_[role=\"group\"]]:rounded-2xl [&_input]:style-text-default-1"
+			small: "[&_[role=\"group\"]]:h-lg [&_input]:style-text-default--1",
+			medium: "[&_[role=\"group\"]]:h-xl [&_input]:style-text-default-0",
+			large: "[&_[role=\"group\"]]:h-2xl [&_input]:style-text-default-1"
 		},
 		variant: {
 			primary: "[&_[role=\"group\"]]:bg-surface [&_[role=\"group\"]]:shadow-2xs",