@beaubrain/web-design-system 0.1.0 → 0.1.2

package/dist/index.js

@@ -0,0 +1,698 @@
+import { jsx as c, jsxs as z, Fragment as F } from "react/jsx-runtime";
+import * as g from "react";
+import p from "react";
+function H(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var x = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+var E;
+function k() {
+  return E || (E = 1, (function(e) {
+    (function() {
+      var t = {}.hasOwnProperty;
+      function n() {
+        for (var s = "", o = 0; o < arguments.length; o++) {
+          var l = arguments[o];
+          l && (s = r(s, a(l)));
+        }
+        return s;
+      }
+      function a(s) {
+        if (typeof s == "string" || typeof s == "number")
+          return s;
+        if (typeof s != "object")
+          return "";
+        if (Array.isArray(s))
+          return n.apply(null, s);
+        if (s.toString !== Object.prototype.toString && !s.toString.toString().includes("[native code]"))
+          return s.toString();
+        var o = "";
+        for (var l in s)
+          t.call(s, l) && s[l] && (o = r(o, l));
+        return o;
+      }
+      function r(s, o) {
+        return o ? s ? s + " " + o : s + o : s;
+      }
+      e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
+    })();
+  })(x)), x.exports;
+}
+var L = k();
+const f = /* @__PURE__ */ H(L), Y = (e, t) => {
+  const n = { ...t };
+  for (const a in t) {
+    const r = e[a], s = t[a];
+    /^on[A-Z]/.test(a) ? r && s ? n[a] = (...l) => {
+      const i = s(...l);
+      return r(...l), i;
+    } : r && (n[a] = r) : a === "style" ? n[a] = { ...r, ...s } : a === "className" && (n[a] = [r, s].filter(Boolean).join(" "));
+  }
+  return { ...e, ...n };
+}, j = (e, t) => {
+  if (typeof e == "function")
+    return e(t);
+  e != null && (e.current = t);
+}, U = (...e) => (t) => {
+  let n = !1;
+  const a = e.map((r) => {
+    const s = j(r, t);
+    return !n && typeof s == "function" && (n = !0), { ref: r, cleanup: s };
+  });
+  if (n)
+    return () => {
+      for (const { ref: r, cleanup: s } of a)
+        typeof s == "function" ? s() : j(r, null);
+    };
+}, q = (e) => {
+  const t = Object.getOwnPropertyDescriptor(e.props, "ref")?.get;
+  return t && "isReactWarning" in t && t.isReactWarning ? e.ref : e.props.ref || e.ref;
+}, R = (...e) => {
+  let t = {};
+  for (const n of e)
+    n && (t = { ...t, ...n });
+  return Object.keys(t).length ? t : void 0;
+}, G = ({ className: e, customProperties: t, ...n }) => {
+  const a = T({
+    allowCustomValues: !0,
+    className: e,
+    ...n
+  }), r = J({
+    customProperties: t,
+    ...n
+  });
+  return [a, r];
+}, X = (e, t, n) => {
+  const a = e ? "-" : "", r = n(t), s = r?.startsWith("-"), o = s ? "-" : "", l = s ? r?.substring(1) : r;
+  return `${o}${e}${a}${l}`;
+}, T = ({
+  allowCustomValues: e = !1,
+  className: t,
+  value: n,
+  propValues: a,
+  parseValue: r = (s) => s
+}) => {
+  if (n) {
+    if (typeof n == "string" && a.includes(n))
+      return X(t, n, r);
+    if (e)
+      return t;
+  }
+}, J = ({
+  customProperties: e,
+  value: t,
+  propValues: n,
+  parseValue: a = (r) => r
+}) => {
+  let r = {};
+  if (!(!t || typeof t == "string" && n.includes(t))) {
+    typeof t == "string" && (r = Object.fromEntries(e.map((s) => [s, t])));
+    for (const s in r) {
+      const o = r[s];
+      o !== void 0 && (r[s] = a(o));
+    }
+    return r;
+  }
+}, M = (...e) => Object.assign({}, ...e), h = (e, ...t) => {
+  let n, a;
+  const r = { ...e }, s = M(...t);
+  for (const o in s) {
+    let l = r[o];
+    const i = s[o];
+    if (i.default !== void 0 && l === void 0 && (l = i.default), i.type === "enum" && ([i.default, ...i.values].includes(l) || (l = i.default)), r[o] = l, "className" in i && i.className) {
+      if (delete r[o], !l)
+        continue;
+      if (i.type === "enum") {
+        const u = T({
+          value: l,
+          className: i.className,
+          propValues: i.values,
+          parseValue: i.parseValue
+        });
+        n = f(n, u);
+        continue;
+      }
+      if (i.type === "string" || i.type === "enum | string") {
+        const u = i.type === "string" ? [] : i.values, [w, b] = G({
+          className: i.className,
+          customProperties: i.customProperties,
+          propValues: u,
+          value: l
+        });
+        a = R(a, b), n = f(n, w);
+        continue;
+      }
+    }
+  }
+  return r.className = f(n, e.className), r.style = R(a, e.style), r;
+}, Z = (e) => {
+  const t = p.forwardRef((n, a) => {
+    const { children: r, ...s } = n;
+    if (p.isValidElement(r)) {
+      const o = q(r), l = Y(s, r.props);
+      return l.ref = a ? U(a, o) : o, p.cloneElement(r, l);
+    }
+    throw new Error(
+      `[${e}.OutletClone] Invalid children passed, expected a single valid React element.`
+    );
+  });
+  return t.displayName = `${e}.OutletClone`, t;
+}, $ = (e) => {
+  const t = Z(e), n = p.forwardRef((a, r) => {
+    const { children: s, ...o } = a, l = p.Children.toArray(s), i = l.find(Q);
+    if (i) {
+      const u = i.props.children, w = l.map((b) => {
+        if (b === i) {
+          if (p.Children.count(u) > 1 || !p.isValidElement(u))
+            throw new Error(
+              `[${e}.Outlet] Invalid children passed, expected a single valid React element.`
+            );
+          return u.props.children;
+        } else
+          return b;
+      });
+      if (!p.isValidElement(u))
+        throw new Error(`[${e}.Outlet] Invalid children passed.`);
+      return /* @__PURE__ */ c(t, { ...o, ref: r, children: p.cloneElement(u, void 0, w) });
+    }
+    return /* @__PURE__ */ c(t, { ...o, ref: r, children: s });
+  });
+  return n.displayName = `${e}.Outlet`, n;
+}, O = $("Outlet"), K = Symbol("bds.outlettable"), Q = (e) => p.isValidElement(e) && typeof e.type == "function" && "__bdsId" in e.type && e.type.__bdsId === K, v = {
+  asChild: {
+    type: "boolean"
+  }
+}, S = ["gray50", "gray100", "gray200", "gray300", "gray400", "gray500", "gray600", "gray700", "gray800", "gray900", "gray1000", "gray1100", "gray1200", "gray1300", "gray1400", "gray1500", "blue50", "blue100", "blue200", "blue300", "blue400", "blue500", "blue600", "blue700", "blue800", "blue900", "blue1000", "blue1100", "blue1200", "blue1300", "blue1400", "green50", "green100", "green200", "green300", "green400", "green500", "green600", "green700", "green800", "green900", "green1000", "green1100", "green1200", "red50", "red100", "red200", "red300", "red400", "red500", "red600", "red700", "red800", "red900", "red1000", "red1100"], ee = {
+  color: {
+    type: "enum | string",
+    values: S,
+    className: "bd-color",
+    customProperties: ["--color"],
+    default: void 0
+  }
+}, se = {
+  borderColor: {
+    type: "enum | string",
+    values: S,
+    className: "bd-br-color",
+    customProperties: ["--border-color"],
+    default: void 0
+  }
+}, m = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], te = {
+  p: {
+    type: "enum | string",
+    values: m,
+    className: "bd-p",
+    customProperties: ["--p"]
+  },
+  px: {
+    type: "enum | string",
+    values: m,
+    className: "bd-px",
+    customProperties: ["--px"]
+  },
+  py: {
+    type: "enum | string",
+    values: m,
+    className: "bd-py",
+    customProperties: ["--py"]
+  },
+  pt: {
+    type: "enum | string",
+    values: m,
+    className: "bd-pt",
+    customProperties: ["--pt"]
+  },
+  pr: {
+    type: "enum | string",
+    values: m,
+    className: "bd-pr",
+    customProperties: ["--pr"]
+  },
+  pb: {
+    type: "enum | string",
+    values: m,
+    className: "bd-pb",
+    customProperties: ["--pb"]
+  },
+  pl: {
+    type: "enum | string",
+    values: m,
+    className: "bd-pl",
+    customProperties: ["--pl"]
+  }
+}, B = {
+  width: {
+    type: "string",
+    className: "bd-w",
+    customProperties: ["--width"]
+  },
+  minWidth: {
+    type: "string",
+    className: "bd-min-w",
+    customProperties: ["--min-width"]
+  },
+  maxWidth: {
+    type: "string",
+    className: "bd-max-w",
+    customProperties: ["--max-width"]
+  }
+}, re = {
+  height: {
+    type: "string",
+    className: "bd-h",
+    customProperties: ["--height"]
+  },
+  minHeight: {
+    type: "string",
+    className: "bd-min-h",
+    customProperties: ["--min-height"]
+  },
+  maxHeight: {
+    type: "string",
+    className: "bd-max-h",
+    customProperties: ["--max-height"]
+  }
+}, ne = ["static", "relative", "absolute", "fixed", "sticky"], C = ["visible", "hidden", "clip", "scroll", "auto"], y = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"], ae = ["0", "1"], oe = ["0", "1"], le = ["start", "center", "end", "baseline", "stretch"], ie = ["start", "center", "end", "baseline", "stretch"], ce = {
+  ...B,
+  ...re,
+  ...te,
+  position: {
+    type: "enum",
+    className: "bd-position",
+    values: ne
+  },
+  inset: {
+    type: "enum | string",
+    className: "bd-inset",
+    customProperties: ["--inset"],
+    values: y
+  },
+  top: {
+    type: "enum | string",
+    className: "bd-top",
+    customProperties: ["--top"],
+    values: y
+  },
+  right: {
+    type: "enum | string",
+    className: "bd-right",
+    customProperties: ["--right"],
+    values: y
+  },
+  bottom: {
+    type: "enum | string",
+    className: "bd-bottom",
+    customProperties: ["--bottom"],
+    values: y
+  },
+  left: {
+    type: "enum | string",
+    className: "bd-left",
+    customProperties: ["--left"],
+    values: y
+  },
+  overflow: {
+    type: "enum",
+    className: "bd-overflow",
+    values: C
+  },
+  overflowX: {
+    type: "enum",
+    className: "bd-ox",
+    values: C
+  },
+  overflowY: {
+    type: "enum",
+    className: "bd-oy",
+    values: C
+  },
+  flexBasis: {
+    type: "string",
+    className: "bd-fb",
+    customProperties: ["--flex-basis"]
+  },
+  flexShrink: {
+    type: "enum | string",
+    className: "bd-fs",
+    customProperties: ["--flex-shrink"],
+    values: ae
+  },
+  flexGrow: {
+    type: "enum | string",
+    className: "bd-fg",
+    customProperties: ["--flex-grow"],
+    values: oe
+  },
+  gridArea: {
+    type: "string",
+    className: "bd-ga",
+    customProperties: ["--grid-area"]
+  },
+  gridColumn: {
+    type: "string",
+    className: "bd-gc",
+    customProperties: ["--grid-column"]
+  },
+  gridColumnStart: {
+    type: "string",
+    className: "bd-gcs",
+    customProperties: ["--grid-column-start"]
+  },
+  gridColumnEnd: {
+    type: "string",
+    className: "bd-gce",
+    customProperties: ["--grid-column-end"]
+  },
+  gridRow: {
+    type: "string",
+    className: "bd-gr",
+    customProperties: ["--grid-row"]
+  },
+  gridRowStart: {
+    type: "string",
+    className: "bd-grs",
+    customProperties: ["--grid-row-start"]
+  },
+  gridRowEnd: {
+    type: "string",
+    className: "bd-gre",
+    customProperties: ["--grid-row-end"]
+  },
+  alignSelf: {
+    type: "enum",
+    className: "bd-as",
+    values: le
+  },
+  justifySelf: {
+    type: "enum",
+    className: "bd-js",
+    values: ie
+  }
+}, d = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9", "-10", "-11", "-12"], P = {
+  m: {
+    type: "enum | string",
+    values: d,
+    className: "bd-m",
+    customProperties: ["--m"]
+  },
+  mx: {
+    type: "enum | string",
+    values: d,
+    className: "bd-mx",
+    customProperties: ["--ml", "--mr"]
+  },
+  my: {
+    type: "enum | string",
+    values: d,
+    className: "bd-my",
+    customProperties: ["--mt", "--mb"]
+  },
+  mt: {
+    type: "enum | string",
+    values: d,
+    className: "bd-mt",
+    customProperties: ["--mt"]
+  },
+  mr: {
+    type: "enum | string",
+    values: d,
+    className: "bd-mr",
+    customProperties: ["--mr"]
+  },
+  mb: {
+    type: "enum | string",
+    values: d,
+    className: "bd-mb",
+    customProperties: ["--mb"]
+  },
+  ml: {
+    type: "enum | string",
+    values: d,
+    className: "bd-ml",
+    customProperties: ["--ml"]
+  }
+}, ue = ["left", "center", "right"], pe = {
+  align: {
+    type: "enum",
+    values: ue,
+    className: "bd-ta"
+  }
+}, me = ["wrap", "nowrap", "pretty", "balance"], de = {
+  wrap: {
+    type: "enum",
+    className: "bd-tw",
+    values: me
+  }
+}, fe = ["light", "regular", "medium", "semibold", "bold"], I = {
+  weight: {
+    type: "enum",
+    values: fe,
+    className: "bd-weight"
+  }
+}, ge = {
+  truncate: {
+    type: "boolean",
+    className: "bd-truncate"
+  }
+}, ye = ["normal", "start", "end", "both"], be = {
+  trim: {
+    type: "enum",
+    className: "bd-lt",
+    values: ye,
+    default: "normal"
+  }
+}, ve = ["none", "s", "m", "l", "full"], Ne = {
+  radius: {
+    type: "enum | string",
+    values: ve,
+    default: void 0,
+    className: "bd-radius",
+    customProperties: ["--radius"]
+  }
+}, V = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], W = {
+  gap: {
+    type: "enum | string",
+    className: "bd-gap",
+    customProperties: ["--gap"],
+    values: V
+  },
+  gapX: {
+    type: "enum | string",
+    className: "bd-cg",
+    customProperties: ["--col-gap"],
+    values: V
+  },
+  gapY: {
+    type: "enum | string",
+    className: "bd-rg",
+    customProperties: ["--row-gap"],
+    values: V
+  }
+}, he = ["span", "div", "label", "p"], Pe = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"], we = {
+  as: { type: "enum", values: he, default: "span" },
+  ...v,
+  size: {
+    type: "enum | string",
+    className: "bd-size",
+    values: Pe,
+    customProperties: ["--size"]
+  },
+  ...v,
+  ...P,
+  ...pe,
+  ...de,
+  ...I,
+  ...ge,
+  ...be,
+  ...ee
+}, xe = g.forwardRef((e, t) => {
+  const {
+    children: n,
+    className: a,
+    asChild: r,
+    as: s = "span",
+    ...o
+  } = h(e, we);
+  return /* @__PURE__ */ c(O, { ...o, ref: t, className: f("bd-Text", a), children: r ? n : /* @__PURE__ */ c(s, { children: n }) });
+});
+xe.displayName = "Text";
+const Ce = (e) => e === "between" ? "space-between" : e, Ve = ["div", "span"], De = ["none", "inline-flex", "flex"], Oe = ["row", "column", "row-reverse", "column-reverse"], Se = ["start", "center", "end", "baseline", "stretch"], Ee = ["start", "center", "end", "between"], je = ["nowrap", "wrap", "wrap-reverse"], Re = {
+  as: { type: "enum", values: Ve, default: "div" },
+  ...v,
+  display: {
+    type: "enum",
+    className: "bd-display",
+    values: De
+  },
+  direction: {
+    type: "enum",
+    className: "bd-fd",
+    values: Oe
+  },
+  align: {
+    type: "enum",
+    className: "bd-ai",
+    values: Se
+  },
+  justify: {
+    type: "enum",
+    className: "bd-jc",
+    values: Ee,
+    parseValue: Ce
+  },
+  wrap: {
+    type: "enum",
+    className: "bd-fw",
+    values: je
+  },
+  ...W,
+  ...ce,
+  ...P
+}, N = g.forwardRef((e, t) => {
+  const { className: n, asChild: a, as: r = "div", ...s } = h(e, Re);
+  return /* @__PURE__ */ c(a ? O : r, { ...s, ref: t, className: f("bd-Flex", n) });
+});
+N.displayName = "Flex";
+const ze = ["a", "button", "div", "input", "label", "span"], Te = ze.reduce((e, t) => {
+  const n = $(`Base.${t}`), a = g.forwardRef((r, s) => {
+    const { asChild: o, ...l } = r;
+    return /* @__PURE__ */ c(o ? n : t, { ...l, ref: s });
+  });
+  return a.displayName = `Base.${t}`, { ...e, [t]: a };
+}, {}), $e = Object.freeze({
+  position: "absolute",
+  border: 0,
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  wordWrap: "normal"
+}), _ = g.forwardRef(
+  (e, t) => /* @__PURE__ */ c(
+    Te.span,
+    {
+      ...e,
+      ref: t,
+      style: { ...$e, ...e.style }
+    }
+  )
+);
+_.displayName = "VisuallyHidden";
+const Be = ["1", "2", "3"], Ie = {
+  size: { type: "enum", className: "bd-size", values: Be, default: "2" },
+  loading: { type: "boolean", default: !0 },
+  color: { type: "enum", className: "bd-color", values: S },
+  ...P
+}, A = g.forwardRef((e, t) => {
+  const { className: n, children: a, loading: r, ...s } = h(
+    e,
+    Ie,
+    se
+  );
+  if (!r) return a;
+  const o = /* @__PURE__ */ c("span", { ...s, ref: t, className: f("bd-Spinner", n) });
+  return a === void 0 ? o : /* @__PURE__ */ z(N, { asChild: !0, position: "relative", align: "center", justify: "center", children: [
+    /* @__PURE__ */ c("span", { children: /* @__PURE__ */ c("span", { "aria-hidden": !0, style: { display: "contents", visibility: "hidden" }, inert: void 0, children: a }) }),
+    /* @__PURE__ */ c(N, { asChild: !0, align: "center", justify: "center", position: "absolute", inset: "0", children: /* @__PURE__ */ c("span", { children: o }) })
+  ] });
+});
+A.displayName = "Spinner";
+const We = ["1", "2", "3", "4", "5"], _e = [
+  "fill-primary",
+  "fill-secondary",
+  "outline-primary",
+  "outline-secondary",
+  "ghost"
+], D = {
+  ...v,
+  /**
+   * @description 버튼의 높이 기준
+   *
+   * 1="24px"
+   * 2="32px"
+   * 3="40px"
+   * 4="48px"
+   * 5="56px"
+   */
+  size: { type: "enum", className: "bd-size", values: We, default: "5" },
+  variant: { type: "enum", className: "bd-variant", values: _e, default: "fill-primary" },
+  ...B,
+  ...P,
+  ...W,
+  ...Ne,
+  ...I,
+  loading: { type: "boolean", className: "bd-loading", default: !1 }
+}, Ae = (e) => {
+  switch (e) {
+    case "1":
+      return "1";
+    case "2":
+    case "3":
+      return "2";
+    case "4":
+    case "5":
+      return "3";
+  }
+}, Fe = (e) => {
+  switch (e) {
+    case "fill-primary":
+      return;
+    case "fill-secondary":
+    case "outline-primary":
+    case "outline-secondary":
+    case "ghost":
+      return "blue1100";
+    default:
+      return;
+  }
+}, He = g.forwardRef((e, t) => {
+  const { variant: n = D.variant.default, size: a = D.size.default } = e, {
+    className: r,
+    children: s,
+    asChild: o,
+    disabled: l = e.loading,
+    ...i
+  } = h(e, D);
+  return /* @__PURE__ */ c(
+    o ? O : "button",
+    {
+      "data-disabled": l || void 0,
+      "data-loading": e.loading || void 0,
+      disabled: l,
+      ...i,
+      ref: t,
+      className: f("bd-Button", r),
+      children: e.loading ? /* @__PURE__ */ z(F, { children: [
+        /* @__PURE__ */ c("span", { style: { display: "contents", visibility: "hidden" }, "aria-hidden": !0, children: s }),
+        /* @__PURE__ */ c(_, { children: s }),
+        /* @__PURE__ */ c(N, { asChild: !0, align: "center", justify: "center", position: "absolute", inset: "0", children: /* @__PURE__ */ c("span", { children: /* @__PURE__ */ c(
+          A,
+          {
+            size: Ae(a),
+            color: Fe(n)
+          }
+        ) }) })
+      ] }) : s
+    }
+  );
+});
+He.displayName = "Button";
+export {
+  Te as Base,
+  He as Button,
+  N as Flex,
+  O as OutletUI,
+  A as Spinner,
+  xe as Text,
+  $e as VISUALLY_HIDDEN_STYLES,
+  _ as VisuallyHidden
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beaubrain/web-design-system",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/beaubrain/web-design-system.git"