@react-fabric/core 1.0.0-beta.4 → 1.0.0-beta.41

package/css/theme/_utilities.css

@@ -0,0 +1,530 @@
+/*
+ * 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 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-content {
+  background-color: var(--bg-color-content);
+}
+
+@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-* {
+  &:where(.fabric-row) {
+    --gutter: calc(var(--spacing) * --value(integer));
+
+    gap: 0 !important;
+  }
+}
+
+@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,12 +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,
-      className: classNames(ActionLabel_module.actions, "overflow-hidden flex-content", align === "end" && "order-2"),
+      "data-inner-clickable": true,
+      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

@@ -5,12 +5,12 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var classNames = require('classnames');
 var react = require('react');
 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 jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["className", "color", "strokeColor", "type"];
+var _excluded = ["className", "color", "strokeColor", "type"],
+  _excluded2 = ["className"];
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var AnimationIndicator = function AnimationIndicator(_ref) {
@@ -39,36 +39,40 @@ 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", {
     className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
+      className: classNames("outline outline-tint-500/20 p-4 bg-tint-50/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)
         }
       })
     })
@@ -81,12 +85,14 @@ var AnimationSpinner = function AnimationSpinner(_ref3) {
     size = _ref3$size === void 0 ? "2rem" : _ref3$size;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
+    "data-ref": "spinner",
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
+      className: classNames("outline outline-tint-500/20 p-4 bg-tint-50/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)
         }
       })
     })
@@ -94,15 +100,20 @@ 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"
     })
   });
 };
-var Skeleton = function Skeleton() {
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames("p-2 animate-pulse flex gap-2 max-w-lg"),
+var Skeleton = function Skeleton(_ref4) {
+  var className = _ref4.className,
+    rest = _objectWithoutProperties(_ref4, _excluded2);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    className: classNames(className, "p-2 animate-pulse flex gap-2 max-w-lg"),
+    "data-ref": "skeleton"
+  }, rest), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "bg-tint-100 rounded aspect-square h-12"
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -125,7 +136,7 @@ var Skeleton = function Skeleton() {
         })]
       })]
     })]
-  });
+  }));
 };
 
 exports.AnimationBars = AnimationBars;