@react-cupertino-ui/ai-prompt-input 1.0.2

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,152 @@
+.react-cupertino-ui-ai-prompt-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  width: 100%;
+}
+.react-cupertino-ui-ai-prompt-input__shell {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.6rem;
+  padding: 0.9rem 1rem;
+  border-radius: 1.25rem;
+  background: rgba(255, 255, 255, 0.65);
+  backdrop-filter: blur(var(--glass-blur, 36px)) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(var(--glass-blur, 36px)) 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-ai-prompt-input__shell::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-ai-prompt-input__shell {
+  box-shadow: 0 20px 45px rgba(10, 10, 13, 0.14);
+  position: relative;
+}
+.react-cupertino-ui-ai-prompt-input[data-disabled=true] {
+  opacity: 0.6;
+}
+.react-cupertino-ui-ai-prompt-input__attachment {
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 999px;
+  border: none;
+  background: rgba(255, 255, 255, 0.55);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 240ms ease, transform 240ms ease;
+}
+.react-cupertino-ui-ai-prompt-input__attachment span::before {
+  content: "";
+  width: 1.05rem;
+  height: 1.05rem;
+  border: 2px solid rgba(0, 0, 0, 0.6);
+  border-top: transparent;
+  border-right: transparent;
+  border-radius: 4px;
+  transform: rotate(-45deg);
+}
+.react-cupertino-ui-ai-prompt-input__attachment:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.8);
+}
+.react-cupertino-ui-ai-prompt-input__attachment:active:not(:disabled) {
+  transform: scale(0.96);
+}
+.react-cupertino-ui-ai-prompt-input__textarea {
+  flex: 1;
+  border: none;
+  background: transparent;
+  resize: none;
+  font: inherit;
+  color: inherit;
+  line-height: 1.4;
+  max-height: 200px;
+  padding: 0;
+  margin: 0;
+  outline: none;
+}
+.react-cupertino-ui-ai-prompt-input__textarea::placeholder {
+  color: rgba(15, 15, 20, 0.45);
+}
+.react-cupertino-ui-ai-prompt-input__submit {
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 999px;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: var(--color-blue, #007aff);
+  color: white;
+  transition: transform 240ms ease, filter 240ms ease, opacity 240ms ease;
+}
+.react-cupertino-ui-ai-prompt-input__submit[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.react-cupertino-ui-ai-prompt-input__submit span {
+  width: 1rem;
+  height: 1rem;
+  position: relative;
+  display: inline-block;
+}
+.react-cupertino-ui-ai-prompt-input__submit span:not(.spinner)::before,
+.react-cupertino-ui-ai-prompt-input__submit span:not(.spinner)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 1px;
+  background: currentColor;
+}
+.react-cupertino-ui-ai-prompt-input__submit span:not(.spinner)::before {
+  width: 2px;
+  height: 100%;
+  left: 45%;
+}
+.react-cupertino-ui-ai-prompt-input__submit span:not(.spinner)::after {
+  width: 60%;
+  height: 2px;
+  top: 48%;
+  transform: rotate(45deg);
+  transform-origin: center right;
+}
+.react-cupertino-ui-ai-prompt-input__submit .spinner {
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  border-top-color: white;
+  animation: prompt-spin 0.8s linear infinite;
+  border-radius: 999px;
+}
+.react-cupertino-ui-ai-prompt-input__helper {
+  margin: 0;
+  font-size: 0.85rem;
+  color: rgba(16, 16, 20, 0.5);
+}
+.react-cupertino-ui-ai-prompt-input__suggestions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+@keyframes prompt-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .react-cupertino-ui-ai-prompt-input__submit,
+  .react-cupertino-ui-ai-prompt-input__attachment {
+    transition-duration: 0.1s;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { BaseProps } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import "./index.scss";
+export interface AIPromptInputProps extends Omit<BaseProps<HTMLDivElement>, "children"> {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (prompt: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    suggestions?: string[];
+    attachments?: boolean;
+    helperText?: string;
+}
+declare const AIPromptInput: React.ForwardRefExoticComponent<AIPromptInputProps & React.RefAttributes<HTMLDivElement>>;
+export { AIPromptInput };

package/dist/index.js

@@ -0,0 +1,44 @@
+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 { SuggestionChip } from "@react-cupertino-ui/suggestion-chip";
+import "./index.scss";
+const AIPromptInput = React.forwardRef((props, ref) => {
+    const { className, value, onChange, onSubmit, placeholder = "Ask Apple Intelligence...", disabled = false, loading = false, suggestions, attachments = false, helperText, ...rest } = props;
+    const textareaRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => containerRef.current);
+    const resizeTextarea = React.useCallback(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+    }, []);
+    React.useEffect(() => {
+        resizeTextarea();
+    }, [value, resizeTextarea]);
+    const handleChange = (event) => {
+        onChange(event.target.value);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            submitPrompt();
+        }
+    };
+    const submitPrompt = () => {
+        const trimmed = value.trim();
+        if (!trimmed || loading || disabled)
+            return;
+        onSubmit(trimmed);
+    };
+    const handleSuggestion = (suggestion) => {
+        onChange(suggestion);
+        onSubmit(suggestion);
+    };
+    const canSubmit = Boolean(value.trim()) && !loading && !disabled;
+    return (_jsxs("div", { ref: containerRef, className: cn("react-cupertino-ui-ai-prompt-input", className), "data-disabled": disabled || undefined, ...rest, children: [_jsxs("div", { className: "react-cupertino-ui-ai-prompt-input__shell", children: [attachments ? (_jsx("button", { type: "button", className: "react-cupertino-ui-ai-prompt-input__attachment", "aria-label": "Add attachment", disabled: disabled || loading, children: _jsx("span", { "aria-hidden": "true" }) })) : null, _jsx("textarea", { ref: textareaRef, className: "react-cupertino-ui-ai-prompt-input__textarea", value: value, placeholder: placeholder, onChange: handleChange, onKeyDown: handleKeyDown, rows: 1, disabled: disabled }), _jsx("button", { type: "button", className: "react-cupertino-ui-ai-prompt-input__submit", "aria-label": "Send prompt", onClick: submitPrompt, disabled: !canSubmit, "data-loading": loading ? "true" : undefined, children: loading ? _jsx("span", { className: "spinner", "aria-hidden": "true" }) : _jsx("span", { "aria-hidden": "true" }) })] }), helperText ? (_jsx("p", { className: "react-cupertino-ui-ai-prompt-input__helper", children: helperText })) : null, suggestions && suggestions.length > 0 ? (_jsx("div", { className: "react-cupertino-ui-ai-prompt-input__suggestions", children: suggestions.map((suggestion) => (_jsx(SuggestionChip, { size: "sm", variant: "glass", onClick: () => handleSuggestion(suggestion), children: suggestion }, suggestion))) })) : null] }));
+});
+AIPromptInput.displayName = "AIPromptInput";
+export { AIPromptInput };

