@uxf/ui 11.21.3 → 11.21.5

package/_file-input-base/file-input-base.d.ts

@@ -1,4 +1,5 @@
-import { FileResponse, FormControlProps } from "@uxf/ui/types";
+import { FileResponse } from "@uxf/core/types";
+import { FormControlProps } from "@uxf/ui/types";
 import React from "react";
 export interface FileInputBaseProps extends FormControlProps<FileResponse | null> {
     "aria-describedby"?: string;

package/css/radio-group.css

@@ -9,7 +9,8 @@
     }
 
     &__option-wrapper {
-        @apply flex justify-between;
+        display: flex;
+        justify-content: space-between;
 
         &.is-selected {
             .uxf-radio-group__option-label {
@@ -31,7 +32,7 @@
     }
 
     &__label {
-        @apply mb-2;
+        margin-bottom: theme("spacing.2");
     }
 }
 
@@ -57,7 +58,7 @@
     }
 
     .uxf-radio-group__option-label {
-        @apply pr-4;
+        padding-right: theme("spacing.4");
     }
 }
 
@@ -71,7 +72,9 @@
     }
 
     .uxf-radio-group__options-wrapper {
-        @apply flex flex-wrap gap-2;
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.2");
     }
 
     .uxf-radio-group__option-wrapper {
@@ -92,7 +95,9 @@
     }
 
     .uxf-radio-group__option-label {
-        @apply pt-4 text-sm;
+        @apply text-sm;
+
+        padding-top: theme("spacing.4");
     }
 }
 
@@ -107,22 +112,29 @@
     }
 
     .uxf-radio-group__option-wrapper {
-        @apply flex-row-reverse items-center;
+        @apply flex-row-reverse;
+
+        align-items: center;
     }
 
     .uxf-radio-group__option-label {
-        @apply pl-2;
+        padding-left: theme("spacing.2");
     }
 }
 
 .uxf-radio-group--column {
     .uxf-radio-group__options-wrapper {
-        @apply flex flex-col items-start space-y-2;
+        align-items: start;
+        display: flex;
+        flex-direction: column;
+        gap: theme("spacing.2");
     }
 }
 
 .uxf-radio-group--row {
     .uxf-radio-group__options-wrapper {
-        @apply flex items-center space-x-10;
+        align-items: center;
+        display: flex;
+        gap: theme("spacing.10");
     }
 }

package/dropzone/dropzone-input.d.ts

@@ -1,4 +1,5 @@
-import { FileResponse, FormControlProps, UploadOptions } from "@uxf/ui/types";
+import { FileResponse } from "@uxf/core/types";
+import { FormControlProps, UploadOptions } from "@uxf/ui/types";
 import React, { CSSProperties, ReactNode } from "react";
 import { IconName } from "../icon/types";
 import { Accept, DropzoneFile } from "./types";

package/dropzone/dropzone-input.js

@@ -36,6 +36,7 @@ function fileToFileResponse(file) {
         id: -Math.round(Math.random() * 100000000),
         uuid: "00000000-0000-0000-0000-000000000000",
         name: file.name,
+        namespace: null,
         extension: file.name.split(".").slice(-1).join(""),
     };
 }

package/dropzone/types.d.ts

