create-plasmic-app 0.0.66 → 0.0.68

package/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx

@@ -0,0 +1,725 @@
+// @ts-nocheck
+/* eslint-disable */
+/* tslint:disable */
+/* prettier-ignore-start */
+
+/** @jsxRuntime classic */
+/** @jsx createPlasmicElementProxy */
+/** @jsxFrag React.Fragment */
+
+// This class is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+// Component: TQcvW_pSKi3
+
+import * as React from "react";
+
+import * as p from "@plasmicapp/react-web";
+import * as ph from "@plasmicapp/react-web/lib/host";
+
+import * as pp from "@plasmicapp/react-web";
+import {
+  hasVariant,
+  classNames,
+  wrapWithClassName,
+  createPlasmicElementProxy,
+  makeFragment,
+  MultiChoiceArg,
+  SingleBooleanChoiceArg,
+  SingleChoiceArg,
+  pick,
+  omit,
+  useTrigger,
+  StrictProps,
+  deriveRenderOpts,
+  ensureGlobalVariants
+} from "@plasmicapp/react-web";
+
+import "@plasmicapp/react-web/lib/plasmic.css";
+
+import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+import sty from "./PlasmicButton.module.css"; // plasmic-import: TQcvW_pSKi3/css
+
+import ChecksvgIcon from "./icons/PlasmicIcon__Checksvg"; // plasmic-import: gj-_D7n31Ho/icon
+import IconIcon from "./icons/PlasmicIcon__Icon"; // plasmic-import: 6PNxx3YMyDQ/icon
+
+export type PlasmicButton__VariantMembers = {
+  showStartIcon: "showStartIcon";
+  showEndIcon: "showEndIcon";
+  isDisabled: "isDisabled";
+  shape: "rounded" | "round" | "sharp";
+  size: "compact" | "minimal";
+  color:
+    | "blue"
+    | "green"
+    | "yellow"
+    | "red"
+    | "sand"
+    | "white"
+    | "softBlue"
+    | "softGreen"
+    | "softYellow"
+    | "softRed"
+    | "softSand"
+    | "clear"
+    | "link";
+};
+export type PlasmicButton__VariantsArgs = {
+  showStartIcon?: SingleBooleanChoiceArg<"showStartIcon">;
+  showEndIcon?: SingleBooleanChoiceArg<"showEndIcon">;
+  isDisabled?: SingleBooleanChoiceArg<"isDisabled">;
+  shape?: SingleChoiceArg<"rounded" | "round" | "sharp">;
+  size?: SingleChoiceArg<"compact" | "minimal">;
+  color?: SingleChoiceArg<
+    | "blue"
+    | "green"
+    | "yellow"
+    | "red"
+    | "sand"
+    | "white"
+    | "softBlue"
+    | "softGreen"
+    | "softYellow"
+    | "softRed"
+    | "softSand"
+    | "clear"
+    | "link"
+  >;
+};
+type VariantPropType = keyof PlasmicButton__VariantsArgs;
+export const PlasmicButton__VariantProps = new Array<VariantPropType>(
+  "showStartIcon",
+  "showEndIcon",
+  "isDisabled",
+  "shape",
+  "size",
+  "color"
+);
+
+export type PlasmicButton__ArgsType = {
+  children?: React.ReactNode;
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  link?: string;
+};
+type ArgPropType = keyof PlasmicButton__ArgsType;
+export const PlasmicButton__ArgProps = new Array<ArgPropType>(
+  "children",
+  "startIcon",
+  "endIcon",
+  "link"
+);
+
+export type PlasmicButton__OverridesType = {
+  root?: p.Flex<"button">;
+  startIconContainer?: p.Flex<"div">;
+  contentContainer?: p.Flex<"div">;
+  endIconContainer?: p.Flex<"div">;
+};
+
+export interface DefaultButtonProps extends pp.BaseButtonProps {
+  shape?: SingleChoiceArg<"rounded" | "round" | "sharp">;
+  size?: SingleChoiceArg<"compact" | "minimal">;
+  color?: SingleChoiceArg<
+    | "blue"
+    | "green"
+    | "yellow"
+    | "red"
+    | "sand"
+    | "white"
+    | "softBlue"
+    | "softGreen"
+    | "softYellow"
+    | "softRed"
+    | "softSand"
+    | "clear"
+    | "link"
+  >;
+}
+
+const __wrapUserFunction =
+  globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn());
+const __wrapUserPromise =
+  globalThis.__PlasmicWrapUserPromise ??
+  (async (loc, promise) => {
+    return await promise;
+  });
+
+function PlasmicButton__RenderFunc(props: {
+  variants: PlasmicButton__VariantsArgs;
+  args: PlasmicButton__ArgsType;
+  overrides: PlasmicButton__OverridesType;
+  forNode?: string;
+}) {
+  const { variants, overrides, forNode } = props;
+
+  const $ctx = ph.useDataEnv?.() || {};
+  const args = React.useMemo(() => Object.assign({}, props.args), [props.args]);
+
+  const $props = {
+    ...args,
+    ...variants
+  };
+  const refsRef = React.useRef({});
+  const $refs = refsRef.current;
+
+  const currentUser = p.useCurrentUser?.() || {};
+  const [$queries, setDollarQueries] = React.useState({});
+  const stateSpecs = React.useMemo(
+    () => [
+      {
+        path: "showStartIcon",
+        type: "private",
+        variableType: "variant",
+        initFunc: true
+          ? ({ $props, $state, $queries, $ctx }) => $props.showStartIcon
+          : undefined
+      },
+      {
+        path: "showEndIcon",
+        type: "private",
+        variableType: "variant",
+        initFunc: true
+          ? ({ $props, $state, $queries, $ctx }) => $props.showEndIcon
+          : undefined
+      },
+      {
+        path: "isDisabled",
+        type: "private",
+        variableType: "variant",
+        initFunc: true
+          ? ({ $props, $state, $queries, $ctx }) => $props.isDisabled
+          : undefined
+      },
+      {
+        path: "shape",
+        type: "private",
+        variableType: "variant",
+        initFunc: true
+          ? ({ $props, $state, $queries, $ctx }) => $props.shape
+          : undefined
+      },
+      {
+        path: "size",
+        type: "private",
+        variableType: "variant",
+        initFunc: true
+          ? ({ $props, $state, $queries, $ctx }) => $props.size
+          : undefined
+      },
+      {
+        path: "color",
+        type: "private",
+        variableType: "variant",
+        initFunc: true
+          ? ({ $props, $state, $queries, $ctx }) => $props.color
+          : undefined
+      }
+    ],
+    [$props, $ctx]
+  );
+  const $state = p.useDollarState(stateSpecs, { $props, $ctx, $queries });
+
+  const [isRootFocusVisibleWithin, triggerRootFocusVisibleWithinProps] =
+    useTrigger("useFocusVisibleWithin", {
+      isTextInput: false
+    });
+  const triggers = {
+    focusVisibleWithin_root: isRootFocusVisibleWithin
+  };
+
+  return (
+    <p.Stack
+      as={"button"}
+      data-plasmic-name={"root"}
+      data-plasmic-override={overrides.root}
+      data-plasmic-root={true}
+      data-plasmic-for-node={forNode}
+      hasGap={true}
+      className={classNames(
+        projectcss.all,
+        projectcss.button,
+        projectcss.root_reset,
+        projectcss.plasmic_default_styles,
+        projectcss.plasmic_mixins,
+        sty.root,
+        {
+          [sty.root___focusVisibleWithin]: triggers.focusVisibleWithin_root,
+          [sty.rootcolor_blue]: hasVariant($state, "color", "blue"),
+          [sty.rootcolor_clear]: hasVariant($state, "color", "clear"),
+          [sty.rootcolor_green]: hasVariant($state, "color", "green"),
+          [sty.rootcolor_link]: hasVariant($state, "color", "link"),
+          [sty.rootcolor_link_size_minimal]:
+            hasVariant($state, "color", "link") &&
+            hasVariant($state, "size", "minimal"),
+          [sty.rootcolor_red]: hasVariant($state, "color", "red"),
+          [sty.rootcolor_sand]: hasVariant($state, "color", "sand"),
+          [sty.rootcolor_softBlue]: hasVariant($state, "color", "softBlue"),
+          [sty.rootcolor_softGreen]: hasVariant($state, "color", "softGreen"),
+          [sty.rootcolor_softRed]: hasVariant($state, "color", "softRed"),
+          [sty.rootcolor_softSand]: hasVariant($state, "color", "softSand"),
+          [sty.rootcolor_softYellow]: hasVariant($state, "color", "softYellow"),
+          [sty.rootcolor_white]: hasVariant($state, "color", "white"),
+          [sty.rootcolor_yellow]: hasVariant($state, "color", "yellow"),
+          [sty.rootisDisabled]: hasVariant($state, "isDisabled", "isDisabled"),
+          [sty.rootshape_round]: hasVariant($state, "shape", "round"),
+          [sty.rootshape_round_size_compact]:
+            hasVariant($state, "shape", "round") &&
+            hasVariant($state, "size", "compact"),
+          [sty.rootshape_rounded]: hasVariant($state, "shape", "rounded"),
+          [sty.rootshape_rounded_showStartIcon]:
+            hasVariant($state, "shape", "rounded") &&
+            hasVariant($state, "showStartIcon", "showStartIcon"),
+          [sty.rootshape_rounded_size_compact]:
+            hasVariant($state, "size", "compact") &&
+            hasVariant($state, "shape", "rounded"),
+          [sty.rootshape_sharp]: hasVariant($state, "shape", "sharp"),
+          [sty.rootshowEndIcon]: hasVariant(
+            $state,
+            "showEndIcon",
+            "showEndIcon"
+          ),
+          [sty.rootshowEndIcon_shape_rounded]:
+            hasVariant($state, "showEndIcon", "showEndIcon") &&
+            hasVariant($state, "shape", "rounded"),
+          [sty.rootshowEndIcon_size_compact]:
+            hasVariant($state, "size", "compact") &&
+            hasVariant($state, "showEndIcon", "showEndIcon"),
+          [sty.rootshowEndIcon_size_compact_showStartIcon]:
+            hasVariant($state, "size", "compact") &&
+            hasVariant($state, "showStartIcon", "showStartIcon") &&
+            hasVariant($state, "showEndIcon", "showEndIcon"),
+          [sty.rootshowStartIcon]: hasVariant(
+            $state,
+            "showStartIcon",
+            "showStartIcon"
+          ),
+          [sty.rootsize_compact]: hasVariant($state, "size", "compact"),
+          [sty.rootsize_compact_showStartIcon]:
+            hasVariant($state, "size", "compact") &&
+            hasVariant($state, "showStartIcon", "showStartIcon"),
+          [sty.rootsize_minimal]: hasVariant($state, "size", "minimal")
+        }
+      )}
+      data-plasmic-trigger-props={[triggerRootFocusVisibleWithinProps]}
+    >
+      {(hasVariant($state, "showStartIcon", "showStartIcon") ? true : false) ? (
+        <div
+          data-plasmic-name={"startIconContainer"}
+          data-plasmic-override={overrides.startIconContainer}
+          className={classNames(projectcss.all, sty.startIconContainer, {
+            [sty.startIconContainercolor_blue]: hasVariant(
+              $state,
+              "color",
+              "blue"
+            ),
+            [sty.startIconContainershape_rounded_showStartIcon]:
+              hasVariant($state, "shape", "rounded") &&
+              hasVariant($state, "showStartIcon", "showStartIcon"),
+            [sty.startIconContainershowStartIcon]: hasVariant(
+              $state,
+              "showStartIcon",
+              "showStartIcon"
+            )
+          })}
+        >
+          {p.renderPlasmicSlot({
+            defaultContents: (
+              <ChecksvgIcon
+                className={classNames(projectcss.all, sty.svg__s6Xxe)}
+                role={"img"}
+              />
+            ),
+
+            value: args.startIcon,
+            className: classNames(sty.slotTargetStartIcon, {
+              [sty.slotTargetStartIconcolor_blue]: hasVariant(
+                $state,
+                "color",
+                "blue"
+              ),
+              [sty.slotTargetStartIconcolor_clear]: hasVariant(
+                $state,
+                "color",
+                "clear"
+              ),
+              [sty.slotTargetStartIconcolor_link]: hasVariant(
+                $state,
+                "color",
+                "link"
+              ),
+              [sty.slotTargetStartIconcolor_softBlue]: hasVariant(
+                $state,
+                "color",
+                "softBlue"
+              ),
+              [sty.slotTargetStartIconcolor_softGreen]: hasVariant(
+                $state,
+                "color",
+                "softGreen"
+              ),
+              [sty.slotTargetStartIconcolor_softRed]: hasVariant(
+                $state,
+                "color",
+                "softRed"
+              ),
+              [sty.slotTargetStartIconcolor_softSand]: hasVariant(
+                $state,
+                "color",
+                "softSand"
+              ),
+              [sty.slotTargetStartIconcolor_softYellow]: hasVariant(
+                $state,
+                "color",
+                "softYellow"
+              ),
+              [sty.slotTargetStartIconcolor_white]: hasVariant(
+                $state,
+                "color",
+                "white"
+              ),
+              [sty.slotTargetStartIconcolor_yellow]: hasVariant(
+                $state,
+                "color",
+                "yellow"
+              ),
+              [sty.slotTargetStartIconshowStartIcon]: hasVariant(
+                $state,
+                "showStartIcon",
+                "showStartIcon"
+              )
+            })
+          })}
+        </div>
+      ) : null}
+
+      <div
+        data-plasmic-name={"contentContainer"}
+        data-plasmic-override={overrides.contentContainer}
+        className={classNames(projectcss.all, sty.contentContainer, {
+          [sty.contentContainer___focusVisibleWithin]:
+            triggers.focusVisibleWithin_root,
+          [sty.contentContainerisDisabled]: hasVariant(
+            $state,
+            "isDisabled",
+            "isDisabled"
+          ),
+          [sty.contentContainershape_rounded]: hasVariant(
+            $state,
+            "shape",
+            "rounded"
+          ),
+          [sty.contentContainershowEndIcon]: hasVariant(
+            $state,
+            "showEndIcon",
+            "showEndIcon"
+          )
+        })}
+      >
+        {p.renderPlasmicSlot({
+          defaultContents: "Button",
+          value: args.children,
+          className: classNames(sty.slotTargetChildren, {
+            [sty.slotTargetChildren___focusVisibleWithin]:
+              triggers.focusVisibleWithin_root,
+            [sty.slotTargetChildrencolor_blue]: hasVariant(
+              $state,
+              "color",
+              "blue"
+            ),
+            [sty.slotTargetChildrencolor_clear]: hasVariant(
+              $state,
+              "color",
+              "clear"
+            ),
+            [sty.slotTargetChildrencolor_green]: hasVariant(
+              $state,
+              "color",
+              "green"
+            ),
+            [sty.slotTargetChildrencolor_link]: hasVariant(
+              $state,
+              "color",
+              "link"
+            ),
+            [sty.slotTargetChildrencolor_link_size_minimal]:
+              hasVariant($state, "color", "link") &&
+              hasVariant($state, "size", "minimal"),
+            [sty.slotTargetChildrencolor_red]: hasVariant(
+              $state,
+              "color",
+              "red"
+            ),
+            [sty.slotTargetChildrencolor_sand]: hasVariant(
+              $state,
+              "color",
+              "sand"
+            ),
+            [sty.slotTargetChildrencolor_softBlue]: hasVariant(
+              $state,
+              "color",
+              "softBlue"
+            ),
+            [sty.slotTargetChildrencolor_softGreen]: hasVariant(
+              $state,
+              "color",
+              "softGreen"
+            ),
+            [sty.slotTargetChildrencolor_softRed]: hasVariant(
+              $state,
+              "color",
+              "softRed"
+            ),
+            [sty.slotTargetChildrencolor_softSand]: hasVariant(
+              $state,
+              "color",
+              "softSand"
+            ),
+            [sty.slotTargetChildrencolor_softYellow]: hasVariant(
+              $state,
+              "color",
+              "softYellow"
+            ),
+            [sty.slotTargetChildrencolor_white]: hasVariant(
+              $state,
+              "color",
+              "white"
+            ),
+            [sty.slotTargetChildrencolor_yellow]: hasVariant(
+              $state,
+              "color",
+              "yellow"
+            ),
+            [sty.slotTargetChildrenisDisabled]: hasVariant(
+              $state,
+              "isDisabled",
+              "isDisabled"
+            ),
+            [sty.slotTargetChildrenshape_rounded]: hasVariant(
+              $state,
+              "shape",
+              "rounded"
+            ),
+            [sty.slotTargetChildrenshowEndIcon]: hasVariant(
+              $state,
+              "showEndIcon",
+              "showEndIcon"
+            ),
+            [sty.slotTargetChildrenshowStartIcon]: hasVariant(
+              $state,
+              "showStartIcon",
+              "showStartIcon"
+            ),
+            [sty.slotTargetChildrensize_minimal]: hasVariant(
+              $state,
+              "size",
+              "minimal"
+            )
+          })
+        })}
+      </div>
+
+      {(hasVariant($state, "showEndIcon", "showEndIcon") ? true : false) ? (
+        <div
+          data-plasmic-name={"endIconContainer"}
+          data-plasmic-override={overrides.endIconContainer}
+          className={classNames(projectcss.all, sty.endIconContainer, {
+            [sty.endIconContainercolor_white]: hasVariant(
+              $state,
+              "color",
+              "white"
+            ),
+            [sty.endIconContainercolor_yellow]: hasVariant(
+              $state,
+              "color",
+              "yellow"
+            ),
+            [sty.endIconContainershowEndIcon]: hasVariant(
+              $state,
+              "showEndIcon",
+              "showEndIcon"
+            )
+          })}
+        >
+          {p.renderPlasmicSlot({
+            defaultContents: (
+              <IconIcon
+                className={classNames(projectcss.all, sty.svg__liJa)}
+                role={"img"}
+              />
+            ),
+
+            value: args.endIcon,
+            className: classNames(sty.slotTargetEndIcon, {
+              [sty.slotTargetEndIconcolor_clear]: hasVariant(
+                $state,
+                "color",
+                "clear"
+              ),
+              [sty.slotTargetEndIconcolor_link]: hasVariant(
+                $state,
+                "color",
+                "link"
+              ),
+              [sty.slotTargetEndIconcolor_softBlue]: hasVariant(
+                $state,
+                "color",
+                "softBlue"
+              ),
+              [sty.slotTargetEndIconcolor_softGreen]: hasVariant(
+                $state,
+                "color",
+                "softGreen"
+              ),
+              [sty.slotTargetEndIconcolor_softRed]: hasVariant(
+                $state,
+                "color",
+                "softRed"
+              ),
+              [sty.slotTargetEndIconcolor_softSand]: hasVariant(
+                $state,
+                "color",
+                "softSand"
+              ),
+              [sty.slotTargetEndIconcolor_softYellow]: hasVariant(
+                $state,
+                "color",
+                "softYellow"
+              ),
+              [sty.slotTargetEndIconcolor_white]: hasVariant(
+                $state,
+                "color",
+                "white"
+              ),
+              [sty.slotTargetEndIconcolor_yellow]: hasVariant(
+                $state,
+                "color",
+                "yellow"
+              ),
+              [sty.slotTargetEndIconshowEndIcon]: hasVariant(
+                $state,
+                "showEndIcon",
+                "showEndIcon"
+              )
+            })
+          })}
+        </div>
+      ) : null}
+    </p.Stack>
+  ) as React.ReactElement | null;
+}
+
+function useBehavior<P extends pp.BaseButtonProps>(
+  props: P,
+  ref: pp.ButtonRef
+) {
+  const b = pp.useButton<P, typeof PlasmicButton>(
+    PlasmicButton,
+    props,
+    {
+      showStartIconVariant: {
+        group: "showStartIcon",
+        variant: "showStartIcon"
+      },
+      showEndIconVariant: { group: "showEndIcon", variant: "showEndIcon" },
+      isDisabledVariant: { group: "isDisabled", variant: "isDisabled" },
+      contentSlot: "children",
+      startIconSlot: "startIcon",
+      endIconSlot: "endIcon",
+      root: "root"
+    },
+    ref
+  );
+
+  return b;
+}
+
+const PlasmicDescendants = {
+  root: ["root", "startIconContainer", "contentContainer", "endIconContainer"],
+  startIconContainer: ["startIconContainer"],
+  contentContainer: ["contentContainer"],
+  endIconContainer: ["endIconContainer"]
+} as const;
+type NodeNameType = keyof typeof PlasmicDescendants;
+type DescendantsType<T extends NodeNameType> =
+  (typeof PlasmicDescendants)[T][number];
+type NodeDefaultElementType = {
+  root: "button";
+  startIconContainer: "div";
+  contentContainer: "div";
+  endIconContainer: "div";
+};
+
+type ReservedPropsType = "variants" | "args" | "overrides";
+type NodeOverridesType<T extends NodeNameType> = Pick<
+  PlasmicButton__OverridesType,
+  DescendantsType<T>
+>;
+type NodeComponentProps<T extends NodeNameType> =
+  // Explicitly specify variants, args, and overrides as objects
+  {
+    variants?: PlasmicButton__VariantsArgs;
+    args?: PlasmicButton__ArgsType;
+    overrides?: NodeOverridesType<T>;
+  } & Omit<PlasmicButton__VariantsArgs, ReservedPropsType> & // Specify variants directly as props
+    /* Specify args directly as props*/ Omit<
+      PlasmicButton__ArgsType,
+      ReservedPropsType
+    > &
+    /* Specify overrides for each element directly as props*/ Omit<
+      NodeOverridesType<T>,
+      ReservedPropsType | VariantPropType | ArgPropType
+    > &
+    /* Specify props for the root element*/ Omit<
+      Partial<React.ComponentProps<NodeDefaultElementType[T]>>,
+      ReservedPropsType | VariantPropType | ArgPropType | DescendantsType<T>
+    >;
+
+function makeNodeComponent<NodeName extends NodeNameType>(nodeName: NodeName) {
+  type PropsType = NodeComponentProps<NodeName> & { key?: React.Key };
+  const func = function <T extends PropsType>(
+    props: T & StrictProps<T, PropsType>
+  ) {
+    const { variants, args, overrides } = React.useMemo(
+      () =>
+        deriveRenderOpts(props, {
+          name: nodeName,
+          descendantNames: [...PlasmicDescendants[nodeName]],
+          internalArgPropNames: PlasmicButton__ArgProps,
+          internalVariantPropNames: PlasmicButton__VariantProps
+        }),
+      [props, nodeName]
+    );
+    return PlasmicButton__RenderFunc({
+      variants,
+      args,
+      overrides,
+      forNode: nodeName
+    });
+  };
+  if (nodeName === "root") {
+    func.displayName = "PlasmicButton";
+  } else {
+    func.displayName = `PlasmicButton.${nodeName}`;
+  }
+  return func;
+}
+
+export const PlasmicButton = Object.assign(
+  // Top-level PlasmicButton renders the root element
+  makeNodeComponent("root"),
+  {
+    // Helper components rendering sub-elements
+    startIconContainer: makeNodeComponent("startIconContainer"),
+    contentContainer: makeNodeComponent("contentContainer"),
+    endIconContainer: makeNodeComponent("endIconContainer"),
+
+    // Metadata about props expected for PlasmicButton
+    internalVariantProps: PlasmicButton__VariantProps,
+    internalArgProps: PlasmicButton__ArgProps,
+
+    useBehavior
+  }
+);
+
+export default PlasmicButton;
+/* prettier-ignore-end */