package/dist/index.scss

@@ -0,0 +1,154 @@
+@use "@/styles/mixins/glass" as glass;
+
+.react-cupertino-ui-ai-prompt-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  width: 100%;
+
+  &__shell {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.6rem;
+    padding: 0.9rem 1rem;
+    border-radius: 1.25rem;
+    @include glass.glass-panel(light, var(--glass-blur, 36px), 0.65);
+    box-shadow: 0 20px 45px rgba(10, 10, 13, 0.14);
+    position: relative;
+  }
+
+  &[data-disabled="true"] {
+    opacity: 0.6;
+  }
+
+  &__attachment {
+    width: 2.4rem;
+    height: 2.4rem;
+    border-radius: 999px;
+    border: none;
+    background: rgba(255, 255, 255, 0.55);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 240ms ease, transform 240ms ease;
+
+    span::before {
+      content: "";
+      width: 1.05rem;
+      height: 1.05rem;
+      border: 2px solid rgba(0, 0, 0, 0.6);
+      border-top: transparent;
+      border-right: transparent;
+      border-radius: 4px;
+      transform: rotate(-45deg);
+    }
+
+    &:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.8);
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(0.96);
+    }
+  }
+
+  &__textarea {
+    flex: 1;
+    border: none;
+    background: transparent;
+    resize: none;
+    font: inherit;
+    color: inherit;
+    line-height: 1.4;
+    max-height: 200px;
+    padding: 0;
+    margin: 0;
+    outline: none;
+
+    &::placeholder {
+      color: rgba(15, 15, 20, 0.45);
+    }
+  }
+
+  &__submit {
+    width: 2.4rem;
+    height: 2.4rem;
+    border-radius: 999px;
+    border: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background: var(--color-blue, #007aff);
+    color: white;
+    transition: transform 240ms ease, filter 240ms ease, opacity 240ms ease;
+
+    &[disabled] {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+
+    span {
+      width: 1rem;
+      height: 1rem;
+      position: relative;
+      display: inline-block;
+    }
+
+    span:not(.spinner)::before,
+    span:not(.spinner)::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 1px;
+      background: currentColor;
+    }
+
+    span:not(.spinner)::before {
+      width: 2px;
+      height: 100%;
+      left: 45%;
+    }
+
+    span:not(.spinner)::after {
+      width: 60%;
+      height: 2px;
+      top: 48%;
+      transform: rotate(45deg);
+      transform-origin: center right;
+    }
+
+    .spinner {
+      border: 2px solid rgba(255, 255, 255, 0.6);
+      border-top-color: white;
+      animation: prompt-spin 0.8s linear infinite;
+      border-radius: 999px;
+    }
+  }
+
+  &__helper {
+    margin: 0;
+    font-size: 0.85rem;
+    color: rgba(16, 16, 20, 0.5);
+  }
+
+  &__suggestions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+}
+
+@keyframes prompt-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .react-cupertino-ui-ai-prompt-input__submit,
+  .react-cupertino-ui-ai-prompt-input__attachment {
+    transition-duration: 0.1s;
+  }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@react-cupertino-ui/ai-prompt-input",
+  "version": "1.0.2",
+  "description": "AI Prompt Input 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": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "@react-cupertino-ui/shared": "workspace:*",
+    "@react-cupertino-ui/suggestion-chip": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
+  "publishConfig": {
+    "access": "public"
+  }
+}