@react-cupertino-ui/stepper 1.0.0

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2024 Anderson Lima
+
+This project is inspired by Apple's design principles but is not affiliated with, endorsed, or sponsored by Apple Inc.
+
+
+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.

package/dist/index.css

@@ -0,0 +1,76 @@
+.react-cupertino-ui-stepper {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.react-cupertino-ui-stepper__label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+.react-cupertino-ui-stepper__control {
+  display: inline-flex;
+  align-items: center;
+  background: transparent;
+  border-radius: 999px;
+  padding: 0.2rem;
+  gap: 0.25rem;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(28px) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(28px) saturate(var(--glass-saturation, 180%));
+  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
+  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
+  position: relative;
+  overflow: hidden;
+}
+.react-cupertino-ui-stepper__control::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--glass-highlight, linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 55%));
+  border-radius: inherit;
+  opacity: var(--glass-highlight-opacity, 0.95);
+  pointer-events: none;
+  mix-blend-mode: screen;
+}
+.react-cupertino-ui-stepper__button {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  border: none;
+  background: rgba(255, 255, 255, 0.9);
+  color: #0a0a0a;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+}
+.react-cupertino-ui-stepper__button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+.react-cupertino-ui-stepper__button[data-pressing=true] {
+  transform: scale(0.9);
+  background: rgba(255, 255, 255, 0.65);
+  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+.react-cupertino-ui-stepper__input {
+  width: 3rem;
+  border: none;
+  text-align: center;
+  background: transparent;
+  font-weight: 600;
+  font-size: 1rem;
+  color: hsl(var(--foreground));
+  appearance: textfield;
+  transition: color 220ms ease, transform 220ms ease;
+}
+.react-cupertino-ui-stepper__input[data-trend=up] {
+  color: #0a84ff;
+  transform: translateY(-2px);
+}
+.react-cupertino-ui-stepper__input[data-trend=down] {
+  color: #ff3b30;
+  transform: translateY(2px);
+}

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import "./index.scss";
+export interface StepperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    onChange?: (value: number) => void;
+    label?: string;
+}
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export { Stepper };
+export default Stepper;

package/dist/index.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import "./index.scss";
+const clamp = (value, min, max) => {
+    if (min !== undefined && value < min)
+        return min;
+    if (max !== undefined && value > max)
+        return max;
+    return value;
+};
+const HOLD_DELAY = 350;
+const HOLD_INTERVAL = 110;
+const Stepper = React.forwardRef(({ className, value, defaultValue = 0, min, max, step = 1, disabled = false, onChange, label, ...props }, ref) => {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(clamp(defaultValue, min, max));
+    const [heldButton, setHeldButton] = React.useState(null);
+    const [valueTrend, setValueTrend] = React.useState(null);
+    const currentValue = isControlled ? clamp(value, min, max) : internalValue;
+    const valueRef = React.useRef(currentValue);
+    valueRef.current = currentValue;
+    const holdTimeoutRef = React.useRef(null);
+    const holdIntervalRef = React.useRef(null);
+    const trendTimeoutRef = React.useRef(null);
+    const previousValueRef = React.useRef(currentValue);
+    const clearHoldTimers = React.useCallback(() => {
+        if (holdTimeoutRef.current) {
+            clearTimeout(holdTimeoutRef.current);
+            holdTimeoutRef.current = null;
+        }
+        if (holdIntervalRef.current) {
+            clearInterval(holdIntervalRef.current);
+            holdIntervalRef.current = null;
+        }
+    }, []);
+    const updateValue = React.useCallback((next) => {
+        const resolved = typeof next === "function" ? next(valueRef.current) : next;
+        const clamped = clamp(resolved, min, max);
+        valueRef.current = clamped;
+        if (!isControlled) {
+            setInternalValue(clamped);
+        }
+        onChange?.(clamped);
+    }, [isControlled, max, min, onChange]);
+    const changeByStep = React.useCallback((direction) => {
+        updateValue((prev) => prev + (direction === "increment" ? step : -step));
+    }, [step, updateValue]);
+    const handleIncrement = () => {
+        if (disabled)
+            return;
+        changeByStep("increment");
+    };
+    const handleDecrement = () => {
+        if (disabled)
+            return;
+        changeByStep("decrement");
+    };
+    const handleInputChange = (event) => {
+        const next = Number(event.target.value);
+        if (Number.isNaN(next)) {
+            return;
+        }
+        updateValue(next);
+    };
+    const stopHold = React.useCallback(() => {
+        clearHoldTimers();
+        setHeldButton(null);
+    }, [clearHoldTimers]);
+    const startHold = React.useCallback((direction) => {
+        if (disabled) {
+            return;
+        }
+        setHeldButton(direction);
+        clearHoldTimers();
+        holdTimeoutRef.current = setTimeout(() => {
+            changeByStep(direction);
+            holdIntervalRef.current = setInterval(() => {
+                changeByStep(direction);
+            }, HOLD_INTERVAL);
+        }, HOLD_DELAY);
+    }, [changeByStep, clearHoldTimers, disabled]);
+    React.useEffect(() => {
+        return () => {
+            clearHoldTimers();
+            if (trendTimeoutRef.current) {
+                clearTimeout(trendTimeoutRef.current);
+            }
+        };
+    }, [clearHoldTimers]);
+    React.useEffect(() => {
+        const previous = previousValueRef.current;
+        if (previous !== currentValue) {
+            const trend = currentValue > previous ? "up" : "down";
+            setValueTrend(trend);
+            if (trendTimeoutRef.current) {
+                clearTimeout(trendTimeoutRef.current);
+            }
+            trendTimeoutRef.current = setTimeout(() => {
+                setValueTrend(null);
+            }, 420);
+        }
+        previousValueRef.current = currentValue;
+    }, [currentValue]);
+    React.useEffect(() => {
+        if (!heldButton) {
+            return;
+        }
+        const handlePointerUp = () => {
+            stopHold();
+        };
+        window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("pointercancel", handlePointerUp);
+        return () => {
+            window.removeEventListener("pointerup", handlePointerUp);
+            window.removeEventListener("pointercancel", handlePointerUp);
+        };
+    }, [heldButton, stopHold]);
+    const getPointerHandlers = (direction) => {
+        return {
+            onPointerDown: (event) => {
+                if (event.button && event.button !== 0) {
+                    return;
+                }
+                event.preventDefault();
+                startHold(direction);
+            },
+            onPointerLeave: stopHold,
+            onPointerCancel: stopHold,
+            onPointerUp: () => stopHold(),
+        };
+    };
+    return (_jsxs("div", { ref: ref, className: cn("react-cupertino-ui-stepper", className), "data-disabled": disabled ? "true" : undefined, ...props, children: [label && _jsx("span", { className: "react-cupertino-ui-stepper__label", children: label }), _jsxs("div", { className: "react-cupertino-ui-stepper__control", children: [_jsx("button", { type: "button", className: "react-cupertino-ui-stepper__button", onClick: handleDecrement, disabled: disabled || (min !== undefined && currentValue <= min), "aria-label": "Decrease value", "data-pressing": heldButton === "decrement" ? "true" : undefined, ...getPointerHandlers("decrement"), children: "\u2013" }), _jsx("input", { type: "number", className: "react-cupertino-ui-stepper__input", value: currentValue, "data-trend": valueTrend ?? undefined, "aria-live": "polite", onChange: handleInputChange, min: min, max: max, step: step, disabled: disabled }), _jsx("button", { type: "button", className: "react-cupertino-ui-stepper__button", onClick: handleIncrement, disabled: disabled || (max !== undefined && currentValue >= max), "aria-label": "Increase value", "data-pressing": heldButton === "increment" ? "true" : undefined, ...getPointerHandlers("increment"), children: "+" })] })] }));
+});
+Stepper.displayName = "Stepper";
+export { Stepper };
+export default Stepper;

package/dist/index.scss

@@ -0,0 +1,70 @@
+@use "@/styles/mixins/glass" as glass;
+
+.react-cupertino-ui-stepper {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.35rem;
+
+  &__label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: hsl(var(--foreground));
+  }
+
+  &__control {
+    display: inline-flex;
+    align-items: center;
+    background: transparent;
+    border-radius: 999px;
+    padding: 0.2rem;
+    gap: 0.25rem;
+    @include glass.glass-panel(light, 28px, 0.6);
+  }
+
+  &__button {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.9);
+    color: #0a0a0a;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    &[data-pressing="true"] {
+      transform: scale(0.9);
+      background: rgba(255, 255, 255, 0.65);
+      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  &__input {
+    width: 3rem;
+    border: none;
+    text-align: center;
+    background: transparent;
+    font-weight: 600;
+    font-size: 1rem;
+    color: hsl(var(--foreground));
+    appearance: textfield;
+    transition: color 220ms ease, transform 220ms ease;
+
+    &[data-trend="up"] {
+      color: #0a84ff;
+      transform: translateY(-2px);
+    }
+
+    &[data-trend="down"] {
+      color: #ff3b30;
+      transform: translateY(2px);
+    }
+  }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@react-cupertino-ui/stepper",
+  "version": "1.0.0",
+  "description": "Stepper component from React Cupertino UI",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/**/*.css",
+    "./dist/**/*.scss"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && npm run build:styles",
+    "build:styles": "node ../../../scripts/build-styles.mjs"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@react-cupertino-ui/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
+  "publishConfig": {
+    "access": "public"
+  }
+}