@react-fabric/core 1.0.0-beta.9 → 1.0.2

package/{src/components/tabpanel/TabPanel.module.css → css/components/_tabPanel.css}

@@ -21,40 +21,123 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .tabPanel {
-    --color: theme(colors.primary.500);
+@layer components {
+  .fabric-tabPanel {
+    --color: var(--color-primary-500);
 
-    & > .tabList {
+    &[data-orientation="top"] {
+      grid-template: "tablist" auto "content" 1fr / 1fr;
+
+      .fabric-tabHeader {
+        box-shadow: 0 -1px 0 var(--border-color-bright) inset;
+
+        .fabric-tabButton {
+          padding: 0.25rem 0.5rem;
+        }
+      }
+    }
+
+    &[data-orientation="bottom"] {
+      grid-template: "content" 1fr "tablist" auto / 1fr;
+
+      .fabric-tabHeader {
+        margin-top: 1px;
+        box-shadow: 0 1px 0 var(--border-color-bright) inset;
+
+        .fabric-tabButton {
+          padding: 0.25rem 0.5rem;
+        }
+      }
+    }
+
+    &[data-orientation="start"] {
+      grid-template: "tablist content" 1fr / auto 1fr;
+
+      .fabric-tabHeader {
+        box-shadow: -1px 0 0 var(--border-color-bright) inset;
+
+        .fabric-tabButton {
+          min-width: 5rem;
+          padding: 0.5rem 0.25rem;
+        }
+
+        &.tab-rotate .fabric-tabButton {
+          flex-flow: column;
+          width: unset !important;
+          min-width: unset !important;
+          min-height: 5rem;
+
+          & > label {
+            writing-mode: sideways-lr;
+          }
+        }
+      }
+    }
+
+    &[data-orientation="end"] {
+      grid-template: "content tablist" 1fr / 1fr auto;
+
+      .fabric-tabHeader {
+        box-shadow: 1px 0 0 var(--border-color-bright) inset;
+
+        .fabric-tabButton {
+          min-width: 5rem;
+          padding: 0.5rem 0.25rem;
+        }
+
+        &.tab-rotate .fabric-tabButton {
+          flex-flow: column;
+          width: unset !important;
+          min-width: unset !important;
+          min-height: 5rem;
+
+          & > label {
+            writing-mode: sideways-rl;
+          }
+        }
+      }
+    }
+  }
+}
+
+@layer utilities {
+  .fabric-tabPanel {
+    & .fabric-tabList > .fabric-tabButton.active {
+      pointer-events: none;
+    }
+
+    & > .fabric-tabHeader {
       grid-area: tablist;
 
-      & > .tabButton {
+      & > .fabric-tabList > .fabric-tabButton {
+        border-radius: var(--rounding-cap);
+
         &[data-color="accent"] {
-          --color: theme(colors.accent.500);
+          --color: var(--color-accent-500);
         }
 
         &[data-color="info"] {
-          --color: theme(colors.info.500);
+          --color: var(--color-info-500);
         }
 
         &[data-color="danger"] {
-          --color: theme(colors.danger.500);
+          --color: var(--color-danger-500);
         }
 
         &[data-color="success"] {
-          --color: theme(colors.success.500);
+          --color: var(--color-success-500);
         }
 
         &[data-color="warning"] {
-          --color: theme(colors.warning.500);
+          --color: var(--color-warning-500);
         }
 
-        &:not(:global(.active)):hover {
+        &:not(.active):hover {
           color: color-mix(in lab, var(--color) 65%, var(--fabric-text));
-          background-color: theme(colors.tint.100/50%);
+          background-color: var(--color-tint-200);
         }
 
-        &:global(.active) {
+        &.active {
           --active-color: var(--color);
 
           font-weight: 500;
@@ -64,137 +147,94 @@
     }
 
     &[data-variant="outline"] {
-      & > .tabList > .tabButton:global(.active) {
-        --active-color: theme(backgroundColor.base);
-        --active-border: 0 0 0 1px theme(borderColor.base) inset;
+      & .fabric-tabList > .fabric-tabButton.active {
+        --active-color: var(--bg-color-default);
+        --active-border: 0 0 0 1px var(--border-color-default) inset;
 
-        background-color: theme(backgroundColor.base);
+        background-color: var(--bg-color-default);
       }
     }
 
     &[data-variant="solid"] {
-      & > .tabList > .tabButton:global(.active) {
-        color: theme(colors.white);
+      & .fabric-tabList > .fabric-tabButton.active {
+        color: var(--color-white);
         background-color: var(--color);
       }
     }
 
-    &[data-variant="soft"] {
-      & > .tabList > .tabButton:global(.active) {
+    &[data-variant="soft"],
+    &[data-variant="pills"] {
+      & .fabric-tabList > .fabric-tabButton.active {
         background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
       }
     }
 
-    &[data-orientation="top"] {
-      grid-template: "tablist" auto "content" 1fr / 1fr;
-      padding-inline: 2px;
-
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
-        box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
-      }
-    }
-
-    &[data-orientation="bottom"] {
-      grid-template: "content" 1fr "tablist" auto / 1fr;
-      padding-inline: 2px;
-
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
-        box-shadow: 0 1px 0 theme(borderColor.dimmed) inset;
-      }
-    }
-
-    &[data-orientation="start"] {
-      grid-template: "tablist content" 1fr / auto 1fr;
-      padding-block: 2px;
-
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
-        box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
-      }
-    }
-
-    &[data-orientation="end"] {
-      grid-template: "content tablist" 1fr / 1fr auto;
-      padding-block: 2px;
-
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
-        box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;
-      }
-    }
-  }
-}
-
-@layer util {
-  .tabPanel {
-    & > .tabList > .tabButton:global(.active) {
-      pointer-events: none;
-    }
-
-    &[data-orientation="top"] > .tabList {
-      & > .tabButton:global(.active) {
+    &[data-orientation="top"]:not([data-variant="pills"]) .fabric-tabList {
+      & > .fabric-tabButton.active {
         box-shadow:
           0 -2px 0 var(--active-color) inset,
           var(--active-border, 0 0 0 transparent);
       }
     }
 
-    &[data-orientation="bottom"] > .tabList {
-      & > .tabButton:global(.active) {
+    &[data-orientation="bottom"]:not([data-variant="pills"]) .fabric-tabList {
+      & > .fabric-tabButton.active {
         box-shadow:
           0 2px 0 var(--active-color) inset,
           var(--active-border, 0 0 0 transparent);
       }
     }
 
-    &[data-orientation="start"] > .tabList {
-      & > .tabButton:global(.active) {
+    &[data-orientation="start"]:not([data-variant="pills"]) .fabric-tabList {
+      & > .fabric-tabButton.active {
         box-shadow:
           -2px 0 0 var(--active-color) inset,
           var(--active-border, 0 0 0 transparent);
       }
     }
 
-    &[data-orientation="end"] > .tabList {
-      & > .tabButton:global(.active) {
+    &[data-orientation="end"]:not([data-variant="pills"]) .fabric-tabList {
+      & > .fabric-tabButton.active {
         box-shadow:
           2px 0 0 var(--active-color) inset,
           var(--active-border, 0 0 0 transparent);
       }
     }
 
-    &[data-orientation="top"] > .tabList > .tabButton {
+    &[data-orientation="top"]:not([data-variant="pills"]) .fabric-tabList > .fabric-tabButton {
       margin-top: 2px;
       margin-inline: 1px;
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="bottom"] > .tabList > .tabButton {
+    &[data-orientation="bottom"]:not([data-variant="pills"]) .fabric-tabList > .fabric-tabButton {
       margin-bottom: 2px;
       margin-inline: 1px;
       border-start-start-radius: 0;
       border-start-end-radius: 0;
     }
 
-    &[data-orientation="start"] > .tabList > .tabButton {
+    &[data-orientation="start"]:not([data-variant="pills"]) .fabric-tabList > .fabric-tabButton {
       margin-block: 1px;
       margin-inline-start: 2px;
       border-start-end-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="end"] > .tabList > .tabButton {
+    &[data-orientation="end"]:not([data-variant="pills"]) .fabric-tabList > .fabric-tabButton {
       margin-block: 1px;
       margin-inline-end: 2px;
       border-start-start-radius: 0;
       border-end-start-radius: 0;
     }
+
+    &[data-variant="pills"] {
+      .fabric-tabList > .fabric-tabButton {
+        margin: 2px;
+        border-radius: var(--rounding);
+        box-shadow: 0 0 2px var(--active-color) inset;
+      }
+    }
   }
 }

package/css/components/_titlebar.css

@@ -0,0 +1,48 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 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-titlebar {
+    grid-area: title;
+    grid-template-areas: "icon title actions";
+    grid-template-columns: auto 1fr auto;
+
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-color-dimmed);
+
+    & .fabric-titlebarTitle {
+      grid-area: title;
+    }
+
+    & .fabric-titlebarIcon {
+      grid-area: icon;
+    }
+
+    & .fabric-titlebarActions {
+      grid-area: actions;
+    }
+  }
+}

package/css/components/index.css

@@ -0,0 +1,47 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 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.
+ */
+
+@import "./_actionLabel.css";
+@import "./_alert.css";
+@import "./_animations.css";
+@import "./_avatar.css";
+@import "./_button.css";
+@import "./_buttonGroup.css";
+@import "./_card.css";
+@import "./_callout.css";
+@import "./_chip.css";
+@import "./_collapsable.css";
+@import "./_divider.css";
+@import "./_dropdown.css";
+@import "./_flyout.css";
+@import "./_media.css";
+@import "./_menu.css";
+@import "./_meter.css";
+@import "./_modal.css";
+@import "./_panel.css";
+@import "./_progress.css";
+@import "./_sonner.css";
+@import "./_tabPanel.css";
+@import "./_titlebar.css";

package/css/core/_aside.css

@@ -0,0 +1,176 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 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-aside {
+    --aside-bg: var(--bg-color-default);
+    --aside-border: var(--border-color-soft);
+    --aside-margin: 0;
+
+    margin: var(--aside-margin);
+
+    &[data-align="start"] {
+      grid-area: start;
+
+      & .fabric-asideContainer {
+        grid-template: "title title" auto "content resizer" 1fr "pin pin" auto / 1fr auto;
+        border-inline-end: 1px solid var(--aside-border);
+      }
+    }
+
+    &[data-align="end"] {
+      grid-area: end;
+
+      & .fabric-asideContainer {
+        grid-template: "title title" auto "resizer content" 1fr "pin pin" auto / auto 1fr;
+        border-inline-start: 1px solid var(--aside-border);
+      }
+    }
+
+    & .fabric-asideContainer {
+      min-width: 0;
+      min-height: 0;
+      background-color: var(--aside-bg);
+    }
+
+    & .fabric-asideTitle {
+      grid-area: title;
+    }
+
+    & .fabric-asideIcon {
+      grid-area: icon;
+    }
+
+    & .fabric-asidePlaceholder {
+      z-index: 1;
+
+      display: grid;
+      grid-template: "icon" auto "title" auto "." 1fr "pin" auto / 1fr;
+      place-content: start;
+
+      border: inherit;
+
+      font-weight: 500;
+      color: var(--text-color-dimmed);
+
+      background-color: var(--aside-bg);
+    }
+
+    & .fabric-asideResizer {
+      cursor: col-resize;
+      grid-area: resizer;
+      width: 0.25rem;
+    }
+  }
+}
+
+@layer utilities {
+  .fabric-asideHeader {
+    width: unset;
+    height: unset;
+    margin: unset;
+  }
+
+  .fabric-asideContainer {
+    > .fabric-panelGroup > .fabric-panel {
+      border-radius: 0;
+      outline: 0;
+    }
+  }
+
+  .fabric-aside[data-collapsed="true"] {
+    position: relative;
+
+    & .fabric-asideContainer {
+      position: absolute;
+      z-index: 1;
+      inset: 0;
+      transition: transform cubic-bezier(0.4, 0, 0.2, 1) 150ms;
+
+      &:has(.fabric-style-effect) {
+        background-color: --alpha(var(--aside-bg) / 75%);
+        backdrop-filter: blur(1rem);
+      }
+    }
+  }
+
+  [dir="ltr"] .fabric-aside[data-align="start"][data-collapsed="true"],
+  [dir="rtl"] .fabric-aside[data-align="end"][data-collapsed="true"] {
+    & .fabric-asideContainer {
+      right: unset;
+      transform: translateX(calc(-100% - var(--aside-margin)));
+      grid-area: unset;
+    }
+
+    & .fabric-asidePlaceholder {
+      & .fabric-asideIcon {
+        rotate: -90deg;
+      }
+
+      & .fabric-asideTitle {
+        writing-mode: sideways-lr;
+      }
+    }
+
+    &:not([data-flyout="true"]) {
+      margin-inline-start: 0;
+    }
+
+    &[data-peek="true"] .fabric-asideContainer {
+      transform: translateX(0);
+      border: 1px solid var(--border-color-soft);
+      box-shadow: 0 0 4rem 1px var(--fabric-shadow);
+    }
+  }
+
+  [dir="ltr"] .fabric-aside[data-align="end"][data-collapsed="true"],
+  [dir="rtl"] .fabric-aside[data-align="start"][data-collapsed="true"] {
+    & .fabric-asideContainer {
+      left: unset;
+      transform: translateX(calc(100% + var(--aside-margin)));
+      grid-area: unset;
+    }
+
+    & .fabric-asidePlaceholder {
+      & .fabric-asideIcon {
+        rotate: 90deg;
+      }
+
+      & .fabric-asideTitle {
+        writing-mode: sideways-rl;
+      }
+    }
+
+    &:not([data-flyout="true"]) {
+      margin-inline-end: 0;
+    }
+
+    &[data-peek="true"] .fabric-asideContainer {
+      transform: translateX(0);
+      border: 1px solid var(--border-color-soft);
+      box-shadow: 0 0 4rem 1px var(--fabric-shadow);
+    }
+  }
+}

package/css/core/_content.css

@@ -0,0 +1,31 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 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-content {
+    overflow: auto;
+    padding: 1rem;
+  }
+}

package/css/core/_errorboundary.css

@@ -0,0 +1,55 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 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-errorBoundary {
+    grid-area: inherit;
+    grid-template: "icon message" auto "detail detail" auto / auto 1fr;
+    align-self: flex-start;
+
+    max-height: calc(100% - 2rem);
+    margin: 1rem;
+    padding: 0.5rem;
+    border: 3px solid transparent;
+
+    background-image:
+      linear-gradient(var(--fabric-bg)), repeating-linear-gradient(128deg, rgb(255 0 0 / 70%) 0 4px, rgb(255 0 0 / 20%) 4px 8px);
+    background-clip: padding-box, border-box;
+    outline: 1px solid rgb(255 0 0 / 70%);
+
+    & .fabric-boundaryIcon {
+      grid-area: icon;
+    }
+
+    & .fabric-boundaryMessage {
+      grid-area: message;
+    }
+
+    & .fabric-boundaryDetail {
+      grid-area: detail;
+      grid-template-rows: auto 1fr;
+    }
+  }
+}