@ttoss/ui 1.25.0 → 1.26.0

package/dist/esm/index.js

@@ -110,11 +110,13 @@ var ThemeProvider = ({
     children: /* @__PURE__ */ jsxs(ThemeUiProvider, {
       theme: mergedTheme,
       children: [
-        fonts.map((url) => /* @__PURE__ */ jsx(Global, {
-          styles: css`
-              @import url('${url}');
-            `
-        }, url)),
+        fonts.map((url) => {
+          return /* @__PURE__ */ jsx(Global, {
+            styles: css`
+                @import url('${url}');
+              `
+          }, url);
+        }),
         children
       ]
     })
@@ -126,10 +128,10 @@ var ThemeProvider_default = ThemeProvider;
 import { useThemeUI } from "theme-ui";
 var useTheme = useThemeUI;
 
-// src/components/Box/Box.tsx
+// src/components/Box.tsx
 import { Box } from "theme-ui";
 
-// src/components/Button/Button.tsx
+// src/components/Button.tsx
 import { Button as ButtonUi } from "theme-ui";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var Button = (props) => {
@@ -139,51 +141,51 @@ var Button = (props) => {
   });
 };
 
-// src/components/Card/Card.tsx
+// src/components/Card.tsx
 import { Card } from "theme-ui";
 
-// src/components/Divider/Divider.tsx
+// src/components/Divider.tsx
 import { Divider } from "theme-ui";
 
-// src/components/Flex/Flex.tsx
+// src/components/Flex.tsx
 import { Flex } from "theme-ui";
 
-// src/components/Grid/Grid.tsx
+// src/components/Grid.tsx
 import { Grid } from "theme-ui";
 
-// src/components/Heading/Heading.tsx
+// src/components/Heading.tsx
 import { Heading } from "theme-ui";
 
-// src/components/Image/Image.tsx
+// src/components/Image.tsx
 import { Image } from "theme-ui";
 
-// src/components/Input/Input.tsx
+// src/components/Input.tsx
 import { Input } from "theme-ui";
 
-// src/components/Label/Label.tsx
+// src/components/Label.tsx
 import { Label } from "theme-ui";
 
-// src/components/Link/Link.tsx
+// src/components/Link.tsx
 import { Link } from "theme-ui";
 
-// src/components/LinearProgress/LinearProgress.tsx
+// src/components/LinearProgress.tsx
 import {
   Progress
 } from "theme-ui";
 
-// src/components/Text/Text.tsx
+// src/components/Text.tsx
 import { Text } from "theme-ui";
 
-// src/components/Select/Select.tsx
+// src/components/Select.tsx
 import { Select } from "theme-ui";
 
-// src/components/Spinner/Spinner.tsx
+// src/components/Spinner.tsx
 import { Spinner } from "theme-ui";
 
-// src/components/Radio/Radio.tsx
+// src/components/Radio.tsx
 import { Radio } from "theme-ui";
 
-// src/components/Icon/Icon.tsx
+// src/components/Icon.tsx
 import { Icon as IconUI } from "@iconify/react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var Icon = ({ icon, sx, iconProps, ...props }) => {
@@ -197,11 +199,45 @@ var Icon = ({ icon, sx, iconProps, ...props }) => {
   });
 };
 
-// src/components/Slider/Slider.tsx
+// src/components/Slider.tsx
 import { Slider } from "theme-ui";
 
-// src/components/Checkbox/Checkbox.tsx
+// src/components/Checkbox.tsx
 import { Checkbox } from "theme-ui";
