@ttoss/ui 1.20.4 → 1.21.0

package/dist/esm/index.js

@@ -0,0 +1,208 @@
+/** 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";
+import { Global, css } from "@emotion/react";
+import { ThemeProvider as ThemeUiProvider, merge } from "theme-ui";
+
+// src/theme/defaultFonts.ts
+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/defaultTheme.ts
+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"
+    }
+  }
+};
+
+// src/theme/ThemeProvider.tsx
+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,257 @@
+/** 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"));
+var import_react = require("@emotion/react");
+var import_theme_ui = require("theme-ui");
+
+// src/theme/defaultFonts.ts
+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/defaultTheme.ts
+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"
+    }
+  }
+};
+
+// src/theme/ThemeProvider.tsx
+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.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9f9de9b8389be76965f125b593166f10c2171e6"
+  "gitHead": "8407ac0199e566fb6695f0caddb9f6bed4bf6578"
 }

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';