@orianatech/pire 0.5.0 → 0.7.0

package/dist/components.css

@@ -414,6 +414,91 @@
 .pire-calendar-cell[data-disabled],.pire-calendar-cell[data-unavailable]{color:var(--text-disabled);cursor:not-allowed;text-decoration:line-through}
 .pire-calendar-cell[data-focus-visible]{outline:var(--focus-w) solid var(--focus-color);outline-offset:-1px}
 
+/* ---- Text / Strong ------------------------------------------------------ */
+.pire-text{margin:0;font:var(--type-body);letter-spacing:var(--ls-body);color:var(--text-primary)}
+.pire-text[data-size="body-lg"]{font:var(--type-body-lg)}
+.pire-text[data-size="caption"]{font:var(--type-caption)}
+.pire-text[data-size="micro"]{font:var(--type-micro)}
+.pire-text[data-weight="strong"]{font-weight:var(--fw-semibold)}
+.pire-text[data-color="secondary"]{color:var(--text-secondary)}
+.pire-text[data-color="tertiary"]{color:var(--text-tertiary)}
+.pire-text[data-color="disabled"]{color:var(--text-disabled)}
+.pire-text[data-color="inverse"]{color:var(--text-inverse)}
+.pire-text[data-numeric="true"]{font:var(--type-numeric);letter-spacing:var(--ls-numeric);font-variant-numeric:tabular-nums}
+.pire-text[data-eyebrow="true"]{font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-secondary)}
+/* Shared clamp for Text and Heading; `--pire-text-clamp` carries the line count. */
+.pire-text[data-truncate="true"],.pire-heading[data-truncate="true"]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--pire-text-clamp,1);line-clamp:var(--pire-text-clamp,1);overflow:hidden}
+
+/* ---- Heading ------------------------------------------------------------ */
+.pire-heading{margin:0;font:var(--type-h2);letter-spacing:var(--ls-heading);color:var(--text-primary)}
+.pire-heading[data-size="display"]{font:var(--type-display);letter-spacing:var(--ls-display)}
+.pire-heading[data-size="h1"]{font:var(--type-h1)}
+.pire-heading[data-size="h2"]{font:var(--type-h2)}
+.pire-heading[data-size="h3"]{font:var(--type-h3)}
+.pire-heading[data-size="h4"]{font:var(--type-h4)}
+.pire-heading[data-color="secondary"]{color:var(--text-secondary)}
+.pire-heading[data-color="tertiary"]{color:var(--text-tertiary)}
+.pire-heading[data-color="disabled"]{color:var(--text-disabled)}
+.pire-heading[data-color="inverse"]{color:var(--text-inverse)}
+
+/* ---- Link --------------------------------------------------------------- */
+.pire-link{display:inline-flex;align-items:baseline;gap:var(--sp-1);color:var(--text-link);text-decoration:underline;text-underline-offset:2px;cursor:pointer;transition:var(--transition-control)}
+.pire-link[data-size="body-lg"]{font:var(--type-body-lg)}
+.pire-link[data-size="body"]{font:var(--type-body)}
+.pire-link[data-size="caption"]{font:var(--type-caption)}
+.pire-link[data-size="micro"]{font:var(--type-micro)}
+.pire-link[data-hovered]{color:var(--text-link-hover)}
+.pire-link[data-disabled]{color:var(--text-disabled);text-decoration:none;cursor:not-allowed}
+.pire-link[data-focus-visible]{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset);border-radius:var(--radius-1)}
+.pire-link-external{flex:0 0 auto;align-self:center}
+
+/* ---- Separator ---------------------------------------------------------- */
+.pire-separator{border:0;border-top:var(--border-w-hairline) solid var(--border-default);margin:var(--sp-4) 0}
+.pire-separator[data-emphasis="subtle"]{border-color:var(--border-subtle)}
+.pire-separator[data-spacing="none"]{margin:0}
+.pire-separator[data-spacing="sm"]{margin:var(--sp-2) 0}
+.pire-separator[data-orientation="vertical"]{border-top:0;border-left:var(--border-w-hairline) solid var(--border-default);align-self:stretch;margin:0 var(--sp-3)}
+.pire-separator[data-orientation="vertical"][data-emphasis="subtle"]{border-color:var(--border-subtle)}
+.pire-separator[data-orientation="vertical"][data-spacing="none"]{margin:0}
+.pire-separator[data-orientation="vertical"][data-spacing="sm"]{margin:0 var(--sp-2)}
+
+/* ---- Menu --------------------------------------------------------------- */
+/* Its own surface, not .pire-popover: that sizes from --trigger-width, which is wrong for a
+   menu hung off a 32px IconButton. Here the content sets the width. */
+.pire-menu{outline:none;padding:var(--sp-1) 0;min-width:var(--pire-menu-min-w,180px);max-width:calc(100vw - 24px);display:flex;flex-direction:column}
+.pire-menu-item{display:flex;align-items:flex-start;gap:var(--sp-2);min-height:var(--row-h-condensed);padding:var(--sp-1) var(--sp-3);font:var(--type-body);color:var(--text-primary);cursor:pointer;outline:none;text-decoration:none}
+.pire-menu-item[data-focused]{background:var(--surface-hover)}
+.pire-menu-item[data-disabled]{color:var(--text-disabled);cursor:not-allowed}
+.pire-menu-item[data-tone="danger"]{color:var(--status-negative-fg)}
+.pire-menu-item[data-tone="danger"][data-focused]{background:var(--status-negative-bg)}
+.pire-menu-item-icon{flex:0 0 auto;margin-top:2px;color:var(--text-secondary)}
+.pire-menu-item[data-tone="danger"] .pire-menu-item-icon{color:inherit}
+.pire-menu-item-body{flex:1;min-width:0;display:flex;flex-direction:column}
+.pire-menu-item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.pire-menu-item-desc{font:var(--type-caption);color:var(--text-secondary)}
+.pire-menu-item[data-disabled] .pire-menu-item-desc{color:var(--text-disabled)}
+.pire-menu-item-shortcut{flex:0 0 auto;align-self:center;font:var(--type-code);color:var(--text-tertiary)}
+.pire-menu-section-title{display:block;padding:var(--sp-1) var(--sp-3);font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-secondary)}
+.pire-menu-separator{border:0;border-top:var(--border-w-hairline) solid var(--border-subtle);margin:var(--sp-1) 0}
+
+/* ---- PageBand ------------------------------------------------------------ */
+.pire-pageband{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4) var(--page-pad-x);background:var(--surface-card)}
+.pire-pageband[data-surface="page"]{background:var(--surface-page)}
+.pire-pageband[data-border="true"]{border-bottom:1px solid var(--border-subtle)}
+
+/* ---- IconButton count ---------------------------------------------------- */
+/* Sits over the icon's top-right. The button is position:relative only when a count is present,
+   so nothing else about its layout changes for the common case. */
+.pire-iconbtn[data-has-count="true"]{position:relative}
+.pire-iconbtn-count{position:absolute;top:2px;right:2px;display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 var(--sp-1);border-radius:var(--radius-pill);background:var(--status-negative-fg);color:var(--text-inverse);font:var(--type-micro);font-weight:var(--fw-semibold);line-height:1;pointer-events:none}
+.pire-iconbtn-count[data-variant="dot"]{min-width:8px;width:8px;height:8px;padding:0;top:4px;right:4px}
+.pire-iconbtn[data-variant="inverse"] .pire-iconbtn-count{box-shadow:0 0 0 2px var(--surface-shell)}
+
+/* ---- DataTable loading --------------------------------------------------- */
+/* renderEmptyState gives one node for the whole body, so the skeleton rows stack inside it while
+   the real header stays mounted above — which is what stops the grid resizing mid-reload. */
+.pire-table-loading{display:flex;flex-direction:column}
+
 /* ---- Reduced motion --------------------------------------------------- */
 @media (prefers-reduced-motion: reduce){.pire-modal,.pire-toast,.pire-popover,.pire-tooltip,.pire-sidepanel{animation:none}
 /* The skeleton also drops its background sweep, not just the animation: an infinite shimmer is

package/dist/i18n/PireIntlProvider.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { type PireMessages } from './messages.cjs';
+export interface PireIntlProviderProps {
+    /** Overrides merged over the English defaults, so a partial dictionary is enough. */
+    messages?: Partial<PireMessages>;
+    children?: React.ReactNode;
+}
+/**
+ * Supplies the strings Pire renders itself. Mount once near the app root, alongside React Aria's
+ * `I18nProvider` — that one localises React Aria's internals, this one localises Pire's.
+ */
+export declare function PireIntlProvider({ messages, children }: PireIntlProviderProps): React.JSX.Element;
+/** Reads the active dictionary. Without a provider this returns the English defaults. */
+export declare function usePireMessages(): PireMessages;
+/**
+ * Resolves one string, letting an explicit prop win over the dictionary.
+ *
+ * Components call this so a per-instance override is always available — a screen with two navs
+ * needs to name them differently even when the dictionary is correct.
+ */
+export declare function useMessage(key: keyof PireMessages, override?: string): string;

