react-ui89 0.5.0 → 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Daniel Araujo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,5 @@
 # react-ui89
 
-A collection of components that mimic a style of user interfaces from the 80s.
+A collection of components that mimic a common style of user interfaces from the late 80s and early 90s.
+
+![alt text](preview.png)

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

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function Ui89TitleBox({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

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

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

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

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function Ui89TitleUnderline({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

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

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

package/dist/esm/examples/README.stories.d.ts

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

package/dist/esm/index.css

@@ -1,2 +1,2 @@
-:root{--ui89-palette-black:#000;--ui89-palette-dark-blue:#00a;--ui89-palette-dark-green:#0a0;--ui89-palette-dark-cyan:#0aa;--ui89-palette-dark-red:#a00;--ui89-palette-dark-pink:#a0a;--ui89-palette-dark-yellow:#a50;--ui89-palette-light-gray:#aaa;--ui89-palette-dark-gray:#555;--ui89-palette-light-blue:#5454ff;--ui89-palette-light-green:#5f5;--ui89-palette-light-cyan:#5ff;--ui89-palette-light-red:#f55;--ui89-palette-light-pink:#f5f;--ui89-palette-light-yellow:#ff5;--ui89-palette-white:#fff;--ui89-theme-primary-text-color:var(--ui89-palette-black);--ui89-theme-primary-bg-color:var(--ui89-palette-light-yellow);--ui89-theme-secondary-text-color:var(--ui89-palette-black);--ui89-theme-secondary-bg-color:var(--ui89-palette-white);--ui89-theme-success-text-color:var(--ui89-palette-white);--ui89-theme-success-bg-color:var(--ui89-palette-dark-green);--ui89-theme-info-text-color:var(--ui89-palette-white);--ui89-theme-info-bg-color:var(--ui89-palette-light-blue);--ui89-theme-warning-text-color:var(--ui89-palette-white);--ui89-theme-warning-bg-color:var(--ui89-palette-dark-yellow);--ui89-theme-danger-text-color:var(--ui89-palette-white);--ui89-theme-danger-bg-color:var(--ui89-palette-dark-red);--ui89-safe-space:8px;--ui89-input-height:32px;--ui89-font-size-huge:32px;--ui89-font-size-big:20px;--ui89-font-size-normal:16px;--ui89-font-size-small:14px;--ui89-font-size-tiny:10px;--ui89-input-bg-color:var(--ui89-palette-black);--ui89-input-text-color:var(--ui89-palette-light-yellow);--ui89-animation-speed:100ms}.Ui89Scene-module_container__J1AN5{background-color:var(--ui89-scene-bg-color);color:var(--ui89-scene-text-color)}.look-module_main__dCtZk{--ui89-scene-text-color:var(--ui89-palette-white);--ui89-scene-text-subtle-color:var(--ui89-palette-light-gray);--ui89-scene-bg-color:var(--ui89-palette-dark-blue);--ui89-scene-highlight-color:#fff3;--ui89-scene-card-bg-color:var(--ui89-palette-dark-blue);--ui89-scene-card-text-color:var(--ui89-palette-white);--ui89-theme-primary-text-color:var(--ui89-palette-white);--ui89-theme-primary-bg-color:var(--ui89-palette-light-blue);--ui89-theme-secondary-text-color:var(--ui89-palette-black);--ui89-theme-secondary-bg-color:var(--ui89-palette-light-gray)}.look-module_side__bCbry{--ui89-scene-text-color:var(--ui89-palette-white);--ui89-scene-text-subtle-color:var(--ui89-palette-dark-gray);--ui89-scene-bg-color:var(--ui89-palette-light-gray);--ui89-scene-highlight-color:#fff3;--ui89-scene-card-bg-color:var(--ui89-palette-light-gray);--ui89-scene-card-text-color:var(--ui89-palette-white);--ui89-theme-primary-text-color:var(--ui89-palette-white);--ui89-theme-primary-bg-color:var(--ui89-palette-light-blue);--ui89-theme-secondary-text-color:var(--ui89-palette-black);--ui89-theme-secondary-bg-color:var(--ui89-palette-white)}.typo-module_big__NWXQv{font-family:monospace;font-size:var(--ui89-font-size-big);line-height:25px}.typo-module_normalBold__6Mx0C,.typo-module_normal__a1-s-{font-family:monospace;font-size:var(--ui89-font-size-normal);line-height:24px}.typo-module_normalBold__6Mx0C{font-weight:700}.typo-module_smallBold__BRDCu,.typo-module_small__cdnMc{font-family:monospace;font-size:var(--ui89-font-size-small);line-height:16px}.typo-module_smallBold__BRDCu{font-weight:700}.typo-module_special__PiPuc{font-family:monospace;font-size:var(--ui89-font-size-small);font-weight:700}.Ui89Button-module_container__V4tWM{display:inline-block}.Ui89Button-module_button__wl9cp{align-items:center;background-color:var(--ui89-chosen-theme-bg-color);border:1px solid #00000010;border-radius:1px;box-sizing:border-box;color:var(--ui89-chosen-theme-text-color);cursor:pointer;display:inline-flex;font-weight:700;justify-content:center;min-width:60px;padding:0 16px;position:relative;text-align:center;transition:transform var(--ui89-animation-speed);user-select:none}.Ui89Button-module_button__wl9cp:before{inset:0;position:absolute}.Ui89Button-module_block__3sGjT{display:flex}.Ui89Button-module_button__wl9cp:hover:not(.Ui89Button-module_disabled__I5nOu):not(.Ui89Button-module_active__ZN0AN):before{background-color:#ffffff40;content:"";cursor:pointer}.Ui89Button-module_active__ZN0AN,.Ui89Button-module_button__wl9cp:active:not(.Ui89Button-module_disabled__I5nOu){transform:translate3d(calc(var(--ui89-safe-space)/2),calc(var(--ui89-safe-space)/2),0)}.Ui89Button-module_button__wl9cp:active:not(.Ui89Button-module_disabled__I5nOu):not(.Ui89Button-module_active__ZN0AN):before{background-color:#00000040;content:none;cursor:pointer}.Ui89Button-module_disabled__I5nOu{cursor:default;opacity:.5}.Ui89Button-module_size--normal__Pht3J{height:22px}.Ui89Button-module_size--small__-4-4v{height:24px}.Ui89Button-module_click__INMSh{inset:0;position:absolute}.Ui89Button-module_active__ZN0AN>.Ui89Button-module_click__INMSh,.Ui89Button-module_button__wl9cp:active:not(.Ui89Button-module_disabled__I5nOu)>.Ui89Button-module_click__INMSh{transform:translate3d(calc(var(--ui89-safe-space)/2*-1),calc(var(--ui89-safe-space)/2*-1),0)}.chosen-theme-module_primary__GwEqU{--ui89-chosen-theme-text-color:var(--ui89-theme-primary-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-primary-bg-color)}.chosen-theme-module_secondary__DI5Gk{--ui89-chosen-theme-text-color:var(--ui89-theme-secondary-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-secondary-bg-color)}.chosen-theme-module_info__KYP2h{--ui89-chosen-theme-text-color:var(--ui89-theme-info-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-info-bg-color)}.chosen-theme-module_success__l3hFS{--ui89-chosen-theme-text-color:var(--ui89-theme-success-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-success-bg-color)}.chosen-theme-module_warning__A7IOL{--ui89-chosen-theme-text-color:var(--ui89-theme-warning-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-warning-bg-color)}.chosen-theme-module_danger__CZ3Iq{--ui89-chosen-theme-text-color:var(--ui89-theme-danger-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-danger-bg-color)}.HoverShadow-module_container__4noUA{display:block;padding-bottom:var(--ui89-safe-space);padding-right:var(--ui89-safe-space);position:relative}.HoverShadow-module_right__p6LK8{height:calc(100% - var(--ui89-safe-space));width:var(--ui89-safe-space)}.HoverShadow-module_bottom__7Hhnr,.HoverShadow-module_right__p6LK8{background:#000;bottom:0;box-sizing:border-box;display:block;position:absolute;right:0;z-index:0}.HoverShadow-module_bottom__7Hhnr{height:var(--ui89-safe-space);width:calc(100% - var(--ui89-safe-space))}.Ui89Shortcut-module_container__L07CL{display:inline-block;height:200px;position:relative;width:200px}.Ui89Shortcut-module_image__f4Hsg{height:160px;width:150px}.Ui89Shortcut-module_shortcutIcon__SjZkr{height:24px;left:130px;position:absolute;top:140px;width:24px}.Ui89TagBox-module_container__2GXMj{background-color:var(--ui89-chosen-theme-bg-color);border-radius:var(--box-border-radius);color:var(--ui89-chosen-theme-text-color);display:inline-block;line-height:1;padding:calc(var(--ui89-safe-space)/2) calc(var(--ui89-safe-space)*2)}
+:root{--ui89-palette-black:#000;--ui89-palette-dark-blue:#00a;--ui89-palette-dark-green:#0a0;--ui89-palette-dark-cyan:#0aa;--ui89-palette-dark-red:#a00;--ui89-palette-dark-pink:#a0a;--ui89-palette-dark-yellow:#a50;--ui89-palette-light-gray:#aaa;--ui89-palette-dark-gray:#555;--ui89-palette-light-blue:#5454ff;--ui89-palette-light-green:#5f5;--ui89-palette-light-cyan:#5ff;--ui89-palette-light-red:#f55;--ui89-palette-light-pink:#f5f;--ui89-palette-light-yellow:#ff5;--ui89-palette-white:#fff;--ui89-theme-primary-text-color:var(--ui89-palette-black);--ui89-theme-primary-bg-color:var(--ui89-palette-light-yellow);--ui89-theme-secondary-text-color:var(--ui89-palette-black);--ui89-theme-secondary-bg-color:var(--ui89-palette-white);--ui89-theme-success-text-color:var(--ui89-palette-white);--ui89-theme-success-bg-color:var(--ui89-palette-dark-green);--ui89-theme-info-text-color:var(--ui89-palette-white);--ui89-theme-info-bg-color:var(--ui89-palette-light-blue);--ui89-theme-warning-text-color:var(--ui89-palette-white);--ui89-theme-warning-bg-color:var(--ui89-palette-dark-yellow);--ui89-theme-danger-text-color:var(--ui89-palette-white);--ui89-theme-danger-bg-color:var(--ui89-palette-dark-red);--ui89-safe-space:8px;--ui89-input-height:32px;--ui89-font-size-huge:32px;--ui89-font-size-big:20px;--ui89-font-size-normal:16px;--ui89-font-size-small:14px;--ui89-font-size-tiny:10px;--ui89-input-bg-color:var(--ui89-palette-black);--ui89-input-text-color:var(--ui89-palette-light-yellow);--ui89-animation-speed:100ms}.Ui89Scene-module_container__J1AN5{background-color:var(--ui89-scene-bg-color);color:var(--ui89-scene-text-color)}.look-module_main__dCtZk{--ui89-scene-text-color:var(--ui89-palette-white);--ui89-scene-text-subtle-color:var(--ui89-palette-light-gray);--ui89-scene-bg-color:var(--ui89-palette-dark-blue);--ui89-scene-highlight-color:#fff3;--ui89-scene-card-bg-color:var(--ui89-palette-dark-blue);--ui89-scene-card-text-color:var(--ui89-palette-white);--ui89-theme-primary-text-color:var(--ui89-palette-white);--ui89-theme-primary-bg-color:var(--ui89-palette-light-blue);--ui89-theme-secondary-text-color:var(--ui89-palette-black);--ui89-theme-secondary-bg-color:var(--ui89-palette-light-gray)}.look-module_side__bCbry{--ui89-scene-text-color:var(--ui89-palette-white);--ui89-scene-text-subtle-color:var(--ui89-palette-dark-gray);--ui89-scene-bg-color:var(--ui89-palette-light-gray);--ui89-scene-highlight-color:#fff3;--ui89-scene-card-bg-color:var(--ui89-palette-light-gray);--ui89-scene-card-text-color:var(--ui89-palette-white);--ui89-theme-primary-text-color:var(--ui89-palette-white);--ui89-theme-primary-bg-color:var(--ui89-palette-light-blue);--ui89-theme-secondary-text-color:var(--ui89-palette-black);--ui89-theme-secondary-bg-color:var(--ui89-palette-white)}.typo-module_big__NWXQv{font-family:monospace;font-size:var(--ui89-font-size-big);line-height:25px}.typo-module_normalBold__6Mx0C,.typo-module_normal__a1-s-{font-family:monospace;font-size:var(--ui89-font-size-normal);line-height:24px}.typo-module_normalBold__6Mx0C{font-weight:700}.typo-module_smallBold__BRDCu,.typo-module_small__cdnMc{font-family:monospace;font-size:var(--ui89-font-size-small);line-height:16px}.typo-module_smallBold__BRDCu{font-weight:700}.typo-module_special__PiPuc{font-family:monospace;font-size:var(--ui89-font-size-small);font-weight:700}.Ui89Button-module_container__V4tWM{display:inline-block}.Ui89Button-module_button__wl9cp{align-items:center;background-color:var(--ui89-chosen-theme-bg-color);border:1px solid #00000010;border-radius:1px;box-sizing:border-box;color:var(--ui89-chosen-theme-text-color);cursor:pointer;display:inline-flex;font-weight:700;justify-content:center;min-width:60px;padding:0 16px;position:relative;text-align:center;transition:transform var(--ui89-animation-speed);user-select:none}.Ui89Button-module_button__wl9cp:before{inset:0;position:absolute}.Ui89Button-module_block__3sGjT{display:flex}.Ui89Button-module_button__wl9cp:hover:not(.Ui89Button-module_disabled__I5nOu):not(.Ui89Button-module_active__ZN0AN):before{background-color:#ffffff40;content:"";cursor:pointer}.Ui89Button-module_active__ZN0AN,.Ui89Button-module_button__wl9cp:active:not(.Ui89Button-module_disabled__I5nOu){transform:translate3d(calc(var(--ui89-safe-space)/2),calc(var(--ui89-safe-space)/2),0)}.Ui89Button-module_button__wl9cp:active:not(.Ui89Button-module_disabled__I5nOu):not(.Ui89Button-module_active__ZN0AN):before{background-color:#00000040;content:none;cursor:pointer}.Ui89Button-module_disabled__I5nOu{cursor:default;opacity:.5}.Ui89Button-module_size--normal__Pht3J{height:22px}.Ui89Button-module_size--small__-4-4v{height:24px}.Ui89Button-module_click__INMSh{inset:0;position:absolute}.Ui89Button-module_active__ZN0AN>.Ui89Button-module_click__INMSh,.Ui89Button-module_button__wl9cp:active:not(.Ui89Button-module_disabled__I5nOu)>.Ui89Button-module_click__INMSh{transform:translate3d(calc(var(--ui89-safe-space)/2*-1),calc(var(--ui89-safe-space)/2*-1),0)}.chosen-theme-module_primary__GwEqU{--ui89-chosen-theme-text-color:var(--ui89-theme-primary-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-primary-bg-color)}.chosen-theme-module_secondary__DI5Gk{--ui89-chosen-theme-text-color:var(--ui89-theme-secondary-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-secondary-bg-color)}.chosen-theme-module_info__KYP2h{--ui89-chosen-theme-text-color:var(--ui89-theme-info-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-info-bg-color)}.chosen-theme-module_success__l3hFS{--ui89-chosen-theme-text-color:var(--ui89-theme-success-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-success-bg-color)}.chosen-theme-module_warning__A7IOL{--ui89-chosen-theme-text-color:var(--ui89-theme-warning-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-warning-bg-color)}.chosen-theme-module_danger__CZ3Iq{--ui89-chosen-theme-text-color:var(--ui89-theme-danger-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-danger-bg-color)}.HoverShadow-module_container__4noUA{display:block;padding-bottom:var(--ui89-safe-space);padding-right:var(--ui89-safe-space);position:relative}.HoverShadow-module_right__p6LK8{height:calc(100% - var(--ui89-safe-space));width:var(--ui89-safe-space)}.HoverShadow-module_bottom__7Hhnr,.HoverShadow-module_right__p6LK8{background:#000;bottom:0;box-sizing:border-box;display:block;position:absolute;right:0;z-index:0}.HoverShadow-module_bottom__7Hhnr{height:var(--ui89-safe-space);width:calc(100% - var(--ui89-safe-space))}.Ui89Shortcut-module_container__L07CL{display:inline-block;height:200px;position:relative;width:200px}.Ui89Shortcut-module_image__f4Hsg{height:160px;width:150px}.Ui89Shortcut-module_shortcutIcon__SjZkr{height:24px;left:130px;position:absolute;top:140px;width:24px}.Ui89TagBox-module_container__2GXMj{background-color:var(--ui89-chosen-theme-bg-color);border-radius:var(--box-border-radius);color:var(--ui89-chosen-theme-text-color);display:inline-block;line-height:1;padding:calc(var(--ui89-safe-space)/2) calc(var(--ui89-safe-space)*2)}.Ui89Card-module_container__-8hhJ{background:var(--ui89-scene-card-bg-color);border:1px solid #fff;border-radius:var(--ui89-box-border-radius);box-shadow:0 1px 2px 0 #0000000d;color:var(--ui89-scene-card-text-color);display:flex;flex-direction:column;padding:calc(var(--ui89-safe-space)/4) calc(var(--ui89-safe-space)/2);position:relative}.Ui89Card-module_container__-8hhJ>*{flex:1}.Ui89Card-module_containerHasTop__UsQUD{margin-top:var(--ui89-safe-space)}.Ui89Card-module_inside__91GoJ{border:1px solid #fff;padding:calc(var(--ui89-safe-space))}.Ui89Card-module_topLeftCenter__r9PD6{bottom:100%;left:0;padding-left:var(--ui89-safe-space);position:absolute;transform:translateY(50%)}.Ui89Card-module_topCenter__SZWfR{display:flex;justify-content:center;left:var(--ui89-safe-space);position:absolute;right:var(--ui89-safe-space);top:0;transform:translateY(-50%)}.Ui89Tabs-module_navigation__y1WSG{display:flex;flex-wrap:wrap}.Ui89Tabs-module_navigationItem__keX-1{background-color:var(--ui89-scene-bg-color);color:var(--ui89-scene-text-color);cursor:pointer;padding:0 calc(var(--ui89-safe-space)*3)}.Ui89Tabs-module_navigationItemSelected__R7dba,.Ui89Tabs-module_navigationItem__keX-1:hover{background-color:var(--ui89-scene-text-color);color:var(--ui89-scene-bg-color)}.Ui89TitleBox-module_container__M-b7J{display:flex}.Ui89TitleBox-module_inside__GWTlP{background-color:var(--ui89-scene-text-color);color:var(--ui89-scene-bg-color);min-width:0;padding:0 var(--ui89-safe-space)}.text-module_unbreakable__3eDe3{white-space:nowrap}.text-module_ellipsis__3-f-B,.text-module_singleLine__X6pYL{overflow:hidden;text-overflow:ellipsis}.text-module_singleLine__X6pYL{white-space:nowrap}.Ui89TitleUnderline-module_container__EaGZi{display:flex;line-height:1}.Ui89TitleUnderline-module_inside__uwwxa{border-bottom:1px solid;min-width:0;padding-bottom:calc(var(--ui89-safe-space)/2);position:relative}.Ui89TitleUnderline-module_inside__uwwxa:after{border-bottom:1px solid;content:"";inset:0;position:absolute;transform:translateY(-2px);z-index:0}
 /*# sourceMappingURL=index.css.map */

package/dist/esm/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["global.css","Ui89Scene.module.css","look.module.css","typo.module.css","Ui89Button.module.css","chosen-theme.module.css","HoverShadow.module.css","Ui89Shortcut.module.css","Ui89TagBox.module.css"],"names":[],"mappings":"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","file":"index.css","sourcesContent":["/*\n * Variables.\n */\n:root {\n  /* Leet colors. */\n  --ui89-palette-black: #000000;\n  --ui89-palette-dark-blue: #0000aa;\n  --ui89-palette-dark-green: #00aa00;\n  --ui89-palette-dark-cyan: #00aaaa;\n  --ui89-palette-dark-red: #aa0000;\n  --ui89-palette-dark-pink: #aa00aa;\n  --ui89-palette-dark-yellow: #aa5500;\n  --ui89-palette-light-gray: #aaaaaa;\n  --ui89-palette-dark-gray: #555555;\n  --ui89-palette-light-blue: #5454ff;\n  --ui89-palette-light-green: #55ff55;\n  --ui89-palette-light-cyan: #55ffff;\n  --ui89-palette-light-red: #ff5555;\n  --ui89-palette-light-pink: #ff55ff;\n  --ui89-palette-light-yellow: #ffff55;\n  --ui89-palette-white: #ffffff;\n\n  /* Themes */\n  --ui89-theme-primary-text-color: var(--ui89-palette-black);\n  --ui89-theme-primary-bg-color: var(--ui89-palette-light-yellow);\n\n  --ui89-theme-secondary-text-color: var(--ui89-palette-black);\n  --ui89-theme-secondary-bg-color: var(--ui89-palette-white);\n\n  --ui89-theme-success-text-color: var(--ui89-palette-white);\n  --ui89-theme-success-bg-color: var(--ui89-palette-dark-green);\n\n  --ui89-theme-info-text-color: var(--ui89-palette-white);\n  --ui89-theme-info-bg-color: var(--ui89-palette-light-blue);\n\n  --ui89-theme-warning-text-color: var(--ui89-palette-white);\n  --ui89-theme-warning-bg-color: var(--ui89-palette-dark-yellow);\n\n  --ui89-theme-danger-text-color: var(--ui89-palette-white);\n  --ui89-theme-danger-bg-color: var(--ui89-palette-dark-red);\n\n  /* Size and alignment */\n  --ui89-safe-space: 8px;\n  --ui89-input-height: 32px;\n\n  /* Typography */\n  --ui89-font-size-huge: 32px;\n  --ui89-font-size-big: 20px;\n  --ui89-font-size-normal: 16px;\n  --ui89-font-size-small: 14px;\n  --ui89-font-size-tiny: 10px;\n\n  /* Input box */\n  --ui89-input-bg-color: var(--ui89-palette-black);\n  --ui89-input-text-color: var(--ui89-palette-light-yellow);\n\n  /* Animation */\n  --ui89-animation-speed: 100ms;\n}\n",".container {\n  background-color: var(--ui89-scene-bg-color);\n  color: var(--ui89-scene-text-color);\n}\n",".main {\n  --ui89-scene-text-color: var(--ui89-palette-white);\n  --ui89-scene-text-subtle-color: var(--ui89-palette-light-gray);\n  --ui89-scene-bg-color: var(--ui89-palette-dark-blue);\n  --ui89-scene-highlight-color: rgba(255, 255, 255, 0.2);\n  --ui89-scene-card-bg-color: var(--ui89-palette-dark-blue);\n  --ui89-scene-card-text-color: var(--ui89-palette-white);\n\n  --ui89-theme-primary-text-color: var(--ui89-palette-white);\n  --ui89-theme-primary-bg-color: var(--ui89-palette-light-blue);\n\n  --ui89-theme-secondary-text-color: var(--ui89-palette-black);\n  --ui89-theme-secondary-bg-color: var(--ui89-palette-light-gray);\n}\n\n.side {\n  --ui89-scene-text-color: var(--ui89-palette-white);\n  --ui89-scene-text-subtle-color: var(--ui89-palette-dark-gray);\n  --ui89-scene-bg-color: var(--ui89-palette-light-gray);\n  --ui89-scene-highlight-color: rgba(255, 255, 255, 0.2);\n  --ui89-scene-card-bg-color: var(--ui89-palette-light-gray);\n  --ui89-scene-card-text-color: var(--ui89-palette-white);\n\n  --ui89-theme-primary-text-color: var(--ui89-palette-white);\n  --ui89-theme-primary-bg-color: var(--ui89-palette-light-blue);\n\n  --ui89-theme-secondary-text-color: var(--ui89-palette-black);\n  --ui89-theme-secondary-bg-color: var(--ui89-palette-white);\n}\n",".big {\n  font-family: monospace;\n  font-size: var(--ui89-font-size-big);\n  line-height: 25px;\n}\n\n.normal {\n  font-family: monospace;\n  font-size: var(--ui89-font-size-normal);\n  line-height: 24px;\n}\n\n.normalBold {\n  font-family: monospace;\n  font-size: var(--ui89-font-size-normal);\n  line-height: 24px;\n  font-weight: bold;\n}\n\n.small {\n  font-family: monospace;\n  font-size: var(--ui89-font-size-small);\n  line-height: 16px;\n}\n\n.smallBold {\n  font-family: monospace;\n  font-size: var(--ui89-font-size-small);\n  line-height: 16px;\n  font-weight: bold;\n}\n\n/* For buttons and such. */\n.special {\n  font-family: monospace;\n  font-size: var(--ui89-font-size-small);\n  font-weight: bold;\n}\n",".container {\n  display: inline-block;\n}\n\n.button {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center; /* align vertical */\n  border: 0;\n  color: var(--ui89-chosen-theme-text-color);\n  background-color: var(--ui89-chosen-theme-bg-color);\n  min-width: 60px;\n  border-radius: 1px;\n  font-weight: bold;\n  padding: 0 16px;\n  user-select: none;\n  text-align: center;\n  box-sizing: border-box;\n  border: 1px solid #00000010;\n\n  transition: transform var(--ui89-animation-speed);\n\n  /* For the button active/hover/focus state */\n  position: relative;\n\n  cursor: pointer;\n}\n\n.button:before {\n  position: absolute;\n  inset: 0;\n}\n\n.block {\n  display: flex;\n}\n\n.button:hover:not(.disabled):not(.active):before {\n  content: \"\";\n  background-color: #ffffff40;\n  cursor: pointer;\n}\n\n.button:active:not(.disabled),\n.active {\n  transform: translate3d(\n    calc(var(--ui89-safe-space) / 2),\n    calc(var(--ui89-safe-space) / 2),\n    0\n  );\n}\n\n.button:active:not(.disabled):not(.active):before {\n  content: none;\n  background-color: #00000040;\n  cursor: pointer;\n}\n\n.disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n.size--normal {\n  height: 22px;\n}\n\n.size--small {\n  height: 24px;\n}\n\n.click {\n  position: absolute;\n  inset: 0;\n}\n\n.button:active:not(.disabled) > .click,\n.active > .click {\n  transform: translate3d(\n    calc(var(--ui89-safe-space) / 2 * -1),\n    calc(var(--ui89-safe-space) / 2 * -1),\n    0\n  );\n}\n",".primary {\n  --ui89-chosen-theme-text-color: var(--ui89-theme-primary-text-color);\n  --ui89-chosen-theme-bg-color: var(--ui89-theme-primary-bg-color);\n}\n\n.secondary {\n  --ui89-chosen-theme-text-color: var(--ui89-theme-secondary-text-color);\n  --ui89-chosen-theme-bg-color: var(--ui89-theme-secondary-bg-color);\n}\n\n.info {\n  --ui89-chosen-theme-text-color: var(--ui89-theme-info-text-color);\n  --ui89-chosen-theme-bg-color: var(--ui89-theme-info-bg-color);\n}\n\n.success {\n  --ui89-chosen-theme-text-color: var(--ui89-theme-success-text-color);\n  --ui89-chosen-theme-bg-color: var(--ui89-theme-success-bg-color);\n}\n\n.warning {\n  --ui89-chosen-theme-text-color: var(--ui89-theme-warning-text-color);\n  --ui89-chosen-theme-bg-color: var(--ui89-theme-warning-bg-color);\n}\n\n.danger {\n  --ui89-chosen-theme-text-color: var(--ui89-theme-danger-text-color);\n  --ui89-chosen-theme-bg-color: var(--ui89-theme-danger-bg-color);\n}\n",".container {\n  display: block;\n  padding-right: var(--ui89-safe-space);\n  padding-bottom: var(--ui89-safe-space);\n  position: relative;\n}\n\n.right {\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  height: calc(100% - var(--ui89-safe-space));\n  width: var(--ui89-safe-space);\n  box-sizing: border-box;\n  background: black;\n  z-index: 0;\n}\n\n.bottom {\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  width: calc(100% - var(--ui89-safe-space));\n  height: var(--ui89-safe-space);\n  box-sizing: border-box;\n  background: black;\n  z-index: 0;\n}\n",".container {\n  display: inline-block;\n  width: 200px;\n  height: 200px;\n\n  position: relative;\n}\n\n.image {\n  width: 150px;\n  height: 160px;\n}\n\n.shortcutIcon {\n  position: absolute;\n  top: 140px;\n  left: 130px;\n  width: 24px;\n  height: 24px;\n}\n",".container {\n  color: var(--ui89-chosen-theme-text-color);\n  background-color: var(--ui89-chosen-theme-bg-color);\n\n  display: inline-block;\n  padding: calc(var(--ui89-safe-space) / 2) calc(var(--ui89-safe-space) * 2);\n  border-radius: var(--box-border-radius);\n  line-height: 1;\n}\n"]}
+{"version":3,"sources":["global.css","Ui89Scene.module.css","look.module.css","typo.module.css","Ui89Button.module.css","chosen-theme.module.css","HoverShadow.module.css","Ui89Shortcut.module.css","Ui89TagBox.module.css","Ui89Card.module.css","Ui89Tabs.module.css","Ui89TitleBox.module.css","text.module.css","Ui89TitleUnderline.module.css"],"names":[],"mappings":"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","file":"index.css","sourcesContent":["/*\n * Variables.\n */\n:root {\n  /* Leet colors. */\n  --ui89-palette-black: #000000;\n  --ui89-palette-dark-blue: #0000aa;\n  --ui89-palette-dark-green: #00aa00;\n  --ui89-palette-dark-cyan: #00aaaa;\n  --ui89-palette-dark-red: #aa0000;\n  --ui89-palette-dark-pink: #aa00aa;\n  --ui89-palette-dark-yellow: #aa5500;\n  --ui89-palette-light-gray: #aaaaaa;\n  --ui89-palette-dark-gray: #555555;\n  --ui89-palette-light-blue: #5454ff;\n  --ui89-palette-light-green: #55ff55;\n  --ui89-palette-light-cyan: #55ffff;\n  --ui89-palette-light-red: #ff5555;\n  --ui89-palette-light-pink: #ff55ff;\n  --ui89-palette-light-yellow: #ffff55;\n  --ui89-palette-white: #ffffff;\n\n  /* Themes */\n  --ui89-theme-primary-text-color: var(--ui89-palette-black);\n  --ui89-theme-primary-bg-color: var(--ui89-palette-light-yellow);\n\n  --ui89-theme-secondary-text-color: var(--ui89-palette-black);\n  --ui89-theme-secondary-bg-color: var(--ui89-palette-white);\n\n  --ui89-theme-success-text-color: var(--ui89-palette-white);\n  --ui89-theme-success-bg-color: var(--ui89-palette-dark-green);\n\n  --ui89-theme-info-text-color: var(--ui89-palette-white);\n  --ui89-theme-info-bg-color: var(--ui89-palette-light-blue);\n\n  --ui89-theme-warning-text-color: var(--ui89-palette-white);\n  --ui89-theme-warning-bg-color: var(--ui89-palette-dark-yellow);\n\n  --ui89-theme-danger-text-color: var(--ui89-palette-white);\n  --ui89-theme-danger-bg-color: var(--ui89-palette-dark-red);\n\n  /* Size and alignment */\n  --ui89-safe-space: 8px;\n  --ui89-input-height: 32px;\n\n  /* Typography */\n  --ui89-font-size-huge: 32px;\n  --ui89-font-size-big: 20px;\n  --ui89-font-size-normal: 16px;\n  --ui89-font-size-small: 14px;\n  --ui89-font-size-tiny: 10px;\n\n  /* Input box */\n  --ui89-input-bg-color: var(--ui89-palette-black);\n  --ui89-input-text-color: var(--ui89-palette-light-yellow);\n\n  /* Animation */\n  --ui89-animation-speed: 100ms;\n}\n",".container {\n  background-color: var(--ui89-scene-bg-color);\n  color: var(--ui89-scene-text-color);\n}\n",".main {\n  --ui89-scene-text-color: var(--ui89-palette-white);\n  --ui89-scene-text-subtle-color: var(--ui89-palette-light-gray);\n  --ui89-scene-bg-color: var(--ui89-palette-dark-blue);\n  --ui89-scene-highlight-color: rgba(255, 255, 255, 0.2);\n  --ui89-scene-card-bg-color: var(--ui89-palette-dark-blue);\n  --ui89-scene-card-text-color: var(--ui89-palette-white);\n\n  --ui89-theme-primary-text-color: var(--ui89-palette-white);\n  --ui89-theme-primary-bg-color: var(--ui89-palette-light-blue);\n\n  --ui89-theme-secondary-text-color: var(--ui89-palette-black);\n  --ui89-theme-secondary-bg-color: var(--ui89-palette-light-gray);\n}\n\n.side {\n  --ui89-scene-text-color: var(--ui89-palette-white);\n  --ui89-scene-text-subtle-color: var(--ui89-palette-dark-gray);\n  --ui89-scene-bg-color: var(--ui89-palette-light-gray);\n  --ui89-scene-highlight-color: rgba(255, 255, 255, 0.2);\n  --ui89-scene-card-bg-color: var(--ui89-palette-light-gray);\n  --ui89-scene-card-text-color: var(--ui89-palette-white);\n\n  --ui89-theme-primary-text-color: var(--ui89-palette-white);\n  --ui89-theme-primary-bg-color: var(--ui89-palette-light-blue);\n\n  --ui89-theme-secondary-text-color: var(--ui89-palette-black);\n  --ui89-theme-secondary-bg-color: var(--ui89-palette-white);\n}\n",".big {\n  font-family: monospace;\n  font-size: var(--ui89-font-size-big);\n  line-height: 25px;\n}\n\n.normal {\n  font-family: monospace;\n  font-size: var(--ui89-font-size-normal);\n  line-height: 24px;\n}\n\n.normalBold {\n  font-family: monospace;\n  font-size: var(--ui89-font-size-normal);\n  line-height: 24px;\n  font-weight: bold;\n}\n\n.small {\n  font-family: monospace;\n  font-size: var(--ui89-font-size-small);\n  line-height: 16px;\n}\n\n.smallBold {\n  font-family: monospace;\n  font-size: var(--ui89-font-size-small);\n  line-height: 16px;\n  font-weight: bold;\n}\n\n/* For buttons and such. */\n.special {\n  font-family: monospace;\n  font-size: var(--ui89-font-size-small);\n  font-weight: bold;\n}\n",".container {\n  display: inline-block;\n}\n\n.button {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center; /* align vertical */\n  border: 0;\n  color: var(--ui89-chosen-theme-text-color);\n  background-color: var(--ui89-chosen-theme-bg-color);\n  min-width: 60px;\n  border-radius: 1px;\n  font-weight: bold;\n  padding: 0 16px;\n  user-select: none;\n  text-align: center;\n  box-sizing: border-box;\n  border: 1px solid #00000010;\n\n  transition: transform var(--ui89-animation-speed);\n\n  /* For the button active/hover/focus state */\n  position: relative;\n\n  cursor: pointer;\n}\n\n.button:before {\n  position: absolute;\n  inset: 0;\n}\n\n.block {\n  display: flex;\n}\n\n.button:hover:not(.disabled):not(.active):before {\n  content: \"\";\n  background-color: #ffffff40;\n  cursor: pointer;\n}\n\n.button:active:not(.disabled),\n.active {\n  transform: translate3d(\n    calc(var(--ui89-safe-space) / 2),\n    calc(var(--ui89-safe-space) / 2),\n    0\n  );\n}\n\n.button:active:not(.disabled):not(.active):before {\n  content: none;\n  background-color: #00000040;\n  cursor: pointer;\n}\n\n.disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n.size--normal {\n  height: 22px;\n}\n\n.size--small {\n  height: 24px;\n}\n\n.click {\n  position: absolute;\n  inset: 0;\n}\n\n.button:active:not(.disabled) > .click,\n.active > .click {\n  transform: translate3d(\n    calc(var(--ui89-safe-space) / 2 * -1),\n    calc(var(--ui89-safe-space) / 2 * -1),\n    0\n  );\n}\n",".primary {\n  --ui89-chosen-theme-text-color: var(--ui89-theme-primary-text-color);\n  --ui89-chosen-theme-bg-color: var(--ui89-theme-primary-bg-color);\n}\n\n.secondary {\n  --ui89-chosen-theme-text-color: var(--ui89-theme-secondary-text-color);\n  --ui89-chosen-theme-bg-color: var(--ui89-theme-secondary-bg-color);\n}\n\n.info {\n  --ui89-chosen-theme-text-color: var(--ui89-theme-info-text-color);\n  --ui89-chosen-theme-bg-color: var(--ui89-theme-info-bg-color);\n}\n\n.success {\n  --ui89-chosen-theme-text-color: var(--ui89-theme-success-text-color);\n  --ui89-chosen-theme-bg-color: var(--ui89-theme-success-bg-color);\n}\n\n.warning {\n  --ui89-chosen-theme-text-color: var(--ui89-theme-warning-text-color);\n  --ui89-chosen-theme-bg-color: var(--ui89-theme-warning-bg-color);\n}\n\n.danger {\n  --ui89-chosen-theme-text-color: var(--ui89-theme-danger-text-color);\n  --ui89-chosen-theme-bg-color: var(--ui89-theme-danger-bg-color);\n}\n",".container {\n  display: block;\n  padding-right: var(--ui89-safe-space);\n  padding-bottom: var(--ui89-safe-space);\n  position: relative;\n}\n\n.right {\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  height: calc(100% - var(--ui89-safe-space));\n  width: var(--ui89-safe-space);\n  box-sizing: border-box;\n  background: black;\n  z-index: 0;\n}\n\n.bottom {\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  width: calc(100% - var(--ui89-safe-space));\n  height: var(--ui89-safe-space);\n  box-sizing: border-box;\n  background: black;\n  z-index: 0;\n}\n",".container {\n  display: inline-block;\n  width: 200px;\n  height: 200px;\n\n  position: relative;\n}\n\n.image {\n  width: 150px;\n  height: 160px;\n}\n\n.shortcutIcon {\n  position: absolute;\n  top: 140px;\n  left: 130px;\n  width: 24px;\n  height: 24px;\n}\n",".container {\n  color: var(--ui89-chosen-theme-text-color);\n  background-color: var(--ui89-chosen-theme-bg-color);\n\n  display: inline-block;\n  padding: calc(var(--ui89-safe-space) / 2) calc(var(--ui89-safe-space) * 2);\n  border-radius: var(--box-border-radius);\n  line-height: 1;\n}\n",".container {\n  background: var(--ui89-scene-card-bg-color);\n  color: var(--ui89-scene-card-text-color);\n  border-radius: var(--ui89-box-border-radius);\n  position: relative;\n  box-shadow: rgb(0 0 0 / 5%) 0px 1px 2px 0px;\n  border-top: calc(var(--ui89-safe-space)) solid #ffffff20;\n  border-left: calc(var(--ui89-safe-space)) solid #ffffff20;\n  border-right: calc(var(--ui89-safe-space)) solid #00000040;\n  border-bottom: calc(var(--ui89-safe-space)) solid #00000040;\n  padding: calc(var(--ui89-safe-space) / 4) calc(var(--ui89-safe-space) / 2);\n  border: 1px solid white;\n\n  display: flex;\n  flex-direction: column;\n}\n\n.container > * {\n  flex: 1;\n}\n\n.containerHasTop {\n  margin-top: var(--ui89-safe-space);\n}\n\n.inside {\n  border: 1px solid white;\n  padding: calc(var(--ui89-safe-space));\n}\n\n.topLeftCenter {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  padding-left: var(--ui89-safe-space);\n  transform: translateY(50%);\n}\n\n.topCenter {\n  position: absolute;\n  top: 0;\n  transform: translateY(-50%);\n  left: var(--ui89-safe-space);\n  right: var(--ui89-safe-space);\n  display: flex;\n  justify-content: center;\n}\n",".navigation {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.navigationItem {\n  color: var(--ui89-scene-text-color);\n  background-color: var(--ui89-scene-bg-color);\n  padding: 0 calc(var(--ui89-safe-space) * 3);\n  cursor: pointer;\n}\n\n.navigationItem:hover,\n.navigationItemSelected {\n  background-color: var(--ui89-scene-text-color);\n  color: var(--ui89-scene-bg-color);\n}\n",".container {\n  display: flex;\n}\n\n.inside {\n  min-width: 0;\n  color: var(--ui89-scene-bg-color);\n  background-color: var(--ui89-scene-text-color);\n  padding: 0px var(--ui89-safe-space);\n}\n",".unbreakable {\n  white-space: nowrap;\n}\n\n.ellipsis {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.singleLine {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n",".container {\n  display: flex;\n  line-height: 1;\n}\n\n.inside {\n  min-width: 0;\n  border-bottom: 1px solid;\n  position: relative;\n  padding-bottom: calc(var(--ui89-safe-space) / 2);\n}\n\n.inside:after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  transform: translateY(-2px);\n  border-bottom: 1px solid;\n  z-index: 0;\n}\n"]}

package/dist/esm/index.d.ts

@@ -5,3 +5,8 @@ export { Ui89Button } from "./components/Ui89Button";
 export { Ui89Shortcut } from "./components/Ui89Shortcut";
 export { Ui89SpaceVertical } from "./components/Ui89SpaceVertical";
 export { Ui89TagBox } from "./components/Ui89TagBox";
+export { Ui89Card } from "./components/Ui89Card";
+export { Ui89TabbedCard } from "./components/Ui89TabbedCard";
+export { Ui89Tabs } from "./components/Ui89Tabs";
+export { Ui89TitleBox } from "./components/Ui89TitleBox";
+export { Ui89TitleUnderline } from "./components/Ui89TitleUnderline";

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState } from 'react';
+import React__default, { useState, useMemo } from 'react';
 
 var Ui89Theme;
 (function (Ui89Theme) {
@@ -16,26 +16,26 @@ var Ui89Look;
     Ui89Look["side"] = "side";
 })(Ui89Look || (Ui89Look = {}));
 
-var styles$3 = {"container":"Ui89Scene-module_container__J1AN5"};
+var styles$7 = {"container":"Ui89Scene-module_container__J1AN5"};
 
 var lookStyles = {"main":"look-module_main__dCtZk","side":"look-module_side__bCbry"};
 
 var typoStyles = {"big":"typo-module_big__NWXQv","normal":"typo-module_normal__a1-s-","normalBold":"typo-module_normalBold__6Mx0C","small":"typo-module_small__cdnMc","smallBold":"typo-module_smallBold__BRDCu","special":"typo-module_special__PiPuc"};
 
 function Ui89Scene({ look = Ui89Look.main, children, }) {
-    return (React__default.createElement("div", { className: `${styles$3.container} ${lookStyles[look]} ${typoStyles.normal}` }, children));
+    return (React__default.createElement("div", { className: `${styles$7.container} ${lookStyles[look]} ${typoStyles.normal}` }, children));
 }
 
-var styles$2 = {"container":"Ui89Button-module_container__V4tWM","button":"Ui89Button-module_button__wl9cp","block":"Ui89Button-module_block__3sGjT","disabled":"Ui89Button-module_disabled__I5nOu","active":"Ui89Button-module_active__ZN0AN","size--normal":"Ui89Button-module_size--normal__Pht3J","size--small":"Ui89Button-module_size--small__-4-4v","click":"Ui89Button-module_click__INMSh"};
+var styles$6 = {"container":"Ui89Button-module_container__V4tWM","button":"Ui89Button-module_button__wl9cp","block":"Ui89Button-module_block__3sGjT","disabled":"Ui89Button-module_disabled__I5nOu","active":"Ui89Button-module_active__ZN0AN","size--normal":"Ui89Button-module_size--normal__Pht3J","size--small":"Ui89Button-module_size--small__-4-4v","click":"Ui89Button-module_click__INMSh"};
 
 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"};
 
-var styles$1 = {"container":"HoverShadow-module_container__4noUA","right":"HoverShadow-module_right__p6LK8","bottom":"HoverShadow-module_bottom__7Hhnr"};
+var styles$5 = {"container":"HoverShadow-module_container__4noUA","right":"HoverShadow-module_right__p6LK8","bottom":"HoverShadow-module_bottom__7Hhnr"};
 
 function HoverShadow({ children, }) {
-    return (React__default.createElement("span", { className: styles$1.container },
-        React__default.createElement("span", { className: styles$1.bottom }),
-        React__default.createElement("span", { className: styles$1.right }),
+    return (React__default.createElement("span", { className: styles$5.container },
+        React__default.createElement("span", { className: styles$5.bottom }),
+        React__default.createElement("span", { className: styles$5.right }),
         children));
 }
 
@@ -89,27 +89,27 @@ function Ui89Button({ theme = Ui89Theme.primary, size = "normal", block, onClick
         }
     }
     let buttonClass = [
-        styles$2.button,
+        styles$6.button,
         typoStyles.special,
         chosenThemeStyles[theme],
-        styles$2["size--" + size],
-        activated ? styles$2.active : undefined,
-        block ? styles$2.block : undefined,
-        disabled ? styles$2.disabled : undefined,
-        clicking ? styles$2.active : undefined,
+        styles$6["size--" + size],
+        activated ? styles$6.active : undefined,
+        block ? styles$6.block : undefined,
+        disabled ? styles$6.disabled : undefined,
+        clicking ? styles$6.active : undefined,
     ].join(" ");
     if (href) {
-        return (React__default.createElement("span", { className: styles$2.container },
+        return (React__default.createElement("span", { className: styles$6.container },
             React__default.createElement(HoverShadow, null,
                 React__default.createElement("a", { className: buttonClass, href: href, onClick: onAnchorClick },
-                    React__default.createElement("span", { className: styles$2.click }),
+                    React__default.createElement("span", { className: styles$6.click }),
                     children))));
     }
     else {
-        return (React__default.createElement("span", { className: styles$2.container },
+        return (React__default.createElement("span", { className: styles$6.container },
             React__default.createElement(HoverShadow, null,
                 React__default.createElement("button", { className: buttonClass, type: "button", onClick: onButtonClick, disabled: localDisabled },
-                    React__default.createElement("span", { className: styles$2.click }),
+                    React__default.createElement("span", { className: styles$6.click }),
                     children))));
     }
 }
@@ -131,15 +131,15 @@ const SvgShortcut = props => /*#__PURE__*/React.createElement("svg", _extends({
   d: "M20 20h30M20 20v30"
 })));
 
-var styles = {"container":"Ui89Shortcut-module_container__L07CL","image":"Ui89Shortcut-module_image__f4Hsg","shortcutIcon":"Ui89Shortcut-module_shortcutIcon__SjZkr"};
+var styles$4 = {"container":"Ui89Shortcut-module_container__L07CL","image":"Ui89Shortcut-module_image__f4Hsg","shortcutIcon":"Ui89Shortcut-module_shortcutIcon__SjZkr"};
 
 function Ui89Shortcut({ imageUrl, label, onClick = () => { }, }) {
     function onNativeClick() {
         onClick();
     }
-    return (React__default.createElement("div", { className: styles.container },
-        React__default.createElement("img", { className: styles.image, src: imageUrl, onClick: onNativeClick }),
-        React__default.createElement(SvgShortcut, { className: styles.shortcutIcon, width: 16, height: 16 }),
+    return (React__default.createElement("div", { className: styles$4.container },
+        React__default.createElement("img", { className: styles$4.image, src: imageUrl, onClick: onNativeClick }),
+        React__default.createElement(SvgShortcut, { className: styles$4.shortcutIcon, width: 16, height: 16 }),
         React__default.createElement("div", { className: `${typoStyles.smallBold}` }, label)));
 }
 
@@ -156,5 +156,58 @@ function Ui89TagBox({ theme, children, }) {
     return (React__default.createElement("div", { className: `${style.container} ${typoStyles.special} ${chosenThemeStyles[theme]}` }, children));
 }
 
-export { Ui89Button, Ui89Look, Ui89Scene, Ui89Shortcut, Ui89SpaceVertical, Ui89TagBox, Ui89Theme };
+var styles$3 = {"container":"Ui89Card-module_container__-8hhJ","containerHasTop":"Ui89Card-module_containerHasTop__UsQUD","inside":"Ui89Card-module_inside__91GoJ","topLeftCenter":"Ui89Card-module_topLeftCenter__r9PD6","topCenter":"Ui89Card-module_topCenter__SZWfR"};
+
+function Ui89Card({ topLeftCenter, topCenter, children, }) {
+    const hasTopContent = topLeftCenter || topCenter;
+    return (React__default.createElement("div", { className: `${styles$3.container} ${hasTopContent ? styles$3.containerHasTop : ""}` },
+        React__default.createElement("div", { className: styles$3.inside },
+            topLeftCenter && (React__default.createElement("div", { className: styles$3.topLeftCenter }, topLeftCenter)),
+            topCenter && React__default.createElement("div", { className: styles$3.topCenter }, topCenter),
+            hasTopContent && React__default.createElement("div", { className: "space-vertical-1" }),
+            children,
+            hasTopContent && React__default.createElement("div", { className: "space-vertical-1" }))));
+}
+
+var styles$2 = {"navigation":"Ui89Tabs-module_navigation__y1WSG","navigationItem":"Ui89Tabs-module_navigationItem__keX-1","navigationItemSelected":"Ui89Tabs-module_navigationItemSelected__R7dba"};
+
+function Ui89Tabs({ selected, onChange = () => { }, items = [], }) {
+    function handleOnChange(value) {
+        onChange(value);
+    }
+    return (React__default.createElement("div", { className: styles$2.navigation }, items.map((item) => (React__default.createElement("div", { className: [
+            styles$2.navigationItem,
+            typoStyles.smallBold,
+            selected === item.value ? styles$2.navigationItemSelected : "",
+        ].join(" "), key: item.value, onClick: () => handleOnChange(item.value) }, item.label)))));
+}
+
+function Ui89TabbedCard({ selected, onChange = () => { }, items = [], }) {
+    const selectedItem = useMemo(() => {
+        return items.find((item) => item.value === selected) ?? null;
+    }, [selected, items]);
+    const Content = useMemo(() => {
+        return selectedItem !== null ? selectedItem.render : () => React__default.createElement(React__default.Fragment, null);
+    }, [selectedItem]);
+    return (React__default.createElement(Ui89Card, { topCenter: React__default.createElement(Ui89Tabs, { selected: selected, items: items, onChange: onChange }) },
+        React__default.createElement(Content, null)));
+}
+
+var styles$1 = {"container":"Ui89TitleBox-module_container__M-b7J","inside":"Ui89TitleBox-module_inside__GWTlP"};
+
+var textStyles = {"unbreakable":"text-module_unbreakable__3eDe3","ellipsis":"text-module_ellipsis__3-f-B","singleLine":"text-module_singleLine__X6pYL"};
+
+function Ui89TitleBox({ children }) {
+    return (React__default.createElement("div", { className: `${styles$1.container} ${typoStyles.special}` },
+        React__default.createElement("div", { className: `${styles$1.inside} ${textStyles.singleLine}` }, children)));
+}
+
+var styles = {"container":"Ui89TitleUnderline-module_container__EaGZi","inside":"Ui89TitleUnderline-module_inside__uwwxa"};
+
+function Ui89TitleUnderline({ children, }) {
+    return (React__default.createElement("div", { className: `${styles.container} ${typoStyles.special}` },
+        React__default.createElement("div", { className: `${styles.inside} ${textStyles.singleLine}` }, children)));
+}
+
+export { Ui89Button, Ui89Card, Ui89Look, Ui89Scene, Ui89Shortcut, Ui89SpaceVertical, Ui89TabbedCard, Ui89Tabs, Ui89TagBox, Ui89Theme, Ui89TitleBox, Ui89TitleUnderline };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/theme.ts","../../src/components/Ui89Scene.tsx","../../src/components/HoverShadow.tsx","../../src/components/Ui89Button.tsx","../../src/images/shortcut.svg","../../src/components/Ui89Shortcut.tsx","../../src/components/Ui89SpaceVertical.tsx","../../src/components/Ui89TagBox.tsx"],"sourcesContent":["export enum Ui89Theme {\n  primary = \"primary\",\n  secondary = \"secondary\",\n  info = \"info\",\n  success = \"success\",\n  warning = \"warning\",\n  danger = \"danger\",\n}\n\nexport enum Ui89Look {\n  main = \"main\",\n  side = \"side\",\n}\n","import React from \"react\"\n\nimport { Ui89Look } from \"../theme\"\n\nimport styles from \"./Ui89Scene.module.css\"\nimport lookStyles from \"../style/look.module.css\"\nimport typoStyles from \"../style/typo.module.css\"\n\nexport function Ui89Scene({\n  look = Ui89Look.main,\n  children,\n}: {\n  look?: Ui89Look | string\n  children: React.ReactNode\n}) {\n  return (\n    <div\n      className={`${styles.container} ${lookStyles[look]} ${typoStyles.normal}`}\n    >\n      {children}\n    </div>\n  )\n}\n","import React from \"react\"\nimport styles from \"./HoverShadow.module.css\"\n\nexport default function HoverShadow({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <span className={styles.container}>\n      <span className={styles.bottom}></span>\n      <span className={styles.right}></span>\n      {children}\n    </span>\n  )\n}\n","import React, { useState } from \"react\"\n\nimport styles from \"./Ui89Button.module.css\"\nimport typoStyles from \"../style/typo.module.css\"\nimport chosenThemeStyles from \"../style/chosen-theme.module.css\"\n\nimport HoverShadow from \"./HoverShadow\"\n\nimport { Ui89Theme } from \"../theme\"\n\ninterface Ui89ButtonProps {\n  theme?: Ui89Theme | string\n  size?: string\n  block?: boolean\n  onClick?: () => void | Promise<void>\n  href?: string\n  children: React.ReactNode\n  autoDisableOnClick?: boolean\n  disabled?: boolean\n  activated?: boolean\n  routerPush?: (url: string) => void\n}\n\nexport function Ui89Button({\n  theme = Ui89Theme.primary,\n  size = \"normal\",\n  block,\n  onClick,\n  href,\n  children,\n  autoDisableOnClick = true,\n  disabled,\n  activated,\n  routerPush,\n}: Ui89ButtonProps) {\n  //const router = useRouter()\n  const [clicking, setClicking] = useState(false)\n\n  let localDisabled = disabled || (autoDisableOnClick && clicking)\n\n  async function onAnchorClick(e: React.MouseEvent<HTMLAnchorElement>) {\n    if (localDisabled) {\n      // The anchor tag does not support the disabled attribute so we do this.\n      return\n    }\n\n    if (clicking) {\n      // No double clicking allowed.\n      return\n    }\n\n    try {\n      setClicking(true)\n\n      if (href !== undefined) {\n        if (href.startsWith(\"/\")) {\n          if (routerPush !== undefined) {\n            e.preventDefault()\n            routerPush(href)\n          }\n        }\n      }\n    } finally {\n      setClicking(false)\n    }\n  }\n\n  async function onButtonClick(e: React.MouseEvent<HTMLButtonElement>) {\n    if (localDisabled) {\n      // The anchor tag does not support the disabled attribute so we do this.\n      return\n    }\n\n    if (clicking) {\n      // No double clicking allowed.\n      return\n    }\n\n    try {\n      setClicking(true)\n\n      if (onClick === undefined) {\n        // No handler.\n        return\n      }\n\n      await onClick()\n    } finally {\n      setClicking(false)\n    }\n  }\n\n  let buttonClass = [\n    styles.button,\n    typoStyles.special,\n    chosenThemeStyles[theme],\n    styles[\"size--\" + size],\n    activated ? styles.active : undefined,\n    block ? styles.block : undefined,\n    disabled ? styles.disabled : undefined,\n    clicking ? styles.active : undefined,\n  ].join(\" \")\n\n  if (href) {\n    return (\n      <span className={styles.container}>\n        <HoverShadow>\n          <a className={buttonClass} href={href} onClick={onAnchorClick}>\n            <span className={styles.click}></span>\n            {children}\n          </a>\n        </HoverShadow>\n      </span>\n    )\n  } else {\n    return (\n      <span className={styles.container}>\n        <HoverShadow>\n          <button\n            className={buttonClass}\n            type=\"button\"\n            onClick={onButtonClick}\n            disabled={localDisabled}\n          >\n            <span className={styles.click}></span>\n            {children}\n          </button>\n        </HoverShadow>\n      </span>\n    )\n  }\n}\n","<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\n  <!-- Main arrow line -->\n  <line x1=\"80\" y1=\"80\" x2=\"20\" y2=\"20\" stroke=\"black\" stroke-width=\"15\" />\n  <!-- Left arrowhead -->\n  <line x1=\"20\" y1=\"20\" x2=\"50\" y2=\"20\" stroke=\"black\" stroke-width=\"15\" stroke-linecap=\"round\"/>\n  <!-- Top arrowhead -->\n  <line x1=\"20\" y1=\"20\" x2=\"20\" y2=\"50\" stroke=\"black\" stroke-width=\"15\" stroke-linecap=\"round\"/>\n</svg>\n","import React from \"react\"\n\nimport ShortcutSvg from \"../images/shortcut.svg\"\n\nimport styles from \"./Ui89Shortcut.module.css\"\nimport typoStyles from \"../style/typo.module.css\"\n\nexport function Ui89Shortcut({\n  imageUrl,\n  label,\n  onClick = () => {},\n}: {\n  imageUrl: string\n  label: string\n  onClick?: () => void\n}) {\n  function onNativeClick() {\n    onClick()\n  }\n\n  return (\n    <div className={styles.container}>\n      <img className={styles.image} src={imageUrl} onClick={onNativeClick} />\n\n      <ShortcutSvg className={styles.shortcutIcon} width={16} height={16} />\n\n      <div className={`${typoStyles.smallBold}`}>{label}</div>\n    </div>\n  )\n}\n","import React from \"react\"\n\nexport function Ui89SpaceVertical({ gap = 1 }: { gap?: number }) {\n  const style = {\n    paddingTop: `calc(var(--ui89-safe-space) * ${gap})`,\n  }\n\n  return <div style={style}></div>\n}\n","import React from \"react\"\n\nimport { Ui89Theme } from \"../theme\"\nimport typoStyles from \"../style/typo.module.css\"\nimport chosenThemeStyles from \"../style/chosen-theme.module.css\"\n\nimport style from \"./Ui89TagBox.module.css\"\n\nexport function Ui89TagBox({\n  theme,\n  children,\n}: {\n  theme: Ui89Theme | string\n  children: React.ReactNode\n}) {\n  return (\n    <div\n      className={`${style.container} ${typoStyles.special} ${chosenThemeStyles[theme]}`}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["React","styles","ShortcutSvg"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/theme.ts","../../src/components/Ui89Scene.tsx","../../src/components/HoverShadow.tsx","../../src/components/Ui89Button.tsx","../../src/images/shortcut.svg","../../src/components/Ui89Shortcut.tsx","../../src/components/Ui89SpaceVertical.tsx","../../src/components/Ui89TagBox.tsx","../../src/components/Ui89Card.tsx","../../src/components/Ui89Tabs.tsx","../../src/components/Ui89TabbedCard.tsx","../../src/components/Ui89TitleBox.tsx","../../src/components/Ui89TitleUnderline.tsx"],"sourcesContent":["export enum Ui89Theme {\n  primary = \"primary\",\n  secondary = \"secondary\",\n  info = \"info\",\n  success = \"success\",\n  warning = \"warning\",\n  danger = \"danger\",\n}\n\nexport enum Ui89Look {\n  main = \"main\",\n  side = \"side\",\n}\n","import React from \"react\"\n\nimport { Ui89Look } from \"../theme\"\n\nimport styles from \"./Ui89Scene.module.css\"\nimport lookStyles from \"../style/look.module.css\"\nimport typoStyles from \"../style/typo.module.css\"\n\nexport function Ui89Scene({\n  look = Ui89Look.main,\n  children,\n}: {\n  look?: Ui89Look | string\n  children: React.ReactNode\n}) {\n  return (\n    <div\n      className={`${styles.container} ${lookStyles[look]} ${typoStyles.normal}`}\n    >\n      {children}\n    </div>\n  )\n}\n","import React from \"react\"\nimport styles from \"./HoverShadow.module.css\"\n\nexport default function HoverShadow({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <span className={styles.container}>\n      <span className={styles.bottom}></span>\n      <span className={styles.right}></span>\n      {children}\n    </span>\n  )\n}\n","import React, { useState } from \"react\"\n\nimport styles from \"./Ui89Button.module.css\"\nimport typoStyles from \"../style/typo.module.css\"\nimport chosenThemeStyles from \"../style/chosen-theme.module.css\"\n\nimport HoverShadow from \"./HoverShadow\"\n\nimport { Ui89Theme } from \"../theme\"\n\ninterface Ui89ButtonProps {\n  theme?: Ui89Theme | string\n  size?: string\n  block?: boolean\n  onClick?: () => void | Promise<void>\n  href?: string\n  children: React.ReactNode\n  autoDisableOnClick?: boolean\n  disabled?: boolean\n  activated?: boolean\n  routerPush?: (url: string) => void\n}\n\nexport function Ui89Button({\n  theme = Ui89Theme.primary,\n  size = \"normal\",\n  block,\n  onClick,\n  href,\n  children,\n  autoDisableOnClick = true,\n  disabled,\n  activated,\n  routerPush,\n}: Ui89ButtonProps) {\n  //const router = useRouter()\n  const [clicking, setClicking] = useState(false)\n\n  let localDisabled = disabled || (autoDisableOnClick && clicking)\n\n  async function onAnchorClick(e: React.MouseEvent<HTMLAnchorElement>) {\n    if (localDisabled) {\n      // The anchor tag does not support the disabled attribute so we do this.\n      return\n    }\n\n    if (clicking) {\n      // No double clicking allowed.\n      return\n    }\n\n    try {\n      setClicking(true)\n\n      if (href !== undefined) {\n        if (href.startsWith(\"/\")) {\n          if (routerPush !== undefined) {\n            e.preventDefault()\n            routerPush(href)\n          }\n        }\n      }\n    } finally {\n      setClicking(false)\n    }\n  }\n\n  async function onButtonClick(e: React.MouseEvent<HTMLButtonElement>) {\n    if (localDisabled) {\n      // The anchor tag does not support the disabled attribute so we do this.\n      return\n    }\n\n    if (clicking) {\n      // No double clicking allowed.\n      return\n    }\n\n    try {\n      setClicking(true)\n\n      if (onClick === undefined) {\n        // No handler.\n        return\n      }\n\n      await onClick()\n    } finally {\n      setClicking(false)\n    }\n  }\n\n  let buttonClass = [\n    styles.button,\n    typoStyles.special,\n    chosenThemeStyles[theme],\n    styles[\"size--\" + size],\n    activated ? styles.active : undefined,\n    block ? styles.block : undefined,\n    disabled ? styles.disabled : undefined,\n    clicking ? styles.active : undefined,\n  ].join(\" \")\n\n  if (href) {\n    return (\n      <span className={styles.container}>\n        <HoverShadow>\n          <a className={buttonClass} href={href} onClick={onAnchorClick}>\n            <span className={styles.click}></span>\n            {children}\n          </a>\n        </HoverShadow>\n      </span>\n    )\n  } else {\n    return (\n      <span className={styles.container}>\n        <HoverShadow>\n          <button\n            className={buttonClass}\n            type=\"button\"\n            onClick={onButtonClick}\n            disabled={localDisabled}\n          >\n            <span className={styles.click}></span>\n            {children}\n          </button>\n        </HoverShadow>\n      </span>\n    )\n  }\n}\n","<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\n  <!-- Main arrow line -->\n  <line x1=\"80\" y1=\"80\" x2=\"20\" y2=\"20\" stroke=\"black\" stroke-width=\"15\" />\n  <!-- Left arrowhead -->\n  <line x1=\"20\" y1=\"20\" x2=\"50\" y2=\"20\" stroke=\"black\" stroke-width=\"15\" stroke-linecap=\"round\"/>\n  <!-- Top arrowhead -->\n  <line x1=\"20\" y1=\"20\" x2=\"20\" y2=\"50\" stroke=\"black\" stroke-width=\"15\" stroke-linecap=\"round\"/>\n</svg>\n","import React from \"react\"\n\nimport ShortcutSvg from \"../images/shortcut.svg\"\n\nimport styles from \"./Ui89Shortcut.module.css\"\nimport typoStyles from \"../style/typo.module.css\"\n\nexport function Ui89Shortcut({\n  imageUrl,\n  label,\n  onClick = () => {},\n}: {\n  imageUrl: string\n  label: string\n  onClick?: () => void\n}) {\n  function onNativeClick() {\n    onClick()\n  }\n\n  return (\n    <div className={styles.container}>\n      <img className={styles.image} src={imageUrl} onClick={onNativeClick} />\n\n      <ShortcutSvg className={styles.shortcutIcon} width={16} height={16} />\n\n      <div className={`${typoStyles.smallBold}`}>{label}</div>\n    </div>\n  )\n}\n","import React from \"react\"\n\nexport function Ui89SpaceVertical({ gap = 1 }: { gap?: number }) {\n  const style = {\n    paddingTop: `calc(var(--ui89-safe-space) * ${gap})`,\n  }\n\n  return <div style={style}></div>\n}\n","import React from \"react\"\n\nimport { Ui89Theme } from \"../theme\"\nimport typoStyles from \"../style/typo.module.css\"\nimport chosenThemeStyles from \"../style/chosen-theme.module.css\"\n\nimport style from \"./Ui89TagBox.module.css\"\n\nexport function Ui89TagBox({\n  theme,\n  children,\n}: {\n  theme: Ui89Theme | string\n  children: React.ReactNode\n}) {\n  return (\n    <div\n      className={`${style.container} ${typoStyles.special} ${chosenThemeStyles[theme]}`}\n    >\n      {children}\n    </div>\n  )\n}\n","import React from \"react\"\nimport styles from \"./Ui89Card.module.css\"\n\nexport function Ui89Card({\n  topLeftCenter,\n  topCenter,\n  children,\n}: {\n  topLeftCenter?: React.ReactNode\n  topCenter?: React.ReactNode\n  children: React.ReactNode\n}) {\n  const hasTopContent = topLeftCenter || topCenter\n\n  return (\n    <div\n      className={`${styles.container} ${hasTopContent ? styles.containerHasTop : \"\"}`}\n    >\n      <div className={styles.inside}>\n        {topLeftCenter && (\n          <div className={styles.topLeftCenter}>{topLeftCenter}</div>\n        )}\n        {topCenter && <div className={styles.topCenter}>{topCenter}</div>}\n\n        {hasTopContent && <div className=\"space-vertical-1\"></div>}\n\n        {children}\n\n        {hasTopContent && <div className=\"space-vertical-1\"></div>}\n      </div>\n    </div>\n  )\n}\n","import React from \"react\"\n\nimport styles from \"./Ui89Tabs.module.css\"\nimport typoStyles from \"../style/typo.module.css\"\nimport chosenThemeStyles from \"../style/chosen-theme.module.css\"\n\nexport function Ui89Tabs({\n  selected,\n  onChange = () => {},\n  items = [],\n}: {\n  selected?: string\n  onChange?: (value: string) => void\n  items?: {\n    value: string\n    label: string\n  }[]\n}) {\n  function handleOnChange(value: string) {\n    onChange(value)\n  }\n\n  return (\n    <div className={styles.navigation}>\n      {items.map((item) => (\n        <div\n          className={[\n            styles.navigationItem,\n            typoStyles.smallBold,\n            selected === item.value ? styles.navigationItemSelected : \"\",\n          ].join(\" \")}\n          key={item.value}\n          onClick={() => handleOnChange(item.value)}\n        >\n          {item.label}\n        </div>\n      ))}\n    </div>\n  )\n}\n","import { Ui89Card } from \"./Ui89Card\"\nimport { Ui89Tabs } from \"./Ui89Tabs\"\nimport React, { useCallback, useMemo } from \"react\"\n\nexport interface Ui89TabbedCardProps {\n  selected?: string\n  onChange?: (value: string) => void\n  items?: Ui89TabbedCardPropsItem[]\n}\n\nexport interface Ui89TabbedCardPropsItem {\n  value: string\n  label: string\n  render: () => React.JSX.Element\n}\n\nexport function Ui89TabbedCard({\n  selected,\n  onChange = () => {},\n  items = [],\n}: Ui89TabbedCardProps) {\n  const selectedItem = useMemo<Ui89TabbedCardPropsItem | null>(() => {\n    return items.find((item) => item.value === selected) ?? null\n  }, [selected, items])\n\n  const Content = useMemo(() => {\n    return selectedItem !== null ? selectedItem.render : () => <></>\n  }, [selectedItem])\n\n  return (\n    <Ui89Card\n      topCenter={\n        <Ui89Tabs selected={selected} items={items} onChange={onChange} />\n      }\n    >\n      <Content />\n    </Ui89Card>\n  )\n}\n","import React from \"react\"\n\nimport styles from \"./Ui89TitleBox.module.css\"\nimport typoStyles from \"../style/typo.module.css\"\nimport textStyles from \"../style/text.module.css\"\n\nexport function Ui89TitleBox({ children }: { children: React.ReactNode }) {\n  return (\n    <div className={`${styles.container} ${typoStyles.special}`}>\n      <div className={`${styles.inside} ${textStyles.singleLine}`}>\n        {children}\n      </div>\n    </div>\n  )\n}\n","import React from \"react\"\n\nimport styles from \"./Ui89TitleUnderline.module.css\"\nimport typoStyles from \"../style/typo.module.css\"\nimport textStyles from \"../style/text.module.css\"\n\nexport function Ui89TitleUnderline({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <div className={`${styles.container} ${typoStyles.special}`}>\n      <div className={`${styles.inside} ${textStyles.singleLine}`}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","styles","ShortcutSvg"],"mappings":";;;IAAY;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,SAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,SAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAPW,SAAS,KAAT,SAAS,GAOpB,EAAA,CAAA,CAAA;IAEW;AAAZ,CAAA,UAAY,QAAQ,EAAA;AAClB,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAHW,QAAQ,KAAR,QAAQ,GAGnB,EAAA,CAAA,CAAA;;;;;;;;ACJK,SAAU,SAAS,CAAC,EACxB,IAAI,GAAG,QAAQ,CAAC,IAAI,EACpB,QAAQ,GAIT,EAAA;IACC,QACEA,sCACE,SAAS,EAAE,GAAGC,QAAM,CAAC,SAAS,CAAA,CAAA,EAAI,UAAU,CAAC,IAAI,CAAC,CAAA,CAAA,EAAI,UAAU,CAAC,MAAM,EAAE,EAExE,EAAA,QAAQ,CACL;AAEV;;;;;;;;ACnBc,SAAU,WAAW,CAAC,EAClC,QAAQ,GAGT,EAAA;AACC,IAAA,QACED,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEC,QAAM,CAAC,SAAS,EAAA;AAC/B,QAAAD,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEC,QAAM,CAAC,MAAM,EAAS,CAAA;AACvC,QAAAD,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEC,QAAM,CAAC,KAAK,EAAS,CAAA;QACrC,QAAQ,CACJ;AAEX;;ACQgB,SAAA,UAAU,CAAC,EACzB,KAAK,GAAG,SAAS,CAAC,OAAO,EACzB,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,kBAAkB,GAAG,IAAI,EACzB,QAAQ,EACR,SAAS,EACT,UAAU,GACM,EAAA;;IAEhB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,IAAI,aAAa,GAAG,QAAQ,KAAK,kBAAkB,IAAI,QAAQ,CAAC;IAEhE,eAAe,aAAa,CAAC,CAAsC,EAAA;QACjE,IAAI,aAAa,EAAE;;YAEjB;;QAGF,IAAI,QAAQ,EAAE;;YAEZ;;AAGF,QAAA,IAAI;YACF,WAAW,CAAC,IAAI,CAAC;AAEjB,YAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACtB,gBAAA,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;AACxB,oBAAA,IAAI,UAAU,KAAK,SAAS,EAAE;wBAC5B,CAAC,CAAC,cAAc,EAAE;wBAClB,UAAU,CAAC,IAAI,CAAC;;;;;gBAId;YACR,WAAW,CAAC,KAAK,CAAC;;;IAItB,eAAe,aAAa,CAAC,CAAsC,EAAA;QACjE,IAAI,aAAa,EAAE;;YAEjB;;QAGF,IAAI,QAAQ,EAAE;;YAEZ;;AAGF,QAAA,IAAI;YACF,WAAW,CAAC,IAAI,CAAC;AAEjB,YAAA,IAAI,OAAO,KAAK,SAAS,EAAE;;gBAEzB;;YAGF,MAAM,OAAO,EAAE;;gBACP;YACR,WAAW,CAAC,KAAK,CAAC;;;AAItB,IAAA,IAAI,WAAW,GAAG;AAChB,QAAAA,QAAM,CAAC,MAAM;AACb,QAAA,UAAU,CAAC,OAAO;QAClB,iBAAiB,CAAC,KAAK,CAAC;AACxB,QAAAA,QAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,SAAS,GAAGA,QAAM,CAAC,MAAM,GAAG,SAAS;QACrC,KAAK,GAAGA,QAAM,CAAC,KAAK,GAAG,SAAS;QAChC,QAAQ,GAAGA,QAAM,CAAC,QAAQ,GAAG,SAAS;QACtC,QAAQ,GAAGA,QAAM,CAAC,MAAM,GAAG,SAAS;AACrC,KAAA,CAAC,IAAI,CAAC,GAAG,CAAC;IAEX,IAAI,IAAI,EAAE;AACR,QAAA,QACED,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEC,QAAM,CAAC,SAAS,EAAA;AAC/B,YAAAD,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA;gBACVA,cAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAA;AAC3D,oBAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEC,QAAM,CAAC,KAAK,EAAS,CAAA;AACrC,oBAAA,QAAQ,CACP,CACQ,CACT;;SAEJ;AACL,QAAA,QACED,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEC,QAAM,CAAC,SAAS,EAAA;AAC/B,YAAAD,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA;AACV,gBAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,WAAW,EACtB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,aAAa,EAAA;AAEvB,oBAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEC,QAAM,CAAC,KAAK,EAAS,CAAA;AACrC,oBAAA,QAAQ,CACF,CACG,CACT;;AAGb;;ACnIA,IAAI,KAAK,EAAE,MAAM;AACjB,SAAS,QAAQ,GAAG,EAAE,OAAO,QAAQ,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAElR,MAAM,WAAW,GAAG,KAAK,iBAAiB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;AAC9E,EAAE,KAAK,EAAE,4BAA4B;AACrC,EAAE,KAAK,EAAE,GAAG;AACZ,EAAE,MAAM,EAAE;AACV,CAAC,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,KAAK,gBAAgB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACtE,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,WAAW,EAAE,EAAE;AACjB,EAAE,CAAC,EAAE;AACL,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,gBAAgB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAClE,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,aAAa,EAAE,OAAO;AACxB,EAAE,WAAW,EAAE,EAAE;AACjB,EAAE,CAAC,EAAE;AACL,CAAC,CAAC,CAAC,CAAC;;;;ACTY,SAAA,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,GAAG,GAKnB,EAAA;AACC,IAAA,SAAS,aAAa,GAAA;AACpB,QAAA,OAAO,EAAE;;AAGX,IAAA,QACED,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,QAAM,CAAC,SAAS,EAAA;AAC9B,QAAAD,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,QAAM,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAI,CAAA;AAEvE,QAAAD,cAAA,CAAA,aAAA,CAACE,WAAW,EAAA,EAAC,SAAS,EAAED,QAAM,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAI,CAAA;AAEtE,QAAAD,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAG,EAAA,UAAU,CAAC,SAAS,CAAE,CAAA,EAAA,EAAG,KAAK,CAAO,CACpD;AAEV;;SC3BgB,iBAAiB,CAAC,EAAE,GAAG,GAAG,CAAC,EAAoB,EAAA;AAC7D,IAAA,MAAM,KAAK,GAAG;QACZ,UAAU,EAAE,CAAiC,8BAAA,EAAA,GAAG,CAAG,CAAA,CAAA;KACpD;AAED,IAAA,OAAOA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,KAAK,GAAQ;AAClC;;;;SCAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,GAIT,EAAA;IACC,QACEA,sCACE,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAA,CAAA,EAAI,UAAU,CAAC,OAAO,CAAI,CAAA,EAAA,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAEhF,EAAA,QAAQ,CACL;AAEV;;;;ACnBM,SAAU,QAAQ,CAAC,EACvB,aAAa,EACb,SAAS,EACT,QAAQ,GAKT,EAAA;AACC,IAAA,MAAM,aAAa,GAAG,aAAa,IAAI,SAAS;IAEhD,QACEA,sCACE,SAAS,EAAE,GAAGC,QAAM,CAAC,SAAS,CAAI,CAAA,EAAA,aAAa,GAAGA,QAAM,CAAC,eAAe,GAAG,EAAE,CAAE,CAAA,EAAA;AAE/E,QAAAD,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,QAAM,CAAC,MAAM,EAAA;YAC1B,aAAa,KACZD,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,QAAM,CAAC,aAAa,EAAA,EAAG,aAAa,CAAO,CAC5D;YACA,SAAS,IAAID,sCAAK,SAAS,EAAEC,QAAM,CAAC,SAAS,EAAG,EAAA,SAAS,CAAO;AAEhE,YAAA,aAAa,IAAID,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kBAAkB,EAAO,CAAA;YAEzD,QAAQ;YAER,aAAa,IAAIA,sCAAK,SAAS,EAAC,kBAAkB,EAAO,CAAA,CACtD,CACF;AAEV;;;;SC1BgB,QAAQ,CAAC,EACvB,QAAQ,EACR,QAAQ,GAAG,SAAQ,EACnB,KAAK,GAAG,EAAE,GAQX,EAAA;IACC,SAAS,cAAc,CAAC,KAAa,EAAA;QACnC,QAAQ,CAAC,KAAK,CAAC;;IAGjB,QACEA,sCAAK,SAAS,EAAEC,QAAM,CAAC,UAAU,IAC9B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACdD,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE;AACT,YAAAC,QAAM,CAAC,cAAc;AACrB,YAAA,UAAU,CAAC,SAAS;AACpB,YAAA,QAAQ,KAAK,IAAI,CAAC,KAAK,GAAGA,QAAM,CAAC,sBAAsB,GAAG,EAAE;AAC7D,SAAA,CAAC,IAAI,CAAC,GAAG,CAAC,EACX,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,OAAO,EAAE,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,EAExC,EAAA,IAAI,CAAC,KAAK,CACP,CACP,CAAC,CACE;AAEV;;SCvBgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,GAAG,SAAQ,EACnB,KAAK,GAAG,EAAE,GACU,EAAA;AACpB,IAAA,MAAM,YAAY,GAAG,OAAO,CAAiC,MAAK;AAChE,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,IAAI,IAAI;AAC9D,KAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;AAErB,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAK;AAC3B,QAAA,OAAO,YAAY,KAAK,IAAI,GAAG,YAAY,CAAC,MAAM,GAAG,MAAMD,2DAAK;AAClE,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;IAElB,QACEA,6BAAC,QAAQ,EAAA,EACP,SAAS,EACPA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,EAAA;AAGpE,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,CAAG,CACF;AAEf;;;;;;AChCgB,SAAA,YAAY,CAAC,EAAE,QAAQ,EAAiC,EAAA;AACtE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAG,EAAAC,QAAM,CAAC,SAAS,CAAI,CAAA,EAAA,UAAU,CAAC,OAAO,CAAE,CAAA,EAAA;AACzD,QAAAD,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,EAAGC,QAAM,CAAC,MAAM,CAAI,CAAA,EAAA,UAAU,CAAC,UAAU,EAAE,EACxD,EAAA,QAAQ,CACL,CACF;AAEV;;;;ACRgB,SAAA,kBAAkB,CAAC,EACjC,QAAQ,GAGT,EAAA;AACC,IAAA,QACED,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAG,EAAA,MAAM,CAAC,SAAS,CAAI,CAAA,EAAA,UAAU,CAAC,OAAO,CAAE,CAAA,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,MAAM,CAAI,CAAA,EAAA,UAAU,CAAC,UAAU,EAAE,EACxD,EAAA,QAAQ,CACL,CACF;AAEV;;;;"}

package/dist/esm/storybook/ActionPropUpdate.d.ts

@@ -0,0 +1,8 @@
+import { Decorator } from "@storybook/react/*";
+interface ActionPropUpdateOptions {
+    directLink: {
+        [actionName: string]: string;
+    };
+}
+export declare function ActionPropUpdate({ directLink, }: ActionPropUpdateOptions): Decorator;
+export {};

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "react-ui89",
-  "description": "A collection of components that mimic a style of user interfaces from the 80s.",
-  "version": "0.5.0",
+  "description": "A collection of components that mimic a common style of user interfaces from the late 80s and early 90s.",
+  "version": "0.6.0",
   "author": "Daniel Araujo",
   "module": "dist/esm/index.js",
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "LICENSE",
+    "preview.png"
   ],
   "types": "dist/esm/index.d.ts",
   "peerDependencies": {
@@ -44,13 +46,12 @@
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.1.1",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-onboarding": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-vite": "^8.4.2",
-    "@storybook/test": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-onboarding": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/preview-api": "^8.4.4",
+    "@storybook/react-vite": "^8.4.4",
     "@svgr/rollup": "^8.1.0",
     "@types/react": "^18.3.12",
     "eslint-plugin-storybook": "^0.11.0",
@@ -58,7 +59,7 @@
     "rollup": "^4.25.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.4.2",
+    "storybook": "^8.4.4",
     "tslib": "^2.8.1",
     "typescript": "^5.6.3",
     "typescript-plugin-css-modules": "^5.1.0",