@yamada-ui/button
Version:
Yamada UI button components
276 lines (273 loc) • 9.2 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/button.tsx
var button_exports = {};
__export(button_exports, {
Button: () => Button,
useButtonType: () => useButtonType
});
module.exports = __toCommonJS(button_exports);
var import_core2 = require("@yamada-ui/core");
var import_loading = require("@yamada-ui/loading");
var import_ripple = require("@yamada-ui/ripple");
var import_utils2 = require("@yamada-ui/utils");
var import_react2 = require("react");
// src/button-group.tsx
var import_core = require("@yamada-ui/core");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)(
{
name: "ButtonGroupContext",
strict: false
}
);
var ButtonGroup = (0, import_core.forwardRef)(
({
className,
size,
variant,
isAttached,
attached = isAttached,
columnGap,
direction,
isDisabled,
disabled = isDisabled,
flexDirection = direction,
gap,
rowGap,
...rest
}, ref) => {
const column = flexDirection === "column" || flexDirection === "column-reverse";
const css = {
display: "inline-flex",
flexDirection
};
const context = (0, import_react.useMemo)(
() => ({ size, variant, disabled }),
[size, variant, disabled]
);
if (attached) {
Object.assign(css, {
"> *:first-of-type:not(:last-of-type)": column ? { borderBottomRadius: 0 } : { borderRightRadius: 0, borderRightWidth: "0px" },
"> *:not(:first-of-type):last-of-type": column ? { borderTopRadius: 0, borderTopWidth: "0px" } : { borderLeftRadius: 0 },
"> *:not(:first-of-type):not(:last-of-type)": column ? { borderRadius: 0, borderTopWidth: "0px" } : { borderRadius: 0, borderRightWidth: "0px" }
});
} else {
Object.assign(css, {
columnGap,
gap,
rowGap
});
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonGroupProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.div,
{
ref,
className: (0, import_utils.cx)("ui-button-group", className),
"data-attached": (0, import_utils.dataAttr)(attached),
role: "group",
__css: css,
...rest
}
) });
}
);
ButtonGroup.displayName = "ButtonGroup";
ButtonGroup.__ui__ = "ButtonGroup";
// src/button.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Button = (0, import_core2.forwardRef)(
({ children, __isProcessSkip, __styles, ...props }, ref) => {
const group = useButtonGroup();
const [styles, mergedProps] = (0, import_core2.useComponentStyle)(
"Button",
{
...group,
...props
},
{ isProcessSkip: __isProcessSkip, styles: __styles }
);
const {
as,
type,
className,
isActive,
active = isActive,
isDisabled = group == null ? void 0 : group.disabled,
disabled = isDisabled,
disableRipple,
rightIcon,
endIcon = rightIcon,
isRounded,
fullRounded = isRounded,
isLoading,
leftIcon,
loading = isLoading,
loadingIcon,
loadingPlacement = "start",
loadingText,
startIcon = leftIcon,
__css,
...rest
} = (0, import_core2.omitThemeProps)(mergedProps);
const trulyDisabled = disabled || loading;
const { ref: buttonRef, type: defaultType } = useButtonType(as);
const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
...rest,
disabled: disableRipple || trulyDisabled
});
const css = (0, import_react2.useMemo)(() => {
var _a;
const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: "fallback(yamcha, 1)" }) : {};
return {
alignItems: "center",
appearance: "none",
display: "inline-flex",
gap: "fallback(2, 0.5rem)",
justifyContent: "center",
outline: "none",
overflow: "hidden",
position: "relative",
userSelect: "none",
verticalAlign: "middle",
whiteSpace: "nowrap",
...styles,
...__css,
...!!group ? { _focus } : {},
...fullRounded ? { borderRadius: "fallback(full, 9999px)" } : {}
};
}, [styles, __css, group, fullRounded]);
const contentProps = {
children,
endIcon,
startIcon
};
const loadingProps = {
loadingIcon,
loadingText
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
import_core2.ui.button,
{
ref: (0, import_utils2.mergeRefs)(ref, buttonRef),
as,
type: type != null ? type : defaultType,
className: (0, import_utils2.cx)("ui-button", className),
"data-active": (0, import_utils2.dataAttr)(active),
"data-loading": (0, import_utils2.dataAttr)(loading),
disabled: trulyDisabled,
__css: css,
...rest,
onPointerDown,
children: [
loading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ButtonLoading,
{
className: "ui-button__loading--start",
...loadingProps
}
) : null,
loading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonContent, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonContent, { ...contentProps }),
loading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ButtonLoading,
{
className: "ui-button__loading--end",
...loadingProps
}
) : null,
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ripple.Ripple, { ...rippleProps })
]
}
);
}
);
Button.displayName = "Button";
Button.__ui__ = "Button";
var ButtonLoading = ({
className,
loadingIcon,
loadingText
}) => {
const css = (0, import_react2.useMemo)(
() => ({
alignItems: "center",
display: "flex",
fontSize: "1em",
lineHeight: "normal",
position: loadingText ? "relative" : "absolute"
}),
[loadingText]
);
const element = (0, import_react2.useMemo)(() => {
if (typeof loadingIcon === "string") {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading.Loading, { variant: loadingIcon, color: "current" });
} else {
return loadingIcon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading.Loading, { color: "current" });
}
}, [loadingIcon]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: (0, import_utils2.cx)("ui-button__loading", className), __css: css, children: element });
};
ButtonLoading.displayName = "ButtonLoading";
ButtonLoading.__ui__ = "ButtonLoading";
var ButtonContent = ({
children,
endIcon,
startIcon
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
startIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonIcon, { children: startIcon }) : null,
children,
endIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonIcon, { children: endIcon }) : null
] });
};
ButtonContent.displayName = "ButtonContent";
ButtonContent.__ui__ = "ButtonContent";
var ButtonIcon = ({ className, children, ...rest }) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.span,
{
className: (0, import_utils2.cx)("ui-button__icon", className),
"aria-hidden": true,
alignSelf: "center",
display: "inline-flex",
flexShrink: 0,
...rest,
children
}
);
};
ButtonIcon.displayName = "ButtonIcon";
ButtonIcon.__ui__ = "ButtonIcon";
var useButtonType = (value) => {
const buttonRef = (0, import_react2.useRef)(!value);
const ref = (0, import_react2.useCallback)((node) => {
if (node) buttonRef.current = node.tagName === "BUTTON";
}, []);
const type = buttonRef.current ? "button" : void 0;
return { ref, type };
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Button,
useButtonType
});
//# sourceMappingURL=button.js.map