@studiolxd/brand 49.21.0 → 49.23.0

package/dist/color-picker-field.css

@@ -0,0 +1 @@
+.color-picker-field{align-items:flex-start;gap:var(--color-picker-field-gap);flex-direction:column;display:flex}.color-picker-field__helper{font-family:var(--color-picker-field-helper-font-family);font-size:var(--color-picker-field-helper-font-size);font-weight:var(--color-picker-field-helper-font-weight);line-height:var(--color-picker-field-helper-line-height);color:var(--color-picker-field-helper-color)}

package/dist/color-picker-field.js

@@ -0,0 +1,46 @@
+'use client';
+import './color-picker-field.css';
+import { n as e } from "./_shared/form-size.js";
+import { ErrorText as t } from "./error-text.js";
+import { Label as n } from "./label.js";
+import { n as r } from "./_shared/field-labels.js";
+import { t as i } from "./_shared/colorpicker.js";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/stories/molecules/ColorPickerField/ColorPickerField.tsx
+var l = a(function({ id: a, label: l, labelHidden: u, errorMessage: d, helperText: f, error: p = !1, size: m, className: h, ...g }, _) {
+	let v = r(u), y = e(m), b = o(), x = a ?? b, S = `${x}-label`, C = d ? `${x}-error` : void 0, w = f ? `${x}-helper` : void 0, T = [C, w].filter(Boolean).join(" ") || void 0, E = p || !!d;
+	return /* @__PURE__ */ c("div", {
+		className: ["color-picker-field", h].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ s(n, {
+				id: S,
+				htmlFor: x,
+				hidden: v,
+				size: y,
+				children: l
+			}),
+			/* @__PURE__ */ s(i, {
+				dialogLabel: l,
+				...g,
+				ref: _,
+				id: x,
+				size: y,
+				error: E,
+				"aria-labelledby": S,
+				"aria-describedby": T
+			}),
+			d && /* @__PURE__ */ s(t, {
+				id: C,
+				children: d
+			}),
+			f && /* @__PURE__ */ s("span", {
+				id: w,
+				className: "color-picker-field__helper",
+				children: f
+			})
+		]
+	});
+});
+//#endregion
+export { l as ColorPickerField };

package/dist/color-picker.js

@@ -0,0 +1,3 @@
+'use client';
+import { t as e } from "./_shared/colorpicker.js";
+export { e as ColorPicker };

package/dist/color-swatch.css

@@ -0,0 +1 @@
+.color-swatch{--color-swatch-size:var(--color-swatch-size-md);box-sizing:border-box;inline-size:var(--color-swatch-size);block-size:var(--color-swatch-size);vertical-align:middle;border-width:var(--color-swatch-border-width);border-style:solid;border-color:var(--color-swatch-border-color);border-radius:var(--color-swatch-border-radius);background-color:var(--color-swatch-checker-bg);background-image:conic-gradient(var(--color-swatch-checker-color) 25%, transparent 0 50%, var(--color-swatch-checker-color) 0 75%, transparent 0);background-size:var(--color-swatch-checker-size) var(--color-swatch-checker-size);flex:none;display:inline-block}.color-swatch.color-swatch--sm{--color-swatch-size:var(--color-swatch-size-sm)}.color-swatch.color-swatch--lg{--color-swatch-size:var(--color-swatch-size-lg)}

package/dist/color-swatch.js

@@ -0,0 +1,29 @@
+import './color-swatch.css';
+import { jsx as e } from "react/jsx-runtime";
+//#region src/stories/atoms/ColorSwatch/ColorSwatch.tsx
+function t({ color: t, size: n = "md", label: r, className: i }) {
+	let a = typeof t == "string" && t.trim() !== "";
+	return /* @__PURE__ */ e("svg", {
+		className: [
+			"color-swatch",
+			n === "md" ? "" : `color-swatch--${n}`,
+			a ? "" : "color-swatch--empty",
+			i ?? ""
+		].filter(Boolean).join(" "),
+		viewBox: "0 0 1 1",
+		preserveAspectRatio: "none",
+		focusable: "false",
+		...r ? {
+			role: "img",
+			"aria-label": r
+		} : { "aria-hidden": !0 },
+		children: a && /* @__PURE__ */ e("rect", {
+			className: "color-swatch__fill",
+			width: "1",
+			height: "1",
+			fill: t
+		})
+	});
+}
+//#endregion
+export { t as ColorSwatch };

package/dist/colorpicker.css

