@uxf/ui 1.0.0-beta.87 → 1.0.0-beta.88

package/tw-tokens/tw-font-size.js

@@ -0,0 +1,19 @@
+"use strict";
+// this file is generated automatically, do not change anything manually in the contents of this file
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.twFontSize = void 0;
+exports.twFontSize = {
+    xs: ["0.75rem", { lineHeight: "1rem" }],
+    sm: ["0.875rem", { lineHeight: "1.25rem" }],
+    base: ["1rem", { lineHeight: "1.5rem" }],
+    lg: ["1.125rem", { lineHeight: "1.75rem" }],
+    xl: ["1.25rem", { lineHeight: "1.75rem" }],
+    "2xl": ["1.5rem", { lineHeight: "2rem" }],
+    "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
+    "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
+    "5xl": ["3rem", { lineHeight: "1" }],
+    "6xl": ["3.75rem", { lineHeight: "1" }],
+    "7xl": ["4.5rem", { lineHeight: "1" }],
+    "8xl": ["6rem", { lineHeight: "1" }],
+    "9xl": ["8rem", { lineHeight: "1" }],
+};

package/tw-tokens/tw-font-weight.d.ts

@@ -0,0 +1,12 @@
+export declare const twFontWeight: {
+    thin: string;
+    extralight: string;
+    light: string;
+    normal: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+    extrabold: string;
+    black: string;
+};
+export declare type TwFontWeight = typeof twFontWeight;

package/tw-tokens/tw-font-weight.js

@@ -0,0 +1,15 @@
+"use strict";
+// this file is generated automatically, do not change anything manually in the contents of this file
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.twFontWeight = void 0;
+exports.twFontWeight = {
+    thin: "100",
+    extralight: "200",
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+    black: "900",
+};

package/tw-tokens/tw-line-height.d.ts

@@ -0,0 +1,17 @@
+export declare const twLineHeight: {
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    none: string;
+    tight: string;
+    snug: string;
+    normal: string;
+    relaxed: string;
+    loose: string;
+};
+export declare type TwLineHeight = typeof twLineHeight;

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

@@ -0,0 +1,20 @@
+"use strict";
+// this file is generated automatically, do not change anything manually in the contents of this file
+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",
+    none: "1",
+    tight: "1.25",
+    snug: "1.375",
+    normal: "1.5",
+    relaxed: "1.625",
+    loose: "2",
+};

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

@@ -0,0 +1,8 @@
+export declare const twScreens: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare type TwScreens = typeof twScreens;

package/tw-tokens/tw-screens.js

@@ -0,0 +1,11 @@
+"use strict";
+// this file is generated automatically, do not change anything manually in the contents of this file
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.twScreens = void 0;
+exports.twScreens = {
+    xs: "36em",
+    sm: "48em",
+    md: "62em",
+    lg: "75em",
+    xl: "90em",
+};

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

@@ -0,0 +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;
+    px: string;
+    0.5: string;
+    1.5: string;
+    2.5: string;
+    3.5: string;
+    inherit: string;
+};
+export declare type TwSpacing = typeof twSpacing;

package/tw-tokens/tw-spacing.js

@@ -0,0 +1,42 @@
+"use strict";
+// this file is generated automatically, do not change anything manually in the contents of this file
+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",
+    px: "1px",
+    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

@@ -0,0 +1,19 @@
+export declare const twZIndex: {
+    0: string;
+    1: string;
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    auto: string;
+    focus: string;
+    fixed: string;
+    menu: string;
+    header: string;
+    modal: string;
+    dropdown: string;
+    flashMessage: string;
+    tooltip: string;
+};
+export declare type TwZIndex = typeof twZIndex;

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

@@ -0,0 +1,22 @@
+"use strict";
+// this file is generated automatically, do not change anything manually in the contents of this file
+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",
+    auto: "auto",
+    focus: "5",
+    fixed: "10",
+    menu: "25",
+    header: "50",
+    modal: "100",
+    dropdown: "200",
+    flashMessage: "250",
+    tooltip: "300",
+};

package/utils/image.d.ts

