@react-cupertino-ui/playback-controls 0.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,44 @@
+.react-cupertino-ui-playback-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.react-cupertino-ui-playback-controls__button {
+  border: none;
+  border-radius: 999px;
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 12px 24px rgba(15, 15, 15, 0.18);
+  transition: transform 120ms ease;
+}
+.react-cupertino-ui-playback-controls__button:hover:not(:disabled) {
+  transform: translateY(-2px);
+}
+.react-cupertino-ui-playback-controls__button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.react-cupertino-ui-playback-controls__button--primary {
+  width: 52px;
+  height: 52px;
+  background: linear-gradient(135deg, #0ea5e9, #6366f1);
+  color: white;
+}
+.react-cupertino-ui-playback-controls__spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.7);
+  border-top-color: transparent;
+  border-radius: 999px;
+  animation: playback-controls-spin 1s linear infinite;
+}
+
+@keyframes playback-controls-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { BaseProps } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import "./index.scss";
+export type PlaybackState = "playing" | "paused" | "loading";
+export interface PlaybackControlsProps extends Omit<BaseProps<HTMLDivElement>, "children"> {
+    state?: PlaybackState;
+    onPlayPause?: () => void;
+    onNext?: () => void;
+    onPrevious?: () => void;
+    onShuffle?: () => void;
+    shuffleActive?: boolean;
+    disabled?: boolean;
+}
+declare const PlaybackControls: React.ForwardRefExoticComponent<PlaybackControlsProps & React.RefAttributes<HTMLDivElement>>;
+export { PlaybackControls };

package/dist/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Play, Pause, SkipBack, SkipForward, Shuffle } from "lucide-react";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import "./index.scss";
+const PlaybackControls = React.forwardRef((props, ref) => {
+    const { className, state = "paused", onPlayPause, onNext, onPrevious, onShuffle, shuffleActive = false, disabled = false, ...rest } = props;
+    const isPlaying = state === "playing";
+    const renderPlayPauseIcon = () => {
+        if (state === "loading") {
+            return _jsx("div", { className: "react-cupertino-ui-playback-controls__spinner", "aria-hidden": "true" });
+        }
+        return isPlaying ? _jsx(Pause, { size: 18 }) : _jsx(Play, { size: 18 });
+    };
+    return (_jsxs("div", { ref: ref, className: cn("react-cupertino-ui-playback-controls", className), ...rest, children: [_jsx("button", { type: "button", className: "react-cupertino-ui-playback-controls__button", onClick: onShuffle, disabled: disabled, "aria-pressed": shuffleActive, "aria-label": "Shuffle", children: _jsx(Shuffle, { size: 16 }) }), _jsx("button", { type: "button", className: "react-cupertino-ui-playback-controls__button", onClick: onPrevious, disabled: disabled, "aria-label": "Previous", children: _jsx(SkipBack, { size: 16 }) }), _jsx("button", { type: "button", className: "react-cupertino-ui-playback-controls__button react-cupertino-ui-playback-controls__button--primary", onClick: onPlayPause, disabled: disabled || state === "loading", "aria-label": isPlaying ? "Pause" : "Play", children: renderPlayPauseIcon() }), _jsx("button", { type: "button", className: "react-cupertino-ui-playback-controls__button", onClick: onNext, disabled: disabled, "aria-label": "Next", children: _jsx(SkipForward, { size: 16 }) })] }));
+});
+PlaybackControls.displayName = "PlaybackControls";
+export { PlaybackControls };

package/dist/index.scss

@@ -0,0 +1,49 @@
+.react-cupertino-ui-playback-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  &__button {
+    border: none;
+    border-radius: 999px;
+    width: 40px;
+    height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.8);
+    box-shadow: 0 12px 24px rgba(15, 15, 15, 0.18);
+    transition: transform 120ms ease;
+
+    &:hover:not(:disabled) {
+      transform: translateY(-2px);
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    &--primary {
+      width: 52px;
+      height: 52px;
+      background: linear-gradient(135deg, #0ea5e9, #6366f1);
+      color: white;
+    }
+  }
+
+  &__spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.7);
+    border-top-color: transparent;
+    border-radius: 999px;
+    animation: playback-controls-spin 1s linear infinite;
+  }
+}
+
+@keyframes playback-controls-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@react-cupertino-ui/playback-controls",
+  "version": "0.0.0",
+  "description": "Playback control buttons (play/pause/skip)",
+  "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": "0.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "a6b07a7a8a0ab6f4c80884b6fb9d5eb16ee6da1d",
+  "publishConfig": {
+    "access": "public"
+  }
+}