@react-cupertino-ui/checkbox 1.0.1

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,123 @@
+.react-cupertino-ui-checkbox {
+  --checkbox-size: 1.4rem;
+  --checkbox-padding: 0.45rem;
+  --checkbox-gap: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--checkbox-gap);
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+}
+.react-cupertino-ui-checkbox[data-disabled=true] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.react-cupertino-ui-checkbox__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.react-cupertino-ui-checkbox__control {
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  border-radius: 0.65rem;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--checkbox-padding);
+}
+.react-cupertino-ui-checkbox__box {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
+  background: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(28px) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: 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-checkbox__box::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-checkbox__icon {
+  width: 0.9rem;
+  height: 0.9rem;
+  color: #0a0a0a;
+  opacity: 0;
+  transform: scale(0.4);
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+.react-cupertino-ui-checkbox__text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+.react-cupertino-ui-checkbox__label {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+.react-cupertino-ui-checkbox__helper {
+  font-size: 0.8rem;
+  color: hsl(var(--muted-foreground));
+}
+.react-cupertino-ui-checkbox__error {
+  font-size: 0.8rem;
+  color: var(--pink);
+}
+.react-cupertino-ui-checkbox.size-sm {
+  --checkbox-size: 1.15rem;
+  --checkbox-padding: 0.35rem;
+  --checkbox-gap: 0.6rem;
+}
+.react-cupertino-ui-checkbox.size-sm__label {
+  font-size: 0.85rem;
+}
+.react-cupertino-ui-checkbox.size-lg {
+  --checkbox-size: 1.7rem;
+  --checkbox-padding: 0.55rem;
+  --checkbox-gap: 0.85rem;
+}
+.react-cupertino-ui-checkbox.size-lg__label {
+  font-size: 1.05rem;
+}
+.react-cupertino-ui-checkbox.variant-solid .react-cupertino-ui-checkbox__box {
+  background: linear-gradient(120deg, rgba(10, 132, 255, 0.95), rgba(90, 200, 250, 0.95));
+  box-shadow: 0 8px 25px rgba(10, 132, 255, 0.35);
+}
+.react-cupertino-ui-checkbox.variant-outline .react-cupertino-ui-checkbox__box {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+}
+.react-cupertino-ui-checkbox[data-error=true] .react-cupertino-ui-checkbox__box {
+  box-shadow: 0 0 0 2px rgba(255, 45, 85, 0.25);
+}
+.react-cupertino-ui-checkbox:focus-within .react-cupertino-ui-checkbox__box {
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
+}
+.react-cupertino-ui-checkbox__input:checked ~ .react-cupertino-ui-checkbox__control .react-cupertino-ui-checkbox__box, .react-cupertino-ui-checkbox__input:indeterminate ~ .react-cupertino-ui-checkbox__control .react-cupertino-ui-checkbox__box {
+  background: linear-gradient(120deg, rgba(10, 132, 255, 0.95), rgba(90, 200, 250, 0.95));
+  border-color: transparent;
+  box-shadow: 0 8px 25px rgba(10, 132, 255, 0.35);
+}
+.react-cupertino-ui-checkbox__input:checked ~ .react-cupertino-ui-checkbox__control .react-cupertino-ui-checkbox__icon, .react-cupertino-ui-checkbox__input:indeterminate ~ .react-cupertino-ui-checkbox__control .react-cupertino-ui-checkbox__icon {
+  opacity: 1;
+  transform: scale(1);
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import "./index.scss";
+export interface CheckboxProps 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>;
+    indeterminate?: boolean;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export { Checkbox };
+export default Checkbox;

package/dist/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check } from "lucide-react";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import "./index.scss";
+const Checkbox = React.forwardRef(({ className, size = "default", variant = "glass", label, helperText, error, id, disabled, onFocus, onBlur, indeterminate, ...props }, forwardedRef) => {
+    const generatedId = React.useId();
+    const checkboxId = id ?? `checkbox-${generatedId}`;
+    const helperId = helperText ? `${checkboxId}-helper` : undefined;
+    const errorId = error ? `${checkboxId}-error` : undefined;
+    const messageId = error ? errorId : helperId;
+    const internalRef = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, () => internalRef.current);
+    React.useEffect(() => {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = Boolean(indeterminate);
+        }
+    }, [indeterminate]);
+    return (_jsxs("label", { className: cn("react-cupertino-ui-checkbox", `size-${size}`, `variant-${variant}`, className), "data-disabled": disabled ? "true" : undefined, "data-error": error ? "true" : undefined, htmlFor: checkboxId, children: [_jsx("input", { ref: internalRef, id: checkboxId, type: "checkbox", className: "react-cupertino-ui-checkbox__input", disabled: disabled, "aria-describedby": messageId, onFocus: onFocus, onBlur: onBlur, ...props }), _jsx("span", { className: "react-cupertino-ui-checkbox__control", "aria-hidden": "true", children: _jsx("span", { className: "react-cupertino-ui-checkbox__box", children: _jsx(Check, { className: "react-cupertino-ui-checkbox__icon" }) }) }), (label || helperText || error) && (_jsxs("span", { className: "react-cupertino-ui-checkbox__text", children: [label && _jsx("span", { className: "react-cupertino-ui-checkbox__label", children: label }), helperText && !error && (_jsx("span", { id: helperId, className: "react-cupertino-ui-checkbox__helper", children: helperText })), error && (_jsx("span", { id: errorId, className: "react-cupertino-ui-checkbox__error", role: "alert", children: error }))] }))] }));
+});
+Checkbox.displayName = "Checkbox";
+export { Checkbox };
+export default Checkbox;

package/dist/index.scss

@@ -0,0 +1,128 @@
+@use "@/styles/mixins/glass" as glass;
+
+.react-cupertino-ui-checkbox {
+  --checkbox-size: 1.4rem;
+  --checkbox-padding: 0.45rem;
+  --checkbox-gap: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--checkbox-gap);
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+
+  &[data-disabled="true"] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &__control {
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    border-radius: 0.65rem;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--checkbox-padding);
+  }
+
+  &__box {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
+    @include glass.glass-panel(light, 28px, 0.55);
+  }
+
+  &__icon {
+    width: 0.9rem;
+    height: 0.9rem;
+    color: #0a0a0a;
+    opacity: 0;
+    transform: scale(0.4);
+    transition: opacity 180ms ease, transform 180ms ease;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+  }
+
+  &__label {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: hsl(var(--foreground));
+  }
+
+  &__helper {
+    font-size: 0.8rem;
+    color: hsl(var(--muted-foreground));
+  }
+
+  &__error {
+    font-size: 0.8rem;
+    color: var(--pink);
+  }
+
+  &.size-sm {
+    --checkbox-size: 1.15rem;
+    --checkbox-padding: 0.35rem;
+    --checkbox-gap: 0.6rem;
+    &__label {
+      font-size: 0.85rem;
+    }
+  }
+
+  &.size-lg {
+    --checkbox-size: 1.7rem;
+    --checkbox-padding: 0.55rem;
+    --checkbox-gap: 0.85rem;
+    &__label {
+      font-size: 1.05rem;
+    }
+  }
+
+  &.variant-solid &__box {
+    background: linear-gradient(120deg, rgba(10, 132, 255, 0.95), rgba(90, 200, 250, 0.95));
+    box-shadow: 0 8px 25px rgba(10, 132, 255, 0.35);
+  }
+
+  &.variant-outline &__box {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  }
+
+  &[data-error="true"] &__box {
+    box-shadow: 0 0 0 2px rgba(255, 45, 85, 0.25);
+  }
+
+  &:focus-within &__box {
+    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
+  }
+
+  &__input:checked ~ &__control &__box,
+  &__input:indeterminate ~ &__control &__box {
+    background: linear-gradient(120deg, rgba(10, 132, 255, 0.95), rgba(90, 200, 250, 0.95));
+    border-color: transparent;
+    box-shadow: 0 8px 25px rgba(10, 132, 255, 0.35);
+  }
+
+  &__input:checked ~ &__control &__icon,
+  &__input:indeterminate ~ &__control &__icon {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@react-cupertino-ui/checkbox",
+  "version": "1.0.1",
+  "description": "Checkbox 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:*",
+    "lucide-react": "^0.417.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
+  "publishConfig": {
+    "access": "public"
+  }
+}