+
+// src/components/InfiniteLinearProgress.tsx
+import * as React3 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MAX_PROGRESS = 100;
+var InfiniteLinearProgress = () => {
+  const [progress, setProgress] = React3.useState(0);
+  React3.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((oldProgress) => {
+        if (oldProgress === MAX_PROGRESS) {
+          return 0;
+        }
+        let diff = 0;
+        if (oldProgress > 0.97 * MAX_PROGRESS) {
+          diff -= 0.75 * MAX_PROGRESS;
+        } else if (oldProgress > 0.6 * MAX_PROGRESS) {
+          diff = Math.random() * (MAX_PROGRESS - oldProgress) * 0.1;
+        } else {
+          diff = Math.random() * (MAX_PROGRESS * 0.02);
+        }
+        return Math.min(oldProgress + diff, MAX_PROGRESS);
+      });
+    }, 100);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx4(Progress, {
+    max: MAX_PROGRESS,
+    value: progress,
+    role: "progressbar"
+  });
+};
 export {
   Box,
   Button,
@@ -213,6 +249,7 @@ export {
   Heading,
   Icon,
   Image,
+  InfiniteLinearProgress,
   Input,
   Label,
   Progress as LinearProgress,

package/dist/index.d.ts

@@ -25,4 +25,6 @@ declare type IconProps = TextProps & {
 };
 declare const Icon: ({ icon, sx, iconProps, ...props }: IconProps) => JSX.Element;
 
-export { Button, Icon, IconProps, ThemeProvider, ThemeProviderProps, useTheme };
+declare const InfiniteLinearProgress: () => JSX.Element;
+
+export { Button, Icon, IconProps, InfiniteLinearProgress, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -37,6 +37,7 @@ __export(src_exports, {
   Heading: () => import_theme_ui9.Heading,
   Icon: () => Icon,
   Image: () => import_theme_ui10.Image,
+  InfiniteLinearProgress: () => InfiniteLinearProgress,
   Input: () => import_theme_ui11.Input,
   Label: () => import_theme_ui12.Label,
   LinearProgress: () => import_theme_ui14.Progress,
@@ -163,11 +164,13 @@ var ThemeProvider = ({
     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)),
+        fonts.map((url) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Global, {
+            styles: import_react.css`
+                @import url('${url}');
+              `
+          }, url);
+        }),
         children
       ]
     })
@@ -179,10 +182,10 @@ var ThemeProvider_default = ThemeProvider;
 var import_theme_ui2 = require("theme-ui");
 var useTheme = import_theme_ui2.useThemeUI;
 
-// src/components/Box/Box.tsx
+// src/components/Box.tsx
 var import_theme_ui3 = require("theme-ui");
 
-// src/components/Button/Button.tsx
+// src/components/Button.tsx
 var import_theme_ui4 = require("theme-ui");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Button = (props) => {
@@ -192,49 +195,49 @@ var Button = (props) => {
   });
 };
 
-// src/components/Card/Card.tsx
+// src/components/Card.tsx
 var import_theme_ui5 = require("theme-ui");
 
-// src/components/Divider/Divider.tsx
+// src/components/Divider.tsx
 var import_theme_ui6 = require("theme-ui");
 
-// src/components/Flex/Flex.tsx
+// src/components/Flex.tsx
 var import_theme_ui7 = require("theme-ui");
 
-// src/components/Grid/Grid.tsx
+// src/components/Grid.tsx
 var import_theme_ui8 = require("theme-ui");
 
-// src/components/Heading/Heading.tsx
+// src/components/Heading.tsx
 var import_theme_ui9 = require("theme-ui");
 
-// src/components/Image/Image.tsx
+// src/components/Image.tsx
 var import_theme_ui10 = require("theme-ui");
 
-// src/components/Input/Input.tsx
+// src/components/Input.tsx
 var import_theme_ui11 = require("theme-ui");
 
-// src/components/Label/Label.tsx
+// src/components/Label.tsx
 var import_theme_ui12 = require("theme-ui");
 
-// src/components/Link/Link.tsx
+// src/components/Link.tsx
 var import_theme_ui13 = require("theme-ui");
 
-// src/components/LinearProgress/LinearProgress.tsx
+// src/components/LinearProgress.tsx
 var import_theme_ui14 = require("theme-ui");
 
-// src/components/Text/Text.tsx
+// src/components/Text.tsx
 var import_theme_ui15 = require("theme-ui");
 
-// src/components/Select/Select.tsx
+// src/components/Select.tsx
 var import_theme_ui16 = require("theme-ui");
 
-// src/components/Spinner/Spinner.tsx
+// src/components/Spinner.tsx
 var import_theme_ui17 = require("theme-ui");
 
-// src/components/Radio/Radio.tsx
+// src/components/Radio.tsx
 var import_theme_ui18 = require("theme-ui");
 
-// src/components/Icon/Icon.tsx
+// src/components/Icon.tsx
 var import_react2 = require("@iconify/react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Icon = ({ icon, sx, iconProps, ...props }) => {
@@ -248,11 +251,45 @@ var Icon = ({ icon, sx, iconProps, ...props }) => {
   });
 };
 
-// src/components/Slider/Slider.tsx
+// src/components/Slider.tsx
 var import_theme_ui19 = require("theme-ui");
 
-// src/components/Checkbox/Checkbox.tsx
+// src/components/Checkbox.tsx
 var import_theme_ui20 = require("theme-ui");
