@andrilla/mado-ui 1.0.8 → 1.0.10

package/README.md

@@ -46,22 +46,28 @@ deno add npm:@andrilla/mado-ui
 Import CSS above your tailwind import in your `globals.css`.
 
 ```css
+@import 'tailwindcss';
 @import '@andrilla/mado-ui/css';
 ```
 
+It's important to import `tailwindcss` before `@andrilla/mado-ui/css`, or you can just import `@andrilla/mado-ui/tailwindcss` which has `tailwindcss` already imported.
+
+[See CSS Changes](#css-changes)
+
 ## Components
 
 ### Button
 
-A pre-styled button component with utility props for easy customization.
-Supports both button and anchor functionality.
+A pre-styled button component built on Headless UI's Button. with utility props for easy customization.
+Doubles as an `HTMLButtonElement` and `HTMLAnchorElement`.
 
 Default export:
 
 - Button
 
-Props include `padding`, `rounded`, `theme`, and standard button/anchor
-attributes.
+Props include `padding`, `rounded`, `theme`. Just add `href` to make it an `HTMLAnchorElement`.
+
+[Note About Theme](#note-about-theme)
 
 #### Example
 
@@ -70,7 +76,7 @@ attributes.
   Click me
 </Button>
 
-<Button href="/about" theme="blue" gradient>
+<Button href="/about" theme="blue-800" gradient>
   Link Button
 </Button>
 ```
@@ -79,39 +85,148 @@ attributes.
 
 Just a form component with `className="grid gap-3"`.
 
+#### Example
+
+```tsx
+<Form>
+	<Input
+		name='email'
+		label='Email'
+		placeholder='example@email.com'
+		type='email'
+	/>
+
+	<SubmitButton>Submit</SubmitButton>
+</Form>
+```
+
 ### Ghost
 
 A loading placeholder component with animated pulse effect.
 
+#### Example
+
+```tsx
+<Ghost />
+```
+
 ### Heading
 
 A heading component that renders HTML heading elements (h1-h6) with appropriate
-styling. Automatically generates IDs for targeting. Defaults to `h2`.
+styling. Automatically generates IDs for targeting, similar to a markdown. Defaults to `h2`.
+
+#### Example
+
+```tsx
+<Heading as='h1'>Work Hard and Reap the Rewards</Heading>
+
+<Heading>Some times things aren't as they seem.</Heading>
+```
 
 ### Input
 
-A form input component with built-in validation CSS, labels, and descriptions.
+A form input component built on Headless UI's Input wrapped in Headless UI's Field with built-in validation CSS, label (Headless UI Label), description (Headless UI Description), and children for custom content like tooltips. Required by default.
+
+#### Example
+
+```tsx
+<Input name='first_name' label='First Name' placeholder='First Name' />
+```
+
+### Textarea
+
+Same setup as Input, but for textarea built on Headless UI's Textarea. Includes `resize` prop for controlling resize behavior (because the CSS can be confusing). Required by default.
+
+#### Example
+
+```tsx
+<Textarea name='message' label='Message' placeholder='Your message…' />
+```
+
+### Checkbox
+
+Same setup as Input, but for checkbox built on Headless UI's Checkbox.
+
+#### Example
+
+```tsx
+<Checkbox name='terms' label='I agree to the terms and conditions' />
+```
+
+### Select
+
+Same setup as Input, but for select built on Headless UI's Listbox. Uses uncontrolled state by default. Works great with `multiple` prop for multi-select.
+
+#### SelectOption
+
+Add options to your Select component built on Headless UI's ListboxOption. Designed to have customizable children, to display unique option values (e.g. icons, descriptions, etc.), while displaying just the option name in the select box.
+
+#### Example
+
+```tsx
+<Select label='Do you like good design?'>
+	<SelectOption name='YES!' value='yes'>
+		<ThumbsUp />
+		YES!
+	</SelectOption>
+
+	<SelectOption name='Nah' value='no'>
+		<ThumbsDown />
+		Nah. Bad design is better.
+	</SelectOption>
+</Select>
+```
+
+### Fieldset
+
+A form fieldset component built on Headless UI's Fieldset with built-in legend (Headless UI Legend).
+
+#### Example
+
+```tsx
+<Fieldset legend='Legend'>
+	<Input name='first_name' label='First Name' placeholder='First Name' />
+
+	<Input name='last_name' label='Last Name' placeholder='Last Name' />
+</Fieldset>
+```
+
+### Anchor
+
+A link component that removes hashes after scrolling to anchor points, and adds a scale down on click. Generally you should use the `Link` component, but this is good for wrapping images or other non-text content. _Don't forget to make it accessible by adding a `title` attribute, an sr-only `span`, or `aria-label`._
+
+#### Example
+
+```tsx
+<Anchor href='#section' title='go somewhere else'>
+	<svg viewBox='0 0 100 100'>
+		<circle cx='50' cy='50' r='50' />
+	</svg>
+</Anchor>
+```
 
 ### Link
 
 A link component with various animation styles and theming options. Supports
-both single-line and multiline text. Automatically removes hashes after scrolling to anchor points.
+both single-line and multiline text.
+
+[Note About Theme](#note-about-theme)
 
 #### Example
 
 ```tsx
-<Link href="/about" type="ltr" theme="mauve">
+<Link href="/about" lineType="ltr" theme="mauve">
   Learn more
 </Link>
 
-<Link href="/contact" type="fill-center" theme="cyan">
+<Link href="/contact" lineType="multiline-fill-center" theme="cyan">
   Get in touch
 </Link>
 ```
 
 ### Modal
 
-A pre-designed modal component built on @headlessui's Dialog. Handles transitions,
+A pre-designed modal component built on Headless UI's Dialog. Handles transitions,
 drag-to-close functionality, and backdrop interactions.
 
 #### Example
@@ -119,8 +234,10 @@ drag-to-close functionality, and backdrop interactions.
 ```tsx
 <Modal>
 	<ModalTrigger>Open Modal</ModalTrigger>
+
 	<ModalDialog>
 		<ModalTitle>Modal Content</ModalTitle>
+
 		<ModalDescription>This is the modal content.</ModalDescription>
 	</ModalDialog>
 </Modal>
@@ -135,7 +252,6 @@ A specialized button for form submission with status-aware styling and content.
 ```tsx
 <SubmitButton
 	formStatus={formStatus}
-	loading='Submitting…'
 	success='Form Submitted!'
 	error='Submission Failed'
 >
@@ -143,6 +259,138 @@ A specialized button for form submission with status-aware styling and content.
 </SubmitButton>
 ```
 
+### Human Verification
+
+A bot-preventing submission method, forcing an iOS 5 like 'swipe to verify' gesture. This can be used in place of a submit button or as an additional layer of security.
+
+This is still in beta, due to potential accessibility issues, despite included keyboard support. It also includes token generation and verification, although additional server-side verification API is not supported yet.
+
+#### Example
+
+```tsx
+<Form>
+	<HumanVerification />
+</Form>
+```
+
+### Details
+
+A pre-designed extension of Headless UI's Disclosure.
+
+#### DetailsSummary
+
+A pre-designed extension of Headless UI's DisclosureButton, that utilizes the Mado UI Button component.
+
+#### DetailsBody
+
+A pre-designed extension of Headless UI's DisclosurePanel.
+
+#### Example
+
+```tsx
+<Details>
+	<DetailsSummary>What is an American Cardinal?</DetailsSummary>
+
+	<DetailsBody>
+		An American Cardinal is a bird. Male cardinals have a bright red breast and
+		a black face mask. Female cardinals have a duller brown coloration. This
+		allows the male cardinals to draw attention to themselves and away from
+		their mates, as their mates blend in with the trees.
+	</DetailsBody>
+</Details>
+```
+
+### DropDown
+
+A pre-designed extension of Headless UI's Menu.
+
+#### DropDownButton
+
+An extension of Headless UI's MenuButton.
+
+#### DropDownItems
+
+A pre-designed extension of Headless UI's MenuItems.
+
+#### DropDownItem
+
+An extension of Headless UI's MenuItem.
+
+#### DropDownSection
+
+An extension of Headless UI's MenuSection with a built-in `label` prop that utilizes a pre-designed extension of Headless UI's MenuHeading and optional `separatorAbove` and `separatorBelow` props to automatically add separators around the section with `DropDownSeparator`.
+
+#### DropDownSeparator
+
+An pre-designed extension of Headless UI's MenuSeparator.
+
+#### Example
+
+```tsx
+<DropDown>
+	<DropDownButton>Actions</DropDownButton>
+
+	<DropDownItems>
+		<DropDownSection label='Edit'>
+			<DropDownItem>Edit</DropDownItem>
+
+			<DropDownItem>Copy</DropDownItem>
+
+			<DropDownItem>Paste</DropDownItem>
+		</DropDownSection>
+
+		<DropDownSection label='Share' separatorAbove>
+			<DropDownItem>Share</DropDownItem>
+
+			<DropDownItem>Download</DropDownItem>
+		</DropDownSection>
+
+		<DropDownSeparator />
+
+		<DropDownSection label='Help'>
+			<DropDownItem>Quick Tips</DropDownItem>
+
+			<DropDownItem>Docs</DropDownItem>
+		</DropDownSection>
+	</DropDownItems>
+</DropDown>
+```
+
+### Tooltip
+
+A tooltip component that displays a tooltip on hover or focus.
+
+#### TooltipTrigger
+
+The trigger element that opens the tooltip on hover or focus.
+
+#### TooltipDisplay
+
+The element that is the tooltip content.
+
+#### Example
+
+```tsx
+<Tooltip>
+	<TooltipTrigger>More details</TooltipTrigger>
+
+	<TooltipDisplay>
+		This is helpful for showing additional information about the trigger
+		element.
+	</TooltipDisplay>
+</Tooltip>
+```
+
+### IFrame
+
+An iframe component with better built-in type safety and required `title` prop for accessibility and SEO.
+
+#### Example
+
+```tsx
+<IFrame src='https://andrilla.net' title={`Andrilla's website`} />
+```
+
 ### Time
 
 A time component that displays formatted dates and times with customizable
@@ -152,5 +400,496 @@ precision.
 
 ```tsx
 <Time dateObject={new Date()} day month year hours minutes />
+
 <Time dateTime='2024-01-01T12:00:00Z' />
 ```
+
+### Video
+
+It is a video component with some nice built-in features, but it's still better to go with Vimeo. The progressive enhancement needs some work before it's ready for production.
+
+## CSS Changes
+
+To help create better design with less work, there are some changes to the Tailwind base that you should be aware of. There are also some additions to the theme and some helpful utility classes that may prove useful.
+
+### Base
+
+```css
+@layer base {
+	/* Inputs have a min-width by default which makes working with them confusing. We removed that to make them easier to work with. A relative position is generally preferred over static, since absolute positioning outside of a direct parent is a rarity, and can be easily changed with the static class. */
+	* {
+		position: relative;
+		min-width: 0;
+	}
+
+	/* Helps differentiate paragraphs from headings, and makes it pretty. */
+	p {
+		color: color-mix(in oklch, currentColor 80%, transparent);
+		text-wrap: pretty;
+	}
+
+	/* We think this is a better default for users. */
+	button {
+		cursor: pointer;
+	}
+
+	/* Aligns svgs without defined colors with the currentColor. */
+	svg {
+		fill: currentColor;
+		stroke: currentColor;
+		stroke-width: 0;
+	}
+}
+```
+
+### Theme
+
+```css
+@theme {
+	/* This is used for the Tooltip. It's very straightforward. */
+	--animate-fade-in: fade-in var(--tw-animation-duration, 0.2s)
+		var(--tw-animation-timing-function, cubic-bezier(0.25, 0.5, 0, 0.99))
+		var(--tw-animation-fill-mode, forwards);
+
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* This is used for the loading state of the SubmitButton. Pair this with animation-delay on adjacent elements to see the wave. */
+	--animate-wave: wave var(--tw-animation-duration, 3s)
+		var(--tw-animation-timing-function, ease-in-out)
+		var(--tw-animation-iteration-count, infinite);
+
+	@keyframes wave {
+		0%,
+		15%,
+		85%,
+		100% {
+			transform: translateY(0);
+		}
+		35% {
+			transform: translateY(-3px);
+		}
+		65% {
+			transform: translateY(3px);
+		}
+	}
+
+	/* For the added animation utilities. */
+	--animation-direction-normal: normal;
+	--animation-direction-reverse: reverse;
+	--animation-direction-alternate: alternate;
+	--animation-direction-alternate-reverse: alternate-reverse;
+
+	--animation-fill-none: none;
+	--animation-fill-forwards: forwards;
+	--animation-fill-backwards: backwards;
+	--animation-fill-both: both;
+
+	--animation-iteration-infinite: infinite;
+
+	--animation-range-start-contain: contain;
+	--animation-range-start-cover: cover;
+	--animation-range-start-normal: normal;
+
+	--animation-state-paused: paused;
+	--animation-state-running: running;
+
+	/* Most of the time the theme color of buttons and links should match your branding. Reset the --base-theme-color (and optionally the --base-theme-color--foreground) in your @theme to automatically match the default theme color to your brand, without having to reset it on each button and link manually. */
+	--base-theme-color: var(--color-blue-500);
+	--base-theme-color--foreground: color-mix(
+		in oklch,
+		var(--base-theme-color) 5%,
+		var(--color-white)
+	);
+
+	/* For the added corner-shape-* utility. */
+	--corner-shape-bevel: bevel;
+	--corner-shape-notch: notch;
+	--corner-shape-round: round;
+	--corner-shape-scoop: scoop;
+	--corner-shape-square: square;
+	--corner-shape-squircle: squircle;
+	--corner-shape-infinity: superellipse(infinity);
+
+	/* Exponential easing feels more responsive than other easing methods. */
+	--ease-exponential: cubic-bezier(0.25, 0.5, 0, 0.99);
+	/* Spring easing provides a bouncy feel without the need for JavaScript. */
+	--ease-spring: cubic-bezier(0.35, 1.67, 0.44, 0.78);
+
+	/* You may want to modify these, or the neutral colors, to fit the branding of your website. These are primarily used to assist with ring offsets. Add these to the body of your @layer base to take full advantage of them. */
+	--global-bg: light-dark(var(--color-neutral-50), var(--color-neutral-900));
+	--global-text: light-dark(var(--color-neutral-950), var(--color-neutral-100));
+
+	/* Helpful relative font sizing. */
+	--text-smaller: smaller;
+	--text-larger: larger;
+}
+```
+
+```css
+/* Animation utility classes that do what you think they do. */
+@utility animation-delay-* {
+	--tw-animation-delay: --value([*]);
+	/* prettier-ignore */
+	--tw-animation-delay: --value(integer)ms;
+	animation-delay: var(--tw-animation-delay);
+}
+
+@utility animation-direction-* {
+	--tw-animation-direction: --value(--animation-direction-*);
+	animation-direction: var(--tw-animation-direction);
+}
+
+@utility animation-duration-* {
+	--tw-animation-duration: --value([*]);
+	/* prettier-ignore */
+	--tw-animation-duration: --value(integer)ms;
+	animation-duration: var(--tw-animation-duration);
+}
+
+@utility animation-ease-* {
+	--tw-animation-timing-function: --value(--ease-*, [*]);
+	animation-timing-function: var(--tw-animation-timing-function);
+}
+
+@utility animation-fill-* {
+	--tw-animation-fill-mode: --value(--animation-fill-*);
+	animation-fill-mode: var(--tw-animation-fill-mode);
+}
+
+@utility animation-iteration-* {
+	--tw-animation-iteration-count: --value(--animation-iteration-*, integer);
+	animation-iteration-count: var(--tw-animation-iteration-count);
+}
+
+@utility animation-start-* {
+	--tw-animation-range-start: --value(--animation-range-start-*, [*]);
+	/* prettier-ignore */
+	--tw-animation-range-start: --value(number)px;
+	--tw-animation-range-start: --value(percentage);
+	animation-range-start: var(--tw-animation-range-start);
+}
+
+@utility animation-state-* {
+	--tw-animation-state: --value(--animation-state-*);
+	animation-play-state: var(--tw-animation-state);
+}
+
+/* All various corner-shape options. Not supported in all browsers yet, but we added it to Button, so now it's future-proofed. Use `corner-super-1.5` for a superellipse that looks good with or without browser support. */
+@utility corner-* {
+	corner-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-s-* {
+	corner-start-start-shape: --value(--corner-shape-*, [*]);
+	corner-end-start-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-e-* {
+	corner-start-end-shape: --value(--corner-shape-*, [*]);
+	corner-end-end-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-t-* {
+	corner-top-left-shape: --value(--corner-shape-*, [*]);
+	corner-top-right-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-r-* {
+	corner-top-right-shape: --value(--corner-shape-*, [*]);
+	corner-bottom-right-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-b-* {
+	corner-bottom-left-shape: --value(--corner-shape-*, [*]);
+	corner-bottom-right-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-l-* {
+	corner-top-left-shape: --value(--corner-shape-*, [*]);
+	corner-bottom-left-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-ss-* {
+	corner-start-start-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-se-* {
+	corner-start-end-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-es-* {
+	corner-end-start-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-tl-* {
+	corner-top-left-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-tr-* {
+	corner-top-right-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-br-* {
+	corner-bottom-right-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility corner-bl-* {
+	corner-bottom-left-shape: --value(--corner-shape-*, [*]);
+}
+
+@utility -corner-infinity {
+	corner-shape: superellipse(-infinity);
+}
+
+@utility -corner-s-infinity {
+	corner-start-start-shape: superellipse(-infinity);
+	corner-end-start-shape: superellipse(-infinity);
+}
+
+@utility -corner-e-infinity {
+	corner-start-end-shape: superellipse(-infinity);
+	corner-end-end-shape: superellipse(-infinity);
+}
+
+@utility -corner-t-infinity {
+	corner-top-left-shape: superellipse(-infinity);
+	corner-top-right-shape: superellipse(-infinity);
+}
+
+@utility -corner-r-infinity {
+	corner-top-right-shape: superellipse(-infinity);
+	corner-bottom-right-shape: superellipse(-infinity);
+}
+
+@utility -corner-b-infinity {
+	corner-bottom-left-shape: superellipse(-infinity);
+	corner-bottom-right-shape: superellipse(-infinity);
+}
+
+@utility -corner-l-infinity {
+	corner-top-left-shape: superellipse(-infinity);
+	corner-bottom-left-shape: superellipse(-infinity);
+}
+
+@utility -corner-ss-infinity {
+	corner-start-start-shape: superellipse(-infinity);
+}
+
+@utility -corner-se-infinity {
+	corner-start-end-shape: superellipse(-infinity);
+}
+
+@utility -corner-es-infinity {
+	corner-end-start-shape: superellipse(-infinity);
+}
+
+@utility -corner-tl-infinity {
+	corner-top-left-shape: superellipse(-infinity);
+}
+
+@utility -corner-tr-infinity {
+	corner-top-right-shape: superellipse(-infinity);
+}
+
+@utility -corner-br-infinity {
+	corner-bottom-right-shape: superellipse(-infinity);
+}
+
+@utility -corner-bl-infinity {
+	corner-bottom-left-shape: superellipse(-infinity);
+}
+
+@utility corner-super-* {
+	corner-shape: superellipse(--value(number));
+}
+
+@utility corner-s-super-* {
+	corner-start-start-shape: superellipse(--value(number));
+	corner-end-start-shape: superellipse(--value(number));
+}
+
+@utility corner-e-super-* {
+	corner-start-end-shape: superellipse(--value(number));
+	corner-end-end-shape: superellipse(--value(number));
+}
+
+@utility corner-t-super-* {
+	corner-top-left-shape: superellipse(--value(number));
+	corner-top-right-shape: superellipse(--value(number));
+}
+
+@utility corner-r-super-* {
+	corner-top-right-shape: superellipse(--value(number));
+	corner-bottom-right-shape: superellipse(--value(number));
+}
+
+@utility corner-b-super-* {
+	corner-bottom-left-shape: superellipse(--value(number));
+	corner-bottom-right-shape: superellipse(--value(number));
+}
+
+@utility corner-l-super-* {
+	corner-top-left-shape: superellipse(--value(number));
+	corner-bottom-left-shape: superellipse(--value(number));
+}
+
+@utility corner-ss-super-* {
+	corner-start-start-shape: superellipse(--value(number));
+}
+
+@utility corner-se-super-* {
+	corner-start-end-shape: superellipse(--value(number));
+}
+
+@utility corner-es-super-* {
+	corner-end-start-shape: superellipse(--value(number));
+}
+
+@utility corner-tl-super-* {
+	corner-top-left-shape: superellipse(--value(number));
+}
+
+@utility corner-tr-super-* {
+	corner-top-right-shape: superellipse(--value(number));
+}
+
+@utility corner-br-super-* {
+	corner-bottom-right-shape: superellipse(--value(number));
+}
+
+@utility corner-bl-super-* {
+	corner-bottom-left-shape: superellipse(--value(number));
+}
+
+@utility -corner-super-* {
+	corner-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-s-super-* {
+	corner-start-start-shape: superellipse(calc(--value(number) * -1));
+	corner-end-start-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-e-super-* {
+	corner-start-end-shape: superellipse(calc(--value(number) * -1));
+	corner-end-end-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-t-super-* {
+	corner-top-left-shape: superellipse(calc(--value(number) * -1));
+	corner-top-right-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-r-super-* {
+	corner-top-right-shape: superellipse(calc(--value(number) * -1));
+	corner-bottom-right-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-b-super-* {
+	corner-bottom-left-shape: superellipse(calc(--value(number) * -1));
+	corner-bottom-right-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-l-super-* {
+	corner-top-left-shape: superellipse(calc(--value(number) * -1));
+	corner-bottom-left-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-ss-super-* {
+	corner-start-start-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-se-super-* {
+	corner-start-end-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-es-super-* {
+	corner-end-start-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-tl-super-* {
+	corner-top-left-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-tr-super-* {
+	corner-top-right-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-br-super-* {
+	corner-bottom-right-shape: superellipse(calc(--value(number) * -1));
+}
+
+@utility -corner-bl-super-* {
+	corner-bottom-left-shape: superellipse(calc(--value(number) * -1));
+}
+
+/* Makes it possible to utilize the same gap as parent elements without subgrid. */
+@utility gap-* {
+	--tw-gap: --value([*]);
+	--tw-gap-x: --value([*]);
+	--tw-gap-y: --value([*]);
+	--tw-gap: calc(var(--spacing) * --value(number));
+	--tw-gap-x: var(--tw-gap, calc(var(--spacing) * --value(number)));
+	--tw-gap-y: var(--tw-gap, calc(var(--spacing) * --value(number)));
+}
+
+@utility gap-x-* {
+	--tw-gap-x: --value([*]);
+	--tw-gap-x: calc(var(--spacing) * --value(number));
+}
+
+@utility gap-y-* {
+	--tw-gap-y: --value([*]);
+	--tw-gap-y: calc(var(--spacing) * --value(number));
+}
+
+/* Makes animating width relatively possible. */
+@utility grid-cols-0fr {
+	grid-template-columns: 0fr;
+}
+
+@utility grid-cols-1fr {
+	grid-template-columns: 1fr;
+}
+
+/* Makes animating height relatively possible. */
+@utility grid-rows-0fr {
+	grid-template-rows: 0fr;
+}
+
+@utility grid-rows-1fr {
+	grid-template-rows: 1fr;
+}
+
+/* Makes animating on hover or other pseudo states with grid-template-columns/rows easier. Meant to pair with the previous four grid-template utilities. */
+@utility transition-cols {
+	transition-property: grid-template-columns;
+}
+
+@utility transition-rows {
+	transition-property: grid-template-rows;
+}
+```
+
+## Note About Theme
+
+The `theme` prop includes all Tailwind CSS 4.2 colors by default, plus a `'custom'` value for defining custom themes. Built-in colors use shade `-500` by default, when writing `theme='blue'` for example. Built-in colors also have sensible defaults for foreground contrast, based on the chosen shade. 50-400 uses `color-mix(in oklch, var(--theme-color) 5%, var(--color-black))`, while 500-950 uses `color-mix(in oklch, var(--theme-color) 5%, var(--color-white))`. Using `'custom'` defaults to a light foreground, but you can add the following to change to a dark foreground:
+
+### For Buttons
+
+```tsx
+'text-[color-mix(in_oklch,var(--theme-color)_5%,var(--color-black))]'
+```
+
+### For Links
+
+```tsx
+'[--text-color:color-mix(in_oklch,var(--theme-color)_5%,var(--color-black))]'
+```