@ziyarago/ui 0.16.0 → 0.18.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [0.18.0](https://github.com/ziyarago/ui/compare/v0.17.0...v0.18.0) (2026-10-21)
+
+### Features
+
+* TopNav sub-menus with icons and overflow into a More menu, no edge fade ([ed1addd](https://github.com/ziyarago/ui/commit/ed1addd0d9a9844b4e6e23bbe86b18a5a01a74be))
+
+## [0.17.0](https://github.com/ziyarago/ui/compare/v0.16.0...v0.17.0) (2026-10-21)
+
+### Features
+
+* chart components metadata, charts docs page and styles (Pro: LineChart, AreaChart, BarChart, DonutChart) ([be37587](https://github.com/ziyarago/ui/commit/be37587030f01821117364d1ec3f8d7565964f53))
+
 ## [0.16.0](https://github.com/ziyarago/ui/compare/v0.15.3...v0.16.0) (2026-10-21)
 
 ### Features

package/README.md

@@ -4,7 +4,7 @@
 
 <p align="center"><a href="https://ziyara.vip"><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/hero-dark.png" alt="ziyarago/ui: glass design system for Vue, Nuxt and React" width="100%"></a></p>
 
-Glass design system for Vue 3, Nuxt and React: 102 free components and 6 page templates (the Pro package adds 106 components and 33 templates), OKLCH tokens, dark and light, RTL and Arabic, 16 interface languages. One framework-neutral core with thin adapters. Built for Umrah and Hajj products, usable anywhere.
+Glass design system for Vue 3, Nuxt and React: 102 free components and 6 page templates (the Pro package adds 110 components and 33 templates), OKLCH tokens, dark and light, RTL and Arabic, 16 interface languages. One framework-neutral core with thin adapters. Built for Umrah and Hajj products, usable anywhere.
 
 <table>
   <tr>
@@ -12,7 +12,7 @@ Glass design system for Vue 3, Nuxt and React: 102 free components and 6 page te
     <td width="50%"><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/hero-rtl.png" alt="Arabic RTL"><br><sub>Arabic, RTL mirrored</sub></td>
   </tr>
   <tr>
-    <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/components.png" alt="Component catalog"><br><sub>208 components documented with props and live examples (102 free, 106 Pro)</sub></td>
+    <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/components.png" alt="Component catalog"><br><sub>212 components documented with props and live examples (102 free, 110 Pro)</sub></td>
     <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/templates.png" alt="Page templates"><br><sub>page templates: 6 free, 33 Pro</sub></td>
   </tr>
   <tr>

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, 102 free components and 6 page templates (more in @ziyarago/ui-pro).
 
-Version 0.16.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.18.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -1186,6 +1186,116 @@ Slots:
 Events:
 - menu: Called with the clicked menu item label (the string from menu); the menu closes afterwards.
 
+## UiLineChart  (data, Pro)
+Line chart for time series with several series, a localized time axis with automatic label step, "nice" value ticks, gaps for null values, tooltip and keyboard navigation.
+Props:
+- `series` (required): { key: string; label: string; values: { x: string | number | Date; y: number | null }[]; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'; dashed?: boolean }[]. Series to draw. x is a Date, an ISO date string (day, week, month are detected from the spacing), a number or a category string; the series share one x list, a missing x or a null y is a gap. tone is brand, success, warning, danger, info or neutral; without it the series palette (--zg-chart-1 to 6) is used. dashed draws the line dashed, for example the previous week.
+- `unit`: 'count' | 'currency' | 'percent' = "count". Number format of the value axis, tooltip and legend. count: grouped digits, compact on the axis (1.2k, 1.2M, localized by Intl); currency: needs currency; percent: values are percent points (12 means 12%).
+- `currency`: string. ISO 4217 code for unit="currency", for example UZS, SAR or USD. The axis stays compact without the symbol; tooltip and legend show the full amount.
+- `yFormat`: (n: number) => string. Custom formatter for every number (axis, tooltip). Overrides unit and currency.
+- `locale`: string. BCP 47 tag for numbers and dates, for example "ar" or "uz-UZ". Defaults to the kit locale (en ru uz ar tr and the rest). An RTL language also mirrors the chart.
+- `dir`: 'ltr' | 'rtl'. Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip).
+- `label`: string. Accessible name, for example "Revenue". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label.
+- `height`: number. Chart height in px (without the legend). Overrides size. Horizontal bars grow with the number of categories when it is not set.
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Preset height: xs 140, sm 180, md 240, lg 320, xl 400 px.
+- `loading`: boolean = false. Shows a skeleton in the shape of the chart.
+- `emptyText`: string. Text of the empty state. Default is the translated "No data for this period".
+- `emptyIcon`: string. Icon name shown above the empty text. None by default.
+- `legend`: boolean = "true when there is more than one series". Text legend of toggle buttons (aria-pressed). A button hides and shows its series; the scale is recomputed.
+- `yMin`: number. Fixed lower end of the value axis (otherwise nice ticks from the data, from 0 unless the data stays far above it).
+- `yMax`: number. Fixed upper end of the value axis.
+- `showPoints`: boolean. Dots on every point. Default: on up to 40 points; isolated points (between gaps) always get a dot.
+Events:
+- pointClick: Click or Enter on a point. Called with { seriesKey, series, index, x, label, y }: the series under the pointer (or the keyboard series), the index in the shared x list, the original x value, its formatted label and y.
+- legendToggle: A legend button was pressed. Called with { key, label, hidden } where hidden is the new state.
+Notes:
+- Pure inline SVG, no dependencies. Colors come from the --zg-chart-* tokens (light, dark, gold and tamam), so there is nothing to configure per theme.
+- Empty data (no points, only null values, or only zeros for bars and donut) shows the empty state instead of an axis of zeros. A null y is a gap in the line, never a zero. All values equal: the axis starts at 0 and leaves headroom.
+- Accessibility: the plot is one focusable role="img" with a generated aria-label, a visually hidden data table, and a live region that reads the point while you move. Keys: Left and Right (mirrored in RTL) move between points, Up and Down between series, Home and End jump, Escape hides the tooltip, Enter fires pointClick.
+- The chart fills the width of its container (ResizeObserver, client only) and renders at 640 px on the server.
+
+## UiAreaChart  (data, Pro)
+Line chart with a gradient fill under each line, made from the series color; same data, axes, tooltip and keyboard behavior as LineChart.
+Props:
+- `series` (required): { key: string; label: string; values: { x: string | number | Date; y: number | null }[]; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'; dashed?: boolean }[]. Series to draw, see LineChart. The fill goes down to the zero line (or the bottom of the plot when the axis does not include 0); each run between gaps is filled separately.
+- `unit`: 'count' | 'currency' | 'percent' = "count". Number format of the value axis, tooltip and legend. count: grouped digits, compact on the axis (1.2k, 1.2M, localized by Intl); currency: needs currency; percent: values are percent points (12 means 12%).
+- `currency`: string. ISO 4217 code for unit="currency", for example UZS, SAR or USD. The axis stays compact without the symbol; tooltip and legend show the full amount.
+- `yFormat`: (n: number) => string. Custom formatter for every number (axis, tooltip). Overrides unit and currency.
+- `locale`: string. BCP 47 tag for numbers and dates, for example "ar" or "uz-UZ". Defaults to the kit locale (en ru uz ar tr and the rest). An RTL language also mirrors the chart.
+- `dir`: 'ltr' | 'rtl'. Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip).
+- `label`: string. Accessible name, for example "Revenue". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label.
+- `height`: number. Chart height in px (without the legend). Overrides size. Horizontal bars grow with the number of categories when it is not set.
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Preset height: xs 140, sm 180, md 240, lg 320, xl 400 px.
+- `loading`: boolean = false. Shows a skeleton in the shape of the chart.
+- `emptyText`: string. Text of the empty state. Default is the translated "No data for this period".
+- `emptyIcon`: string. Icon name shown above the empty text. None by default.
+- `legend`: boolean = "true when there is more than one series". Text legend of toggle buttons (aria-pressed). A button hides and shows its series; the scale is recomputed.
+- `yMin`: number. Fixed lower end of the value axis.
+- `yMax`: number. Fixed upper end of the value axis.
+- `showPoints`: boolean. Dots on every point. Default: on up to 40 points; isolated points always get a dot.
+Events:
+- pointClick: Click or Enter on a point. Called with { seriesKey, series, index, x, label, y }: the series under the pointer (or the keyboard series), the index in the shared x list, the original x value, its formatted label and y.
+- legendToggle: A legend button was pressed. Called with { key, label, hidden } where hidden is the new state.
+Notes:
+- Pure inline SVG, no dependencies. Colors come from the --zg-chart-* tokens (light, dark, gold and tamam), so there is nothing to configure per theme.
+- Empty data (no points, only null values, or only zeros for bars and donut) shows the empty state instead of an axis of zeros. A null y is a gap in the line, never a zero. All values equal: the axis starts at 0 and leaves headroom.
+- Accessibility: the plot is one focusable role="img" with a generated aria-label, a visually hidden data table, and a live region that reads the point while you move. Keys: Left and Right (mirrored in RTL) move between points, Up and Down between series, Home and End jump, Escape hides the tooltip, Enter fires pointClick.
+- The chart fills the width of its container (ResizeObserver, client only) and renders at 640 px on the server.
+
+## UiBarChart  (data, Pro)
+Vertical or horizontal bar chart, grouped or stacked, for categories such as days, 24 hours or revenue per branch; same axes, formats and accessibility as LineChart.
+Props:
+- `series` (required): { key: string; label: string; values: { x: string | number | Date; y: number | null }[]; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'; dashed?: boolean }[]. One entry per bar series. x is the category (string, number or Date); categories keep their order of first appearance, dates are sorted. Negative values draw below the zero line.
+- `orientation`: 'vertical' | 'horizontal' = "vertical". Horizontal puts the categories on the left (right in RTL) and grows with the number of categories.
+- `stacked`: boolean = false. Stacks the series of a category (positives and negatives stack apart) instead of placing them side by side; the tooltip adds a total.
+- `unit`: 'count' | 'currency' | 'percent' = "count". Number format of the value axis, tooltip and legend. count: grouped digits, compact on the axis (1.2k, 1.2M, localized by Intl); currency: needs currency; percent: values are percent points (12 means 12%).
+- `currency`: string. ISO 4217 code for unit="currency", for example UZS, SAR or USD. The axis stays compact without the symbol; tooltip and legend show the full amount.
+- `yFormat`: (n: number) => string. Custom formatter for every number (axis, tooltip). Overrides unit and currency.
+- `locale`: string. BCP 47 tag for numbers and dates, for example "ar" or "uz-UZ". Defaults to the kit locale (en ru uz ar tr and the rest). An RTL language also mirrors the chart.
+- `dir`: 'ltr' | 'rtl'. Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip).
+- `label`: string. Accessible name, for example "Revenue". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label.
+- `height`: number. Chart height in px (without the legend). Overrides size. Horizontal bars grow with the number of categories when it is not set.
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Preset height: xs 140, sm 180, md 240, lg 320, xl 400 px.
+- `loading`: boolean = false. Shows a skeleton in the shape of the chart.
+- `emptyText`: string. Text of the empty state. Default is the translated "No data for this period".
+- `emptyIcon`: string. Icon name shown above the empty text. None by default.
+- `legend`: boolean = "true when there is more than one series". Text legend of toggle buttons (aria-pressed). A button hides and shows its series; the scale is recomputed.
+- `yMin`: number. Fixed lower end of the value axis.
+- `yMax`: number. Fixed upper end of the value axis.
+Events:
+- pointClick: Click or Enter on a point. Called with { seriesKey, series, index, x, label, y }: the series under the pointer (or the keyboard series), the index in the shared x list, the original x value, its formatted label and y.
+- legendToggle: A legend button was pressed. Called with { key, label, hidden } where hidden is the new state.
+Notes:
+- Pure inline SVG, no dependencies. Colors come from the --zg-chart-* tokens (light, dark, gold and tamam), so there is nothing to configure per theme.
+- Empty data (no points, only null values, or only zeros for bars and donut) shows the empty state instead of an axis of zeros. A null y is a gap in the line, never a zero. All values equal: the axis starts at 0 and leaves headroom.
+- Accessibility: the plot is one focusable role="img" with a generated aria-label, a visually hidden data table, and a live region that reads the point while you move. Keys: Left and Right (mirrored in RTL) move between points, Up and Down between series, Home and End jump, Escape hides the tooltip, Enter fires pointClick.
+- The chart fills the width of its container (ResizeObserver, client only) and renders at 640 px on the server.
+
+## UiDonutChart  (data, Pro)
+Donut chart of shares (sales channels, payment methods, plans) with a text legend, the total in the centre and a legend toggle.
+Props:
+- `data` (required): { key: string; label: string; value: number; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' }[]. Slices. Only positive values draw; others keep their legend row at 0. All zero or empty shows the empty state.
+- `unit`: 'count' | 'currency' | 'percent' = "count". Number format of the value axis, tooltip and centre total. count: grouped digits, compact on the axis (1.2k, 1.2M, localized by Intl); currency: needs currency; percent: values are percent points (12 means 12%).
+- `currency`: string. ISO 4217 code for unit="currency", for example UZS, SAR or USD. The axis stays compact without the symbol; tooltip and legend show the full amount.
+- `yFormat`: (n: number) => string. Custom formatter for every number (axis, tooltip, total). Overrides unit and currency.
+- `locale`: string. BCP 47 tag for numbers and dates, for example "ar" or "uz-UZ". Defaults to the kit locale (en ru uz ar tr and the rest). An RTL language also mirrors the chart.
+- `dir`: 'ltr' | 'rtl'. Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip).
+- `label`: string. Accessible name, for example "Revenue". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label.
+- `height`: number. Diameter in px. Overrides size.
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Preset diameter: xs 120, sm 160, md 200, lg 240, xl 300 px.
+- `loading`: boolean = false. Shows a skeleton in the shape of the chart.
+- `emptyText`: string. Text of the empty state. Default is the translated "No data for this period".
+- `emptyIcon`: string. Icon name shown above the empty text. None by default.
+- `legend`: boolean = true. Text legend of toggle buttons (aria-pressed). A button hides and shows its slice; the scale is recomputed.
+Events:
+- pointClick: Click or Enter on a slice. Called with { key, label, value, share, index }; share is 0 to 1.
+- legendToggle: A legend button was pressed. Called with { key, label, hidden } where hidden is the new state.
+Notes:
+- Pure inline SVG, no dependencies. Colors come from the --zg-chart-* tokens (light, dark, gold and tamam), so there is nothing to configure per theme.
+- Empty data (no points, only null values, or only zeros for bars and donut) shows the empty state instead of an axis of zeros. A null y is a gap in the line, never a zero. All values equal: the axis starts at 0 and leaves headroom.
+- Accessibility: the plot is one focusable role="img" with a generated aria-label, a visually hidden data table, and a live region that reads the point while you move. Keys: Left and Right (mirrored in RTL) move between points, Up and Down between series, Home and End jump, Escape hides the tooltip, Enter fires pointClick.
+- The chart fills the width of its container (ResizeObserver, client only) and renders at 640 px on the server.
+
 ## UiRing  (data)
 Circular progress gauge with a percentage in the center and a tick scale around it.
 Props:
@@ -1718,16 +1828,19 @@ Notes:
 Horizontal app header with a brand area, navigation items and an actions area.
 Props:
 - `brand`: string | VNode. Logo or product name on the left.
-- `items`: { value: string; label: string; icon?: string; count?: string | number }[] = "[]". Navigation entries. count renders a small counter after the label.
+- `items`: { value: string; label: string; icon?: string; count?: string | number; children?: ({ value: string; label: string; icon?: string; count?: string | number; disabled?: boolean } | { heading: string } | { separator: true })[] }[] = "[]". Navigation entries. count renders a small counter after the label. An entry with children becomes a drop-down: click or ArrowDown opens a menu of its children (each with an optional icon and count, headings and separators allowed); selecting one calls change with the child value. The entry is marked current when one of its children is.
 - `value`: string. Value of the active item (aria-current="page").
+- `overflow`: 'menu' | 'none' = "menu". 'menu': entries that do not fit move into a trailing "More" drop-down (measured after render and on resize; server rendering shows all entries). 'none': no collapsing, the row scrolls sideways and sub-menus are clipped, so avoid children with it.
+- `moreLabel`: string = "More". Accessible name of the overflow drop-down button.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scale of header padding, item height and text.
 Slots:
 - actions: Right side of the header (buttons, avatar). React also accepts an actions prop.
 Events:
-- change: Called with the value of the clicked item.
+- change: Called with the value of the clicked item or sub-menu item.
 Notes:
 - Controlled: update value yourself in the change handler.
 - Items use count; SubNav uses badge for the same purpose.
+- Entries with children and the More menu share the Dropdown keyboard behaviour: ArrowDown opens, arrows and Home/End move, Escape closes and returns focus to the button.
 
 ## UiSideNav  (navigation)
 Vertical sidebar with a brand, grouped navigation items, a footer and an optional collapse toggle.

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, 102 free components and 6 page templates (more in @ziyarago/ui-pro).
 
-Version 0.16.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.18.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -122,6 +122,10 @@ Tables, stats, charts and lists.
 - UiSegBar (Pro): Single stacked bar split into proportional segments with a legend, for distributions.
 - UiMiniChart: Tiny sparkline in bar or line form for trends inside cards and tables.
 - UiChartCard (Pro): Card shell for a chart with title, subtitle and an optional overflow menu; put the chart in the default slot.
+- UiLineChart (Pro): Line chart for time series with several series, a localized time axis with automatic label step, "nice" value ticks, gaps for null values, tooltip and keyboard navigation.
+- UiAreaChart (Pro): Line chart with a gradient fill under each line, made from the series color; same data, axes, tooltip and keyboard behavior as LineChart.
+- UiBarChart (Pro): Vertical or horizontal bar chart, grouped or stacked, for categories such as days, 24 hours or revenue per branch; same axes, formats and accessibility as LineChart.
+- UiDonutChart (Pro): Donut chart of shares (sales channels, payment methods, plans) with a text legend, the total in the centre and a legend toggle.
 - UiRing: Circular progress gauge with a percentage in the center and a tick scale around it.
 - UiOccupancyChart (Pro): Bar chart of percentages by label, such as hotel occupancy per day or month.
 - UiSalesFunnel (Pro): Horizontal funnel of steps with bars scaled to the largest value, for conversion flows.