react-ui89 0.15.0 → 0.16.0

package/dist/esm/components/TimeAnimation.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface TimeAnimationPropsChildrenProps {
+    now: Date;
+}
+export interface TimeAnimationProps {
+    children: (props: TimeAnimationPropsChildrenProps) => React.ReactNode;
+}
+export declare const TimeAnimation: React.FC<TimeAnimationProps>;

package/dist/esm/components/TimeAnimation.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TimeAnimation } from "./TimeAnimation";
+declare const meta: Meta<typeof TimeAnimation>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Updates: Story;

package/dist/esm/components/Ui89DigitalTimeClock.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Ui89DigitalTimeClock(): React.JSX.Element;

package/dist/esm/components/Ui89DigitalTimeClock.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Ui89DigitalTimeClock } from "./Ui89DigitalTimeClock";
+declare const meta: Meta<typeof Ui89DigitalTimeClock>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Time: Story;

package/dist/esm/date-utils.d.ts

@@ -0,0 +1,9 @@
+export interface DateComponents {
+    hours: number;
+    minutes: number;
+    seconds: number;
+    milliseconds: number;
+    day: number;
+    month: number;
+    year: number;
+}

package/dist/esm/index.d.ts

@@ -4,6 +4,7 @@ export type { Ui89BreadcrumbsProps, Ui89BreadcrumbsPropsItem, Ui89BreadcrumbsPro
 export { Ui89Breadcrumbs } from "./components/Ui89Breadcrumbs";
 export { Ui89Button } from "./components/Ui89Button";
 export { Ui89Card } from "./components/Ui89Card";
+export { Ui89DigitalTimeClock } from "./components/Ui89DigitalTimeClock";
 export { Ui89HighlightText } from "./components/Ui89HighlightText";
 export { Ui89InputText } from "./components/Ui89InputText";
 export { Ui89InputTextNumber } from "./components/Ui89InputTextNumber";

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { createContext, useContext, useState, useRef, useMemo, useEffect, forwardRef } from 'react';
+import React__default, { createContext, useContext, useState, useEffect, useRef, useMemo, forwardRef } from 'react';
 import Timeout from 'smart-timeout';
 import { VariableSizeGrid } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -159,6 +159,39 @@ function Ui89Card({ topLeftCenter, topCenter, children, }) {
             hasTopContent && React__default.createElement("div", { className: "space-vertical-1" }))));
 }
 
+const TimeAnimation = ({ children }) => {
+    const [currentTime, setCurrentTime] = useState(new Date());
+    useEffect(() => {
+        const tick = () => {
+            const now = new Date();
+            setCurrentTime(now);
+            // Calculate time until the next exact second
+            const msUntilNextSecond = 1000 - now.getMilliseconds();
+            setTimeout(tick, msUntilNextSecond);
+        };
+        // Start the first tick
+        const msUntilNextSecond = 1000 - currentTime.getMilliseconds();
+        const timeoutId = setTimeout(tick, msUntilNextSecond);
+        return () => clearTimeout(timeoutId);
+    }, []);
+    return React__default.createElement(React__default.Fragment, null, children({ now: currentTime }));
+};
+
+function Ui89DigitalTimeClock() {
+    const withColon = useRef(false);
+    function render({ now }) {
+        withColon.current = !withColon.current;
+        const separator = withColon.current ? ":" : " ";
+        return (now.getHours().toString().padStart(2, "0") +
+            separator +
+            now.getMinutes().toString().padStart(2, "0") +
+            separator +
+            now.getSeconds().toString().padStart(2, "0"));
+    }
+    return (React__default.createElement("span", { className: `${typoStyles.special}` },
+        React__default.createElement(TimeAnimation, null, render)));
+}
+
 var style$1 = {"container":"Ui89HighlightText-module_container__gap-L","container--block":"Ui89HighlightText-module_container--block__BDJUL"};
 
 function Ui89HighlightText({ theme, block, children, }) {
@@ -31470,5 +31503,5 @@ function Ui89VirtualTable(props) {
         React__default.createElement(Ui89TagBox, { theme: "warn" }, "Empty")))));
 }
 
-export { Ui89Breadcrumbs, Ui89Button, Ui89Card, Ui89HighlightText, Ui89InputText, Ui89InputTextNumber, Ui89Look, Ui89MenuBar, Ui89ModalDialog, Ui89OverrideProvider, Ui89Scene, Ui89Shortcut, Ui89SpaceVertical, Ui89TabbedCard, Ui89Tabs, Ui89TagBox, Ui89Theme, Ui89ThemeBackground, Ui89TitleBox, Ui89TitleUnderline, Ui89VirtualTable };
+export { Ui89Breadcrumbs, Ui89Button, Ui89Card, Ui89DigitalTimeClock, Ui89HighlightText, Ui89InputText, Ui89InputTextNumber, Ui89Look, Ui89MenuBar, Ui89ModalDialog, Ui89OverrideProvider, Ui89Scene, Ui89Shortcut, Ui89SpaceVertical, Ui89TabbedCard, Ui89Tabs, Ui89TagBox, Ui89Theme, Ui89ThemeBackground, Ui89TitleBox, Ui89TitleUnderline, Ui89VirtualTable };
 //# sourceMappingURL=index.js.map