@orianatech/pire 0.2.0 → 0.3.0

package/dist/components/feedback/Skeleton.d.cts

@@ -0,0 +1,43 @@
+import type * as React from 'react';
+export type SkeletonShape = 'text' | 'block' | 'circle';
+export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** text — a line of copy; block — a card, chart or image; circle — an avatar. */
+    shape?: SkeletonShape;
+    /** Overrides the shape's default. A percentage reads better than a pixel count in a
+     *  fluid layout, and keeps the placeholder honest when the real value is unknown. */
+    width?: number | string;
+    height?: number | string;
+}
+/** Loading placeholder for content whose shape is known before its value is.
+ *
+ *  Deliberately `aria-hidden`: a screen reader gains nothing from "graphic, graphic, graphic",
+ *  and announcing placeholders as content is worse than silence. Announce the wait once, on the
+ *  region that is loading — `aria-busy="true"` on the container, or a live-region message — and
+ *  let the skeleton be purely visual. Nothing inside is focusable, so keyboard order is
+ *  unaffected while the data is in flight.
+ *
+ *  The shimmer is suppressed under `prefers-reduced-motion`; the placeholder still reads as one
+ *  because the shape and the surface contrast carry it, not the animation. */
+export declare function Skeleton({ shape, width, height, className, style, ...rest }: SkeletonProps): React.JSX.Element;
+export interface SkeletonTableColumn {
+    align?: 'left' | 'right' | 'center';
+    /** Fixed column width. Omit to let the column share the free space, as DataTable does. */
+    width?: number | string;
+    /** Right-aligns the bar. Mirrors DataTable's column flag so a loading table and a loaded one
+     *  put their numbers in the same place. */
+    numeric?: boolean;
+}
+export interface SkeletonTableRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** A column count, or one descriptor per column when alignment or width matters. */
+    columns: number | SkeletonTableColumn[];
+    /** Must match the DataTable it stands in for, or the rows jump on load. */
+    density?: 'condensed' | 'regular' | 'comfortable';
+}
+/** One placeholder row, sized to line up with `DataTable` — same row height per density, same
+ *  cell padding, same bottom rule. Render a handful inside `.pire-table-wrap` (or above a real
+ *  table's body) while the first page loads, so the grid does not resize when it arrives.
+ *
+ *  It is not a real `<tr>` and cannot be handed to `DataTable` as a row: DataTable builds its
+ *  collection from `rows`, and React Aria's table owns everything under it. Use it in place of
+ *  the table, not inside one. */
+export declare function SkeletonTableRow({ columns, density, className, style, ...rest }: SkeletonTableRowProps): React.JSX.Element;

package/dist/components/feedback/Skeleton.d.ts

