react-ui89 0.64.0 → 0.66.0

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

@@ -0,0 +1,18 @@
+import React from "react";
+import "./Ui89BoxShadow.css";
+export interface Ui89BoxShadowProps {
+    children?: React.ReactNode;
+    /**
+     * The size of the shadow gap.
+     */
+    gap?: number;
+    /**
+     * The size of the shadow row gap.
+     */
+    rowGap?: number;
+    /**
+     * The size of the shadow column gap.
+     */
+    columnGap?: number;
+}
+export declare function Ui89BoxShadow({ children, gap, rowGap, columnGap, }: Ui89BoxShadowProps): React.JSX.Element;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Ui89BoxShadow } from "./Ui89BoxShadow";
+declare const meta: Meta<typeof Ui89BoxShadow>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DisplayInlineBlockChild: Story;
+export declare const WithRowGap: Story;
+export declare const WithColumnGap: Story;
+export declare const WithRowAndColumnGap: Story;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import "./Ui89LinkBracket.css";
+export interface Ui89LinkBracketProps {
+    onClick?: () => void | Promise<void>;
+    href?: string;
+    children: React.ReactNode;
+    autoDisableOnClick?: boolean;
+    disabled?: boolean;
+}
+export declare function Ui89LinkBracket({ children, ...props }: Ui89LinkBracketProps): React.JSX.Element;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Ui89LinkBracket } from "./Ui89LinkBracket";
+import { Ui89OverrideProps } from "../Ui89Provider";
+declare const meta: Meta<typeof Ui89LinkBracket>;
+export default meta;
+type Story = StoryObj<typeof Ui89LinkBracket>;
+export declare const Default: Story;
+export declare const AsLink: StoryObj<Ui89OverrideProps>;
+export declare const AsButton: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,14 @@
+import React from "react";
+import "./Ui89MenuCard.css";
+export interface Ui89MenuCardPropsOption {
+    type?: "item" | "separator";
+    label?: string;
+    onClick?: () => void;
+    href?: string;
+    disabled?: boolean;
+    oppositeLabel?: React.ReactNode;
+}
+export interface Ui89MenuCardProps {
+    options: Ui89MenuCardPropsOption[];
+}
+export declare const Ui89MenuCard: React.FC<Ui89MenuCardProps>;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Ui89MenuCard } from "./Ui89MenuCard";
+declare const meta: Meta<typeof Ui89MenuCard>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLinks: Story;
+export declare const WithSeparator: Story;
+export declare const WithShortcuts: Story;
+export declare const AffectedByUi89ThemeBackground: Story;

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

@@ -0,0 +1,5 @@
+import React from "react";
+export interface Ui89SpaceHorizontalProps {
+    gap?: number;
+}
+export declare function Ui89SpaceHorizontal({ gap }: Ui89SpaceHorizontalProps): React.JSX.Element;

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

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

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

@@ -0,0 +1,6 @@
+import React from "react";
+import "./Ui89TitleBracket.css";
+export interface Ui89TitleBracketProps {
+    children?: React.ReactNode;
+}
+export declare const Ui89TitleBracket: ({ children }: Ui89TitleBracketProps) => React.JSX.Element;

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

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

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

@@ -0,0 +1,6 @@
+import React from "react";
+import "./Ui89TitleSideLine.css";
+export interface Ui89TitleSideLineProps {
+    children?: React.ReactNode;
+}
+export declare const Ui89TitleSideLine: ({ children }: Ui89TitleSideLineProps) => React.JSX.Element;

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

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

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

@@ -0,0 +1,6 @@
+import React from "react";
+import "./Ui89TitleSpace.css";
+export interface Ui89TitleSpaceProps {
+    children?: React.ReactNode;
+}
+export declare const Ui89TitleSpace: ({ children }: Ui89TitleSpaceProps) => React.JSX.Element;

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

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

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

@@ -3,3 +3,6 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithPopover: Story;
+export declare const WithCardAndBoxShadow: Story;
+export declare const MenuBarWithPopover: Story;

package/dist/esm/index.css

