@ttoss/ui 1.31.4 → 1.31.6

package/dist/esm/index.js

@@ -33,14 +33,7 @@ import { useThemeUI } from "theme-ui";
 var useTheme = useThemeUI;
 
 // src/components/Badge.tsx
-import { Badge } from "theme-ui";
-
-// src/components/Box.tsx
-import { Box } from "theme-ui";
-
-// src/components/Button.tsx
-import * as React3 from "react";
-import { Button as ButtonUi } from "theme-ui";
+import { Badge as BadgeUi } from "theme-ui";
 
 // src/components/Icon.tsx
 import * as React2 from "react";
@@ -55,8 +48,36 @@ var Icon = /*#__PURE__*/React2.forwardRef((props, ref) => {
 });
 Icon.displayName = "Icon";
 
-// src/components/Button.tsx
+// src/components/Badge.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Badge = ({
+  icon,
+  children,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */jsxs2(BadgeUi, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      gap: "xs",
+      ...sx
+    },
+    ...props,
+    children: [icon && /* @__PURE__ */jsx3(Icon, {
+      inline: true,
+      icon
+    }), children]
+  });
+};
+
+// src/components/Box.tsx
+import { Box } from "theme-ui";
+
+// src/components/Button.tsx
+import * as React3 from "react";
+import { Button as ButtonUi } from "theme-ui";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var Button = /*#__PURE__*/React3.forwardRef((props, ref) => {
   const {
     children,
@@ -64,7 +85,7 @@ var Button = /*#__PURE__*/React3.forwardRef((props, ref) => {
     rightIcon,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxs2(ButtonUi, {
+  return /* @__PURE__ */jsxs3(ButtonUi, {
     ref,
     type: "button",
     ...restProps,
@@ -78,10 +99,10 @@ var Button = /*#__PURE__*/React3.forwardRef((props, ref) => {
       gap: "lg",
       ...restProps.sx
     },
-    children: [leftIcon && /* @__PURE__ */jsx3(Icon, {
+    children: [leftIcon && /* @__PURE__ */jsx4(Icon, {
       inline: true,
       icon: leftIcon
-    }), children, rightIcon && /* @__PURE__ */jsx3(Icon, {
+    }), children, rightIcon && /* @__PURE__ */jsx4(Icon, {
       inline: true,
       icon: rightIcon
     })]
@@ -110,18 +131,18 @@ import { Image } from "theme-ui";
 // src/components/Input.tsx
 import React4 from "react";
 import { Input as InputUI } from "theme-ui";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var Input = /*#__PURE__*/React4.forwardRef(({
   leadingIcon,
   trailingIcon,
   sx,
   ...inputProps
 }, ref) => {
-  return /* @__PURE__ */jsxs3(Flex, {
+  return /* @__PURE__ */jsxs4(Flex, {
     sx: {
       position: "relative"
     },
-    children: [leadingIcon && /* @__PURE__ */jsx4(Text, {
+    children: [leadingIcon && /* @__PURE__ */jsx5(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -130,10 +151,10 @@ var Input = /*#__PURE__*/React4.forwardRef(({
         lineHeight: 0
       },
       variant: "leading-icon",
-      children: /* @__PURE__ */jsx4(Icon, {
+      children: /* @__PURE__ */jsx5(Icon, {
         icon: leadingIcon
       })
-    }), /* @__PURE__ */jsx4(InputUI, {
+    }), /* @__PURE__ */jsx5(InputUI, {
       ref,
       sx: {
         paddingLeft: leadingIcon ? "3xl" : void 0,
@@ -141,7 +162,7 @@ var Input = /*#__PURE__*/React4.forwardRef(({
         ...sx
       },
       ...inputProps
-    }), trailingIcon && /* @__PURE__ */jsx4(Text, {
+    }), trailingIcon && /* @__PURE__ */jsx5(Text, {
       sx: {
         position: "absolute",
         right: "1rem",
@@ -150,7 +171,7 @@ var Input = /*#__PURE__*/React4.forwardRef(({
         lineHeight: 0
       },
       variant: "trailing-icon",
-      children: /* @__PURE__ */jsx4(Icon, {
+      children: /* @__PURE__ */jsx5(Icon, {
         icon: trailingIcon
       })
     })]
@@ -190,7 +211,7 @@ import { Checkbox } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
 import * as React5 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
   const [progress, setProgress] = React5.useState(0);
@@ -215,7 +236,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */jsx5(Progress, {
+  return /* @__PURE__ */jsx6(Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -227,4 +248,19 @@ import { Textarea } from "theme-ui";
 
 // src/components/Container.tsx
 import { Container } from "theme-ui";
-export { Badge, BaseStyles, Box, Button, Card, Checkbox, Container, Divider, Flex, Grid, Heading, Icon, IconButton, Image, InfiniteLinearProgress, Input, Label, Progress as LinearProgress, Link, Radio, Select, Slider, Spinner, Text, Textarea, ThemeProvider, useBreakpointIndex, useResponsiveValue, useTheme };
+
+// src/components/HelpText.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var HelpText = ({
+  disabled,
+  negative,
+  ...props
+}) => {
+  const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
+  return /* @__PURE__ */jsx7(Text, {
+    variant,
+    "aria-disabled": disabled ? "true" : void 0,
+    ...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 };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as theme_ui from 'theme-ui';
-import { Theme, ButtonProps as ButtonProps$1, InputProps as InputProps$1 } from 'theme-ui';
-export { Badge, BadgeProps, BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, IconButton, IconButtonProps, Image, ImageProps, Label, LabelProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Textarea, TextareaProps, Theme } from 'theme-ui';
+import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, TextProps } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, IconButton, IconButtonProps, Image, ImageProps, Label, LabelProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Textarea, TextareaProps, Theme } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 import * as React from 'react';
 import React__default from 'react';
@@ -23,6 +23,11 @@ type IconType = string | IconifyIcon;
 type IconProps = Omit<IconifyIconProps, 'ref'>;
 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<IconifyIconHTMLElement | null>>;
 
+type BadgeProps = BadgeProps$1 & {
+    icon: IconType;
+};
+declare const Badge: ({ icon, children, sx, ...props }: BadgeProps) => JSX.Element;
+
 type ButtonProps = ButtonProps$1 & {
     leftIcon?: IconType;
     rightIcon?: IconType;
@@ -37,4 +42,10 @@ declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "
 
 declare const InfiniteLinearProgress: () => JSX.Element;
 
-export { Button, ButtonProps, Icon, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, ThemeProvider, ThemeProviderProps, useTheme };
+type HelpTextProps = Omit<TextProps, 'variant'> & {
+    disabled?: boolean;
+    negative?: boolean;
+};
+declare const HelpText: ({ disabled, negative, ...props }: HelpTextProps) => JSX.Element;
+
+export { Badge, BadgeProps, Button, ButtonProps, HelpText, HelpTextProps, Icon, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -38,7 +38,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Badge: () => import_theme_ui3.Badge,
+  Badge: () => Badge,
   BaseStyles: () => import_theme_ui25.BaseStyles,
   Box: () => import_theme_ui4.Box,
   Button: () => Button,
@@ -49,6 +49,7 @@ __export(src_exports, {
   Flex: () => import_theme_ui8.Flex,
   Grid: () => import_theme_ui9.Grid,
   Heading: () => import_theme_ui10.Heading,
+  HelpText: () => HelpText,
   Icon: () => Icon,
   IconButton: () => import_theme_ui20.IconButton,
   Image: () => import_theme_ui11.Image,
@@ -103,13 +104,6 @@ var useTheme = import_theme_ui2.useThemeUI;
 // src/components/Badge.tsx
 var import_theme_ui3 = require("theme-ui");
 
-// src/components/Box.tsx
-var import_theme_ui4 = require("theme-ui");
-
-// src/components/Button.tsx
-var React3 = __toESM(require("react"));
-var import_theme_ui5 = require("theme-ui");
-
 // src/components/Icon.tsx
 var React2 = __toESM(require("react"));
 var import_react2 = require("@iconify-icon/react");
@@ -123,8 +117,36 @@ var Icon = React2.forwardRef((props, ref) => {
 });
 Icon.displayName = "Icon";
 
-// src/components/Button.tsx
+// src/components/Badge.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var Badge = ({
+  icon,
+  children,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_theme_ui3.Badge, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      gap: "xs",
+      ...sx
+    },
+    ...props,
+    children: [icon && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(Icon, {
+      inline: true,
+      icon
+    }), children]
+  });
+};
+
+// src/components/Box.tsx
+var import_theme_ui4 = require("theme-ui");
+
+// src/components/Button.tsx
+var React3 = __toESM(require("react"));
+var import_theme_ui5 = require("theme-ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Button = React3.forwardRef((props, ref) => {
   const {
     children,
@@ -132,7 +154,7 @@ var Button = React3.forwardRef((props, ref) => {
     rightIcon,
     ...restProps
   } = props;
-  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_theme_ui5.Button, {
+  return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui5.Button, {
     ref,
     type: "button",
     ...restProps,
@@ -146,10 +168,10 @@ var Button = React3.forwardRef((props, ref) => {
       gap: "lg",
       ...restProps.sx
     },
-    children: [leftIcon && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(Icon, {
+    children: [leftIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
       inline: true,
       icon: leftIcon
-    }), children, rightIcon && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(Icon, {
+    }), children, rightIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
       inline: true,
       icon: rightIcon
     })]
@@ -178,18 +200,18 @@ var import_theme_ui11 = require("theme-ui");
 // src/components/Input.tsx
 var import_react3 = __toESM(require("react"));
 var import_theme_ui12 = require("theme-ui");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Input = import_react3.default.forwardRef(({
   leadingIcon,
   trailingIcon,
   sx,
   ...inputProps
 }, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui8.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_theme_ui8.Flex, {
     sx: {
       position: "relative"
     },
-    children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui16.Text, {
+    children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -198,10 +220,10 @@ var Input = import_react3.default.forwardRef(({
         lineHeight: 0
       },
       variant: "leading-icon",
-      children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(Icon, {
         icon: leadingIcon
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui12.Input, {
+    }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui12.Input, {
       ref,
       sx: {
         paddingLeft: leadingIcon ? "3xl" : void 0,
@@ -209,7 +231,7 @@ var Input = import_react3.default.forwardRef(({
         ...sx
       },
       ...inputProps
-    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui16.Text, {
+    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         right: "1rem",
@@ -218,7 +240,7 @@ var Input = import_react3.default.forwardRef(({
         lineHeight: 0
       },
       variant: "trailing-icon",
-      children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(Icon, {
         icon: trailingIcon
       })
     })]
@@ -258,7 +280,7 @@ var import_theme_ui22 = require("theme-ui");
 
 // src/components/InfiniteLinearProgress.tsx
 var React5 = __toESM(require("react"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
   const [progress, setProgress] = React5.useState(0);
@@ -283,7 +305,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui15.Progress, {
+  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui15.Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -295,6 +317,21 @@ var import_theme_ui23 = require("theme-ui");
 
 // src/components/Container.tsx
 var import_theme_ui24 = require("theme-ui");
+
+// src/components/HelpText.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var HelpText = ({
+  disabled,
+  negative,
+  ...props
+}) => {
+  const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
+    variant,
+    "aria-disabled": disabled ? "true" : void 0,
+    ...props
+  });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
@@ -308,6 +345,7 @@ var import_theme_ui24 = require("theme-ui");
   Flex,
   Grid,
   Heading,
+  HelpText,
   Icon,
   IconButton,
   Image,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.31.4",
+  "version": "1.31.6",
   "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.5",
-    "@ttoss/theme": "^1.4.4",
+    "@ttoss/theme": "^1.4.6",
     "theme-ui": "^0.15.5"
   },
   "peerDependencies": {
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f26363085030df7edfb2bcbf44aefed304d2b328"
+  "gitHead": "ce34db105b7f475a90660d77b194d6ea33b71960"
 }

package/src/components/Badge.tsx

@@ -1 +1,24 @@
-export { Badge, type BadgeProps } from 'theme-ui';
+import { type BadgeProps as BadgePropsUi, Badge as BadgeUi } from 'theme-ui';
+
+import { Icon, IconType } from './Icon';
+
+export type BadgeProps = BadgePropsUi & {
+  icon: IconType;
+};
+
+export const Badge = ({ icon, children, sx, ...props }: BadgeProps) => {
+  return (
+    <BadgeUi
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'xs',
+        ...sx,
+      }}
+      {...props}
+    >
+      {icon && <Icon inline icon={icon} />}
+      {children}
+    </BadgeUi>
+  );
+};

package/src/components/HelpText.tsx

@@ -0,0 +1,20 @@
+import { Text, TextProps } from './Text';
+
+export type HelpTextProps = Omit<TextProps, 'variant'> & {
+  disabled?: boolean;
+  negative?: boolean;
+};
+
+export const HelpText = ({ disabled, negative, ...props }: HelpTextProps) => {
+  const variant = ['text.help', negative ? 'negative' : undefined]
+    .filter(Boolean)
+    .join('.');
+
+  return (
+    <Text
+      variant={variant}
+      aria-disabled={disabled ? 'true' : undefined}
+      {...props}
+    />
+  );
+};

package/src/index.ts

@@ -32,3 +32,4 @@ export { Checkbox, type CheckboxProps } from './components/Checkbox';
 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';