@caratlogic/design-system 0.1.36 → 0.1.38

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.
Files changed (31) hide show
  1. package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.d.ts +1 -1
  2. package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.d.ts.map +1 -1
  3. package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.types.d.ts +2 -0
  4. package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.types.d.ts.map +1 -1
  5. package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.utils.d.ts +1 -0
  6. package/dist/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.utils.d.ts.map +1 -1
  7. package/dist/components/molecules/Filters/Filters.types.d.ts +1 -1
  8. package/dist/components/molecules/Filters/Filters.types.d.ts.map +1 -1
  9. package/dist/components/molecules/Filters/PickListFilter/PickListFilter.d.ts.map +1 -1
  10. package/dist/components/molecules/Filters/PickListFilter/PickListFilter.utils.d.ts +2 -1
  11. package/dist/components/molecules/Filters/PickListFilter/PickListFilter.utils.d.ts.map +1 -1
  12. package/dist/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.d.ts +2 -2
  13. package/dist/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.d.ts.map +1 -1
  14. package/dist/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.types.d.ts +4 -1
  15. package/dist/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.types.d.ts.map +1 -1
  16. package/dist/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.utils.d.ts +2 -0
  17. package/dist/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.utils.d.ts.map +1 -1
  18. package/dist/components/molecules/Filters/ScaleRangeFilter/index.d.ts +1 -1
  19. package/dist/components/molecules/Filters/ScaleRangeFilter/index.d.ts.map +1 -1
  20. package/dist/components/organisms/Filters/FilterField/FilterField.d.ts.map +1 -1
  21. package/dist/components/organisms/Filters/FilterSurface/FilterSurface.accessibility.d.ts +1 -2
  22. package/dist/components/organisms/Filters/FilterSurface/FilterSurface.accessibility.d.ts.map +1 -1
  23. package/dist/components/organisms/Filters/FilterSurface/FilterSurface.d.ts +2 -2
  24. package/dist/components/organisms/Filters/FilterSurface/FilterSurface.d.ts.map +1 -1
  25. package/dist/components/organisms/Filters/FilterSurface/FilterSurface.types.d.ts +7 -7
  26. package/dist/components/organisms/Filters/FilterSurface/FilterSurface.types.d.ts.map +1 -1
  27. package/dist/index.cjs.js +120 -89
  28. package/dist/index.cjs.js.map +1 -1
  29. package/dist/index.esm.js +120 -89
  30. package/dist/index.esm.js.map +1 -1
  31. package/package.json +1 -1
@@ -2,5 +2,5 @@ import type { ReactElement } from 'react';
2
2
  import type { ActiveFilterChipsProps } from './ActiveFilterChips.types';
3
3
  export type { ActiveFilterChip, ActiveFilterChipsProps, ActiveFilterChipsVariant, } from './ActiveFilterChips.types';
4
4
  /** Applied filters as removable chips, with an optional Clear all. */
5
- export declare function ActiveFilterChips({ chips, onRemove, onClearAll, variant, actions, className, }: ActiveFilterChipsProps): ReactElement | null;
5
+ export declare function ActiveFilterChips({ chips, onRemove, onClearAll, variant, actions, collapsible, className, }: ActiveFilterChipsProps): ReactElement | null;
6
6
  //# sourceMappingURL=ActiveFilterChips.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ActiveFilterChips.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAQxE,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,2BAA2B,CAAC;AAEnC,sEAAsE;AACtE,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAkB,EAClB,OAAO,EACP,SAAS,GACV,EAAE,sBAAsB,GAAG,YAAY,GAAG,IAAI,CA4C9C"}
1
+ {"version":3,"file":"ActiveFilterChips.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAS1C,OAAO,KAAK,EAEV,sBAAsB,EAEvB,MAAM,2BAA2B,CAAC;AASnC,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,2BAA2B,CAAC;AAyFnC,sEAAsE;AACtE,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAkB,EAClB,OAAO,EACP,WAAmB,EACnB,SAAS,GACV,EAAE,sBAAsB,GAAG,YAAY,GAAG,IAAI,CA2C9C"}
@@ -14,6 +14,8 @@ export interface ActiveFilterChipsProps {
14
14
  variant?: ActiveFilterChipsVariant;
15
15
  /** Extra controls, e.g. a "Save search" button; with them, Clear all and the actions sit at the row's right end. */
16
16
  actions?: ReactNode;
17
+ /** Keep the chips to one line ending in "+N more" (Clear all stays at the right end); e.g. in a compact header. */
18
+ collapsible?: boolean;
17
19
  className?: string;
18
20
  }
19
21
  //# sourceMappingURL=ActiveFilterChips.types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ActiveFilterChips.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sIAAsI;AACtI,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,oHAAoH;IACpH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
