@uxf/ui 1.0.0-beta.16 → 1.0.0-beta.161

package/types/file-response.d.ts

@@ -0,0 +1,12 @@
+export interface FileResponse {
+    extension: string;
+    id: number;
+    name: string;
+    namespace?: string | null;
+    uuid: string;
+}
+export interface UploadOptions {
+    abortController?: AbortController;
+    onUploadProgress?: (progressEvent: UploadProgressEvent) => void;
+}
+export type UploadProgressEvent = Pick<ProgressEvent, "lengthComputable" | "loaded" | "total">;

package/types/file-response.js

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

package/types/form-control-props.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEvent, FocusEventHandler } from "react";
 export interface FormControlProps<ValueType, ElementType = HTMLInputElement, RestParams extends unknown[] = []> {
-    value?: ValueType;
-    onChange?: (value: ValueType, event?: ChangeEvent<ElementType>, ...args: RestParams) => void;
+    value: ValueType;
+    onChange: (value: ValueType, event?: ChangeEvent<ElementType>, ...args: RestParams) => void;
     onBlur?: FocusEventHandler<ElementType>;
     onFocus?: FocusEventHandler<ElementType>;
     name?: string;
@@ -10,6 +10,11 @@ export interface FormControlProps<ValueType, ElementType = HTMLInputElement, Res
      * The input element will be disabled.
      */
     isDisabled?: boolean;
+    /**
+     * @about
+     * Used to show forced focus indicator.
+     */
+    isFocused?: boolean;
     /**
      * @about
      * It prevents the user from changing the value of the field (not from interacting with the field).
@@ -18,7 +23,6 @@ export interface FormControlProps<ValueType, ElementType = HTMLInputElement, Res
     isInvalid?: boolean;
     isRequired?: boolean;
 }
-export declare type OptionType<ValueType = string, LabelType = string> = {
-    value: ValueType;
-    label: LabelType;
-};
+export interface Clearable {
+    isClearable?: boolean;
+}

package/types/index.d.ts

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

package/types/index.js

@@ -14,4 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./color"), exports);
 __exportStar(require("./form-control-props"), exports);
+__exportStar(require("./file-response"), exports);

package/typography/typography.spec.d.ts

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

package/typography/typography.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 typography_stories_1 = require("./typography.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(typography_stories_1.Default, null));

package/typography/typography.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: null;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/typography/typography.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+exports.default = {
+    title: "UI/Typography",
+    component: null,
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement("h1", { className: "uxf-typo-h1" }, ".uxf-typo-h1"),
+        react_1.default.createElement("h2", { className: "uxf-typo-h2" }, ".uxf-typo-h2"),
+        react_1.default.createElement("h3", { className: "uxf-typo-h3" }, ".uxf-typo-h3"),
+        react_1.default.createElement("h4", { className: "uxf-typo-h4" }, ".uxf-typo-h4"),
+        react_1.default.createElement("h5", { className: "uxf-typo-h5" }, ".uxf-typo-h5"),
+        react_1.default.createElement("h6", { className: "uxf-typo-h6" }, ".uxf.typo-h6"),
+        react_1.default.createElement("p", { className: "uxf-typo-body" }, ".uxf-typo-body"),
+        react_1.default.createElement("p", { className: "uxf-typo-body2" }, ".uxf-typo-body2"),
+        react_1.default.createElement("p", { className: "uxf-typo-button" }, ".uxf-typo-button"),
+        react_1.default.createElement("p", { className: "uxf-typo-caption" }, ".uxf-typo-caption"),
+        react_1.default.createElement("p", { className: "uxf-typo-medium" }, ".uxf-typo-medium"),
+        react_1.default.createElement("p", { className: "uxf-typo-medium2" }, ".uxf-typo-medium2"),
+        react_1.default.createElement("p", { className: "uxf-typo-overline" }, ".uxf-typo-overline")));
+}
+exports.Default = Default;

package/utils/{component-structure-analyzer.jsx → component-structure-analyzer.js}

@@ -5,6 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 function ComponentStructureAnalyzer(props) {
-    return (<div className="uxf-component-structure-analyzer">{props.children}</div>);
+    return react_1.default.createElement("div", { className: "uxf-component-structure-analyzer" }, props.children);
 }
 exports.default = ComponentStructureAnalyzer;

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

@@ -0,0 +1,2 @@
+import { FileResponse } from "@uxf/ui/types";
+export declare function getFileUrl(domain: string, file: FileResponse): string;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFileUrl = void 0;
+function getFileUrl(domain, file) {
+    return `${domain}/upload/${file.namespace || "default"}/${file.uuid[0]}/${file.uuid[1]}/${file.uuid}.${file.extension}`;
+}
+exports.getFileUrl = getFileUrl;

package/utils/icons-config.js

@@ -0,0 +1,103 @@
+/** @type {import('@uxf/icons-generator/types').Config['icons']} */
+module.exports = {
+    calendar: {
+        width: 448,
+        height: 512,
+        data: `<path d="M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z" fill="currentColor" />`,
+    },
+    camera: {
+        width: 512,
+        height: 512,
+        data: `<path d="M144 288C144 226.1 194.1 176 256 176C317.9 176 368 226.1 368 288C368 349.9 317.9 400 256 400C194.1 400 144 349.9 144 288zM256 224C220.7 224 192 252.7 192 288C192 323.3 220.7 352 256 352C291.3 352 320 323.3 320 288C320 252.7 291.3 224 256 224zM362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82H362.9zM64 144C55.16 144 48 151.2 48 160V416C48 424.8 55.16 432 64 432H448C456.8 432 464 424.8 464 416V160C464 151.2 456.8 144 448 144H338.7L317.4 80H194.6L173.3 144H64z" fill="currentColor"/>`,
+    },
+    caretDown: {
+        width: 320,
+        height: 512,
+        data: `<path d="M137.4 374.6a32.05 32.05 0 0 0 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9S301 191.9 288 191.9L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" fill="currentColor"/>`,
+    },
+    clock: {
+        width: 512,
+        height: 512,
+        data: `<path d="M232 120c0-13.3 10.7-24 24-24s24 10.7 24 24v123.2l85.3 56.8c11 7.4 14 22.3 5.8 33.3-6.5 11-21.4 14-32.4 5.8l-96-64c-6.7-3.6-10.7-11.1-10.7-20V120zM256 0c141.4 0 256 114.6 256 256S397.4 512 256 512 0 397.4 0 256 114.6 0 256 0zM48 256c0 114.9 93.1 208 208 208s208-93.1 208-208S370.9 48 256 48 48 141.1 48 256z" fill="currentColor"/>`,
+    },
+    bars: {
+        width: 448,
+        height: 512,
+        data: `<path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" fill="currentColor" />`,
+    },
+    check: {
+        width: 512,
+        height: 512,
+        data: `<path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" fill="currentColor"/>`,
+    },
+    chevronDown: {
+        width: 512,
+        height: 512,
+        data: `<path d="M256 429.3l22.6-22.6 192-192L493.3 192 448 146.7l-22.6 22.6L256 338.7 86.6 169.4 64 146.7 18.7 192l22.6 22.6 192 192L256 429.3z" fill="currentColor"/>`,
+    },
+    chevronLeft: {
+        width: 384,
+        height: 512,
+        data: `<path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" fill="currentColor"/>`,
+    },
+    chevronsLeft: {
+        width: 512,
+        height: 512,
+        data: `<path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192zm384-192l-192 192c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 470.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z" fill="currentColor"/>`,
+    },
+    chevronRight: {
+        width: 384,
+        height: 512,
+        data: `<path d="M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" fill="currentColor"/>`,
+    },
+    chevronsRight: {
+        width: 512,
+        height: 512,
+        data: `<path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-192-192c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 233.4 425.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l192-192zm-384 192l192-192c12.5-12.5 12.5-32.8 0-45.3l-192-192c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 41.4 425.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z" fill="currentColor"/>`,
+    },
+    chevronUp: {
+        width: 512,
+        height: 512,
+        data: `<path d="M256 82.7l22.6 22.6 192 192L493.3 320 448 365.3l-22.6-22.6L256 173.3 86.6 342.6 64 365.3 18.7 320l22.6-22.6 192-192L256 82.7z" fill="currentColor"/>`,
+    },
+    cloud: {
+        width: 640,
+        height: 512,
+        data: `<path d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9-.1-2.7-.2-5.4-.2-8.1 0-88.4 71.6-160 160-160 59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96 0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z" fill="currentColor"/>`,
+    },
+    copy: {
+        width: 512,
+        height: 512,
+        data: `<path fill="currentColor" d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z" />`,
+    },
+    "ellipsis-vertical": {
+        width: 128,
+        height: 512,
+        data: `<path fill="currentColor" d="M48 464a48 48 0 1 1 0-96 48 48 0 1 1 0 96zm0-160a48 48 0 1 1 0-96 48 48 0 1 1 0 96zM0 96a48 48 0 1 1 96 0A48 48 0 1 1 0 96z"/>`,
+    },
+    file: {
+        width: 384,
+        height: 512,
+        data: `<path d="M0 64C0 28.65 28.65 0 64 0h165.5c17 0 33.2 6.743 45.2 18.75l90.6 90.55c12 12 18.7 28.2 18.7 45.2V448c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V64zm336 384V160h-80c-17.7 0-32-14.3-32-32V48H64c-8.84 0-16 7.16-16 16v384c0 8.8 7.16 16 16 16h256c8.8 0 16-7.2 16-16z" fill="currentColor" />`,
+    },
+    imageFile: {
+        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.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,
+        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" />`,
+    },
+    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"/>`,
+    },
+    xmarkLarge: {
+        width: 448,
+        height: 512,
+        data: `<path d="M393.4 41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L269.3 256l169.3 169.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 301.3 54.6 470.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6c-12.5-12.5-12.5-32.7 0-45.2s32.8-12.5 45.3 0L224 210.7 393.4 41.4z" fill="currentColor"/>`,
+    },
+};

