@makeswift/runtime 0.28.10-canary.9 → 0.29.0-canary.19

package/dist/cjs/components/builtin/Button/Button.js

@@ -31,17 +31,13 @@ __export(Button_exports, {
   default: () => Button_default
 });
 module.exports = __toCommonJS(Button_exports);
-var import_jsx_runtime = (
-  // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.
-  require("react/jsx-runtime")
-);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_color = __toESM(require("color"));
 var import_colorToString = require("../../utils/colorToString");
 var import_Link = require("../../shared/Link");
-var import_use_style = require("../../../runtimes/react/use-style");
 var import_responsive_style = require("../../utils/responsive-style");
-var import_css = require("@emotion/css");
+var import_use_style = require("../../../runtimes/react/css-runtime/hooks/use-style");
 const Button = (0, import_react.forwardRef)(function Button2({
   as,
   id,
@@ -59,179 +55,172 @@ const Button = (0, import_react.forwardRef)(function Button2({
   ...restOfProps
 }, ref) {
   const Component = as ?? import_Link.Link;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Component,
-    {
-      ...restOfProps,
-      ref,
-      id,
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)({
-          display: "table",
-          border: 0,
-          outline: 0,
-          userSelect: "none",
-          cursor: "pointer",
-          fontFamily: "inherit",
-          textDecoration: "none",
-          textAlign: "center"
-        }),
-        (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveWidth)(width, "auto")),
-        margin,
-        (0, import_use_style.useStyle)(
-          (0, import_responsive_style.useResponsiveStyle)(
-            [variant, shape, size, textColor, color],
-            ([
-              variant2 = "flat",
-              shape2 = "rounded",
-              size2 = "medium",
-              textColor2 = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },
-              color2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
-            ]) => {
-              const fontSize = {
-                value: { small: 12, medium: 14, large: 18 }[size2],
-                unit: "px"
-              };
-              return {
-                color: (0, import_colorToString.colorToString)(textColor2),
-                borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape2]}px`,
-                padding: `${{ small: "8px 12px", medium: "12px 16px", large: "16px 20px" }[size2]}`,
-                fontSize: `${fontSize.value}${fontSize.unit}`,
-                ...{
-                  flat: {
-                    background: (0, import_colorToString.colorToString)(color2),
-                    border: "none",
-                    transition: ["color", "background", "border", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", "),
-                    ":hover": {
-                      background: (0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.1).hex()
-                    },
-                    ":active": {
-                      background: (0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.15).hex()
-                    }
-                  },
-                  outline: {
-                    background: "transparent",
-                    boxShadow: `inset 0 0 0 2px ${(0, import_colorToString.colorToString)(color2)}`,
-                    transition: ["color", "background", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", "),
-                    ":hover": {
-                      boxShadow: `inset 0 0 0 2px ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.1).hex()}`,
-                      color: (0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.1).hex()
-                    },
-                    ":active": {
-                      boxShadow: `inset 0 0 0 2px ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.15).hex()}`,
-                      color: (0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.15).hex()
-                    }
-                  },
-                  shadow: {
-                    background: (0, import_colorToString.colorToString)(color2),
-                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)",
-                    transition: ["transform", "box-shadow"].map((property) => `${property} 0.18s`).join(", "),
-                    ":hover": {
-                      boxShadow: "0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
-                      transform: "translateY(-1px)"
-                    },
-                    ":active": {
-                      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)",
-                      transform: "translateY(0px)"
-                    }
-                  },
-                  clear: {
-                    background: "transparent",
-                    border: "none",
-                    ":hover": {
-                      color: (0, import_color.default)((0, import_colorToString.colorToString)(textColor2)).alpha(0.5).toString()
-                    },
-                    ":active": {
-                      color: (0, import_color.default)((0, import_colorToString.colorToString)(textColor2)).alpha(0.6).toString()
-                    }
-                  },
-                  blocky: {
-                    background: (0, import_colorToString.colorToString)(color2),
-                    borderWidth: 1,
-                    borderStyle: "solid",
-                    borderColor: (0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.25).hex(),
-                    boxShadow: `0 4px ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.25).hex()}`,
-                    transition: ["transform", "box-shadow"].map((property) => `${property} 0.1s`).join(", "),
-                    ":hover": {
-                      transform: "translateY(2px)",
-                      boxShadow: `0 2px ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.25).hex()}`
-                    },
-                    ":active": {
-                      transform: "translateY(4px)",
-                      boxShadow: `0 0 ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.25).hex()}`
-                    }
-                  },
-                  bubbly: {
-                    background: `linear-gradient(
-                      180deg,
-                      ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).lighten(0.05).hex()},
-                      ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.3).saturate(0.05).hex()}
-                    )`,
-                    position: "relative",
-                    zIndex: "0",
-                    ":before": {
-                      position: "absolute",
-                      content: '""',
-                      top: 0,
-                      right: 0,
-                      bottom: 0,
-                      left: 0,
-                      zIndex: "-1",
-                      borderRadius: "inherit",
-                      background: `linear-gradient(
-                        180deg,
-                        ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).lighten(0.2).hex()},
-                        ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.2).saturate(0.05).hex()}
-                      )`,
-                      opacity: "0",
-                      transition: "opacity 0.15s"
-                    },
-                    ":hover": {
-                      ":before": {
-                        opacity: "1"
-                      }
-                    },
-                    ":active": {
-                      ":before": {
-                        opacity: "0.25"
-                      }
-                    }
-                  },
-                  skewed: {
-                    position: "relative",
-                    zIndex: "0",
-                    ":before": {
-                      position: "absolute",
-                      content: '""',
-                      top: 0,
-                      right: 0,
-                      bottom: 0,
-                      left: 0,
-                      zIndex: "-1",
-                      background: (0, import_colorToString.colorToString)(color2),
-                      transform: "skewX(-12deg)",
-                      borderRadius: "inherit",
-                      transition: "transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)"
-                    },
-                    ":hover:before": {
-                      transform: "skew(0deg)"
-                    },
-                    ":active:before": {
-                      transform: "skew(-8deg)"
-                    }
-                  }
-                }[variant2]
-              };
+  const buttonResponsiveCss = (0, import_responsive_style.useResponsiveStyle)(
+    [variant, shape, size, textColor, color],
+    ([
+      variant2 = "flat",
+      shape2 = "rounded",
+      size2 = "medium",
+      textColor2 = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },
+      color2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
+    ]) => {
+      const fontSize = {
+        value: { small: 12, medium: 14, large: 18 }[size2],
+        unit: "px"
+      };
+      return {
+        color: (0, import_colorToString.colorToString)(textColor2),
+        borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape2]}px`,
+        padding: `${{ small: "8px 12px", medium: "12px 16px", large: "16px 20px" }[size2]}`,
+        fontSize: `${fontSize.value}${fontSize.unit}`,
+        ...{
+          flat: {
+            background: (0, import_colorToString.colorToString)(color2),
+            border: "none",
+            transition: ["color", "background", "border", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", "),
+            "&:hover": {
+              background: (0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.1).hex()
+            },
+            "&:active": {
+              background: (0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.15).hex()
             }
-          )
-        ),
-        (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveTextStyle)(textStyle)),
-        className
-      ),
-      link,
-      children: children == null ? "Button Text" : children
+          },
+          outline: {
+            background: "transparent",
+            boxShadow: `inset 0 0 0 2px ${(0, import_colorToString.colorToString)(color2)}`,
+            transition: ["color", "background", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", "),
+            "&:hover": {
+              boxShadow: `inset 0 0 0 2px ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.1).hex()}`,
+              color: (0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.1).hex()
+            },
+            "&:active": {
+              boxShadow: `inset 0 0 0 2px ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.15).hex()}`,
+              color: (0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.15).hex()
+            }
+          },
+          shadow: {
+            background: (0, import_colorToString.colorToString)(color2),
+            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)",
+            transition: ["transform", "box-shadow"].map((property) => `${property} 0.18s`).join(", "),
+            "&:hover": {
+              boxShadow: "0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
+              transform: "translateY(-1px)"
+            },
+            "&:active": {
+              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)",
+              transform: "translateY(0px)"
+            }
+          },
+          clear: {
+            background: "transparent",
+            border: "none",
+            "&:hover": {
+              color: (0, import_color.default)((0, import_colorToString.colorToString)(textColor2)).alpha(0.5).toString()
+            },
+            "&:active": {
+              color: (0, import_color.default)((0, import_colorToString.colorToString)(textColor2)).alpha(0.6).toString()
+            }
+          },
+          blocky: {
+            background: (0, import_colorToString.colorToString)(color2),
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: (0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.25).hex(),
+            boxShadow: `0 4px ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.25).hex()}`,
+            transition: ["transform", "box-shadow"].map((property) => `${property} 0.1s`).join(", "),
+            "&:hover": {
+              transform: "translateY(2px)",
+              boxShadow: `0 2px ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.25).hex()}`
+            },
+            "&:active": {
+              transform: "translateY(4px)",
+              boxShadow: `0 0 ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.25).hex()}`
+            }
+          },
+          bubbly: {
+            background: `linear-gradient(
+              180deg,
+              ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).lighten(0.05).hex()},
+              ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.3).saturate(0.05).hex()}
+            )`,
+            position: "relative",
+            zIndex: "0",
+            "&:before": {
+              position: "absolute",
+              content: '""',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              zIndex: "-1",
+              borderRadius: "inherit",
+              background: `linear-gradient(
+                180deg,
+                ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).lighten(0.2).hex()},
+                ${(0, import_color.default)((0, import_colorToString.colorToString)(color2)).darken(0.2).saturate(0.05).hex()}
+              )`,
+              opacity: "0",
+              transition: "opacity 0.15s"
+            },
+            "&:hover": {
+              "&:before": {
+                opacity: "1"
+              }
+            },
+            "&:active": {
+              "&:before": {
+                opacity: "0.25"
+              }
+            }
+          },
+          skewed: {
+            position: "relative",
+            zIndex: "0",
+            "&:before": {
+              position: "absolute",
+              content: '""',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              zIndex: "-1",
+              background: (0, import_colorToString.colorToString)(color2),
+              transform: "skewX(-12deg)",
+              borderRadius: "inherit",
+              transition: "transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)"
+            },
+            "&:hover:before": {
+              transform: "skew(0deg)"
+            },
+            "&:active:before": {
+              transform: "skew(-8deg)"
+            }
+          }
+        }[variant2]
+      };
     }
   );
