@uxf/ui 11.105.0 → 11.106.0

package/css/pagination.css

@@ -1,8 +1,20 @@
 .uxf-pagination {
-    @apply isolate inline-flex -space-x-px rounded-md;
+    @apply -space-x-px;
+
+    border-radius: theme("borderRadius.md");
+    display: inline-flex;
+    isolation: isolate;
 
     &__button {
-        @apply relative inline-flex cursor-pointer items-center border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10;
+        @apply border border-gray-300 text-sm hover:bg-gray-50 focus:z-10;
+
+        align-items: center;
+        background-color: theme("colors.white");
+        color: theme("colors.gray.500");
+        cursor: pointer;
+        display: inline-flex;
+        font-weight: 500;
+        position: relative;
 
         :root .dark & {
             @apply border-gray-600 bg-gray-900 text-gray-200 hover:bg-gray-800;
@@ -17,15 +29,17 @@
         }
 
         &:first-child {
-            @apply rounded-l-md;
+            border-radius: theme("borderRadius.md") 0 0 theme("borderRadius.md");
         }
 
         &:last-child {
-            @apply rounded-r-md;
+            border-radius: 0 theme("borderRadius.md") theme("borderRadius.md") 0;
         }
 
         &.is-disabled {
-            @apply cursor-not-allowed text-neutral-300 hover:bg-white;
+            @apply text-neutral-300 hover:bg-white;
+
+            cursor: not-allowed;
 
             :root .dark & {
                 @apply text-neutral-500 hover:bg-gray-800;
@@ -33,7 +47,9 @@
         }
 
         &.is-ellipsis {
-            @apply pointer-events-none text-neutral-300 hover:bg-white;
+            @apply text-neutral-300 hover:bg-white;
+
+            pointer-events: none;
 
             :root .dark & {
                 @apply text-neutral-500 hover:bg-gray-800;
@@ -46,32 +62,27 @@
     }
 
     &--size-xs .uxf-pagination__button {
-        @apply px-2;
-
         height: theme("inputSize.xs");
+        padding-inline: theme("spacing.2");
     }
 
     &--size-sm .uxf-pagination__button {
-        @apply px-3;
-
         height: theme("inputSize.sm");
+        padding-inline: theme("spacing.3");
     }
 
     &--size-default .uxf-pagination__button {
-        @apply px-4;
-
         height: theme("inputSize.default");
+        padding-inline: theme("spacing.4");
     }
 
     &--size-lg .uxf-pagination__button {
-        @apply px-5;
-
         height: theme("inputSize.lg");
+        padding-inline: theme("spacing.5");
     }
 
     &--size-xl .uxf-pagination__button {
-        @apply px-6;
-
         height: theme("inputSize.xl");
+        padding-inline: theme("spacing.6");
     }
 }

package/css/paper.css

@@ -1,3 +1,5 @@
 .uxf-paper {
-    @apply shadow-paper rounded-lg bg-white;
+    background-color: theme("colors.white");
+    border-radius: theme("borderRadius.lg");
+    box-shadow: theme("boxShadow.paper");
 }

package/css/radio-group.css

@@ -13,20 +13,22 @@
 
         &.is-selected {
             .uxf-radio-group__option-label {
-                @apply text-gray-900;
+                color: theme("colors.gray.900");
 
                 :root .dark & {
-                    @apply text-white;
+                    color: theme("colors.white");
                 }
             }
         }
     }
 
     &__option-label {
-        @apply line-clamp-2 text-gray-600;
+        @apply line-clamp-2;
+
+        color: theme("colors.gray.600");
 
         :root .dark & {
-            @apply text-white/80;
+            color: rgb(255 255 255 / 80%);
         }
     }
 
@@ -45,15 +47,21 @@
     }
 
     .uxf-radio-group__options-wrapper {
-        @apply divide-y divide-gray-200;
+        & > * + * {
+            border-color: theme("colors.gray.200");
+            border-top-width: 1px;
+        }
 
         :root .dark & {
-            @apply divide-gray-800;
+            & > * + * {
+                border-color: theme("colors.gray.800");
+            }
         }
     }
 
     .uxf-radio-group__option-wrapper {
-        @apply items-center py-4;
+        align-items: center;
+        padding-block: theme("spacing.4");
     }
 
     .uxf-radio-group__option-label {
@@ -77,17 +85,36 @@
     }
 
     .uxf-radio-group__option-wrapper {
-        @apply relative min-w-[112px] flex-col-reverse p-3 before:pointer-events-none before:absolute before:inset-0 before:rounded-lg before:border before:border-gray-400;
+        flex-direction: column-reverse;
+        min-width: 112px;
+        padding: theme("spacing.3");
+        position: relative;
+
+        &::before {
+            border: 1px solid theme("colors.gray.400");
+            border-radius: theme("borderRadius.lg");
+            content: "";
+            inset: 0;
+            pointer-events: none;
+            position: absolute;
+        }
 
         :root .dark & {
-            @apply border-gray-400;
+            &::before {
+                border-color: theme("colors.gray.400");
+            }
         }
 
         &.is-selected {
-            @apply before:border-primary before:border-2;
+            &::before {
+                border-color: theme("colors.primary.DEFAULT");
+                border-width: 2px;
+            }
 
             :root .dark & {
-                @apply before:border-primary;
+                &::before {
+                    border-color: theme("colors.primary.DEFAULT");
+                }
             }
         }
     }
@@ -110,9 +137,8 @@
     }
 
     .uxf-radio-group__option-wrapper {
-        @apply flex-row-reverse;
-
         align-items: center;
+        flex-direction: row-reverse;
     }
 
     .uxf-radio-group__option-label {

package/css/radio.css

@@ -1,91 +1,113 @@
 .uxf-radio {
-    @apply focus-visible:ring-primary flex shrink-0 items-center justify-center rounded-full border border-gray-400 transition focus-visible:ring-2;
+    @apply focus-visible:ring-primary transition focus-visible:ring-2;
+
+    align-items: center;
+    border: 1px solid theme("colors.gray.400");
+    border-radius: 9999px;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
 
     :root .dark & {
-        @apply focus-visible:ring-primary border-gray-400 focus-visible:ring-offset-gray-900;
+        @apply focus-visible:ring-primary focus-visible:ring-offset-gray-900;
+
+        border-color: theme("colors.gray.400");
     }
 
     &__inner {
-        @apply block rounded-full opacity-0 transition;
+        @apply transition;
+
+        border-radius: 9999px;
+        display: block;
+        opacity: 0;
     }
 
     &.is-selected {
-        @apply bg-primary border-none;
+        background-color: theme("colors.primary.DEFAULT");
+        border: none;
 
         :root .dark & {
-            @apply bg-primary border-none;
+            background-color: theme("colors.primary.DEFAULT");
+            border: none;
         }
 
         .uxf-radio__inner {
-            @apply bg-white opacity-100;
+            background-color: theme("colors.white");
+            opacity: 1;
 
             :root .dark & {
-                @apply bg-white;
+                background-color: theme("colors.white");
             }
         }
     }
 
     &.is-disabled {
-        @apply pointer-events-none border-gray-200;
+        border-color: theme("colors.gray.200");
+        pointer-events: none;
 
         :root .dark & {
-            @apply pointer-events-none border-gray-600;
+            border-color: theme("colors.gray.600");
+            pointer-events: none;
         }
 
         &.is-selected {
-            @apply bg-gray-200;
+            background-color: theme("colors.gray.200");
 
             :root .dark & {
-                @apply bg-gray-600;
+                background-color: theme("colors.gray.600");
             }
         }
 
         .uxf-radio__inner {
-            @apply bg-gray-400;
+            background-color: theme("colors.gray.400");
 
             :root .dark & {
-                @apply bg-gray-800;
+                background-color: theme("colors.gray.800");
             }
         }
     }
 
     &.is-invalid {
-        @apply border-error;
+        border-color: theme("colors.error.DEFAULT");
 
         :root .dark & {
-            @apply border-error;
+            border-color: theme("colors.error.DEFAULT");
         }
 
         &.is-selected {
-            @apply bg-error;
+            background-color: theme("colors.error.DEFAULT");
 
             :root .dark & {
-                @apply bg-error;
+                background-color: theme("colors.error.DEFAULT");
             }
         }
 
         .uxf-radio__inner {
-            @apply bg-white;
+            background-color: theme("colors.white");
 
             :root .dark & {
-                @apply bg-white;
+                background-color: theme("colors.white");
             }
         }
     }
 
     &--size-default {
-        @apply size-4;
+        height: theme("spacing.4");
+        width: theme("spacing.4");
 
         .uxf-radio__inner {
-            @apply size-1.5;
+            height: theme("spacing[1.5]");
+            width: theme("spacing[1.5]");
         }
     }
 
     &--size-lg {
-        @apply size-6;
+        height: theme("spacing.6");
+        width: theme("spacing.6");
 
         .uxf-radio__inner {
-            @apply size-2.5;
+            height: theme("spacing[2.5]");
+            width: theme("spacing[2.5]");
         }
     }
 }

package/css/raster-image.css

@@ -1,20 +1,29 @@
 .uxf-raster-image {
-    @apply block w-full;
+    display: block;
+    width: 100%;
 
     &--contain,
     &--cover {
-        @apply relative;
+        position: relative;
     }
 
     &__img {
-        @apply block h-auto w-full;
+        display: block;
+        height: auto;
+        width: 100%;
 
         &--contain {
-            @apply absolute inset-0 h-full object-contain;
+            height: 100%;
+            inset: 0;
+            object-fit: contain;
+            position: absolute;
         }
 
         &--cover {
-            @apply absolute inset-0 h-full object-cover;
+            height: 100%;
+            inset: 0;
+            object-fit: cover;
+            position: absolute;
         }
     }
 }

package/css/text-link.css

@@ -1,5 +1,9 @@
 .uxf-text-link {
-    @apply relative underline outline-none transition before:absolute before:-inset-1 focus-visible:before:rounded-lg focus-visible:before:border-2;
+    @apply transition before:absolute before:-inset-1 focus-visible:before:rounded-lg focus-visible:before:border-2;
+
+    outline: none;
+    position: relative;
+    text-decoration-line: underline;
 
     &--variant-default {
         color: theme("colors.brand_surface_default");

package/css/typography.css

@@ -1,25 +1,37 @@
 .uxf-typo-h1 {
-    @apply text-desktopH1 font-bold;
+    @apply text-desktopH1;
+
+    font-weight: 700;
 }
 
 .uxf-typo-h2 {
-    @apply text-desktopH2 font-bold;
+    @apply text-desktopH2;
+
+    font-weight: 700;
 }
 
 .uxf-typo-h3 {
-    @apply text-desktopH3 font-bold;
+    @apply text-desktopH3;
+
+    font-weight: 700;
 }
 
 .uxf-typo-h4 {
-    @apply text-desktopH4 font-bold;
+    @apply text-desktopH4;
+
+    font-weight: 700;
 }
 
 .uxf-typo-h5 {
-    @apply text-desktopH5 font-bold;
+    @apply text-desktopH5;
+
+    font-weight: 700;
 }
 
 .uxf-typo-h6 {
-    @apply text-desktopH6 font-bold;
+    @apply text-desktopH6;
+
+    font-weight: 700;
 }
 
 .uxf-typo-body {
@@ -31,7 +43,9 @@
 }
 
 .uxf-typo-button {
-    @apply text-body font-bold;
+    @apply text-body;
+
+    font-weight: 700;
 }
 
 .uxf-typo-caption {
@@ -39,13 +53,19 @@
 }
 
 .uxf-typo-medium {
-    @apply text-medium font-medium;
+    @apply text-medium;
+
+    font-weight: 500;
 }
 
 .uxf-typo-medium2 {
-    @apply text-medium2 font-medium;
+    @apply text-medium2;
+
+    font-weight: 500;
 }
 
 .uxf-typo-overline {
-    @apply text-overline font-bold;
+    @apply text-overline;
+
+    font-weight: 700;
 }

package/date-picker/date-picker-decade.js

@@ -84,10 +84,12 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
                 onClick: handleSetMonthViewMode,
                 title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.selectMonth) !== null && _f !== void 0 ? _f : t("uxf-ui-date-picker:select-month"),
             }, nextButtonProps: {
-                onClick: handleGoToNextDecadeClick,
+                isDisabled: !canGoToNextDecade,
+                onClick: canGoToNextDecade ? handleGoToNextDecadeClick : undefined,
                 title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.nextDecade) !== null && _h !== void 0 ? _h : t("uxf-ui-date-picker:next-decade"),
             }, prevButtonProps: {
-                onClick: handleGoToPrevDecadeClick,
+                isDisabled: !canGoToPrevDecade,
+                onClick: canGoToPrevDecade ? handleGoToPrevDecadeClick : undefined,
                 title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.prevDecade) !== null && _k !== void 0 ? _k : t("uxf-ui-date-picker:prev-decade"),
             }, yearButtonProps: {
                 children: currentYear,

package/date-picker/date-picker.stories.js

@@ -38,7 +38,7 @@ const date_1 = require("@uxf/localize/src/date");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const date_picker_1 = require("./date-picker");
-const today = (0, date_1.dayjsTz)();
+const today = (0, date_1.dayjsTz)().startOf("day");
 const minDate = today.subtract(10, "day").toDate();
 const maxDate = today.add(20, "days").toDate();
 const unavailableDates = [

package/date-range-picker/date-range-picker-decade.js

@@ -91,10 +91,12 @@ exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
                 onClick: handleSetMonthViewMode,
                 title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.selectMonth) !== null && _f !== void 0 ? _f : t("uxf-ui-date-range-picker:select-month"),
             }, nextButtonProps: {
-                onClick: handleGoToNextDecadeClick,
+                isDisabled: !canGoToNextDecade,
+                onClick: canGoToNextDecade ? handleGoToNextDecadeClick : undefined,
                 title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.nextDecade) !== null && _h !== void 0 ? _h : t("uxf-ui-date-range-picker:next-decade"),
             }, prevButtonProps: {
-                onClick: handleGoToPrevDecadeClick,
+                isDisabled: !canGoToPrevDecade,
+                onClick: canGoToPrevDecade ? handleGoToPrevDecadeClick : undefined,
                 title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.prevDecade) !== null && _k !== void 0 ? _k : t("uxf-ui-date-range-picker:prev-decade"),
             }, yearButtonProps: {
                 children: yearLabel,

package/label/label.js

@@ -37,11 +37,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importStar(require("react"));
 exports.Label = (0, react_1.forwardRef)((props, ref) => {
     const className = (0, cx_1.cx)("uxf-label", props.isHidden && "uxf-label--hidden", props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-    react_1.default.createElement("label", { className: className, form: props.form, htmlFor: props.htmlFor, id: props.id, onClick: props.onClick, ref: ref }, props.children));
+    react_1.default.createElement("label", { className: className, form: props.form, htmlFor: props.htmlFor, id: props.id, onClick: props.onClick, ref: ref, tabIndex: (0, is_not_nil_1.isNotNil)(ref) ? 0 : undefined }, props.children));
 });
 exports.Label.displayName = "UxfUiLabel";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.105.0",
+    "version": "11.106.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -23,11 +23,11 @@
     "dependencies": {
         "@floating-ui/react": "0.27.17",
         "@headlessui/react": "1.7.19",
-        "@uxf/core": "11.100.0",
-        "@uxf/core-react": "11.104.0",
-        "@uxf/datepicker": "11.100.1",
+        "@uxf/core": "11.106.0",
+        "@uxf/core-react": "11.106.0",
+        "@uxf/datepicker": "11.106.0",
         "@uxf/localize": "11.92.1",
-        "@uxf/styles": "11.104.0",
+        "@uxf/styles": "11.106.0",
         "color2k": "2.0.3",
         "dayjs": "1.11.19",
         "react-dropzone": "14.4.0"