@@ -2,11 +2,11 @@
 .ui89-breadcrumbs{display:flex;flex-direction:row-reverse;justify-content:flex-end;overflow:hidden;padding:var(--ui89-safe-space);}.ui89-breadcrumbs__item{display:block;color:var(--ui89-chosen-theme-text-color);padding-left:calc(var(--ui89-safe-space) * 3);padding-right:calc(var(--ui89-safe-space) * 2);margin:calc(var(--ui89-safe-space) * -1);position:relative;clip-path:polygon(0% 0%,calc(100% - var(--ui89-safe-space)) 0%,100% 50%,calc(100% - var(--ui89-safe-space)) 100%,0% 100%);animation:ui89-breadcrumbs__appear var(--ui89-animation-speed);}.ui89-breadcrumbs__item:last-child{padding-left:calc(var(--ui89-safe-space) * 2);}@keyframes ui89-breadcrumbs__appear{from{transform:translateX(-100%);}to{transform:translateX(0%);}}.ui89-breadcrumbs__item__background{position:absolute;z-index:-1;inset:0;background-color:var(--ui89-chosen-theme-bg-color);filter:brightness(calc(1 - var(--ui89-index) * 0.1));}
 .ui89-typo-big{font-family:monospace;font-size:var(--ui89-font-size-big);line-height:25px;}.ui89-typo-normal{font-family:monospace;font-size:var(--ui89-font-size-normal);line-height:16px;}.ui89-typo-normal-bold{font-family:monospace;font-size:var(--ui89-font-size-normal);line-height:16px;font-weight:bold;}.ui89-typo-small{font-family:monospace;font-size:var(--ui89-font-size-small);line-height:16px;}.ui89-typo-small-bold{font-family:monospace;font-size:var(--ui89-font-size-small);line-height:16px;font-weight:bold;}.ui89-typo-special{font-family:monospace;font-size:var(--ui89-font-size-small);font-weight:bold;}
 .ui-89-reset-a{text-decoration:none;}.ui-89-reset-button{background:none;padding:0;border:0;}
