@react-fabric/core 1.0.0-beta.36 → 1.0.0-beta.38

package/css/theme/_utilities.css

@@ -0,0 +1,512 @@
+/*
+ * 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.
+ */
+
+@keyframes cardpulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes bgprogress {
+  0% {
+    background-position-x: 0;
+  }
+
+  100% {
+    background-position-x: 1rem;
+  }
+}
+
+@variant dark (&:where([data-color-scheme="dark"], [data-color-scheme="dark"] *));
+
+@utility area-* {
+  grid-area: --value([ *]);
+}
+
+@utility area-content {
+  grid-area: content;
+}
+
+@utility area-head {
+  grid-area: head;
+}
+
+@utility area-foot {
+  grid-area: foot;
+}
+
+@utility area-body {
+  grid-area: body;
+}
+
+@utility area-side-s {
+  grid-area: side-s;
+}
+
+@utility area-side-e {
+  grid-area: side-e;
+}
+
+@utility overflow-wrap {
+  text-wrap: wrap;
+  word-break: normal;
+  overflow-wrap: anywhere;
+}
+
+@utility fixed-numbers {
+  font-variant-numeric: tabular-nums;
+}
+
+@utility mixed-lang {
+  unicode-bidi: plaintext;
+}
+
+@utility flex-full {
+  flex: 1 1 100%;
+}
+
+@utility flex-content {
+  flex: 0 0 auto;
+}
+
+@utility rounded {
+  border-radius: var(--rounding);
+}
+
+@utility rounded-capped {
+  border-radius: var(--rounding-cap);
+}
+
+@utility scroll-hide {
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+@utility scroll-thin {
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+}
+
+@utility sectioned {
+  display: grid;
+  grid-template: "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+}
+
+@utility scroll-snap-start {
+  scroll-snap-type: both proximity;
+
+  & > * {
+    scroll-snap-align: start;
+  }
+}
+
+@utility scroll-snap-center {
+  scroll-snap-type: both proximity;
+
+  & > * {
+    scroll-snap-align: center;
+  }
+}
+
+@utility scroll-snap-end {
+  scroll-snap-type: both proximity;
+
+  & > * {
+    scroll-snap-align: end;
+  }
+}
+
+@utility break-words {
+  word-break: break-word;
+}
+
+@utility outline-thin {
+  outline-width: 0.5px;
+}
+
+@utility link {
+  cursor: pointer;
+  user-select: none;
+
+  font-weight: 500;
+  color: var(--color-accent-600);
+  text-decoration: underline dotted;
+
+  &:hover {
+    text-decoration: underline solid;
+  }
+}
+
+@utility bg-odd {
+  background-color: color-mix(in oklab, var(--fabric-bg) 99%, var(--color-tint));
+}
+
+@utility bg-even {
+  background-color: color-mix(in oklab, var(--fabric-bg) 92%, var(--color-tint));
+}
+
+@utility bg-alternate {
+  & > :nth-child(even) {
+    background-color: color-mix(in oklab, var(--fabric-bg) 92%, var(--color-tint));
+  }
+
+  & > :nth-child(odd) {
+    background-color: color-mix(in oklab, var(--fabric-bg) 99%, var(--color-tint));
+  }
+}
+
+@utility bg-base {
+  background-color: var(--bg-color-base);
+}
+
+@utility bg-dimmed {
+  background-color: var(--bg-color-dimmed);
+}
+
+@utility bg-muted {
+  background-color: var(--bg-color-muted);
+}
+
+@utility bg-gray {
+  background-color: var(--bg-color-gray);
+}
+
+@utility bg-dark {
+  background-color: var(--bg-color-dark);
+}
+
+@utility bg-light {
+  background-color: var(--bg-color-light);
+}
+
+@utility bg-invert {
+  background-color: var(--bg-color-invert);
+}
+
+@utility text-base {
+  color: var(--text-color-base);
+}
+
+@utility text-dimmed {
+  color: var(--text-color-dimmed);
+}
+
+@utility text-muted {
+  color: var(--text-color-muted);
+}
+
+@utility text-gray {
+  color: var(--text-color-gray);
+}
+
+@utility text-dark {
+  color: var(--text-color-dark);
+}
+
+@utility text-light {
+  color: var(--text-color-light);
+}
+
+@utility text-invert {
+  color: var(--text-color-invert);
+}
+
+@utility border-base {
+  border-color: var(--border-color-base);
+}
+
+@utility border-dimmed {
+  border-color: var(--border-color-dimmed);
+}
+
+@utility border-muted {
+  border-color: var(--border-color-muted);
+}
+
+@utility border-gray {
+  border-color: var(--color-tint);
+}
+
+@utility border-dark {
+  border-color: var(--border-color-dark);
+}
+
+@utility border-light {
+  border-color: var(--border-color-light);
+}
+
+@utility outline-base {
+  outline-color: var(--border-color-base);
+}
+
+@utility outline-dimmed {
+  outline-color: var(--border-color-dimmed);
+}
+
+@utility outline-muted {
+  outline-color: var(--border-color-muted);
+}
+
+@utility outline-gray {
+  outline-color: var(--color-tint);
+}
+
+@utility outline-dark {
+  outline-color: var(--border-color-dark);
+}
+
+@utility outline-light {
+  outline-color: var(--border-color-light);
+}
+
+@utility stroke-base {
+  stroke: var(--border-color-base);
+}
+
+@utility stroke-dimmed {
+  stroke: var(--border-color-dimmed);
+}
+
+@utility stroke-muted {
+  stroke: var(--border-color-muted);
+}
+
+@utility stroke-gray {
+  stroke: var(--color-tint);
+}
+
+@utility stroke-dark {
+  stroke: var(--border-color-dark);
+}
+
+@utility stroke-light {
+  stroke: var(--border-color-light);
+}
+
+@utility fill-base {
+  fill: var(--bg-color-base);
+}
+
+@utility fill-dimmed {
+  fill: var(--bg-color-dimmed);
+}
+
+@utility fill-muted {
+  fill: var(--bg-color-muted);
+}
+
+@utility fill-gray {
+  fill: var(--bg-color-gray);
+}
+
+@utility fill-dark {
+  fill: var(--bg-color-dark);
+}
+
+@utility fill-light {
+  fill: var(--bg-color-light);
+}
+
+@utility fill-invert {
+  fill: var(--bg-color-invert);
+}
+
+@utility gap-* {
+  --gutter: calc(var(--spacing) * --value(number));
+
+  gap: calc(var(--spacing) * --value(number));
+}
+
+@utility span-* {
+  flex: 0 1 calc((--value(integer) / 12) * 100% - var(--gutter, 0px));
+}
+
+@media (min-width: theme(screens.xs)) {
+  .hide-xs {
+    @apply hidden;
+  }
+
+  @media (max-width: theme(screens.sm)) {
+    .hide-xs-only {
+      @apply hidden;
+    }
+
+    .show-sm-only,
+    .show-md-only,
+    .show-lg-only,
+    .show-xl-only,
+    .show-2xl-only {
+      @apply hidden;
+    }
+  }
+}
+
+@media (min-width: theme(screens.sm)) {
+  .hide-sm {
+    @apply hidden;
+  }
+
+  @media (max-width: theme(screens.md)) {
+    .hide-sm-only {
+      @apply hidden;
+    }
+
+    .show-xs-only,
+    .show-md-only,
+    .show-lg-only,
+    .show-xl-only,
+    .show-2xl-only {
+      @apply hidden;
+    }
+  }
+}
+
+@media (min-width: theme(screens.md)) {
+  .hide-md {
+    @apply hidden;
+  }
+
+  @media (max-width: theme(screens.lg)) {
+    .hide-md-only {
+      @apply hidden;
+    }
+
+    .show-xs-only,
+    .show-sm-only,
+    .show-lg-only,
+    .show-xl-only,
+    .show-2xl-only {
+      @apply hidden;
+    }
+  }
+}
+
+@media (min-width: theme(screens.lg)) {
+  .hide-lg {
+    @apply hidden;
+  }
+
+  @media (max-width: theme(screens.xl)) {
+    .hide-lg-only {
+      @apply hidden;
+    }
+
+    .show-xs-only,
+    .show-sm-only,
+    .show-md-only,
+    .show-xl-only,
+    .show-2xl-only {
+      @apply hidden;
+    }
+  }
+}
+
+@media (min-width: theme(screens.xl)) {
+  .hide-xl {
+    @apply hidden;
+  }
+
+  @media (max-width: theme(screens.2xl)) {
+    .hide-xl-only {
+      @apply hidden;
+    }
+
+    .show-xs-only,
+    .show-sm-only,
+    .show-md-only,
+    .show-lg-only,
+    .show-2xl-only {
+      @apply hidden;
+    }
+  }
+}
+
+@media (min-width: theme(screens.2xl)) {
+  .hide-2xl,
+  .hide-2xl-only {
+    @apply hidden;
+  }
+
+  .show-xs-only,
+  .show-sm-only,
+  .show-md-only,
+  .show-lg-only,
+  .show-xl-only {
+    @apply hidden;
+  }
+}
+
+@media (max-width: theme(screens.xs)) {
+  .show-xs,
+  .show-sm,
+  .show-md,
+  .show-lg,
+  .show-xl,
+  .show-2xl {
+    @apply hidden;
+  }
+}
+
+@media (max-width: theme(screens.sm)) {
+  .show-sm,
+  .show-md,
+  .show-lg,
+  .show-xl,
+  .show-2xl {
+    @apply hidden;
+  }
+}
+
+@media (max-width: theme(screens.md)) {
+  .show-md,
+  .show-lg,
+  .show-xl,
+  .show-2xl {
+    @apply hidden;
+  }
+}
+
+@media (max-width: theme(screens.lg)) {
+  .show-lg,
+  .show-xl,
+  .show-2xl {
+    @apply hidden;
+  }
+}
+
+@media (max-width: theme(screens.xl)) {
+  .show-xl,
+  .show-2xl {
+    @apply hidden;
+  }
+}
+
+@media (max-width: theme(screens.2xl)) {
+  .show-2xl {
+    @apply hidden;
+  }
+}

package/css/theme/index.css

@@ -0,0 +1,44 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 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 "./_colors.css";
+@import "./_utilities.css";
+
+@theme static {
+  --font-sans: "Avenir Next", Avenir, "Noto Sans", Roboto, "Helvetica Neue",
+    "Segoe UI", Arial, sans-serif, BlinkMacSystemFont, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: "Noto Serif", Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: "Noto Sans Mono", Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+}
+
+@theme static {
+  --animate-pulse: cardpulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-progress: bgprogress 750ms linear infinite;
+  --breakpoint-xs: 320px;
+  --aspect-portrait: 3 / 4;
+  --aspect-screen: 4 / 3;
+  --radius-capped: var(--rounding-cap);
+  --shadow-paper: 0 1px 3px 0 var(--fabric-shadow);
+}

package/dist/cjs/components/actionLabel/ActionLabel.js

@@ -5,7 +5,6 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var classNames = require('classnames');
 var react = require('react');
 var ButtonGroup = require('../button/ButtonGroup.js');
-var ActionLabel_module = require('./ActionLabel.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["children", "className", "align", "actions", "disabled"];
@@ -39,13 +38,13 @@ var ActionLabel = function ActionLabel(_ref) {
     }
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(className, ActionLabel_module.actionLabel, "flex overflow-hidden gap-1 items-center cursor-default select-none"),
+    className: classNames(className, "fabric-actionLabel", "flex overflow-hidden gap-1 items-center cursor-default select-none"),
     "data-disabled": disabled
   }, rest), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(ButtonGroup.ButtonGroup, {
       ref: calculateBasis,
       "data-inner-clickable": true,
-      className: classNames(ActionLabel_module.actions, "overflow-hidden flex-content", align === "end" && "order-2"),
+      className: classNames("fabric-actions", "overflow-hidden flex-content", align === "end" && "order-2"),
       children: actions
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-initial truncate",

package/dist/cjs/components/animations/Animations.js

@@ -8,7 +8,6 @@ var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
-var Animations_module = require('./Animations.module.css');
 
 var _excluded = ["className", "color", "strokeColor", "type"],
   _excluded2 = ["className"];
@@ -40,26 +39,29 @@ var AnimationIndicator = function AnimationIndicator(_ref) {
   /** ***************** component *******************/
   return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread(_objectSpread({
     "data-ref": "animated-indicator",
-    className: classNames(Animations_module.checkAnimation, className, "inline-block rounded-full", color && getColor.getColorClass(color)),
+    className: classNames("fabric-checkAnimation", className, "inline-block rounded-full"),
     style: styles,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 52 52",
     "aria-hidden": "true"
   }, aria), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
-      className: Animations_module.circlePart,
+      className: "fabric-circlePart",
       cx: "26",
       cy: "26",
       r: "25"
     }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      className: classNames(Animations_module.iconPart, getColor.getColorClass(strokeColor !== null && strokeColor !== void 0 ? strokeColor : "invert")),
+      className: classNames("fabric-iconPart"),
+      style: {
+        color: strokeColor ? getColor.getColor(strokeColor) : "var(--text-color-invert)"
+      },
       d: path
     })]
   }));
 };
 var AnimationBars = function AnimationBars(_ref2) {
   var _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? "tint" : _ref2$color,
+    color = _ref2$color === void 0 ? "tint-500" : _ref2$color,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? "2rem" : _ref2$size;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -67,9 +69,10 @@ var AnimationBars = function AnimationBars(_ref2) {
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames(Animations_module.bars, getColor.getColorClass(color + "-500/50")),
+        className: classNames("fabric-bars"),
         style: {
-          width: size
+          width: size,
+          color: getColor.getColor(color)
         }
       })
     })
