@ttoss/ui 0.9.1 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -32,6 +32,8 @@
     "dev": "yarn workspace @ttoss/storybook run dev"
   },
   "dependencies": {
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "@theme-ui/components": "^0.13.1",
     "@theme-ui/core": "^0.13.1"
   },
@@ -39,8 +41,8 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@ttoss/config": "^0.9.1",
-    "@ttoss/test-utils": "^0.9.1"
+    "@ttoss/config": "^0.9.2",
+    "@ttoss/test-utils": "^0.9.2"
   },
-  "gitHead": "22b5b5069d316cf219a95635bb05c21b8e3367a4"
+  "gitHead": "6a904124b42ad72f3ba318ec42b861f803acb218"
 }

package/src/components/Card/Card.tsx

@@ -0,0 +1,3 @@
+export { Card as default } from '@theme-ui/components';
+
+export type { CardProps } from '@theme-ui/components';

package/src/index.ts

@@ -7,6 +7,7 @@ export { useTheme } from './theme/useTheme';
 
 export { default as Box, BoxProps } from './components/Box/Box';
 export { default as Button, ButtonProps } from './components/Button/Button';
+export { default as Card, CardProps } from './components/Card/Card';
 export { default as Flex, FlexProps } from './components/Flex/Flex';
 export {
   default as FormField,

package/dist/esm/index.js

@@ -1,113 +0,0 @@
-// tsup.inject.js
-import * as React from "react";
-
-// src/theme/ThemeProvider.tsx
-import {
-  ThemeProvider as ThemeUiProvider,
-  merge
-} from "@theme-ui/core";
-import * as React2 from "react";
-
-// src/theme/defaultTheme.ts
-var defaultTheme = {
-  colors: {
-    text: "#000",
-    background: "#fff",
-    primary: "#07c",
-    secondary: "#639",
-    gray: "#555"
-  },
-  buttons: {
-    primary: {
-      color: "background",
-      bg: "primary"
-    },
-    secondary: {
-      color: "background",
-      bg: "secondary"
-    },
-    gray: {
-      color: "background",
-      bg: "gray"
-    }
-  }
-};
-
-// src/theme/ThemeProvider.tsx
-var ThemeProvider = ({
-  children,
-  theme = {}
-}) => {
-  const mergedTheme = React2.useMemo(() => {
-    if (typeof theme === "function") {
-      return theme;
-    }
-    return merge(defaultTheme, theme);
-  }, [theme]);
-  return /* @__PURE__ */ React2.createElement(ThemeUiProvider, {
-    theme: mergedTheme
-  }, children);
-};
-var ThemeProvider_default = ThemeProvider;
-
-// src/theme/useTheme.ts
-import { useThemeUI } from "@theme-ui/core";
-var useTheme = useThemeUI;
-
-// src/components/Box/Box.tsx
-import { Box } from "@theme-ui/components";
-
-// src/components/Button/Button.tsx
-import { Button } from "@theme-ui/components";
-
-// src/components/Flex/Flex.tsx
-import { Flex } from "@theme-ui/components";
-
-// src/components/FormField/FormField.tsx
-import * as React3 from "react";
-
-// src/components/Label/Label.tsx
-import { Label } from "@theme-ui/components";
-
-// src/components/Text/Text.tsx
-import { Text } from "@theme-ui/components";
-
-// src/components/FormField/FormField.tsx
-var FormField = ({ children, label, error }) => {
-  const errorAsArray = (() => {
-    if (Array.isArray(error)) {
-      return error;
-    }
-    if (typeof error === "string") {
-      return [error];
-    }
-    return [];
-  })();
-  return /* @__PURE__ */ React3.createElement(Box, null, /* @__PURE__ */ React3.createElement(Label, {
-    sx: { display: "flex", flexDirection: "column" }
-  }, label && /* @__PURE__ */ React3.createElement(Text, {
-    as: "span"
-  }, label), children), errorAsArray.map((err) => /* @__PURE__ */ React3.createElement(Text, {
-    key: err,
-    as: "span",
-    variant: "error"
-  }, err)));
-};
-var FormField_default = FormField;
-
-// src/components/Image/Image.tsx
-import { Image } from "@theme-ui/components";
-
-// src/components/Input/Input.tsx
-import { Input } from "@theme-ui/components";
-export {
-  Box,
-  Button,
-  Flex,
-  FormField_default as FormField,
-  Image,
-  Input,
-  Text,
-  ThemeProvider_default as ThemeProvider,
-  useTheme
-};

package/dist/index.d.ts

@@ -1,18 +0,0 @@
-import * as _theme_ui_core from '@theme-ui/core';
-import { ThemeProviderProps } from '@theme-ui/core';
-export { ThemeProviderProps } from '@theme-ui/core';
-import * as React from 'react';
-export { Box, BoxProps, Button, ButtonProps, Flex, FlexProps, Image, ImageProps, Input, InputProps, Text, TextProps } from '@theme-ui/components';
-
-declare const ThemeProvider: React.FC<Partial<ThemeProviderProps>>;
-
-declare const useTheme: () => _theme_ui_core.ThemeUIContextValue;
-
-declare type FormFieldProps = {
-    children?: React.ReactNode;
-    label?: string;
-    error?: string[] | string;
-};
-declare const FormField: ({ children, label, error }: FormFieldProps) => JSX.Element;
-
-export { FormField, FormFieldProps, ThemeProvider, useTheme };

package/dist/index.js

@@ -1,154 +0,0 @@
-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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Box: () => import_components.Box,
-  Button: () => import_components2.Button,
-  Flex: () => import_components3.Flex,
-  FormField: () => FormField_default,
-  Image: () => import_components6.Image,
-  Input: () => import_components7.Input,
-  Text: () => import_components5.Text,
-  ThemeProvider: () => ThemeProvider_default,
-  useTheme: () => useTheme
-});
-
-// tsup.inject.js
-var React = __toESM(require("react"));
-
-// src/theme/ThemeProvider.tsx
-var import_core = require("@theme-ui/core");
-var React2 = __toESM(require("react"));
-
-// src/theme/defaultTheme.ts
-var defaultTheme = {
-  colors: {
-    text: "#000",
-    background: "#fff",
-    primary: "#07c",
-    secondary: "#639",
-    gray: "#555"
-  },
-  buttons: {
-    primary: {
-      color: "background",
-      bg: "primary"
-    },
-    secondary: {
-      color: "background",
-      bg: "secondary"
-    },
-    gray: {
-      color: "background",
-      bg: "gray"
-    }
-  }
-};
-
-// src/theme/ThemeProvider.tsx
-var ThemeProvider = ({
-  children,
-  theme = {}
-}) => {
-  const mergedTheme = React2.useMemo(() => {
-    if (typeof theme === "function") {
-      return theme;
-    }
-    return (0, import_core.merge)(defaultTheme, theme);
-  }, [theme]);
-  return /* @__PURE__ */ React2.createElement(import_core.ThemeProvider, {
-    theme: mergedTheme
-  }, children);
-};
-var ThemeProvider_default = ThemeProvider;
-
-// src/theme/useTheme.ts
-var import_core2 = require("@theme-ui/core");
-var useTheme = import_core2.useThemeUI;
-
-// src/components/Box/Box.tsx
-var import_components = require("@theme-ui/components");
-
-// src/components/Button/Button.tsx
-var import_components2 = require("@theme-ui/components");
-
-// src/components/Flex/Flex.tsx
-var import_components3 = require("@theme-ui/components");
-
-// src/components/FormField/FormField.tsx
-var React3 = __toESM(require("react"));
-
-// src/components/Label/Label.tsx
-var import_components4 = require("@theme-ui/components");
-
-// src/components/Text/Text.tsx
-var import_components5 = require("@theme-ui/components");
-
-// src/components/FormField/FormField.tsx
-var FormField = ({ children, label, error }) => {
-  const errorAsArray = (() => {
-    if (Array.isArray(error)) {
-      return error;
-    }
-    if (typeof error === "string") {
-      return [error];
-    }
-    return [];
-  })();
-  return /* @__PURE__ */ React3.createElement(import_components.Box, null, /* @__PURE__ */ React3.createElement(import_components4.Label, {
-    sx: { display: "flex", flexDirection: "column" }
-  }, label && /* @__PURE__ */ React3.createElement(import_components5.Text, {
-    as: "span"
-  }, label), children), errorAsArray.map((err) => /* @__PURE__ */ React3.createElement(import_components5.Text, {
-    key: err,
-    as: "span",
-    variant: "error"
-  }, err)));
-};
-var FormField_default = FormField;
-
-// src/components/Image/Image.tsx
-var import_components6 = require("@theme-ui/components");
-
-// src/components/Input/Input.tsx
-var import_components7 = require("@theme-ui/components");
-module.exports = __toCommonJS(src_exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Box,
-  Button,
-  Flex,
-  FormField,
-  Image,
-  Input,
-  Text,
-  ThemeProvider,
-  useTheme
-});