-.ui89-chosen-theme-primary{--ui89-chosen-theme-text-color:var(--ui89-theme-primary-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-primary-bg-color);}.ui89-chosen-theme-secondary{--ui89-chosen-theme-text-color:var(--ui89-theme-secondary-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-secondary-bg-color);}.ui89-chosen-theme-info{--ui89-chosen-theme-text-color:var(--ui89-theme-info-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-info-bg-color);}.ui89-chosen-theme-success{--ui89-chosen-theme-text-color:var(--ui89-theme-success-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-success-bg-color);}.ui89-chosen-theme-warning{--ui89-chosen-theme-text-color:var(--ui89-theme-warning-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-warning-bg-color);}.ui89-chosen-theme-danger{--ui89-chosen-theme-text-color:var(--ui89-theme-danger-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-danger-bg-color);}
+.ui89-chosen-theme-primary{--ui89-chosen-theme-text-color:var(--ui89-theme-primary-text-color);--ui89-chosen-theme-text-disabled-color:var(--ui89-palette-light-gray);--ui89-chosen-theme-bg-color:var(--ui89-theme-primary-bg-color);}.ui89-chosen-theme-secondary{--ui89-chosen-theme-text-color:var(--ui89-theme-secondary-text-color);--ui89-chosen-theme-text-disabled-color:var(--ui89-palette-light-gray);--ui89-chosen-theme-bg-color:var(--ui89-theme-secondary-bg-color);}.ui89-chosen-theme-info{--ui89-chosen-theme-text-color:var(--ui89-theme-info-text-color);--ui89-chosen-theme-text-disabled-color:var(--ui89-palette-light-gray);--ui89-chosen-theme-bg-color:var(--ui89-theme-info-bg-color);}.ui89-chosen-theme-success{--ui89-chosen-theme-text-color:var(--ui89-theme-success-text-color);--ui89-chosen-theme-text-disabled-color:var(--ui89-palette-light-gray);--ui89-chosen-theme-bg-color:var(--ui89-theme-success-bg-color);}.ui89-chosen-theme-warning{--ui89-chosen-theme-text-color:var(--ui89-theme-warning-text-color);--ui89-chosen-theme-text-disabled-color:var(--ui89-palette-light-gray);--ui89-chosen-theme-bg-color:var(--ui89-theme-warning-bg-color);}.ui89-chosen-theme-danger{--ui89-chosen-theme-text-color:var(--ui89-theme-danger-text-color);--ui89-chosen-theme-text-disabled-color:var(--ui89-palette-light-gray);--ui89-chosen-theme-bg-color:var(--ui89-theme-danger-bg-color);}
+.ui89-box-shadow{display:grid;padding-right:var(--ui89-box-shadow-column-gap);padding-bottom:var(--ui89-box-shadow-row-gap);position:relative;}.ui89-box-shadow>*{}.ui89-box-shadow__right{display:block;position:absolute;right:0;bottom:0;height:calc(100% - var(--ui89-box-shadow-row-gap));width:var(--ui89-box-shadow-column-gap);box-sizing:border-box;background:black;z-index:0;}.ui89-box-shadow__bottom{display:block;position:absolute;right:0;bottom:0;width:calc(100% - var(--ui89-box-shadow-column-gap));height:var(--ui89-box-shadow-row-gap);box-sizing:border-box;background:black;z-index:0;}
 .ui89-button{display:inline-grid;height:fit-content;position:relative;}.ui89-button--size-standard .ui89-button__button{height:22px;padding:0 calc(var(--ui89-safe-space) * 2);min-width:60px;}.ui89-button--size-square{max-width:fit-content;}.ui89-button__implementation{padding:0;border:0;}.ui89-button--size-square .ui89-button__button{width:22px;height:22px;flex-basis:22px;overflow:hidden;}.ui89-button__button{display:flex;justify-content:center;align-items:center;border:0;color:var(--ui89-chosen-theme-text-color);background-color:var(--ui89-chosen-theme-bg-color);border-radius:1px;font-weight:bold;user-select:none;text-align:center;box-sizing:border-box;border:1px solid #00000010;transition:transform var(--ui89-animation-speed);max-width:100%;white-space:nowrap;position:relative;cursor:var(--ui89-cursor-pointer);}.ui89-button__button__content{min-width:0;}.ui89-button__button:before{position:absolute;inset:0;}.ui89-button__button--block{display:flex;}.ui89-button__button:hover:not(.ui89-button__button--disabled):not(.ui89-button__button--active):before{content:"";background-color:#ffffff40;cursor:var(--ui89-cursor-pointer);}.ui89-button__button:active:not(.ui89-button__button--disabled),.ui89-button__button--active{transform:translate3d(calc(var(--ui89-safe-space) / 2),calc(var(--ui89-safe-space) / 2),0);}.ui89-button__button:active:not(.ui89-button__button--disabled):not(.ui89-button__button--active):before{content:none;background-color:#00000040;cursor:var(--ui89-cursor-pointer);}.ui89-button__button--disabled{opacity:0.5;cursor:var(--ui89-cursor-default);}
 .ui89-text-unbreakable{white-space:nowrap;}.ui89-text-ellipsis{overflow:hidden;text-overflow:ellipsis;}.ui89-text-single-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.ui89-text-single-line--ellipsis-left{direction:rtl;}
-.ui89-hover-shadow{display:grid;padding-right:var(--ui89-safe-space);padding-bottom:var(--ui89-safe-space);position:relative;}.ui89-hover-shadow>*{}.ui89-hover-shadow__right{display:block;position:absolute;right:0;bottom:0;height:calc(100% - var(--ui89-safe-space));width:var(--ui89-safe-space);box-sizing:border-box;background:black;z-index:0;}.ui89-hover-shadow__bottom{display:block;position:absolute;right:0;bottom:0;width:calc(100% - var(--ui89-safe-space));height:var(--ui89-safe-space);box-sizing:border-box;background:black;z-index:0;}
-.ui89-card{background:var(--ui89-scene-card-bg-color);color:var(--ui89-scene-card-text-color);border-radius:var(--ui89-box-border-radius);position:relative;box-shadow:rgb(0 0 0 / 5%) 0px 1px 2px 0px;border-top:calc(var(--ui89-safe-space)) solid #ffffff20;border-left:calc(var(--ui89-safe-space)) solid #ffffff20;border-right:calc(var(--ui89-safe-space)) solid #00000040;border-bottom:calc(var(--ui89-safe-space)) solid #00000040;padding:calc(var(--ui89-safe-space) / 4) calc(var(--ui89-safe-space) / 2);border:1px solid var(--ui89-scene-card-text-color);display:flex;flex-direction:column;}.ui89-card>*{flex:1;}.ui89-card__inside{border:1px solid white;padding:calc(var(--ui89-safe-space));}.ui89-card__top-left{position:absolute;bottom:100%;left:0;padding-left:var(--ui89-safe-space);transform:translateY(50%);max-width:100%;}.ui89-card__top-center{position:absolute;bottom:100%;left:50%;transform:translate(-50%,50%);padding:0 var(--ui89-safe-space);max-width:100%;box-sizing:border-box;}.ui89-card__top-right{position:absolute;bottom:100%;right:0;padding-right:var(--ui89-safe-space);transform:translateY(50%);max-width:100%;}.ui89-card__bottom-left{position:absolute;top:100%;left:0;padding-left:var(--ui89-safe-space);transform:translateY(-50%);max-width:100%;}.ui89-card__bottom-center{position:absolute;top:100%;left:50%;transform:translate(-50%,-50%);padding:0 var(--ui89-safe-space);max-width:100%;box-sizing:border-box;}.ui89-card__bottom-right{position:absolute;top:100%;right:0;padding-right:var(--ui89-safe-space);transform:translateY(-50%);max-width:100%;}.ui89-card__horizontal-connection{margin:0 calc(var(--ui89-safe-space) * -1);background:var(--ui89-scene-card-bg-color);}.ui89-card__horizontal-connection--overflow{margin:0 calc(var(--ui89-safe-space) * -1 - 1px);}
+.ui89-card{background:var(--ui89-scene-card-bg-color);color:var(--ui89-scene-card-text-color);border-radius:var(--ui89-box-border-radius);position:relative;box-shadow:rgb(0 0 0 / 5%) 0px 1px 2px 0px;padding:calc(var(--ui89-safe-space)) calc(var(--ui89-safe-space) / 2);display:flex;flex-direction:column;}.ui89-card>*{flex:1;}.ui89-card__inside{border:1px solid white;padding:calc(var(--ui89-safe-space));}.ui89-card__top-left{position:absolute;bottom:100%;left:0;padding-left:var(--ui89-safe-space);padding-top:calc(var(--ui89-safe-space) * 2);transform:translateY(50%);max-width:100%;}.ui89-card__top-center{position:absolute;bottom:100%;left:50%;transform:translate(-50%,50%);padding:0 var(--ui89-safe-space);padding-top:calc(var(--ui89-safe-space) * 2);max-width:100%;box-sizing:border-box;}.ui89-card__top-right{position:absolute;bottom:100%;right:0;padding-right:var(--ui89-safe-space);padding-top:calc(var(--ui89-safe-space) * 2);transform:translateY(50%);max-width:100%;}.ui89-card__bottom-left{position:absolute;top:100%;left:0;padding-left:var(--ui89-safe-space);padding-bottom:calc(var(--ui89-safe-space) * 2);transform:translateY(-50%);max-width:100%;}.ui89-card__bottom-center{position:absolute;top:100%;left:50%;transform:translate(-50%,-50%);padding:0 var(--ui89-safe-space);padding-bottom:calc(var(--ui89-safe-space) * 2);max-width:100%;box-sizing:border-box;}.ui89-card__bottom-right{position:absolute;top:100%;right:0;padding-right:var(--ui89-safe-space);padding-bottom:calc(var(--ui89-safe-space) * 2);transform:translateY(-50%);max-width:100%;}.ui89-card__horizontal-connection{margin:0 calc(var(--ui89-safe-space) * -1);background:var(--ui89-scene-card-bg-color);}.ui89-card__horizontal-connection--overflow{margin:0 calc(var(--ui89-safe-space) * -1 - 1px);}
 .ui89-scene{background-color:var(--ui89-scene-bg-color);color:var(--ui89-scene-text-color);overflow:visible;}
 .ui-89-look-main{--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:rgba(255,255,255,0.2);--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);}.ui-89-look-side{--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:rgba(255,255,255,0.2);--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);}
 .ui89-scrollbar ::-webkit-scrollbar{background:var(--ui89-scene-bg-color);width:calc(var(--ui89-safe-space) * 2);}.ui89-scrollbar ::-webkit-scrollbar-track{background:var(--ui89-scene-bg-color);background:var(--ui89-palette-dark-gray);border:1px solid var(--ui89-palette-dark-gray);}.ui89-scrollbar ::-webkit-scrollbar-thumb{background:var(--ui89-palette-light-gray);border:1px solid transparent;}.ui89-scrollbar ::-webkit-scrollbar-thumb:vertical{border-top-color:var(--ui89-palette-dark-gray);border-bottom-color:var(--ui89-palette-dark-gray);}.ui89-scrollbar ::-webkit-scrollbar-thumb:horizontal{border-left-color:var(--ui89-palette-dark-gray);border-right-color:var(--ui89-palette-dark-gray);}.ui89-scrollbar ::-webkit-scrollbar-button:single-button{background-color:#bbbbbb;display:block;border-style:solid;height:calc(var(--ui89-safe-space) * 2);}.ui89-scrollbar ::-webkit-scrollbar-button:single-button:vertical:decrement{border-width:0 var(--ui89-safe-space) var(--ui89-safe-space) var(--ui89-safe-space);border-color:transparent transparent var(--ui89-palette-black) transparent;}.ui89-scrollbar ::-webkit-scrollbar-button:single-button:vertical:decrement:active{background:var(--ui89-palette-dark-gray);}.ui89-scrollbar ::-webkit-scrollbar-button:single-button:vertical:increment{border-width:var(--ui89-safe-space) var(--ui89-safe-space) 0 var(--ui89-safe-space);border-color:var(--ui89-palette-black) transparent transparent transparent;}.ui89-scrollbar ::-webkit-scrollbar-button:single-button:vertical:increment:active{background:var(--ui89-palette-dark-gray);}.ui89-scrollbar ::-webkit-scrollbar-button:single-button:horizontal:decrement{border-width:var(--ui89-safe-space) var(--ui89-safe-space) var(--ui89-safe-space) 0;border-color:transparent var(--ui89-palette-black) transparent transparent;}.ui89-scrollbar ::-webkit-scrollbar-button:single-button:horizontal:decrement:active{background:var(--ui89-palette-dark-gray);}.ui89-scrollbar ::-webkit-scrollbar-button:single-button:horizontal:increment{border-width:var(--ui89-safe-space) 0 var(--ui89-safe-space) var(--ui89-safe-space);border-color:transparent transparent transparent var(--ui89-palette-black);}.ui89-scrollbar ::-webkit-scrollbar-button:single-button:horizontal:increment:active{background:var(--ui89-palette-dark-gray);}
@@ -19,9 +19,14 @@
 .ui89-input-check-text{display:inline-block;cursor:pointer;user-select:none;}
 .ui89-input-file-upload{display:flex;gap:calc(var(--ui89-safe-space) * 1);align-items:center;word-break:initial;}.ui89-input-file-upload__info{min-width:0;}
 .ui89-input-select{position:relative;}.ui89-input-select__menu{overflow:auto;background:var(--ui89-input-bg-color);color:var(--ui89-input-text-color);display:flex;flex-direction:column;animation:ui89-input-select__appear var(--ui89-animation-speed);}@keyframes ui89-input-select__appear{from{transform:translateY(-5px);}to{transform:translateY(0%);}}.ui89-input-select__menu__item{display:inline-flex;flex-direction:column;justify-content:center;min-width:100%;height:100%;background:var(--ui89-input-bg-color);color:var(--ui89-input-text-color);padding:0 var(--ui89-safe-space);white-space:nowrap;user-select:none;box-sizing:border-box;}.ui89-input-select__menu__item:not(.ui89-input-select__menu__item--disabled){cursor:pointer;}.ui89-input-select__menu__item:not(.ui89-input-select__menu__item--disabled):hover,.ui89-input-select__menu__item.ui89-input-select__menu__item--selected{background:var(--ui89-input-text-color);color:var(--ui89-input-bg-color);}.ui89-input-select__menu__item--disabled{color:var(--ui89-palette-white);}
+.ui89-link-bracket{cursor:pointer;user-select:none;color:currentColor;}.ui89-link-bracket:hover{color:var(--ui89-scene-bg-color);background-color:var(--ui89-scene-text-color);}
 .ui89-link-stealth{color:currentColor;cursor:pointer;}.ui89-link-stealth:hover{color:currentColor;background:var(--ui89-scene-highlight-color);}
+.ui89-title-side-line{display:flex;align-items:center;gap:var(--ui89-safe-space);}.ui89-title-side-line__line{flex:1;overflow:hidden;}.ui89-title-side-line__inside{min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.ui89-title-bracket{display:flex;align-items:baseline;line-height:1;}.ui89-title-bracket__bracket{flex:0;background:var(--ui89-scene-card-bg-color);color:var(--ui89-scene-card-text-color);}.ui89-title-bracket__inside{padding:0 calc(var(--ui89-safe-space));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--ui89-scene-card-bg-color);color:var(--ui89-scene-card-text-color);}
+.ui89-title-space{display:flex;align-items:baseline;line-height:1;}.ui89-title-space__inside{padding:0 calc(var(--ui89-safe-space));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--ui89-scene-card-bg-color);color:var(--ui89-scene-card-text-color);}
 .ui89-link-underline{color:currentColor;text-decoration:underline;cursor:pointer;}.ui89-link-underline:hover{color:currentColor;}
 .ui89-menu-bar{display:flex;height:16px;color:var(--ui89-theme-primary-text-color);background:var(--ui89-theme-primary-bg-color);}.ui89-menu-bar__item{cursor:var(--ui89-cursor-pointer);padding:0 calc(var(--ui89-safe-space) * 2);}.ui89-menu-bar__item:hover,.ui89-menu-bar__item:active{color:var(--ui89-theme-primary-bg-color);background:var(--ui89-theme-primary-text-color);}
