@react-cupertino-ui/volume-control 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,73 @@
+.react-cupertino-ui-volume-control {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 32px;
+}
+.react-cupertino-ui-volume-control .icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8e8e93;
+  pointer-events: none;
+}
+.react-cupertino-ui-volume-control .slider-container {
+  flex: 1;
+  height: 100%;
+  /* Larger hit area */
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+.react-cupertino-ui-volume-control .slider-container:hover .track {
+  height: 6px;
+}
+.react-cupertino-ui-volume-control .track {
+  width: 100%;
+  height: 4px;
+  background-color: rgba(60, 60, 67, 0.18);
+  border-radius: 999px;
+  position: relative;
+  transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+  overflow: hidden;
+  /* Contains the fill for neat edges */
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-volume-control .track {
+    background-color: rgba(255, 255, 255, 0.18);
+  }
+}
+.react-cupertino-ui-volume-control .fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(60, 60, 67, 0.6);
+  border-radius: 999px;
+  pointer-events: none;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-volume-control .fill {
+    background-color: rgba(255, 255, 255, 0.6);
+  }
+}
+.react-cupertino-ui-volume-control {
+  /* Thumb is usually invisible in standard iOS volume slider until interacted, 
+   but often just the expanding track serves as the handle. 
+   We'll make it subtle or hidden for pure iOS aesthetic. */
+}
+.react-cupertino-ui-volume-control .thumb {
+  display: none;
+  /* 
+  position: absolute;
+  top: 50%;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+  */
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { BaseProps } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import "./index.scss";
+export interface VolumeControlProps extends Omit<BaseProps<HTMLDivElement>, "children"> {
+    volume: number;
+    onVolumeChange?: (volume: number) => void;
+    muted?: boolean;
+}
+declare const VolumeControl: React.ForwardRefExoticComponent<VolumeControlProps & React.RefAttributes<HTMLDivElement>>;
+export { VolumeControl };

package/dist/index.js

@@ -0,0 +1,58 @@
+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 { Volume, Volume1, Volume2, VolumeX } from "lucide-react";
+import "./index.scss";
+const VolumeControl = React.forwardRef(({ className, volume, onVolumeChange, muted = false, ...props }, ref) => {
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [dragVolume, setDragVolume] = React.useState(volume);
+    const sliderRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!isDragging) {
+            setDragVolume(volume);
+        }
+    }, [volume, isDragging]);
+    const handleMouseDown = (e) => {
+        setIsDragging(true);
+        updateVolumeFromClientX(e.clientX);
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    };
+    const handleMouseMove = (e) => {
+        updateVolumeFromClientX(e.clientX);
+    };
+    const handleMouseUp = (e) => {
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        // Final commit
+        if (sliderRef.current) {
+            const rect = sliderRef.current.getBoundingClientRect();
+            const percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+            onVolumeChange?.(percentage);
+        }
+    };
+    const updateVolumeFromClientX = (clientX) => {
+        if (sliderRef.current) {
+            const rect = sliderRef.current.getBoundingClientRect();
+            const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+            setDragVolume(percentage);
+            // Optional: Real-time update
+            // onVolumeChange?.(percentage);
+        }
+    };
+    const displayVolume = muted ? 0 : (isDragging ? dragVolume : volume);
+    const percentage = displayVolume * 100;
+    const VolumeIcon = () => {
+        if (muted || displayVolume === 0)
+            return _jsx(VolumeX, { size: 18 });
+        if (displayVolume < 0.3)
+            return _jsx(Volume, { size: 18 });
+        if (displayVolume < 0.7)
+            return _jsx(Volume1, { size: 18 });
+        return _jsx(Volume2, { size: 18 });
+    };
+    return (_jsxs("div", { ref: ref, className: cn("react-cupertino-ui-volume-control", className), ...props, children: [_jsx("div", { className: "icon start", children: _jsx(VolumeIcon, {}) }), _jsx("div", { className: "slider-container", ref: sliderRef, onMouseDown: handleMouseDown, children: _jsxs("div", { className: "track", children: [_jsx("div", { className: "fill", style: { width: `${percentage}%` } }), _jsx("div", { className: "thumb", style: { left: `${percentage}%` } })] }) }), _jsx("div", { className: "icon end", children: _jsx(Volume2, { size: 16 }) })] }));
+});
+VolumeControl.displayName = "VolumeControl";
+export { VolumeControl };

package/dist/index.scss

@@ -0,0 +1,75 @@
+.react-cupertino-ui-volume-control {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    height: 32px;
+
+    .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #8e8e93;
+        pointer-events: none;
+    }
+
+    .slider-container {
+        flex: 1;
+        height: 100%;
+        /* Larger hit area */
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        position: relative;
+
+        &:hover .track {
+            height: 6px;
+        }
+    }
+
+    .track {
+        width: 100%;
+        height: 4px;
+        background-color: rgba(60, 60, 67, 0.18);
+        border-radius: 999px;
+        position: relative;
+        transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+        overflow: hidden;
+        /* Contains the fill for neat edges */
+
+        @media (prefers-color-scheme: dark) {
+            background-color: rgba(255, 255, 255, 0.18);
+        }
+    }
+
+    .fill {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        background-color: rgba(60, 60, 67, 0.6);
+        border-radius: 999px;
+        pointer-events: none;
+
+        @media (prefers-color-scheme: dark) {
+            background-color: rgba(255, 255, 255, 0.6);
+        }
+    }
+
+    /* Thumb is usually invisible in standard iOS volume slider until interacted, 
+     but often just the expanding track serves as the handle. 
+     We'll make it subtle or hidden for pure iOS aesthetic. */
+    .thumb {
+        display: none;
+        /* 
+    position: absolute;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    */
+    }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@react-cupertino-ui/volume-control",
+  "version": "1.0.0",
+  "description": "VolumeControl 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": {
+    "lucide-react": "^0.417.0",
+    "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"
+  }
+}