package/dist/i18n/PireIntlProvider.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { type PireMessages } from './messages.js';
+export interface PireIntlProviderProps {
+    /** Overrides merged over the English defaults, so a partial dictionary is enough. */
+    messages?: Partial<PireMessages>;
+    children?: React.ReactNode;
+}
+/**
+ * Supplies the strings Pire renders itself. Mount once near the app root, alongside React Aria's
+ * `I18nProvider` — that one localises React Aria's internals, this one localises Pire's.
+ */
+export declare function PireIntlProvider({ messages, children }: PireIntlProviderProps): React.JSX.Element;
+/** Reads the active dictionary. Without a provider this returns the English defaults. */
+export declare function usePireMessages(): PireMessages;
+/**
+ * Resolves one string, letting an explicit prop win over the dictionary.
+ *
+ * Components call this so a per-instance override is always available — a screen with two navs
+ * needs to name them differently even when the dictionary is correct.
+ */
+export declare function useMessage(key: keyof PireMessages, override?: string): string;
+//# sourceMappingURL=PireIntlProvider.d.ts.map

package/dist/i18n/PireIntlProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PireIntlProvider.d.ts","sourceRoot":"","sources":["../../src/i18n/PireIntlProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,YAAY,EAAc,MAAM,YAAY,CAAC;AAI3D,MAAM,WAAW,qBAAqB;IACpC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,qBAAqB,qBAO7E;AAED,yFAAyF;AACzF,wBAAgB,eAAe,IAAI,YAAY,CAE9C;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,YAAY,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAK7E"}