@@ -0,0 +1 @@
+.color-picker{--color-picker-trigger-current-size:var(--color-picker-trigger-size);display:inline-flex}.color-picker.color-picker--sm{--color-picker-trigger-current-size:var(--color-picker-trigger-sm-size)}.color-picker.color-picker--lg{--color-picker-trigger-current-size:var(--color-picker-trigger-lg-size)}.color-picker__trigger{box-sizing:border-box;inline-size:var(--color-picker-trigger-current-size);block-size:var(--color-picker-trigger-current-size);padding-block:var(--color-picker-trigger-padding);padding-inline:var(--color-picker-trigger-padding);background-color:var(--color-picker-trigger-bg);border-width:var(--color-picker-trigger-border-width);border-style:var(--color-picker-trigger-border-style);border-color:var(--color-picker-trigger-border-color);border-radius:var(--color-picker-trigger-border-radius);cursor:var(--color-picker-trigger-cursor);justify-content:stretch;align-items:stretch;display:inline-flex}.color-picker__trigger:focus-visible{border-color:var(--color-picker-trigger-focus-border-color);box-shadow:inset 0 0 0 calc(var(--color-picker-trigger-focus-ring-width) + var(--color-picker-trigger-focus-ring-inset-offset)) var(--color-picker-trigger-focus-ring-color), inset 0 0 0 var(--color-picker-trigger-focus-ring-inset-offset) var(--color-picker-trigger-bg);outline:none}.color-picker.color-picker--error .color-picker__trigger{border-color:var(--color-picker-trigger-error-border-color)}.color-picker.color-picker--error .color-picker__trigger:focus-visible{box-shadow:inset 0 0 0 calc(var(--color-picker-trigger-focus-ring-width) + var(--color-picker-trigger-focus-ring-inset-offset)) var(--color-picker-trigger-error-focus-ring-color), inset 0 0 0 var(--color-picker-trigger-focus-ring-inset-offset) var(--color-picker-trigger-bg)}.color-picker__trigger:disabled{background-color:var(--color-picker-trigger-disabled-bg);border-color:var(--color-picker-trigger-disabled-border-color);cursor:var(--color-picker-trigger-disabled-cursor)}.color-picker__swatch{block-size:100%;inline-size:100%}.color-picker__trigger:disabled .color-picker__swatch{opacity:var(--color-picker-trigger-disabled-opacity)}.color-picker__panel{gap:var(--color-picker-panel-gap);inline-size:var(--color-picker-panel-inline-size);flex-direction:column;display:flex}.color-picker__area{box-sizing:border-box;inline-size:100%;block-size:var(--color-picker-area-block-size);border-width:var(--color-picker-area-border-width);border-style:solid;border-color:var(--color-picker-area-border-color);background-color:var(--color-picker-area-hue);background-image:linear-gradient(to top, var(--color-picker-area-brightness-end), transparent), linear-gradient(to right, var(--color-picker-area-saturation-start), transparent);cursor:var(--color-picker-area-cursor);touch-action:none;-webkit-user-select:none;user-select:none;position:relative}.color-picker__area[data-direction=rtl]{background-image:linear-gradient(to top, var(--color-picker-area-brightness-end), transparent), linear-gradient(to left, var(--color-picker-area-saturation-start), transparent)}.color-picker__area-thumb{left:var(--color-picker-area-x);top:var(--color-picker-area-y);box-sizing:border-box;inline-size:var(--color-picker-thumb-size);block-size:var(--color-picker-thumb-size);border-width:var(--color-picker-thumb-border-width);border-style:solid;border-color:var(--color-picker-thumb-border-color);border-radius:var(--color-picker-thumb-border-radius);box-shadow:0 0 0 var(--color-picker-thumb-outline-width) var(--color-picker-thumb-outline-color), inset 0 0 0 var(--color-picker-thumb-outline-width) var(--color-picker-thumb-outline-color);position:absolute;transform:translate(-50%,-50%)}.color-picker__area-thumb:focus-visible{outline:var(--color-picker-thumb-focus-ring-width) solid var(--color-picker-thumb-focus-ring-color);outline-offset:var(--color-picker-thumb-focus-ring-offset)}.color-picker__channel{--slider-track-size:var(--color-picker-channel-track-size);--slider-track-bg:transparent;--slider-indicator-bg:transparent;--slider-thumb-size:var(--color-picker-thumb-size);--slider-thumb-bg:transparent;--slider-thumb-border-width:var(--color-picker-thumb-border-width);--slider-thumb-border-color:var(--color-picker-thumb-border-color);--slider-thumb-border-radius:var(--color-picker-thumb-border-radius);--slider-focus-ring-width:var(--color-picker-thumb-focus-ring-width);--slider-focus-ring-offset:var(--color-picker-thumb-focus-ring-offset);--slider-focus-ring-color:var(--color-picker-thumb-focus-ring-color)}.color-picker__channel .slider__track{box-sizing:border-box;border-width:var(--color-picker-area-border-width);border-style:solid;border-color:var(--color-picker-area-border-color)}.color-picker__channel .slider__thumb{box-sizing:border-box;box-shadow:0 0 0 var(--color-picker-thumb-outline-width) var(--color-picker-thumb-outline-color), inset 0 0 0 var(--color-picker-thumb-outline-width) var(--color-picker-thumb-outline-color)}.color-picker__channel--hue .slider__track{background-image:var(--color-picker-hue-gradient)}.color-picker__channel--alpha .slider__track{background-color:var(--color-swatch-checker-bg);background-image:var(--color-picker-alpha-gradient), conic-gradient(var(--color-swatch-checker-color) 25%, transparent 0 50%, var(--color-swatch-checker-color) 0 75%, transparent 0);background-size:auto, var(--color-swatch-checker-size) var(--color-swatch-checker-size)}.color-picker__presets{gap:var(--color-picker-preset-gap);flex-wrap:wrap;display:flex}.color-picker__preset{inline-size:var(--color-picker-preset-size);block-size:var(--color-picker-preset-size);cursor:var(--color-picker-preset-cursor);background:0 0;border:none;padding-block:0;padding-inline:0;display:inline-flex}.color-picker__preset-swatch{block-size:100%;inline-size:100%}.color-picker__preset[aria-pressed=true]{box-shadow:0 0 0 var(--color-picker-preset-selected-ring-offset) var(--color-picker-trigger-bg), 0 0 0 calc(var(--color-picker-preset-selected-ring-offset) + var(--color-picker-preset-selected-ring-width)) var(--color-picker-preset-selected-ring-color)}.color-picker__preset:focus-visible{outline:var(--color-picker-preset-focus-ring-width) solid var(--color-picker-preset-focus-ring-color);outline-offset:calc(var(--color-picker-preset-focus-ring-offset) + var(--color-picker-preset-selected-ring-width))}.color-picker__clear{align-self:flex-start}