@bolio-ui/core 2.0.0-alpha.1 → 2.0.0-alpha.2

package/esm/chunk-PGK3BYA2.js

@@ -0,0 +1,60 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Skeleton/Skeleton.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SkeletonComponent = React.forwardRef(({
+  lines = 1,
+  circle = false,
+  loading = true,
+  className = "",
+  children,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const hasChildren = children !== void 0 && children !== null;
+  const classes = use_classes_default("skeleton", {
+    circle
+  }, className);
+  if (hasChildren && !loading) return /* @__PURE__ */ jsx(Fragment, { children });
+  const width = SCALES.width(1, circle ? "2.5em" : "100%");
+  const height = SCALES.height(1, circle ? width : "1em");
+  const count = circle ? 1 : Math.max(1, Math.floor(lines));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "aria-busy": hasChildren || void 0,
+      "aria-hidden": hasChildren ? void 0 : true,
+      ...props,
+      className: _JSXStyle.dynamic([["434200294", [width, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), height, theme.layout.radius, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2]]]) + " " + (props && props.className != null && props.className || classes || ""),
+      children: [
+        [...Array(count)].map((_, index) => /* @__PURE__ */ jsx("span", { "aria-hidden": hasChildren || void 0, className: _JSXStyle.dynamic([["434200294", [width, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), height, theme.layout.radius, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2]]]) + " shape" }, index)),
+        /* @__PURE__ */ jsx(_JSXStyle, { id: "434200294", dynamic: [width, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), height, theme.layout.radius, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2], children: `.skeleton.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.5em;box-sizing:border-box;width:${width};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.shape.__jsx-style-dynamic-selector{display:block;width:100%;height:${height};border-radius:${theme.layout.radius};background:linear-gradient( 90deg, ${theme.palette.accents_1} 25%, ${theme.palette.accents_2} 37%, ${theme.palette.accents_1} 63% );background-size:400% 100%;-webkit-animation:shimmer-__jsx-style-dynamic-selector 1.4s ease infinite;animation:shimmer-__jsx-style-dynamic-selector 1.4s ease infinite;}.shape.__jsx-style-dynamic-selector:last-child.__jsx-style-dynamic-selector:not(:first-child){width:60%;}.circle.__jsx-style-dynamic-selector .shape.__jsx-style-dynamic-selector{border-radius:50%;}@-webkit-keyframes shimmer-__jsx-style-dynamic-selector{from{background-position:100% 50%;}to{background-position:0 50%;}}@keyframes shimmer-__jsx-style-dynamic-selector{from{background-position:100% 50%;}to{background-position:0 50%;}}@media (prefers-reduced-motion:reduce){.shape.__jsx-style-dynamic-selector{-webkit-animation:none;animation:none;background:${theme.palette.accents_2};}}` })
+      ]
+    }
+  );
+});
+SkeletonComponent.displayName = "BolioUISkeleton";
+var Skeleton = with_scale_default(SkeletonComponent);
+var Skeleton_default = Skeleton;
+
+// core/Skeleton/index.ts
+var Skeleton_default2 = Skeleton_default;
+
+export {
+  Skeleton_default2 as Skeleton_default
+};

package/esm/chunk-PHKAYQE4.js