package/dist/i18n/messages.d.cts

@@ -0,0 +1,66 @@
+/**
+ * Every string Pire renders that the consumer did not supply.
+ *
+ * Keys are `<component><thing>`. Values are the English defaults, so a consumer that installs
+ * nothing keeps working exactly as before.
+ *
+ * React Aria localises its own internals (date field segments, table sort announcements) through
+ * `I18nProvider`, which Pire re-exports. This dictionary is the parallel for Pire's own strings —
+ * install both to fully translate the UI.
+ */
+export interface PireMessages {
+    /** FilterBar's landmark name. */
+    filterBarLabel: string;
+    /** Visible text of the apply button. Filters apply explicitly, never live. */
+    filterBarGo: string;
+    /** Visible text of the button that removes every active filter. */
+    filterBarClearAll: string;
+    /** Accessible name of the header checkbox that selects every row. */
+    dataTableSelectAll: string;
+    /** Accessible name of a row's selection checkbox. */
+    dataTableSelectRow: string;
+    /** Announced while the table body is a skeleton. */
+    dataTableLoading: string;
+    /** Accessible name of the dialog's close affordance. */
+    dialogClose: string;
+    /** Accessible name of SidePanel's close affordance. */
+    sidePanelClose: string;
+    /** Accessible name of InlineMessage's dismiss affordance. */
+    inlineMessageDismiss: string;
+    /** Accessible name of a toast's dismiss affordance. */
+    toastDismiss: string;
+    /** Landmark name of the toast live region. */
+    toastRegionLabel: string;
+    /** Accessible name of the button that opens a ComboBox's list. */
+    comboBoxShowSuggestions: string;
+    /** Accessible name of the button that opens the calendar popover. */
+    datePickerOpenCalendar: string;
+    datePickerPreviousMonth: string;
+    datePickerNextMonth: string;
+    /** Accessible names of the NumberField steppers. */
+    numberFieldIncrease: string;
+    numberFieldDecrease: string;
+    /** Accessible name of the button that clears a ValueHelpField. */
+    valueHelpFieldClear: string;
+    /** Opens the value-help dialog. `{label}` is replaced with the field's own label. */
+    valueHelpFieldOpenNamed: string;
+    /** Same button, when the field has no string label to name it with. */
+    valueHelpFieldOpen: string;
+    /** Accessible name of ValueHelpDialog's search field. */
+    valueHelpDialogSearch: string;
+    /** Visible text of ValueHelpDialog's cancel button. */
+    valueHelpDialogCancel: string;
+    /** Pagination's landmark name and its controls. */
+    paginationLabel: string;
+    /** Record range. `{from}`, `{to}` and `{total}` are replaced with formatted numbers. */
+    paginationRange: string;
+    /** Current page. `{page}` and `{pages}` are replaced. */
+    paginationPageOf: string;
+    paginationPrevious: string;
+    paginationNext: string;
+    paginationRowsPerPage: string;
+    /** Landmark name of the main SideNav. Override it when a screen has more than one nav. */
+    sideNavLabel: string;
+}
+export declare const enMessages: PireMessages;
+export declare const esMessages: PireMessages;

