├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── README.md
├── next.config.mjs
├── outline.md
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── src
    └── app
    │   ├── AutoScroller.tsx
    │   ├── components
    │       ├── alert.tsx
    │       ├── avatar.tsx
    │       ├── badge.tsx
    │       ├── button.tsx
    │       ├── checkbox.tsx
    │       ├── description-list.tsx
    │       ├── dialog.tsx
    │       ├── divider.tsx
    │       ├── dropdown.tsx
    │       ├── fieldset.tsx
    │       ├── heading.tsx
    │       ├── input.tsx
    │       ├── link.tsx
    │       ├── listbox.tsx
    │       ├── navbar.tsx
    │       ├── pagination.tsx
    │       ├── radio.tsx
    │       ├── select.tsx
    │       ├── sidebar-layout.tsx
    │       ├── sidebar.tsx
    │       ├── stacked-layout.tsx
    │       ├── switch.tsx
    │       ├── table.tsx
    │       ├── text.tsx
    │       └── textarea.tsx
    │   ├── favicon.ico
    │   ├── fonts
    │       ├── GeistMonoVF.woff
    │       └── GeistVF.woff
    │   ├── globals.css
    │   ├── layout.tsx
    │   ├── page.tsx
    │   └── useAnimatedText.ts
├── tailwind.config.ts
└── tsconfig.json


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "next/typescript"],
3 |   "rules": {
4 |     "prefer-const": "off"
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {"plugins": ["prettier-plugin-tailwindcss"]}
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/outline.md:
--------------------------------------------------------------------------------
  1 | ## 🟢 STEP
  2 | 
  3 | ```tsx
  4 | let animatedText = useAnimatedText(text);
  5 | 
  6 | function useAnimatedText(text: string) {
  7 |   return text;
  8 | }
  9 | 
 10 | // And default to hello world, to have something to play with
 11 | let [text, setText] = useState("Hello world");
 12 | ```
 13 | 
 14 | ## 🟢 STEP
 15 | 
 16 | How to animate?
 17 | 
 18 | ```tsx
 19 | function useAnimatedText(text: string) {
 20 |   let [cursor, setCursor] = useState(0);
 21 | 
 22 |   return text.slice(0, 4);
 23 | }
 24 | ```
 25 | 
 26 | ## 🟢 STEP
 27 | 
 28 | ```tsx
 29 | function useAnimatedText(text: string) {
 30 |   let [cursor, setCursor] = useState(0);
 31 | 
 32 |   useEffect(() => {
 33 |     animate(0, text.length, {
 34 |       onUpdate(latest) {
 35 |         console.log(latest);
 36 |       },
 37 |     });
 38 |   }, []);
 39 | 
 40 |   return text.slice(0, cursor);
 41 | }
 42 | ```
 43 | 
 44 | Strict mode!
 45 | 
 46 | ```tsx
 47 | useEffect(() => {
 48 |   console.log("effect");
 49 |   let controls = animate(0, text.length, {
 50 |     onUpdate(latest) {
 51 |       console.log(latest);
 52 |     },
 53 |   });
 54 | 
 55 |   return () => controls.stop();
 56 | }, []);
 57 | ```
 58 | 
 59 | Now in business.
 60 | 
 61 | ## 🟢 STEP
 62 | 
 63 | Now let's update our state. Let's math.floor it.
 64 | 
 65 | ```tsx
 66 | function useAnimatedText(text: string) {
 67 |   let [cursor, setCursor] = useState(8);
 68 | 
 69 |   useEffect(() => {
 70 |     let controls = animate(0, text.length, {
 71 |       duration: 2,
 72 |       // Play with this
 73 |       ease: "linear",
 74 |       onUpdate(latest) {
 75 |         setCursor(Math.floor(latest));
 76 |       },
 77 |     });
 78 | 
 79 |     return () => controls.stop();
 80 |   }, [text.length]);
 81 | 
 82 |   return text.slice(0, cursor);
 83 | }
 84 | ```
 85 | 
 86 | ## 🟢 STEP
 87 | 
 88 | Looks good! Let's go back to empty string and try out streaming.
 89 | 
 90 | Somethings happening... slow things down
 91 | 
 92 | ```tsx
 93 | let delay = 2000;
 94 | let characters = 50;
 95 | ```
 96 | 
 97 | Starting from 0 each time. Need some memory...
 98 | 
 99 | MotionValue!
100 | 
101 | ```tsx
102 | function useAnimatedText(text: string) {
103 |   let animatedCursor = useMotionValue(0);
104 |   let [cursor, setCursor] = useState(8);
105 | 
106 |   useEffect(() => {
107 |     let controls = animate(animatedCursor, text.length, {
108 |       duration: 2,
109 |       ease: "linear",
110 |       onUpdate(latest) {
111 |         setCursor(Math.floor(latest));
112 |       },
113 |     });
114 | 
115 |     return () => controls.stop();
116 |   }, [animatedCursor, text.length]);
117 | 
118 |   return text.slice(0, cursor);
119 | }
120 | ```
121 | 
122 | So cool, it "catches up".
123 | 
124 | ```tsx
125 | let delay = 250;
126 | let characters = 50;
127 | 
128 | duration: 8,
129 | ease: "easeOut",
130 | ```
131 | 
132 | ## 🟢 STEP
133 | 
134 | Ok, let's try Reset.
135 | 
136 | Seems to not work. Well, we have two pieces of state: animatedCursor and cursor.
137 | 
138 | Let's add a log to render and see what's happening:
139 | 
140 | ```tsx
141 | console.log({ cursor });
142 | ```
143 | 
144 | So, animating from 100 back to 0.
145 | 
146 | Memory is good when we're appending. But not when we have new text.
147 | 
148 | How do we know when we have new text? New text doesn't startWiht prev text.
149 | 
150 | Need new state variable for prevText, and another for whether it's the same text.
151 | 
152 | ```tsx
153 | let [prevText, setPrevText] = useState(text);
154 | let [isSameText, setIsSameText] = useState(false);
155 | 
156 | if (prevText !== text) {
157 |   setPrevText(text);
158 |   setIsSameText(text.startsWith(prevText));
159 | }
160 | ```
161 | 
162 | Now in the beginning of our effect, we can use it to reset our animated cursor in the case where the text is new:
163 | 
164 | ```tsx
165 | useEffect(() => {
166 |   if (!isSameText) {
167 |     animatedCursor.jump(0);
168 |   }
169 | 
170 |   // ...
171 | });
172 | ```
173 | 
174 | Now let's look at our logs.
175 | 
176 | Boom. It works!
177 | 
178 | ## 🟢 STEP
179 | 
180 | Delimiter maybe.
181 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "2024-10-20-use-animated-text-hook",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@headlessui/react": "^2.1.8",
13 |     "@heroicons/react": "^2.1.5",
14 |     "@radix-ui/react-slider": "^1.2.1",
15 |     "@uidotdev/usehooks": "^2.4.1",
16 |     "clsx": "^2.1.1",
17 |     "framer-motion": "^11.7.0",
18 |     "next": "14.2.13",
19 |     "react": "^18",
20 |     "react-dom": "^18"
21 |   },
22 |   "devDependencies": {
23 |     "@types/node": "^20",
24 |     "@types/react": "^18",
25 |     "@types/react-dom": "^18",
26 |     "eslint": "^8",
27 |     "eslint-config-next": "14.2.13",
28 |     "postcss": "^8",
29 |     "prettier": "^3.3.3",
30 |     "prettier-plugin-tailwindcss": "^0.6.8",
31 |     "tailwindcss": "^3.4.1",
32 |     "typescript": "^5"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/src/app/AutoScroller.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { animate, AnimationPlaybackControls } from "framer-motion";
  4 | import {
  5 |   ComponentProps,
  6 |   createContext,
  7 |   Dispatch,
  8 |   MutableRefObject,
  9 |   RefObject,
 10 |   SetStateAction,
 11 |   useContext,
 12 |   useEffect,
 13 |   useRef,
 14 |   useState,
 15 | } from "react";
 16 | 
 17 | let AutoScrollerContext = createContext<{
 18 |   isAutoscrolling: boolean;
 19 |   setIsAutoscrolling: Dispatch<SetStateAction<boolean>>;
 20 |   scrollContainerRef: RefObject<HTMLDivElement>;
 21 |   animationControlsRef: MutableRefObject<AnimationPlaybackControls | undefined>;
 22 | }>({
 23 |   isAutoscrolling: true,
 24 |   setIsAutoscrolling: () => {},
 25 |   scrollContainerRef: { current: null },
 26 |   animationControlsRef: { current: undefined },
 27 | });
 28 | 
 29 | export function AutoScroller({ children, ...rest }: ComponentProps<"div">) {
 30 |   let scrollContainerRef = useRef<HTMLDivElement>(null);
 31 |   let animationControlsRef = useRef<AnimationPlaybackControls>();
 32 |   let [isAutoscrolling, setIsAutoscrolling] = useState(true);
 33 | 
 34 |   return (
 35 |     <AutoScrollerContext.Provider
 36 |       value={{
 37 |         isAutoscrolling,
 38 |         setIsAutoscrolling,
 39 |         scrollContainerRef,
 40 |         animationControlsRef,
 41 |       }}
 42 |     >
 43 |       <div {...rest}>{children}</div>
 44 |     </AutoScrollerContext.Provider>
 45 |   );
 46 | }
 47 | 
 48 | export function AutoScrollerContent({
 49 |   children,
 50 |   ...rest
 51 | }: ComponentProps<"div">) {
 52 |   let {
 53 |     isAutoscrolling,
 54 |     setIsAutoscrolling,
 55 |     scrollContainerRef,
 56 |     animationControlsRef,
 57 |   } = useContext(AutoScrollerContext);
 58 | 
 59 |   let contentRef = useRef<HTMLParagraphElement>(null);
 60 |   let whiteSpaceRef = useRef<HTMLDivElement>(null);
 61 |   let lastScrollTopRef = useRef(0);
 62 | 
 63 |   useOnScroll(scrollContainerRef, () => {
 64 |     let el = scrollContainerRef.current;
 65 |     if (!el) return;
 66 | 
 67 |     // If autoscrolling is true and we scrolled up...
 68 |     if (isAutoscrolling && el.scrollTop < lastScrollTopRef.current) {
 69 |       setIsAutoscrolling(false);
 70 |       if (animationControlsRef.current) {
 71 |         animationControlsRef.current.stop();
 72 |       }
 73 | 
 74 |       // If autoscrolling is false and we scrolled to the bottom...
 75 |     } else if (
 76 |       !isAutoscrolling &&
 77 |       el.scrollTop === el.scrollHeight - el.clientHeight
 78 |     ) {
 79 |       setIsAutoscrolling(true);
 80 |     }
 81 | 
 82 |     lastScrollTopRef.current = el.scrollTop;
 83 |   });
 84 | 
 85 |   useOnResize(contentRef, ({ currentHeight, previousHeight }) => {
 86 |     let scrollContainerEl = scrollContainerRef.current;
 87 |     let whiteSpaceEl = whiteSpaceRef.current;
 88 | 
 89 |     if (!scrollContainerEl || !whiteSpaceEl) return;
 90 |     if (currentHeight < scrollContainerEl.clientHeight) return;
 91 |     if (currentHeight === previousHeight) return;
 92 | 
 93 |     let change = currentHeight - previousHeight;
 94 |     // Ignore content getting smaller due to resize
 95 |     if (change < 0) return;
 96 | 
 97 |     let newHeight = whiteSpaceEl.clientHeight - change;
 98 | 
 99 |     if (newHeight > 0) {
100 |       whiteSpaceEl.style.height = `${whiteSpaceEl.clientHeight - change}px`;
101 |     } else {
102 |       whiteSpaceEl.style.height = `100px`;
103 |       let scrollContainerEl = scrollContainerRef.current;
104 |       if (scrollContainerEl && isAutoscrolling) {
105 |         let end =
106 |           scrollContainerEl.scrollHeight - scrollContainerEl.clientHeight;
107 | 
108 |         if (animationControlsRef.current) {
109 |           animationControlsRef.current.stop();
110 |         }
111 | 
112 |         let controls = animate(scrollContainerEl.scrollTop, end, {
113 |           type: "spring",
114 |           bounce: 0,
115 |           duration: 0.5,
116 |           onUpdate: (latest) => scrollContainerEl.scrollTo({ top: latest }),
117 |         });
118 |         animationControlsRef.current = controls;
119 |       }
120 |     }
121 |   });
122 | 
123 |   return (
124 |     <div ref={scrollContainerRef} {...rest}>
125 |       <div ref={contentRef}>{children}</div>
126 |       <div ref={whiteSpaceRef} />
127 |     </div>
128 |   );
129 | }
130 | 
131 | export function AutoScrollerButton({
132 |   children,
133 |   ...rest
134 | }: Omit<ComponentProps<"button">, "onClick">) {
135 |   let {
136 |     isAutoscrolling,
137 |     setIsAutoscrolling,
138 |     scrollContainerRef,
139 |     animationControlsRef,
140 |   } = useContext(AutoScrollerContext);
141 | 
142 |   function handleClick() {
143 |     setIsAutoscrolling(true);
144 |     let scrollContainerEl = scrollContainerRef.current;
145 |     if (!scrollContainerEl) return;
146 | 
147 |     let end = scrollContainerEl.scrollHeight - scrollContainerEl.clientHeight;
148 |     let controls = animate(scrollContainerEl.scrollTop, end, {
149 |       type: "spring",
150 |       bounce: 0,
151 |       duration: 0.5,
152 |       onUpdate: (latest) => scrollContainerEl.scrollTo({ top: latest }),
153 |     });
154 |     animationControlsRef.current = controls;
155 |   }
156 | 
157 |   if (isAutoscrolling) return;
158 | 
159 |   return (
160 |     <button onClick={handleClick} {...rest}>
161 |       {children}
162 |     </button>
163 |   );
164 | }
165 | 
166 | function useOnResize(
167 |   ref: MutableRefObject<Element | null>,
168 |   callback: (args: { currentHeight: number; previousHeight: number }) => void,
169 | ) {
170 |   // Create a ref to store the observer
171 |   const observer = useRef<ResizeObserver | null>(null);
172 |   const previousHeightRef = useRef<number | null>(null);
173 | 
174 |   useEffect(() => {
175 |     // Ensure the ref.current is not null before creating the observer
176 |     if (!ref.current) return;
177 | 
178 |     // Initialize the ResizeObserver with the callback function
179 |     observer.current = new ResizeObserver((entries) => {
180 |       for (let entry of entries) {
181 |         const currentHeight = entry.contentRect.height;
182 | 
183 |         // Get the previous height; if it's null, initialize it with the current height
184 |         const previousHeight = previousHeightRef.current ?? currentHeight;
185 | 
186 |         // Update the previous height ref
187 |         previousHeightRef.current = currentHeight;
188 | 
189 |         // Call the callback with the change in height
190 |         callback({ currentHeight, previousHeight });
191 |       }
192 |     });
193 | 
194 |     // Start observing the element referenced by ref
195 |     observer.current.observe(ref.current);
196 | 
197 |     // Cleanup function to disconnect the observer when the component unmounts or ref changes
198 |     return () => {
199 |       if (observer.current) {
200 |         observer.current.disconnect();
201 |         observer.current = null; // Clear the observer ref
202 |       }
203 |     };
204 |   }, [ref, callback]);
205 | }
206 | 
207 | function useOnScroll<T extends HTMLElement>(
208 |   ref: RefObject<T>,
209 |   callback: (event: Event) => void,
210 | ): void {
211 |   useEffect(() => {
212 |     const element = ref.current;
213 | 
214 |     if (!element) return;
215 | 
216 |     // Define the scroll event handler
217 |     function handleScroll(event: Event) {
218 |       callback(event);
219 |     }
220 | 
221 |     // Add the event listener to the element
222 |     element.addEventListener("scroll", handleScroll);
223 | 
224 |     // Cleanup function to remove the event listener
225 |     return () => {
226 |       element.removeEventListener("scroll", handleScroll);
227 |     };
228 |   }, [ref, callback]);
229 | }
230 | 


--------------------------------------------------------------------------------
/src/app/components/alert.tsx:
--------------------------------------------------------------------------------
 1 | import * as Headless from '@headlessui/react'
 2 | import clsx from 'clsx'
 3 | import type React from 'react'
 4 | import { Text } from './text'
 5 | 
 6 | const sizes = {
 7 |   xs: 'sm:max-w-xs',
 8 |   sm: 'sm:max-w-sm',
 9 |   md: 'sm:max-w-md',
10 |   lg: 'sm:max-w-lg',
11 |   xl: 'sm:max-w-xl',
12 |   '2xl': 'sm:max-w-2xl',
13 |   '3xl': 'sm:max-w-3xl',
14 |   '4xl': 'sm:max-w-4xl',
15 |   '5xl': 'sm:max-w-5xl',
16 | }
17 | 
18 | export function Alert({
19 |   size = 'md',
20 |   className,
21 |   children,
22 |   ...props
23 | }: { size?: keyof typeof sizes; className?: string; children: React.ReactNode } & Omit<
24 |   Headless.DialogProps,
25 |   'as' | 'className'
26 | >) {
27 |   return (
28 |     <Headless.Dialog {...props}>
29 |       <Headless.DialogBackdrop
30 |         transition
31 |         className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/15 px-2 py-2 transition duration-100 focus:outline-0 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50"
32 |       />
33 | 
34 |       <div className="fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0">
35 |         <div className="grid min-h-full grid-rows-[1fr_auto_1fr] justify-items-center p-8 sm:grid-rows-[1fr_auto_3fr] sm:p-4">
36 |           <Headless.DialogPanel
37 |             transition
38 |             className={clsx(
39 |               className,
40 |               sizes[size],
41 |               'row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline',
42 |               'transition duration-100 will-change-transform data-[closed]:data-[enter]:scale-95 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in'
43 |             )}
44 |           >
45 |             {children}
46 |           </Headless.DialogPanel>
47 |         </div>
48 |       </div>
49 |     </Headless.Dialog>
50 |   )
51 | }
52 | 
53 | export function AlertTitle({
54 |   className,
55 |   ...props
56 | }: { className?: string } & Omit<Headless.DialogTitleProps, 'as' | 'className'>) {
57 |   return (
58 |     <Headless.DialogTitle
59 |       {...props}
60 |       className={clsx(
61 |         className,
62 |         'text-balance text-center text-base/6 font-semibold text-zinc-950 sm:text-wrap sm:text-left sm:text-sm/6 dark:text-white'
63 |       )}
64 |     />
65 |   )
66 | }
67 | 
68 | export function AlertDescription({
69 |   className,
70 |   ...props
71 | }: { className?: string } & Omit<Headless.DescriptionProps<typeof Text>, 'as' | 'className'>) {
72 |   return (
73 |     <Headless.Description
74 |       as={Text}
75 |       {...props}
76 |       className={clsx(className, 'mt-2 text-pretty text-center sm:text-left')}
77 |     />
78 |   )
79 | }
80 | 
81 | export function AlertBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
82 |   return <div {...props} className={clsx(className, 'mt-4')} />
83 | }
84 | 
85 | export function AlertActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
86 |   return (
87 |     <div
88 |       {...props}
89 |       className={clsx(
90 |         className,
91 |         'mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto'
92 |       )}
93 |     />
94 |   )
95 | }
96 | 


