@ttoss/ui 1.21.1 → 1.21.2

package/dist/esm/index.js

@@ -182,6 +182,18 @@ import { Spinner } from "theme-ui";
 
 // src/components/Radio/Radio.tsx
 import { Radio } from "theme-ui";
+
+// src/components/Icon/Icon.tsx
+import { Icon as IconUI } from "@iconify/react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Icon = ({ icon, sx }) => {
+  return /* @__PURE__ */ jsx3(Text, {
+    sx,
+    children: /* @__PURE__ */ jsx3(IconUI, {
+      icon
+    })
+  });
+};
 export {
   Box,
   Button,
@@ -190,6 +202,7 @@ export {
   Flex,
   Grid,
   Heading,
+  Icon,
   Image,
   Input,
   Label,

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import * as theme_ui from 'theme-ui';
-import { Theme, ButtonProps } from 'theme-ui';
+import { Theme, ButtonProps, TextProps } from 'theme-ui';
 export { Box, BoxProps, ButtonProps, Card, CardProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, Image, ImageProps, Input, InputProps, Label, LabelProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Select, SelectProps, Spinner, SpinnerProps, Text, TextProps, Theme } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 import * as React from 'react';
+import { IconProps as IconProps$1 } from '@iconify/react';
 
 declare type ThemeProviderProps = {
     children?: React.ReactNode;
@@ -18,4 +19,10 @@ declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
 declare const Button: (props: ButtonProps) => JSX.Element;
 
-export { Button, ThemeProvider, ThemeProviderProps, useTheme };
+declare type IconProps = {
+    icon: IconProps$1['icon'];
+    sx?: TextProps['sx'];
+};
+declare const Icon: ({ icon, sx }: IconProps) => JSX.Element;
+
+export { Button, Icon, IconProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -34,6 +34,7 @@ __export(src_exports, {
   Flex: () => import_theme_ui7.Flex,
   Grid: () => import_theme_ui8.Grid,
   Heading: () => import_theme_ui9.Heading,
+  Icon: () => Icon,
   Image: () => import_theme_ui10.Image,
   Input: () => import_theme_ui11.Input,
   Label: () => import_theme_ui12.Label,
@@ -230,6 +231,18 @@ var import_theme_ui17 = require("theme-ui");
 
 // src/components/Radio/Radio.tsx
 var import_theme_ui18 = require("theme-ui");
+
+// src/components/Icon/Icon.tsx
+var import_react2 = require("@iconify/react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Icon = ({ icon, sx }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_theme_ui15.Text, {
+    sx,
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Icon, {
+      icon
+    })
+  });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,
@@ -239,6 +252,7 @@ var import_theme_ui18 = require("theme-ui");
   Flex,
   Grid,
   Heading,
+  Icon,
   Image,
   Input,
   Label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.21.1",
+  "version": "1.21.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -20,6 +20,7 @@
   },
   "typings": "dist/index.d.ts",
   "dependencies": {
+    "@iconify/react": "^4.0.0",
     "@theme-ui/match-media": "^0.15.1",
     "theme-ui": "^0.15.1"
   },
@@ -31,7 +32,7 @@
     "@emotion/react": "^11.10.4",
     "@ttoss/config": "^1.18.3",
     "@ttoss/test-utils": "^1.16.10",
-    "@ttoss/theme": "^1.0.1",
+    "@ttoss/theme": "^1.0.2",
     "@types/jest": "^29.1.1",
     "jest": "^29.1.2",
     "tsup": "^6.2.3"
@@ -44,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3879642eff43efd073abf52595ed0efe7196946a"
+  "gitHead": "b939e6a717618f4cc06605df922e37f89b877561"
 }

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,15 @@
+import { IconProps as IconPropsUI, Icon as IconUI } from '@iconify/react';
+import { Text, TextProps } from '../Text/Text';
+
+export type IconProps = {
+  icon: IconPropsUI['icon'];
+  sx?: TextProps['sx'];
+};
+
+export const Icon = ({ icon, sx }: IconProps) => {
+  return (
+    <Text sx={sx}>
+      <IconUI icon={icon} />
+    </Text>
+  );
+};

package/src/index.ts

@@ -27,3 +27,4 @@ export { Text, type TextProps } from './components/Text/Text';
 export { Select, type SelectProps } from './components/Select/Select';
 export { Spinner, type SpinnerProps } from './components/Spinner/Spinner';
 export { Radio, type RadioProps } from './components/Radio/Radio';
+export { Icon, type IconProps } from './components/Icon/Icon';