@vjdesigns/vjdesigns-ui 1.5.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -4
- package/dist/ai/llms-full.txt +457 -448
- package/dist/ai/llms.txt +1 -1
- package/dist/ai/registry.json +126 -116
- package/dist/components/data-display/DataGrid/DataGrid.module.css.cjs.js +1 -1
- package/dist/components/data-display/DataGrid/DataGrid.module.css.mjs +1 -1
- package/dist/components/data-display/VirtualList/VirtualList.module.css.cjs.js +1 -1
- package/dist/components/data-display/VirtualList/VirtualList.module.css.mjs +1 -1
- package/dist/components/feedback/ErrorSummary/ErrorSummary.module.css.cjs.js +1 -1
- package/dist/components/feedback/ErrorSummary/ErrorSummary.module.css.mjs +1 -1
- package/dist/components/forms/DateTimePicker/DateTimePicker.module.css.cjs.js +1 -1
- package/dist/components/forms/DateTimePicker/DateTimePicker.module.css.mjs +1 -1
- package/dist/components/forms/Rating/Rating.module.css.cjs.js +1 -1
- package/dist/components/forms/Rating/Rating.module.css.mjs +1 -1
- package/dist/components/forms/TimePicker/TimePicker.module.css.cjs.js +1 -1
- package/dist/components/forms/TimePicker/TimePicker.module.css.mjs +1 -1
- package/dist/components/layout/ResizablePanels/ResizablePanels.cjs.js +1 -1
- package/dist/components/layout/ResizablePanels/ResizablePanels.mjs +1 -0
- package/dist/components/layout/ResizablePanels/ResizablePanels.module.css.cjs.js +1 -1
- package/dist/components/layout/ResizablePanels/ResizablePanels.module.css.mjs +1 -1
- package/dist/components/layout/ScrollArea/ScrollArea.module.css.cjs.js +1 -1
- package/dist/components/layout/ScrollArea/ScrollArea.module.css.mjs +1 -1
- package/dist/components/navigation/ContextMenu/ContextMenu.module.css.cjs.js +1 -1
- package/dist/components/navigation/ContextMenu/ContextMenu.module.css.mjs +1 -1
- package/dist/components/overlays/HoverCard/HoverCard.module.css.cjs.js +1 -1
- package/dist/components/overlays/HoverCard/HoverCard.module.css.mjs +2 -2
- package/dist/components/primitives/Button/Button.cjs.js +1 -1
- package/dist/components/primitives/Button/Button.mjs +37 -37
- package/dist/components/utilities/LocaleProvider/LocaleProvider.module.css.cjs.js +1 -1
- package/dist/components/utilities/LocaleProvider/LocaleProvider.module.css.mjs +1 -1
- package/dist/components/utilities/Theme/Theme.cjs.js +1 -1
- package/dist/components/utilities/Theme/Theme.d.ts +6 -6
- package/dist/components/utilities/Theme/Theme.mjs +49 -45
- package/dist/hooks/useFormValidation.cjs.js +1 -1
- package/dist/hooks/useFormValidation.mjs +1 -1
- package/dist/i18n/en.cjs.js +1 -1
- package/dist/i18n/en.mjs +50 -0
- package/dist/i18n/types.d.ts +56 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.mjs +106 -106
- package/dist/locales/ar.cjs.js +1 -1
- package/dist/locales/ar.mjs +50 -0
- package/dist/locales/bn.cjs.js +1 -1
- package/dist/locales/bn.mjs +50 -0
- package/dist/locales/cs.cjs.js +1 -1
- package/dist/locales/cs.mjs +50 -0
- package/dist/locales/da.cjs.js +1 -1
- package/dist/locales/da.mjs +50 -0
- package/dist/locales/de.cjs.js +1 -1
- package/dist/locales/de.mjs +50 -0
- package/dist/locales/el.cjs.js +1 -1
- package/dist/locales/el.mjs +50 -0
- package/dist/locales/es.cjs.js +1 -1
- package/dist/locales/es.mjs +50 -0
- package/dist/locales/fa.cjs.js +1 -1
- package/dist/locales/fa.mjs +50 -0
- package/dist/locales/fi.cjs.js +1 -1
- package/dist/locales/fi.mjs +50 -0
- package/dist/locales/fr.cjs.js +1 -1
- package/dist/locales/fr.mjs +50 -0
- package/dist/locales/he.cjs.js +1 -1
- package/dist/locales/he.mjs +50 -0
- package/dist/locales/hi.cjs.js +1 -1
- package/dist/locales/hi.mjs +50 -0
- package/dist/locales/hu.cjs.js +1 -1
- package/dist/locales/hu.mjs +50 -0
- package/dist/locales/id.cjs.js +1 -1
- package/dist/locales/id.mjs +50 -0
- package/dist/locales/it.cjs.js +1 -1
- package/dist/locales/it.mjs +50 -0
- package/dist/locales/ja.cjs.js +1 -1
- package/dist/locales/ja.mjs +50 -0
- package/dist/locales/ko.cjs.js +1 -1
- package/dist/locales/ko.mjs +50 -0
- package/dist/locales/nb.cjs.js +1 -1
- package/dist/locales/nb.mjs +50 -0
- package/dist/locales/nl.cjs.js +1 -1
- package/dist/locales/nl.mjs +50 -0
- package/dist/locales/pl.cjs.js +1 -1
- package/dist/locales/pl.mjs +50 -0
- package/dist/locales/pt-BR.cjs.js +1 -1
- package/dist/locales/pt-BR.mjs +50 -0
- package/dist/locales/ro.cjs.js +1 -1
- package/dist/locales/ro.mjs +50 -0
- package/dist/locales/ru.cjs.js +1 -1
- package/dist/locales/ru.mjs +50 -0
- package/dist/locales/sv.cjs.js +1 -1
- package/dist/locales/sv.mjs +50 -0
- package/dist/locales/th.cjs.js +1 -1
- package/dist/locales/th.mjs +50 -0
- package/dist/locales/tr.cjs.js +1 -1
- package/dist/locales/tr.mjs +50 -0
- package/dist/locales/uk.cjs.js +1 -1
- package/dist/locales/uk.mjs +50 -0
- package/dist/locales/ur.cjs.js +1 -1
- package/dist/locales/ur.mjs +50 -0
- package/dist/locales/vi.cjs.js +1 -1
- package/dist/locales/vi.mjs +50 -0
- package/dist/locales/zh-Hans.cjs.js +1 -1
- package/dist/locales/zh-Hans.mjs +50 -0
- package/dist/locales/zh-Hant.cjs.js +1 -1
- package/dist/locales/zh-Hant.mjs +50 -0
- package/dist/utils/brandPalette.cjs.js +3 -3
- package/dist/utils/brandPalette.d.ts +4 -2
- package/dist/utils/brandPalette.mjs +20 -20
- package/dist/vjdesigns-ui.css +1 -1
- package/package.json +1 -1
package/dist/ai/registry.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"Install: `npm install @vjdesigns/vjdesigns-ui` (peer: react, react-dom 18 or 19).",
|
|
9
9
|
"Import the stylesheet once: `import \"@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css\";`",
|
|
10
10
|
"Import components from the package root: `import { Button, Field, Input } from \"@vjdesigns/vjdesigns-ui\";`",
|
|
11
|
-
"Theme: wrap the app in `<Theme brand=\"blue\" | \"purple\" | ... | \"#hex\" mode=\"light\" | \"dark\" accent=\"brand\" | \"
|
|
11
|
+
"Theme: wrap the app in `<Theme brand=\"blue\" | \"purple\" | ... | \"#hex\" mode=\"light\" | \"dark\" accent=\"brand\" | \"lime\" | \"#hex\">`.",
|
|
12
12
|
"Language: `<LocaleProvider locale=\"es\" messages={es}>` with `import es from \"@vjdesigns/vjdesigns-ui/locales/es\"`.",
|
|
13
13
|
"Forms: wrap each control in `Field` (label, hint, error, required); validate with `useFormValidation` + `ErrorSummary`.",
|
|
14
14
|
"Style with the props (variant, tone, size) and the --color-*, --space-*, --radius-* CSS variables; don't override internal class names."
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
{
|
|
28
28
|
"id": "theming",
|
|
29
29
|
"title": "Theming",
|
|
30
|
-
"markdown": "Wrap any part of your app in `Theme` to set the color mode, brand palette, and accent for everything inside it:\r\n\r\n```tsx\r\nimport { Theme, Button } from \"@vjdesigns/vjdesigns-ui\";\r\n\r\n<Theme mode=\"dark\" brand=\"purple\" fill>\r\n <Button>Dark, purple button</Button>\r\n</Theme>\r\n```\r\n\r\n| Prop | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| `mode` | `\"light\" \\| \"dark\"` | inherited | Color mode for everything inside. |\r\n| `brand` | `\"black\" \\| \"blue\" \\| \"gold\" \\| \"green\" \\| \"purple\"`, a hex color, or `{ light, dark }` | inherited | Brand palette for buttons, links, focus rings and indicators. |\r\n| `accent` | `\"brand\" | \"
|
|
30
|
+
"markdown": "Wrap any part of your app in `Theme` to set the color mode, brand palette, and accent for everything inside it:\r\n\r\n```tsx\r\nimport { Theme, Button } from \"@vjdesigns/vjdesigns-ui\";\r\n\r\n<Theme mode=\"dark\" brand=\"purple\" fill>\r\n <Button>Dark, purple button</Button>\r\n</Theme>\r\n```\r\n\r\n| Prop | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| `mode` | `\"light\" \\| \"dark\"` | inherited | Color mode for everything inside. |\r\n| `brand` | `\"black\" \\| \"blue\" \\| \"gold\" \\| \"green\" \\| \"purple\"`, a hex color, or `{ light, dark }` | inherited | Brand palette for buttons, links, focus rings and indicators. |\r\n| `accent` | `\"brand\" | \"lime\"`, a hex color, or `{ light, dark }` | inherited (the brand's own) | The bright highlight on badges, switches, progress bars, sliders, steppers, and active navigation. |\r\n| `fill` | `boolean` | `false` | Paints the theme's background and text color on the wrapper. |\r\n\r\nOutside React (or to theme the whole page), set the attributes on `<html>` instead:\r\n\r\n```html\r\n<html data-theme=\"dark\" data-brand=\"purple\" data-accent=\"lime\">\r\n```\r\n\r\n### Accent color\r\n\r\nThe accent is the energetic highlight: badges, switches, progress bars, sliders, steppers, and the active link in the Navbar. By default it follows the brand, as a bright shade of the brand's own color, so it always fits:\r\n\r\n| Brand | Default accent |\r\n| --- | --- |\r\n| `blue` (default) | sky blue `#76c7ff` |\r\n| `purple` | lavender `#c0b0ff` |\r\n| `gold` | amber `#f5ad5f` |\r\n| `green` | mint `#72d4ad` |\r\n| `black` | lime `#c8f031` (black has no hue to build on) |\r\n| a custom hex | generated from that color |\r\n\r\nTo choose a different one:\r\n\r\n```tsx\r\n<Theme accent=\"lime\">…</Theme> // the original bright yellow-green (\"volt\", its former name, still works)\r\n<Theme accent=\"#ff6b00\">…</Theme> // any color\r\n<Theme accent=\"brand\">…</Theme> // back to the brand's own, inside an area with another accent\r\n```\r\n\r\nAccents always carry dark text. A color too dark for that is lightened (same hue) just enough to meet WCAG AA, with a warning in development. An accent you set also holds inside nested brands. In CSS, `accentCss(\"name\", \"#ff6b00\")` generates a `[data-accent=\"name\"]` rule, like `brandCss` below.\r\n\r\n### Custom brand colors\r\n\r\nPass any hex color as `brand` and a full palette is generated for both modes:\r\n\r\n```tsx\r\n<Theme brand=\"#e11d48\">…</Theme>\r\n<Theme brand={{ light: \"#4338ca\", dark: \"#f472b6\" }}>…</Theme>\r\n```\r\n\r\nEvery generated palette meets WCAG 2.2 AA. A single color is used exactly as given in the mode where it has enough contrast (dark colors in light mode, light colors in dark mode), and the other mode gets a matching shade of the same hue. If a color doesn't have enough contrast (for example, a mid-tone that fails in both modes), its lightness is shifted just enough to pass, and a warning is logged in development.\r\n\r\nTo define a brand in CSS instead (for the whole page, applied before any JavaScript runs), generate a stylesheet rule with `brandCss`:\r\n\r\n```ts\r\nimport { brandCss } from \"@vjdesigns/vjdesigns-ui\";\r\n\r\nbrandCss(\"acme\", \"#e11d48\"); // '[data-brand=\"acme\"] { --brand-light-primary: … }'\r\n```\r\n\r\nAdd the rule to your stylesheet and use `<html data-brand=\"acme\">`. `createBrandPalette(color)` returns the generated colors as an object, if you need them directly."
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
"id": "languages",
|
|
@@ -1841,7 +1841,7 @@
|
|
|
1841
1841
|
"category": "data-display",
|
|
1842
1842
|
"folder": "DataGrid",
|
|
1843
1843
|
"import": "import { DataGrid } from \"@vjdesigns/vjdesigns-ui\";",
|
|
1844
|
-
"description": "An interactive data table (WAI-ARIA APG \"Data Grid\"): sortable columns\
|
|
1844
|
+
"description": "An interactive data table (WAI-ARIA APG \"Data Grid\"): sortable columns\n(with Shift for multi-column sorts), search filtering, single or\nmultiple row selection, pagination, and a full keyboard model. Works with\nclient-side data, or server-side data with `manual`.\n\nKeyboard: the grid is one Tab stop. Arrow keys move between cells\n(mirrored in RTL), Home / End go to the row's first or last cell, Ctrl+Home\n/ Ctrl+End to the first or last cell of the grid, Page Up / Page Down move\nten rows. On a header, Enter sorts (Shift+Enter adds a secondary sort).\nSpace selects the row, Shift+click or Shift+Space selects a range, and\nCtrl/⌘+A selects every row. A cell with a single button, link, or\ncheckbox focuses it directly; for cells with several controls or a text\nfield, Enter or F2 moves into the cell, Tab cycles inside it, and Escape\nreturns to the grid.\n\nScreen readers hear sort changes and filter result counts; the grid is a\nreal `<table role=\"grid\">` with `aria-sort`, `aria-selected`,\n`aria-rowcount`, and `aria-rowindex`.\n\n```tsx\n<DataGrid\n aria-label=\"Roster\"\n rows={players}\n columns={[\n { key: \"name\", header: \"Player\", sortable: true, rowHeader: true },\n { key: \"ppg\", header: \"PPG\", sortable: true, numeric: true },\n ]}\n selectionMode=\"multiple\"\n pageSize={10}\n/>\n```",
|
|
1845
1845
|
"props": [
|
|
1846
1846
|
{
|
|
1847
1847
|
"name": "rows",
|
|
@@ -1916,7 +1916,7 @@
|
|
|
1916
1916
|
"name": "filter",
|
|
1917
1917
|
"type": "string",
|
|
1918
1918
|
"required": false,
|
|
1919
|
-
"description": "Search text: rows are kept when their filterable columns contain every\
|
|
1919
|
+
"description": "Search text: rows are kept when their filterable columns contain every\nword (case- and diacritic-insensitive). Render your own search field\n(e.g. `SearchInput`) and pass its text here."
|
|
1920
1920
|
},
|
|
1921
1921
|
{
|
|
1922
1922
|
"name": "selectionMode",
|
|
@@ -1980,7 +1980,7 @@
|
|
|
1980
1980
|
"type": "boolean",
|
|
1981
1981
|
"required": false,
|
|
1982
1982
|
"default": "false",
|
|
1983
|
-
"description": "Server-side data: the grid doesn't sort, filter, or page `rows` itself.\
|
|
1983
|
+
"description": "Server-side data: the grid doesn't sort, filter, or page `rows` itself.\nIt shows them as given and reports `sort`, `filter`, and `page` changes\nfor you to fetch. Pass `rowCount` for the total."
|
|
1984
1984
|
},
|
|
1985
1985
|
{
|
|
1986
1986
|
"name": "rowCount",
|
|
@@ -2047,7 +2047,7 @@
|
|
|
2047
2047
|
"type": "\"auto\" | \"fixed\"",
|
|
2048
2048
|
"required": false,
|
|
2049
2049
|
"default": "\"auto\"",
|
|
2050
|
-
"description": "Table layout. `fixed` makes column widths exact (content wraps or clips\
|
|
2050
|
+
"description": "Table layout. `fixed` makes column widths exact (content wraps or clips\ninstead of widening a column)."
|
|
2051
2051
|
},
|
|
2052
2052
|
{
|
|
2053
2053
|
"name": "tableStyle",
|
|
@@ -2083,7 +2083,7 @@
|
|
|
2083
2083
|
},
|
|
2084
2084
|
{
|
|
2085
2085
|
"name": "Keyboard",
|
|
2086
|
-
"description": "Keyboard: the grid is one Tab stop. Arrows move between cells, Home/End\
|
|
2086
|
+
"description": "Keyboard: the grid is one Tab stop. Arrows move between cells, Home/End\nto the row's ends, Ctrl+Home/End to the grid's corners. Enter on a\nheader sorts; Space selects the row."
|
|
2087
2087
|
},
|
|
2088
2088
|
{
|
|
2089
2089
|
"name": "Range Selection",
|
|
@@ -2091,7 +2091,7 @@
|
|
|
2091
2091
|
},
|
|
2092
2092
|
{
|
|
2093
2093
|
"name": "Interactive Cells",
|
|
2094
|
-
"description": "Cells with several controls: Enter (or F2) steps into the cell, Tab\
|
|
2094
|
+
"description": "Cells with several controls: Enter (or F2) steps into the cell, Tab\ncycles its controls, Escape steps back out. A cell with one button\nfocuses it directly."
|
|
2095
2095
|
},
|
|
2096
2096
|
{
|
|
2097
2097
|
"name": "Single Selection",
|
|
@@ -2099,7 +2099,7 @@
|
|
|
2099
2099
|
},
|
|
2100
2100
|
{
|
|
2101
2101
|
"name": "Server Side",
|
|
2102
|
-
"description": "Server-side data: with `manual`, the grid reports sort and page changes\
|
|
2102
|
+
"description": "Server-side data: with `manual`, the grid reports sort and page changes\nand shows the rows you fetch. `rowCount` gives the total."
|
|
2103
2103
|
},
|
|
2104
2104
|
{
|
|
2105
2105
|
"name": "Empty And Loading",
|
|
@@ -2119,7 +2119,7 @@
|
|
|
2119
2119
|
},
|
|
2120
2120
|
{
|
|
2121
2121
|
"name": "Extending Columns",
|
|
2122
|
-
"description": "Extending columns: `headerEnd` adds content after a header's label,\
|
|
2122
|
+
"description": "Extending columns: `headerEnd` adds content after a header's label,\noutside its sort button (here a column menu button), and `className` /\n`style` reach every cell of a column. Controls marked\n`data-grid-secondary` don't steal the header's focus: the sort button\nstays its target, and F2 then Tab reaches them."
|
|
2123
2123
|
}
|
|
2124
2124
|
]
|
|
2125
2125
|
},
|
|
@@ -4002,7 +4002,7 @@
|
|
|
4002
4002
|
"category": "data-display",
|
|
4003
4003
|
"folder": "VirtualList",
|
|
4004
4004
|
"import": "import { VirtualList } from \"@vjdesigns/vjdesigns-ui\";",
|
|
4005
|
-
"description": "A list that renders only the items in view, so tens of thousands of rows\
|
|
4005
|
+
"description": "A list that renders only the items in view, so tens of thousands of rows\nscroll smoothly. Items may have any height (they're measured as they\nrender). Built on `useVirtualizer` and `ScrollArea`.\n\nAccessibility: a real `role=\"list\"` whose items carry `aria-setsize` and\n`aria-posinset`, so screen readers announce \"item 4,812 of 10,000\" even\nthough only a few dozen exist in the page. The scroll area is keyboard\nscrollable, and Tab through items' links and buttons keeps working (new\nitems render as focus scrolls them into view). Browser find-in-page only\nsees rendered items, so offer search for long lists.\n\n```tsx\n<VirtualList\n aria-label=\"All players\"\n items={players}\n height=\"24rem\"\n getKey={(p) => p.id}\n renderItem={(p) => <PlayerRow player={p} />}\n/>\n```",
|
|
4006
4006
|
"props": [
|
|
4007
4007
|
{
|
|
4008
4008
|
"name": "items",
|
|
@@ -4450,7 +4450,7 @@
|
|
|
4450
4450
|
"description": "Every tone, solid. `accent` is the promo strip, always with dark text."
|
|
4451
4451
|
},
|
|
4452
4452
|
{
|
|
4453
|
-
"name": "
|
|
4453
|
+
"name": "Accent Promo",
|
|
4454
4454
|
"description": "The accent promo strip: bold, dark text on accent, with a strong call to action."
|
|
4455
4455
|
},
|
|
4456
4456
|
{
|
|
@@ -4585,7 +4585,7 @@
|
|
|
4585
4585
|
"category": "feedback",
|
|
4586
4586
|
"folder": "ErrorSummary",
|
|
4587
4587
|
"import": "import { ErrorSummary } from \"@vjdesigns/vjdesigns-ui\";",
|
|
4588
|
-
"description": "The list of a form's errors, shown above it after a failed submit: a danger\
|
|
4588
|
+
"description": "The list of a form's errors, shown above it after a failed submit: a danger\n`Alert` whose items link to their fields (activating one moves focus to the\nfield). It's focusable (`tabIndex={-1}`): give `useFormValidation`'s\n`summaryRef` as `ref` and a failed submit moves focus here, so screen\nreaders announce the heading and the list. The title is a real heading\n(`h2` by default; set `headingLevel` to fit the page outline).\n\n```tsx\n<ErrorSummary ref={form.summaryRef} errors={form.errorList} />\n```",
|
|
4589
4589
|
"nativeElement": "div",
|
|
4590
4590
|
"props": [
|
|
4591
4591
|
{
|
|
@@ -6048,7 +6048,7 @@
|
|
|
6048
6048
|
"category": "forms",
|
|
6049
6049
|
"folder": "ColorPicker",
|
|
6050
6050
|
"import": "import { ColorInput } from \"@vjdesigns/vjdesigns-ui\";",
|
|
6051
|
-
"description": "A pill field showing a swatch and the color value; pressing it opens a\
|
|
6051
|
+
"description": "A pill field showing a swatch and the color value; pressing it opens a\n`ColorPicker` in a `Popover` (a non-modal dialog on the shared overlay\nlayer stack: Escape and outside presses close it, focus returns to the\nfield). Takes the same value, format, alpha, swatch, and state props as\n`ColorPicker`.\n\nThe trigger is a native `<button>` with `aria-haspopup=\"dialog\"` and\n`aria-expanded`. Its name is the label plus the current value and a plain\ndescription (\"Jersey color, #1d4ed8, dark blue\"). Inside a `Field`, the\nlabel, hint, error, invalid, disabled, and read-only state are wired to\nit. A read-only field still opens, so the values can be inspected.",
|
|
6052
6052
|
"nativeElement": "button",
|
|
6053
6053
|
"props": [
|
|
6054
6054
|
{
|
|
@@ -6777,7 +6777,7 @@
|
|
|
6777
6777
|
"category": "forms",
|
|
6778
6778
|
"folder": "DatePicker",
|
|
6779
6779
|
"import": "import { DatePicker } from \"@vjdesigns/vjdesigns-ui\";",
|
|
6780
|
-
"description": "A date field: type a date in the locale's short format (or ISO), or press\
|
|
6780
|
+
"description": "A date field: type a date in the locale's short format (or ISO), or press\nthe calendar button to pick one from a `Calendar` in a popup dialog.\n\nThe value is an ISO date string (\"YYYY-MM-DD\"), so it never shifts with\ntime zones. The text field shows it in the locale's numeric format; on\nblur (or Enter), typed text is parsed and normalized, or rejected with an\ninline error. Inside a `Field`, label, hint, error, required, disabled,\nand invalid state are wired to the text input.\n\nThe popup is a modal `Popover` on the shared overlay layer stack, so\nEscape closes only the calendar, also inside a `Modal` or `Drawer`.\n\n```tsx\n<Field label=\"Game day\">\n <DatePicker name=\"gameDay\" min=\"2026-10-01\" onValueChange={setDay} />\n</Field>\n```",
|
|
6781
6781
|
"nativeElement": "input",
|
|
6782
6782
|
"props": [
|
|
6783
6783
|
{
|
|
@@ -6979,13 +6979,13 @@
|
|
|
6979
6979
|
"name": "onInvalidInput",
|
|
6980
6980
|
"type": "(error: DateInputError) => void",
|
|
6981
6981
|
"required": false,
|
|
6982
|
-
"description": "Called when the user leaves the field with text that isn't a valid,\
|
|
6982
|
+
"description": "Called when the user leaves the field with text that isn't a valid,\nallowed date. Use it to set your own `Field` error."
|
|
6983
6983
|
},
|
|
6984
6984
|
{
|
|
6985
6985
|
"name": "invalidMessage",
|
|
6986
6986
|
"type": "ReactNode | ((error: DateInputError) => ReactNode)",
|
|
6987
6987
|
"required": false,
|
|
6988
|
-
"description": "Message shown under the field when typed text is rejected. Pass a\
|
|
6988
|
+
"description": "Message shown under the field when typed text is rejected. Pass a\nfunction to word it per reason, or `null` to show none (for example\nwhen you show a `Field` error from `onInvalidInput` instead).\nDefaults to \"Enter a date as MM/DD/YYYY.\" and range/availability messages."
|
|
6989
6989
|
},
|
|
6990
6990
|
{
|
|
6991
6991
|
"name": "chooseDateLabel",
|
|
@@ -7109,7 +7109,7 @@
|
|
|
7109
7109
|
"category": "forms",
|
|
7110
7110
|
"folder": "DatePicker",
|
|
7111
7111
|
"import": "import { DateRangePicker } from \"@vjdesigns/vjdesigns-ui\";",
|
|
7112
|
-
"description": "A date range field: two text fields (start and end) typed in the locale's\
|
|
7112
|
+
"description": "A date range field: two text fields (start and end) typed in the locale's\nshort format, plus a calendar button that opens a range `Calendar` (two\nmonths by default) in a modal popup.\n\nThe value is `{ start, end }` with ISO dates (\"YYYY-MM-DD\"). In the\ncalendar, the first pick sets the start and the second the end; the range\nis committed (and the popup closes) only when both are picked, so Escape\nafter one pick changes nothing. Typed dates are validated like\n`DatePicker`'s, plus an end before the start is rejected.\n\nAccessibility: the pair is a `role=\"group\"` named by the `Field` label\n(or `aria-label`); each field is named by that label plus its own\nvisible label (\"Season dates, Start date\"). Field hint, error, required, disabled, and\ninvalid state reach both fields. Errors are announced politely.\n\n```tsx\n<Field label=\"Season dates\">\n <DateRangePicker startName=\"from\" endName=\"to\" onValueChange={setRange} />\n</Field>\n```",
|
|
7113
7113
|
"props": [
|
|
7114
7114
|
{
|
|
7115
7115
|
"name": "value",
|
|
@@ -7127,7 +7127,7 @@
|
|
|
7127
7127
|
"name": "onValueChange",
|
|
7128
7128
|
"type": "(value: DateRange) => void",
|
|
7129
7129
|
"required": false,
|
|
7130
|
-
"description": "Called with the new range when the user completes a pick in the\
|
|
7130
|
+
"description": "Called with the new range when the user completes a pick in the\ncalendar, or types a date in either field and leaves it. Typed text that\nisn't a valid, allowed date clears that end."
|
|
7131
7131
|
},
|
|
7132
7132
|
{
|
|
7133
7133
|
"name": "min",
|
|
@@ -7214,7 +7214,7 @@
|
|
|
7214
7214
|
"name": "invalidMessage",
|
|
7215
7215
|
"type": "ReactNode | ((error: DateRangeInputError) => ReactNode)",
|
|
7216
7216
|
"required": false,
|
|
7217
|
-
"description": "Message shown under the fields when typed text is rejected. Pass a\
|
|
7217
|
+
"description": "Message shown under the fields when typed text is rejected. Pass a\nfunction to word it per reason, or `null` to show none."
|
|
7218
7218
|
},
|
|
7219
7219
|
{
|
|
7220
7220
|
"name": "startLabel",
|
|
@@ -7342,7 +7342,7 @@
|
|
|
7342
7342
|
"category": "forms",
|
|
7343
7343
|
"folder": "DateTimePicker",
|
|
7344
7344
|
"import": "import { DateTimePicker } from \"@vjdesigns/vjdesigns-ui\";",
|
|
7345
|
-
"description": "A date and a time together: a `DatePicker` and a `TimePicker` side by\
|
|
7345
|
+
"description": "A date and a time together: a `DatePicker` and a `TimePicker` side by\nside, with one value, \"YYYY-MM-DDTHH:mm\" (the format of a native\n`datetime-local` input, with no time zone). Each half keeps its full\nbehavior: typed dates in the locale's format or the calendar popup, typed\ntimes in any common form or the list of times.\n\n`min` and `max` limit the calendar by their dates, and the time list by\ntheir times on those boundary dates. `defaultTime` fills the time when a\ndate is picked first.\n\nAccessibility: the pair is a `role=\"group\"` named by the `Field` label\n(or `aria-label`); each field is named by that label plus its own\nvisible label (\"Tip-off, Date\", \"Tip-off, Time\"). Field hint, error,\nrequired, disabled, and invalid state reach both.\n\n```tsx\n<Field label=\"Tip-off\">\n <DateTimePicker name=\"tipoff\" defaultTime=\"19:00\" step={15} />\n</Field>\n```",
|
|
7346
7346
|
"props": [
|
|
7347
7347
|
{
|
|
7348
7348
|
"name": "value",
|
|
@@ -7360,7 +7360,7 @@
|
|
|
7360
7360
|
"name": "onValueChange",
|
|
7361
7361
|
"type": "(value: ISODateTime | null) => void",
|
|
7362
7362
|
"required": false,
|
|
7363
|
-
"description": "Called with \"YYYY-MM-DDTHH:mm\" once both a date and a time are set, and\
|
|
7363
|
+
"description": "Called with \"YYYY-MM-DDTHH:mm\" once both a date and a time are set, and\nwith null when either is cleared or invalid."
|
|
7364
7364
|
},
|
|
7365
7365
|
{
|
|
7366
7366
|
"name": "min",
|
|
@@ -7397,7 +7397,7 @@
|
|
|
7397
7397
|
"name": "defaultTime",
|
|
7398
7398
|
"type": "ISOTime",
|
|
7399
7399
|
"required": false,
|
|
7400
|
-
"description": "Time filled in when a date is picked while the time is empty (e.g.\
|
|
7400
|
+
"description": "Time filled in when a date is picked while the time is empty (e.g.\n\"09:00\"), so one pick gives a complete value. Without it, the value\nstays null until a time is set."
|
|
7401
7401
|
},
|
|
7402
7402
|
{
|
|
7403
7403
|
"name": "locale",
|
|
@@ -7545,7 +7545,7 @@
|
|
|
7545
7545
|
},
|
|
7546
7546
|
{
|
|
7547
7547
|
"name": "Min And Max",
|
|
7548
|
-
"description": "`min` and `max` limit the calendar by date, and the time list on the\
|
|
7548
|
+
"description": "`min` and `max` limit the calendar by date, and the time list on the\nboundary dates only: on Oct 22 the list starts at 6:00 PM; on other days\nit's the whole day."
|
|
7549
7549
|
},
|
|
7550
7550
|
{
|
|
7551
7551
|
"name": "Controlled",
|
|
@@ -9580,7 +9580,7 @@
|
|
|
9580
9580
|
"category": "forms",
|
|
9581
9581
|
"folder": "Rating",
|
|
9582
9582
|
"import": "import { Rating } from \"@vjdesigns/vjdesigns-ui\";",
|
|
9583
|
-
"description": "An editable star (or custom icon) rating, built on real native radios\
|
|
9583
|
+
"description": "An editable star (or custom icon) rating, built on real native radios\n(visually hidden but focusable, sharing one `name`) inside\n`role=\"radiogroup\"`. Tab lands on the selected value (or the first option),\narrow keys move and select, and the value submits with a form. Supports\nhalf values, clearing, hover preview, and Field/Fieldset wiring.",
|
|
9584
9584
|
"nativeElement": "div",
|
|
9585
9585
|
"props": [
|
|
9586
9586
|
{
|
|
@@ -9595,21 +9595,21 @@
|
|
|
9595
9595
|
"type": "Size",
|
|
9596
9596
|
"required": false,
|
|
9597
9597
|
"default": "\"md\"",
|
|
9598
|
-
"description": "Icon size. `Rating`: sm 20px, md 24px, lg 32px icons (every hit target\
|
|
9598
|
+
"description": "Icon size. `Rating`: sm 20px, md 24px, lg 32px icons (every hit target\nis still at least 24x24px). `RatingDisplay`: sm 16px, md 20px, lg 24px.\nFalls back to a surrounding Field's size."
|
|
9599
9599
|
},
|
|
9600
9600
|
{
|
|
9601
9601
|
"name": "tone",
|
|
9602
9602
|
"type": "Tone",
|
|
9603
9603
|
"required": false,
|
|
9604
9604
|
"default": "\"warning\"",
|
|
9605
|
-
"description": "Color of the filled icons. Uses each tone's verified `--color-{tone}-border`\
|
|
9605
|
+
"description": "Color of the filled icons. Uses each tone's verified `--color-{tone}-border`\n(3:1 on bg, surface, and raised surfaces in both themes). Empty icons are\noutlines in `--color-border-strong`, so filled vs empty differs by shape too."
|
|
9606
9606
|
},
|
|
9607
9607
|
{
|
|
9608
9608
|
"name": "icon",
|
|
9609
9609
|
"type": "ReactNode",
|
|
9610
9610
|
"required": false,
|
|
9611
9611
|
"default": "<StarFilledIcon />",
|
|
9612
|
-
"description": "Filled icon (a filled shape, e.g. `<StarFilledIcon />`). It is sized to the\
|
|
9612
|
+
"description": "Filled icon (a filled shape, e.g. `<StarFilledIcon />`). It is sized to the\nicon box. Keep it visibly different in *shape* from `emptyIcon`\n(filled vs outline), not only in color."
|
|
9613
9613
|
},
|
|
9614
9614
|
{
|
|
9615
9615
|
"name": "emptyIcon",
|
|
@@ -9648,20 +9648,20 @@
|
|
|
9648
9648
|
"type": "RatingPrecision",
|
|
9649
9649
|
"required": false,
|
|
9650
9650
|
"default": "1",
|
|
9651
|
-
"description": "Step between values. `0.5` renders two radios per icon (left and right\
|
|
9651
|
+
"description": "Step between values. `0.5` renders two radios per icon (left and right\nhalves). Each half hit area is kept at least 24px wide, so half-precision\nicons sit in 48px-wide cells at every size."
|
|
9652
9652
|
},
|
|
9653
9653
|
{
|
|
9654
9654
|
"name": "allowZero",
|
|
9655
9655
|
"type": "boolean",
|
|
9656
9656
|
"required": false,
|
|
9657
9657
|
"default": "false",
|
|
9658
|
-
"description": "Adds a \"0\" option before the first icon, so zero is a real rating\
|
|
9658
|
+
"description": "Adds a \"0\" option before the first icon, so zero is a real rating\n(\"0 out of 5\"), distinct from no rating (`null`). It is the first radio,\nso ArrowLeft from the lowest icon reaches it."
|
|
9659
9659
|
},
|
|
9660
9660
|
{
|
|
9661
9661
|
"name": "allowClear",
|
|
9662
9662
|
"type": "boolean",
|
|
9663
9663
|
"required": false,
|
|
9664
|
-
"description": "Let the user remove their rating: clicking (or pressing Space on) the\
|
|
9664
|
+
"description": "Let the user remove their rating: clicking (or pressing Space on) the\nselected value again, or pressing Delete / Backspace, resets it to `null`."
|
|
9665
9665
|
},
|
|
9666
9666
|
{
|
|
9667
9667
|
"name": "clearHint",
|
|
@@ -9687,7 +9687,7 @@
|
|
|
9687
9687
|
"name": "readOnly",
|
|
9688
9688
|
"type": "boolean",
|
|
9689
9689
|
"required": false,
|
|
9690
|
-
"description": "Show the value without allowing changes. Renders the `RatingDisplay`\
|
|
9690
|
+
"description": "Show the value without allowing changes. Renders the `RatingDisplay`\nlook (a single `role=\"img\"`, not focusable) plus a hidden input so the\nvalue still submits with a form when `name` is set."
|
|
9691
9691
|
},
|
|
9692
9692
|
{
|
|
9693
9693
|
"name": "invalid",
|
|
@@ -9732,7 +9732,7 @@
|
|
|
9732
9732
|
"name": "label",
|
|
9733
9733
|
"type": "ReactNode",
|
|
9734
9734
|
"required": false,
|
|
9735
|
-
"description": "Visible label, used when the rating stands alone. Ignored inside a\
|
|
9735
|
+
"description": "Visible label, used when the rating stands alone. Ignored inside a\n`Field`/`Fieldset`, whose label or legend names it. Without a label,\npass `aria-label` or `aria-labelledby`."
|
|
9736
9736
|
},
|
|
9737
9737
|
{
|
|
9738
9738
|
"name": "description",
|
|
@@ -9754,7 +9754,7 @@
|
|
|
9754
9754
|
},
|
|
9755
9755
|
{
|
|
9756
9756
|
"name": "Zero to five, in halves",
|
|
9757
|
-
"description": "`allowZero` adds a \"0\" option before the stars, so 0/5 is a real rating\
|
|
9757
|
+
"description": "`allowZero` adds a \"0\" option before the stars, so 0/5 is a real rating\n(not the same as no rating, `null`). With `precision={0.5}`, every value\nfrom 0 to 5 in halves can be picked by pointer or keyboard."
|
|
9758
9758
|
},
|
|
9759
9759
|
{
|
|
9760
9760
|
"name": "Zero (read-only)",
|
|
@@ -9815,7 +9815,7 @@
|
|
|
9815
9815
|
"category": "forms",
|
|
9816
9816
|
"folder": "Rating",
|
|
9817
9817
|
"import": "import { RatingDisplay } from \"@vjdesigns/vjdesigns-ui\";",
|
|
9818
|
-
"description": "A read-only rating: a row of icons with fractional fill, exposed to\
|
|
9818
|
+
"description": "A read-only rating: a row of icons with fractional fill, exposed to\nassistive tech as a single `role=\"img\"` named \"Rated 4.5 out of 5\",\noptionally followed by the value (\"4.5 / 5\") and a review count.\nNot focusable. For an editable rating use `Rating`.",
|
|
9819
9819
|
"nativeElement": "span",
|
|
9820
9820
|
"props": [
|
|
9821
9821
|
{
|
|
@@ -9830,21 +9830,21 @@
|
|
|
9830
9830
|
"type": "Size",
|
|
9831
9831
|
"required": false,
|
|
9832
9832
|
"default": "\"md\"",
|
|
9833
|
-
"description": "Icon size. `Rating`: sm 20px, md 24px, lg 32px icons (every hit target\
|
|
9833
|
+
"description": "Icon size. `Rating`: sm 20px, md 24px, lg 32px icons (every hit target\nis still at least 24x24px). `RatingDisplay`: sm 16px, md 20px, lg 24px.\nFalls back to a surrounding Field's size."
|
|
9834
9834
|
},
|
|
9835
9835
|
{
|
|
9836
9836
|
"name": "tone",
|
|
9837
9837
|
"type": "Tone",
|
|
9838
9838
|
"required": false,
|
|
9839
9839
|
"default": "\"warning\"",
|
|
9840
|
-
"description": "Color of the filled icons. Uses each tone's verified `--color-{tone}-border`\
|
|
9840
|
+
"description": "Color of the filled icons. Uses each tone's verified `--color-{tone}-border`\n(3:1 on bg, surface, and raised surfaces in both themes). Empty icons are\noutlines in `--color-border-strong`, so filled vs empty differs by shape too."
|
|
9841
9841
|
},
|
|
9842
9842
|
{
|
|
9843
9843
|
"name": "icon",
|
|
9844
9844
|
"type": "ReactNode",
|
|
9845
9845
|
"required": false,
|
|
9846
9846
|
"default": "<StarFilledIcon />",
|
|
9847
|
-
"description": "Filled icon (a filled shape, e.g. `<StarFilledIcon />`). It is sized to the\
|
|
9847
|
+
"description": "Filled icon (a filled shape, e.g. `<StarFilledIcon />`). It is sized to the\nicon box. Keep it visibly different in *shape* from `emptyIcon`\n(filled vs outline), not only in color."
|
|
9848
9848
|
},
|
|
9849
9849
|
{
|
|
9850
9850
|
"name": "emptyIcon",
|
|
@@ -9883,7 +9883,7 @@
|
|
|
9883
9883
|
"type": "(value: number, max: number) => string",
|
|
9884
9884
|
"required": false,
|
|
9885
9885
|
"default": "\"Rated 4.5 out of 5\"",
|
|
9886
|
-
"description": "Accessible name of the icon row (`role=\"img\"`). Localize it here.\
|
|
9886
|
+
"description": "Accessible name of the icon row (`role=\"img\"`). Localize it here.\nAn explicit `aria-label` prop wins."
|
|
9887
9887
|
}
|
|
9888
9888
|
],
|
|
9889
9889
|
"subcomponents": [],
|
|
@@ -9899,7 +9899,7 @@
|
|
|
9899
9899
|
},
|
|
9900
9900
|
{
|
|
9901
9901
|
"name": "Zero to five, in halves",
|
|
9902
|
-
"description": "`allowZero` adds a \"0\" option before the stars, so 0/5 is a real rating\
|
|
9902
|
+
"description": "`allowZero` adds a \"0\" option before the stars, so 0/5 is a real rating\n(not the same as no rating, `null`). With `precision={0.5}`, every value\nfrom 0 to 5 in halves can be picked by pointer or keyboard."
|
|
9903
9903
|
},
|
|
9904
9904
|
{
|
|
9905
9905
|
"name": "Zero (read-only)",
|
|
@@ -10989,7 +10989,7 @@
|
|
|
10989
10989
|
"category": "forms",
|
|
10990
10990
|
"folder": "TagInput",
|
|
10991
10991
|
"import": "import { TagInput } from \"@vjdesigns/vjdesigns-ui\";",
|
|
10992
|
-
"description": "A text field that turns entries into removable tags (chips). Type and\
|
|
10992
|
+
"description": "A text field that turns entries into removable tags (chips). Type and\npress Enter (or a delimiter such as a comma) to add; paste \"a, b, c\" to\nadd several at once.\n\nKeyboard:\n- Enter / delimiters (and Tab with `addOnTab`): add the typed text.\n- Backspace in an empty input, or Left Arrow with the caret at the\n start: move focus to the last tag's remove button. A second Backspace\n (or Delete) removes that tag and focus returns to the next tag, or the\n input. This two-step pattern avoids deleting a tag by accident and\n lets screen readers announce which tag is about to be removed.\n- On a tag: Left / Right Arrow move between tags and back to the input;\n Home / End jump to the first tag / the input; Backspace or Delete removes.\n\nInside a `Field`, the label, hint, error, required, disabled, read-only,\nand size are wired automatically. `ref` points at the `<input>`;\nnative input props are spread onto it, while `className` and `style` go\nto the outer wrapper.\n\n```tsx\n<Field label=\"Skills\">\n <TagInput defaultValue={[\"Defense\"]} placeholder=\"Add a skill\" />\n</Field>\n```",
|
|
10993
10993
|
"nativeElement": "input",
|
|
10994
10994
|
"props": [
|
|
10995
10995
|
{
|
|
@@ -11035,14 +11035,14 @@
|
|
|
11035
11035
|
"type": "string[]",
|
|
11036
11036
|
"required": false,
|
|
11037
11037
|
"default": "[\",\"]",
|
|
11038
|
-
"description": "Strings that end a tag as they are typed, in addition to Enter. Pasted\
|
|
11038
|
+
"description": "Strings that end a tag as they are typed, in addition to Enter. Pasted\ntext is also split on them (and on line breaks)."
|
|
11039
11039
|
},
|
|
11040
11040
|
{
|
|
11041
11041
|
"name": "addOnTab",
|
|
11042
11042
|
"type": "boolean",
|
|
11043
11043
|
"required": false,
|
|
11044
11044
|
"default": "false",
|
|
11045
|
-
"description": "Tab adds the typed text as a tag (focus stays in the input). Tab still\
|
|
11045
|
+
"description": "Tab adds the typed text as a tag (focus stays in the input). Tab still\nmoves focus normally when the input is empty or the text is rejected,\nso it never traps the keyboard."
|
|
11046
11046
|
},
|
|
11047
11047
|
{
|
|
11048
11048
|
"name": "addOnBlur",
|
|
@@ -11056,19 +11056,19 @@
|
|
|
11056
11056
|
"type": "boolean",
|
|
11057
11057
|
"required": false,
|
|
11058
11058
|
"default": "false",
|
|
11059
|
-
"description": "Allow the same tag more than once. When `false`, entering an existing\
|
|
11059
|
+
"description": "Allow the same tag more than once. When `false`, entering an existing\ntag highlights it briefly and announces \"{tag} is already added\".\nComparison is exact after `transform` (use `transform` to lowercase for\ncase-insensitive tags)."
|
|
11060
11060
|
},
|
|
11061
11061
|
{
|
|
11062
11062
|
"name": "maxTags",
|
|
11063
11063
|
"type": "number",
|
|
11064
11064
|
"required": false,
|
|
11065
|
-
"description": "Maximum number of tags. When reached, the input becomes read-only, the\
|
|
11065
|
+
"description": "Maximum number of tags. When reached, the input becomes read-only, the\nplaceholder hides, and \"Maximum of N tags reached\" is announced and\nadded to the input's description."
|
|
11066
11066
|
},
|
|
11067
11067
|
{
|
|
11068
11068
|
"name": "validate",
|
|
11069
11069
|
"type": "(tag: string) => boolean | string",
|
|
11070
11070
|
"required": false,
|
|
11071
|
-
"description": "Checks a tag before it is added (after trimming and `transform`).\
|
|
11071
|
+
"description": "Checks a tag before it is added (after trimming and `transform`).\nReturn `true` to accept, `false` to reject with a generic message, or a\nstring to reject with that message. The message is shown under the\nfield, linked with `aria-describedby`, and announced; the rejected text\nstays in the input so it can be fixed."
|
|
11072
11072
|
},
|
|
11073
11073
|
{
|
|
11074
11074
|
"name": "transform",
|
|
@@ -11109,7 +11109,7 @@
|
|
|
11109
11109
|
"type": "boolean",
|
|
11110
11110
|
"required": false,
|
|
11111
11111
|
"default": "false",
|
|
11112
|
-
"description": "Requires at least one tag. Sets `aria-required` on the input and a\
|
|
11112
|
+
"description": "Requires at least one tag. Sets `aria-required` on the input and a\nnative validation message (`messages.required`) while there are no\ntags, so form submission is blocked. Inherits from a surrounding `Field`."
|
|
11113
11113
|
},
|
|
11114
11114
|
{
|
|
11115
11115
|
"name": "placeholder",
|
|
@@ -11121,7 +11121,7 @@
|
|
|
11121
11121
|
"name": "name",
|
|
11122
11122
|
"type": "string",
|
|
11123
11123
|
"required": false,
|
|
11124
|
-
"description": "Form field name. Renders one `<input type=\"hidden\" name={name}>` per\
|
|
11124
|
+
"description": "Form field name. Renders one `<input type=\"hidden\" name={name}>` per\ntag, so `formData.getAll(name)` returns the tags as an array."
|
|
11125
11125
|
},
|
|
11126
11126
|
{
|
|
11127
11127
|
"name": "chipVariant",
|
|
@@ -11148,13 +11148,13 @@
|
|
|
11148
11148
|
"name": "tagListLabel",
|
|
11149
11149
|
"type": "string",
|
|
11150
11150
|
"required": false,
|
|
11151
|
-
"description": "Accessible name of the tag list. Defaults to the surrounding `Field`'s\
|
|
11151
|
+
"description": "Accessible name of the tag list. Defaults to the surrounding `Field`'s\nlabel (or the input's `aria-labelledby`), else \"Tags\"."
|
|
11152
11152
|
},
|
|
11153
11153
|
{
|
|
11154
11154
|
"name": "instructions",
|
|
11155
11155
|
"type": "string",
|
|
11156
11156
|
"required": false,
|
|
11157
|
-
"description": "Visually hidden keyboard instructions, linked to the input with\
|
|
11157
|
+
"description": "Visually hidden keyboard instructions, linked to the input with\n`aria-describedby`. Generated from `delimiters` and `addOnTab` by default."
|
|
11158
11158
|
},
|
|
11159
11159
|
{
|
|
11160
11160
|
"name": "messages",
|
|
@@ -11409,7 +11409,7 @@
|
|
|
11409
11409
|
"category": "forms",
|
|
11410
11410
|
"folder": "TimePicker",
|
|
11411
11411
|
"import": "import { TimePicker } from \"@vjdesigns/vjdesigns-ui\";",
|
|
11412
|
-
"description": "A time field: type a time in almost any form (\"2:30 pm\", \"1430\", \"230p\",\
|
|
11412
|
+
"description": "A time field: type a time in almost any form (\"2:30 pm\", \"1430\", \"230p\",\n\"14h30\", the locale's own format), or pick one from a list of times\n`step` minutes apart. Built on `Combobox`, so the list follows the\nWAI-ARIA combobox pattern: ArrowDown opens it on the selected time,\narrows move, Enter picks, Escape closes, and typing filters it.\n\nThe value is a 24-hour \"HH:mm\" string, the same as a native\n`<input type=\"time\">`, so it never shifts with time zones. The field\nshows it in the locale's clock (12- or 24-hour, override with\n`hourCycle`). On blur (or Enter), typed text is parsed and normalized, or\nrejected with an inline, announced error. Inside a `Field`, label, hint,\nerror, required, disabled, and invalid state are wired to the input.\n\n```tsx\n<Field label=\"Tip-off\">\n <TimePicker name=\"tipoff\" min=\"08:00\" max=\"22:00\" step={15} />\n</Field>\n```",
|
|
11413
11413
|
"props": [
|
|
11414
11414
|
{
|
|
11415
11415
|
"name": "value",
|
|
@@ -11427,7 +11427,7 @@
|
|
|
11427
11427
|
"name": "onValueChange",
|
|
11428
11428
|
"type": "(value: ISOTime | null) => void",
|
|
11429
11429
|
"required": false,
|
|
11430
|
-
"description": "Called with the new time (\"HH:mm\") or null when the user picks one from\
|
|
11430
|
+
"description": "Called with the new time (\"HH:mm\") or null when the user picks one from\nthe list, types one and leaves the field, or clears it. Typed text that\nisn't a valid, allowed time sets the value to null."
|
|
11431
11431
|
},
|
|
11432
11432
|
{
|
|
11433
11433
|
"name": "min",
|
|
@@ -11535,13 +11535,13 @@
|
|
|
11535
11535
|
"name": "onInvalidInput",
|
|
11536
11536
|
"type": "(error: TimeInputError) => void",
|
|
11537
11537
|
"required": false,
|
|
11538
|
-
"description": "Called when the user leaves the field with text that isn't a valid,\
|
|
11538
|
+
"description": "Called when the user leaves the field with text that isn't a valid,\nallowed time. Use it to set your own `Field` error."
|
|
11539
11539
|
},
|
|
11540
11540
|
{
|
|
11541
11541
|
"name": "invalidMessage",
|
|
11542
11542
|
"type": "ReactNode | ((error: TimeInputError) => ReactNode)",
|
|
11543
11543
|
"required": false,
|
|
11544
|
-
"description": "Message shown under the field when typed text is rejected. Pass a\
|
|
11544
|
+
"description": "Message shown under the field when typed text is rejected. Pass a\nfunction to word it per reason, or `null` to show none (when you show a\n`Field` error from `onInvalidInput` instead)."
|
|
11545
11545
|
},
|
|
11546
11546
|
{
|
|
11547
11547
|
"name": "formatDescription",
|
|
@@ -11622,7 +11622,7 @@
|
|
|
11622
11622
|
},
|
|
11623
11623
|
{
|
|
11624
11624
|
"name": "Validation",
|
|
11625
|
-
"description": "Text it can't read, or a time outside `min` / `max`, is flagged inline\
|
|
11625
|
+
"description": "Text it can't read, or a time outside `min` / `max`, is flagged inline\nand announced politely; the value becomes null. `onInvalidInput` lets you\nshow your own `Field` error instead (with `invalidMessage={null}`)."
|
|
11626
11626
|
},
|
|
11627
11627
|
{
|
|
11628
11628
|
"name": "Typed Formats",
|
|
@@ -13146,7 +13146,7 @@
|
|
|
13146
13146
|
"stories": [
|
|
13147
13147
|
{
|
|
13148
13148
|
"name": "Playground",
|
|
13149
|
-
"description": "A collapsible playbook beside the court. Keyboard: Tab to the handle;\
|
|
13149
|
+
"description": "A collapsible playbook beside the court. Keyboard: Tab to the handle;\n←/→ resize, Home/End jump to the limits, Enter collapses and restores."
|
|
13150
13150
|
},
|
|
13151
13151
|
{
|
|
13152
13152
|
"name": "Pointer Resize",
|
|
@@ -13175,7 +13175,7 @@
|
|
|
13175
13175
|
"category": "layout",
|
|
13176
13176
|
"folder": "ScrollArea",
|
|
13177
13177
|
"import": "import { ScrollArea } from \"@vjdesigns/vjdesigns-ui\";",
|
|
13178
|
-
"description": "A scrolling region with slim, on-brand scrollbars that work the same in\
|
|
13178
|
+
"description": "A scrolling region with slim, on-brand scrollbars that work the same in\nevery browser. Scrolling itself stays native (wheel, touch, trackpad\nmomentum, keyboard, find-in-page, scroll anchoring); only the look of the\nbars is custom. The thumbs can be dragged, and pressing the track pages\ntoward the press.\n\nAccessibility: while the content overflows, the viewport is focusable\n(`tabIndex=0`) so keyboard users can scroll it with the arrow keys, Page\nUp / Page Down, and Home / End. Give it a name with `aria-label` or\n`aria-labelledby`, which also makes it a `region` landmark. The custom\nbars are hidden from assistive technology (they duplicate native\nscrolling). Edge shadows show there is more to see. In Windows High\nContrast mode the native scrollbars come back.\n\n```tsx\n<ScrollArea maxHeight=\"20rem\" aria-label=\"Roster\">\n <List>…</List>\n</ScrollArea>\n```",
|
|
13179
13179
|
"nativeElement": "div",
|
|
13180
13180
|
"props": [
|
|
13181
13181
|
{
|
|
@@ -13216,7 +13216,7 @@
|
|
|
13216
13216
|
"type": "boolean",
|
|
13217
13217
|
"required": false,
|
|
13218
13218
|
"default": "true",
|
|
13219
|
-
"description": "Fade the edges where more content is hidden, so it's clear the area\
|
|
13219
|
+
"description": "Fade the edges where more content is hidden, so it's clear the area\nscrolls even before the scrollbar is noticed."
|
|
13220
13220
|
},
|
|
13221
13221
|
{
|
|
13222
13222
|
"name": "hideDelay",
|
|
@@ -13229,7 +13229,7 @@
|
|
|
13229
13229
|
"name": "viewportRef",
|
|
13230
13230
|
"type": "Ref<HTMLDivElement>",
|
|
13231
13231
|
"required": false,
|
|
13232
|
-
"description": "Ref to the scrolling viewport element (to read or set `scrollTop`, or\
|
|
13232
|
+
"description": "Ref to the scrolling viewport element (to read or set `scrollTop`, or\ncall `scrollTo`). `ref` goes to the outer root."
|
|
13233
13233
|
},
|
|
13234
13234
|
{
|
|
13235
13235
|
"name": "viewportClassName",
|
|
@@ -13273,7 +13273,7 @@
|
|
|
13273
13273
|
},
|
|
13274
13274
|
{
|
|
13275
13275
|
"name": "All Types",
|
|
13276
|
-
"description": "When the bars show, side by side. `auto` (default) shows them whenever\
|
|
13276
|
+
"description": "When the bars show, side by side. `auto` (default) shows them whenever\ncontent overflows; `hover` while the pointer is over the area, it's\nscrolling, or focus is inside; `scroll` only while scrolling; `always`\nkeeps the track even when nothing overflows."
|
|
13277
13277
|
},
|
|
13278
13278
|
{
|
|
13279
13279
|
"name": "Sizes",
|
|
@@ -13678,7 +13678,7 @@
|
|
|
13678
13678
|
"category": "navigation",
|
|
13679
13679
|
"folder": "ContextMenu",
|
|
13680
13680
|
"import": "import { ContextMenu } from \"@vjdesigns/vjdesigns-ui\";",
|
|
13681
|
-
"description": "A menu that opens at the pointer on right-click (or a long press on touch\
|
|
13681
|
+
"description": "A menu that opens at the pointer on right-click (or a long press on touch\nscreens), for actions on the thing under the pointer. It is a `Menu` in\nevery other way: compose it from the same items (`ContextMenu.Item`,\n`.CheckboxItem`, `.RadioGroup` / `.RadioItem`, `.Group` / `.Label`,\n`.Separator`, and submenus), with the same keyboard model (arrows, Home /\nEnd, typeahead, Escape, Tab) and RTL support.\n\nKeyboard: with focus inside the trigger area, Shift+F10 or the Menu key\nopens the menu next to the focused element and focuses its first item.\nOn close, focus goes back to where it was.\n\nRight-click menus are hard to discover, and many touch screens and\nassistive technologies never open them, so offer the same actions\nsomewhere visible too (a `Menu` button, a toolbar). Treat the context\nmenu as a shortcut, never the only way.\n\n```tsx\n<ContextMenu>\n <ContextMenu.Trigger>\n <Card tabIndex={0}>Game film</Card>\n </ContextMenu.Trigger>\n <ContextMenu.Content>\n <ContextMenu.Item onSelect={rename}>Rename</ContextMenu.Item>\n <ContextMenu.Item tone=\"danger\" onSelect={remove}>Delete</ContextMenu.Item>\n </ContextMenu.Content>\n</ContextMenu>\n```",
|
|
13682
13682
|
"props": [
|
|
13683
13683
|
{
|
|
13684
13684
|
"name": "children",
|
|
@@ -13716,7 +13716,7 @@
|
|
|
13716
13716
|
"name": "closeOnSelect",
|
|
13717
13717
|
"type": "boolean",
|
|
13718
13718
|
"required": false,
|
|
13719
|
-
"description": "Default for every item's `closeOnSelect`. When unset, plain items close\
|
|
13719
|
+
"description": "Default for every item's `closeOnSelect`. When unset, plain items close\nthe menu on selection; checkbox and radio items keep it open."
|
|
13720
13720
|
},
|
|
13721
13721
|
{
|
|
13722
13722
|
"name": "disabled",
|
|
@@ -13737,7 +13737,7 @@
|
|
|
13737
13737
|
{
|
|
13738
13738
|
"name": "ContextMenu.Trigger",
|
|
13739
13739
|
"exportedAs": "ContextMenuTrigger",
|
|
13740
|
-
"description": "The area that opens the menu: right-click, a touch long press, or\
|
|
13740
|
+
"description": "The area that opens the menu: right-click, a touch long press, or\nShift+F10 / the Menu key while focus is inside it. Make the area (or the\nitems in it) focusable so keyboard users can reach the menu.",
|
|
13741
13741
|
"nativeElement": "div",
|
|
13742
13742
|
"props": [
|
|
13743
13743
|
{
|
|
@@ -13751,14 +13751,14 @@
|
|
|
13751
13751
|
"type": "boolean",
|
|
13752
13752
|
"required": false,
|
|
13753
13753
|
"default": "false",
|
|
13754
|
-
"description": "Clone the single child instead of wrapping it in a `div`. The child must\
|
|
13754
|
+
"description": "Clone the single child instead of wrapping it in a `div`. The child must\naccept `ref`, `className`, and the pointer, context menu, and key handlers."
|
|
13755
13755
|
}
|
|
13756
13756
|
]
|
|
13757
13757
|
},
|
|
13758
13758
|
{
|
|
13759
13759
|
"name": "ContextMenu.Content",
|
|
13760
13760
|
"exportedAs": "ContextMenuContent",
|
|
13761
|
-
"description": "The floating menu (`role=\"menu\"`), opened at the pointer. Takes the same\
|
|
13761
|
+
"description": "The floating menu (`role=\"menu\"`), opened at the pointer. Takes the same\nprops as `Menu.Content`; `placement` is relative to the pointer, and\nflips and clamps to stay on screen. @see MenuContent",
|
|
13762
13762
|
"nativeElement": "div",
|
|
13763
13763
|
"props": [
|
|
13764
13764
|
{
|
|
@@ -13799,7 +13799,7 @@
|
|
|
13799
13799
|
"name": "aria-label",
|
|
13800
13800
|
"type": "string",
|
|
13801
13801
|
"required": false,
|
|
13802
|
-
"description": "Accessible name of the menu. Defaults to \"Context menu\" (translated);\
|
|
13802
|
+
"description": "Accessible name of the menu. Defaults to \"Context menu\" (translated);\nname it after what it acts on when you can (\"Game film actions\")."
|
|
13803
13803
|
}
|
|
13804
13804
|
]
|
|
13805
13805
|
},
|
|
@@ -14219,11 +14219,11 @@
|
|
|
14219
14219
|
"stories": [
|
|
14220
14220
|
{
|
|
14221
14221
|
"name": "Playground",
|
|
14222
|
-
"description": "Right-click the area (or long-press it on a touch screen). With the area\
|
|
14222
|
+
"description": "Right-click the area (or long-press it on a touch screen). With the area\nfocused, Shift+F10 or the Menu key opens the menu on the first item."
|
|
14223
14223
|
},
|
|
14224
14224
|
{
|
|
14225
14225
|
"name": "Keyboard",
|
|
14226
|
-
"description": "Keyboard: Shift+F10 (or the Menu key) opens the menu next to the focused\
|
|
14226
|
+
"description": "Keyboard: Shift+F10 (or the Menu key) opens the menu next to the focused\nelement and focuses the first item. Escape closes it and focus goes back."
|
|
14227
14227
|
},
|
|
14228
14228
|
{
|
|
14229
14229
|
"name": "Long Press",
|
|
@@ -14407,7 +14407,7 @@
|
|
|
14407
14407
|
"category": "navigation",
|
|
14408
14408
|
"folder": "Menu",
|
|
14409
14409
|
"import": "import { Menu } from \"@vjdesigns/vjdesigns-ui\";",
|
|
14410
|
-
"description": "A dropdown menu of actions or options, opened from a button (WAI-ARIA APG\
|
|
14410
|
+
"description": "A dropdown menu of actions or options, opened from a button (WAI-ARIA APG\n\"Menu Button\" and \"Menu\" patterns). Compose it from `Menu.Trigger`,\n`Menu.Content`, `Menu.Item`, `Menu.CheckboxItem`, `Menu.RadioGroup` /\n`Menu.RadioItem`, `Menu.Group` / `Menu.Label`, `Menu.Separator`, and\nsubmenus (`Menu.Sub`, `Menu.SubTrigger`, `Menu.SubContent`).\n\nKeyboard: Enter, Space, or ArrowDown on the trigger opens the menu and\nfocuses the first item (ArrowUp: the last). Inside, ArrowUp/ArrowDown move\n(wrapping), Home/End jump, typing a character jumps to the next matching\nitem, Enter/Space activates, ArrowRight opens a submenu and ArrowLeft\ncloses it (mirrored in RTL), Escape closes the current level and returns\nfocus to its trigger, and Tab closes the whole menu.\n\nDisabled items stay focusable (`aria-disabled=\"true\"`) so keyboard and\nscreen reader users can still discover them, but can't be activated.\n\n```tsx\n<Menu>\n <Menu.Trigger>Actions</Menu.Trigger>\n <Menu.Content>\n <Menu.Item onSelect={edit}>Edit</Menu.Item>\n <Menu.Item tone=\"danger\" onSelect={remove}>Delete</Menu.Item>\n </Menu.Content>\n</Menu>\n```",
|
|
14411
14411
|
"props": [
|
|
14412
14412
|
{
|
|
14413
14413
|
"name": "children",
|
|
@@ -14445,14 +14445,14 @@
|
|
|
14445
14445
|
"name": "closeOnSelect",
|
|
14446
14446
|
"type": "boolean",
|
|
14447
14447
|
"required": false,
|
|
14448
|
-
"description": "Default for every item's `closeOnSelect`. When unset, plain items\
|
|
14448
|
+
"description": "Default for every item's `closeOnSelect`. When unset, plain items\n(`Menu.Item`) close the menu on selection, while checkbox and radio\nitems keep it open so several can be toggled. An item's own\n`closeOnSelect` always wins."
|
|
14449
14449
|
}
|
|
14450
14450
|
],
|
|
14451
14451
|
"subcomponents": [
|
|
14452
14452
|
{
|
|
14453
14453
|
"name": "Menu.Trigger",
|
|
14454
14454
|
"exportedAs": "MenuTrigger",
|
|
14455
|
-
"description": "The button that opens the menu. Adds `aria-haspopup=\"menu\"`,\
|
|
14455
|
+
"description": "The button that opens the menu. Adds `aria-haspopup=\"menu\"`,\n`aria-expanded`, and `aria-controls`. Pass a single `Button`/`IconButton`\nto use it as-is, or plain content to get a default `Button`.",
|
|
14456
14456
|
"nativeElement": "button",
|
|
14457
14457
|
"props": [
|
|
14458
14458
|
{
|
|
@@ -14546,7 +14546,7 @@
|
|
|
14546
14546
|
"name": "asChild",
|
|
14547
14547
|
"type": "boolean",
|
|
14548
14548
|
"required": false,
|
|
14549
|
-
"description": "Clone the single child instead of wrapping it in a `Button`. Defaults to\
|
|
14549
|
+
"description": "Clone the single child instead of wrapping it in a `Button`. Defaults to\n`true` when `children` is a single element. The child must be a\nfocusable button that accepts `ref`, `id`, `onClick`, `onKeyDown`, and `aria-*`."
|
|
14550
14550
|
}
|
|
14551
14551
|
]
|
|
14552
14552
|
},
|
|
@@ -17514,7 +17514,7 @@
|
|
|
17514
17514
|
"category": "overlays",
|
|
17515
17515
|
"folder": "HoverCard",
|
|
17516
17516
|
"import": "import { HoverCard } from \"@vjdesigns/vjdesigns-ui\";",
|
|
17517
|
-
"description": "A preview card that opens while the pointer rests on a link or button, or\
|
|
17517
|
+
"description": "A preview card that opens while the pointer rests on a link or button, or\nwhile it has keyboard focus: a player's profile behind their name, a page\npreview behind a link. Unlike `Tooltip`, the card can hold rich and\ninteractive content (links, buttons).\n\nMeets WCAG 1.4.13: the pointer can move onto the card, it stays open\nwhile hovered or focused, and Escape closes it. Keyboard users get it\ntoo: focusing the trigger opens it, Tab moves into the card's links, and\nTab past the last one continues to whatever follows the trigger.\n\nTouch screens have no hover, so the card never opens from a tap (the tap\nfollows the link). Treat it as a preview: everything in it must also be\nreachable from the page the trigger leads to.\n\n```tsx\n<HoverCard>\n <HoverCard.Trigger>\n <Link href=\"/players/23\">Jordan Reyes</Link>\n </HoverCard.Trigger>\n <HoverCard.Content>…profile…</HoverCard.Content>\n</HoverCard>\n```",
|
|
17518
17518
|
"props": [
|
|
17519
17519
|
{
|
|
17520
17520
|
"name": "children",
|
|
@@ -17553,7 +17553,7 @@
|
|
|
17553
17553
|
"type": "number",
|
|
17554
17554
|
"required": false,
|
|
17555
17555
|
"default": "300",
|
|
17556
|
-
"description": "Delay before closing after the pointer leaves the trigger or the card,\
|
|
17556
|
+
"description": "Delay before closing after the pointer leaves the trigger or the card,\nin ms. Gives the pointer time to cross the gap onto the card."
|
|
17557
17557
|
}
|
|
17558
17558
|
],
|
|
17559
17559
|
"subcomponents": [
|
|
@@ -17566,14 +17566,14 @@
|
|
|
17566
17566
|
"name": "children",
|
|
17567
17567
|
"type": "ReactElement",
|
|
17568
17568
|
"required": true,
|
|
17569
|
-
"description": "Exactly one focusable element, usually a `Link` (or a button) that\
|
|
17569
|
+
"description": "Exactly one focusable element, usually a `Link` (or a button) that\naccepts `ref`, event handlers, and `data-*` props. Its own handlers and\nref are kept."
|
|
17570
17570
|
}
|
|
17571
17571
|
]
|
|
17572
17572
|
},
|
|
17573
17573
|
{
|
|
17574
17574
|
"name": "HoverCard.Content",
|
|
17575
17575
|
"exportedAs": "HoverCardContent",
|
|
17576
|
-
"description": "The floating card. Rendered in a portal, positioned against the trigger\
|
|
17576
|
+
"description": "The floating card. Rendered in a portal, positioned against the trigger\nwith flip and viewport clamping, and mounted only while open.",
|
|
17577
17577
|
"nativeElement": "div",
|
|
17578
17578
|
"props": [
|
|
17579
17579
|
{
|
|
@@ -17618,11 +17618,11 @@
|
|
|
17618
17618
|
"stories": [
|
|
17619
17619
|
{
|
|
17620
17620
|
"name": "Playground",
|
|
17621
|
-
"description": "Rest the pointer on the name. The card opens after `openDelay`, stays\
|
|
17621
|
+
"description": "Rest the pointer on the name. The card opens after `openDelay`, stays\nopen while the pointer is on the link or the card, and closes\n`closeDelay` after it leaves both."
|
|
17622
17622
|
},
|
|
17623
17623
|
{
|
|
17624
17624
|
"name": "Keyboard",
|
|
17625
|
-
"description": "Keyboard: Tab to the link opens the card. Tab again moves into its links;\
|
|
17625
|
+
"description": "Keyboard: Tab to the link opens the card. Tab again moves into its links;\nTab past the last one continues to what follows the trigger and closes\nthe card. Escape closes it and returns focus to the link."
|
|
17626
17626
|
},
|
|
17627
17627
|
{
|
|
17628
17628
|
"name": "Click Closes",
|
|
@@ -18786,6 +18786,10 @@
|
|
|
18786
18786
|
"name": "Disabled",
|
|
18787
18787
|
"description": ""
|
|
18788
18788
|
},
|
|
18789
|
+
{
|
|
18790
|
+
"name": "Disabled but focusable",
|
|
18791
|
+
"description": "`aria-disabled=\"true\"` instead of `disabled`: the button looks and acts\r\nunavailable (clicks are ignored) but stays focusable, so a tooltip or a\r\ncountdown (\"Resend code in 0:24\") can still be reached and read."
|
|
18792
|
+
},
|
|
18789
18793
|
{
|
|
18790
18794
|
"name": "As Router Link",
|
|
18791
18795
|
"description": "`as` renders your router's link with the button's styling, and its props\r\n(here `to`) are typed. While disabled or loading it becomes a plain\r\n`<a aria-disabled=\"true\">`, since a router link can't render without a\r\ndestination."
|
|
@@ -19718,7 +19722,7 @@
|
|
|
19718
19722
|
"category": "utilities",
|
|
19719
19723
|
"folder": "Theme",
|
|
19720
19724
|
"import": "import { Theme } from \"@vjdesigns/vjdesigns-ui\";",
|
|
19721
|
-
"description": "Applies a brand palette, accent, and/or color mode to everything inside\r\nit, through `data-brand`, `data-accent`, and `data-theme` (and, for hex\r\ncolors, the generated custom properties inline). Wrap the whole app, or\r\nany part of it; themes nest (a blue area inside a purple app, a dark panel\r\non a light page). Overlays opened inside (Popover, Menu, Modal, Tooltip,\r\nToast, ...) render elsewhere in the page but keep this theme. For the whole\r\npage you can instead set the attributes on `<html>`:\r\n`<html data-theme=\"dark\" data-brand=\"purple\" data-accent=\"
|
|
19725
|
+
"description": "Applies a brand palette, accent, and/or color mode to everything inside\r\nit, through `data-brand`, `data-accent`, and `data-theme` (and, for hex\r\ncolors, the generated custom properties inline). Wrap the whole app, or\r\nany part of it; themes nest (a blue area inside a purple app, a dark panel\r\non a light page). Overlays opened inside (Popover, Menu, Modal, Tooltip,\r\nToast, ...) render elsewhere in the page but keep this theme. For the whole\r\npage you can instead set the attributes on `<html>`:\r\n`<html data-theme=\"dark\" data-brand=\"purple\" data-accent=\"lime\">`.",
|
|
19722
19726
|
"nativeElement": "div",
|
|
19723
19727
|
"props": [
|
|
19724
19728
|
{
|
|
@@ -19731,7 +19735,7 @@
|
|
|
19731
19735
|
"name": "accent",
|
|
19732
19736
|
"type": "ThemeAccent | BrandColor",
|
|
19733
19737
|
"required": false,
|
|
19734
|
-
"description": "The accent: the energetic highlight on badges, switches, progress bars,\r\nsliders, steppers, and active navigation. Leave unset to inherit; with no\r\naccent set anywhere, each brand uses its own (a bright shade of its hue).\r\n\r\n`\"
|
|
19738
|
+
"description": "The accent: the energetic highlight on badges, switches, progress bars,\r\nsliders, steppers, and active navigation. Leave unset to inherit; with no\r\naccent set anywhere, each brand uses its own (a bright shade of its hue).\r\n\r\n`\"lime\"` for the original bright yellow-green, `\"brand\"` to go back to the\r\nbrand's own inside an area with another accent, or any hex color for a\r\ncustom accent. Accents always carry dark text, so a color too dark for\r\nthat is lightened (same hue), with a console warning in development. An\r\naccent set here also holds inside nested brands."
|
|
19735
19739
|
},
|
|
19736
19740
|
{
|
|
19737
19741
|
"name": "mode",
|
|
@@ -19784,7 +19788,7 @@
|
|
|
19784
19788
|
},
|
|
19785
19789
|
{
|
|
19786
19790
|
"name": "Accents",
|
|
19787
|
-
"description": "The accent (badges, switches, progress, sliders, active navigation) follows\r\nthe brand by default: a bright shade of its hue, always with dark text.\r\n`accent=\"
|
|
19791
|
+
"description": "The accent (badges, switches, progress, sliders, active navigation) follows\r\nthe brand by default: a bright shade of its hue, always with dark text.\r\n`accent=\"lime\"` restores the original bright yellow-green, and any hex makes a\r\ncustom accent (kept accessible: too-dark colors are lightened)."
|
|
19788
19792
|
},
|
|
19789
19793
|
{
|
|
19790
19794
|
"name": "Accent nesting",
|
|
@@ -19955,55 +19959,55 @@
|
|
|
19955
19959
|
{
|
|
19956
19960
|
"name": "useDisclosure",
|
|
19957
19961
|
"signature": "useDisclosure(initial = false, options: UseDisclosureOptions = {}): [opened: boolean, handlers: DisclosureHandlers]",
|
|
19958
|
-
"description": "Open/closed state for anything that shows and hides (a Modal, Drawer,\
|
|
19962
|
+
"description": "Open/closed state for anything that shows and hides (a Modal, Drawer,\nPopover, a collapsible section), with stable handlers.\n\n```tsx\nconst [opened, { open, close }] = useDisclosure();\n<Button onClick={open}>Edit</Button>\n<Modal open={opened} onOpenChange={(next) => (next ? open() : close())}>…</Modal>\n```",
|
|
19959
19963
|
"module": "hooks/index.ts"
|
|
19960
19964
|
},
|
|
19961
19965
|
{
|
|
19962
19966
|
"name": "useToggle",
|
|
19963
19967
|
"signature": "useToggle(values: readonly T[] = [false, true] as unknown as readonly T[]): [value: T, toggle: (value?: T) => void]",
|
|
19964
|
-
"description": "Cycles through values: `[false, true]` by default (a boolean toggle), or\
|
|
19968
|
+
"description": "Cycles through values: `[false, true]` by default (a boolean toggle), or\nany list (`[\"list\", \"grid\"]`). `toggle()` moves to the next value (wrapping);\n`toggle(value)` jumps to one.\n\n```tsx\nconst [view, toggleView] = useToggle([\"list\", \"grid\"] as const);\n<Button onClick={() => toggleView()}>Show {view === \"list\" ? \"grid\" : \"list\"}</Button>\n```",
|
|
19965
19969
|
"module": "hooks/index.ts"
|
|
19966
19970
|
},
|
|
19967
19971
|
{
|
|
19968
19972
|
"name": "useDebouncedCallback",
|
|
19969
19973
|
"signature": "useDebouncedCallback(callback: (...args: A) => void, wait: number, { leading = false, maxWait }: { leading?: boolean; maxWait?: number } = {}): ControlledCallback<A>",
|
|
19970
|
-
"description": "A function that waits until calls stop for `wait` ms, then runs once with\
|
|
19974
|
+
"description": "A function that waits until calls stop for `wait` ms, then runs once with\nthe last arguments. Always calls the latest `callback`; a pending call is\ndropped on unmount. Use it to save, search, or validate after typing pauses.\n\n```tsx\nconst save = useDebouncedCallback((text: string) => api.saveDraft(text), 500);\n<Textarea onChange={(e) => save(e.target.value)} />\n```",
|
|
19971
19975
|
"module": "hooks/index.ts"
|
|
19972
19976
|
},
|
|
19973
19977
|
{
|
|
19974
19978
|
"name": "useThrottledCallback",
|
|
19975
19979
|
"signature": "useThrottledCallback(callback: (...args: A) => void, wait: number): ControlledCallback<A>",
|
|
19976
|
-
"description": "A function that runs at most once every `wait` ms: the first call runs\
|
|
19980
|
+
"description": "A function that runs at most once every `wait` ms: the first call runs\nright away, and the last call made during the wait runs when it ends.\nUse it for scroll, resize, or pointer-move handlers.\n\n```tsx\nconst track = useThrottledCallback((x: number) => setPosition(x), 100);\n```",
|
|
19977
19981
|
"module": "hooks/index.ts"
|
|
19978
19982
|
},
|
|
19979
19983
|
{
|
|
19980
19984
|
"name": "useDebouncedValue",
|
|
19981
19985
|
"signature": "useDebouncedValue(value: T, wait: number): [debounced: T, controls: { cancel: () => void; flush: () => void }]",
|
|
19982
|
-
"description": "The value, updated only after it stops changing for `wait` ms. Use it to\
|
|
19986
|
+
"description": "The value, updated only after it stops changing for `wait` ms. Use it to\nsearch or fetch as someone types, without a request per keystroke.\n\n```tsx\nconst [query, setQuery] = useState(\"\");\nconst [debouncedQuery] = useDebouncedValue(query, 300);\nuseEffect(() => { search(debouncedQuery); }, [debouncedQuery]);\n```",
|
|
19983
19987
|
"module": "hooks/index.ts"
|
|
19984
19988
|
},
|
|
19985
19989
|
{
|
|
19986
19990
|
"name": "useInterval",
|
|
19987
19991
|
"signature": "useInterval(callback: () => void, delay: number | null): void",
|
|
19988
|
-
"description": "Calls `callback` every `delay` ms while `delay` is a number; pass `null`\
|
|
19992
|
+
"description": "Calls `callback` every `delay` ms while `delay` is a number; pass `null`\nto pause. Always calls the latest `callback`, and stops on unmount.\n\n```tsx\nconst [running, setRunning] = useState(true);\nuseInterval(() => setSeconds((s) => s + 1), running ? 1000 : null);\n```",
|
|
19989
19993
|
"module": "hooks/index.ts"
|
|
19990
19994
|
},
|
|
19991
19995
|
{
|
|
19992
19996
|
"name": "useTimeout",
|
|
19993
19997
|
"signature": "useTimeout(callback: () => void, delay: number | null): { clear: () => void; reset: () => void }",
|
|
19994
|
-
"description": "Calls `callback` once, `delay` ms after mount (or after `delay` changes);\
|
|
19998
|
+
"description": "Calls `callback` once, `delay` ms after mount (or after `delay` changes);\npass `null` to not schedule it. Returns `clear` and `reset` (restart the\nwait).\n\n```tsx\nconst { reset } = useTimeout(() => setSaved(false), 2000);\n```",
|
|
19995
19999
|
"module": "hooks/index.ts"
|
|
19996
20000
|
},
|
|
19997
20001
|
{
|
|
19998
20002
|
"name": "usePrevious",
|
|
19999
20003
|
"signature": "usePrevious(value: T): T | undefined",
|
|
20000
|
-
"description": "The value from before its last change (undefined until it first changes).\
|
|
20004
|
+
"description": "The value from before its last change (undefined until it first changes).\n\n```tsx\nconst previousCount = usePrevious(count);\n```",
|
|
20001
20005
|
"module": "hooks/index.ts"
|
|
20002
20006
|
},
|
|
20003
20007
|
{
|
|
20004
20008
|
"name": "useLocalStorage",
|
|
20005
20009
|
"signature": "useLocalStorage(key: string, defaultValue: T, options?: UseStorageOptions<T>)",
|
|
20006
|
-
"description": "State saved in `localStorage` under `key`: it survives reloads and stays in\
|
|
20010
|
+
"description": "State saved in `localStorage` under `key`: it survives reloads and stays in\nsync across every component using the key and across browser tabs. Values\nare JSON by default. Returns `defaultValue` during server rendering, when\nnothing is stored, or when storage is blocked (it never throws).\n\n```tsx\nconst [density, setDensity] = useLocalStorage(\"table-density\", \"comfortable\");\n```",
|
|
20007
20011
|
"module": "hooks/index.ts"
|
|
20008
20012
|
},
|
|
20009
20013
|
{
|
|
@@ -20015,79 +20019,79 @@
|
|
|
20015
20019
|
{
|
|
20016
20020
|
"name": "useClipboard",
|
|
20017
20021
|
"signature": "useClipboard({ timeout = 2000 }: { timeout?: number } = {}): UseClipboardResult",
|
|
20018
|
-
"description": "Copies text to the clipboard, with a `copied` flag that resets after\
|
|
20022
|
+
"description": "Copies text to the clipboard, with a `copied` flag that resets after\n`timeout` ms. Uses the Clipboard API, with a fallback for browsers or\ncontexts that block it. Pair a visible \"Copied\" change with an\nannouncement (`announce`) so screen readers hear it too.\n\n```tsx\nconst { copy, copied } = useClipboard();\n<Button onClick={() => copy(inviteLink)}>{copied ? \"Copied\" : \"Copy link\"}</Button>\n```",
|
|
20019
20023
|
"module": "hooks/index.ts"
|
|
20020
20024
|
},
|
|
20021
20025
|
{
|
|
20022
20026
|
"name": "useHotkeys",
|
|
20023
20027
|
"signature": "useHotkeys(hotkeys: HotkeyItem[], { enabled = true, target }: UseHotkeysOptions = {}): void",
|
|
20024
|
-
"description": "Keyboard shortcuts for the whole page (or one element). `mod` is ⌘ on Mac\
|
|
20028
|
+
"description": "Keyboard shortcuts for the whole page (or one element). `mod` is ⌘ on Mac\nand Ctrl elsewhere; separate alternatives with commas (`\"mod+k, /\"`).\nShortcuts with ⌘, Ctrl, or Alt work everywhere; plain keys don't fire while\ntyping in a text field. Show each shortcut to users (`Kbd`,\n`aria-keyshortcuts`) so it can be found, and avoid single-key shortcuts that\nscreen readers or browsers use, or let users turn them off (WCAG 2.1.4).\n\n```tsx\nuseHotkeys([\n [\"mod+k\", () => setPaletteOpen(true)],\n [\"/\", () => searchRef.current?.focus()],\n [\"shift+?\", () => setHelpOpen(true)],\n]);\n```",
|
|
20025
20029
|
"module": "hooks/index.ts"
|
|
20026
20030
|
},
|
|
20027
20031
|
{
|
|
20028
20032
|
"name": "useEventListener",
|
|
20029
20033
|
"signature": "useEventListener(type: K, handler: (event: WindowEventMap[K]) => void, target?: ListenerTarget | RefObject<HTMLElement | null>, options?: boolean | AddEventListenerOptions): void",
|
|
20030
|
-
"description": "Adds an event listener and removes it on unmount. Always calls the latest\
|
|
20034
|
+
"description": "Adds an event listener and removes it on unmount. Always calls the latest\n`handler` (no re-subscribing when it changes). `target` defaults to\n`window`; pass an element, `document`, or a ref.\n\n```tsx\nuseEventListener(\"beforeunload\", (e) => { if (dirty) e.preventDefault(); });\nuseEventListener(\"scroll\", onScroll, panelRef, { passive: true });\n```",
|
|
20031
20035
|
"module": "hooks/index.ts"
|
|
20032
20036
|
},
|
|
20033
20037
|
{
|
|
20034
20038
|
"name": "useClickOutside",
|
|
20035
20039
|
"signature": "useClickOutside(handler: (event: Event) => void, { enabled = true, ignore = [] }: { enabled?: boolean; ignore?: Array<RefObject<HTMLElement | null> | HTMLElement | null> } = {}): RefObject<T | null>",
|
|
20036
|
-
"description": "Calls `handler` when a pointer press or a focus move lands outside the\
|
|
20040
|
+
"description": "Calls `handler` when a pointer press or a focus move lands outside the\nreturned ref's element (and outside any `ignore` elements). Use it for\ncustom popups; the library's own overlays already close on outside\npresses, through the shared layer stack.\n\n```tsx\nconst ref = useClickOutside<HTMLDivElement>(() => setOpen(false));\n<div ref={ref}>…</div>\n```",
|
|
20037
20041
|
"module": "hooks/index.ts"
|
|
20038
20042
|
},
|
|
20039
20043
|
{
|
|
20040
20044
|
"name": "useIntersection",
|
|
20041
20045
|
"signature": "useIntersection({ root, rootMargin, threshold = 0, once = false, }: UseIntersectionOptions = {}): { ref: (node: T | null) => void; entry: IntersectionObserverEntry | null; isIntersecting: boolean }",
|
|
20042
|
-
"description": "Whether an element is in view (IntersectionObserver). Attach the returned\
|
|
20046
|
+
"description": "Whether an element is in view (IntersectionObserver). Attach the returned\n`ref`; read `isIntersecting` or the full `entry`. Returns false during\nserver rendering.\n\n```tsx\nconst { ref, isIntersecting } = useIntersection<HTMLDivElement>({ rootMargin: \"200px\", once: true });\n<div ref={ref}>{isIntersecting && <HeavyChart />}</div>\n```",
|
|
20043
20047
|
"module": "hooks/index.ts"
|
|
20044
20048
|
},
|
|
20045
20049
|
{
|
|
20046
20050
|
"name": "useElementSize",
|
|
20047
20051
|
"signature": "useElementSize(): { ref: (node: T | null) => void; width: number; height: number; }",
|
|
20048
|
-
"description": "An element's content-box size, kept current as it resizes\
|
|
20052
|
+
"description": "An element's content-box size, kept current as it resizes\n(ResizeObserver). Attach the returned `ref`. Both are 0 until measured\n(and during server rendering).\n\n```tsx\nconst { ref, width } = useElementSize<HTMLDivElement>();\n<div ref={ref}>{width > 600 ? <WideLayout /> : <NarrowLayout />}</div>\n```",
|
|
20049
20053
|
"module": "hooks/index.ts"
|
|
20050
20054
|
},
|
|
20051
20055
|
{
|
|
20052
20056
|
"name": "useHydrated",
|
|
20053
20057
|
"signature": "useHydrated(): boolean",
|
|
20054
|
-
"description": "False during server rendering and hydration, true after. Use it to render\
|
|
20058
|
+
"description": "False during server rendering and hydration, true after. Use it to render\nbrowser-only content (dates in the user's time zone, `window` values)\nwithout a hydration mismatch.\n\n```tsx\nconst hydrated = useHydrated();\nreturn <span>{hydrated ? new Date().toLocaleTimeString() : null}</span>;\n```",
|
|
20055
20059
|
"module": "hooks/index.ts"
|
|
20056
20060
|
},
|
|
20057
20061
|
{
|
|
20058
20062
|
"name": "useReducedMotion",
|
|
20059
20063
|
"signature": "useReducedMotion(): boolean",
|
|
20060
|
-
"description": "True when the user asked the system to reduce motion. The library's own\
|
|
20064
|
+
"description": "True when the user asked the system to reduce motion. The library's own\ntransitions already respect it (through the duration tokens); use this for\nmotion you drive from JavaScript (autoplay, scroll animations).",
|
|
20061
20065
|
"module": "hooks/index.ts"
|
|
20062
20066
|
},
|
|
20063
20067
|
{
|
|
20064
20068
|
"name": "useColorScheme",
|
|
20065
20069
|
"signature": "useColorScheme(): \"light\" | \"dark\"",
|
|
20066
|
-
"description": "The system color scheme, `\"light\"` or `\"dark\"`, kept in sync (`\"light\"`\
|
|
20070
|
+
"description": "The system color scheme, `\"light\"` or `\"dark\"`, kept in sync (`\"light\"`\nduring server rendering). To follow it, pass it to `Theme mode`.",
|
|
20067
20071
|
"module": "hooks/index.ts"
|
|
20068
20072
|
},
|
|
20069
20073
|
{
|
|
20070
20074
|
"name": "useOnline",
|
|
20071
20075
|
"signature": "useOnline(): boolean",
|
|
20072
|
-
"description": "Whether the browser has a network connection, kept in sync (true during\
|
|
20076
|
+
"description": "Whether the browser has a network connection, kept in sync (true during\nserver rendering). Pair a visible change (a Banner) with a polite\nannouncement when it goes offline.",
|
|
20073
20077
|
"module": "hooks/index.ts"
|
|
20074
20078
|
},
|
|
20075
20079
|
{
|
|
20076
20080
|
"name": "useDocumentVisibility",
|
|
20077
20081
|
"signature": "useDocumentVisibility(): DocumentVisibilityState",
|
|
20078
|
-
"description": "`\"visible\"` or `\"hidden\"` (another tab, minimized window), kept in sync.\
|
|
20082
|
+
"description": "`\"visible\"` or `\"hidden\"` (another tab, minimized window), kept in sync.\nUse it to pause polling, video, or animations in the background.",
|
|
20079
20083
|
"module": "hooks/index.ts"
|
|
20080
20084
|
},
|
|
20081
20085
|
{
|
|
20082
20086
|
"name": "useViewportSize",
|
|
20083
20087
|
"signature": "useViewportSize(): { width: number; height: number }",
|
|
20084
|
-
"description": "The viewport's width and height in CSS pixels, kept in sync (0 × 0 during\
|
|
20088
|
+
"description": "The viewport's width and height in CSS pixels, kept in sync (0 × 0 during\nserver rendering). For layout decisions, prefer CSS or `useMediaQuery`;\nuse this when you need the numbers.",
|
|
20085
20089
|
"module": "hooks/index.ts"
|
|
20086
20090
|
},
|
|
20087
20091
|
{
|
|
20088
20092
|
"name": "useVirtualizer",
|
|
20089
20093
|
"signature": "useVirtualizer({ count, scrollElement, estimateSize, overscan = 6, gap = 0, paddingStart = 0, paddingEnd = 0, initialCount = 10, }: UseVirtualizerOptions): Virtualizer",
|
|
20090
|
-
"description": "Headless list virtualization: renders only the items in view (plus\
|
|
20094
|
+
"description": "Headless list virtualization: renders only the items in view (plus\n`overscan`), so lists of 100,000 rows stay fast. Works with variable\nheights by measuring rendered items, and is SSR-safe (the server renders\nthe first `initialCount` items). `VirtualList` is built on it; use the\nhook directly for custom layouts.\n\n```tsx\nconst scrollRef = useRef<HTMLDivElement>(null);\nconst { virtualItems, totalSize, measureElement } = useVirtualizer({\n count: rows.length, scrollElement: scrollRef, estimateSize: 48,\n});\n<div ref={scrollRef} style={{ overflow: \"auto\", height: 400 }}>\n <div style={{ position: \"relative\", height: totalSize }}>\n {virtualItems.map((item) => (\n <div key={item.index} data-index={item.index} ref={measureElement}\n style={{ position: \"absolute\", top: 0, width: \"100%\", transform: `translateY(${item.start}px)` }}>\n {rows[item.index].name}\n </div>\n ))}\n </div>\n</div>\n```",
|
|
20091
20095
|
"module": "hooks/index.ts"
|
|
20092
20096
|
},
|
|
20093
20097
|
{
|
|
@@ -20107,13 +20111,13 @@
|
|
|
20107
20111
|
{
|
|
20108
20112
|
"name": "getLocaleDirection",
|
|
20109
20113
|
"signature": "getLocaleDirection(locale: string): \"ltr\" | \"rtl\"",
|
|
20110
|
-
"description": "The writing direction of a BCP 47 locale: `\"rtl\"` for Arabic, Hebrew,\
|
|
20114
|
+
"description": "The writing direction of a BCP 47 locale: `\"rtl\"` for Arabic, Hebrew,\nPersian, Urdu, and other right-to-left languages and scripts, else `\"ltr\"`.",
|
|
20111
20115
|
"module": "i18n/index.ts"
|
|
20112
20116
|
},
|
|
20113
20117
|
{
|
|
20114
20118
|
"name": "plural",
|
|
20115
20119
|
"signature": "plural(locale: string): PluralFn",
|
|
20116
|
-
"description": "Plural selector bound to a locale:\
|
|
20120
|
+
"description": "Plural selector bound to a locale:\n\n```ts\nconst p = plural(\"ru\");\np(3, { one: \"# файл\", few: \"# файла\", many: \"# файлов\", other: \"# файла\" }); // \"3 файла\"\n```",
|
|
20117
20121
|
"module": "i18n/index.ts"
|
|
20118
20122
|
},
|
|
20119
20123
|
{
|
|
@@ -20125,7 +20129,7 @@
|
|
|
20125
20129
|
{
|
|
20126
20130
|
"name": "mergeMessages",
|
|
20127
20131
|
"signature": "mergeMessages(base: Messages, override: PartialMessages | undefined): Messages",
|
|
20128
|
-
"description": "Overlays partial messages on a complete set: missing strings keep the\
|
|
20132
|
+
"description": "Overlays partial messages on a complete set: missing strings keep the\nbase value. Functions and arrays replace whole.",
|
|
20129
20133
|
"module": "i18n/index.ts"
|
|
20130
20134
|
},
|
|
20131
20135
|
{
|
|
@@ -20221,7 +20225,7 @@
|
|
|
20221
20225
|
{
|
|
20222
20226
|
"name": "getHotkeyHandler",
|
|
20223
20227
|
"signature": "getHotkeyHandler(hotkeys: HotkeyItem[])",
|
|
20224
|
-
"description": "A `keydown` handler for one element (an editor, a list): pass it to\
|
|
20228
|
+
"description": "A `keydown` handler for one element (an editor, a list): pass it to\n`onKeyDown`. Same shortcut format as `useHotkeys`; shortcuts fire while\ntyping in that element.\n\n```tsx\n<Textarea onKeyDown={getHotkeyHandler([[\"mod+enter\", send]])} />\n```",
|
|
20225
20229
|
"module": "hooks/index.ts"
|
|
20226
20230
|
},
|
|
20227
20231
|
{
|
|
@@ -20356,10 +20360,16 @@
|
|
|
20356
20360
|
"description": "Builds an accessible brand palette, for both modes, from any hex color.\r\nThrows a TypeError for anything that isn't `#rgb` or `#rrggbb`.",
|
|
20357
20361
|
"module": "utils/index.ts"
|
|
20358
20362
|
},
|
|
20363
|
+
{
|
|
20364
|
+
"name": "LIME_ACCENT",
|
|
20365
|
+
"signature": "LIME_ACCENT: AccentPalette",
|
|
20366
|
+
"description": "The lime accent (`accent=\"lime\"`, and the black brand's accent): the original bright yellow-green.",
|
|
20367
|
+
"module": "utils/index.ts"
|
|
20368
|
+
},
|
|
20359
20369
|
{
|
|
20360
20370
|
"name": "VOLT_ACCENT",
|
|
20361
|
-
"signature": "VOLT_ACCENT
|
|
20362
|
-
"description": "
|
|
20371
|
+
"signature": "VOLT_ACCENT",
|
|
20372
|
+
"description": "@deprecated Renamed to `LIME_ACCENT`.",
|
|
20363
20373
|
"module": "utils/index.ts"
|
|
20364
20374
|
},
|
|
20365
20375
|
{
|
|
@@ -20371,7 +20381,7 @@
|
|
|
20371
20381
|
{
|
|
20372
20382
|
"name": "brandAccent",
|
|
20373
20383
|
"signature": "brandAccent(primary: string): AccentPalette",
|
|
20374
|
-
"description": "The default accent of a brand: a bright, lighter shade of its primary\r\nhue (blue gets a sky blue, purple a lavender, gold an amber, green a\r\nmint). Colorless brands (black) keep the
|
|
20384
|
+
"description": "The default accent of a brand: a bright, lighter shade of its primary\r\nhue (blue gets a sky blue, purple a lavender, gold an amber, green a\r\nmint). Colorless brands (black) keep the lime.",
|
|
20375
20385
|
"module": "utils/index.ts"
|
|
20376
20386
|
},
|
|
20377
20387
|
{
|
|
@@ -20401,19 +20411,19 @@
|
|
|
20401
20411
|
{
|
|
20402
20412
|
"name": "isEmail",
|
|
20403
20413
|
"signature": "isEmail(value: string, { requireTld = true }: EmailOptions = {}): boolean",
|
|
20404
|
-
"description": "True for an email address in the usual format: the HTML spec's rules\
|
|
20414
|
+
"description": "True for an email address in the usual format: the HTML spec's rules\n(what browsers check for `type=\"email\"`), plus no leading, trailing, or\ndoubled dots before the `@`, length limits (64 before the `@`, 254 in all),\nand, by default, a top-level domain.",
|
|
20405
20415
|
"module": "utils/index.ts"
|
|
20406
20416
|
},
|
|
20407
20417
|
{
|
|
20408
20418
|
"name": "isIPv4",
|
|
20409
20419
|
"signature": "isIPv4(value: string): boolean",
|
|
20410
|
-
"description": "True for a dotted IPv4 address: four numbers 0-255 (`192.168.0.1`), no\
|
|
20420
|
+
"description": "True for a dotted IPv4 address: four numbers 0-255 (`192.168.0.1`), no\nleading zeros (`010.0.0.1` is ambiguous, so it's rejected).",
|
|
20411
20421
|
"module": "utils/index.ts"
|
|
20412
20422
|
},
|
|
20413
20423
|
{
|
|
20414
20424
|
"name": "isIPv6",
|
|
20415
20425
|
"signature": "isIPv6(value: string): boolean",
|
|
20416
|
-
"description": "True for an IPv6 address: eight groups of 1-4 hex digits, with `::`\
|
|
20426
|
+
"description": "True for an IPv6 address: eight groups of 1-4 hex digits, with `::`\nstanding for one or more zero groups (once at most), and an optional\nIPv4 tail (`::ffff:192.168.0.1`). Zone ids (`%eth0`) and brackets aren't\naccepted.",
|
|
20417
20427
|
"module": "utils/index.ts"
|
|
20418
20428
|
},
|
|
20419
20429
|
{
|
|
@@ -20437,7 +20447,7 @@
|
|
|
20437
20447
|
{
|
|
20438
20448
|
"name": "rules",
|
|
20439
20449
|
"signature": "rules",
|
|
20440
|
-
"description": "Rule helpers for `useFormValidation`, with messages from the locale:\
|
|
20450
|
+
"description": "Rule helpers for `useFormValidation`, with messages from the locale:\n\n```ts\nuseFormValidation({ rules: { email: rules.email(), server: rules.ip({ version: 4 }) } });\n```",
|
|
20441
20451
|
"module": "utils/index.ts"
|
|
20442
20452
|
},
|
|
20443
20453
|
{
|
|
@@ -20449,7 +20459,7 @@
|
|
|
20449
20459
|
{
|
|
20450
20460
|
"name": "parseHotkey",
|
|
20451
20461
|
"signature": "parseHotkey(hotkey: string, platform: HotkeyPlatform = detectPlatform()): ParsedHotkey | null",
|
|
20452
|
-
"description": "Parses a shortcut like `\"mod+k\"`, `\"shift+mod+p\"`, `\"ctrl+/\"`, or\
|
|
20462
|
+
"description": "Parses a shortcut like `\"mod+k\"`, `\"shift+mod+p\"`, `\"ctrl+/\"`, or\n`\"escape\"` into modifiers and a key. `mod` is ⌘ on Mac and Ctrl\nelsewhere. Returns null when there is no key.",
|
|
20453
20463
|
"module": "utils/index.ts"
|
|
20454
20464
|
},
|
|
20455
20465
|
{
|
|
@@ -20473,7 +20483,7 @@
|
|
|
20473
20483
|
{
|
|
20474
20484
|
"name": "copyToClipboard",
|
|
20475
20485
|
"signature": "copyToClipboard(text: string): Promise<void>",
|
|
20476
|
-
"description": "Copies text to the clipboard: the async Clipboard API when it's allowed,\
|
|
20486
|
+
"description": "Copies text to the clipboard: the async Clipboard API when it's allowed,\nelse a hidden-textarea fallback (insecure contexts, denied permission,\nolder browsers). Focus returns to where it was. Rejects when both fail.",
|
|
20477
20487
|
"module": "utils/index.ts"
|
|
20478
20488
|
}
|
|
20479
20489
|
]
|