Version Packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@javaabu/onu@0.1.0

Minor Changes

• 66fea37 Thanks @claude! - Setting --onu-primary now re-brands the whole UI, not just buttons. The neutral tokens (accent, secondary, muted, border, input and the sidebar ones) are tinted with a little of the primary colour, and brand-coloured states use it: the active sidebar item (with a bar on sub-items), tab underlines, selected table rows, the current pagination page, calendar ranges and today, nav pills and stacked tabs, outline and ghost button hovers, pressed toggles, command items and text selection. Dark-mode primary-subtle is stronger so it shows on cards, and scoped data-onu-theme sections inside dark mode now get the lifted dark primary. Turn the tint down or off with --onu-tint (e.g. 0%) or data-onu-tint="none"; setting a token such as --onu-accent still replaces it, and the untinted values are available as --onu-neutral-*. The light muted-foreground is slightly darker (oklch(0.5 0 0)) to keep AA contrast on tinted surfaces.

• 45ec6ed Thanks @claude! - Charts: add ChartAnimationProvider (and export useChartAnimation) to turn animation off for every Onu chart in an area, e.g. for print, kiosks or screenshot tests. Tooltips now also stop animating under prefers-reduced-motion, so every Onu chart passes isAnimationActive={false} to all its Recharts elements when reduced motion is preferred. The visual regression spec emulates reduced motion and loads fonts before charts render, so chart screenshots are stable.

• e7de10b Thanks @claude! - Charts: gradient fills, on by default. Areas (LineChart and TimeSeriesChart areas, stacked areas, Sparkline, StatTile sparklines) fade from the series colour to almost clear at the baseline, bars (BarChart vertical, horizontal and stacked, TimeSeriesChart bars, PeriodComparisonChart bars) run from a lighter base to the full colour (mirrored for negative values and for horizontal bars in RTL), and the PeriodComparisonChart line variant gets a soft wash under the current period. Gradients use the series colour, so they follow the theme and --onu-primary, have ids unique per chart instance, and fall back to solid in forced-colours mode. Turn them off with gradient={false} on a chart (sparklineGradient on StatTile) or for an area with the new ChartStyleProvider gradient={false}; useChartGradient is exported for custom charts. Pie and donut slices stay solid. Tooltip and legend swatches stay solid when a series is filled with a gradient.

• 672865d Thanks @claude! - Charts (@javaabu/onu/charts): BarChart, LineChart, PieChart, TimeSeriesChart, PeriodComparisonChart, Sparkline, StatTile/StatTiles, DeltaIndicator and MapChart, plus the shadcn chart primitives and locale-aware formatters (formatMVR, useChartFormat).

• fd269fe Thanks @claude! - New @javaabu/onu/export entry: exportRows({ format, rows, columns, filename, title, scope }) and useExportRows() build CSV, Excel or PDF files in the browser, so ExportMenu / ListingPage can export without a server in one line (onExport={(format) => exportRows({ format, rows, columns })}). Columns take a header, an accessor (key, dotted path or function) and an optional type (text, number, currency, date, datetime, boolean) and formatter. CSV is UTF-8 with a BOM, RFC 4180 quoted and guarded against formula injection. Excel uses the optional write-excel-file peer (loaded on first use), keeps numbers numeric and dates as dates, and writes right-to-left sheets for Dhivehi. PDF opens the print dialog with a paginated, escaped table document (title, scope, generated date, repeated header row, page numbers, dir/lang, Onu fonts), so Thaana renders correctly. Per-format helpers (toCsv, buildExcelSheet, toExcelBlob, buildPrintDocument, printHtml, …) are exported too.

• 7dd220a Thanks @claude! - Display and feedback components: DescriptionList, StatusBadge, Tag, UserAvatar, UserAvatarGroup, KeyboardKey, Callout, Notice, AnnouncementBar, CookieConsent, Toaster/toast, ConditionalLink, ConditionalDisplay, PublishBox, LastEditedBy, RelativeDate, Countdown, ActivityFeed, CommentThread, Notes, IconText, ShareButtons, PrintButton/BackButton, MiniCalendar, ContentCard and error pages (403, 404, 500, 503). Adds the cookie, megaphone, message and wrench semantic icons.

