jattac.libs.web.zest-textbox

A delightful, feature-rich, and highly customizable React textbox component. Built with accessibility and developer experience in mind.

ZestTextbox is a standalone component that extends the standard HTML and </code> elements with a touch of zest, providing a polished, professional, and playful user experience.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Table of Contents</h2></p><p class="my-3">- <a href="#features" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Features</a><br />- <a href="#installation" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Installation</a><br />- <a href="#basic-usage" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Basic Usage</a><br />- <a href="#props-api" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Props API</a><br /> - <a href="#zestprops-interface-details" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ZestProps Interface Details</a><br />- <a href="#feature-examples" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Feature Examples</a><br /> - <a href="#password-input-with-visibility-toggle" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Password Input with Visibility Toggle</a><br /> - <a href="#character-counter--progress-bar" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Character Counter & Progress Bar</a><br /> - <a href="#enhanced-numeric-input" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Enhanced Numeric Input</a><br /> - <a href="#custom-parser--validator" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Custom Parser & Validator</a><br /> - <a href="#sizing" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Sizing</a><br /> - <a href="#theming-lightdarksystem" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Theming (Light/Dark/System)</a><br /> - <a href="#multiline-textarea" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Multiline Textarea</a><br /> - <a href="#helper-text-with-formatting" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Helper Text with Formatting</a><br /> - <a href="#full-width-stretching" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Full Width Stretching</a><br />- <a href="#centralized-configuration" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Centralized Configuration</a><br />- <a href="#internal-architecture" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Internal Architecture</a><br />- <a href="#breaking-changes" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Breaking Changes</a><br />- <a href="#contributing" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Contributing</a><br />- <a href="#license" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">License</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Features</h2></p><p class="my-3"><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ZestTextbox</code> isn't just another input field; it's crafted to bring a smile to your users' faces while providing robust functionality and a seamless developer experience.</p><p class="my-3">* <strong>Responsive and Mobile-First:</strong> Adapts beautifully to any screen size, ensuring a consistent UX.<br />* <strong>Light & Dark Mode:</strong> Automatically respects user system preferences or can be explicitly set.<br />* <strong>Password Visibility Toggle:</strong> A crucial accessibility and usability feature for password fields.<br />* <strong>Character Counter & Progress Bar:</strong> Visual feedback on input length, with engaging animations as limits are approached.<br />* <strong>Enhanced Numeric Input:</strong> Intelligent filtering for numbers, decimals, and negative values.<br />* <strong>Customizable Parsing & Validation:</strong> Define how raw string input is converted to a desired type and validated, with context of the input <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">type</code>.<br />* <strong>Engaging Animations:</strong> Subtle, delightful micro-interactions on focus and input.<br />* <strong>Accessible:</strong> Built with <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">rem</code> units and best practices for inclusivity.<br />* <strong>Centralized Configuration:</strong> Easily manage default behaviors and styles across your application using React Context.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installation</h2></p><p class="my-3">To install <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jattac.libs.web.zest-textbox</code> in your project, run:</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />npm install jattac.libs.web.zest-textbox<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Basic Usage</h2></p><p class="my-3">Get started with </code>ZestTextbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in seconds. It behaves just like a standard HTML </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, but with added zest!</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import React from 'react';<br />import ZestTextbox from 'jattac.libs.web.zest-textbox';</p><p class="my-3">const App = () => {<br /> return (<br /> <div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto' }}><br /> <h1>Basic ZestTextbox</h1><br /> <ZestTextbox placeholder="Enter your name" /><br /> </div><br /> );<br />};</p><p class="my-3">export default App;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Props API</h2></p><p class="my-3"></code>ZestTextbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> accepts all standard HTML </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> props. Additionally, it introduces a powerful </code>zest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop for all its custom enhancements.</p><p class="my-3">| Prop | Type | Default | Description |<br />| ----------- | ---------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- |<br />| </code>zest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>ZestProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | An object containing all custom configurations and behaviors specific to the ZestTextbox component. See </code>ZestProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> interface for details below. |<br />| </code>className<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>""<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | A custom CSS class to apply to the main textbox element. |<br />| </code>maxLength<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The maximum number of characters allowed. Enables the character counter and progress bar. |<br />| </code>type<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>HtmlInputType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'text'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The type of the input element. All standard HTML input types are supported, plus the semantic types "currency" and "percentage". Special handling is applied for </code>password<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>currency<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>percentage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>zest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop is an object that encapsulates all the unique features of </code>ZestTextbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Its properties can accept primitive values, functions that receive the input's </code>type<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for type-aware logic, or asynchronous versions of those functions (</code>ZestConfigValue<T><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). This is especially powerful for dynamic, app-wide settings with <a href="#centralized-configuration" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Centralized Configuration</a>.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />import { ZestTextboxSize, ZestConfigValue, HelperTextConfig, InputParser, InputValidator, HtmlInputType } from 'jattac.libs.web.zest-textbox';</p><p class="my-3">interface ZestProps {<br /> helperTextConfig?: ZestConfigValue<HelperTextConfig>;<br /> onTextChanged?: <T>(value: T | undefined) => void; // Callback for parsed & validated text changes<br /> zSize?: ZestConfigValue<ZestTextboxSize>; // "sm" | "md" | "lg"<br /> stretch?: ZestConfigValue<boolean>; // Full width<br /> showProgressBar?: ZestConfigValue<boolean>; // Display character progress bar<br /> animatedCounter?: ZestConfigValue<boolean>; // Counter color changes<br /> theme?: ZestConfigValue<"light" | "dark" | "system">; // Color scheme<br /> isMultiline?: ZestConfigValue<boolean>; // Render as <textarea><br /> parser?: ZestConfigValue<InputParser<any>>; // Custom parser function<br /> validator?: ZestConfigValue<InputValidator<any>>; // Custom validator function<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">| Property | Type (</code>ZestConfigValue<T><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) | Default | Description |<br />| ----------------- | --------------------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- |<br />| </code>helperTextConfig<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">| </code>ZestConfigValue<HelperTextConfig><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Configuration for dynamic helper text displayed below the input. Can be an object, a function returning an object, or a promise of an object. |<br />| </code>onTextChanged<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code><T>(value: T | undefined) => void<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | A callback function that is invoked whenever the textbox's value changes. Provides the <em>parsed and validated</em> value. </code>T<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the type returned by the </code>parser<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. |<br />| </code>zSize<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>ZestConfigValue<"sm" | "md" | "lg"><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'md'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Sets the size of the textbox, affecting padding and font size. |<br />| </code>stretch<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>ZestConfigValue<boolean><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | If </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, the component will stretch to the full width of its container. |<br />| </code>showProgressBar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>ZestConfigValue<boolean><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | If </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, a progress bar indicating character count vs. </code>maxLength<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will be displayed. Requires </code>maxLength<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to be set. |<br />| </code>animatedCounter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>ZestConfigValue<boolean><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | If </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, the character counter will change color as it approaches the </code>maxLength<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Requires </code>maxLength<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to be set. |<br />| </code>theme<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>ZestConfigValue<"light" | "dark" | "system"><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'system'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Controls the component's color scheme. </code>'system'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> automatically detects the OS/browser preference. |<br />| </code>isMultiline<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>ZestConfigValue<boolean><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | If </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, the component will render as a </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. If </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or undefined, it renders as an </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. |<br />| </code>parser<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>ZestConfigValue<InputParser<any>><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | A function to parse the raw string input into a desired type. Receives </code>(value: string, inputType?: HtmlInputType)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Returns </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if parsing fails. Default parsers are provided for </code>type="number"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. |<br />| </code>validator<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>ZestConfigValue<InputValidator<any>><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | A function to validate the parsed value. Receives </code>(value: T | undefined, inputType?: HtmlInputType)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Returns </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for valid, or a string error message for invalid. Default validators are provided for </code>type="number"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. |</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Feature Examples</h2></p><p class="my-3">Dive into practical examples demonstrating the power and flexibility of </code>ZestTextbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Simply set the </code>type<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop to </code>"password"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to enable the built-in visibility toggle.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import React from 'react';<br />import ZestTextbox from 'jattac.libs.web.zest-textbox';</p><p class="my-3">const PasswordExample = () => {<br /> return (<br /> <div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto' }}><br /> <h2>Password Input</h2><br /> <ZestTextbox type="password" placeholder="Enter your password" /><br /> </div><br /> );<br />};</p><p class="my-3">export default PasswordExample;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Enable the character counter with </code>maxLength<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and add a visual progress bar and animated counter via </code>zest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> props.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import React from 'react';<br />import ZestTextbox from 'jattac.libs.web.zest-textbox';</p><p class="my-3">const CounterExample = () => {<br /> const [text, setText] = React.useState('');<br /> return (<br /> <div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto' }}><br /> <h2>Character Counter & Progress Bar</h2><br /> <ZestTextbox<br /> maxLength={100}<br /> placeholder="What's on your mind? (max 100 chars)"<br /> value={text}<br /> onTextChanged={setText}<br /> zest={{<br /> showProgressBar: true,<br /> animatedCounter: true,<br /> }}<br /> /><br /> </div><br /> );<br />};</p><p class="my-3">export default CounterExample;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Set </code>type="number"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for intelligent filtering that allows only digits, a single decimal point, and a single leading negative sign. The </code>onTextChanged<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> callback will now receive a </code>number | undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">You can also use the semantic types </code>type="currency"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>type="percentage"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. These behave identically to </code>type="number"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> by default but provide clearer intent and allow for type-specific logic in global configurations.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import React from 'react';<br />import ZestTextbox from 'jattac.libs.web.zest-textbox';</p><p class="my-3">const NumericExample = () => {<br /> const [age, setAge] = React.useState<number | undefined>(undefined);<br /> const [price, setPrice] = React.useState<number | undefined>(undefined);</p><p class="my-3"> const currencyFormatter = (val: string) => {<br /> const num = parseFloat(val);<br /> return isNaN(num) ? '' : </code>${num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">;<br /> };</p><p class="my-3"> return (<br /> <div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto' }}><br /> <h2>Numeric and Semantic Inputs</h2><br /> <p>Age (type="number"): {age === undefined ? 'N/A' : age}</p><br /> <ZestTextbox<br /> type="number"<br /> placeholder="Enter your age"<br /> onTextChanged={setAge}<br /> /><br /> <br /><br /><br /> <p>Price (type="currency"): {price === undefined ? 'N/A' : price}</p><br /> <ZestTextbox<br /> type="currency"<br /> placeholder="Enter a price"<br /> onTextChanged={setPrice}<br /> defaultValue="19.99"<br /> zest={{<br /> helperTextConfig: {<br /> formatter: currencyFormatter,<br /> templater: (formatted) => </code>Formatted: ${formatted}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> }<br /> }}<br /> /><br /> </div><br /> );<br />};</p><p class="my-3">export default NumericExample;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Define your own </code>parser<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>validator<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> functions to handle specific input requirements. The </code>inputType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is passed to these functions for context. Here, we'll create a custom parser and validator for a "positive integer" number input.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import React from 'react';<br />import ZestTextbox, { InputParser, InputValidator, HtmlInputType } from 'jattac.libs.web.zest-textbox';</p><p class="my-3">// Custom parser for positive integers<br />const positiveIntegerParser: InputParser<number> = (value: string, inputType?: HtmlInputType) => {<br /> if (inputType === 'number') {<br /> const parsed = parseInt(value, 10);<br /> return isNaN(parsed) ? undefined : parsed;<br /> }<br /> return undefined;<br />};</p><p class="my-3">// Custom validator for positive integers<br />const positiveIntegerValidator: InputValidator<number> = (parsedValue: number | undefined, inputType?: HtmlInputType) => {<br /> if (inputType === 'number') {<br /> if (parsedValue === undefined) {<br /> return "Please enter a valid integer.";<br /> }<br /> if (parsedValue <= 0) {<br /> return "Value must be a positive integer.";<br /> }<br /> }<br /> return true;<br />};</p><p class="my-3">const CustomNumericParserValidatorExample = () => {<br /> const [quantity, setQuantity] = React.useState<number | undefined>(undefined);</p><p class="my-3"> return (<br /> <div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto' }}><br /> <h2>Custom Numeric Parser & Validator</h2><br /> <p>Quantity: {quantity === undefined ? 'N/A' : quantity}</p><br /> <ZestTextbox<br /> type="number"<br /> placeholder="Enter positive quantity"<br /> onTextChanged={setQuantity}<br /> zest={{<br /> parser: positiveIntegerParser,<br /> validator: positiveIntegerValidator,<br /> }}<br /> /><br /> </div><br /> );<br />};</p><p class="my-3">export default CustomNumericParserValidatorExample;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Control the size of the textbox with the </code>zSize<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property within the </code>zest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop. Options are </code>"sm"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>"md"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (default), and </code>"lg"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import React from 'react';<br />import ZestTextbox from 'jattac.libs.web.zest-textbox';</p><p class="my-3">const SizingExample = () => {<br /> return (<br /> <div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto' }}><br /> <h2>Sizing</h2><br /> <ZestTextbox zest={{ zSize: "sm" }} placeholder="Small" /><br /> <br /><br /><br /> <ZestTextbox zest={{ zSize: "md" }} placeholder="Medium (default)" /><br /> <br /><br /><br /> <ZestTextbox zest={{ zSize: "lg" }} placeholder="Large" /><br /> </div><br /> );<br />};</p><p class="my-3">export default SizingExample;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Force the component into a specific theme or let it adapt to the user's system preference using the </code>theme<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import React from 'react';<br />import ZestTextbox from 'jattac.libs.web.zest-textbox';</p><p class="my-3">const ThemingExample = () => {<br /> return (<br /> <div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto' }}><br /> <h2>Theming</h2><br /> <ZestTextbox zest={{ theme: "light" }} placeholder="Light Mode" /><br /> <br /><br /><br /> <ZestTextbox zest={{ theme: "dark" }} placeholder="Dark Mode" /><br /> <br /><br /><br /> <ZestTextbox zest={{ theme: "system" }} placeholder="System Theme (default)" /><br /> </div><br /> );<br />};</p><p class="my-3">export default ThemingExample;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Render </code>ZestTextbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> as a </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> by setting </code>isMultiline<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in the </code>zest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import React from 'react';<br />import ZestTextbox from 'jattac.libs.web.zest-textbox';</p><p class="my-3">const MultilineExample = () => {<br /> return (<br /> <div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto' }}><br /> <h2>Multiline Textarea</h2><br /> <ZestTextbox<br /> zest={{ isMultiline: true }}<br /> placeholder="Type a longer message here..."<br /> rows={4}<br /> /><br /> </div><br /> );<br />};</p><p class="my-3">export default MultilineExample;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Provide dynamic helper text below the input using </code>helperTextConfig<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The </code>formatter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>templater<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> functions now receive a rich </code>context<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object, giving you access to the raw </code>value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>parsedValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and the component's </code>props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import React from 'react';<br />import ZestTextbox, { ZestContext } from 'jattac.libs.web.zest-textbox';</p><p class="my-3">const HelperTextExample = () => {<br /> const [amount, setAmount] = React.useState<number | undefined>(undefined);<br /> const [message, setMessage] = React.useState('');</p><p class="my-3"> const currencyFormatter = (context: ZestContext<number>) => {<br /> const num = context.parsedValue;<br /> return num === undefined ? '' : </code>${num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">;<br /> };</p><p class="my-3"> const messageTemplater = (formattedValue: string, context: ZestContext<string>) => (<br /> <span style={{ color: context.value.length > (context.props.maxLength || 0) * 0.8 ? 'orange' : 'green' }}><br /> Length: {context.value.length} / {context.props.maxLength || '∞'}<br /> </span><br /> );</p><p class="my-3"> return (<br /> <div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto' }}><br /> <h2>Helper Text</h2><br /> <ZestTextbox<br /> type="currency"<br /> placeholder="Enter amount"<br /> onTextChanged={setAmount}<br /> zest={{<br /> helperTextConfig: {<br /> formatter: currencyFormatter,<br /> templater: (formatted, context) => (<br /> <span><br /> Formatted: <strong>{formatted || 'N/A'}</strong> (Type: {context.props.type})<br /> </span><br /> ),<br /> },<br /> }}<br /> /><br /> <br /><br /><br /> <ZestTextbox<br /> maxLength={50}<br /> placeholder="Type something (max 50 chars)..."<br /> onTextChanged={setMessage}<br /> zest={{<br /> helperTextConfig: {<br /> templater: messageTemplater,<br /> },<br /> }}<br /> /><br /> </div><br /> );<br />};</p><p class="my-3">export default HelperTextExample;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Make the textbox take up the full width of its parent container by setting </code>stretch<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in the </code>zest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import React from 'react';<br />import ZestTextbox from 'jattac.libs.web.zest-textbox';</p><p class="my-3">const StretchExample = () => {<br /> return (<br /> <div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto', border: '1px dashed #ccc' }}><br /> <h2>Full Width Stretching</h2><br /> <ZestTextbox zest={{ stretch: true }} placeholder="I stretch to full width!" /><br /> </div><br /> );<br />};</p><p class="my-3">export default StretchExample;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Centralized Configuration</h2></p><p class="my-3">To maintain consistency and reduce boilerplate, </code>ZestTextbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> supports centralized configuration using React Context. This allows you to define default </code>ZestProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for all </code>ZestTextbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instances within a provider's scope. Component-level </code>zest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> props will always override these global defaults.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">1. <strong></code>ZestTextboxConfigProvider<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</strong> Wrap your application or a part of it with this provider. Pass a </code>value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop containing the default </code>ZestProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> you want to apply.<br />2. <strong></code>ZestConfigValue<T><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</strong> Properties within </code>ZestProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> can be a primitive value (</code>T<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">), a function that receives the </code>inputType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and returns </code>T<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (</code>(inputType?: HtmlInputType) => T<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">), or an asynchronous function that does the same (</code>(inputType?: HtmlInputType) => Promise<T><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). This provides immense flexibility for creating dynamic, type-aware defaults.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Here's how you can set up a global theme and size, and then override it for a specific component. The </code>zSize<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop is configured to return a different size depending on the </code>inputType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import React from 'react';<br />import ZestTextbox, { ZestTextboxConfigProvider, InputParser, InputValidator, HtmlInputType } from 'jattac.libs.web.zest-textbox';</p><p class="my-3">const AppWithCentralConfig = () => {<br /> // Define your global default ZestProps<br /> const globalDefaultZestProps = {<br /> theme: "dark", // All textboxes will be dark by default<br /> // Make size dynamic based on the input type<br /> zSize: (inputType) => {<br /> if (inputType === 'password') return 'sm'; // Small for passwords<br /> return 'lg'; // Large for everything else<br /> },<br /> animatedCounter: Promise.resolve(true), // Async example<br /> };</p><p class="my-3"> return (<br /> <ZestTextboxConfigProvider value={globalDefaultZestProps}><br /> <div style={{ padding: '2rem', maxWidth: '600px', margin: '0 auto' }}><br /> <h1>Centralized Configuration Example</h1></p><p class="my-3"> <h3>Default ZestTextbox (inherits global defaults)</h3><br /> <ZestTextbox placeholder="I'm large and dark (default)" /><br /> <br /><br /><br /> <ZestTextbox placeholder="I'm a small password field" type="password" /><br /> <br /><br /></p><p class="my-3"> <h3>Overridden ZestTextbox (component props take precedence)</h3><br /> <ZestTextbox<br /> placeholder="I'm light, overriding the global dark theme"<br /> zest={{ theme: "light" }} // Overrides the global dark theme<br /> /><br /> </div><br /> </ZestTextboxConfigProvider><br /> );<br />};</p><p class="my-3">export default AppWithCentralConfig;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The resolution order for </code>ZestProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is as follows:</p><p class="my-3">1. <strong>Component-level </code>zest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop:</strong> Explicit props passed directly to a </code>ZestTextbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instance have the highest priority.<br />2. <strong></code>ZestTextboxConfigProvider<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code>value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop:</strong> Defaults provided by the nearest </code>ZestTextboxConfigProvider<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> come next.<br />3. <strong>Hardcoded internal defaults:</strong> If no </code>zest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop is provided on the component and no provider is found (or a specific property isn't defined in the provider), internal hardcoded defaults are used.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Internal Architecture</h2></p><p class="my-3">The </code>ZestTextbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component has been refactored internally for improved maintainability, readability, and reusability. Its core logic is now distributed across several custom React hooks and smaller, focused sub-components. This internal restructuring does <strong>not</strong> introduce any breaking changes to the public API.</p><p class="my-3">The internal structure now includes:<br />* </code>UI/hooks/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Contains custom React hooks (e.g., </code>useThemeDetector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>usePasswordVisibility<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>useCharacterCounter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>useHelperText<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>useZestTextboxConfig<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>useParsedAndValidatedInput<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).<br />* </code>UI/components/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Contains smaller, focused UI components (e.g., </code>PasswordToggleButton<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>CharacterCounter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>ProgressBar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>HelperTextDisplay<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).<br />* </code>UI/utils/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Contains utility functions (e.g., </code>numericInputFilter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>defaultParsersAndValidators<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).<br />* </code>UI/types.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Defines shared TypeScript interfaces and types (e.g., </code>HtmlInputType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>InputParser<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>InputValidator<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>ZestConfigValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>ResolvedZestProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).<br />* </code>UI/contexts/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Contains React Contexts and Providers (e.g., </code>ZestTextboxConfigContext<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>ZestTextboxConfigProvider<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Breaking Changes</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">All custom props (</code>isMultiline<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>zSize<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>stretch<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>theme<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>animatedCounter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>showProgressBar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>onTextChanged<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>helperTextConfig<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) have been removed as top-level props and are now encapsulated within a single </code>zest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object prop.</p><p class="my-3"><strong>Migration Guide:</strong></p><p class="my-3">If you were previously using:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><ZestTextbox<br /> isMultiline<br /> zSize="lg"<br /> theme="dark"<br /> onTextChanged={(value) => console.log(value)}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">You should now update your code to:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><ZestTextbox<br /> zest={{<br /> isMultiline: true,<br /> zSize: "lg",<br /> theme: "dark",<br /> onTextChanged: (value) => console.log(value),<br /> }}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2></p><p class="my-3">Contributions are welcome! If you have a feature request, bug report, or pull request, please feel free to open an issue or submit a PR.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">1. Clone the repository.<br />2. Install dependencies with </code>npm install<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />3. Run the build with </code>npm run build<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />4. The internal architecture now includes </code>UI/hooks<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>UI/components<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>UI/utils<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>UI/contexts` directories for better organization and separation of concerns.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">This project is licensed under the ISC License.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2c:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.0.0\"}]]}],[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.0.0\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"2d:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":9}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@rollup/plugin-typescript\",{\"href\":\"/package/%40rollup%2Fplugin-typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@rollup/plugin-typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^11.1.6\"}]]}],[\"$\",\"$L5\",\"@types/react\",{\"href\":\"/package/%40types%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.2.0\"}]]}],[\"$\",\"$L5\",\"@types/react-dom\",{\"href\":\"/package/%40types%2Freact-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L2f\",\"$undefined\"]}],\"@types/react-dom\"]}],\"$L30\"]}],\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2f:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n30:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.2.0\"}]\n31:[\"$\",\"$L5\",\"postcss\",{\"href\":\"/package/postcss\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.4.38\"}]]}]\n32:[\"$\",\"$L5\",\"rimraf\",{\"href\":\"/package/rimraf\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rimraf\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.0.1\"}]]}]\n33:[\"$\",\"$L5\",\"rollup\",{\"href\":\"/package/rollup\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.13.0\"}]]}]\n34:[\"$\",\"$L5\",\"rollup-plugin-dts\",{\"href\":\"/package/rollup-plugin-dts\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-dts\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.2.3\"}]]}]\n35:[\"$\",\"$L5\",\"rollup-plugin-postcss\",{\"href\":\"/package/rollup-plugin-postcss\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted"])</script><script>self.__next_f.push([1,"-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-postcss\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.2\"}]]}]\n36:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.4.2\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>