{ "version": "4.4.0", "count": 313, "groups": [ { "slug": "inputs", "first": "001", "last": "421", "count": 69 }, { "slug": "surfaces", "first": "065", "last": "079", "count": 15 }, { "slug": "feedback", "first": "080", "last": "462", "count": 30 }, { "slug": "display", "first": "104", "last": "433", "count": 51 }, { "slug": "navigation", "first": "146", "last": "470", "count": 29 }, { "slug": "layout", "first": "165", "last": "481", "count": 30 }, { "slug": "charts", "first": "190", "last": "219", "count": 30 }, { "slug": "foundation", "first": "220", "last": "432", "count": 15 }, { "slug": "docs-kit", "first": "232", "last": "236", "count": 5 }, { "slug": "motion", "first": "256", "last": "386", "count": 39 } ], "elements": [ { "id": "001", "group": "inputs", "page": "button", "variant": "FullWidth", "slug": "full-width", "title": "Full width", "description": "fullWidth stretches the button to its container.", "summary": "Two buttons that stretch to the width of their container: a filled primary and an outlined cancel.", "use": "Stacked action pairs in forms, dialogs and bottom sheets where the buttons should span the column.", "spec": [ "`fullWidth` on `Button` makes it fill its parent", "Primary action keeps the default variant, secondary uses `variant=\"outlined\"`", "Wrapper column is `max-width: 320px` with `gap: var(--ca-space-2)`" ], "tags": [ "button", "full-width", "stacked", "actions", "form" ], "shape": "square", "components": [ "Button" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "Button" ] } ], "interactive": false, "demo": "https://ui.codeatlas.com.br/docs/inputs/button#full-width", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "002", "group": "inputs", "page": "button", "variant": "Icons", "slug": "with-icons", "title": "With icons", "description": "Leading and trailing snippets.", "summary": "Buttons with an icon before the label, after the label, and with a ghost download action.", "use": "Actions that benefit from an icon cue: favourite, continue to next step, download.", "spec": [ "Leading icon goes in `{#snippet leading()}` (`Star` from `@lucide/svelte`, `size={15}`)", "Trailing icon goes in `{#snippet trailing()}` (`ArrowRight`, `size={15}`)", "Variants shown: `variant=\"filled\"`, `variant=\"outlined\"`, `variant=\"ghost\"`" ], "tags": [ "button", "icon", "leading", "trailing", "snippet" ], "shape": "wide", "components": [ "Button" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "Button" ] } ], "interactive": false, "demo": "https://ui.codeatlas.com.br/docs/inputs/button#with-icons", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "003", "group": "inputs", "page": "button", "variant": "Loading", "slug": "loading", "title": "Loading", "description": "Swaps the leading icon for a spinner, sets aria-busy and blocks clicks while keeping the label.", "summary": "Buttons in the loading state, including one that toggles loading for two seconds when clicked.", "use": "Submit and save buttons that wait on a request and must block repeat clicks while keeping their label.", "spec": [ "`loading` on `variant=\"filled\"` and `variant=\"outlined\"` shows the spinner in place of the leading icon", "Bound to state: `loading={saving}` with `let saving = $state(false)`", "`onclick={save}` sets `saving = true` and resets it with `setTimeout(() => (saving = false), 2000)`", "Label switches with state: `{saving ? 'Saving…' : 'Save (2s)'}`" ], "tags": [ "button", "loading", "spinner", "async", "submit" ], "shape": "wide", "components": [ "Button" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "Button" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/button#loading", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "004", "group": "inputs", "page": "button", "variant": "Sizes", "slug": "sizes", "title": "Sizes", "description": "", "summary": "The three button sizes side by side: small, medium and large.", "use": "Choosing button density: `sm` in toolbars and tables, `md` by default, `lg` for hero or touch-first actions.", "spec": [ "`size=\"sm\"` labelled Small", "`size=\"md\"` labelled Medium", "`size=\"lg\"` labelled Large" ], "tags": [ "button", "size", "sm", "md", "lg" ], "shape": "wide", "components": [ "Button" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "Button" ] } ], "interactive": false, "demo": "https://ui.codeatlas.com.br/docs/inputs/button#sizes", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "005", "group": "inputs", "page": "button", "variant": "States", "slug": "states", "title": "States", "description": "Disabled buttons, a destructive action and a link rendered as a button.", "summary": "Disabled buttons, a destructive action with an icon, and a link rendered as a button.", "use": "Showing non-interactive and dangerous actions, or navigating with button styling via `href`.", "spec": [ "`disabled` on `variant=\"filled\"`, `variant=\"outlined\"` and `variant=\"glass\"`", "`variant=\"destructive\"` with a `Trash2` icon in `{#snippet leading()}` (`size={15}`)", "`href=\"https://github.com/codeatlasdev/ui\"` with `target=\"_blank\"` renders an anchor" ], "tags": [ "button", "disabled", "destructive", "link", "href" ], "shape": "wide", "components": [ "Button" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "Button" ] } ], "interactive": false, "demo": "https://ui.codeatlas.com.br/docs/inputs/button#states", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "006", "group": "inputs", "page": "button", "variant": "Variants", "slug": "variants", "title": "Variants", "description": "filled, glass, outlined, ghost and destructive.", "summary": "All five button variants in a row: filled, glass, outlined, ghost and destructive.", "use": "Picking the emphasis of an action: filled for primary, outlined or ghost for secondary, destructive for irreversible.", "spec": [ "`variant=\"filled\"` labelled Filled", "`variant=\"glass\"` labelled Glass", "`variant=\"outlined\"` labelled Outlined", "`variant=\"ghost\"` labelled Ghost", "`variant=\"destructive\"` labelled Destructive" ], "tags": [ "button", "variant", "filled", "glass", "outlined", "ghost", "destructive" ], "shape": "wide", "components": [ "Button" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "Button" ] } ], "interactive": false, "demo": "https://ui.codeatlas.com.br/docs/inputs/button#variants", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "007", "group": "inputs", "page": "checkbox", "variant": "Disabled", "slug": "disabled", "title": "Disabled", "description": "", "summary": "Three disabled checkboxes: unchecked, checked and indeterminate.", "use": "Showing a read-only option whose value the user cannot change, such as a setting locked by plan or permission.", "spec": [ "`disabled` with `label=\"Disabled unchecked\"`", "`checked disabled` with `label=\"Disabled checked\"`", "`indeterminate disabled` with `label=\"Disabled indeterminate\"`", "Three ``", "`const frameworks` has 8 options with `value` and `label` keys, from `svelte` to `sveltekit`", "`let selected = $state('')` starts empty", "`{#if selected}` renders `Selected:` with the value in ``", "Wrapper `.col` has `max-width: 320px`" ], "tags": [ "combobox", "search", "autocomplete", "options", "select", "form" ], "shape": "wide", "components": [ "Combobox" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "Combobox" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/combobox#basic", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "011", "group": "inputs", "page": "combobox", "variant": "States", "slug": "states", "title": "States", "description": "Description, custom search placeholder and empty text, disabled option, error and disabled.", "summary": "Three Combobox states: with description and custom search and empty texts, with error and required, and disabled.", "use": "Documenting validation, helper text and unavailable states of a searchable select in a form.", "spec": [ "`frameworks` has 4 options, the last is `{ value: 'astro', label: 'Astro', disabled: true }`", "First field: `bind:value`, `description=\"Astro is disabled.\"`, `searchPlaceholder=\"Filter frameworks…\"`, `emptyText=\"No framework matches.\"`", "Second field: `error=\"Pick a framework.\"` and `required`", "Third field: `disabled` with `placeholder=\"Unavailable\"`", "Wrapper `.col` has `max-width: 320px`" ], "tags": [ "combobox", "error", "disabled", "required", "description", "empty-state" ], "shape": "wide", "components": [ "Combobox" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "Combobox" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/combobox#states", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "012", "group": "inputs", "page": "copy-button", "variant": "Default", "slug": "default", "title": "Default", "description": "", "summary": "A default CopyButton that copies an npm install command.", "use": "Next to install commands, tokens or IDs so users can copy them in one click.", "spec": [ "``", "Only the `value` prop is set, no other props" ], "tags": [ "copy-button", "clipboard", "copy", "install", "command" ], "shape": "square", "components": [ "CopyButton" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "CopyButton" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/copy-button#default", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "013", "group": "inputs", "page": "copy-button", "variant": "IconToast", "slug": "icon-only-and-toast", "title": "Icon only and toast", "description": "label="" renders an icon-only button. toast shows a success message after copying.", "summary": "An icon-only CopyButton and a labelled one that shows a toast after copying, with a Toaster mounted.", "use": "Copying links or snippets where a compact icon is enough or where a visible confirmation toast is wanted.", "spec": [ "`` is rendered alongside the buttons", "`` is icon-only via an empty `label`", "``" ], "tags": [ "copy-button", "toast", "toaster", "icon-only", "clipboard", "label" ], "shape": "wide", "components": [ "CopyButton", "Toaster" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "CopyButton", "Toaster" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/copy-button#icon-only-and-toast", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "014", "group": "inputs", "page": "copy-button", "variant": "Variants", "slug": "variants-and-sizes", "title": "Variants and sizes", "description": "", "summary": "CopyButton in three variants and two extra sizes, side by side.", "use": "Choosing the emphasis and size of a copy action to match the surrounding UI.", "spec": [ "`variant=\"filled\"` with `value=\"filled\"`", "`variant=\"glass\"` with `value=\"glass\"`", "`variant=\"outlined\"` with `value=\"outlined\"`", "`size=\"sm\"` with `value=\"small\"`", "`size=\"lg\"` with `value=\"large\"`" ], "tags": [ "copy-button", "variant", "size", "filled", "glass", "outlined" ], "shape": "wide", "components": [ "CopyButton" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "CopyButton" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/copy-button#variants-and-sizes", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "015", "group": "inputs", "page": "date-picker", "variant": "Calendars", "slug": "calendar-and-rangecalendar", "title": "Calendar and RangeCalendar", "description": "Inline calendars. Click a start date, then an end date for the range.", "summary": "An inline single-date Calendar and a RangeCalendar, each printing its selected value below.", "use": "Always-visible date selection such as booking a stay or choosing an event day without a popover.", "spec": [ "``", "`let value = $state(today(getLocalTimeZone()))` preselects today", "``", "`let range = $state({ start: undefined, end: undefined })` starts empty", "Output lines show `fmt(value)`, `fmt(range.start)` and `fmt(range.end)`, with `–` when unset" ], "tags": [ "calendar", "range-calendar", "date", "date-range", "inline", "locale" ], "shape": "wide", "components": [ "Calendar", "RangeCalendar" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "Calendar", "RangeCalendar", "getLocalTimeZone", "today", "DateRange", "DateValue" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/date-picker#calendar-and-rangecalendar", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "016", "group": "inputs", "page": "date-picker", "variant": "Constraints", "slug": "min-max-error-and-disabled", "title": "Min, max, error and disabled", "description": "Only the next 30 days are selectable. Out-of-range days are disabled and typed values become invalid.", "summary": "Date and time inputs with constraints: a bounded DatePicker, a required DatePicker with an error, a disabled DateField and a read-only TimeField.", "use": "Forms that limit selectable dates, require a date of birth or show locked date and time values.", "spec": [ "`minValue={min}` and `maxValue={max}` with `const max = today(tz).add({ days: 30 })` and `description=\"Only the next 30 days.\"`", "`required` with `error={requiredError}` derived as `'Enter your date of birth.'` while empty", "``", "``", "Wrapper `.col` has `max-width: 400px`" ], "tags": [ "date-picker", "date-field", "time-field", "min-max", "required", "disabled", "readonly" ], "shape": "wide", "components": [ "DateField", "DatePicker", "TimeField" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "CalendarDate", "DateField", "DatePicker", "Time", "TimeField", "getLocalTimeZone", "today", "DateValue" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/date-picker#min-max-error-and-disabled", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "017", "group": "inputs", "page": "date-picker", "variant": "Fields", "slug": "datefield-and-timefield", "title": "DateField and TimeField", "description": "Segments only, no popover. granularity="minute" adds a time, and hourCycle switches between 12h and 24h.", "summary": "Segmented DateField and TimeField inputs with bound values, minute granularity and 24h and 12h hour cycles.", "use": "Typing a date or time directly in a form, such as a birthday or an appointment start time.", "spec": [ "`` initialised with `new CalendarDate(2026, 10, 10)`", "``", "`` initialised with `new Time(14, 30)`", "``", "Two `value:` output lines print `birthday.toString()` and `time.toString()`" ], "tags": [ "date-field", "time-field", "granularity", "hour-cycle", "segmented", "form" ], "shape": "wide", "components": [ "DateField", "TimeField" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "CalendarDate", "DateField", "Time", "TimeField", "DateValue" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/date-picker#datefield-and-timefield", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "018", "group": "inputs", "page": "date-picker", "variant": "Pickers", "slug": "datepicker-and-daterangepicker", "title": "DatePicker and DateRangePicker", "description": "Editable segments plus a calendar popover. The range picker shows two months.", "summary": "A DatePicker and a DateRangePicker with popover calendars, each printing its selected value.", "use": "Choosing a delivery date or a reporting period where the user can type or pick from a calendar popover.", "spec": [ "`()`", "``", "`let range = $state({ start: undefined, end: undefined })`", "Wrappers: `.col` has `max-width: 400px`, `.col--wide` has `max-width: 460px`" ], "tags": [ "date-picker", "date-range-picker", "popover", "date", "date-range", "calendar" ], "shape": "wide", "components": [ "DatePicker", "DateRangePicker" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "DatePicker", "DateRangePicker", "DateRange", "DateValue" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/date-picker#datepicker-and-daterangepicker", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "019", "group": "inputs", "page": "export-menu", "variant": "Default", "slug": "default", "title": "Default", "description": "Custom column order and headers. onexport receives the generated text, handy for tests or uploads.", "summary": "An ExportMenu exporting three domain rows with custom column headers and a status line reporting the last export.", "use": "Table toolbars that let users download the current data set as a file in a chosen format.", "spec": [ "`data={rows}` with `const rows` of 3 objects with `domain`, `price` and `available` fields", "`filename=\"domains\"`", "`columns` has 3 entries with `header` `Domain`, `Price (USD)` and `Available`", "`onexport` sets `last` to the exported `e.filename` and `e.rows` count", "Idle status text is `Pick a format to download.`" ], "tags": [ "export-menu", "export", "download", "csv", "table", "columns" ], "shape": "wide", "components": [ "ExportMenu" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "ExportMenu" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/export-menu#default", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "020", "group": "inputs", "page": "file-upload", "variant": "Basic", "slug": "basic", "title": "Basic", "description": "Multiple files with a size limit and the selected count.", "summary": "A multi-file FileUpload with a size limit and hint that reports how many files are selected.", "use": "Attachment and document upload areas that accept several files and cap their size.", "spec": [ "`bind:files` with `let files = $state([])`", "`multiple`", "`hint=\"PNG, JPG, PDF up to 10 MB\"`", "`maxSize={10 * 1024 * 1024}`", "`{#if files.length > 0}` shows the selected file count with a plural `s`", "Wrapper `.wrap` has `max-width: 480px`" ], "tags": [ "file-upload", "dropzone", "multiple", "max-size", "files", "attachment" ], "shape": "wide", "components": [ "FileUpload" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "FileUpload" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/file-upload#basic", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "021", "group": "inputs", "page": "file-upload", "variant": "Variants", "slug": "images-only-and-disabled", "title": "Images only and disabled", "description": "", "summary": "Two FileUpload dropzones: one restricted to images with custom label and hint, and one disabled.", "use": "Image-only upload fields and upload areas that are unavailable to the current user.", "spec": [ "`accept=\"image/*\"` with `label=\"Drop images here\"` and `hint=\"PNG, JPG, GIF, WebP\"`", "`disabled` with `label=\"Upload unavailable\"`", "Wrapper `.wrap` stacks both with `max-width: 480px`" ], "tags": [ "file-upload", "dropzone", "accept", "image", "disabled", "label" ], "shape": "wide", "components": [ "FileUpload" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "FileUpload" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/file-upload#images-only-and-disabled", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "022", "group": "inputs", "page": "filter-group", "variant": "Basic", "slug": "role-filter", "title": "Role filter", "description": "", "summary": "A FilterGroup of three role options bound to a value that is printed below.", "use": "Filtering a list or table by one category, such as user role, with a short set of choices.", "spec": [ "``", "`const roles` has 3 options with `value` and `label`: `admin`, `editor`, `viewer`", "`let role = $state('all')` starts at `all`, which is not one of the options", "`

Selected: {role}

` prints the current value" ], "tags": [ "filter-group", "filter", "options", "role", "bind", "category" ], "shape": "wide", "components": [ "FilterGroup" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "FilterGroup" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/filter-group#role-filter", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "023", "group": "inputs", "page": "masked-field", "variant": "Documents", "slug": "documents-and-dates", "title": "Documents and dates", "description": "CPF, CNPJ, a mask that switches after 11 digits, a birth date and RG.", "summary": "Five MaskedField inputs for Brazilian documents: CPF, CNPJ, combined CPF or CNPJ, birth date and RG, with validators on three.", "use": "Brazilian registration and checkout forms that collect formatted identity documents and dates.", "spec": [ "`mask={maskCPF}` with `validate={(v) => (isValidCPF(v) ? undefined : 'Invalid CPF')}` and `placeholder=\"000.000.000-00\"`", "`mask={maskCNPJ}` with `validate={(v) => (isValidCNPJ(v) ? undefined : 'Invalid CNPJ')}` and `placeholder=\"00.000.000/0000-00\"`", "`mask={maskCPFCNPJ}` with `description=\"Switches mask after 11 digits.\"`", "`mask={maskDateBR}` with `isValidDateBR(v)` validation and `placeholder=\"dd/mm/yyyy\"`", "`mask={maskRG}` with `placeholder=\"00.000.000-0\"` and no `validate`", "Imports come from `@codeatlasdev/ui/forms`, each field uses `bind:value`" ], "tags": [ "masked-field", "cpf", "cnpj", "mask", "validation", "brazil", "forms" ], "shape": "wide", "components": [ "MaskedField" ], "imports": [ { "from": "@codeatlasdev/ui/forms", "names": [ "MaskedField", "isValidCNPJ", "isValidCPF", "isValidDateBR", "maskCNPJ", "maskCPF", "maskCPFCNPJ", "maskDateBR", "maskRG" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/masked-field#documents-and-dates", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "024", "group": "inputs", "page": "masked-field", "variant": "MaskAction", "slug": "use-mask-action", "title": "use:mask action", "description": "Apply any pure mask to a plain input. The caret stays on the same digit.", "summary": "A native input masked with the mask action, showing the bound value below.", "use": "Adding input masking to a custom or third-party input that is not a MaskedField.", "spec": [ "`use:mask={maskCPF}` on a plain `` is linked to `id=\"mask-action-input\"`", "Output line prints `value = {value || '–'}`" ], "tags": [ "mask", "action", "input-mask", "cpf", "native-input", "forms" ], "shape": "wide", "components": [], "imports": [ { "from": "@codeatlasdev/ui/forms", "names": [ "mask", "maskCPF" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/masked-field#use-mask-action", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "025", "group": "inputs", "page": "masked-field", "variant": "PhoneCep", "slug": "phone-and-cep", "title": "Phone and CEP", "description": "PhoneField binds E.164 (+55...) while showing the masked form. CepField resolves an address through onlookup. Try 01310-100.", "summary": "A PhoneField and a CepField that looks up an address asynchronously and prints the resolved street, district and city.", "use": "Brazilian address and contact forms that autofill street data from a postal code lookup.", "spec": [ "``", "` (address = a)}`", "`async function lookup(raw: string)` waits 600 ms and returns a `CepAddress` only for `01310100`, otherwise `null`", "Result line shows `Looking up…` while pending, then `logradouro`, `bairro`, `localidade` and `uf`" ], "tags": [ "phone-field", "cep-field", "lookup", "address", "brazil", "async", "forms" ], "shape": "wide", "components": [ "CepField", "PhoneField" ], "imports": [ { "from": "@codeatlasdev/ui/forms", "names": [ "CepField", "PhoneField", "CepAddress" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/masked-field#phone-and-cep", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "026", "group": "inputs", "page": "money-input", "variant": "Constraints", "slug": "min-max-negative-error-and-disabled", "title": "Min, max, negative, error and disabled", "description": "Deposit is clamped between R$ 10,00 and R$ 100,00. Include a minus sign to toggle the sign when allowNegative is set.", "summary": "Four MoneyInput fields showing min and max bounds, negative values, an error message and a disabled state.", "use": "Amount fields in payment and ledger forms that limit ranges, allow adjustments or lock a value.", "spec": [ "`label=\"Deposit\"` with `min={1000}`, `max={10000}` and `description=\"Between R$ 10,00 and R$ 100,00.\"`", "`` with `let adjustment = $state(-2500)`", "``", "``", "Wrapper `.col` has `max-width: 400px`" ], "tags": [ "money-input", "min-max", "negative", "error", "disabled", "currency", "forms" ], "shape": "wide", "components": [ "MoneyInput" ], "imports": [ { "from": "@codeatlasdev/ui/forms", "names": [ "MoneyInput" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/money-input#min-max-negative-error-and-disabled", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "027", "group": "inputs", "page": "money-input", "variant": "Currency", "slug": "currency-and-locale", "title": "Currency and locale", "description": "currency picks the minor unit (USD 2 decimals, JPY none); locale picks separators and symbol placement.", "summary": "MoneyInput in three currencies and locales: USD en-US, JPY without decimals and EUR de-DE.", "use": "Price fields in multi-currency products that must format and parse per locale.", "spec": [ "`currency=\"USD\" locale=\"en-US\"` with `bind:value={usd}` starting at `$state(123456)`", "`currency=\"JPY\" locale=\"en-US\"` with `bind:value={jpy}` starting at `$state(1234)`", "`currency=\"EUR\" locale=\"de-DE\"` with `bind:value={eur}` starting at `$state(123456)`", "Labels: `Price (USD, en-US)`, `Price (JPY, no decimals)` and `Preis (EUR, de-DE)`" ], "tags": [ "money-input", "currency", "locale", "usd", "jpy", "eur", "forms" ], "shape": "wide", "components": [ "MoneyInput" ], "imports": [ { "from": "@codeatlasdev/ui/forms", "names": [ "MoneyInput" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/money-input#currency-and-locale", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "028", "group": "inputs", "page": "money-input", "variant": "Default", "slug": "default", "title": "Default", "description": "Type 123456 to get R$ 1.234,56.", "summary": "A default MoneyInput bound to a cents value, with the raw cents and formatted display printed below.", "use": "A price or amount field where the model stores integer cents and the UI shows a formatted amount.", "spec": [ "``", "`let price = $state(123456)` holds cents", "Output line prints `{price} cents → {centsToDisplay(price)}`", "Wrapper `.col` has `max-width: 400px`" ], "tags": [ "money-input", "cents", "currency", "format", "bind", "forms" ], "shape": "wide", "components": [ "MoneyInput" ], "imports": [ { "from": "@codeatlasdev/ui/forms", "names": [ "MoneyInput", "centsToDisplay" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/money-input#default", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "029", "group": "inputs", "page": "money-input", "variant": "Helpers", "slug": "helpers", "title": "Helpers", "description": "Pure functions exported from @codeatlasdev/ui/forms.", "summary": "Two money helper functions evaluated inline: centsToDisplay and parseInputToCents.", "use": "Formatting stored cents for display or parsing user-typed currency strings outside a MoneyInput.", "spec": [ "`centsToDisplay(123456)` is printed with its result", "`parseInputToCents('R$ 1.234,56')` is printed with its result", "Both helpers are imported from `@codeatlasdev/ui/forms`", "No input component is rendered" ], "tags": [ "money-input", "helpers", "cents", "parse", "format", "currency" ], "shape": "wide", "components": [], "imports": [ { "from": "@codeatlasdev/ui/forms", "names": [ "centsToDisplay", "parseInputToCents" ] } ], "interactive": false, "demo": "https://ui.codeatlas.com.br/docs/inputs/money-input#helpers", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "030", "group": "inputs", "page": "number-field", "variant": "Basic", "slug": "basic", "title": "Basic", "description": "Integer and decimal steps with bounds.", "summary": "Two NumberField inputs in a Stack: an integer quantity with bounds and a decimal price with a step.", "use": "Quantity and price steppers in order or cart forms.", "spec": [ "`` wraps both fields", "`` with `let qty = $state(1)`", "`` with `let price = $state(9.99)`" ], "tags": [ "number-field", "stepper", "min-max", "step", "quantity", "forms" ], "shape": "wide", "components": [ "NumberField", "Stack" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "NumberField", "Stack" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/number-field#basic", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "031", "group": "inputs", "page": "number-field", "variant": "States", "slug": "states", "title": "States", "description": "Helper text, error, disabled and the small size.", "summary": "Four NumberField states in a Stack: with description, with error and required, disabled, and small.", "use": "Documenting helper text, validation, locked and compact variants of numeric fields such as seat counts.", "spec": [ "``", "`bind:value={seats}` with `let seats = $state(60)`, `error=\"Plans support up to 50 seats.\"` and `required`", "``", "``", "`` wraps the four fields" ], "tags": [ "number-field", "error", "disabled", "required", "size", "description", "forms" ], "shape": "wide", "components": [ "NumberField", "Stack" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "NumberField", "Stack" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/number-field#states", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "032", "group": "inputs", "page": "pin-input", "variant": "Default", "slug": "default", "title": "Default", "description": "Six digits by default. oncomplete fires once all cells are filled. A four-digit masked PIN is shown below it.", "summary": "A verification-code PinInput that reports its value and completion, plus a masked four-digit PIN.", "use": "One-time code entry for sign-in verification, or a short secret PIN that must be hidden.", "spec": [ "` (done = v)} />`", "Output line prints `value: {code || '–'} · completed: {done || '–'}`", "``" ], "tags": [ "pin-input", "otp", "verification-code", "mask", "oncomplete", "forms" ], "shape": "wide", "components": [ "PinInput" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "PinInput" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/pin-input#default", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "033", "group": "inputs", "page": "pin-input", "variant": "States", "slug": "states", "title": "States", "description": "Description, error, disabled and a free-text code.", "summary": "Four PinInput states: with description, with error, disabled with a partial value, and a text-type five-character key.", "use": "Documenting helper text, error feedback and non-numeric code variants of one-time code inputs.", "spec": [ "`description=\"Check your email.\"` with `bind:value={hinted}` starting at `$state('123')`", "`error=\"Invalid or expired code.\"` with `value=\"123456\"`", "`disabled` with `value=\"12\"`", "``" ], "tags": [ "pin-input", "otp", "error", "disabled", "description", "length", "forms" ], "shape": "wide", "components": [ "PinInput" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "PinInput" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/pin-input#states", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "034", "group": "inputs", "page": "radio", "variant": "Cards", "slug": "cards", "title": "Cards", "description": "variant="cards" renders each option as a selectable card with an optional description.", "summary": "Radio group in `cards` variant with three plans, one disabled, bound to a selected plan.", "use": "Choosing a subscription plan or any option that needs a title and a short description.", "spec": [ "`{fruit}` under the group" ], "tags": [ "radio-group", "radio", "vertical", "single-choice", "bind-value" ], "shape": "square", "components": [ "RadioGroup" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "RadioGroup" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/radio#vertical", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "038", "group": "inputs", "page": "segmented-control", "variant": "Default", "slug": "default", "title": "Default", "description": "Text items, and text items with icons.", "summary": "Two segmented controls: a text-only Week/Month/Year period and a List/Grid view switch with icons.", "use": "Switching a view mode or time range inline above a list, chart or dashboard.", "spec": [ "Period control `aria-label=\"Period\"` with `bind:value={period}` and 3 items: Week, Month, Year", "Current value is shown as `value: {period}`", "View control `aria-label=\"View\"` with 2 items using `icon: LayoutList` and `icon: LayoutGrid`", "Icons come from `@lucide/svelte`" ], "tags": [ "segmented-control", "tabs", "icon", "view-switch", "period" ], "shape": "wide", "components": [ "SegmentedControl" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "SegmentedControl" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/segmented-control#default", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "039", "group": "inputs", "page": "segmented-control", "variant": "Sizes", "slug": "small-full-width-disabled-item", "title": "Small, full width, disabled item", "description": "", "summary": "Small full-width segmented control with four items, one disabled.", "use": "Compact filter bar that should stretch to its container, such as a table toolbar.", "spec": [ "`{framework}`", "Wrapper `.col` uses `max-width: 320px`" ], "tags": [ "select", "dropdown", "options", "label", "bind-value" ], "shape": "wide", "components": [ "Select" ], "imports": [ { "from": "@codeatlasdev/ui", "names": [ "Select" ] } ], "interactive": true, "demo": "https://ui.codeatlas.com.br/docs/inputs/select#basic", "needs": "@codeatlasdev/ui@4.4.0" }, { "id": "041", "group": "inputs", "page": "select", "variant": "EmptyOption", "slug": "empty-value-option", "title": "Empty-value option", "description": "An option with value '' (such as 'All projects') is a real selection: the trigger shows its label, not the placeholder. Use it for filters instead of a sentinel value.", "summary": "Select whose first option has an empty value labelled All projects, with the raw value printed.", "use": "Filters where an empty value means no filter, such as All projects.", "spec": [ "`