package/utils/mocks/uploadFIle.mock.d.ts

@@ -0,0 +1,2 @@
+import { FileResponse, UploadOptions } from "@uxf/ui/types";
+export declare function uploadFile(file: File, uploadOptions?: UploadOptions): Promise<FileResponse>;

package/utils/mocks/uploadFIle.mock.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadFile = void 0;
+function getRandomUuid() {
+    return "00000000-0000-0000-0000-000000000000"
+        .split("-")
+        .map((el) => Array(el.length)
+        .fill(0)
+        .map(() => Math.round(Math.random() * 9).toString())
+        .join(""))
+        .join("-");
+}
+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 interval = time / 10;
+        let loaded = 0;
+        const intervalTimer = window.setInterval(() => {
+            var _a, _b;
+            if ((_a = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.abortController) === null || _a === void 0 ? void 0 : _a.signal.aborted) {
+                clearInterval(intervalTimer);
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                clearTimeout(timeoutTimer);
+                return;
+            }
+            loaded += (file.size / time) * interval;
+            (_b = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.onUploadProgress) === null || _b === void 0 ? void 0 : _b.call(uploadOptions, {
+                lengthComputable: true,
+                loaded,
+                total: file.size,
+            });
+        }, interval);
+        const timeoutTimer = window.setTimeout(() => {
+            clearInterval(intervalTimer);
+            clearTimeout(timeoutTimer);
+            resolve({
+                id: Math.round(Math.random() * 100000000),
+                uuid: getRandomUuid(),
+                name: file.name,
+                extension: file.name.split(".").slice(-1).join(""),
+            });
+        }, time);
+    });
+}
+exports.uploadFile = uploadFile;