+  const buttonStyles = (0, import_use_style.composeStyles)(
+    (0, import_use_style.useStyle)({
+      display: "table",
+      border: 0,
+      outline: 0,
+      userSelect: "none",
+      cursor: "pointer",
+      fontFamily: "inherit",
+      textDecoration: "none",
+      textAlign: "center"
+    }),
+    (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveWidth)(width, "auto")),
+    margin,
+    (0, import_use_style.useStyle)(buttonResponsiveCss),
+    (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveTextStyle)(textStyle)),
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    buttonStyles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...restOfProps, ref, id, className: buttonStyles.className, link, children: children == null ? "Button Text" : children })
+  ] });
 });
 var Button_default = Button;
 //# sourceMappingURL=Button.js.map

package/dist/cjs/components/builtin/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  Ref,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport { type ResponsiveColor } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ButtonVariant } from './contants'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n  useResponsiveWidth,\n} from '../../utils/responsive-style'\nimport { cx } from '@emotion/css'\nimport {\n  type LinkData,\n  type ResponsiveLengthData,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: string\n  children?: ReactNode\n  link?: LinkData\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: ResponsiveTextStyleData\n  width?: ResponsiveLengthData\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<Ref<T>>,\n) {\n  const Component = as ?? Link\n\n  return (\n    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({\n          display: 'table',\n          border: 0,\n          outline: 0,\n          userSelect: 'none',\n          cursor: 'pointer',\n          fontFamily: 'inherit',\n          textDecoration: 'none',\n          textAlign: 'center',\n        }),\n        useStyle(useResponsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          useResponsiveStyle(\n            [variant, shape, size, textColor, color] as const,\n            ([\n              variant = 'flat',\n              shape = 'rounded',\n              size = 'medium',\n              textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n              color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n            ]) => {\n              const fontSize = {\n                value: { small: 12, medium: 14, large: 18 }[size],\n                unit: 'px',\n              }\n\n              return {\n                color: colorToString(textColor),\n                borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n                padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n                fontSize: `${fontSize.value}${fontSize.unit}`,\n                ...{\n                  flat: {\n                    background: colorToString(color),\n                    border: 'none',\n                    transition: ['color', 'background', 'border', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  outline: {\n                    background: 'transparent',\n                    boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n                    transition: ['color', 'background', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.1)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.15)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  shadow: {\n                    background: colorToString(color),\n                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.18s`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow:\n                        '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(-1px)',\n                    },\n\n                    ':active': {\n                      boxShadow:\n                        '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(0px)',\n                    },\n                  },\n                  clear: {\n                    background: 'transparent',\n                    border: 'none',\n\n                    ':hover': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n                    },\n\n                    ':active': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n                    },\n                  },\n                  blocky: {\n                    background: colorToString(color),\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n                    boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.1s`)\n                      .join(', '),\n\n                    ':hover': {\n                      transform: 'translateY(2px)',\n                      boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n\n                    ':active': {\n                      transform: 'translateY(4px)',\n                      boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n                  },\n                  bubbly: {\n                    background: `linear-gradient(\n                      180deg,\n                      ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                      ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n                    )`,\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      borderRadius: 'inherit',\n                      background: `linear-gradient(\n                        180deg,\n                        ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                        ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                      )`,\n                      opacity: '0',\n                      transition: 'opacity 0.15s',\n                    },\n\n                    ':hover': {\n                      ':before': {\n                        opacity: '1',\n                      },\n                    },\n\n                    ':active': {\n                      ':before': {\n                        opacity: '0.25',\n                      },\n                    },\n                  } as const,\n                  skewed: {\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      background: colorToString(color),\n                      transform: 'skewX(-12deg)',\n                      borderRadius: 'inherit',\n                      transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n                    },\n\n                    ':hover:before': {\n                      transform: 'skew(0deg)',\n                    },\n\n                    ':active:before': {\n                      transform: 'skew(-8deg)',\n                    },\n                  } as const,\n                }[variant],\n              }\n            },\n          ),\n        ),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        className,\n      )}\n      link={link}\n    >\n      {children == null ? 'Button Text' : children}\n    </Component>\n  )\n})\n\nexport default Button\n"],"mappings":"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","names":["Button","variant","shape","size","textColor","color","ColorHelper"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  Ref,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport { type ResponsiveColor } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ButtonVariant } from './contants'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n  useResponsiveWidth,\n} from '../../utils/responsive-style'\nimport {\n  type LinkData,\n  type ResponsiveLengthData,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: string\n  children?: ReactNode\n  link?: LinkData\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: ResponsiveTextStyleData\n  width?: ResponsiveLengthData\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<Ref<T>>,\n) {\n  const Component = as ?? Link\n\n  const buttonResponsiveCss = useResponsiveStyle(\n    [variant, shape, size, textColor, color] as const,\n    ([\n      variant = 'flat',\n      shape = 'rounded',\n      size = 'medium',\n      textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n      color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n    ]) => {\n      const fontSize = {\n        value: { small: 12, medium: 14, large: 18 }[size],\n        unit: 'px',\n      }\n\n      return {\n        color: colorToString(textColor),\n        borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n        padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n        fontSize: `${fontSize.value}${fontSize.unit}`,\n        ...{\n          flat: {\n            background: colorToString(color),\n            border: 'none',\n            transition: ['color', 'background', 'border', 'box-shadow']\n              .map(property => `${property} 0.15s ease-in-out`)\n              .join(', '),\n\n            '&:hover': {\n              background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n            },\n\n            '&:active': {\n              background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n            },\n          },\n          outline: {\n            background: 'transparent',\n            boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n            transition: ['color', 'background', 'box-shadow']\n              .map(property => `${property} 0.15s ease-in-out`)\n              .join(', '),\n\n            '&:hover': {\n              boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.1).hex()}`,\n              color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n            },\n\n            '&:active': {\n              boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.15).hex()}`,\n              color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n            },\n          },\n          shadow: {\n            background: colorToString(color),\n            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n            transition: ['transform', 'box-shadow'].map(property => `${property} 0.18s`).join(', '),\n\n            '&:hover': {\n              boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n              transform: 'translateY(-1px)',\n            },\n\n            '&:active': {\n              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n              transform: 'translateY(0px)',\n            },\n          },\n          clear: {\n            background: 'transparent',\n            border: 'none',\n\n            '&:hover': {\n              color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n            },\n\n            '&:active': {\n              color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n            },\n          },\n          blocky: {\n            background: colorToString(color),\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n            boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n            transition: ['transform', 'box-shadow'].map(property => `${property} 0.1s`).join(', '),\n\n            '&:hover': {\n              transform: 'translateY(2px)',\n              boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n            },\n\n            '&:active': {\n              transform: 'translateY(4px)',\n              boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n            },\n          },\n          bubbly: {\n            background: `linear-gradient(\n              180deg,\n              ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n              ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n            )`,\n            position: 'relative',\n            zIndex: '0',\n\n            '&:before': {\n              position: 'absolute',\n              content: '\"\"',\n              top: 0,\n              right: 0,\n              bottom: 0,\n              left: 0,\n              zIndex: '-1',\n              borderRadius: 'inherit',\n              background: `linear-gradient(\n                180deg,\n                ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n              )`,\n              opacity: '0',\n              transition: 'opacity 0.15s',\n            },\n\n            '&:hover': {\n              '&:before': {\n                opacity: '1',\n              },\n            },\n\n            '&:active': {\n              '&:before': {\n                opacity: '0.25',\n              },\n            },\n          } as const,\n          skewed: {\n            position: 'relative',\n            zIndex: '0',\n\n            '&:before': {\n              position: 'absolute',\n              content: '\"\"',\n              top: 0,\n              right: 0,\n              bottom: 0,\n              left: 0,\n              zIndex: '-1',\n              background: colorToString(color),\n              transform: 'skewX(-12deg)',\n              borderRadius: 'inherit',\n              transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n            },\n\n            '&:hover:before': {\n              transform: 'skew(0deg)',\n            },\n\n            '&:active:before': {\n              transform: 'skew(-8deg)',\n            },\n          } as const,\n        }[variant],\n      }\n    },\n  )\n\n  const buttonStyles = composeStyles(\n    useStyle({\n      display: 'table',\n      border: 0,\n      outline: 0,\n      userSelect: 'none',\n      cursor: 'pointer',\n      fontFamily: 'inherit',\n      textDecoration: 'none',\n      textAlign: 'center',\n    }),\n    useStyle(useResponsiveWidth(width, 'auto')),\n    margin,\n    useStyle(buttonResponsiveCss),\n    useStyle(useResponsiveTextStyle(textStyle)),\n    className,\n  )\n\n  return (\n    <>\n      {buttonStyles.styleElements}\n      {/* @ts-ignore: `ref` prop doesn't match between `Link` and `T`. */}\n      <Component {...restOfProps} ref={ref} id={id} className={buttonStyles.className} link={link}>\n        {children == null ? 'Button Text' : children}\n      </Component>\n    </>\n  )\n})\n\nexport default Button\n"],"mappings":"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","names":["Button","variant","shape","size","textColor","color","ColorHelper"]}