@react-cupertino-ui/radio 1.0.3

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,114 @@
+.react-cupertino-ui-radio {
+  --radio-size: 1.35rem;
+  --radio-dot-size: 0.52rem;
+  --radio-gap: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--radio-gap);
+  cursor: pointer;
+  user-select: none;
+}
+.react-cupertino-ui-radio[data-disabled=true] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.react-cupertino-ui-radio__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.react-cupertino-ui-radio__control {
+  width: var(--radio-size);
+  height: var(--radio-size);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.react-cupertino-ui-radio__ring {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  transition: box-shadow 220ms ease, background 220ms ease;
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(32px) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(32px) 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-radio__ring::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-radio__dot {
+  position: absolute;
+  width: var(--radio-dot-size);
+  height: var(--radio-dot-size);
+  border-radius: 50%;
+  background: linear-gradient(130deg, rgba(10, 132, 255, 0.95), rgba(90, 200, 250, 0.95));
+  box-shadow: 0 8px 20px rgba(10, 132, 255, 0.35);
+  transform: scale(0);
+  opacity: 0;
+  transition: transform 200ms ease, opacity 200ms ease;
+}
+.react-cupertino-ui-radio__text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+.react-cupertino-ui-radio__label {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+.react-cupertino-ui-radio__helper {
+  font-size: 0.78rem;
+  color: hsl(var(--muted-foreground));
+}
+.react-cupertino-ui-radio__error {
+  font-size: 0.78rem;
+  color: var(--pink);
+}
+.react-cupertino-ui-radio[data-error=true] .react-cupertino-ui-radio__ring {
+  box-shadow: 0 0 0 2px rgba(255, 45, 85, 0.25);
+}
+.react-cupertino-ui-radio:focus-within .react-cupertino-ui-radio__ring {
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
+}
+.react-cupertino-ui-radio__input:checked ~ .react-cupertino-ui-radio__control .react-cupertino-ui-radio__dot {
+  transform: scale(1);
+  opacity: 1;
+}
+.react-cupertino-ui-radio.variant-solid .react-cupertino-ui-radio__ring {
+  background: linear-gradient(120deg, rgba(10, 10, 10, 0.8), rgba(40, 40, 40, 0.95));
+  border-color: rgba(255, 255, 255, 0.25);
+}
+.react-cupertino-ui-radio.variant-outline .react-cupertino-ui-radio__ring {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+.react-cupertino-ui-radio.size-sm {
+  --radio-size: 1.15rem;
+  --radio-dot-size: 0.4rem;
+  --radio-gap: 0.6rem;
+}
+.react-cupertino-ui-radio.size-sm__label {
+  font-size: 0.85rem;
+}
+.react-cupertino-ui-radio.size-lg {
+  --radio-size: 1.6rem;
+  --radio-dot-size: 0.65rem;
+  --radio-gap: 0.85rem;
+}
+.react-cupertino-ui-radio.size-lg__label {
+  font-size: 1.05rem;
+}

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import "./index.scss";
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onBlur" | "onFocus"> {
+    className?: string;
+    size?: "default" | "sm" | "lg";
+    label?: string;
+    helperText?: string;
+    error?: string;
+    variant?: "glass" | "solid" | "outline";
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export { Radio };
+export default Radio;

package/dist/index.js

@@ -0,0 +1,17 @@
+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 Radio = React.forwardRef(({ className, size = "default", label, helperText, error, variant = "glass", id, disabled, onFocus, onBlur, ...props }, forwardedRef) => {
+    const generatedId = React.useId();
+    const controlId = id ?? `radio-${generatedId}`;
+    const helperId = helperText ? `${controlId}-helper` : undefined;
+    const errorId = error ? `${controlId}-error` : undefined;
+    const messageId = error ? errorId : helperId;
+    const internalRef = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, () => internalRef.current);
+    return (_jsxs("label", { className: cn("react-cupertino-ui-radio", `size-${size}`, `variant-${variant}`, className), "data-disabled": disabled ? "true" : undefined, "data-error": error ? "true" : undefined, htmlFor: controlId, children: [_jsx("input", { ref: internalRef, id: controlId, type: "radio", className: "react-cupertino-ui-radio__input", disabled: disabled, "aria-describedby": messageId, onFocus: onFocus, onBlur: onBlur, ...props }), _jsxs("span", { className: "react-cupertino-ui-radio__control", "aria-hidden": "true", children: [_jsx("span", { className: "react-cupertino-ui-radio__ring" }), _jsx("span", { className: "react-cupertino-ui-radio__dot" })] }), (label || helperText || error) && (_jsxs("span", { className: "react-cupertino-ui-radio__text", children: [label && _jsx("span", { className: "react-cupertino-ui-radio__label", children: label }), helperText && !error && (_jsx("span", { id: helperId, className: "react-cupertino-ui-radio__helper", children: helperText })), error && (_jsx("span", { id: errorId, className: "react-cupertino-ui-radio__error", role: "alert", children: error }))] }))] }));
+});
+Radio.displayName = "Radio";
+export { Radio };
+export default Radio;

package/dist/index.scss

@@ -0,0 +1,116 @@
+@use "@/styles/mixins/glass" as glass;
+
+.react-cupertino-ui-radio {
+  --radio-size: 1.35rem;
+  --radio-dot-size: 0.52rem;
+  --radio-gap: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--radio-gap);
+  cursor: pointer;
+  user-select: none;
+
+  &[data-disabled="true"] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &__control {
+    width: var(--radio-size);
+    height: var(--radio-size);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__ring {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    transition: box-shadow 220ms ease, background 220ms ease;
+    @include glass.glass-panel(light, 32px, 0.5);
+  }
+
+  &__dot {
+    position: absolute;
+    width: var(--radio-dot-size);
+    height: var(--radio-dot-size);
+    border-radius: 50%;
+    background: linear-gradient(130deg, rgba(10, 132, 255, 0.95), rgba(90, 200, 250, 0.95));
+    box-shadow: 0 8px 20px rgba(10, 132, 255, 0.35);
+    transform: scale(0);
+    opacity: 0;
+    transition: transform 200ms ease, opacity 200ms ease;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+  }
+
+  &__label {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: hsl(var(--foreground));
+  }
+
+  &__helper {
+    font-size: 0.78rem;
+    color: hsl(var(--muted-foreground));
+  }
+
+  &__error {
+    font-size: 0.78rem;
+    color: var(--pink);
+  }
+
+  &[data-error="true"] &__ring {
+    box-shadow: 0 0 0 2px rgba(255, 45, 85, 0.25);
+  }
+
+  &:focus-within &__ring {
+    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
+  }
+
+  &__input:checked ~ &__control &__dot {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  &.variant-solid &__ring {
+    background: linear-gradient(120deg, rgba(10, 10, 10, 0.8), rgba(40, 40, 40, 0.95));
+    border-color: rgba(255, 255, 255, 0.25);
+  }
+
+  &.variant-outline &__ring {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+  }
+
+  &.size-sm {
+    --radio-size: 1.15rem;
+    --radio-dot-size: 0.4rem;
+    --radio-gap: 0.6rem;
+    &__label {
+      font-size: 0.85rem;
+    }
+  }
+
+  &.size-lg {
+    --radio-size: 1.6rem;
+    --radio-dot-size: 0.65rem;
+    --radio-gap: 0.85rem;
+    &__label {
+      font-size: 1.05rem;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@react-cupertino-ui/radio",
+  "version": "1.0.3",
+  "description": "Radio 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": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
+  "publishConfig": {
+    "access": "public"
+  }
+}