package/utils/snap-test.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare const snapTest: (name: string, component: ReactNode) => void;

package/utils/snap-test.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.snapTest = void 0;
+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 snapTest = (name, component) => {
+    it(name, () => {
+        const tree = (0, react_test_renderer_1.create)(react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() }, component)).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+};
+exports.snapTest = snapTest;

package/utils/storybook-config.d.ts

@@ -1,13 +1,21 @@
 import { ReactNode } from "react";
-import { ButtonColors, ButtonSizes, ButtonVariants } from "../button";
+import { ButtonColor, ButtonSize, ButtonVariant } from "@uxf/ui/button";
+import { ChipColor } from "../chip/chip";
+import { InputGroupSizes } from "../input/theme";
 export declare const defaultConfig: StorybookConfig;
 export interface StorybookConfig {
     Button: {
-        sizes: Array<keyof ButtonSizes>;
-        variants: Array<keyof ButtonVariants>;
-        colors: Array<keyof ButtonColors>;
+        sizes: ButtonSize[];
+        variants: ButtonVariant[];
+        colors: ButtonColor[];
     };
-    Input: {};
+    Chip: {
+        colors: ChipColor[];
+    };
+    Input: {
+        sizes: (keyof InputGroupSizes)[];
+    };
+    Select: any;
 }
 export declare function useStorybookConfig<T extends keyof StorybookConfig>(key: T): StorybookConfig[T];
 interface StorybookContextProviderProps {

package/utils/{storybook-config.jsx → storybook-config.js}

@@ -28,19 +28,25 @@ const react_1 = __importStar(require("react"));
 exports.defaultConfig = {
     Button: {
         sizes: ["xs", "sm", "default", "lg", "xl"],
-        colors: ["default", "white", "success", "warning", "error"],
-        variants: ["outlined", "default"],
+        colors: ["default", "success", "error"],
+        variants: ["default", "outlined", "white", "text"],
     },
-    Input: {},
+    Chip: {
+        colors: ["orange", "red", "yellow", "pink", "purple", "indigo", "green", "blue", "default"],
+    },
+    Input: {
+        sizes: ["small", "default", "large"],
+    },
+    Select: {},
 };
 // Context
-const Context = react_1.default.createContext(exports.defaultConfig);
+const Context = (0, react_1.createContext)(exports.defaultConfig);
 // consumer
 function useStorybookConfig(key) {
     return (0, react_1.useContext)(Context)[key];
 }
 exports.useStorybookConfig = useStorybookConfig;
 function StorybookContextProvider(props) {
-    return (<Context.Provider value={props.config}>{props.children}</Context.Provider>);
+    return react_1.default.createElement(Context.Provider, { value: props.config }, props.children);
 }
 exports.StorybookContextProvider = StorybookContextProvider;

package/utils/tailwind-config.js

@@ -0,0 +1,132 @@
+const tailwindThemeDefaults = require("./tailwind-theme-defaults");
+const { colors, fontFamily } = require("tailwindcss/defaultTheme");
+const { rem } = require("@uxf/styles/units/rem");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [],
+    darkMode: "class",
+    theme: {
+        containers: tailwindThemeDefaults.containers,
+        screens: tailwindThemeDefaults.screens,
+        inputSize: {
+            xs: "30px",
+            sm: "34px",
+            default: "38px",
+            lg: "42px",
+            xl: "46px",
+        },
+        extend: {
+            borderRadius: {
+                inherit: "inherit",
+            },
+            boxShadow: {
+                paper: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
+            },
+            colors: {
+                inherit: "inherit",
+                transparent: "transparent",
+                current: "currentColor",
+                lightHigh: "#111827",
+                lightMedium: "#4b5563",
+                lightLow: "#9ca3af",
+                darkHigh: "#ffffff",
+                darkMedium: "#ffffffcc",
+                darkLow: "#ffffff80",
+                lightBorder: "#e5e7eb",
+                darkBorder: "#374151",
+                primary: {
+                    DEFAULT: "#3b82f6",
+                    50: "#eff6ff",
+                    100: "#dbeafe",
+                    200: "#bfdbfe",
+                    300: "#93c5fd",
+                    400: "#60a5fa",
+                    500: "#3b82f6",
+                    600: "#2563eb",
+                    700: "#1d4ed8",
+                    800: "#1e40af",
+                    900: "#1e3a8a",
+                },
+                success: {
+                    DEFAULT: "#22c55e",
+                    50: "#f0fdf4",
+                    100: "#dcfce7",
+                    200: "#bbf7d0",
+                    300: "#86efac",
+                    400: "#4ade80",
+                    500: "#22c55e",
+                    600: "#16a34a",
+                    700: "#15803d",
+                    800: "#166534",
+                    900: "#14532d",
+                },
+                warning: {
+                    DEFAULT: "#f97316",
+                    50: "#fff7ed",
+                    100: "#ffedd5",
+                    200: "#fed7aa",
+                    300: "#fdba74",
+                    400: "#fb923c",
+                    500: "#f97316",
+                    600: "#ea580c",
+                    700: "#c2410c",
+                    800: "#9a3412",
+                    900: "#7c2d12",
+                },
+                error: {
+                    DEFAULT: "#ef4444",
+                    50: "#fef2f2",
+                    100: "#fee2e2",
+                    200: "#fecaca",
+                    300: "#fca5a5",
+                    400: "#f87171",
+                    500: "#ef4444",
+                    600: "#dc2626",
+                    700: "#b91c1c",
+                    800: "#991b1b",
+                    900: "#7f1d1d",
+                },
+            },
+            fontFamily: {
+                sans: ["var(--font-inter)", ...fontFamily.sans],
+            },
+            fontSize: {
+                desktopH1: [rem(96), 112 / 96],
+                desktopH2: [rem(60), 72 / 60],
+                desktopH3: [rem(48), 64 / 48],
+                desktopH4: [rem(34), 40 / 34],
+                desktopH5: [rem(24), 32 / 24],
+                desktopH6: [rem(16), 22 / 16],
+                body: [rem(16), 24 / 16],
+                body2: [rem(14), 20 / 14],
+                button: [rem(16), 24 / 16],
+                caption: [rem(12), 16 / 12],
+                medium: [rem(16), 24 / 16],
+                medium2: [rem(14), 20 / 14],
+                overline: [rem(10), 16 / 10],
+            },
+            spacing: {
+                inherit: "inherit",
+            },
+            zIndex: {
+                1: "1",
+                focus: "5",
+                fixed: "10",
+                menu: "25",
+                header: "50",
+                modal: "100",
+                dropdown: "200",
+                flashMessage: "250",
+                tooltip: "300",
+            },
+        },
+    },
+    corePlugins: {
+        container: false,
+    },
+    plugins: [
+        require("./tailwind-plugins/container")(tailwindThemeDefaults.screens, tailwindThemeDefaults.containers),
+        require("./tailwind-plugins/variants"),
+    ],
+};

