@uxf/ui 10.0.0-beta.62 → 10.0.0-beta.67

package/alert-bubble/alert-bubble.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AlertBubbleColor, AlertBubbleSize } from "./theme";
+export interface AlertBubbleProps {
+    className?: string;
+    color?: AlertBubbleColor;
+    size?: AlertBubbleSize;
+}
+export declare const AlertBubble: FC<AlertBubbleProps>;

package/alert-bubble/alert-bubble.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertBubble = void 0;
+const react_1 = __importDefault(require("react"));
+const icon_1 = require("../icon");
+const cx_1 = require("@uxf/core/utils/cx");
+const ICON = {
+    default: "triangle-exclamation",
+    error: "xmark",
+    warning: "triangle-exclamation",
+    success: "check",
+};
+const AlertBubble = (props) => {
+    var _a, _b, _c;
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-alert-bubble", `uxf-alert-bubble--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-alert-bubble--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, props.className) },
+        react_1.default.createElement(icon_1.Icon, { className: "uxf-alert-bubble__icon", name: ICON[(_c = props.color) !== null && _c !== void 0 ? _c : "default"] })));
+};
+exports.AlertBubble = AlertBubble;
+exports.AlertBubble.displayName = "UxfUiAlertBubble";

package/alert-bubble/alert-bubble.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/alert-bubble/alert-bubble.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const snap_test_1 = require("../utils/snap-test");
+const alert_bubble_stories_1 = require("./alert-bubble.stories");
+const react_1 = __importDefault(require("react"));
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(alert_bubble_stories_1.Default, null));

package/alert-bubble/alert-bubble.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<import("./alert-bubble").AlertBubbleProps>;
+};
+export default _default;
+export declare function Default(): React.JSX.Element;