+.ui89-menu-card__list{}.ui89-menu-card__item{padding:0 calc(var(--ui89-safe-space));cursor:pointer;display:flex;justify-content:space-between;align-items:center;}.ui89-menu-card__item:hover:not(.ui89-menu-card__item--disabled){color:var(--ui89-scene-card-bg-color);background-color:var(--ui89-scene-card-text-color);}.ui89-menu-card__item--disabled{cursor:not-allowed;color:var(--ui89-scene-text-subtle-color);}.ui89-menu-card__separator{padding:0;}
 .ui89-grid-expand-trick{display:grid;}.ui89-grid-expand-trick>*{min-height:0;min-width:0;}
 .ui89-scroll-container{overflow:auto;}
 .ui89-modal-dialog{position:fixed;inset:0px;display:none;animation:ui89-modal-dialog__appear var(--ui89-animation-speed);}.ui89-modal-dialog--open{display:block;}.ui89-modal-dialog__backdrop{position:absolute;inset:0px;background-color:rgba(0,0,0,0.4);}.ui89-modal-dialog__box{border:none;border-radius:0;outline:none;margin:0 auto;padding:var(--ui89-safe-space);max-height:100%;min-height:0;bottom:auto;overflow:auto;display:flex;flex-direction:column;box-sizing:border-box;}.ui89-modal-dialog__spacer{flex:0 10 auto;height:10%;}.ui89-modal-dialog__content{display:flex;flex-direction:column;height:100%;}.ui89-modal-dialog__box>*:not(.ui89-modal-dialog__spacer){flex:1 0;min-height:0;}.ui89-modal-dialog__box--size-big{width:700px;}.ui89-modal-dialog__box--size-medium{width:500px;}.ui89-modal-dialog__box--size-small{width:300px;}.ui89-modal-dialog__box--size-full{width:100%;}.ui89-modal-dialog__box--size-responsive{width:fit-content;}@keyframes ui89-modal-dialog__appear{from{opacity:0;}to{opacity:1;}}

