@ttoss/ui 1.35.2 → 1.36.0

package/README.md

@@ -93,6 +93,25 @@ export const Provider = (props) => {
 };
 ```
 
+### Icons
+
+Our icon module is powered by [Iconify](https://iconify.design/), as this have an awesome open source icon collection.
+To use it, just import `Icon` and start using. The styling is maded the same as Iconify and all his icons are available for using.
+
+Please refer to our storybook to see some examples of use.
+
+Please, refer to [Iconify docs](https://docs.iconify.design/icon-components/react/) for the parameters and more control over icons
+
+```tsx
+import { Icon } from '@ttoss/ui';
+
+export const IconExample = () => {
+  return (
+    <Icon icon="mdi-light:alarm-panel" style={{ color: 'red' }} width={100} />
+  );
+};
+```
+
 ## Misc
 
 ### keyframes

package/dist/esm/index.js

@@ -402,8 +402,8 @@ var HelpText = ({
 };
 
 // src/components/CloseButton.tsx
+import * as React10 from "react";
 import { Button as Button2 } from "theme-ui";
-import React10 from "react";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var CloseButton = /*#__PURE__*/React10.forwardRef(({
   label,
@@ -562,4 +562,7 @@ 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, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };
+
+// src/components/Paragraph.tsx
+import { Paragraph } from "theme-ui";
+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, Paragraph, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 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, SxProp, 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, Paragraph, ParagraphProps, 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';
@@ -73,7 +73,7 @@ type CloseButtonProps = ButtonProps$1 & {
     label?: string;
     onlyText?: boolean;
 };
-declare const CloseButton: React__default.ForwardRefExoticComponent<Omit<CloseButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+declare const CloseButton: React.ForwardRefExoticComponent<Omit<CloseButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
 type InputNumberProps = Omit<InputProps$1, 'type' | 'variant' | 'onChange'> & {
     onChange: (value: number) => void;

package/dist/index.js

@@ -39,7 +39,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var src_exports = {};
 __export(src_exports, {
   Badge: () => Badge,
-  BaseStyles: () => import_theme_ui27.BaseStyles,
+  BaseStyles: () => import_theme_ui28.BaseStyles,
   Box: () => import_theme_ui4.Box,
   Button: () => Button,
   Card: () => import_theme_ui6.Card,
@@ -48,7 +48,7 @@ __export(src_exports, {
   Container: () => import_theme_ui24.Container,
   Divider: () => import_theme_ui7.Divider,
   Flex: () => import_theme_ui8.Flex,
-  Global: () => import_theme_ui27.Global,
+  Global: () => import_theme_ui28.Global,
   Grid: () => import_theme_ui9.Grid,
   Heading: () => import_theme_ui10.Heading,
   HelpText: () => HelpText,
@@ -61,6 +61,7 @@ __export(src_exports, {
   Label: () => Label,
   LinearProgress: () => import_theme_ui15.Progress,
   Link: () => Link,
+  Paragraph: () => import_theme_ui27.Paragraph,
   Radio: () => import_theme_ui19.Radio,
   Select: () => Select,
   Slider: () => import_theme_ui21.Slider,
@@ -69,15 +70,15 @@ __export(src_exports, {
   Text: () => import_theme_ui16.Text,
   Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
-  keyframes: () => import_react9.keyframes,
+  keyframes: () => import_react8.keyframes,
   useBreakpointIndex: () => import_match_media.useBreakpointIndex,
   useResponsiveValue: () => import_match_media.useResponsiveValue,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(src_exports);
-var import_theme_ui27 = require("theme-ui");
+var import_theme_ui28 = require("theme-ui");
 var import_match_media = require("@theme-ui/match-media");
-var import_react9 = require("@emotion/react");
+var import_react8 = require("@emotion/react");
 
 // src/theme/ThemeProvider.tsx
 var import_Bruttal = require("@ttoss/theme/Bruttal");
@@ -476,10 +477,10 @@ var HelpText = ({
 };
 
 // src/components/CloseButton.tsx
+var React10 = __toESM(require("react"));
 var import_theme_ui25 = require("theme-ui");
-var import_react7 = __toESM(require("react"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var CloseButton = import_react7.default.forwardRef(({
+var CloseButton = React10.forwardRef(({
   label,
   onlyText,
   ...props
@@ -502,9 +503,9 @@ CloseButton.displayName = "CloseButton";
 
 // src/components/InputNumber.tsx
 var import_theme_ui26 = require("theme-ui");
-var import_react8 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var InputNumber = import_react8.default.forwardRef(({
+var InputNumber = import_react7.default.forwardRef(({
   sx,
   value,
   infoIcon,
@@ -512,7 +513,7 @@ var InputNumber = import_react8.default.forwardRef(({
   onClickInfoIcon,
   ...inputProps
 }, ref) => {
-  const sxProps = import_react8.default.useMemo(() => {
+  const sxProps = import_react7.default.useMemo(() => {
     const size = String(typeof value === "undefined" ? 0 : value).length;
     if (inputProps["aria-invalid"] === "true") {
       return {
@@ -636,6 +637,9 @@ var Stack = React12.forwardRef((props, ref) => {
   });
 });
 Stack.displayName = "Stack";
+
+// src/components/Paragraph.tsx
+var import_theme_ui27 = require("theme-ui");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
@@ -661,6 +665,7 @@ Stack.displayName = "Stack";
   Label,
   LinearProgress,
   Link,
+  Paragraph,
   Radio,
   Select,
   Slider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.35.2",
+  "version": "1.36.0",
   "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.28",
+    "@ttoss/theme": "^1.4.30",
     "theme-ui": "^0.15.7"
   },
   "peerDependencies": {
@@ -33,9 +33,9 @@
     "@iconify-icons/mdi-light": "^1.2.5",
     "@iconify/types": "^2.0.0",
     "@ttoss/config": "^1.30.0",
-    "@ttoss/test-utils": "^1.22.0",
+    "@ttoss/test-utils": "^1.23.0",
     "@types/jest": "^29.5.1",
-    "@types/react": "^18.2.0",
+    "@types/react": "^18.2.5",
     "jest": "^29.5.0",
     "react": "^18.2.0",
     "tsup": "^6.7.0"
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c0c2571b4949c0b555f8f21ac6f0c5eec7489f25"
+  "gitHead": "2b412ebe0b92fbccb102636f843f84bd7616b43b"
 }

package/src/components/CloseButton.tsx

@@ -1,6 +1,6 @@
+import * as React from 'react';
 import { Button, type ButtonProps } from 'theme-ui';
 import { Icon } from './Icon';
-import React from 'react';
 
 export type CloseButtonProps = ButtonProps & {
   label?: string;

package/src/components/Paragraph.tsx

@@ -0,0 +1 @@
+export { Paragraph, type ParagraphProps } from 'theme-ui';

package/src/index.ts

@@ -37,3 +37,4 @@ export { HelpText, type HelpTextProps } from './components/HelpText';
 export { CloseButton, type CloseButtonProps } from './components/CloseButton';
 export { InputNumber, type InputNumberProps } from './components/InputNumber';
 export { Stack, type StackProps } from './components/Stack';
+export { Paragraph, type ParagraphProps } from './components/Paragraph';