@ziyarago/ui 0.1.1 → 0.3.0

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.1.1",
+ "version": "0.3.0",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",
@@ -3436,6 +3436,25 @@
      "type": "boolean",
      "default": false,
      "description": "Stretches the button to the full width of its container."
+    },
+    "type": {
+     "type": "'button' | 'submit' | 'reset'",
+     "values": [
+      "button",
+      "submit",
+      "reset"
+     ],
+     "default": "button",
+     "description": "Native button type. Use submit inside a form."
+    },
+    "iconOnly": {
+     "type": "boolean",
+     "default": false,
+     "description": "Square button (width equals height) with no horizontal padding, for a lone icon. Pass an aria-label."
+    },
+    "title": {
+     "type": "string",
+     "description": "Native tooltip text."
     }
    },
    "events": {
@@ -3445,7 +3464,7 @@
     "default": "Button label."
    },
    "notes": [
-    "Always renders type=\"button\", so it never submits a form by itself."
+    "Renders type=\"button\" unless type is set, so it never submits a form by itself."
    ]
   },
   {
@@ -3663,10 +3682,10 @@
    "description": "Segmented switch for choosing exactly one of a few options.",
    "props": {
     "items": {
-     "type": "{ value: string; label: string }[]",
+     "type": "{ value: string; label: string; icon?: string; disabled?: boolean }[]",
      "default": "[]",
      "required": true,
-     "description": "Segments to render."
+     "description": "Segments to render. icon is an icon name; disabled: true dims one segment."
     },
     "modelValue": {
      "type": "string",
@@ -3684,6 +3703,20 @@
      ],
      "default": "md",
      "description": "Control size. sm and md also have a dedicated compact style."
+    },
+    "block": {
+     "type": "boolean",
+     "default": false,
+     "description": "Stretches the control to the container width with equal-width segments."
+    },
+    "iconOnly": {
+     "type": "boolean",
+     "default": false,
+     "description": "Hides labels of segments that have an icon; the label stays as tooltip and aria-label."
+    },
+    "ariaLabel": {
+     "type": "string",
+     "description": "Accessible name of the group."
     }
    },
    "events": {
@@ -3822,21 +3855,31 @@
    "description": "Status badge with a colored tone and optional dot.",
    "props": {
     "tone": {
-     "type": "'brand' | 'success' | 'warning' | 'danger' | 'info'",
+     "type": "'brand' | 'success' | 'warning' | 'danger' | 'info' | 'inverse'",
      "values": [
       "brand",
       "success",
       "warning",
       "danger",
-      "info"
+      "info",
+      "inverse"
      ],
-     "description": "Color. Omit for the neutral style."
+     "description": "Color. inverse is a solid high-contrast badge (dark on light themes, light on dark). Omit for the neutral style."
     },
     "dot": {
      "type": "boolean",
      "default": false,
      "description": "Shows a status dot before the content."
     },
+    "shape": {
+     "type": "'pill' | 'square'",
+     "values": [
+      "pill",
+      "square"
+     ],
+     "default": "pill",
+     "description": "square uses small rounded corners instead of a full pill."
+    },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
@@ -4048,6 +4091,71 @@
      "default": false,
      "description": "Makes the input read-only."
     },
+    "required": {
+     "type": "boolean",
+     "default": false,
+     "description": "Adds a red asterisk to the label and the native required attribute (browser validation inside a form)."
+    },
+    "name": {
+     "type": "string",
+     "forwarded": true,
+     "description": "Native name attribute of the input."
+    },
+    "autocomplete": {
+     "type": "string",
+     "forwarded": true,
+     "description": "Native autocomplete hint, for example \"email\" or \"new-password\"."
+    },
+    "min": {
+     "type": "number | string",
+     "forwarded": true,
+     "description": "Native min for number, date and time types."
+    },
+    "max": {
+     "type": "number | string",
+     "forwarded": true,
+     "description": "Native max for number, date and time types."
+    },
+    "step": {
+     "type": "number | string",
+     "forwarded": true,
+     "description": "Native step for number, date and time types."
+    },
+    "maxlength": {
+     "type": "number",
+     "forwarded": true,
+     "description": "Maximum number of characters."
+    },
+    "minlength": {
+     "type": "number",
+     "forwarded": true,
+     "description": "Minimum number of characters (native validation)."
+    },
+    "inputmode": {
+     "type": "string",
+     "forwarded": true,
+     "description": "Virtual keyboard hint: numeric, decimal, tel, email, url, search or none."
+    },
+    "pattern": {
+     "type": "string",
+     "forwarded": true,
+     "description": "Native validation pattern."
+    },
+    "spellcheck": {
+     "type": "boolean",
+     "forwarded": true,
+     "description": "Enables or disables spell checking."
+    },
+    "autofocus": {
+     "type": "boolean",
+     "forwarded": true,
+     "description": "Focuses the input on mount."
+    },
+    "autocapitalize": {
+     "type": "string",
+     "forwarded": true,
+     "description": "Native autocapitalize hint."
+    },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
@@ -4062,10 +4170,19 @@
     }
    },
    "events": {
-    "change": "Called with the new string on every keystroke."
+    "change": "Called with the new string on every keystroke.",
+    "blur": "Native blur of the input (Vue @blur, React onBlur).",
+    "focus": "Native focus of the input.",
+    "keydown": "Native keydown of the input; modifiers like @keydown.enter work in Vue.",
+    "input": "Native input event (after change), receives the Event."
+   },
+   "slots": {
+    "prefix": "Content before the input (icon or text). Replaces the icon prop. React: prefix prop.",
+    "suffix": "Content after the input (button, unit). Same as the suffix prop. React: suffix prop."
    },
    "notes": [
-    "Wrapped in a label, so clicking the label focuses the input."
+    "Wrapped in a label, so clicking the label focuses the input.",
+    "Native attributes (name, autocomplete, min, max, step, maxlength, inputmode, pattern ...) and the blur, focus, keydown, keyup and paste listeners are forwarded to the inner input. id, class, style, aria-* and data-* land on the root label."
    ]
   },
   {
@@ -4113,6 +4230,37 @@
      "type": "number",
      "description": "Maximum number of characters."
     },