@@ -0,0 +1,44 @@
+import type * as React from 'react';
+export type SkeletonShape = 'text' | 'block' | 'circle';
+export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** text — a line of copy; block — a card, chart or image; circle — an avatar. */
+    shape?: SkeletonShape;
+    /** Overrides the shape's default. A percentage reads better than a pixel count in a
+     *  fluid layout, and keeps the placeholder honest when the real value is unknown. */
+    width?: number | string;
+    height?: number | string;
+}
+/** Loading placeholder for content whose shape is known before its value is.
+ *
+ *  Deliberately `aria-hidden`: a screen reader gains nothing from "graphic, graphic, graphic",
+ *  and announcing placeholders as content is worse than silence. Announce the wait once, on the
+ *  region that is loading — `aria-busy="true"` on the container, or a live-region message — and
+ *  let the skeleton be purely visual. Nothing inside is focusable, so keyboard order is
+ *  unaffected while the data is in flight.
+ *
+ *  The shimmer is suppressed under `prefers-reduced-motion`; the placeholder still reads as one
+ *  because the shape and the surface contrast carry it, not the animation. */
+export declare function Skeleton({ shape, width, height, className, style, ...rest }: SkeletonProps): React.JSX.Element;
+export interface SkeletonTableColumn {
+    align?: 'left' | 'right' | 'center';
+    /** Fixed column width. Omit to let the column share the free space, as DataTable does. */
+    width?: number | string;
+    /** Right-aligns the bar. Mirrors DataTable's column flag so a loading table and a loaded one
+     *  put their numbers in the same place. */
+    numeric?: boolean;
+}
+export interface SkeletonTableRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** A column count, or one descriptor per column when alignment or width matters. */
+    columns: number | SkeletonTableColumn[];
+    /** Must match the DataTable it stands in for, or the rows jump on load. */
+    density?: 'condensed' | 'regular' | 'comfortable';
+}
+/** One placeholder row, sized to line up with `DataTable` — same row height per density, same
+ *  cell padding, same bottom rule. Render a handful inside `.pire-table-wrap` (or above a real
+ *  table's body) while the first page loads, so the grid does not resize when it arrives.
+ *
+ *  It is not a real `<tr>` and cannot be handed to `DataTable` as a row: DataTable builds its
+ *  collection from `rows`, and React Aria's table owns everything under it. Use it in place of
+ *  the table, not inside one. */
+export declare function SkeletonTableRow({ columns, density, className, style, ...rest }: SkeletonTableRowProps): React.JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/feedback/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,iFAAiF;IACjF,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;yFACqF;IACrF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;8EAS8E;AAC9E,wBAAgB,QAAQ,CAAC,EAAE,KAAc,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,qBAKnG;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;+CAC2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnG,oFAAoF;IACpF,OAAO,EAAE,MAAM,GAAG,mBAAmB,EAAE,CAAC;IACxC,2EAA2E;IAC3E,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,aAAa,CAAC;CACnD;AAOD;;;;;;iCAMiC;AACjC,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAmB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,qBAmBlH"}

