@panneau/lists 5.0.0-alpha.15 → 5.0.0-alpha.17

package/dist/displays/Displays.css

@@ -47,6 +47,12 @@
     font-size: var(--panneau-font-size-sm);
 }
 
+.panneau-displays-palette-color {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+}
+
 .panneau-displays-swatch {
     flex: none;
     width: 1rem;
@@ -82,7 +88,14 @@
     gap: var(--panneau-space-1);
 }
 
-/* A value after a flag: a country, a phone number. */
+/* Several countries. */
+.panneau-displays-countries {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--panneau-space-1) var(--panneau-space-3);
+}
+
+/* A value after a flag: a country, a region, a phone number. */
 .panneau-displays-flagged {
     display: inline-flex;
     align-items: baseline;
@@ -93,3 +106,8 @@
 .panneau-displays-flag {
     flex: 0 0 auto;
 }
+
+/* The flag of a region is an image: centered on the text, where an emoji sits on its baseline. */
+.panneau-displays-region-flag {
+    align-self: center;
+}

package/dist/displays/Displays.module.js

@@ -7,13 +7,16 @@ var boolean = "panneau-displays-boolean";
 var number = "panneau-displays-number";
 var link = "panneau-displays-link";
 var color = "panneau-displays-color";
+var paletteColor = "panneau-displays-palette-color";
 var swatch = "panneau-displays-swatch";
 var media = "panneau-displays-media";
 var thumbnail = "panneau-displays-thumbnail";
 var code = "panneau-displays-code";
 var tags = "panneau-displays-tags";
+var countries = "panneau-displays-countries";
 var flagged = "panneau-displays-flagged";
 var flag = "panneau-displays-flag";
+var regionFlag = "panneau-displays-region-flag";
 var Displays_module_default = {
 	empty,
 	text,
@@ -24,15 +27,18 @@ var Displays_module_default = {
 	number,
 	link,
 	color,
+	paletteColor,
 	swatch,
 	media,
 	thumbnail,
 	code,
 	tags,
+	countries,
 	flagged,
-	flag
+	flag,
+	regionFlag
 };
 //#endregion
-export { badges, boolean, code, color, Displays_module_default as default, empty, flag, flagged, link, media, number, swatch, tags, text, thumbnail };
+export { badges, boolean, code, color, countries, Displays_module_default as default, empty, flag, flagged, link, media, number, paletteColor, regionFlag, swatch, tags, text, thumbnail };
 
 //# sourceMappingURL=Displays.module.js.map

package/dist/displays/Displays.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Displays.module.js","names":[],"sources":["../../src/displays/Displays.module.css"],"sourcesContent":[".empty {\n    color: var(--panneau-color-text-muted);\n}\n\n.text {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow-wrap: anywhere;\n}\n\n.badges {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n}\n\n.boolean {\n    display: inline-flex;\n    align-items: center;\n}\n\n.true {\n    color: var(--panneau-color-success);\n}\n\n.false {\n    color: var(--panneau-color-text-muted);\n}\n\n.number {\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n.link {\n    color: var(--panneau-color-link);\n    overflow-wrap: anywhere;\n}\n\n.color {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.swatch {\n    flex: none;\n    width: 1rem;\n    height: 1rem;\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.media {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.thumbnail {\n    flex: none;\n    width: 2.5rem;\n    height: 2.5rem;\n    object-fit: cover;\n    background-color: var(--panneau-color-surface-sunken);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.code {\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-font-size-sm);\n    white-space: nowrap;\n}\n\n.tags {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n}\n\n/* A value after a flag: a country, a phone number. */\n.flagged {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n}\n\n.flag {\n    flex: 0 0 auto;\n}\n"],"mappings":""}
+{"version":3,"file":"Displays.module.js","names":[],"sources":["../../src/displays/Displays.module.css"],"sourcesContent":[".empty {\n    color: var(--panneau-color-text-muted);\n}\n\n.text {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow-wrap: anywhere;\n}\n\n.badges {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n}\n\n.boolean {\n    display: inline-flex;\n    align-items: center;\n}\n\n.true {\n    color: var(--panneau-color-success);\n}\n\n.false {\n    color: var(--panneau-color-text-muted);\n}\n\n.number {\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n.link {\n    color: var(--panneau-color-link);\n    overflow-wrap: anywhere;\n}\n\n.color {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.paletteColor {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.swatch {\n    flex: none;\n    width: 1rem;\n    height: 1rem;\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.media {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.thumbnail {\n    flex: none;\n    width: 2.5rem;\n    height: 2.5rem;\n    object-fit: cover;\n    background-color: var(--panneau-color-surface-sunken);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.code {\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-font-size-sm);\n    white-space: nowrap;\n}\n\n.tags {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n}\n\n/* Several countries. */\n.countries {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1) var(--panneau-space-3);\n}\n\n/* A value after a flag: a country, a region, a phone number. */\n.flagged {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n}\n\n.flag {\n    flex: 0 0 auto;\n}\n\n/* The flag of a region is an image: centered on the text, where an emoji sits on its baseline. */\n.regionFlag {\n    align-self: center;\n}\n"],"mappings":""}

package/dist/displays/displays.d.ts

@@ -16,6 +16,14 @@ export declare function BooleanDisplay({ value }: DisplayProps): import("react")
 export declare function DateDisplay({ value }: DisplayProps): import("react").JSX.Element;
 /** A date and a time, in the format and the time zone of the user. */
 export declare function DateTimeDisplay({ value }: DisplayProps): import("react").JSX.Element;
+/**
+ * A range of dates (decision 0053), in the format of the locale: `Nov 4 – 6, 2026`. Date-times show
+ * in the zone of the value or the field, with its short name when it isn't the user's. A range open
+ * at one end shows `From Nov 4, 2026` or `Until Dec 1, 2026`.
+ */
+export declare function DateRangeDisplay({ value, field }: DisplayProps): import("react").JSX.Element;
+/** An amount of money (decision 0053), in the currency format of the locale: `1 250,00 $`. */
+export declare function MoneyDisplay({ value }: DisplayProps): import("react").JSX.Element;
 /** A time of day (`14:30`), in the format of the locale. */
 export declare function TimeDisplay({ value }: DisplayProps): import("react").JSX.Element;
 /** The labels of the selected options, as badges. */
@@ -28,17 +36,22 @@ export declare function UrlDisplay({ value }: DisplayProps): import("react").JSX
 export declare function EmailDisplay({ value }: DisplayProps): import("react").JSX.Element;
 /**
  * A link that calls the phone number: the flag of its country and the number in its international
- * format (`+1 514 555 0199`). A value that isn't E.164 shows as it is.
+ * format (`+1 514 555 0199`), with its extension (`, ext. 123`) when its field allows one
+ * (`settings.extension`) or the column has no field. A value that isn't E.164 shows as it is.
  */
-export declare function TelDisplay({ value }: DisplayProps): import("react").JSX.Element;
-/** A country: its flag and its name in the user's locale. */
+export declare function TelDisplay({ value, field }: DisplayProps): import("react").JSX.Element;
+/** A country, or several (`multiple`): their flags and their names in the user's locale. */
 export declare function CountryDisplay({ value }: DisplayProps): import("react").JSX.Element;
 /**
- * A region: its name in the user's locale, from its country in the item (the field's `from`) or
- * the field's settings. A region that Panneau doesn't know shows as it is.
+ * A region: its flag, when it has one, and its name in the user's locale, from its country in the
+ * item (the field's `from`) or the field's settings. A region that Panneau doesn't know shows as it
+ * is.
  */
 export declare function RegionDisplay({ value, field, item }: DisplayProps): import("react").JSX.Element;
-/** A duration in seconds, with its units: `1 h 5 min`, to the precision of its field. */
+/**
+ * A duration with its units, `1 h 5 min` or `2 d 4 h`: in the unit of its field (seconds by
+ * default), from its largest unit to its precision.
+ */
 export declare function DurationDisplay({ value, field }: DisplayProps): import("react").JSX.Element;
 /** JSON on one line, shortened. */
 export declare function JsonDisplay({ value }: DisplayProps): import("react").JSX.Element;
@@ -48,8 +61,18 @@ export declare function TagsDisplay({ value, field }: DisplayProps): import("rea
 export declare function EmbedDisplay({ value }: DisplayProps): import("react").JSX.Element;
 /** A place: its address, or its coordinates. */
 export declare function LocationDisplay({ value }: DisplayProps): import("react").JSX.Element;
-/** A swatch, with the color's code. */
-export declare function ColorDisplay({ value }: DisplayProps): import("react").JSX.Element;
+/** An address on one line, in the order of its country, after the flag of its country. */
+export declare function AddressDisplay({ value }: DisplayProps): import("react").JSX.Element;
+/**
+ * A link: the icon of its type, and its label in the user's locale, or its page or its URL. It
+ * opens its URL when it has one, in a new tab when the link does.
+ */
+export declare function LinkDisplay({ value }: DisplayProps): import("react").JSX.Element;
+/**
+ * A swatch, with the color's code. A color of the field's palette (`settings.palette`) shows its
+ * swatch and its label.
+ */
+export declare function ColorDisplay({ value, field }: DisplayProps): import("react").JSX.Element;
 /** A thumbnail and the name of a media item (or of the first one). */
 export declare function MediaDisplay({ value }: DisplayProps): import("react").JSX.Element;
 /**

package/dist/displays/displays.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"displays.d.ts","sourceRoot":"","sources":["../../src/displays/displays.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI3D,kGAAkG;AAClG,wBAAgB,UAAU,gCAMzB;AAWD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAczD;AAED,0BAA0B;AAC1B,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAStD;AAED,6CAA6C;AAC7C,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAQpD;AAED,4CAA4C;AAC5C,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAcrD;AAkBD,2CAA2C;AAC3C,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAOlD;AAED,sEAAsE;AACtE,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAWtD;AAED,4DAA4D;AAC5D,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAQlD;AAED,qDAAqD;AACrD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAkB3D;AAED,mCAAmC;AACnC,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUtD;AAED,iCAAiC;AACjC,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASjD;AAED,mCAAmC;AACnC,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASnD;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAsBjD;AAED,6DAA6D;AAC7D,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAgBrD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,YAAY,+BASjE;AAED,yFAAyF;AACzF,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAM7D;AAED,mCAAmC;AACnC,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUlD;AAED,yDAAyD;AACzD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAezD;AAED,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAuBnD;AAED,gDAAgD;AAChD,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAkBtD;AAED,uCAAuC;AACvC,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUnD;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAenD;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAyBlE,CAAC"}
+{"version":3,"file":"displays.d.ts","sourceRoot":"","sources":["../../src/displays/displays.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI3D,kGAAkG;AAClG,wBAAgB,UAAU,gCAMzB;AAWD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAkBzD;AAED,0BAA0B;AAC1B,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAetD;AAED,6CAA6C;AAC7C,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAQpD;AAED,4CAA4C;AAC5C,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAcrD;AAkBD,2CAA2C;AAC3C,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAOlD;AAED,sEAAsE;AACtE,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAWtD;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAqB9D;AAED,8FAA8F;AAC9F,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAOnD;AAED,4DAA4D;AAC5D,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAQlD;AAED,qDAAqD;AACrD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAkB3D;AAED,mCAAmC;AACnC,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUtD;AAED,iCAAiC;AACjC,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASjD;AAED,mCAAmC;AACnC,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASnD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAmCxD;AAwBD,4FAA4F;AAC5F,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAiBrD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,YAAY,+BAsBjE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAa7D;AAED,mCAAmC;AACnC,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUlD;AAED,yDAAyD;AACzD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAezD;AAED,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAuBnD;AAED,gDAAgD;AAChD,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAsBtD;AAED,0FAA0F;AAC1F,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAsBrD;AAID;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAiClD;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BA0B1D;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAmBnD;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CA6BlE,CAAC"}