@orianatech/pire 0.12.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/data/LinkList.d.cts +10 -1
- package/dist/components/data/LinkList.d.ts +10 -1
- package/dist/components/data/LinkList.d.ts.map +1 -1
- package/dist/components/feedback/Dialog.d.ts.map +1 -1
- package/dist/components/forms/ComboBox.d.cts +10 -1
- package/dist/components/forms/ComboBox.d.ts +10 -1
- package/dist/components/forms/ComboBox.d.ts.map +1 -1
- package/dist/components/forms/Select.d.cts +7 -1
- package/dist/components/forms/Select.d.ts +7 -1
- package/dist/components/forms/Select.d.ts.map +1 -1
- package/dist/components.css +20 -0
- package/dist/i18n/messages.d.cts +3 -0
- package/dist/i18n/messages.d.ts +3 -0
- package/dist/i18n/messages.d.ts.map +1 -1
- package/dist/index.cjs +131 -111
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +148 -128
- package/dist/index.js.map +1 -1
- package/dist/tokens/base.css +10 -8
- package/package.json +1 -1
|
@@ -11,8 +11,17 @@ export interface LinkListItem {
|
|
|
11
11
|
export interface LinkListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
12
12
|
items: LinkListItem[];
|
|
13
13
|
onSelect?: (id: string) => void;
|
|
14
|
+
/**
|
|
15
|
+
* Which slot gets the primary treatment. `'key'` (the default) sets `key` in mono and `text`
|
|
16
|
+
* in secondary — right for "OC-2026-000004 · Alfa S.A.", where the code is what you scan.
|
|
17
|
+
*
|
|
18
|
+
* Use `'text'` when the name is what you scan and the code is the qualifier — a supplier or
|
|
19
|
+
* customer list. It swaps the two treatments only; the slots keep their meanings, so `key`
|
|
20
|
+
* stays the technical key and sorting or copying it still works.
|
|
21
|
+
*/
|
|
22
|
+
emphasis?: 'key' | 'text';
|
|
14
23
|
/** Names the list for assistive tech, e.g. "Recently viewed orders". */
|
|
15
24
|
'aria-label': string;
|
|
16
25
|
}
|
|
17
26
|
/** Compact list of records that navigate somewhere: recently viewed, related documents, shortcuts. */
|
|
18
|
-
export declare function LinkList({ items, onSelect, className, ...rest }: LinkListProps): React.JSX.Element;
|
|
27
|
+
export declare function LinkList({ items, onSelect, emphasis, className, ...rest }: LinkListProps): React.JSX.Element;
|
|
@@ -11,9 +11,18 @@ export interface LinkListItem {
|
|
|
11
11
|
export interface LinkListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
12
12
|
items: LinkListItem[];
|
|
13
13
|
onSelect?: (id: string) => void;
|
|
14
|
+
/**
|
|
15
|
+
* Which slot gets the primary treatment. `'key'` (the default) sets `key` in mono and `text`
|
|
16
|
+
* in secondary — right for "OC-2026-000004 · Alfa S.A.", where the code is what you scan.
|
|
17
|
+
*
|
|
18
|
+
* Use `'text'` when the name is what you scan and the code is the qualifier — a supplier or
|
|
19
|
+
* customer list. It swaps the two treatments only; the slots keep their meanings, so `key`
|
|
20
|
+
* stays the technical key and sorting or copying it still works.
|
|
21
|
+
*/
|
|
22
|
+
emphasis?: 'key' | 'text';
|
|
14
23
|
/** Names the list for assistive tech, e.g. "Recently viewed orders". */
|
|
15
24
|
'aria-label': string;
|
|
16
25
|
}
|
|
17
26
|
/** Compact list of records that navigate somewhere: recently viewed, related documents, shortcuts. */
|
|
18
|
-
export declare function LinkList({ items, onSelect, className, ...rest }: LinkListProps): React.JSX.Element;
|
|
27
|
+
export declare function LinkList({ items, onSelect, emphasis, className, ...rest }: LinkListProps): React.JSX.Element;
|
|
19
28
|
//# sourceMappingURL=LinkList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkList.d.ts","sourceRoot":"","sources":["../../../src/components/data/LinkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,mEAAmE;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,wCAAwC;IACxC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,wEAAwE;IACxE,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,sGAAsG;AACtG,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"LinkList.d.ts","sourceRoot":"","sources":["../../../src/components/data/LinkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,mEAAmE;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,wCAAwC;IACxC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC1B,wEAAwE;IACxE,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,sGAAsG;AACtG,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,qBA4BhG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mEAAmE;IACnE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oEAAoE;IACpE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yFAAyF;IACzF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;0DAC0D;AAC1D,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EACvF,IAAW,EAAE,aAAoB,EAAE,SAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mEAAmE;IACnE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oEAAoE;IACpE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yFAAyF;IACzF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;0DAC0D;AAC1D,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EACvF,IAAW,EAAE,aAAoB,EAAE,SAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,WAAW,qBA2BrF"}
|
|
@@ -17,6 +17,15 @@ export interface ComboBoxProps {
|
|
|
17
17
|
* so a result whose label does not literally contain the typed text is hidden client-side.
|
|
18
18
|
*/
|
|
19
19
|
onInputChange?: (text: string) => void;
|
|
20
|
+
/**
|
|
21
|
+
* The text in the input, controlled. Pair it with `onInputChange` or typing stops working.
|
|
22
|
+
*
|
|
23
|
+
* Needed whenever the parent has to *impose* the text rather than read it: clearing the field
|
|
24
|
+
* on a form reset or a context switch, and rehydrating an edited line whose key is known but
|
|
25
|
+
* whose label is not in `options` until the search comes back. Remounting via `key` also
|
|
26
|
+
* clears the field, but it drops focus.
|
|
27
|
+
*/
|
|
28
|
+
inputValue?: string;
|
|
20
29
|
options?: Array<string | ComboBoxOption>;
|
|
21
30
|
/**
|
|
22
31
|
* `options` is the final list and React Aria filters nothing locally. Required for server
|
|
@@ -61,4 +70,4 @@ export interface ComboBoxProps {
|
|
|
61
70
|
}
|
|
62
71
|
/** Type-ahead picker for lists too long to scroll — material, cost centre, G/L account.
|
|
63
72
|
* Below ~10 fixed options use Select; for master-data search with several columns use ValueHelpField. */
|
|
64
|
-
export declare function ComboBox({ label, value, defaultValue, onChange, onInputChange, options, description, errorMessage, size, fullWidth, isFilteredExternally, isLoading, loadingLabel, emptyLabel, onLoadMore, className, style, ...rest }: ComboBoxProps): React.JSX.Element;
|
|
73
|
+
export declare function ComboBox({ label, value, defaultValue, onChange, onInputChange, inputValue, options, description, errorMessage, size, fullWidth, isFilteredExternally, isLoading, loadingLabel, emptyLabel, onLoadMore, className, style, ...rest }: ComboBoxProps): React.JSX.Element;
|
|
@@ -17,6 +17,15 @@ export interface ComboBoxProps {
|
|
|
17
17
|
* so a result whose label does not literally contain the typed text is hidden client-side.
|
|
18
18
|
*/
|
|
19
19
|
onInputChange?: (text: string) => void;
|
|
20
|
+
/**
|
|
21
|
+
* The text in the input, controlled. Pair it with `onInputChange` or typing stops working.
|
|
22
|
+
*
|
|
23
|
+
* Needed whenever the parent has to *impose* the text rather than read it: clearing the field
|
|
24
|
+
* on a form reset or a context switch, and rehydrating an edited line whose key is known but
|
|
25
|
+
* whose label is not in `options` until the search comes back. Remounting via `key` also
|
|
26
|
+
* clears the field, but it drops focus.
|
|
27
|
+
*/
|
|
28
|
+
inputValue?: string;
|
|
20
29
|
options?: Array<string | ComboBoxOption>;
|
|
21
30
|
/**
|
|
22
31
|
* `options` is the final list and React Aria filters nothing locally. Required for server
|
|
@@ -61,5 +70,5 @@ export interface ComboBoxProps {
|
|
|
61
70
|
}
|
|
62
71
|
/** Type-ahead picker for lists too long to scroll — material, cost centre, G/L account.
|
|
63
72
|
* Below ~10 fixed options use Select; for master-data search with several columns use ValueHelpField. */
|
|
64
|
-
export declare function ComboBox({ label, value, defaultValue, onChange, onInputChange, options, description, errorMessage, size, fullWidth, isFilteredExternally, isLoading, loadingLabel, emptyLabel, onLoadMore, className, style, ...rest }: ComboBoxProps): React.JSX.Element;
|
|
73
|
+
export declare function ComboBox({ label, value, defaultValue, onChange, onInputChange, inputValue, options, description, errorMessage, size, fullWidth, isFilteredExternally, isLoading, loadingLabel, emptyLabel, onLoadMore, className, style, ...rest }: ComboBoxProps): React.JSX.Element;
|
|
65
74
|
//# sourceMappingURL=ComboBox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,cAAc;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE;AAE1G,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC;IACzC;;;;;;;OAOG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,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,4GAA4G;IAC5G,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;0GAC0G;AAC1G,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAY,
|
|
1
|
+
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,cAAc;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE;AAE1G,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC;IACzC;;;;;;;OAOG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,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,4GAA4G;IAC5G,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;0GAC0G;AAC1G,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,OAAY,EACtG,WAAW,EAAE,YAAY,EAAE,IAAW,EAAE,SAAgB,EAAE,oBAAoB,EAAE,SAAS,EACzF,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,qBAmEjF"}
|
|
@@ -12,6 +12,12 @@ export interface SelectProps {
|
|
|
12
12
|
options?: SelectOption[];
|
|
13
13
|
/** Shown when nothing is selected. */
|
|
14
14
|
placeholder?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Replaces the dictionary's `selectEmpty` inside the popover when `options` is empty. Worth
|
|
17
|
+
* setting whenever you can say *why* the list is empty — "Pick a company first" beats the
|
|
18
|
+
* generic default, and an empty reference table is the usual cause.
|
|
19
|
+
*/
|
|
20
|
+
emptyLabel?: React.ReactNode;
|
|
15
21
|
description?: React.ReactNode;
|
|
16
22
|
errorMessage?: React.ReactNode;
|
|
17
23
|
isInvalid?: boolean;
|
|
@@ -25,4 +31,4 @@ export interface SelectProps {
|
|
|
25
31
|
}
|
|
26
32
|
/** Single-choice picker. Uses a listbox popover rather than a native <select> so the option
|
|
27
33
|
* rows can carry Pire typography and keyboard behaviour is identical across browsers. */
|
|
28
|
-
export declare function Select({ label, value, defaultValue, onChange, options, placeholder, description, errorMessage, size, fullWidth, className, style, ...rest }: SelectProps): React.JSX.Element;
|
|
34
|
+
export declare function Select({ label, value, defaultValue, onChange, options, placeholder, description, errorMessage, emptyLabel, size, fullWidth, className, style, ...rest }: SelectProps): React.JSX.Element;
|
|
@@ -12,6 +12,12 @@ export interface SelectProps {
|
|
|
12
12
|
options?: SelectOption[];
|
|
13
13
|
/** Shown when nothing is selected. */
|
|
14
14
|
placeholder?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Replaces the dictionary's `selectEmpty` inside the popover when `options` is empty. Worth
|
|
17
|
+
* setting whenever you can say *why* the list is empty — "Pick a company first" beats the
|
|
18
|
+
* generic default, and an empty reference table is the usual cause.
|
|
19
|
+
*/
|
|
20
|
+
emptyLabel?: React.ReactNode;
|
|
15
21
|
description?: React.ReactNode;
|
|
16
22
|
errorMessage?: React.ReactNode;
|
|
17
23
|
isInvalid?: boolean;
|
|
@@ -25,5 +31,5 @@ export interface SelectProps {
|
|
|
25
31
|
}
|
|
26
32
|
/** Single-choice picker. Uses a listbox popover rather than a native <select> so the option
|
|
27
33
|
* rows can carry Pire typography and keyboard behaviour is identical across browsers. */
|
|
28
|
-
export declare function Select({ label, value, defaultValue, onChange, options, placeholder, description, errorMessage, size, fullWidth, className, style, ...rest }: SelectProps): React.JSX.Element;
|
|
34
|
+
export declare function Select({ label, value, defaultValue, onChange, options, placeholder, description, errorMessage, emptyLabel, size, fullWidth, className, style, ...rest }: SelectProps): React.JSX.Element;
|
|
29
35
|
//# sourceMappingURL=Select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3F,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,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,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;AAID;0FAC0F;AAC1F,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAY,EAAE,WAAuB,EAClG,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,IAAW,EAAE,SAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,qBA2C/G"}
|
package/dist/components.css
CHANGED
|
@@ -6,6 +6,20 @@
|
|
|
6
6
|
/* ---- focus ---------------------------------------------------------- */
|
|
7
7
|
.pire [data-focus-visible],.pire[data-focus-visible],.pire-focusable[data-focus-visible]{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset)}
|
|
8
8
|
|
|
9
|
+
/* ---- shared utilities ------------------------------------------------
|
|
10
|
+
Classes referenced from component code, and keyframes referenced from the rules below. They
|
|
11
|
+
live here rather than in tokens/base.css because base.css is element resets a consumer
|
|
12
|
+
migrating off Tailwind has to skip, and a skipped reset must not take part of the class
|
|
13
|
+
contract with it. `styles.css.test.ts` enforces that. */
|
|
14
|
+
/* Announced but not drawn. Clip rather than display:none or visibility:hidden, both of which
|
|
15
|
+
remove the node from the accessibility tree along with the pixels. */
|
|
16
|
+
.pire-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
|
|
17
|
+
.pire-numeric{font:var(--type-numeric);letter-spacing:var(--ls-numeric);font-variant-numeric:tabular-nums}
|
|
18
|
+
.pire-eyebrow{font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-secondary)}
|
|
19
|
+
@keyframes pire-toast-in{from{opacity:0;transform:translate(var(--pire-toast-tx,-50%),8px)}to{opacity:1}}
|
|
20
|
+
@keyframes pire-dialog-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
|
|
21
|
+
@keyframes pire-fade-in{from{opacity:0}to{opacity:1}}
|
|
22
|
+
|
|
9
23
|
/* ---- Button --------------------------------------------------------- */
|
|
10
24
|
.pire-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--control-h-md);padding:0 var(--control-pad-x);font:var(--type-body-strong);letter-spacing:var(--ls-body);border-radius:var(--radius-1);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:var(--transition-control);appearance:none}
|
|
11
25
|
.pire-btn[data-size="sm"]{height:var(--control-h-sm)}
|
|
@@ -379,6 +393,12 @@
|
|
|
379
393
|
.pire-linklist-item[data-hovered]{background:var(--surface-hover)}
|
|
380
394
|
.pire-linklist-key{font:var(--type-code)}
|
|
381
395
|
.pire-linklist-text{flex:1;min-width:0;font:var(--type-caption);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
396
|
+
/* emphasis="text": the name is what gets scanned and the code qualifies it — a supplier or
|
|
397
|
+
customer list. Only the treatment moves; the slots keep their meanings, and the component
|
|
398
|
+
reorders the markup so the reading order matches. The name takes over the truncation, because
|
|
399
|
+
whichever slot is primary is the one that should absorb a narrow row. */
|
|
400
|
+
.pire-linklist[data-emphasis="text"] .pire-linklist-text{flex:1;font:var(--type-body);color:var(--text-primary)}
|
|
401
|
+
.pire-linklist[data-emphasis="text"] .pire-linklist-key{flex:0 0 auto;font:var(--type-caption);color:var(--text-secondary)}
|
|
382
402
|
|
|
383
403
|
/* ---- PageHeader / SectionHeader ---------------------------------------- */
|
|
384
404
|
.pire-pageheader{display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap}
|
package/dist/i18n/messages.d.cts
CHANGED
|
@@ -32,6 +32,9 @@ export interface PireMessages {
|
|
|
32
32
|
/** Landmark name of the toast live region. */
|
|
33
33
|
toastRegionLabel: string;
|
|
34
34
|
/** Accessible name of the button that opens a ComboBox's list. */
|
|
35
|
+
/** Shown inside the popover when a Select has no options at all. A Select whose list is empty
|
|
36
|
+
* used not to open, so the field read as broken; this is the text that explains it instead. */
|
|
37
|
+
selectEmpty: string;
|
|
35
38
|
comboBoxShowSuggestions: string;
|
|
36
39
|
/** Row shown in the popover while a server search is in flight. */
|
|
37
40
|
comboBoxLoading: string;
|
package/dist/i18n/messages.d.ts
CHANGED
|
@@ -32,6 +32,9 @@ export interface PireMessages {
|
|
|
32
32
|
/** Landmark name of the toast live region. */
|
|
33
33
|
toastRegionLabel: string;
|
|
34
34
|
/** Accessible name of the button that opens a ComboBox's list. */
|
|
35
|
+
/** Shown inside the popover when a Select has no options at all. A Select whose list is empty
|
|
36
|
+
* used not to open, so the field read as broken; this is the text that explains it instead. */
|
|
37
|
+
selectEmpty: string;
|
|
35
38
|
comboBoxShowSuggestions: string;
|
|
36
39
|
/** Row shown in the popover while a server search is in flight. */
|
|
37
40
|
comboBoxLoading: string;
|
|
@@ -1 +1 @@
|
|
|
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;IAChC,mEAAmE;IACnE,eAAe,EAAE,MAAM,CAAC;IAExB,qEAAqE;IACrE,sBAAsB,EAAE,MAAM,CAAC;IAC/B,uBAAuB,EAAE,MAAM,CAAC;IAChC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,qBAAqB,EAAE,MAAM,CAAC;IAE9B,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;IAErB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,CAAC;IACzB,wEAAwE;IACxE,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,kBAAkB,EAAE,MAAM,CAAC;IAE3B,8DAA8D;IAC9D,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qGAAqG;IACrG,YAAY,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,
|
|
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;oGACgG;IAChG,WAAW,EAAE,MAAM,CAAC;IAEpB,uBAAuB,EAAE,MAAM,CAAC;IAChC,mEAAmE;IACnE,eAAe,EAAE,MAAM,CAAC;IAExB,qEAAqE;IACrE,sBAAsB,EAAE,MAAM,CAAC;IAC/B,uBAAuB,EAAE,MAAM,CAAC;IAChC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,qBAAqB,EAAE,MAAM,CAAC;IAE9B,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;IAErB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,CAAC;IACzB,wEAAwE;IACxE,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,kBAAkB,EAAE,MAAM,CAAC;IAE3B,8DAA8D;IAC9D,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qGAAqG;IACrG,YAAY,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,YAoDxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,YAoDxB,CAAC"}
|
package/dist/index.cjs
CHANGED
|
@@ -782,107 +782,6 @@ function TextArea({
|
|
|
782
782
|
|
|
783
783
|
// src/components/forms/Select.tsx
|
|
784
784
|
var import_react_aria_components11 = require("react-aria-components");
|
|
785
|
-
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
786
|
-
var norm = (o) => typeof o === "string" ? { value: o, label: o, isDisabled: false } : o;
|
|
787
|
-
function Select({
|
|
788
|
-
label,
|
|
789
|
-
value,
|
|
790
|
-
defaultValue,
|
|
791
|
-
onChange,
|
|
792
|
-
options = [],
|
|
793
|
-
placeholder = "Select\u2026",
|
|
794
|
-
description,
|
|
795
|
-
errorMessage,
|
|
796
|
-
size = "md",
|
|
797
|
-
fullWidth = true,
|
|
798
|
-
className,
|
|
799
|
-
style,
|
|
800
|
-
...rest
|
|
801
|
-
}) {
|
|
802
|
-
const items = options.map(norm);
|
|
803
|
-
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
804
|
-
import_react_aria_components11.Select,
|
|
805
|
-
{
|
|
806
|
-
className: cx("pire-field", className),
|
|
807
|
-
style,
|
|
808
|
-
selectedKey: value,
|
|
809
|
-
defaultSelectedKey: defaultValue,
|
|
810
|
-
onSelectionChange: (k) => onChange?.(String(k)),
|
|
811
|
-
placeholder,
|
|
812
|
-
validationBehavior: "aria",
|
|
813
|
-
...rest,
|
|
814
|
-
children: [
|
|
815
|
-
label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_aria_components11.Label, { className: "pire-field-label", children: [
|
|
816
|
-
label,
|
|
817
|
-
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
818
|
-
] }) : null,
|
|
819
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
820
|
-
import_react_aria_components11.Button,
|
|
821
|
-
{
|
|
822
|
-
className: "pire-control",
|
|
823
|
-
"data-size": size,
|
|
824
|
-
"data-full-width": String(fullWidth),
|
|
825
|
-
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
826
|
-
children: [
|
|
827
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components11.SelectValue, { className: "pire-select-value" }),
|
|
828
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "chevron-down", size: 16, className: "pire-leading-icon" })
|
|
829
|
-
]
|
|
830
|
-
}
|
|
831
|
-
),
|
|
832
|
-
description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components11.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
833
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components11.FieldError, { className: "pire-field-error", children: errorMessage }),
|
|
834
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components11.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components11.ListBox, { className: "pire-listbox", items, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components11.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: item.label }) }) })
|
|
835
|
-
]
|
|
836
|
-
}
|
|
837
|
-
);
|
|
838
|
-
}
|
|
839
|
-
|
|
840
|
-
// src/components/forms/Checkbox.tsx
|
|
841
|
-
var import_react_aria_components12 = require("react-aria-components");
|
|
842
|
-
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
843
|
-
function Checkbox({ label, hint, children, className, ...rest }) {
|
|
844
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components12.Checkbox, { className: cx("pire-choice", className), ...rest, children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
845
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "pire-choice-box", "aria-hidden": "true", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "minus", size: 12 }) : isSelected ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "check", size: 12 }) : null }),
|
|
846
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
|
|
847
|
-
label ?? children,
|
|
848
|
-
hint ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "pire-choice-hint", children: hint }) : null
|
|
849
|
-
] })
|
|
850
|
-
] }) });
|
|
851
|
-
}
|
|
852
|
-
|
|
853
|
-
// src/components/forms/Radio.tsx
|
|
854
|
-
var import_react_aria_components13 = require("react-aria-components");
|
|
855
|
-
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
856
|
-
function RadioGroup({ label, description, errorMessage, children, className, ...rest }) {
|
|
857
|
-
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_aria_components13.RadioGroup, { className: cx("pire-field", className), validationBehavior: "aria", ...rest, children: [
|
|
858
|
-
label ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components13.Label, { className: "pire-field-label", children: label }) : null,
|
|
859
|
-
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pire-radiogroup", children }),
|
|
860
|
-
description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components13.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
861
|
-
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components13.FieldError, { className: "pire-field-error", children: errorMessage })
|
|
862
|
-
] });
|
|
863
|
-
}
|
|
864
|
-
function Radio({ label, hint, children, className, ...rest }) {
|
|
865
|
-
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_aria_components13.Radio, { className: cx("pire-choice", className), ...rest, children: [
|
|
866
|
-
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pire-choice-box", "data-radio": "true", "aria-hidden": "true" }),
|
|
867
|
-
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
|
|
868
|
-
label ?? children,
|
|
869
|
-
hint ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pire-choice-hint", children: hint }) : null
|
|
870
|
-
] })
|
|
871
|
-
] });
|
|
872
|
-
}
|
|
873
|
-
|
|
874
|
-
// src/components/forms/Switch.tsx
|
|
875
|
-
var import_react_aria_components14 = require("react-aria-components");
|
|
876
|
-
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
877
|
-
function Switch({ label, children, className, ...rest }) {
|
|
878
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components14.Switch, { className: cx("pire-choice", className), ...rest, children: [
|
|
879
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "pire-switch-track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "pire-switch-thumb" }) }),
|
|
880
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: label ?? children })
|
|
881
|
-
] });
|
|
882
|
-
}
|
|
883
|
-
|
|
884
|
-
// src/components/forms/ComboBox.tsx
|
|
885
|
-
var import_react_aria_components15 = require("react-aria-components");
|
|
886
785
|
|
|
887
786
|
// src/i18n/PireIntlProvider.tsx
|
|
888
787
|
var React6 = __toESM(require("react"), 1);
|
|
@@ -900,6 +799,7 @@ var enMessages = {
|
|
|
900
799
|
inlineMessageDismiss: "Dismiss message",
|
|
901
800
|
toastDismiss: "Dismiss",
|
|
902
801
|
toastRegionLabel: "Notifications",
|
|
802
|
+
selectEmpty: "No options available",
|
|
903
803
|
comboBoxShowSuggestions: "Show suggestions",
|
|
904
804
|
comboBoxLoading: "Searching\u2026",
|
|
905
805
|
datePickerOpenCalendar: "Open calendar",
|
|
@@ -940,6 +840,7 @@ var esMessages = {
|
|
|
940
840
|
inlineMessageDismiss: "Descartar mensaje",
|
|
941
841
|
toastDismiss: "Descartar",
|
|
942
842
|
toastRegionLabel: "Notificaciones",
|
|
843
|
+
selectEmpty: "Sin opciones disponibles",
|
|
943
844
|
comboBoxShowSuggestions: "Mostrar sugerencias",
|
|
944
845
|
comboBoxLoading: "Buscando\u2026",
|
|
945
846
|
datePickerOpenCalendar: "Abrir calendario",
|
|
@@ -970,14 +871,14 @@ var esMessages = {
|
|
|
970
871
|
};
|
|
971
872
|
|
|
972
873
|
// src/i18n/PireIntlProvider.tsx
|
|
973
|
-
var
|
|
874
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
974
875
|
var MessagesContext = React6.createContext(enMessages);
|
|
975
876
|
function PireIntlProvider({ messages, children }) {
|
|
976
877
|
const value = React6.useMemo(
|
|
977
878
|
() => messages ? { ...enMessages, ...messages } : enMessages,
|
|
978
879
|
[messages]
|
|
979
880
|
);
|
|
980
|
-
return /* @__PURE__ */ (0,
|
|
881
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MessagesContext.Provider, { value, children });
|
|
981
882
|
}
|
|
982
883
|
function usePireMessages() {
|
|
983
884
|
return React6.useContext(MessagesContext);
|
|
@@ -987,7 +888,119 @@ function useMessage(key, override) {
|
|
|
987
888
|
return override ?? messages[key];
|
|
988
889
|
}
|
|
989
890
|
|
|
891
|
+
// src/components/forms/Select.tsx
|
|
892
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
893
|
+
var norm = (o) => typeof o === "string" ? { value: o, label: o, isDisabled: false } : o;
|
|
894
|
+
function Select({
|
|
895
|
+
label,
|
|
896
|
+
value,
|
|
897
|
+
defaultValue,
|
|
898
|
+
onChange,
|
|
899
|
+
options = [],
|
|
900
|
+
placeholder = "Select\u2026",
|
|
901
|
+
description,
|
|
902
|
+
errorMessage,
|
|
903
|
+
emptyLabel,
|
|
904
|
+
size = "md",
|
|
905
|
+
fullWidth = true,
|
|
906
|
+
className,
|
|
907
|
+
style,
|
|
908
|
+
...rest
|
|
909
|
+
}) {
|
|
910
|
+
const msg = usePireMessages();
|
|
911
|
+
const items = options.map(norm);
|
|
912
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
913
|
+
import_react_aria_components11.Select,
|
|
914
|
+
{
|
|
915
|
+
className: cx("pire-field", className),
|
|
916
|
+
style,
|
|
917
|
+
selectedKey: value,
|
|
918
|
+
defaultSelectedKey: defaultValue,
|
|
919
|
+
onSelectionChange: (k) => onChange?.(String(k)),
|
|
920
|
+
allowsEmptyCollection: true,
|
|
921
|
+
placeholder,
|
|
922
|
+
validationBehavior: "aria",
|
|
923
|
+
...rest,
|
|
924
|
+
children: [
|
|
925
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_aria_components11.Label, { className: "pire-field-label", children: [
|
|
926
|
+
label,
|
|
927
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
928
|
+
] }) : null,
|
|
929
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
930
|
+
import_react_aria_components11.Button,
|
|
931
|
+
{
|
|
932
|
+
className: "pire-control",
|
|
933
|
+
"data-size": size,
|
|
934
|
+
"data-full-width": String(fullWidth),
|
|
935
|
+
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
936
|
+
children: [
|
|
937
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components11.SelectValue, { className: "pire-select-value" }),
|
|
938
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "chevron-down", size: 16, className: "pire-leading-icon" })
|
|
939
|
+
]
|
|
940
|
+
}
|
|
941
|
+
),
|
|
942
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components11.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
943
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components11.FieldError, { className: "pire-field-error", children: errorMessage }),
|
|
944
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components11.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
945
|
+
import_react_aria_components11.ListBox,
|
|
946
|
+
{
|
|
947
|
+
className: "pire-listbox",
|
|
948
|
+
items,
|
|
949
|
+
renderEmptyState: () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "pire-listbox-status", role: "status", "aria-live": "polite", children: emptyLabel ?? msg.selectEmpty }),
|
|
950
|
+
children: (item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components11.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: item.label })
|
|
951
|
+
}
|
|
952
|
+
) })
|
|
953
|
+
]
|
|
954
|
+
}
|
|
955
|
+
);
|
|
956
|
+
}
|
|
957
|
+
|
|
958
|
+
// src/components/forms/Checkbox.tsx
|
|
959
|
+
var import_react_aria_components12 = require("react-aria-components");
|
|
960
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
961
|
+
function Checkbox({ label, hint, children, className, ...rest }) {
|
|
962
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components12.Checkbox, { className: cx("pire-choice", className), ...rest, children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
963
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pire-choice-box", "aria-hidden": "true", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "minus", size: 12 }) : isSelected ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check", size: 12 }) : null }),
|
|
964
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
|
|
965
|
+
label ?? children,
|
|
966
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pire-choice-hint", children: hint }) : null
|
|
967
|
+
] })
|
|
968
|
+
] }) });
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
// src/components/forms/Radio.tsx
|
|
972
|
+
var import_react_aria_components13 = require("react-aria-components");
|
|
973
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
974
|
+
function RadioGroup({ label, description, errorMessage, children, className, ...rest }) {
|
|
975
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components13.RadioGroup, { className: cx("pire-field", className), validationBehavior: "aria", ...rest, children: [
|
|
976
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components13.Label, { className: "pire-field-label", children: label }) : null,
|
|
977
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "pire-radiogroup", children }),
|
|
978
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components13.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
979
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components13.FieldError, { className: "pire-field-error", children: errorMessage })
|
|
980
|
+
] });
|
|
981
|
+
}
|
|
982
|
+
function Radio({ label, hint, children, className, ...rest }) {
|
|
983
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components13.Radio, { className: cx("pire-choice", className), ...rest, children: [
|
|
984
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "pire-choice-box", "data-radio": "true", "aria-hidden": "true" }),
|
|
985
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { children: [
|
|
986
|
+
label ?? children,
|
|
987
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "pire-choice-hint", children: hint }) : null
|
|
988
|
+
] })
|
|
989
|
+
] });
|
|
990
|
+
}
|
|
991
|
+
|
|
992
|
+
// src/components/forms/Switch.tsx
|
|
993
|
+
var import_react_aria_components14 = require("react-aria-components");
|
|
994
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
995
|
+
function Switch({ label, children, className, ...rest }) {
|
|
996
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_aria_components14.Switch, { className: cx("pire-choice", className), ...rest, children: [
|
|
997
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "pire-switch-track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "pire-switch-thumb" }) }),
|
|
998
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: label ?? children })
|
|
999
|
+
] });
|
|
1000
|
+
}
|
|
1001
|
+
|
|
990
1002
|
// src/components/forms/ComboBox.tsx
|
|
1003
|
+
var import_react_aria_components15 = require("react-aria-components");
|
|
991
1004
|
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
992
1005
|
var norm2 = (o) => typeof o === "string" ? { value: o, label: o } : o;
|
|
993
1006
|
function ComboBox({
|
|
@@ -996,6 +1009,7 @@ function ComboBox({
|
|
|
996
1009
|
defaultValue,
|
|
997
1010
|
onChange,
|
|
998
1011
|
onInputChange,
|
|
1012
|
+
inputValue,
|
|
999
1013
|
options = [],
|
|
1000
1014
|
description,
|
|
1001
1015
|
errorMessage,
|
|
@@ -1025,6 +1039,7 @@ function ComboBox({
|
|
|
1025
1039
|
if (isLoading) return;
|
|
1026
1040
|
onChange?.(k == null ? null : String(k));
|
|
1027
1041
|
},
|
|
1042
|
+
inputValue,
|
|
1028
1043
|
onInputChange,
|
|
1029
1044
|
...collection,
|
|
1030
1045
|
allowsEmptyCollection: isFilteredExternally || isLoading,
|
|
@@ -1467,7 +1482,7 @@ function Dialog({
|
|
|
1467
1482
|
] }),
|
|
1468
1483
|
showClose ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { icon: "x", label: msg.dialogClose, size: "sm", onPress: close }) : null
|
|
1469
1484
|
] }) : null,
|
|
1470
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "pire-dialog-body", children }),
|
|
1485
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "pire-dialog-body", children }) : null,
|
|
1471
1486
|
footer ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
|
|
1472
1487
|
] }) })
|
|
1473
1488
|
}
|
|
@@ -2968,13 +2983,18 @@ function colorForSegment(index) {
|
|
|
2968
2983
|
// src/components/data/LinkList.tsx
|
|
2969
2984
|
var import_react_aria_components29 = require("react-aria-components");
|
|
2970
2985
|
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
2971
|
-
function LinkList({ items, onSelect, className, ...rest }) {
|
|
2972
|
-
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cx("pire-linklist", className), role: "list", ...rest, children: items.map((item) =>
|
|
2973
|
-
item.
|
|
2974
|
-
item.
|
|
2975
|
-
|
|
2976
|
-
item.
|
|
2977
|
-
|
|
2986
|
+
function LinkList({ items, onSelect, emphasis = "key", className, ...rest }) {
|
|
2987
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cx("pire-linklist", className), role: "list", "data-emphasis": emphasis, ...rest, children: items.map((item) => {
|
|
2988
|
+
const keySlot = item.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "pire-linklist-key", children: item.key }) : null;
|
|
2989
|
+
const textSlot = item.text ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "pire-linklist-text", children: item.text }) : null;
|
|
2990
|
+
const [first, second] = emphasis === "text" ? [textSlot, keySlot] : [keySlot, textSlot];
|
|
2991
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { role: "listitem", className: "pire-linklist-row", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_aria_components29.Button, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
|
|
2992
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { name: item.icon, size: 16, style: { color: "var(--text-secondary)" } }) : null,
|
|
2993
|
+
first,
|
|
2994
|
+
second,
|
|
2995
|
+
item.trailing
|
|
2996
|
+
] }) }, item.id);
|
|
2997
|
+
}) });
|
|
2978
2998
|
}
|
|
2979
2999
|
|
|
2980
3000
|
// src/components/layout/PageBand.tsx
|