package/dist/components/forms/MultiComboBox.d.cts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { ComboBoxOption } from './ComboBox.cjs';
+export interface MultiComboBoxProps {
+    label?: React.ReactNode;
+    /** Selected values, in the order they were picked. */
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (values: string[]) => void;
+    /**
+     * Free-text as typed, on every keystroke.
+     *
+     * Server-side search is only partly supported, exactly as on ComboBox. `options` is passed
+     * to React Aria as `defaultItems`, so React Aria applies its own local "contains" filter on
+     * top of whatever you supply: any result whose `label` does not literally contain the typed
+     * text is hidden client-side, and when the local filter matches nothing the menu closes.
+     * Fuzzy, synonym, code-to-description and server-ranked matches are therefore dropped. Use
+     * this to observe input (analytics, a debounced prefetch), or for server search only where
+     * the returned labels are guaranteed to contain the query as a substring.
+     */
+    onInputChange?: (text: string) => void;
+    options?: Array<string | ComboBoxOption>;
+    placeholder?: string;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isReadOnly?: boolean;
+    /** Let Enter commit text that is not in `options` — how product tags get coined. */
+    allowsCustomValue?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    name?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** Multi-value type-ahead: pick several options, each shown as a removable chip, and — with
+ *  `allowsCustomValue` — coin new ones by typing. Product tags, cost-centre sets, watchers.
+ *
+ *  A separate component rather than a mode on ComboBox: ComboBox's `value` is a `string | null`
+ *  and its `onChange` emits one key, while multi-select needs an array on both. Folding the two
+ *  together would put a discriminated union in front of every existing consumer of
+ *  `ComboBoxProps` — a breaking change in exchange for a purely additive feature.
+ *
+ *  Three things worth knowing before you use it:
+ *
+ *  - **Free text commits on Enter, never on blur.** React Aria treats the input text as
+ *    independent of the selection in multi-select mode, so leaving the field discards whatever
+ *    was typed but not committed. The chips are the only record of what was entered.
+ *  - **Backspace on an empty input removes the last chip.** The handler runs in the capture
+ *    phase because React Aria's own key handling sits on the same input and would otherwise act
+ *    on the same key.
+ *  - **The chips are plain `Tag`s, not a React Aria TagGroup.** React Aria's ComboBox builds its
+ *    listbox collection by shallow-rendering its entire subtree, which swallows any collection
+ *    component nested inside it — a TagGroup there registers its tags as listbox items and then
+ *    crashes looking for grid state. Each chip's remove button is an ordinary Tab stop instead,
+ *    and removals are announced through the live region below. */
+export declare function MultiComboBox({ label, value, defaultValue, onChange, onInputChange, options, description, errorMessage, allowsCustomValue, size, fullWidth, className, style, ...rest }: MultiComboBoxProps): React.JSX.Element;

package/dist/components/forms/MultiComboBox.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import type { ComboBoxOption } from './ComboBox.js';
+export interface MultiComboBoxProps {
+    label?: React.ReactNode;
+    /** Selected values, in the order they were picked. */
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (values: string[]) => void;
+    /**
+     * Free-text as typed, on every keystroke.
+     *
+     * Server-side search is only partly supported, exactly as on ComboBox. `options` is passed
+     * to React Aria as `defaultItems`, so React Aria applies its own local "contains" filter on
+     * top of whatever you supply: any result whose `label` does not literally contain the typed
+     * text is hidden client-side, and when the local filter matches nothing the menu closes.
+     * Fuzzy, synonym, code-to-description and server-ranked matches are therefore dropped. Use
+     * this to observe input (analytics, a debounced prefetch), or for server search only where
+     * the returned labels are guaranteed to contain the query as a substring.
+     */
+    onInputChange?: (text: string) => void;
+    options?: Array<string | ComboBoxOption>;
+    placeholder?: string;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isReadOnly?: boolean;
+    /** Let Enter commit text that is not in `options` — how product tags get coined. */
+    allowsCustomValue?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    name?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** Multi-value type-ahead: pick several options, each shown as a removable chip, and — with
+ *  `allowsCustomValue` — coin new ones by typing. Product tags, cost-centre sets, watchers.
+ *
+ *  A separate component rather than a mode on ComboBox: ComboBox's `value` is a `string | null`
+ *  and its `onChange` emits one key, while multi-select needs an array on both. Folding the two
+ *  together would put a discriminated union in front of every existing consumer of
+ *  `ComboBoxProps` — a breaking change in exchange for a purely additive feature.
+ *
+ *  Three things worth knowing before you use it:
+ *
+ *  - **Free text commits on Enter, never on blur.** React Aria treats the input text as
+ *    independent of the selection in multi-select mode, so leaving the field discards whatever
+ *    was typed but not committed. The chips are the only record of what was entered.
+ *  - **Backspace on an empty input removes the last chip.** The handler runs in the capture
+ *    phase because React Aria's own key handling sits on the same input and would otherwise act
+ *    on the same key.
+ *  - **The chips are plain `Tag`s, not a React Aria TagGroup.** React Aria's ComboBox builds its
+ *    listbox collection by shallow-rendering its entire subtree, which swallows any collection
+ *    component nested inside it — a TagGroup there registers its tags as listbox items and then
+ *    crashes looking for grid state. Each chip's remove button is an ordinary Tab stop instead,
+ *    and removals are announced through the live region below. */
+export declare function MultiComboBox({ label, value, defaultValue, onChange, onInputChange, options, description, errorMessage, allowsCustomValue, size, fullWidth, className, style, ...rest }: MultiComboBoxProps): React.JSX.Element;
+//# sourceMappingURL=MultiComboBox.d.ts.map

package/dist/components/forms/MultiComboBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/MultiComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAKD;;;;;;;;;;;;;;;;;;;;kEAoBkE;AAClE,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAY,EAC/F,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,IAAW,EACzD,SAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,qBAiHlE"}

package/dist/components/forms/TextArea.d.cts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+export interface TextAreaProps {
+    label?: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    /** Receives the raw string value. */
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    /** Help text below the field. Replaced by errorMessage when invalid. */
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** Visible lines before scrolling. Three is the ERP default: an address or a short note. */
+    rows?: number;
+    /** Grow with the content instead of scrolling. Off by default — see the component note. */
+    autoGrow?: boolean;
+    /** Ceiling for `autoGrow`, in lines. Beyond it the field scrolls, so a pasted essay
+     *  cannot push the form's buttons off screen. */
+    maxRows?: number;
+    fullWidth?: boolean;
+    name?: string;
+    autoFocus?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    textAreaRef?: React.Ref<HTMLTextAreaElement>;
+}
+/** Multi-line text entry — notes, addresses, rejection reasons. The prop API is Input's, so a
+ *  field can be swapped between the two without relearning; labels, descriptions and errors are
+ *  wired up by React Aria, so no manual aria-describedby is ever needed.
+ *
+ *  `autoGrow` is opt-in, not always-on, for two reasons. It costs a synchronous measure-and-write
+ *  on every keystroke, and in a dense form it makes every field below the one being typed in jump
+ *  — the wrong trade in a screen the user is tabbing through. Turn it on where the content length
+ *  is genuinely unknown (a long free-text comment) and leave it off everywhere else. When on, the
+ *  height is only written when it actually changed, so a keystroke that does not wrap costs no
+ *  layout; and the resize grip is removed, since a manual height would be overwritten on the next
+ *  keystroke anyway. */
+export declare function TextArea({ label, description, errorMessage, size, rows, autoGrow, maxRows, fullWidth, className, style, textAreaRef, onChange, ...rest }: TextAreaProps): React.JSX.Element;

package/dist/components/forms/TextArea.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+export interface TextAreaProps {
+    label?: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    /** Receives the raw string value. */
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    /** Help text below the field. Replaced by errorMessage when invalid. */
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** Visible lines before scrolling. Three is the ERP default: an address or a short note. */
+    rows?: number;
+    /** Grow with the content instead of scrolling. Off by default — see the component note. */
+    autoGrow?: boolean;
+    /** Ceiling for `autoGrow`, in lines. Beyond it the field scrolls, so a pasted essay
+     *  cannot push the form's buttons off screen. */
+    maxRows?: number;
+    fullWidth?: boolean;
+    name?: string;
+    autoFocus?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    textAreaRef?: React.Ref<HTMLTextAreaElement>;
+}
+/** Multi-line text entry — notes, addresses, rejection reasons. The prop API is Input's, so a
+ *  field can be swapped between the two without relearning; labels, descriptions and errors are
+ *  wired up by React Aria, so no manual aria-describedby is ever needed.
+ *
+ *  `autoGrow` is opt-in, not always-on, for two reasons. It costs a synchronous measure-and-write
+ *  on every keystroke, and in a dense form it makes every field below the one being typed in jump
+ *  — the wrong trade in a screen the user is tabbing through. Turn it on where the content length
+ *  is genuinely unknown (a long free-text comment) and leave it off everywhere else. When on, the
+ *  height is only written when it actually changed, so a keystroke that does not wrap costs no
+ *  layout; and the resize grip is removed, since a manual height would be overwritten on the next
+ *  keystroke anyway. */
+export declare function TextArea({ label, description, errorMessage, size, rows, autoGrow, maxRows, fullWidth, className, style, textAreaRef, onChange, ...rest }: TextAreaProps): React.JSX.Element;
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/components/forms/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;qDACiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAC9C;AAED;;;;;;;;;;wBAUwB;AACxB,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,IAAW,EAAE,IAAQ,EAAE,QAAQ,EAC1F,OAAO,EAAE,SAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,qBAsD7F"}

package/dist/components.css

@@ -59,7 +59,7 @@
 .pire-card-body{padding:var(--sp-4);flex:1}
 .pire-card-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border-subtle)}
 
