@ttoss/ui 1.20.2 → 1.20.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.20.2",
+  "version": "1.20.4",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -29,8 +29,8 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.10.4",
-    "@ttoss/config": "^1.18.1",
-    "@ttoss/test-utils": "^1.16.8",
+    "@ttoss/config": "^1.18.3",
+    "@ttoss/test-utils": "^1.16.10",
     "@types/jest": "^29.1.1",
     "jest": "^29.1.2",
     "tsup": "^6.2.3"
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0759c1ec512f6cb0a613c209beba1fcf6af7e232"
+  "gitHead": "b9f9de9b8389be76965f125b593166f10c2171e6"
 }

package/dist/esm/index.js

@@ -1,202 +0,0 @@
-// 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";
-export {
-  Box,
-  Button,
-  Card,
-  Divider,
-  Flex,
-  Grid,
-  Heading,
-  Image,
-  Input,
-  Label,
-  Progress as LinearProgress,
-  Link,
-  Select,
-  Spinner,
-  Text,
-  ThemeProvider_default as ThemeProvider,
-  useBreakpointIndex,
-  useResponsiveValue,
-  useTheme
-};

package/dist/index.d.ts

@@ -1,21 +0,0 @@
-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, 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

@@ -1,251 +0,0 @@
-"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,
-  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");
-// 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,
-  Select,
-  Spinner,
-  Text,
-  ThemeProvider,
-  useBreakpointIndex,
-  useResponsiveValue,
-  useTheme
-});