@uxf/ui 10.0.0-beta.9 → 10.0.1

package/tw-tokens/tw-line-height.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.twLineHeight = void 0;
 exports.twLineHeight = {
-    3: ".75rem",
-    4: "1rem",
-    5: "1.25rem",
-    6: "1.5rem",
-    7: "1.75rem",
-    8: "2rem",
-    9: "2.25rem",
-    10: "2.5rem",
+    "3": ".75rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "7": "1.75rem",
+    "8": "2rem",
+    "9": "2.25rem",
+    "10": "2.5rem",
     none: "1",
     tight: "1.25",
     snug: "1.375",

package/tw-tokens/tw-spacing.d.ts

@@ -1,39 +1,39 @@
 export declare const twSpacing: {
-    0: string;
-    1: string;
-    2: string;
-    3: string;
-    4: string;
-    5: string;
-    6: string;
-    7: string;
-    8: string;
-    9: string;
-    10: string;
-    11: string;
-    12: string;
-    14: string;
-    16: string;
-    20: string;
-    24: string;
-    28: string;
-    32: string;
-    36: string;
-    40: string;
-    44: string;
-    48: string;
-    52: string;
-    56: string;
-    60: string;
-    64: string;
-    72: string;
-    80: string;
-    96: string;
+    "0": string;
+    "1": string;
+    "2": string;
+    "3": string;
+    "4": string;
+    "5": string;
+    "6": string;
+    "7": string;
+    "8": string;
+    "9": string;
+    "10": string;
+    "11": string;
+    "12": string;
+    "14": string;
+    "16": string;
+    "20": string;
+    "24": string;
+    "28": string;
+    "32": string;
+    "36": string;
+    "40": string;
+    "44": string;
+    "48": string;
+    "52": string;
+    "56": string;
+    "60": string;
+    "64": string;
+    "72": string;
+    "80": string;
+    "96": string;
     px: string;
-    0.5: string;
-    1.5: string;
-    2.5: string;
-    3.5: string;
+    "0.5": string;
+    "1.5": string;
+    "2.5": string;
+    "3.5": string;
     inherit: string;
 };
 export type TwSpacing = typeof twSpacing;

package/tw-tokens/tw-spacing.js

@@ -3,40 +3,40 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.twSpacing = void 0;
 exports.twSpacing = {
-    0: "0px",
-    1: "0.25rem",
-    2: "0.5rem",
-    3: "0.75rem",
-    4: "1rem",
-    5: "1.25rem",
-    6: "1.5rem",
-    7: "1.75rem",
-    8: "2rem",
-    9: "2.25rem",
-    10: "2.5rem",
-    11: "2.75rem",
-    12: "3rem",
-    14: "3.5rem",
-    16: "4rem",
-    20: "5rem",
-    24: "6rem",
-    28: "7rem",
-    32: "8rem",
-    36: "9rem",
-    40: "10rem",
-    44: "11rem",
-    48: "12rem",
-    52: "13rem",
-    56: "14rem",
-    60: "15rem",
-    64: "16rem",
-    72: "18rem",
-    80: "20rem",
-    96: "24rem",
+    "0": "0px",
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "7": "1.75rem",
+    "8": "2rem",
+    "9": "2.25rem",
+    "10": "2.5rem",
+    "11": "2.75rem",
+    "12": "3rem",
+    "14": "3.5rem",
+    "16": "4rem",
+    "20": "5rem",
+    "24": "6rem",
+    "28": "7rem",
+    "32": "8rem",
+    "36": "9rem",
+    "40": "10rem",
+    "44": "11rem",
+    "48": "12rem",
+    "52": "13rem",
+    "56": "14rem",
+    "60": "15rem",
+    "64": "16rem",
+    "72": "18rem",
+    "80": "20rem",
+    "96": "24rem",
     px: "1px",
-    0.5: "0.125rem",
-    1.5: "0.375rem",
-    2.5: "0.625rem",
-    3.5: "0.875rem",
+    "0.5": "0.125rem",
+    "1.5": "0.375rem",
+    "2.5": "0.625rem",
+    "3.5": "0.875rem",
     inherit: "inherit",
 };

package/tw-tokens/tw-z-index.d.ts

@@ -1,11 +1,11 @@
 export declare const twZIndex: {
-    0: string;
-    1: string;
-    10: string;
-    20: string;
-    30: string;
-    40: string;
-    50: string;
+    "0": string;
+    "1": string;
+    "10": string;
+    "20": string;
+    "30": string;
+    "40": string;
+    "50": string;
     auto: string;
     focus: string;
     fixed: string;

package/tw-tokens/tw-z-index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.twZIndex = void 0;
 exports.twZIndex = {
-    0: "0",
-    1: "1",
-    10: "10",
-    20: "20",
-    30: "30",
-    40: "40",
-    50: "50",
+    "0": "0",
+    "1": "1",
+    "10": "10",
+    "20": "20",
+    "30": "30",
+    "40": "40",
+    "50": "50",
     auto: "auto",
     focus: "5",
     fixed: "10",

package/types/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./color";
-export * from "./form-control-props";
 export * from "./file-response";
+export * from "./form-control-props";

package/types/index.js

@@ -15,5 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./color"), exports);
-__exportStar(require("./form-control-props"), exports);
 __exportStar(require("./file-response"), exports);
+__exportStar(require("./form-control-props"), exports);

package/typography/README.md

@@ -0,0 +1,7 @@
+# Typography
+
+## CSS Dependencies
+
+```css
+@import url("@uxf/ui/typography/typography.css");
+```

package/utils/action.d.ts

@@ -1,2 +1,3 @@
-import { HandlerFunction } from "@storybook/addon-actions";
+type HandlerFunction = (...args: any[]) => void;
 export declare function action(name: string, handler: HandlerFunction): HandlerFunction;
+export {};

package/utils/action.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.action = void 0;
-const addon_actions_1 = require("@storybook/addon-actions");
 function action(name, handler) {
     return function (...args) {
-        (0, addon_actions_1.action)(name)(...args);
+        // eslint-disable-next-line no-console
+        console.log(name, ...args);
         handler(...args);
     };
 }

package/utils/files/get-file-icon.d.ts

@@ -0,0 +1,2 @@
+import { IconName } from "../../icon/types";
+export declare function getIconNameFromFileExtension(extension: string): IconName;

package/utils/files/get-file-icon.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIconNameFromFileExtension = void 0;
+function getIconNameFromFileExtension(extension) {
+    switch (extension) {
+        case "jpg":
+        case "jpeg":
+        case "png":
+        case "gif":
+            return "imageFile";
+        case "mp4":
+        case "avi":
+        case "mov":
+            return "videoFile";
+        default:
+            return "file";
+    }
+}
+exports.getIconNameFromFileExtension = getIconNameFromFileExtension;

package/utils/icons-config.js

@@ -95,16 +95,26 @@ module.exports = {
         height: 512,
         data: `<path d="m365.3 93.38-74.63-74.64C278.6 6.742 262.3 0 245.4 0H64C28.65 0 0 28.65 0 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6c0-16.9-6.7-33.2-18.7-45.22zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160V128c0 17.67 14.33 32 32 32h79.1v288zM215.3 292c-4.68 0-9.051 2.34-11.65 6.234L164 357.8l-11.68-17.53c-2.62-3.97-7.02-6.27-11.62-6.27-4.682 0-9.053 2.34-11.65 6.234l-46.67 70c-2.865 4.297-3.131 9.82-.6953 14.37C84.09 429.2 88.84 432 93.1 432h196c5.163 0 9.907-2.844 12.34-7.395 2.436-4.551 2.17-10.07-.6953-14.37l-74.67-112C224.4 294.3 220 292 215.3 292zm-87.3-4c17.67 0 32-14.33 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z" fill="currentColor" />`,
     },
-    videoFile: {
-        width: 384,
+    "triangle-exclamation": {
+        width: 512,
         height: 512,
-        data: `<path d="m365.3 93.38-74.63-74.64C278.6 6.742 262.3 0 245.4 0H64C28.65 0 0 28.65 0 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6c0-16.9-6.7-33.2-18.7-45.22zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160V128c0 17.67 14.33 32 32 32h79.1v288zm-96-160c0-17.67-14.33-32-32-32h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-16.52l43.84 30.2c8.46 5.82 20.16-.08 20.16-10.28V284.6c0-10.16-11.64-16.16-20.16-10.32L240 304.5V288z" fill="currentColor" />`,
+        data: `<path fill="currentColor" d="M248.4 84.3c1.6-2.7 4.5-4.3 7.6-4.3s6 1.6 7.6 4.3L461.9 410c1.4 2.3 2.1 4.9 2.1 7.5c0 8-6.5 14.5-14.5 14.5H62.5c-8 0-14.5-6.5-14.5-14.5c0-2.7 .7-5.3 2.1-7.5L248.4 84.3zm-41-25L9.1 385c-6 9.8-9.1 21-9.1 32.5C0 452 28 480 62.5 480h387c34.5 0 62.5-28 62.5-62.5c0-11.5-3.2-22.7-9.1-32.5L304.6 59.3C294.3 42.4 275.9 32 256 32s-38.3 10.4-48.6 27.3zM288 368a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-8-184c0-13.3-10.7-24-24-24s-24 10.7-24 24v96c0 13.3 10.7 24 24 24s24-10.7 24-24V184z"/>`,
     },
     user: {
         width: 448,
         height: 512,
         data: `<path d="M272 304h-96C78.8 304 0 382.8 0 480a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32c0-97.2-78.8-176-176-176zM48.99 464c7.9-63.1 61.81-112 127.01-112h96c65.16 0 119.1 48.95 127 112H48.99zM224 256c70.69 0 128-57.31 128-128S294.69 0 224 0 96 57.31 96 128c0 70.7 57.3 128 128 128zm0-208c44.11 0 80 35.89 80 80s-35.89 80-80 80-80-35.9-80-80c0-44.11 35.9-80 80-80z" fill="currentColor"/>`,
     },
+    videoFile: {
+        width: 384,
+        height: 512,
+        data: `<path d="m365.3 93.38-74.63-74.64C278.6 6.742 262.3 0 245.4 0H64C28.65 0 0 28.65 0 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6c0-16.9-6.7-33.2-18.7-45.22zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160V128c0 17.67 14.33 32 32 32h79.1v288zm-96-160c0-17.67-14.33-32-32-32h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-16.52l43.84 30.2c8.46 5.82 20.16-.08 20.16-10.28V284.6c0-10.16-11.64-16.16-20.16-10.32L240 304.5V288z" fill="currentColor" />`,
+    },
+    xmark: {
+        width: 384,
+        height: 512,
+        data: `<path fill="currentColor" d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"/>`,
+    },
     xmarkLarge: {
         width: 448,
         height: 512,

package/utils/mocks/{uploadFIle.mock.js → upload-file.mock.js}

@@ -13,7 +13,7 @@ function getRandomUuid() {
 function uploadFile(file, uploadOptions) {
     // axios.put("/api/upload", file, { signal: uploadOptions?.abortController?.signal, onUploadProgress: uploadOptions?.onUploadProgress });
     return new Promise((resolve) => {
-        const time = file.size / 10;
+        const time = file.size / 100;
         const interval = time / 10;
         let loaded = 0;
         const intervalTimer = window.setInterval(() => {

package/utils/snap-test.js

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.snapTest = void 0;
+const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importDefault(require("react"));
 const react_test_renderer_1 = require("react-test-renderer");
 const get_provider_config_1 = require("../_private-utils/get-provider-config");
 const context_1 = require("../context");
-const dayjs_1 = __importDefault(require("dayjs"));
 const snapTest = (name, component) => {
     beforeAll(() => {
         jest.useFakeTimers();

package/utils/storybook-config.d.ts

@@ -1,13 +1,23 @@
-import React, { ReactNode } from "react";
 import { ButtonColor, ButtonSize, ButtonVariant } from "@uxf/ui/button";
+import React, { ReactNode } from "react";
+import { AlertBubbleColor, AlertBubbleSize } from "../alert-bubble";
 import { ChipColor } from "../chip";
 import { InputGroupSizes } from "../input/theme";
+import { MessageColor, MessageVariant } from "../message/theme";
 export declare const defaultConfig: StorybookConfig;
 export interface StorybookConfig {
+    AlertBubble: {
+        colors: AlertBubbleColor[];
+        sizes: AlertBubbleSize[];
+    };
     Button: {
+        colors: ButtonColor[];
         sizes: ButtonSize[];
         variants: ButtonVariant[];
-        colors: ButtonColor[];
+    };
+    Confirm: {
+        colors: MessageColor[];
+        sizes: MessageVariant[];
     };
     Chip: {
         colors: ChipColor[];

package/utils/storybook-config.js

@@ -26,11 +26,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StorybookContextProvider = exports.useStorybookConfig = exports.defaultConfig = void 0;
 const react_1 = __importStar(require("react"));
 exports.defaultConfig = {
+    AlertBubble: {
+        sizes: ["xs", "sm", "default", "lg", "xl", "2xl"],
+        colors: ["default", "success", "error", "warning"],
+    },
     Button: {
         sizes: ["xs", "sm", "default", "lg", "xl"],
-        colors: ["default", "success", "error"],
+        colors: ["default", "success", "error", "warning"],
         variants: ["default", "outlined", "white", "text"],
     },
+    Confirm: {
+        colors: ["default", "success", "error", "warning"],
+        sizes: ["simple", "centered"],
+    },
     Chip: {
         colors: ["primary", "orange", "red", "yellow", "pink", "purple", "indigo", "green", "blue", "default"],
     },

package/utils/tailwind-config.js

@@ -1,5 +1,5 @@
 const tailwindThemeDefaults = require("./tailwind-theme-defaults");
-const { colors, fontFamily } = require("tailwindcss/defaultTheme");
+const { fontFamily } = require("tailwindcss/defaultTheme");
 const { rem } = require("@uxf/styles/units/rem");
 
 /** @type {import('tailwindcss').Config} */
@@ -9,6 +9,14 @@ module.exports = {
     theme: {
         containers: tailwindThemeDefaults.containers,
         screens: tailwindThemeDefaults.screens,
+        alertBubbleSize: {
+            xs: "32px",
+            sm: "40px",
+            default: "48px",
+            lg: "56px",
+            xl: "64px",
+            "2xl": "80px",
+        },
         inputSize: {
             xs: "30px",
             sm: "34px",
@@ -87,6 +95,7 @@ module.exports = {
                     800: "#991b1b",
                     900: "#7f1d1d",
                 },
+                test: "#ff00ff",
             },
             fontFamily: {
                 sans: ["var(--font-inter)", ...fontFamily.sans],

package/image-gallery/components/arrow-button.d.ts

@@ -1,7 +0,0 @@
-import { FC } from "react";
-interface NextButtonProps {
-    onClick: () => void;
-    type: "prev" | "next";
-}
-export declare const ArrowButton: FC<NextButtonProps>;
-export {};

package/image-gallery/components/arrow-button.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrowButton = void 0;
-const react_1 = __importDefault(require("react"));
-const icon_1 = require("../../icon");
-const ArrowButton = (props) => {
-    return (react_1.default.createElement("button", { className: `uxf-image-gallery__button ${props.type === "prev" ? "uxf-image-gallery__button--prev" : "uxf-image-gallery__button--next"}`, onClick: props.onClick },
-        react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: props.type === "prev" ? "chevronLeft" : "chevronRight" })));
-};
-exports.ArrowButton = ArrowButton;
-exports.ArrowButton.displayName = "UxfUiArrowButton";

package/modal/modal-dialog.d.ts

@@ -1,11 +0,0 @@
-import React, { ReactNode } from "react";
-import { ModalWidths } from "@uxf/ui/modal/theme";
-export interface ModalDialogProps {
-    children: ReactNode;
-    className?: string;
-    disableBackdropClose?: boolean;
-    onClose: () => void;
-    open: boolean;
-    width?: keyof ModalWidths;
-}
-export declare const ModalDialog: React.NamedExoticComponent<ModalDialogProps>;