-/* ---- Field shell (Input, Select, ComboBox) --------------------------- */
+/* ---- Field shell (Input, Select, ComboBox, TextArea, MultiComboBox) --- */
 .pire-field{display:flex;flex-direction:column;gap:var(--sp-1)}
 .pire-field-label{font:var(--type-label);color:var(--text-label)}
 .pire-field-req{color:var(--status-negative-fg);margin-left:var(--sp-0h)}
@@ -90,6 +90,30 @@
 .pire-input::placeholder{color:var(--text-tertiary)}
 .pire-affix{font:var(--type-caption);color:var(--text-secondary);flex:0 0 auto}
 .pire-leading-icon{color:var(--text-tertiary);flex:0 0 auto}
+/* The shell is fixed-height by default because every single-line control is. Controls whose
+   content sets the height (TextArea, MultiComboBox's chips) opt out with data-multiline and
+   keep everything else — focus ring, invalid, disabled, readonly, sizing — from the rules
+   above. This block sits after the [data-size] heights on purpose: equal specificity, so the
+   later `height:auto` wins, and the per-size floor is restored as a min-height. */
+.pire-control[data-multiline="true"]{height:auto;min-height:var(--control-h-md);align-items:stretch;padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
+.pire-control[data-multiline="true"][data-size="sm"]{min-height:var(--control-h-sm)}
+.pire-control[data-multiline="true"][data-size="lg"]{min-height:var(--control-h-lg)}
+
+/* ---- TextArea -------------------------------------------------------- */
+.pire-textarea{display:block;width:100%;resize:vertical;overflow:auto}
+/* autoGrow writes an inline height on every keystroke, so a height dragged by hand would be
+   thrown away on the next one — the grip is removed rather than left lying about it. */
+.pire-textarea[data-auto-grow="true"]{resize:none}
+
+/* ---- MultiComboBox --------------------------------------------------- */
+.pire-chipfield{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1)}
+/* Never narrower than a few characters, so the caret stays reachable however many chips are in. */
+.pire-chipinput{flex:1 1 6ch;min-width:6ch}
+/* Each chip's remove button is a Tab stop of its own inside the shell, and the shell's blanket
+   `:focus-visible{outline:none}` (see above) would otherwise leave it unmarked. */
+.pire-chipfield .pire-tag-remove[data-focus-visible]{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset)}
+/* One ring at a time: while a chip owns focus it, not the shell, is what moved. */
+.pire-control:has(.pire-tag-remove[data-focus-visible])[data-focus-within]{outline:none}
 
 /* ---- Select / ListBox popover ---------------------------------------- */
 .pire-select-value{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--type-body)}