package/utils/tailwind-plugins/container.js

@@ -0,0 +1,39 @@
+const plugin = require("tailwindcss/plugin");
+
+/** @type {(screens: Record<string, string>, containers: Record<string, string>) => import('tailwindcss').Plugin} */
+module.exports = (screens, containers) =>
+    plugin(
+        ({ addComponents, theme }) => {
+            const _screens = theme("screens", containers);
+            const _containers = theme("containers", screens);
+
+            const mqs = Object.entries(_screens);
+            const widths = mqs
+                .map((item) => {
+                    const key = item[0];
+                    const value = item[1];
+                    const width = _containers[key];
+                    if (width) {
+                        return { [`@media (min-width: ${value})`]: { ".container": { "max-width": width } } };
+                    }
+                })
+                .filter((i) => i);
+
+            addComponents([
+                {
+                    ".container": {
+                        "margin-left": "auto",
+                        "margin-right": "auto",
+                        width: "100%",
+                    },
+                },
+                ...widths,
+            ]);
+        },
+        {
+            content: [],
+            theme: {
+                containers,
+            },
+        },
+    );

package/utils/tailwind-plugins/variants.js

@@ -0,0 +1,15 @@
+const plugin = require("tailwindcss/plugin");
+
+/** @type {import('tailwindcss').Plugin} */
+module.exports = plugin(({ addVariant }) => {
+    addVariant("is-active", "&.is-active");
+    addVariant("is-selected", "&.is-selected");
+    addVariant("is-hoverable", ["&.is-hoverable:active", "&.is-hoverable:hover"]);
+    addVariant("is-focused", "&.is-focused");
+    addVariant("is-required", ["&.is-required", "&:required"]);
+    addVariant("is-invalid", "&.is-invalid");
+    addVariant("is-loading", ["&.is-loading"]);
+    addVariant("is-readonly", ["&.is-readonly", "&:readonly"]);
+    addVariant("is-disabled", ["&.is-disabled", "&:disabled"]);
+    addVariant("is-empty", ["&.is-empty"]);
+});

