@ttoss/ui 1.20.4 → 1.21.1

package/dist/esm/index.js

@@ -0,0 +1,206 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// tsup.inject.js
+import * as React from "react";
+
+// src/index.ts
+import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
+
+// src/theme/ThemeProvider.tsx
+import * as React2 from "react";
+
+// ../theme/dist/esm/index.js
+var DefaultTheme = {
+  colors: {
+    text: "#000",
+    background: "#fff",
+    primary: "#07c",
+    secondary: "#639",
+    gray: "#555",
+    muted: "#f6f6f6",
+    danger: "red"
+  },
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
+  fonts: {
+    body: '"Asap", sans-serif',
+    heading: '"Overpass", sans-serif',
+    monospace: '"Overpass Mono", sans-serif'
+  },
+  styles: {
+    root: {
+      fontFamily: "body",
+      fontWeight: "body"
+    },
+    a: {
+      color: "primary",
+      textDecoration: "underline",
+      cursor: "pointer",
+      fontFamily: "body"
+    },
+    progress: {
+      color: "primary",
+      backgroundColor: "background"
+    }
+  },
+  buttons: {
+    cta: {
+      color: "white",
+      backgroundColor: "primary"
+    },
+    muted: {
+      color: "text",
+      backgroundColor: "muted"
+    },
+    danger: {
+      color: "white",
+      backgroundColor: "danger"
+    }
+  },
+  cards: {
+    primary: {
+      backgroundColor: "background",
+      border: "1px solid black",
+      padding: [4, 5],
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      width: "fit-content"
+    }
+  },
+  forms: {
+    input: {
+      fontFamily: "body"
+    }
+  },
+  text: {
+    default: {
+      color: "text",
+      fontFamily: "body"
+    },
+    title: {
+      fontFamily: "heading",
+      fontSize: 4,
+      lineSpace: "3.5"
+    }
+  }
+};
+var DefaultFonts = [
+  "https://fonts.googleapis.com/css?family=Asap",
+  "https://fonts.googleapis.com/css?family=Overpass",
+  "https://fonts.googleapis.com/css?family=Overpass+Mono",
+  "https://fonts.googleapis.com/css?family=Flamenco"
+];
+
+// src/theme/ThemeProvider.tsx
+import { Global, css } from "@emotion/react";
+import { ThemeProvider as ThemeUiProvider, merge } from "theme-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ThemeProvider = ({
+  children,
+  theme = {},
+  fonts = DefaultFonts
+}) => {
+  const mergedTheme = React2.useMemo(() => {
+    if (typeof theme === "function") {
+      return theme;
+    }
+    return merge(DefaultTheme, theme);
+  }, [theme]);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs(ThemeUiProvider, {
+      theme: mergedTheme,
+      children: [
+        fonts.map((url) => /* @__PURE__ */ jsx(Global, {
+          styles: css`
+              @import url('${url}');
+            `
+        }, url)),
+        children
+      ]
+    })
+  });
+};
+var ThemeProvider_default = ThemeProvider;
+
+// src/theme/useTheme.ts
+import { useThemeUI } from "theme-ui";
+var useTheme = useThemeUI;
+
+// src/components/Box/Box.tsx
+import { Box } from "theme-ui";
+
+// src/components/Button/Button.tsx
+import { Button as ButtonUi } from "theme-ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Button = (props) => {
+  return /* @__PURE__ */ jsx2(ButtonUi, {
+    ...props,
+    sx: { cursor: "pointer", fontFamily: "body", ...props.sx }
+  });
+};
+
+// src/components/Card/Card.tsx
+import { Card } from "theme-ui";
+
+// src/components/Divider/Divider.tsx
+import { Divider } from "theme-ui";
+
+// src/components/Flex/Flex.tsx
+import { Flex } from "theme-ui";
+
+// src/components/Grid/Grid.tsx
+import { Grid } from "theme-ui";
+
+// src/components/Heading/Heading.tsx
+import { Heading } from "theme-ui";
+
+// src/components/Image/Image.tsx
+import { Image } from "theme-ui";
+
+// src/components/Input/Input.tsx
+import { Input } from "theme-ui";
+
+// src/components/Label/Label.tsx
+import { Label } from "theme-ui";
+
+// src/components/Link/Link.tsx
+import { Link } from "theme-ui";
+
+// src/components/LinearProgress/LinearProgress.tsx
+import {
+  Progress
+} from "theme-ui";
+
+// src/components/Text/Text.tsx
+import { Text } from "theme-ui";
+
+// src/components/Select/Select.tsx
+import { Select } from "theme-ui";
+
+// src/components/Spinner/Spinner.tsx
+import { Spinner } from "theme-ui";
+
+// src/components/Radio/Radio.tsx
+import { Radio } from "theme-ui";
+export {
+  Box,
+  Button,
+  Card,
+  Divider,
+  Flex,
+  Grid,
+  Heading,
+  Image,
+  Input,
+  Label,
+  Progress as LinearProgress,
+  Link,
+  Radio,
+  Select,
+  Spinner,
+  Text,
+  ThemeProvider_default as ThemeProvider,
+  useBreakpointIndex,
+  useResponsiveValue,
+  useTheme
+};

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import * as theme_ui from 'theme-ui';
+import { Theme, ButtonProps } 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';
+
+declare type ThemeProviderProps = {
+    children?: React.ReactNode;
+    theme?: Theme;
+    /**
+     * Fonts URLs.
+     */
+    fonts?: string[];
+};
+declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) => JSX.Element;
+
+declare const useTheme: () => theme_ui.ThemeUIContextValue;
+
+declare const Button: (props: ButtonProps) => JSX.Element;
+
+export { Button, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -0,0 +1,255 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Box: () => import_theme_ui3.Box,
+  Button: () => Button,
+  Card: () => import_theme_ui5.Card,
+  Divider: () => import_theme_ui6.Divider,
+  Flex: () => import_theme_ui7.Flex,
+  Grid: () => import_theme_ui8.Grid,
+  Heading: () => import_theme_ui9.Heading,
+  Image: () => import_theme_ui10.Image,
+  Input: () => import_theme_ui11.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,
+  Spinner: () => import_theme_ui17.Spinner,
+  Text: () => import_theme_ui15.Text,
+  ThemeProvider: () => ThemeProvider_default,
+  useBreakpointIndex: () => import_match_media.useBreakpointIndex,
+  useResponsiveValue: () => import_match_media.useResponsiveValue,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(src_exports);
+
+// tsup.inject.js
+var React = __toESM(require("react"));
+
+// src/index.ts
+var import_match_media = require("@theme-ui/match-media");
+
+// src/theme/ThemeProvider.tsx
+var React2 = __toESM(require("react"));
+
+// ../theme/dist/esm/index.js
+var DefaultTheme = {
+  colors: {
+    text: "#000",
+    background: "#fff",
+    primary: "#07c",
+    secondary: "#639",
+    gray: "#555",
+    muted: "#f6f6f6",
+    danger: "red"
+  },
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
+  fonts: {
+    body: '"Asap", sans-serif',
+    heading: '"Overpass", sans-serif',
+    monospace: '"Overpass Mono", sans-serif'
+  },
+  styles: {
+    root: {
+      fontFamily: "body",
+      fontWeight: "body"
+    },
+    a: {
+      color: "primary",
+      textDecoration: "underline",
+      cursor: "pointer",
+      fontFamily: "body"
+    },
+    progress: {
+      color: "primary",
+      backgroundColor: "background"
+    }
+  },
+  buttons: {
+    cta: {
+      color: "white",
+      backgroundColor: "primary"
+    },
+    muted: {
+      color: "text",
+      backgroundColor: "muted"
+    },
+    danger: {
+      color: "white",
+      backgroundColor: "danger"
+    }
+  },
+  cards: {
+    primary: {
+      backgroundColor: "background",
+      border: "1px solid black",
+      padding: [4, 5],
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      width: "fit-content"
+    }
+  },
+  forms: {
+    input: {
+      fontFamily: "body"
+    }
+  },
+  text: {
+    default: {
+      color: "text",
+      fontFamily: "body"
+    },
+    title: {
+      fontFamily: "heading",
+      fontSize: 4,
+      lineSpace: "3.5"
+    }
+  }
+};
+var DefaultFonts = [
+  "https://fonts.googleapis.com/css?family=Asap",
+  "https://fonts.googleapis.com/css?family=Overpass",
+  "https://fonts.googleapis.com/css?family=Overpass+Mono",
+  "https://fonts.googleapis.com/css?family=Flamenco"
+];
+
+// src/theme/ThemeProvider.tsx
+var import_react = require("@emotion/react");
+var import_theme_ui = require("theme-ui");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeProvider = ({
+  children,
+  theme = {},
+  fonts = DefaultFonts
+}) => {
+  const mergedTheme = React2.useMemo(() => {
+    if (typeof theme === "function") {
+      return theme;
+    }
+    return (0, import_theme_ui.merge)(DefaultTheme, theme);
+  }, [theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_theme_ui.ThemeProvider, {
+      theme: mergedTheme,
+      children: [
+        fonts.map((url) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Global, {
+          styles: import_react.css`
+              @import url('${url}');
+            `
+        }, url)),
+        children
+      ]
+    })
+  });
+};
+var ThemeProvider_default = ThemeProvider;
+
+// src/theme/useTheme.ts
+var import_theme_ui2 = require("theme-ui");
+var useTheme = import_theme_ui2.useThemeUI;
+
+// src/components/Box/Box.tsx
+var import_theme_ui3 = require("theme-ui");
+
+// src/components/Button/Button.tsx
+var import_theme_ui4 = require("theme-ui");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_theme_ui4.Button, {
+    ...props,
+    sx: { cursor: "pointer", fontFamily: "body", ...props.sx }
+  });
+};
+
+// src/components/Card/Card.tsx
+var import_theme_ui5 = require("theme-ui");
+
+// src/components/Divider/Divider.tsx
+var import_theme_ui6 = require("theme-ui");
+
+// src/components/Flex/Flex.tsx
+var import_theme_ui7 = require("theme-ui");
+
+// src/components/Grid/Grid.tsx
+var import_theme_ui8 = require("theme-ui");
+
+// src/components/Heading/Heading.tsx
+var import_theme_ui9 = require("theme-ui");
+
+// src/components/Image/Image.tsx
+var import_theme_ui10 = require("theme-ui");
+
+// src/components/Input/Input.tsx
+var import_theme_ui11 = require("theme-ui");
+
+// src/components/Label/Label.tsx
+var import_theme_ui12 = require("theme-ui");
+
+// src/components/Link/Link.tsx
+var import_theme_ui13 = require("theme-ui");
+
+// src/components/LinearProgress/LinearProgress.tsx
+var import_theme_ui14 = require("theme-ui");
+
+// src/components/Text/Text.tsx
+var import_theme_ui15 = require("theme-ui");
+
+// src/components/Select/Select.tsx
+var import_theme_ui16 = require("theme-ui");
+
+// src/components/Spinner/Spinner.tsx
+var import_theme_ui17 = require("theme-ui");
+
+// src/components/Radio/Radio.tsx
+var import_theme_ui18 = require("theme-ui");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Box,
+  Button,
+  Card,
+  Divider,
+  Flex,
+  Grid,
+  Heading,
+  Image,
+  Input,
+  Label,
+  LinearProgress,
+  Link,
+  Radio,
+  Select,
+  Spinner,
+  Text,
+  ThemeProvider,
+  useBreakpointIndex,
+  useResponsiveValue,
+  useTheme
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.20.4",
+  "version": "1.21.1",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -31,6 +31,7 @@
     "@emotion/react": "^11.10.4",
     "@ttoss/config": "^1.18.3",
     "@ttoss/test-utils": "^1.16.10",
