@gobolt/genesis 0.0.9 → 0.0.11

package/dist/components/SegmentedControls/styles.js

@@ -0,0 +1,511 @@
+import { d as be } from "../../styled-components.browser.esm-CZ1XM4o4.js";
+import * as i from "react";
+import { a as A, _ as X, e as K, g as ve, d as Q, b as z, f as ae } from "../../presets-Djh_L_6R.js";
+import { u as Se } from "../../useMergedState-BoELfaU9.js";
+import { o as pe } from "../../omit-B_u6A-HL.js";
+import { f as $e, o as ye, p as ie, g as Ce, m as we, t as xe, r as Ne, k as Oe, j as E, q as Re, C as Me } from "../../index-ByspLxrB.js";
+import { u as Ie } from "../../useSize-CPo2bUE3.js";
+import "../../index-DLdU7Tpd.js";
+import { u as je } from "../../useId-D2tzlufo.js";
+var k = function(t, a) {
+  if (!t) return null;
+  var n = {
+    left: t.offsetLeft,
+    right: t.parentElement.clientWidth - t.clientWidth - t.offsetLeft,
+    width: t.clientWidth,
+    top: t.offsetTop,
+    bottom: t.parentElement.clientHeight - t.clientHeight - t.offsetTop,
+    height: t.clientHeight
+  };
+  return a ? {
+    left: 0,
+    right: 0,
+    width: 0,
+    top: n.top,
+    bottom: n.bottom,
+    height: n.height
+  } : {
+    left: n.left,
+    right: n.right,
+    width: n.width,
+    top: 0,
+    bottom: 0,
+    height: 0
+  };
+}, w = function(t) {
+  return t !== void 0 ? "".concat(t, "px") : void 0;
+};
+function Ee(e) {
+  var t = e.prefixCls, a = e.containerRef, n = e.value, r = e.getValueIndex, s = e.motionName, p = e.onMotionStart, b = e.onMotionEnd, v = e.direction, x = e.vertical, u = x === void 0 ? !1 : x, H = i.useRef(null), P = i.useState(n), R = A(P, 2), f = R[0], g = R[1], m = function(j) {
+    var O, V = r(j), C = (O = a.current) === null || O === void 0 ? void 0 : O.querySelectorAll(".".concat(t, "-item"))[V];
+    return (C == null ? void 0 : C.offsetParent) && C;
+  }, D = i.useState(null), M = A(D, 2), o = M[0], N = M[1], _ = i.useState(null), S = A(_, 2), l = S[0], $ = S[1];
+  $e(function() {
+    if (f !== n) {
+      var d = m(f), j = m(n), O = k(d, u), V = k(j, u);
+      g(n), N(O), $(V), d && j ? p() : b();
+    }
+  }, [n]);
+  var y = i.useMemo(function() {
+    if (u) {
+      var d;
+      return w((d = o == null ? void 0 : o.top) !== null && d !== void 0 ? d : 0);
+    }
+    return w(v === "rtl" ? -(o == null ? void 0 : o.right) : o == null ? void 0 : o.left);
+  }, [u, v, o]), I = i.useMemo(function() {
+    if (u) {
+      var d;
+      return w((d = l == null ? void 0 : l.top) !== null && d !== void 0 ? d : 0);
+    }
+    return w(v === "rtl" ? -(l == null ? void 0 : l.right) : l == null ? void 0 : l.left);
+  }, [u, v, l]), T = function() {
+    return u ? {
+      transform: "translateY(var(--thumb-start-top))",
+      height: "var(--thumb-start-height)"
+    } : {
+      transform: "translateX(var(--thumb-start-left))",
+      width: "var(--thumb-start-width)"
+    };
+  }, F = function() {
+    return u ? {
+      transform: "translateY(var(--thumb-active-top))",
+      height: "var(--thumb-active-height)"
+    } : {
+      transform: "translateX(var(--thumb-active-left))",
+      width: "var(--thumb-active-width)"
+    };
+  }, q = function() {
+    N(null), $(null), b();
+  };
+  return !o || !l ? null : /* @__PURE__ */ i.createElement(ye, {
+    visible: !0,
+    motionName: s,
+    motionAppear: !0,
+    onAppearStart: T,
+    onAppearActive: F,
+    onVisibleChanged: q
+  }, function(d, j) {
+    var O = d.className, V = d.style, C = X(X({}, V), {}, {
+      "--thumb-start-left": y,
+      "--thumb-start-width": w(o == null ? void 0 : o.width),
+      "--thumb-active-left": I,
+      "--thumb-active-width": w(l == null ? void 0 : l.width),
+      "--thumb-start-top": y,
+      "--thumb-start-height": w(o == null ? void 0 : o.height),
+      "--thumb-active-top": I,
+      "--thumb-active-height": w(l == null ? void 0 : l.height)
+    }), L = {
+      ref: ie(H, j),
+      style: C,
+      className: K("".concat(t, "-thumb"), O)
+    };
+    return process.env.NODE_ENV === "test" && (L["data-test-style"] = JSON.stringify(C)), /* @__PURE__ */ i.createElement("div", L);
+  });
+}
+var He = ["prefixCls", "direction", "vertical", "options", "disabled", "defaultValue", "value", "name", "onChange", "className", "motionName"];
+function Pe(e) {
+  if (typeof e.title < "u")
+    return e.title;
+  if (ae(e.label) !== "object") {
+    var t;
+    return (t = e.label) === null || t === void 0 ? void 0 : t.toString();
+  }
+}
+function De(e) {
+  return e.map(function(t) {
+    if (ae(t) === "object" && t !== null) {
+      var a = Pe(t);
+      return X(X({}, t), {}, {
+        title: a
+      });
+    }
+    return {
+      label: t == null ? void 0 : t.toString(),
+      title: t == null ? void 0 : t.toString(),
+      value: t
+    };
+  });
+}
+var Ve = function(t) {
+  var a = t.prefixCls, n = t.className, r = t.disabled, s = t.checked, p = t.label, b = t.title, v = t.value, x = t.name, u = t.onChange, H = t.onFocus, P = t.onBlur, R = t.onKeyDown, f = t.onKeyUp, g = t.onMouseDown, m = function(M) {
+    r || u(M, v);
+  };
+  return /* @__PURE__ */ i.createElement("label", {
+    className: K(n, z({}, "".concat(a, "-item-disabled"), r)),
+    onMouseDown: g
+  }, /* @__PURE__ */ i.createElement("input", {
+    name: x,
+    className: "".concat(a, "-item-input"),
+    type: "radio",
+    disabled: r,
+    checked: s,
+    onChange: m,
+    onFocus: H,
+    onBlur: P,
+    onKeyDown: R,
+    onKeyUp: f
+  }), /* @__PURE__ */ i.createElement("div", {
+    className: "".concat(a, "-item-label"),
+    title: b,
+    "aria-selected": s
+  }, p));
+}, re = /* @__PURE__ */ i.forwardRef(function(e, t) {
+  var a, n, r = e.prefixCls, s = r === void 0 ? "rc-segmented" : r, p = e.direction, b = e.vertical, v = e.options, x = v === void 0 ? [] : v, u = e.disabled, H = e.defaultValue, P = e.value, R = e.name, f = e.onChange, g = e.className, m = g === void 0 ? "" : g, D = e.motionName, M = D === void 0 ? "thumb-motion" : D, o = ve(e, He), N = i.useRef(null), _ = i.useMemo(function() {
+    return ie(N, t);
+  }, [N, t]), S = i.useMemo(function() {
+    return De(x);
+  }, [x]), l = Se((a = S[0]) === null || a === void 0 ? void 0 : a.value, {
+    value: P,
+    defaultValue: H
+  }), $ = A(l, 2), y = $[0], I = $[1], T = i.useState(!1), F = A(T, 2), q = F[0], d = F[1], j = function(h, B) {
+    I(B), f == null || f(B);
+  }, O = pe(o, ["children"]), V = i.useState(!1), C = A(V, 2), L = C[0], U = C[1], le = i.useState(!1), G = A(le, 2), se = G[0], Y = G[1], de = function() {
+    Y(!0);
+  }, ue = function() {
+    Y(!1);
+  }, ce = function() {
+    U(!1);
+  }, me = function(h) {
+    h.key === "Tab" && U(!0);
+  }, J = function(h) {
+    var B = S.findIndex(function(he) {
+      return he.value === y;
+    }), Z = S.length, ge = (B + h + Z) % Z, W = S[ge];
+    W && (I(W.value), f == null || f(W.value));
+  }, fe = function(h) {
+    switch (h.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        J(-1);
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        J(1);
+        break;
+    }
+  };
+  return /* @__PURE__ */ i.createElement("div", Q({
+    role: "radiogroup",
+    "aria-label": "segmented control",
+    tabIndex: u ? void 0 : 0
+  }, O, {
+    className: K(s, (n = {}, z(n, "".concat(s, "-rtl"), p === "rtl"), z(n, "".concat(s, "-disabled"), u), z(n, "".concat(s, "-vertical"), b), n), m),
+    ref: _
+  }), /* @__PURE__ */ i.createElement("div", {
+    className: "".concat(s, "-group")
+  }, /* @__PURE__ */ i.createElement(Ee, {
+    vertical: b,
+    prefixCls: s,
+    value: y,
+    containerRef: N,
+    motionName: "".concat(s, "-").concat(M),
+    direction: p,
+    getValueIndex: function(h) {
+      return S.findIndex(function(B) {
+        return B.value === h;
+      });
+    },
+    onMotionStart: function() {
+      d(!0);
+    },
+    onMotionEnd: function() {
+      d(!1);
+    }
+  }), S.map(function(c) {
+    var h;
+    return /* @__PURE__ */ i.createElement(Ve, Q({}, c, {
+      name: R,
+      key: c.value,
+      prefixCls: s,
+      className: K(c.className, "".concat(s, "-item"), (h = {}, z(h, "".concat(s, "-item-selected"), c.value === y && !q), z(h, "".concat(s, "-item-focused"), se && L && c.value === y), h)),
+      checked: c.value === y,
+      onChange: j,
+      onFocus: de,
+      onBlur: ue,
+      onKeyDown: fe,
+      onKeyUp: me,
+      onMouseDown: ce,
+      disabled: !!u || !!c.disabled
+    }));
+  })));
+});
+process.env.NODE_ENV !== "production" && (re.displayName = "Segmented");
+var Ae = re;
+function ee(e, t) {
+  return {
+    [`${e}, ${e}:hover, ${e}:focus`]: {
+      color: t.colorTextDisabled,
+      cursor: "not-allowed"
+    }
+  };
+}
+function te(e) {
+  return {
+    backgroundColor: e.itemSelectedBg,
+    boxShadow: e.boxShadowTertiary
+  };
+}
+const Be = Object.assign({
+  overflow: "hidden"
+}, xe), ze = (e) => {
+  const {
+    componentCls: t
+  } = e, a = e.calc(e.controlHeight).sub(e.calc(e.trackPadding).mul(2)).equal(), n = e.calc(e.controlHeightLG).sub(e.calc(e.trackPadding).mul(2)).equal(), r = e.calc(e.controlHeightSM).sub(e.calc(e.trackPadding).mul(2)).equal();
+  return {
+    [t]: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Ne(e)), {
+      display: "inline-block",
+      padding: e.trackPadding,
+      color: e.itemColor,
+      background: e.trackBg,
+      borderRadius: e.borderRadius,
+      transition: `all ${e.motionDurationMid} ${e.motionEaseInOut}`
+    }), Oe(e)), {
+      [`${t}-group`]: {
+        position: "relative",
+        display: "flex",
+        alignItems: "stretch",
+        justifyItems: "flex-start",
+        flexDirection: "row",
+        width: "100%"
+      },
+      // RTL styles
+      [`&${t}-rtl`]: {
+        direction: "rtl"
+      },
+      [`&${t}-vertical`]: {
+        [`${t}-group`]: {
+          flexDirection: "column"
+        },
+        [`${t}-thumb`]: {
+          width: "100%",
+          height: 0,
+          padding: `0 ${E(e.paddingXXS)}`
+        }
+      },
+      // block styles
+      [`&${t}-block`]: {
+        display: "flex"
+      },
+      [`&${t}-block ${t}-item`]: {
+        flex: 1,
+        minWidth: 0
+      },
+      // item styles
+      [`${t}-item`]: {
+        position: "relative",
+        textAlign: "center",
+        cursor: "pointer",
+        transition: `color ${e.motionDurationMid} ${e.motionEaseInOut}`,
+        borderRadius: e.borderRadiusSM,
+        // Fix Safari render bug
+        // https://github.com/ant-design/ant-design/issues/45250
+        transform: "translateZ(0)",
+        "&-selected": Object.assign(Object.assign({}, te(e)), {
+          color: e.itemSelectedColor
+        }),
+        "&-focused": Object.assign({}, Re(e)),
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          zIndex: -1,
+          width: "100%",
+          height: "100%",
+          top: 0,
+          insetInlineStart: 0,
+          borderRadius: "inherit",
+          transition: `background-color ${e.motionDurationMid}`,
+          // This is mandatory to make it not clickable or hoverable
+          // Ref: https://github.com/ant-design/ant-design/issues/40888
+          pointerEvents: "none"
+        },
+        [`&:hover:not(${t}-item-selected):not(${t}-item-disabled)`]: {
+          color: e.itemHoverColor,
+          "&::after": {
+            backgroundColor: e.itemHoverBg
+          }
+        },
+        [`&:active:not(${t}-item-selected):not(${t}-item-disabled)`]: {
+          color: e.itemHoverColor,
+          "&::after": {
+            backgroundColor: e.itemActiveBg
+          }
+        },
+        "&-label": Object.assign({
+          minHeight: a,
+          lineHeight: E(a),
+          padding: `0 ${E(e.segmentedPaddingHorizontal)}`
+        }, Be),
+        // syntactic sugar to add `icon` for Segmented Item
+        "&-icon + *": {
+          marginInlineStart: e.calc(e.marginSM).div(2).equal()
+        },
+        "&-input": {
+          position: "absolute",
+          insetBlockStart: 0,
+          insetInlineStart: 0,
+          width: 0,
+          height: 0,
+          opacity: 0,
+          pointerEvents: "none"
+        }
+      },
+      // thumb styles
+      [`${t}-thumb`]: Object.assign(Object.assign({}, te(e)), {
+        position: "absolute",
+        insetBlockStart: 0,
+        insetInlineStart: 0,
+        width: 0,
+        height: "100%",
+        padding: `${E(e.paddingXXS)} 0`,
+        borderRadius: e.borderRadiusSM,
+        transition: `transform ${e.motionDurationSlow} ${e.motionEaseInOut}, height ${e.motionDurationSlow} ${e.motionEaseInOut}`,
+        [`& ~ ${t}-item:not(${t}-item-selected):not(${t}-item-disabled)::after`]: {
+          backgroundColor: "transparent"
+        }
+      }),
+      // size styles
+      [`&${t}-lg`]: {
+        borderRadius: e.borderRadiusLG,
+        [`${t}-item-label`]: {
+          minHeight: n,
+          lineHeight: E(n),
+          padding: `0 ${E(e.segmentedPaddingHorizontal)}`,
+          fontSize: e.fontSizeLG
+        },
+        [`${t}-item, ${t}-thumb`]: {
+          borderRadius: e.borderRadius
+        }
+      },
+      [`&${t}-sm`]: {
+        borderRadius: e.borderRadiusSM,
+        [`${t}-item-label`]: {
+          minHeight: r,
+          lineHeight: E(r),
+          padding: `0 ${E(e.segmentedPaddingHorizontalSM)}`
+        },
+        [`${t}-item, ${t}-thumb`]: {
+          borderRadius: e.borderRadiusXS
+        }
+      }
+    }), ee(`&-disabled ${t}-item`, e)), ee(`${t}-item-disabled`, e)), {
+      // transition effect when `appear-active`
+      [`${t}-thumb-motion-appear-active`]: {
+        transition: `transform ${e.motionDurationSlow} ${e.motionEaseInOut}, width ${e.motionDurationSlow} ${e.motionEaseInOut}`,
+        willChange: "transform, width"
+      }
+    })
+  };
+}, _e = (e) => {
+  const {
+    colorTextLabel: t,
+    colorText: a,
+    colorFillSecondary: n,
+    colorBgElevated: r,
+    colorFill: s,
+    lineWidthBold: p,
+    colorBgLayout: b
+  } = e;
+  return {
+    trackPadding: p,
+    trackBg: b,
+    itemColor: t,
+    itemHoverColor: a,
+    itemHoverBg: n,
+    itemSelectedBg: r,
+    itemActiveBg: s,
+    itemSelectedColor: a
+  };
+}, Te = Ce("Segmented", (e) => {
+  const {
+    lineWidth: t,
+    calc: a
+  } = e, n = we(e, {
+    segmentedPaddingHorizontal: a(e.controlPaddingHorizontal).sub(t).equal(),
+    segmentedPaddingHorizontalSM: a(e.controlPaddingHorizontalSM).sub(t).equal()
+  });
+  return [ze(n)];
+}, _e);
+var ne = function(e, t) {
+  var a = {};
+  for (var n in e) Object.prototype.hasOwnProperty.call(e, n) && t.indexOf(n) < 0 && (a[n] = e[n]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var r = 0, n = Object.getOwnPropertySymbols(e); r < n.length; r++)
+    t.indexOf(n[r]) < 0 && Object.prototype.propertyIsEnumerable.call(e, n[r]) && (a[n[r]] = e[n[r]]);
+  return a;
+};
+function Ke(e) {
+  return typeof e == "object" && !!(e != null && e.icon);
+}
+const Fe = /* @__PURE__ */ i.forwardRef((e, t) => {
+  const a = je(), {
+    prefixCls: n,
+    className: r,
+    rootClassName: s,
+    block: p,
+    options: b = [],
+    size: v = "middle",
+    style: x,
+    vertical: u,
+    name: H = a
+  } = e, P = ne(e, ["prefixCls", "className", "rootClassName", "block", "options", "size", "style", "vertical", "name"]), {
+    getPrefixCls: R,
+    direction: f,
+    segmented: g
+  } = i.useContext(Me), m = R("segmented", n), [D, M, o] = Te(m), N = Ie(v), _ = i.useMemo(() => b.map(($) => {
+    if (Ke($)) {
+      const {
+        icon: y,
+        label: I
+      } = $, T = ne($, ["icon", "label"]);
+      return Object.assign(Object.assign({}, T), {
+        label: /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement("span", {
+          className: `${m}-item-icon`
+        }, y), I && /* @__PURE__ */ i.createElement("span", null, I))
+      });
+    }
+    return $;
+  }), [b, m]), S = K(r, s, g == null ? void 0 : g.className, {
+    [`${m}-block`]: p,
+    [`${m}-sm`]: N === "small",
+    [`${m}-lg`]: N === "large",
+    [`${m}-vertical`]: u
+  }, M, o), l = Object.assign(Object.assign({}, g == null ? void 0 : g.style), x);
+  return D(/* @__PURE__ */ i.createElement(Ae, Object.assign({}, P, {
+    name: H,
+    className: S,
+    style: l,
+    options: _,
+    ref: t,
+    prefixCls: m,
+    direction: f,
+    vertical: u
+  })));
+}), oe = Fe;
+process.env.NODE_ENV !== "production" && (oe.displayName = "Segmented");
+const Le = ({ colors: e, borderRadius: t, sizing: a }, n = "primary", r = "active") => `
+  &.ant-segmented {
+    border-radius: ${t.BorderRadiusMd};
+    color: ${e.onsurface.copy};
+    
+    .ant-segmented-item {
+      color: ${e[n].text};
+      transition: all 0.3s;
+      
+      &-selected {
+        background: ${e[n][r]};
+        color: ${e[n].textContrast};
+      }
+      
+      &:hover {
+        color: ${e[n].hover};
+      }
+    }
+  }
+`, Qe = be(
+  oe
+)`
+  ${({ theme: e, type: t = "primary", state: a = "active" }) => Le(e, t, a)}
+`;
+export {
+  Qe as SegmentedControls,
+  Le as getGenesisClass
+};

