amotify 0.1.30 → 0.1.32

package/dist/fn/Button.js

@@ -1 +1,316 @@
-import{b as o,c as i,d as B,e as P}from"../chunk-VY3566IV.js";import{jsx as d}from"react/jsx-runtime";import{$$ as g,pageTransit as x,ReadStyleSet as N,collectForm as I,GenerateClassName as E}from"../@utils/_";import{ButtonClasses as c}from"../@styles/componentClasses/_";const v={Size:(r,t,n,l)=>{let e={fontSize:"inherit"};return n=n||"R",["Plain","Link"].includes(t)?{}:(n=="XS"?e=i(o({},e),{padding:["1/3","2/3"],fontSize:"0.xs",borderRadius:"3.tone.tertiary"}):n=="S"?e=i(o({},e),{padding:["1/2","3/4"],fontSize:"1.mini",borderRadius:"3.tone.tertiary"}):n=="R"?(e.padding=["3/4",1],t=="Prime"&&(e.padding=["3/4",2])):n=="L"&&(e.padding=[1,3],e.fontSize="3.paragraph",e.isSemiBoldFont=!0),e=o({borderRadius:"2.tone.secondary",transition:"middle",position:"relative",textAlign:"center"},e),e)},Tone:(r,t,n,l)=>{let e={display:"inlineBlock",fontWeight:"inherit",fontColor:"inherit",border:"unset"};return t=="Plain"||(t=="Link"?(e.fontColor="theme",e.textAlign="left",e.backgroundColor="trans"):t=="Normal"?e=i(o({},e),{backgroundColor:"trans"}):t=="Border"?e=i(o({},e),{backgroundColor:"1.layer.base",border:"2.normal",borderStyle:"solid",boxShadow:"0.thin"}):t=="Prime"?(e=i(o({},e),{isSemiBoldFont:!0,fontColor:"white",backgroundColor:l,boxShadow:"0.normal",ssEffectsOnActive:["shrink","push","ripple.white"]}),l=="white"&&(e=i(o({},e),{fontColor:"theme",ssEffectsOnActive:["shrink","push","ripple.cloud"]}))):t=="Sub"?e=i(o({},e),{fontColor:l,ssEffectsOnActive:["shrink","ripple.cloud"]}):t=="Clear"?e=i(o({},e),{fontColor:l,backgroundColor:"trans",ssEffectsOnActive:["shrink","ripple.cloud"]}):t=="FillToBorder"?e=i(o({},e),{boxShadow:"0.normal",border:"2.normal",borderWidth:2,borderColor:l,fontColor:l,backgroundColor:l}):t=="BorderToFill"&&(e=i(o({},e),{fontColor:l,boxShadow:"0.normal",border:"2.normal",borderWidth:2,borderColor:l,backgroundColor:l})),l=="cloud"&&(e.fontColor="3.blur"),t!="Link"&&(e=o({position:"relative",ssEffectsOnActive:["shrink","push"]},e))),e}},m=r=>{let t=N(o({isLocked:!1,isActive:!1,isActiveStyles:{},isActiveClassName:"",tabIndex:0,className:"",color:"theme","aria-label":g.uuid.gen()},r)),n=t.seed;{let{isLocked:y=!1,isActive:f=!1,isActiveStyles:S={},isActiveClassName:T="",tone:a="border",color:s="theme",className:u=""}=t;t=o(o(o({},v.Size(r.seed,r.tone,r.size,s)),v.Tone(r.seed,r.tone,r.size,s)),t),t.className=[u,c("Wrap"),c("isNeutral_"+!f),c("isLocked_"+y),c("Tone_"+a),c("Color_"+s),c("Tone_"+a+"_Color_"+s)].join(" "),f&&(t=o(o({className:[t.className,T].join(" ")},t),S)),t=E(t)}if(n=="Button"){let l=t,{isLocked:y,isActive:f,isActiveClassName:S,isActiveStyles:T,submitOption:a,onClick:s}=l,u=B(l,["isLocked","isActive","isActiveClassName","isActiveStyles","submitOption","onClick"]);return a&&(a=o({acceptInvalidForm:!1,submitDelegationKey:"auxEnter"},a),u=i(o({},u),{"data-form-submit-button":a.formName,"data-sdfike":g.flatArray(a.submitDelegationKey).join(",")})),d("button",o({onClick:C=>P(void 0,null,function*(){if(s&&s(C),!a)return;let b=yield I(a.formName);!a.acceptInvalidForm&&!b.valid||a.callback(b.data,b.valid)})},u))}else if(n=="Label"){let e=t,{isLocked:y,isActive:f,isActiveClassName:S,isActiveStyles:T}=e,a=B(e,["isLocked","isActive","isActiveClassName","isActiveStyles"]);return d("label",o({},a))}else if(n=="Anchor"){let A=t,{isLocked:y,isActive:f,isActiveClassName:S,isActiveStyles:T,href:a="",newTab:s,sync:u,shiftQueryParams:C}=A,b=B(A,["isLocked","isActive","isActiveClassName","isActiveStyles","href","newTab","sync","shiftQueryParams"]);return d("button",o({onClick:L=>{let z=L.ctrlKey||L.metaKey,R=s||!!z,h=a;C&&(h+=location.search),u?x.pushSync(h):x.push(h,!!R)}},b))}return null},p=(r,t)=>({XS:n=>d(m,i(o({},n),{seed:r,tone:t,size:"S"})),S:n=>d(m,i(o({},n),{seed:r,tone:t,size:"S"})),R:n=>d(m,i(o({},n),{seed:r,tone:t,size:"R"})),L:n=>d(m,i(o({},n),{seed:r,tone:t,size:"L"}))}),k=r=>({Plain:t=>d(m,i(o({},t),{seed:r,tone:"Plain",size:"R"})),Link:t=>d(m,i(o({},t),{seed:r,tone:"Link",size:"R"})),Normal:p(r,"Normal"),Border:p(r,"Border"),Prime:p(r,"Prime"),Sub:p(r,"Sub"),Clear:p(r,"Clear"),FillToBorder:p(r,"FillToBorder"),BorderToFill:p(r,"BorderToFill")}),F={Button:k("Button"),Label:k("Label"),Anchor:k("Anchor")};export{F as Button,F as default};
+import {
+  __async,
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-JJ3PEWPN.js";
+import { jsx } from "react/jsx-runtime";
+import {
+  $$,
+  pageTransit,
+  ReadStyleSet,
+  collectForm,
+  GenerateClassName
+} from "../@utils/_";
+import { ButtonClasses } from "../@styles/componentClasses/_";
+const Styles = {
+  Size: (seed, tone, size, color) => {
+    let styles = {
+      fontSize: "inherit"
+    };
+    size = size || "R";
+    if (["Plain", "Link"].includes(tone))
+      return {};
+    if (size == "XS") {
+      styles = __spreadProps(__spreadValues({}, styles), {
+        padding: ["1/3", "2/3"],
+        fontSize: "0.xs",
+        borderRadius: "3.tone.tertiary"
+      });
+    } else if (size == "S") {
+      styles = __spreadProps(__spreadValues({}, styles), {
+        padding: ["1/2", "3/4"],
+        fontSize: "1.mini",
+        borderRadius: "3.tone.tertiary"
+      });
+    } else if (size == "R") {
+      styles.padding = ["3/4", 1];
+      if (tone == "Prime") {
+        styles.padding = ["3/4", 2];
+      }
+    } else if (size == "L") {
+      styles.padding = [1, 3];
+      styles.fontSize = "3.paragraph";
+      styles.isSemiBoldFont = true;
+    }
+    styles = __spreadValues({
+      borderRadius: "2.tone.secondary",
+      transition: "middle",
+      position: "relative",
+      textAlign: "center"
+    }, styles);
+    return styles;
+  },
+  Tone: (seed, tone, size, color) => {
+    let styles = {
+      display: "inlineBlock",
+      fontWeight: "inherit",
+      fontColor: "inherit",
+      border: "unset"
+    };
+    if (tone == "Plain")
+      return styles;
+    if (tone == "Link") {
+      styles.fontColor = "theme";
+      styles.textAlign = "left";
+      styles.backgroundColor = "trans";
+    } else if (tone == "Normal") {
+      styles = __spreadProps(__spreadValues({}, styles), {
+        backgroundColor: "trans"
+      });
+    } else if (tone == "Border") {
+      styles = __spreadProps(__spreadValues({}, styles), {
+        backgroundColor: "1.layer.base",
+        border: "2.normal",
+        borderStyle: "solid",
+        boxShadow: "0.thin"
+      });
+    } else if (tone == "Prime") {
+      styles = __spreadProps(__spreadValues({}, styles), {
+        isSemiBoldFont: true,
+        fontColor: "white",
+        backgroundColor: color,
+        boxShadow: "0.normal",
+        ssEffectsOnActive: [
+          "shrink",
+          "push",
+          "ripple.white"
+        ]
+      });
+      if (color == "white") {
+        styles = __spreadProps(__spreadValues({}, styles), {
+          fontColor: "theme",
+          ssEffectsOnActive: [
+            "shrink",
+            "push",
+            "ripple.cloud"
+          ]
+        });
+      }
+    } else if (tone == "Sub") {
+      styles = __spreadProps(__spreadValues({}, styles), {
+        fontColor: color,
+        ssEffectsOnActive: [
+          "shrink",
+          "ripple.cloud"
+        ]
+      });
+    } else if (tone == "Clear") {
+      styles = __spreadProps(__spreadValues({}, styles), {
+        fontColor: color,
+        backgroundColor: "trans",
+        ssEffectsOnActive: [
+          "shrink",
+          "ripple.cloud"
+        ]
+      });
+    } else if (tone == "FillToBorder") {
+      styles = __spreadProps(__spreadValues({}, styles), {
+        boxShadow: "0.normal",
+        border: "2.normal",
+        borderWidth: 2,
+        borderColor: color,
+        fontColor: color,
+        backgroundColor: color
+      });
+    } else if (tone == "BorderToFill") {
+      styles = __spreadProps(__spreadValues({}, styles), {
+        fontColor: color,
+        boxShadow: "0.normal",
+        border: "2.normal",
+        borderWidth: 2,
+        borderColor: color,
+        backgroundColor: color
+      });
+    }
+    if (color == "cloud") {
+      styles.fontColor = "3.blur";
+    }
+    if (tone != "Link") {
+      styles = __spreadValues({
+        position: "relative",
+        ssEffectsOnActive: ["shrink", "push"]
+      }, styles);
+    }
+    return styles;
+  }
+};
+const SeedWrapper = (params) => {
+  let Params = ReadStyleSet(__spreadValues({
+    isLocked: false,
+    isActive: false,
+    isActiveStyles: {},
+    isActiveClassName: "",
+    tabIndex: 0,
+    className: "",
+    color: "theme",
+    // componentID: $$.uuid.gen(),
+    "aria-label": $$.uuid.gen()
+  }, params));
+  let seed = Params.seed;
+  {
+    let {
+      isLocked = false,
+      isActive = false,
+      isActiveStyles = {},
+      isActiveClassName = "",
+      tone = "border",
+      color = "theme",
+      className = ""
+    } = Params;
+    Params = __spreadValues(__spreadValues(__spreadValues({}, Styles.Size(params.seed, params.tone, params.size, color)), Styles.Tone(params.seed, params.tone, params.size, color)), Params);
+    Params.className = [
+      className,
+      ButtonClasses("Wrap"),
+      ButtonClasses("isNeutral_" + !isActive),
+      ButtonClasses("isLocked_" + isLocked),
+      ButtonClasses("Tone_" + tone),
+      ButtonClasses("Color_" + color),
+      ButtonClasses("Tone_" + tone + "_Color_" + color)
+    ].join(" ");
+    if (isActive) {
+      Params = __spreadValues(__spreadValues({
+        className: [
+          Params.className,
+          isActiveClassName
+        ].join(" ")
+      }, Params), isActiveStyles);
+    }
+    Params = GenerateClassName(Params);
+  }
+  if (seed == "Button") {
+    let _a = Params, {
+      isLocked,
+      isActive,
+      isActiveClassName,
+      isActiveStyles,
+      submitOption: submitOption,
+      onClick
+    } = _a, Props = __objRest(_a, [
+      "isLocked",
+      "isActive",
+      "isActiveClassName",
+      "isActiveStyles",
+      // componentID,
+      "submitOption",
+      "onClick"
+    ]);
+    if (submitOption) {
+      submitOption = __spreadValues({
+        acceptInvalidForm: false,
+        submitDelegationKey: "auxEnter"
+      }, submitOption);
+      Props = __spreadProps(__spreadValues({}, Props), {
+        "data-form-submit-button": submitOption.formName,
+        "data-sdfike": $$.flatArray(submitOption.submitDelegationKey).join(",")
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      __spreadValues({
+        onClick: (args) => __async(void 0, null, function* () {
+          if (onClick)
+            onClick(args);
+          if (!submitOption)
+            return;
+          let form = yield collectForm(submitOption.formName);
+          if (!submitOption.acceptInvalidForm && !form.valid)
+            return;
+          submitOption.callback(form.data, form.valid);
+        })
+      }, Props)
+    );
+  } else if (seed == "Label") {
+    let _b = Params, {
+      isLocked,
+      isActive,
+      isActiveClassName,
+      isActiveStyles
+    } = _b, Props = __objRest(_b, [
+      "isLocked",
+      "isActive",
+      "isActiveClassName",
+      "isActiveStyles"
+    ]);
+    return /* @__PURE__ */ jsx("label", __spreadValues({}, Props));
+  } else if (seed == "Anchor") {
+    let _c = Params, {
+      isLocked,
+      isActive,
+      isActiveClassName,
+      isActiveStyles,
+      href: href = "",
+      newTab,
+      sync,
+      shiftQueryParams
+    } = _c, Props = __objRest(_c, [
+      "isLocked",
+      "isActive",
+      "isActiveClassName",
+      "isActiveStyles",
+      // componentID,
+      "href",
+      "newTab",
+      "sync",
+      "shiftQueryParams"
+    ]);
+    return /* @__PURE__ */ jsx(
+      "button",
+      __spreadValues({
+        onClick: (event) => {
+          let aux = event.ctrlKey || event.metaKey;
+          let openNew = newTab || !!aux;
+          let URL = href;
+          if (shiftQueryParams)
+            URL += location.search;
+          if (sync) {
+            pageTransit.pushSync(URL);
+          } else {
+            pageTransit.push(URL, !!openNew);
+          }
+        }
+      }, Props)
+    );
+  }
+  return null;
+};
+const SizeBalancer = (seed, tone) => {
+  return {
+    XS: (params) => /* @__PURE__ */ jsx(SeedWrapper, __spreadProps(__spreadValues({}, params), { seed, tone, size: "S" })),
+    S: (params) => /* @__PURE__ */ jsx(SeedWrapper, __spreadProps(__spreadValues({}, params), { seed, tone, size: "S" })),
+    R: (params) => /* @__PURE__ */ jsx(SeedWrapper, __spreadProps(__spreadValues({}, params), { seed, tone, size: "R" })),
+    L: (params) => /* @__PURE__ */ jsx(SeedWrapper, __spreadProps(__spreadValues({}, params), { seed, tone, size: "L" }))
+  };
+};
+const ToneBalancer = (seed) => {
+  return {
+    Plain: (params) => /* @__PURE__ */ jsx(SeedWrapper, __spreadProps(__spreadValues({}, params), { seed, tone: "Plain", size: "R" })),
+    Link: (params) => /* @__PURE__ */ jsx(SeedWrapper, __spreadProps(__spreadValues({}, params), { seed, tone: "Link", size: "R" })),
+    Normal: SizeBalancer(seed, "Normal"),
+    Border: SizeBalancer(seed, "Border"),
+    Prime: SizeBalancer(seed, "Prime"),
+    Sub: SizeBalancer(seed, "Sub"),
+    Clear: SizeBalancer(seed, "Clear"),
+    FillToBorder: SizeBalancer(seed, "FillToBorder"),
+    BorderToFill: SizeBalancer(seed, "BorderToFill")
+  };
+};
+const Button = {
+  Button: ToneBalancer("Button"),
+  Label: ToneBalancer("Label"),
+  Anchor: ToneBalancer("Anchor")
+};
+export {
+  Button,
+  Button as default
+};