@optimum-intelligence/opti-ui 0.6.2 → 0.7.0

package/dist/components.json

@@ -1,6 +1,6 @@
 {
   "package": "@optimum-intelligence/opti-ui",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Optimum's customizable React component library, built on Base UI.",
   "categories": [
     "Theme",
@@ -11,7 +11,8 @@
     "Overlays",
     "Disclosure & navigation",
     "Feedback & data display",
-    "Icons & utilities"
+    "Icons & utilities",
+    "Maps"
   ],
   "components": [
     {
@@ -22,6 +23,15 @@
       "import": "import { createTheme } from '@optimum-intelligence/opti-ui';",
       "signature": "createTheme(...themes: Theme[])"
     },
+    {
+      "name": "seriesColor",
+      "kind": "function",
+      "category": "Theme",
+      "description": "Colour for the `index`-th data series: `var(--oui-color-chart-N)`, cycling through the eight chart\ntokens. Use it for chart series, legend swatches and map routes so the same index gets the same hue\neverywhere, in light and dark mode.",
+      "import": "import { seriesColor } from '@optimum-intelligence/opti-ui';",
+      "signature": "seriesColor(index: number)",
+      "example": "<span style={{ background: seriesColor(2) }} />"
+    },
     {
       "name": "ThemeProvider",
       "kind": "component",
@@ -5807,6 +5817,475 @@
       "description": "Prepends a library class to a Base UI `className` prop, preserving the\nfunction form so consumers can still derive classes from component state.",
       "import": "import { withClass } from '@optimum-intelligence/opti-ui';",
       "signature": "withClass(base: string, className: StateClassName<State>,)"
+    },
+    {
+      "name": "Map",
+      "kind": "compound",
+      "category": "Maps",
+      "description": "Map components on MapLibre, from `@optimum-intelligence/opti-ui/map`. `Map.Root` holds the map; inside\nit, `Map.Areas`, `Map.Routes` and `Map.Points` draw arrays of items as single GeoJSON layers,\n`Map.Marker` adds HTML pins, `Map.Popup` and `Map.Tooltip` show content at a position, and\n`Map.Overlay` floats `Map.Legend`, `Map.BaseLayerSwitch` or cards over a corner.",
+      "import": "import { Map } from '@optimum-intelligence/opti-ui/map';",
+      "example": "<Map.Root baseLayers={baseLayers} fit=\"selected\">\n  <Map.Areas items={zones} />\n  <Map.Routes items={trips} selectedIds={selected} onItemClick={(t) => setSelected([t.id])} />\n  <Map.Overlay position=\"top-left\">\n    <Map.Legend items={legend} selectionMode=\"single\" selectedIds={selected} onSelectedIdsChange={setSelected} />\n  </Map.Overlay>\n  <Map.Overlay position=\"bottom-left\">\n    <Map.BaseLayerSwitch />\n  </Map.Overlay>\n</Map.Root>",
+      "parts": [
+        {
+          "name": "Map.Root",
+          "description": "A MapLibre map styled and themed with the library tokens. Holds the base layer state and routes clicks\nand hovers to the data parts inside it. `Map.Root` › data parts (`Map.Areas`, `Map.Routes`,\n`Map.Points`) and `Map.Marker`s, with `Map.Overlay`s for legends, switches and cards on top.\nNeeds `@optimum-intelligence/opti-ui/map.css` imported; MapLibre's worker is set up for Vite apps.",
+          "propsType": "MapRootProps",
+          "props": [
+            {
+              "name": "ref",
+              "type": "React.Ref<MapRef>",
+              "required": false,
+              "description": "Ref to the map instance (`flyTo`, `getMap()`, …), set once the map has loaded MapLibre."
+            },
+            {
+              "name": "baseLayers",
+              "type": "MapBaseLayer[]",
+              "required": true,
+              "description": "Base maps to choose from. The first is shown unless `baseLayer` or `defaultBaseLayer` says otherwise."
+            },
+            {
+              "name": "baseLayer",
+              "type": "string",
+              "required": false,
+              "description": "Id of the shown base map (controlled)."
+            },
+            {
+              "name": "defaultBaseLayer",
+              "type": "string",
+              "required": false,
+              "description": "Id of the initially shown base map when uncontrolled."
+            },
+            {
+              "name": "onBaseLayerChange",
+              "type": "(id: string) => void",
+              "required": false,
+              "description": "Called with the base map id that `Map.BaseLayerSwitch` picked."
+            },
+            {
+              "name": "initialView",
+              "type": "MapView",
+              "required": false,
+              "description": "Starting camera, used until `fit` moves it."
+            },
+            {
+              "name": "fit",
+              "type": "MapFit",
+              "required": false,
+              "values": [
+                "data",
+                "selected",
+                "none"
+              ],
+              "description": "Zooms to the data (`data`) or to the selection, falling back to the data (`selected`). Data changes\nrefit until the user pans or zooms the map; selection changes always refit with `selected`.",
+              "default": "'data'"
+            },
+            {
+              "name": "labels",
+              "type": "Partial<MapLabels>",
+              "required": false,
+              "description": "Translations of the built-in texts; also passed to MapLibre's control strings."
+            },
+            {
+              "name": "controlsPosition",
+              "type": "ControlPosition | false",
+              "required": false,
+              "description": "Corner of the zoom buttons, or `false` to hide them.",
+              "default": "'top-right'"
+            },
+            {
+              "name": "expandable",
+              "type": "boolean",
+              "required": false,
+              "description": "Adds a button, next to the zoom buttons, that expands the map over the whole window (not browser\nfullscreen) above the page, at the dialog z-index. Escape or the button returns it.",
+              "default": "false"
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "description": "Classes for the map container. Set its height in CSS (`--oui-map-height`, default 24rem)."
+            },
+            {
+              "name": "style",
+              "type": "React.CSSProperties",
+              "required": false,
+              "description": "Inline styles for the map container."
+            },
+            {
+              "name": "children",
+              "type": "React.ReactNode",
+              "required": false,
+              "description": "Data parts (`Map.Routes`, `Map.Areas`, …), markers, popups and overlays."
+            }
+          ],
+          "extends": [
+            "Omit< MapProps, 'mapStyle' | 'initialViewState' | 'interactiveLayerIds' | 'cursor' | 'locale' | 'style' | 'children' | 'id' | 'attributionControl' | 'workerUrl' | 'mapLib' >"
+          ],
+          "example": "<Map.Root\n  baseLayers={[{ id: 'streets', label: 'Streets', style: 'https://tiles.openfreemap.org/styles/bright' }]}\n  initialView={{ longitude: 19.04, latitude: 47.5, zoom: 10 }}\n>\n  <Map.Routes\n    items={[{ id: 'trip-1', coordinates: [[19.0, 47.48], [19.08, 47.52]] }]}\n    selectedIds={selected}\n    onItemClick={(trip) => setSelected([trip.id])}\n  />\n  <Map.Marker kind=\"depot\" position={[19.0, 47.48]} />\n</Map.Root>"
+        },
+        {
+          "name": "Map.Routes",
+          "description": "Lines such as trips or tracks, drawn as one source with a casing, a solid and a dashed layer. Selected\nroutes get a halo in the surface colour; hover and selection use feature state, so they never rebuild\nthe data. Colours come from `color` or the chart palette.",
+          "propsType": "MapRoutesProps",
+          "props": [
+            {
+              "name": "items",
+              "type": "MapRouteItem[]",
+              "required": true,
+              "description": "Routes to draw. All of them go into one GeoJSON source, so thousands are fine."
+            },
+            {
+              "name": "selectedIds",
+              "type": "string[]",
+              "required": false,
+              "description": "Ids of selected routes. While it is not empty, other routes fade to `--oui-map-dim-opacity`."
+            },
+            {
+              "name": "onItemClick",
+              "type": "(item: MapRouteItem, event: MapLayerMouseEvent) => void",
+              "required": false,
+              "description": "Called with the clicked route."
+            },
+            {
+              "name": "onItemHover",
+              "type": "(item: MapRouteItem | null, event: MapLayerMouseEvent) => void",
+              "required": false,
+              "description": "Called with the route under the pointer, and with `null` when the pointer leaves it."
+            }
+          ],
+          "example": "<Map.Routes\n  items={trips.map((t) => ({ id: t.id, coordinates: t.path, dashed: t.planned }))}\n  selectedIds={selected}\n  onItemClick={(trip) => setSelected([trip.id])}\n/>"
+        },
+        {
+          "name": "Map.Areas",
+          "description": "Polygons such as fields, zones or service areas, as one fill and one outline layer. Selected and\nhovered areas get a heavier outline.",
+          "propsType": "MapAreasProps",
+          "props": [
+            {
+              "name": "items",
+              "type": "MapAreaItem[]",
+              "required": true,
+              "description": "Areas to draw, all in one GeoJSON source."
+            },
+            {
+              "name": "selectedIds",
+              "type": "string[]",
+              "required": false,
+              "description": "Ids of selected areas. While it is not empty, other areas fade to `--oui-map-dim-opacity`."
+            },
+            {
+              "name": "onItemClick",
+              "type": "(item: MapAreaItem, event: MapLayerMouseEvent) => void",
+              "required": false,
+              "description": "Called with the clicked area."
+            },
+            {
+              "name": "onItemHover",
+              "type": "(item: MapAreaItem | null, event: MapLayerMouseEvent) => void",
+              "required": false,
+              "description": "Called with the area under the pointer, and with `null` when the pointer leaves it."
+            }
+          ],
+          "example": "<Map.Areas items={fields.map((f) => ({ id: f.id, geometry: f.shape, tone: f.late ? 'warning' : 'success' }))} />"
+        },
+        {
+          "name": "Map.Points",
+          "description": "Many simple points (sensors, stops, events) as one circle layer. For a few dozen styled pins with HTML\ncontent, use `Map.Marker` instead.",
+          "propsType": "MapPointsProps",
+          "props": [
+            {
+              "name": "items",
+              "type": "MapPointItem[]",
+              "required": true,
+              "description": "Points to draw, all in one GeoJSON source and one circle layer."
+            },
+            {
+              "name": "selectedIds",
+              "type": "string[]",
+              "required": false,
+              "description": "Ids of selected points. While it is not empty, other points fade to `--oui-map-dim-opacity`."
+            },
+            {
+              "name": "onItemClick",
+              "type": "(item: MapPointItem, event: MapLayerMouseEvent) => void",
+              "required": false,
+              "description": "Called with the clicked point."
+            },
+            {
+              "name": "onItemHover",
+              "type": "(item: MapPointItem | null, event: MapLayerMouseEvent) => void",
+              "required": false,
+              "description": "Called with the point under the pointer, and with `null` when the pointer leaves it."
+            }
+          ],
+          "example": "<Map.Points items={sensors.map((s) => ({ id: s.id, coordinates: s.position, tone: s.ok ? 'success' : 'danger' }))} />"
+        },
+        {
+          "name": "Map.Marker",
+          "description": "An HTML pin at one position: numbered stops, depots, vehicles. Each marker is a DOM element, so use it\nfor dozens of pins, not thousands (use `Map.Points` for those).",
+          "propsType": "MapMarkerProps",
+          "props": [
+            {
+              "name": "position",
+              "type": "MapPosition",
+              "required": true,
+              "description": "`[longitude, latitude]` of the pin."
+            },
+            {
+              "name": "kind",
+              "type": "MapMarkerKind",
+              "required": false,
+              "values": [
+                "stop",
+                "depot",
+                "vehicle",
+                "point"
+              ],
+              "description": "Pin shape: a numbered `stop`, a `depot`, a `vehicle` or a small `point`.",
+              "default": "'stop'"
+            },
+            {
+              "name": "sequence",
+              "type": "number",
+              "required": false,
+              "description": "Number shown in a `stop` pin."
+            },
+            {
+              "name": "color",
+              "type": "string",
+              "required": false,
+              "description": "Any CSS colour for the pin. Wins over `tone`."
+            },
+            {
+              "name": "tone",
+              "type": "MapTone",
+              "required": false,
+              "values": [
+                "neutral",
+                "accent",
+                "success",
+                "warning",
+                "danger"
+              ],
+              "description": "Status colour for the pin."
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "required": false,
+              "description": "Accessible name and tooltip text. Depots default to the `depot` label."
+            },
+            {
+              "name": "selected",
+              "type": "boolean",
+              "required": false,
+              "description": "Marks the pin as selected (larger, with a ring)."
+            },
+            {
+              "name": "dimmed",
+              "type": "boolean",
+              "required": false,
+              "description": "Fades the pin to `--oui-map-dim-opacity`, e.g. for stops of trips that are not selected."
+            },
+            {
+              "name": "onClick",
+              "type": "() => void",
+              "required": false,
+              "description": "Called when the pin is clicked."
+            },
+            {
+              "name": "children",
+              "type": "React.ReactNode",
+              "required": false,
+              "description": "Custom pin content, replacing the built-in shape."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "description": "Classes for the pin element."
+            }
+          ],
+          "example": "<Map.Marker kind=\"stop\" sequence={3} position={[19.05, 47.5]} color={seriesColor(0)} />"
+        },
+        {
+          "name": "Map.Popup",
+          "description": "A popup anchored to a position, styled as a library card. Render it while something is selected and\nclose it from `onClose`.",
+          "propsType": "MapPopupProps",
+          "props": [
+            {
+              "name": "position",
+              "type": "MapPosition",
+              "required": true,
+              "description": "`[longitude, latitude]` the popup points at."
+            }
+          ],
+          "extends": [
+            "Omit<PopupProps, 'longitude' | 'latitude'>"
+          ],
+          "example": "{picked && (\n  <Map.Popup position={picked.position} onClose={() => setPicked(null)}>\n    <strong>{picked.name}</strong>\n  </Map.Popup>\n)}"
+        },
+        {
+          "name": "Map.Tooltip",
+          "description": "Hover content: a popup without a close button that stays open on map clicks. Show it from\n`onItemHover` and hide it when the item is `null`.",
+          "propsType": "MapPopupProps",
+          "props": [
+            {
+              "name": "position",
+              "type": "MapPosition",
+              "required": true,
+              "description": "`[longitude, latitude]` the popup points at."
+            }
+          ],
+          "extends": [
+            "Omit<PopupProps, 'longitude' | 'latitude'>"
+          ],
+          "example": "{hovered && <Map.Tooltip position={hovered.position}>{hovered.name}</Map.Tooltip>}"
+        },
+        {
+          "name": "Map.Overlay",
+          "description": "Content floating over a corner of the map: stat cards, selects, a legend or `Map.BaseLayerSwitch`.",
+          "propsType": "MapOverlayProps",
+          "props": [
+            {
+              "name": "ref",
+              "type": "React.Ref<HTMLDivElement>",
+              "required": false,
+              "description": "Ref to the overlay element."
+            },
+            {
+              "name": "position",
+              "type": "MapOverlayPosition",
+              "required": false,
+              "values": [
+                "top-left",
+                "top-right",
+                "bottom-left",
+                "bottom-right"
+              ],
+              "description": "Corner the overlay sits in. Overlays in the same corner as the zoom buttons cover them.",
+              "default": "'top-left'"
+            }
+          ],
+          "extends": [
+            "React.HTMLAttributes<HTMLDivElement>"
+          ]
+        },
+        {
+          "name": "Map.Legend",
+          "description": "The key to a map's colours, with optional selection and show/hide per entry. Plain DOM, so it also\nworks outside the map; inside `Map.Root` it takes the root's labels. Put it in a `Map.Overlay`.",
+          "propsType": "MapLegendProps",
+          "props": [
+            {
+              "name": "ref",
+              "type": "React.Ref<HTMLDivElement>",
+              "required": false,
+              "description": "Ref to the legend element."
+            },
+            {
+              "name": "items",
+              "type": "MapLegendItem[]",
+              "required": true,
+              "description": "Entries in order."
+            },
+            {
+              "name": "selectionMode",
+              "type": "MapLegendSelectionMode",
+              "required": false,
+              "values": [
+                "none",
+                "single",
+                "multi"
+              ],
+              "description": "Whether clicking an entry selects it: `single` keeps one, `multi` toggles each.",
+              "default": "'none'"
+            },
+            {
+              "name": "selectedIds",
+              "type": "string[]",
+              "required": false,
+              "description": "Ids of the selected entries (controlled).",
+              "default": "[]"
+            },
+            {
+              "name": "onSelectedIdsChange",
+              "type": "(ids: string[]) => void",
+              "required": false,
+              "description": "Called with the new selected ids."
+            },
+            {
+              "name": "onVisibilityChange",
+              "type": "(ids: string[], visible: boolean) => void",
+              "required": false,
+              "description": "Called with the ids to show or hide. Adds an eye button to every entry."
+            },
+            {
+              "name": "showAllToggle",
+              "type": "boolean",
+              "required": false,
+              "description": "Adds a show all / hide all button when `onVisibilityChange` is set.",
+              "default": "false"
+            }
+          ],
+          "extends": [
+            "Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>"
+          ],
+          "example": "<Map.Legend\n  items={trips.map((t, i) => ({ id: t.id, label: t.name, color: seriesColor(i), visible: !hidden.includes(t.id) }))}\n  selectionMode=\"multi\"\n  selectedIds={selected}\n  onSelectedIdsChange={setSelected}\n  onVisibilityChange={(ids, visible) => setHidden((h) => (visible ? h.filter((id) => !ids.includes(id)) : [...h, ...ids]))}\n  showAllToggle\n/>"
+        },
+        {
+          "name": "Map.BaseLayerSwitch",
+          "description": "Segmented switch between the root's `baseLayers` (e.g. streets and satellite). Put it in a `Map.Overlay`.",
+          "propsType": "MapBaseLayerSwitchProps",
+          "props": [
+            {
+              "name": "size",
+              "type": "ToggleSize",
+              "required": false,
+              "values": [
+                "sm",
+                "md"
+              ],
+              "description": "Segment height.",
+              "default": "'sm'"
+            },
+            {
+              "name": "variant",
+              "type": "'segmented' | 'outline'",
+              "required": false,
+              "values": [
+                "segmented",
+                "outline"
+              ],
+              "description": "`segmented` renders a pill track like a tab switcher; `outline` separate buttons."
+            },
+            {
+              "name": "fullWidth",
+              "type": "boolean",
+              "required": false,
+              "description": "Stretch segments to fill the width."
+            }
+          ],
+          "extends": [
+            "BaseToggleGroup.Props"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rasterStyle",
+      "kind": "function",
+      "category": "Maps",
+      "description": "Builds a MapLibre style from a raster tile URL template (`{z}`, `{x}`, `{y}`), for `MapBaseLayer.style`.",
+      "import": "import { rasterStyle } from '@optimum-intelligence/opti-ui/map';",
+      "signature": "rasterStyle(tiles: string | string[], attribution?: string, tileSize = 256)",
+      "example": "const satellite = rasterStyle('https://tiles.example.com/{z}/{x}/{y}.jpg', '© Example');"
+    },
+    {
+      "name": "useResolvedColors",
+      "kind": "hook",
+      "category": "Maps",
+      "description": "Resolves `--oui-*` colour tokens to `rgba()` strings inside `element`, for MapLibre paint properties,\nwhich accept no `var()` or `color-mix()`. It re-reads them when `data-oui-theme`, `class` or `style`\nchanges on the element or an ancestor (theme switches, `ThemeProvider`).\n`Map.Root` calls it for you; use it for your own `Source`/`Layer` children.",
+      "import": "import { useResolvedColors } from '@optimum-intelligence/opti-ui/map';",
+      "signature": "useResolvedColors(element: HTMLElement | null)"
     }
   ]
 }

package/dist/index.js

@@ -3,6 +3,7 @@
 import { usePortalContainer } from "./utils/portal.js";
 import { cx, withClass } from "./utils/cx.js";
 import { ThemeProvider, createTheme, themeToStyle } from "./theme/ThemeProvider.js";
+import { seriesColor } from "./theme/series.js";
 import { DateConfigProvider, useDateConfig } from "./components/calendar/DateConfig.js";
 import { ArrowDownIcon, ArrowUpIcon, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleCheckIcon, CircleIcon, CircleXIcon, ClockIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, InfoIcon, MenuIcon, MinusIcon, MoreHorizontalIcon, PencilIcon, PlusIcon, SearchIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleAlertIcon, UploadIcon, XIcon } from "./icons/index.js";
 import { AppShell, Grid, Navbar, NavbarBrand, NavbarFooter, NavbarGroup, NavbarHeader, NavbarItem, NavbarSection, NavbarSectionLabel, PageHeader } from "./components/app-shell/AppShell.js";
@@ -58,4 +59,4 @@ import { EmptyState } from "./components/empty-state/EmptyState.js";
 import { useDataTable } from "./components/data-table/useDataTable.js";
 import { DataTable } from "./components/data-table/DataTable.js";
 import { DescriptionItem, DescriptionList } from "./components/description-list/DescriptionList.js";
-export { Accordion, Alert, AlertDialog, AppShell, ArrowDownIcon, ArrowUpIcon, Avatar, AvatarGroup, Badge, Breadcrumb, Breadcrumbs, Button, Calendar, CalendarIcon, Card, CardActions, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleCheckIcon, CircleIcon, CircleXIcon, ClockIcon, Collapsible, Combobox, CommandPalette, ConfirmDialog, ContextMenu, DataTable, DateConfigProvider, DatePicker, DateRangePicker, DateTimePicker, DescriptionItem, DescriptionList, Dialog, DownloadIcon, Drawer, Dropzone, EmptyState, ExternalLinkIcon, EyeIcon, EyeOffIcon, Eyebrow, Field, Fieldset, FileIcon, FileItem, FileUpload, Form, Grid, Heading, IconButton, InfoIcon, Input, Link, Menu, MenuIcon, Meter, MinusIcon, MoreHorizontalIcon, Navbar, NavbarBrand, NavbarFooter, NavbarGroup, NavbarHeader, NavbarItem, NavbarSection, NavbarSectionLabel, NumberField, PageHeader, Pagination, PasswordField, PasswordInput, PencilIcon, PlusIcon, Popover, PreviewCard, Progress, Radio, RadioGroup, RangeCalendar, ScrollArea, SearchIcon, SearchInput, SegmentedControl, Select, Separator, Skeleton, SkeletonText, Slider, Spinner, Stack, StatCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Tag, Text, TextField, Textarea, TextareaField, ThemeProvider, ToastProvider, Toggle, ToggleGroup, Toolbar, Tooltip, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleAlertIcon, UploadIcon, XIcon, createTheme, createToastManager, cx, formatDate, formatFileSize, getPageItems, matchesQuery, normalizeText, themeToStyle, useDataTable, useDataTableContext, useDateConfig, usePortalContainer, useToast, withClass };
+export { Accordion, Alert, AlertDialog, AppShell, ArrowDownIcon, ArrowUpIcon, Avatar, AvatarGroup, Badge, Breadcrumb, Breadcrumbs, Button, Calendar, CalendarIcon, Card, CardActions, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleCheckIcon, CircleIcon, CircleXIcon, ClockIcon, Collapsible, Combobox, CommandPalette, ConfirmDialog, ContextMenu, DataTable, DateConfigProvider, DatePicker, DateRangePicker, DateTimePicker, DescriptionItem, DescriptionList, Dialog, DownloadIcon, Drawer, Dropzone, EmptyState, ExternalLinkIcon, EyeIcon, EyeOffIcon, Eyebrow, Field, Fieldset, FileIcon, FileItem, FileUpload, Form, Grid, Heading, IconButton, InfoIcon, Input, Link, Menu, MenuIcon, Meter, MinusIcon, MoreHorizontalIcon, Navbar, NavbarBrand, NavbarFooter, NavbarGroup, NavbarHeader, NavbarItem, NavbarSection, NavbarSectionLabel, NumberField, PageHeader, Pagination, PasswordField, PasswordInput, PencilIcon, PlusIcon, Popover, PreviewCard, Progress, Radio, RadioGroup, RangeCalendar, ScrollArea, SearchIcon, SearchInput, SegmentedControl, Select, Separator, Skeleton, SkeletonText, Slider, Spinner, Stack, StatCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Tag, Text, TextField, Textarea, TextareaField, ThemeProvider, ToastProvider, Toggle, ToggleGroup, Toolbar, Tooltip, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleAlertIcon, UploadIcon, XIcon, createTheme, createToastManager, cx, formatDate, formatFileSize, getPageItems, matchesQuery, normalizeText, seriesColor, themeToStyle, useDataTable, useDataTableContext, useDateConfig, usePortalContainer, useToast, withClass };