1
+ {"version":3,"file":"ActiveFilterChips.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sIAAsI;AACtI,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,oHAAoH;IACpH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mHAAmH;IACnH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
@@ -3,5 +3,6 @@ import type { ActiveFilterChipsVariant } from './ActiveFilterChips.types';
3
3
  export declare const CHIP_CLASS = "inline-flex h-7 max-w-full items-center gap-1 rounded-md border border-primary/30 bg-primary/5 px-2.5 text-xs text-foreground";
4
4
  export declare const REMOVE_BUTTON_CLASS = "inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-primary/10 hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/30";
5
5
  export declare const CLEAR_ALL_CLASS: string;
6
+ export declare const SHOW_MORE_CLASS: string;
6
7
  export declare function getChipLabelText(label: string, variant: ActiveFilterChipsVariant): string;
7
8
  //# sourceMappingURL=ActiveFilterChips.utils.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ActiveFilterChips.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAE1E,wDAAwD;AACxD,eAAO,MAAM,UAAU,kIAC0G,CAAC;AAElI,eAAO,MAAM,mBAAmB,wNACuL,CAAC;AAExN,eAAO,MAAM,eAAe,QAA0C,CAAC;AAEvE,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,wBAAwB,GAChC,MAAM,CAER"}
1
+ {"version":3,"file":"ActiveFilterChips.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ActiveFilterChips/ActiveFilterChips.utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAE1E,wDAAwD;AACxD,eAAO,MAAM,UAAU,kIAC0G,CAAC;AAElI,eAAO,MAAM,mBAAmB,wNACuL,CAAC;AAExN,eAAO,MAAM,eAAe,QAA0C,CAAC;AAEvE,eAAO,MAAM,eAAe,QAG3B,CAAC;AAEF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,wBAAwB,GAChC,MAAM,CAER"}
@@ -7,7 +7,7 @@ export interface FilterFieldOption {
7
7
  content?: ReactNode;
8
8
  /** Colour hex from settings, rendered as a swatch (e.g. product colours). */
9
9
  swatch?: string;
10
- /** Secondary text on the right of a list row (e.g. a location's type). */
10
+ /** Secondary text under the label in a list row (e.g. a location's type). */
11
11
  hint?: string;
12
12
  /** Matching-item count shown beside the option. */
13
13
  count?: number;
@@ -1 +1 @@
1
- {"version":3,"file":"Filters.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Filters/Filters.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,oHAAoH;IACpH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,gGAAgG;AAChG,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5E,mHAAmH;AACnH,2GAA2G;AAC3G,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,yEAAyE;AACzE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,WAAW,GACX,YAAY,GACZ,WAAW,GACX,gBAAgB,CAAC;AAErB,oHAAoH;AACpH,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,GACL,UAAU,GACV,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,MAAM,WAAW,GACnB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,eAAe,CAAA;CAAE,GACzC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,gBAAgB,CAAA;CAAE,GAC3C;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,GAC9B;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,cAAc,CAAA;CAAE,GACvC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE,KAAK,CAAC,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,2BAA2B,GACnC;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAAA;CAAE,GACjD;IAAE,EAAE,EAAE,KAAK,CAAA;CAAE,CAAC"}
1
+ {"version":3,"file":"Filters.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Filters/Filters.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,oHAAoH;IACpH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,gGAAgG;AAChG,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5E,mHAAmH;AACnH,2GAA2G;AAC3G,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,yEAAyE;AACzE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,WAAW,GACX,YAAY,GACZ,WAAW,GACX,gBAAgB,CAAC;AAErB,oHAAoH;AACpH,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,GACL,UAAU,GACV,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,MAAM,WAAW,GACnB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,eAAe,CAAA;CAAE,GACzC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,gBAAgB,CAAA;CAAE,GAC3C;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,GAC9B;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,cAAc,CAAA;CAAE,GACvC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE,KAAK,CAAC,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,2BAA2B,GACnC;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAAA;CAAE,GACjD;IAAE,EAAE,EAAE,KAAK,CAAA;CAAE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"PickListFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/PickListFilter/PickListFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AA8BjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,YAAY,EACV,mBAAmB,EACnB,cAAc,GACf,MAAM,wBAAwB,CAAC;AAsBhC,qHAAqH;AACrH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAe,EACf,iBAAiB,EACjB,gBAAwB,EACxB,OAAW,EACX,IAAY,EACZ,aAAa,EACb,MAAc,GACf,EAAE,mBAAmB,GAAG,YAAY,CAgLpC"}
1
+ {"version":3,"file":"PickListFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/PickListFilter/PickListFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AA8BjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,YAAY,EACV,mBAAmB,EACnB,cAAc,GACf,MAAM,wBAAwB,CAAC;AAsBhC,qHAAqH;AACrH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAe,EACf,iBAAiB,EACjB,gBAAwB,EACxB,OAAW,EACX,IAAY,EACZ,aAAa,EACb,MAAc,GACf,EAAE,mBAAmB,GAAG,YAAY,CAwLpC"}
@@ -15,11 +15,12 @@ export declare const FILL_WRAPPER_CLASS_NAME = "flex min-h-0 flex-1 flex-col";
15
15
  export declare const LIST_COLUMN_MIN_WIDTH = "10rem";
16
16
  export declare const getOptionsScrollClassName: (fill: boolean) => string;
17
17
  export declare const LIST_ROW_CLASS_NAME: string;
18
- /** `neutral` on plain rows and tiles, `tinted` on a lightly selected one, `solid` on a filled (primary) one. */
18
+ /** Light outlined pill (like the picked-value chips) on plain and lightly selected options; `solid` keeps it readable on a filled one. */
19
19
  export type CountBadgeTone = 'neutral' | 'tinted' | 'solid';
20
20
  /** How many items carry the option, as a small round badge at the right. */
21
21
  export declare const getCountBadgeClassName: (tone: CountBadgeTone) => string;
22
22
  export declare const COUNT_BADGE_CLASS_NAME: string;
23
+ /** Plain digits (no thousands separators), so the badge stays compact. */
23
24
  export declare const formatOptionCount: (count: number) => string;
24
25
  /** Picking a value: a single-choice list replaces (or clears) it, a multi-choice list toggles it. */
25
26
  export declare const pickValue: (values: readonly string[], value: string, single: boolean) => string[];
@@ -1 +1 @@
1
- {"version":3,"file":"PickListFilter.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/PickListFilter/PickListFilter.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,gBAAgB,EAEjB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,SAAS,iBAAiB,EAAE,EACrC,KAAK,EAAE,MAAM,GACZ,iBAAiB,EAAE,CAMrB;AAED,eAAO,MAAM,gBAAgB,yBAAmB,CAAC;AAEjD,6FAA6F;AAC7F,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,UAAQ,GAAG,MAAM,CAQ5E;AAED,mFAAmF;AACnF,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,gFAAgF;AAChF,eAAO,MAAM,yBAAyB,6BAA6B,CAAC;AAEpE,iIAAiI;AACjI,eAAO,MAAM,uBAAuB,4CACO,CAAC;AAC5C,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAEtE,kFAAkF;AAClF,eAAO,MAAM,qBAAqB,UAAU,CAAC;AAE7C,eAAO,MAAM,yBAAyB,GAAI,MAAM,OAAO,KAAG,MACE,CAAC;AAE7D,eAAO,MAAM,mBAAmB,QAA0B,CAAC;AAE3D,gHAAgH;AAChH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAQ5D,4EAA4E;AAC5E,eAAO,MAAM,sBAAsB,GAAI,MAAM,cAAc,KAAG,MAI3D,CAAC;AAEJ,eAAO,MAAM,sBAAsB,QAAoC,CAAC;AAExE,eAAO,MAAM,iBAAiB,GAAI,OAAO,MAAM,KAAG,MACnB,CAAC;AAEhC,qGAAqG;AACrG,eAAO,MAAM,SAAS,GACpB,QAAQ,SAAS,MAAM,EAAE,EACzB,OAAO,MAAM,EACb,QAAQ,OAAO,KACd,MAAM,EAGR,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,qBAAqB,oDACiB,CAAC;AAEpD,2FAA2F;AAC3F,eAAO,MAAM,wBAAwB,oGAC8D,CAAC;AAEpG,eAAO,MAAM,qBAAqB,yJAA+B,CAAC"}
1
+ {"version":3,"file":"PickListFilter.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/PickListFilter/PickListFilter.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,gBAAgB,EAEjB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,SAAS,iBAAiB,EAAE,EACrC,KAAK,EAAE,MAAM,GACZ,iBAAiB,EAAE,CAMrB;AAED,eAAO,MAAM,gBAAgB,yBAAmB,CAAC;AAEjD,6FAA6F;AAC7F,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,UAAQ,GAAG,MAAM,CAQ5E;AAED,mFAAmF;AACnF,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,gFAAgF;AAChF,eAAO,MAAM,yBAAyB,6BAA6B,CAAC;AAEpE,iIAAiI;AACjI,eAAO,MAAM,uBAAuB,4CACO,CAAC;AAC5C,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAEtE,kFAAkF;AAClF,eAAO,MAAM,qBAAqB,UAAU,CAAC;AAE7C,eAAO,MAAM,yBAAyB,GAAI,MAAM,OAAO,KAAG,MACE,CAAC;AAE7D,eAAO,MAAM,mBAAmB,QAA0B,CAAC;AAE3D,0IAA0I;AAC1I,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAS5D,4EAA4E;AAC5E,eAAO,MAAM,sBAAsB,GAAI,MAAM,cAAc,KAAG,MAI3D,CAAC;AAEJ,eAAO,MAAM,sBAAsB,QAAoC,CAAC;AAExE,0EAA0E;AAC1E,eAAO,MAAM,iBAAiB,GAAI,OAAO,MAAM,KAAG,MAAuB,CAAC;AAE1E,qGAAqG;AACrG,eAAO,MAAM,SAAS,GACpB,QAAQ,SAAS,MAAM,EAAE,EACzB,OAAO,MAAM,EACb,QAAQ,OAAO,KACd,MAAM,EAGR,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,qBAAqB,oDACiB,CAAC;AAEpD,2FAA2F;AAC3F,eAAO,MAAM,wBAAwB,oGAC8D,CAAC;AAEpG,eAAO,MAAM,qBAAqB,yJAA+B,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import type { ReactElement } from 'react';
2
2
  import type { ScaleRangeFilterProps } from './ScaleRangeFilter.types';
3
- export type { ScaleRangeFilterProps, ScalePosition, } from './ScaleRangeFilter.types';
3
+ export type { ScaleLayout, ScaleRangeFilterProps, ScalePosition, } from './ScaleRangeFilter.types';
4
4
  /** Ordered-scale filter: click a start option, then an end option. */
5
- export declare function ScaleRangeFilter({ options, value, onChange, ariaLabel, columns, fill, }: ScaleRangeFilterProps): ReactElement;
5
+ export declare function ScaleRangeFilter({ options, value, onChange, ariaLabel, layout, columns, fill, }: ScaleRangeFilterProps): ReactElement;
6
6
  //# sourceMappingURL=ScaleRangeFilter.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ScaleRangeFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAa1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,YAAY,EACV,qBAAqB,EACrB,aAAa,GACd,MAAM,0BAA0B,CAAC;AAElC,sEAAsE;AACtE,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAY,GACb,EAAE,qBAAqB,GAAG,YAAY,CAsCtC"}
1
+ {"version":3,"file":"ScaleRangeFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAc1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,YAAY,EACV,WAAW,EACX,qBAAqB,EACrB,aAAa,GACd,MAAM,0BAA0B,CAAC;AAElC,sEAAsE;AACtE,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAgB,EAChB,OAAO,EACP,IAAY,GACb,EAAE,qBAAqB,GAAG,YAAY,CAyEtC"}
@@ -5,11 +5,14 @@ export interface ScaleRangeFilterProps {
5
5
  value?: ScaleRangeValue;
6
6
  onChange: (value: ScaleRangeValue | undefined) => void;
7
7
  ariaLabel: string;
8
- /** Fixed column count; omit to fit as many tiles as the width allows. */
8
+ /** `pills` (default) wrap like the other ≤4-option pick lists; `tiles` is a grid of boxes. */
9
+ layout?: ScaleLayout;
10
+ /** Tiles only: fixed column count; omit to fit as many tiles as the width allows. */
9
11
  columns?: number;
10
12
  /** Larger tiles, for a roomy card; the compact size suits popovers. */
11
13
  fill?: boolean;
12
14
  }
15
+ export type ScaleLayout = 'pills' | 'tiles';
13
16
  /** Where an option sits relative to the selected range. */
14
17
  export type ScalePosition = 'end' | 'between' | 'outside';
15
18
  export interface UseScaleRangeFilterArgs {
@@ -1 +1 @@
1
- {"version":3,"file":"ScaleRangeFilter.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,qBAAqB;IACpC,6BAA6B;IAC7B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,2DAA2D;AAC3D,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AAE1D,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,KAAK,IAAI,CAAC;CACxD;AAED,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC"}
1
+ {"version":3,"file":"ScaleRangeFilter.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,qBAAqB;IACpC,6BAA6B;IAC7B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5C,2DAA2D;AAC3D,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AAE1D,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,KAAK,IAAI,CAAC;CACxD;AAED,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC"}
@@ -4,6 +4,8 @@ import type { CountBadgeTone } from '../PickListFilter/PickListFilter.utils';
4
4
  export declare function getScalePosition(options: readonly FilterFieldOption[], value: ScaleRangeValue | undefined, option: string): ScalePosition;
5
5
  /** Next range after clicking `scale`: a fresh single-option range, or the end of the pending one. */
6
6
  export declare function getNextScaleRange(anchor: string | null, option: string): ScaleRangeValue;
7
+ /** A pill like the other pick lists' (`Single`, `Parcel`), coloured by where it sits in the range. */
8
+ export declare const getScalePillClassName: (position: ScalePosition) => string;
7
9
  export declare function getScaleButtonClassName(position: ScalePosition, fill?: boolean, hasCount?: boolean): string;
8
10
  /** The count badge follows the tile: plain, tinted inside the range, solid on an end. */
9
11
  export declare const getScaleCountTone: (position: ScalePosition) => CountBadgeTone;
@@ -1 +1 @@
1
- {"version":3,"file":"ScaleRangeFilter.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.utils.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAE7E,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,SAAS,iBAAiB,EAAE,EACrC,KAAK,EAAE,eAAe,GAAG,SAAS,EAClC,MAAM,EAAE,MAAM,GACb,aAAa,CAMf;AAED,qGAAqG;AACrG,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,GAAG,IAAI,EACrB,MAAM,EAAE,MAAM,GACb,eAAe,CAIjB;AAED,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,aAAa,EACvB,IAAI,UAAQ,EACZ,QAAQ,UAAQ,GACf,MAAM,CAcR;AAED,yFAAyF;AACzF,eAAO,MAAM,iBAAiB,GAAI,UAAU,aAAa,KAAG,cACkB,CAAC"}
1
+ {"version":3,"file":"ScaleRangeFilter.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/ScaleRangeFilter.utils.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAE7E,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,SAAS,iBAAiB,EAAE,EACrC,KAAK,EAAE,eAAe,GAAG,SAAS,EAClC,MAAM,EAAE,MAAM,GACb,aAAa,CAMf;AAED,qGAAqG;AACrG,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,GAAG,IAAI,EACrB,MAAM,EAAE,MAAM,GACb,eAAe,CAIjB;AASD,sGAAsG;AACtG,eAAO,MAAM,qBAAqB,GAAI,UAAU,aAAa,KAAG,MAK7D,CAAC;AAEJ,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,aAAa,EACvB,IAAI,UAAQ,EACZ,QAAQ,UAAQ,GACf,MAAM,CASR;AAED,yFAAyF;AACzF,eAAO,MAAM,iBAAiB,GAAI,UAAU,aAAa,KAAG,cACkB,CAAC"}
@@ -1,3 +1,3 @@
1
1
  export { ScaleRangeFilter } from './ScaleRangeFilter';
2
- export type { ScaleRangeFilterProps, ScalePosition } from './ScaleRangeFilter';
2
+ export type { ScaleLayout, ScaleRangeFilterProps, ScalePosition, } from './ScaleRangeFilter';
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Filters/ScaleRangeFilter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,WAAW,EACX,qBAAqB,EACrB,aAAa,GACd,MAAM,oBAAoB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"FilterField.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterField/FilterField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAc1C,OAAO,KAAK,EACV,oBAAoB,EAEpB,uBAAuB,EACvB,gBAAgB,EACjB,MAAM,qBAAqB,CAAC;AAsB7B,YAAY,EACV,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,EACf,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAE7B,iIAAiI;AACjI,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,IAAI,EACJ,SAAS,GACV,EAAE,uBAAuB,GAAG,YAAY,CAgGxC;AAED,kHAAkH;AAClH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,SAAS,GACV,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG,YAAY,CAwD/C;AAED,yJAAyJ;AACzJ,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,MAAM,EACN,SAAS,EACT,IAAI,GACL,EAAE,oBAAoB,GAAG,YAAY,CAoCrC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAOjE"}
1
+ {"version":3,"file":"FilterField.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterField/FilterField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAc1C,OAAO,KAAK,EACV,oBAAoB,EAEpB,uBAAuB,EACvB,gBAAgB,EACjB,MAAM,qBAAqB,CAAC;AAsB7B,YAAY,EACV,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,EACf,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAE7B,iIAAiI;AACjI,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,IAAI,EACJ,SAAS,GACV,EAAE,uBAAuB,GAAG,YAAY,CAiGxC;AAED,kHAAkH;AAClH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,SAAS,GACV,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG,YAAY,CAwD/C;AAED,yJAAyJ;AACzJ,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,MAAM,EACN,SAAS,EACT,IAAI,GACL,EAAE,oBAAoB,GAAG,YAAY,CAoCrC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAOjE"}
@@ -1,6 +1,5 @@
1
- /** Both leave without applying — the draft is discarded. */
1
+ /** Leaves without applying; the draft is discarded. */
2
2
  export declare const BACK_LABEL = "Back without applying";
3
- export declare const CLOSE_LABEL = "Close without applying";
4
3
  export declare const LOADING_LABEL = "Loading filters";
5
4
  export declare const ERROR_TITLE = "Couldn't load filters";
6
5
  export declare const DEFAULT_ERROR_MESSAGE = "Something went wrong while loading the filters. Check your connection and try again.";
@@ -1 +1 @@
1
- {"version":3,"file":"FilterSurface.accessibility.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterSurface/FilterSurface.accessibility.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,eAAO,MAAM,UAAU,0BAA0B,CAAC;AAClD,eAAO,MAAM,WAAW,2BAA2B,CAAC;AAEpD,eAAO,MAAM,aAAa,oBAAoB,CAAC;AAC/C,eAAO,MAAM,WAAW,0BAA0B,CAAC;AACnD,eAAO,MAAM,qBAAqB,yFACsD,CAAC;AACzF,eAAO,MAAM,WAAW,cAAc,CAAC"}
1
+ {"version":3,"file":"FilterSurface.accessibility.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterSurface/FilterSurface.accessibility.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,eAAO,MAAM,UAAU,0BAA0B,CAAC;AAElD,eAAO,MAAM,aAAa,oBAAoB,CAAC;AAC/C,eAAO,MAAM,WAAW,0BAA0B,CAAC;AACnD,eAAO,MAAM,qBAAqB,yFACsD,CAAC;AACzF,eAAO,MAAM,WAAW,cAAc,CAAC"}
@@ -1,8 +1,8 @@
1
1
  import { type ReactElement } from 'react';
2
2
  import type { FilterSurfaceGroupProps, FilterSurfaceMoreProps, FilterSurfaceProps } from './FilterSurface.types';
3
3
  export type { FilterSurfaceGroupProps, FilterSurfaceMoreProps, FilterSurfaceProps, FilterSurfaceStatus, } from './FilterSurface.types';
4
- /** Full-page filter screen (e.g. an advanced search): header, scrolling card grid, sticky apply footer. */
5
- export declare function FilterSurface({ title, headerActions, footerChips, footerActions, onClose, status, errorMessage, onRetry, skeleton, children, }: FilterSurfaceProps): ReactElement;
4
+ /** Full-page filter screen (e.g. an advanced search): one sticky header with every action, then the scrolling card grid. */
5
+ export declare function FilterSurface({ title, headerActions, primaryActions, chips, onClose, status, errorMessage, onRetry, skeleton, children, }: FilterSurfaceProps): ReactElement;
6
6
  export declare function FilterSurfaceGroup({ title, masonry, className, children, }: FilterSurfaceGroupProps): ReactElement;
7
7
  /** Collapsed "More filters" divider that reveals extra cards. */
8
8
  export declare function FilterSurfaceMore({ label, defaultExpanded, children, }: FilterSurfaceMoreProps): ReactElement;
@@ -1 +1 @@
1
- {"version":3,"file":"FilterSurface.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterSurface/FilterSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAgBpD,OAAO,KAAK,EACV,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EACV,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B,2GAA2G;AAC3G,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAa,EACb,WAAW,EACX,aAAa,EACb,OAAO,EACP,MAAgB,EAChB,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,GAAG,YAAY,CA2DnC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAwBxC;AAED,iEAAiE;AACjE,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,eAAe,EACf,QAAQ,GACT,EAAE,sBAAsB,GAAG,YAAY,CA0BvC"}
1
+ {"version":3,"file":"FilterSurface.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterSurface/FilterSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAepD,OAAO,KAAK,EACV,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EACV,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B,4HAA4H;AAC5H,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAa,EACb,cAAc,EACd,KAAK,EACL,OAAO,EACP,MAAgB,EAChB,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,GAAG,YAAY,CA2CnC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAwBxC;AAED,iEAAiE;AACjE,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,eAAe,EACf,QAAQ,GACT,EAAE,sBAAsB,GAAG,YAAY,CA0BvC"}
@@ -1,15 +1,15 @@
1
1
  import type { ReactNode } from 'react';
2
2
  export interface FilterSurfaceProps {
3
3
  title: string;
4
- /** Top-right actions, e.g. Saved searches and Reset. */
4
+ /** Secondary header actions, e.g. Saved searches. */
5
5
  headerActions?: ReactNode;
6
- /** Sticky footer, left: the draft's filter chips. */
7
- footerChips?: ReactNode;
8
- /** Sticky footer, right: e.g. Save search and "Show 37 results". */
9
- footerActions?: ReactNode;
10
- /** Escape closes the surface without applying. */
6
+ /** The header's right end, e.g. the solid "Show 37 gems". */
7
+ primaryActions?: ReactNode;
8
+ /** Fills the header between the back arrow and the actions, e.g. the "Filtered by" chips with Clear all. */
9
+ chips?: ReactNode;
10
+ /** The back arrow and Escape leave without applying. */
11
11
  onClose: () => void;
12
- /** `loading` shows skeleton cards and `error` an error panel in place of the cards; the footer shows only when `ready`. */
12
+ /** `loading` shows skeleton cards and `error` an error panel in place of the cards; the primary actions and chips show only when `ready`. */
13
13
  status?: FilterSurfaceStatus;
14
14
  /** Error panel text. Default explains the filters couldn't load. */
15
15
  errorMessage?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"FilterSurface.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterSurface/FilterSurface.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oEAAoE;IACpE,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,kDAAkD;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,2HAA2H;IAC3H,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB"}
1
+ {"version":3,"file":"FilterSurface.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Filters/FilterSurface/FilterSurface.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,4GAA4G;IAC5G,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6IAA6I;IAC7I,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB"}
package/dist/index.cjs.js CHANGED
@@ -15737,7 +15737,7 @@ function getOptionRowClassName(selected = false, className) {
15737
15737
  }
15738
15738
  /** A selectable pill (chip options, range presets); one height and shape everywhere. */
15739
15739
  function getPillClassName(selected) {
15740
- return getSelectableOptionClassName(selected, 'inline-flex h-8 items-center gap-1.5 rounded-full px-3');
15740
+ return getSelectableOptionClassName(selected, 'inline-flex h-8 items-center gap-1.5 rounded-sm px-3');
15741
15741
  }
15742
15742
  /** Search box above a list (pick lists, saved searches); matches the inputs' height and corners. */
15743
15743
  const FILTER_SEARCH_BOX_CLASS_NAME = 'flex h-9 items-center gap-2 rounded-md border border-input bg-card px-3 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30';
@@ -15918,14 +15918,15 @@ const LIST_COLUMN_MIN_WIDTH = '10rem';
15918
15918
  const getOptionsScrollClassName = (fill) => fill ? OPTIONS_FILL_CLASS_NAME : OPTIONS_SCROLL_CLASS_NAME;
15919
15919
  const LIST_ROW_CLASS_NAME = getOptionRowClassName();
15920
15920
  const COUNT_BADGE_TONES = {
15921
- neutral: 'bg-muted text-muted-foreground',
15922
- tinted: 'bg-primary/10 text-primary',
15923
- solid: 'bg-primary-foreground/20 text-primary-foreground',
15921
+ neutral: 'border-primary/30 bg-primary/5 text-primary',
15922
+ tinted: 'border-primary/30 bg-primary/5 text-primary',
15923
+ solid: 'border-primary-foreground/60 bg-primary-foreground/20 text-primary-foreground',
15924
15924
  };
15925
15925
  /** How many items carry the option, as a small round badge at the right. */
15926
- const getCountBadgeClassName = (tone) => cn('inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-medium tabular-nums', COUNT_BADGE_TONES[tone]);
15926
+ const getCountBadgeClassName = (tone) => cn('inline-flex h-5 min-w-7 shrink-0 items-center justify-center rounded-full border px-1.5 text-xs font-medium tabular-nums', COUNT_BADGE_TONES[tone]);
15927
15927
  const COUNT_BADGE_CLASS_NAME = getCountBadgeClassName('neutral');
15928
- const formatOptionCount = (count) => count.toLocaleString('en-US');
15928
+ /** Plain digits (no thousands separators), so the badge stays compact. */
15929
+ const formatOptionCount = (count) => String(count);
15929
15930
  /** Picking a value: a single-choice list replaces (or clears) it, a multi-choice list toggles it. */
15930
15931
  const pickValue = (values, value, single) => {
15931
15932
  if (!single)
@@ -15961,7 +15962,7 @@ function PickListFilter({ options, value, onChange, ariaLabel, layout = 'list',
15961
15962
  });
15962
15963
  const radioName = React.useId();
15963
15964
  const scrollClassName = getOptionsScrollClassName(fill);
15964
- // Rows with a right-hand hint read best in one column.
15965
+ // Two-line rows (label + hint) read best in one column.
15965
15966
  const multiColumn = fill && !options.some((option) => option.hint);
15966
15967
  const wrapperClassName = fill ? FILL_WRAPPER_CLASS_NAME : undefined;
15967
15968
  const toggle = (option) => onChange(pickValue(value, option.value, single));
@@ -15974,12 +15975,14 @@ function PickListFilter({ options, value, onChange, ariaLabel, layout = 'list',
15974
15975
  ? getGridColumnsStyle(undefined, LIST_COLUMN_MIN_WIDTH)
15975
15976
  : undefined, wrapperClassName: wrapperClassName, children: visibleOptions.map((option) => (jsxRuntime.jsxs("label", { className: LIST_ROW_CLASS_NAME, children: [single ? (jsxRuntime.jsx("input", { type: "radio", name: radioName, checked: value.includes(option.value),
15976
15977
  // A click on the picked row clears it (radios can't be unticked natively).
15977
- onClick: () => toggle(option), onChange: () => undefined, className: LIST_RADIO_CLASS_NAME })) : (jsxRuntime.jsx(Checkbox, { className: LIST_CHECKBOX_CLASS_NAME, checked: value.includes(option.value), onCheckedChange: () => toggle(option) })), option.content ? (jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: option.content })) : (jsxRuntime.jsx(TruncatedLabel, { text: option.label, className: "flex-1" })), option.hint && (jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: option.hint })), jsxRuntime.jsx(OptionSwatch, { color: option.swatch }), option.count !== undefined && (jsxRuntime.jsx("span", { className: COUNT_BADGE_CLASS_NAME, children: formatOptionCount(option.count) }))] }, option.value))) })] }));
15978
+ onClick: () => toggle(option), onChange: () => undefined, className: LIST_RADIO_CLASS_NAME })) : (jsxRuntime.jsx(Checkbox, { className: LIST_CHECKBOX_CLASS_NAME, checked: value.includes(option.value), onCheckedChange: () => toggle(option) })), option.content ? (jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: option.content })) : option.hint ? (
15979
+ // The hint sits under the label so a long name keeps the row's full width.
15980
+ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [jsxRuntime.jsx(TruncatedLabel, { text: option.label }), jsxRuntime.jsx(TruncatedLabel, { text: option.hint, className: "text-xs text-muted-foreground" })] })) : (jsxRuntime.jsx(TruncatedLabel, { text: option.label, className: "flex-1" })), jsxRuntime.jsx(OptionSwatch, { color: option.swatch }), option.count !== undefined && (jsxRuntime.jsx("span", { className: COUNT_BADGE_CLASS_NAME, children: formatOptionCount(option.count) }))] }, option.value))) })] }));
15978
15981
  }
