@cerberus-design/react/dist/components/button/button.js

The Cerberus Design React component library.

import { jsx, Fragment } from 'react/jsx-runtime';
import { useMemo, createContext, useContext } from 'react';
import { Box } from 'styled-system/jsx';
import { Show } from '../show/show.js';
import { Spinner } from '../spinner/spinner.js';
import { ButtonRoot } from './primitives.js';

const ButtonContext = createContext({
  pending: false
});
function Button(props) {
  const { pending = false, ...nativeProps } = props;
  const value = useMemo(() => ({ pending }), [pending]);
  return /* @__PURE__ */ jsx(ButtonContext.Provider, { value, children: /* @__PURE__ */ jsx(
    ButtonRoot,
    {
      ...nativeProps,
      "data-scope": "button",
      "data-part": "root",
      disabled: pending || props.disabled
    }
  ) });
}
function ButtonIcon(props) {
  const { pending } = useContext(ButtonContext);
  return /* @__PURE__ */ jsx(Show, { when: pending, fallback: /* @__PURE__ */ jsx(Fragment, { children: props.children }), children: /* @__PURE__ */ jsx(Box, { "data-scope": "button", "data-part": "button-spinner", w: "4", children: /* @__PURE__ */ jsx(Spinner, {}) }) });
}

export { Button, ButtonIcon };