• 1d39453 Thanks @claude! - DropzoneUploader: controlled value / onValueChange and defaultValue for its file list, so an edit page can show files already saved on the record ({ id, name, size?, type?, url?, thumbnailUrl? }), let the user remove them, and submit the kept ids as hidden inputs. With an uploader, finished uploads are added to the value ({ id, name, size, type, file, response }); without one, picked Files are. Existing files count toward maxFiles; removing a file moves focus back to the Browse button and is announced. New types DropzoneFile and UploadedFile. Without the new props the uploader behaves as before, except that with multiple={false} and an uploader, a finished upload now replaces the previous one instead of listing both.

• 8daf873 Thanks @claude! - Files and media: FileInput, MultipleFileInput, InstantFileUpload, DropzoneUploader, UploadProgress (with useUploadQueue and an XHR uploader that understands Laravel JSON errors), AdditionalFilesUpload, ImageInput, MediaLister, Carousel (dots, autoplay with pause, RTL), AttachmentPreview, DocumentDownload, VideoEmbed and FileIcon; and in @javaabu/onu/media: ImageCropper, AvatarUpload, Lightbox, Gallery and MediaPlayer.

• a9a17c2 Thanks @claude! - Form scaffolding: Form (Laravel 422 and react-hook-form support, error summary, focus on the first invalid field), ValidationSummary, FormGroup, Fieldset / FormSection, Label, FormContainer, RepeatingGroup, InlineEdit, AutosaveIndicator + useAutosave, SaveBar + useUnsavedChangesGuard, FloatingSubmit, SubmitButton, Button (loading, icons, success/warning), LinkButton, ButtonGroup and the auth forms (SignInForm, RegisterForm, ForgotPasswordForm, ResetPasswordForm).

• 8a01ae3 Thanks @claude! - Form, listing and layout fixes:

  • Textarea keeps its character counter in LTR order on RTL pages; SegmentedControl never truncates labels and scrolls sideways when space runs out.
  • File names use dir="auto" and sizes read left-to-right in MediaLister, AttachmentPreview, DocumentDownload, FileInput and file rows.
  • SaveBar keeps inside the main column (mirrored in RTL) and reads "No changes yet" when clean.
  • The unsaved-changes guard covers hash-router links and, where the Navigation API exists, Back/Forward (new interceptHistory option).
  • describeChanges is typed per key; auth forms pass every named field to onSubmit (AuthFormValues) and use the transparent divider.
  • Nav items match on path and query; AppSidebar parent badges sit before the chevron.
  • Card pads content placed straight inside it (padded={false} opts out).
  • DataTable selection checkboxes are 24px targets.
  • ListingPage with custom children keeps pagination and adds a Sort by menu; state equal to defaultState stays out of the URL.
  • New useFormatFilter, useActiveFilterLabels and formatFilterLabel; new useFormatDate, useFormatNumber and useFormatCurrency.
  • TreeView shows partly selected parents and gains opt-in selectionPropagation (propagateTreeSelection exported).

• 6c57d2f Thanks @claude! - New portal building blocks (R3.7): Hero (heading, lead text, actions, search slot, media or a background image under a token-coloured scrim) and FeatureGrid (icon, title, description and link per item, with container-query columns). Adds a fluid type scale (R3.4): text-fluid-sm … text-fluid-5xl utilities built on clamp(), overridable with --onu-text-fluid-*, with taller line heights for Thaana. cn() merges the fluid utilities as font sizes.

• fe354c8 Thanks @claude! - Smaller single-component bundles: <Icon> no longer imports the full Lucide map (~250 icons). OnuProvider supplies the default set through the icon context, and components with fixed glyphs (Button's loading spinner, Spinner, the shadcn primitives' close buttons, chevrons and checks) pass their Lucide icon as the new fallback prop, so they keep working outside OnuProvider and OnuProvider icons overrides still win. Importing only Button drops from 20.7 kB to 11.9 kB (brotli), FormField + TextInput from 37.2 kB to 28.2 kB. The Icon exported from the package root still resolves every name anywhere. Outside OnuProvider, names chosen at runtime inside components (e.g. <Button startIcon="add">) now show the generic icon. Wrap your app in OnuProvider, as the installation guide says.

• 401d096 Thanks @claude! - First release of Onu: shadcn/ui based components with RTL, Dhivehi and Thaana keyboard support, one-variable theming, dark mode and density modes.

• 20d1b66 Thanks @claude! - Smaller, faster builds: code highlighting uses shiki/core with the JavaScript regex engine and a curated, lazily loaded language set (add more with the new registerCodeLanguage / registerCodeTheme), instead of Shiki's full ~300-language bundle and WebAssembly; type declarations are generated with TypeScript 7 (about 3.5x faster and no Node heap limit), and Vite no longer computes gzip sizes during builds.

