@ttoss/ui 0.9.2 → 1.4.1

package/dist/esm/index.js

@@ -0,0 +1,180 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// tsup.inject.js
+import * as React from "react";
+
+// src/index.ts
+import * as color from "@theme-ui/color";
+import { Themed } from "@theme-ui/mdx";
+
+// src/theme/ThemeProvider.tsx
+import { Global } from "@emotion/react";
+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"
+  },
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  styles: {
+    a: {
+      color: "primary",
+      textDecoration: "underline",
+      cursor: "pointer"
+    },
+    progress: {
+      color: "primary",
+      backgroundColor: "background"
+    }
+  },
+  buttons: {
+    primary: {
+      color: "white",
+      backgroundColor: "primary"
+    },
+    secondary: {
+      color: "white",
+      backgroundColor: "secondary"
+    }
+  },
+  cards: {
+    primary: {
+      backgroundColor: "background",
+      border: "1px solid black",
+      padding: [4, 5]
+    }
+  },
+  text: {
+    title: {
+      fontSize: [4, 5],
+      textAlign: "center"
+    }
+  }
+};
+
+// 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(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ThemeUiProvider, {
+    theme: mergedTheme
+  }, /* @__PURE__ */ React2.createElement(Global, {
+    styles: {
+      "*": {
+        margin: 0
+      }
+    }
+  }), 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 as ButtonUi } from "@theme-ui/components";
+var Button = (props) => {
+  return /* @__PURE__ */ React.createElement(ButtonUi, __spreadProps(__spreadValues({}, props), {
+    sx: __spreadValues({ cursor: "pointer", padding: 2 }, props.sx)
+  }));
+};
+var Button_default = Button;
+
+// src/components/Card/Card.tsx
+import { Card } 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";
+
+// src/components/Link/Link.tsx
+import { Link } from "@theme-ui/components";
+
+// src/components/LinearProgress/LinearProgress.tsx
+import { Progress } from "@theme-ui/components";
+var LinearProgress = Progress;
+export {
+  Box,
+  Button_default as Button,
+  Card,
+  Flex,
+  FormField_default as FormField,
+  Image,
+  Input,
+  LinearProgress,
+  Link,
+  Text,
+  ThemeProvider_default as ThemeProvider,
+  Themed,
+  color,
+  useTheme
+};

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import * as color from '@theme-ui/color';
+export { color };
+import * as _theme_ui_core from '@theme-ui/core';
+import { Theme } from '@theme-ui/core';
+export { Theme } from '@theme-ui/core';
+export { Themed } from '@theme-ui/mdx';
+import * as React from 'react';
+import * as _theme_ui_components from '@theme-ui/components';
+import { ButtonProps, ProgressProps } from '@theme-ui/components';
+export { Box, BoxProps, ButtonProps, Card, CardProps, Flex, FlexProps, Image, ImageProps, Input, InputProps, Link, LinkProps, Text, TextProps } from '@theme-ui/components';
+
+declare type ThemeProviderProps = {
+    children?: React.ReactNode;
+    theme?: Theme;
+};
+declare const ThemeProvider: ({ children, theme }: ThemeProviderProps) => JSX.Element;
+
+declare const useTheme: () => _theme_ui_core.ThemeUIContextValue;
+
+declare const Button: (props: ButtonProps) => JSX.Element;
+
+declare type FormFieldProps = {
+    children?: React.ReactNode;
+    label?: string;
+    error?: string[] | string;
+};
+declare const FormField: ({ children, label, error }: FormFieldProps) => JSX.Element;
+
+declare type LinearProgressProps = ProgressProps;
+declare const LinearProgress: _theme_ui_components.ForwardRef<HTMLProgressElement, ProgressProps>;
+
+export { Button, FormField, FormFieldProps, LinearProgress, LinearProgressProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -0,0 +1,226 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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: () => Button_default,
+  Card: () => import_components3.Card,
+  Flex: () => import_components4.Flex,
+  FormField: () => FormField_default,
+  Image: () => import_components7.Image,
+  Input: () => import_components8.Input,
+  LinearProgress: () => LinearProgress,
+  Link: () => import_components9.Link,
+  Text: () => import_components6.Text,
+  ThemeProvider: () => ThemeProvider_default,
+  Themed: () => import_mdx.Themed,
+  color: () => color,
+  useTheme: () => useTheme
+});
+
+// tsup.inject.js
+var React = __toESM(require("react"));
+
+// src/index.ts
+var color = __toESM(require("@theme-ui/color"));
+var import_mdx = require("@theme-ui/mdx");
+
+// src/theme/ThemeProvider.tsx
+var import_react = require("@emotion/react");
+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"
+  },
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  styles: {
+    a: {
+      color: "primary",
+      textDecoration: "underline",
+      cursor: "pointer"
+    },
+    progress: {
+      color: "primary",
+      backgroundColor: "background"
+    }
+  },
+  buttons: {
+    primary: {
+      color: "white",
+      backgroundColor: "primary"
+    },
+    secondary: {
+      color: "white",
+      backgroundColor: "secondary"
+    }
+  },
+  cards: {
+    primary: {
+      backgroundColor: "background",
+      border: "1px solid black",
+      padding: [4, 5]
+    }
+  },
+  text: {
+    title: {
+      fontSize: [4, 5],
+      textAlign: "center"
+    }
+  }
+};
+
+// 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(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_core.ThemeProvider, {
+    theme: mergedTheme
+  }, /* @__PURE__ */ React2.createElement(import_react.Global, {
+    styles: {
+      "*": {
+        margin: 0
+      }
+    }
+  }), 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");
+var Button = (props) => {
+  return /* @__PURE__ */ React.createElement(import_components2.Button, __spreadProps(__spreadValues({}, props), {
+    sx: __spreadValues({ cursor: "pointer", padding: 2 }, props.sx)
+  }));
+};
+var Button_default = Button;
+
+// src/components/Card/Card.tsx
+var import_components3 = require("@theme-ui/components");
+
+// src/components/Flex/Flex.tsx
+var import_components4 = require("@theme-ui/components");
+
+// src/components/FormField/FormField.tsx
+var React3 = __toESM(require("react"));
+
+// src/components/Label/Label.tsx
+var import_components5 = require("@theme-ui/components");
+
+// src/components/Text/Text.tsx
+var import_components6 = 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_components5.Label, {
+    sx: { display: "flex", flexDirection: "column" }
+  }, label && /* @__PURE__ */ React3.createElement(import_components6.Text, {
+    as: "span"
+  }, label), children), errorAsArray.map((err) => /* @__PURE__ */ React3.createElement(import_components6.Text, {
+    key: err,
+    as: "span",
+    variant: "error"
+  }, err)));
+};
+var FormField_default = FormField;
+
+// src/components/Image/Image.tsx
+var import_components7 = require("@theme-ui/components");
+
+// src/components/Input/Input.tsx
+var import_components8 = require("@theme-ui/components");
+
+// src/components/Link/Link.tsx
+var import_components9 = require("@theme-ui/components");
+
+// src/components/LinearProgress/LinearProgress.tsx
+var import_components10 = require("@theme-ui/components");
+var LinearProgress = import_components10.Progress;
+module.exports = __toCommonJS(src_exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Box,
+  Button,
+  Card,
+  Flex,
+  FormField,
+  Image,
+  Input,
+  LinearProgress,
+  Link,
+  Text,
+  ThemeProvider,
+  Themed,
+  color,
+  useTheme
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "0.9.2",
+  "version": "1.4.1",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -34,15 +34,17 @@
   "dependencies": {
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@theme-ui/color": "^0.13.1",
     "@theme-ui/components": "^0.13.1",
-    "@theme-ui/core": "^0.13.1"
+    "@theme-ui/core": "^0.13.1",
+    "@theme-ui/mdx": "^0.13.1"
   },
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": ">=17.0.2"
   },
   "devDependencies": {
-    "@ttoss/config": "^0.9.2",
-    "@ttoss/test-utils": "^0.9.2"
+    "@ttoss/config": "^1.4.1",
+    "@ttoss/test-utils": "^1.4.1"
   },
