@react-cupertino-ui/suggestion-chip 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,138 @@
+.react-cupertino-ui-suggestion-chip {
+  --chip-height: 2.35rem;
+  --chip-padding-inline: 1rem;
+  --chip-gap: 0.45rem;
+  --chip-foreground: var(--button-foreground-color, hsl(var(--foreground, 20 14.3% 4.1%)));
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--chip-gap);
+  border-radius: 999px;
+  border: none;
+  background: transparent;
+  padding-inline: var(--chip-padding-inline);
+  height: var(--chip-height);
+  min-height: var(--chip-height);
+  color: var(--chip-foreground);
+  font-size: 0.9rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 220ms ease, box-shadow 220ms ease, color 220ms ease, transform 220ms ease, filter 220ms ease;
+  isolation: isolate;
+}
+.react-cupertino-ui-suggestion-chip:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25), 0 0 1px rgba(255, 255, 255, 0.9);
+}
+.react-cupertino-ui-suggestion-chip:focus {
+  outline: none;
+}
+.react-cupertino-ui-suggestion-chip:disabled, .react-cupertino-ui-suggestion-chip[aria-disabled=true] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.react-cupertino-ui-suggestion-chip[data-active=true] {
+  transform: translateY(-1px);
+}
+.react-cupertino-ui-suggestion-chip[data-loading=true] {
+  cursor: progress;
+}
+.react-cupertino-ui-suggestion-chip__icon, .react-cupertino-ui-suggestion-chip__trailing, .react-cupertino-ui-suggestion-chip__spinner {
+  width: 1.15rem;
+  height: 1.15rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+.react-cupertino-ui-suggestion-chip__label {
+  white-space: nowrap;
+}
+.react-cupertino-ui-suggestion-chip__spinner {
+  border-radius: inherit;
+  border: 2px solid color-mix(in srgb, currentColor, transparent 50%);
+  border-top-color: currentColor;
+  animation: chip-spin 0.85s linear infinite;
+}
+.react-cupertino-ui-suggestion-chip.variant-glass {
+  background: rgba(255, 255, 255, 0.65);
+  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) 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-suggestion-chip.variant-glass::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-suggestion-chip.variant-glass {
+  background: var(--glass-surface, rgba(255, 255, 255, 0.72));
+}
+.react-cupertino-ui-suggestion-chip.variant-glass:hover:not(:disabled) {
+  background: var(--glass-surface-hover, rgba(255, 255, 255, 0.85));
+  box-shadow: 0 12px 35px rgba(6, 6, 8, 0.14);
+}
+.react-cupertino-ui-suggestion-chip.variant-glass[data-active=true] {
+  filter: brightness(0.98);
+}
+.react-cupertino-ui-suggestion-chip.variant-outline {
+  background: transparent;
+  border: 1px solid var(--glass-border-strong, rgba(255, 255, 255, 0.4));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
+}
+.react-cupertino-ui-suggestion-chip.variant-outline:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+}
+.react-cupertino-ui-suggestion-chip.variant-ghost {
+  background: transparent;
+  color: var(--color-blue, #0a84ff);
+}
+.react-cupertino-ui-suggestion-chip.variant-ghost:hover:not(:disabled) {
+  background: rgba(0, 122, 255, 0.08);
+}
+.react-cupertino-ui-suggestion-chip.variant-secondary {
+  background: rgba(15, 15, 15, 0.05);
+  color: color-mix(in srgb, #0b0b0b, white 10%);
+}
+.react-cupertino-ui-suggestion-chip.variant-secondary:hover:not(:disabled) {
+  background: rgba(15, 15, 15, 0.08);
+}
+.react-cupertino-ui-suggestion-chip.size-sm {
+  --chip-height: 2rem;
+  --chip-padding-inline: 0.85rem;
+  font-size: 0.85rem;
+}
+.react-cupertino-ui-suggestion-chip.size-default {
+  --chip-height: 2.35rem;
+}
+.react-cupertino-ui-suggestion-chip.has-icon .react-cupertino-ui-suggestion-chip__label {
+  font-weight: 600;
+}
+.react-cupertino-ui-suggestion-chip.has-trailing-icon {
+  padding-inline-end: calc(var(--chip-padding-inline) - 0.2rem);
+}
+
+@keyframes chip-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .react-cupertino-ui-suggestion-chip {
+    transition-duration: 0.15s;
+  }
+  .react-cupertino-ui-suggestion-chip[data-active=true] {
+    transform: none;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { BaseProps } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import "./index.scss";
+type NativeChipProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "className" | "children">;
+export interface SuggestionChipProps extends BaseProps<HTMLButtonElement>, NativeChipProps {
+    asChild?: boolean;
+    icon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    active?: boolean;
+    loading?: boolean;
+}
+declare const SuggestionChip: React.ForwardRefExoticComponent<SuggestionChipProps & React.RefAttributes<HTMLButtonElement>>;
+export { SuggestionChip };

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 { Slot } from "@radix-ui/react-slot";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import { BaseVariants } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import "./index.scss";
+const chipClasses = (props) => {
+    const { variant, size, className, active, loading, hasIcon, hasTrailing } = props;
+    return BaseVariants("react-cupertino-ui-suggestion-chip", {
+        variant,
+        size,
+        className: cn(active && "is-active", loading && "is-loading", hasIcon && "has-icon", hasTrailing && "has-trailing-icon", className),
+    }, {
+        variants: {
+            variant: {
+                glass: "variant-glass",
+                outline: "variant-outline",
+                ghost: "variant-ghost",
+                secondary: "variant-secondary",
+                default: "variant-glass",
+            },
+            size: {
+                default: "size-default",
+                sm: "size-sm",
+            },
+        },
+        defaultVariants: {
+            variant: "glass",
+            size: "default",
+        },
+    });
+};
+const SuggestionChip = React.forwardRef((props, ref) => {
+    const { asChild = false, icon, trailingIcon, active = false, loading = false, disabled, children, className, variant, size, ...rest } = props;
+    const Comp = asChild ? Slot : "button";
+    const isDisabled = Boolean(disabled || loading);
+    const classes = chipClasses({
+        variant,
+        size,
+        className,
+        active,
+        loading,
+        hasIcon: Boolean(icon),
+        hasTrailing: Boolean(trailingIcon),
+    });
+    return (_jsxs(Comp, { ref: ref, className: cn(classes), "data-active": active ? "true" : undefined, "data-loading": loading ? "true" : undefined, disabled: !asChild ? isDisabled : undefined, "aria-disabled": asChild && isDisabled ? "true" : undefined, ...rest, children: [loading ? (_jsx("span", { className: "react-cupertino-ui-suggestion-chip__spinner", "aria-hidden": "true" })) : icon ? (_jsx("span", { className: "react-cupertino-ui-suggestion-chip__icon", "aria-hidden": "true", children: icon })) : null, children && (_jsx("span", { className: "react-cupertino-ui-suggestion-chip__label", children: children })), trailingIcon ? (_jsx("span", { className: "react-cupertino-ui-suggestion-chip__trailing", "aria-hidden": "true", children: trailingIcon })) : null] }));
+});
+SuggestionChip.displayName = "SuggestionChip";
+export { SuggestionChip };

package/dist/index.scss

@@ -0,0 +1,150 @@
+@use "@/styles/mixins/glass" as glass;
+
+.react-cupertino-ui-suggestion-chip {
+  --chip-height: 2.35rem;
+  --chip-padding-inline: 1rem;
+  --chip-gap: 0.45rem;
+  --chip-foreground: var(--button-foreground-color, hsl(var(--foreground, 20 14.3% 4.1%)));
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--chip-gap);
+  border-radius: 999px;
+  border: none;
+  background: transparent;
+  padding-inline: var(--chip-padding-inline);
+  height: var(--chip-height);
+  min-height: var(--chip-height);
+  color: var(--chip-foreground);
+  font-size: 0.9rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 220ms ease, box-shadow 220ms ease, color 220ms ease,
+    transform 220ms ease, filter 220ms ease;
+  isolation: isolate;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25), 0 0 1px rgba(255, 255, 255, 0.9);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  &[data-active="true"] {
+    transform: translateY(-1px);
+  }
+
+  &[data-loading="true"] {
+    cursor: progress;
+  }
+
+  &__icon,
+  &__trailing,
+  &__spinner {
+    width: 1.15rem;
+    height: 1.15rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+  }
+
+  &__label {
+    white-space: nowrap;
+  }
+
+  &__spinner {
+    border-radius: inherit;
+    border: 2px solid color-mix(in srgb, currentColor, transparent 50%);
+    border-top-color: currentColor;
+    animation: chip-spin 0.85s linear infinite;
+  }
+
+  &.variant-glass {
+    @include glass.glass-panel(light, var(--glass-blur, 28px), 0.65);
+    background: var(--glass-surface, rgba(255, 255, 255, 0.72));
+
+    &:hover:not(:disabled) {
+      background: var(--glass-surface-hover, rgba(255, 255, 255, 0.85));
+      box-shadow: 0 12px 35px rgba(6, 6, 8, 0.14);
+    }
+
+    &[data-active="true"] {
+      filter: brightness(0.98);
+    }
+  }
+
+  &.variant-outline {
+    background: transparent;
+    border: 1px solid var(--glass-border-strong, rgba(255, 255, 255, 0.4));
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
+
+    &:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  &.variant-ghost {
+    background: transparent;
+    color: var(--color-blue, #0a84ff);
+
+    &:hover:not(:disabled) {
+      background: rgba(0, 122, 255, 0.08);
+    }
+  }
+
+  &.variant-secondary {
+    background: rgba(15, 15, 15, 0.05);
+    color: color-mix(in srgb, #0b0b0b, white 10%);
+
+    &:hover:not(:disabled) {
+      background: rgba(15, 15, 15, 0.08);
+    }
+  }
+
+  &.size-sm {
+    --chip-height: 2rem;
+    --chip-padding-inline: 0.85rem;
+    font-size: 0.85rem;
+  }
+
+  &.size-default {
+    --chip-height: 2.35rem;
+  }
+
+  &.has-icon .react-cupertino-ui-suggestion-chip__label {
+    font-weight: 600;
+  }
+
+  &.has-trailing-icon {
+    padding-inline-end: calc(var(--chip-padding-inline) - 0.2rem);
+  }
+}
+
+@keyframes chip-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .react-cupertino-ui-suggestion-chip {
+    transition-duration: 0.15s;
+
+    &[data-active="true"] {
+      transform: none;
+    }
+  }
+}

package/package.json

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