--------------------------------------------------------------------------------
/src/app/components/avatar.tsx:
--------------------------------------------------------------------------------
 1 | import * as Headless from '@headlessui/react'
 2 | import clsx from 'clsx'
 3 | import React, { forwardRef } from 'react'
 4 | import { TouchTarget } from './button'
 5 | import { Link } from './link'
 6 | 
 7 | type AvatarProps = {
 8 |   src?: string | null
 9 |   square?: boolean
10 |   initials?: string
11 |   alt?: string
12 |   className?: string
13 | }
14 | 
15 | export function Avatar({
16 |   src = null,
17 |   square = false,
18 |   initials,
19 |   alt = '',
20 |   className,
21 |   ...props
22 | }: AvatarProps & React.ComponentPropsWithoutRef<'span'>) {
23 |   return (
24 |     <span
25 |       data-slot="avatar"
26 |       {...props}
27 |       className={clsx(
28 |         className,
29 |         // Basic layout
30 |         'inline-grid shrink-0 align-middle [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1',
31 |         'outline outline-1 -outline-offset-1 outline-black/[--ring-opacity] dark:outline-white/[--ring-opacity]',
32 |         // Add the correct border radius
33 |         square ? 'rounded-[--avatar-radius] *:rounded-[--avatar-radius]' : 'rounded-full *:rounded-full'
34 |       )}
35 |     >
36 |       {initials && (
37 |         <svg
38 |           className="size-full select-none fill-current p-[5%] text-[48px] font-medium uppercase"
39 |           viewBox="0 0 100 100"
40 |           aria-hidden={alt ? undefined : 'true'}
41 |         >
42 |           {alt && <title>{alt}</title>}
43 |           <text x="50%" y="50%" alignmentBaseline="middle" dominantBaseline="middle" textAnchor="middle" dy=".125em">
44 |             {initials}
45 |           </text>
46 |         </svg>
47 |       )}
48 |       {src && <img className="size-full" src={src} alt={alt} />}
49 |     </span>
50 |   )
51 | }
52 | 
53 | export const AvatarButton = forwardRef(function AvatarButton(
54 |   {
55 |     src,
56 |     square = false,
57 |     initials,
58 |     alt,
59 |     className,
60 |     ...props
61 |   }: AvatarProps &
62 |     (Omit<Headless.ButtonProps, 'as' | 'className'> | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'className'>),
63 |   ref: React.ForwardedRef<HTMLElement>
64 | ) {
65 |   let classes = clsx(
66 |     className,
67 |     square ? 'rounded-[20%]' : 'rounded-full',
68 |     'relative inline-grid focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500'
69 |   )
70 | 
71 |   return 'href' in props ? (
72 |     <Link {...props} className={classes} ref={ref as React.ForwardedRef<HTMLAnchorElement>}>
73 |       <TouchTarget>
74 |         <Avatar src={src} square={square} initials={initials} alt={alt} />
75 |       </TouchTarget>
76 |     </Link>
77 |   ) : (
78 |     <Headless.Button {...props} className={classes} ref={ref}>
79 |       <TouchTarget>
80 |         <Avatar src={src} square={square} initials={initials} alt={alt} />
81 |       </TouchTarget>
82 |     </Headless.Button>
83 |   )
84 | })
85 | 


--------------------------------------------------------------------------------
/src/app/components/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as Headless from '@headlessui/react'
 2 | import clsx from 'clsx'
 3 | import React, { forwardRef } from 'react'
 4 | import { TouchTarget } from './button'
 5 | import { Link } from './link'
 6 | 
 7 | const colors = {
 8 |   red: 'bg-red-500/15 text-red-700 group-data-[hover]:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-data-[hover]:bg-red-500/20',
 9 |   orange:
10 |     'bg-orange-500/15 text-orange-700 group-data-[hover]:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-400 dark:group-data-[hover]:bg-orange-500/20',
11 |   amber:
12 |     'bg-amber-400/20 text-amber-700 group-data-[hover]:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-data-[hover]:bg-amber-400/15',
13 |   yellow:
14 |     'bg-yellow-400/20 text-yellow-700 group-data-[hover]:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-[hover]:bg-yellow-400/15',
15 |   lime: 'bg-lime-400/20 text-lime-700 group-data-[hover]:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-[hover]:bg-lime-400/15',
16 |   green:
17 |     'bg-green-500/15 text-green-700 group-data-[hover]:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:group-data-[hover]:bg-green-500/20',
18 |   emerald:
19 |     'bg-emerald-500/15 text-emerald-700 group-data-[hover]:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-data-[hover]:bg-emerald-500/20',
20 |   teal: 'bg-teal-500/15 text-teal-700 group-data-[hover]:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-[hover]:bg-teal-500/20',
21 |   cyan: 'bg-cyan-400/20 text-cyan-700 group-data-[hover]:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-[hover]:bg-cyan-400/15',
22 |   sky: 'bg-sky-500/15 text-sky-700 group-data-[hover]:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-[hover]:bg-sky-500/20',
23 |   blue: 'bg-blue-500/15 text-blue-700 group-data-[hover]:bg-blue-500/25 dark:text-blue-400 dark:group-data-[hover]:bg-blue-500/25',
24 |   indigo:
25 |     'bg-indigo-500/15 text-indigo-700 group-data-[hover]:bg-indigo-500/25 dark:text-indigo-400 dark:group-data-[hover]:bg-indigo-500/20',
26 |   violet:
27 |     'bg-violet-500/15 text-violet-700 group-data-[hover]:bg-violet-500/25 dark:text-violet-400 dark:group-data-[hover]:bg-violet-500/20',
28 |   purple:
29 |     'bg-purple-500/15 text-purple-700 group-data-[hover]:bg-purple-500/25 dark:text-purple-400 dark:group-data-[hover]:bg-purple-500/20',
30 |   fuchsia:
31 |     'bg-fuchsia-400/15 text-fuchsia-700 group-data-[hover]:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-[hover]:bg-fuchsia-400/20',
32 |   pink: 'bg-pink-400/15 text-pink-700 group-data-[hover]:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-[hover]:bg-pink-400/20',
33 |   rose: 'bg-rose-400/15 text-rose-700 group-data-[hover]:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-[hover]:bg-rose-400/20',
34 |   zinc: 'bg-zinc-600/10 text-zinc-700 group-data-[hover]:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-[hover]:bg-white/10',
35 | }
36 | 
37 | type BadgeProps = { color?: keyof typeof colors }
38 | 
39 | export function Badge({ color = 'zinc', className, ...props }: BadgeProps & React.ComponentPropsWithoutRef<'span'>) {
40 |   return (
41 |     <span
42 |       {...props}
43 |       className={clsx(
44 |         className,
45 |         'inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline',
46 |         colors[color]
47 |       )}
48 |     />
49 |   )
50 | }
51 | 
52 | export const BadgeButton = forwardRef(function BadgeButton(
53 |   {
54 |     color = 'zinc',
55 |     className,
56 |     children,
57 |     ...props
58 |   }: BadgeProps & { className?: string; children: React.ReactNode } & (
59 |       | Omit<Headless.ButtonProps, 'as' | 'className'>
60 |       | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'className'>
61 |     ),
62 |   ref: React.ForwardedRef<HTMLElement>
63 | ) {
64 |   let classes = clsx(
65 |     className,
66 |     'group relative inline-flex rounded-md focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500'
67 |   )
68 | 
69 |   return 'href' in props ? (
70 |     <Link {...props} className={classes} ref={ref as React.ForwardedRef<HTMLAnchorElement>}>
71 |       <TouchTarget>
72 |         <Badge color={color}>{children}</Badge>
73 |       </TouchTarget>
74 |     </Link>
75 |   ) : (
76 |     <Headless.Button {...props} className={classes} ref={ref}>
77 |       <TouchTarget>
78 |         <Badge color={color}>{children}</Badge>
79 |       </TouchTarget>
80 |     </Headless.Button>
81 |   )
82 | })
83 | 


--------------------------------------------------------------------------------
/src/app/components/button.tsx:
--------------------------------------------------------------------------------
  1 | import * as Headless from '@headlessui/react'
  2 | import clsx from 'clsx'
  3 | import React, { forwardRef } from 'react'
  4 | import { Link } from './link'
  5 | 
  6 | const styles = {
  7 |   base: [
  8 |     // Base
  9 |     'relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold',
 10 |     // Sizing
 11 |     'px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6',
 12 |     // Focus
 13 |     'focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500',
 14 |     // Disabled
 15 |     'data-[disabled]:opacity-50',
 16 |     // Icon
 17 |     '[&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText]',
 18 |   ],
 19 |   solid: [
 20 |     // Optical border, implemented as the button background to avoid corner artifacts
 21 |     'border-transparent bg-[--btn-border]',
 22 |     // Dark mode: border is rendered on `after` so background is set to button background
 23 |     'dark:bg-[--btn-bg]',
 24 |     // Button background, implemented as foreground layer to stack on top of pseudo-border layer
 25 |     'before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg]',
 26 |     // Drop shadow, applied to the inset `before` layer so it blends with the border
 27 |     'before:shadow',
 28 |     // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
 29 |     'dark:before:hidden',
 30 |     // Dark mode: Subtle white outline is applied using a border
 31 |     'dark:border-white/5',
 32 |     // Shim/overlay, inset to match button foreground and used for hover state + highlight shadow
 33 |     'after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)]',
 34 |     // Inner highlight shadow
 35 |     'after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)]',
 36 |     // White overlay on hover
 37 |     'after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay]',
 38 |     // Dark mode: `after` layer expands to cover entire button
 39 |     'dark:after:-inset-px dark:after:rounded-lg',
 40 |     // Disabled
 41 |     'before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none',
 42 |   ],
 43 |   outline: [
 44 |     // Base
 45 |     'border-zinc-950/10 text-zinc-950 data-[active]:bg-zinc-950/[2.5%] data-[hover]:bg-zinc-950/[2.5%]',
 46 |     // Dark mode
 47 |     'dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:data-[active]:bg-white/5 dark:data-[hover]:bg-white/5',
 48 |     // Icon
 49 |     '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
 50 |   ],
 51 |   plain: [
 52 |     // Base
 53 |     'border-transparent text-zinc-950 data-[active]:bg-zinc-950/5 data-[hover]:bg-zinc-950/5',
 54 |     // Dark mode
 55 |     'dark:text-white dark:data-[active]:bg-white/10 dark:data-[hover]:bg-white/10',
 56 |     // Icon
 57 |     '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
 58 |   ],
 59 |   colors: {
 60 |     'dark/zinc': [
 61 |       'text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
 62 |       'dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)]',
 63 |       '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]',
 64 |     ],
 65 |     light: [
 66 |       'text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]',
 67 |       'dark:text-white dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]',
 68 |       '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
 69 |     ],
 70 |     'dark/white': [
 71 |       'text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
 72 |       'dark:text-zinc-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]',
 73 |       '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
 74 |     ],
 75 |     dark: [
 76 |       'text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
 77 |       'dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]',
 78 |       '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]',
 79 |     ],
 80 |     white: [
 81 |       'text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]',
 82 |       'dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]',
 83 |       '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.500)] data-[hover]:[--btn-icon:theme(colors.zinc.500)]',
 84 |     ],
 85 |     zinc: [
 86 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.zinc.600)] [--btn-border:theme(colors.zinc.700/90%)]',
 87 |       'dark:[--btn-hover-overlay:theme(colors.white/5%)]',
 88 |       '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]',
 89 |     ],
 90 |     indigo: [
 91 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.indigo.500)] [--btn-border:theme(colors.indigo.600/90%)]',
 92 |       '[--btn-icon:theme(colors.indigo.300)] data-[active]:[--btn-icon:theme(colors.indigo.200)] data-[hover]:[--btn-icon:theme(colors.indigo.200)]',
 93 |     ],
 94 |     cyan: [
 95 |       'text-cyan-950 [--btn-bg:theme(colors.cyan.300)] [--btn-border:theme(colors.cyan.400/80%)] [--btn-hover-overlay:theme(colors.white/25%)]',
 96 |       '[--btn-icon:theme(colors.cyan.500)]',
 97 |     ],
 98 |     red: [
 99 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.red.600)] [--btn-border:theme(colors.red.700/90%)]',
100 |       '[--btn-icon:theme(colors.red.300)] data-[active]:[--btn-icon:theme(colors.red.200)] data-[hover]:[--btn-icon:theme(colors.red.200)]',
101 |     ],
102 |     orange: [
103 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.orange.500)] [--btn-border:theme(colors.orange.600/90%)]',
104 |       '[--btn-icon:theme(colors.orange.300)] data-[active]:[--btn-icon:theme(colors.orange.200)] data-[hover]:[--btn-icon:theme(colors.orange.200)]',
105 |     ],
106 |     amber: [
107 |       'text-amber-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.amber.400)] [--btn-border:theme(colors.amber.500/80%)]',
108 |       '[--btn-icon:theme(colors.amber.600)]',
109 |     ],
110 |     yellow: [
111 |       'text-yellow-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.yellow.300)] [--btn-border:theme(colors.yellow.400/80%)]',
112 |       '[--btn-icon:theme(colors.yellow.600)] data-[active]:[--btn-icon:theme(colors.yellow.700)] data-[hover]:[--btn-icon:theme(colors.yellow.700)]',
113 |     ],
114 |     lime: [
115 |       'text-lime-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.lime.300)] [--btn-border:theme(colors.lime.400/80%)]',
116 |       '[--btn-icon:theme(colors.lime.600)] data-[active]:[--btn-icon:theme(colors.lime.700)] data-[hover]:[--btn-icon:theme(colors.lime.700)]',
117 |     ],
118 |     green: [
119 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.green.600)] [--btn-border:theme(colors.green.700/90%)]',
120 |       '[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]',
121 |     ],
122 |     emerald: [
123 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.emerald.600)] [--btn-border:theme(colors.emerald.700/90%)]',
124 |       '[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]',
125 |     ],
126 |     teal: [
127 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.teal.600)] [--btn-border:theme(colors.teal.700/90%)]',
128 |       '[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]',
129 |     ],
130 |     sky: [
131 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.sky.500)] [--btn-border:theme(colors.sky.600/80%)]',
132 |       '[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]',
133 |     ],
134 |     blue: [
135 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.blue.600)] [--btn-border:theme(colors.blue.700/90%)]',
136 |       '[--btn-icon:theme(colors.blue.400)] data-[active]:[--btn-icon:theme(colors.blue.300)] data-[hover]:[--btn-icon:theme(colors.blue.300)]',
137 |     ],
138 |     violet: [
139 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.violet.500)] [--btn-border:theme(colors.violet.600/90%)]',
140 |       '[--btn-icon:theme(colors.violet.300)] data-[active]:[--btn-icon:theme(colors.violet.200)] data-[hover]:[--btn-icon:theme(colors.violet.200)]',
141 |     ],
142 |     purple: [
143 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.purple.500)] [--btn-border:theme(colors.purple.600/90%)]',
144 |       '[--btn-icon:theme(colors.purple.300)] data-[active]:[--btn-icon:theme(colors.purple.200)] data-[hover]:[--btn-icon:theme(colors.purple.200)]',
145 |     ],
146 |     fuchsia: [
147 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.fuchsia.500)] [--btn-border:theme(colors.fuchsia.600/90%)]',
148 |       '[--btn-icon:theme(colors.fuchsia.300)] data-[active]:[--btn-icon:theme(colors.fuchsia.200)] data-[hover]:[--btn-icon:theme(colors.fuchsia.200)]',
149 |     ],
150 |     pink: [
151 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.pink.500)] [--btn-border:theme(colors.pink.600/90%)]',
152 |       '[--btn-icon:theme(colors.pink.300)] data-[active]:[--btn-icon:theme(colors.pink.200)] data-[hover]:[--btn-icon:theme(colors.pink.200)]',
153 |     ],
154 |     rose: [
155 |       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.rose.500)] [--btn-border:theme(colors.rose.600/90%)]',
156 |       '[--btn-icon:theme(colors.rose.300)] data-[active]:[--btn-icon:theme(colors.rose.200)] data-[hover]:[--btn-icon:theme(colors.rose.200)]',
157 |     ],
158 |   },
159 | }
160 | 
161 | type ButtonProps = (
162 |   | { color?: keyof typeof styles.colors; outline?: never; plain?: never }
163 |   | { color?: never; outline: true; plain?: never }
164 |   | { color?: never; outline?: never; plain: true }
165 | ) & { className?: string; children: React.ReactNode } & (
166 |     | Omit<Headless.ButtonProps, 'as' | 'className'>
167 |     | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'className'>
168 |   )
169 | 
170 | export const Button = forwardRef(function Button(
171 |   { color, outline, plain, className, children, ...props }: ButtonProps,
172 |   ref: React.ForwardedRef<HTMLElement>
173 | ) {
174 |   let classes = clsx(
175 |     className,
176 |     styles.base,
177 |     outline ? styles.outline : plain ? styles.plain : clsx(styles.solid, styles.colors[color ?? 'dark/zinc'])
178 |   )
179 | 
180 |   return 'href' in props ? (
181 |     <Link {...props} className={classes} ref={ref as React.ForwardedRef<HTMLAnchorElement>}>
182 |       <TouchTarget>{children}</TouchTarget>
183 |     </Link>
184 |   ) : (
185 |     <Headless.Button {...props} className={clsx(classes, 'cursor-default')} ref={ref}>
186 |       <TouchTarget>{children}</TouchTarget>
187 |     </Headless.Button>
188 |   )
189 | })
190 | 
191 | /**
192 |  * Expand the hit area to at least 44×44px on touch devices
193 |  */
194 | export function TouchTarget({ children }: { children: React.ReactNode }) {
195 |   return (
196 |     <>
197 |       <span
198 |         className="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
199 |         aria-hidden="true"
200 |       />
201 |       {children}
202 |     </>
203 |   )
204 | }
205 | 


--------------------------------------------------------------------------------
/src/app/components/checkbox.tsx:
--------------------------------------------------------------------------------
  1 | import * as Headless from '@headlessui/react'
  2 | import clsx from 'clsx'
  3 | import type React from 'react'
  4 | 
  5 | export function CheckboxGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
  6 |   return (
  7 |     <div
  8 |       data-slot="control"
  9 |       {...props}
 10 |       className={clsx(
 11 |         className,
 12 |         // Basic groups
 13 |         'space-y-3',
 14 |         // With descriptions
 15 |         'has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
 16 |       )}
 17 |     />
 18 |   )
 19 | }
 20 | 
 21 | export function CheckboxField({
 22 |   className,
 23 |   ...props
 24 | }: { className?: string } & Omit<Headless.FieldProps, 'as' | 'className'>) {
 25 |   return (
 26 |     <Headless.Field
 27 |       data-slot="field"
 28 |       {...props}
 29 |       className={clsx(
 30 |         className,
 31 |         // Base layout
 32 |         'grid grid-cols-[1.125rem_1fr] items-center gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]',
 33 |         // Control layout
 34 |         '[&>[data-slot=control]]:col-start-1 [&>[data-slot=control]]:row-start-1 [&>[data-slot=control]]:justify-self-center',
 35 |         // Label layout
 36 |         '[&>[data-slot=label]]:col-start-2 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start',
 37 |         // Description layout
 38 |         '[&>[data-slot=description]]:col-start-2 [&>[data-slot=description]]:row-start-2',
 39 |         // With description
 40 |         '[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
 41 |       )}
 42 |     />
 43 |   )
 44 | }
 45 | 
 46 | const base = [
 47 |   // Basic layout
 48 |   'relative isolate flex size-[1.125rem] items-center justify-center rounded-[0.3125rem] sm:size-4',
 49 |   // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
 50 |   'before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow',
 51 |   // Background color when checked
 52 |   'before:group-data-[checked]:bg-[--checkbox-checked-bg]',
 53 |   // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
 54 |   'dark:before:hidden',
 55 |   // Background color applied to control in dark mode
 56 |   'dark:bg-white/5 dark:group-data-[checked]:bg-[--checkbox-checked-bg]',
 57 |   // Border
 58 |   'border border-zinc-950/15 group-data-[checked]:border-transparent group-data-[checked]:group-data-[hover]:border-transparent group-data-[hover]:border-zinc-950/30 group-data-[checked]:bg-[--checkbox-checked-border]',
 59 |   'dark:border-white/15 dark:group-data-[checked]:border-white/5 dark:group-data-[checked]:group-data-[hover]:border-white/5 dark:group-data-[hover]:border-white/30',
 60 |   // Inner highlight shadow
 61 |   'after:absolute after:inset-0 after:rounded-[calc(0.3125rem-1px)] after:shadow-[inset_0_1px_theme(colors.white/15%)]',
 62 |   'dark:after:-inset-px dark:after:hidden dark:after:rounded-[0.3125rem] dark:group-data-[checked]:after:block',
 63 |   // Focus ring
 64 |   'group-data-[focus]:outline group-data-[focus]:outline-2 group-data-[focus]:outline-offset-2 group-data-[focus]:outline-blue-500',
 65 |   // Disabled state
 66 |   'group-data-[disabled]:opacity-50',
 67 |   'group-data-[disabled]:border-zinc-950/25 group-data-[disabled]:bg-zinc-950/5 group-data-[disabled]:[--checkbox-check:theme(colors.zinc.950/50%)] group-data-[disabled]:before:bg-transparent',
 68 |   'dark:group-data-[disabled]:border-white/20 dark:group-data-[disabled]:bg-white/[2.5%] dark:group-data-[disabled]:[--checkbox-check:theme(colors.white/50%)] dark:group-data-[disabled]:group-data-[checked]:after:hidden',
 69 |   // Forced colors mode
 70 |   'forced-colors:[--checkbox-check:HighlightText] forced-colors:[--checkbox-checked-bg:Highlight] forced-colors:group-data-[disabled]:[--checkbox-check:Highlight]',
 71 |   'dark:forced-colors:[--checkbox-check:HighlightText] dark:forced-colors:[--checkbox-checked-bg:Highlight] dark:forced-colors:group-data-[disabled]:[--checkbox-check:Highlight]',
 72 | ]
 73 | 
 74 | const colors = {
 75 |   'dark/zinc': [
 76 |     '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]',
 77 |     'dark:[--checkbox-checked-bg:theme(colors.zinc.600)]',
 78 |   ],
 79 |   'dark/white': [
 80 |     '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]',
 81 |     'dark:[--checkbox-check:theme(colors.zinc.900)] dark:[--checkbox-checked-bg:theme(colors.white)] dark:[--checkbox-checked-border:theme(colors.zinc.950/15%)]',
 82 |   ],
 83 |   white:
 84 |     '[--checkbox-check:theme(colors.zinc.900)] [--checkbox-checked-bg:theme(colors.white)] [--checkbox-checked-border:theme(colors.zinc.950/15%)]',
 85 |   dark: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]',
 86 |   zinc: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.600)] [--checkbox-checked-border:theme(colors.zinc.700/90%)]',
 87 |   red: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.red.600)] [--checkbox-checked-border:theme(colors.red.700/90%)]',
 88 |   orange:
 89 |     '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.orange.500)] [--checkbox-checked-border:theme(colors.orange.600/90%)]',
 90 |   amber:
 91 |     '[--checkbox-check:theme(colors.amber.950)] [--checkbox-checked-bg:theme(colors.amber.400)] [--checkbox-checked-border:theme(colors.amber.500/80%)]',
 92 |   yellow:
 93 |     '[--checkbox-check:theme(colors.yellow.950)] [--checkbox-checked-bg:theme(colors.yellow.300)] [--checkbox-checked-border:theme(colors.yellow.400/80%)]',
 94 |   lime: '[--checkbox-check:theme(colors.lime.950)] [--checkbox-checked-bg:theme(colors.lime.300)] [--checkbox-checked-border:theme(colors.lime.400/80%)]',
 95 |   green:
 96 |     '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.green.600)] [--checkbox-checked-border:theme(colors.green.700/90%)]',
 97 |   emerald:
 98 |     '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.emerald.600)] [--checkbox-checked-border:theme(colors.emerald.700/90%)]',
 99 |   teal: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.teal.600)] [--checkbox-checked-border:theme(colors.teal.700/90%)]',