@@ -1,4 +1,4 @@
-import { FileResponse } from "@uxf/ui/types";
+import { FileResponse } from "@uxf/core/types";
 export interface DropzoneFile extends FileResponse {
     abortController?: AbortController;
     error?: unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.21.3",
+  "version": "11.21.5",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -17,10 +17,10 @@
   "dependencies": {
     "@floating-ui/react": "0.26.9",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "11.21.0",
-    "@uxf/core-react": "11.21.0",
+    "@uxf/core": "11.21.5",
+    "@uxf/core-react": "11.21.5",
     "@uxf/datepicker": "11.11.3",
-    "@uxf/styles": "11.21.0",
+    "@uxf/styles": "11.21.5",
     "color2k": "2.0.3",
     "dayjs": "1.11.10",
     "jump.js": "1.0.2",

package/pagination/pagination.d.ts

@@ -1,10 +1,12 @@
 import { PaginationSizes } from "@uxf/ui/pagination/theme";
 import { FC } from "react";
 export interface PaginationProps {
+    className?: string;
     count: number;
-    page: number;
     onPageChange: (index: number) => void;
+    page: number;
+    showFirstButton?: boolean;
+    showLastButton?: boolean;
     size?: keyof PaginationSizes;
-    className?: string;
 }
 export declare const Pagination: FC<PaginationProps>;

package/pagination/pagination.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = void 0;
+const show_1 = require("@uxf/core-react/components/show");
 const use_pagination_1 = require("@uxf/core-react/hooks/use-pagination");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
@@ -16,8 +17,8 @@ const Pagination = (props) => {
     const pagination = (0, use_pagination_1.usePagination)({
         count: props.count,
         page: props.page,
-        showFirstButton: true,
-        showLastButton: true,
+        showFirstButton: props.showFirstButton,
+        showLastButton: props.showFirstButton,
     });
     const onClick = (item) => {
         if (typeof item === "number") {
@@ -39,15 +40,21 @@ const Pagination = (props) => {
             ((item === "last" || item === "next") && isCurrentPageLast);
         return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        react_1.default.createElement("a", { className: (0, cx_1.cx)("uxf-pagination__button", isDisabled && "is-disabled", (item === "start-ellipsis" || item === "end-ellipsis") && "is-ellipsis", item === props.page && "is-selected", index === 0 && "is-first", index === pagination.length - 1 && "is-last"), key: item, onClick: isDisabled ? undefined : () => onClick(item) }, item === "first" ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("span", { className: "uxf-pagination__label" }, "First"),
-            react_1.default.createElement(icon_1.Icon, { name: "chevronsLeft", size: 12 }))) : item === "previous" ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("span", { className: "uxf-pagination__label" }, "Previous"),
-            react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 12 }))) : item === "start-ellipsis" || item === "end-ellipsis" ? (react_1.default.createElement(react_1.default.Fragment, null, "...")) : typeof item === "number" ? (react_1.default.createElement(react_1.default.Fragment, null, item)) : item === "next" ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("span", { className: "uxf-pagination__label" }, "Next"),
-            react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 12 }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("span", { className: "uxf-pagination__label" }, "Last"),
-            react_1.default.createElement(icon_1.Icon, { name: "chevronsRight", size: 12 })))));
+        react_1.default.createElement("a", { className: (0, cx_1.cx)("uxf-pagination__button", isDisabled && "is-disabled", (item === "start-ellipsis" || item === "end-ellipsis") && "is-ellipsis", item === props.page && "is-selected", index === 0 && "is-go-to-first", index === pagination.length - 1 && "is-go-to-last", item === "next" && "is-next", item === "previous" && "is-previous", typeof item === "number" && "is-number"), key: item, onClick: isDisabled ? undefined : () => onClick(item) },
+            react_1.default.createElement(show_1.Show, { when: item === "first" },
+                react_1.default.createElement("span", { className: "uxf-pagination__label" }, "First"),
+                react_1.default.createElement(icon_1.Icon, { name: "chevronsLeft", size: 12 })),
+            react_1.default.createElement(show_1.Show, { when: item === "previous" },
+                react_1.default.createElement("span", { className: "uxf-pagination__label" }, "Previous"),
+                react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 12 })),
+            react_1.default.createElement(show_1.Show, { when: item === "start-ellipsis" || item === "end-ellipsis" }, "\u2026"),
+            react_1.default.createElement(show_1.Show, { when: typeof item === "number" }, item),
+            react_1.default.createElement(show_1.Show, { when: item === "next" },
+                react_1.default.createElement("span", { className: "uxf-pagination__label" }, "Next"),
+                react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 12 })),
+            react_1.default.createElement(show_1.Show, { when: item === "last" },
+                react_1.default.createElement("span", { className: "uxf-pagination__label" }, "Last"),
+                react_1.default.createElement(icon_1.Icon, { name: "chevronsRight", size: 12 }))));
     })));
 };
 exports.Pagination = Pagination;

package/types/file-response.d.ts

@@ -1,10 +1,3 @@
-export interface FileResponse {
-    extension: string;
-    id: number;
-    name: string;
-    namespace?: string | null;
-    uuid: string;
-}
 export interface UploadOptions {
     abortController?: AbortController;
     onUploadProgress?: (progressEvent: UploadProgressEvent) => void;

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

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

package/utils/mocks/upload-file.mock.d.ts

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

package/utils/mocks/upload-file.mock.js

@@ -38,6 +38,7 @@ function uploadFile(file, uploadOptions) {
                 id: Math.round(Math.random() * 100000000),
                 uuid: getRandomUuid(),
                 name: file.name,
+                namespace: null,
                 extension: file.name.split(".").slice(-1).join(""),
             });
         }, time);