@@ -86,9 +89,10 @@ var AnimationSpinner = function AnimationSpinner(_ref3) {
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames(Animations_module.spinner, getColor.getColorClass(color)),
+        className: classNames("fabric-spinner"),
         style: {
-          width: size
+          width: size,
+          color: getColor.getColor(color)
         }
       })
     })
@@ -96,7 +100,7 @@ var AnimationSpinner = function AnimationSpinner(_ref3) {
 };
 var Loading = function Loading() {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames(Animations_module.loader, "area-[loader] relative overflow-x-clip"),
+    className: classNames("fabric-loader", "area-[loader] relative overflow-x-clip"),
     "data-ref": "loading",
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500"

package/dist/cjs/components/avatar/Avatar.js

@@ -9,7 +9,6 @@ var classNames = require('classnames');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
-var Avatar_module = require('./Avatar.module.css');
 
 var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -71,7 +70,7 @@ var Avatar = function Avatar(_ref) {
     return avatar && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "contents",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames(Avatar_module.imgPlaceholder, "absolute inset-0 bg-gray animate-pulse")
+        className: classNames("fabric-imgPlaceholder", "absolute inset-0 bg-gray animate-pulse")
       }), /*#__PURE__*/jsxRuntime.jsx("img", {
         src: avatar,
         alt: avatar,
@@ -129,7 +128,7 @@ var Avatar = function Avatar(_ref) {
   }, [name, variant, fallbackIcon]);
   return /*#__PURE__*/jsxRuntime.jsxs("dfn", _objectSpread(_objectSpread({
     role: "presentation",
-    className: classNames(Avatar_module.avatar, className, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), !rounded && "rounded", rounded && "rounded-full"),
+    className: classNames("fabric-avatar", className, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full"),
     onClick: onClick,
     style: styles,
     "data-clickable": !!onClick,

package/dist/cjs/components/avatar/AvatarGroup.js

@@ -5,7 +5,6 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
-var Avatar_module = require('./Avatar.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "children", "className", "totalCount", "rounded", "size"];
@@ -49,11 +48,11 @@ var AvatarGroup = function AvatarGroup(_ref) {
   }, [avatars, totalCount]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, aria), {}, {
     ref: ref,
-    className: classNames(Avatar_module.avatarGroup, className, "inline-flex flex-nowrap", !rounded && "rounded", rounded && "rounded-full"),
+    className: classNames("fabric-avatarGroup", className, "inline-flex flex-nowrap", !rounded && "rounded", rounded && "rounded-full"),
     style: styles,
     children: [avatars, !!diff && /*#__PURE__*/jsxRuntime.jsx("dfn", {
       "data-ref": "avatarCount",
-      className: classNames(Avatar_module.avatar, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", Avatar_module.extra),
+      className: classNames("fabric-avatar", "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", "fabric-avatarGroup--extra"),
       children: /*#__PURE__*/jsxRuntime.jsx("svg", {
         children: /*#__PURE__*/jsxRuntime.jsx("text", {
           x: "50%",