@ttoss/ui 1.33.0 → 1.34.1

package/README.md

@@ -92,3 +92,17 @@ export const Provider = (props) => {
   );
 };
 ```
+
+## Misc
+
+### keyframes
+
+```tsx
+import { Box, keyframes } from '@ttoss/ui';
+
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
+
+export const Component = (props) => {
+  return <Box {...props} sx={{ animation: `${fadeIn} 1s backwards` }} />;
+};
+```

package/dist/esm/index.js

@@ -3,6 +3,7 @@
 // src/index.ts
 import { BaseStyles, Global as Global2 } from "theme-ui";
 import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
+import { keyframes } from "@emotion/react";
 
 // src/theme/ThemeProvider.tsx
 import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
@@ -406,21 +407,19 @@ import React10 from "react";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var CloseButton = /*#__PURE__*/React10.forwardRef(({
   label,
-  sx,
+  onlyText,
   ...props
 }, ref) => {
+  if (onlyText && !label) {
+    return null;
+  }
   return /* @__PURE__ */jsxs8(Button2, {
     variant: "buttons.closeButton",
     type: "button",
     "aria-label": label,
-    sx: {
-      gap: "sm",
-      padding: 0,
-      ...sx
-    },
     ...props,
     ref,
-    children: [label, /* @__PURE__ */jsx13(Icon, {
+    children: [label, !onlyText && /* @__PURE__ */jsx13(Icon, {
       icon: "close"
     })]
   });
@@ -563,4 +562,4 @@ var Stack = /*#__PURE__*/React12.forwardRef((props, ref) => {
   });
 });
 Stack.displayName = "Stack";
-export { Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, Label, Progress as LinearProgress, Link, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, useBreakpointIndex, useResponsiveValue, useTheme };
+export { Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, Label, Progress as LinearProgress, Link, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as theme_ui from 'theme-ui';
 import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SelectProps, IconButtonProps, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Radio, RadioProps, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Theme } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Radio, RadioProps, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, SxProp, Text, TextProps, Theme } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
+export { Keyframes, keyframes } from '@emotion/react';
 import * as React from 'react';
 import React__default from 'react';
 import { IconifyIconProps, IconifyIconHTMLElement } from '@iconify-icon/react';
@@ -70,6 +71,7 @@ declare const HelpText: ({ disabled, negative, ...props }: HelpTextProps) => JSX
 
 type CloseButtonProps = ButtonProps$1 & {
     label?: string;
+    onlyText?: boolean;
 };
 declare const CloseButton: React__default.ForwardRefExoticComponent<Omit<CloseButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 

package/dist/index.js

@@ -69,6 +69,7 @@ __export(src_exports, {
   Text: () => import_theme_ui16.Text,
   Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
+  keyframes: () => import_react9.keyframes,
   useBreakpointIndex: () => import_match_media.useBreakpointIndex,
   useResponsiveValue: () => import_match_media.useResponsiveValue,
   useTheme: () => useTheme
@@ -76,6 +77,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 var import_theme_ui27 = require("theme-ui");
 var import_match_media = require("@theme-ui/match-media");
+var import_react9 = require("@emotion/react");
 
 // src/theme/ThemeProvider.tsx
 var import_Bruttal = require("@ttoss/theme/Bruttal");
@@ -479,21 +481,19 @@ var import_react7 = __toESM(require("react"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var CloseButton = import_react7.default.forwardRef(({
   label,
-  sx,
+  onlyText,
   ...props
 }, ref) => {
+  if (onlyText && !label) {
+    return null;
+  }
   return /* @__PURE__ */(0, import_jsx_runtime13.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_runtime13.jsx)(Icon, {
+    children: [label, !onlyText && /* @__PURE__ */(0, import_jsx_runtime13.jsx)(Icon, {
       icon: "close"
     })]
   });
@@ -669,6 +669,7 @@ Stack.displayName = "Stack";
   Text,
   Textarea,
   ThemeProvider,
+  keyframes,
   useBreakpointIndex,
   useResponsiveValue,
   useTheme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.33.0",
+  "version": "1.34.1",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -23,7 +23,7 @@
     "@emotion/react": "^11.10.6",
     "@iconify-icon/react": "^1.0.7",
     "@theme-ui/match-media": "^0.15.7",
-    "@ttoss/theme": "^1.4.23",
+    "@ttoss/theme": "^1.4.24",
     "theme-ui": "^0.15.7"
   },
   "peerDependencies": {
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0e907d5340ddbdebfa3f81c736542db198ca8a07"
+  "gitHead": "b473ec0322fbe1a459d81339aab3de60d6bebc9a"
 }

package/src/components/CloseButton.tsx

@@ -4,24 +4,28 @@ import React from 'react';
 
 export type CloseButtonProps = ButtonProps & {
   label?: string;
+  onlyText?: boolean;
 };
 
 export const CloseButton = React.forwardRef<
   HTMLButtonElement,
   CloseButtonProps
->(({ label, sx, ...props }, ref) => {
+>(({ label, onlyText, ...props }, ref) => {
+  if (onlyText && !label) {
+    return null;
+  }
+
   return (
     <Button
       variant="buttons.closeButton"
       type="button"
       aria-label={label}
-      sx={{ gap: 'sm', padding: 0, ...sx }}
       {...props}
       ref={ref}
     >
       {label}
 
-      <Icon icon="close" />
+      {!onlyText && <Icon icon="close" />}
     </Button>
   );
 });

package/src/index.ts

@@ -1,5 +1,6 @@
-export { BaseStyles, type Theme, Global } from 'theme-ui';
+export { BaseStyles, type Theme, Global, type SxProp } from 'theme-ui';
 export { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media';
+export { keyframes, type Keyframes } from '@emotion/react';
 
 export { ThemeProvider, type ThemeProviderProps } from './theme/ThemeProvider';