• 94c29eb Thanks @claude! - Listing pages: DataTable (TanStack Table v9), ListingPage, useListingState (URL state, §25.6 paging/selection rules), FilterPanel, ActiveFilterChips, FilterTabs, FilterSubmit, SearchBox, SearchResults, Pagination (Laravel paginator / API resource aware), PerPage, BulkActionBar, RowActions, RecordActionsMenu, EmptyState, ExportMenu, ColumnVisibility, ViewSwitcher, ListView, GridView, LoadMore, KanbanBoard, SortableList, ReorderableTable, TreeView, EditableDataGrid, and FilterConditionBuilder in the new @javaabu/onu/query-builder entry.

• 4cf1c3b Thanks @claude! - Overlays and loading components: Modal, ConfirmDialog (with useConfirm() / confirm() and ConfirmProvider), SlideOver, BottomSheet, PopoverPanel, Tip, ActionMenu, ContextActionMenu, CommandPalette, Spinner, SkeletonText/Card/Table, PlaceholderInput, LoadingOverlay, PageProgress (pageProgress, usePageProgress) and ProgressBar. Fixes the double-flipped submenu chevron in RTL for the dropdown and context menu primitives.

• 51a5877 Thanks @claude! - New default look for the app shell and page layout (ProtonAnt): Proton Mail's shell around Ant Design's content.

  • AppLayout is a white content panel with a 12px rounded top-start corner and a 1px shell line, on the app shell colour (variant="panel", the default; variant="flat" keeps the previous look). New background="layout" (Ant's layout grey for dashboards of cards) and breadcrumbs (shown in the page header band, or above the content). useAppLayout() is exported.
  • AppHeader defaults to variant="shell" inside a panel layout: the shell colour, 60px, a wide 40px rounded search, 36px quiet icon buttons and a square account avatar (avatar only below 768px). Outside a panel layout the default is unchanged.
  • AppSidebar defaults to surface="shell" inside a panel layout: Proton's 36px items with grey hover and active states, brand count pills (badgeTone: "neutral" for plain totals), coloured folders and labels (NavItem.color tints the icon or shows a dot), and a new action slot for a full-width 44px call to action. Sidebar gets a surface prop.
  • New UsageMeter (a quota bar with "used / total", a link and a note for the sidebar footer) and AppSwitcher (Proton's app grid menu).
  • PageTitle is Ant's PageHeader band for an h1 inside a panel layout: breadcrumbs (defaulting to the layout's), title with subtitle and tags, actions, description with key figures, extra content, and a tabs row with an ink bar. variant="band" | "plain"; breadcrumbs also accepts a BreadcrumbsItem[].
  • ListingPage gets the Ant ProTable layout (variant="card", the default inside a panel layout): the header band with the status tabs, an optional inline query form (queryFilters or queryForm) and the list in a table card with tableTitle and tools. FilterPanel gets variant="form" (labelled fields in a grid with Reset, Filter and Expand).
  • StatTile is Ant Pro's ChartCard: a 30px regular-weight figure, a tip info button, a 46px chart slot and a footer row under a line.
  • Card follows Ant: 24px padding, a 1px border line without shadow, and a 56px header row with its own bottom line; padded={false} now removes all padding. NavTabs line tabs and Breadcrumbs follow Ant too.
  • The shell reads new semantic tokens (--shell, --shell-foreground, --shell-border, --shell-field, --shell-hover, --shell-active, --shell-weak, --layout) with Proton's values as fallbacks.

• 7486eb5 Thanks @claude! - New default look (ProtonAnt): tokens and content controls. The default brand is Proton purple #6d4aff; greys are Ant Design's plain neutrals (--onu-tint now defaults to 0%; set it to 100% for the brand-tinted greys); body text is 14px on a 22px line; --onu-radius is 6px (cards and popups 8px, tags 4px). New tokens: --onu-shell* (the Proton app shell: #f5f4f2 light, #16141c dark), --onu-layout, --onu-preset-{blue,cyan,green,red,gold} (with -border and -foreground), --onu-shadow-popup, --onu-font-size and --onu-line-height, plus the derived Ant-style colour steps --primary-1 … --primary-8 (Tailwind bg-primary-1 …, bg-shell, bg-layout, bg-preset-green, shadow-popup). Controls follow Ant Design: 32px buttons with 14px regular text (outline is Ant's default button with a brand hover; new dashed variant; destructive is solid), fields with #d9d9d9 borders, a brand border on hover and a brand border and glow on focus, a 44 × 22 switch, menus with 32px items and the popup shadow, line tabs with an ink bar and count pills, an Ant table (grey header with split lines, 12px 16px cells, selected rows in --primary-1), StatusBadge and Tag as bordered preset-colour tags (Tag gains an optional color prop), and Pagination with numbered pages by default (numbered={false} restores Previous / Next) and the page-size changer after the pages.

• 86ec7a5 Thanks @claude! - Add QrCode to @javaabu/onu/media: a QR code generator that encodes with uqr and renders a themed SVG (currentColor, tone variant), with error-correction levels, quiet zone, a centre logo that forces level H, an accessible label, and optional PNG/SVG download and copy buttons with English and Dhivehi labels.

• 2f966b5 Thanks @claude! - SearchResults: new onShowMore(groupId, group) shows more results of a group on the same page. Groups with more results than shown (total, or the new hasMore) get a Show more button instead of the moreHref link, with a loading state (return a promise or set the group's loadingMore), focus moved to the first newly revealed result, and polite announcements of the loaded count or a failure. Without the callback the link behaves as before. classNames.more styles the link or button.

• 10f02af Thanks @claude! - TimeSeriesChart: new variant ("line" | "area" | "bar") and stacked props for stacked areas and stacked bars on the time axis. The data table, summary and RTL mirroring work as before.

Patch Changes

• adfa0cf Thanks @claude! - CodeBlock: Shiki token colours are adjusted to at least 4.5:1 contrast on the code background (and on highlighted lines) in light and dark mode. The default GitHub themes' keyword red and comment grey fell short of WCAG AA. highlightCode returns the adjusted colours too.

• 4c7a33b Thanks @claude! - Editor and BlockRenderer: lists and quotes now get the direction of their first strong character instead of dir="auto" (which the browser resolved to LTR because every paragraph inside has its own dir), so bullets, numbers and the quote border sit on the right of Dhivehi text. The direction updates while typing and is included in getHTML().

• d172ef0 Thanks @claude! - Editor and BlockRenderer: tables now take the direction of their first strong text, like lists and quotes. The table and its scroll wrapper get the resolved dir (in BlockRenderer, getHTML() and, updated while typing, both editors), so a Dhivehi table puts its first column on the right even on an English page. Table cells align to their logical start. An explicit dir in the content still wins; a table with no strong text yet stays dir="auto".

• 4ea0754 Thanks @claude! - FormField no longer grows past its grid or flex column when a control holds long content (such as a long file name); its root now has min-w-0.

• 252f581 Thanks @claude! - FullCalendar: the agenda view no longer overflows by 10,000px in RTL (FullCalendar's off-screen list header is now hidden in place), and month events clip inside their day cell on phones.

• d784354 Thanks @claude! - Maps (Google adapter), found by running the adapter against the real Maps JavaScript API:

  • MapPolygon / MapRoute: the initial value is no longer wiped when it is loaded into terra-draw (terra-draw reported its clear() as the user deleting every shape).
  • terra-draw now starts once the map has a projection, instead of throwing Cannot read properties of null (reading 'addEventListener') when it loaded before the map was ready.
  • Shapes stay on the map when the drawing tone changes (e.g. picking another zone type).
  • Maps keep their camera when they switch between light and dark, instead of jumping back to the initial centre and zoom.
  • Clustered markers use PinElement directly and gmp-click, removing Google's deprecation warnings.

• 1d02e1d Thanks @claude! - applyListingState returns every matching row when perPage is Infinity (it returned none), so "export all rows" exports work.

• c2a21e8 Thanks @claude! - The keyless map preview merges clusters whose buttons would overlap, so cluster targets keep WCAG 2.5.8 spacing.

• fea252e Thanks @claude! - Maps: LiveMap pans to the selected marker when selectedId changes from outside the map (without turning on follow mode). LiveMap, RouteStopEditor, MapRoute, MapPolygon and MapReplay fit their points when no center/zoom is given — also when the points load after the first render — in both the Google adapter and the keyless preview; a single point is centred at zoom 15 instead of zooming all the way in. MapView's bounds is now fitted once, as soon as it is set.

• ceac3a3 Thanks @claude! - StatTile steps its figure down in narrow tiles (container query) so long values such as currency amounts stay on one line.