package/dist/esm/index.d.ts

@@ -2,6 +2,8 @@ import "./style/global.css";
 export { Ui89Theme, Ui89Look } from "./theme";
 export { Ui89Breadcrumbs } from "./components/Ui89Breadcrumbs";
 export type { Ui89BreadcrumbsProps, Ui89BreadcrumbsPropsItem, Ui89BreadcrumbsPropsOnSelect, } from "./components/Ui89Breadcrumbs";
+export { Ui89BoxShadow } from "./components/Ui89BoxShadow";
+export type { Ui89BoxShadowProps } from "./components/Ui89BoxShadow";
 export { Ui89Button } from "./components/Ui89Button";
 export type { Ui89ButtonProps, Ui89ButtonPropsSize, Ui89ButtonPropsType, } from "./components/Ui89Button";
 export { Ui89Card } from "./components/Ui89Card";
@@ -38,12 +40,22 @@ export { Ui89InputTextArea } from "./components/Ui89InputTextArea";
 export type { Ui89InputTextAreaProps } from "./components/Ui89InputTextArea";
 export { Ui89InputTextNumber } from "./components/Ui89InputTextNumber";
 export type { Ui89InputTextNumberProps } from "./components/Ui89InputTextNumber";
+export { Ui89LinkBracket } from "./components/Ui89LinkBracket";
+export type { Ui89LinkBracketProps } from "./components/Ui89LinkBracket";
 export { Ui89LinkStealth } from "./components/Ui89LinkStealth";
 export type { Ui89LinkStealthProps } from "./components/Ui89LinkStealth";
