19:I[695313,["/_next/static/immutable/chunks/422lj974qmlrg.js","/_next/static/immutable/chunks/2__nhv993kwpc.js","/_next/static/immutable/chunks/2be9h44c0djyi.js","/_next/static/immutable/chunks/2h82mq8b3z8_q.js","/_next/static/immutable/chunks/02jbg7evzxc8b.js"],"Workbench"] 1a:T66e,"use client"; import * as React from "react"; import * as cnModule from "@/registry/_lib/cn"; const cn = cnModule.cn; export interface TextFieldBasicProps extends React.InputHTMLAttributes { /** Accent color for the focus border and ring. */ accent?: string; } /** * A single-line text field. The border and a soft ring brighten to the accent color on focus * over a short transition; the disabled state dims the field and blocks input. Everything else * behaves like a native text input. */ export function TextFieldBasic(props: TextFieldBasicProps) { const { accent, className, style, ...rest } = props; const accentColor = accent ?? "#38BDF8"; const styleVars = { ...style } as React.CSSProperties & Record; styleVars["--tf-accent"] = accentColor; styleVars["--tf-border"] = "color-mix(in srgb, currentColor 18%, transparent)"; styleVars["--tf-ground"] = "color-mix(in srgb, currentColor 5%, transparent)"; styleVars["--tf-hint"] = "color-mix(in srgb, currentColor 42%, transparent)"; return ( ); } export default TextFieldBasic;1b:T304f,

"use client";

import * as React from "react";
import * as cnModule from "@/registry/_lib/cn";

const cn = cnModule.cn;

export interface TextFieldBasicProps extends React.InputHTMLAttributes<HTMLInputElement> {
  /** Accent color for the focus border and ring. */
  accent?: string;
}

/**
 * A single-line text field. The border and a soft ring brighten to the accent color on focus
 * over a short transition; the disabled state dims the field and blocks input. Everything else
 * behaves like a native text input.
 */
export function TextFieldBasic(props: TextFieldBasicProps) {
  const { accent, className, style, ...rest } = props;
  const accentColor = accent ?? "#38BDF8";

  const styleVars = { ...style } as React.CSSProperties & Record<string, string>;
  styleVars["--tf-accent"] = accentColor;
  styleVars["--tf-border"] = "color-mix(in srgb, currentColor 18%, transparent)";
  styleVars["--tf-ground"] = "color-mix(in srgb, currentColor 5%, transparent)";
  styleVars["--tf-hint"] = "color-mix(in srgb, currentColor 42%, transparent)";

  return (
    <input
      type="text"
      className={cn(
        "h-10 w-64 rounded-lg border px-3.5 text-sm text-current outline-none",
        "border-[var(--tf-border)] bg-[var(--tf-ground)] placeholder:text-[var(--tf-hint)]",
        "transition-[border-color,box-shadow] duration-200 ease-out",
        "focus:border-[var(--tf-accent)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--tf-accent)_26%,transparent)]",
        "disabled:cursor-not-allowed disabled:opacity-45",
        className,
      )}
      style={styleVars}
      {...rest}
    />
  );
}

export default TextFieldBasic;

1c:T1f7c,

"use client";

import TextFieldBasic from "./index";

export interface DemoProps {
  placeholder?: string;
  accent?: string;
  disabled?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo(props: DemoProps) {
  const { placeholder, accent, disabled } = props;
  const hintText = placeholder ?? "you@example.com";

  return (
    <div className="flex w-full flex-col items-center justify-center gap-4 p-8">
      <TextFieldBasic accent={accent} disabled={disabled} placeholder={hintText} aria-label="Email address" />
      <TextFieldBasic accent={accent} disabled={disabled} defaultValue="mara@lumenpress.co" aria-label="Work email" />
    </div>
  );
}

1d:T4c5, 1e:T4458,

<script setup lang="ts">
interface Props {
  placeholder?: string;
  accent?: string;
  disabled?: boolean;
}

withDefaults(defineProps<Props>(), {
  placeholder: "you@example.com",
  accent: "#38BDF8",
  disabled: false,
});
</script>

<template>
  <input
    type="text"
    class="text-field-basic"
    :placeholder="placeholder"
    :disabled="disabled"
    :style="'--tf-accent: ' + accent"
    aria-label="Email address"
  />
</template>

<style scoped>
.text-field-basic {
  --tf-accent: #38bdf8;
  box-sizing: border-box;
  width: 16rem;
  height: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: inherit;
  font: 400 0.875rem/1.25rem system-ui, sans-serif;
  outline: none;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.text-field-basic::placeholder {
  color: color-mix(in srgb, currentColor 42%, transparent);
}
.text-field-basic:focus {
  border-color: var(--tf-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tf-accent) 26%, transparent);
}
.text-field-basic:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
</style>

1f:T556, 20:T4b1c,

<script lang="ts">
  interface Props {
    placeholder?: string;
    accent?: string;
    disabled?: boolean;
  }

  let props: Props = $props();

  const placeholder = $derived(props.placeholder ?? "you@example.com");
  const accent = $derived(props.accent ?? "#38BDF8");
  const disabled = $derived(props.disabled ?? false);
  const fieldStyle = $derived("--tf-accent: " + accent);
</script>

<input
  type="text"
  class="text-field-basic"
  placeholder={placeholder}
  disabled={disabled}
  style={fieldStyle}
  aria-label="Email address"
/>

<style>
  .text-field-basic {
    --tf-accent: #38bdf8;
    box-sizing: border-box;
    width: 16rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 0.5rem;
    background: color-mix(in srgb, currentColor 5%, transparent);
    color: inherit;
    font: 400 0.875rem/1.25rem system-ui, sans-serif;
    outline: none;
    transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
  }
  .text-field-basic::placeholder {
    color: color-mix(in srgb, currentColor 42%, transparent);
  }
  .text-field-basic:focus {
    border-color: var(--tf-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tf-accent) 26%, transparent);
  }
  .text-field-basic:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
</style>

21:T502,--- interface Props { placeholder?: string; accent?: string; disabled?: boolean; } const props = Astro.props; const placeholder = props.placeholder ?? "you@example.com"; const accent = props.accent ?? "#38BDF8"; const disabled = props.disabled ?? false; const fieldStyle = "--tf-accent: " + accent; --- 22:T45bd,

---
interface Props {
  placeholder?: string;
  accent?: string;
  disabled?: boolean;
}

const props = Astro.props;
const placeholder = props.placeholder ?? "you@example.com";
const accent = props.accent ?? "#38BDF8";
const disabled = props.disabled ?? false;
const fieldStyle = "--tf-accent: " + accent;
---

<input
  type="text"
  class="text-field-basic"
  placeholder={placeholder}
  disabled={disabled}
  style={fieldStyle}
  aria-label="Email address"
/>

<style>
  .text-field-basic {
    --tf-accent: #38bdf8;
    box-sizing: border-box;
    width: 16rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 0.5rem;
    background: color-mix(in srgb, currentColor 5%, transparent);
    color: inherit;
    font: 400 0.875rem/1.25rem system-ui, sans-serif;
    outline: none;
    transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
  }
  .text-field-basic::placeholder {
    color: color-mix(in srgb, currentColor 42%, transparent);
  }
  .text-field-basic:focus {
    border-color: var(--tf-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tf-accent) 26%, transparent);
  }
  .text-field-basic:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
</style>

23:T8e3,

Nearby