@@ -121,8 +145,10 @@
 .pire-choice[data-focus-visible] .pire-choice-box{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset)}
 .pire-choice[data-disabled] .pire-choice-box{background:var(--surface-disabled);border-color:var(--border-default)}
 .pire-choice-hint{display:block;font:var(--type-caption);color:var(--text-secondary)}
-.pire-switch-track{flex:0 0 auto;width:36px;height:20px;border-radius:var(--radius-pill);background:var(--gray-40);padding:2px;transition:background-color var(--dur-fast) var(--ease-standard)}
-.pire-switch-thumb{width:16px;height:16px;border-radius:var(--radius-pill);background:var(--gray-0);box-shadow:var(--shadow-1);transition:transform var(--dur-fast) var(--ease-standard)}
+/* The track must establish a flex context: the thumb is a <span>, and an inline box
+   ignores width/height — it rendered at 0x0 until this was added. */
+.pire-switch-track{flex:0 0 auto;display:flex;align-items:center;width:36px;height:20px;border-radius:var(--radius-pill);background:var(--gray-40);padding:2px;transition:background-color var(--dur-fast) var(--ease-standard)}
+.pire-switch-thumb{flex:0 0 auto;width:16px;height:16px;border-radius:var(--radius-pill);background:var(--gray-0);box-shadow:var(--shadow-1);transition:transform var(--dur-fast) var(--ease-standard)}
 .pire-choice[data-selected] .pire-switch-track{background:var(--accent-bg)}
 .pire-choice[data-selected] .pire-switch-thumb{transform:translateX(16px)}
 .pire-choice[data-focus-visible] .pire-switch-track{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset)}