+export { Ui89TitleSideLine } from "./components/Ui89TitleSideLine";
+export type { Ui89TitleSideLineProps } from "./components/Ui89TitleSideLine";
+export { Ui89TitleBracket } from "./components/Ui89TitleBracket";
+export type { Ui89TitleBracketProps } from "./components/Ui89TitleBracket";
+export { Ui89TitleSpace } from "./components/Ui89TitleSpace";
+export type { Ui89TitleSpaceProps } from "./components/Ui89TitleSpace";
 export { Ui89LinkUnderline } from "./components/Ui89LinkUnderline";
 export type { Ui89LinkUnderlineProps } from "./components/Ui89LinkUnderline";
 export { Ui89MenuBar } from "./components/Ui89MenuBar";
 export type { Ui89MenuBarPropsItem, Ui89MenuBarProps, } from "./components/Ui89MenuBar";
+export { Ui89MenuCard } from "./components/Ui89MenuCard";
+export type { Ui89MenuCardPropsOption, Ui89MenuCardProps, } from "./components/Ui89MenuCard";
 export { Ui89ModalDialog } from "./components/Ui89ModalDialog";
 export type { Ui89ModalDialogProps } from "./components/Ui89ModalDialog";
 export { Ui89NameValuePair } from "./components/Ui89NameValuePair";
@@ -56,6 +68,8 @@ export { Ui89Scene } from "./components/Ui89Scene";
 export type { Ui89SceneProps } from "./components/Ui89Scene";
 export { Ui89Shortcut } from "./components/Ui89Shortcut";
 export type { Ui89ShortcutProps } from "./components/Ui89Shortcut";
+export { Ui89SpaceHorizontal } from "./components/Ui89SpaceHorizontal";
+export type { Ui89SpaceHorizontalProps } from "./components/Ui89SpaceHorizontal";
 export { Ui89SpacePadding } from "./components/Ui89SpacePadding";
 export type { Ui89SpacePaddingProps } from "./components/Ui89SpacePadding";
 export { Ui89SpaceVertical } from "./components/Ui89SpaceVertical";

package/dist/esm/index.js

@@ -99,10 +99,14 @@ function Ui89Breadcrumbs({ theme = Ui89Theme.primary, items, getLabel, getUrl, o
     })));
 }
 
