@react-fabric/core 1.0.0-beta.58 → 1.0.0-beta.59

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);
+        }
+      }
+    }
+  }
+}

package/css/components/index.css

@@ -42,6 +42,7 @@
 @import "./_modal.css";
 @import "./_panel.css";
 @import "./_progress.css";
+@import "./_stepper.css";
 @import "./_tabPanel.css";
 @import "./_toast.css";
 @import "./_tooltip.css";

package/dist/cjs/hooks/useStepper.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+require('@babel/runtime/helpers/defineProperty');
+require('@babel/runtime/helpers/objectWithoutProperties');
+require('classnames');
+var jsxRuntime = require('react/jsx-runtime');
+require('@react-fabric/utilities');
+require('./useEffectDebugger.js');
+require('boring-avatars');
+var Icon = require('../components/icon/Icon.js');
+require('@floating-ui/react');
+require('../hotkeys/HotKeyWrapper.js');
+require('react-i18next');
+require('../types/icons.js');
+require('@babel/runtime/helpers/toConsumableArray');
+require('@babel/runtime/helpers/classCallCheck');
+require('@babel/runtime/helpers/createClass');
+require('@babel/runtime/helpers/possibleConstructorReturn');
+require('@babel/runtime/helpers/getPrototypeOf');
+require('@babel/runtime/helpers/inherits');
+require('i18next');
+require('@babel/runtime/helpers/asyncToGenerator');
+require('@babel/runtime/regenerator');
+require('react-dom');
+require('../components/media/Media.js');
+require('@babel/runtime/helpers/toArray');
+
+var useStepper = function useStepper(_ref) {
+  var steps = _ref.steps,
+    _ref$activeStep = _ref.activeStep,
+    _initialActiveStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep;
+  var _useState = react.useState(_initialActiveStep),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeStep = _useState2[0],
+    setActiveStep = _useState2[1];
+  var maxSteps = react.useMemo(function () {
+    return steps.length - 1;
+  }, [steps]);
+  var stepper = react.useMemo(function () {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "fabric-stepper bg-base flex-1 flex justify-center py-1 px-2 overflow-x-auto",
+      children: steps.map(function (child, index) {
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "fabric-stepper--pill",
+          "data-state": index === activeStep ? "active" : index < activeStep ? "completed" : undefined,
+          children: [child.icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+            icon: child.icon
+          }), child.label && /*#__PURE__*/jsxRuntime.jsx("label", {
+            children: child.label
+          })]
+        }, index);
+      })
+    });
+  }, [steps]);
+  return {
+    stepper: stepper,
+    activeStep: activeStep,
+    firstStep: activeStep === 0,
+    lastStep: activeStep === maxSteps,
+    next: function next() {
+      return setActiveStep(function (s) {
+        return Math.min(s + 1, maxSteps);
+      });
+    },
+    prev: function prev() {
+      return setActiveStep(function (s) {
+        return Math.max(s - 1, 0);
+      });
+    }
+  };
+};
+
+exports.useStepper = useStepper;

package/dist/cjs/index.js

@@ -72,6 +72,7 @@ var useNavigator = require('./hooks/useNavigator.js');
 var useOverlayService = require('./hooks/useOverlayService.js');
 var useResize = require('./hooks/useResize.js');
 var useResizeObserver = require('./hooks/useResizeObserver.js');
+var useStepper = require('./hooks/useStepper.js');
 var useStorage = require('./hooks/useStorage.js');
 var HotKey = require('./hotkeys/HotKey.js');
 var HotKeyLabel = require('./hotkeys/HotKeyLabel.js');
@@ -160,6 +161,7 @@ exports.useNavigator = useNavigator.useNavigator;
 exports.useOverlayService = useOverlayService.useOverlayService;
 exports.useResize = useResize.useResize;
 exports.useResizeObserver = useResizeObserver.useResizeObserver;
+exports.useStepper = useStepper.useStepper;
 exports.useLocalStorage = useStorage.useLocalStorage;
 exports.useSessionStorage = useStorage.useSessionStorage;
 exports.HotKey = HotKey.HotKey;

package/dist/esm/hooks/useStepper.js