package/dist/components/Select/Select.d.ts

@@ -2,15 +2,13 @@ import { default as React } from 'react';
 import { TYPE, STATE } from '../../constants';
 import { SelectProps as AntSelectProps } from 'antd';
 
-export interface SelectProps extends AntSelectProps {
+export interface SelectProps extends Omit<AntSelectProps, "options"> {
     type?: keyof typeof TYPE;
     state?: keyof typeof STATE;
-}
-interface GenesisSelectProps extends SelectProps, AntSelectProps {
     options?: {
         value: string;
         label: React.ReactNode;
     }[];
 }
-declare const Select: ({ type, state, ...rest }: GenesisSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: ({ type, state, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export default Select;

package/dist/components/Select/Select.js

@@ -1,16 +1,17 @@
 import { jsx as o } from "react/jsx-runtime";
-import s, { useEffect as m } from "react";
-import { useBreakpoint as l } from "../../providers/ThemeProvider.js";
-import { TYPE as p } from "../../constants/index.js";
-import u from "./DropdownChevron.js";
+import c, { useEffect as m } from "react";
+import "../../providers/BreakpointThemeProvider.js";
+import { u } from "../../Typography-DqI7RslA.js";
+import { TYPE as l } from "../../constants/index.js";
+import p from "./DropdownChevron.js";
 import { SelectWrapper as i, Select as a, SelectDropdown as f, StyledMenuItem as h } from "./styles.js";
-const E = ({
-  type: t = p.primary,
+const I = ({
+  type: t = l.primary,
   state: r,
   ...d
 }) => {
-  l();
-  const [c, n] = s.useState(!1);
+  u();
+  const [s, n] = c.useState(!1);
   return m(() => {
     const e = document.createElement("style");
     return e.textContent = `
@@ -20,11 +21,11 @@ const E = ({
     `, document.head.appendChild(e), () => {
       document.head.removeChild(e);
     };
-  }, []), /* @__PURE__ */ o(i, { $isFocused: c, type: t, children: /* @__PURE__ */ o(
+  }, []), /* @__PURE__ */ o(i, { $isFocused: s, type: t, children: /* @__PURE__ */ o(
     a,
     {
       ...d,
-      suffixIcon: /* @__PURE__ */ o(u, {}),
+      suffixIcon: /* @__PURE__ */ o(p, {}),
       dropdownRender: (e) => /* @__PURE__ */ o(f, { type: t, state: r, children: /* @__PURE__ */ o(h, { type: t, state: r, children: e }) }),
       onFocus: () => n(!0),
       onBlur: () => n(!1)
@@ -32,5 +33,5 @@ const E = ({
   ) });
 };
 export {
-  E as default
+  I as default
 };

package/dist/components/Select/__tests__/Select.test.js

@@ -1,6 +1,6 @@
 var ci = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports);
 import { jsx as Zn } from "react/jsx-runtime";
-import { b as Ha, e as Ko, h as fi, l as pi, p as mi, d as bi, c as vi, i as ea, a as ta, s as ra, g as Ie, v as hi, w as yi } from "../../../setup-BvfREoHl.js";
+import { b as Ha, e as Ko, h as fi, l as pi, p as mi, d as bi, c as vi, i as ea, a as ta, s as ra, g as Ie, v as hi, w as yi } from "../../../setup-CKu7-AfI.js";
 import na from "../Select.js";
 import { TYPE as gi, STATE as Ei } from "../../../constants/index.js";
 var FE = ci((sC, ye) => {