@windrun-huaiin/third-ui 14.4.3 → 15.0.0

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-medium-image-zoom/dist/Controlled.mjs

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import ReactDOM from 'react-dom';
 import { IEnlarge, ICompress } from './icons.mjs';
 import { getStyleGhost, getImgSrc, testImg, testImgLoaded, testSvg, adjustSvgIDs, testDiv, getImgAlt, getStyleModalImg } from './utils.mjs';
@@ -11,9 +11,9 @@ const defaultBodyAttrs = {
     width: '',
 };
 function Controlled(props) {
-    return React.createElement(ControlledBase, { ...props });
+    return React__default.createElement(ControlledBase, { ...props });
 }
-class ControlledBase extends React.Component {
+class ControlledBase extends React__default.Component {
     constructor() {
         super(...arguments);
         this.state = {
@@ -24,11 +24,11 @@ class ControlledBase extends React.Component {
             shouldRefresh: false,
             styleGhost: {},
         };
-        this.refContent = React.createRef();
-        this.refDialog = React.createRef();
-        this.refModalContent = React.createRef();
-        this.refModalImg = React.createRef();
-        this.refWrap = React.createRef();
+        this.refContent = React__default.createRef();
+        this.refDialog = React__default.createRef();
+        this.refModalContent = React__default.createRef();
+        this.refModalImg = React__default.createRef();
+        this.refWrap = React__default.createRef();
         this.imgEl = null;
         this.isScaling = false;
         this.prevBodyAttrs = defaultBodyAttrs;
@@ -371,24 +371,24 @@ class ControlledBase extends React.Component {
             : {};
         let modalContent = null;
         if (hasImage) {
-            const modalImg = isImg || isDiv ? (React.createElement("img", { alt: imgAlt, crossOrigin: imgCrossOrigin, sizes: imgSizes, src: imgSrc, srcSet: imgSrcSet, ...(isZoomImgLoaded && modalState === "LOADED"
+            const modalImg = isImg || isDiv ? (React__default.createElement("img", { alt: imgAlt, crossOrigin: imgCrossOrigin, sizes: imgSizes, src: imgSrc, srcSet: imgSrcSet, ...(isZoomImgLoaded && modalState === "LOADED"
                     ? zoomImg
-                    : {}), "data-rmiz-modal-img": "", height: this.styleModalImg.height || undefined, id: idModalImg, ref: refModalImg, style: this.styleModalImg, width: this.styleModalImg.width || undefined })) : isSvg ? (React.createElement("div", { "data-rmiz-modal-img": true, ref: refModalImg, style: this.styleModalImg })) : null;
-            const modalBtnUnzoom = (React.createElement("button", { "aria-label": a11yNameButtonUnzoom, "data-rmiz-btn-unzoom": "", onClick: handleBtnUnzoomClick, type: "button" },
-                React.createElement(IconUnzoom, null)));
-            modalContent = ZoomContent ? (React.createElement(ZoomContent, { buttonUnzoom: modalBtnUnzoom, modalState: modalState, img: modalImg, isZoomImgLoaded: isZoomImgLoaded, onUnzoom: handleUnzoom })) : (React.createElement(React.Fragment, null,
+                    : {}), "data-rmiz-modal-img": "", height: this.styleModalImg.height || undefined, id: idModalImg, ref: refModalImg, style: this.styleModalImg, width: this.styleModalImg.width || undefined })) : isSvg ? (React__default.createElement("div", { "data-rmiz-modal-img": true, ref: refModalImg, style: this.styleModalImg })) : null;
+            const modalBtnUnzoom = (React__default.createElement("button", { "aria-label": a11yNameButtonUnzoom, "data-rmiz-btn-unzoom": "", onClick: handleBtnUnzoomClick, type: "button" },
+                React__default.createElement(IconUnzoom, null)));
+            modalContent = ZoomContent ? (React__default.createElement(ZoomContent, { buttonUnzoom: modalBtnUnzoom, modalState: modalState, img: modalImg, isZoomImgLoaded: isZoomImgLoaded, onUnzoom: handleUnzoom })) : (React__default.createElement(React__default.Fragment, null,
                 modalImg,
                 modalBtnUnzoom));
         }
-        return (React.createElement(WrapElement, { "aria-owns": idModal, "data-rmiz": "", ref: refWrap },
-            React.createElement(WrapElement, { "data-rmiz-content": dataContentState, ref: refContent, style: styleContent }, children),
-            hasImage && (React.createElement(WrapElement, { "data-rmiz-ghost": "", style: styleGhost },
-                React.createElement("button", { "aria-label": labelBtnZoom, "data-rmiz-btn-zoom": "", onClick: handleZoom, type: "button" },
-                    React.createElement(IconZoom, null)))),
+        return (React__default.createElement(WrapElement, { "aria-owns": idModal, "data-rmiz": "", ref: refWrap },
+            React__default.createElement(WrapElement, { "data-rmiz-content": dataContentState, ref: refContent, style: styleContent }, children),
+            hasImage && (React__default.createElement(WrapElement, { "data-rmiz-ghost": "", style: styleGhost },
+                React__default.createElement("button", { "aria-label": labelBtnZoom, "data-rmiz-btn-zoom": "", onClick: handleZoom, type: "button" },
+                    React__default.createElement(IconZoom, null)))),
             hasImage &&
-                ReactDOM.createPortal(React.createElement("dialog", { "aria-labelledby": idModalImg, "aria-modal": "true", className: classDialog, "data-rmiz-modal": "", id: idModal, onClick: handleDialogClick, onClose: handleDialogClose, onCancel: handleDialogCancel, ref: refDialog, role: "dialog" },
-                    React.createElement("div", { "data-rmiz-modal-overlay": dataOverlayState }),
-                    React.createElement("div", { "data-rmiz-modal-content": "", ref: refModalContent }, modalContent)), this.getDialogContainer())));
+                ReactDOM.createPortal(React__default.createElement("dialog", { "aria-labelledby": idModalImg, "aria-modal": "true", className: classDialog, "data-rmiz-modal": "", id: idModal, onClick: handleDialogClick, onClose: handleDialogClose, onCancel: handleDialogCancel, ref: refDialog, role: "dialog" },
+                    React__default.createElement("div", { "data-rmiz-modal-overlay": dataOverlayState }),
+                    React__default.createElement("div", { "data-rmiz-modal-content": "", ref: refModalContent }, modalContent)), this.getDialogContainer())));
     }
     componentDidMount() {
         this.setId();

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-medium-image-zoom/dist/Uncontrolled.mjs

@@ -1,13 +1,13 @@
-import React from 'react';
+import React__default from 'react';
 import { Controlled } from './Controlled.mjs';
 
 function Uncontrolled({ onZoomChange, ...props }) {
-    const [isZoomed, setIsZoomed] = React.useState(false);
-    const handleZoomChange = React.useCallback((value, { event }) => {
+    const [isZoomed, setIsZoomed] = React__default.useState(false);
+    const handleZoomChange = React__default.useCallback((value, { event }) => {
         setIsZoomed(value);
         onZoomChange?.(value, { event });
     }, [onZoomChange]);
-    return (React.createElement(Controlled, { ...props, isZoomed: isZoomed, onZoomChange: handleZoomChange }));
+    return (React__default.createElement(Controlled, { ...props, isZoomed: isZoomed, onZoomChange: handleZoomChange }));
 }
 
 export { Uncontrolled };

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-medium-image-zoom/dist/icons.mjs

@@ -1,12 +1,12 @@
-import React from 'react';
+import React__default from 'react';
 
 function ICompress() {
-    return (React.createElement("svg", { "aria-hidden": "true", "data-rmiz-btn-unzoom-icon": true, fill: "currentColor", focusable: "false", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { d: "M 14.144531 1.148438 L 9 6.292969 L 9 3 L 8 3 L 8 8 L 13 8 L 13 7 L 9.707031 7 L 14.855469 1.851563 Z M 8 8 L 3 8 L 3 9 L 6.292969 9 L 1.148438 14.144531 L 1.851563 14.855469 L 7 9.707031 L 7 13 L 8 13 Z" })));
+    return (React__default.createElement("svg", { "aria-hidden": "true", "data-rmiz-btn-unzoom-icon": true, fill: "currentColor", focusable: "false", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+        React__default.createElement("path", { d: "M 14.144531 1.148438 L 9 6.292969 L 9 3 L 8 3 L 8 8 L 13 8 L 13 7 L 9.707031 7 L 14.855469 1.851563 Z M 8 8 L 3 8 L 3 9 L 6.292969 9 L 1.148438 14.144531 L 1.851563 14.855469 L 7 9.707031 L 7 13 L 8 13 Z" })));
 }
 function IEnlarge() {
-    return (React.createElement("svg", { "aria-hidden": "true", "data-rmiz-btn-zoom-icon": true, fill: "currentColor", focusable: "false", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { d: "M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z" })));
+    return (React__default.createElement("svg", { "aria-hidden": "true", "data-rmiz-btn-zoom-icon": true, fill: "currentColor", focusable: "false", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+        React__default.createElement("path", { d: "M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z" })));
 }
 
 export { ICompress, IEnlarge };

package/dist/node_modules/.pnpm/swiper@12.1.3/node_modules/swiper/swiper-react.mjs

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useRef, useEffect, createContext, useLayoutEffect } from 'react';
+import React__default, { forwardRef, useState, useRef, useEffect, createContext, useLayoutEffect } from 'react';
 import { S as Swiper$1 } from './shared/swiper-core.mjs';
 import { g as getParams, m as mountSwiper, a as getChangedParams, u as updateOnVirtualData } from './shared/update-on-virtual-data.mjs';
 import { d as uniqueClasses, w as wrapperClass, n as needsNavigation, b as needsScrollbar, a as needsPagination, e as extend, u as updateSwiper } from './shared/update-swiper.mjs';
@@ -36,7 +36,7 @@ function isChildSwiperSlide(child) {
 }
 function processChildren(c) {
   const slides = [];
-  React.Children.toArray(c).forEach(child => {
+  React__default.Children.toArray(c).forEach(child => {
     if (isChildSwiperSlide(child)) {
       slides.push(child);
     } else if (child.props && child.props.children) {
@@ -53,7 +53,7 @@ function getChildren(c) {
     'wrapper-start': [],
     'wrapper-end': []
   };
-  React.Children.toArray(c).forEach(child => {
+  React__default.Children.toArray(c).forEach(child => {
     if (isChildSwiperSlide(child)) {
       slides.push(child);
     } else if (child.props && child.props.slot && slots[child.props.slot]) {
@@ -105,7 +105,7 @@ function renderVirtual(swiper, slides, virtualData) {
     }
   }
   return slidesToRender.map((child, index) => {
-    return /*#__PURE__*/React.cloneElement(child, {
+    return /*#__PURE__*/React__default.cloneElement(child, {
       swiper,
       style,
       key: child.props.virtualIndex || child.key || `slide-${index}`
@@ -276,29 +276,29 @@ const Swiper = /*#__PURE__*/forwardRef(({
       return renderVirtual(swiperRef.current, slides, virtualData);
     }
     return slides.map((child, index) => {
-      return /*#__PURE__*/React.cloneElement(child, {
+      return /*#__PURE__*/React__default.cloneElement(child, {
         swiper: swiperRef.current,
         swiperSlideIndex: index
       });
     });
   }
-  return /*#__PURE__*/React.createElement(Tag, _extends({
+  return /*#__PURE__*/React__default.createElement(Tag, _extends({
     ref: swiperElRef,
     className: uniqueClasses(`${containerClasses}${className ? ` ${className}` : ''}`)
-  }, restProps), /*#__PURE__*/React.createElement(SwiperContext.Provider, {
+  }, restProps), /*#__PURE__*/React__default.createElement(SwiperContext.Provider, {
     value: swiperRef.current
-  }, slots['container-start'], /*#__PURE__*/React.createElement(WrapperTag, {
+  }, slots['container-start'], /*#__PURE__*/React__default.createElement(WrapperTag, {
     className: wrapperClass(swiperParams.wrapperClass)
-  }, slots['wrapper-start'], renderSlides(), slots['wrapper-end']), needsNavigation(swiperParams) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, slots['wrapper-start'], renderSlides(), slots['wrapper-end']), needsNavigation(swiperParams) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     ref: prevElRef,
     className: "swiper-button-prev"
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     ref: nextElRef,
     className: "swiper-button-next"
-  })), needsScrollbar(swiperParams) && /*#__PURE__*/React.createElement("div", {
+  })), needsScrollbar(swiperParams) && /*#__PURE__*/React__default.createElement("div", {
     ref: scrollbarElRef,
     className: "swiper-scrollbar"
-  }), needsPagination(swiperParams) && /*#__PURE__*/React.createElement("div", {
+  }), needsPagination(swiperParams) && /*#__PURE__*/React__default.createElement("div", {
     ref: paginationElRef,
     className: "swiper-pagination"
   }), slots['container-end']));
@@ -364,24 +364,24 @@ const SwiperSlide = /*#__PURE__*/forwardRef(({
   const onLoad = () => {
     setLazyLoaded(true);
   };
-  return /*#__PURE__*/React.createElement(Tag, _extends({
+  return /*#__PURE__*/React__default.createElement(Tag, _extends({
     ref: slideElRef,
     className: uniqueClasses(`${slideClasses}${className ? ` ${className}` : ''}`),
     "data-swiper-slide-index": virtualIndex,
     onLoad: onLoad
-  }, rest), zoom && /*#__PURE__*/React.createElement(SwiperSlideContext.Provider, {
+  }, rest), zoom && /*#__PURE__*/React__default.createElement(SwiperSlideContext.Provider, {
     value: slideData
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "swiper-zoom-container",
     "data-swiper-zoom": typeof zoom === 'number' ? zoom : undefined
-  }, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React.createElement("div", {
+  }, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React__default.createElement("div", {
     className: "swiper-lazy-preloader",
     ref: node => {
       if (node) node.lazyPreloaderManaged = true;
     }
-  }))), !zoom && /*#__PURE__*/React.createElement(SwiperSlideContext.Provider, {
+  }))), !zoom && /*#__PURE__*/React__default.createElement(SwiperSlideContext.Provider, {
     value: slideData
-  }, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React.createElement("div", {
+  }, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React__default.createElement("div", {
     className: "swiper-lazy-preloader",
     ref: node => {
       if (node) node.lazyPreloaderManaged = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "14.4.3",
+  "version": "15.0.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -16,11 +16,6 @@
       "import": "./dist/clerk/server.mjs",
       "require": "./dist/clerk/server.js"
     },
-    "./clerk/patch/optional-auth": {
-      "types": "./dist/clerk/patch/optional-auth.d.ts",
-      "import": "./dist/clerk/patch/optional-auth.mjs",
-      "require": "./dist/clerk/patch/optional-auth.js"
-    },
     "./fingerprint": {
       "types": "./dist/clerk/fingerprint/index.d.ts",
       "import": "./dist/clerk/fingerprint/index.mjs",
@@ -36,6 +31,11 @@
       "import": "./dist/main/index.mjs",
       "require": "./dist/main/index.js"
     },
+    "./main/pill-select": {
+      "types": "./dist/main/pill-select/index.d.ts",
+      "import": "./dist/main/pill-select/index.mjs",
+      "require": "./dist/main/pill-select/index.js"
+    },
     "./main/server": {
       "types": "./dist/main/server.d.ts",
       "import": "./dist/main/server.mjs",
@@ -87,8 +87,8 @@
     "react-medium-image-zoom": "^5.4.1",
     "swiper": "^12.1.2",
     "zod": "^4.3.6",
-    "@windrun-huaiin/base-ui": "^14.0.3",
-    "@windrun-huaiin/lib": "^14.0.1"
+    "@windrun-huaiin/lib": "^15.0.0",
+    "@windrun-huaiin/base-ui": "^15.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/fuma/mdx/gradient-button.tsx

@@ -2,13 +2,23 @@
 
 import { cn } from '@windrun-huaiin/lib/utils';
 import { globalLucideIcons as icons } from "@windrun-huaiin/base-ui/components/server";
-import { themeButtonGradientClass, themeButtonGradientHoverClass } from "@windrun-huaiin/base-ui/lib";
+import {
+  themeBgColor,
+  themeBorderColor,
+  themeButtonGradientClass,
+  themeButtonGradientHoverClass,
+  themeIconColor,
+  themeMainBgColor,
+} from "@windrun-huaiin/base-ui/lib";
 import Link from "next/link";
 import React, { useState } from 'react';
 
+type GradientButtonVariant = 'default' | 'soft' | 'subtle';
+
 export interface GradientButtonProps {
   title: React.ReactNode;
   icon?: React.ReactNode;
+  iconForcePosition?: 'left' | 'right';
   align?: 'left' | 'center' | 'right';
   disabled?: boolean;
   className?: string;
@@ -22,11 +32,13 @@ export interface GradientButtonProps {
   onClick?: () => void | Promise<void>;
   loadingText?: React.ReactNode;
   preventDoubleClick?: boolean;
+  variant?: GradientButtonVariant;
 }
 
 export function GradientButton({
   title,
   icon,
+  iconForcePosition,
   align = 'left',
   disabled = false,
   className = "",
@@ -37,12 +49,16 @@ export function GradientButton({
   loadingText,
   preventDoubleClick = true,
   iconClassName,
+  variant = 'default',
 }: GradientButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
   const actualLoadingText = loadingText || title?.toString().trim() || 'Loading...'
 
   const defaultIconClass = "h-4 w-4";
-  const finalIconClass = cn("text-white", iconClassName || defaultIconClass);
+  const finalIconClass = cn(
+    variant === 'default' ? 'text-white' : themeIconColor,
+    iconClassName || defaultIconClass
+  );
 
   // set justify class according to alignment
   const getAlignmentClass = () => {
@@ -111,8 +127,9 @@ export function GradientButton({
   })();
 
   const shouldRenderIcon = iconNode !== null && iconNode !== undefined;
+  const iconPosition = iconForcePosition ?? (onClick ? 'left' : 'right');
 
-  const buttonContent = onClick ? (
+  const buttonContent = iconPosition === 'left' ? (
     <>
       {shouldRenderIcon ? <span>{iconNode}</span> : null}
       <span className={cn(shouldRenderIcon && 'ml-1')}>{displayTitle}</span>
@@ -133,10 +150,29 @@ export function GradientButton({
   // Base styles extracted from Button component + size="lg" (h-11 px-8)
   // Removed [&_svg] constraints
   const baseButtonStyles = "inline-flex items-center gap-2 whitespace-nowrap h-11 px-8 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
+  const variantClassName = variant === 'soft'
+    ? cn(
+        themeBgColor,
+        themeIconColor,
+        themeBorderColor,
+        'border shadow-sm hover:shadow-md hover:brightness-95'
+      )
+    : variant === 'subtle'
+      ? cn(
+          themeMainBgColor,
+          themeIconColor,
+          'border border-neutral-200 shadow-sm hover:shadow-md hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800'
+        )
+    : cn(
+        themeButtonGradientClass,
+        themeButtonGradientHoverClass,
+        'text-white shadow-lg hover:shadow-xl'
+      );
 
   const buttonClassName = cn(
     baseButtonStyles,
-    themeButtonGradientClass, themeButtonGradientHoverClass, 'text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full',
+    variantClassName,
+    'text-base font-bold transition-all duration-300 rounded-full',
     alignmentClass,
     isDisabled && 'opacity-50 cursor-not-allowed',
     className,

package/src/main/index.ts

@@ -6,6 +6,7 @@ export * from './loading';
 export * from './nprogress-bar';
 export * from './ads-alert-dialog';
 export * from './x-button'
+export * from './x-toggle-button'
 export * from './ai-prompt-textarea'
 export * from './rich-text-expert'
 export * from './faq-interactive'
@@ -13,6 +14,7 @@ export * from './price-plan-interactive'
 export * from './gallery/gallery-interactive'
 export * from './delayed-img'
 export * from './snake-loading-frame'
+export * from './pill-select'
 // Money Price Client Components
 export { MoneyPriceInteractive } from './money-price/money-price-interactive';
 export { MoneyPriceButton } from './money-price/money-price-button';

package/src/main/pill-select/index.ts

@@ -0,0 +1,4 @@
+export { XPillSelect, type XPillOption, type XPillSelectProps } from './x-pill-select';
+export { XFilterPills } from './x-filter-pills';
+export { XFormPills } from './x-form-pills';
+export { XTokenInput } from './x-token-input';

package/src/main/pill-select/x-filter-pills.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { cn } from '@windrun-huaiin/lib/utils';
+import { XPillSelect, type XPillOption } from './x-pill-select';
+
+type XFilterPillsProps = {
+  label: string;
+  value: string;
+  options: XPillOption[];
+  onChange: (value: string) => void;
+  allLabel: string;
+  className?: string;
+};
+
+export function XFilterPills({
+  label,
+  value,
+  options,
+  onChange,
+  allLabel,
+  className,
+}: XFilterPillsProps) {
+  return (
+    <div className={cn('space-y-1.5', className)}>
+      <div className="text-xs font-medium text-slate-700 dark:text-slate-200">{label}</div>
+      <XPillSelect
+        mode="single"
+        value={value}
+        onChange={onChange}
+        options={[{ label: allLabel, value: '' }, ...options]}
+        size="compact"
+        maxPillWidthClassName="max-w-[150px] sm:max-w-[220px]"
+      />
+    </div>
+  );
+}

package/src/main/pill-select/x-form-pills.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { cn } from '@windrun-huaiin/lib/utils';
+import { XPillSelect, type XPillOption } from './x-pill-select';
+
+type XFormPillsProps = {
+  label: React.ReactNode;
+  value: string;
+  options: XPillOption[];
+  onChange: (value: string) => void;
+  emptyLabel: string;
+  allowClear?: boolean;
+  className?: string;
+};
+
+export function XFormPills({
+  label,
+  value,
+  options,
+  onChange,
+  emptyLabel,
+  allowClear = false,
+  className,
+}: XFormPillsProps) {
+  return (
+    <div className={cn('space-y-2 text-sm', className)}>
+      <div className="font-medium text-slate-700 dark:text-slate-200">{label}</div>
+      <XPillSelect
+        mode="single"
+        value={value}
+        onChange={onChange}
+        options={options}
+        emptyLabel={emptyLabel}
+        allowClear={allowClear}
+        maxPillWidthClassName="max-w-[150px] sm:max-w-[220px]"
+      />
+    </div>
+  );
+}