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

package/dist/chunk-GYFW5NLU.js

@@ -0,0 +1,257 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
+
+
+
+
+
+var _chunkP245HSVBjs = require('./chunk-P245HSVB.js');
+
+
+var _chunkDGXZP4VJjs = require('./chunk-DGXZP4VJ.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/DateRangePicker/DateRangePicker.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/DateRangePicker/DateRangePicker.module.css.bolio-css-module-source
+var DateRangePicker_module_css_default = { "daterange": "DateRangePicker-module_daterange__id9HF", "field": "DateRangePicker-module_field__4UZhH", "input": "DateRangePicker-module_input__h9sDj", "separator": "DateRangePicker-module_separator__StR3E", "toggle": "DateRangePicker-module_toggle__gNukh", "popup": "DateRangePicker-module_popup__hKExw" };
+
+// core/DateRangePicker/DateRangePicker.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var emptyRange = [null, null];
+var format = (date) => date ? _chunkP245HSVBjs.toISO.call(void 0, date) : "";
+var DateRangePickerComponent = _react2.default.forwardRef(
+  ({
+    value: customValue,
+    initialValue = emptyRange,
+    onChange,
+    min,
+    max,
+    locale,
+    weekStartsOn,
+    startPlaceholder = "YYYY-MM-DD",
+    endPlaceholder = "YYYY-MM-DD",
+    startLabel = "Start date",
+    endLabel = "End date",
+    calendarLabel = "Choose dates",
+    disabled = false,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const colors = _chunkKBZEYKCZjs.getColors.call(void 0, theme.palette, type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    });
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = _react.useState.call(void 0, initialValue);
+    const range = isControlled ? customValue : selfValue;
+    const [start, end] = range;
+    const startText = format(start);
+    const endText = format(end);
+    const [texts, setTexts] = _react.useState.call(void 0, { start: startText, end: endText });
+    const [open, setOpen] = _react.useState.call(void 0, false);
+    _react.useEffect.call(void 0, () => {
+      setTexts({ start: startText, end: endText });
+    }, [startText, endText]);
+    const rootRef = _react.useRef.call(void 0, null);
+    const endRef = _react.useRef.call(void 0, null);
+    const buttonRef = _react.useRef.call(void 0, null);
+    _chunkDGXZP4VJjs.use_click_away_default.call(void 0, rootRef, () => setOpen(false));
+    const isInBounds = (date) => !(min && date < _chunkP245HSVBjs.startOfDay.call(void 0, min) || max && date > _chunkP245HSVBjs.startOfDay.call(void 0, max));
+    const commit = (next) => {
+      if (!isControlled) setSelfValue(next);
+      if (onChange) onChange(next);
+    };
+    const inputHandler = (edge) => (event) => {
+      const next = event.target.value;
+      setTexts((last) => ({ ...last, [edge]: next }));
+      const other = edge === "start" ? end : start;
+      if (next === "") {
+        return commit(edge === "start" ? [null, other] : [other, null]);
+      }
+      const date = _chunkP245HSVBjs.fromISO.call(void 0, next);
+      if (!date || !isInBounds(date)) return;
+      if (other && (edge === "start" ? date > other : date < other)) return;
+      commit(edge === "start" ? [date, other] : [other, date]);
+    };
+    const blurHandler = () => setTexts({ start: startText, end: endText });
+    const pick = (next) => {
+      var _a;
+      commit(next);
+      if (!next[1]) return;
+      setOpen(false);
+      (_a = endRef.current) == null ? void 0 : _a.focus();
+    };
+    const keyDownHandler = (event) => {
+      var _a;
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      setOpen(false);
+      (_a = buttonRef.current) == null ? void 0 : _a.focus();
+    };
+    const rangeStyle = {
+      "--daterange-font-size": SCALES.font(0.875),
+      "--daterange-input-height": SCALES.height(2.25),
+      "--daterange-width": SCALES.width(1, "initial"),
+      "--daterange-height": SCALES.height(1, "auto"),
+      "--daterange-padding-top": SCALES.pt(0),
+      "--daterange-padding-right": SCALES.pr(0),
+      "--daterange-padding-bottom": SCALES.pb(0),
+      "--daterange-padding-left": SCALES.pl(0),
+      "--daterange-margin-top": SCALES.mt(0),
+      "--daterange-margin-right": SCALES.mr(0),
+      "--daterange-margin-bottom": SCALES.mb(0),
+      "--daterange-margin-left": SCALES.ml(0),
+      "--daterange-bg": theme.palette.background,
+      "--daterange-border-color": theme.palette.border,
+      "--daterange-radius": rounded ? "25px" : theme.layout.radius,
+      "--daterange-popup-radius": theme.layout.radius,
+      "--daterange-field-color": colors.color,
+      "--daterange-field-bg": colors.bgColor,
+      "--daterange-field-border": colors.borderColor,
+      "--daterange-field-hover-bg": colors.hoverBgColor,
+      "--daterange-field-hover-border": colors.hoverBorder,
+      "--daterange-focus-border-color": colors.focusBorder,
+      "--daterange-placeholder-color": colors.placeholderColor,
+      "--daterange-separator-color": colors.iconColor,
+      "--daterange-toggle-color": colors.iconColor,
+      "--daterange-toggle-hover-color": colors.color,
+      "--daterange-shadow": theme.expressiveness.shadowMedium,
+      ...style
+    };
+    const inputProps = {
+      type: "text",
+      autoComplete: "off",
+      inputMode: "numeric",
+      disabled,
+      onBlur: blurHandler,
+      className: DateRangePicker_module_css_default.input
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref: (node) => {
+          rootRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, DateRangePicker_module_css_default.daterange, className),
+        style: rangeStyle,
+        role: "group",
+        ...props,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: DateRangePicker_module_css_default.field, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "input",
+              {
+                ...inputProps,
+                value: texts.start,
+                placeholder: startPlaceholder,
+                "aria-label": startLabel,
+                onChange: inputHandler("start")
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: DateRangePicker_module_css_default.separator, "aria-hidden": "true", children: "\u2013" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "input",
+              {
+                ...inputProps,
+                ref: endRef,
+                value: texts.end,
+                placeholder: endPlaceholder,
+                "aria-label": endLabel,
+                onChange: inputHandler("end")
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                ref: buttonRef,
+                type: "button",
+                className: DateRangePicker_module_css_default.toggle,
+                "aria-label": calendarLabel,
+                "aria-haspopup": "dialog",
+                "aria-expanded": open,
+                disabled,
+                onClick: () => setOpen((last) => !last),
+                children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "1.25em",
+                    height: "1.25em",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M16 2v4M8 2v4M3 10h18" })
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          open && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              role: "dialog",
+              "aria-label": calendarLabel,
+              className: DateRangePicker_module_css_default.popup,
+              onKeyDown: keyDownHandler,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkP245HSVBjs.Calendar_default,
+                {
+                  mode: "range",
+                  numberOfMonths: 2,
+                  autoFocus: true,
+                  value: range,
+                  min,
+                  max,
+                  locale,
+                  weekStartsOn,
+                  onChange: pick
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DateRangePickerComponent.displayName = "BolioUIDateRangePicker";
+var DateRangePicker = _chunkMAICNLTYjs.with_scale_default.call(void 0, DateRangePickerComponent);
+var DateRangePicker_default = DateRangePicker;
+
+// core/DateRangePicker/index.ts
+var DateRangePicker_default2 = DateRangePicker_default;
+
+
+
+exports.DateRangePicker_default = DateRangePicker_default2;

package/dist/chunk-IJGIEX5J.js

@@ -0,0 +1,211 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkOKZRHSSGjs = require('./chunk-OKZRHSSG.js');
+
+
+var _chunkUOGCO6CVjs = require('./chunk-UOGCO6CV.js');
+
+
+var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
+
+
+var _chunkDGXZP4VJjs = require('./chunk-DGXZP4VJ.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/ColorInput/ColorInput.tsx
+
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/ColorInput/ColorInput.module.css.bolio-css-module-source
+var ColorInput_module_css_default = { "colorinput": "ColorInput-module_colorinput__nYel-", "field": "ColorInput-module_field__JQwJJ", "swatch": "ColorInput-module_swatch__sLvyf", "input": "ColorInput-module_input__ExawP", "popup": "ColorInput-module_popup__p91ry" };
+
+// core/ColorInput/ColorInput.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var ColorInputComponent = _react2.default.forwardRef(
+  ({
+    value: customValue,
+    initialValue = "#000000",
+    onChange,
+    swatches,
+    placeholder = "#000000",
+    disabled = false,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    pickerLabel = "Choose color",
+    className = "",
+    children,
+    onBlur,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const generatedId = _react.useId.call(void 0, );
+    const inputId = props.id || generatedId;
+    const colors = _chunkKBZEYKCZjs.getColors.call(void 0, theme.palette, type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    });
+    const isControlled = customValue !== void 0;
+    const [selfHex, setSelfHex] = _react.useState.call(void 0, 
+      _chunkOKZRHSSGjs.normalizeHex.call(void 0, initialValue) || "#000000"
+    );
+    const hex = (isControlled ? _chunkOKZRHSSGjs.normalizeHex.call(void 0, customValue) : selfHex) || "#000000";
+    const [text, setText] = _react.useState.call(void 0, hex);
+    const [open, setOpen] = _react.useState.call(void 0, false);
+    _react.useEffect.call(void 0, () => setText(hex), [hex]);
+    const rootRef = _react.useRef.call(void 0, null);
+    const inputRef = _react.useRef.call(void 0, null);
+    const buttonRef = _react.useRef.call(void 0, null);
+    const popupRef = _react.useRef.call(void 0, null);
+    _react.useImperativeHandle.call(void 0, ref, () => inputRef.current);
+    _chunkDGXZP4VJjs.use_click_away_default.call(void 0, rootRef, () => setOpen(false));
+    _react.useEffect.call(void 0, () => {
+      var _a, _b;
+      if (open)
+        (_b = (_a = popupRef.current) == null ? void 0 : _a.querySelector('[role="slider"]')) == null ? void 0 : _b.focus();
+    }, [open]);
+    const commit = (next) => {
+      if (next === hex) return;
+      if (!isControlled) setSelfHex(next);
+      if (onChange) onChange(next);
+    };
+    const changeHandler = (event) => {
+      setText(event.target.value);
+      const typed = /^#?[0-9a-f]{6}$/i.test(event.target.value.trim()) ? _chunkOKZRHSSGjs.normalizeHex.call(void 0, event.target.value) : null;
+      if (typed) commit(typed);
+    };
+    const blurHandler = (event) => {
+      if (onBlur) onBlur(event);
+      const typed = _chunkOKZRHSSGjs.normalizeHex.call(void 0, text);
+      if (typed) commit(typed);
+      setText(hex);
+    };
+    const keyDownHandler = (event) => {
+      var _a;
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      setOpen(false);
+      (_a = buttonRef.current) == null ? void 0 : _a.focus();
+    };
+    const colorInputStyle = {
+      "--colorinput-height": SCALES.height(2.25),
+      "--colorinput-width": SCALES.width(1, "initial"),
+      "--colorinput-font-size": SCALES.font(0.875),
+      "--colorinput-margin": `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      "--colorinput-border": colors.borderColor,
+      "--colorinput-radius": rounded ? "25px" : theme.layout.radius,
+      "--colorinput-popup-radius": theme.layout.radius,
+      "--colorinput-bg": colors.bgColor,
+      "--colorinput-hover-border": colors.hoverBorder,
+      "--colorinput-hover-bg": colors.hoverBgColor,
+      "--colorinput-focus-border": colors.focusBorder,
+      "--colorinput-placeholder": colors.placeholderColor,
+      "--colorinput-color": colors.color,
+      "--colorinput-popup-bg": theme.palette.background,
+      "--colorinput-popup-border": theme.palette.border,
+      "--colorinput-shadow": theme.expressiveness.shadowMedium
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref: rootRef,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, ColorInput_module_css_default.colorinput, className),
+        style: colorInputStyle,
+        children: [
+          children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUOGCO6CVjs.InputBlockLabel_default, { htmlFor: inputId, children }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
+            {
+              className: _chunk5KUROAEPjs.use_classes_default.call(void 0, ColorInput_module_css_default.field, {
+                [ColorInput_module_css_default.disabled]: disabled
+              }),
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "button",
+                  {
+                    ref: buttonRef,
+                    type: "button",
+                    className: ColorInput_module_css_default.swatch,
+                    style: { backgroundColor: hex },
+                    "aria-label": pickerLabel,
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": open,
+                    disabled,
+                    onClick: () => setOpen((last) => !last)
+                  }
+                ),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    autoComplete: "off",
+                    spellCheck: false,
+                    value: text,
+                    placeholder,
+                    disabled,
+                    onChange: changeHandler,
+                    onBlur: blurHandler,
+                    className: ColorInput_module_css_default.input,
+                    ...props,
+                    id: inputId
+                  }
+                )
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              ref: popupRef,
+              role: "dialog",
+              "aria-label": pickerLabel,
+              className: ColorInput_module_css_default.popup,
+              onKeyDown: keyDownHandler,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkOKZRHSSGjs.ColorPicker_default,
+                {
+                  value: hex,
+                  onChange: commit,
+                  swatches,
+                  hexInput: false
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ColorInputComponent.displayName = "BolioUIColorInput";
+var ColorInput = _chunkMAICNLTYjs.with_scale_default.call(void 0, ColorInputComponent);
+var ColorInput_default = ColorInput;
+
+// core/ColorInput/index.ts
+var ColorInput_default2 = ColorInput_default;
+
+
+
+exports.ColorInput_default = ColorInput_default2;