@veevarts/design-system 1.17.0-beta.6 → 1.17.0-beta.7

package/dist/patterns/AdminTable/AdminTable.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+import { TableBody } from '../../components';
+export interface AdminTableColumn {
+    /** Stable identity for the column, and the key its cells are matched on. */
+    key: string;
+    /** Header text. Pass an empty string for a control column. */
+    label: React.ReactNode;
+    /** Cell alignment. Numeric columns should be `'right'`. */
+    align?: 'left' | 'right';
+    /** Fixed pixel width. Omit to let the column size to content. */
+    width?: number;
+}
+export interface AdminTableClassNames {
+    base?: string;
+    table?: string;
+    th?: string;
+    tr?: string;
+    td?: string;
+    footer?: string;
+}
+export interface AdminTableProps {
+    columns: AdminTableColumn[];
+    /**
+     * HeroUI `TableRow` children.
+     *
+     * Typed as HeroUI's own body-children type rather than `ReactNode`, so the
+     * collection contract is enforced where you write it: passing a bare `<tr>`
+     * is a type error here instead of `Unknown element <tr> in collection` at
+     * render time.
+     */
+    children: React.ComponentProps<typeof TableBody>['children'];
+    /** Shown when there are no rows. */
+    emptyContent?: React.ReactNode;
+    /** Rendered under the table — where a pager goes. */
+    footer?: React.ReactNode;
+    /** Accessible name. Required: a table with no name is unnavigable by screen reader. */
+    ariaLabel: string;
+    className?: string;
+    classNames?: AdminTableClassNames;
+    'data-testid'?: string;
+}
+export declare const AdminTable: React.FC<AdminTableProps>;

package/dist/patterns/AdminTable/index.d.ts

@@ -0,0 +1,3 @@
+export { AdminTable } from './AdminTable';
+export type { AdminTableProps, AdminTableColumn, AdminTableClassNames } from './AdminTable';
+export { adminRowClass, adminTableClass, adminTableFooterClass, adminTdClass, adminThClass, } from './styles';

package/dist/patterns/AdminTable/styles.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The back-office table's appearance, in one place.
+ *
+ * `AdminTable` feeds these to HeroUI's slots; nothing here is spelled a second
+ * time inside the component. They started out split — exported strings here,
+ * "internal" ones inline — and the two immediately drifted: `adminTdClass` and
+ * the `td` slot were the same declaration with one dropping `align-middle`, and
+ * the row hover existed as both `hover:` and `data-[hover=true]:`. That is the
+ * exact failure these components were built to stop, so the split is gone.
+ *
+ * They are exported for the one screen that cannot use `AdminTable`: react-aria's
+ * collection API rejects an interleaved `<tr>`, so a table that expands a row
+ * into a full-width panel renders its own `<table>` and dresses it with these.
+ *
+ * The arbitrary values (`text-[11px]`, `tracking-[.04em]`) are the mockups'
+ * measurements, pinned rather than rounded to the nearest scale step: these
+ * surfaces are pixel-ports of signed-off designs.
+ */
+/** Uppercase column header. `bg-transparent` overrides HeroUI's own header fill. */
+export declare const adminThClass = "text-left text-[11px] font-semibold uppercase tracking-[.04em] text-acct-muted px-4 pt-4 pb-3 whitespace-nowrap bg-transparent";
+/** Body cell. */
+export declare const adminTdClass = "px-4 text-[13.5px] text-acct-ink2 align-middle";
+/**
+ * Row hairline and hover.
+ *
+ * Carries both hover spellings on purpose: `data-[hover=true]:` is what HeroUI
+ * sets on its own rows, and `hover:` is what a plain `<tr>` responds to. One
+ * string serves both so the two renderings cannot look different.
+ */
+export declare const adminRowClass = "border-t border-acct-hair transition-colors duration-150 hover:bg-acct-page data-[hover=true]:bg-acct-page";
+/** The table element itself. */
+export declare const adminTableClass = "w-full";
+/** The strip under the table where a pager sits. */
+export declare const adminTableFooterClass = "border-t border-acct-border px-5 py-3.5";

