@bolio-ui/core 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/chunk-OKZRHSSG.js

@@ -0,0 +1,271 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/ColorPicker/ColorPicker.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/ColorPicker/color-utils.ts
+var clamp = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value));
+var normalizeHex = (text) => {
+  const match = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(text.trim());
+  if (!match) return null;
+  const digits = match[1].toLowerCase();
+  const full = digits.length === 3 ? digits.split("").map((digit) => digit + digit).join("") : digits;
+  return `#${full}`;
+};
+var hexToHsv = (hex) => {
+  const value = normalizeHex(hex) || "#000000";
+  const [r, g, b] = [1, 3, 5].map(
+    (start) => parseInt(value.slice(start, start + 2), 16) / 255
+  );
+  const max = Math.max(r, g, b);
+  const delta = max - Math.min(r, g, b);
+  let h = 0;
+  if (delta) {
+    if (max === r) h = (g - b) / delta % 6;
+    else if (max === g) h = (b - r) / delta + 2;
+    else h = (r - g) / delta + 4;
+    h = (h * 60 + 360) % 360;
+  }
+  return { h, s: max ? delta / max : 0, v: max };
+};
+var hsvToHex = ({ h, s, v }) => {
+  const hue = (h % 360 + 360) % 360 / 60;
+  const chroma = v * s;
+  const x = chroma * (1 - Math.abs(hue % 2 - 1));
+  const [r, g, b] = [
+    [chroma, x, 0],
+    [x, chroma, 0],
+    [0, chroma, x],
+    [0, x, chroma],
+    [x, 0, chroma],
+    [chroma, 0, x]
+  ][Math.min(5, Math.floor(hue))];
+  const shift = v - chroma;
+  return "#" + [r, g, b].map(
+    (channel) => Math.round(clamp(channel + shift) * 255).toString(16).padStart(2, "0")
+  ).join("");
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/ColorPicker/ColorPicker.module.css.bolio-css-module-source
+var ColorPicker_module_css_default = { "picker": "ColorPicker-module_picker__b-U0f", "disabled": "ColorPicker-module_disabled__jM1X3", "panel": "ColorPicker-module_panel__kComH", "thumb": "ColorPicker-module_thumb__Vi5yp", "hue": "ColorPicker-module_hue__VKHj-", "field": "ColorPicker-module_field__v7-7F", "preview": "ColorPicker-module_preview__UfBdK", "hex": "ColorPicker-module_hex__vQ6zW", "swatches": "ColorPicker-module_swatches__KJbmR", "swatch": "ColorPicker-module_swatch__WCpFz", "active": "ColorPicker-module_active__GEQ2Z" };
+
+// core/ColorPicker/ColorPicker.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var percent = (value) => Math.round(value * 100);
+var ColorPickerComponent = _react2.default.forwardRef(
+  ({
+    value,
+    initialValue = "#000000",
+    onChange,
+    swatches,
+    hexInput = true,
+    disabled = false,
+    panelLabel = "Saturation and brightness",
+    hueLabel = "Hue",
+    hexLabel = "Hex color",
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const isControlled = value !== void 0;
+    const [selfHex, setSelfHex] = _react.useState.call(void 0, 
+      normalizeHex(initialValue) || "#000000"
+    );
+    const hex = (isControlled ? normalizeHex(value) : selfHex) || "#000000";
+    const [hsv, setHsv] = _react.useState.call(void 0, () => hexToHsv(hex));
+    if (hsvToHex(hsv) !== hex) setHsv(hexToHsv(hex));
+    const [text, setText] = _react.useState.call(void 0, hex);
+    _react.useEffect.call(void 0, () => setText(hex), [hex]);
+    const panel = _react.useRef.call(void 0, null);
+    const update = (next) => {
+      setHsv(next);
+      const nextHex = hsvToHex(next);
+      if (nextHex === hex) return;
+      if (!isControlled) setSelfHex(nextHex);
+      if (onChange) onChange(nextHex);
+    };
+    const pick = (event) => {
+      var _a;
+      const rect = (_a = panel.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!rect || !rect.width || !rect.height) return;
+      update({
+        h: hsv.h,
+        s: clamp((event.clientX - rect.left) / rect.width),
+        v: 1 - clamp((event.clientY - rect.top) / rect.height)
+      });
+    };
+    const pointerDown = (event) => {
+      var _a, _b;
+      if (disabled) return;
+      (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+      pick(event);
+    };
+    const pointerMove = (event) => {
+      var _a, _b;
+      if ((_b = (_a = event.currentTarget).hasPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId)) pick(event);
+    };
+    const keyDown = (event) => {
+      const step = event.shiftKey ? 0.1 : 0.01;
+      const moves = {
+        ArrowLeft: { s: clamp(hsv.s - step) },
+        ArrowRight: { s: clamp(hsv.s + step) },
+        ArrowUp: { v: clamp(hsv.v + step) },
+        ArrowDown: { v: clamp(hsv.v - step) }
+      };
+      if (disabled || !moves[event.key]) return;
+      event.preventDefault();
+      update({ ...hsv, ...moves[event.key] });
+    };
+    const textChange = (event) => {
+      setText(event.target.value);
+      if (/^#?[0-9a-f]{6}$/i.test(event.target.value.trim())) {
+        update(hexToHsv(event.target.value));
+      }
+    };
+    const textBlur = () => {
+      const typed = normalizeHex(text);
+      if (typed) update(hexToHsv(typed));
+      setText(hex);
+    };
+    const pickerStyle = {
+      width: SCALES.width(1, "15em"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      fontSize: SCALES.font(0.875),
+      "--picker-border": theme.palette.border,
+      "--picker-radius": theme.layout.radius,
+      "--picker-color": theme.palette.foreground,
+      "--picker-bg": theme.palette.background,
+      "--picker-focus": theme.palette.primary,
+      "--picker-hover-border": theme.palette.accents_4,
+      "--picker-swatch-ring": theme.palette.foreground,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-disabled": disabled || void 0,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, ColorPicker_module_css_default.picker, className, {
+          [ColorPicker_module_css_default.disabled]: disabled
+        }),
+        ...props,
+        style: pickerStyle,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              ref: panel,
+              className: ColorPicker_module_css_default.panel,
+              style: {
+                backgroundColor: hsvToHex({ h: hsv.h, s: 1, v: 1 })
+              },
+              onPointerDown: pointerDown,
+              onPointerMove: pointerMove,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "div",
+                {
+                  role: "slider",
+                  tabIndex: disabled ? -1 : 0,
+                  "aria-label": panelLabel,
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuenow": percent(hsv.s),
+                  "aria-valuetext": `${percent(hsv.s)}% saturation, ${percent(hsv.v)}% brightness`,
+                  "aria-disabled": disabled || void 0,
+                  className: ColorPicker_module_css_default.thumb,
+                  style: {
+                    left: `${hsv.s * 100}%`,
+                    top: `${(1 - hsv.v) * 100}%`,
+                    backgroundColor: hex
+                  },
+                  onKeyDown: keyDown
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 360,
+              step: 1,
+              value: Math.round(hsv.h),
+              disabled,
+              "aria-label": hueLabel,
+              className: ColorPicker_module_css_default.hue,
+              onChange: (event) => update({ ...hsv, h: Number(event.target.value) })
+            }
+          ),
+          hexInput && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: ColorPicker_module_css_default.field, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "span",
+              {
+                className: ColorPicker_module_css_default.preview,
+                style: { backgroundColor: hex },
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "input",
+              {
+                type: "text",
+                value: text,
+                disabled,
+                spellCheck: false,
+                autoComplete: "off",
+                "aria-label": hexLabel,
+                className: ColorPicker_module_css_default.hex,
+                onChange: textChange,
+                onBlur: textBlur
+              }
+            )
+          ] }),
+          swatches && swatches.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ColorPicker_module_css_default.swatches, children: swatches.map((swatch) => {
+            const color = normalizeHex(swatch);
+            if (!color) return null;
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                disabled,
+                "aria-label": color,
+                "aria-pressed": color === hex,
+                className: _chunk5KUROAEPjs.joinClasses.call(void 0, ColorPicker_module_css_default.swatch, {
+                  [ColorPicker_module_css_default.active]: color === hex
+                }),
+                style: { backgroundColor: color },
+                onClick: () => update(hexToHsv(color))
+              },
+              color
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+ColorPickerComponent.displayName = "BolioUIColorPicker";
+var ColorPicker = _chunkMAICNLTYjs.with_scale_default.call(void 0, ColorPickerComponent);
+var ColorPicker_default = ColorPicker;
+
+// core/ColorPicker/index.ts
+var ColorPicker_default2 = ColorPicker_default;
+
+
+
+
+exports.normalizeHex = normalizeHex; exports.ColorPicker_default = ColorPicker_default2;