@ultimat3/ui 20.1.6 → 20.2.0

package/src/index.ts

@@ -57,20 +57,35 @@ export {
 } from './components/async-branch';
 export type { BadgeProps } from './components/Badge';
 export { Badge } from './components/Badge';
+export type { BarChartProps } from './components/BarChart';
+export { BarChart } from './components/BarChart';
 export type { BreadcrumbItem, BreadcrumbProps } from './components/Breadcrumb';
 export { Breadcrumb } from './components/Breadcrumb';
 export type { ButtonProps } from './components/Button';
 export { Button } from './components/Button';
+export type { BarRect, ChartPoint } from './components/bar-chart-view';
+export { BAR_CHART, barRects, GRID_STEPS, gridY, maxOf } from './components/bar-chart-view';
 export type { CardProps, Elevation } from './components/Card';
 export { Card } from './components/Card';
 export type { CheckboxProps } from './components/Checkbox';
 export { Checkbox } from './components/Checkbox';
 export type { ComboboxProps } from './components/Combobox';
 export { Combobox } from './components/Combobox';
+export type { CommandPaletteLabels, CommandPaletteProps } from './components/CommandPalette';
+export { CommandPalette } from './components/CommandPalette';
 export type { ContainerProps, ContainerSize } from './components/Container';
 export { Container } from './components/Container';
+export type { CopyButtonProps } from './components/CopyButton';
+export { COPIED_MS, CopyButton } from './components/CopyButton';
 export type { ComboboxOption } from './components/combobox-filter';
 export { COMBOBOX_LIMIT, filterOptions, normalizeQuery } from './components/combobox-filter';
+export type { CommandPaletteItem, PaletteKeyAction } from './components/command-palette-view';
+export {
+  filterItems,
+  keyAction,
+  settleActive,
+  stepActive,
+} from './components/command-palette-view';
 export type { Column, DataTableProps } from './components/DataTable';
 export { DataTable } from './components/DataTable';
 export type { DateTimeProps } from './components/DateTime';
@@ -137,6 +152,8 @@ export type { ImageBox, ImageLoadingHints, ImageVariant } from './components/ima
 export { boxFor, loadingHints, ratioFor, srcsetFor } from './components/image-source';
 export type { LoadMoreInput, LoadMoreState } from './components/infinite-scroll-view';
 export { loadMoreState } from './components/infinite-scroll-view';
+export type { KbdProps } from './components/Kbd';
+export { Kbd } from './components/Kbd';
 export type { LinkProps } from './components/Link';
 export { Link } from './components/Link';
 export type { LocaleSwitcherProps } from './components/LocaleSwitcher';
@@ -145,8 +162,11 @@ export type { LinkTarget } from './components/link-target';
 export { linkTarget } from './components/link-target';
 export type { MenuItem, MenuProps } from './components/Menu';
 export { Menu } from './components/Menu';
+export type { MeterProps } from './components/Meter';
+export { Meter } from './components/Meter';
 export type { MoneyProps } from './components/Money';
 export { Money } from './components/Money';
+export { meterShare, meterWidth } from './components/meter-view';
 export type { MoneyFormatter, MoneyInput, MoneyViewOptions } from './components/money-view';
 // --- formatting cores (pure, renderer-free) ----------------------------------
 export { moneyText, toMoney } from './components/money-view';
@@ -156,6 +176,10 @@ export type { PaginationProps } from './components/Pagination';
 export { Pagination } from './components/Pagination';
 export type { Placement, PopoverProps } from './components/Popover';
 export { Popover } from './components/Popover';
+export type { QrCodeProps } from './components/QrCode';
+export { QrCode } from './components/QrCode';
+export type { QrMatrix } from './components/qr-matrix';
+export { encodeQr } from './components/qr-matrix';
 export type { RadioOption, RadioProps } from './components/Radio';
 export { Radio } from './components/Radio';
 export type { RelativeTimeProps } from './components/RelativeTime';
@@ -168,14 +192,22 @@ export type { SelectOption, SelectProps } from './components/Select';
 export { Select } from './components/Select';
 export type { SkeletonProps } from './components/Skeleton';
 export { Skeleton } from './components/Skeleton';
