@react-cupertino-ui/text-field 1.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,174 @@
+.react-cupertino-ui-textfield-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  width: 100%;
+}
+
+.react-cupertino-ui-textfield {
+  --textfield-height: 2.875rem;
+  --textfield-radius: 1.125rem;
+  --textfield-padding-inline: 1.25rem;
+  --textfield-gap: 0.65rem;
+  --textfield-focus-color: var(--color-blue, #0a84ff);
+  --textfield-border-color: rgba(255, 255, 255, 0.2);
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--textfield-height);
+  border-radius: var(--textfield-radius);
+  padding-inline: var(--textfield-padding-inline);
+  gap: var(--textfield-gap);
+  color: hsl(var(--foreground));
+  font-size: 0.95rem;
+  line-height: 1.2;
+  isolation: isolate;
+  transition-property: border-color, box-shadow, transform, background, color;
+  transition-duration: 220ms;
+  transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
+}
+@supports not (backdrop-filter: blur(2px)) {
+  .react-cupertino-ui-textfield {
+    background: rgba(255, 255, 255, 0.92);
+  }
+}
+.react-cupertino-ui-textfield[data-focused=true] {
+  border-color: color-mix(in srgb, var(--textfield-focus-color), white 10%);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--textfield-focus-color), transparent 75%), 0 10px 38px rgba(15, 15, 15, 0.15);
+}
+.react-cupertino-ui-textfield[data-filled=true] {
+  --textfield-border-color: rgba(255, 255, 255, 0.35);
+}
+.react-cupertino-ui-textfield[data-state=error] {
+  --textfield-focus-color: var(--color-red, #ff3b30);
+  --textfield-border-color: color-mix(in srgb, var(--color-red, #ff3b30), white 15%);
+}
+.react-cupertino-ui-textfield[data-state=success] {
+  --textfield-focus-color: var(--green, #34c759);
+  --textfield-border-color: color-mix(in srgb, var(--green, #34c759), white 20%);
+}
+.react-cupertino-ui-textfield[data-disabled=true] {
+  opacity: 0.55;
+  pointer-events: none;
+  filter: grayscale(0.18);
+}
+.react-cupertino-ui-textfield.size-sm {
+  --textfield-height: 2.45rem;
+  --textfield-padding-inline: 1rem;
+  font-size: 0.875rem;
+}
+.react-cupertino-ui-textfield.size-lg {
+  --textfield-height: 3.35rem;
+  --textfield-padding-inline: 1.5rem;
+  font-size: 1.05rem;
+}
+.react-cupertino-ui-textfield__control {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.react-cupertino-ui-textfield__label {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.85em;
+  color: color-mix(in srgb, hsl(var(--muted-foreground)), transparent 20%);
+  pointer-events: none;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+}
+.react-cupertino-ui-textfield[data-label=raised] .react-cupertino-ui-textfield__label {
+  transform: translateY(-145%) scale(0.82);
+  color: color-mix(in srgb, var(--textfield-focus-color), white 35%);
+}
+.react-cupertino-ui-textfield__input {
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  padding: 0.35rem 0 0.15rem;
+  line-height: 1.4;
+}
+.react-cupertino-ui-textfield__input:focus {
+  outline: none;
+}
+.react-cupertino-ui-textfield__input::placeholder {
+  color: color-mix(in srgb, hsl(var(--muted-foreground)), transparent 30%);
+  opacity: 0.8;
+}
+.react-cupertino-ui-textfield[data-label] .react-cupertino-ui-textfield__input {
+  padding-top: 0.85rem;
+}
+.react-cupertino-ui-textfield__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.3rem;
+  height: 1.3rem;
+  color: color-mix(in srgb, hsl(var(--muted-foreground)), transparent 5%);
+  flex-shrink: 0;
+  filter: drop-shadow(0 2px 6px rgba(15, 15, 15, 0.18));
+}
+.react-cupertino-ui-textfield__icon[data-slot=left] {
+  order: -1;
+}
+.react-cupertino-ui-textfield__icon[data-slot=right] {
+  order: 1;
+}
+.react-cupertino-ui-textfield__icon svg {
+  width: 100%;
+  height: 100%;
+}
+.react-cupertino-ui-textfield__message {
+  font-size: 0.78rem;
+  color: hsl(var(--muted-foreground));
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-left: 0.35rem;
+  margin-top: 0.15rem;
+}
+.react-cupertino-ui-textfield__message.is-error {
+  color: var(--color-red, #ff3b30);
+}
+.react-cupertino-ui-textfield__message.is-success {
+  color: var(--green, #34c759);
+}
+.react-cupertino-ui-textfield.variant-glass {
+  border-color: var(--textfield-border-color);
+  background: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(var(--glass-blur, 24px)) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(var(--glass-blur, 24px)) 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-textfield.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-textfield.variant-outline {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid color-mix(in srgb, var(--color-white, #fff), transparent 65%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+.react-cupertino-ui-textfield.variant-filled {
+  background: rgba(255, 255, 255, 0.35);
+  border: 1px solid transparent;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(22px);
+  -webkit-backdrop-filter: blur(22px);
+}

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import "./index.scss";
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "onFocus" | "onBlur">;
+export interface TextFieldProps extends NativeInputProps {
+    className?: string;
+    variant?: "glass" | "default" | "outline" | "filled";
+    size?: "default" | "sm" | "lg";
+    label?: string;
+    error?: string;
+    success?: string;
+    helperText?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    value?: React.InputHTMLAttributes<HTMLInputElement>["value"];
+    defaultValue?: React.InputHTMLAttributes<HTMLInputElement>["defaultValue"];
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+export { TextField };
+export default TextField;

package/dist/index.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { BaseVariants } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import "./index.scss";
+const hasFieldValue = (nextValue) => {
+    if (Array.isArray(nextValue)) {
+        return nextValue.length > 0;
+    }
+    if (nextValue === undefined || nextValue === null) {
+        return false;
+    }
+    return `${nextValue}`.trim().length > 0;
+};
+const TextField = React.forwardRef(({ className, variant = "glass", size = "default", label, error, helperText, success, leftIcon, rightIcon, disabled, id, value, defaultValue, onChange, onFocus, onBlur, ...rest }, ref) => {
+    const resolvedVariant = variant === "default" ? "glass" : variant;
+    const generatedId = React.useId();
+    const inputId = id ?? `textfield-${generatedId}`;
+    const [isFocused, setFocused] = React.useState(false);
+    const [isFilled, setFilled] = React.useState(() => hasFieldValue(value ?? defaultValue));
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setFilled(hasFieldValue(value));
+        }
+    }, [value]);
+    const state = error
+        ? "error"
+        : success
+            ? "success"
+            : "default";
+    const message = error ?? success ?? helperText;
+    const messageType = error ? "error" : success ? "success" : helperText ? "helper" : null;
+    const messageId = messageType ? `${inputId}-${messageType}` : undefined;
+    const handleFocus = (event) => {
+        setFocused(true);
+        onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+        setFocused(false);
+        onBlur?.(event);
+    };
+    const handleChange = (event) => {
+        if (value === undefined) {
+            setFilled(hasFieldValue(event.target.value));
+        }
+        onChange?.(event);
+    };
+    const inputValueProps = value !== undefined
+        ? { value }
+        : { defaultValue };
+    const classes = BaseVariants("react-cupertino-ui-textfield", {
+        variant: resolvedVariant,
+        size,
+        className: cn(className, {
+            "has-left-icon": Boolean(leftIcon),
+            "has-right-icon": Boolean(rightIcon),
+        }),
+    }, {
+        defaultVariants: {
+            variant: "glass",
+        },
+    });
+    return (_jsxs("div", { className: "react-cupertino-ui-textfield-wrapper", children: [_jsxs("div", { className: classes, "data-focused": isFocused ? "true" : undefined, "data-filled": isFilled ? "true" : undefined, "data-label": label ? (isFocused || isFilled ? "raised" : "resting") : undefined, "data-state": state !== "default" ? state : undefined, "data-disabled": disabled ? "true" : undefined, children: [leftIcon && (_jsx("span", { className: "react-cupertino-ui-textfield__icon", "data-slot": "left", "aria-hidden": "true", children: leftIcon })), _jsxs("div", { className: "react-cupertino-ui-textfield__control", children: [label && (_jsx("label", { className: "react-cupertino-ui-textfield__label", htmlFor: inputId, children: label })), _jsx("input", { id: inputId, ref: ref, className: "react-cupertino-ui-textfield__input", disabled: disabled, "aria-invalid": state === "error" ? "true" : undefined, "aria-describedby": messageId, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, ...inputValueProps, ...rest })] }), rightIcon && (_jsx("span", { className: "react-cupertino-ui-textfield__icon", "data-slot": "right", "aria-hidden": "true", children: rightIcon }))] }), message && (_jsx("span", { id: messageId, className: cn("react-cupertino-ui-textfield__message", {
+                    "is-error": state === "error",
+                    "is-success": state === "success",
+                }), role: state === "error" ? "alert" : undefined, children: message }))] }));
+});
+TextField.displayName = "TextField";
+export { TextField };
+export default TextField;

package/dist/index.scss

@@ -0,0 +1,185 @@
+@use "@/styles/mixins/glass" as glass;
+
+.react-cupertino-ui-textfield-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  width: 100%;
+}
+
+.react-cupertino-ui-textfield {
+  --textfield-height: 2.875rem;
+  --textfield-radius: 1.125rem;
+  --textfield-padding-inline: 1.25rem;
+  --textfield-gap: 0.65rem;
+  --textfield-focus-color: var(--color-blue, #0a84ff);
+  --textfield-border-color: rgba(255, 255, 255, 0.2);
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--textfield-height);
+  border-radius: var(--textfield-radius);
+  padding-inline: var(--textfield-padding-inline);
+  gap: var(--textfield-gap);
+  color: hsl(var(--foreground));
+  font-size: 0.95rem;
+  line-height: 1.2;
+  isolation: isolate;
+  transition-property: border-color, box-shadow, transform, background, color;
+  transition-duration: 220ms;
+  transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
+
+  @supports not ((backdrop-filter: blur(2px))) {
+    background: rgba(255, 255, 255, 0.92);
+  }
+
+  &[data-focused="true"] {
+    border-color: color-mix(in srgb, var(--textfield-focus-color), white 10%);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--textfield-focus-color), transparent 75%),
+      0 10px 38px rgba(15, 15, 15, 0.15);
+  }
+
+  &[data-filled="true"] {
+    --textfield-border-color: rgba(255, 255, 255, 0.35);
+  }
+
+  &[data-state="error"] {
+    --textfield-focus-color: var(--color-red, #ff3b30);
+    --textfield-border-color: color-mix(in srgb, var(--color-red, #ff3b30), white 15%);
+  }
+
+  &[data-state="success"] {
+    --textfield-focus-color: var(--green, #34c759);
+    --textfield-border-color: color-mix(in srgb, var(--green, #34c759), white 20%);
+  }
+
+  &[data-disabled="true"] {
+    opacity: 0.55;
+    pointer-events: none;
+    filter: grayscale(0.18);
+  }
+
+  &.size-sm {
+    --textfield-height: 2.45rem;
+    --textfield-padding-inline: 1rem;
+    font-size: 0.875rem;
+  }
+
+  &.size-lg {
+    --textfield-height: 3.35rem;
+    --textfield-padding-inline: 1.5rem;
+    font-size: 1.05rem;
+  }
+
+  &__control {
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  &__label {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.85em;
+    color: color-mix(in srgb, hsl(var(--muted-foreground)), transparent 20%);
+    pointer-events: none;
+    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
+      color 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
+  }
+
+  &[data-label="raised"] &__label {
+    transform: translateY(-145%) scale(0.82);
+    color: color-mix(in srgb, var(--textfield-focus-color), white 35%);
+  }
+
+  &__input {
+    width: 100%;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    padding: 0.35rem 0 0.15rem;
+    line-height: 1.4;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: color-mix(in srgb, hsl(var(--muted-foreground)), transparent 30%);
+      opacity: 0.8;
+    }
+  }
+
+  &[data-label] &__input {
+    padding-top: 0.85rem;
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.3rem;
+    height: 1.3rem;
+    color: color-mix(in srgb, hsl(var(--muted-foreground)), transparent 5%);
+    flex-shrink: 0;
+    filter: drop-shadow(0 2px 6px rgba(15, 15, 15, 0.18));
+
+    &[data-slot="left"] {
+      order: -1;
+    }
+
+    &[data-slot="right"] {
+      order: 1;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__message {
+    font-size: 0.78rem;
+    color: hsl(var(--muted-foreground));
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    margin-left: 0.35rem;
+    margin-top: 0.15rem;
+
+    &.is-error {
+      color: var(--color-red, #ff3b30);
+    }
+
+    &.is-success {
+      color: var(--green, #34c759);
+    }
+  }
+
+  &.variant-glass {
+    border-color: var(--textfield-border-color);
+    @include glass.glass-panel(light, var(--glass-blur, 24px), 0.55);
+  }
+
+  &.variant-outline {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid color-mix(in srgb, var(--color-white, #fff), transparent 65%);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+  }
+
+  &.variant-filled {
+    background: rgba(255, 255, 255, 0.35);
+    border: 1px solid transparent;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(22px);
+    -webkit-backdrop-filter: blur(22px);
+  }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@react-cupertino-ui/text-field",
+  "version": "1.0.0",
+  "description": "TextField 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"
+  }
+}