package/utils/tailwind-theme-defaults.js

@@ -0,0 +1,20 @@
+const { em } = require("@uxf/styles/units/em");
+const { rem } = require("@uxf/styles/units/rem");
+
+/** @type {{ containers: Record<string, string>; screens: Record<string, string>;}} */
+module.exports = {
+    containers: {
+        xs: rem(540),
+        sm: rem(720),
+        md: rem(928),
+        lg: rem(1024),
+        xl: rem(1216),
+    },
+    screens: {
+        xs: em(576),
+        sm: em(768),
+        md: em(992),
+        lg: em(1200),
+        xl: em(1440),
+    },
+};

package/avatar/avatar.jsx

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-const cx_1 = require("@uxf/core/utils/cx");
-function Avatar(props) {
-    var _a;
-    const className = (0, cx_1.cx)("avatar", `avatar--size-${props.size}`, `avatar--variant-${(_a = props.circular) !== null && _a !== void 0 ? _a : "default"}`);
-    return <img src={props.src} className={className}/>;
-}
-exports.Avatar = Avatar;

package/avatar/avatar.stories.jsx

@@ -1,29 +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.Default = void 0;
-const react_1 = __importDefault(require("react"));
-const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
-const avatar_1 = require("./avatar");
-exports.default = {
-    title: "UI/Avatar",
-    component: avatar_1.Avatar,
-};
-function Default() {
-    const config = (0, storybook_config_1.useStorybookConfig)("Button");
-    return (<div className="space-y-4">
-      <div className="flex flex-row items-center space-x-4">
-        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="8"/>
-        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="10"/>
-        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="12"/>
-      </div>
-      <div className="flex flex-row items-center space-x-4">
-        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="8" variant="circular"/>
-        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="10" variant="circular"/>
-        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="12" variant="circular"/>
-      </div>
-    </div>);
-}
-exports.Default = Default;

package/avatar/theme.d.ts

@@ -1,5 +0,0 @@
-export interface AvatarSizes {
-    "8": true;
-    "10": true;
-    "12": true;
-}