package/dist/i18n/messages.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Every string Pire renders that the consumer did not supply.
+ *
+ * Keys are `<component><thing>`. Values are the English defaults, so a consumer that installs
+ * nothing keeps working exactly as before.
+ *
+ * React Aria localises its own internals (date field segments, table sort announcements) through
+ * `I18nProvider`, which Pire re-exports. This dictionary is the parallel for Pire's own strings —
+ * install both to fully translate the UI.
+ */
+export interface PireMessages {
+    /** FilterBar's landmark name. */
+    filterBarLabel: string;
+    /** Visible text of the apply button. Filters apply explicitly, never live. */
+    filterBarGo: string;
+    /** Visible text of the button that removes every active filter. */
+    filterBarClearAll: string;
+    /** Accessible name of the header checkbox that selects every row. */
+    dataTableSelectAll: string;
+    /** Accessible name of a row's selection checkbox. */
+    dataTableSelectRow: string;
+    /** Announced while the table body is a skeleton. */
+    dataTableLoading: string;
+    /** Accessible name of the dialog's close affordance. */
+    dialogClose: string;
+    /** Accessible name of SidePanel's close affordance. */
+    sidePanelClose: string;
+    /** Accessible name of InlineMessage's dismiss affordance. */
+    inlineMessageDismiss: string;
+    /** Accessible name of a toast's dismiss affordance. */
+    toastDismiss: string;
+    /** Landmark name of the toast live region. */
+    toastRegionLabel: string;
+    /** Accessible name of the button that opens a ComboBox's list. */
+    comboBoxShowSuggestions: string;
+    /** Accessible name of the button that opens the calendar popover. */
+    datePickerOpenCalendar: string;
+    datePickerPreviousMonth: string;
+    datePickerNextMonth: string;
+    /** Accessible names of the NumberField steppers. */
+    numberFieldIncrease: string;
+    numberFieldDecrease: string;
+    /** Accessible name of the button that clears a ValueHelpField. */
+    valueHelpFieldClear: string;
+    /** Opens the value-help dialog. `{label}` is replaced with the field's own label. */
+    valueHelpFieldOpenNamed: string;
+    /** Same button, when the field has no string label to name it with. */
+    valueHelpFieldOpen: string;
+    /** Accessible name of ValueHelpDialog's search field. */
+    valueHelpDialogSearch: string;
+    /** Visible text of ValueHelpDialog's cancel button. */
+    valueHelpDialogCancel: string;
+    /** Pagination's landmark name and its controls. */
+    paginationLabel: string;
+    /** Record range. `{from}`, `{to}` and `{total}` are replaced with formatted numbers. */
+    paginationRange: string;
+    /** Current page. `{page}` and `{pages}` are replaced. */
+    paginationPageOf: string;
+    paginationPrevious: string;
+    paginationNext: string;
+    paginationRowsPerPage: string;
+    /** Landmark name of the main SideNav. Override it when a screen has more than one nav. */
+    sideNavLabel: string;
+}
+export declare const enMessages: PireMessages;
+export declare const esMessages: PireMessages;
+//# sourceMappingURL=messages.d.ts.map

package/dist/i18n/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../src/i18n/messages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,cAAc,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,iBAAiB,EAAE,MAAM,CAAC;IAE1B,qEAAqE;IACrE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oDAAoD;IACpD,gBAAgB,EAAE,MAAM,CAAC;IAEzB,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,cAAc,EAAE,MAAM,CAAC;IAEvB,6DAA6D;IAC7D,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,gBAAgB,EAAE,MAAM,CAAC;IAEzB,kEAAkE;IAClE,uBAAuB,EAAE,MAAM,CAAC;IAEhC,qEAAqE;IACrE,sBAAsB,EAAE,MAAM,CAAC;IAC/B,uBAAuB,EAAE,MAAM,CAAC;IAChC,mBAAmB,EAAE,MAAM,CAAC;IAE5B,oDAAoD;IACpD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAE5B,kEAAkE;IAClE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qFAAqF;IACrF,uBAAuB,EAAE,MAAM,CAAC;IAChC,uEAAuE;IACvE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,yDAAyD;IACzD,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,qBAAqB,EAAE,MAAM,CAAC;IAE9B,mDAAmD;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,wFAAwF;IACxF,eAAe,EAAE,MAAM,CAAC;IACxB,yDAAyD;IACzD,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,MAAM,CAAC;IAE9B,0FAA0F;IAC1F,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,YAuCxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,YAuCxB,CAAC"}