+    "readonly": {
+     "type": "boolean",
+     "default": false,
+     "description": "Makes the textarea read-only."
+    },
+    "required": {
+     "type": "boolean",
+     "default": false,
+     "forwarded": true,
+     "description": "Adds a red asterisk to the label and the native required attribute."
+    },
+    "autoResize": {
+     "type": "boolean",
+     "default": false,
+     "description": "Grows with the content (CSS field-sizing: content, Chromium and Safari)."
+    },
+    "resize": {
+     "type": "boolean",
+     "default": true,
+     "description": "false removes the manual resize handle."
+    },
+    "showCount": {
+     "type": "boolean",
+     "default": false,
+     "description": "Shows the character count under the field, as \"n / maxlength\" when maxlength is set."
+    },
+    "name": {
+     "type": "string",
+     "forwarded": true,
+     "description": "Native name attribute."
+    },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
@@ -4127,7 +4275,10 @@
     }
    },
    "events": {
-    "change": "Called with the new string on every keystroke."
+    "change": "Called with the new string on every keystroke.",
+    "input": "Native input event (after change), receives the Event.",
+    "blur": "Native blur.",
+    "focus": "Native focus."
    }
   },
   {
@@ -4549,6 +4700,25 @@
      "type": "string",
      "description": "Shown when nothing is selected. Defaults to \"—\"."
     },
+    "hint": {
+     "type": "string",
+     "forwarded": true,
+     "description": "Helper text under the control. Hidden while error is set."
+    },
+    "error": {
+     "type": "string",
+     "forwarded": true,
+     "description": "Error message under the control. Turns the control red and is announced with role=\"alert\"."
+    },
+    "required": {
+     "type": "boolean",
+     "default": false,
+     "description": "Adds a red asterisk to the label. Does not validate."
+    },
+    "name": {
+     "type": "string",
+     "description": "Renders a hidden input with this name and the selected value, so the control posts with a native form."
+    },
     "disabled": {
      "type": "boolean",
      "default": false,
@@ -4715,6 +4885,15 @@
      "default": "—",
      "description": "Shown when no option matches the query."
     },
