design-zystem 1.0.387 → 1.0.388

package/dist/ui/index.d.mts

@@ -585,10 +585,16 @@ declare const TagSelect: ({ label, options, value, onChange, placeholder, disabl
 interface TagSearchOption {
     value: string;
     label: string;
+    /** Rendered before the label in the suggestions list — e.g. a country
+     * flag for a spoken-language tag. */
+    leading?: ReactNode;
 }
 interface TagLevelItem {
     value: string;
     label: string;
+    /** Rendered before the label on the chip — e.g. a country flag for a
+     * spoken-language tag. */
+    leading?: ReactNode;
     /** Absent: this tag has no level concept — no level badge on its chip, no
      * "Niveau" section in its menu. */
     level?: number;

package/dist/ui/index.d.ts

@@ -585,10 +585,16 @@ declare const TagSelect: ({ label, options, value, onChange, placeholder, disabl
 interface TagSearchOption {
     value: string;
     label: string;
+    /** Rendered before the label in the suggestions list — e.g. a country
+     * flag for a spoken-language tag. */
+    leading?: ReactNode;
 }
 interface TagLevelItem {
     value: string;
     label: string;
+    /** Rendered before the label on the chip — e.g. a country flag for a
+     * spoken-language tag. */
+    leading?: ReactNode;
     /** Absent: this tag has no level concept — no level badge on its chip, no
      * "Niveau" section in its menu. */
     level?: number;

package/dist/ui/index.js

@@ -2891,6 +2891,7 @@ var TagChip = ({
               borderColor: current.border
             },
             children: [
+              tag.leading,
               tag.label,
               hasLevel && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "text-[11px] font-bold", style: { opacity: 0.85 }, children: [
                 "N",
@@ -3099,12 +3100,12 @@ var TagLevelPicker = ({
               width: "var(--radix-popover-trigger-width)",
               border: `1px solid ${BOX_BORDER_COLOR}`
             },
-            children: suggestions.length > 0 ? suggestions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            children: suggestions.length > 0 ? suggestions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
               "button",
               {
                 type: "button",
                 onClick: () => select(option),
-                className: "flex min-h-[38px] w-full shrink-0 items-center rounded-[6px] px-2.5 text-left font-sans text-sm outline-none",
+                className: "flex min-h-[38px] w-full shrink-0 items-center gap-2 rounded-[6px] px-2.5 text-left font-sans text-sm outline-none",
                 style: { color: TEXT_COLOR },
                 onMouseEnter: (event) => {
                   event.currentTarget.style.background = MENU_HOVER_BG;
@@ -3112,7 +3113,10 @@ var TagLevelPicker = ({
                 onMouseLeave: (event) => {
                   event.currentTarget.style.background = "transparent";
                 },
-                children: option.label
+                children: [
+                  option.leading,
+                  option.label
+                ]
               },
               option.value
             )) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(

package/dist/ui/index.mjs

@@ -2587,7 +2587,11 @@ var TagSelect = ({
 };
 
 // src/ui/components/ui/TagLevelPicker.tsx
-import { useMemo, useRef as useRef6, useState as useState6 } from "react";
+import {
+  useMemo,
+  useRef as useRef6,
+  useState as useState6
+} from "react";
 import * as RadixPopover3 from "@radix-ui/react-popover";
 import { Fragment as Fragment2, jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
 var TEXT_COLOR = "#15303B";
@@ -2704,6 +2708,7 @@ var TagChip = ({
               borderColor: current.border
             },
             children: [
+              tag.leading,
               tag.label,
               hasLevel && /* @__PURE__ */ jsxs16("span", { className: "text-[11px] font-bold", style: { opacity: 0.85 }, children: [
                 "N",
@@ -2912,12 +2917,12 @@ var TagLevelPicker = ({
               width: "var(--radix-popover-trigger-width)",
               border: `1px solid ${BOX_BORDER_COLOR}`
             },
-            children: suggestions.length > 0 ? suggestions.map((option) => /* @__PURE__ */ jsx30(
+            children: suggestions.length > 0 ? suggestions.map((option) => /* @__PURE__ */ jsxs16(
               "button",
               {
                 type: "button",
                 onClick: () => select(option),
-                className: "flex min-h-[38px] w-full shrink-0 items-center rounded-[6px] px-2.5 text-left font-sans text-sm outline-none",
+                className: "flex min-h-[38px] w-full shrink-0 items-center gap-2 rounded-[6px] px-2.5 text-left font-sans text-sm outline-none",
                 style: { color: TEXT_COLOR },
                 onMouseEnter: (event) => {
                   event.currentTarget.style.background = MENU_HOVER_BG;
@@ -2925,7 +2930,10 @@ var TagLevelPicker = ({
                 onMouseLeave: (event) => {
                   event.currentTarget.style.background = "transparent";
                 },
-                children: option.label
+                children: [
+                  option.leading,
+                  option.label
+                ]
               },
               option.value
             )) : /* @__PURE__ */ jsx30(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.387",
+  "version": "1.0.388",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",