IsometricField

npx shadcn@latest add "https://designpass.dev/r/IsometricField-TS-CSS.json"

/*!
 * IsometricField, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/isometric-field
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
/* IsometricField, an input rendered as an isometric slab, designed as the
   companion of IsometricButton (same default camera angles). Unlike the
   button, the visible top face IS the real <input>: typing, caret, and
   selection must live on the rendered surface. The slab rests near the
   floor; its depth edge lights up in the accent color on hover and focus.
   A short springy press scales the slab down a tad on click. */

.iso-field-scene {
  --iso-field-rot-x: 54deg;
  --iso-field-rot-z: -42deg;
  /* Lean of the slab up out of the floor plane, hinged at its bottom
     edge (0 = flat, -90deg = fully upright). */
  --iso-field-stand: -45deg;
  --iso-field-thick: 10px;
  --iso-field-radius: 15px;
  --iso-field-gap: 2px;
  --iso-field-shift-y: 3px;
  --iso-field-scale-rest: 1;
  /* Subtle squash on click; release springs back with a tad of overshoot. */
  --iso-field-scale-press: 0.96;
  --iso-field-scale: var(--iso-field-scale-rest);
  --iso-field-ease-rest: cubic-bezier(0.34, 1.45, 0.64, 1);
  --iso-field-ease-press: ease-out;
  --iso-field-dur-rest: 0.45s;
  --iso-field-dur-press: 0.08s;
  --iso-field-ease: var(--iso-field-ease-rest);
  --iso-field-dur: var(--iso-field-dur-rest);
  /* Colors default to the host theme's design tokens when present, with
     standalone fallbacks for use outside a tokened page. */
  --iso-field-surface: var(--dp-field-bg, #f4f2f8);
  --iso-field-surface-focus: var(--dp-field-bg-focus, #ffffff);
  --iso-field-edge: var(--dp-field-edge, #b9b2c6);
  --iso-field-accent: var(--dp-accent, #a05cff);
  --iso-field-text-color: var(--dp-field-text, #000000);
  --iso-field-placeholder-color: var(--dp-field-placeholder, rgba(0, 0, 0, 0.5));
  --iso-field-font-size: 1.25rem;
  --iso-field-padding-x: 20px;
  position: relative;
  display: block;
}

@supports (transition-timing-function: linear(0, 1)) {
  .iso-field-scene {
    /* Same spring as IsometricButton's rest→hover, just a tad softer via
       the shorter duration above. */
    /* prettier-ignore */
    --iso-field-ease-rest: linear(0, 0.062, 0.2196, 0.4301, 0.6555, 0.8654, 1.0387, 1.1642, 1.2388, 1.2666, 1.2559, 1.2175, 1.163, 1.1028, 1.0455, 0.9971, 0.9612, 0.9388, 0.9293, 0.9305, 0.9396, 0.9536, 0.9696, 0.9852, 0.9987, 1.0089, 1.0155, 1.0187, 1.0188, 1.0167, 1.0131, 1.0089, 1.0047, 1.001, 0.998, 0.9961, 0.9951, 0.9949, 0.9954, 0.9963, 0.9974, 0.9986, 0.9996, 1.0004, 1.001, 1.0013, 1.0014, 1.0013, 1);
  }
}

.iso-field-obj {
  position: absolute;
  inset: 0;
  /* Isometric camera, defaults match IsometricButton so both objects can
     share one 3D scene. */
  transform: translateY(var(--iso-field-shift-y)) rotateX(var(--iso-field-rot-x))
    rotateZ(var(--iso-field-rot-z));
  transform-style: preserve-3d;
}

/* Lean the slab up around its bottom edge. */
.iso-field-stand {
  position: absolute;
  inset: 0;
  transform-origin: center bottom;
  transform: rotateX(var(--iso-field-stand));
  transform-style: preserve-3d;
}

/* Press pulse: scale relative to the slab itself, nested under the lean. */
.iso-field-press {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  transform: scale(var(--iso-field-scale));
  transform-style: preserve-3d;
  transition: transform var(--iso-field-dur) var(--iso-field-ease);
}

.iso-field-press > * {
  position: absolute;
  inset: 0;
  border-radius: var(--iso-field-radius);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

/* Rounded side walls, faked with stacked slices. Spread-only (no blur)
   shadows fill the gaps between slices while keeping the edge crisp. */
.iso-field-side {
  background: var(--iso-field-edge);
  transform: translateZ(
    calc(var(--iso-field-gap) + var(--iso-field-thick) * var(--i) / 10)
  );
  box-shadow: 0 0 0 1px var(--iso-field-edge);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.25s ease,
    box-shadow 0.25s ease;
  pointer-events: none;
}

/* Hover / focus: the depth edge takes the accent color instead of a border. */
.iso-field-scene:has(.iso-field-top:not(:disabled):hover) .iso-field-side,
.iso-field-scene:focus-within .iso-field-side {
  background: var(--iso-field-accent);
  box-shadow: 0 0 0 1px var(--iso-field-accent);
}

.iso-field-top {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 var(--iso-field-padding-x);
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--iso-field-surface);
  color: var(--iso-field-text-color);
  font-size: var(--iso-field-font-size);
  text-align: center;
  outline: none;
  transform: translateZ(calc(var(--iso-field-gap) + var(--iso-field-thick)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.iso-field-top::placeholder {
  color: var(--iso-field-placeholder-color);
}

.iso-field-scene:has(.iso-field-top:not(:disabled):hover) .iso-field-top,
.iso-field-top:focus {
  background: var(--iso-field-surface-focus);
}

.iso-field-top:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Click: brief scale-down, then spring back on release. */
.iso-field-scene:has(.iso-field-top:not(:disabled):active) {
  --iso-field-scale: var(--iso-field-scale-press);
  --iso-field-ease: var(--iso-field-ease-press);
  --iso-field-dur: var(--iso-field-dur-press);
}

@media (prefers-reduced-motion: reduce) {
  .iso-field-press,
  .iso-field-press > *,
  .iso-field-top {
    transition: none;
  }
}


/*!
 * IsometricField, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/isometric-field
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import type { CSSProperties, InputHTMLAttributes } from "react";
import "./IsometricField.css";

/**
 * Main knobs 90% of uses need. Everything else lives in `advanced`.
 * All values map to CSS custom properties consumed by IsometricField.css;
 * anything left undefined falls back to the stylesheet default.
 */
export interface IsometricFieldSettings {
  /** Slab thickness, e.g. "10px". */
  thickness?: string;
  /** Corner radius of all faces, e.g. "15px". */
  radius?: string;
  /** Input surface color. */
  surfaceColor?: string;
  /** Depth-edge color while focused (replaces a focus ring). */
  accentColor?: string;
  /** Input font size, e.g. "1.25rem". */
  fontSize?: string;
  /** Lean of the slab out of the floor plane (0 = flat, "-90deg" = upright). */
  standAngle?: string;
  /** Everything else, camera, colors of individual parts. */
  advanced?: IsometricFieldAdvancedSettings;
}

export interface IsometricFieldAdvancedSettings {
  /** Isometric camera angles, match your IsometricButton's to share a scene. */
  rotateX?: string;
  rotateZ?: string;
  /** Height of the slab base above the floor, e.g. "2px". */
  gap?: string;
  /** Vertical offset of the whole scene, e.g. "3px". */
  shiftY?: string;
  /** Surface color while focused. */
  surfaceColorFocus?: string;
  /** Depth-edge color at rest. */
  edgeColor?: string;
  /** Input text / placeholder colors. */
  textColor?: string;
  placeholderColor?: string;
  /** Horizontal padding inside the input, e.g. "20px". */
  paddingX?: string;
}

const MAIN_VARS: Record<string, string> = {
  thickness: "--iso-field-thick",
  radius: "--iso-field-radius",
  surfaceColor: "--iso-field-surface",
  accentColor: "--iso-field-accent",
  fontSize: "--iso-field-font-size",
  standAngle: "--iso-field-stand",
};

const ADVANCED_VARS: Record<string, string> = {
  rotateX: "--iso-field-rot-x",
  rotateZ: "--iso-field-rot-z",
  gap: "--iso-field-gap",
  shiftY: "--iso-field-shift-y",
  surfaceColorFocus: "--iso-field-surface-focus",
  edgeColor: "--iso-field-edge",
  textColor: "--iso-field-text-color",
  placeholderColor: "--iso-field-placeholder-color",
  paddingX: "--iso-field-padding-x",
};

function settingsToStyle(settings: IsometricFieldSettings): CSSProperties {
  const style: Record<string, string> = {};
  const { advanced, ...main } = settings;

  for (const [key, value] of Object.entries(main)) {
    if (value === undefined) continue;
    style[MAIN_VARS[key]] = String(value);
  }
  for (const [key, value] of Object.entries(advanced ?? {})) {
    if (value === undefined) continue;
    style[ADVANCED_VARS[key]] = String(value);
  }
  return style as CSSProperties;
}

export interface IsometricFieldProps extends InputHTMLAttributes<HTMLInputElement> {
  /** Classes applied to the outer scene wrapper, size it here (the scene
   * has no intrinsic size), e.g. "w-80 h-14". */
  wrapperClassName?: string;
  /** Visual overrides; see IsometricFieldSettings. */
  settings?: IsometricFieldSettings;
}

/** Number of stacked slices used to fake the slab's rounded side walls.
 * Slices sit ~1px apart (thickness / count) with crisp, unblurred edge
 * shadows, fewer, farther-apart slices needed blurred shadows to hide
 * the gaps, which made the whole depth edge look fuzzy. */
const SIDE_LAYERS = 10;

/**
 * An input styled as an isometric slab, the natural companion to
 * IsometricButton (same default camera angles). Unlike the button, the
 * real <input> is the visible top face: text entry, caret, and selection
 * all need to live on the rendered surface. The slab rests near the floor;
 * its depth edge lights up in the accent color on hover and focus, and a
 * short springy press scales it down a tad on click.
 */
export default function IsometricField({
  wrapperClassName = "",
  settings,
  ...inputProps
}: IsometricFieldProps) {
  return (
    <span
      className={`iso-field-scene ${wrapperClassName}`}
      style={settings ? settingsToStyle(settings) : undefined}
    >
      <span className="iso-field-obj">
        <span className="iso-field-stand">
          <span className="iso-field-press">
            {Array.from({ length: SIDE_LAYERS }, (_, i) => (
              <span
                key={i}
                className="iso-field-side"
                style={{ "--i": i } as CSSProperties}
                aria-hidden
              />
            ))}
            <input {...inputProps} className="iso-field-top" />
          </span>
        </span>
      </span>
    </span>
  );
}