100 |   cyan: '[--checkbox-check:theme(colors.cyan.950)] [--checkbox-checked-bg:theme(colors.cyan.300)] [--checkbox-checked-border:theme(colors.cyan.400/80%)]',
101 |   sky: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.sky.500)] [--checkbox-checked-border:theme(colors.sky.600/80%)]',
102 |   blue: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.blue.600)] [--checkbox-checked-border:theme(colors.blue.700/90%)]',
103 |   indigo:
104 |     '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.indigo.500)] [--checkbox-checked-border:theme(colors.indigo.600/90%)]',
105 |   violet:
106 |     '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.violet.500)] [--checkbox-checked-border:theme(colors.violet.600/90%)]',
107 |   purple:
108 |     '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.purple.500)] [--checkbox-checked-border:theme(colors.purple.600/90%)]',
109 |   fuchsia:
110 |     '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.fuchsia.500)] [--checkbox-checked-border:theme(colors.fuchsia.600/90%)]',
111 |   pink: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.pink.500)] [--checkbox-checked-border:theme(colors.pink.600/90%)]',
112 |   rose: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.rose.500)] [--checkbox-checked-border:theme(colors.rose.600/90%)]',
113 | }
114 | 
115 | type Color = keyof typeof colors
116 | 
117 | export function Checkbox({
118 |   color = 'dark/zinc',
119 |   className,
120 |   ...props
121 | }: {
122 |   color?: Color
123 |   className?: string
124 | } & Omit<Headless.CheckboxProps, 'as' | 'className'>) {
125 |   return (
126 |     <Headless.Checkbox
127 |       data-slot="control"
128 |       {...props}
129 |       className={clsx(className, 'group inline-flex focus:outline-none')}
130 |     >
131 |       <span className={clsx([base, colors[color]])}>
132 |         <svg
133 |           className="size-4 stroke-[--checkbox-check] opacity-0 group-data-[checked]:opacity-100 sm:h-3.5 sm:w-3.5"
134 |           viewBox="0 0 14 14"
135 |           fill="none"
136 |         >
137 |           {/* Checkmark icon */}
138 |           <path
139 |             className="opacity-100 group-data-[indeterminate]:opacity-0"
140 |             d="M3 8L6 11L11 3.5"
141 |             strokeWidth={2}
142 |             strokeLinecap="round"
143 |             strokeLinejoin="round"
144 |           />
145 |           {/* Indeterminate icon */}
146 |           <path
147 |             className="opacity-0 group-data-[indeterminate]:opacity-100"
148 |             d="M3 7H11"
149 |             strokeWidth={2}
150 |             strokeLinecap="round"
151 |             strokeLinejoin="round"
152 |           />
153 |         </svg>
154 |       </span>
155 |     </Headless.Checkbox>
156 |   )
157 | }
158 | 


--------------------------------------------------------------------------------
/src/app/components/description-list.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx'
 2 | 
 3 | export function DescriptionList({ className, ...props }: React.ComponentPropsWithoutRef<'dl'>) {
 4 |   return (
 5 |     <dl
 6 |       {...props}
 7 |       className={clsx(
 8 |         className,
 9 |         'grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,theme(spacing.80))_auto] sm:text-sm/6'
10 |       )}
11 |     />
12 |   )
13 | }
14 | 
15 | export function DescriptionTerm({ className, ...props }: React.ComponentPropsWithoutRef<'dt'>) {
16 |   return (
17 |     <dt
18 |       {...props}
19 |       className={clsx(
20 |         className,
21 |         'col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5'
22 |       )}
23 |     />
24 |   )
25 | }
26 | 
27 | export function DescriptionDetails({ className, ...props }: React.ComponentPropsWithoutRef<'dd'>) {
28 |   return (
29 |     <dd
30 |       {...props}
31 |       className={clsx(
32 |         className,
33 |         'pb-3 pt-1 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none'
34 |       )}
35 |     />
36 |   )
37 | }
38 | 


--------------------------------------------------------------------------------
/src/app/components/dialog.tsx:
--------------------------------------------------------------------------------
 1 | import * as Headless from '@headlessui/react'
 2 | import clsx from 'clsx'
 3 | import type React from 'react'
 4 | import { Text } from './text'
 5 | 
 6 | const sizes = {
 7 |   xs: 'sm:max-w-xs',
 8 |   sm: 'sm:max-w-sm',
 9 |   md: 'sm:max-w-md',
10 |   lg: 'sm:max-w-lg',
11 |   xl: 'sm:max-w-xl',
12 |   '2xl': 'sm:max-w-2xl',
13 |   '3xl': 'sm:max-w-3xl',
14 |   '4xl': 'sm:max-w-4xl',
15 |   '5xl': 'sm:max-w-5xl',
16 | }
17 | 
18 | export function Dialog({
19 |   size = 'lg',
20 |   className,
21 |   children,
22 |   ...props
23 | }: { size?: keyof typeof sizes; className?: string; children: React.ReactNode } & Omit<
24 |   Headless.DialogProps,
25 |   'as' | 'className'
26 | >) {
27 |   return (
28 |     <Headless.Dialog {...props}>
29 |       <Headless.DialogBackdrop
30 |         transition
31 |         className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/25 px-2 py-2 transition duration-100 focus:outline-0 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50"
32 |       />
33 | 
34 |       <div className="fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0">
35 |         <div className="grid min-h-full grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr] sm:p-4">
36 |           <Headless.DialogPanel
37 |             transition
38 |             className={clsx(
39 |               className,
40 |               sizes[size],
41 |               'row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-[--gutter] shadow-lg ring-1 ring-zinc-950/10 [--gutter:theme(spacing.8)] sm:mb-auto sm:rounded-2xl dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline',
42 |               'transition duration-100 will-change-transform data-[closed]:translate-y-12 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in sm:data-[closed]:translate-y-0 sm:data-[closed]:data-[enter]:scale-95'
43 |             )}
44 |           >
45 |             {children}
46 |           </Headless.DialogPanel>
47 |         </div>
48 |       </div>
49 |     </Headless.Dialog>
50 |   )
51 | }
52 | 
53 | export function DialogTitle({
54 |   className,
55 |   ...props
56 | }: { className?: string } & Omit<Headless.DialogTitleProps, 'as' | 'className'>) {
57 |   return (
58 |     <Headless.DialogTitle
59 |       {...props}
60 |       className={clsx(className, 'text-balance text-lg/6 font-semibold text-zinc-950 sm:text-base/6 dark:text-white')}
61 |     />
62 |   )
63 | }
64 | 
65 | export function DialogDescription({
66 |   className,
67 |   ...props
68 | }: { className?: string } & Omit<Headless.DescriptionProps<typeof Text>, 'as' | 'className'>) {
69 |   return <Headless.Description as={Text} {...props} className={clsx(className, 'mt-2 text-pretty')} />
70 | }
71 | 
72 | export function DialogBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
73 |   return <div {...props} className={clsx(className, 'mt-6')} />
74 | }
75 | 
76 | export function DialogActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
77 |   return (
78 |     <div
79 |       {...props}
80 |       className={clsx(
81 |         className,
82 |         'mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto'
83 |       )}
84 |     />
85 |   )
86 | }
87 | 