@@ -0,0 +1,42 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Description/Description.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DescriptionComponent = React.forwardRef(({
+  title = "Title",
+  content = "",
+  className = "",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const classes = use_classes_default("description", className);
+  return /* @__PURE__ */ jsxs("dl", { ref, ...props, className: _JSXStyle.dynamic([["2223883812", [SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    /* @__PURE__ */ jsx("dt", { className: _JSXStyle.dynamic([["2223883812", [SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground]]]), children: title }),
+    /* @__PURE__ */ jsx("dd", { className: _JSXStyle.dynamic([["2223883812", [SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground]]]), children: content }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "2223883812", dynamic: [SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground], children: `.description.__jsx-style-dynamic-selector{font-size:${SCALES.font(1)};width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}dt.__jsx-style-dynamic-selector{font-size:0.75em;line-height:1em;margin-bottom:0.5em;text-transform:uppercase;white-space:nowrap;color:${theme.palette.accents_5};font-weight:500;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}dd.__jsx-style-dynamic-selector{font-size:0.875em;margin:0;line-height:1.1em;color:${theme.palette.foreground};font-weight:500;}dd.__jsx-style-dynamic-selector p,dt.__jsx-style-dynamic-selector p{margin:0;}` })
+  ] });
+});
+DescriptionComponent.displayName = "BolioUIDescription";
+var Description = with_scale_default(DescriptionComponent);
+var Description_default = Description;
+
+// core/Description/index.ts
+var Description_default2 = Description_default;
+
+export {
+  Description_default2 as Description_default
+};

package/esm/chunk-PJH7CP77.js

@@ -0,0 +1,27 @@
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+
+// core/Input/InputBlockLabel.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function InputBlockLabelComponent({
+  children,
+  error,
+  id,
+  htmlFor
+}) {
+  const theme = use_theme_default();
+  return /* @__PURE__ */ jsxs("label", { id, htmlFor, className: _JSXStyle.dynamic([["3520806922", [error ? theme.palette.error : theme.palette.accents_6, error ? 0 : "0.5em", error ? "0.2em" : 0, error ? "0.775rem" : "1em"]]]), children: [
+    children,
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "3520806922", dynamic: [error ? theme.palette.error : theme.palette.accents_6, error ? 0 : "0.5em", error ? "0.2em" : 0, error ? "0.775rem" : "1em"], children: `label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:${error ? theme.palette.error : theme.palette.accents_6};padding:0 0 0 1px;margin-bottom:${error ? 0 : "0.5em"};margin-top:${error ? "0.2em" : 0};font-size:${error ? "0.775rem" : "1em"};line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}` })
+  ] });
+}
+InputBlockLabelComponent.displayName = "BolioUIInputBlockLabel";
+var InputBlockLabel = React.memo(InputBlockLabelComponent);
+var InputBlockLabel_default = InputBlockLabel;
+
+export {
+  InputBlockLabel_default
+};

package/esm/chunk-QMV4ULSR.js

