react-ui89 0.14.0 → 0.16.0

package/dist/esm/Ui89Override.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+type RouterPush = (url: string) => void | Promise<void>;
+interface Ui89OverrideContextType {
+    routerPush?: RouterPush;
+}
+export interface Ui89OverrideProviderProps {
+    children?: ReactNode;
+    routerPush?: RouterPush;
+}
+export declare const Ui89OverrideProvider: React.FC<Ui89OverrideProviderProps>;
+export declare const useUi89Overrides: () => Ui89OverrideContextType;
+export {};

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/Ui89Breadcrumbs.stories.d.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Ui89Breadcrumbs } from "./Ui89Breadcrumbs";
+import { Ui89OverrideProviderProps } from "../Ui89Override";
 declare const meta: Meta<typeof Ui89Breadcrumbs>;
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -7,3 +8,4 @@ export declare const Empty: Story;
 export declare const OneCrumb: Story;
 export declare const TwoCrumbs: Story;
 export declare const FiveCrumbs: Story;
+export declare const OverrideRouterPush: StoryObj<Ui89OverrideProviderProps>;

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

@@ -10,7 +10,6 @@ interface Ui89ButtonProps {
     autoDisableOnClick?: boolean;
     disabled?: boolean;
     activated?: boolean;
-    routerPush?: (url: string) => void;
 }
-export declare function Ui89Button({ theme, size, block, onClick, href, children, autoDisableOnClick, disabled, activated, routerPush, }: Ui89ButtonProps): React.JSX.Element;
+export declare function Ui89Button({ theme, size, block, onClick, href, children, autoDisableOnClick, disabled, activated, }: Ui89ButtonProps): React.JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Ui89Button } from "./Ui89Button";
+import { Ui89OverrideProviderProps } from "../Ui89Override";
 declare const meta: Meta<typeof Ui89Button>;
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -9,3 +10,4 @@ export declare const ThemeSuccess: Story;
 export declare const ThemeDanger: Story;
 export declare const ThemeInfo: Story;
 export declare const ThemeWarning: Story;
+export declare const OverrideRouterPush: StoryObj<Ui89OverrideProviderProps>;

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,12 +4,15 @@ 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";
 export type { Ui89MenuBarItem, Ui89MenuBarProps, } from "./components/Ui89MenuBar";
 export { Ui89MenuBar } from "./components/Ui89MenuBar";
 export { Ui89ModalDialog } from "./components/Ui89ModalDialog";
+export type { Ui89OverrideProviderProps } from "./Ui89Override";
+export { Ui89OverrideProvider } from "./Ui89Override";
 export { Ui89Scene } from "./components/Ui89Scene";
 export { Ui89Shortcut } from "./components/Ui89Shortcut";
 export { Ui89SpaceVertical } from "./components/Ui89SpaceVertical";

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { 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';
@@ -27,9 +27,32 @@ var resetStyles = {"a":"reset-module_a__dpZ8C"};
 
 var chosenThemeStyles = {"primary":"chosen-theme-module_primary__GwEqU","secondary":"chosen-theme-module_secondary__DI5Gk","info":"chosen-theme-module_info__KYP2h","success":"chosen-theme-module_success__l3hFS","warning":"chosen-theme-module_warning__A7IOL","danger":"chosen-theme-module_danger__CZ3Iq"};
 
+const Ui89OverrideContext = createContext({});
+const Ui89OverrideProvider = ({ routerPush, children, }) => {
+    return (React__default.createElement(Ui89OverrideContext.Provider, { value: { routerPush } }, children));
+};
+const useUi89Overrides = () => {
+    const context = useContext(Ui89OverrideContext);
+    if (context === undefined) {
+        throw new Error("useUi89Overrides must be used within a Ui89OverrideProvider");
+    }
+    return context;
+};
+
 function Ui89BreadcrumbsItem({ index, item, onSelect, }) {
     item.url !== undefined ? "a" : "div";
-    return (React__default.createElement("a", { className: `${resetStyles.a} ${styles$f.breadcrumbsItem}`, href: item.url, style: { "--ui89-index": index } },
+    const overrides = useUi89Overrides();
+    const onClick = (e) => {
+        if (item.url !== undefined) {
+            if (item.url.startsWith("/")) {
+                if (overrides.routerPush !== undefined) {
+                    e.preventDefault();
+                    overrides.routerPush(item.url);
+                }
+            }
+        }
+    };
+    return (React__default.createElement("a", { className: `${resetStyles.a} ${styles$f.breadcrumbsItem}`, href: item.url, style: { "--ui89-index": index }, onClick: onClick },
         React__default.createElement("div", { className: styles$f.breadcrumbsItemBackground }),
         item.label));
 }
@@ -48,8 +71,8 @@ function HoverShadow({ children, }) {
         children));
 }
 
-function Ui89Button({ theme = Ui89Theme.primary, size = "normal", block, onClick, href, children, autoDisableOnClick = true, disabled, activated, routerPush, }) {
-    //const router = useRouter()
+function Ui89Button({ theme = Ui89Theme.primary, size = "normal", block, onClick, href, children, autoDisableOnClick = true, disabled, activated, }) {
+    const overrides = useUi89Overrides();
     const [clicking, setClicking] = useState(false);
     let localDisabled = disabled || (autoDisableOnClick && clicking);
     async function onAnchorClick(e) {
@@ -65,9 +88,9 @@ function Ui89Button({ theme = Ui89Theme.primary, size = "normal", block, onClick
             setClicking(true);
             if (href !== undefined) {
                 if (href.startsWith("/")) {
-                    if (routerPush !== undefined) {
+                    if (overrides.routerPush !== undefined) {
                         e.preventDefault();
-                        routerPush(href);
+                        overrides.routerPush(href);
                     }
                 }
             }
@@ -110,7 +133,7 @@ function Ui89Button({ theme = Ui89Theme.primary, size = "normal", block, onClick
     if (href) {
         return (React__default.createElement("span", { className: styles$e.container },
             React__default.createElement(HoverShadow, null,
-                React__default.createElement("a", { className: buttonClass, href: href, onClick: onAnchorClick },
+                React__default.createElement("a", { className: buttonClass, role: "button", href: href, onClick: onAnchorClick },
                     React__default.createElement("span", { className: styles$e.click }),
                     children))));
     }
@@ -136,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, }) {
@@ -31447,5 +31503,5 @@ function Ui89VirtualTable(props) {
         React__default.createElement(Ui89TagBox, { theme: "warn" }, "Empty")))));
 }
 
-export { Ui89Breadcrumbs, Ui89Button, Ui89Card, Ui89HighlightText, Ui89InputText, Ui89InputTextNumber, Ui89Look, Ui89MenuBar, Ui89ModalDialog, 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