+    "clearable": {
+     "type": "boolean",
+     "default": false,
+     "description": "Shows a clear (x) button while a value is selected; it calls change with null."
+    },
+    "filter": {
+     "type": "(option, query) => boolean",
+     "description": "Custom matcher. Default is a case-insensitive substring match on label."
+    },
     "disabled": {
      "type": "boolean",
      "default": false,
@@ -4862,6 +5041,19 @@
      "type": "string",
      "description": "Text next to the box."
     },
+    "hint": {
+     "type": "string",
+     "description": "Second line under the label."
+    },
+    "error": {
+     "type": "string",
+     "description": "Error message under the label (announced with role=\"alert\"); a boolean or empty string shows nothing."
+    },
+    "indeterminate": {
+     "type": "boolean",
+     "default": false,
+     "description": "Shows a dash instead of a check (aria-checked=\"mixed\"). Clicking calls change with true."
+    },
     "disabled": {
      "type": "boolean",
      "default": false,
@@ -4903,6 +5095,19 @@
      "type": "string",
      "description": "Text next to the toggle."
     },
+    "hint": {
+     "type": "string",
+     "description": "Second line under the label."
+    },
+    "error": {
+     "type": "string",
+     "description": "Error message under the label (announced with role=\"alert\")."
+    },
+    "labelLeft": {
+     "type": "boolean",
+     "default": false,
+     "description": "Places the label before the toggle instead of after it."
+    },
     "disabled": {
      "type": "boolean",
      "default": false,
@@ -4949,6 +5154,25 @@
      "forwarded": true,
      "description": "Label shown above the control."
     },
+    "hint": {
+     "type": "string",
+     "forwarded": true,
+     "description": "Helper text under the control. Hidden while error is set."
+    },
+    "error": {
+     "type": "string",
+     "forwarded": true,
+     "description": "Error message under the control. Turns the control red and is announced with role=\"alert\"."
+    },
+    "orientation": {
+     "type": "'vertical' | 'horizontal'",
+     "values": [
+      "vertical",
+      "horizontal"
+     ],
+     "default": "vertical",
+     "description": "horizontal lays the options out in a wrapping row under the label."
+    },
     "disabled": {
      "type": "boolean",
      "default": false,
@@ -5297,6 +5521,18 @@
      "default": 1,
      "description": "First day of the week: 0 = Sunday, 1 = Monday."
     },
+    "min": {
+     "type": "Date | string | number",
+     "description": "Earliest selectable day; earlier days are disabled."
+    },
+    "max": {
+     "type": "Date | string | number",
+     "description": "Latest selectable day; later days are disabled."
+    },
+    "disabledDate": {
+     "type": "(date: Date) => boolean",
+     "description": "Return true to disable a specific day."
+    },
     "events": {
      "type": "Record<string, string>",
      "default": "{}",
@@ -5388,6 +5624,32 @@
      "default": 1,
      "description": "First day of the week: 0 = Sunday, 1 = Monday."
     },
+    "clearable": {
+     "type": "boolean",
+     "default": false,
+     "description": "Shows a clear (x) button while a date is set; it calls change with null."
+    },
+    "min": {
+     "type": "Date | string | number",
+     "forwarded": true,
+     "description": "Earliest selectable day, forwarded to the calendar."
+    },
+    "max": {
+     "type": "Date | string | number",
+     "forwarded": true,
+     "description": "Latest selectable day, forwarded to the calendar."
+    },
+    "disabledDate": {
+     "type": "(date: Date) => boolean",
+     "forwarded": true,
+     "description": "Return true to disable a specific day, forwarded to the calendar."
+    },
+    "required": {
+     "type": "boolean",
+     "default": false,
+     "forwarded": true,
+     "description": "Adds a red asterisk to the label. Does not validate."
+    },
     "label": {
      "type": "string",
      "forwarded": true,
@@ -5854,12 +6116,13 @@
      "description": "Muted line under the title."
     },
     "variant": {
-     "type": "'inverse' | 'gradient'",
+     "type": "'inverse' | 'gradient' | 'outline'",
      "values": [
       "inverse",
-      "gradient"
+      "gradient",
+      "outline"
      ],
-     "description": "inverse is a dark card regardless of the page theme; gradient is a tinted gradient card colored by tone. Omit for the default glass card."
+     "description": "inverse is a dark card regardless of the page theme; gradient is a tinted gradient card colored by tone; outline is transparent with a border. Omit for the default glass card."
     },
     "tone": {
      "type": "'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral' | 'rose' | 'violet'",
@@ -5883,6 +6146,18 @@
      ],
      "description": "With variant=\"gradient\", fills the card with a saturated color instead of a soft tint."
     },
