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

package/css/core/_responsive.css

@@ -0,0 +1,45 @@
+/**
+ * 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-row {
+    margin: calc(-0.5 * var(--gutter));
+
+    & + .fabric-row {
+      margin-top: calc(0.5 * var(--gutter));
+    }
+  }
+
+  .fabric-col {
+    flex: 0 0 auto;
+    max-width: calc((12 / 12) * 100% - var(--gutter, 0px));
+    margin: calc(0.5 * var(--gutter));
+
+    &.stretch-content > * {
+      min-width: 100%;
+      min-height: 100%;
+    }
+  }
+}

package/css/core/_typography.css

@@ -0,0 +1,69 @@
+/**
+ * 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-title {
+    padding: 4px 2px;
+    line-height: 1.125;
+    white-space: pre-wrap;
+  }
+
+  .fabric-moreLink {
+    margin: -0.25rem 0 0.25rem;
+    text-align: end;
+
+    & > span {
+      cursor: pointer;
+      user-select: none;
+      font-size: 0.75rem;
+      color: var(--color-secondary-700);
+
+      &:hover {
+        color: var(--color-secondary-500);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+      }
+    }
+  }
+}
+
+@layer utilities {
+  .fabric-text {
+    -webkit-line-clamp: var(--text-clamp);
+    line-clamp: var(--text-clamp);
+  }
+
+  .fabric-abbr {
+    --abbr-color: var(--color-secondary);
+
+    color: color-mix(in lab, var(--abbr-color) 50%, var(--fabric-text));
+  }
+
+  .fabric-mark {
+    --mark-color: var(--color-primary);
+
+    background-color: color-mix(in lab, var(--mark-color) 25%, var(--fabric-bg));
+  }
+}

package/css/core/_viewport.css

@@ -0,0 +1,33 @@
+/**
+ * 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-viewport {
+    --fabric-viewport: color-mix(in lab, var(--fabric-bg) 76%, var(--color-tint));
+
+    color: var(--fabric-text);
+    background-color: var(--fabric-viewport);
+  }
+}

package/{src/hooks/useClientService.tsx → css/core/index.css}

@@ -4,7 +4,7 @@
  *
  *
  * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * 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,
@@ -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.
  */
 
-export const useClientService = (
-  clientApi: AnyObject,
-  serverMock?: AnyObject,
-) => {
-  return typeof window === "undefined" ? serverMock : clientApi;
-};
+@import "./_viewport.css";
+@import "./_content.css";
+@import "./_aside.css";
+@import "./_typography.css";
+@import "./_responsive.css";
+@import "./_errorboundary.css";

package/css/reset/_gradients.css

@@ -1,51 +1,54 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @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 MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * 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.
+ * 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 reset {
+@layer base {
   :root {
     --click-gradient: linear-gradient(
       var(--fabric-gradient-deg, 180deg),
-      rgb(255 255 255 / 8%) 0%,
+      rgb(255 255 255 / 9%) 0%,
       transparent 25%,
       transparent 50%,
-      rgb(0 0 0 / 8%) 100%
+      rgb(0 0 0 / 9%) 100%
     );
-    --active-gradient: linear-gradient(
-      0deg,
-      rgb(255 255 255 / 5%) 0%,
-      transparent 15%,
-      transparent 85%,
-      rgb(0 0 0 / 5%) 100%
+    --button-gradient: linear-gradient(
+      var(--fabric-gradient-deg, 180deg),
+      rgb(255 255 255 / 9%) 0%,
+      transparent 0.25em,
+      transparent calc(100% - 0.25em),
+      rgb(0 0 0 / 9%) 100%
     );
+    --active-gradient: linear-gradient(0deg, rgb(255 255 255 / 9%) 0%, transparent 25%, transparent 75%, rgb(0 0 0 / 9%) 100%);
     --progress-gradient: linear-gradient(
       -45deg,
-      color(from var(--white) srgb r g b / 10%) 25%,
-      color(from var(--tint) srgb r g b / 10%) 25%,
-      color(from var(--tint) srgb r g b / 10%) 50%,
-      color(from var(--white) srgb r g b / 10%) 50%,
-      color(from var(--white) srgb r g b / 10%) 75%,
-      color(from var(--tint) srgb r g b / 10%) 75%,
-      color(from var(--tint) srgb r g b / 10%)
+      rgb(from var(--color-white) r g b / 10%) 25%,
+      rgb(from var(--color-tint) r g b / 10%) 25%,
+      rgb(from var(--color-tint) r g b / 10%) 50%,
+      rgb(from var(--color-white) r g b / 10%) 50%,
+      rgb(from var(--color-white) r g b / 10%) 75%,
+      rgb(from var(--color-tint) r g b / 10%) 75%,
+      rgb(from var(--color-tint) r g b / 10%)
     );
   }
 }