+
+// src/components/InfiniteLinearProgress.tsx
+var React3 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MAX_PROGRESS = 100;
+var InfiniteLinearProgress = () => {
+  const [progress, setProgress] = React3.useState(0);
+  React3.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((oldProgress) => {
+        if (oldProgress === MAX_PROGRESS) {
+          return 0;
+        }
+        let diff = 0;
+        if (oldProgress > 0.97 * MAX_PROGRESS) {
+          diff -= 0.75 * MAX_PROGRESS;
+        } else if (oldProgress > 0.6 * MAX_PROGRESS) {
+          diff = Math.random() * (MAX_PROGRESS - oldProgress) * 0.1;
+        } else {
+          diff = Math.random() * (MAX_PROGRESS * 0.02);
+        }
+        return Math.min(oldProgress + diff, MAX_PROGRESS);
+      });
+    }, 100);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_theme_ui14.Progress, {
+    max: MAX_PROGRESS,
+    value: progress,
+    role: "progressbar"
+  });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,
@@ -265,6 +302,7 @@ var import_theme_ui20 = require("theme-ui");
   Heading,
   Icon,
   Image,
+  InfiniteLinearProgress,
   Input,
   Label,
   LinearProgress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -20,7 +20,7 @@
   },
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "@iconify/react": "^4.0.0",
+    "@iconify/react": "^4.0.1",
     "@theme-ui/match-media": "^0.15.4",
     "theme-ui": "^0.15.4"
   },
@@ -30,10 +30,10 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.10.4",
-    "@ttoss/config": "^1.20.0",
-    "@ttoss/test-utils": "^1.18.0",
-    "@ttoss/theme": "^1.0.3",
-    "@types/jest": "^29.2.3",
+    "@ttoss/config": "^1.21.0",
+    "@ttoss/test-utils": "^1.18.1",
+    "@ttoss/theme": "^1.1.0",
+    "@types/jest": "^29.2.4",
     "jest": "^29.3.1",
     "tsup": "^6.5.0"
   },
@@ -45,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f1199aa45751844818bf397c6f6c8597803018a4"
+  "gitHead": "770c9a378b57b46158e533b505d53747f1b27a07"
 }

package/src/components/{Icon/Icon.tsx → Icon.tsx}

@@ -1,5 +1,5 @@
 import { IconProps as IconPropsUI, Icon as IconUI } from '@iconify/react';
-import { Text, TextProps } from '../Text/Text';
+import { Text, TextProps } from './Text';
 
 export type IconProps = TextProps & {
   icon: IconPropsUI['icon'];

package/src/components/InfiniteLinearProgress.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { LinearProgress } from './LinearProgress';
+
+const MAX_PROGRESS = 100;
+
+export const InfiniteLinearProgress = () => {
+  const [progress, setProgress] = React.useState(0);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((oldProgress) => {
+        if (oldProgress === MAX_PROGRESS) {
+          return 0;
+        }
+
+        let diff = 0;
+
+        if (oldProgress > 0.97 * MAX_PROGRESS) {
+          diff -= 0.75 * MAX_PROGRESS;
+        } else if (oldProgress > 0.6 * MAX_PROGRESS) {
+          diff = Math.random() * (MAX_PROGRESS - oldProgress) * 0.1;
+        } else {
+          diff = Math.random() * (MAX_PROGRESS * 0.02);
+        }
+
+        return Math.min(oldProgress + diff, MAX_PROGRESS);
+      });
+    }, 100);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <LinearProgress max={MAX_PROGRESS} value={progress} role="progressbar" />
+  );
+};

package/src/index.ts