15979
15982
  if (layout === 'tiles') {
15980
15983
  return (jsxRuntime.jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('grid content-start gap-1.5', scrollClassName), style: getGridColumnsStyle(columns), children: visibleOptions.map((option) => (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getTileClassName(value.includes(option.value), option.count !== undefined), children: [jsxRuntime.jsx(TruncatedLabel, { text: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: getCountBadgeClassName(value.includes(option.value) ? 'tinted' : 'neutral'), children: formatOptionCount(option.count) }))] }, option.value))) }));
15981
15984
  }
15982
- return (jsxRuntime.jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('flex flex-wrap content-start gap-1.5', scrollClassName), children: visibleOptions.map((option) => (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getChipClassName(value.includes(option.value)), children: [jsxRuntime.jsx(OptionSwatch, { color: option.swatch, round: true }), jsxRuntime.jsx("span", { children: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: "text-xs font-normal tabular-nums text-muted-foreground", children: formatOptionCount(option.count) }))] }, option.value))) }));
15985
+ return (jsxRuntime.jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('flex flex-wrap content-start gap-1.5', scrollClassName), children: visibleOptions.map((option) => (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getChipClassName(value.includes(option.value)), children: [jsxRuntime.jsx(OptionSwatch, { color: option.swatch, round: true }), jsxRuntime.jsx("span", { children: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: getCountBadgeClassName(value.includes(option.value) ? 'tinted' : 'neutral'), children: formatOptionCount(option.count) }))] }, option.value))) }));
15983
15986
  }