--------------------------------------------------------------------------------
/src/app/components/divider.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx'
 2 | 
 3 | export function Divider({
 4 |   soft = false,
 5 |   className,
 6 |   ...props
 7 | }: { soft?: boolean } & React.ComponentPropsWithoutRef<'hr'>) {
 8 |   return (
 9 |     <hr
10 |       role="presentation"
11 |       {...props}
12 |       className={clsx(
13 |         className,
14 |         'w-full border-t',
15 |         soft && 'border-zinc-950/5 dark:border-white/5',
16 |         !soft && 'border-zinc-950/10 dark:border-white/10'
17 |       )}
18 |     />
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/src/app/components/dropdown.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import * as Headless from '@headlessui/react'
  4 | import clsx from 'clsx'
  5 | import type React from 'react'
  6 | import { Button } from './button'
  7 | import { Link } from './link'
  8 | 
  9 | export function Dropdown(props: Headless.MenuProps) {
 10 |   return <Headless.Menu {...props} />
 11 | }
 12 | 
 13 | export function DropdownButton<T extends React.ElementType = typeof Button>({
 14 |   as = Button,
 15 |   ...props
 16 | }: { className?: string } & Omit<Headless.MenuButtonProps<T>, 'className'>) {
 17 |   return <Headless.MenuButton as={as} {...props} />
 18 | }
 19 | 
 20 | export function DropdownMenu({
 21 |   anchor = 'bottom',
 22 |   className,
 23 |   ...props
 24 | }: { className?: string } & Omit<Headless.MenuItemsProps, 'as' | 'className'>) {
 25 |   return (
 26 |     <Headless.MenuItems
 27 |       {...props}
 28 |       transition
 29 |       anchor={anchor}
 30 |       className={clsx(
 31 |         className,
 32 |         // Anchor positioning
 33 |         '[--anchor-gap:theme(spacing.2)] [--anchor-padding:theme(spacing.1)] data-[anchor~=start]:[--anchor-offset:-6px] data-[anchor~=end]:[--anchor-offset:6px] sm:data-[anchor~=start]:[--anchor-offset:-4px] sm:data-[anchor~=end]:[--anchor-offset:4px]',
 34 |         // Base styles
 35 |         'isolate w-max rounded-xl p-1',
 36 |         // Invisible border that is only visible in `forced-colors` mode for accessibility purposes
 37 |         'outline outline-1 outline-transparent focus:outline-none',
 38 |         // Handle scrolling when menu won't fit in viewport
 39 |         'overflow-y-auto',
 40 |         // Popover background
 41 |         'bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75',
 42 |         // Shadows
 43 |         'shadow-lg ring-1 ring-zinc-950/10 dark:ring-inset dark:ring-white/10',
 44 |         // Define grid at the menu level if subgrid is supported
 45 |         'supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]',
 46 |         // Transitions
 47 |         'transition data-[closed]:data-[leave]:opacity-0 data-[leave]:duration-100 data-[leave]:ease-in'
 48 |       )}
 49 |     />
 50 |   )
 51 | }
 52 | 
 53 | export function DropdownItem({
 54 |   className,
 55 |   ...props
 56 | }: { className?: string } & (
 57 |   | Omit<React.ComponentPropsWithoutRef<'button'>, 'as' | 'className'>
 58 |   | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'className'>
 59 | )) {
 60 |   let classes = clsx(
 61 |     className,
 62 |     // Base styles
 63 |     'group cursor-default rounded-lg px-3.5 py-2.5 focus:outline-none sm:px-3 sm:py-1.5',
 64 |     // Text styles
 65 |     'text-left text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]',
 66 |     // Focus
 67 |     'data-[focus]:bg-blue-500 data-[focus]:text-white',
 68 |     // Disabled state
 69 |     'data-[disabled]:opacity-50',
 70 |     // Forced colors mode
 71 |     'forced-color-adjust-none forced-colors:data-[focus]:bg-[Highlight] forced-colors:data-[focus]:text-[HighlightText] forced-colors:[&>[data-slot=icon]]:data-[focus]:text-[HighlightText]',
 72 |     // Use subgrid when available but fallback to an explicit grid layout if not
 73 |     'col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center supports-[grid-template-columns:subgrid]:grid-cols-subgrid',
 74 |     // Icons
 75 |     '[&>[data-slot=icon]]:col-start-1 [&>[data-slot=icon]]:row-start-1 [&>[data-slot=icon]]:-ml-0.5 [&>[data-slot=icon]]:mr-2.5 [&>[data-slot=icon]]:size-5 sm:[&>[data-slot=icon]]:mr-2 [&>[data-slot=icon]]:sm:size-4',
 76 |     '[&>[data-slot=icon]]:text-zinc-500 [&>[data-slot=icon]]:data-[focus]:text-white [&>[data-slot=icon]]:dark:text-zinc-400 [&>[data-slot=icon]]:data-[focus]:dark:text-white',
 77 |     // Avatar
 78 |     '[&>[data-slot=avatar]]:-ml-1 [&>[data-slot=avatar]]:mr-2.5 [&>[data-slot=avatar]]:size-6 sm:[&>[data-slot=avatar]]:mr-2 sm:[&>[data-slot=avatar]]:size-5'
 79 |   )
 80 | 
 81 |   return (
 82 |     <Headless.MenuItem>
 83 |       {'href' in props ? (
 84 |         <Link {...props} className={classes} />
 85 |       ) : (
 86 |         <button type="button" {...props} className={classes} />
 87 |       )}
 88 |     </Headless.MenuItem>
 89 |   )
 90 | }
 91 | 
 92 | export function DropdownHeader({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
 93 |   return <div {...props} className={clsx(className, 'col-span-5 px-3.5 pb-1 pt-2.5 sm:px-3')} />
 94 | }
 95 | 
 96 | export function DropdownSection({
 97 |   className,
 98 |   ...props
 99 | }: { className?: string } & Omit<Headless.MenuSectionProps, 'as' | 'className'>) {
100 |   return (
101 |     <Headless.MenuSection
102 |       {...props}
103 |       className={clsx(
104 |         className,
105 |         // Define grid at the section level instead of the item level if subgrid is supported
106 |         'col-span-full supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]'
107 |       )}
108 |     />
109 |   )
110 | }
111 | 
112 | export function DropdownHeading({
113 |   className,
114 |   ...props
115 | }: { className?: string } & Omit<Headless.MenuHeadingProps, 'as' | 'className'>) {
116 |   return (
117 |     <Headless.MenuHeading
118 |       {...props}
119 |       className={clsx(
120 |         className,
121 |         'col-span-full grid grid-cols-[1fr,auto] gap-x-12 px-3.5 pb-1 pt-2 text-sm/5 font-medium text-zinc-500 sm:px-3 sm:text-xs/5 dark:text-zinc-400'
122 |       )}
123 |     />
124 |   )
125 | }
126 | 
127 | export function DropdownDivider({
128 |   className,
129 |   ...props
130 | }: { className?: string } & Omit<Headless.MenuSeparatorProps, 'as' | 'className'>) {
131 |   return (
132 |     <Headless.MenuSeparator
133 |       {...props}
134 |       className={clsx(
135 |         className,
136 |         'col-span-full mx-3.5 my-1 h-px border-0 bg-zinc-950/5 sm:mx-3 dark:bg-white/10 forced-colors:bg-[CanvasText]'
137 |       )}
138 |     />
139 |   )
140 | }
141 | 
142 | export function DropdownLabel({
143 |   className,
144 |   ...props
145 | }: { className?: string } & Omit<Headless.LabelProps, 'as' | 'className'>) {
146 |   return (
147 |     <Headless.Label {...props} data-slot="label" className={clsx(className, 'col-start-2 row-start-1')} {...props} />
148 |   )
149 | }
150 | 
151 | export function DropdownDescription({
152 |   className,
153 |   ...props
154 | }: { className?: string } & Omit<Headless.DescriptionProps, 'as' | 'className'>) {
155 |   return (
156 |     <Headless.Description
157 |       data-slot="description"
158 |       {...props}
159 |       className={clsx(
160 |         className,
161 |         'col-span-2 col-start-2 row-start-2 text-sm/5 text-zinc-500 group-data-[focus]:text-white sm:text-xs/5 dark:text-zinc-400 forced-colors:group-data-[focus]:text-[HighlightText]'
162 |       )}
163 |     />
164 |   )
165 | }
166 | 
167 | export function DropdownShortcut({
168 |   keys,
169 |   className,
170 |   ...props
171 | }: { keys: string | string[]; className?: string } & Omit<Headless.DescriptionProps<'kbd'>, 'as' | 'className'>) {
172 |   return (
173 |     <Headless.Description
174 |       as="kbd"
175 |       {...props}
176 |       className={clsx(className, 'col-start-5 row-start-1 flex justify-self-end')}
177 |     >
178 |       {(Array.isArray(keys) ? keys : keys.split('')).map((char, index) => (
179 |         <kbd
180 |           key={index}
181 |           className={clsx([
182 |             'min-w-[2ch] text-center font-sans capitalize text-zinc-400 group-data-[focus]:text-white forced-colors:group-data-[focus]:text-[HighlightText]',
183 |             // Make sure key names that are longer than one character (like "Tab") have extra space
184 |             index > 0 && char.length > 1 && 'pl-1',
185 |           ])}
186 |         >
187 |           {char}
188 |         </kbd>
189 |       ))}
190 |     </Headless.Description>
191 |   )
192 | }
193 | 


--------------------------------------------------------------------------------
/src/app/components/fieldset.tsx:
--------------------------------------------------------------------------------
 1 | import * as Headless from '@headlessui/react'
 2 | import clsx from 'clsx'
 3 | import type React from 'react'
 4 | 
 5 | export function Fieldset({
 6 |   className,
 7 |   ...props
 8 | }: { className?: string } & Omit<Headless.FieldsetProps, 'as' | 'className'>) {
 9 |   return (
10 |     <Headless.Fieldset
11 |       {...props}
12 |       className={clsx(className, '[&>*+[data-slot=control]]:mt-6 [&>[data-slot=text]]:mt-1')}
13 |     />
14 |   )
15 | }
16 | 
17 | export function Legend({
18 |   className,
19 |   ...props
20 | }: { className?: string } & Omit<Headless.LegendProps, 'as' | 'className'>) {
21 |   return (
22 |     <Headless.Legend
23 |       data-slot="legend"
24 |       {...props}
25 |       className={clsx(
26 |         className,
27 |         'text-base/6 font-semibold text-zinc-950 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-white'
28 |       )}
29 |     />
30 |   )
31 | }
32 | 
33 | export function FieldGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
34 |   return <div data-slot="control" {...props} className={clsx(className, 'space-y-8')} />
35 | }
36 | 
37 | export function Field({ className, ...props }: { className?: string } & Omit<Headless.FieldProps, 'as' | 'className'>) {
38 |   return (
39 |     <Headless.Field
40 |       {...props}
41 |       className={clsx(
42 |         className,
43 |         '[&>[data-slot=label]+[data-slot=control]]:mt-3',
44 |         '[&>[data-slot=label]+[data-slot=description]]:mt-1',
45 |         '[&>[data-slot=description]+[data-slot=control]]:mt-3',
46 |         '[&>[data-slot=control]+[data-slot=description]]:mt-3',
47 |         '[&>[data-slot=control]+[data-slot=error]]:mt-3',
48 |         '[&>[data-slot=label]]:font-medium'
49 |       )}
50 |     />
51 |   )
52 | }
53 | 
54 | export function Label({ className, ...props }: { className?: string } & Omit<Headless.LabelProps, 'as' | 'className'>) {
55 |   return (
56 |     <Headless.Label
57 |       data-slot="label"
58 |       {...props}
59 |       className={clsx(
60 |         className,
61 |         'select-none text-base/6 text-zinc-950 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-white'
62 |       )}
63 |     />
64 |   )
65 | }
66 | 
67 | export function Description({
68 |   className,
69 |   ...props
70 | }: { className?: string } & Omit<Headless.DescriptionProps, 'as' | 'className'>) {
71 |   return (
72 |     <Headless.Description
73 |       data-slot="description"
74 |       {...props}
75 |       className={clsx(
76 |         className,
77 |         'text-base/6 text-zinc-500 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-zinc-400'
78 |       )}
79 |     />
80 |   )
81 | }
82 | 
83 | export function ErrorMessage({
84 |   className,
85 |   ...props
86 | }: { className?: string } & Omit<Headless.DescriptionProps, 'as' | 'className'>) {
87 |   return (
88 |     <Headless.Description
89 |       data-slot="error"
90 |       {...props}
91 |       className={clsx(className, 'text-base/6 text-red-600 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-red-500')}
92 |     />
93 |   )
94 | }
95 | 


--------------------------------------------------------------------------------
/src/app/components/heading.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx'
 2 | 
 3 | type HeadingProps = { level?: 1 | 2 | 3 | 4 | 5 | 6 } & React.ComponentPropsWithoutRef<
 4 |   'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 5 | >
 6 | 
 7 | export function Heading({ className, level = 1, ...props }: HeadingProps) {
 8 |   let Element: `h${typeof level}` = `h${level}`
 9 | 
10 |   return (
11 |     <Element
12 |       {...props}
13 |       className={clsx(className, 'text-2xl/8 font-semibold text-zinc-950 sm:text-xl/8 dark:text-white')}
14 |     />
15 |   )
16 | }
17 | 
18 | export function Subheading({ className, level = 2, ...props }: HeadingProps) {
19 |   let Element: `h${typeof level}` = `h${level}`
20 | 
21 |   return (
22 |     <Element
23 |       {...props}
24 |       className={clsx(className, 'text-base/7 font-semibold text-zinc-950 sm:text-sm/6 dark:text-white')}
25 |     />
26 |   )
27 | }
28 | 


--------------------------------------------------------------------------------
/src/app/components/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as Headless from '@headlessui/react'
 2 | import clsx from 'clsx'
 3 | import React, { forwardRef } from 'react'
 4 | 
 5 | export function InputGroup({ children }: React.ComponentPropsWithoutRef<'span'>) {
 6 |   return (
 7 |     <span
 8 |       data-slot="control"
 9 |       className={clsx(
10 |         'relative isolate block',
11 |         '[&_input]:has-[[data-slot=icon]:first-child]:pl-10 [&_input]:has-[[data-slot=icon]:last-child]:pr-10 sm:[&_input]:has-[[data-slot=icon]:first-child]:pl-8 sm:[&_input]:has-[[data-slot=icon]:last-child]:pr-8',
12 |         '[&>[data-slot=icon]]:pointer-events-none [&>[data-slot=icon]]:absolute [&>[data-slot=icon]]:top-3 [&>[data-slot=icon]]:z-10 [&>[data-slot=icon]]:size-5 sm:[&>[data-slot=icon]]:top-2.5 sm:[&>[data-slot=icon]]:size-4',
13 |         '[&>[data-slot=icon]:first-child]:left-3 sm:[&>[data-slot=icon]:first-child]:left-2.5 [&>[data-slot=icon]:last-child]:right-3 sm:[&>[data-slot=icon]:last-child]:right-2.5',
14 |         '[&>[data-slot=icon]]:text-zinc-500 dark:[&>[data-slot=icon]]:text-zinc-400'
15 |       )}
16 |     >
17 |       {children}
18 |     </span>
19 |   )
20 | }
21 | 
22 | const dateTypes = ['date', 'datetime-local', 'month', 'time', 'week']
23 | type DateType = (typeof dateTypes)[number]
24 | 
25 | export const Input = forwardRef(function Input(
26 |   {
27 |     className,
28 |     ...props
29 |   }: {
30 |     className?: string
31 |     type?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | DateType
32 |   } & Omit<Headless.InputProps, 'as' | 'className'>,
33 |   ref: React.ForwardedRef<HTMLInputElement>
34 | ) {
35 |   return (
36 |     <span
37 |       data-slot="control"
38 |       className={clsx([
39 |         className,
40 |         // Basic layout
41 |         'relative block w-full',
42 |         // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
43 |         'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
44 |         // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
45 |         'dark:before:hidden',
46 |         // Focus ring
47 |         'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500',
48 |         // Disabled state
49 |         'has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none',
50 |         // Invalid state
51 |         'before:has-[[data-invalid]]:shadow-red-500/10',
52 |       ])}
53 |     >
54 |       <Headless.Input
55 |         ref={ref}
56 |         {...props}
57 |         className={clsx([
58 |           // Date classes
59 |           props.type &&
60 |             dateTypes.includes(props.type) && [
61 |               '[&::-webkit-datetime-edit-fields-wrapper]:p-0',
62 |               '[&::-webkit-date-and-time-value]:min-h-[1.5em]',
63 |               '[&::-webkit-datetime-edit]:inline-flex',
64 |               '[&::-webkit-datetime-edit]:p-0',
65 |               '[&::-webkit-datetime-edit-year-field]:p-0',
66 |               '[&::-webkit-datetime-edit-month-field]:p-0',
67 |               '[&::-webkit-datetime-edit-day-field]:p-0',
68 |               '[&::-webkit-datetime-edit-hour-field]:p-0',
69 |               '[&::-webkit-datetime-edit-minute-field]:p-0',
70 |               '[&::-webkit-datetime-edit-second-field]:p-0',
71 |               '[&::-webkit-datetime-edit-millisecond-field]:p-0',
72 |               '[&::-webkit-datetime-edit-meridiem-field]:p-0',
73 |             ],
74 |           // Basic layout
75 |           'relative block w-full appearance-none rounded-lg px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]',
76 |           // Typography
77 |           'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white',
78 |           // Border
79 |           'border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20',
80 |           // Background color
81 |           'bg-transparent dark:bg-white/5',
82 |           // Hide default focus styles
83 |           'focus:outline-none',
84 |           // Invalid state
85 |           'data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-500 data-[invalid]:data-[hover]:dark:border-red-500',
86 |           // Disabled state
87 |           'data-[disabled]:border-zinc-950/20 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]',
88 |           // System icons
89 |           'dark:[color-scheme:dark]',
90 |         ])}
91 |       />
92 |     </span>
93 |   )
94 | })
95 | 


--------------------------------------------------------------------------------
/src/app/components/link.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * TODO: Update this component to use your client-side framework's link
 3 |  * component. We've provided examples of how to do this for Next.js, Remix, and
 4 |  * Inertia.js in the Catalyst documentation:
 5 |  *
 6 |  * https://catalyst.tailwindui.com/docs#client-side-router-integration
 7 |  */
 8 | 
 9 | import * as Headless from '@headlessui/react'
10 | import React, { forwardRef } from 'react'
11 | 
12 | export const Link = forwardRef(function Link(
13 |   props: { href: string } & React.ComponentPropsWithoutRef<'a'>,
14 |   ref: React.ForwardedRef<HTMLAnchorElement>
15 | ) {
16 |   return (
17 |     <Headless.DataInteractive>
18 |       <a {...props} ref={ref} />
19 |     </Headless.DataInteractive>
20 |   )
21 | })
22 | 


--------------------------------------------------------------------------------
/src/app/components/listbox.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import * as Headless from '@headlessui/react'
  4 | import clsx from 'clsx'
  5 | import { Fragment } from 'react'
  6 | 
  7 | export function Listbox<T>({
  8 |   className,
  9 |   placeholder,
 10 |   autoFocus,
 11 |   'aria-label': ariaLabel,
 12 |   children: options,
 13 |   ...props
 14 | }: {
 15 |   className?: string
 16 |   placeholder?: React.ReactNode
 17 |   autoFocus?: boolean
 18 |   'aria-label'?: string
 19 |   children?: React.ReactNode
 20 | } & Omit<Headless.ListboxProps<typeof Fragment, T>, 'as' | 'multiple'>) {
 21 |   return (
 22 |     <Headless.Listbox {...props} multiple={false}>
 23 |       <Headless.ListboxButton
 24 |         autoFocus={autoFocus}
 25 |         data-slot="control"
 26 |         aria-label={ariaLabel}
 27 |         className={clsx([
 28 |           className,
 29 |           // Basic layout
 30 |           'group relative block w-full',
 31 |           // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
 32 |           'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
 33 |           // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
 34 |           'dark:before:hidden',
 35 |           // Hide default focus styles
 36 |           'focus:outline-none',
 37 |           // Focus ring
 38 |           'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent after:data-[focus]:ring-2 after:data-[focus]:ring-blue-500',
 39 |           // Disabled state
 40 |           'data-[disabled]:opacity-50 before:data-[disabled]:bg-zinc-950/5 before:data-[disabled]:shadow-none',
 41 |         ])}
 42 |       >
 43 |         <Headless.ListboxSelectedOption
 44 |           as="span"
 45 |           options={options}
 46 |           placeholder={placeholder && <span className="block truncate text-zinc-500">{placeholder}</span>}
 47 |           className={clsx([
 48 |             // Basic layout
 49 |             'relative block w-full appearance-none rounded-lg py-[calc(theme(spacing[2.5])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]',
 50 |             // Set minimum height for when no value is selected
 51 |             'min-h-11 sm:min-h-9',
 52 |             // Horizontal padding
 53 |             'pl-[calc(theme(spacing[3.5])-1px)] pr-[calc(theme(spacing.7)-1px)] sm:pl-[calc(theme(spacing.3)-1px)]',
 54 |             // Typography
 55 |             'text-left text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]',
 56 |             // Border
 57 |             'border border-zinc-950/10 group-data-[active]:border-zinc-950/20 group-data-[hover]:border-zinc-950/20 dark:border-white/10 dark:group-data-[active]:border-white/20 dark:group-data-[hover]:border-white/20',
 58 |             // Background color
 59 |             'bg-transparent dark:bg-white/5',
 60 |             // Invalid state
 61 |             'group-data-[invalid]:border-red-500 group-data-[invalid]:group-data-[hover]:border-red-500 group-data-[invalid]:dark:border-red-600 group-data-[invalid]:data-[hover]:dark:border-red-600',
 62 |             // Disabled state
 63 |             'group-data-[disabled]:border-zinc-950/20 group-data-[disabled]:opacity-100 group-data-[disabled]:dark:border-white/15 group-data-[disabled]:dark:bg-white/[2.5%] dark:data-[hover]:group-data-[disabled]:border-white/15',
 64 |           ])}
 65 |         />
 66 |         <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
 67 |           <svg
 68 |             className="size-5 stroke-zinc-500 group-data-[disabled]:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]"
 69 |             viewBox="0 0 16 16"
 70 |             aria-hidden="true"
 71 |             fill="none"
 72 |           >
 73 |             <path d="M5.75 10.75L8 13L10.25 10.75" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
 74 |             <path d="M10.25 5.25L8 3L5.75 5.25" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
 75 |           </svg>
 76 |         </span>
 77 |       </Headless.ListboxButton>
 78 |       <Headless.ListboxOptions
 79 |         transition
 80 |         anchor="selection start"
 81 |         className={clsx(
 82 |           // Anchor positioning
 83 |           '[--anchor-offset:-1.625rem] [--anchor-padding:theme(spacing.4)] sm:[--anchor-offset:-1.375rem]',
 84 |           // Base styles
 85 |           'isolate w-max min-w-[calc(var(--button-width)+1.75rem)] select-none scroll-py-1 rounded-xl p-1',
 86 |           // Invisible border that is only visible in `forced-colors` mode for accessibility purposes
 87 |           'outline outline-1 outline-transparent focus:outline-none',
 88 |           // Handle scrolling when menu won't fit in viewport
 89 |           'overflow-y-scroll overscroll-contain',
 90 |           // Popover background
 91 |           'bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75',
 92 |           // Shadows
 93 |           'shadow-lg ring-1 ring-zinc-950/10 dark:ring-inset dark:ring-white/10',
 94 |           // Transitions
 95 |           'transition-opacity duration-100 ease-in data-[transition]:pointer-events-none data-[closed]:data-[leave]:opacity-0'
 96 |         )}
 97 |       >
 98 |         {options}
 99 |       </Headless.ListboxOptions>
100 |     </Headless.Listbox>
101 |   )
102 | }
103 | 
104 | export function ListboxOption<T>({
105 |   children,
106 |   className,
107 |   ...props
108 | }: { className?: string; children?: React.ReactNode } & Omit<
109 |   Headless.ListboxOptionProps<'div', T>,
110 |   'as' | 'className'
111 | >) {
112 |   let sharedClasses = clsx(
113 |     // Base
114 |     'flex min-w-0 items-center',
115 |     // Icons
116 |     '[&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 sm:[&>[data-slot=icon]]:size-4',
117 |     '[&>[data-slot=icon]]:text-zinc-500 [&>[data-slot=icon]]:group-data-[focus]/option:text-white [&>[data-slot=icon]]:dark:text-zinc-400',
118 |     'forced-colors:[&>[data-slot=icon]]:text-[CanvasText] forced-colors:[&>[data-slot=icon]]:group-data-[focus]/option:text-[Canvas]',
119 |     // Avatars
120 |     '[&>[data-slot=avatar]]:-mx-0.5 [&>[data-slot=avatar]]:size-6 sm:[&>[data-slot=avatar]]:size-5'
121 |   )
122 | 
123 |   return (
124 |     <Headless.ListboxOption as={Fragment} {...props}>
125 |       {({ selectedOption }) => {
126 |         if (selectedOption) {
127 |           return <div className={clsx(className, sharedClasses)}>{children}</div>
128 |         }
129 | 
130 |         return (
131 |           <div
132 |             className={clsx(
133 |               // Basic layout
134 |               'group/option grid cursor-default grid-cols-[theme(spacing.5),1fr] items-baseline gap-x-2 rounded-lg py-2.5 pl-2 pr-3.5 sm:grid-cols-[theme(spacing.4),1fr] sm:py-1.5 sm:pl-1.5 sm:pr-3',
135 |               // Typography
136 |               'text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]',
137 |               // Focus
138 |               'outline-none data-[focus]:bg-blue-500 data-[focus]:text-white',
139 |               // Forced colors mode
140 |               'forced-color-adjust-none forced-colors:data-[focus]:bg-[Highlight] forced-colors:data-[focus]:text-[HighlightText]',
141 |               // Disabled
142 |               'data-[disabled]:opacity-50'
143 |             )}
144 |           >
145 |             <svg
146 |               className="relative hidden size-5 self-center stroke-current group-data-[selected]/option:inline sm:size-4"
147 |               viewBox="0 0 16 16"
148 |               fill="none"
149 |               aria-hidden="true"
150 |             >
151 |               <path d="M4 8.5l3 3L12 4" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
152 |             </svg>
153 |             <span className={clsx(className, sharedClasses, 'col-start-2')}>{children}</span>
154 |           </div>
155 |         )
156 |       }}
157 |     </Headless.ListboxOption>
158 |   )
159 | }
160 | 
161 | export function ListboxLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) {
162 |   return <span {...props} className={clsx(className, 'ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0')} />
163 | }
164 | 
165 | export function ListboxDescription({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>) {
166 |   return (
167 |     <span
168 |       {...props}
169 |       className={clsx(
170 |         className,
171 |         'flex flex-1 overflow-hidden text-zinc-500 before:w-2 before:min-w-0 before:shrink group-data-[focus]/option:text-white dark:text-zinc-400'
172 |       )}
173 |     >
174 |       <span className="flex-1 truncate">{children}</span>
175 |     </span>
176 |   )
177 | }
178 | 


--------------------------------------------------------------------------------
/src/app/components/navbar.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import * as Headless from '@headlessui/react'
 4 | import clsx from 'clsx'
 5 | import { LayoutGroup, motion } from 'framer-motion'
 6 | import React, { forwardRef, useId } from 'react'
 7 | import { TouchTarget } from './button'
 8 | import { Link } from './link'
 9 | 
10 | export function Navbar({ className, ...props }: React.ComponentPropsWithoutRef<'nav'>) {
11 |   return <nav {...props} className={clsx(className, 'flex flex-1 items-center gap-4 py-2.5')} />
12 | }
13 | 
14 | export function NavbarDivider({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
15 |   return <div aria-hidden="true" {...props} className={clsx(className, 'h-6 w-px bg-zinc-950/10 dark:bg-white/10')} />
16 | }
17 | 
18 | export function NavbarSection({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
19 |   let id = useId()
20 | 
21 |   return (
22 |     <LayoutGroup id={id}>
23 |       <div {...props} className={clsx(className, 'flex items-center gap-3')} />
24 |     </LayoutGroup>
25 |   )
26 | }
27 | 
28 | export function NavbarSpacer({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
29 |   return <div aria-hidden="true" {...props} className={clsx(className, '-ml-4 flex-1')} />
30 | }
31 | 
32 | export const NavbarItem = forwardRef(function NavbarItem(
33 |   {
34 |     current,
35 |     className,
36 |     children,
37 |     ...props
38 |   }: { current?: boolean; className?: string; children: React.ReactNode } & (
39 |     | Omit<Headless.ButtonProps, 'as' | 'className'>
40 |     | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'className'>
41 |   ),
42 |   ref: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement>
43 | ) {
44 |   let classes = clsx(
45 |     // Base
46 |     'relative flex min-w-0 items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium text-zinc-950 sm:text-sm/5',
47 |     // Leading icon/icon-only
48 |     'data-[slot=icon]:*:size-6 data-[slot=icon]:*:shrink-0 data-[slot=icon]:*:fill-zinc-500 sm:data-[slot=icon]:*:size-5',
49 |     // Trailing icon (down chevron or similar)
50 |     'data-[slot=icon]:last:[&:not(:nth-child(2))]:*:ml-auto data-[slot=icon]:last:[&:not(:nth-child(2))]:*:size-5 sm:data-[slot=icon]:last:[&:not(:nth-child(2))]:*:size-4',
51 |     // Avatar
52 |     'data-[slot=avatar]:*:-m-0.5 data-[slot=avatar]:*:size-7 data-[slot=avatar]:*:[--avatar-radius:theme(borderRadius.DEFAULT)] data-[slot=avatar]:*:[--ring-opacity:10%] sm:data-[slot=avatar]:*:size-6',
53 |     // Hover
54 |     'data-[hover]:bg-zinc-950/5 data-[slot=icon]:*:data-[hover]:fill-zinc-950',
55 |     // Active
56 |     'data-[active]:bg-zinc-950/5 data-[slot=icon]:*:data-[active]:fill-zinc-950',
57 |     // Dark mode
58 |     'dark:text-white dark:data-[slot=icon]:*:fill-zinc-400',
59 |     'dark:data-[hover]:bg-white/5 dark:data-[slot=icon]:*:data-[hover]:fill-white',
60 |     'dark:data-[active]:bg-white/5 dark:data-[slot=icon]:*:data-[active]:fill-white'
61 |   )
62 | 
63 |   return (
64 |     <span className={clsx(className, 'relative')}>
65 |       {current && (
66 |         <motion.span
67 |           layoutId="current-indicator"
68 |           className="absolute inset-x-2 -bottom-2.5 h-0.5 rounded-full bg-zinc-950 dark:bg-white"
69 |         />
70 |       )}
71 |       {'href' in props ? (
72 |         <Link
73 |           {...props}
74 |           className={classes}
75 |           data-current={current ? 'true' : undefined}
76 |           ref={ref as React.ForwardedRef<HTMLAnchorElement>}
77 |         >
78 |           <TouchTarget>{children}</TouchTarget>
79 |         </Link>
80 |       ) : (
81 |         <Headless.Button
82 |           {...props}
83 |           className={clsx('cursor-default', classes)}
84 |           data-current={current ? 'true' : undefined}
85 |           ref={ref}
86 |         >
87 |           <TouchTarget>{children}</TouchTarget>
88 |         </Headless.Button>
89 |       )}
90 |     </span>
91 |   )
92 | })
93 | 
94 | export function NavbarLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) {
95 |   return <span {...props} className={clsx(className, 'truncate')} />
96 | }
97 | 


--------------------------------------------------------------------------------
/src/app/components/pagination.tsx:
--------------------------------------------------------------------------------
  1 | import clsx from 'clsx'
  2 | import type React from 'react'
  3 | import { Button } from './button'
  4 | 
  5 | export function Pagination({
  6 |   'aria-label': ariaLabel = 'Page navigation',
  7 |   className,
  8 |   ...props
  9 | }: React.ComponentPropsWithoutRef<'nav'>) {
 10 |   return <nav aria-label={ariaLabel} {...props} className={clsx(className, 'flex gap-x-2')} />
 11 | }
 12 | 
 13 | export function PaginationPrevious({
 14 |   href = null,
 15 |   className,
 16 |   children = 'Previous',
 17 | }: React.PropsWithChildren<{ href?: string | null; className?: string }>) {
 18 |   return (
 19 |     <span className={clsx(className, 'grow basis-0')}>
 20 |       <Button {...(href === null ? { disabled: true } : { href })} plain aria-label="Previous page">
 21 |         <svg className="stroke-current" data-slot="icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
 22 |           <path
 23 |             d="M2.75 8H13.25M2.75 8L5.25 5.5M2.75 8L5.25 10.5"
 24 |             strokeWidth={1.5}
 25 |             strokeLinecap="round"
 26 |             strokeLinejoin="round"
 27 |           />
 28 |         </svg>
 29 |         {children}
 30 |       </Button>
 31 |     </span>
 32 |   )
 33 | }
 34 | 
 35 | export function PaginationNext({
 36 |   href = null,
 37 |   className,
 38 |   children = 'Next',
 39 | }: React.PropsWithChildren<{ href?: string | null; className?: string }>) {
 40 |   return (
 41 |     <span className={clsx(className, 'flex grow basis-0 justify-end')}>
 42 |       <Button {...(href === null ? { disabled: true } : { href })} plain aria-label="Next page">
 43 |         {children}
 44 |         <svg className="stroke-current" data-slot="icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
 45 |           <path
 46 |             d="M13.25 8L2.75 8M13.25 8L10.75 10.5M13.25 8L10.75 5.5"
 47 |             strokeWidth={1.5}
 48 |             strokeLinecap="round"
 49 |             strokeLinejoin="round"
 50 |           />
 51 |         </svg>
 52 |       </Button>
 53 |     </span>
 54 |   )
 55 | }
 56 | 
 57 | export function PaginationList({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) {
 58 |   return <span {...props} className={clsx(className, 'hidden items-baseline gap-x-2 sm:flex')} />
 59 | }
 60 | 
 61 | export function PaginationPage({
 62 |   href,
 63 |   className,
 64 |   current = false,
 65 |   children,
 66 | }: React.PropsWithChildren<{ href: string; className?: string; current?: boolean }>) {
 67 |   return (
 68 |     <Button
 69 |       href={href}
 70 |       plain
 71 |       aria-label={`Page ${children}`}
 72 |       aria-current={current ? 'page' : undefined}
 73 |       className={clsx(
 74 |         className,
 75 |         'min-w-[2.25rem] before:absolute before:-inset-px before:rounded-lg',
 76 |         current && 'before:bg-zinc-950/5 dark:before:bg-white/10'
 77 |       )}
 78 |     >
 79 |       <span className="-mx-0.5">{children}</span>
 80 |     </Button>
 81 |   )
 82 | }
 83 | 
 84 | export function PaginationGap({
 85 |   className,
 86 |   children = <>&hellip;</>,
 87 |   ...props
 88 | }: React.ComponentPropsWithoutRef<'span'>) {
 89 |   return (
 90 |     <span
 91 |       aria-hidden="true"
 92 |       {...props}
 93 |       className={clsx(
 94 |         className,
 95 |         'w-[2.25rem] select-none text-center text-sm/6 font-semibold text-zinc-950 dark:text-white'
 96 |       )}
 97 |     >
 98 |       {children}
 99 |     </span>
100 |   )
101 | }
102 | 


--------------------------------------------------------------------------------
/src/app/components/radio.tsx:
--------------------------------------------------------------------------------
  1 | import * as Headless from '@headlessui/react'
  2 | import clsx from 'clsx'
  3 | 
  4 | export function RadioGroup({
  5 |   className,
  6 |   ...props
  7 | }: { className?: string } & Omit<Headless.RadioGroupProps, 'as' | 'className'>) {
  8 |   return (
  9 |     <Headless.RadioGroup
 10 |       data-slot="control"
 11 |       {...props}
 12 |       className={clsx(
 13 |         className,
 14 |         // Basic groups
 15 |         'space-y-3 [&_[data-slot=label]]:font-normal',
 16 |         // With descriptions
 17 |         'has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
 18 |       )}
 19 |     />
 20 |   )
 21 | }
 22 | 
 23 | export function RadioField({
 24 |   className,
 25 |   ...props
 26 | }: { className?: string } & Omit<Headless.FieldProps, 'as' | 'className'>) {
 27 |   return (
 28 |     <Headless.Field
 29 |       data-slot="field"
 30 |       {...props}
 31 |       className={clsx(
 32 |         className,
 33 |         // Base layout
 34 |         'grid grid-cols-[1.125rem_1fr] items-center gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]',
 35 |         // Control layout
 36 |         '[&>[data-slot=control]]:col-start-1 [&>[data-slot=control]]:row-start-1 [&>[data-slot=control]]:justify-self-center',
 37 |         // Label layout
 38 |         '[&>[data-slot=label]]:col-start-2 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start',
 39 |         // Description layout
 40 |         '[&>[data-slot=description]]:col-start-2 [&>[data-slot=description]]:row-start-2',
 41 |         // With description
 42 |         '[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
 43 |       )}
 44 |     />
 45 |   )
 46 | }
 47 | 
 48 | const base = [
 49 |   // Basic layout
 50 |   'relative isolate flex size-[1.1875rem] shrink-0 rounded-full sm:size-[1.0625rem]',
 51 |   // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
 52 |   'before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-white before:shadow',
 53 |   // Background color when checked
 54 |   'before:group-data-[checked]:bg-[--radio-checked-bg]',
 55 |   // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
 56 |   'dark:before:hidden',
 57 |   // Background color applied to control in dark mode
 58 |   'dark:bg-white/5 dark:group-data-[checked]:bg-[--radio-checked-bg]',
 59 |   // Border
 60 |   'border border-zinc-950/15 group-data-[checked]:border-transparent group-data-[checked]:group-data-[hover]:border-transparent group-data-[hover]:border-zinc-950/30 group-data-[checked]:bg-[--radio-checked-border]',
 61 |   'dark:border-white/15 dark:group-data-[checked]:border-white/5 dark:group-data-[checked]:group-data-[hover]:border-white/5 dark:group-data-[hover]:border-white/30',
 62 |   // Inner highlight shadow
 63 |   'after:absolute after:inset-0 after:rounded-full after:shadow-[inset_0_1px_theme(colors.white/15%)]',
 64 |   'dark:after:-inset-px dark:after:hidden dark:after:rounded-full dark:group-data-[checked]:after:block',
 65 |   // Indicator color (light mode)
 66 |   '[--radio-indicator:transparent] group-data-[checked]:[--radio-indicator:var(--radio-checked-indicator)] group-data-[checked]:group-data-[hover]:[--radio-indicator:var(--radio-checked-indicator)] group-data-[hover]:[--radio-indicator:theme(colors.zinc.900/10%)]',
 67 |   // Indicator color (dark mode)
 68 |   'dark:group-data-[checked]:group-data-[hover]:[--radio-indicator:var(--radio-checked-indicator)] dark:group-data-[hover]:[--radio-indicator:theme(colors.zinc.700)]',
 69 |   // Focus ring
 70 |   'group-data-[focus]:outline group-data-[focus]:outline-2 group-data-[focus]:outline-offset-2 group-data-[focus]:outline-blue-500',
 71 |   // Disabled state
 72 |   'group-data-[disabled]:opacity-50',
 73 |   'group-data-[disabled]:border-zinc-950/25 group-data-[disabled]:bg-zinc-950/5 group-data-[disabled]:[--radio-checked-indicator:theme(colors.zinc.950/50%)] group-data-[disabled]:before:bg-transparent',
 74 |   'dark:group-data-[disabled]:border-white/20 dark:group-data-[disabled]:bg-white/[2.5%] dark:group-data-[disabled]:[--radio-checked-indicator:theme(colors.white/50%)] dark:group-data-[disabled]:group-data-[checked]:after:hidden',
 75 | ]
 76 | 
 77 | const colors = {
 78 |   'dark/zinc': [
 79 |     '[--radio-checked-bg:theme(colors.zinc.900)] [--radio-checked-border:theme(colors.zinc.950/90%)] [--radio-checked-indicator:theme(colors.white)]',
 80 |     'dark:[--radio-checked-bg:theme(colors.zinc.600)]',
 81 |   ],
 82 |   'dark/white': [
 83 |     '[--radio-checked-bg:theme(colors.zinc.900)] [--radio-checked-border:theme(colors.zinc.950/90%)] [--radio-checked-indicator:theme(colors.white)]',
 84 |     'dark:[--radio-checked-bg:theme(colors.white)] dark:[--radio-checked-border:theme(colors.zinc.950/15%)] dark:[--radio-checked-indicator:theme(colors.zinc.900)]',
 85 |   ],
 86 |   white:
 87 |     '[--radio-checked-bg:theme(colors.white)] [--radio-checked-border:theme(colors.zinc.950/15%)] [--radio-checked-indicator:theme(colors.zinc.900)]',
 88 |   dark: '[--radio-checked-bg:theme(colors.zinc.900)] [--radio-checked-border:theme(colors.zinc.950/90%)] [--radio-checked-indicator:theme(colors.white)]',
 89 |   zinc: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.zinc.600)] [--radio-checked-border:theme(colors.zinc.700/90%)]',
 90 |   red: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.red.600)] [--radio-checked-border:theme(colors.red.700/90%)]',
 91 |   orange:
 92 |     '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.orange.500)] [--radio-checked-border:theme(colors.orange.600/90%)]',
 93 |   amber:
 94 |     '[--radio-checked-bg:theme(colors.amber.400)] [--radio-checked-border:theme(colors.amber.500/80%)] [--radio-checked-indicator:theme(colors.amber.950)]',
 95 |   yellow:
 96 |     '[--radio-checked-bg:theme(colors.yellow.300)] [--radio-checked-border:theme(colors.yellow.400/80%)] [--radio-checked-indicator:theme(colors.yellow.950)]',
 97 |   lime: '[--radio-checked-bg:theme(colors.lime.300)] [--radio-checked-border:theme(colors.lime.400/80%)] [--radio-checked-indicator:theme(colors.lime.950)]',
 98 |   green:
 99 |     '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.green.600)] [--radio-checked-border:theme(colors.green.700/90%)]',
100 |   emerald:
101 |     '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.emerald.600)] [--radio-checked-border:theme(colors.emerald.700/90%)]',
102 |   teal: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.teal.600)] [--radio-checked-border:theme(colors.teal.700/90%)]',
103 |   cyan: '[--radio-checked-bg:theme(colors.cyan.300)] [--radio-checked-border:theme(colors.cyan.400/80%)] [--radio-checked-indicator:theme(colors.cyan.950)]',
104 |   sky: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.sky.500)] [--radio-checked-border:theme(colors.sky.600/80%)]',
105 |   blue: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.blue.600)] [--radio-checked-border:theme(colors.blue.700/90%)]',
106 |   indigo:
107 |     '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.indigo.500)] [--radio-checked-border:theme(colors.indigo.600/90%)]',
108 |   violet:
109 |     '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.violet.500)] [--radio-checked-border:theme(colors.violet.600/90%)]',
110 |   purple:
111 |     '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.purple.500)] [--radio-checked-border:theme(colors.purple.600/90%)]',
112 |   fuchsia:
113 |     '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.fuchsia.500)] [--radio-checked-border:theme(colors.fuchsia.600/90%)]',
114 |   pink: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.pink.500)] [--radio-checked-border:theme(colors.pink.600/90%)]',
115 |   rose: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.rose.500)] [--radio-checked-border:theme(colors.rose.600/90%)]',
116 | }
117 | 
118 | type Color = keyof typeof colors
119 | 
120 | export function Radio({
121 |   color = 'dark/zinc',
122 |   className,
123 |   ...props
124 | }: { color?: Color; className?: string } & Omit<Headless.RadioProps, 'as' | 'className' | 'children'>) {
125 |   return (
126 |     <Headless.Radio data-slot="control" {...props} className={clsx(className, 'group inline-flex focus:outline-none')}>
127 |       <span className={clsx([base, colors[color]])}>
128 |         <span
129 |           className={clsx(
130 |             'size-full rounded-full border-[4.5px] border-transparent bg-[--radio-indicator] bg-clip-padding',
131 |             // Forced colors mode
132 |             'forced-colors:border-[Canvas] forced-colors:group-data-[checked]:border-[Highlight]'
133 |           )}
134 |         />
135 |       </span>
136 |     </Headless.Radio>
137 |   )
138 | }
139 | 


