@ziyarago/ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [0.3.0](https://github.com/ziyarago/ui/compare/v0.2.0...v0.3.0) (2026-10-21)
+
+### Features
+
+* animated aurora background, kit-owned i18n core, glass-ui-kit compat layer, new landing ([f3882ca](https://github.com/ziyarago/ui/commit/f3882caa86a7bdddf4996c28140e0363d9af7e1b))
+
 ## [0.2.0](https://github.com/ziyarago/ui/compare/v0.1.1...v0.2.0) (2026-10-21)
 
 ### Features

package/README.md

@@ -42,6 +42,7 @@ Types ship with the package. Only 9 core components have typed props so far; the
 - SSR: components render on the server; icons, `UiMap`, `UiRichEditor`, `UiTour` and `useUiTheme()` touch `document` only on the client.
 - Palettes via `data-palette="gold|tamam"`, theme via `data-theme="dark|light"`, direction via `dir="rtl"` on `<html>`.
 - Releases: see `docs/PUBLISHING.md`, history in `CHANGELOG.md`.
+- Coming from `@ziyarago/glass-ui-kit` (Vue 3, `Ui*` local copies)? `@ziyarago/ui/compat` exports the old component names as wrappers over the new ones; step by step guide with prop tables: `docs/MIGRATION.md`.
 
 ## License
 Code: MIT (`LICENSE`). Brand assets (logo, 3D icons) are not MIT: see `LICENSE-ASSETS.md`.

package/dist/llms-full.txt

@@ -2,7 +2,7 @@
 
 > ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 160+ components and 16 page templates.
 
-Version 0.2.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.3.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -257,12 +257,15 @@ Props:
 - `loading`: boolean = false. Shows a spinner instead of the icon and disables the button.
 - `disabled`: boolean = false. Blocks interaction and dims the button.
 - `block`: boolean = false. Stretches the button to the full width of its container.
+- `type`: 'button' | 'submit' | 'reset' = "button". Native button type. Use submit inside a form.
+- `iconOnly`: boolean = false. Square button (width equals height) with no horizontal padding, for a lone icon. Pass an aria-label.
+- `title`: string. Native tooltip text.
 Slots:
 - default: Button label.
 Events:
 - click: Native click event. Not fired while disabled or loading.
 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.
 
 ## UiIconButton  (actions)
 Square button with only an icon; use for toolbars and compact actions.
@@ -328,9 +331,12 @@ Notes:
 ## UiSegmentedControl  (actions)
 Segmented switch for choosing exactly one of a few options.
 Props:
-- `items` (required): { value: string; label: string }[] = "[]". Segments to render.
+- `items` (required): { value: string; label: string; icon?: string; disabled?: boolean }[] = "[]". Segments to render. icon is an icon name; disabled: true dims one segment.
 - `modelValue`: string [v-model]. Value of the selected segment.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Control size. sm and md also have a dedicated compact style.
+- `block`: boolean = false. Stretches the control to the container width with equal-width segments.
+- `iconOnly`: boolean = false. Hides labels of segments that have an icon; the label stays as tooltip and aria-label.
+- `ariaLabel`: string. Accessible name of the group.
 Events:
 - change: Called with the value of the clicked segment.
 
@@ -371,8 +377,9 @@ Events:
 ## UiBadge  (actions)
 Status badge with a colored tone and optional dot.
 Props:
-- `tone`: 'brand' | 'success' | 'warning' | 'danger' | 'info'. Color. Omit for the neutral style.
+- `tone`: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'inverse'. Color. inverse is a solid high-contrast badge (dark on light themes, light on dark). Omit for the neutral style.
 - `dot`: boolean = false. Shows a status dot before the content.
+- `shape`: 'pill' | 'square' = "pill". square uses small rounded corners instead of a full pill.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Badge height: xs 18px, sm 20px, md 24px, lg 28px, xl 32px.
 Slots:
 - default: Badge content.
@@ -436,11 +443,32 @@ Props:
 - `density`: 'compact' | 'default' = "default". compact uses the small control height.
 - `disabled`: boolean = false. Disables the control.
 - `readonly`: boolean = false. Makes the input read-only.
+- `required`: boolean = false. Adds a red asterisk to the label and the native required attribute (browser validation inside a form).
+- `name`: string. Native name attribute of the input.
+- `autocomplete`: string. Native autocomplete hint, for example "email" or "new-password".
+- `min`: number | string. Native min for number, date and time types.
+- `max`: number | string. Native max for number, date and time types.
+- `step`: number | string. Native step for number, date and time types.
+- `maxlength`: number. Maximum number of characters.
+- `minlength`: number. Minimum number of characters (native validation).
+- `inputmode`: string. Virtual keyboard hint: numeric, decimal, tel, email, url, search or none.
+- `pattern`: string. Native validation pattern.
+- `spellcheck`: boolean. Enables or disables spell checking.
+- `autofocus`: boolean. Focuses the input on mount.
+- `autocapitalize`: string. Native autocapitalize hint.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Control height, font and padding scale.
+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.
 Events:
 - 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.
 Notes:
 - 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.
 
 ## UiTextarea  (forms)
 Multi-line text input. Use for comments, descriptions and other long text.
@@ -453,9 +481,18 @@ Props:
 - `disabled`: boolean = false. Disables the control.
 - `rows`: number = 4. Visible text rows.
 - `maxlength`: number. Maximum number of characters.
+- `readonly`: boolean = false. Makes the textarea read-only.
+- `required`: boolean = false. Adds a red asterisk to the label and the native required attribute.
+- `autoResize`: boolean = false. Grows with the content (CSS field-sizing: content, Chromium and Safari).
+- `resize`: boolean = true. false removes the manual resize handle.
+- `showCount`: boolean = false. Shows the character count under the field, as "n / maxlength" when maxlength is set.
+- `name`: string. Native name attribute.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Control height, font and padding scale.
 Events:
 - change: Called with the new string on every keystroke.
+- input: Native input event (after change), receives the Event.
+- blur: Native blur.
+- focus: Native focus.
 
 ## UiNumberInput  (forms)
 Numeric stepper with minus and plus buttons and a typed value. Use for quantities, guest counts and small integers.
@@ -576,6 +613,10 @@ Props:
 - `options` (required): { value: string | number; label: string; disabled?: boolean }[] = "[]". Available options. An option with disabled: true is dimmed and cannot be chosen.
 - `label`: string. Label shown above the control.
 - `placeholder`: string. Shown when nothing is selected. Defaults to "—".
+- `hint`: string. Helper text under the control. Hidden while error is set.
+- `error`: string. Error message under the control. Turns the control red and is announced with role="alert".
+- `required`: boolean = false. Adds a red asterisk to the label. Does not validate.
+- `name`: string. Renders a hidden input with this name and the selected value, so the control posts with a native form.
 - `disabled`: boolean = false. Disables the control.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Control height, font and padding scale.
 Events:
@@ -621,6 +662,8 @@ Props:
 - `error`: string. Error message under the control. Turns the control red and is announced with role="alert".
 - `placeholder`: string. Defaults to "Search…".
 - `emptyText`: string = "—". Shown when no option matches the query.
+- `clearable`: boolean = false. Shows a clear (x) button while a value is selected; it calls change with null.
+- `filter`: (option, query) => boolean. Custom matcher. Default is a case-insensitive substring match on label.
 - `disabled`: boolean = false. Disables the control.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Control height, font and padding scale.
 Events:
@@ -664,6 +707,9 @@ Boolean checkbox with an inline label. Use for opt-ins and independent yes/no ch
 Props:
 - `modelValue`: boolean = false [v-model]. Checked state.
 - `label`: string. Text next to the box.
+- `hint`: string. Second line under the label.
+- `error`: string. Error message under the label (announced with role="alert"); a boolean or empty string shows nothing.
+- `indeterminate`: boolean = false. Shows a dash instead of a check (aria-checked="mixed"). Clicking calls change with true.
 - `disabled`: boolean = false. Disables the control.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Box and label size.
 Events:
@@ -676,6 +722,9 @@ On/off toggle with an inline label. Use for settings that apply immediately.
 Props:
 - `modelValue`: boolean = false [v-model]. On state.
 - `label`: string. Text next to the toggle.
+- `hint`: string. Second line under the label.
+- `error`: string. Error message under the label (announced with role="alert").
+- `labelLeft`: boolean = false. Places the label before the toggle instead of after it.
 - `disabled`: boolean = false. Disables the control.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Track and label size.
 Events:
@@ -689,6 +738,9 @@ Props:
 - `modelValue`: string | number [v-model]. Value of the selected option.
 - `options`: { value: string | number; label: string; hint?: string; disabled?: boolean }[] = "[]". Radio options. hint is a second line under the label; disabled: true disables that option only.
 - `label`: string. Label shown above the control.
+- `hint`: string. Helper text under the control. Hidden while error is set.
+- `error`: string. Error message under the control. Turns the control red and is announced with role="alert".
+- `orientation`: 'vertical' | 'horizontal' = "vertical". horizontal lays the options out in a wrapping row under the label.
 - `disabled`: boolean = false. Disables the control.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Control height, font and padding scale.
 Events:
@@ -778,6 +830,9 @@ Props:
 - `modelValue`: Date | string | number [v-model]. Selected date: a Date, ISO string or timestamp. Also sets the visible month. A date-only string like "2026-10-21" is read as a local date, so the day does not shift with the time zone.
 - `locale`: string = "en-GB". BCP 47 locale for month and weekday names.
 - `weekStartsOn`: number = 1. First day of the week: 0 = Sunday, 1 = Monday.
+- `min`: Date | string | number. Earliest selectable day; earlier days are disabled.
+- `max`: Date | string | number. Latest selectable day; later days are disabled.
+- `disabledDate`: (date: Date) => boolean. Return true to disable a specific day.
 - `events`: Record<string, string> = "{}". Marked days: keys are YYYY-MM-DD, values are the tooltip text.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Day cell and header size.
 Events:
@@ -804,6 +859,11 @@ Props:
 - `modelValue`: string | Date | number [v-model]. Selected date (ISO string recommended, e.g. 2026-10-21).
 - `locale`: string = "en-GB". BCP 47 locale used for the trigger text and the calendar.
 - `weekStartsOn`: number = 1. First day of the week: 0 = Sunday, 1 = Monday.
+- `clearable`: boolean = false. Shows a clear (x) button while a date is set; it calls change with null.
+- `min`: Date | string | number. Earliest selectable day, forwarded to the calendar.
+- `max`: Date | string | number. Latest selectable day, forwarded to the calendar.
+- `disabledDate`: (date: Date) => boolean. Return true to disable a specific day, forwarded to the calendar.
+- `required`: boolean = false. Adds a red asterisk to the label. Does not validate.
 - `label`: string. Label shown above the control.
 - `hint`: string. Helper text under the control. Hidden while error is set.
 - `error`: string. Error message under the control. Turns the control red and is announced with role="alert".
@@ -934,20 +994,26 @@ Glass surface container with an optional title header, used to group related con
 Props:
 - `title`: string. Header title. The header renders only when title or the actions slot is set.
 - `subtitle`: string. Muted line under the title.
-- `variant`: 'inverse' | 'gradient'. 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.
+- `variant`: 'inverse' | 'gradient' | 'outline'. 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`: 'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral' | 'rose' | 'violet' = "brand". Gradient color. Used only with variant="gradient".
 - `intensity`: 'vivid'. With variant="gradient", fills the card with a saturated color instead of a soft tint.
+- `padding`: 'none'. none removes the inner padding (for full-bleed tables or images). Other paddings come from size.
+- `interactive`: boolean = false. Adds a pointer cursor and hover lift. With a click handler the card also becomes keyboard focusable (Enter activates).
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Padding, gap and title size.
 Slots:
 - default: Card body.
 - 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).
 
 ## UiDataTable  (data)
 Table with sortable columns, custom cell rendering and optional row selection checkboxes.
 Props:
-- `columns` (required): { key: string; label: string; sortable?: boolean; num?: boolean; render?: (value, row, h) => VNode | string }[] = []. Column definitions. key reads row[key]; num right-aligns numbers; render customizes the cell; sortable shows a sort button in the header.
+- `columns` (required): { key: string; label: string; sortable?: boolean; num?: boolean; align?: "left" | "center" | "right"; width?: string; render?: (value, row, h) => VNode | string }[] = []. Column definitions. key reads row[key]; num right-aligns numbers; render customizes the cell; sortable shows a sort button in the header.
 - `rows` (required): ({ id: string | number; [key: string]: any })[] = []. Row objects. Every row needs a unique id; missing cell values render as an em dash.
 - `selected`: (string | number)[] = []. Ids of selected rows. Checkboxes show only when the select event is handled.
 - `sortKey`: string. Key of the column currently sorted. The component does not sort rows itself.
@@ -955,7 +1021,10 @@ Props:
 - `empty`: string = "—". Text shown when rows is empty.
 - `labels`: { selectAll?: string; selectRow?: string } = "{ selectAll: 'Select all', selectRow: 'Select row' }". Accessible names of the selection checkboxes.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". 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.
 Notes:
@@ -1218,8 +1287,12 @@ Props:
 - `title`: string. Bold first line above the message.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scale of padding, icon and text.
 - `banner`: boolean = false. Removes the border radius so the alert spans the full width like a Banner.
+- `hideIcon`: boolean = false. Hides the leading tone icon (the icon slot is hidden too).
 Slots:
 - 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.
 Notes:
@@ -1360,10 +1433,17 @@ Centered dialog with a title, close button, body and optional footer; use for fo
 Props:
 - `open`: boolean = false. Shows the dialog when true; renders nothing when false.
 - `title`: string. Header text and aria-label of the dialog.
+- `subtitle`: string. Muted line under the title in the header.
+- `closable`: boolean = true. false hides the close (x) button in the header.
+- `closeOnBackdrop`: boolean = true. false ignores clicks on the scrim.
+- `closeOnEsc`: boolean = true. false ignores the Escape key (focus trap stays active).
+- `width`: string. CSS max-width of the dialog, for example "960px". Overrides the width of size.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scale of width (320 to 720 px max), padding and text.
 Slots:
 - default: Dialog body.
 - 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.
 Notes:
@@ -1502,11 +1582,12 @@ Notes:
 Short text bubble shown on hover or focus of the wrapped element; use for icon-only controls and hints.
 Props:
 - `text` (required): string. Tooltip text.
+- `placement`: 'top' | 'bottom' | 'left' | 'right' = "top". Side of the wrapped element where the bubble appears.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scale of bubble padding and font.
 Slots:
 - 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.
 
 ## UiDropdown  (overlay)
 Button that opens a menu of actions; use for "more" menus and action lists.
@@ -1690,6 +1771,7 @@ Path trail with chevron separators; the last item is the current page.
 Props:
 - `items`: { label: string; href?: string }[] = "[]". Trail from root to current. All but the last render as links (href defaults to "#"); the last is bold with aria-current="page".
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scale of text and separator size.
+- `separator`: 'chevron' | 'slash' | 'dot' = "chevron". Glyph between items.
 
 ## UiPagination  (navigation)
 Page navigation with numbered buttons, ellipsis windowing and previous/next; use under tables and lists.
@@ -1698,6 +1780,8 @@ Props:
 - `pages`: number = 1. Total number of pages.
 - `siblings`: number = 1. Page buttons shown on each side of the current page. First and last page are always shown; gaps become an ellipsis.
 - `label`: string = "Pagination". Accessible name of the navigation landmark.
+- `hideArrows`: boolean = false. Hides the previous and next buttons.
+- `labels`: { prev?: string; next?: string; page?: string } = "{ prev: 'Previous page', next: 'Next page', page: 'Page' }". Accessible names of the arrow buttons and of each page button ("Page 3").
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scale of button size and text.
 Events:
 - change: Called with the clicked page number (also from the previous and next buttons).
@@ -1718,6 +1802,11 @@ Round user picture that falls back to initials when there is no image.
 Props:
 - `name`: string. Full name. Shown as the tooltip and used for up to two initials; "?" when empty.
 - `src`: string. Image URL. Initials are shown without it.
+- `initials`: string. Explicit initials (up to 3 characters, uppercased) instead of the ones derived from name.
+- `tone`: 'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral' = "brand". Background color of the initials avatar.
+- `shape`: 'circle' | 'rounded' = "circle". rounded gives a squircle with a 30% corner radius.
+- `ring`: boolean = false. Adds a background-colored ring so overlapping avatars stay separated.
+- `status`: 'online' | 'offline' | 'away' | 'busy'. Shows a presence dot in the bottom corner.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number = "md". Diameter: xs 24, sm 32, md 40, lg 56, xl 72 px. A number is used directly as px.
 Notes:
 - Avatar sizes differ from other components (lg 56, xl 72), and a number gives any custom size.
@@ -1782,8 +1871,11 @@ Props:
 - `labels`: { zoomIn?: string; zoomOut?: string } = "{ zoomIn: 'Zoom in', zoomOut: 'Zoom out' }". Accessible names of the zoom buttons.
 Events:
 - 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.
 
 ## UiProfileHeader  (media)

package/dist/llms.txt

@@ -2,7 +2,7 @@
 
 > ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 160+ components and 16 page templates.
 
-Version 0.2.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.3.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'