+    "padding": {
+     "type": "'none'",
+     "values": [
+      "none"
+     ],
+     "description": "none removes the inner padding (for full-bleed tables or images). Other paddings come from size."
+    },
+    "interactive": {
+     "type": "boolean",
+     "default": false,
+     "description": "Adds a pointer cursor and hover lift. With a click handler the card also becomes keyboard focusable (Enter activates)."
+    },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
@@ -5898,7 +6173,12 @@
    },
    "slots": {
     "default": "Card body.",
-    "actions": "Right side of the header, for buttons or menus."
+    "actions": "Right side of the header, for buttons or menus.",
+    "header": "Replaces the whole title/actions header with custom content.",
+    "footer": "Row under the body, for buttons or meta."
+   },
+   "events": {
+    "click": "Native click on the card. Combine with interactive."
    },
    "notes": [
     "Vue slot names are React props (actions) and children (default)."
@@ -5911,7 +6191,7 @@
    "description": "Table with sortable columns, custom cell rendering and optional row selection checkboxes.",
    "props": {
     "columns": {
-     "type": "{ key: string; label: string; sortable?: boolean; num?: boolean; render?: (value, row, h) => VNode | string }[]",
+     "type": "{ key: string; label: string; sortable?: boolean; num?: boolean; align?: \"left\" | \"center\" | \"right\"; width?: string; render?: (value, row, h) => VNode | string }[]",
      "required": true,
      "default": [],
      "description": "Column definitions. key reads row[key]; num right-aligns numbers; render customizes the cell; sortable shows a sort button in the header."
@@ -5963,7 +6243,11 @@
      "description": "Row density and font size."
     }
    },
+   "slots": {
+    "empty": "Replaces the empty text with custom content when rows is empty."
+   },
    "events": {
+    "rowClick": "Called with (row, index) when a body row is clicked. Rows get a pointer cursor.",
     "select": "Called with the new array of selected row ids. Handling it enables the checkbox column and select-all.",
     "sort": "Called with (key, dir) where dir is \"asc\" or \"desc\". Sort the rows yourself and pass sortKey/sortDir back."
    },
@@ -6989,10 +7273,18 @@
      "type": "boolean",
      "default": false,
      "description": "Removes the border radius so the alert spans the full width like a Banner."
+    },
+    "hideIcon": {
+     "type": "boolean",
+     "default": false,
+     "description": "Hides the leading tone icon (the icon slot is hidden too)."
     }
    },
    "slots": {
-    "default": "Message text."
+    "default": "Message text.",
+    "title": "Replaces the title prop with custom content.",
+    "icon": "Replaces the tone icon inside the icon tile.",
+    "actions": "Row under the message for buttons or links."
    },
    "events": {
     "close": "Called when the close button is clicked. The button is rendered only when this handler is set."
@@ -7464,6 +7756,29 @@
      "type": "string",
      "description": "Header text and aria-label of the dialog."
     },
+    "subtitle": {
+     "type": "string",
+     "description": "Muted line under the title in the header."
+    },
+    "closable": {
+     "type": "boolean",
+     "default": true,
+     "description": "false hides the close (x) button in the header."
+    },
+    "closeOnBackdrop": {
+     "type": "boolean",
+     "default": true,
+     "description": "false ignores clicks on the scrim."
+    },
+    "closeOnEsc": {
+     "type": "boolean",
+     "default": true,
+     "description": "false ignores the Escape key (focus trap stays active)."
+    },
+    "width": {
+     "type": "string",
+     "description": "CSS max-width of the dialog, for example \"960px\". Overrides the width of size."
+    },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
@@ -7479,7 +7794,9 @@
    },
    "slots": {
     "default": "Dialog body.",
-    "footer": "Footer area, usually action buttons. Rendered only when provided."
+    "footer": "Footer area, usually action buttons. Rendered only when provided.",
+    "title": "Replaces the title prop with custom header content.",
+    "subtitle": "Replaces the subtitle prop."
    },
    "events": {
     "close": "Called on the close button, a click on the scrim or the Escape key. Set open to false in the handler."
@@ -7904,6 +8221,17 @@
      "required": true,
      "description": "Tooltip text."
     },
