@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.60

package/{src/components/icon/Icon.module.css → css/components/_icon.css}

@@ -21,11 +21,15 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .icon {
+@layer components {
+  .fabric-icon {
     position: relative;
+
+    display: inline-block;
+
     width: 1em;
     height: 1em;
+
     vertical-align: -0.125em;
 
     & > i,
@@ -36,13 +40,12 @@
       overflow: hidden;
       display: block;
 
-      width: 1em;
-      height: 1em;
+      width: 100%;
+      height: 100%;
 
       line-height: 1;
 
-      object-fit: cover;
-      border-radius: inherit;
+      object-fit: contain;
 
       fill: currentcolor;
     }
@@ -56,7 +59,7 @@
 
       &:hover {
         opacity: 0.9;
-        background-color: theme(colors.text/10%);
+        background-color: --alpha(var(--text-color-base) / 10%);
       }
 
       &:active {
@@ -65,7 +68,7 @@
     }
   }
 
-  [dir="rtl"] .icon[data-flip="true"] {
+  [dir="rtl"] .fabric-icon[data-flip="true"] {
     transform: scaleX(-1);
   }
 }

package/{src/components/media/Media.module.css → css/components/_media.css}

@@ -21,9 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .mediaContainer {
-    &.mediaReel {
+@layer components {
+  .fabric-mediaContainer {
+    &.fabric-mediaReel {
       &::after,
       &::before {
         content: "";
@@ -57,54 +57,54 @@
       }
     }
 
-    & .mediaPlaceholder {
+    & .fabric-mediaPlaceholder {
       /* might add styles later */
     }
 
-    & .mediaControls {
+    & .fabric-mediaControls {
       & [data-ref="button"] {
         margin: 0;
 
         & > :first-child {
           color: #fff;
-          background-color: theme(colors.black/50%);
+          background-color: --alpha(var(--color-black) / 50%);
 
           &:hover {
-            color: theme(colors.primary.600);
-            background-color: theme(colors.black/80%);
+            color: var(--color-primary-600);
+            background-color: --alpha(var(--color-black) / 80%);
           }
         }
       }
 
-      & .mediaControlAction > :first-child {
-        background-color: theme(colors.black/70%);
+      & .fabric-mediaControlAction > :first-child {
+        background-color: --alpha(var(--color-black) / 70%);
       }
 
-      & .mediaControlPlaceholder {
+      & .fabric-mediaControlPlaceholder {
         /* might add styles later */
       }
 
-      & .mediaControlAction + .mediaControlAction {
+      & .fabric-mediaControlAction + .fabric-mediaControlAction {
         margin-top: 8px;
       }
     }
   }
 
-  .media {
+  .fabric-media {
     /* might add styles later */
   }
 }
 
-@layer util {
-  & .mediaControls {
+@layer utilities {
+  & .fabric-mediaControls {
     &:hover {
-      & .mediaControlPlaceholder {
+      & .fabric-mediaControlPlaceholder {
         display: none;
       }
     }
 
     &:not(:hover) {
-      & .mediaControlAction {
+      & .fabric-mediaControlAction {
         display: none;
       }
     }

package/{src/components/menu/Menu.module.css → css/components/_menu.css}

@@ -21,34 +21,34 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .menuItem {
-    --color: theme(colors.primary.DEFAULT);
+@layer components {
+  .fabric-menuItem {
+    --color: var(--color-primary-500);
 
     &[data-color="accent"] {
-      --color: theme(colors.accent.DEFAULT);
+      --color: var(--color-accent-500);
     }
 
     &[data-color="info"] {
-      --color: theme(colors.info.DEFAULT);
+      --color: var(--color-info-500);
     }
 
     &[data-color="danger"] {
-      --color: theme(colors.danger.DEFAULT);
+      --color: var(--color-danger-500);
     }
 
     &[data-color="success"] {
-      --color: theme(colors.success.DEFAULT);
+      --color: var(--color-success-500);
     }
 
     &[data-color="warning"] {
-      --color: theme(colors.warning.DEFAULT);
+      --color: var(--color-warning-500);
     }
   }
 }
 
-@layer var {
-  .menuItem {
+@layer variants {
+  .fabric-menuItem {
     color: color-mix(in lab, var(--color) 80%, var(--fabric-text));
 
     > * {
@@ -56,26 +56,27 @@
     }
 
     &[data-focus="true"] {
-      background-color: color(from var(--color) srgb r g b / 15%);
+      background-color: color-mix(in lab, var(--color) 15%, var(--fabric-bg));
     }
 
     &:active {
-      background-color: color(from var(--color) srgb r g b / 35%);
+      background-color: color-mix(in lab, var(--color) 35%, var(--fabric-bg));
     }
 
     &[data-open="true"] {
-      background-color: color(from var(--color) srgb r g b / 10%);
+      background-color: color-mix(in lab, var(--color) 10%, var(--fabric-bg));
     }
 
-    &.active,
-    &:global(.active) {
+    &.active {
       pointer-events: none;
-      background-color: color(from var(--color) srgb r g b / 20%);
+      background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
 
       & > div {
         box-shadow: 4px 0 0 var(--color) inset;
 
-        :global([dir="rtl"]) & {
+        @variant rtl {
           box-shadow: -4px 0 0 var(--color) inset;
         }
       }
@@ -83,7 +84,7 @@
 
     &.disabled {
       pointer-events: none;
-      color: theme(textColor.tint.500);
+      color: var(--text-tint-500);
       opacity: 0.5;
 
       & > label ~ * {
@@ -92,7 +93,7 @@
     }
   }
 
-  .menuIcon {
+  .fabric-menuIcon {
     padding: 0.3em;
     font-size: 1.25em;
 
@@ -103,7 +104,7 @@
     }
   }
 
-  :global(.menu-list.hide-icons) .menuIcon {
+  .fabric-menu-list.hide-icons .fabric-menuIcon {
     width: 0.125em;
   }
 }

package/{src/overlays/message/Message.module.css → css/components/_message.css}

@@ -21,8 +21,8 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .message {
+@layer components {
+  .fabric-message {
     margin-top: -100%;
     opacity: 0;
     transition:

package/{src/components/meter/Meter.module.css → css/components/_meter.css}

@@ -21,9 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .meter {
-    & .meterBar {
+@layer components {
+  .fabric-meter {
+    & .fabric-meterBar {
       flex: 1 1 1rem;
 
       min-width: 1rem;
@@ -42,7 +42,7 @@
       line-height: 1;
     }
 
-    & .meterBar[data-active="true"] {
+    & .fabric-meterBar[data-active="true"] {
       &:nth-child(1),
       &:nth-child(2),
       &:nth-child(3),
@@ -80,12 +80,12 @@
       }
     }
 
-    &[class*="text-primary"] .meterBar[data-active="true"],
-    &[class*="text-accent"] .meterBar[data-active="true"],
-    &[class*="text-info"] .meterBar[data-active="true"],
-    &[class*="text-danger"] .meterBar[data-active="true"],
-    &[class*="text-success"] .meterBar[data-active="true"],
-    &[class*="text-warning"] .meterBar[data-active="true"] {
+    &[class*="text-primary"] .fabric-meterBar[data-active="true"],
+    &[class*="text-accent"] .fabric-meterBar[data-active="true"],
+    &[class*="text-info"] .fabric-meterBar[data-active="true"],
+    &[class*="text-danger"] .fabric-meterBar[data-active="true"],
+    &[class*="text-success"] .fabric-meterBar[data-active="true"],
+    &[class*="text-warning"] .fabric-meterBar[data-active="true"] {
       color: currentColor;
 
       &:nth-child(1)::after {

package/{src/overlays/modal/Modal.module.css → css/components/_modal.css}

@@ -21,13 +21,13 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .modal {
+@layer components {
+  .fabric-modal {
     z-index: var(--z-overlay);
 
     width: 32rem;
-    max-width: 90vw;
-    max-height: 90vh;
+    max-width: 100%;
+    max-height: 100%;
     margin-top: -100%;
 
     opacity: 0;
@@ -41,12 +41,12 @@
       opacity: 1;
     }
 
-    & .modalHeader {
-      background-color: theme(backgroundColor.base);
-      border-bottom: 0.5px solid theme(borderColor.dimmed);
+    & .fabric-modalHeader {
+      background-color: var(--bg-color-base);
+      border-bottom: 0.5px solid var(--border-color-dimmed);
     }
 
-    & .modalBody {
+    & .fabric-modalBody {
       grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
     }
   }

package/{src/components/panel/Panel.module.css → css/components/_panel.css}

@@ -21,36 +21,36 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .panel {
+@layer components {
+  .fabric-panel {
     grid-template: "head" auto "content" 1fr / 1fr;
-    background-color: theme(colors.bg);
+    background-color: var(--fabric-bg);
 
     & > * {
       background-color: transparent;
     }
 
-    &:global(.fixed) {
-      box-shadow: 0 0 18px theme(boxShadowColor.base);
+    &.fixed {
+      box-shadow: 0 0 18px var(--fabric-shadow);
     }
 
-    & .panelHeader {
-      background-color: theme(backgroundColor.dimmed);
+    & .fabric-panelHeader {
+      background-color: var(--bg-color-dimmed);
     }
 
-    & .panelAction {
+    & .fabric-panelAction {
       padding: 0.25rem;
     }
 
-    & .panelBody {
+    & .fabric-panelBody {
       grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
     }
   }
 }
 
-@layer util {
-  .panelGroup {
-    & > .panel {
+@layer utilities {
+  .fabric-panelGroup {
+    & > .fabric-panel {
       &[data-collapsed="true"] {
         flex: 0 0 auto;
       }
@@ -61,25 +61,25 @@
 
         [data-ref="panelCollapse"] {
           pointer-events: none;
-          color: var(--tint);
+          color: var(--color-tint);
           opacity: 0.25;
         }
       }
     }
 
-    & > .panel:not(:first-child) {
+    & > .fabric-panel:not(:first-child) {
       border-start-start-radius: 0;
       border-start-end-radius: 0;
     }
 
-    & > .panel:not(:last-child) {
-      border-bottom: 1px solid theme(backgroundColor.base);
+    & > .fabric-panel:not(:last-child) {
+      border-bottom: 1px solid var(--bg-color-base);
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
   }
 
-  [data-ref="asideBody"] > .panelGroup > .panel {
+  [data-ref="asideBody"] > .fabric-panelGroup > .fabric-panel {
     border-radius: 0;
     outline: 0;
   }

package/{src/components/progress/Progress.module.css → css/components/_progress.css}

@@ -21,10 +21,10 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .progressbar {
+@layer components {
+  .fabric-progressbar {
     height: 1em;
-    box-shadow: 0 0 4px 0 theme(boxShadowColor.dimmed) inset;
+    box-shadow: 0 0 4px 0 var(--fabric-shadow) inset;
 
     & > div:last-child {
       width: calc(var(--progress) * 1%);
@@ -41,13 +41,13 @@
 
         font-size: 0.5em;
         line-height: 0.5em;
-        color: var(--white);
+        color: var(--color-white);
         text-align: center;
         vertical-align: middle;
       }
     }
 
-    .progressTrack {
+    .fabric-progressTrack {
       width: calc(var(--progress) * 1%);
       transition: width 0.5s;
     }
@@ -59,12 +59,9 @@
     }
   }
 
-  .progressAnimate {
+  .fabric-progressAnimate {
     background-image: var(--progress-gradient);
     background-size: 1rem 1rem;
-
-    & :global {
-      animation: progress 750ms linear infinite;
-    }
+    animation: bgprogress 750ms linear infinite;
   }
 }

package/css/components/_stepper.css

@@ -0,0 +1,86 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer components {
+  .fabric-stepper {
+    & .fabric-stepper--pill {
+      position: relative;
+
+      flex: 0 0 auto;
+
+      color: var(--color-primary-600);
+
+      background-color: var(--color-primary-50);
+      border-radius: var(--radius);
+
+      & .fabric-icon {
+        padding: 0.125rem;
+        font-size: 1.5rem;
+      }
+
+      & label {
+        display: inline-block;
+
+        padding: 0.125rem 0.5rem;
+
+        font-size: 0.875rem;
+        font-weight: 500;
+        line-height: 1.5rem;
+      }
+
+      &:not(:last-child) {
+        margin-inline-end: 3rem;
+
+        &::after {
+          content: "";
+
+          position: absolute;
+          top: 50%;
+          right: calc(-3rem - 1px);
+          transform: translateY(-50%);
+
+          width: 3rem;
+          height: 2px;
+
+          background-color: var(--color-primary-50);
+
+          transition: background-color 0.3s var(--ease-in-out);
+        }
+      }
+
+      &[data-state="active"] {
+        color: var(--color-primary-50);
+        background-color: var(--color-primary-600);
+      }
+
+      &[data-state="completed"] {
+        color: var(--color-primary-50);
+        background-color: var(--color-primary-700);
+
+        &::after {
+          background-color: var(--color-primary-700);
+        }
+      }
+    }
+  }
+}