@optimum-intelligence/opti-ui 0.0.0-stage → 0.3.0

package/LICENSE

@@ -0,0 +1,23 @@
+Copyright (c) 2026 Optimum Intelligence. All rights reserved.
+
+PROPRIETARY LICENSE
+
+This software and associated files (the "Software") are the confidential and
+proprietary property of Optimum Intelligence ("Optimum"). The Software is
+published to a public registry for distribution convenience only; publication
+does not grant any license to the public.
+
+Permission to install, use, and modify the Software is granted solely to
+Optimum and to its employees and contractors acting on Optimum's behalf, for
+Optimum's internal business purposes and for products and services operated by
+Optimum.
+
+Without Optimum's prior written permission, you may not: (a) use the Software
+for any other purpose; (b) copy, redistribute, sublicense, sell, or publish the
+Software or any derivative of it; or (c) remove or alter this notice.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+OPTIMUM BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY ARISING FROM THE
+USE OF THE SOFTWARE.

package/README.md

@@ -1,3 +1,245 @@
-# Temporary Holding Version
+# Opti UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Optimum Intelligence's shared React component library. It is built on [Base UI](https://base-ui.com) for
+behaviour and accessibility, with a Poppins/Montserrat look: deep purple `#271645`, accent `#63537d`,
+soft tinted borders and rounded controls. Everything is themeable through CSS variables.
+
+## Showcase
+
+```sh
+npm ci
+npm run dev            # http://127.0.0.1:5173
+```
+
+The showcase covers every component with live examples, code snippets and prop tables, plus a dashboard
+example. **Customize** in the top bar re-themes the whole app live (mode, brand/accent colors,
+radius, button shape, typeface) and gives you the CSS to paste into your own app.
+
+```sh
+npm test               # typecheck, library build, smoke tests on dist/
+npm run build          # library → dist/ (ESM per module, opti-ui.css, .d.ts)
+npm run build:showcase # static showcase → showcase-dist/
+npm pack               # tarball for installing in other projects
+```
+
+## Using the package
+
+React 19 is a peer dependency; the build is precompiled with React Compiler. `@base-ui/react` is installed with the package.
+
+```tsx
+import '@optimum-intelligence/opti-ui/styles.css';
+import '@optimum-intelligence/opti-ui/fonts.css'; // optional: loads Poppins + Montserrat from Google Fonts
+import { Button, Card, CardTitle, ToastProvider, Tooltip } from '@optimum-intelligence/opti-ui';
+
+export function App() {
+  return (
+    <Tooltip.Provider>
+      <ToastProvider>
+        <Card>
+          <CardTitle>Monthly energy</CardTitle>
+          <Button>Export report</Button>
+        </Card>
+      </ToastProvider>
+    </Tooltip.Provider>
+  );
+}
+```
+
+Add `class="oui-root"` to `<body>` for the library font, text color and background. Add `oui-isolate`
+to your app root so portalled popups stack above app content. Every module has a `'use client'` banner,
+so the components work in Next.js App Router.
+
+### Components
+
+| Area | Components |
+| --- | --- |
+| Layout | `AppShell`, `Navbar` (+ `NavbarHeader/Brand/Section/SectionLabel/Item/Footer`), `PageHeader`, `Grid`, `Stack`, `Card` (+ parts), `StatCard`, `Separator`, `ScrollArea` |
+| Actions | `Button`, `IconButton`, `Toggle`, `ToggleGroup`, `SegmentedControl`, `Menu.*`, `ContextMenu.*`, `Toolbar.*` |
+| Forms | `Field.*`, `Fieldset.*`, `Form`, `Input`, `TextField`, `PasswordInput`, `PasswordField`, `Textarea`, `TextareaField`, `Select` (+ parts), `Combobox` (+ parts), `Checkbox`, `CheckboxGroup`, `Radio`, `RadioGroup`, `Switch`, `NumberField`, `Slider`, `SearchInput`, `DatePicker`, `DateTimePicker`, `DateRangePicker`, `Calendar`, `RangeCalendar`, `FileUpload`, `Dropzone`, `FileItem` |
+| Overlays | `Dialog.*` (modal, or a sheet with `placement`), `AlertDialog.*`, `Drawer` (detail side panel), `Popover.*`, `PreviewCard.*`, `Tooltip`, `ToastProvider` + `useToast()`, `CommandPalette` |
+| Disclosure & navigation | `Tabs.*`, `Accordion.*`, `Collapsible.*`, `Breadcrumbs` + `Breadcrumb`, `Pagination`, `Stepper` |
+| Feedback & data | `Alert`, `Badge`, `Tag`, `Avatar`, `AvatarGroup`, `Progress`, `Meter`, `Skeleton`, `SkeletonText`, `Spinner`, `Table` (+ parts), `DataTable`, `EmptyState`, `Heading`, `Text`, `Eyebrow`, `Link` |
+| Theme | `ThemeProvider`, `createTheme`, `themeToStyle`, icons (`CheckIcon`, `ChevronDownIcon`, …) |
+
+Components with a common one-line form can be called directly, and their parts are attached for full
+control: `<Select items={…} />` or `<Select.Root>…<Select.Trigger/>…</Select.Root>`; the same applies to
+`Combobox` and `Tooltip`. Compound components (`Dialog`, `Menu`, `Tabs`, …) mirror Base UI's part names,
+so the [Base UI docs](https://base-ui.com/react/overview/quick-start) apply to them directly.
+
+`DatePicker` and `DateTimePicker` use ISO strings as values (`"2026-03-09"`, `"2026-03-09T14:30"`), the
+same format as native date inputs; `DateRangePicker` uses `{ start, end }` with both days inclusive.
+Dates are displayed the same way in every locale, on a 24-hour clock: `2026-03-09 14:30:00` in fields
+(`formatDate`) and `2026. March 9. 14:30` where they are written out (`formatDateLong`); the locale only
+translates month and weekday names.
+
+`DataTable` handles search, filters, sorting, pagination, selection, row actions and inline editing for
+rows held in memory. Columns declare what they take part in:
+
+```tsx
+const columns: DataTableColumn<Driver>[] = [
+  { id: 'badge', header: 'Badge', mono: true, searchMode: 'exact' },
+  { id: 'name', header: 'Name', edit: 'text' },
+  { id: 'depot', header: 'Depot', filter: 'select', edit: { type: 'select', options: depots } },
+  { id: 'active', header: 'Active', filter: 'toggle', edit: 'checkbox', cell: (row) => <StatusBadge on={row.active} /> },
+  { id: 'hired', header: 'Hired', filter: 'dateRange' },
+  { id: 'notes', header: 'Notes', hidden: true }, // searched, not shown
+];
+
+<DataTable
+  data={drivers}
+  columns={columns}
+  locale="hu"
+  filters={[{ id: 'new', type: 'toggle', label: 'New this month', match: isNew }]}
+  rowActions={(row) => [{ label: 'Locate', icon: <MapPin />, onClick: () => locate(row) }]}
+  rowTone={(row) => (row.suspended ? 'danger' : undefined)}
+  onRowSave={(row) => api.saveDriver(row)}
+  onRowDelete={(row) => confirmDelete(row)}
+/>
+```
+
+A `select` filter collects its options from the rows unless you pass `options`; a `toggle` keeps truthy
+values, or the rows passing its `match`; a `dateRange` includes both of its days. `onRowSave` adds the
+edit action and receives the edited row: return a promise to keep the row open while it saves, and reject
+it to leave the row open for another try.
+
+Every piece of state (`search`, `filterValues`, `sort`, `page`, `pageSize`, `selection`) works
+uncontrolled, or controlled with its `on…Change` callback. With `mode="server"` the table renders the page
+it is given and reports those changes, so the API does the work; typing in the search box is debounced
+by 300 ms (`searchDebounce`). Pass `total`, `loading` and `error` alongside:
+
+```tsx
+<DataTable
+  mode="server"
+  data={data?.rows ?? []}
+  total={data?.total}
+  columns={columns}
+  loading={isFetching}
+  error={error?.message}
+  onRetry={refetch}
+  page={page}
+  onPageChange={setPage}
+  onSortChange={setSort}
+  onSearchChange={setSearch}
+  onFilterValuesChange={setFilters}
+/>
+```
+
+The table measures its columns once, with the longest values of all rows, and then holds their widths:
+paging, sorting, filtering and editing a row move nothing, and a short last page stays as tall as a full
+one. The widths are measured again when the table is resized. A column's `width` is a starting point and
+`minWidth` a floor; `truncate` cuts long text with an ellipsis instead of wrapping it. `layout="auto"`
+hands the widths back to the browser.
+
+For thousands of rows, `virtualized` renders only the ones in view inside `maxHeight` (default `32rem`)
+and turns pagination off. Rows are then one line high and every column fits its longest value, so mark
+long-text columns `truncate`. `onEndReached` loads more rows as the end is scrolled into view:
+
+```tsx
+<DataTable data={shipments} columns={columns} virtualized maxHeight={480} />
+
+<DataTable
+  mode="server"
+  data={rows}
+  total={total}
+  columns={columns}
+  loading={isFetchingNextPage}
+  paginated={false}
+  maxHeight={480}
+  onEndReached={fetchNextPage}
+/>
+```
+
+Rows of another height take `virtualized={{ rowHeight: 56 }}`. A row scrolled far out of view is
+unmounted, so focus inside it is lost; an edit in progress is kept and shows again when the row returns.
+
+For another layout, `useDataTable` takes the same options and returns the state and the processed rows,
+and the parts render it wherever you place them inside `DataTable.Root`:
+
+```tsx
+const table = useDataTable({ data, columns });
+
+<DataTable.Root table={table}>
+  <DataTable.Toolbar>
+    <DataTable.Search />
+    <DataTable.Filter id="depot" />
+    <DataTable.Actions>
+      <DataTable.Summary />
+      <Button onClick={() => exportCsv(table.rows.map(({ row }) => row))}>Export</Button>
+    </DataTable.Actions>
+  </DataTable.Toolbar>
+  <DataTable.Content density="compact" maxHeight={480} />
+  <DataTable.Pagination />
+</DataTable.Root>
+```
+
+`DataTable.Filters` renders every filter with a clear button, and `useDataTableContext()` gives your own
+components the same table.
+
+`FileUpload` collects `File` objects and leaves the upload to you; report its progress per file through
+`fileState`. Components with built-in text (`DataTable`, `Pagination`, `DatePicker`, `DateRangePicker`,
+`Calendar`, `FileUpload`, `Stepper`) take a `labels` prop for translation, and the date components take a
+`locale`.
+
+## Customization
+
+Start with the simplest option that does what you need:
+
+1. **Tokens.** Every color, radius, shadow, font, size and duration is a `--oui-*` custom property. Most
+   colors are derived from two inputs with `color-mix()`, so a product theme is often just two values:
+
+   ```css
+   :root {
+     --oui-color-brand: #0f2a44;  /* deep base: primary buttons, headings, navbar, muted text */
+     --oui-color-accent: #1f8fd6; /* focus rings, selection, borders, tints */
+   }
+   ```
+
+2. **Scoped themes.** `<ThemeProvider theme={{ 'color-accent': '#1f8fd6' }} mode="dark">` applies tokens to a
+   subtree. Popups opened inside are portalled into the provider, so they inherit the same theme. For
+   dark mode across the whole app, set `data-oui-theme="dark"` on `<html>`.
+3. **Component variables.** Use these per instance or globally, e.g. `--oui-button-radius`,
+   `--oui-button-height`, `--oui-input-height`, `--oui-card-padding`, `--oui-card-radius`,
+   `--oui-dialog-width`, `--oui-navbar-width`, `--oui-navbar-collapsed-width`, `--oui-switch-width`, `--oui-progress-height`.
+4. **Classes.** All library CSS is inside cascade layers (`oui.tokens < oui.base < oui.components`).
+   Any unlayered CSS in your app overrides it, whatever its specificity, so `!important` is never
+   needed. Every part has a stable class (`oui-select__trigger`, `oui-dialog__footer`, …).
+5. **State attributes.** Style states through Base UI's data attributes (`[data-checked]`,
+   `[data-popup-open]`, `[data-highlighted]`, …) and the library's own (`[data-variant]`, `[data-size]`,
+   `[data-tone]`). `className` also accepts a function of component state.
+6. **The render prop.** Swap the rendered element and keep the styles and behaviour:
+   `<NavbarItem render={<NavLink to="/fleet" />}>`,
+   `<Button render={<a href="…" />} nativeButton={false}>`.
+
+**Tailwind v4:** declare the layer order so utilities still win over library styles:
+`@layer theme, base, oui, components, utilities;`
+
+## Project layout
+
+```
+src/
+  styles/        tokens, layer order, shared Sass mixins, stylesheet entry
+  theme/         ThemeProvider, helpers
+  components/    one folder per component: Component.tsx + component.scss
+  icons/         small built-in icon set (stroke icons, currentColor)
+  utils/         class helpers, render-prop primitive, portal container
+showcase/        documentation app (consumes src/ directly)
+tests/           smoke tests against dist/
+```
+
+Conventions: kebab-case component folders, BEM-style `oui-block__element` classes, and variants as
+`data-*` attributes, never modifier classes. Private custom properties are prefixed `--_`; public
+ones `--oui-`.
+
+## Docker / Dokploy deployment
+
+The Docker image builds the static showcase and serves it with Nginx on port 80. It needs no
+environment variables or persistent storage.
+
+```sh
+docker build -t opti-ui-showcase .
+docker run --rm -p 8080:80 opti-ui-showcase   # http://localhost:8080
+```
+
+In Dokploy, create an **Application** for this repository, select the **Dockerfile** build type
+(path `Dockerfile`, context `.`), add a domain with container port `80`, and deploy. The image includes
+an HTTP health check.

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,17 @@
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+export interface AccordionRootProps extends BaseAccordion.Root.Props {
+    /** `separated` renders each item as its own card; `plain` uses dividers. */
+    variant?: 'separated' | 'plain';
+}
+declare function AccordionRoot({ variant, className, ref, ...props }: AccordionRootProps): import("react").JSX.Element;
+declare function AccordionItem({ className, ref, ...props }: BaseAccordion.Item.Props): import("react").JSX.Element;
+/** Header + trigger + chevron in one. */
+declare function AccordionTrigger({ className, children, ref, ...props }: BaseAccordion.Trigger.Props): import("react").JSX.Element;
+declare function AccordionPanel({ className, children, ref, ...props }: BaseAccordion.Panel.Props): import("react").JSX.Element;
+export declare const Accordion: {
+    Root: typeof AccordionRoot;
+    Item: typeof AccordionItem;
+    Trigger: typeof AccordionTrigger;
+    Panel: typeof AccordionPanel;
+};
+export {};

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,204 @@
+"use client";
+import { withClass } from "../../utils/cx.js";
+import { ChevronDownIcon } from "../../icons/index.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Accordion } from "@base-ui/react/accordion";
+//#region src/components/accordion/Accordion.tsx
+function AccordionRoot(t0) {
+	const $ = c(12);
+	let className;
+	let props;
+	let ref;
+	let t1;
+	if ($[0] !== t0) {
+		({variant: t1, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		t1 = $[4];
+	}
+	const variant = t1 === void 0 ? "plain" : t1;
+	let t2;
+	if ($[5] !== className) {
+		t2 = withClass("oui-accordion", className);
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== ref || $[9] !== t2 || $[10] !== variant) {
+		t3 = /* @__PURE__ */ jsx(Accordion.Root, {
+			ref,
+			className: t2,
+			"data-variant": variant,
+			...props
+		});
+		$[7] = props;
+		$[8] = ref;
+		$[9] = t2;
+		$[10] = variant;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+function AccordionItem(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = withClass("oui-accordion__item", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Accordion.Item, {
+			ref,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+/** Header + trigger + chevron in one. */
+function AccordionTrigger(t0) {
+	const $ = c(15);
+	let children;
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = withClass("oui-accordion__trigger", className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: "oui-accordion__trigger-label",
+			children
+		});
+		$[7] = children;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(ChevronDownIcon, { className: "oui-accordion__chevron" });
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== props || $[11] !== ref || $[12] !== t1 || $[13] !== t2) {
+		t4 = /* @__PURE__ */ jsx(Accordion.Header, {
+			className: "oui-accordion__header",
+			children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+				ref,
+				className: t1,
+				...props,
+				children: [t2, t3]
+			})
+		});
+		$[10] = props;
+		$[11] = ref;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
+}
+function AccordionPanel(t0) {
+	const $ = c(14);
+	let children;
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = withClass("oui-accordion__panel", className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: "oui-accordion__content",
+			children
+		});
+		$[7] = children;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== props || $[10] !== ref || $[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Accordion.Panel, {
+			ref,
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[9] = props;
+		$[10] = ref;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
+}
+var Accordion$1 = {
+	Root: AccordionRoot,
+	Item: AccordionItem,
+	Trigger: AccordionTrigger,
+	Panel: AccordionPanel
+};
+//#endregion
+export { Accordion$1 as Accordion };
+
+//# sourceMappingURL=Accordion.js.map

package/dist/components/accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","names":["Accordion","BaseAccordion","withClass","ChevronDownIcon","AccordionRootProps","Root","Props","variant","AccordionRoot","t0","$","_c","className","props","ref","t1","undefined","t2","t3","AccordionItem","AccordionTrigger","children","Symbol","for","t4","AccordionPanel","Item","Trigger","Panel","_c","BaseAccordion","Accordion"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { Accordion as BaseAccordion } from '@base-ui/react/accordion';\nimport { withClass } from '../../utils/cx';\nimport { ChevronDownIcon } from '../../icons';\n\nexport interface AccordionRootProps extends BaseAccordion.Root.Props {\n  /** `separated` renders each item as its own card; `plain` uses dividers. */\n  variant?: 'separated' | 'plain';\n}\n\nfunction AccordionRoot({ variant = 'plain', className, ref, ...props }: AccordionRootProps) {\n  return (\n    <BaseAccordion.Root ref={ref} className={withClass('oui-accordion', className)} data-variant={variant} {...props} />\n  );\n}\n\nfunction AccordionItem({ className, ref, ...props }: BaseAccordion.Item.Props) {\n  return <BaseAccordion.Item ref={ref} className={withClass('oui-accordion__item', className)} {...props} />;\n}\n\n/** Header + trigger + chevron in one. */\nfunction AccordionTrigger({ className, children, ref, ...props }: BaseAccordion.Trigger.Props) {\n  return (\n    <BaseAccordion.Header className=\"oui-accordion__header\">\n      <BaseAccordion.Trigger ref={ref} className={withClass('oui-accordion__trigger', className)} {...props}>\n        <span className=\"oui-accordion__trigger-label\">{children}</span>\n        <ChevronDownIcon className=\"oui-accordion__chevron\" />\n      </BaseAccordion.Trigger>\n    </BaseAccordion.Header>\n  );\n}\n\nfunction AccordionPanel({ className, children, ref, ...props }: BaseAccordion.Panel.Props) {\n  return (\n    <BaseAccordion.Panel ref={ref} className={withClass('oui-accordion__panel', className)} {...props}>\n      <div className=\"oui-accordion__content\">{children}</div>\n    </BaseAccordion.Panel>\n  );\n}\n\nexport const Accordion = {\n  Root: AccordionRoot,\n  Item: AccordionItem,\n  Trigger: AccordionTrigger,\n  Panel: AccordionPanel,\n};\n"],"mappings":"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"}

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export type AlertTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    ref?: React.Ref<HTMLDivElement>;
+    tone?: AlertTone;
+    /** `soft` (tinted, default) or `outline`. */
+    variant?: 'soft' | 'outline';
+    title?: React.ReactNode;
+    /** Custom icon, or `false` to hide it. */
+    icon?: React.ReactNode | false;
+    /** Buttons rendered after the message. */
+    actions?: React.ReactNode;
+    /** Shows a dismiss button. */
+    onDismiss?: () => void;
+    dismissLabel?: string;
+}
+/** Inline message for page- or section-level feedback. */
+export declare function Alert({ tone, variant, title, icon, actions, onDismiss, dismissLabel, className, children, ref, ...props }: AlertProps): React.JSX.Element;

package/dist/components/alert/Alert.js

@@ -0,0 +1,164 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon, XIcon } from "../../icons/index.js";
+import { IconButton } from "../button/Button.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/alert/Alert.tsx
+var defaultIcons = {
+	info: /* @__PURE__ */ jsx(InfoIcon, {}),
+	neutral: /* @__PURE__ */ jsx(InfoIcon, {}),
+	success: /* @__PURE__ */ jsx(CircleCheckIcon, {}),
+	warning: /* @__PURE__ */ jsx(TriangleAlertIcon, {}),
+	danger: /* @__PURE__ */ jsx(CircleXIcon, {})
+};
+/** Inline message for page- or section-level feedback. */
+function Alert(t0) {
+	const $ = c(39);
+	let actions;
+	let children;
+	let className;
+	let icon;
+	let onDismiss;
+	let props;
+	let ref;
+	let t1;
+	let t2;
+	let t3;
+	let title;
+	if ($[0] !== t0) {
+		({tone: t1, variant: t2, title, icon, actions, onDismiss, dismissLabel: t3, className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = actions;
+		$[2] = children;
+		$[3] = className;
+		$[4] = icon;
+		$[5] = onDismiss;
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = title;
+	} else {
+		actions = $[1];
+		children = $[2];
+		className = $[3];
+		icon = $[4];
+		onDismiss = $[5];
+		props = $[6];
+		ref = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		t3 = $[10];
+		title = $[11];
+	}
+	const tone = t1 === void 0 ? "info" : t1;
+	const variant = t2 === void 0 ? "soft" : t2;
+	const dismissLabel = t3 === void 0 ? "Dismiss" : t3;
+	const urgent = tone === "danger" || tone === "warning";
+	const iconNode = icon === false ? null : icon ?? defaultIcons[tone];
+	const t4 = urgent ? "alert" : "status";
+	let t5;
+	if ($[12] !== className) {
+		t5 = cx("oui-alert", className);
+		$[12] = className;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== iconNode) {
+		t6 = iconNode && /* @__PURE__ */ jsx("span", {
+			className: "oui-alert__icon",
+			children: iconNode
+		});
+		$[14] = iconNode;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== title) {
+		t7 = title && /* @__PURE__ */ jsx("p", {
+			className: "oui-alert__title",
+			children: title
+		});
+		$[16] = title;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== children) {
+		t8 = children && /* @__PURE__ */ jsx("div", {
+			className: "oui-alert__message",
+			children
+		});
+		$[18] = children;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== actions) {
+		t9 = actions && /* @__PURE__ */ jsx("div", {
+			className: "oui-alert__actions",
+			children: actions
+		});
+		$[20] = actions;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: "oui-alert__body",
+			children: [
+				t7,
+				t8,
+				t9
+			]
+		});
+		$[22] = t7;
+		$[23] = t8;
+		$[24] = t9;
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	if ($[26] !== dismissLabel || $[27] !== onDismiss) {
+		t11 = onDismiss && /* @__PURE__ */ jsx(IconButton, {
+			className: "oui-alert__dismiss",
+			size: "sm",
+			"aria-label": dismissLabel,
+			onClick: onDismiss,
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		});
+		$[26] = dismissLabel;
+		$[27] = onDismiss;
+		$[28] = t11;
+	} else t11 = $[28];
+	let t12;
+	if ($[29] !== props || $[30] !== ref || $[31] !== t10 || $[32] !== t11 || $[33] !== t4 || $[34] !== t5 || $[35] !== t6 || $[36] !== tone || $[37] !== variant) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			ref,
+			role: t4,
+			className: t5,
+			"data-tone": tone,
+			"data-variant": variant,
+			...props,
+			children: [
+				t6,
+				t10,
+				t11
+			]
+		});
+		$[29] = props;
+		$[30] = ref;
+		$[31] = t10;
+		$[32] = t11;
+		$[33] = t4;
+		$[34] = t5;
+		$[35] = t6;
+		$[36] = tone;
+		$[37] = variant;
+		$[38] = t12;
+	} else t12 = $[38];
+	return t12;
+}
+//#endregion
+export { Alert };
+
+//# sourceMappingURL=Alert.js.map