@serendie/ui/dist/components/Button/Button.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsxs as g, jsx as o } from "react/jsx-runtime";
import b from "react";
import { ProgressIndicatorIndeterminate as h } from "../ProgressIndicator/ProgressIndicatorIndeterminate.js";
import { css as f } from "../../styled-system/css/css.js";
import { cx as x } from "../../styled-system/css/cx.js";
import { cva as _ } from "../../styled-system/css/cva.js";
import { styled as v } from "../../styled-system/jsx/factory.js";
const r = {
  color: "sd.system.color.component.onSurface",
  outlineWidth: "sd.system.dimension.border.medium",
  outlineStyle: "solid",
  outlineColor: "sd.system.color.component.outline",
  _enabled: {
    _hover: {
      bgColor: "sd.system.color.interaction.hoveredVariant"
    },
    _focusVisible: {
      outlineColor: "sd.system.color.component.outlineDim",
      bgColor: "sd.system.color.interaction.hoveredVariant"
    }
  },
  _disabled: {
    bgColor: "sd.system.color.interaction.disabled",
    color: "sd.system.color.interaction.disabledOnSurface",
    outline: "none"
  }
}, l = _({
  base: {
    borderRadius: "sd.system.dimension.radius.full",
    position: "relative",
    display: "inline-flex",
    gap: "sd.system.dimension.spacing.twoExtraSmall",
    alignItems: "center",
    justifyContent: "center",
    overflow: "hidden",
    cursor: "pointer",
    _disabled: {
      cursor: "not-allowed"
    }
  },
  variants: {
    styleType: {
      filled: {
        bg: "sd.system.color.impression.primaryContainer",
        color: "sd.system.color.impression.onPrimaryContainer",
        _enabled: {
          _hover: {
            _after: {
              content: "''",
              position: "absolute",
              inset: "0",
              bg: "sd.system.color.interaction.hovered"
            }
          },
          _focusVisible: {
            outlineWidth: "sd.system.dimension.border.medium",
            outlineStyle: "solid",
            outlineColor: "sd.system.color.interaction.hovered",
            _after: {
              content: "''",
              position: "absolute",
              inset: "0",
              bg: "sd.system.color.interaction.hovered"
            }
          }
        },
        _disabled: {
          bg: "sd.system.color.interaction.disabled",
          color: "sd.system.color.interaction.disabledOnSurface"
        }
      },
      ghost: {
        color: "sd.system.color.impression.primary",
        _enabled: {
          _hover: {
            bgColor: "sd.system.color.interaction.hoveredVariant"
          },
          _focusVisible: {
            bgColor: "sd.system.color.interaction.hoveredVariant",
            outlineWidth: "sd.system.dimension.border.medium",
            outlineStyle: "solid",
            outlineColor: "sd.system.color.component.outlineDim"
          }
        },
        _disabled: {
          color: "sd.system.color.interaction.disabledOnSurface"
        }
      },
      outlined: r,
      rectangle: {
        ...r,
        borderRadius: "sd.system.dimension.radius.medium"
      }
    },
    size: {
      medium: {
        height: 48,
        px: "sd.system.dimension.spacing.extraLarge",
        py: "sd.system.dimension.spacing.small",
        textStyle: "sd.system.typography.label.large_compact",
        expanded: {
          textStyle: "sd.system.typography.label.large_expanded"
        }
      },
      small: {
        height: 32,
        px: "sd.system.dimension.spacing.small",
        py: "sd.system.dimension.spacing.twoExtraSmall",
        textStyle: "sd.system.typography.label.medium_compact",
        expanded: {
          textStyle: "sd.system.typography.label.medium_expanded"
        }
      }
    }
  },
  defaultVariants: {
    styleType: "filled",
    size: "medium"
  }
}), t = v("span", {
  base: {
    position: "relative",
    zIndex: "sd.system.elevation.zIndex.base"
  }
}), R = b.forwardRef(
  (n, a) => {
    const [
      d,
      { children: m, leftIcon: e, rightIcon: s, isLoading: i, className: c, ...y }
    ] = l.splitVariantProps(n), p = l(d), u = f(
      e || s ? n.size === "medium" ? {
        //アイコンがある側 `spacing.medium`、無い側は`spacing.extraLarge`
        paddingLeft: e ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge",
        paddingRight: s ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge"
      } : {
        //アイコンがある側 `spacing.extraSmall`、無い側は`spacing.medium`
        paddingLeft: e ? "sd.system.dimension.spacing.extraSmall" : "sd.system.dimension.spacing.medium",
        paddingRight: s ? "sd.system.dimension.spacing.extraSmall" : "sd.system.dimension.spacing.medium"
      } : {}
    );
    return /* @__PURE__ */ g(
      "button",
      {
        ref: a,
        className: x(p, u, c),
        ...y,
        children: [
          i && /* @__PURE__ */ o(
            h,
            {
              type: "circular",
              size: d.size || "medium",
              color: "subtle"
            }
          ),
          !i && e && /* @__PURE__ */ o(t, { p: "2px", children: e }),
          /* @__PURE__ */ o(t, { children: m }),
          !i && s && /* @__PURE__ */ o(t, { p: "2px", children: s })
        ]
      }
    );
  }
);
export {
  R as Button,
  l as ButtonStyle
};