package/dist/patterns/AdminTextField/AdminTextField.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+interface AdminTextFieldBase {
+    /** Uppercase label above the control. Omit only when an adjacent element already names it. */
+    label?: React.ReactNode;
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Monospace face without the read-only treatment, for codes the user types. */
+    mono?: boolean;
+    /** Claim initial focus. Only for the first field of a dialog, never on a page. */
+    autoFocus?: boolean;
+    /** Small helper or error text under the control. */
+    hint?: React.ReactNode;
+    /** Renders the hint as an error and marks the control invalid. */
+    invalid?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * `onChange` is REQUIRED unless the field is read-only.
+ *
+ * This is a controlled input: given a `value` and no handler, React pins it and
+ * typing does nothing — a field that looks editable, accepts focus, and silently
+ * discards every keystroke. That is indistinguishable from a bug at a glance,
+ * and it is what happens by accident when someone renders one to show a value.
+ *
+ * Showing a value without accepting edits is a real case, so it stays possible;
+ * it just has to be said, with `readOnly`, which also renders it as system-owned
+ * and announces it correctly.
+ */
+export type AdminTextFieldProps = AdminTextFieldBase & ({
+    readOnly: true;
+    onChange?: never;
+} | {
+    readOnly?: false;
+    onChange: (value: string) => void;
+});
+export declare const AdminTextField: React.FC<AdminTextFieldProps>;
+export {};

package/dist/patterns/AdminTextField/index.d.ts

@@ -0,0 +1,3 @@
+export { AdminTextField } from './AdminTextField';
+export type { AdminTextFieldProps } from './AdminTextField';
+export { adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';

package/dist/patterns/AdminTextField/styles.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The back-office field's appearance, in one place.
+ *
+ * `AdminTextField` feeds these to HeroUI's `Input` slots; nothing here is
+ * spelled a second time inside the component. Splitting them — exported strings
+ * here, "internal" ones inline — is what let this file and its component drift
+ * apart, so every slot's styling lives here whether or not a consumer needs it.
+ *
+ * They are exported so a form with a control this component does not cover (a
+ * textarea, a date picker) can dress its HeroUI counterpart identically rather
+ * than approximating it.
+ *
+ * The arbitrary values are the mockups' measurements, pinned rather than rounded
+ * to the nearest scale step: these surfaces are pixel-ports of signed-off
+ * designs.
+ */
+/** Uppercase label above a control — HeroUI's `label` slot. */
+export declare const adminFieldLabelClass = "text-[11px] font-semibold uppercase tracking-[.04em] text-acct-muted mb-1.5";
+/**
+ * The 38px box — HeroUI's `inputWrapper` slot, which carries the border and
+ * background (the `input` slot is the bare field).
+ *
+ * `!h-[38px]` because HeroUI sets its own height per size, and the
+ * `data-[hover=]` / `group-data-[focus=]` hooks because overriding the plain
+ * classes alone leaves its own hover and focus borders showing through.
+ */
+export declare const adminInputWrapperClass: string;
+/** The bare field — HeroUI's `input` slot. */
+export declare const adminInputClass = "text-[13.5px] text-acct-ink";
+/** A value the system minted rather than the user: muted fill, not editable. */
+export declare const adminInputReadOnlyClass = "bg-acct-page text-acct-muted cursor-default";
+/** Helper text under the control — HeroUI's `description` slot. */
+export declare const adminFieldHintClass = "mt-[5px] text-xs text-acct-sub";
+/** Error text under the control — HeroUI's `errorMessage` slot. */
+export declare const adminFieldErrorClass = "mt-[5px] text-xs text-acct-danger";

package/dist/patterns/AdminToolbar/AdminToolbar.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface AdminToolbarProps {
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    /** Placeholder AND the hidden label, so the field is named even once filled. */
+    searchLabel: string;
+    /** Leading glyph inside the search box. */
+    searchIcon?: React.ReactNode;
+    /** Filters, sort pickers, a toggle — laid out after the search box. */
+    children?: React.ReactNode;
+    /** Pushed to the far right, for a primary action. */
+    trailing?: React.ReactNode;
+    /** Search box width. `'md'` (280px) by default, `'lg'` (360px) for wide tables. */
+    searchWidth?: 'md' | 'lg';
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const AdminToolbar: React.FC<AdminToolbarProps>;

package/dist/patterns/AdminToolbar/index.d.ts

@@ -0,0 +1,2 @@
+export { AdminToolbar } from './AdminToolbar';
+export type { AdminToolbarProps } from './AdminToolbar';

package/dist/patterns/DimensionChip/index.d.ts

@@ -1,2 +1,13 @@
-export { DimensionChip } from './DimensionChip';
-export type { DimensionChipProps } from './DimensionChip';
+/**
+ * @deprecated Use `KeyValueChip`. Same component, domain-neutral name.
+ *
+ * It shipped named after the accounting ledger's cost-center tags, which is
+ * what it was first built for and not what it is: it only ever knew
+ * "label: value", never what a dimension was. The name is what kept every
+ * other team from reaching for it.
+ *
+ * Kept as an alias so consumers on 1.21+ do not break. Remove on the next
+ * major, once the remaining imports have moved.
+ */
+export { KeyValueChip as DimensionChip } from '../KeyValueChip';
+export type { KeyValueChipProps as DimensionChipProps } from '../KeyValueChip';

package/dist/patterns/InstallmentFundAssignment/InstallmentFundAssignment.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
 import { InstallmentFundAssignmentProps } from './types';
-export declare function InstallmentFundAssignment({ assignments, funds, labels: customLabels, classNames, isSaving, hasSavedAssignments, isFundPickerOpen, activeAssignmentId, footer, onAssignmentsChange, onOpenFundPicker, onCloseFundPicker, onCollapseChange, onSave, }: InstallmentFundAssignmentProps): JSX.Element;
+export declare function InstallmentFundAssignment({ assignments, funds, labels: customLabels, classNames, isSaving, hasSavedAssignments, isFundPickerOpen, activeAssignmentId, modalPortalContainer, footer, onAssignmentsChange, onOpenFundPicker, onCloseFundPicker, onCollapseChange, onSave, }: InstallmentFundAssignmentProps): JSX.Element;

package/dist/patterns/InstallmentFundAssignment/types.d.ts

@@ -57,6 +57,7 @@ export type InstallmentFundAssignmentProps = {
     hasSavedAssignments?: boolean;
     isFundPickerOpen?: boolean;
     activeAssignmentId?: string | null;
+    modalPortalContainer?: Element;
     footer?: ReactNode;
     onModeChange?: (mode: InstallmentFundAssignmentMode) => void;
     onAssignmentsChange: (assignments: InstallmentFundAssignmentEntry[]) => void;

package/dist/patterns/InstallmentSchedule/InstallmentTable.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
 import { InstallmentTableProps } from './types';
-export declare function InstallmentTable({ installments, currency, locale, showTitle, showCard, showEditPayment, labels: customLabels, isSaving, onEditInstallments, onPayInstallment, onDeleteInstallment, }: InstallmentTableProps): JSX.Element;
+export declare function InstallmentTable({ installments, currency, locale, showTitle, showCard, showEditPayment, showDelete, payNowHiddenStatuses, labels: customLabels, isSaving, onEditInstallments, onPayInstallment, onDeleteInstallment, }: InstallmentTableProps): JSX.Element;

package/dist/patterns/InstallmentSchedule/types.d.ts

@@ -109,6 +109,18 @@ export type InstallmentTableProps = {
     showTitle?: boolean;
     showCard?: boolean;
     showEditPayment?: boolean;
+    /**
+     * FR-1619 — when `false`, the delete action inside the row-actions
+     * dropdown is not rendered. Defaults to `true` (backward-compatible).
+     */
+    showDelete?: boolean;
+    /**
+     * FR-1619 — statuses for which the Pay Now button is NOT rendered on a row.
+     * Typed with the `InstallmentStatus` union so consumers get compile-time
+     * safety on status keys. The pre-existing `paid` disabled guard still
+     * applies to any Pay Now button that IS rendered. Defaults to `[]`.
+     */
+    payNowHiddenStatuses?: InstallmentStatus[];
     labels?: InstallmentTableLabels;
     isSaving?: boolean;
     onEditInstallments: () => void;

package/dist/patterns/{DimensionChip/DimensionChip.d.ts → KeyValueChip/KeyValueChip.d.ts}

@@ -1,12 +1,12 @@
 import { default as React } from 'react';
-export interface DimensionChipProps {
-    /** Muted leading text — the category/type (e.g. a dimension-type name). */
+export interface KeyValueChipProps {
+    /** Muted leading text — what the value describes (a field, category or type name). */
     label: React.ReactNode;
-    /** Emphasised trailing text — the selected value. */
+    /** Emphasised trailing text — the value itself. */
     value: React.ReactNode;
     /** Chip size. `'sm'` (default) for dense tables, `'md'` for detail panels. */
     size?: 'sm' | 'md';
     className?: string;
     'data-testid'?: string;
 }
-export declare const DimensionChip: React.FC<DimensionChipProps>;
+export declare const KeyValueChip: React.FC<KeyValueChipProps>;

package/dist/patterns/KeyValueChip/index.d.ts

@@ -0,0 +1,2 @@
+export { KeyValueChip } from './KeyValueChip';
+export type { KeyValueChipProps } from './KeyValueChip';

package/dist/patterns/PaginationSummary/PaginationSummary.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+export interface PaginationSummaryClassNames {
+    base?: string;
+    emphasis?: string;
+}
+export interface PaginationSummaryProps {
+    /** Current page, 1-based. */
+    page: number;
+    /** Rows per page. */
+    pageSize: number;
+    /** Total rows across all pages, not the length of the current page. */
+    total: number;
+    /** What is being counted, already pluralised (e.g. `"entries"`). */
+    unit?: React.ReactNode;
+    /**
+     * Announce range changes to assistive tech. On by default: paging is a
+     * user-initiated change whose only text confirmation is this line. Turn it
+     * off when the surrounding table already announces its own updates, to
+     * avoid reading the change twice.
+     */
+    announce?: boolean;
+    className?: string;
+    classNames?: PaginationSummaryClassNames;
+    'data-testid'?: string;
+}
+export declare const PaginationSummary: React.FC<PaginationSummaryProps>;

package/dist/patterns/PaginationSummary/index.d.ts

@@ -0,0 +1,3 @@
+export { PaginationSummary } from './PaginationSummary';
+export type { PaginationSummaryProps, PaginationSummaryClassNames } from './PaginationSummary';
+export { pageRange } from './page-range';

package/dist/patterns/PaginationSummary/page-range.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The inclusive 1-based range covered by the current page.
+ *
+ * Its own module rather than a second export from `PaginationSummary.tsx`, so
+ * that file exports only its component (`react-refresh/only-export-components`).
+ * It is exported at all because the arithmetic, not the markup, is what callers
+ * reuse: one rendering its own sentence (another language, another emphasis)
+ * should not have to restate the edge cases.
+ *
+ * - No rows at all → `0–0`, so the caller can render "0 of 0" rather than the
+ *   `1–0` that the naive formula produces.
+ * - Last page → `to` is clamped to `total`, never `page * pageSize`.
+ * - `page` past the end (a filter that shrank the result set before the page
+ *   state caught up) → an empty range rather than a negative one.
+ */
+export declare function pageRange(page: number, pageSize: number, total: number): {
+    from: number;
+    to: number;
+};

package/dist/patterns/PickerRow/PickerRow.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface PickerRowProps {
+    /** Rendered inside the trigger when a value is set. Omit for the empty state. */
+    children?: React.ReactNode;
+    /** Shown when there is no value. */
+    placeholder?: string;
+    /** Opens the picker. */
+    onOpen: () => void;
+    /** Clears the value. Omitted or undefined hides the clear button entirely. */
+    onClear?: () => void;
+    /**
+     * Accessible name for the trigger. Say what is being picked, not what is
+     * picked: "Revenue account" reads better than repeating the value, which the
+     * content already announces.
+     */
+    ariaLabel: string;
+    /** Leading glyph. Pass an inline SVG. */
+    icon?: React.ReactNode;
+    /** Trailing affordance, normally a chevron. Pass an inline SVG. */
+    trailingIcon?: React.ReactNode;
+    /** Glyph for the clear button. Pass an inline SVG. */
+    clearIcon?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const PickerRow: React.FC<PickerRowProps>;

package/dist/patterns/PickerRow/index.d.ts

@@ -0,0 +1,2 @@
+export { PickerRow } from './PickerRow';
+export type { PickerRowProps } from './PickerRow';

package/dist/patterns/RowActions/RowActions.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface RowAction {
+    key: string;
+    /** Accessible name AND tooltip. Include the subject: "Edit Annual Fund", not "Edit". */
+    label: string;
+    icon: React.ReactNode;
+    onPress: () => void;
+    disabled?: boolean;
+}
+export interface RowActionsProps {
+    actions: RowAction[];
+    /** Button edge length. `'md'` (30px) by default, `'sm'` (24px) for dense rows. */
+    size?: 'sm' | 'md';
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const RowActions: React.FC<RowActionsProps>;

package/dist/patterns/RowActions/index.d.ts

@@ -0,0 +1,2 @@
+export { RowActions } from './RowActions';
+export type { RowActionsProps, RowAction } from './RowActions';

package/dist/patterns/TableSkeleton/TableSkeleton.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+export interface TableSkeletonClassNames {
+    base?: string;
+    row?: string;
+    bar?: string;
+}
+export interface TableSkeletonProps {
+    /**
+     * One entry per column, giving that column's bar width.
+     *
+     * A number is a pixel width; `'fill'` makes the column take the remaining
+     * space, for the one text column that should stretch. Widths approximating
+     * the real content are what stop the layout shifting on load.
+     */
+    columns: Array<number | 'fill'>;
+    /** How many placeholder rows to draw. Default 6. */
+    rows?: number;
+    /**
+     * Announced while loading. Give it something specific ("Loading
+     * dimensions"); it is the only thing a screen reader gets from this
+     * component, since the bars themselves are hidden.
+     */
+    label?: string;
+    /** Height of each bar in pixels. Default 12. */
+    barHeight?: number;
+    /** Right-aligns the last column's bar, for a trailing numeric or actions column. */
+    alignLastRight?: boolean;
+    className?: string;
+    classNames?: TableSkeletonClassNames;
+    'data-testid'?: string;
+}
+export declare const TableSkeleton: React.FC<TableSkeletonProps>;

package/dist/patterns/TableSkeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { TableSkeleton } from './TableSkeleton';
+export type { TableSkeletonProps, TableSkeletonClassNames } from './TableSkeleton';

package/dist/patterns/UnderlineTabs/UnderlineTabs.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface UnderlineTabItem<K extends string = string> {
+    key: K;
+    label: React.ReactNode;
+}
+export interface UnderlineTabsProps<K extends string = string> {
+    items: UnderlineTabItem<K>[];
+    value: K;
+    onChange: (key: K) => void;
+    /** Names the tablist. Required — an unnamed tablist gives no context. */
+    ariaLabel: string;
+    className?: string;
+    'data-testid'?: string;
+}
+export declare function UnderlineTabs<K extends string = string>({ items, value, onChange, ariaLabel, className, 'data-testid': dataTestId, }: UnderlineTabsProps<K>): import("react/jsx-runtime").JSX.Element;
+export declare namespace UnderlineTabs {
+    var displayName: string;
+}

package/dist/patterns/UnderlineTabs/index.d.ts

@@ -0,0 +1,2 @@
+export { UnderlineTabs } from './UnderlineTabs';
+export type { UnderlineTabsProps, UnderlineTabItem } from './UnderlineTabs';

package/dist/patterns/grid-columns.d.ts

@@ -1,6 +1,6 @@
 /**
  * Shared responsive grid-column class maps for the card-picker patterns
- * (TileSelect single-select, CheckboxCardGroup multi-select). Kept in one
+ * (TileSelect, and previously CheckboxCardGroup). Kept in one
  * place so the two siblings never drift on breakpoints or column counts.
  *
  * The literal Tailwind classes must stay spelled out (not interpolated) so

package/dist/patterns/index.d.ts

@@ -45,10 +45,26 @@ export { PageHeader } from './PageHeader';
 export type { PageHeaderProps, PageHeaderClassNames } from './PageHeader';
 export { StatusChip } from './StatusChip';
 export type { StatusChipProps, StatusChipStatus } from './StatusChip';
+export { KeyValueChip } from './KeyValueChip';
+export type { KeyValueChipProps } from './KeyValueChip';
 export { DimensionChip } from './DimensionChip';
 export type { DimensionChipProps } from './DimensionChip';
-export { CheckboxCardGroup } from './CheckboxCardGroup';
-export type { CheckboxCardGroupProps, CheckboxCardOption } from './CheckboxCardGroup';
+export { TableSkeleton } from './TableSkeleton';
+export type { TableSkeletonProps, TableSkeletonClassNames } from './TableSkeleton';
+export { AdminTable, adminRowClass, adminTableClass, adminTableFooterClass, adminTdClass, adminThClass, } from './AdminTable';
+export type { AdminTableProps, AdminTableColumn, AdminTableClassNames } from './AdminTable';
+export { AdminToolbar } from './AdminToolbar';
+export type { AdminToolbarProps } from './AdminToolbar';
+export { UnderlineTabs } from './UnderlineTabs';
+export type { UnderlineTabsProps, UnderlineTabItem } from './UnderlineTabs';
+export { AdminTextField, adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './AdminTextField';
+export type { AdminTextFieldProps } from './AdminTextField';
+export { RowActions } from './RowActions';
+export type { RowActionsProps, RowAction } from './RowActions';
+export { PickerRow } from './PickerRow';
+export type { PickerRowProps } from './PickerRow';
+export { PaginationSummary, pageRange } from './PaginationSummary';
+export type { PaginationSummaryProps, PaginationSummaryClassNames } from './PaginationSummary';
 export { ListPanel } from './ListPanel';
 export type { ListPanelProps, ListPanelClassNames } from './ListPanel';
 export { CashTenderForm } from './CashTenderForm';

package/dist/tailwind/index.d.ts

@@ -2,6 +2,7 @@ import { colors } from '../tokens/colors';
 import { typography } from '../tokens/typography';
 import { spacing } from '../tokens/spacing';
 export { colors, typography, spacing };
+export { adminSurfaceCss, adminSurfaceTokens, adminSurfaceTailwindColors } from '../tokens/admin-surface';
 export interface ColorPalette {
     50: string;
     100: string;
@@ -45,6 +46,7 @@ export interface HeroUIConfig {
  */
 export declare const tailwindTheme: {
     colors: {
+        acct: Record<string, string>;
         secondary: "#000000";
         success: "#057A54";
         warning: "#F5A524";
@@ -245,6 +247,7 @@ export declare const veevartPreset: {
     theme: {
         extend: {
             colors: {
+                acct: Record<string, string>;
                 secondary: "#000000";
                 success: "#057A54";
                 warning: "#F5A524";
@@ -475,6 +478,7 @@ export declare const tokens: {
     };
     tailwindTheme: {
         colors: {
+            acct: Record<string, string>;
             secondary: "#000000";
             success: "#057A54";
             warning: "#F5A524";

package/dist/tailwind/index.js

@@ -20,6 +20,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/tailwind/index.ts
 var index_exports = {};
 __export(index_exports, {
+  adminSurfaceCss: () => adminSurfaceCss,
+  adminSurfaceTailwindColors: () => adminSurfaceTailwindColors,
+  adminSurfaceTokens: () => adminSurfaceTokens,
   colors: () => colors,
   createHeroUIConfig: () => createHeroUIConfig,
   deepMerge: () => deepMerge,
@@ -209,12 +212,73 @@ var spacing = {
   // 128px
 };
 
+// src/tokens/admin-surface.ts
+var { gray } = colors.neutral;
+var WARNING_TEXT = colors.palettes.warning[700];
+var WARNING_FILL = colors.palettes.warning[100];
+var SIGNED_OFF = {
+  rustFill: "#FBEBE4",
+  rustBorder: "#EBC3B1",
+  page: "#F6F7F8",
+  border: "#E7E9EC",
+  hair: "#EEF0F2",
+  okFill: "#E6F4EF",
+  dangerFill: "#FBEAE8",
+  infoFill: "#E8EEFC"
+};
+var adminSurfaceTokens = {
+  // Brand — the 500 already matches the scale exactly.
+  "--rust": colors.brand.primary[500],
+  "--rust-fill": SIGNED_OFF.rustFill,
+  "--rust-border": SIGNED_OFF.rustBorder,
+  // Chrome
+  "--page": SIGNED_OFF.page,
+  "--surface": colors.neutral.white,
+  "--border": SIGNED_OFF.border,
+  "--hair": SIGNED_OFF.hair,
+  // Text — all four match the scale's grays exactly.
+  "--ink": gray[900],
+  "--ink2": gray[700],
+  "--sub": gray[500],
+  "--muted": gray[400],
+  // Semantic — text tone paired with the tint it sits on.
+  "--ok": colors.semantic.success,
+  "--ok-fill": SIGNED_OFF.okFill,
+  "--warn": WARNING_TEXT,
+  "--warn-fill": WARNING_FILL,
+  "--danger": colors.semantic.danger,
+  "--danger-fill": SIGNED_OFF.dangerFill,
+  "--info": colors.semantic.info,
+  "--info-fill": SIGNED_OFF.infoFill
+};
+var adminSurfaceTailwindColors = Object.fromEntries(
+  Object.entries(adminSurfaceTokens).map(([name, value]) => [name.replace(/^--/, ""), value])
+);
+function adminSurfaceCss({
+  scope = ".acct",
+  fontFamily = "'NeueMontreal', system-ui, sans-serif"
+} = {}) {
+  const declarations = Object.entries(adminSurfaceTokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+  const typography2 = fontFamily ? `
+  font-family: ${fontFamily};
+  color: var(--ink);` : "";
+  return `${scope} {
+${declarations}${typography2}
+}
+`;
+}
+
 // src/tailwind/index.ts
 var tailwindTheme = {
   colors: {
     ...colors.brand,
     ...colors.neutral,
-    ...colors.semantic
+    ...colors.semantic,
+    // Back-office surface palette, namespaced so `border`/`page`/`info` do
+    // not collide with Tailwind's own utility grammar. Sourced from the
+    // same object that emits the CSS custom properties, so the utility and
+    // the property cannot disagree. See src/tokens/admin-surface.ts.
+    acct: adminSurfaceTailwindColors
   },
   fontFamily: typography.fontFamily,
   spacing,
@@ -298,6 +362,9 @@ var tokens = {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  adminSurfaceCss,
+  adminSurfaceTailwindColors,
+  adminSurfaceTokens,
   colors,
   createHeroUIConfig,
   deepMerge,