15984
15987
 
15985
15988
  const TRIGGER_BASE = 'h-9 !w-fit shadow-[0_1px_2px_0_rgba(0,0,0,0.05)] gap-2 text-foreground bg-card hover:bg-muted/40 border border-border rounded-lg text-sm font-medium px-3';
@@ -38594,6 +38597,70 @@ function fieldTypeIcon(type) {
38594
38597
  return FIELD_TYPE_ICONS[type] ?? Type;
38595
38598
  }
38596
38599
 
38600
+ const SAVED_SEARCH_CHIP_CLASS_NAME = 'inline-flex h-6 min-w-0 max-w-full items-center rounded-full border border-primary/30 bg-primary/5 px-2 text-xs text-foreground';
38601
+ /** Children laid out below the first one's line. */
38602
+ function countWrapped(items) {
38603
+ if (items.length === 0)
38604
+ return 0;
38605
+ const firstTop = items[0].offsetTop;
38606
+ return items.filter((item) => item.offsetTop > firstTop).length;
38607
+ }
38608
+ const getShowMoreLabel = (hiddenCount) => `+${hiddenCount} more`;
38609
+
38610
+ /**
38611
+ * Fits chips on one line with the "+N more" link right after the last one. Renders every chip, counts
38612
+ * how many wrap, then drops chips until the link itself fits; a resize starts the measurement over.
38613
+ */
38614
+ function useChipOverflow(chips, enabled) {
38615
+ const [list, setList] = React.useState(null);
38616
+ const [expanded, setExpanded] = React.useState(false);
38617
+ const [visibleCount, setVisibleCount] = React.useState(chips.length);
38618
+ const collapsed = enabled && !expanded;
38619
+ const [measuredLength, setMeasuredLength] = React.useState(chips.length);
38620
+ if (measuredLength !== chips.length) {
38621
+ setMeasuredLength(chips.length);
38622
+ setVisibleCount(chips.length);
38623
+ }
38624
+ React.useLayoutEffect(() => {
38625
+ if (!collapsed || !list)
38626
+ return;
38627
+ const items = Array.from(list.children);
38628
+ if (visibleCount >= chips.length) {
38629
+ const wrapped = countWrapped(items);
38630
+ if (wrapped > 0)
38631
+ setVisibleCount(chips.length - wrapped);
38632
+ return;
38633
+ }
38634
+ // The last child is the "+N more" link; if it wrapped, give it one more chip's room.
38635
+ if (countWrapped(items) > 0 && visibleCount > 1)
38636
+ setVisibleCount(visibleCount - 1);
38637
+ }, [collapsed, list, visibleCount, chips.length]);
38638
+ React.useEffect(() => {
38639
+ if (!collapsed || !list)
38640
+ return;
38641
+ let width = list.clientWidth;
38642
+ const observer = new ResizeObserver(() => {
38643
+ if (list.clientWidth === width)
38644
+ return;
38645
+ width = list.clientWidth;
38646
+ setVisibleCount(chips.length);
38647
+ });
38648
+ observer.observe(list);
38649
+ return () => observer.disconnect();
38650
+ }, [collapsed, list, chips.length]);
38651
+ const shown = collapsed ? Math.min(visibleCount, chips.length) : chips.length;
38652
+ return {
38653
+ listRef: React.useCallback((node) => setList(node), []),
38654
+ expanded,
38655
+ toggle: () => {
38656
+ setExpanded((current) => !current);
38657
+ setVisibleCount(chips.length);
38658
+ },
38659
+ visibleChips: chips.slice(0, shown),
38660
+ hiddenCount: chips.length - shown,
38661
+ };
38662
+ }
38663
+
38597
38664
  const getRemoveChipLabel = (label) => `Remove ${label} filter`;
