@react-cupertino-ui/search-bar 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,180 @@
+.react-cupertino-ui-search-bar {
+  position: relative;
+  width: 100%;
+  padding: 8px 16px;
+  z-index: 10;
+}
+.react-cupertino-ui-search-bar__container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+.react-cupertino-ui-search-bar__input-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  background: rgba(118, 118, 128, 0.12);
+  border-radius: 10px;
+  padding: 0 8px;
+  transition: background-color 0.2s ease;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-search-bar__input-wrapper {
+    background: rgba(118, 118, 128, 0.24);
+  }
+}
+.react-cupertino-ui-search-bar__input-wrapper:focus-within {
+  background: rgba(118, 118, 128, 0.12);
+}
+.react-cupertino-ui-search-bar__input-wrapper .search-icon {
+  color: var(--muted-foreground);
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+.react-cupertino-ui-search-bar__input-wrapper .spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--muted-foreground);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+.react-cupertino-ui-search-bar__input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  height: 100%;
+  font-size: 17px;
+  color: var(--foreground);
+  min-width: 0;
+}
+.react-cupertino-ui-search-bar__input:focus {
+  outline: none;
+}
+.react-cupertino-ui-search-bar__input::placeholder {
+  color: var(--muted-foreground);
+}
+.react-cupertino-ui-search-bar .clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--muted-foreground);
+  color: var(--background);
+  border: none;
+  padding: 0;
+  margin-left: 6px;
+  cursor: pointer;
+}
+.react-cupertino-ui-search-bar .clear-button svg {
+  display: block;
+}
+.react-cupertino-ui-search-bar .voice-button {
+  background: transparent;
+  border: none;
+  color: var(--muted-foreground);
+  padding: 0;
+  margin-left: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.react-cupertino-ui-search-bar .voice-button:hover {
+  color: var(--foreground);
+}
+.react-cupertino-ui-search-bar__cancel {
+  background: transparent;
+  border: none;
+  color: var(--color-blue);
+  font-size: 17px;
+  padding: 0 0 0 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  margin-right: -70px;
+  opacity: 0;
+  transition: margin-right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
+  pointer-events: none;
+}
+.react-cupertino-ui-search-bar.is-focused .react-cupertino-ui-search-bar__cancel {
+  margin-right: 0;
+  opacity: 1;
+  pointer-events: auto;
+}
+.react-cupertino-ui-search-bar__suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--background);
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(20px) 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-search-bar__suggestions::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-search-bar__suggestions {
+  border-radius: 12px;
+  margin: 8px 16px;
+  padding: 8px 0;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+.react-cupertino-ui-search-bar__suggestions .suggestions-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.react-cupertino-ui-search-bar__suggestions .suggestion-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 10px 16px;
+  background: transparent;
+  border: none;
+  text-align: left;
+  font-size: 16px;
+  color: var(--foreground);
+  cursor: pointer;
+}
+.react-cupertino-ui-search-bar__suggestions .suggestion-item .suggestion-icon {
+  margin-right: 12px;
+  color: var(--muted-foreground);
+  opacity: 0.7;
+}
+.react-cupertino-ui-search-bar__suggestions .suggestion-item:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.react-cupertino-ui-search-bar__suggestions .suggestion-item {
+  position: relative;
+}
+.react-cupertino-ui-search-bar__suggestions .suggestion-item:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 44px;
+  right: 0;
+  height: 1px;
+  background: var(--border);
+  opacity: 0.5;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import "./index.scss";
+export interface SearchBarProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    value: string;
+    onChangeValue?: (value: string) => void;
+    onCancel?: () => void;
+    onSearch?: (value: string) => void;
+    placeholder?: string;
+    cancelLabel?: string;
+    loading?: boolean;
+    glass?: boolean;
+    suggestions?: string[];
+    onSelectSuggestion?: (suggestion: string) => void;
+    showVoice?: boolean;
+    onVoicePress?: () => void;
+}
+declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLInputElement>>;
+export { SearchBar };