+export type { SparklineProps } from './components/Sparkline';
+export { Sparkline } from './components/Sparkline';
 export type { SpinnerProps } from './components/Spinner';
 export { Spinner } from './components/Spinner';
 export type { StackProps } from './components/Stack';
 export { Stack } from './components/Stack';
+export type { StatTileProps } from './components/StatTile';
+export { StatTile } from './components/StatTile';
 export type { SwitchProps } from './components/Switch';
 export { Switch } from './components/Switch';
 export type { SortDirection, SortState } from './components/sort-state';
 export { ariaSortFor, nextSortState } from './components/sort-state';
+export type { SparkPoint } from './components/sparkline-view';
+export { SPARKLINE, sparklinePath, sparkPoints } from './components/sparkline-view';
+export type { StatDelta, StatTrend } from './components/stat-delta';
+export { DELTA_ARROW_PATH, deltaOf } from './components/stat-delta';
 export type { TableProps } from './components/Table';
 export { Table } from './components/Table';
 export type { TabItem, TabsProps } from './components/Tabs';

package/src/theme/inline-script.ts

@@ -1,6 +1,11 @@
 // The blocking <head> snippet that kills the flash of wrong theme. Built from the
 // same constants as theme.ts so the two can never disagree. Server/build-only:
 // the hash is computed with Bun's hasher for the CSP header.
+//
+// DEPRECATED `As of 20.2.0`: the framework's boot inlines this script itself, from
+// `@ultimat3/render`'s `themeScript({ fallback })` with `theme.defaultMode` in `app.config.ts` as
+// the fallback, and admits it to the CSP — an app no longer writes either half. This module stays
+// exported for one major so an app that inlined it by hand keeps building; it is removed in 21.
 
 import { runtimeMissingError } from '../errors';
 import { THEME_ATTRIBUTE, THEME_MEDIA_QUERY, THEME_STORAGE_KEY } from './theme';

package/src/tokens/_mixins.scss

@@ -8,6 +8,8 @@
 @use 'colors';
 @use 'motion';
 @use 'radius';
+@use 'space';
+@use 'typography';
 
 /// Keyboard-only focus, drawn from the accent role so it themes automatically.
 @mixin focus-ring($role: 'accent', $width: 2px, $offset: 2px) {
@@ -191,6 +193,34 @@
   }
 }
 
+/// The mono family with tabular figures, for slugs, counts, timestamps, ids and URLs — data
+/// whose columns must not wobble as the value changes. Lifted from an app that had restated
+/// these two lines in six stylesheets before the catalog carried them.
+@mixin data-text {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/// The section-label voice: smallest text step, medium weight, wide tracking, uppercase. An
+/// eyebrow over a hero, a stat tile's label, a table's column head.
+@mixin label-caps {
+  font-size: typography.text('xs');
+  font-weight: typography.weight('medium');
+  letter-spacing: typography.tracking('wide');
+  text-transform: uppercase;
+}
+
+/// A dot grid faded toward the top-left, where the text sits, over the soft background — the
+/// "quietly technical" ground a hero or a dashboard main sits on. Two layers: the fade (so the
+/// dots never compete with the copy) and the grid itself, pitched on one spacing step. Every
+/// colour is a role, so it themes with the page.
+@mixin dot-grid($pitch: space.space(5), $alpha: 0.55) {
+  background:
+    radial-gradient(ellipse 70% 90% at 0% 0%, colors.role('bg') 35%, transparent 100%),
+    radial-gradient(colors.role('line', $alpha) 1px, transparent 1px) 0 0 / $pitch $pitch,
+    colors.role('bg-soft');
+}
+
 /// Inline run of items on one baseline — a toolbar, a header, an icon beside a label.
 @mixin row($gap: var(--space-3), $align: center, $justify: flex-start) {
   display: flex;

package/src/tokens/reset.scss

@@ -15,6 +15,13 @@
   padding: 0;
 }
 
+// The `*` above outranks the UA stylesheet's `dialog { margin: auto }`, which is the ONLY thing
+// that centres a modal `<dialog>` in its viewport — so every `Dialog` and every app dialog opened
+// pinned to the top-left corner until the app restated the margin itself. Restated once, here.
+dialog {
+  margin: auto;
+}
+
 html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;