@@ -8,25 +8,26 @@ export {
 
 export { useTheme } from './theme/useTheme';
 
-export { Box, type BoxProps } from './components/Box/Box';
-export { Button, type ButtonProps } from './components/Button/Button';
-export { Card, type CardProps } from './components/Card/Card';
-export { Divider, type DividerProps } from './components/Divider/Divider';
-export { Flex, type FlexProps } from './components/Flex/Flex';
-export { Grid, type GridProps } from './components/Grid/Grid';
-export { Heading, type HeadingProps } from './components/Heading/Heading';
-export { Image, type ImageProps } from './components/Image/Image';
-export { Input, type InputProps } from './components/Input/Input';
-export { Label, type LabelProps } from './components/Label/Label';
-export { Link, type LinkProps } from './components/Link/Link';
+export { Box, type BoxProps } from './components/Box';
+export { Button, type ButtonProps } from './components/Button';
+export { Card, type CardProps } from './components/Card';
+export { Divider, type DividerProps } from './components/Divider';
+export { Flex, type FlexProps } from './components/Flex';
+export { Grid, type GridProps } from './components/Grid';
+export { Heading, type HeadingProps } from './components/Heading';
+export { Image, type ImageProps } from './components/Image';
+export { Input, type InputProps } from './components/Input';
+export { Label, type LabelProps } from './components/Label';
+export { Link, type LinkProps } from './components/Link';
 export {
   LinearProgress,
   type LinearProgressProps,
-} from './components/LinearProgress/LinearProgress';
-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';
-export { Icon, type IconProps } from './components/Icon/Icon';
-export { Slider, type SliderProps } from './components/Slider/Slider';
-export { Checkbox, type CheckboxProps } from './components/Checkbox/Checkbox';
+} from './components/LinearProgress';
+export { Text, type TextProps } from './components/Text';
+export { Select, type SelectProps } from './components/Select';
+export { Spinner, type SpinnerProps } from './components/Spinner';
+export { Radio, type RadioProps } from './components/Radio';
+export { Icon, type IconProps } from './components/Icon';
+export { Slider, type SliderProps } from './components/Slider';
+export { Checkbox, type CheckboxProps } from './components/Checkbox';
+export { InfiniteLinearProgress } from './components/InfiniteLinearProgress';

package/src/theme/ThemeProvider.tsx

@@ -28,14 +28,16 @@ const ThemeProvider = ({
   return (
     <>
       <ThemeUiProvider theme={mergedTheme}>
-        {fonts.map((url) => (
-          <Global
-            key={url}
-            styles={css`
-              @import url('${url}');
-            `}
-          />
-        ))}
+        {fonts.map((url) => {
+          return (
+            <Global
+              key={url}
+              styles={css`
+                @import url('${url}');
+              `}
+            />
+          );
+        })}
         {children}
       </ThemeUiProvider>
     </>

package/src/index.spec.tsx

@@ -1,10 +0,0 @@
-import * as uiModule from './';
-
-test('should export methods', () => {
-  expect(uiModule.useBreakpointIndex).toBeDefined();
-  expect(uiModule.useResponsiveValue).toBeDefined();
-  expect(uiModule.useTheme).toBeDefined();
-
-  expect(uiModule.Divider).toBeDefined();
-  expect(uiModule.Radio).toBeDefined();
-});

package/src/theme/ThemeProvider.spec.tsx

@@ -1,79 +0,0 @@
-import { DefaultTheme } from '@ttoss/theme';
-import { renderHook } from '@ttoss/test-utils';
-import { useTheme } from './useTheme';
-import ThemeProvider from './ThemeProvider';
-
-test('should return default theme colors', () => {
-  const { result } = renderHook(() => useTheme(), {
-    wrapper: ThemeProvider,
-    initialProps: { theme: {} },
-  });
-
-  expect(result.current.theme.rawColors).toEqual(DefaultTheme.colors);
-});
-
-test('should return new theme colors', () => {
-  const newColor = '#000';
-
-  const { result } = renderHook(() => useTheme(), {
-    wrapper: ({ children }: any) => (
-      <ThemeProvider
-        theme={{
-          colors: {
-            background: newColor,
-            text: newColor,
-            primary: newColor,
-            secondary: newColor,
-          },
-        }}
-      >
-        {children}
-      </ThemeProvider>
-    ),
-  });
-
-  expect(result.current.theme.rawColors?.background).toEqual(newColor);
-  expect(result.current.theme.rawColors?.text).toEqual(newColor);
-  expect(result.current.theme.rawColors?.primary).toEqual(newColor);
-  expect(result.current.theme.rawColors?.secondary).toEqual(newColor);
-});
-
-test('should pass variants', () => {
-  const authCard = {
-    backgroundColor: 'red',
-  };
-
-  const authLayout = {
-    backgroundColor: 'blue',
-  };
-
-  const variants = {
-    layout: {
-      auth: authLayout,
-    },
-    cards: {
-      auth: authCard,
-    },
-  };
-
-  const { result } = renderHook(() => useTheme(), {
-    wrapper: ({ children }: any) => (
-      <ThemeProvider
-        theme={{
-          colors: {},
-          ...variants,
-        }}
-      >
-        {children}
-      </ThemeProvider>
-    ),
-  });
-
-  expect(result.current.theme.cards).toEqual(
-    expect.objectContaining(variants.cards)
-  );
-
-  expect(result.current.theme.layout).toEqual(
-    expect.objectContaining(variants.layout)
-  );
-});