UNPKG

@yamada-ui/close-button

Version:

Yamada UI close button component

1 lines 3.79 kB
{"version":3,"sources":["../src/close-button.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { CloseIcon } from \"@yamada-ui/icon\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx } from \"@yamada-ui/utils\"\n\ninterface CloseButtonOptions {\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If true, the button is full rounded.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If true, the button is full rounded.\n *\n * @default false\n *\n * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n}\n\nexport interface CloseButtonProps\n extends HTMLUIProps<\"button\">,\n ThemeProps<\"CloseButton\">,\n CloseButtonOptions {}\n\n/**\n * `CloseButton` is a component used primarily to trigger the close functionality of a component.\n *\n * @see Docs https://yamada-ui.com/components/other/close-button\n */\n\nexport const CloseButton = forwardRef<CloseButtonProps, \"button\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"CloseButton\", props)\n const {\n className,\n children,\n isDisabled,\n disabled = isDisabled,\n disableRipple,\n isRounded,\n fullRounded = isRounded,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: disableRipple || disabled,\n })\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n flexShrink: 0,\n justifyContent: \"center\",\n outline: 0,\n overflow: \"hidden\",\n position: \"relative\",\n ...styles,\n ...__css,\n ...(fullRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n\n return (\n <ui.button\n ref={ref}\n type=\"button\"\n className={cx(\"ui-close-button\", className)}\n aria-label=\"Close\"\n disabled={disabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children || <CloseIcon height=\"1em\" width=\"1em\" />}\n\n <Ripple {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nCloseButton.displayName = \"CloseButton\"\nCloseButton.__ui__ = \"CloseButton\"\n"],"mappings":";;;AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,QAAQ,iBAAiB;AAClC,SAAS,UAAU;AAmFb,SAUe,KAVf;AAjCC,IAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACd,UAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,eAAe,KAAK;AACpE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAC9B,UAAM,EAAE,eAAe,GAAG,YAAY,IAAI,UAAU;AAAA,MAClD,GAAG;AAAA,MACH,UAAU,iBAAiB;AAAA,IAC7B,CAAC;AAED,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,cAAc,EAAE,cAAc,yBAAyB,IAAI,CAAC;AAAA,IAClE;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,cAAW;AAAA,QACX;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,sBAAY,oBAAC,aAAU,QAAO,OAAM,OAAM,OAAM;AAAA,UAEjD,oBAAC,UAAQ,GAAG,aAAa;AAAA;AAAA;AAAA,IAC3B;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":[]}