@ttoss/ui 1.31.16 → 1.31.17

package/dist/esm/index.js

@@ -346,4 +346,31 @@ var HelpText = ({
     ...props
   });
 };
-export { Badge, BaseStyles, Box, Button, Card, Checkbox, Container, Divider, Flex, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, Label, Progress as LinearProgress, Link, Radio, Select, Slider, Spinner, Text, Textarea, ThemeProvider, useBreakpointIndex, useResponsiveValue, useTheme };
+
+// src/components/CloseButton.tsx
+import { Button as Button2 } from "theme-ui";
+import React8 from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var CloseButton = /*#__PURE__*/React8.forwardRef(({
+  label,
+  sx,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */jsxs7(Button2, {
+    variant: "buttons.closeButton",
+    type: "button",
+    "aria-label": label,
+    sx: {
+      gap: "sm",
+      padding: 0,
+      ...sx
+    },
+    ...props,
+    ref,
+    children: [label, /* @__PURE__ */jsx11(Icon, {
+      icon: "close"
+    })]
+  });
+});
+CloseButton.displayName = "CloseButton";
+export { Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, Label, Progress as LinearProgress, Link, Radio, Select, Slider, Spinner, Text, Textarea, ThemeProvider, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -59,4 +59,9 @@ type HelpTextProps = Omit<TextProps, 'variant'> & {
 };
 declare const HelpText: ({ disabled, negative, ...props }: HelpTextProps) => JSX.Element;
 
-export { Badge, BadgeProps, Button, ButtonProps, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, Label, LabelProps, Select, SelectProps, ThemeProvider, ThemeProviderProps, useTheme };
+type CloseButtonProps = ButtonProps$1 & {
+    label?: string;
+};
+declare const CloseButton: React__default.ForwardRefExoticComponent<Omit<CloseButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+export { Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, Label, LabelProps, Select, SelectProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -39,11 +39,12 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var src_exports = {};
 __export(src_exports, {
   Badge: () => Badge,
-  BaseStyles: () => import_theme_ui25.BaseStyles,
+  BaseStyles: () => import_theme_ui26.BaseStyles,
   Box: () => import_theme_ui4.Box,
   Button: () => Button,
   Card: () => import_theme_ui6.Card,
   Checkbox: () => import_theme_ui22.Checkbox,
+  CloseButton: () => CloseButton,
   Container: () => import_theme_ui24.Container,
   Divider: () => import_theme_ui7.Divider,
   Flex: () => import_theme_ui8.Flex,
@@ -70,7 +71,7 @@ __export(src_exports, {
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(src_exports);
-var import_theme_ui25 = require("theme-ui");
+var import_theme_ui26 = require("theme-ui");
 var import_match_media = require("@theme-ui/match-media");
 
 // src/theme/ThemeProvider.tsx
@@ -415,6 +416,33 @@ var HelpText = ({
     ...props
   });
 };
+
+// src/components/CloseButton.tsx
+var import_theme_ui25 = require("theme-ui");
+var import_react5 = __toESM(require("react"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var CloseButton = import_react5.default.forwardRef(({
+  label,
+  sx,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_theme_ui25.Button, {
+    variant: "buttons.closeButton",
+    type: "button",
+    "aria-label": label,
+    sx: {
+      gap: "sm",
+      padding: 0,
+      ...sx
+    },
+    ...props,
+    ref,
+    children: [label, /* @__PURE__ */(0, import_jsx_runtime11.jsx)(Icon, {
+      icon: "close"
+    })]
+  });
+});
+CloseButton.displayName = "CloseButton";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
@@ -423,6 +451,7 @@ var HelpText = ({
   Button,
   Card,
   Checkbox,
+  CloseButton,
   Container,
   Divider,
   Flex,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.31.16",
+  "version": "1.31.17",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -24,7 +24,7 @@
     "@emotion/react": "^11.10.6",
     "@iconify-icon/react": "^1.0.7",
     "@theme-ui/match-media": "^0.15.7",
-    "@ttoss/theme": "^1.4.13",
+    "@ttoss/theme": "^1.4.14",
     "theme-ui": "^0.15.7"
   },
   "peerDependencies": {
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "aa31505953d2717d84fa5e69dbae5b488ef04986"
+  "gitHead": "f7ce64308917a032fdd64066b00d26f12702ef83"
 }

package/src/components/CloseButton.tsx

@@ -0,0 +1,29 @@
+import { Button, type ButtonProps } from 'theme-ui';
+import { Icon } from './Icon';
+import React from 'react';
+
+export type CloseButtonProps = ButtonProps & {
+  label?: string;
+};
+
+export const CloseButton = React.forwardRef<
+  HTMLButtonElement,
+  CloseButtonProps
+>(({ label, sx, ...props }, ref) => {
+  return (
+    <Button
+      variant="buttons.closeButton"
+      type="button"
+      aria-label={label}
+      sx={{ gap: 'sm', padding: 0, ...sx }}
+      {...props}
+      ref={ref}
+    >
+      {label}
+
+      <Icon icon="close" />
+    </Button>
+  );
+});
+
+CloseButton.displayName = 'CloseButton';

package/src/index.ts

@@ -33,3 +33,4 @@ export { InfiniteLinearProgress } from './components/InfiniteLinearProgress';
 export { Textarea, type TextareaProps } from './components/Textarea';
 export { Container, type ContainerProps } from './components/Container';
 export { HelpText, type HelpTextProps } from './components/HelpText';
+export { CloseButton, type CloseButtonProps } from './components/CloseButton';