@react-cupertino-ui/ai-loading-state 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,75 @@
+.react-cupertino-ui-ai-loading-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1.1rem;
+  border-radius: 1.25rem;
+  background: rgba(13, 13, 15, 0.08);
+  backdrop-filter: blur(26px) saturate(160%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 14px 30px rgba(5, 5, 10, 0.15);
+}
+.react-cupertino-ui-ai-loading-state__orb {
+  position: relative;
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 999px;
+  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.react-cupertino-ui-ai-loading-state__orb span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.65);
+  animation: ai-orb 1.8s infinite ease-in-out;
+}
+.react-cupertino-ui-ai-loading-state__orb span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.react-cupertino-ui-ai-loading-state__orb span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+.react-cupertino-ui-ai-loading-state__text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  color: rgba(10, 10, 15, 0.75);
+}
+.react-cupertino-ui-ai-loading-state__text strong {
+  font-size: 0.95rem;
+}
+.react-cupertino-ui-ai-loading-state__text span {
+  font-size: 0.85rem;
+  color: rgba(10, 10, 15, 0.5);
+}
+.react-cupertino-ui-ai-loading-state.variant-generating {
+  background: rgba(15, 10, 60, 0.2);
+}
+.react-cupertino-ui-ai-loading-state.variant-generating .react-cupertino-ui-ai-loading-state__orb {
+  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95), rgba(15, 10, 60, 0.1));
+}
+.react-cupertino-ui-ai-loading-state.variant-searching {
+  background: rgba(0, 122, 255, 0.12);
+}
+.react-cupertino-ui-ai-loading-state.variant-searching .react-cupertino-ui-ai-loading-state__orb {
+  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95), rgba(0, 122, 255, 0.15));
+}
+
+@keyframes ai-orb {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.9;
+  }
+  70% {
+    transform: scale(1.3);
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}

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 type AILoadingStateVariant = "thinking" | "generating" | "searching";
+export interface AILoadingStateProps extends Omit<BaseProps<HTMLDivElement>, "children" | "variant" | "size"> {
+    variant?: AILoadingStateVariant;
+    message?: string;
+}
+declare const AILoadingState: React.ForwardRefExoticComponent<AILoadingStateProps & React.RefAttributes<HTMLDivElement>>;
+export { AILoadingState };

package/dist/index.js

@@ -0,0 +1,15 @@
+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 variantLabel = {
+    thinking: "Thinking",
+    generating: "Generating",
+    searching: "Searching",
+};
+const AILoadingState = React.forwardRef((props, ref) => {
+    const { className, variant = "thinking", message, ...rest } = props;
+    return (_jsxs("div", { ref: ref, className: cn("react-cupertino-ui-ai-loading-state", `variant-${variant}`, className), role: "status", "aria-live": "polite", ...rest, children: [_jsxs("div", { className: "react-cupertino-ui-ai-loading-state__orb", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsxs("div", { className: "react-cupertino-ui-ai-loading-state__text", children: [_jsx("strong", { children: variantLabel[variant] }), message ? _jsx("span", { children: message }) : null] })] }));
+});
+AILoadingState.displayName = "AILoadingState";
+export { AILoadingState };

package/dist/index.scss

@@ -0,0 +1,86 @@
+.react-cupertino-ui-ai-loading-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1.1rem;
+  border-radius: 1.25rem;
+  background: rgba(13, 13, 15, 0.08);
+  backdrop-filter: blur(26px) saturate(160%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 14px 30px rgba(5, 5, 10, 0.15);
+
+  &__orb {
+    position: relative;
+    width: 2.4rem;
+    height: 2.4rem;
+    border-radius: 999px;
+    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    span {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      border: 1px solid rgba(255, 255, 255, 0.65);
+      animation: ai-orb 1.8s infinite ease-in-out;
+
+      &:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+    }
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    color: rgba(10, 10, 15, 0.75);
+
+    strong {
+      font-size: 0.95rem;
+    }
+
+    span {
+      font-size: 0.85rem;
+      color: rgba(10, 10, 15, 0.5);
+    }
+  }
+
+  &.variant-generating {
+    background: rgba(15, 10, 60, 0.2);
+
+    .react-cupertino-ui-ai-loading-state__orb {
+      background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95), rgba(15, 10, 60, 0.1));
+    }
+  }
+
+  &.variant-searching {
+    background: rgba(0, 122, 255, 0.12);
+
+    .react-cupertino-ui-ai-loading-state__orb {
+      background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95), rgba(0, 122, 255, 0.15));
+    }
+  }
+}
+
+@keyframes ai-orb {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.9;
+  }
+  70% {
+    transform: scale(1.3);
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@react-cupertino-ui/ai-loading-state",
+  "version": "0.0.0",
+  "description": "AI Loading State indicator for 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"
+  }
+}