+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ outline
+ Boolean
+ No
+ {_('Displays the badge with a white background and colored border/text (default: muted)')}
+
+
+ solid
+ Boolean
+ No
+ {_('Displays the badge with a solid colored background and white text (default: muted)')}
+
+
+ transparent
+ Boolean
+ No
+ {_('Displays the badge with a transparent background and colored border/text (default: muted)')}
+
+
+ padding
+ Number
+ No
+ {_('Sets uniform padding in pixels (default: "2px 8px")')}
+
+
+ color
+ String
+ No
+ {_('Sets a custom CSS color (e.g., "salmon", "#ff0000") for background (solid) or text/border (outline/transparent)')}
+
+
+ info
+ Boolean
+ No
+ {_('Sets a blue background (var(--info))')}
+
+
+ warning
+ Boolean
+ No
+ {_('Sets a yellow background (var(--warning))')}
+
+
+ success
+ Boolean
+ No
+ {_('Sets a green background (var(--success))')}
+
+
+ error
+ Boolean
+ No
+ {_('Sets a red background (var(--error))')}
+
+
+ muted
+ Boolean
+ No
+ {_('Sets a gray background (var(--muted))')}
+
+
+ white
+ Boolean
+ No
+ {_('Sets a white background (var(--white))')}
+
+
+ black
+ Boolean
+ No
+ {_('Sets a black background (var(--black))')}
+
+
+ primary
+ Boolean
+ No
+ {_('Sets a theme-defined primary color background (var(--primary))')}
+
+
+ secondary
+ Boolean
+ No
+ {_('Sets a theme-defined secondary color background (var(--secondary))')}
+
+
+ curved
+ Boolean
+ No
+ {_('Applies a 4px border radius')}
+
+
+ rounded
+ Boolean
+ No
+ {_('Applies a 12px border radius')}
+
+
+ pill
+ Boolean
+ No
+ {_('Applies a 10000px border radius for a pill shape')}
+
+
+
+
+
{_('Types')}
+
+ Badges have predefined color types: info, warning, success, error, and muted.
+
+
+
Info
+
+ {`Info`}
+
+
Warning
+
+ {`Warning`}
+
+
Success
+
+ {`Success`}
+
+
Error
+
+ {`Error`}
+
+
Muted
+
+ {`Muted`}
+
+
+
{_('Custom Color')}
+
Badges support custom CSS colors for background (solid) or text/border (outline/transparent).
+
+
Salmon
+
+ {`Salmon`}
+
+
Orange
+
+ {`Orange`}
+
+
Transparent
+
+ {`Transparent`}
+
+
+
{_('Rounded')}
+
Badges can have curved (4px), rounded (12px), or pill-shaped (10000px) corners.
+
+
Curved
+
+ {`Curved`}
+
+
Rounded
+
+ {`Rounded`}
+
+
Pill
+
+ {`Pill`}
+
+
+
{_('Padding')}
+
Adjust padding with the padding prop (default: 2px 8px).
+
+
Padding 4
+
+ {`Padding 4`}
+
+
Padding 10
+
+ {`Padding 10`}
+
+
Tight
+
+ {`Tight`}
+
+
+
{_('Combinations')}
+
Combine props and Ink utilities for custom badge styles.
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ crumbs
+ Array
+ Yes
+ {_('Array of objects with icon, label, and href properties')}
+
+
+ link
+ Object
+ No
+ {_('Props to customize link color (e.g., { primary: true })')}
+
+
+ sep
+ Object
+ No
+ {_('Props to customize separator icon (e.g., { muted: true })')}
+
+
+ icon
+ Object
+ No
+ {_('Props to customize crumb icons (e.g., { size: "lg" })')}
+
+
+ size
+ String
+ No
+ {_('Sets font size (e.g., "md", "lg")')}
+
+
+ xs
+ Boolean
+ No
+ {_('Sets font size to 10px')}
+
+
+ sm
+ Boolean
+ No
+ {_('Sets font size to 12px')}
+
+
+ md
+ Boolean
+ No
+ {_('Sets font size to 14px')}
+
+
+ lg
+ Boolean
+ No
+ {_('Sets font size to 16px')}
+
+
+ xl
+ Boolean
+ No
+ {_('Sets font size to 18px')}
+
+
+ xl2
+ Boolean
+ No
+ {_('Sets font size to 20px')}
+
+
+ xl3
+ Boolean
+ No
+ {_('Sets font size to 22px')}
+
+
+ xl4
+ Boolean
+ No
+ {_('Sets font size to 24px')}
+
+
+ xl5
+ Boolean
+ No
+ {_('Sets font size to 26px')}
+
+
+ color
+ String
+ No
+ {_('Sets custom text color (e.g., "salmon", "#ff0000")')}
+
+
+ white
+ Boolean
+ No
+ {_('Sets text color to var(--white)')}
+
+
+ black
+ Boolean
+ No
+ {_('Sets text color to var(--black)')}
+
+
+ info
+ Boolean
+ No
+ {_('Sets text color to var(--info)')}
+
+
+ warning
+ Boolean
+ No
+ {_('Sets text color to var(--warning)')}
+
+
+ success
+ Boolean
+ No
+ {_('Sets text color to var(--success)')}
+
+
+ error
+ Boolean
+ No
+ {_('Sets text color to var(--error)')}
+
+
+ muted
+ Boolean
+ No
+ {_('Sets text color to var(--muted)')}
+
+
+ primary
+ Boolean
+ No
+ {_('Sets text color to var(--primary)')}
+
+
+ secondary
+ Boolean
+ No
+ {_('Sets text color to var(--secondary)')}
+
+
+ spacing
+ Number
+ No
+ {_('Sets separator margin in pixels (default: 0)')}
+
+
+ bold
+ Boolean
+ No
+ {_('Sets non-link text to bold')}
+
+
+ underline
+ Boolean
+ No
+ {_('Underlines links')}
+
+
+ block
+ Boolean
+ No
+ {_('Sets display to block (default)')}
+
+
+ inline
+ Boolean
+ No
+ {_('Sets display to inline')}
+
+
+ flex
+ Boolean
+ No
+ {_('Sets display to flex with centered items')}
+
+
+
+
+
{_('Basic Usage')}
+
Basic breadcrumb navigation with icons and links.
+
+
+
+ {`
+
+
+ `}
+
+
+
{_('Colors')}
+
Customize text, link, and separator colors.
+
+
+
+ {`
+
+ `}
+
+
+
+ {`
+
+ `}
+
+
+
+ {`
+
+ `}
+
+
+
{_('Sizes')}
+
Adjust font and icon sizes.
+
+
+
+ {`
+
+ `}
+
+
+
+ {`
+
+ `}
+
+
+
+ {`
+
+ `}
+
+
+
{_('Styles')}
+
Combine display, boldness, underlines, and spacing.
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ name
+ String
+ Yes
+ {_('Font Awesome icon name (e.g., "info-circle", "star")')}
+
+
+ solid
+ Boolean
+ No
+ {_('Uses solid icon style (default)')}
+
+
+ brand
+ Boolean
+ No
+ {_('Uses brand icon style (overrides solid)')}
+
+
+ size
+ String
+ No
+ {_('Sets custom font size (e.g., "md", "lg")')}
+
+
+ xs
+ Boolean
+ No
+ {_('Sets font size to 10px')}
+
+
+ sm
+ Boolean
+ No
+ {_('Sets font size to 12px')}
+
+
+ md
+ Boolean
+ No
+ {_('Sets font size to 14px')}
+
+
+ lg
+ Boolean
+ No
+ {_('Sets font size to 16px')}
+
+
+ xl
+ Boolean
+ No
+ {_('Sets font size to 18px')}
+
+
+ xl2
+ Boolean
+ No
+ {_('Sets font size to 20px')}
+
+
+ xl3
+ Boolean
+ No
+ {_('Sets font size to 22px')}
+
+
+ xl4
+ Boolean
+ No
+ {_('Sets font size to 24px')}
+
+
+ xl5
+ Boolean
+ No
+ {_('Sets font size to 26px')}
+
+
+ color
+ String
+ No
+ {_('Sets custom color (e.g., "salmon", "#ff0000")')}
+
+
+ white
+ Boolean
+ No
+ {_('Sets color to var(--white)')}
+
+
+ black
+ Boolean
+ No
+ {_('Sets color to var(--black)')}
+
+
+ info
+ Boolean
+ No
+ {_('Sets color to var(--info)')}
+
+
+ warning
+ Boolean
+ No
+ {_('Sets color to var(--warning)')}
+
+
+ success
+ Boolean
+ No
+ {_('Sets color to var(--success)')}
+
+
+ error
+ Boolean
+ No
+ {_('Sets color to var(--error)')}
+
+
+ muted
+ Boolean
+ No
+ {_('Sets color to var(--muted)')}
+
+
+ primary
+ Boolean
+ No
+ {_('Sets color to var(--primary)')}
+
+
+ secondary
+ Boolean
+ No
+ {_('Sets color to var(--secondary)')}
+
+
+
+
+
{_('Basic Usage')}
+
Basic icons with default solid style.
+
+
+
+
+
+ {`
+
+
+
+ `}
+
+
+
{_('Colors')}
+
Customize icon colors with predefined or custom values.
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ total
+ Number
+ No
+ {_('Total number of items (default: 0)')}
+
+
+ start
+ Number
+ No
+ {_('Starting index of current range (default: 0)')}
+
+
+ range
+ Number
+ No
+ {_('Items per page (default: 50)')}
+
+
+ radius
+ Number
+ No
+ {_('Number of pages shown before/after current page (default: 2)')}
+
+
+ next
+ Boolean
+ No
+ {_('Shows next page button')}
+
+
+ prev
+ Boolean
+ No
+ {_('Shows previous page button')}
+
+
+ rewind
+ Boolean
+ No
+ {_('Shows first page button')}
+
+
+ forward
+ Boolean
+ No
+ {_('Shows last page button')}
+
+
+ link
+ Object
+ No
+ {_('Sets link color (e.g., { primary: true })')}
+
+
+ control
+ Object
+ No
+ {_('Sets control icon props (e.g., { info: true })')}
+
+
+ border
+ Object
+ No
+ {_('Sets border color (e.g., { black: true })')}
+
+
+ background
+ Object
+ No
+ {_('Sets background color (e.g., { info: true })')}
+
+
+ square
+ Number
+ No
+ {_('Sets width and height in pixels for square layout (default: 0)')}
+
+
+ size
+ String
+ No
+ {_('Sets font size (e.g., "md", "lg")')}
+
+
+ xs
+ Boolean
+ No
+ {_('Sets font size to 10px')}
+
+
+ sm
+ Boolean
+ No
+ {_('Sets font size to 12px')}
+
+
+ md
+ Boolean
+ No
+ {_('Sets font size to 14px')}
+
+
+ lg
+ Boolean
+ No
+ {_('Sets font size to 16px')}
+
+
+ xl
+ Boolean
+ No
+ {_('Sets font size to 18px')}
+
+
+ xl2
+ Boolean
+ No
+ {_('Sets font size to 20px')}
+
+
+ xl3
+ Boolean
+ No
+ {_('Sets font size to 22px')}
+
+
+ xl4
+ Boolean
+ No
+ {_('Sets font size to 24px')}
+
+
+ xl5
+ Boolean
+ No
+ {_('Sets font size to 26px')}
+
+
+ color
+ String
+ No
+ {_('Sets text color (e.g., "salmon", "#ff0000")')}
+
+
+ white
+ Boolean
+ No
+ {_('Sets text color to var(--white)')}
+
+
+ black
+ Boolean
+ No
+ {_('Sets text color to var(--black)')}
+
+
+ info
+ Boolean
+ No
+ {_('Sets text color to var(--info)')}
+
+
+ warning
+ Boolean
+ No
+ {_('Sets text color to var(--warning)')}
+
+
+ success
+ Boolean
+ No
+ {_('Sets text color to var(--success)')}
+
+
+ error
+ Boolean
+ No
+ {_('Sets text color to var(--error)')}
+
+
+ muted
+ Boolean
+ No
+ {_('Sets text color to var(--muted)')}
+
+
+ primary
+ Boolean
+ No
+ {_('Sets text color to var(--primary)')}
+
+
+ secondary
+ Boolean
+ No
+ {_('Sets text color to var(--secondary)')}
+
+
+ bold
+ Boolean
+ No
+ {_('Makes current page number bold')}
+
+
+ underline
+ Boolean
+ No
+ {_('Underlines page links')}
+
+
+ page
+ Function
+ No
+ {_('Callback function when a page is selected (receives page number)')}
+
+
+
+
+
{_('Basic Usage')}
+
Simple pagination with page numbers.
+
+
+
+ {`
+
+ `}
+
+
+
{_('Controls')}
+
Add navigation controls for first, previous, next, and last pages.
+
+
+
+ {`
+
+ `}
+
+
+
{_('Styling')}
+
Customize colors, borders, and text styles.
+
+
+
+ {`
+
+ `}
+
+
+
+ {`
+
+ `}
+
+
+
{_('Customizations')}
+
Combine size, radius, square layout, and callback functionality.
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ width
+ Number
+ No
+ {_('Progress percentage (0-100, default: 0)')}
+
+
+ height
+ Number
+ No
+ {_('Height of the progress bar in pixels (default: 20)')}
+
+
+ bg
+ Object
+ No
+ {_('Background color of the container (e.g., { muted: true })')}
+
+
+ color
+ String
+ No
+ {_('Bar color (e.g., "salmon", "#ff0000")')}
+
+
+ white
+ Boolean
+ No
+ {_('Sets bar color to var(--white)')}
+
+
+ black
+ Boolean
+ No
+ {_('Sets bar color to var(--black)')}
+
+
+ info
+ Boolean
+ No
+ {_('Sets bar color to var(--info)')}
+
+
+ warning
+ Boolean
+ No
+ {_('Sets bar color to var(--warning)')}
+
+
+ success
+ Boolean
+ No
+ {_('Sets bar color to var(--success)')}
+
+
+ error
+ Boolean
+ No
+ {_('Sets bar color to var(--error)')}
+
+
+ muted
+ Boolean
+ No
+ {_('Sets bar color to var(--muted)')}
+
+
+ primary
+ Boolean
+ No
+ {_('Sets bar color to var(--primary)')}
+
+
+ secondary
+ Boolean
+ No
+ {_('Sets bar color to var(--secondary)')}
+
+
+
+
+
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ group
+ String
+ Yes
+ {_('Groups tabs together; only one tab per group can be active')}
+
+
+ selector
+ String
+ Yes
+ {_('CSS selector for content to show/hide (e.g., "#content-id")')}
+
+
+ active
+ String
+ No
+ {_('Space-separated classes for active state (default: "")')}
+
+
+ inactive
+ String
+ No
+ {_('Space-separated classes for inactive state (default: "")')}
+
+
+ on
+ Boolean
+ No
+ {_('Sets tab as initially active')}
+
+
+
+
+
{_('Basic Usage')}
+
Basic tab setup with content switching.
+
+
+ Tab 1
+ Tab 2
+
+
Content for Tab 1
+
Content for Tab 2
+
+ {`
+
+ Tab 1
+ Tab 2
+
+
Content for Tab 1
+
Content for Tab 2
+ `}
+
+
+
{_('Styling')}
+
Customize active and inactive states with classes.
+
+ {_('Property')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ top
+ String | Number
+ No
+ {_('Makes headers sticky at the top (e.g., "10" or "10px"). Defaults to "0".')}
+
+
+ bottom
+ String | Number
+ No
+ {_('Makes footers sticky at the bottom (e.g., "10" or "10px"). Defaults to "0".')}
+
+
+ left
+ String | Number
+ No
+ {_('Makes first column sticky on the left (e.g., "10" or "10px"). Defaults to "0".')}
+
+
+ right
+ String | Number
+ No
+ {_('Makes last column sticky on the right (e.g., "10" or "10px"). Defaults to "0".')}
+
+
+ head
+ String
+ No
+ {_('Classes for headers (e.g., "bg-primary tx-white").')}
+
+
+ body
+ String
+ No
+ {_('Classes for body cells (e.g., "py-12 px-10").')}
+
+
+ odd
+ String
+ No
+ {_('Classes for odd rows (e.g., "bg-t-0").')}
+
+
+ even
+ String
+ No
+ {_('Classes for even rows (e.g., "bg-t-1").')}
+
+
+ foot
+ String
+ No
+ {_('Classes for footers (e.g., "bg-t-2").')}
+
+
+ nowrap
+ Boolean
+ No
+ {_('Prevents text wrapping in cells (e.g., nowrap="").')}
+
+
+ wrap1
+ Boolean
+ No
+ {_('Sets cell width to 100px (e.g., wrap1="").')}
+
+
+ wrap2
+ Boolean
+ No
+ {_('Sets cell width to 200px (e.g., wrap2="").')}
+
+
+ wrap3
+ Boolean
+ No
+ {_('Sets cell width to 300px (e.g., wrap3="").')}
+
+
+ wrap4
+ Boolean
+ No
+ {_('Sets cell width to 400px (e.g., wrap4="").')}
+
+
+ wrap5
+ Boolean
+ No
+ {_('Sets cell width to 500px (e.g., wrap5="").')}
+
+
+
+
+
{_('Outline Example')}
+
{_('A simple table with alternating row colors.')}
+
+ {_('Name')}
+ {_('Role')}
+ {_('Status')}
+
+ John Doe
+ Developer
+ Active
+
+
+ Jane Smith
+ Designer
+ Pending
+
+
+ {`
+
+ {_('Name')}
+ {_('Role')}
+ {_('Status')}
+
+ John Doe
+ Developer
+ Active
+
+
+ Jane Smith
+ Designer
+ Pending
+
+
+ `}
+
+
+
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ top
+ Boolean | Number | String
+ No
+ {_('Position from top (true = 0px, number = px, string = custom)')}
+
+
+ bottom
+ Boolean | Number | String
+ No
+ {_('Position from bottom (true = 0px, number = px, string = custom)')}
+
+
+ left
+ Boolean | Number | String
+ No
+ {_('Position from left (true = 0px, number = px, string = custom)')}
+
+
+ right
+ Boolean | Number | String
+ No
+ {_('Position from right (true = 0px, number = px, string = custom)')}
+
+
+ color
+ String
+ No
+ {_('Text color (e.g., "salmon", "#ff0000")')}
+
+
+ white
+ Boolean
+ No
+ {_('Sets text color to var(--white)')}
+
+
+ black
+ Boolean
+ No
+ {_('Sets text color to var(--black)')}
+
+
+ info
+ Boolean
+ No
+ {_('Sets text color to var(--info)')}
+
+
+ warning
+ Boolean
+ No
+ {_('Sets text color to var(--warning)')}
+
+
+ success
+ Boolean
+ No
+ {_('Sets text color to var(--success)')}
+
+
+ error
+ Boolean
+ No
+ {_('Sets text color to var(--error)')}
+
+
+ muted
+ Boolean
+ No
+ {_('Sets text color to var(--muted)')}
+
+
+ primary
+ Boolean
+ No
+ {_('Sets text color to var(--primary)')}
+
+
+ secondary
+ Boolean
+ No
+ {_('Sets text color to var(--secondary)')}
+
+
+ background
+ Object
+ No
+ {_('Background color (e.g., { info: true })')}
+
+
+ curved
+ Boolean
+ No
+ {_('Sets border-radius to 4px')}
+
+
+ curve
+ Number
+ No
+ {_('Sets custom border-radius in pixels')}
+
+
+ center
+ Boolean
+ No
+ {_('Centers text horizontally')}
+
+
+ padding
+ Number
+ No
+ {_('Sets padding in pixels')}
+
+
+ opacity
+ Number
+ No
+ {_('Sets opacity (0-100)')}
+
+
+ width
+ String | Number
+ No
+ {_('Sets width ("auto" or pixels, default: "auto")')}
+
+
+
+
+
{_('Basic Usage')}
+
A simple tooltip that appears on hover.
+
+
+ Hover me
+ Tooltip text
+
+
+ {`
+
+ Hover me
+ Tooltip text
+
+ `}
+
+
+
{_('Position')}
+
Adjust tooltip position with top, bottom, left, or right.
+
+
+ Top
+ Top Tooltip
+
+
+ Bottom
+ Bottom Tooltip
+
+
+ Left
+ Left Tooltip
+
+
+ Right
+ Right Tooltip
+
+
Customize appearance with colors, curves, padding, and more.
+
+
+ Info
+ This is the first and last name
+
+
+ Success
+ Success Tooltip
+
+
+ Warning
+ Warning Tooltip
+
+
+ Custom Width
+ Custom Width Tooltip
+
+
+ {`
+
+ Info
+ This is the first and last name
+
+
+ Success
+ Success Tooltip
+
+ `}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/ink-web/src/pages/ui/elements/alert.ink b/packages/ink-web/src/pages/ui/elements/alert.ink
deleted file mode 100644
index 71e2314..0000000
--- a/packages/ink-web/src/pages/ui/elements/alert.ink
+++ /dev/null
@@ -1,110 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {_('Alert')}
-
-
-
- import Alert from '@stackpress/ink-ui/element/alert';
-
-
-
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ name
+ String
+ No
+ {_('Name attribute for the checkbox')}
+
+
+ label
+ String
+ No
+ {_('Text displayed next to the checkbox (default: "")')}
+
+
+ value
+ String
+ No
+ {_('Value attribute when checked')}
+
+
+ checked
+ Boolean
+ No
+ {_('Initial checked state')}
+
+
+ disabled
+ Boolean
+ No
+ {_('Disables the checkbox')}
+
+
+ readonly
+ Boolean
+ No
+ {_('Makes the checkbox read-only')}
+
+
+ required
+ Boolean
+ No
+ {_('Marks the checkbox as required')}
+
+
+ white
+ Boolean
+ No
+ {_('Sets checkbox color to var(--white)')}
+
+
+ black
+ Boolean
+ No
+ {_('Sets checkbox color to var(--black)')}
+
+
+ info
+ Boolean
+ No
+ {_('Sets checkbox color to var(--info)')}
+
+
+ warning
+ Boolean
+ No
+ {_('Sets checkbox color to var(--warning)')}
+
+
+ success
+ Boolean
+ No
+ {_('Sets checkbox color to var(--success)')}
+
+
+ error
+ Boolean
+ No
+ {_('Sets checkbox color to var(--error)')}
+
+
+ muted
+ Boolean
+ No
+ {_('Sets checkbox color to var(--muted)')}
+
+
+ primary
+ Boolean
+ No
+ {_('Sets checkbox color to var(--primary)')}
+
+
+ secondary
+ Boolean
+ No
+ {_('Sets checkbox color to var(--secondary)')}
+
+
+ orange
+ Boolean
+ No
+ {_('Sets checkbox color to orange (custom utility)')}
+
+
+ rounded
+ Boolean
+ No
+ {_('Sets checkbox to a rounded square shape')}
+
+
+ circle
+ Boolean
+ No
+ {_('Sets checkbox to a circular shape')}
+
+
+ update
+ Function
+ No
+ {_('Callback function on change (receives event)')}
+
+
+ click
+ Function
+ No
+ {_('Custom click handler')}
+
+
+
+
+
{_('Basic Usage')}
+
A simple checkbox with a label.
+
+
+
+ {`
+
+ `}
+
+
+
{_('States')}
+
Checkbox with different states: checked, disabled, required.
+
+
+
+
+
+ {`
+
+
+
+ `}
+
+
+
{_('Shape')}
+
Checkbox with different shapes: default (square), rounded, circle.
+
+
+ import Color from '@stackpress/ink-ui/field/color';
+
+
+
+
+
{_('Props')}
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ autocomplete
+ String
+ No
+ {_('Autocomplete attribute (e.g., "off")')}
+
+
+ name
+ String
+ No
+ {_('Name attribute for form submission')}
+
+
+ required
+ Boolean
+ No
+ {_('Marks the field as required')}
+
+
+ value
+ String
+ No
+ {_('Initial color value (e.g., "#ff69b4")')}
+
+
+ placeholder
+ String
+ No
+ {_('Placeholder text for the text input')}
+
+
+
+
+
{_('Basic Usage')}
+
A simple color field with a placeholder.
+
+
+
+ {`
+
+ `}
+
+
+
{_('States')}
+
Color field with different states: value, required.
+
+
+
+
+ {`
+
+
+ `}
+
+
+
{_('Custom Styling')}
+
Color field with custom styling and initial value.
+
+
+ import Country from '@stackpress/ink-ui/field/country';
+
+
+
+
+
{_('Props')}
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ name
+ String
+ No
+ {_('Name attribute for form submission')}
+
+
+ value
+ String | Array
+ No
+ {_('Initial selected country code(s) (e.g., "US")')}
+
+
+ placeholder
+ String
+ No
+ {_('Placeholder text when no country is selected (default: "Select Country")')}
+
+
+ open
+ Function
+ No
+ {_('Callback when dropdown opens')}
+
+
+ close
+ Function
+ No
+ {_('Callback when dropdown closes')}
+
+
+ filter
+ Function
+ No
+ {_('Callback when search input changes')}
+
+
+ select
+ Function
+ No
+ {_('Callback when a country is selected')}
+
+
+ remove
+ Function
+ No
+ {_('Callback when a country is removed')}
+
+
+ add
+ Function
+ No
+ {_('Callback when add button is clicked (if enabled)')}
+
+
+ clear
+ Function
+ No
+ {_('Callback when clear button is clicked')}
+
+
+ change
+ Function
+ No
+ {_('Callback when selection changes')}
+
+
+ update
+ Function
+ No
+ {_('Callback for general updates')}
+
+
+
+
+
{_('Basic Usage')}
+
A simple country selector with a placeholder.
+
+
+
+ {`
+
+ `}
+
+
+
{_('Events')}
+
Country field with event handlers for interaction logging.
+
+
+ import Date from '@stackpress/ink-ui/field/date';
+
+
+
+
+
{_('Props')}
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ autocomplete
+ String
+ No
+ {_('Autocomplete attribute (e.g., "off")')}
+
+
+ disabled
+ Boolean
+ No
+ {_('Disables the date picker')}
+
+
+ name
+ String
+ No
+ {_('Name attribute for form submission')}
+
+
+ pattern
+ String
+ No
+ {_('Regex pattern for validation (e.g., "[0-9]{4}-[0-9]{2}-[0-9]{2}")')}
+
+
+ readonly
+ Boolean
+ No
+ {_('Makes the date picker read-only')}
+
+
+ required
+ Boolean
+ No
+ {_('Marks the field as required')}
+
+
+ value
+ String | Date
+ No
+ {_('Initial date value (e.g., "2020-01-01" or Date object), converted to YYYY-MM-DD')}
+
+
+ placeholder
+ String
+ No
+ {_('Placeholder text for the date input')}
+
+
+ change
+ Function
+ No
+ {_('Callback for change event (receives ChangeEvent)')}
+
+
+ update
+ Function
+ No
+ {_('Callback with formatted date string (YYYY-MM-DD)')}
+
+
+
+
+
{_('Basic Usage')}
+
A simple date field with a placeholder.
+
+
+
+ {`
+
+ `}
+
+
+
{_('States')}
+
Date field with different states: value, disabled, required.
+
+
+
+
+
+ {`
+
+
+
+ `}
+
+
+
{_('Custom Styling')}
+
Date field with custom styling, initial value, and update callback.
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ autocomplete
+ String
+ No
+ {_('Autocomplete attribute (e.g., "off")')}
+
+
+ disabled
+ Boolean
+ No
+ {_('Disables the datetime picker')}
+
+
+ name
+ String
+ No
+ {_('Name attribute for form submission')}
+
+
+ pattern
+ String
+ No
+ {_('Regex pattern for validation (e.g., "[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}")')}
+
+
+ readonly
+ Boolean
+ No
+ {_('Makes the datetime picker read-only')}
+
+
+ required
+ Boolean
+ No
+ {_('Marks the field as required')}
+
+
+ value
+ String | Date
+ No
+ {_('Initial datetime value (e.g., "2020-01-01T13:20:10" or Date object), converted to ISO without Z')}
+
+
+ placeholder
+ String
+ No
+ {_('Placeholder text for the datetime input')}
+
+
+ change
+ Function
+ No
+ {_('Callback for change event (receives ChangeEvent)')}
+
+
+ update
+ Function
+ No
+ {_('Callback with formatted datetime string (e.g., "2020-01-01T13:20:10")')}
+
+
+
+
+
{_('Basic Usage')}
+
A simple datetime field with a placeholder.
+
+
+
+ {`
+
+ `}
+
+
+
{_('States')}
+
Datetime field with different states: value, disabled, required.
+
+
+
+
+
+ {`
+
+
+
+ `}
+
+
+
{_('Custom Styling')}
+
Datetime field with custom styling, initial value, and update callback.
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ name
+ String
+ No
+ {_('Name attribute for form submission')}
+
+
+ value
+ Array
+ No
+ {_('Initial array of file URLs (default: [])')}
+
+
+ image
+ Boolean
+ No
+ {_('Restricts to images and shows previews')}
+
+
+ uploading
+ String
+ No
+ {_('Text during upload (default: "Uploading...")')}
+
+
+ upload
+ Function
+ No
+ {_('Upload handler (files, next) => void; next receives URL array')}
+
+
+ change
+ Function
+ No
+ {_('Callback for change event (receives ChangeEvent)')}
+
+
+ update
+ Function
+ No
+ {_('Callback with updated URL array (not implemented in source)')}
+
+
+
+
+
{_('Basic Usage')}
+
A simple filelist field without upload handling.
+
+
+
+ {`
+
+ `}
+
+
+
{_('Image Mode')}
+
Filelist field restricted to images, showing previews of uploaded files after a mock upload (uses a static URL for demo; replace upload function for real URLs).
+
+
+
+ {`
+
+
+ `}
+
+
+
{_('Default Values')}
+
Filelist field with preloaded image URLs and removal options.
+
+
+
+ {`
+
+ `}
+
+
+
{_('Custom Upload')}
+
Filelist field with custom upload function and update callback.
+
+
+ import Radio from '@stackpress/ink-ui/field/radio';
+
+
+
+
+
{_('Props')}
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ checked
+ Boolean
+ No
+ {_('Initial checked state')}
+
+
+ disabled
+ Boolean
+ No
+ {_('Disables the radio')}
+
+
+ name
+ String
+ No
+ {_('Name attribute for form submission and grouping')}
+
+
+ readonly
+ Boolean
+ No
+ {_('Prevents changing the radio state')}
+
+
+ required
+ Boolean
+ No
+ {_('Marks the radio group as required in a form')}
+
+
+ value
+ String
+ No
+ {_('Value of the radio option')}
+
+
+ label
+ String
+ No
+ {_('Text label for the radio (default: "")')}
+
+
+ change
+ Function
+ No
+ {_('Callback for change event')}
+
+
+ update
+ Function
+ No
+ {_('Callback with updated value')}
+
+
+
+
+
{_('Simple Radio')}
+
A basic radio button with a square shape.
+
+
+
+ {`
+
+ `}
+
+
+
{_('Styled Group')}
+
A group of radio buttons with rounded shapes, spacing, and update callback.
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ name
+ String
+ No
+ {_('Name attribute for form submission')}
+
+
+ value
+ String | Array
+ No
+ {_('Initial value(s); string for single, array for multiple')}
+
+
+ placeholder
+ String
+ No
+ {_('Text when no option is selected (default: "Choose Option")')}
+
+
+ custom
+ Boolean
+ No
+ {_('Enables adding custom options via input')}
+
+
+ search
+ Boolean
+ No
+ {_('Enables search filtering of options')}
+
+
+ multiple
+ Boolean
+ No
+ {_('Allows multiple selections (assumed supported)')}
+
+
+ open
+ Function
+ No
+ {_('Callback when dropdown opens')}
+
+
+ close
+ Function
+ No
+ {_('Callback when dropdown closes')}
+
+
+ filter
+ Function
+ No
+ {_('Callback on search input change')}
+
+
+ select
+ Function
+ No
+ {_('Callback when an option is selected')}
+
+
+ remove
+ Function
+ No
+ {_('Callback when an option is removed')}
+
+
+ add
+ Function
+ No
+ {_('Callback when a custom option is added')}
+
+
+ clear
+ Function
+ No
+ {_('Callback when selections are cleared')}
+
+
+ change
+ Function
+ No
+ {_('Callback on selection change')}
+
+
+ update
+ Function
+ No
+ {_('Callback with updated value(s)')}
+
+
+ class
+ String
+ No
+ {_('Custom CSS classes for the host element')}
+
+
+
+
+
{_('Basic Usage')}
+
A simple single-select dropdown with options.
+
+
+
+
+
+
+
+ {`
+
+
+
+
+
+ `}
+
+
+
{_('With Search')}
+
A select field with search and multiple selection.
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ checked
+ Boolean
+ No
+ {_('Sets the switch to checked state initially.')}
+
+
+ disabled
+ Boolean
+ No
+ {_('Disables the switch.')}
+
+
+ name
+ String
+ No
+ {_('Name attribute for form submission.')}
+
+
+ readonly
+ Boolean
+ No
+ {_('Makes the switch read-only.')}
+
+
+ required
+ Boolean
+ No
+ {_('Marks the switch as required in a form.')}
+
+
+ value
+ String
+ No
+ {_('Value submitted when checked.')}
+
+
+ label
+ String
+ No
+ {_('Text displayed next to the switch. Defaults to empty string.')}
+
+
+ change
+ Function
+ No
+ {_('Callback triggered on switch change event.')}
+
+
+ update
+ Function
+ No
+ {_('Callback triggered with the switch value on change.')}
+
+
+ onoff
+ Boolean
+ No
+ {_('Displays "ON" and "OFF" in the switch.')}
+
+
+ yesno
+ Boolean
+ No
+ {_('Displays "YES" and "NO" in the switch.')}
+
+
+ checkex
+ Boolean
+ No
+ {_('Displays check (✓) and cross (✖) symbols in the switch.')}
+
+
+ sunmoon
+ Boolean
+ No
+ {_('Displays sun (☼) and moon (☽) symbols in the switch.')}
+
+
+ rounded
+ Boolean
+ No
+ {_('Rounds the switch track and thumb.')}
+
+
+ ridge
+ Boolean
+ No
+ {_('Adds ridges ("|||") to the switch thumb.')}
+
+
+ smooth
+ Boolean
+ No
+ {_('Makes the switch thumb smooth (no content).')}
+
+
+ blue
+ Boolean
+ No
+ {_('Applies a blue color scheme to the switch.')}
+
+
+ orange
+ Boolean
+ No
+ {_('Applies an orange color scheme to the switch.')}
+
+
+ green
+ Boolean
+ No
+ {_('Applies a green color scheme to the switch.')}
+
+
+ error
+ Boolean
+ No
+ {_('Indicates an error state (not styled by default).')}
+
+
+
+
+
{_('Basic Usage')}
+
{_('A simple switch with a label and default styling.')}
+
+
+
+ {`
+
+ `}
+
+
+
{_('States')}
+
{_('Switch field with different states.')}
+
+
+
+
+
+ {`
+
+
+
+ `}
+
+
+
{_('Styles')}
+
{_('Switch field with different styling options.')}
+
+
+
+
+
+ {`
+
+
+
+ `}
+
+
+
{_('Variations')}
+
{_('Switch field with different text/symbols and colors.')}
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ name
+ String
+ No
+ {_('Name attribute for hidden inputs, used in form submission.')}
+
+
+ value
+ Array | String
+ No
+ {_('Initial tags. Can be an array or comma-separated string. Defaults to empty array.')}
+
+
+ placeholder
+ String
+ No
+ {_('Placeholder text for the input field.')}
+
+
+ change
+ Function
+ No
+ {_('Callback triggered on input change event.')}
+
+
+ update
+ Function
+ No
+ {_('Callback triggered with updated tag list on add/remove.')}
+
+
+ info
+ Boolean
+ No
+ {_('Sets tag background to info color (e.g., blue).')}
+
+
+ warning
+ Boolean
+ No
+ {_('Sets tag background to warning color (default: yellow).')}
+
+
+ success
+ Boolean
+ No
+ {_('Sets tag background to success color (e.g., green).')}
+
+
+ error
+ Boolean
+ No
+ {_('Sets tag background to error color (e.g., red).')}
+
+
+ muted
+ Boolean
+ No
+ {_('Sets tag background to muted color (e.g., gray).')}
+
+
+ primary
+ Boolean
+ No
+ {_('Sets tag background to primary color (e.g., blue).')}
+
+
+ secondary
+ Boolean
+ No
+ {_('Sets tag background to secondary color (e.g., gray).')}
+
+
+ color
+ String
+ No
+ {_('Custom background color for tags (e.g., "#FF0000"). Overrides other color props.')}
+
+
+ class
+ String
+ No
+ {_('Custom CSS classes for the taglist container (e.g., "w-250").')}
+
+
+
+
+
{_('Basic Usage')}
+
{_('A simple taglist with initial values and a placeholder.')}
+
+
+
+ {`
+
+ `}
+
+
+
{_('States')}
+
{_('Taglist with different initial states.')}
+
+
+
+
+
+ {`
+
+
+
+ `}
+
+
+
{_('Color Variations')}
+
{_('Taglist with different background colors for tags.')}
+
+
+
+
+
+
+ {`
+
+
+
+
+ `}
+
+
+
{_('Custom Styling')}
+
{_('Taglist with custom width, initial values, and update callback.')}
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ disabled
+ Boolean
+ No
+ {_('Disables the textarea.')}
+
+
+ name
+ String
+ No
+ {_('Name attribute for form submission.')}
+
+
+ placeholder
+ String
+ No
+ {_('Placeholder text displayed in the textarea.')}
+
+
+ readonly
+ Boolean
+ No
+ {_('Makes the textarea read-only.')}
+
+
+ required
+ Boolean
+ No
+ {_('Marks the textarea as required in a form.')}
+
+
+ rows
+ Number
+ No
+ {_('Number of visible text rows.')}
+
+
+ change
+ Function
+ No
+ {_('Callback triggered on textarea change event.')}
+
+
+ update
+ Function
+ No
+ {_('Callback triggered with the textarea value on change.')}
+
+
+ class
+ String
+ No
+ {_('Custom CSS classes for styling (e.g., "w-300 h-100").')}
+
+
+
+
+
{_('Basic Usage')}
+
{_('A simple textarea with initial content and a placeholder.')}
+
+ Some Text
+
+ {`
+ Some Text
+ `}
+
+
+
{_('States')}
+
{_('Textarea field with different states.')}
+
+ Can't edit
+ Read me
+ Must fill
+
+ {`
+ Can't edit
+ Read me
+ Must fill
+ `}
+
+
+
{_('Custom Styling')}
+
{_('Textarea with custom size, rows, and update callback.')}
+
+ console.log('Textarea updated:', value)}
+ >Some Text
+
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ name
+ String
+ No
+ {_('Name attribute for text inputs, typically with "[]" for array submission (e.g., "textlist[]").')}
+
+
+ value
+ Array
+ No
+ {_('Initial list of text values. Defaults to empty array.')}
+
+
+ add
+ String
+ No
+ {_('Text for the add button. Defaults to "Add".')}
+
+
+ update
+ Function
+ No
+ {_('Callback triggered with updated list values (not implemented in source).')}
+
+
+ class
+ String
+ No
+ {_('Custom CSS classes for the textlist container (e.g., "w-300").')}
+
+
+
+
+
{_('Basic Usage')}
+
{_('A simple textlist with initial values and a placeholder.')}
+
+
+
+ {`
+
+ `}
+
+
+
{_('States')}
+
{_('Textlist field with different initial states.')}
+
+
+
+
+
+ {`
+
+
+
+ `}
+
+
+
{_('Custom Styling')}
+
{_('Textlist with custom width, button text, and update callback.')}
+
+
+ import Time from '@stackpress/ink-ui/field/time';
+
+
+
+
+
{_('Props')}
+
+ {_('Name')}
+ {_('Type')}
+ {_('Required')}
+ {_('Notes')}
+
+ autocomplete
+ String
+ No
+ {_('Controls browser autocomplete behavior (e.g., "off").')}
+
+
+ disabled
+ Boolean
+ No
+ {_('Disables the time input.')}
+
+
+ name
+ String
+ No
+ {_('Name attribute for form submission.')}
+
+
+ pattern
+ String
+ No
+ {_('Regular expression pattern for input validation (e.g., "[0-2][0-9]:[0-5][0-9]").')}
+
+
+ placeholder
+ String
+ No
+ {_('Placeholder text displayed in the time input.')}
+
+
+ readonly
+ Boolean
+ No
+ {_('Makes the time input read-only.')}
+
+
+ required
+ Boolean
+ No
+ {_('Marks the time input as required in a form.')}
+
+
+ value
+ String | Number | Date
+ No
+ {_('Initial time value. Accepts timestamp, Date object, or ISO string; formatted as HH:MM.')}
+
+
+ change
+ Function
+ No
+ {_('Callback triggered on time input change event.')}
+
+
+ update
+ Function
+ No
+ {_('Callback triggered with the time value on change.')}
+
+
+ class
+ String
+ No
+ {_('Custom CSS classes for styling (e.g., "w-200").')}
+
+
+
+
+
{_('Basic Usage')}
+
{_('A simple time input with a placeholder and current time.')}
+
+
+
+ {`
+
+ `}
+
+
+
{_('States')}
+
{_('Time field with different states.')}
+
+
+
+
+
+ {`
+
+
+
+ `}
+
+
+
{_('Custom Styling')}
+
{_('Time field with custom width, initial value, and update callback.')}
{_('Customize the editor’s toolbar and behavior with the props below. Use the `class` prop with Ink utilities for responsive styling.')}
+
+ {_('Property')}
+ {_('Type')}
+ {_('Required')}
+ {_('Description')}
+
+
+ value
+ String
+ No
+ {_('Initial content of the editor (defaults to "").')}
+
+
+
+ name
+ String
+ No
+ {_('Name attribute for the underlying `