38598
38665
  const FILTERED_BY_LABEL = 'Filtered by';
38599
38666
 
@@ -38601,16 +38668,33 @@ const FILTERED_BY_LABEL = 'Filtered by';
38601
38668
  const CHIP_CLASS = 'inline-flex h-7 max-w-full items-center gap-1 rounded-md border border-primary/30 bg-primary/5 px-2.5 text-xs text-foreground';
38602
38669
  const REMOVE_BUTTON_CLASS = 'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-primary/10 hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/30';
38603
38670
  const CLEAR_ALL_CLASS = cn(FILTER_LINK_CLASS_NAME, 'underline');
38671
+ const SHOW_MORE_CLASS = cn(FILTER_LINK_CLASS_NAME, 'whitespace-nowrap px-1 underline underline-offset-2');
38604
38672
  function getChipLabelText(label, variant) {
38605
38673
  return variant === 'inline' ? `${label}:` : label;
38606
38674
  }
38607
38675
 
38676
+ function Chip({ chip, variant, onRemove }) {
38677
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "shrink-0 font-semibold", children: getChipLabelText(chip.label, variant) }), jsxRuntime.jsx(TruncatedLabel, { text: chip.value }), onRemove && (jsxRuntime.jsx("button", { type: "button", "aria-label": getRemoveChipLabel(chip.label), onClick: () => onRemove(chip.id), className: REMOVE_BUTTON_CLASS, children: jsxRuntime.jsx(X$2, { "aria-hidden": "true", className: "size-3" }) }))] }));
38678
+ }
38679
+ /** One line of chips ending in "+N more"; Clear all and the actions stay at the right end. */
38680
+ function CollapsibleChips({ chips, onRemove, variant = 'inline', clearAll, actions, className, }) {
38681
+ const { listRef, expanded, toggle, visibleChips, hiddenCount } = useChipOverflow(chips.map((chip) => chip.id), true);
38682
+ const visible = new Set(visibleChips);
38683
+ return (
38684
+ // Centred, so the label and Clear all line up with buttons beside the row even when the chips wrap.
38685
+ jsxRuntime.jsxs("div", { className: cn('flex items-center gap-1.5', className), children: [variant === 'inline' && (jsxRuntime.jsx("span", { className: "mr-0.5 flex h-7 shrink-0 items-center text-xs text-muted-foreground", children: FILTERED_BY_LABEL })), jsxRuntime.jsxs("ul", { ref: listRef, className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children: [chips
38686
+ .filter((chip) => visible.has(chip.id))
38687
+ .map((chip) => (jsxRuntime.jsx("li", { className: CHIP_CLASS, children: jsxRuntime.jsx(Chip, { chip: chip, variant: variant, onRemove: onRemove }) }, chip.id))), (expanded || hiddenCount > 0) && (jsxRuntime.jsx("li", { className: "flex h-7 shrink-0 items-center", children: jsxRuntime.jsx("button", { type: "button", "aria-expanded": expanded, onClick: toggle, className: SHOW_MORE_CLASS, children: expanded ? 'Show less' : getShowMoreLabel(hiddenCount) }) }))] }), (clearAll || actions) && (jsxRuntime.jsxs("div", { className: "ml-1.5 flex h-7 shrink-0 items-center gap-3", children: [clearAll, actions] }))] }));
38688
+ }
38608
38689
  /** Applied filters as removable chips, with an optional Clear all. */