-  "gitHead": "6a904124b42ad72f3ba318ec42b861f803acb218"
+  "gitHead": "c5a8ea6093886fc6e500e22db72687e011cdb5bc"
 }

package/src/components/Button/Button.tsx

@@ -1,3 +1,13 @@
-export { Button as default } from '@theme-ui/components';
+import { Button as ButtonUi } from '@theme-ui/components';
 
-export type { ButtonProps } from '@theme-ui/components';
+import type { ButtonProps } from '@theme-ui/components';
+
+export type { ButtonProps };
+
+const Button = (props: ButtonProps) => {
+  return (
+    <ButtonUi {...props} sx={{ cursor: 'pointer', padding: 2, ...props.sx }} />
+  );
+};
+
+export default Button;

package/src/components/FormField/FormField.spec.tsx

@@ -1,4 +1,4 @@
-import { customRender, screen } from '@ttoss/test-utils';
+import { render, screen } from '@ttoss/test-utils';
 
 import Input from '../Input/Input';
 
@@ -8,7 +8,7 @@ const label = 'Label';
 const value = 'Value';
 
 test('check if label is rendered on screen', () => {
-  customRender(
+  render(
     <FormField label={label}>
       <Input defaultValue={value} />
     </FormField>
@@ -18,7 +18,7 @@ test('check if label is rendered on screen', () => {
 });
 
 test('check if label is associated with input', () => {
-  customRender(
+  render(
     <FormField label={label}>
       <Input defaultValue={value} />
     </FormField>
@@ -30,7 +30,7 @@ test('check if label is associated with input', () => {
 test('check if renders a single error', () => {
   const error = 'Error';
 
-  customRender(
+  render(
     <FormField label={label} error={error}>
       <Input defaultValue={value} />
     </FormField>
@@ -42,7 +42,7 @@ test('check if renders a single error', () => {
 test('check if renders multiple errors', () => {
   const errors = ['Error1', 'Error2', 'Error3'];
 
-  customRender(
+  render(
     <FormField label={label} error={errors}>
       <Input defaultValue={value} />
     </FormField>

package/src/components/LinearProgress/LinearProgress.tsx

@@ -0,0 +1,5 @@
+import { Progress, ProgressProps } from '@theme-ui/components';
+
+export type LinearProgressProps = ProgressProps;
+
+export const LinearProgress = Progress;

package/src/components/Link/Link.tsx

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

package/src/index.ts

@@ -1,3 +1,7 @@
+export * as color from '@theme-ui/color';
+export type { Theme } from '@theme-ui/core';
+export { Themed } from '@theme-ui/mdx';
+
 export {
   default as ThemeProvider,
   ThemeProviderProps,
@@ -15,4 +19,9 @@ export {
 } from './components/FormField/FormField';
 export { default as Image, ImageProps } from './components/Image/Image';
 export { default as Input, InputProps } from './components/Input/Input';
+export { default as Link, LinkProps } from './components/Link/Link';
+export {
+  LinearProgress,
+  LinearProgressProps,
+} from './components/LinearProgress/LinearProgress';
 export { default as Text, TextProps } from './components/Text/Text';

package/src/theme/ThemeProvider.spec.tsx

@@ -64,5 +64,11 @@ test('should pass variants', () => {
     },
   });
 
-  expect(result.current.theme).toEqual(expect.objectContaining(variants));
+  expect(result.current.theme.cards).toEqual(
+    expect.objectContaining(variants.cards)
+  );
+
+  expect(result.current.theme.layout).toEqual(
+    expect.objectContaining(variants.layout)
+  );
 });

package/src/theme/ThemeProvider.tsx

@@ -1,18 +1,15 @@
-import {
-  ThemeProvider as ThemeUiProvider,
-  ThemeProviderProps,
-  merge,
-} from '@theme-ui/core';
+import { Global } from '@emotion/react';
+import { ThemeProvider as ThemeUiProvider, Theme, merge } from '@theme-ui/core';
 import * as React from 'react';
 
 import { defaultTheme } from './defaultTheme';
 
-export type { ThemeProviderProps };
+export type ThemeProviderProps = {
+  children?: React.ReactNode;
+  theme?: Theme;
+};
 
-const ThemeProvider: React.FC<Partial<ThemeProviderProps>> = ({
-  children,
-  theme = {},
-}) => {
+const ThemeProvider = ({ children, theme = {} }: ThemeProviderProps) => {
   const mergedTheme = React.useMemo(() => {
     if (typeof theme === 'function') {
       return theme;
@@ -21,7 +18,20 @@ const ThemeProvider: React.FC<Partial<ThemeProviderProps>> = ({
     return merge(defaultTheme, theme);
   }, [theme]);
 
-  return <ThemeUiProvider theme={mergedTheme}>{children}</ThemeUiProvider>;
+  return (
+    <>
+      <ThemeUiProvider theme={mergedTheme}>
+        <Global
+          styles={{
+            '*': {
+              margin: 0,
+            },
+          }}
+        />
+        {children}
+      </ThemeUiProvider>
+    </>
+  );
 };
 
 export default ThemeProvider;

package/src/theme/defaultTheme.ts

@@ -8,18 +8,39 @@ export const defaultTheme: Theme = {
     secondary: '#639',
     gray: '#555',
   },
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  styles: {
+    a: {
+      color: 'primary',
+      textDecoration: 'underline',
+      cursor: 'pointer',
+    },
+    progress: {
+      color: 'primary',
+      backgroundColor: 'background',
+    },
+  },
   buttons: {
     primary: {
-      color: 'background',
-      bg: 'primary',
+      color: 'white',
+      backgroundColor: 'primary',
     },
     secondary: {
-      color: 'background',
-      bg: 'secondary',
+      color: 'white',
+      backgroundColor: 'secondary',
     },
-    gray: {
-      color: 'background',
-      bg: 'gray',
+  },
+  cards: {
+    primary: {
+      backgroundColor: 'background',
+      border: '1px solid black',
+      padding: [4, 5],
+    },
+  },
+  text: {
+    title: {
+      fontSize: [4, 5],
+      textAlign: 'center',
     },
   },
 };