@uxf/ui 11.104.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/modal/README.md

@@ -50,7 +50,7 @@ function Component(props: AppProps) {
     return (
         <div>
             <Button onClick={() => setIsOpen(true)}>Click to open modal</Button>
-            <Modal close={() => setIsOpen(false)} isOpen={isOpen}>
+            <Modal onClose={() => setIsOpen(false)} isOpen={isOpen}>
                 <DialogPanel width="xs">Whatever content inside Modal</DialogPanel>
             </Modal>
         </div>
@@ -64,15 +64,13 @@ The modal system supports opening multiple modals simultaneously in different la
 
 ### Default Layer Configuration
 
-By default, four layers are available:
+By default, two layers are available:
 
 ```typescript
 {
   layers: {
-    main: { name: "main", zIndex: 1000 },
-    confirmation: { name: "confirmation", zIndex: 1010 },
-    alert: { name: "alert", zIndex: 1020 },
-    critical: { name: "critical", zIndex: 1030 },
+    main: { name: "main", zIndex: 100 },
+    confirm: { name: "confirm", zIndex: 1000 },
   },
   defaultLayer: "main"
 }
@@ -81,7 +79,7 @@ By default, four layers are available:
 ### Basic Usage with Layers
 
 ```tsx
-import { openModal, closeModal, closeAllModals, closeModalsByLayer } from "@uxf/ui/modal";
+import { openModal, closeModal, closeModalLayer, closeAllModals } from "@uxf/ui/modal";
 
 // Open modal in default "main" layer
 openModal({
@@ -92,17 +90,14 @@ openModal({
 openModal({
     children: <DialogPanel>Confirmation dialog</DialogPanel>
 }, {
-    layer: "confirmation" // TypeScript autocompletes: "main" | "confirmation" | "alert" | "critical"
+    layer: "confirm" // TypeScript autocompletes: "main" | "confirm"
 });
 
-// Close topmost modal
+// Close topmost modal (highest z-index)
 closeModal();
 
-// Close modal in specific layer
-closeModal("confirmation");
-
-// Close all modals in a layer
-closeModalsByLayer("alert");
+// Close all modals in a specific layer
+closeModalLayer("confirm");
 
 // Close all modals across all layers
 closeAllModals();
@@ -113,7 +108,58 @@ closeAllModals();
 - Modals with higher z-index appear on top of modals with lower z-index
 - Only the topmost modal (highest z-index) responds to backdrop clicks and ESC key
 - Clicking inside a higher-layer modal will NOT close lower-layer modals
-- Each layer can have one modal by default (use `replace: false` option to allow multiple)
+- Each layer can have one modal by default (use `shouldReplace: false` option to allow multiple)
+
+## Closing Modals
+
+### Service functions (for modals opened via `openModal`)
+
+| Function | Description |
+|---|---|
+| `closeModal()` | Closes the topmost modal (highest z-index across all layers) |
+| `closeModalLayer(layer)` | Closes all modals in the specified layer |
+| `closeAllModals()` | Closes all modals across all layers |
+
+```tsx
+import { closeModal, closeModalLayer, closeAllModals } from "@uxf/ui/modal";
+
+closeModal();                  // closes topmost
+closeModalLayer("confirm");    // closes all in "confirm" layer
+closeAllModals();              // closes everything
+```
+
+### `onClose` callback
+
+When opening a modal via `openModal`, you can pass an `onClose` callback that fires whenever the modal is closed (by backdrop click, ESC key, or programmatic close):
+
+```tsx
+openModal({
+    children: <DialogPanel>Content</DialogPanel>,
+    onClose: () => console.log("modal closed"),
+});
+```
+
+### Disabling close triggers
+
+You can prevent the modal from being closed by backdrop click or ESC key:
+
+```tsx
+openModal({
+    children: <DialogPanel>Content</DialogPanel>,
+    isBackdropCloseDisabled: true,    // backdrop click won't close
+    isEscapeKeyCloseDisabled: true,   // ESC key won't close
+});
+```
+
+### `Modal` component (controlled)
+
+When using the `Modal` component directly, pass `onClose` to handle close events:
+
+```tsx
+<Modal onClose={() => setIsOpen(false)} isOpen={isOpen} isBackdropCloseDisabled={false}>
+    <DialogPanel>Content</DialogPanel>
+</Modal>
+```
 
 ## Custom Layer Configuration
 
@@ -180,10 +226,9 @@ You can extend the available layer names using TypeScript declaration merging:
 // types/modal.d.ts (in your project)
 import "@uxf/ui/modal";
 
-declare module "@uxf/ui/modal" {
+declare module "@uxf/ui/modal/theme" {
     interface ModalLayers {
         // Add your custom layer names
-        base: true;
         form: true;
         notification: true;
         tooltip: true;
@@ -201,11 +246,8 @@ const customModalLayers = {
     layers: {
         // Default layers (keep or override)
         main: { name: "main", zIndex: 1000 },
-        confirmation: { name: "confirmation", zIndex: 1010 },
-        alert: { name: "alert", zIndex: 1020 },
-        critical: { name: "critical", zIndex: 1030 },
+        confirm: { name: "confirm", zIndex: 1010 },
         // Your custom layers
-        base: { name: "base", zIndex: 900 },
         form: { name: "form", zIndex: 1100 },
         notification: { name: "notification", zIndex: 9000 },
         tooltip: { name: "tooltip", zIndex: 9999 },
@@ -228,7 +270,7 @@ openModal({
     children: <DialogPanel>Form content</DialogPanel>
 }, {
     layer: "form" // ✅ TypeScript autocompletes and validates!
-    // Available: "main" | "confirmation" | "alert" | "critical" | "base" | "form" | "notification" | "tooltip"
+    // Available: "main" | "confirm" | "form" | "notification" | "tooltip"
 });
 ```