@@ -1,9 +1,14 @@
-import { ResizerImageProps } from "@uxf/core/utils/resizer";
-import { ReactElement } from "react";
-export interface FileResponse {
-    extension: string;
-    namespace?: string | null;
-    uuid: string;
+import { ImageSource, ResizerImageProps } from "@uxf/core/utils/resizer";
+import { FC } from "react";
+export declare type Dimension = number | "auto";
+export declare function getImgUniqueIdentifier(src: ImageSource): string | undefined;
+export declare function getImgSrcSet(src?: ImageSource, width?: Dimension, height?: Dimension, options?: ResizerImageProps): string | undefined;
+interface ImageSourcesProps {
+    breakpointIndex?: number;
+    breakpoints?: string[];
+    height: Dimension;
+    src: ImageSource;
+    width: Dimension;
 }
-export declare function getImgSrcSet(file?: FileResponse, width?: number, height?: number, options?: ResizerImageProps): string | null;
-export declare function getImgSources(file?: FileResponse, width?: number, height?: number): ReactElement | null;
+export declare const ImgSources: FC<ImageSourcesProps>;
+export {};

package/utils/image.js

@@ -3,28 +3,87 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getImgSources = exports.getImgSrcSet = void 0;
+exports.ImgSources = exports.getImgSrcSet = exports.getImgUniqueIdentifier = void 0;
 const resizer_1 = require("@uxf/core/utils/resizer");
 const react_1 = __importDefault(require("react"));
-const TYPES = ["avif", "webp"];
-function getImgSrcSet(file, width = 200, height = 300, options = {}) {
-    if (!file || !file.uuid || !file.extension || file.extension === "svg") {
-        return null;
+function toFileResponse(src) {
+    return typeof src !== "string" && "uuid" in src ? src : undefined;
+}
+function toStaticImageData(src) {
+    return typeof src !== "string" && "src" in src ? src : undefined;
+}
+function getImgExtension(src) {
+    const ext = src.slice(src.lastIndexOf(".") + 1);
+    return ext.length > 1 ? ext : undefined;
+}
+function getImgUniqueIdentifier(src) {
+    var _a;
+    const fileResponse = toFileResponse(src);
+    const staticImageData = toStaticImageData(src);
+    return typeof src === "string" ? src : (_a = fileResponse === null || fileResponse === void 0 ? void 0 : fileResponse.uuid) !== null && _a !== void 0 ? _a : staticImageData === null || staticImageData === void 0 ? void 0 : staticImageData.src;
+}
+exports.getImgUniqueIdentifier = getImgUniqueIdentifier;
+const HIDPI_SIZES = [3, 2, 1];
+function getImgSrcSet(src, width, height, options = {}) {
+    if (!src) {
+        return undefined;
+    }
+    let f;
+    let h = height !== null && height !== void 0 ? height : "auto";
+    let w = width !== null && width !== void 0 ? width : "auto";
+    if (typeof src === "string") {
+        const extension = getImgExtension(src);
+        if (extension === "svg") {
+            return undefined;
+        }
+        f = extension;
+    }
+    const fileResponse = toFileResponse(src);
+    if (fileResponse) {
+        if (!fileResponse.uuid || fileResponse.extension === "svg") {
+            return undefined;
+        }
+        f = fileResponse.extension;
+    }
+    const staticImageData = toStaticImageData(src);
+    if (staticImageData) {
+        const extension = getImgExtension(staticImageData.src);
+        if (!staticImageData.src || extension === "svg") {
+            return undefined;
+        }
+        f = extension;
+        h = h || staticImageData.height;
+        w = w || staticImageData.width;
     }
-    const toFormat = TYPES.includes(file.extension) ? "png" : file.extension;
-    return [3, 2, 1]
-        .map((size) => (0, resizer_1.resizerImageUrl)(file, width * size, height * size, { toFormat, ...options }) +
-        (size > 1 ? ` ${size}x` : ""))
-        .join(", ");
+    const toFormat = f !== null && f !== void 0 ? f : "png";
+    if (typeof h === "number" || typeof w === "number") {
+        return HIDPI_SIZES.map((size) => (0, resizer_1.resizerImageUrl)(src, w * size, h * size, {
+            toFormat,
+            ...options,
+        }) + (size > 1 ? ` ${size}x` : "")).join(", ");
+    }
+    return (0, resizer_1.resizerImageUrl)(src, w, h, { toFormat, ...options });
 }
 exports.getImgSrcSet = getImgSrcSet;
-function getImgSources(file, width = 200, height = 300) {
-    if (!file || !file.uuid || !file.extension || file.extension === "svg") {
+const EXTENSIONS = ["avif", "webp", undefined];
+const ImgSources = (props) => {
+    if (!props.src || (typeof props.src === "string" && getImgExtension(props.src) === "svg")) {
         return null;
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null, TYPES.map((type) => {
-        var _a;
-        return (react_1.default.createElement("source", { key: type, srcSet: (_a = getImgSrcSet(file, width, height, { toFormat: type })) !== null && _a !== void 0 ? _a : undefined, type: `image/${type}` }));
-    })));
-}
-exports.getImgSources = getImgSources;
+    const fileResponse = toFileResponse(props.src);
+    if (fileResponse && (!fileResponse.uuid || fileResponse.extension === "svg")) {
+        return null;
+    }
+    const staticImageData = toStaticImageData(props.src);
+    if (staticImageData && (!staticImageData.src || getImgExtension(staticImageData.src))) {
+        return null;
+    }
+    let media;
+    if (props.breakpoints && props.breakpointIndex) {
+        media = `(min-width: ${props.breakpoints[props.breakpointIndex]})`;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        EXTENSIONS.map((type) => (react_1.default.createElement("source", { key: type, media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, { toFormat: type }), type: `image/${type}` }))),
+        react_1.default.createElement("source", { media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, {}) })));
+};
+exports.ImgSources = ImgSources;