38609
- function ActiveFilterChips({ chips, onRemove, onClearAll, variant = 'inline', actions, className, }) {
38690
+ function ActiveFilterChips({ chips, onRemove, onClearAll, variant = 'inline', actions, collapsible = false, className, }) {
38610
38691
  if (chips.length === 0)
38611
38692
  return null;
38612
38693
  const clearAll = onClearAll && (jsxRuntime.jsx("button", { type: "button", onClick: onClearAll, className: CLEAR_ALL_CLASS, children: "Clear all" }));
38613
- return (jsxRuntime.jsxs("div", { className: cn('flex flex-wrap items-center gap-1.5', className), children: [variant === 'inline' && (jsxRuntime.jsx("span", { className: "mr-0.5 text-xs text-muted-foreground", children: FILTERED_BY_LABEL })), chips.map((chip) => (jsxRuntime.jsxs("span", { className: CHIP_CLASS, children: [jsxRuntime.jsx("span", { className: "shrink-0 font-semibold", children: getChipLabelText(chip.label, variant) }), jsxRuntime.jsx(TruncatedLabel, { text: chip.value }), onRemove && (jsxRuntime.jsx("button", { type: "button", "aria-label": getRemoveChipLabel(chip.label), onClick: () => onRemove(chip.id), className: REMOVE_BUTTON_CLASS, children: jsxRuntime.jsx(X$2, { "aria-hidden": "true", className: "size-3" }) }))] }, chip.id))), actions ? (
38694
+ if (collapsible) {
38695
+ return (jsxRuntime.jsx(CollapsibleChips, { chips: chips, onRemove: onRemove, variant: variant, clearAll: clearAll, actions: actions, className: className }));
38696
+ }
38697
+ return (jsxRuntime.jsxs("div", { className: cn('flex flex-wrap items-center gap-1.5', className), children: [variant === 'inline' && (jsxRuntime.jsx("span", { className: "mr-0.5 text-xs text-muted-foreground", children: FILTERED_BY_LABEL })), chips.map((chip) => (jsxRuntime.jsx("span", { className: CHIP_CLASS, children: jsxRuntime.jsx(Chip, { chip: chip, variant: variant, onRemove: onRemove }) }, chip.id))), actions ? (
38614
38698
  // With actions, Clear all joins them at the row's right end.
38615
38699
  jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-3 pl-3", children: [clearAll, actions] })) : (clearAll)] }));
38616
38700
  }
@@ -38812,14 +38896,18 @@ function getNextScaleRange(anchor, option) {
38812
38896
  ? { from: option, to: option }
38813
38897
  : { from: anchor, to: option };
38814
38898
  }
38899
+ const SCALE_POSITION_CLASS_NAMES = {
38900
+ // Unselected options look exactly like unselected pick-list options.
38901
+ outside: getSelectableOptionClassName(false),
38902
+ end: 'border-primary bg-primary font-medium text-primary-foreground',
38903
+ between: 'border-primary/30 bg-primary/10 font-medium text-primary',
38904
+ };
38905
+ /** A pill like the other pick lists' (`Single`, `Parcel`), coloured by where it sits in the range. */
38906
+ const getScalePillClassName = (position) => cn('inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-sm border px-3 text-xs transition-colors', FILTER_FOCUS_RING, SCALE_POSITION_CLASS_NAMES[position]);
38815
38907
  function getScaleButtonClassName(position, fill = false, hasCount = false) {
38816
38908
  return cn('flex min-w-0 cursor-pointer items-center gap-2 rounded-md border transition-colors',
38817
38909
  // With a count: name left, badge right (like a list row); without: name centred.
38818
- hasCount ? 'justify-between text-left' : 'justify-center text-center', fill ? 'min-h-12 px-2 py-1.5 text-sm' : 'min-h-10 px-1.5 py-1 text-xs', FILTER_FOCUS_RING,
38819
- // Unselected options look exactly like unselected pick-list tiles.
38820
- position === 'outside' && getSelectableOptionClassName(false), position === 'end' &&
38821
- 'border-primary bg-primary font-medium text-primary-foreground', position === 'between' &&
38822
- 'border-primary/30 bg-primary/10 font-medium text-primary');
38910
+ hasCount ? 'justify-between text-left' : 'justify-center text-center', fill ? 'min-h-12 px-2 py-1.5 text-sm' : 'min-h-10 px-1.5 py-1 text-xs', FILTER_FOCUS_RING, SCALE_POSITION_CLASS_NAMES[position]);
38823
38911
  }
38824
38912
  /** The count badge follows the tile: plain, tinted inside the range, solid on an end. */
38825
38913
  const getScaleCountTone = (position) => position === 'end' ? 'solid' : position === 'between' ? 'tinted' : 'neutral';
@@ -38839,8 +38927,14 @@ function useScaleRangeFilter({ value, onChange, }) {
38839
38927
  }
38840
38928
 
38841
38929
  /** Ordered-scale filter: click a start option, then an end option. */
38842
- function ScaleRangeFilter({ options, value, onChange, ariaLabel, columns, fill = false, }) {
38930
+ function ScaleRangeFilter({ options, value, onChange, ariaLabel, layout = 'pills', columns, fill = false, }) {
38843
38931
  const { selectOption } = useScaleRangeFilter({ value, onChange });
38932
+ if (layout === 'pills') {
38933
+ return (jsxRuntime.jsx("div", { role: "group", "aria-label": ariaLabel, className: "flex flex-wrap content-start gap-1.5", children: options.map((option) => {
38934
+ const position = getScalePosition(options, value, option.value);
38935
+ return (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": position !== 'outside', "aria-label": option.label, onClick: () => selectOption(option.value), className: getScalePillClassName(position), children: [jsxRuntime.jsx("span", { children: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: getCountBadgeClassName(getScaleCountTone(position)), children: formatOptionCount(option.count) }))] }, option.value));
38936
+ }) }));
38937
+ }
38844
38938
  return (jsxRuntime.jsx("div", { role: "group", "aria-label": ariaLabel, className: fill ? 'grid gap-2' : 'grid gap-1.5', style: getGridColumnsStyle(columns), children: options.map((option) => {
38845
38939
  const position = getScalePosition(options, value, option.value);
38846
38940
  return (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": position !== 'outside', "aria-label": option.label, onClick: () => selectOption(option.value), className: getScaleButtonClassName(position, fill, option.count !== undefined), children: [jsxRuntime.jsx(TruncatedLabel, { text: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: getCountBadgeClassName(getScaleCountTone(position)), children: formatOptionCount(option.count) }))] }, option.value));
@@ -38854,7 +38948,7 @@ const TILE_KEYS = ['a', 'b', 'c', 'd'];
38854
38948
  const CARD_CLASS_NAME = 'flex h-full min-w-0 flex-col gap-3 rounded-xl border border-border bg-card p-4';
38855
38949
 
38856
38950
  function Pills({ count }) {
38857
- return (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: PILL_WIDTHS.slice(0, count).map((width) => (jsxRuntime.jsx(SquareSkeleton, { height: 32, width: width, rounded: "full" }, width))) }));
38951
+ return (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: PILL_WIDTHS.slice(0, count).map((width) => (jsxRuntime.jsx(SquareSkeleton, { height: 32, width: width, rounded: "sm" }, width))) }));
38858
38952
  }
38859
38953
  function Body({ variant, }) {
38860
38954
  switch (variant) {
@@ -39164,70 +39258,6 @@ function TriStateFilter({ value, onChange, ariaLabel, compact = false, }) {
39164
39258
  }) }));
39165
39259
  }
39166
39260
 
39167
- const SAVED_SEARCH_CHIP_CLASS_NAME = 'inline-flex h-6 min-w-0 max-w-full items-center rounded-full border border-primary/30 bg-primary/5 px-2 text-xs text-foreground';
39168
- /** Children laid out below the first one's line. */
39169
- function countWrapped(items) {
39170
- if (items.length === 0)
39171
- return 0;
39172
- const firstTop = items[0].offsetTop;
39173
- return items.filter((item) => item.offsetTop > firstTop).length;
39174
- }
39175
- const getShowMoreLabel = (hiddenCount) => `+${hiddenCount} more`;
39176
-
39177
- /**
39178
- * Fits chips on one line with the "+N more" link right after the last one. Renders every chip, counts
39179
- * how many wrap, then drops chips until the link itself fits; a resize starts the measurement over.
39180
- */
39181
- function useChipOverflow(chips, enabled) {
39182
- const [list, setList] = React.useState(null);
39183
- const [expanded, setExpanded] = React.useState(false);
39184
- const [visibleCount, setVisibleCount] = React.useState(chips.length);
39185
- const collapsed = enabled && !expanded;
39186
- const [measuredLength, setMeasuredLength] = React.useState(chips.length);
39187
- if (measuredLength !== chips.length) {
39188
- setMeasuredLength(chips.length);
39189
- setVisibleCount(chips.length);
39190
- }
39191
- React.useLayoutEffect(() => {
39192
- if (!collapsed || !list)
39193
- return;
39194
- const items = Array.from(list.children);
39195
- if (visibleCount >= chips.length) {
39196
- const wrapped = countWrapped(items);
39197
- if (wrapped > 0)
39198
- setVisibleCount(chips.length - wrapped);
39199
- return;
39200
- }
39201
- // The last child is the "+N more" link; if it wrapped, give it one more chip's room.
39202
- if (countWrapped(items) > 0 && visibleCount > 1)
39203
- setVisibleCount(visibleCount - 1);
39204
- }, [collapsed, list, visibleCount, chips.length]);
39205
- React.useEffect(() => {
39206
- if (!collapsed || !list)
39207
- return;
39208
- let width = list.clientWidth;
39209
- const observer = new ResizeObserver(() => {
39210
- if (list.clientWidth === width)
39211
- return;
39212
- width = list.clientWidth;
39213
- setVisibleCount(chips.length);
39214
- });
39215
- observer.observe(list);
39216
- return () => observer.disconnect();
39217
- }, [collapsed, list, chips.length]);
39218
- const shown = collapsed ? Math.min(visibleCount, chips.length) : chips.length;
39219
- return {
39220
- listRef: React.useCallback((node) => setList(node), []),
39221
- expanded,
39222
- toggle: () => {
39223
- setExpanded((current) => !current);
39224
- setVisibleCount(chips.length);
39225
- },
39226
- visibleChips: chips.slice(0, shown),
39227
- hiddenCount: chips.length - shown,
39228
- };
39229
- }
39230
-
39231
39261
  /** Read-only filter summaries of a saved search, as pills; optionally one line ending in "+N more". */
39232
39262
  function SavedSearchChipList({ chips, emptyText = 'No filters', collapsible = false, className, }) {
39233
39263
  const { listRef, expanded, toggle, visibleChips, hiddenCount } = useChipOverflow(chips, collapsible);
@@ -77051,7 +77081,7 @@ const getDropdownPlaceholder = (field) => field.inputPlaceholder ??
77051
77081
  `${field.single ? 'Any' : 'Select'} ${field.label.toLowerCase()}`;
77052
77082
  /** Popover variant: the same control and layout as the card (pills up to 4 options, then the list); tile grids drop to two columns. */
77053
77083
  function toPopoverField(field) {
77054
- if (field.type === 'scale' ||
77084
+ if ((field.type === 'scale' && field.layout === 'tiles') ||
77055
77085
  (field.type === 'list' && resolveListLayout(field) === 'tiles')) {
77056
77086
  return { ...field, columns: POPOVER_TILE_COLUMNS };
77057
77087
  }
@@ -77084,7 +77114,7 @@ function FilterFieldControl({ field, value, onChange, fiscalYearStartMonth, fill
77084
77114
  return (jsxRuntime.jsx(PickListFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'list')?.values ?? [], onChange: (values) => onChange(toListValue(values)), layout: layout, searchPlaceholder: layout === 'list' ? field.searchPlaceholder : undefined, columns: field.columns, single: field.single }));
77085
77115
  }
77086
77116
  case 'scale':
77087
- return (jsxRuntime.jsx(ScaleRangeFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'scale')?.range, onChange: (range) => onChange(toScaleValue(range)), columns: field.columns, fill: fill }));
77117
+ return (jsxRuntime.jsx(ScaleRangeFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'scale')?.range, onChange: (range) => onChange(toScaleValue(range)), layout: field.layout === 'tiles' ? 'tiles' : 'pills', columns: field.columns, fill: fill }));
77088
77118
  case 'number':
77089
77119
  return (jsxRuntime.jsx(NumberRangeInputs, { ariaLabel: field.label, value: valueOfType(value, 'number')?.range, onChange: (range) => onChange(toNumberValue(range)), presets: field.presets, presetsLabel: field.presetsLabel }));
77090
77120
  case 'ids':
@@ -77130,9 +77160,8 @@ function FilterField(props) {
77130
77160
  return mode === 'cell' ? (jsxRuntime.jsx(FilterFieldCell, { ...rest })) : (jsxRuntime.jsx(FilterFieldCard, { mode: mode, ...rest }));
77131
77161
  }
77132
77162
 
77133
- /** Both leave without applying — the draft is discarded. */
77163
+ /** Leaves without applying; the draft is discarded. */
77134
77164
  const BACK_LABEL = 'Back without applying';
77135
- const CLOSE_LABEL = 'Close without applying';
77136
77165
  const LOADING_LABEL = 'Loading filters';
77137
77166
  const ERROR_TITLE = "Couldn't load filters";
77138
77167
  const DEFAULT_ERROR_MESSAGE = 'Something went wrong while loading the filters. Check your connection and try again.';
@@ -77202,10 +77231,12 @@ function MasonryItem({ children }) {
77202
77231
  return (jsxRuntime.jsx("div", { style: span > 0 ? { gridRowEnd: `span ${span}` } : undefined, children: jsxRuntime.jsx("div", { ref: ref, className: "pb-3", children: children }) }));
77203
77232
  }
77204
77233
 
77205
- /** Full-page filter screen (e.g. an advanced search): header, scrolling card grid, sticky apply footer. */
77206
- function FilterSurface({ title, headerActions, footerChips, footerActions, onClose, status = 'ready', errorMessage, onRetry, skeleton, children, }) {
77234
+ /** Full-page filter screen (e.g. an advanced search): one sticky header with every action, then the scrolling card grid. */
77235
+ function FilterSurface({ title, headerActions, primaryActions, chips, onClose, status = 'ready', errorMessage, onRetry, skeleton, children, }) {
77207
77236
  useCloseOnEscape(onClose);
77208
- return (jsxRuntime.jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxRuntime.jsxs("header", { className: "sticky top-0 z-20 flex shrink-0 flex-wrap items-end justify-between gap-3 bg-background px-3 pt-2 pb-3", children: [jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": BACK_LABEL, title: BACK_LABEL, onClick: onClose, children: jsxRuntime.jsx(ArrowLeft, {}) }), jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-foreground", children: title })] }) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [headerActions, jsxRuntime.jsx(IconButton, { appearance: "outline", size: "md", "aria-label": CLOSE_LABEL, title: CLOSE_LABEL, onClick: onClose, children: jsxRuntime.jsx(X$2, {}) })] })] }), jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-3", children: status === 'loading' ? (jsxRuntime.jsx(FilterSurfaceSkeleton, { children: skeleton })) : status === 'error' ? (jsxRuntime.jsx(FilterSurfaceError, { message: errorMessage ?? DEFAULT_ERROR_MESSAGE, onRetry: onRetry })) : (jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: children })) }), status === 'ready' && (footerChips || footerActions) && (jsxRuntime.jsxs("footer", { className: "sticky bottom-0 z-20 flex flex-wrap items-center justify-between gap-3 border-t border-border bg-card px-3 py-2", children: [jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: footerChips }), jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: footerActions })] }))] }));
77237
+ const ready = status === 'ready';
77238
+ const actions = ready ? primaryActions : undefined;
77239
+ return (jsxRuntime.jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxRuntime.jsxs("header", { className: "sticky top-0 z-20 flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 bg-background px-3 py-2.5", children: [jsxRuntime.jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": BACK_LABEL, title: BACK_LABEL, onClick: onClose, children: jsxRuntime.jsx(ArrowLeft, {}) }), jsxRuntime.jsx("h1", { className: "sr-only", children: title }), jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: ready && chips }), jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [headerActions, actions] })] }), jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-3", children: status === 'loading' ? (jsxRuntime.jsx(FilterSurfaceSkeleton, { children: skeleton })) : status === 'error' ? (jsxRuntime.jsx(FilterSurfaceError, { message: errorMessage ?? DEFAULT_ERROR_MESSAGE, onRetry: onRetry })) : (jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: children })) })] }));
77209
77240
  }
77210
77241
  function FilterSurfaceGroup({ title, masonry = false, className, children, }) {
77211
77242
  return (jsxRuntime.jsxs("section", { className: "flex flex-col gap-3", children: [title && (jsxRuntime.jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-label", children: title })), jsxRuntime.jsx("div", { className: cn('grid grid-cols-1 items-start lg:grid-cols-6', masonry ? MASONRY_GRID_CLASS_NAME : 'gap-3', className), children: masonry