@ttoss/ui 1.30.9 → 1.30.11

package/dist/esm/index.js

@@ -320,6 +320,15 @@ var BruttalTheme = {
   /**
    * Components
    */
+  badges: {
+    primary: {
+      color: "onPrimary",
+      bg: "primary",
+      fontSize: "sm",
+      paddingX: "sm",
+      borderRadius: "default"
+    }
+  },
   buttons: {
     accent: {
       backgroundColor: "accent",
@@ -417,10 +426,24 @@ var BruttalTheme = {
   },
   forms: {
     label: {
-      "&:has(+ div > input:invalid)": {
+      "&:has(+ div > input.error)": {
         "span > iconify-icon": {
           color: "danger"
         }
+      },
+      '&:has(input[type="checkbox"]:disabled)': {
+        color: "onMuted"
+      }
+    },
+    checkbox: {
+      "input:not(:checked) ~ &": {
+        color: "primary"
+      },
+      "input:disabled ~ &": {
+        color: "muted"
+      },
+      "input:disabled ~ & path": {
+        backgroundColor: "onMuted"
       }
     },
     input: {
@@ -528,6 +551,10 @@ init_tsup_inject();
 import { useThemeUI } from "theme-ui";
 var useTheme = useThemeUI;
 
+// src/components/Badge.tsx
+init_tsup_inject();
+import { Badge } from "theme-ui";
+
 // src/components/Box.tsx
 init_tsup_inject();
 import { Box } from "theme-ui";
@@ -576,7 +603,9 @@ var defaultIconSizeCustomisations = Object.freeze({
   height: null
 });
 var defaultIconCustomisations = Object.freeze({
+  // Dimensions
   ...defaultIconSizeCustomisations,
+  // Transformations
   ...defaultIconTransformations
 });
 function rotateFromString(value, defaultValue = 0) {
@@ -664,6 +693,7 @@ var stringToIcon = (value, validate, allowSimpleName, provider = "") => {
     const name2 = colonSeparated.pop();
     const prefix = colonSeparated.pop();
     const result = {
+      // Allow provider without '@': "provider:prefix:name"
       provider: colonSeparated.length > 0 ? colonSeparated[0] : provider,
       prefix,
       name: name2
@@ -2187,7 +2217,7 @@ for (const prefix in propsToAddTo) {
   }
 }
 function fixSize(value) {
-  return value + (value.match(/^[-0-9.]+$/) ? "px" : "");
+  return value ? value + (value.match(/^[-0-9.]+$/) ? "px" : "") : "inherit";
 }
 function renderSPAN(data, icon, useMask) {
   const node = document.createElement("span");
@@ -2216,7 +2246,18 @@ function renderSPAN(data, icon, useMask) {
 }
 function renderSVG(data) {
   const node = document.createElement("span");
-  node.innerHTML = iconToHTML(data.body, data.attributes);
+  const attr = data.attributes;
+  let style = "";
+  if (!attr.width) {
+    style = "width: inherit;";
+  }
+  if (!attr.height) {
+    style += "height: inherit;";
+  }
+  if (style) {
+    attr.style = style;
+  }
+  node.innerHTML = iconToHTML(data.body, attr);
   return node.firstChild;
 }
 function renderIcon(parent, state) {
@@ -2737,6 +2778,7 @@ import { Textarea } from "theme-ui";
 init_tsup_inject();
 import { Container } from "theme-ui";
 export {
+  Badge,
   BaseStyles,
   Box,
   Button,
@@ -2777,6 +2819,6 @@ iconify-icon/dist/iconify-icon.mjs:
   * Licensed under MIT.
   *
   * @license MIT
-  * @version 1.0.5
+  * @version 1.0.7
   *)
 */

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 { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, 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 { Badge, BadgeProps, BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, 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';

package/dist/index.js

@@ -155,29 +155,30 @@ var require_cjs = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  BaseStyles: () => import_theme_ui23.BaseStyles,
-  Box: () => import_theme_ui3.Box,
+  Badge: () => import_theme_ui3.Badge,
+  BaseStyles: () => import_theme_ui24.BaseStyles,
+  Box: () => import_theme_ui4.Box,
   Button: () => Button,
-  Card: () => import_theme_ui5.Card,
-  Checkbox: () => import_theme_ui20.Checkbox,
-  Container: () => import_theme_ui22.Container,
-  Divider: () => import_theme_ui6.Divider,
-  Flex: () => import_theme_ui7.Flex,
-  Grid: () => import_theme_ui8.Grid,
-  Heading: () => import_theme_ui9.Heading,
+  Card: () => import_theme_ui6.Card,
+  Checkbox: () => import_theme_ui21.Checkbox,
+  Container: () => import_theme_ui23.Container,
+  Divider: () => import_theme_ui7.Divider,
+  Flex: () => import_theme_ui8.Flex,
+  Grid: () => import_theme_ui9.Grid,
+  Heading: () => import_theme_ui10.Heading,
   Icon: () => Icon2,
-  Image: () => import_theme_ui10.Image,
+  Image: () => import_theme_ui11.Image,
   InfiniteLinearProgress: () => InfiniteLinearProgress,
   Input: () => Input,
-  Label: () => import_theme_ui12.Label,
-  LinearProgress: () => import_theme_ui14.Progress,
-  Link: () => import_theme_ui13.Link,
-  Radio: () => import_theme_ui18.Radio,
-  Select: () => import_theme_ui16.Select,
-  Slider: () => import_theme_ui19.Slider,
-  Spinner: () => import_theme_ui17.Spinner,
-  Text: () => import_theme_ui15.Text,
-  Textarea: () => import_theme_ui21.Textarea,
+  Label: () => import_theme_ui13.Label,
+  LinearProgress: () => import_theme_ui15.Progress,
+  Link: () => import_theme_ui14.Link,
+  Radio: () => import_theme_ui19.Radio,
+  Select: () => import_theme_ui17.Select,
+  Slider: () => import_theme_ui20.Slider,
+  Spinner: () => import_theme_ui18.Spinner,
+  Text: () => import_theme_ui16.Text,
+  Textarea: () => import_theme_ui22.Textarea,
   ThemeProvider: () => ThemeProvider,
   useBreakpointIndex: () => import_match_media.useBreakpointIndex,
   useResponsiveValue: () => import_match_media.useResponsiveValue,
@@ -185,7 +186,7 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 init_tsup_inject();
-var import_theme_ui23 = require("theme-ui");
+var import_theme_ui24 = require("theme-ui");
 var import_match_media = require("@theme-ui/match-media");
 
 // src/theme/ThemeProvider.tsx
@@ -358,6 +359,15 @@ var BruttalTheme = {
   /**
    * Components
    */
+  badges: {
+    primary: {
+      color: "onPrimary",
+      bg: "primary",
+      fontSize: "sm",
+      paddingX: "sm",
+      borderRadius: "default"
+    }
+  },
   buttons: {
     accent: {
       backgroundColor: "accent",
@@ -455,10 +465,24 @@ var BruttalTheme = {
   },
   forms: {
     label: {
-      "&:has(+ div > input:invalid)": {
+      "&:has(+ div > input.error)": {
         "span > iconify-icon": {
           color: "danger"
         }
+      },
+      '&:has(input[type="checkbox"]:disabled)': {
+        color: "onMuted"
+      }
+    },
+    checkbox: {
+      "input:not(:checked) ~ &": {
+        color: "primary"
+      },
+      "input:disabled ~ &": {
+        color: "muted"
+      },
+      "input:disabled ~ & path": {
+        backgroundColor: "onMuted"
       }
     },
     input: {
@@ -566,14 +590,18 @@ init_tsup_inject();
 var import_theme_ui2 = require("theme-ui");
 var useTheme = import_theme_ui2.useThemeUI;
 
-// src/components/Box.tsx
+// src/components/Badge.tsx
 init_tsup_inject();
 var import_theme_ui3 = require("theme-ui");
 
+// src/components/Box.tsx
+init_tsup_inject();
+var import_theme_ui4 = require("theme-ui");
+
 // src/components/Button.tsx
 init_tsup_inject();
 var React4 = __toESM(require("react"));
-var import_theme_ui4 = require("theme-ui");
+var import_theme_ui5 = require("theme-ui");
 
 // src/components/Icon.tsx
 init_tsup_inject();
@@ -612,7 +640,9 @@ var defaultIconSizeCustomisations = Object.freeze({
   height: null
 });
 var defaultIconCustomisations = Object.freeze({
+  // Dimensions
   ...defaultIconSizeCustomisations,
+  // Transformations
   ...defaultIconTransformations
 });
 function rotateFromString(value, defaultValue = 0) {
@@ -700,6 +730,7 @@ var stringToIcon = (value, validate, allowSimpleName, provider = "") => {
     const name2 = colonSeparated.pop();
     const prefix = colonSeparated.pop();
     const result = {
+      // Allow provider without '@': "provider:prefix:name"
       provider: colonSeparated.length > 0 ? colonSeparated[0] : provider,
       prefix,
       name: name2
@@ -2223,7 +2254,7 @@ for (const prefix in propsToAddTo) {
   }
 }
 function fixSize(value) {
-  return value + (value.match(/^[-0-9.]+$/) ? "px" : "");
+  return value ? value + (value.match(/^[-0-9.]+$/) ? "px" : "") : "inherit";
 }
 function renderSPAN(data, icon, useMask) {
   const node = document.createElement("span");
@@ -2252,7 +2283,18 @@ function renderSPAN(data, icon, useMask) {
 }
 function renderSVG(data) {
   const node = document.createElement("span");
-  node.innerHTML = iconToHTML(data.body, data.attributes);
+  const attr = data.attributes;
+  let style = "";
+  if (!attr.width) {
+    style = "width: inherit;";
+  }
+  if (!attr.height) {
+    style += "height: inherit;";
+  }
+  if (style) {
+    attr.style = style;
+  }
+  node.innerHTML = iconToHTML(data.body, attr);
   return node.firstChild;
 }
 function renderIcon(parent, state) {
@@ -2595,7 +2637,7 @@ var Button = React4.forwardRef(
   (props, ref) => {
     const { children, leftIcon, rightIcon, ...restProps } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      import_theme_ui4.Button,
+      import_theme_ui5.Button,
       {
         ref,
         ...restProps,
@@ -2621,38 +2663,38 @@ Button.displayName = "Button";
 
 // src/components/Card.tsx
 init_tsup_inject();
-var import_theme_ui5 = require("theme-ui");
+var import_theme_ui6 = require("theme-ui");
 
 // src/components/Divider.tsx
 init_tsup_inject();
-var import_theme_ui6 = require("theme-ui");
+var import_theme_ui7 = require("theme-ui");
 
 // src/components/Flex.tsx
 init_tsup_inject();
-var import_theme_ui7 = require("theme-ui");
+var import_theme_ui8 = require("theme-ui");
 
 // src/components/Grid.tsx
 init_tsup_inject();
-var import_theme_ui8 = require("theme-ui");
+var import_theme_ui9 = require("theme-ui");
 
 // src/components/Heading.tsx
 init_tsup_inject();
-var import_theme_ui9 = require("theme-ui");
+var import_theme_ui10 = require("theme-ui");
 
 // src/components/Image.tsx
 init_tsup_inject();
-var import_theme_ui10 = require("theme-ui");
+var import_theme_ui11 = require("theme-ui");
 
 // src/components/Input.tsx
 init_tsup_inject();
 var import_react4 = __toESM(require("react"));
-var import_theme_ui11 = require("theme-ui");
+var import_theme_ui12 = require("theme-ui");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Input = import_react4.default.forwardRef(
   ({ leadingIcon, trailingIcon, sx, ...inputProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_theme_ui7.Flex, { sx: { position: "relative" }, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_theme_ui8.Flex, { sx: { position: "relative" }, children: [
       leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_theme_ui15.Text,
+        import_theme_ui16.Text,
         {
           sx: {
             position: "absolute",
@@ -2666,7 +2708,7 @@ var Input = import_react4.default.forwardRef(
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_theme_ui11.Input,
+        import_theme_ui12.Input,
         {
           ref,
           sx: {
@@ -2678,7 +2720,7 @@ var Input = import_react4.default.forwardRef(
         }
       ),
       trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_theme_ui15.Text,
+        import_theme_ui16.Text,
         {
           sx: {
             position: "absolute",
@@ -2698,39 +2740,39 @@ Input.displayName = "Input";
 
 // src/components/Label.tsx
 init_tsup_inject();
-var import_theme_ui12 = require("theme-ui");
+var import_theme_ui13 = require("theme-ui");
 
 // src/components/Link.tsx
 init_tsup_inject();
-var import_theme_ui13 = require("theme-ui");
+var import_theme_ui14 = require("theme-ui");
 
 // src/components/LinearProgress.tsx
 init_tsup_inject();
-var import_theme_ui14 = require("theme-ui");
+var import_theme_ui15 = require("theme-ui");
 
 // src/components/Text.tsx
 init_tsup_inject();
-var import_theme_ui15 = require("theme-ui");
+var import_theme_ui16 = require("theme-ui");
 
 // src/components/Select.tsx
 init_tsup_inject();
-var import_theme_ui16 = require("theme-ui");
+var import_theme_ui17 = require("theme-ui");
 
 // src/components/Spinner.tsx
 init_tsup_inject();
-var import_theme_ui17 = require("theme-ui");
+var import_theme_ui18 = require("theme-ui");
 
 // src/components/Radio.tsx
 init_tsup_inject();
-var import_theme_ui18 = require("theme-ui");
+var import_theme_ui19 = require("theme-ui");
 
 // src/components/Slider.tsx
 init_tsup_inject();
-var import_theme_ui19 = require("theme-ui");
+var import_theme_ui20 = require("theme-ui");
 
 // src/components/Checkbox.tsx
 init_tsup_inject();
-var import_theme_ui20 = require("theme-ui");
+var import_theme_ui21 = require("theme-ui");
 
 // src/components/InfiniteLinearProgress.tsx
 init_tsup_inject();
@@ -2760,18 +2802,19 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_theme_ui14.Progress, { max: MAX_PROGRESS, value: progress, role: "progressbar" });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_theme_ui15.Progress, { max: MAX_PROGRESS, value: progress, role: "progressbar" });
 };
 
 // src/components/Textarea.tsx
 init_tsup_inject();
-var import_theme_ui21 = require("theme-ui");
+var import_theme_ui22 = require("theme-ui");
 
 // src/components/Container.tsx
 init_tsup_inject();
-var import_theme_ui22 = require("theme-ui");
+var import_theme_ui23 = require("theme-ui");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Badge,
   BaseStyles,
   Box,
   Button,
@@ -2812,6 +2855,6 @@ iconify-icon/dist/iconify-icon.mjs:
   * Licensed under MIT.
   *
   * @license MIT
-  * @version 1.0.5
+  * @version 1.0.7
   *)
 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.30.9",
+  "version": "1.30.11",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "@emotion/react": "^11.10.5",
+    "@emotion/react": "^11.10.6",
     "@theme-ui/match-media": "^0.15.5",
     "theme-ui": "^0.15.5"
   },
@@ -29,11 +29,11 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@iconify-icon/react": "^1.0.5",
-    "@ttoss/config": "^1.28.3",
-    "@ttoss/test-utils": "^1.20.5",
-    "@ttoss/theme": "^1.2.8",
-    "@types/jest": "^29.4.0",
+    "@iconify-icon/react": "^1.0.7",
+    "@ttoss/config": "^1.28.4",
+    "@ttoss/test-utils": "^1.20.6",
+    "@ttoss/theme": "^1.2.10",
+    "@types/jest": "^29.4.4",
     "jest": "^29.5.0",
     "tsup": "^6.6.3"
   },
@@ -45,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fb122458378a96e09d1da7fbad0bf12e72e8d04d"
+  "gitHead": "2f241b7126c460eeaea3eba6445aa139411d4b19"
 }

package/src/components/Badge.tsx

@@ -0,0 +1 @@
+export { Badge, type BadgeProps } from 'theme-ui';

package/src/index.ts

@@ -5,6 +5,7 @@ export { ThemeProvider, type ThemeProviderProps } from './theme/ThemeProvider';
 
 export { useTheme } from './theme/useTheme';
 
+export { Badge, type BadgeProps } from './components/Badge';
 export { Box, type BoxProps } from './components/Box';
 export { Button, type ButtonProps } from './components/Button';
 export { Card, type CardProps } from './components/Card';