@@ -0,0 +1,124 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Avatar/Avatar.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import React2, { useEffect, useRef, useState } from "react";
+
+// core/Avatar/AvatarSkeleton.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var AvatarSkeleton = React.memo(({
+  opacity = 0.5,
+  ...props
+}) => {
+  const theme = use_theme_default();
+  return /* @__PURE__ */ jsx("div", { ...props, className: _JSXStyle.dynamic([["2946022605", [theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_1, opacity]]]) + " " + (props && props.className != null && props.className || "skeleton"), children: /* @__PURE__ */ jsx(_JSXStyle, { id: "2946022605", dynamic: [theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_1, opacity], children: `.skeleton.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-image:linear-gradient( 270deg, ${theme.palette.accents_1}, ${theme.palette.accents_2}, ${theme.palette.accents_2}, ${theme.palette.accents_1} );background-size:400% 100%;-webkit-animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;opacity:${opacity};-webkit-transition:opacity 300ms ease-out;transition:opacity 300ms ease-out;}@-webkit-keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}@keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}` }) });
+});
+AvatarSkeleton.displayName = "BolioUIAvatarSkeleton";
+var AvatarSkeleton_default = AvatarSkeleton;
+
+// core/Avatar/Avatar.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var safeText = (text) => {
+  if (text.length <= 4) return text;
+  return text.slice(0, 3);
+};
+var AvatarComponent = React2.forwardRef(({
+  src,
+  stacked = false,
+  text = "",
+  isSquare = false,
+  className = "",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES,
+    getScaleProps
+  } = use_scale_default();
+  const showText = !src;
+  const radius = isSquare ? theme.layout.radius : "50%";
+  const marginLeft = stacked ? SCALES.ml(-0.625) : SCALES.ml(0);
+  const classes = use_classes_default("avatar", className);
+  const width = getScaleProps(["width", "w"]);
+  const height = getScaleProps(["height", "h"]);
+  const showAnimation = width && height;
+  const [loading, setLoading] = useState(true);
+  const [showSkeleton, setShowSkeleton] = useState(true);
+  const imageRef = useRef(null);
+  const imageLoaded = () => {
+    if (!showAnimation) return;
+    setLoading(false);
+  };
+  useEffect(() => {
+    if (!showAnimation) return;
+    if (!imageRef.current) return;
+    if (imageRef.current.complete) {
+      setLoading(false);
+      setShowSkeleton(false);
+    }
+  }, [showAnimation]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (showAnimation) {
+        setShowSkeleton(false);
+      }
+      clearTimeout(timer);
+    }, 3e3);
+    return () => clearTimeout(timer);
+  }, [loading, showAnimation]);
+  return /* @__PURE__ */ jsxs("span", { ref, className: _JSXStyle2.dynamic([["2602621947", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || ""), children: [
+    !showText && /* @__PURE__ */ jsxs(Fragment, { children: [
+      showSkeleton && showAnimation && /* @__PURE__ */ jsx2(AvatarSkeleton_default, { opacity: loading ? 1 : 0 }),
+      /* @__PURE__ */ jsx2("img", { alt: "Avatar", src, ref: imageRef, onLoad: imageLoaded, draggable: false, ...props, className: _JSXStyle2.dynamic([["2602621947", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img") })
+    ] }),
+    showText && /* @__PURE__ */ jsx2("span", { ...props, className: _JSXStyle2.dynamic([["2602621947", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text"), children: safeText(text) }),
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "2602621947", dynamic: [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)], children: `.avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:${radius};vertical-align:top;background-color:${theme.palette.accents_2};box-sizing:border-box;width:${SCALES.width(1.75) || SCALES.height(1.75)};height:${SCALES.height(1.75) || SCALES.width(1.75)};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${marginLeft};}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:${radius};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:${SCALES.font(1)};font-weight:bold;text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-transform:none;}` })
+  ] });
+});
+AvatarComponent.displayName = "BolioUIAvatar";
+var Avatar = with_scale_default(AvatarComponent);
+var Avatar_default = Avatar;
+
+// core/Avatar/AvatarGroup.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function AvatarGroupComponent({
+  count,
+  className = "",
+  children
+}) {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  return /* @__PURE__ */ jsxs2("div", { className: _JSXStyle3.dynamic([["441769479", [SCALES.width(1, "max-content"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.ml(0.625), SCALES.font(0.875), theme.palette.accents_7]]]) + " " + (use_classes_default("avatar-group", className) || ""), children: [
+    children,
+    count && /* @__PURE__ */ jsxs2("span", { className: _JSXStyle3.dynamic([["441769479", [SCALES.width(1, "max-content"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.ml(0.625), SCALES.font(0.875), theme.palette.accents_7]]]) + " count", children: [
+      "+",
+      count
+    ] }),
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "441769479", dynamic: [SCALES.width(1, "max-content"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.ml(0.625), SCALES.font(0.875), theme.palette.accents_7], children: `.avatar-group.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:${SCALES.width(1, "max-content")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.avatar-group.__jsx-style-dynamic-selector .avatar{margin-left:-${SCALES.ml(0.625)};}.count.__jsx-style-dynamic-selector{font-size:${SCALES.font(0.875)};display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:5.5px;color:${theme.palette.accents_7};}` })
+  ] });
+}
+AvatarGroupComponent.displayName = "BolioUIAvatarGroup";
+var AvatarGroup = with_scale_default(AvatarGroupComponent);
+var AvatarGroup_default = AvatarGroup;
+
+// core/Avatar/index.ts
+Avatar_default.Group = AvatarGroup_default;
+var Avatar_default2 = Avatar_default;
+
+export {
+  Avatar_default2 as Avatar_default
+};

package/esm/chunk-QUMM6MGX.js

@@ -0,0 +1,10 @@
+import {
+  Themes_default
+} from "./chunk-VCTKX4AS.js";
+
+// core/Themes/index.ts
+var Themes_default2 = Themes_default;
+
+export {
+  Themes_default2 as Themes_default
+};

package/esm/chunk-RF5ZQ37O.js

@@ -0,0 +1,66 @@
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+
+// core/use-media-query/use-media-query.ts
+import { useEffect, useMemo, useState } from "react";
+var defaultResponsiveOptions = {
+  match: "default"
+};
+var makeQueries = (bp, up, down) => {
+  const queryString = (item) => {
+    const upQuery = `(min-width: ${item.min})`;
+    const downQuery = `(max-width: ${item.max})`;
+    return up ? upQuery : down ? downQuery : `${upQuery} and ${downQuery}`;
+  };
+  const xs = queryString(bp.xs);
+  return {
+    xs,
+    mobile: xs,
+    sm: queryString(bp.sm),
+    md: queryString(bp.md),
+    lg: queryString(bp.lg),
+    xl: queryString(bp.xl)
+  };
+};
+var useMediaQuery = (breakpoint, options = defaultResponsiveOptions) => {
+  const { match: matchType = "default", ssrMatchMedia = null } = options;
+  const supportMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
+  const theme = use_theme_default();
+  const mediaQueries = useMemo(() => {
+    const up = matchType === "up";
+    const down = matchType === "down";
+    return makeQueries(theme.breakpoints, up, down);
+  }, [matchType, theme.breakpoints]);
+  const query = useMemo(
+    () => mediaQueries[breakpoint],
+    [mediaQueries, breakpoint]
+  );
+  const matchQuery = (q) => window.matchMedia(q);
+  const [state, setState] = useState(() => {
+    if (supportMedia) return matchQuery(query).matches;
+    if (ssrMatchMedia && typeof ssrMatchMedia === "function") {
+      return ssrMatchMedia(query).matches;
+    }
+    return false;
+  });
+  useEffect(() => {
+    if (!supportMedia) return;
+    const queryList = matchQuery(query);
+    const update = () => setState(matchQuery(query).matches);
+    update();
+    queryList.addListener(update);
+    return () => {
+      queryList.removeListener(update);
+    };
+  }, [query, supportMedia]);
+  return state;
+};
+var use_media_query_default = useMediaQuery;
+
+// core/use-media-query/index.ts
+var use_media_query_default2 = use_media_query_default;
+
+export {
+  use_media_query_default2 as use_media_query_default
+};

package/esm/chunk-RSHEENJP.js

@@ -0,0 +1,156 @@
+import {
+  InputBlockLabel_default
+} from "./chunk-PJH7CP77.js";
+import {
+  getColors
+} from "./chunk-IWMGNPNV.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/NumberInput/NumberInput.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var decimalsOf = (num) => {
+  const [, decimals = ""] = String(num).split(".");
+  return decimals.length;
+};
+var PARTIAL_NUMBER = /^-?\d*([.,]\d*)?$/;
+var parse = (text) => {
+  const normalized = text.replace(",", ".");
+  if (normalized === "" || normalized === "-" || normalized === ".") return null;
+  const num = Number(normalized);
+  return Number.isNaN(num) ? null : num;
+};
+var NumberInputComponent = React.forwardRef(({
+  value: customValue,
+  initialValue = null,
+  onChange,
+  min,
+  max,
+  step = 1,
+  precision,
+  type = "default",
+  disabled = false,
+  readOnly = false,
+  hideControls = false,
+  error = false,
+  errorMessage,
+  className = "",
+  children,
+  onKeyDown,
+  onBlur,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const generatedId = useId();
+  const inputId = props.id || generatedId;
+  const errorId = `${inputId}-error`;
+  const describedBy = [props["aria-describedby"], error && errorMessage ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+  const colors = getColors(theme.palette, type, disabled);
+  const places = precision != null ? precision : decimalsOf(step);
+  const isControlled = customValue !== void 0;
+  const [selfValue, setSelfValue] = useState(initialValue);
+  const value = isControlled ? customValue : selfValue;
+  const format = (num) => num === null ? "" : String(num);
+  const [text, setText] = useState(format(value));
+  useEffect(() => {
+    if (parse(text) !== value) setText(format(value));
+  }, [value]);
+  const clamp = (num) => {
+    let next = num;
+    if (max !== void 0) next = Math.min(next, max);
+    if (min !== void 0) next = Math.max(next, min);
+    return Number(next.toFixed(places));
+  };
+  const commit = (next) => {
+    setText(format(next));
+    if (next === value) return;
+    if (!isControlled) setSelfValue(next);
+    onChange == null ? void 0 : onChange(next);
+  };
+  const locked = disabled || readOnly;
+  const increment = (direction, multiplier = 1) => {
+    if (locked) return;
+    commit(clamp((value != null ? value : 0) + direction * step * multiplier));
+  };
+  const changeHandler = (event) => {
+    const next = event.target.value;
+    if (!PARTIAL_NUMBER.test(next)) return;
+    setText(next);
+    const parsed = parse(next);
+    if (parsed === value) return;
+    if (!isControlled) setSelfValue(parsed);
+    onChange == null ? void 0 : onChange(parsed);
+  };
+  const blurHandler = (event) => {
+    onBlur == null ? void 0 : onBlur(event);
+    const parsed = parse(text);
+    commit(parsed === null ? null : clamp(parsed));
+  };
+  const keyDownHandler = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    const actions = {
+      ArrowUp: () => increment(1),
+      ArrowDown: () => increment(-1),
+      PageUp: () => increment(1, 10),
+      PageDown: () => increment(-1, 10),
+      Home: () => min !== void 0 && !locked && commit(min),
+      End: () => max !== void 0 && !locked && commit(max)
+    };
+    const action = actions[event.key];
+    if (!action) return;
+    event.preventDefault();
+    action();
+  };
+  const atMin = min !== void 0 && value !== null && value <= min;
+  const atMax = max !== void 0 && value !== null && value >= max;
+  const control = (direction) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      className: "control",
+      "aria-label": direction === 1 ? "Increase" : "Decrease",
+      "aria-controls": inputId,
+      disabled: disabled || readOnly || (direction === 1 ? atMax : atMin),
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: () => increment(direction),
+      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: direction === 1 ? "M12 5v14M5 12h14" : "M5 12h14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: _JSXStyle.dynamic([["4092123705", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.borderColor, theme.layout.radius, colors.bgColor, colors.hoverBorder, hideControls ? "left" : "center", colors.color, theme.palette.accents_5, theme.palette.foreground, theme.palette.accents_3]]]) + " " + (use_classes_default("with-label", className) || ""), children: [
+    children && /* @__PURE__ */ jsx(InputBlockLabel_default, { htmlFor: inputId, children }),
+    /* @__PURE__ */ jsxs("div", { className: _JSXStyle.dynamic([["4092123705", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.borderColor, theme.layout.radius, colors.bgColor, colors.hoverBorder, hideControls ? "left" : "center", colors.color, theme.palette.accents_5, theme.palette.foreground, theme.palette.accents_3]]]) + " " + (use_classes_default("number-input", {
+      disabled
+    }) || ""), children: [
+      !hideControls && control(-1),
+      /* @__PURE__ */ jsx("input", { ref, type: "text", role: "spinbutton", inputMode: places > 0 ? "decimal" : "numeric", autoComplete: "off", value: text, disabled, readOnly, onChange: changeHandler, onKeyDown: keyDownHandler, onBlur: blurHandler, ...props, id: inputId, "aria-valuenow": value != null ? value : void 0, "aria-valuemin": min, "aria-valuemax": max, "aria-invalid": error || void 0, "aria-describedby": describedBy, className: _JSXStyle.dynamic([["4092123705", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.borderColor, theme.layout.radius, colors.bgColor, colors.hoverBorder, hideControls ? "left" : "center", colors.color, theme.palette.accents_5, theme.palette.foreground, theme.palette.accents_3]]]) + " " + (props && props.className != null && props.className || "") }),
+      !hideControls && control(1)
+    ] }),
+    error && /* @__PURE__ */ jsx(InputBlockLabel_default, { error, id: errorId, children: errorMessage }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "4092123705", dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.borderColor, theme.layout.radius, colors.bgColor, colors.hoverBorder, hideControls ? "left" : "center", colors.color, theme.palette.accents_5, theme.palette.foreground, theme.palette.accents_3], children: `.with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;--input-height:${SCALES.height(2.25)};font-size:${SCALES.font(0.875)};width:${SCALES.width(1, "initial")};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.number-input.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;height:var(--input-height);border:1px solid ${colors.borderColor};border-radius:${theme.layout.radius};background:${colors.bgColor};-webkit-transition:border 0.2s ease;transition:border 0.2s ease;}.number-input.__jsx-style-dynamic-selector:hover,.number-input.__jsx-style-dynamic-selector:focus-within{border-color:${colors.hoverBorder};}.number-input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;width:100%;min-width:4em;margin:0 0.625em;padding:0;font:inherit;text-align:${hideControls ? "left" : "center"};color:${colors.color};background:transparent;border:none;outline:none;}input.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}.control.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:calc(var(--input-height) - 2px);height:100%;margin:0;padding:0;font:inherit;color:${theme.palette.accents_5};background:none;border:0;cursor:pointer;}.control.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector:not(:disabled){color:${theme.palette.foreground};}.control.__jsx-style-dynamic-selector:disabled{color:${theme.palette.accents_3};cursor:not-allowed;}` })
+  ] });
+});
+NumberInputComponent.displayName = "BolioUINumberInput";
+var NumberInput = with_scale_default(NumberInputComponent);
+var NumberInput_default = NumberInput;
+
+// core/NumberInput/index.ts
+var NumberInput_default2 = NumberInput_default;
+
+export {
+  NumberInput_default2 as NumberInput_default
+};