+    "@ttoss/theme": "^1.0.1",
     "@types/jest": "^29.1.1",
     "jest": "^29.1.2",
     "tsup": "^6.2.3"
@@ -43,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9f9de9b8389be76965f125b593166f10c2171e6"
+  "gitHead": "3879642eff43efd073abf52595ed0efe7196946a"
 }

package/src/components/Radio/Radio.tsx

@@ -0,0 +1 @@
+export { Radio, type RadioProps } from 'theme-ui';

package/src/index.spec.tsx

@@ -6,4 +6,5 @@ test('should export methods', () => {
   expect(uiModule.useTheme).toBeDefined();
 
   expect(uiModule.Divider).toBeDefined();
+  expect(uiModule.Radio).toBeDefined();
 });

package/src/index.ts

@@ -26,3 +26,4 @@ export {
 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';

package/src/theme/ThemeProvider.spec.tsx

@@ -1,4 +1,4 @@
-import { defaultTheme } from './defaultTheme';
+import { DefaultTheme } from '@ttoss/theme';
 import { renderHook } from '@ttoss/test-utils';
 import { useTheme } from './useTheme';
 import ThemeProvider from './ThemeProvider';
@@ -9,7 +9,7 @@ test('should return default theme colors', () => {
     initialProps: { theme: {} },
   });
 
-  expect(result.current.theme.rawColors).toEqual(defaultTheme.colors);
+  expect(result.current.theme.rawColors).toEqual(DefaultTheme.colors);
 });
 
 test('should return new theme colors', () => {

package/src/theme/ThemeProvider.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
+import { DefaultFonts, DefaultTheme } from '@ttoss/theme';
 import { Global, css } from '@emotion/react';
 import { Theme, ThemeProvider as ThemeUiProvider, merge } from 'theme-ui';
-import { defaultFonts } from './defaultFonts';
-import { defaultTheme } from './defaultTheme';
 
 export type ThemeProviderProps = {
   children?: React.ReactNode;
@@ -16,14 +15,14 @@ export type ThemeProviderProps = {
 const ThemeProvider = ({
   children,
   theme = {},
-  fonts = defaultFonts,
+  fonts = DefaultFonts,
 }: ThemeProviderProps) => {
   const mergedTheme = React.useMemo(() => {
     if (typeof theme === 'function') {
       return theme;
     }
 
-    return merge(defaultTheme, theme);
+    return merge(DefaultTheme, theme);
   }, [theme]);
 
   return (

package/src/theme/defaultFonts.ts

@@ -1,6 +0,0 @@
-export const defaultFonts = [
-  'https://fonts.googleapis.com/css?family=Asap',
-  'https://fonts.googleapis.com/css?family=Overpass',
-  'https://fonts.googleapis.com/css?family=Overpass+Mono',
-  'https://fonts.googleapis.com/css?family=Flamenco',
-];

package/src/theme/defaultTheme.ts

@@ -1,76 +0,0 @@
-import { Theme } from 'theme-ui';
-
-export const defaultTheme: Theme = {
-  colors: {
-    text: '#000',
-    background: '#fff',
-    primary: '#07c',
-    secondary: '#639',
-    gray: '#555',
-    muted: '#f6f6f6',
-    danger: 'red',
-  },
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
-  fonts: {
-    body: '"Asap", sans-serif',
-    heading: '"Overpass", sans-serif',
-    monospace: '"Overpass Mono", sans-serif',
-  },
-  styles: {
-    root: {
-      fontFamily: 'body',
-      fontWeight: 'body',
-    },
-    a: {
-      color: 'primary',
-      textDecoration: 'underline',
-      cursor: 'pointer',
-      fontFamily: 'body',
-    },
-    progress: {
-      color: 'primary',
-      backgroundColor: 'background',
-    },
-  },
-  buttons: {
-    cta: {
-      color: 'white',
-      backgroundColor: 'primary',
-    },
-    muted: {
-      color: 'text',
-      backgroundColor: 'muted',
-    },
-    danger: {
-      color: 'white',
-      backgroundColor: 'danger',
-    },
-  },
-  cards: {
-    primary: {
-      backgroundColor: 'background',
-      border: '1px solid black',
-      padding: [4, 5],
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      width: 'fit-content',
-    },
-  },
-  forms: {
-    input: {
-      fontFamily: 'body',
-    },
-  },
-  text: {
-    default: {
-      color: 'text',
-      fontFamily: 'body',
-    },
-    title: {
-      fontFamily: 'heading',
-      fontSize: 4,
-      lineSpace: '3.5',
-    },
-  },
-};