accessibility

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["dialog", "message"]

  connect() {

import { z } from "zod";

export const signupSchema = z
  .object({
    email: z.string().min(1, "Email is required").email("Enter a valid email"),
    username: z

export const required = (msg = 'This field is required') => (value) =>
  value && value.trim() !== '' ? '' : msg;

export const minLength = (n, msg) => (value) =>
  value && value.length >= n ? '' : msg || `Must be at least ${n} characters`;

export function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}

export function move(list, from, to) {
  const next = list.slice();

<h1>Create your account</h1>

<%= render "error_summary", record: @user %>

<%= form_with model: @user, url: signups_path do |f| %>
  <div class="field">

<%= form_with model: @profile do |form| %>
  <div
    class="field"
    data-controller="character-count"
    data-character-count-max-value="280"
  >

import { useState, useRef, useEffect, useCallback } from "react";

export function useCarousel(length, { delay = 4000 } = {}) {
  const [index, setIndex] = useState(0);
  const [paused, setPaused] = useState(false);
  const savedCallback = useRef(null);

/* Mobile-first base styles (no media query needed) */
.container {
  width: 100%;
  padding: 1rem;
  margin: 0 auto;
}

<div class="copy-field"
     data-controller="clipboard"
     data-clipboard-content-value="<%= content %>"
     data-clipboard-success-value="Copied!">

  <input type="text"

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { keymap: Object }

  connect() {

import { useEffect, useRef, ReactNode } from 'react'
import { createPortal } from 'react-dom'

interface ModalProps {
  isOpen: boolean
  onClose: () => void

import { RefObject, useEffect, useRef } from "react";

type Handler = (event: MouseEvent | TouchEvent) => void;

export function useClickOutside<T extends HTMLElement>(
  ref: RefObject<T>,