package/dist/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Search, X, Mic } from "lucide-react";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import "./index.scss";
+const SearchBar = React.forwardRef(({ className, value, onChangeValue, onCancel, onSearch, placeholder = "Search", cancelLabel = "Cancel", loading = false, glass = true, suggestions = [], onSelectSuggestion, showVoice = true, onVoicePress, ...props }, ref) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => inputRef.current);
+    const handleChange = (e) => {
+        onChangeValue?.(e.target.value);
+    };
+    const handleClear = () => {
+        onChangeValue?.("");
+        inputRef.current?.focus();
+    };
+    const handleCancel = () => {
+        onChangeValue?.("");
+        setIsFocused(false);
+        onCancel?.();
+        inputRef.current?.blur();
+    };
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        props.onFocus?.(e);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            onSearch?.(value);
+        }
+        props.onKeyDown?.(e);
+    };
+    // We handle blur via a click outside listener or just keep it simple.
+    // iOS behavior: Cancel button appears when focused.
+    const showCancel = isFocused || (value && value.length > 0);
+    return (_jsxs("div", { className: cn("react-cupertino-ui-search-bar", glass && "glass", isFocused && "is-focused", className), children: [_jsxs("div", { className: "react-cupertino-ui-search-bar__container", children: [_jsxs("div", { className: "react-cupertino-ui-search-bar__input-wrapper", children: [_jsx(Search, { className: "search-icon", size: 16 }), _jsx("input", { ref: inputRef, type: "text", className: "react-cupertino-ui-search-bar__input", value: value, onChange: handleChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onBlur: (e) => {
+                                    props.onBlur?.(e);
+                                    // We don't set isFocused false here immediately to allow interactions
+                                    // But standard behavior is: Cancel button stays until 'Cancel' is pressed or user manually cancels?
+                                    // Actually on iOS, 'Cancel' button is always there if focused. If user clicks 'Cancel', it blurs.
+                                    // If user clicks outside, it might blur but 'Cancel' button usually hides only if text is empty?
+                                    // Let's rely on manual Cancel press for hiding the button fully effectively in this UI pattern
+                                }, placeholder: placeholder, ...props }), loading && _jsx("div", { className: "spinner" }), !loading && value.length > 0 && (_jsx("button", { type: "button", className: "clear-button", onClick: handleClear, children: _jsx(X, { size: 12, fill: "currentColor" }) })), !loading && value.length === 0 && showVoice && (_jsx("button", { type: "button", className: "voice-button", onClick: onVoicePress, children: _jsx(Mic, { size: 16 }) }))] }), _jsx("button", { type: "button", className: "react-cupertino-ui-search-bar__cancel", onClick: handleCancel, tabIndex: showCancel ? 0 : -1, children: cancelLabel })] }), isFocused && suggestions.length > 0 && (_jsx("div", { className: "react-cupertino-ui-search-bar__suggestions", children: _jsx("ul", { className: "suggestions-list", children: suggestions.map((suggestion, index) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "suggestion-item", onMouseDown: (e) => {
+                                e.preventDefault(); // Prevent blur
+                                onSelectSuggestion?.(suggestion);
+                            }, children: [_jsx(Search, { size: 14, className: "suggestion-icon" }), _jsx("span", { children: suggestion })] }) }, index))) }) }))] }));
+});
+SearchBar.displayName = "SearchBar";
+export { SearchBar };

package/dist/index.scss

@@ -0,0 +1,191 @@
+@use "@/styles/mixins/glass" as glass;
+
+.react-cupertino-ui-search-bar {
+  position: relative;
+  width: 100%;
+  padding: 8px 16px;
+  z-index: 10;
+  
+  &.glass {
+    // The container itself might not be glass, but the background behind it?
+    // Or typically SearchBar is transparent on a blurred NavigationBar.
+    // If it's standalone, it might have background.
+    // Let's assume transparent background by default, input is the glass element.
+  }
+
+  &__container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    overflow: hidden; // For clipping the cancel button animation
+  }
+
+  &__input-wrapper {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: 36px;
+    background: rgba(118, 118, 128, 0.12);
+    border-radius: 10px;
+    padding: 0 8px;
+    transition: background-color 0.2s ease;
+    
+    @media (prefers-color-scheme: dark) {
+        background: rgba(118, 118, 128, 0.24);
+    }
+    
+    &:focus-within {
+        background: rgba(118, 118, 128, 0.12); // Keep or change?
+    }
+
+    .search-icon {
+      color: var(--muted-foreground);
+      margin-right: 6px;
+      flex-shrink: 0;
+    }
+
+    .spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid var(--muted-foreground);
+        border-top-color: transparent;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+    }
+  }
+
+  &__input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    height: 100%;
+    font-size: 17px;
+    color: var(--foreground);
+    min-width: 0;
+    
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--muted-foreground);
+    }
+  }
+
+  .clear-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--muted-foreground);
+    color: var(--background);
+    border: none;
+    padding: 0;
+    margin-left: 6px;
+    cursor: pointer;
+    
+    svg {
+        display: block;
+    }
+  }
+
+  .voice-button {
+      background: transparent;
+      border: none;
+      color: var(--muted-foreground);
+      padding: 0;
+      margin-left: 6px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      
+      &:hover {
+          color: var(--foreground);
+      }
+  }
+
+  &__cancel {
+    background: transparent;
+    border: none;
+    color: var(--color-blue);
+    font-size: 17px;
+    padding: 0 0 0 12px;
+    cursor: pointer;
+    white-space: nowrap;
+    
+    // Animation logic
+    margin-right: -70px; // Hide by default
+    opacity: 0;
+    transition: margin-right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
+    pointer-events: none;
+  }
+
+  &.is-focused {
+    .react-cupertino-ui-search-bar__cancel {
+        margin-right: 0;
+        opacity: 1;
+        pointer-events: auto;
+    }
+  }
+
+  &__suggestions {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--background);
+    @include glass.glass-panel(light, 20px, 0.95);
+    border-radius: 12px;
+    margin: 8px 16px;
+    padding: 8px 0;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+    
+    .suggestions-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .suggestion-item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: 10px 16px;
+        background: transparent;
+        border: none;
+        text-align: left;
+        font-size: 16px;
+        color: var(--foreground);
+        cursor: pointer;
+        
+        .suggestion-icon {
+            margin-right: 12px;
+            color: var(--muted-foreground);
+            opacity: 0.7;
+        }
+
+        &:hover {
+            background: rgba(0,0,0,0.05);
+        }
+        
+        // Separator except last
+        position: relative;
+        &:not(:last-child)::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 44px; // Align with text
+            right: 0;
+            height: 1px;
+            background: var(--border);
+            opacity: 0.5;
+        }
+    }
+  }
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@react-cupertino-ui/search-bar",
+  "version": "0.0.0",
+  "description": "SearchBar 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",
+    "lucide-react": "^0.417.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "a6b07a7a8a0ab6f4c80884b6fb9d5eb16ee6da1d",
+  "publishConfig": {
+    "access": "public"
+  }
+}