@@ -201,6 +227,28 @@
 .pire-progress[data-status="negative"] .pire-progress-fill{background:var(--status-negative-fg)}
 .pire-tooltip{max-width:240px;padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-1);background:var(--gray-90);color:var(--text-inverse);font:var(--type-caption);box-shadow:var(--shadow-2);animation:pire-fade-in var(--dur-fast) var(--ease-entrance)}
 
+/* ---- Skeleton ---------------------------------------------------------- */
+/* The sweep is a lightness *difference* between two surface aliases, not a fixed direction:
+   --surface-hover is lighter than --surface-active in the light theme and darker in the dark
+   one, and either reads as a sweep. That keeps the placeholder on the shared alias layer
+   instead of introducing a skeleton-only token pair for both themes to maintain.
+   The duration is derived, not literal: a shimmer at --dur-slow (400ms) is agitated rather
+   than patient, and 3x is the slowest step the motion scale can express. */
+.pire-skeleton{display:block;width:100%;background-color:var(--surface-active);background-image:linear-gradient(90deg,transparent,var(--surface-hover),transparent);background-size:200% 100%;background-repeat:no-repeat;border-radius:var(--radius-1);animation:pire-skeleton-sweep calc(var(--dur-slow) * 3) var(--ease-standard) infinite}
+.pire-skeleton[data-shape="text"]{height:var(--fs-body)}
+.pire-skeleton[data-shape="block"]{height:var(--sp-16);border-radius:var(--radius-2)}
+.pire-skeleton[data-shape="circle"]{width:var(--sp-8);height:var(--sp-8);border-radius:var(--radius-pill);flex:0 0 auto}
+@keyframes pire-skeleton-sweep{from{background-position:150% 0}to{background-position:-50% 0}}
+/* Geometry copied from .pire-tr / .pire-td, not approximated, so a loading table and a loaded
+   one are the same height and the rows do not jump when the data lands. */
+.pire-skeleton-row{display:flex;align-items:center;height:var(--row-h-regular);border-bottom:1px solid var(--border-subtle)}
+.pire-skeleton-row[data-density="condensed"]{height:var(--row-h-condensed)}
+.pire-skeleton-row[data-density="comfortable"]{height:var(--row-h-comfortable)}
+.pire-skeleton-cell{flex:1 1 0;min-width:0;display:flex;padding:0 var(--sp-3)}
+.pire-skeleton-row[data-density="condensed"] .pire-skeleton-cell{padding:0 var(--sp-2)}
+.pire-skeleton-cell[data-align="right"]{justify-content:flex-end}
+.pire-skeleton-cell[data-align="center"]{justify-content:center}
+
 /* ---- Data ------------------------------------------------------------ */
 .pire-table-wrap{overflow:auto;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2)}
 .pire-table{width:100%;border-collapse:collapse;font:var(--type-body)}
@@ -346,6 +394,10 @@
 
 /* ---- 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
+   exactly the "large, repeated motion" the preference is asking us to stop, and the placeholder
+   still reads from its shape and surface contrast alone. */
+.pire-skeleton{animation:none;background-image:none}
 /* !important is the point here: this must beat every component transition, including any a
    consuming app has layered on top. Honouring the OS motion preference outranks the style rule. */
 /* biome-ignore lint/complexity/noImportantStyles: accessibility override must win unconditionally */