--------------------------------------------------------------------------------
/src/app/components/select.tsx:
--------------------------------------------------------------------------------
 1 | import * as Headless from '@headlessui/react'
 2 | import clsx from 'clsx'
 3 | import React, { forwardRef } from 'react'
 4 | 
 5 | export const Select = forwardRef(function Select(
 6 |   { className, multiple, ...props }: { className?: string } & Omit<Headless.SelectProps, 'as' | 'className'>,
 7 |   ref: React.ForwardedRef<HTMLSelectElement>
 8 | ) {
 9 |   return (
10 |     <span
11 |       data-slot="control"
12 |       className={clsx([
13 |         className,
14 |         // Basic layout
15 |         'group relative block w-full',
16 |         // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
17 |         'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
18 |         // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
19 |         'dark:before:hidden',
20 |         // Focus ring
21 |         'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent after:has-[[data-focus]]:ring-2 after:has-[[data-focus]]:ring-blue-500',
22 |         // Disabled state
23 |         'has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none',
24 |       ])}
25 |     >
26 |       <Headless.Select
27 |         ref={ref}
28 |         multiple={multiple}
29 |         {...props}
30 |         className={clsx([
31 |           // Basic layout
32 |           'relative block w-full appearance-none rounded-lg py-[calc(theme(spacing[2.5])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]',
33 |           // Horizontal padding
34 |           multiple
35 |             ? 'px-[calc(theme(spacing[3.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)]'
36 |             : 'pl-[calc(theme(spacing[3.5])-1px)] pr-[calc(theme(spacing.10)-1px)] sm:pl-[calc(theme(spacing.3)-1px)] sm:pr-[calc(theme(spacing.9)-1px)]',
37 |           // Options (multi-select)
38 |           '[&_optgroup]:font-semibold',
39 |           // Typography
40 |           'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white dark:*:text-white',
41 |           // Border
42 |           'border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20',
43 |           // Background color
44 |           'bg-transparent dark:bg-white/5 dark:*:bg-zinc-800',
45 |           // Hide default focus styles
46 |           'focus:outline-none',
47 |           // Invalid state
48 |           'data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-600 data-[invalid]:data-[hover]:dark:border-red-600',
49 |           // Disabled state
50 |           'data-[disabled]:border-zinc-950/20 data-[disabled]:opacity-100 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]',
51 |         ])}
52 |       />
53 |       {!multiple && (
54 |         <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
55 |           <svg
56 |             className="size-5 stroke-zinc-500 group-has-[[data-disabled]]:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]"
57 |             viewBox="0 0 16 16"
58 |             aria-hidden="true"
59 |             fill="none"
60 |           >
61 |             <path d="M5.75 10.75L8 13L10.25 10.75" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
62 |             <path d="M10.25 5.25L8 3L5.75 5.25" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
63 |           </svg>
64 |         </span>
65 |       )}
66 |     </span>
67 |   )
68 | })
69 | 


--------------------------------------------------------------------------------
/src/app/components/sidebar-layout.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import * as Headless from '@headlessui/react'
 4 | import React, { useState } from 'react'
 5 | import { NavbarItem } from './navbar'
 6 | 
 7 | function OpenMenuIcon() {
 8 |   return (
 9 |     <svg data-slot="icon" viewBox="0 0 20 20" aria-hidden="true">
10 |       <path d="M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z" />
11 |     </svg>
12 |   )
13 | }
14 | 
15 | function CloseMenuIcon() {
16 |   return (
17 |     <svg data-slot="icon" viewBox="0 0 20 20" aria-hidden="true">
18 |       <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
19 |     </svg>
20 |   )
21 | }
22 | 
23 | function MobileSidebar({ open, close, children }: React.PropsWithChildren<{ open: boolean; close: () => void }>) {
24 |   return (
25 |     <Headless.Dialog open={open} onClose={close} className="lg:hidden">
26 |       <Headless.DialogBackdrop
27 |         transition
28 |         className="fixed inset-0 bg-black/30 transition data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
29 |       />
30 |       <Headless.DialogPanel
31 |         transition
32 |         className="fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-[closed]:-translate-x-full"
33 |       >
34 |         <div className="flex h-full flex-col rounded-lg bg-white shadow-sm ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10">
35 |           <div className="-mb-3 px-4 pt-3">
36 |             <Headless.CloseButton as={NavbarItem} aria-label="Close navigation">
37 |               <CloseMenuIcon />
38 |             </Headless.CloseButton>
39 |           </div>
40 |           {children}
41 |         </div>
42 |       </Headless.DialogPanel>
43 |     </Headless.Dialog>
44 |   )
45 | }
46 | 
47 | export function SidebarLayout({
48 |   navbar,
49 |   sidebar,
50 |   children,
51 | }: React.PropsWithChildren<{ navbar: React.ReactNode; sidebar: React.ReactNode }>) {
52 |   let [showSidebar, setShowSidebar] = useState(false)
53 | 
54 |   return (
55 |     <div className="relative isolate flex min-h-svh w-full bg-white max-lg:flex-col lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">
56 |       {/* Sidebar on desktop */}
57 |       <div className="fixed inset-y-0 left-0 w-64 max-lg:hidden">{sidebar}</div>
58 | 
59 |       {/* Sidebar on mobile */}
60 |       <MobileSidebar open={showSidebar} close={() => setShowSidebar(false)}>
61 |         {sidebar}
62 |       </MobileSidebar>
63 | 
64 |       {/* Navbar on mobile */}
65 |       <header className="flex items-center px-4 lg:hidden">
66 |         <div className="py-2.5">
67 |           <NavbarItem onClick={() => setShowSidebar(true)} aria-label="Open navigation">
68 |             <OpenMenuIcon />
69 |           </NavbarItem>
70 |         </div>
71 |         <div className="min-w-0 flex-1">{navbar}</div>
72 |       </header>
73 | 
74 |       {/* Content */}
75 |       <main className="flex flex-1 flex-col pb-2 lg:min-w-0 lg:pl-64 lg:pr-2 lg:pt-2">
76 |         <div className="grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-sm lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10">
77 |           <div className="mx-auto max-w-6xl">{children}</div>
78 |         </div>
79 |       </main>
80 |     </div>
81 |   )
82 | }
83 | 


