@uxf/ui 1.0.0-beta.112 → 1.0.0-beta.113

package/css/pagination.css

@@ -2,11 +2,26 @@
     @apply isolate inline-flex rounded-md -space-x-px;
 
     &__button {
-        @apply relative inline-flex items-center border border-gray-300 bg-white px-4 py-2
-            text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 cursor-pointer h-10;
+        @apply relative inline-flex items-center border text-sm font-medium focus:z-10 cursor-pointer;
+
+        :root .light & {
+            @apply border-gray-300 bg-white text-gray-500 hover:bg-gray-50;
+        }
+
+        :root .dark & {
+            @apply border-gray-600 bg-gray-900 text-gray-200 hover:bg-gray-800;
+        }
 
         &.is-selected {
-            @apply z-10 bg-indigo-50 border border-primary-500 text-primary-600;
+            @apply z-10;
+
+            :root .light & {
+                @apply bg-indigo-50 border border-primary-500 text-primary-600;
+            }
+
+            :root .dark & {
+                @apply bg-indigo-900/20 border border-primary-700 text-primary-300;
+            }
         }
 
         &.is-first {
@@ -18,11 +33,57 @@
         }
 
         &.is-disabled {
-            @apply text-neutral-300 hover:bg-white cursor-not-allowed;
+            @apply cursor-not-allowed;
+
+            :root .light & {
+                @apply text-neutral-300 hover:bg-white;
+            }
+
+            :root .dark & {
+                @apply text-neutral-500 hover:bg-gray-800;
+            }
         }
 
         &.is-ellipsis {
-            @apply text-neutral-300 hover:bg-white pointer-events-none;
+            @apply pointer-events-none;
+
+            :root .light & {
+                @apply text-neutral-300 hover:bg-white;
+            }
+
+            :root .dark & {
+                @apply text-neutral-500 hover:bg-gray-800;
+            }
         }
     }
+
+    &--size-xs .uxf-pagination__button {
+        height: theme("inputSize.xs");
+
+        @apply px-2;
+    }
+
+    &--size-sm .uxf-pagination__button {
+        height: theme("inputSize.sm");
+
+        @apply px-3;
+    }
+
+    &--size-default .uxf-pagination__button {
+        height: theme("inputSize.default");
+
+        @apply px-4;
+    }
+
+    &--size-lg .uxf-pagination__button {
+        height: theme("inputSize.lg");
+
+        @apply px-5;
+    }
+
+    &--size-xl .uxf-pagination__button {
+        height: theme("inputSize.xl");
+
+        @apply px-6;
+    }
 }

package/css/select.css

@@ -2,8 +2,6 @@
     @apply relative;
 
     &__button {
-        height: theme("inputSize.default");
-
         @apply relative flex w-full cursor-default flex-row items-center rounded-lg px-4 text-left shadow-sm
             outline-none focus-visible:ring-2 before:absolute before:inset-0 before:pointer-events-none before:border
             before:rounded-lg;
@@ -69,4 +67,22 @@
             @apply -scale-y-100;
         }
     }