package/esm/chunk-RZBEZ26A.js

@@ -0,0 +1,38 @@
+// core/utils/color.ts
+var hexToRgb = (color) => {
+  const fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  const full = color.replace(
+    fullReg,
+    (_, r, g, b) => `${r}${r}${g}${g}${b}${b}`
+  );
+  const values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
+  if (!values) {
+    throw new Error(`Bolio UI: Unsupported ${color} color.`);
+  }
+  return [
+    Number.parseInt(values[1], 16),
+    Number.parseInt(values[2], 16),
+    Number.parseInt(values[3], 16)
+  ];
+};
+var colorToRgbValues = (color) => {
+  if (color.charAt(0) === "#") return hexToRgb(color);
+  const safeColor = color.replace(/ /g, "");
+  const colorType = color.substr(0, 4);
+  const regArray = safeColor.match(/\((.+)\)/);
+  if (!colorType.startsWith("rgb") || !regArray) {
+    console.log(color);
+    throw new Error(`Bolio UI: Only support ["RGB", "RGBA", "HEX"] color.`);
+  }
+  return regArray[1].split(",").map((str) => Number.parseFloat(str));
+};
+var addColorAlpha = (color, alpha) => {
+  if (!/^#|rgb|RGB/.test(color)) return color;
+  const [r, g, b] = colorToRgbValues(color);
+  const safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
+  return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`;
+};
+
+export {
+  addColorAlpha
+};