--------------------------------------------------------------------------------
/src/app/components/sidebar.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import * as Headless from '@headlessui/react'
  4 | import clsx from 'clsx'
  5 | import { LayoutGroup, motion } from 'framer-motion'
  6 | import React, { Fragment, forwardRef, useId } from 'react'
  7 | import { TouchTarget } from './button'
  8 | import { Link } from './link'
  9 | 
 10 | export function Sidebar({ className, ...props }: React.ComponentPropsWithoutRef<'nav'>) {
 11 |   return <nav {...props} className={clsx(className, 'flex h-full min-h-0 flex-col')} />
 12 | }
 13 | 
 14 | export function SidebarHeader({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
 15 |   return (
 16 |     <div
 17 |       {...props}
 18 |       className={clsx(
 19 |         className,
 20 |         'flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5'
 21 |       )}
 22 |     />
 23 |   )
 24 | }
 25 | 
 26 | export function SidebarBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
 27 |   return (
 28 |     <div
 29 |       {...props}
 30 |       className={clsx(
 31 |         className,
 32 |         'flex flex-1 flex-col overflow-y-auto p-4 [&>[data-slot=section]+[data-slot=section]]:mt-8'
 33 |       )}
 34 |     />
 35 |   )
 36 | }
 37 | 
 38 | export function SidebarFooter({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
 39 |   return (
 40 |     <div
 41 |       {...props}
 42 |       className={clsx(
 43 |         className,
 44 |         'flex flex-col border-t border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5'
 45 |       )}
 46 |     />
 47 |   )
 48 | }
 49 | 
 50 | export function SidebarSection({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
 51 |   let id = useId()
 52 | 
 53 |   return (
 54 |     <LayoutGroup id={id}>
 55 |       <div {...props} data-slot="section" className={clsx(className, 'flex flex-col gap-0.5')} />
 56 |     </LayoutGroup>
 57 |   )
 58 | }
 59 | 
 60 | export function SidebarDivider({ className, ...props }: React.ComponentPropsWithoutRef<'hr'>) {
 61 |   return <hr {...props} className={clsx(className, 'my-4 border-t border-zinc-950/5 lg:-mx-4 dark:border-white/5')} />
 62 | }
 63 | 
 64 | export function SidebarSpacer({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
 65 |   return <div aria-hidden="true" {...props} className={clsx(className, 'mt-8 flex-1')} />
 66 | }
 67 | 
 68 | export function SidebarHeading({ className, ...props }: React.ComponentPropsWithoutRef<'h3'>) {
 69 |   return (
 70 |     <h3 {...props} className={clsx(className, 'mb-1 px-2 text-xs/6 font-medium text-zinc-500 dark:text-zinc-400')} />
 71 |   )
 72 | }
 73 | 
 74 | export const SidebarItem = forwardRef(function SidebarItem(
 75 |   {
 76 |     current,
 77 |     className,
 78 |     children,
 79 |     ...props
 80 |   }: { current?: boolean; className?: string; children: React.ReactNode } & (
 81 |     | Omit<Headless.ButtonProps, 'as' | 'className'>
 82 |     | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'className'>
 83 |   ),
 84 |   ref: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement>
 85 | ) {
 86 |   let classes = clsx(
 87 |     // Base
 88 |     'flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5',
 89 |     // Leading icon/icon-only
 90 |     'data-[slot=icon]:*:size-6 data-[slot=icon]:*:shrink-0 data-[slot=icon]:*:fill-zinc-500 sm:data-[slot=icon]:*:size-5',
 91 |     // Trailing icon (down chevron or similar)
 92 |     'data-[slot=icon]:last:*:ml-auto data-[slot=icon]:last:*:size-5 sm:data-[slot=icon]:last:*:size-4',
 93 |     // Avatar
 94 |     'data-[slot=avatar]:*:-m-0.5 data-[slot=avatar]:*:size-7 data-[slot=avatar]:*:[--ring-opacity:10%] sm:data-[slot=avatar]:*:size-6',
 95 |     // Hover
 96 |     'data-[hover]:bg-zinc-950/5 data-[slot=icon]:*:data-[hover]:fill-zinc-950',
 97 |     // Active
 98 |     'data-[active]:bg-zinc-950/5 data-[slot=icon]:*:data-[active]:fill-zinc-950',
 99 |     // Current
100 |     'data-[slot=icon]:*:data-[current]:fill-zinc-950',
101 |     // Dark mode
102 |     'dark:text-white dark:data-[slot=icon]:*:fill-zinc-400',
103 |     'dark:data-[hover]:bg-white/5 dark:data-[slot=icon]:*:data-[hover]:fill-white',
104 |     'dark:data-[active]:bg-white/5 dark:data-[slot=icon]:*:data-[active]:fill-white',
105 |     'dark:data-[slot=icon]:*:data-[current]:fill-white'
106 |   )
107 | 
108 |   return (
109 |     <span className={clsx(className, 'relative')}>
110 |       {current && (
111 |         <motion.span
112 |           layoutId="current-indicator"
113 |           className="absolute inset-y-2 -left-4 w-0.5 rounded-full bg-zinc-950 dark:bg-white"
114 |         />
115 |       )}
116 |       {'href' in props ? (
117 |         <Headless.CloseButton as={Fragment} ref={ref}>
118 |           <Link className={classes} {...props} data-current={current ? 'true' : undefined}>
119 |             <TouchTarget>{children}</TouchTarget>
120 |           </Link>
121 |         </Headless.CloseButton>
122 |       ) : (
123 |         <Headless.Button
124 |           {...props}
125 |           className={clsx('cursor-default', classes)}
126 |           data-current={current ? 'true' : undefined}
127 |           ref={ref}
128 |         >
129 |           <TouchTarget>{children}</TouchTarget>
130 |         </Headless.Button>
131 |       )}
132 |     </span>
133 |   )
134 | })
135 | 
136 | export function SidebarLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) {
137 |   return <span {...props} className={clsx(className, 'truncate')} />
138 | }
139 | 


--------------------------------------------------------------------------------
/src/app/components/stacked-layout.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import * as Headless from '@headlessui/react'
 4 | import React, { useState } from 'react'
 5 | import { NavbarItem } from './navbar'
 6 | 
 7 | function OpenMenuIcon() {
 8 |   return (
 9 |     <svg data-slot="icon" viewBox="0 0 20 20" aria-hidden="true">
10 |       <path d="M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z" />
11 |     </svg>
12 |   )
13 | }
14 | 
15 | function CloseMenuIcon() {
16 |   return (
17 |     <svg data-slot="icon" viewBox="0 0 20 20" aria-hidden="true">
18 |       <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
19 |     </svg>
20 |   )
21 | }
22 | 
23 | function MobileSidebar({ open, close, children }: React.PropsWithChildren<{ open: boolean; close: () => void }>) {
24 |   return (
25 |     <Headless.Dialog open={open} onClose={close} className="lg:hidden">
26 |       <Headless.DialogBackdrop
27 |         transition
28 |         className="fixed inset-0 bg-black/30 transition data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
29 |       />
30 |       <Headless.DialogPanel
31 |         transition
32 |         className="fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-[closed]:-translate-x-full"
33 |       >
34 |         <div className="flex h-full flex-col rounded-lg bg-white shadow-sm ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10">
35 |           <div className="-mb-3 px-4 pt-3">
36 |             <Headless.CloseButton as={NavbarItem} aria-label="Close navigation">
37 |               <CloseMenuIcon />
38 |             </Headless.CloseButton>
39 |           </div>
40 |           {children}
41 |         </div>
42 |       </Headless.DialogPanel>
43 |     </Headless.Dialog>
44 |   )
45 | }
46 | 
47 | export function StackedLayout({
48 |   navbar,
49 |   sidebar,
50 |   children,
51 | }: React.PropsWithChildren<{ navbar: React.ReactNode; sidebar: React.ReactNode }>) {
52 |   let [showSidebar, setShowSidebar] = useState(false)
53 | 
54 |   return (
55 |     <div className="relative isolate flex min-h-svh w-full flex-col bg-white lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">
56 |       {/* Sidebar on mobile */}
57 |       <MobileSidebar open={showSidebar} close={() => setShowSidebar(false)}>
58 |         {sidebar}
59 |       </MobileSidebar>
60 | 
61 |       {/* Navbar */}
62 |       <header className="flex items-center px-4">
63 |         <div className="py-2.5 lg:hidden">
64 |           <NavbarItem onClick={() => setShowSidebar(true)} aria-label="Open navigation">
65 |             <OpenMenuIcon />
66 |           </NavbarItem>
67 |         </div>
68 |         <div className="min-w-0 flex-1">{navbar}</div>
69 |       </header>
70 | 
71 |       {/* Content */}
72 |       <main className="flex flex-1 flex-col pb-2 lg:px-2">
73 |         <div className="grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-sm lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10">
74 |           <div className="mx-auto max-w-6xl">{children}</div>
75 |         </div>
76 |       </main>
77 |     </div>
78 |   )
79 | }
80 | 


--------------------------------------------------------------------------------
/src/app/components/switch.tsx:
--------------------------------------------------------------------------------
  1 | import * as Headless from '@headlessui/react'
  2 | import clsx from 'clsx'
  3 | import type React from 'react'
  4 | 
  5 | export function SwitchGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
  6 |   return (
  7 |     <div
  8 |       data-slot="control"
  9 |       {...props}
 10 |       className={clsx(
 11 |         className,
 12 |         // Basic groups
 13 |         'space-y-3 [&_[data-slot=label]]:font-normal',
 14 |         // With descriptions
 15 |         'has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
 16 |       )}
 17 |     />
 18 |   )
 19 | }
 20 | 
 21 | export function SwitchField({
 22 |   className,
 23 |   ...props
 24 | }: { className?: string } & Omit<Headless.FieldProps, 'as' | 'className'>) {
 25 |   return (
 26 |     <Headless.Field
 27 |       data-slot="field"
 28 |       {...props}
 29 |       className={clsx(
 30 |         className,
 31 |         // Base layout
 32 |         'grid grid-cols-[1fr_auto] items-center gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]',
 33 |         // Control layout
 34 |         '[&>[data-slot=control]]:col-start-2 [&>[data-slot=control]]:self-center',
 35 |         // Label layout
 36 |         '[&>[data-slot=label]]:col-start-1 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start',
 37 |         // Description layout
 38 |         '[&>[data-slot=description]]:col-start-1 [&>[data-slot=description]]:row-start-2',
 39 |         // With description
 40 |         '[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
 41 |       )}
 42 |     />
 43 |   )
 44 | }
 45 | 
 46 | const colors = {
 47 |   'dark/zinc': [
 48 |     '[--switch-bg-ring:theme(colors.zinc.950/90%)] [--switch-bg:theme(colors.zinc.900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:theme(colors.white/25%)]',
 49 |     '[--switch-ring:theme(colors.zinc.950/90%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white] dark:[--switch-ring:theme(colors.zinc.700/90%)]',
 50 |   ],
 51 |   'dark/white': [
 52 |     '[--switch-bg-ring:theme(colors.zinc.950/90%)] [--switch-bg:theme(colors.zinc.900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:theme(colors.white)]',
 53 |     '[--switch-ring:theme(colors.zinc.950/90%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white] dark:[--switch-ring:transparent] dark:[--switch:theme(colors.zinc.900)]',
 54 |   ],
 55 |   dark: [
 56 |     '[--switch-bg-ring:theme(colors.zinc.950/90%)] [--switch-bg:theme(colors.zinc.900)] dark:[--switch-bg-ring:theme(colors.white/15%)]',
 57 |     '[--switch-ring:theme(colors.zinc.950/90%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white]',
 58 |   ],
 59 |   zinc: [
 60 |     '[--switch-bg-ring:theme(colors.zinc.700/90%)] [--switch-bg:theme(colors.zinc.600)] dark:[--switch-bg-ring:transparent]',
 61 |     '[--switch-shadow:theme(colors.black/10%)] [--switch:white] [--switch-ring:theme(colors.zinc.700/90%)]',
 62 |   ],
 63 |   white: [
 64 |     '[--switch-bg-ring:theme(colors.black/15%)] [--switch-bg:white] dark:[--switch-bg-ring:transparent]',
 65 |     '[--switch-shadow:theme(colors.black/10%)] [--switch-ring:transparent] [--switch:theme(colors.zinc.950)]',
 66 |   ],
 67 |   red: [
 68 |     '[--switch-bg-ring:theme(colors.red.700/90%)] [--switch-bg:theme(colors.red.600)] dark:[--switch-bg-ring:transparent]',
 69 |     '[--switch:white] [--switch-ring:theme(colors.red.700/90%)] [--switch-shadow:theme(colors.red.900/20%)]',
 70 |   ],
 71 |   orange: [
 72 |     '[--switch-bg-ring:theme(colors.orange.600/90%)] [--switch-bg:theme(colors.orange.500)] dark:[--switch-bg-ring:transparent]',
 73 |     '[--switch:white] [--switch-ring:theme(colors.orange.600/90%)] [--switch-shadow:theme(colors.orange.900/20%)]',
 74 |   ],
 75 |   amber: [
 76 |     '[--switch-bg-ring:theme(colors.amber.500/80%)] [--switch-bg:theme(colors.amber.400)] dark:[--switch-bg-ring:transparent]',
 77 |     '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.amber.950)]',
 78 |   ],
 79 |   yellow: [
 80 |     '[--switch-bg-ring:theme(colors.yellow.400/80%)] [--switch-bg:theme(colors.yellow.300)] dark:[--switch-bg-ring:transparent]',
 81 |     '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.yellow.950)]',
 82 |   ],
 83 |   lime: [
 84 |     '[--switch-bg-ring:theme(colors.lime.400/80%)] [--switch-bg:theme(colors.lime.300)] dark:[--switch-bg-ring:transparent]',
 85 |     '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.lime.950)]',
 86 |   ],
 87 |   green: [
 88 |     '[--switch-bg-ring:theme(colors.green.700/90%)] [--switch-bg:theme(colors.green.600)] dark:[--switch-bg-ring:transparent]',
 89 |     '[--switch:white] [--switch-ring:theme(colors.green.700/90%)] [--switch-shadow:theme(colors.green.900/20%)]',
 90 |   ],
 91 |   emerald: [
 92 |     '[--switch-bg-ring:theme(colors.emerald.600/90%)] [--switch-bg:theme(colors.emerald.500)] dark:[--switch-bg-ring:transparent]',
 93 |     '[--switch:white] [--switch-ring:theme(colors.emerald.600/90%)] [--switch-shadow:theme(colors.emerald.900/20%)]',
 94 |   ],
 95 |   teal: [
 96 |     '[--switch-bg-ring:theme(colors.teal.700/90%)] [--switch-bg:theme(colors.teal.600)] dark:[--switch-bg-ring:transparent]',
 97 |     '[--switch:white] [--switch-ring:theme(colors.teal.700/90%)] [--switch-shadow:theme(colors.teal.900/20%)]',
 98 |   ],
 99 |   cyan: [
100 |     '[--switch-bg-ring:theme(colors.cyan.400/80%)] [--switch-bg:theme(colors.cyan.300)] dark:[--switch-bg-ring:transparent]',
101 |     '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.cyan.950)]',
102 |   ],
103 |   sky: [
104 |     '[--switch-bg-ring:theme(colors.sky.600/80%)] [--switch-bg:theme(colors.sky.500)] dark:[--switch-bg-ring:transparent]',
105 |     '[--switch:white] [--switch-ring:theme(colors.sky.600/80%)] [--switch-shadow:theme(colors.sky.900/20%)]',
106 |   ],
107 |   blue: [
108 |     '[--switch-bg-ring:theme(colors.blue.700/90%)] [--switch-bg:theme(colors.blue.600)] dark:[--switch-bg-ring:transparent]',
109 |     '[--switch:white] [--switch-ring:theme(colors.blue.700/90%)] [--switch-shadow:theme(colors.blue.900/20%)]',
110 |   ],
111 |   indigo: [
112 |     '[--switch-bg-ring:theme(colors.indigo.600/90%)] [--switch-bg:theme(colors.indigo.500)] dark:[--switch-bg-ring:transparent]',
113 |     '[--switch:white] [--switch-ring:theme(colors.indigo.600/90%)] [--switch-shadow:theme(colors.indigo.900/20%)]',
114 |   ],
115 |   violet: [
116 |     '[--switch-bg-ring:theme(colors.violet.600/90%)] [--switch-bg:theme(colors.violet.500)] dark:[--switch-bg-ring:transparent]',
117 |     '[--switch:white] [--switch-ring:theme(colors.violet.600/90%)] [--switch-shadow:theme(colors.violet.900/20%)]',
118 |   ],
119 |   purple: [
120 |     '[--switch-bg-ring:theme(colors.purple.600/90%)] [--switch-bg:theme(colors.purple.500)] dark:[--switch-bg-ring:transparent]',
121 |     '[--switch:white] [--switch-ring:theme(colors.purple.600/90%)] [--switch-shadow:theme(colors.purple.900/20%)]',
122 |   ],
123 |   fuchsia: [
124 |     '[--switch-bg-ring:theme(colors.fuchsia.600/90%)] [--switch-bg:theme(colors.fuchsia.500)] dark:[--switch-bg-ring:transparent]',
125 |     '[--switch:white] [--switch-ring:theme(colors.fuchsia.600/90%)] [--switch-shadow:theme(colors.fuchsia.900/20%)]',
126 |   ],
127 |   pink: [
128 |     '[--switch-bg-ring:theme(colors.pink.600/90%)] [--switch-bg:theme(colors.pink.500)] dark:[--switch-bg-ring:transparent]',
129 |     '[--switch:white] [--switch-ring:theme(colors.pink.600/90%)] [--switch-shadow:theme(colors.pink.900/20%)]',
130 |   ],
131 |   rose: [
132 |     '[--switch-bg-ring:theme(colors.rose.600/90%)] [--switch-bg:theme(colors.rose.500)] dark:[--switch-bg-ring:transparent]',
133 |     '[--switch:white] [--switch-ring:theme(colors.rose.600/90%)] [--switch-shadow:theme(colors.rose.900/20%)]',
134 |   ],
135 | }
136 | 
137 | type Color = keyof typeof colors
138 | 
139 | export function Switch({
140 |   color = 'dark/zinc',
141 |   className,
142 |   ...props
143 | }: {
144 |   color?: Color
145 |   className?: string
146 | } & Omit<Headless.SwitchProps, 'as' | 'className' | 'children'>) {
147 |   return (
148 |     <Headless.Switch
149 |       data-slot="control"
150 |       {...props}
151 |       className={clsx(
152 |         className,
153 |         // Base styles
154 |         'group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8',
155 |         // Transitions
156 |         'transition duration-0 ease-in-out data-[changing]:duration-200',
157 |         // Outline and background color in forced-colors mode so switch is still visible
158 |         'forced-colors:outline forced-colors:[--switch-bg:Highlight] dark:forced-colors:[--switch-bg:Highlight]',
159 |         // Unchecked
160 |         'bg-zinc-200 ring-1 ring-inset ring-black/5 dark:bg-white/5 dark:ring-white/15',
161 |         // Checked
162 |         'data-[checked]:bg-[--switch-bg] data-[checked]:ring-[--switch-bg-ring] dark:data-[checked]:bg-[--switch-bg] dark:data-[checked]:ring-[--switch-bg-ring]',
163 |         // Focus
164 |         'focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500',
165 |         // Hover
166 |         'data-[hover]:data-[checked]:ring-[--switch-bg-ring] data-[hover]:ring-black/15',
167 |         'dark:data-[hover]:data-[checked]:ring-[--switch-bg-ring] dark:data-[hover]:ring-white/25',
168 |         // Disabled
169 |         'data-[disabled]:bg-zinc-200 data-[disabled]:data-[checked]:bg-zinc-200 data-[disabled]:opacity-50 data-[disabled]:data-[checked]:ring-black/5',
170 |         'dark:data-[disabled]:bg-white/15 dark:data-[disabled]:data-[checked]:bg-white/15 dark:data-[disabled]:data-[checked]:ring-white/15',
171 |         // Color specific styles
172 |         colors[color]
173 |       )}
174 |     >
175 |       <span
176 |         aria-hidden="true"
177 |         className={clsx(
178 |           // Basic layout
179 |           'pointer-events-none relative inline-block size-[1.125rem] rounded-full sm:size-3.5',
180 |           // Transition
181 |           'translate-x-0 transition duration-200 ease-in-out',
182 |           // Invisible border so the switch is still visible in forced-colors mode
183 |           'border border-transparent',
184 |           // Unchecked
185 |           'bg-white shadow ring-1 ring-black/5',
186 |           // Checked
187 |           'group-data-[checked]:bg-[--switch] group-data-[checked]:shadow-[--switch-shadow] group-data-[checked]:ring-[--switch-ring]',
188 |           'group-data-[checked]:translate-x-4 sm:group-data-[checked]:translate-x-3',
189 |           // Disabled
190 |           'group-data-[disabled]:group-data-[checked]:bg-white group-data-[disabled]:group-data-[checked]:shadow group-data-[disabled]:group-data-[checked]:ring-black/5'
191 |         )}
192 |       />
193 |     </Headless.Switch>
194 |   )
195 | }
196 | 


--------------------------------------------------------------------------------
/src/app/components/table.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import clsx from 'clsx'
  4 | import type React from 'react'
  5 | import { createContext, useContext, useState } from 'react'
  6 | import { Link } from './link'
  7 | 
  8 | const TableContext = createContext<{ bleed: boolean; dense: boolean; grid: boolean; striped: boolean }>({
  9 |   bleed: false,
 10 |   dense: false,
 11 |   grid: false,
 12 |   striped: false,
 13 | })
 14 | 
 15 | export function Table({
 16 |   bleed = false,
 17 |   dense = false,
 18 |   grid = false,
 19 |   striped = false,
 20 |   className,
 21 |   children,
 22 |   ...props
 23 | }: { bleed?: boolean; dense?: boolean; grid?: boolean; striped?: boolean } & React.ComponentPropsWithoutRef<'div'>) {
 24 |   return (
 25 |     <TableContext.Provider value={{ bleed, dense, grid, striped } as React.ContextType<typeof TableContext>}>
 26 |       <div className="flow-root">
 27 |         <div {...props} className={clsx(className, '-mx-[--gutter] overflow-x-auto whitespace-nowrap')}>
 28 |           <div className={clsx('inline-block min-w-full align-middle', !bleed && 'sm:px-[--gutter]')}>
 29 |             <table className="min-w-full text-left text-sm/6 text-zinc-950 dark:text-white">{children}</table>
 30 |           </div>
 31 |         </div>
 32 |       </div>
 33 |     </TableContext.Provider>
 34 |   )
 35 | }
 36 | 
 37 | export function TableHead({ className, ...props }: React.ComponentPropsWithoutRef<'thead'>) {
 38 |   return <thead {...props} className={clsx(className, 'text-zinc-500 dark:text-zinc-400')} />
 39 | }
 40 | 
 41 | export function TableBody(props: React.ComponentPropsWithoutRef<'tbody'>) {
 42 |   return <tbody {...props} />
 43 | }
 44 | 
 45 | const TableRowContext = createContext<{ href?: string; target?: string; title?: string }>({
 46 |   href: undefined,
 47 |   target: undefined,
 48 |   title: undefined,
 49 | })
 50 | 
 51 | export function TableRow({
 52 |   href,
 53 |   target,
 54 |   title,
 55 |   className,
 56 |   ...props
 57 | }: { href?: string; target?: string; title?: string } & React.ComponentPropsWithoutRef<'tr'>) {
 58 |   let { striped } = useContext(TableContext)
 59 | 
 60 |   return (
 61 |     <TableRowContext.Provider value={{ href, target, title } as React.ContextType<typeof TableRowContext>}>
 62 |       <tr
 63 |         {...props}
 64 |         className={clsx(
 65 |           className,
 66 |           href &&
 67 |             'has-[[data-row-link][data-focus]]:outline has-[[data-row-link][data-focus]]:outline-2 has-[[data-row-link][data-focus]]:-outline-offset-2 has-[[data-row-link][data-focus]]:outline-blue-500 dark:focus-within:bg-white/[2.5%]',
 68 |           striped && 'even:bg-zinc-950/[2.5%] dark:even:bg-white/[2.5%]',
 69 |           href && striped && 'hover:bg-zinc-950/5 dark:hover:bg-white/5',
 70 |           href && !striped && 'hover:bg-zinc-950/[2.5%] dark:hover:bg-white/[2.5%]'
 71 |         )}
 72 |       />
 73 |     </TableRowContext.Provider>
 74 |   )
 75 | }
 76 | 
 77 | export function TableHeader({ className, ...props }: React.ComponentPropsWithoutRef<'th'>) {
 78 |   let { bleed, grid } = useContext(TableContext)
 79 | 
 80 |   return (
 81 |     <th
 82 |       {...props}
 83 |       className={clsx(
 84 |         className,
 85 |         'border-b border-b-zinc-950/10 px-4 py-2 font-medium first:pl-[var(--gutter,theme(spacing.2))] last:pr-[var(--gutter,theme(spacing.2))] dark:border-b-white/10',
 86 |         grid && 'border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5',
 87 |         !bleed && 'sm:first:pl-1 sm:last:pr-1'
 88 |       )}
 89 |     />
 90 |   )
 91 | }
 92 | 
 93 | export function TableCell({ className, children, ...props }: React.ComponentPropsWithoutRef<'td'>) {
 94 |   let { bleed, dense, grid, striped } = useContext(TableContext)
 95 |   let { href, target, title } = useContext(TableRowContext)
 96 |   let [cellRef, setCellRef] = useState<HTMLElement | null>(null)
 97 | 
 98 |   return (
 99 |     <td
100 |       ref={href ? setCellRef : undefined}
101 |       {...props}
102 |       className={clsx(
103 |         className,
104 |         'relative px-4 first:pl-[var(--gutter,theme(spacing.2))] last:pr-[var(--gutter,theme(spacing.2))]',
105 |         !striped && 'border-b border-zinc-950/5 dark:border-white/5',
106 |         grid && 'border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5',
107 |         dense ? 'py-2.5' : 'py-4',
108 |         !bleed && 'sm:first:pl-1 sm:last:pr-1'
109 |       )}
110 |     >
111 |       {href && (
112 |         <Link
113 |           data-row-link
114 |           href={href}
115 |           target={target}
116 |           aria-label={title}
117 |           tabIndex={cellRef?.previousElementSibling === null ? 0 : -1}
118 |           className="absolute inset-0 focus:outline-none"
119 |         />
120 |       )}
121 |       {children}
122 |     </td>
123 |   )
124 | }
125 | 


--------------------------------------------------------------------------------
/src/app/components/text.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx'
 2 | import { Link } from './link'
 3 | 
 4 | export function Text({ className, ...props }: React.ComponentPropsWithoutRef<'p'>) {
 5 |   return (
 6 |     <p
 7 |       data-slot="text"
 8 |       {...props}
 9 |       className={clsx(className, 'text-base/6 text-zinc-500 sm:text-sm/6 dark:text-zinc-400')}
10 |     />
11 |   )
12 | }
13 | 
14 | export function TextLink({ className, ...props }: React.ComponentPropsWithoutRef<typeof Link>) {
15 |   return (
16 |     <Link
17 |       {...props}
18 |       className={clsx(
19 |         className,
20 |         'text-zinc-950 underline decoration-zinc-950/50 data-[hover]:decoration-zinc-950 dark:text-white dark:decoration-white/50 dark:data-[hover]:decoration-white'
21 |       )}
22 |     />
23 |   )
24 | }
25 | 
26 | export function Strong({ className, ...props }: React.ComponentPropsWithoutRef<'strong'>) {
27 |   return <strong {...props} className={clsx(className, 'font-medium text-zinc-950 dark:text-white')} />
28 | }
29 | 
30 | export function Code({ className, ...props }: React.ComponentPropsWithoutRef<'code'>) {
31 |   return (
32 |     <code
33 |       {...props}
34 |       className={clsx(
35 |         className,
36 |         'rounded border border-zinc-950/10 bg-zinc-950/[2.5%] px-0.5 text-sm font-medium text-zinc-950 sm:text-[0.8125rem] dark:border-white/20 dark:bg-white/5 dark:text-white'
37 |       )}
38 |     />
39 |   )
40 | }
41 | 


--------------------------------------------------------------------------------
/src/app/components/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as Headless from '@headlessui/react'
 2 | import clsx from 'clsx'
 3 | import React, { forwardRef } from 'react'
 4 | 
 5 | export const Textarea = forwardRef(function Textarea(
 6 |   {
 7 |     className,
 8 |     resizable = true,
 9 |     ...props
10 |   }: { className?: string; resizable?: boolean } & Omit<Headless.TextareaProps, 'as' | 'className'>,
11 |   ref: React.ForwardedRef<HTMLTextAreaElement>
12 | ) {
13 |   return (
14 |     <span
15 |       data-slot="control"
16 |       className={clsx([
17 |         className,
18 |         // Basic layout
19 |         'relative block w-full',
20 |         // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
21 |         'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
22 |         // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
23 |         'dark:before:hidden',
24 |         // Focus ring
25 |         'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500',
26 |         // Disabled state
27 |         'has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none',
28 |       ])}
29 |     >
30 |       <Headless.Textarea
31 |         ref={ref}
32 |         {...props}
33 |         className={clsx([
34 |           // Basic layout
35 |           'relative block h-full w-full appearance-none rounded-lg px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]',
36 |           // Typography
37 |           'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white',
38 |           // Border
39 |           'border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20',
40 |           // Background color
41 |           'bg-transparent dark:bg-white/5',
42 |           // Hide default focus styles
43 |           'focus:outline-none',
44 |           // Invalid state
45 |           'data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-600 data-[invalid]:data-[hover]:dark:border-red-600',
46 |           // Disabled state
47 |           'disabled:border-zinc-950/20 disabled:dark:border-white/15 disabled:dark:bg-white/[2.5%] dark:data-[hover]:disabled:border-white/15',
48 |           // Resizable
49 |           resizable ? 'resize-y' : 'resize-none',
50 |         ])}
51 |       />
52 |     </span>
53 |   )
54 | })
55 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samselikoff/2024-10-20-use-animated-text-hook/5b011727f9984add4385084eb48d480dd7471430/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samselikoff/2024-10-20-use-animated-text-hook/5b011727f9984add4385084eb48d480dd7471430/src/app/fonts/GeistMonoVF.woff


--------------------------------------------------------------------------------
/src/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samselikoff/2024-10-20-use-animated-text-hook/5b011727f9984add4385084eb48d480dd7471430/src/app/fonts/GeistVF.woff


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @keyframes drop {
 6 |   0% {
 7 |     opacity: 1;
 8 |   }
 9 |   100% {
10 |     opacity: 0;
11 |   }
12 | }
13 | 
14 | @keyframes spin2 {
15 |   to {
16 |     opacity: 0;
17 |   }
18 | }
19 | /* .foo {
20 |   position: relative;
21 |   display: inline-block;
22 | } */
23 | 
24 | .foo::after {
25 |   content: "";
26 |   display: block;
27 |   height: 40px; /* Initial space at the end */
28 | }
29 | 
30 | @keyframes ripple {
31 |   0% {
32 |     scale: 0.1;
33 |     opacity: 0;
34 |   }
35 |   100% {
36 |     scale: 1.1;
37 |     opacity: 1;
38 |   }
39 | }
40 | 
41 | @keyframes fadeOut {
42 |   0% {
43 |     opacity: 1;
44 |     scale: 1.1;
45 |   }
46 |   100% {
47 |     opacity: 0;
48 |     scale: 1.1;
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import localFont from "next/font/local";
 3 | import "./globals.css";
 4 | 
 5 | const geistSans = localFont({
 6 |   src: "./fonts/GeistVF.woff",
 7 |   variable: "--font-geist-sans",
 8 |   weight: "100 900",
 9 | });
10 | const geistMono = localFont({
11 |   src: "./fonts/GeistMonoVF.woff",
12 |   variable: "--font-geist-mono",
13 |   weight: "100 900",
14 | });
15 | 
16 | export const metadata: Metadata = {
17 |   title: "Create Next App",
18 |   description: "Generated by create next app",
19 | };
20 | 
21 | export default function RootLayout({
22 |   children,
23 | }: Readonly<{
24 |   children: React.ReactNode;
25 | }>) {
26 |   return (
27 |     <html lang="en">
28 |       <body
29 |         className={`${geistSans.variable} ${geistMono.variable} bg-gray-200 antialiased`}
30 |       >
31 |         <main className="mx-auto max-w-3xl">{children}</main>
32 |       </body>
33 |     </html>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { ArrowPathIcon, PauseIcon, PlayIcon } from "@heroicons/react/20/solid";
  4 | import { animate, useMotionValue } from "framer-motion";
  5 | import { useEffect, useRef, useState } from "react";
  6 | 
  7 | let delay = 250;
  8 | let characters = 150;
  9 | 
 10 | export default function Home() {
 11 |   let [isPlaying, setIsPlaying] = useState(false);
 12 |   let [text, setText] = useState("");
 13 | 
 14 |   let animatedText = useAnimatedText(text);
 15 | 
 16 |   useInterval(
 17 |     () => {
 18 |       let newText = getNextChars(characters);
 19 |       setText((text) => text + newText);
 20 |     },
 21 |     isPlaying ? delay : null,
 22 |   );
 23 | 
 24 |   return (
 25 |     <div className="relative m-8">
 26 |       <div className="mt-10 flex items-center justify-between gap-4">
 27 |         <div className="flex gap-2">
 28 |           <button
 29 |             className={`${isPlaying ? "bg-accent text-white hover:bg-accent-light" : "bg-gray-300 text-gray-500 hover:bg-gray-400/40"} inline-flex w-32 items-center justify-center gap-1 rounded-lg p-2 font-semibold hover:bg-accent-light`}
 30 |             onClick={() => setIsPlaying(!isPlaying)}
 31 |           >
 32 |             {isPlaying ? (
 33 |               <>
 34 |                 <PauseIcon className="size-4" /> Pause
 35 |               </>
 36 |             ) : (
 37 |               <>
 38 |                 <PlayIcon className="size-4" /> Start
 39 |               </>
 40 |             )}
 41 |           </button>
 42 |           <button
 43 |             className="inline-flex w-32 items-center justify-center gap-1 rounded-lg border-accent bg-gray-300 p-2 font-medium text-gray-500 hover:bg-gray-400/40"
 44 |             onClick={() => {
 45 |               setText("");
 46 |               setIsPlaying(false);
 47 |               position = 0;
 48 |             }}
 49 |           >
 50 |             <ArrowPathIcon className="size-4" /> Reset
 51 |           </button>
 52 |         </div>
 53 |       </div>
 54 | 
 55 |       <div className="mt-6 grid grid-cols-2 gap-4">
 56 |         <div>
 57 |           <div className="h-[500px] overflow-scroll rounded-lg bg-white p-4 shadow">
 58 |             <p className="whitespace-pre-wrap text-gray-700">{text}</p>
 59 |           </div>
 60 |           <p className="mt-4 text-sm font-medium">text</p>
 61 |         </div>
 62 |         <div>
 63 |           <div className="h-[500px] overflow-scroll rounded-lg bg-white shadow">
 64 |             <p className="whitespace-pre-wrap p-4 text-gray-700">
 65 |               {animatedText}
 66 |             </p>
 67 |           </div>
 68 |           <p className="mt-4 text-sm font-medium">useAnimatedText(text)</p>
 69 |         </div>
 70 |       </div>
 71 |     </div>
 72 |   );
 73 | }
 74 | 
 75 | let delimiter = "";
 76 | function useAnimatedText(text: string) {
 77 |   let animatedCursor = useMotionValue(0);
 78 |   let [cursor, setCursor] = useState(0);
 79 |   let [prevText, setPrevText] = useState(text);
 80 |   let [isSameText, setIsSameText] = useState(true);
 81 | 
 82 |   if (prevText !== text) {
 83 |     setPrevText(text);
 84 |     setIsSameText(text.startsWith(prevText));
 85 | 
 86 |     if (!text.startsWith(prevText)) {
 87 |       setCursor(0);
 88 |     }
 89 |   }
 90 | 
 91 |   useEffect(() => {
 92 |     if (!isSameText) {
 93 |       animatedCursor.jump(0);
 94 |     }
 95 | 
 96 |     let controls = animate(animatedCursor, text.split(delimiter).length, {
 97 |       duration: 3,
 98 |       ease: "easeOut",
 99 |       onUpdate(latest) {
100 |         setCursor(Math.floor(latest));
101 |       },
102 |     });
103 | 
104 |     return () => controls.stop();
105 |   }, [animatedCursor, isSameText, text]);
106 | 
107 |   return text.split(delimiter).slice(0, cursor).join(delimiter);
108 | }
109 | 
110 | const greatGatsbyFull = `In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.
111 | 
112 | “Whenever you feel like criticizing anyone,” he told me, “just remember that all the people in this world haven’t had the advantages that you’ve had.”
113 | 
114 | He didn’t say any more, but we’ve always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I’m inclined to reserve all judgements, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought—frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon; for the intimate revelations of young men, or at least the terms in which they express them, are usually plagiaristic and marred by obvious suppressions. Reserving judgements is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat, a sense of the fundamental decencies is parcelled out unequally at birth.
115 | 
116 | And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes, but after a certain point I don’t care what it’s founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction—Gatsby, who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the “creative temperament”—it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No—Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.
117 | 
118 | My family have been prominent, well-to-do people in this Middle Western city for three generations. The Carraways are something of a clan, and we have a tradition that we’re descended from the Dukes of Buccleuch, but the actual founder of my line was my grandfather’s brother, who came here in fifty-one, sent a substitute to the Civil War, and started the wholesale hardware business that my father carries on today.
119 | 
120 | I never saw this great-uncle, but I’m supposed to look like him—with special reference to the rather hard-boiled painting that hangs in father’s office. I graduated from New Haven in 1915, just a quarter of a century after my father, and a little later I participated in that delayed Teutonic migration known as the Great War. I enjoyed the counter-raid so thoroughly that I came back restless. Instead of being the warm centre of the world, the Middle West now seemed like the ragged edge of the universe—so I decided to go East and learn the bond business. Everybody I knew was in the bond business, so I supposed it could support one more single man. All my aunts and uncles talked it over as if they were choosing a prep school for me, and finally said, “Why—ye-es,” with very grave, hesitant faces. Father agreed to finance me for a year, and after various delays I came East, permanently, I thought, in the spring of twenty-two.
121 | 
122 | The practical thing was to find rooms in the city, but it was a warm season, and I had just left a country of wide lawns and friendly trees, so when a young man at the office suggested that we take a house together in a commuting town, it sounded like a great idea. He found the house, a weather-beaten cardboard bungalow at eighty a month, but at the last minute the firm ordered him to Washington, and I went out to the country alone. I had a dog—at least I had him for a few days until he ran away—and an old Dodge and a Finnish woman, who made my bed and cooked breakfast and muttered Finnish wisdom to herself over the electric stove.
123 | 
124 | It was lonely for a day or so until one morning some man, more recently arrived than I, stopped me on the road.
125 | 
126 | “How do you get to West Egg village?” he asked helplessly.
127 | 
128 | I told him. And as I walked on I was lonely no longer. I was a guide, a pathfinder, an original settler. He had casually conferred on me the freedom of the neighbourhood.
129 | 
130 | And so with the sunshine and the great bursts of leaves growing on the trees, just as things grow in fast movies, I had that familiar conviction that life was beginning over again with the summer.
131 | 
132 | There was so much to read, for one thing, and so much fine health to be pulled down out of the young breath-giving air. I bought a dozen volumes on banking and credit and investment securities, and they stood on my shelf in red and gold like new money from the mint, promising to unfold the shining secrets that only Midas and Morgan and Maecenas knew. And I had the high intention of reading many other books besides. I was rather literary in college—one year I wrote a series of very solemn and obvious editorials for the Yale News—and now I was going to bring back all such things into my life and become again that most limited of all specialists, the “well-rounded man.” This isn’t just an epigram—life is much more successfully looked at from a single window, after all.
133 | 
134 | It was a matter of chance that I should have rented a house in one of the strangest communities in North America. It was on that slender riotous island which extends itself due east of New York—and where there are, among other natural curiosities, two unusual formations of land. Twenty miles from the city a pair of enormous eggs, identical in contour and separated only by a courtesy bay, jut out into the most domesticated body of salt water in the Western hemisphere, the great wet barnyard of Long Island Sound. They are not perfect ovals—like the egg in the Columbus story, they are both crushed flat at the contact end—but their physical resemblance must be a source of perpetual wonder to the gulls that fly overhead. To the wingless a more interesting phenomenon is their dissimilarity in every particular except shape and size.
135 | 
136 | I lived at West Egg, the—well, the less fashionable of the two, though this is a most superficial tag to express the bizarre and not a little sinister contrast between them. My house was at the very tip of the egg, only fifty yards from the Sound, and squeezed between two huge places that rented for twelve or fifteen thousand a season. The one on my right was a colossal affair by any standard—it was a factual imitation of some Hôtel de Ville in Normandy, with a tower on one side, spanking new under a thin beard of raw ivy, and a marble swimming pool, and more than forty acres of lawn and garden. It was Gatsby’s mansion. Or, rather, as I didn’t know Mr. Gatsby, it was a mansion inhabited by a gentleman of that name. My own house was an eyesore, but it was a small eyesore, and it had been overlooked, so I had a view of the water, a partial view of my neighbour’s lawn, and the consoling proximity of millionaires—all for eighty dollars a month.
137 | 
138 | Across the courtesy bay the white palaces of fashionable East Egg glittered along the water, and the history of the summer really begins on the evening I drove over there to have dinner with the Tom Buchanans. Daisy was my second cousin once removed, and I’d known Tom in college. And just after the war I spent two days with them in Chicago.
139 | 
140 | Her husband, among various physical accomplishments, had been one of the most powerful ends that ever played football at New Haven—a national figure in a way, one of those men who reach such an acute limited excellence at twenty-one that everything afterward savours of anticlimax. His family were enormously wealthy—even in college his freedom with money was a matter for reproach—but now he’d left Chicago and come East in a fashion that rather took your breath away: for instance, he’d brought down a string of polo ponies from Lake Forest. It was hard to realize that a man in my own generation was wealthy enough to do that.
141 | 
142 | Why they came East I don’t know. They had spent a year in France for no particular reason, and then drifted here and there unrestfully wherever people played polo and were rich together. This was a permanent move, said Daisy over the telephone, but I didn’t believe it—I had no sight into Daisy’s heart, but I felt that Tom would drift on forever seeking, a little wistfully, for the dramatic turbulence of some irrecoverable football game.
143 | 
144 | And so it happened that on a warm windy evening I drove over to East Egg to see two old friends whom I scarcely knew at all. Their house was even more elaborate than I expected, a cheerful red-and-white Georgian Colonial mansion, overlooking the bay. The lawn started at the beach and ran towards the front door for a quarter of a mile, jumping over sundials and brick walks and burning gardens—finally when it reached the house drifting up the side in bright vines as though from the momentum of its run. The front was broken by a line of French windows, glowing now with reflected gold and wide open to the warm windy afternoon, and Tom Buchanan in riding clothes was standing with his legs apart on the front porch.
145 | 
146 | He had changed since his New Haven years. Now he was a sturdy straw-haired man of thirty, with a rather hard mouth and a supercilious manner. Two shining arrogant eyes had established dominance over his face and gave him the appearance of always leaning aggressively forward. Not even the effeminate swank of his riding clothes could hide the enormous power of that body—he seemed to fill those glistening boots until he strained the top lacing, and you could see a great pack of muscle shifting when his shoulder moved under his thin coat. It was a body capable of enormous leverage—a cruel body.
147 | 
148 | His speaking voice, a gruff husky tenor, added to the impression of fractiousness he conveyed. There was a touch of paternal contempt in it, even toward people he liked—and there were men at New Haven who had hated his guts.
149 | 
150 | “Now, don’t think my opinion on these matters is final,” he seemed to say, “just because I’m stronger and more of a man than you are.” We were in the same senior society, and while we were never intimate I always had the impression that he approved of me and wanted me to like him with some harsh, defiant wistfulness of his own.
151 | 
152 | We talked for a few minutes on the sunny porch.
153 | 
154 | “I’ve got a nice place here,” he said, his eyes flashing about restlessly.
155 | 
156 | Turning me around by one arm, he moved a broad flat hand along the front vista, including in its sweep a sunken Italian garden, a half acre of deep, pungent roses, and a snub-nosed motorboat that bumped the tide offshore.
157 | 
158 | “It belonged to Demaine, the oil man.” He turned me around again, politely and abruptly. “We’ll go inside.”
159 | 
160 | We walked through a high hallway into a bright rosy-coloured space, fragilely bound into the house by French windows at either end. The windows were ajar and gleaming white against the fresh grass outside that seemed to grow a little way into the house. A breeze blew through the room, blew curtains in at one end and out the other like pale flags, twisting them up toward the frosted wedding-cake of the ceiling, and then rippled over the wine-coloured rug, making a shadow on it as wind does on the sea.
161 | 
162 | The only completely stationary object in the room was an enormous couch on which two young women were buoyed up as though upon an anchored balloon. They were both in white, and their dresses were rippling and fluttering as if they had just been blown back in after a short flight around the house. I must have stood for a few moments listening to the whip and snap of the curtains and the groan of a picture on the wall. Then there was a boom as Tom Buchanan shut the rear windows and the caught wind died out about the room, and the curtains and the rugs and the two young women ballooned slowly to the floor.
163 | 
164 | The younger of the two was a stranger to me. She was extended full length at her end of the divan, completely motionless, and with her chin raised a little, as if she were balancing something on it which was quite likely to fall. If she saw me out of the corner of her eyes she gave no hint of it—indeed, I was almost surprised into murmuring an apology for having disturbed her by coming in.
165 | 
166 | The other girl, Daisy, made an attempt to rise—she leaned slightly forward with a conscientious expression—then she laughed, an absurd, charming little laugh, and I laughed too and came forward into the room.
167 | 
168 | “I’m p-paralysed with happiness.”
169 | 
170 | She laughed again, as if she said something very witty, and held my hand for a moment, looking up into my face, promising that there was no one in the world she so much wanted to see. That was a way she had. She hinted in a murmur that the surname of the balancing girl was Baker. (I’ve heard it said that Daisy’s murmur was only to make people lean toward her; an irrelevant criticism that made it no less charming.)
171 | 
172 | At any rate, Miss Baker’s lips fluttered, she nodded at me almost imperceptibly, and then quickly tipped her head back again—the object she was balancing had obviously tottered a little and given her something of a fright. Again a sort of apology arose to my lips. Almost any exhibition of complete self-sufficiency draws a stunned tribute from me.
173 | 
174 | I looked back at my cousin, who began to ask me questions in her low, thrilling voice. It was the kind of voice that the ear follows up and down, as if each speech is an arrangement of notes that will never be played again. Her face was sad and lovely with bright things in it, bright eyes and a bright passionate mouth, but there was an excitement in her voice that men who had cared for her found difficult to forget: a singing compulsion, a whispered “Listen,” a promise that she had done gay, exciting things just a while since and that there were gay, exciting things hovering in the next hour.
175 | 
176 | I told her how I had stopped off in Chicago for a day on my way East, and how a dozen people had sent their love through me.
177 | 
178 | “Do they miss me?” she cried ecstatically.
179 | 
180 | “The whole town is desolate. All the cars have the left rear wheel painted black as a mourning wreath, and there’s a persistent wail all night along the north shore.”
181 | 
182 | “How gorgeous! Let’s go back, Tom. Tomorrow!” Then she added irrelevantly: “You ought to see the baby.”
183 | 
184 | “I’d like to.”
185 | 
186 | “She’s asleep. She’s three years old. Haven’t you ever seen her?”
187 | 
188 | “Never.”
189 | 
190 | “Well, you ought to see her. She’s—”
191 | 
192 | Tom Buchanan, who had been hovering restlessly about the room, stopped and rested his hand on my shoulder.
193 | 
194 | “What you doing, Nick?”
195 | 
196 | “I’m a bond man.”
197 | 
198 | “Who with?”
199 | 
200 | I told him.
201 | 
202 | “Never heard of them,” he remarked decisively.
203 | 
204 | This annoyed me.
205 | 
206 | “You will,” I answered shortly. “You will if you stay in the East.”
207 | 
208 | “Oh, I’ll stay in the East, don’t you worry,” he said, glancing at Daisy and then back at me, as if he were alert for something more. “I’d be a God damned fool to live anywhere else.”
209 | 
210 | At this point Miss Baker said: “Absolutely!” with such suddenness that I started—it was the first word she had uttered since I came into the room. Evidently it surprised her as much as it did me, for she yawned and with a series of rapid, deft movements stood up into the room.
211 | 
212 | “I’m stiff,” she complained, “I’ve been lying on that sofa for as long as I can remember.”
213 | 
214 | “Don’t look at me,” Daisy retorted, “I’ve been trying to get you to New York all afternoon.”
215 | 
216 | “No, thanks,” said Miss Baker to the four cocktails just in from the pantry. “I’m absolutely in training.”
217 | 
218 | Her host looked at her incredulously.
219 | 
220 | “You are!” He took down his drink as if it were a drop in the bottom of a glass. “How you ever get anything done is beyond me.”
221 | 
222 | I looked at Miss Baker, wondering what it was she “got done.” I enjoyed looking at her. She was a slender, small-breasted girl, with an erect carriage, which she accentuated by throwing her body backward at the shoulders like a young cadet. Her grey sun-strained eyes looked back at me with polite reciprocal curiosity out of a wan, charming, discontented face. It occurred to me now that I had seen her, or a picture of her, somewhere before.
223 | 
224 | “You live in West Egg,” she remarked contemptuously. “I know somebody there.”
225 | 
226 | “I don’t know a single—”
227 | 
228 | “You must know Gatsby.”
229 | 
230 | “Gatsby?” demanded Daisy. “What Gatsby?”
231 | 
232 | Before I could reply that he was my neighbour dinner was announced; wedging his tense arm imperatively under mine, Tom Buchanan compelled me from the room as though he were moving a checker to another square.
233 | 
234 | Slenderly, languidly, their hands set lightly on their hips, the two young women preceded us out on to a rosy-coloured porch, open toward the sunset, where four candles flickered on the table in the diminished wind.
235 | 
236 | “Why candles?” objected Daisy, frowning. She snapped them out with her fingers. “In two weeks it’ll be the longest day in the year.” She looked at us all radiantly. “Do you always watch for the longest day of the year and then miss it? I always watch for the longest day in the year and then miss it.”
237 | 
238 | “We ought to plan something,” yawned Miss Baker, sitting down at the table as if she were getting into bed.
239 | 
240 | “All right,” said Daisy. “What’ll we plan?” She turned to me helplessly: “What do people plan?”
241 | 
242 | Before I could answer her eyes fastened with an awed expression on her little finger.
243 | 
244 | “Look!” she complained; “I hurt it.”
245 | 
246 | We all looked—the knuckle was black and blue.
247 | 
248 | “You did it, Tom,” she said accusingly. “I know you didn’t mean to, but you did do it. That’s what I get for marrying a brute of a man, a great, big, hulking physical specimen of a—”
249 | 
250 | “I hate that word ‘hulking,’ ” objected Tom crossly, “even in kidding.”
251 | 
252 | “Hulking,” insisted Daisy.
253 | 
254 | Sometimes she and Miss Baker talked at once, unobtrusively and with a bantering inconsequence that was never quite chatter, that was as cool as their white dresses and their impersonal eyes in the absence of all desire. They were here, and they accepted Tom and me, making only a polite pleasant effort to entertain or to be entertained. They knew that presently dinner would be over and a little later the evening too would be over and casually put away. It was sharply different from the West, where an evening was hurried from phase to phase towards its close, in a continually disappointed anticipation or else in sheer nervous dread of the moment itself.
255 | 
256 | “You make me feel uncivilized, Daisy,” I confessed on my second glass of corky but rather impressive claret. “Can’t you talk about crops or something?”
257 | 
258 | I meant nothing in particular by this remark, but it was taken up in an unexpected way.
259 | 
260 | “Civilization’s going to pieces,” broke out Tom violently. “I’ve gotten to be a terrible pessimist about things. Have you read The Rise of the Coloured Empires by this man Goddard?”
261 | 
262 | “Why, no,” I answered, rather surprised by his tone.
263 | 
264 | “Well, it’s a fine book, and everybody ought to read it. The idea is if we don’t look out the white race will be—will be utterly submerged. It’s all scientific stuff; it’s been proved.”
265 | 
266 | “Tom’s getting very profound,” said Daisy, with an expression of unthoughtful sadness. “He reads deep books with long words in them. What was that word we—”
267 | 
268 | “Well, these books are all scientific,” insisted Tom, glancing at her impatiently. “This fellow has worked out the whole thing. It’s up to us, who are the dominant race, to watch out or these other races will have control of things.”
269 | 
270 | “We’ve got to beat them down,” whispered Daisy, winking ferociously toward the fervent sun.
271 | 
272 | “You ought to live in California—” began Miss Baker, but Tom interrupted her by shifting heavily in his chair.
273 | 
274 | “This idea is that we’re Nordics. I am, and you are, and you are, and—” After an infinitesimal hesitation he included Daisy with a slight nod, and she winked at me again. “—And we’ve produced all the things that go to make civilization—oh, science and art, and all that. Do you see?”
275 | 
276 | There was something pathetic in his concentration, as if his complacency, more acute than of old, was not enough to him any more. When, almost immediately, the telephone rang inside and the butler left the porch Daisy seized upon the momentary interruption and leaned towards me.
277 | 
278 | “I’ll tell you a family secret,” she whispered enthusiastically. “It’s about the butler’s nose. Do you want to hear about the butler’s nose?”
279 | 
280 | “That’s why I came over tonight.”
281 | 
282 | “Well, he wasn’t always a butler; he used to be the silver polisher for some people in New York that had a silver service for two hundred people. He had to polish it from morning till night, until finally it began to affect his nose—”
283 | 
284 | “Things went from bad to worse,” suggested Miss Baker.
285 | 
286 | “Yes. Things went from bad to worse, until finally he had to give up his position.”
287 | 
288 | For a moment the last sunshine fell with romantic affection upon her glowing face; her voice compelled me forward breathlessly as I listened—then the glow faded, each light deserting her with lingering regret, like children leaving a pleasant street at dusk.
289 | 
290 | The butler came back and murmured something close to Tom’s ear, whereupon Tom frowned, pushed back his chair, and without a word went inside. As if his absence quickened something within her, Daisy leaned forward again, her voice glowing and singing.
291 | 
292 | “I love to see you at my table, Nick. You remind me of a—of a rose, an absolute rose. Doesn’t he?” She turned to Miss Baker for confirmation: “An absolute rose?”
293 | 
294 | This was untrue. I am not even faintly like a rose. She was only extemporizing, but a stirring warmth flowed from her, as if her heart was trying to come out to you concealed in one of those breathless, thrilling words. Then suddenly she threw her napkin on the table and excused herself and went into the house.
295 | 
296 | Miss Baker and I exchanged a short glance consciously devoid of meaning. I was about to speak when she sat up alertly and said “Sh!” in a warning voice. A subdued impassioned murmur was audible in the room beyond, and Miss Baker leaned forward unashamed, trying to hear. The murmur trembled on the verge of coherence, sank down, mounted excitedly, and then ceased altogether.
297 | 
298 | “This Mr. Gatsby you spoke of is my neighbour—” I began.
299 | 
300 | “Don’t talk. I want to hear what happens.”
301 | 
302 | “Is something happening?” I inquired innocently.
303 | 
304 | “You mean to say you don’t know?” said Miss Baker, honestly surprised. “I thought everybody knew.”
305 | 
306 | “I don’t.”
307 | 
308 | “Why—” she said hesitantly. “Tom’s got some woman in New York.”
309 | 
310 | “Got some woman?” I repeated blankly.
311 | 
312 | Miss Baker nodded.
313 | 
314 | “She might have the decency not to telephone him at dinner time. Don’t you think?”
315 | 
316 | Almost before I had grasped her meaning there was the flutter of a dress and the crunch of leather boots, and Tom and Daisy were back at the table.
317 | 
318 | “It couldn’t be helped!” cried Daisy with tense gaiety.
319 | 
320 | She sat down, glanced searchingly at Miss Baker and then at me, and continued: “I looked outdoors for a minute, and it’s very romantic outdoors. There’s a bird on the lawn that I think must be a nightingale come over on the Cunard or White Star Line. He’s singing away—” Her voice sang: “It’s romantic, isn’t it, Tom?”
321 | 
322 | “Very romantic,” he said, and then miserably to me: “If it’s light enough after dinner, I want to take you down to the stables.”
323 | 
324 | The telephone rang inside, startlingly, and as Daisy shook her head decisively at Tom the subject of the stables, in fact all subjects, vanished into air. Among the broken fragments of the last five minutes at table I remember the candles being lit again, pointlessly, and I was conscious of wanting to look squarely at everyone, and yet to avoid all eyes. I couldn’t guess what Daisy and Tom were thinking, but I doubt if even Miss Baker, who seemed to have mastered a certain hardy scepticism, was able utterly to put this fifth guest’s shrill metallic urgency out of mind. To a certain temperament the situation might have seemed intriguing—my own instinct was to telephone immediately for the police.
325 | 
326 | The horses, needless to say, were not mentioned again. Tom and Miss Baker, with several feet of twilight between them, strolled back into the library, as if to a vigil beside a perfectly tangible body, while, trying to look pleasantly interested and a little deaf, I followed Daisy around a chain of connecting verandas to the porch in front. In its deep gloom we sat down side by side on a wicker settee.
327 | 
328 | Daisy took her face in her hands as if feeling its lovely shape, and her eyes moved gradually out into the velvet dusk. I saw that turbulent emotions possessed her, so I asked what I thought would be some sedative questions about her little girl.
329 | 
330 | “We don’t know each other very well, Nick,” she said suddenly. “Even if we are cousins. You didn’t come to my wedding.”
331 | 
332 | “I wasn’t back from the war.”
333 | 
334 | “That’s true.” She hesitated. “Well, I’ve had a very bad time, Nick, and I’m pretty cynical about everything.”
335 | 
336 | Evidently she had reason to be. I waited but she didn’t say any more, and after a moment I returned rather feebly to the subject of her daughter.
337 | 
338 | “I suppose she talks, and—eats, and everything.”
339 | 
340 | “Oh, yes.” She looked at me absently. “Listen, Nick; let me tell you what I said when she was born. Would you like to hear?”
341 | 
342 | “Very much.”
343 | 
344 | “It’ll show you how I’ve gotten to feel about—things. Well, she was less than an hour old and Tom was God knows where. I woke up out of the ether with an utterly abandoned feeling, and asked the nurse right away if it was a boy or a girl. She told me it was a girl, and so I turned my head away and wept. ‘All right,’ I said, ‘I’m glad it’s a girl. And I hope she’ll be a fool—that’s the best thing a girl can be in this world, a beautiful little fool.’
345 | 
346 | “You see I think everything’s terrible anyhow,” she went on in a convinced way. “Everybody thinks so—the most advanced people. And I know. I’ve been everywhere and seen everything and done everything.” Her eyes flashed around her in a defiant way, rather like Tom’s, and she laughed with thrilling scorn. “Sophisticated—God, I’m sophisticated!”
347 | 
348 | The instant her voice broke off, ceasing to compel my attention, my belief, I felt the basic insincerity of what she had said. It made me uneasy, as though the whole evening had been a trick of some sort to exact a contributory emotion from me. I waited, and sure enough, in a moment she looked at me with an absolute smirk on her lovely face, as if she had asserted her membership in a rather distinguished secret society to which she and Tom belonged.
349 | 
350 | `;
351 | 
352 | let position = 0;
353 | function getNextChars(n: number) {
354 |   const result = greatGatsbyFull.slice(position, position + n);
355 |   position += n;
356 |   return result;
357 | }
358 | 
359 | function useInterval(callback: () => void, delay: number | null) {
360 |   const savedCallback = useRef<() => void>();
361 | 
362 |   // Remember the latest callback if it changes.
363 |   useEffect(() => {
364 |     savedCallback.current = callback;
365 |   }, [callback]);
366 | 
367 |   // Set up the interval and call the callback immediately.
368 |   useEffect(() => {
369 |     if (delay === null) {
370 |       return;
371 |     }
372 | 
373 |     // Call the callback immediately.
374 |     savedCallback.current?.();
375 | 
376 |     function tick() {
377 |       savedCallback.current?.();
378 |     }
379 | 
380 |     const id = setInterval(tick, delay);
381 |     return () => clearInterval(id);
382 |   }, [delay]);
383 | }
384 | 


--------------------------------------------------------------------------------
/src/app/useAnimatedText.ts:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { animate, useMotionValue } from "framer-motion";
 4 | import { useEffect, useState } from "react";
 5 | 
 6 | let delimiter = "";
 7 | 
 8 | export function useAnimatedText(text: string) {
 9 |   let animatedCursor = useMotionValue(0);
10 |   let [cursor, setCursor] = useState(0);
11 |   let [prevText, setPrevText] = useState(text);
12 |   let [isSameText, setIsSameText] = useState(true);
13 | 
14 |   if (prevText !== text) {
15 |     setPrevText(text);
16 |     setIsSameText(text.startsWith(prevText));
17 | 
18 |     if (!text.startsWith(prevText)) {
19 |       setCursor(0);
20 |     }
21 |   }
22 | 
23 |   useEffect(() => {
24 |     if (!isSameText) {
25 |       animatedCursor.jump(0);
26 |     }
27 | 
28 |     let controls = animate(animatedCursor, text.split(delimiter).length, {
29 |       duration: 3,
30 |       ease: "easeOut",
31 |       onUpdate(latest) {
32 |         setCursor(Math.floor(latest));
33 |       },
34 |     });
35 | 
36 |     return () => controls.stop();
37 |   }, [animatedCursor, isSameText, text]);
38 | 
39 |   return text.split(delimiter).slice(0, cursor).join(delimiter);
40 | }
41 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | import colors from "tailwindcss/colors";
 3 | 
 4 | const config: Config = {
 5 |   content: [
 6 |     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
 9 |   ],
10 |   darkMode: "selector",
11 |   theme: {
12 |     extend: {
13 |       colors: {
14 |         accent: {
15 |           DEFAULT: "#6479f2",
16 |           light: "#8293f8",
17 |         },
18 |         gray: colors.slate,
19 |       },
20 |     },
21 |   },
22 |   plugins: [],
23 | };
24 | export default config;
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------