@react-cupertino-ui/picker 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,63 @@
+.react-cupertino-ui-picker {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: transparent;
+  user-select: none;
+  touch-action: pan-y;
+}
+.react-cupertino-ui-picker__scroller {
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scroll-snap-type: y mandatory;
+  scrollbar-width: none;
+}
+.react-cupertino-ui-picker__scroller::-webkit-scrollbar {
+  display: none;
+}
+.react-cupertino-ui-picker__item {
+  width: 100%;
+  text-align: center;
+  font-size: 20px;
+  color: var(--foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  scroll-snap-align: center;
+  transform: translateZ(0);
+}
+.react-cupertino-ui-picker__selection-indicator {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  background: rgba(118, 118, 128, 0.12);
+  border-radius: 8px;
+  z-index: 1;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-picker__selection-indicator {
+    background: rgba(255, 255, 255, 0.12);
+  }
+}
+.react-cupertino-ui-picker__mask-top, .react-cupertino-ui-picker__mask-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+.react-cupertino-ui-picker__mask-top {
+  top: 0;
+  height: 40%;
+  background: linear-gradient(to bottom, var(--background) 0%, transparent 100%);
+  opacity: 0.9;
+}
+.react-cupertino-ui-picker__mask-bottom {
+  bottom: 0;
+  height: 40%;
+  background: linear-gradient(to top, var(--background) 0%, transparent 100%);
+  opacity: 0.9;
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import "./index.scss";
+export interface PickerOption {
+    value: string | number;
+    label: string;
+}
+export interface PickerProps {
+    options: PickerOption[];
+    value: string | number;
+    onChange: (value: string | number) => void;
+    className?: string;
+    itemHeight?: number;
+    visibleItems?: number;
+}
+declare const Picker: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<HTMLDivElement>>;
+export { Picker };

package/dist/index.js

@@ -0,0 +1,54 @@
+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 Picker = React.forwardRef(({ options, value, onChange, className, itemHeight = 34, visibleItems = 5, ...props }, ref) => {
+    const scrollerRef = React.useRef(null);
+    const isScrolling = React.useRef(false);
+    const scrollTimeout = React.useRef();
+    // Initial scroll
+    React.useLayoutEffect(() => {
+        const index = options.findIndex((o) => o.value === value);
+        if (index !== -1 && scrollerRef.current) {
+            scrollerRef.current.scrollTop = index * itemHeight;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Only on mount
+    // Update scroll when value changes externally (and not scrolling)
+    React.useEffect(() => {
+        if (isScrolling.current)
+            return;
+        const index = options.findIndex((o) => o.value === value);
+        if (index !== -1 && scrollerRef.current) {
+            // Check if already correct to avoid jitter
+            const targetScroll = index * itemHeight;
+            if (Math.abs(scrollerRef.current.scrollTop - targetScroll) > 1) {
+                scrollerRef.current.scrollTo({ top: targetScroll, behavior: 'smooth' });
+            }
+        }
+    }, [value, options, itemHeight]);
+    const handleScroll = (e) => {
+        isScrolling.current = true;
+        clearTimeout(scrollTimeout.current);
+        const scrollTop = e.currentTarget.scrollTop;
+        scrollTimeout.current = setTimeout(() => {
+            isScrolling.current = false;
+            // Snap logic handled by CSS mostly, but we need to update value
+            const index = Math.round(scrollTop / itemHeight);
+            const clampedIndex = Math.min(Math.max(index, 0), options.length - 1);
+            const option = options[clampedIndex];
+            if (option && option.value !== value) {
+                onChange(option.value);
+            }
+            // Ensure perfect snap
+            // e.currentTarget.scrollTo({ top: clampedIndex * itemHeight, behavior: 'smooth' });
+        }, 100);
+    };
+    return (_jsxs("div", { ref: ref, className: cn("react-cupertino-ui-picker", className), style: { height: itemHeight * visibleItems }, ...props, children: [_jsx("div", { className: "react-cupertino-ui-picker__mask-top" }), _jsx("div", { className: "react-cupertino-ui-picker__selection-indicator", style: { height: itemHeight, marginTop: -itemHeight / 2 } }), _jsx("div", { ref: scrollerRef, className: "react-cupertino-ui-picker__scroller", onScroll: handleScroll, style: {
+                    height: itemHeight * visibleItems,
+                    paddingTop: (itemHeight * visibleItems) / 2 - itemHeight / 2,
+                    paddingBottom: (itemHeight * visibleItems) / 2 - itemHeight / 2
+                }, children: options.map((option) => (_jsx("div", { className: "react-cupertino-ui-picker__item", style: { height: itemHeight, lineHeight: `${itemHeight}px` }, children: option.label }, option.value))) }), _jsx("div", { className: "react-cupertino-ui-picker__mask-bottom" })] }));
+});
+Picker.displayName = "Picker";
+export { Picker };

package/dist/index.scss

@@ -0,0 +1,70 @@
+.react-cupertino-ui-picker {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: transparent;
+  user-select: none;
+  touch-action: pan-y;
+
+  &__scroller {
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scroll-snap-type: y mandatory;
+    scrollbar-width: none; // Firefox
+    
+    &::-webkit-scrollbar {
+        display: none;
+    }
+  }
+
+  &__item {
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    color: var(--foreground);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    scroll-snap-align: center;
+    transform: translateZ(0); // Hardware accel
+  }
+
+  &__selection-indicator {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    background: rgba(118, 118, 128, 0.12);
+    border-radius: 8px;
+    z-index: 1;
+    
+    @media (prefers-color-scheme: dark) {
+        background: rgba(255, 255, 255, 0.12);
+    }
+  }
+
+  &__mask-top,
+  &__mask-bottom {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  &__mask-top {
+    top: 0;
+    height: 40%;
+    background: linear-gradient(to bottom, var(--background) 0%, transparent 100%);
+    opacity: 0.9;
+  }
+
+  &__mask-bottom {
+    bottom: 0;
+    height: 40%;
+    background: linear-gradient(to top, var(--background) 0%, transparent 100%);
+    opacity: 0.9;
+  }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@react-cupertino-ui/picker",
+  "version": "0.0.0",
+  "description": "Picker 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": "0.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "a6b07a7a8a0ab6f4c80884b6fb9d5eb16ee6da1d",
+  "publishConfig": {
+    "access": "public"
+  }
+}