+    "placement": {
+     "type": "'top' | 'bottom' | 'left' | 'right'",
+     "values": [
+      "top",
+      "bottom",
+      "left",
+      "right"
+     ],
+     "default": "top",
+     "description": "Side of the wrapped element where the bubble appears."
+    },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
@@ -7921,7 +8249,7 @@
     "default": "The element the tooltip is attached to."
    },
    "notes": [
-    "Pure CSS bubble with fixed placement; it cannot contain markup. For rich content use HoverCard."
+    "Pure CSS bubble; it cannot contain markup. For rich content use HoverCard."
    ]
   },
   {
@@ -8469,6 +8797,16 @@
      ],
      "default": "md",
      "description": "Scale of text and separator size."
+    },
+    "separator": {
+     "type": "'chevron' | 'slash' | 'dot'",
+     "values": [
+      "chevron",
+      "slash",
+      "dot"
+     ],
+     "default": "chevron",
+     "description": "Glyph between items."
     }
    }
   },
@@ -8497,6 +8835,16 @@
      "default": "Pagination",
      "description": "Accessible name of the navigation landmark."
     },
+    "hideArrows": {
+     "type": "boolean",
+     "default": false,
+     "description": "Hides the previous and next buttons."
+    },
+    "labels": {
+     "type": "{ prev?: string; next?: string; page?: string }",
+     "default": "{ prev: 'Previous page', next: 'Next page', page: 'Page' }",
+     "description": "Accessible names of the arrow buttons and of each page button (\"Page 3\")."
+    },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
@@ -8560,6 +8908,47 @@
      "type": "string",
      "description": "Image URL. Initials are shown without it."
     },
+    "initials": {
+     "type": "string",
+     "description": "Explicit initials (up to 3 characters, uppercased) instead of the ones derived from name."
+    },
+    "tone": {
+     "type": "'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral'",
+     "values": [
+      "brand",
+      "sky",
+      "success",
+      "warning",
+      "danger",
+      "neutral"
+     ],
+     "default": "brand",
+     "description": "Background color of the initials avatar."
+    },
+    "shape": {
+     "type": "'circle' | 'rounded'",
+     "values": [
+      "circle",
+      "rounded"
+     ],
+     "default": "circle",
+     "description": "rounded gives a squircle with a 30% corner radius."
+    },
+    "ring": {
+     "type": "boolean",
+     "default": false,
+     "description": "Adds a background-colored ring so overlapping avatars stay separated."
+    },
+    "status": {
+     "type": "'online' | 'offline' | 'away' | 'busy'",
+     "values": [
+      "online",
+      "offline",
+      "away",
+      "busy"
+     ],
+     "description": "Shows a presence dot in the bottom corner."
+    },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number",
      "values": [
@@ -8789,10 +9178,13 @@
     }
    },
    "events": {
-    "select": "Called with the marker object when a marker is clicked."
+    "select": "Called with the marker object when a marker is clicked.",
+    "move": "Called with { lat, lon, zoom } while the user pans or zooms (drag, touch, wheel, double click or the +/- buttons).",
+    "zoom": "Called with the new zoom level when it changes."
    },
    "notes": [
-    "The center and zoom props are initial values; user panning and zooming is kept in internal state.",
+    "The center and zoom props are initial values; user panning and zooming is kept in internal state. Listen to move/zoom to track it.",
+    "Drag or touch to pan, wheel or double click to zoom around the pointer. The tile theme follows the page data-theme after mount (light tiles on the server render) unless theme or style is set.",
     "Tiles come from a third-party CDN, so it needs network access."
    ]
   },