+
+    &--size-sm .uxf-select__button {
+        height: theme("inputSize.sm");
+
+        @apply text-sm;
+    }
+
+    &--size-default .uxf-select__button {
+        height: theme("inputSize.default");
+
+        @apply text-base;
+    }
+
+    &--size-lg .uxf-select__button {
+        height: theme("inputSize.lg");
+
+        @apply text-lg;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.112",
+  "version": "1.0.0-beta.113",
   "description": "",
   "publishConfig": {
     "access": "public"

package/pagination/index.d.ts

@@ -0,0 +1 @@
+export { Pagination } from "./pagination";

package/pagination/index.js

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

package/pagination/pagination.d.ts

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

package/pagination/pagination.js

@@ -9,8 +9,10 @@ const icon_1 = require("../icon");
 const cx_1 = require("@uxf/core/utils/cx");
 const usePagination_1 = require("@uxf/core/hooks/usePagination");
 const Pagination = (props) => {
+    var _a;
     const isCurrentPageFirst = props.page === 1;
     const isCurrentPageLast = props.page === props.count;
+    const className = (0, cx_1.cx)("uxf-pagination", `uxf-pagination--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, props.className);
     const pagination = (0, usePagination_1.usePagination)({
         count: props.count,
         page: props.page,
@@ -32,7 +34,7 @@ const Pagination = (props) => {
                 return props.onPageChange(props.count);
         }
     };
-    return (react_1.default.createElement("nav", { className: "uxf-pagination" }, pagination.map((item, index) => {
+    return (react_1.default.createElement("nav", { className: className }, pagination.map((item, index) => {
         const isDisabled = ((item === "first" || item === "previous") && isCurrentPageFirst) ||
             ((item === "last" || item === "next") && isCurrentPageLast);
         return (react_1.default.createElement("a", { key: item, onClick: isDisabled ? undefined : () => onClick(item), 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") }, item === "first" ? (react_1.default.createElement(react_1.default.Fragment, null,

package/pagination/pagination.stories.d.ts

@@ -1,7 +1,14 @@
+/// <reference types="mdx" />
 import React from "react";
+import Docs from "./pagination.docs.mdx";
 declare const _default: {
     title: string;
     component: React.FC<import("./pagination").PaginationProps>;
+    parameters: {
+        docs: {
+            page: typeof Docs;
+        };
+    };
 };
 export default _default;
 export declare function Default(): JSX.Element;

package/pagination/pagination.stories.js

@@ -22,18 +22,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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 pagination_1 = require("./pagination");
 const react_1 = __importStar(require("react"));
+const pagination_docs_mdx_1 = __importDefault(require("./pagination.docs.mdx"));
 exports.default = {
     title: "UI/Pagination",
     component: pagination_1.Pagination,
+    parameters: {
+        docs: {
+            page: pagination_docs_mdx_1.default,
+        },
+    },
 };
 function Default() {
     const [page, setPage] = (0, react_1.useState)(1);
-    return (react_1.default.createElement("div", { className: "flex flex-col gap-4" },
-        react_1.default.createElement("p", null,
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("p", { className: "pb-4" },
             "Je pot\u0159eba ikona ",
             react_1.default.createElement("b", null, "chevronsLeft"),
             ", ",
@@ -42,6 +51,18 @@ function Default() {
             react_1.default.createElement("b", null, "chevronRight"),
             " a ",
             react_1.default.createElement("b", null, "chevronsRight")),
-        react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: setPage })));
+        react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+            react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" },
+                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: setPage, size: "xs" }),
+                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: setPage, size: "sm" }),
+                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: setPage, size: "default" }),
+                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: setPage, size: "lg" }),
+                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: setPage, size: "xl" })),
+            react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 text-white lg:w-1/2" },
+                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: setPage, size: "xs" }),
+                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: setPage, size: "sm" }),
+                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: setPage, size: "default" }),
+                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: setPage, size: "lg" }),
+                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: setPage, size: "xl" })))));
 }
 exports.Default = Default;

package/pagination/theme.d.ts

@@ -0,0 +1,7 @@
+export interface PaginationSizes {
+    xs: true;
+    sm: true;
+    default: true;
+    lg: true;
+    xl: true;
+}

package/pagination/theme.js

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

package/select/select.d.ts

@@ -2,6 +2,7 @@ import type { Placement } from "@floating-ui/react";
 import React, { ReactNode } from "react";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";
+import { SelectSizes } from "@uxf/ui/select/theme";
 export declare type SelectValue = number | string;
 export declare type SelectOption<T = SelectValue> = {
     disabled?: boolean;
@@ -20,5 +21,6 @@ export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>>
     options: Option[];
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
+    size?: keyof SelectSizes;
 }
 export declare const Select: React.ForwardRefExoticComponent<SelectProps<SelectValue, SelectOption<SelectValue>> & React.RefAttributes<HTMLDivElement>>;

package/select/select.js

@@ -35,7 +35,7 @@ const use_dropdown_1 = require("../hooks/use-dropdown");
 const icon_1 = require("../icon");
 const label_1 = require("../label");
 exports.Select = (0, forwardRef_1.forwardRef)("Select", (props, ref) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const generatedId = (0, react_2.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const selectedOption = props.options.find((option) => option.id === props.value);
@@ -45,7 +45,7 @@ exports.Select = (0, forwardRef_1.forwardRef)("Select", (props, ref) => {
     const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", true);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
     const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "chevronDown";
-    return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-select", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+    return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-select", `uxf-select--size-${(_d = props.size) !== null && _d !== void 0 ? _d : "default"}`, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Listbox.Button, { as: "div", className: (0, cx_1.cx)("uxf-select__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-select__button-text", !(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && "is-empty") }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || props.placeholder),

package/select/select.stories.js

@@ -62,7 +62,10 @@ function Default() {
         react_1.default.createElement(index_1.Select, { helperText: "Helper text", isReadOnly: true, label: "Read only select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
         react_1.default.createElement(index_1.Select, { helperText: "Helper text", isRequired: true, label: "Required select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
         react_1.default.createElement(index_1.Select, { dropdownPlacement: "top", isRequired: true, label: "Select with dropdown top", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
-        react_1.default.createElement(index_1.Select, { helperText: "Helper text of Select with hidden label", hiddenLabel: true, label: "Hidden label", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value })));
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text of Select with hidden label", hiddenLabel: true, label: "Hidden label", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Select, { label: "Size sm", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value, size: "sm" }),
+        react_1.default.createElement(index_1.Select, { label: "Size default", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Select, { label: "Size lg", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value, size: "lg" })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storySelects),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storySelects)));

package/select/theme.d.ts

@@ -0,0 +1,5 @@
+export interface SelectSizes {
+    sm: true;
+    default: true;
+    lg: true;
+}

package/select/theme.js

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