package/alert-bubble/alert-bubble.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importStar(require("react"));
+const storybook_config_1 = require("../utils/storybook-config");
+const alert_bubble_1 = require("./alert-bubble");
+exports.default = {
+    title: "UI/AlertBubble",
+    component: alert_bubble_1.AlertBubble,
+};
+function Default() {
+    const config = (0, storybook_config_1.useStorybookConfig)("AlertBubble");
+    const storyAlertBubbles = config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}`, className: "space-y-2 pb-4" },
+        react_1.default.createElement("div", { className: "text-sm dark:text-gray-100" },
+            "Color: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, color),
+            ", Size:",
+            " ",
+            react_1.default.createElement("span", { className: "font-semibold" }, size)),
+        react_1.default.createElement("div", { className: "flex flex-row items-start gap-2" },
+            react_1.default.createElement(alert_bubble_1.AlertBubble, { color: color, size: size })),
+        react_1.default.createElement("hr", null)))))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyAlertBubbles),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyAlertBubbles)));
+}
+exports.Default = Default;

package/alert-bubble/index.d.ts

@@ -0,0 +1,3 @@
+export type { AlertBubbleProps } from "./alert-bubble";
+export type { AlertBubbleColor, AlertBubbleSize } from "./theme";
+export { AlertBubble } from "./alert-bubble";

package/alert-bubble/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertBubble = void 0;
+var alert_bubble_1 = require("./alert-bubble");
+Object.defineProperty(exports, "AlertBubble", { enumerable: true, get: function () { return alert_bubble_1.AlertBubble; } });

package/alert-bubble/theme.d.ts

@@ -0,0 +1,16 @@
+export interface AlertBubbleColors {
+    default: true;
+    success: true;
+    error: true;
+    warning: true;
+}
+export type AlertBubbleColor = keyof AlertBubbleColors;
+export interface AlertBubbleSizes {
+    xs: true;
+    sm: true;
+    default: true;
+    lg: true;
+    xl: true;
+    "2xl": true;
+}
+export type AlertBubbleSize = keyof AlertBubbleSizes;

package/alert-bubble/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/button/theme.d.ts

@@ -17,5 +17,6 @@ export interface ButtonColors {
     default: true;
     success: true;
     error: true;
+    warning: true;
 }
 export type ButtonColor = keyof ButtonColors;

package/config/icons-config.d.ts

@@ -1,2 +1,2 @@
-export declare const ICONS_VERSION = "1685632683041";
+export declare const ICONS_VERSION = "1687765245583";
 export declare const ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons-config.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ICON_SPRITE = exports.ICONS_VERSION = void 0;
-exports.ICONS_VERSION = "1685632683041";
+exports.ICONS_VERSION = "1687765245583";
 exports.ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons.d.ts

@@ -75,14 +75,22 @@ export declare const ICONS: {
         readonly w: 384;
         readonly h: 512;
     };
-    readonly videoFile: {
-        readonly w: 384;
+    readonly "triangle-exclamation": {
+        readonly w: 512;
         readonly h: 512;
     };
     readonly user: {
         readonly w: 448;
         readonly h: 512;
     };
+    readonly videoFile: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly xmark: {
+        readonly w: 384;
+        readonly h: 512;
+    };
     readonly xmarkLarge: {
         readonly w: 448;
         readonly h: 512;
@@ -110,8 +118,10 @@ declare module "@uxf/ui/icon/theme" {
         "ellipsis-vertical": true;
         "file": true;
         "imageFile": true;
-        "videoFile": true;
+        "triangle-exclamation": true;
         "user": true;
+        "videoFile": true;
+        "xmark": true;
         "xmarkLarge": true;
     }
 }

package/config/icons.js

@@ -22,7 +22,9 @@ exports.ICONS = {
     "ellipsis-vertical": { w: 128, h: 512 },
     "file": { w: 384, h: 512 },
     "imageFile": { w: 384, h: 512 },
-    "videoFile": { w: 384, h: 512 },
+    "triangle-exclamation": { w: 512, h: 512 },
     "user": { w: 448, h: 512 },
+    "videoFile": { w: 384, h: 512 },
+    "xmark": { w: 384, h: 512 },
     "xmarkLarge": { w: 448, h: 512 },
 };

package/css/alert-bubble.css

@@ -0,0 +1,100 @@
+.uxf-alert-bubble {
+    --bg-color: unset;
+    --icon-color: unset;
+    --icon-size: unset;
+    --size: unset;
+
+    align-items: center;
+    background-color: var(--bg-color);
+    border-radius: 999px;
+    display: flex;
+    flex-shrink: 0;
+    height: var(--size);
+    justify-content: center;
+    width: var(--size);
+
+    &__icon {
+        color: var(--icon-color);
+        flex-shrink: 0;
+        height: var(--icon-size);
+        width: var(--icon-size);
+    }
+
+    &--color-default {
+        :root .light & {
+            --bg-color: theme("backgroundColor.primary.100");
+            --icon-color: theme("colors.primary.600");
+        }
+
+        :root .dark & {
+            --bg-color: theme("backgroundColor.primary.600");
+            --icon-color: theme("colors.primary.100");
+        }
+    }
+
+    &--color-warning {
+        :root .light & {
+            --bg-color: theme("backgroundColor.warning.100");
+            --icon-color: theme("colors.warning.600");
+        }
+
+        :root .dark & {
+            --bg-color: theme("backgroundColor.warning.600");
+            --icon-color: theme("colors.warning.100");
+        }
+    }
+
+    &--color-success {
+        :root .light & {
+            --bg-color: theme("backgroundColor.success.100");
+            --icon-color: theme("colors.success.600");
+        }
+
+        :root .dark & {
+            --bg-color: theme("backgroundColor.success.600");
+            --icon-color: theme("colors.success.100");
+        }
+    }
+
+    &--color-error {
+        :root .light & {
+            --bg-color: theme("backgroundColor.error.100");
+            --icon-color: theme("colors.error.600");
+        }
+
+        :root .dark & {
+            --bg-color: theme("backgroundColor.error.600");
+            --icon-color: theme("colors.error.100");
+        }
+    }
+
+    &--size-xs {
+        --size: theme("alertBubbleSize.xs");
+        --icon-size: 20px;
+    }
+
+    &--size-sm {
+        --size: theme("alertBubbleSize.sm");
+        --icon-size: 24px;
+    }
+
+    &--size-default {
+        --size: theme("alertBubbleSize.default");
+        --icon-size: 24px;
+    }
+
+    &--size-lg {
+        --size: theme("alertBubbleSize.lg");
+        --icon-size: 30px;
+    }
+
+    &--size-xl {
+        --size: theme("alertBubbleSize.xl");
+        --icon-size: 30px;
+    }
+
+    &--size-2xl {
+        --size: theme("alertBubbleSize.2xl");
+        --icon-size: 40px;
+    }
+}

package/css/button.css

@@ -166,6 +166,18 @@
             }
         }
 
+        &.uxf-button--color-warning {
+            @apply focus-visible:ring-warning;
+
+            :root .light & {
+                @apply border-warning text-warning is-hoverable:border-warning-700 is-hoverable:text-warning-700;
+            }
+
+            :root .dark & {
+                @apply border-warning text-warning is-hoverable:border-warning-300 is-hoverable:text-warning-300;
+            }
+        }
+
         &.uxf-button--color-error {
             @apply focus-visible:ring-error;
 
@@ -261,6 +273,28 @@
                 }
             }
         }
+
+        &.uxf-button--color-warning {
+            @apply focus-visible:ring-warning;
+
+            :root .light & {
+                @apply bg-warning is-hoverable:bg-warning-700;
+            }
+
+            :root .dark & {
+                @apply bg-warning is-hoverable:bg-warning-400;
+            }
+
+            &.is-disabled {
+                :root .light & {
+                    @apply bg-gray-300 text-lightLow;
+                }
+
+                :root .dark & {
+                    @apply bg-gray-600 text-gray-400;
+                }
+            }
+        }
     }
 
     &--variant-white {
@@ -322,6 +356,18 @@
             }
         }
 
+        &.uxf-button--color-warning {
+            @apply text-warning;
+
+            :root .light & {
+                @apply is-hoverable:text-warning-700;
+            }
+
+            :root .dark & {
+                @apply is-hoverable:text-warning-300;
+            }
+        }
+
         &.is-disabled {
             :root .light & {
                 @apply text-lightLow;

package/css/dialog.css

@@ -0,0 +1,55 @@
+.uxf-dialog {
+    --panel-max-w: unset;
+    --panel-border-radius: theme("borderRadius.2xl");
+
+    position: relative;
+    z-index: theme("zIndex.modal");
+
+    &__backdrop {
+        background-color: rgb(0 0 0 / 75%);
+        inset: 0;
+        position: fixed;
+    }
+
+    &__wrapper {
+        inset: 0;
+        overflow-y: auto;
+        position: fixed;
+    }
+
+    &__body {
+        align-items: flex-end;
+        display: flex;
+        justify-content: center;
+        min-height: 100%;
+        padding-top: theme("spacing.8");
+
+        @screen sm {
+            align-items: center;
+            padding: theme("spacing.4");
+        }
+    }
+
+    &__panel {
+        border-top-left-radius: var(--panel-border-radius);
+        border-top-right-radius: var(--panel-border-radius);
+        max-width: var(--panel-max-w);
+        overflow: hidden;
+        position: relative;
+        width: 100%;
+
+        :root .light & {
+            background-color: theme("colors.white");
+            color: theme("colors.black");
+        }
+
+        :root .dark & {
+            background-color: theme("colors.gray.900");
+            color: theme("colors.white");
+        }
+
+        @screen sm {
+            border-radius: var(--panel-border-radius);
+        }
+    }
+}

package/css/message.css

@@ -0,0 +1,91 @@
+.uxf-message {
+    --color: unset;
+
+    &__title {
+        @apply uxf-typo-h6;
+
+        :root .dark & {
+            color: theme("colors.white");
+        }
+    }
+
+    &__description {
+        @apply uxf-typo-body2;
+
+        margin-top: theme("spacing.2");
+
+        :root .light & {
+            color: theme("colors.lightMedium");
+        }
+
+        :root .dark & {
+            color: theme("colors.white");
+        }
+    }
+
+    &--variant-centered {
+        --panel-max-w: 360px;
+
+        .uxf-message__content-wrapper {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+            padding: theme("spacing.6");
+        }
+
+        .uxf-message__icon-wrapper {
+            margin-bottom: theme("spacing.6");
+        }
+
+        .uxf-message__text-content {
+            text-align: center;
+            width: 100%;
+        }
+
+        .uxf-message__buttons-wrapper {
+            @apply space-x-2;
+
+            align-items: center;
+            display: flex;
+            padding: 0 theme("spacing.6") theme("spacing.6");
+        }
+    }
+
+    &--variant-simple {
+        --panel-max-w: 320px;
+
+        .uxf-message__content-wrapper {
+            display: flex;
+            justify-content: flex-start;
+            justify-items: center;
+            padding: theme("spacing.4");
+        }
+
+        .uxf-message__icon-wrapper {
+            margin-right: theme("spacing.3");
+        }
+
+        .uxf-message__text-content {
+            flex-grow: 1;
+            padding-top: theme("spacing.1");
+            text-align: left;
+        }
+
+        .uxf-message__buttons-wrapper {
+            @apply space-x-2;
+
+            align-items: center;
+            display: flex;
+            justify-content: flex-end;
+            padding: theme("spacing.3") theme("spacing.4");
+
+            :root .light & {
+                background: theme("backgroundColor.gray.50");
+            }
+
+            :root .dark & {
+                background: theme("backgroundColor.lightHigh");
+            }
+        }
+    }
+}

package/css/modal.css

@@ -1,65 +1,21 @@
 .uxf-modal {
-    position: relative;
-    z-index: theme("zIndex.modal");
-
-    &__backdrop {
-        @apply inset-0;
-
-        background-color: rgb(0 0 0 / 75%);
-        position: fixed;
-    }
-
-    &__wrapper {
-        @apply inset-0;
-
-        overflow-y: auto;
-        position: fixed;
+    &--width-xs {
+        --panel-max-w: theme("maxWidth.xs");
     }
 
-    &__body {
-        align-items: flex-end;
-        display: flex;
-        justify-content: center;
-        min-height: 100%;
-        padding-top: theme("spacing.8");
-
-        @screen sm {
-            align-items: center;
-            padding: theme("spacing.4");
-        }
-    }
-
-    &__panel {
-        border-top-left-radius: theme("borderRadius.2xl");
-        border-top-right-radius: theme("borderRadius.2xl");
-        overflow: hidden;
-        position: relative;
-        width: 100%;
-
-        :root .light & {
-            background-color: theme("colors.white");
-            color: theme("colors.black");
-        }
-
-        :root .dark & {
-            background-color: theme("colors.gray.900");
-            color: theme("colors.white");
-        }
-
-        @screen sm {
-            border-radius: theme("borderRadius.2xl");
-        }
+    &--width-sm {
+        --panel-max-w: theme("maxWidth.sm");
     }
 
-    &--width-sm .uxf-modal__panel {
-        max-width: theme("maxWidth.sm");
+    &--width-default {
+        --panel-max-w: theme("maxWidth.lg");
     }
 
-    &--width-default .uxf-modal__panel {
-        max-width: theme("maxWidth.lg");
+    &--width-lg {
+        --panel-max-w: theme("maxWidth.3xl");
     }
 
-    &--width-lg .uxf-modal__panel {
-        max-width: theme("maxWidth.3xl");
+    &--width-xl {
+        --panel-max-w: theme("maxWidth.5xl");
     }
 }

package/dialog/dialog.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+export interface DialogProps {
+    children: ReactNode;
+    className?: string;
+    disableBackdropClose?: boolean;
+    onClose: () => void;
+    open: boolean;
+}
+export declare const Dialog: React.NamedExoticComponent<DialogProps>;

package/{modal/modal-dialog.js → dialog/dialog.js}

@@ -23,16 +23,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalDialog = void 0;
+exports.Dialog = void 0;
 const react_1 = require("@headlessui/react");
-const cx_1 = require("@uxf/core/utils/cx");
 const react_2 = __importStar(require("react"));
-exports.ModalDialog = (0, react_2.memo)((props) => {
+exports.Dialog = (0, react_2.memo)((props) => {
     var _a;
-    return (react_2.default.createElement(react_1.Dialog, { className: (0, cx_1.cx)("uxf-modal", "uxf-modal--width-" + ((_a = props.width) !== null && _a !== void 0 ? _a : "default"), props.className), open: props.open, onClose: props.disableBackdropClose ? () => null : props.onClose },
-        react_2.default.createElement(react_1.Dialog.Overlay, { className: "uxf-modal__backdrop" }),
-        react_2.default.createElement("div", { className: "uxf-modal__wrapper" },
-            react_2.default.createElement("div", { className: "uxf-modal__body" },
-                react_2.default.createElement(react_1.Dialog.Panel, { className: "uxf-modal__panel" }, props.children)))));
+    return (react_2.default.createElement(react_1.Dialog, { className: `uxf-dialog ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, open: props.open, onClose: props.disableBackdropClose ? () => null : props.onClose },
+        react_2.default.createElement(react_1.Dialog.Overlay, { className: "uxf-dialog__backdrop" }),
+        react_2.default.createElement("div", { className: "uxf-dialog__wrapper" },
+            react_2.default.createElement("div", { className: "uxf-dialog__body" },
+                react_2.default.createElement(react_1.Dialog.Panel, { className: "uxf-dialog__panel" }, props.children)))));
 });
-exports.ModalDialog.displayName = "UxfUiModalDialog";
+exports.Dialog.displayName = "UxfUiDialog";

package/dialog/dialog.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dialog/dialog.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const dialog_stories_1 = require("./dialog.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(dialog_stories_1.Default, null));

package/dialog/dialog.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.NamedExoticComponent<import("./dialog").DialogProps>;
+};
+export default _default;
+export declare function Default(): React.JSX.Element;