@@ -0,0 +1,75 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useMemo } from 'react';
+import '@babel/runtime/helpers/defineProperty';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import 'classnames';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@react-fabric/utilities';
+import './useEffectDebugger.js';
+import 'boring-avatars';
+import { Icon } from '../components/icon/Icon.js';
+import '@floating-ui/react';
+import '../hotkeys/HotKeyWrapper.js';
+import 'react-i18next';
+import '../types/icons.js';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/possibleConstructorReturn';
+import '@babel/runtime/helpers/getPrototypeOf';
+import '@babel/runtime/helpers/inherits';
+import 'i18next';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import 'react-dom';
+import '../components/media/Media.js';
+import '@babel/runtime/helpers/toArray';
+
+var useStepper = function useStepper(_ref) {
+  var steps = _ref.steps,
+    _ref$activeStep = _ref.activeStep,
+    _initialActiveStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep;
+  var _useState = useState(_initialActiveStep),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeStep = _useState2[0],
+    setActiveStep = _useState2[1];
+  var maxSteps = useMemo(function () {
+    return steps.length - 1;
+  }, [steps]);
+  var stepper = useMemo(function () {
+    return /*#__PURE__*/jsx("div", {
+      className: "fabric-stepper bg-base flex-1 flex justify-center py-1 px-2 overflow-x-auto",
+      children: steps.map(function (child, index) {
+        return /*#__PURE__*/jsxs("div", {
+          className: "fabric-stepper--pill",
+          "data-state": index === activeStep ? "active" : index < activeStep ? "completed" : undefined,
+          children: [child.icon && /*#__PURE__*/jsx(Icon, {
+            icon: child.icon
+          }), child.label && /*#__PURE__*/jsx("label", {
+            children: child.label
+          })]
+        }, index);
+      })
+    });
+  }, [steps]);
+  return {
+    stepper: stepper,
+    activeStep: activeStep,
+    firstStep: activeStep === 0,
+    lastStep: activeStep === maxSteps,
+    next: function next() {
+      return setActiveStep(function (s) {
+        return Math.min(s + 1, maxSteps);
+      });
+    },
+    prev: function prev() {
+      return setActiveStep(function (s) {
+        return Math.max(s - 1, 0);
+      });
+    }
+  };
+};
+
+export { useStepper };

package/dist/esm/index.js

@@ -72,6 +72,7 @@ export { useNavigator } from './hooks/useNavigator.js';
 export { useOverlayService } from './hooks/useOverlayService.js';
 export { useResize } from './hooks/useResize.js';
 export { useResizeObserver } from './hooks/useResizeObserver.js';
+export { useStepper } from './hooks/useStepper.js';
 export { useLocalStorage, useSessionStorage } from './hooks/useStorage.js';
 export { HotKey } from './hotkeys/HotKey.js';
 export { HotKeyLabel } from './hotkeys/HotKeyLabel.js';

package/dist/types/hooks/useStepper.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+export declare const useStepper: ({ steps, activeStep: _initialActiveStep, }: {
+    steps: Array<{
+        label?: ReactNode;
+        icon?: ReactNode;
+    }>;
+    activeStep?: number;
+}) => {
+    stepper: import("react/jsx-runtime").JSX.Element;
+    activeStep: number;
+    firstStep: boolean;
+    lastStep: boolean;
+    next: () => void;
+    prev: () => void;
+};

package/dist/types/index.d.ts

@@ -12,6 +12,7 @@ export * from "./hooks/useNavigator";
 export * from "./hooks/useOverlayService";
 export * from "./hooks/useResize";
 export * from "./hooks/useResizeObserver";
+export * from "./hooks/useStepper";
 export * from "./hooks/useStorage";
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.58",
+  "version": "1.0.0-beta.59",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "~0.27.16",
-    "@react-fabric/utilities": "^1.0.0-beta.58",
+    "@react-fabric/utilities": "^1.0.0-beta.59",
     "@tailwindcss/postcss": "~4.1.16",
     "boring-avatars": "~1.11.2",
     "classnames": "~2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "7e66f8c498e37a40e410ecafff2ea6b31505dc1a"
+  "gitHead": "74efd06c9c5ac629b6ef5cdc6d53ecb1c356f2eb"
 }

package/src/hooks/useStepper.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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.
+ */
+
+import { ReactNode, useMemo, useState } from "react";
+import { Icon } from "../components";
+
+export const useStepper = ({
+  steps,
+  activeStep: _initialActiveStep = 0,
+}: {
+  steps: Array<{ label?: ReactNode; icon?: ReactNode }>;
+  activeStep?: number;
+}) => {
+  const [activeStep, setActiveStep] = useState(_initialActiveStep);
+  const maxSteps = useMemo(() => steps.length - 1, [steps]);
+
+  const stepper = useMemo(() => {
+    return (
+      <div className="fabric-stepper bg-base flex-1 flex justify-center py-1 px-2 overflow-x-auto">
+        {steps.map((child: any, index) => (
+          <div
+            className="fabric-stepper--pill"
+            key={index}
+            data-state={
+              index === activeStep
+                ? "active"
+                : index < activeStep
+                  ? "completed"
+                  : undefined
+            }
+          >
+            {child.icon && <Icon icon={child.icon} />}
+            {child.label && <label>{child.label}</label>}
+          </div>
+        ))}
+      </div>
+    );
+  }, [steps]);
+
+  return {
+    stepper,
+    activeStep,
+    firstStep: activeStep === 0,
+    lastStep: activeStep === maxSteps,
+    next: () => setActiveStep((s) => Math.min(s + 1, maxSteps)),
+    prev: () => setActiveStep((s) => Math.max(s - 1, 0)),
+  };
+};

package/src/index.ts

@@ -36,6 +36,7 @@ export * from "./hooks/useNavigator";
 export * from "./hooks/useOverlayService";
 export * from "./hooks/useResize";
 export * from "./hooks/useResizeObserver";
+export * from "./hooks/useStepper";
 export * from "./hooks/useStorage";
 
 export { HotKey } from "./hotkeys/HotKey";