-function HoverShadow({ children, }) {
-    return (React__default.createElement("span", { className: "ui89-hover-shadow" },
-        React__default.createElement("span", { className: "ui89-hover-shadow__bottom" }),
-        React__default.createElement("span", { className: "ui89-hover-shadow__right" }),
+function Ui89BoxShadow({ children, gap = 1, rowGap, columnGap, }) {
+    const style = {
+        "--ui89-box-shadow-row-gap": `calc(var(--ui89-safe-space) * ${rowGap ?? gap})`,
+        "--ui89-box-shadow-column-gap": `calc(var(--ui89-safe-space) * ${columnGap ?? gap})`,
+    };
+    return (React__default.createElement("span", { className: "ui89-box-shadow", style: style },
+        React__default.createElement("span", { className: "ui89-box-shadow__bottom" }),
+        React__default.createElement("span", { className: "ui89-box-shadow__right" }),
         children));
 }
 
@@ -184,7 +188,7 @@ function Ui89Button({ theme = Ui89Theme.primary, size = Ui89ButtonPropsSize.stan
         clicking ? "ui89-button__button--active" : undefined,
     ].join(" ");
     return (React__default.createElement("div", { className: containerClass },
-        React__default.createElement(HoverShadow, null, href ? (React__default.createElement("a", { className: "ui-89-reset-a", role: "button", href: href, onClick: onAnchorClick },
+        React__default.createElement(Ui89BoxShadow, null, href ? (React__default.createElement("a", { className: "ui-89-reset-a", role: "button", href: href, onClick: onAnchorClick },
             React__default.createElement("span", { className: buttonClass },
                 React__default.createElement("div", { className: "ui89-button__button__content" }, children)))) : (React__default.createElement("button", { className: "ui-89-reset-button", type: type || "button", onClick: onButtonClick, disabled: localDisabled },
             React__default.createElement("span", { className: buttonClass },
@@ -795,7 +799,7 @@ function Ui89DateTimePicker(props) {
     }
     return (React__default.createElement(Ui89Popover, { open: open, onOpenChange: setOpen, popoverOverflowMaxWidth: 360, renderContainer: ({ setRef, props: popoverProps }) => (React__default.createElement("div", { className: "ui89-date-time-picker", ref: setRef, ...popoverProps },
             React__default.createElement(Ui89InputText, { value: inputValue, onChange: handleInputChange, placeholder: dateFormat$1 }))), renderPopover: () => (React__default.createElement("div", { style: { maxWidth: "360px" } },
-            React__default.createElement(HoverShadow, null,
+            React__default.createElement(Ui89BoxShadow, null,
                 React__default.createElement(Ui89Card, null, renderCalendar())))) }));
 }
 
@@ -1278,10 +1282,38 @@ function Ui89InputTextArea(props) {
             ].join(" "), value: delayedState.value, onChange: (e) => delayedState.onChange(e.target.value), onBlur: delayedState.onBlur, onFocus: delayedState.onFocus, rows: props.rows ?? 4, placeholder: props.placeholder, disabled: props.disabled })));
 }
 
+function Ui89LinkBracket({ children, ...props }) {
+    return (React__default.createElement(Ui89LinkBase, { className: "ui89-link-bracket", ...props },
+        "[",
+        children,
+        "]"));
+}
+
 function Ui89LinkStealth(props) {
     return React__default.createElement(Ui89LinkBase, { className: "ui89-link-stealth", ...props });
 }
 
+const Ui89TitleSideLine = ({ children }) => {
+    return (React__default.createElement("div", { className: "ui89-title-side-line" },
+        React__default.createElement("div", { className: "ui89-title-side-line__line" },
+            React__default.createElement(Ui89Hr, null)),
+        React__default.createElement("div", { className: "ui89-title-side-line__inside" }, children),
+        React__default.createElement("div", { className: "ui89-title-side-line__line" },
+            React__default.createElement(Ui89Hr, null))));
+};
+
+const Ui89TitleBracket = ({ children }) => {
+    return (React__default.createElement("div", { className: "ui89-title-bracket" },
+        React__default.createElement("span", { className: "ui89-title-bracket__bracket" }, "["),
+        React__default.createElement("div", { className: "ui89-title-bracket__inside" }, children),
+        React__default.createElement("span", { className: "ui89-title-bracket__bracket" }, "]")));
+};
+
+const Ui89TitleSpace = ({ children }) => {
+    return (React__default.createElement("div", { className: "ui89-title-space" },
+        React__default.createElement("div", { className: "ui89-title-space__inside" }, children)));
+};
+
 function Ui89LinkUnderline(props) {
     return React__default.createElement(Ui89LinkBase, { className: "ui89-link-underline", ...props });
 }
@@ -1297,6 +1329,30 @@ function Ui89MenuBar({ items }) {
     })));
 }
 
+function Ui89SpaceVertical({ gap = 1 }) {
+    const style = {
+        paddingTop: `calc(var(--ui89-safe-space) * ${gap})`,
+    };
+    return React__default.createElement("div", { style: style });
+}
+
+const Ui89MenuCard = (props) => {
+    return (React__default.createElement(Ui89Card, null,
+        React__default.createElement(Ui89CardHorizontalConnection, null,
+            React__default.createElement("div", { className: "ui89-menu-card__list" }, props.options.map((option, index) => {
+                if (option.type === "separator") {
+                    return (React__default.createElement("div", { key: index, className: "ui89-menu-card__separator" },
+                        React__default.createElement(Ui89SpaceVertical, null),
+                        React__default.createElement(Ui89Hr, null),
+                        React__default.createElement(Ui89SpaceVertical, null)));
+                }
+                return (React__default.createElement(Ui89LinkStealth, { key: index, href: option.href, onClick: !option.disabled ? option.onClick : undefined },
+                    React__default.createElement("div", { className: `ui89-menu-card__item ${option.disabled ? "ui89-menu-card__item--disabled" : ""}` },
+                        React__default.createElement("span", null, option.label),
+                        option.oppositeLabel && React__default.createElement("span", null, option.oppositeLabel))));
+            })))));
+};
+
 function GridExpandTrick({ children, }) {
     return React__default.createElement("span", { className: "ui89-grid-expand-trick" }, children);
 }
@@ -1328,7 +1384,7 @@ function Ui89ModalDialog({ open, size, children, topCenter, onRequestClose, }) {
         React__default.createElement("div", { className: "ui89-modal-dialog__content" },
             React__default.createElement("div", { className: "ui89-modal-dialog__spacer" }),
             React__default.createElement("div", { className: dialogBoxClass },
-                React__default.createElement(HoverShadow, null,
+                React__default.createElement(Ui89BoxShadow, null,
                     React__default.createElement(GridExpandTrick, null,
                         React__default.createElement(Ui89Scene, null,
                             React__default.createElement(Ui89Card, { topCenter: topCenter },
@@ -1346,13 +1402,6 @@ function Ui89NameValuePair({ name, value, leftMaxWidth, }) {
 
 const SvgShortcut = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 100, height: 100, viewBox: "0 0 100 100", ...props }, /* @__PURE__ */ React.createElement("rect", { x: 0, y: 0, width: 100, height: 100, fill: "white" }), /* @__PURE__ */ React.createElement("line", { x1: 80, y1: 80, x2: 20, y2: 20, stroke: "black", strokeWidth: 15 }), /* @__PURE__ */ React.createElement("line", { x1: 20, y1: 20, x2: 50, y2: 20, stroke: "black", strokeWidth: 15, strokeLinecap: "round" }), /* @__PURE__ */ React.createElement("line", { x1: 20, y1: 20, x2: 20, y2: 50, stroke: "black", strokeWidth: 15, strokeLinecap: "round" }));
 
-function Ui89SpaceVertical({ gap = 1 }) {
-    const style = {
-        paddingTop: `calc(var(--ui89-safe-space) * ${gap})`,
-    };
-    return React__default.createElement("div", { style: style });
-}
-
 function Ui89Shortcut({ imageUrl, label, onClick = () => { }, }) {
     function onNativeClick() {
         onClick();
@@ -1366,6 +1415,13 @@ function Ui89Shortcut({ imageUrl, label, onClick = () => { }, }) {
         React__default.createElement("div", { className: `ui89-shortcut__label ui89-typo-small-bold`, onClick: onNativeClick }, label)));
 }
 
+function Ui89SpaceHorizontal({ gap = 1 }) {
+    const style = {
+        paddingRight: `calc(var(--ui89-safe-space) * ${gap})`,
+    };
+    return React__default.createElement("span", { style: style });
+}
+
 function Ui89Tabs({ selected, onChange = () => { }, options = [], stretch, }) {
     function handleOnChange(value) {
         onChange(value);
@@ -1524,5 +1580,5 @@ const Ui89VirtualTable = React__default.memo((props) => {
         React__default.createElement(Ui89TagBox, { theme: "warning" }, "Empty")))));
 });
 
-export { Ui89Breadcrumbs, Ui89Button, Ui89Card, Ui89CardHorizontalConnection, Ui89DateTimePicker, Ui89DigitalClock, Ui89HighlightText, Ui89Hr, Ui89Indent, Ui89InputCheckBox, Ui89InputCheckList, Ui89InputCheckText, Ui89InputFileUpload, Ui89InputNumber, Ui89InputPassword, Ui89InputSelect, Ui89InputText, Ui89InputTextArea, Ui89InputTextNumber, Ui89LinkStealth, Ui89LinkUnderline, Ui89Look, Ui89MenuBar, Ui89ModalDialog, Ui89NameValuePair, Ui89Popover, Ui89Provider, Ui89Scene, Ui89Shortcut, Ui89SpacePadding, Ui89SpaceVertical, Ui89TabbedCard, Ui89Tabs, Ui89TagBox, Ui89Theme, Ui89ThemeBackground, Ui89TitleBox, Ui89TitleUnderline, Ui89Toaster, Ui89VirtualList, Ui89VirtualTable, useUi89Toaster };
+export { Ui89BoxShadow, Ui89Breadcrumbs, Ui89Button, Ui89Card, Ui89CardHorizontalConnection, Ui89DateTimePicker, Ui89DigitalClock, Ui89HighlightText, Ui89Hr, Ui89Indent, Ui89InputCheckBox, Ui89InputCheckList, Ui89InputCheckText, Ui89InputFileUpload, Ui89InputNumber, Ui89InputPassword, Ui89InputSelect, Ui89InputText, Ui89InputTextArea, Ui89InputTextNumber, Ui89LinkBracket, Ui89LinkStealth, Ui89LinkUnderline, Ui89Look, Ui89MenuBar, Ui89MenuCard, Ui89ModalDialog, Ui89NameValuePair, Ui89Popover, Ui89Provider, Ui89Scene, Ui89Shortcut, Ui89SpaceHorizontal, Ui89SpacePadding, Ui89SpaceVertical, Ui89TabbedCard, Ui89Tabs, Ui89TagBox, Ui89Theme, Ui89ThemeBackground, Ui89TitleBox, Ui89TitleBracket, Ui89TitleSideLine, Ui89TitleSpace, Ui89TitleUnderline, Ui89Toaster, Ui89VirtualList, Ui89VirtualTable, useUi89Toaster };
 //# sourceMappingURL=index.js.map