@veracity/vui/dist/dismissButton/DismissButton.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { omitThemingProps, useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { Icon } from "../icon/icon.js";
import { jsx } from "react/jsx-runtime";

//#region src/dismissButton/DismissButton.tsx
const DismissButtonBase = styled.buttonBox`
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  outline: none;
  padding: 0;
  position: relative;

  /* Inherit dismiss color from parent (Tag, Alert, etc) via CSS custom property */
  --vui-dismiss-color: var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid));
  color: var(--vui-dismiss-text, var(--vui-dismiss-color));

  /* Hover: grey solid hover @ 20% opacity */
  &:hover {
    background-color: color-mix(in srgb, var(--vui-action-grey-solid-hover) 20%, transparent);
  }

  /* Active/pressed: grey solid pressed @ 10% opacity */
  &:active {
    background-color: color-mix(in srgb, var(--vui-action-grey-solid-pressed) 10%, transparent);
  }

  /* Disabled state */
  &:disabled {
    color: var(--vui-action-disabled-foreground);
    cursor: not-allowed;
    opacity: 0.5;
  }

  /* Focus visible (keyboard) */
  &:focus-visible {
    outline: 2px solid var(--vui-control-focus-ring, #00a1db);
    outline-offset: 2px;
  }

  transition: background-color 150ms ease-out;
`;
const DismissButton = vui((props, ref) => {
	const rest = omitThemingProps(props);
	const styles = useStyleConfig("DismissButton", props);
	return /* @__PURE__ */ jsx(DismissButtonBase, {
		ref,
		type: "button",
		"aria-label": "Dismiss",
		...styles,
		...rest,
		children: /* @__PURE__ */ jsx(Icon, {
			name: "uiTimes",
			h: 16,
			w: 16
		})
	});
});
DismissButton.displayName = "DismissButton";

//#endregion
export { DismissButton };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=DismissButton.js.map