shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/select/select-trigger.js

@@ -0,0 +1,310 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var useDevice = require('@/hooks/useDevice');
+var utils = require('@/lib/utils');
+var reactPopover = require('@radix-ui/react-popover');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var input = require('../../../components/input');
+var sheet = require('../../../components/sheet');
+var helpers = require('../../../lib/helpers');
+var pressable = require('../pressable');
+var context = require('./context');
+var UISystemProvider = require('@/providers/UISystemProvider');
+var types = require('@/lib/types');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const SelectAnchor = React__namespace.forwardRef(
+  ({ children, asChild, trackingData, trackingIndex, trackingName, blockSendTracking, ...rest }, ref) => {
+    const { isDesktop } = useDevice.useDevice();
+    const Comp = isDesktop ? reactPopover.PopoverTrigger : sheet.SheetTrigger;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      pressable.Pressable,
+      {
+        trackingName,
+        trackingData,
+        trackingIndex,
+        blockSendTracking,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, asChild, "data-select-trigger": true, ...rest, children })
+      }
+    );
+  }
+);
+SelectAnchor.displayName = "SelectAnchor";
+const SelectInputTrigger = React__namespace.forwardRef(
+  ({
+    className,
+    size = "default",
+    children,
+    trackingData,
+    trackingIndex,
+    trackingName,
+    blockSendTracking,
+    icon,
+    hasRemoveIcon = true,
+    enableFloatingLabel = true,
+    asChild,
+    // Input specific props
+    label,
+    isRequired,
+    disabled,
+    isError,
+    placeholder,
+    inputClassName,
+    buttonIconClassName,
+    classButton,
+    classLabel,
+    addonBefore,
+    addonAfter,
+    trackingInputName,
+    autoFocus,
+    maxLength,
+    readOnly = true,
+    // Always readOnly for select
+    type,
+    pattern,
+    inputMode,
+    name,
+    style,
+    helpText,
+    errorText,
+    helpTextClassName,
+    errorTextClassName,
+    ...props
+  }, ref) => {
+    const { isDesktop } = useDevice.useDevice();
+    const Comp = isDesktop ? reactPopover.PopoverTrigger : sheet.SheetTrigger;
+    const {
+      groupValue,
+      value,
+      disabled: contextDisabled,
+      label: contextLabel,
+      setValue,
+      setGroupValue,
+      onClearValue
+    } = context.useSelectContext();
+    const { sendTrack } = UISystemProvider.useUISystemContext();
+    const {
+      trackingClearName,
+      trackingData: trackingDataContext,
+      trackingIndex: trackingIndexContext,
+      blockSendTracking: blockSendTrackingContext,
+      keyForValue,
+      keyForName
+    } = React__namespace.useContext(context.SelectTrackingContext);
+    const isValueEmpty = helpers.isEmpty(value) && helpers.isEmpty(groupValue);
+    const isValueBlank = !value?.[0]?.name && !groupValue?.group?.[0]?.name;
+    const hasValue = !isValueEmpty && !isValueBlank;
+    const finalDisabled = disabled ?? contextDisabled;
+    const finalLabel = label ?? contextLabel;
+    const shouldShowFloatingLabel = enableFloatingLabel && finalLabel && (hasValue || isRequired);
+    const effectivePlaceholder = enableFloatingLabel ? placeholder || finalLabel : placeholder || finalLabel;
+    const displayValue = React__namespace.useMemo(() => {
+      if (isValueEmpty || isValueBlank) return "";
+      if (React__namespace.isValidElement(children) && children.props.children) {
+        const renderFn = children.props.children;
+        if (typeof renderFn === "function") {
+          return renderFn(value, groupValue) || "";
+        }
+      }
+      if (value?.length) {
+        return value.map((item) => item?.name || item?.value).join(", ");
+      }
+      if (groupValue?.group?.length) {
+        return groupValue.group.map((group) => group?.name).join(", ");
+      }
+      return "";
+    }, [value, groupValue, children, isValueEmpty, isValueBlank]);
+    const calculateTextMaxWidth = React__namespace.useMemo(() => {
+      let reservedWidth = 0;
+      if (hasRemoveIcon && hasValue) {
+        reservedWidth += 32;
+      }
+      {
+        reservedWidth += 32;
+      }
+      if (addonAfter) {
+        reservedWidth += 60;
+      }
+      reservedWidth += 16;
+      return `calc(100% - ${reservedWidth}px)`;
+    }, [hasRemoveIcon, hasValue, icon, addonAfter]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      pressable.Pressable,
+      {
+        trackingData,
+        trackingIndex,
+        trackingName,
+        blockSendTracking,
+        disabled: finalDisabled,
+        children: finalDisabled ? (
+          // Khi disabled, không sử dụng PopoverTrigger/SheetTrigger
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("cursor-not-allowed", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              ref,
+              label: shouldShowFloatingLabel ? finalLabel : void 0,
+              isRequired,
+              value: displayValue,
+              readOnly,
+              disabled: finalDisabled,
+              className: utils.cn("cursor-not-allowed", inputClassName),
+              inputClassName: "overflow-hidden text-ellipsis whitespace-nowrap",
+              showRemoveIcon: false,
+              buttonIcon: icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-6 w-6 stroke-[1.5px] opacity-50 [&>path]:stroke-[#5e7184]" }),
+              size,
+              placeholder: effectivePlaceholder,
+              isError,
+              buttonIconClassName: utils.cn("cursor-not-allowed", buttonIconClassName),
+              classButton: utils.cn("cursor-not-allowed pointer-events-none", classButton),
+              classLabel,
+              addonBefore,
+              addonAfter,
+              trackingInputName,
+              autoFocus,
+              maxLength,
+              type,
+              pattern,
+              inputMode,
+              name,
+              helpText,
+              errorText,
+              helpTextClassName,
+              errorTextClassName,
+              style: { ...style, maxWidth: calculateTextMaxWidth }
+            }
+          ) })
+        ) : (
+          // Khi không disabled, sử dụng PopoverTrigger/SheetTrigger như bình thường
+          /* @__PURE__ */ jsxRuntime.jsx(Comp, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("cursor-pointer", className), "data-select-trigger": true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              ref,
+              label: shouldShowFloatingLabel ? finalLabel : void 0,
+              isRequired,
+              value: displayValue,
+              readOnly,
+              disabled: finalDisabled,
+              className: utils.cn("cursor-pointer", inputClassName),
+              inputClassName: "overflow-hidden text-ellipsis whitespace-nowrap",
+              showRemoveIcon: hasRemoveIcon && hasValue,
+              onClearValue: () => {
+                if (trackingClearName && sendTrack && !blockSendTrackingContext) {
+                  const clearTrackingData = {
+                    ...trackingDataContext || {},
+                    status: "unselected"
+                  };
+                  value?.forEach((item) => {
+                    sendTrack(trackingClearName, types.TRACKING_TYPE.click, {
+                      ...clearTrackingData,
+                      [keyForValue || "value"]: item?.value,
+                      [keyForName || "name"]: item?.name,
+                      ...trackingIndexContext !== void 0 && { index: trackingIndexContext }
+                    });
+                  });
+                }
+                onClearValue?.();
+                setValue?.([]);
+                setGroupValue?.({ group: [], child: [] });
+              },
+              buttonIcon: icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-6 w-6 stroke-[1.5px] [&>path]:stroke-[#5e7184]" }),
+              size,
+              placeholder: effectivePlaceholder,
+              isError,
+              buttonIconClassName,
+              classButton,
+              classLabel,
+              addonBefore,
+              addonAfter,
+              trackingInputName,
+              autoFocus,
+              maxLength,
+              type,
+              pattern,
+              inputMode,
+              name,
+              helpText,
+              errorText,
+              helpTextClassName,
+              errorTextClassName,
+              style: { ...style, maxWidth: calculateTextMaxWidth }
+            }
+          ) }) })
+        )
+      }
+    );
+  }
+);
+SelectInputTrigger.displayName = "SelectInputTrigger";
+const SelectTrigger = React__namespace.forwardRef(
+  ({
+    children,
+    asChild,
+    className,
+    trackingData,
+    trackingIndex,
+    trackingName,
+    blockSendTracking,
+    isCustomMode = false,
+    ...rest
+  }, ref) => {
+    const { isDesktop } = useDevice.useDevice();
+    const Comp = isDesktop ? reactPopover.PopoverTrigger : sheet.SheetTrigger;
+    if (asChild && isCustomMode && children) {
+      const child = React__namespace.Children.only(children);
+      const mergedChild = React__namespace.cloneElement(child, {
+        className: utils.cn(child.props.className, className),
+        "data-select-trigger": true,
+        ...child.props
+      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        pressable.Pressable,
+        {
+          className: "h-full",
+          trackingName,
+          trackingData,
+          trackingIndex,
+          blockSendTracking,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, asChild: true, ...rest, children: mergedChild })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SelectInputTrigger,
+      {
+        ref,
+        children,
+        asChild,
+        className,
+        ...rest
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+
+exports.SelectAnchor = SelectAnchor;
+exports.SelectInputTrigger = SelectInputTrigger;
+exports.SelectTrigger = SelectTrigger;
+//# sourceMappingURL=select-trigger.js.map
+//# sourceMappingURL=select-trigger.js.map

package/dist/common/interactive/select/select-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-trigger.tsx"],"names":["React","useDevice","PopoverTrigger","SheetTrigger","jsx","Pressable","useSelectContext","useUISystemContext","SelectTrackingContext","isEmpty","cn","Input","ChevronDown","TRACKING_TYPE"],"mappings":"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","file":"select-trigger.js","sourcesContent":["'use client';\nimport { useDevice } from '@/hooks/useDevice';\nimport { cn } from '@/lib/utils';\nimport { PopoverTrigger } from '@radix-ui/react-popover';\nimport { ChevronDown } from 'lucide-react';\nimport * as React from 'react';\nimport { Input } from '../../../components/input';\nimport { SheetTrigger } from '../../../components/sheet';\nimport { isEmpty } from '../../../lib/helpers';\nimport { Pressable } from '../pressable';\nimport { useSelectContext, SelectTrackingContext } from './context';\nimport { SelectInputTriggerProps, SelectTriggerProps } from './types';\nimport { useUISystemContext } from '@/providers/UISystemProvider';\nimport { TRACKING_TYPE } from '@/lib/types';\n\nconst SelectAnchor = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    { children, asChild, trackingData, trackingIndex, trackingName, blockSendTracking, ...rest },\n    ref,\n  ) => {\n    const { isDesktop } = useDevice();\n\n    const Comp = isDesktop ? PopoverTrigger : SheetTrigger;\n\n    return (\n      <Pressable\n        trackingName={trackingName}\n        trackingData={trackingData}\n        trackingIndex={trackingIndex}\n        blockSendTracking={blockSendTracking}\n      >\n        <Comp ref={ref} asChild={asChild} data-select-trigger {...rest}>\n          {children}\n        </Comp>\n      </Pressable>\n    );\n  },\n);\nSelectAnchor.displayName = 'SelectAnchor';\n\n// Input-based Select Trigger\nconst SelectInputTrigger = React.forwardRef<HTMLInputElement, SelectInputTriggerProps>(\n  (\n    {\n      className,\n      size = 'default',\n      children,\n      trackingData,\n      trackingIndex,\n      trackingName,\n      blockSendTracking,\n      icon,\n      hasRemoveIcon = true,\n      enableFloatingLabel = true,\n      asChild,\n      // Input specific props\n      label,\n      isRequired,\n      disabled,\n      isError,\n      placeholder,\n      inputClassName,\n      buttonIconClassName,\n      classButton,\n      classLabel,\n      addonBefore,\n      addonAfter,\n      trackingInputName,\n      autoFocus,\n      maxLength,\n      readOnly = true, // Always readOnly for select\n      type,\n      pattern,\n      inputMode,\n      name,\n      style,\n      helpText,\n      errorText,\n      helpTextClassName,\n      errorTextClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isDesktop } = useDevice();\n\n    const Comp = isDesktop ? PopoverTrigger : SheetTrigger;\n    const {\n      groupValue,\n      value,\n      disabled: contextDisabled,\n      label: contextLabel,\n      setValue,\n      setGroupValue,\n      onClearValue,\n    } = useSelectContext();\n\n    const { sendTrack } = useUISystemContext();\n    const {\n      trackingClearName,\n      trackingData: trackingDataContext,\n      trackingIndex: trackingIndexContext,\n      blockSendTracking: blockSendTrackingContext,\n      keyForValue,\n      keyForName,\n    } = React.useContext(SelectTrackingContext);\n\n    const isValueEmpty = isEmpty(value) && isEmpty(groupValue);\n    const isValueBlank = !value?.[0]?.name && !groupValue?.group?.[0]?.name;\n    const hasValue = !isValueEmpty && !isValueBlank;\n\n    // Use props with fallback to context values\n    const finalDisabled = disabled ?? contextDisabled;\n    const finalLabel = label ?? contextLabel;\n\n    // Handle label/placeholder logic\n    // When isRequired, always show label (even without value) to display asterisk\n    const shouldShowFloatingLabel = enableFloatingLabel && finalLabel && (hasValue || isRequired);\n\n    const effectivePlaceholder = enableFloatingLabel\n      ? placeholder || finalLabel\n      : placeholder || finalLabel;\n\n    // Get display value for input\n    const displayValue = React.useMemo(() => {\n      if (isValueEmpty || isValueBlank) return '';\n\n      // Check if children is a SelectValue component with render function\n      if (React.isValidElement(children) && children.props.children) {\n        const renderFn = children.props.children;\n        if (typeof renderFn === 'function') {\n          return renderFn(value, groupValue) || '';\n        }\n      }\n\n      // Default value rendering\n      if (value?.length) {\n        return value.map((item) => item?.name || item?.value).join(', ');\n      }\n\n      if (groupValue?.group?.length) {\n        return groupValue.group.map((group) => group?.name).join(', ');\n      }\n\n      return '';\n    }, [value, groupValue, children, isValueEmpty, isValueBlank]);\n\n    // Calculate the width that should be reserved for icons and addons\n    const calculateTextMaxWidth = React.useMemo(() => {\n      let reservedWidth = 0;\n\n      // Add width for remove icon (if present)\n      if (hasRemoveIcon && hasValue) {\n        reservedWidth += 32; // ~32px for remove icon\n      }\n\n      // Add width for button icon (chevron)\n      if (icon || true) {\n        // Always has chevron icon\n        reservedWidth += 32; // ~32px for button icon\n      }\n\n      // Add width for addon after\n      if (addonAfter) {\n        reservedWidth += 60; // Estimated width for addon\n      }\n\n      // Add some padding buffer\n      reservedWidth += 16; // Buffer for padding\n\n      return `calc(100% - ${reservedWidth}px)`;\n    }, [hasRemoveIcon, hasValue, icon, addonAfter]);\n\n    return (\n      <Pressable\n        trackingData={trackingData}\n        trackingIndex={trackingIndex}\n        trackingName={trackingName}\n        blockSendTracking={blockSendTracking}\n        disabled={finalDisabled}\n      >\n        {finalDisabled ? (\n          // Khi disabled, không sử dụng PopoverTrigger/SheetTrigger\n          <div className={cn('cursor-not-allowed', className)} {...props}>\n            <Input\n              ref={ref}\n              label={shouldShowFloatingLabel ? finalLabel : undefined}\n              isRequired={isRequired}\n              value={displayValue}\n              readOnly={readOnly}\n              disabled={finalDisabled}\n              className={cn('cursor-not-allowed', inputClassName)}\n              inputClassName=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n              showRemoveIcon={false}\n              buttonIcon={\n                icon ?? (\n                  <ChevronDown className=\"h-6 w-6 stroke-[1.5px] opacity-50 [&>path]:stroke-[#5e7184]\" />\n                )\n              }\n              size={size}\n              placeholder={effectivePlaceholder}\n              isError={isError}\n              buttonIconClassName={cn('cursor-not-allowed', buttonIconClassName)}\n              classButton={cn('cursor-not-allowed pointer-events-none', classButton)}\n              classLabel={classLabel}\n              addonBefore={addonBefore}\n              addonAfter={addonAfter}\n              trackingInputName={trackingInputName}\n              autoFocus={autoFocus}\n              maxLength={maxLength}\n              type={type}\n              pattern={pattern}\n              inputMode={inputMode}\n              name={name}\n              helpText={helpText}\n              errorText={errorText}\n              helpTextClassName={helpTextClassName}\n              errorTextClassName={errorTextClassName}\n              style={{ ...style, maxWidth: calculateTextMaxWidth }}\n            />\n          </div>\n        ) : (\n          // Khi không disabled, sử dụng PopoverTrigger/SheetTrigger như bình thường\n          <Comp asChild>\n            <div className={cn('cursor-pointer', className)} data-select-trigger {...props}>\n              <Input\n                ref={ref}\n                label={shouldShowFloatingLabel ? finalLabel : undefined}\n                isRequired={isRequired}\n                value={displayValue}\n                readOnly={readOnly}\n                disabled={finalDisabled}\n                className={cn('cursor-pointer', inputClassName)}\n                inputClassName=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n                showRemoveIcon={hasRemoveIcon && hasValue}\n                onClearValue={() => {\n                  // Send clear tracking\n                  if (trackingClearName && sendTrack && !blockSendTrackingContext) {\n                    const clearTrackingData = {\n                      ...(trackingDataContext || {}),\n                      status: 'unselected',\n                    };\n\n                    // Track each cleared value\n                    value?.forEach((item) => {\n                      sendTrack(trackingClearName, TRACKING_TYPE.click, {\n                        ...clearTrackingData,\n                        [keyForValue || 'value']: item?.value,\n                        [keyForName || 'name']: item?.name,\n                        ...(trackingIndexContext !== undefined && { index: trackingIndexContext }),\n                      });\n                    });\n                  }\n\n                  onClearValue?.();\n                  setValue?.([]);\n                  setGroupValue?.({ group: [], child: [] });\n                }}\n                buttonIcon={\n                  icon ?? (\n                    <ChevronDown className=\"h-6 w-6 stroke-[1.5px] [&>path]:stroke-[#5e7184]\" />\n                  )\n                }\n                size={size}\n                placeholder={effectivePlaceholder}\n                isError={isError}\n                buttonIconClassName={buttonIconClassName}\n                classButton={classButton}\n                classLabel={classLabel}\n                addonBefore={addonBefore}\n                addonAfter={addonAfter}\n                trackingInputName={trackingInputName}\n                autoFocus={autoFocus}\n                maxLength={maxLength}\n                type={type}\n                pattern={pattern}\n                inputMode={inputMode}\n                name={name}\n                helpText={helpText}\n                errorText={errorText}\n                helpTextClassName={helpTextClassName}\n                errorTextClassName={errorTextClassName}\n                style={{ ...style, maxWidth: calculateTextMaxWidth }}\n              />\n            </div>\n          </Comp>\n        )}\n      </Pressable>\n    );\n  },\n);\nSelectInputTrigger.displayName = 'SelectInputTrigger';\n\n// Create SelectTrigger that supports both Input mode and custom trigger mode\nconst SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      children,\n      asChild,\n      className,\n      trackingData,\n      trackingIndex,\n      trackingName,\n      blockSendTracking,\n      isCustomMode = false,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { isDesktop } = useDevice();\n    const Comp = isDesktop ? PopoverTrigger : SheetTrigger;\n\n    // If asChild is true and has children, render custom trigger\n    if (asChild && isCustomMode && children) {\n      // When using asChild, we need to merge the className and other props into the child element\n      // Clone the child and merge props\n      const child = React.Children.only(children) as React.ReactElement;\n      const mergedChild = React.cloneElement(child, {\n        className: cn(child.props.className, className),\n        'data-select-trigger': true,\n        ...child.props,\n      });\n\n      return (\n        <Pressable\n          className=\"h-full\"\n          trackingName={trackingName}\n          trackingData={trackingData}\n          trackingIndex={trackingIndex}\n          blockSendTracking={blockSendTracking}\n        >\n          <Comp ref={ref} asChild {...rest}>\n            {mergedChild}\n          </Comp>\n        </Pressable>\n      );\n    }\n\n    // Otherwise, use Input-based trigger (backward compatibility)\n    return (\n      <SelectInputTrigger\n        ref={ref as React.Ref<HTMLInputElement>}\n        children={children}\n        asChild={asChild}\n        className={className}\n        {...(rest as any)}\n      />\n    );\n  },\n);\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport { SelectAnchor, SelectInputTrigger, SelectTrigger };\n"]}

package/dist/common/interactive/select/select-trigger.mjs

@@ -0,0 +1,286 @@
+import { jsx } from 'react/jsx-runtime';
+import { useDevice } from '@/hooks/useDevice';
+import { cn } from '@/lib/utils';
+import { PopoverTrigger } from '@radix-ui/react-popover';
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
+import { Input } from '../../../components/input';
+import { SheetTrigger } from '../../../components/sheet';
+import { isEmpty } from '../../../lib/helpers';
+import { Pressable } from '../pressable';
+import { useSelectContext, SelectTrackingContext } from './context';
+import { useUISystemContext } from '@/providers/UISystemProvider';
+import { TRACKING_TYPE } from '@/lib/types';
+
+const SelectAnchor = React.forwardRef(
+  ({ children, asChild, trackingData, trackingIndex, trackingName, blockSendTracking, ...rest }, ref) => {
+    const { isDesktop } = useDevice();
+    const Comp = isDesktop ? PopoverTrigger : SheetTrigger;
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        trackingName,
+        trackingData,
+        trackingIndex,
+        blockSendTracking,
+        children: /* @__PURE__ */ jsx(Comp, { ref, asChild, "data-select-trigger": true, ...rest, children })
+      }
+    );
+  }
+);
+SelectAnchor.displayName = "SelectAnchor";
+const SelectInputTrigger = React.forwardRef(
+  ({
+    className,
+    size = "default",
+    children,
+    trackingData,
+    trackingIndex,
+    trackingName,
+    blockSendTracking,
+    icon,
+    hasRemoveIcon = true,
+    enableFloatingLabel = true,
+    asChild,
+    // Input specific props
+    label,
+    isRequired,
+    disabled,
+    isError,
+    placeholder,
+    inputClassName,
+    buttonIconClassName,
+    classButton,
+    classLabel,
+    addonBefore,
+    addonAfter,
+    trackingInputName,
+    autoFocus,
+    maxLength,
+    readOnly = true,
+    // Always readOnly for select
+    type,
+    pattern,
+    inputMode,
+    name,
+    style,
+    helpText,
+    errorText,
+    helpTextClassName,
+    errorTextClassName,
+    ...props
+  }, ref) => {
+    const { isDesktop } = useDevice();
+    const Comp = isDesktop ? PopoverTrigger : SheetTrigger;
+    const {
+      groupValue,
+      value,
+      disabled: contextDisabled,
+      label: contextLabel,
+      setValue,
+      setGroupValue,
+      onClearValue
+    } = useSelectContext();
+    const { sendTrack } = useUISystemContext();
+    const {
+      trackingClearName,
+      trackingData: trackingDataContext,
+      trackingIndex: trackingIndexContext,
+      blockSendTracking: blockSendTrackingContext,
+      keyForValue,
+      keyForName
+    } = React.useContext(SelectTrackingContext);
+    const isValueEmpty = isEmpty(value) && isEmpty(groupValue);
+    const isValueBlank = !value?.[0]?.name && !groupValue?.group?.[0]?.name;
+    const hasValue = !isValueEmpty && !isValueBlank;
+    const finalDisabled = disabled ?? contextDisabled;
+    const finalLabel = label ?? contextLabel;
+    const shouldShowFloatingLabel = enableFloatingLabel && finalLabel && (hasValue || isRequired);
+    const effectivePlaceholder = enableFloatingLabel ? placeholder || finalLabel : placeholder || finalLabel;
+    const displayValue = React.useMemo(() => {
+      if (isValueEmpty || isValueBlank) return "";
+      if (React.isValidElement(children) && children.props.children) {
+        const renderFn = children.props.children;
+        if (typeof renderFn === "function") {
+          return renderFn(value, groupValue) || "";
+        }
+      }
+      if (value?.length) {
+        return value.map((item) => item?.name || item?.value).join(", ");
+      }
+      if (groupValue?.group?.length) {
+        return groupValue.group.map((group) => group?.name).join(", ");
+      }
+      return "";
+    }, [value, groupValue, children, isValueEmpty, isValueBlank]);
+    const calculateTextMaxWidth = React.useMemo(() => {
+      let reservedWidth = 0;
+      if (hasRemoveIcon && hasValue) {
+        reservedWidth += 32;
+      }
+      {
+        reservedWidth += 32;
+      }
+      if (addonAfter) {
+        reservedWidth += 60;
+      }
+      reservedWidth += 16;
+      return `calc(100% - ${reservedWidth}px)`;
+    }, [hasRemoveIcon, hasValue, icon, addonAfter]);
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        trackingData,
+        trackingIndex,
+        trackingName,
+        blockSendTracking,
+        disabled: finalDisabled,
+        children: finalDisabled ? (
+          // Khi disabled, không sử dụng PopoverTrigger/SheetTrigger
+          /* @__PURE__ */ jsx("div", { className: cn("cursor-not-allowed", className), ...props, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref,
+              label: shouldShowFloatingLabel ? finalLabel : void 0,
+              isRequired,
+              value: displayValue,
+              readOnly,
+              disabled: finalDisabled,
+              className: cn("cursor-not-allowed", inputClassName),
+              inputClassName: "overflow-hidden text-ellipsis whitespace-nowrap",
+              showRemoveIcon: false,
+              buttonIcon: icon ?? /* @__PURE__ */ jsx(ChevronDown, { className: "h-6 w-6 stroke-[1.5px] opacity-50 [&>path]:stroke-[#5e7184]" }),
+              size,
+              placeholder: effectivePlaceholder,
+              isError,
+              buttonIconClassName: cn("cursor-not-allowed", buttonIconClassName),
+              classButton: cn("cursor-not-allowed pointer-events-none", classButton),
+              classLabel,
+              addonBefore,
+              addonAfter,
+              trackingInputName,
+              autoFocus,
+              maxLength,
+              type,
+              pattern,
+              inputMode,
+              name,
+              helpText,
+              errorText,
+              helpTextClassName,
+              errorTextClassName,
+              style: { ...style, maxWidth: calculateTextMaxWidth }
+            }
+          ) })
+        ) : (
+          // Khi không disabled, sử dụng PopoverTrigger/SheetTrigger như bình thường
+          /* @__PURE__ */ jsx(Comp, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: cn("cursor-pointer", className), "data-select-trigger": true, ...props, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref,
+              label: shouldShowFloatingLabel ? finalLabel : void 0,
+              isRequired,
+              value: displayValue,
+              readOnly,
+              disabled: finalDisabled,
+              className: cn("cursor-pointer", inputClassName),
+              inputClassName: "overflow-hidden text-ellipsis whitespace-nowrap",
+              showRemoveIcon: hasRemoveIcon && hasValue,
+              onClearValue: () => {
+                if (trackingClearName && sendTrack && !blockSendTrackingContext) {
+                  const clearTrackingData = {
+                    ...trackingDataContext || {},
+                    status: "unselected"
+                  };
+                  value?.forEach((item) => {
+                    sendTrack(trackingClearName, TRACKING_TYPE.click, {
+                      ...clearTrackingData,
+                      [keyForValue || "value"]: item?.value,
+                      [keyForName || "name"]: item?.name,
+                      ...trackingIndexContext !== void 0 && { index: trackingIndexContext }
+                    });
+                  });
+                }
+                onClearValue?.();
+                setValue?.([]);
+                setGroupValue?.({ group: [], child: [] });
+              },
+              buttonIcon: icon ?? /* @__PURE__ */ jsx(ChevronDown, { className: "h-6 w-6 stroke-[1.5px] [&>path]:stroke-[#5e7184]" }),
+              size,
+              placeholder: effectivePlaceholder,
+              isError,
+              buttonIconClassName,
+              classButton,
+              classLabel,
+              addonBefore,
+              addonAfter,
+              trackingInputName,
+              autoFocus,
+              maxLength,
+              type,
+              pattern,
+              inputMode,
+              name,
+              helpText,
+              errorText,
+              helpTextClassName,
+              errorTextClassName,
+              style: { ...style, maxWidth: calculateTextMaxWidth }
+            }
+          ) }) })
+        )
+      }
+    );
+  }
+);
+SelectInputTrigger.displayName = "SelectInputTrigger";
+const SelectTrigger = React.forwardRef(
+  ({
+    children,
+    asChild,
+    className,
+    trackingData,
+    trackingIndex,
+    trackingName,
+    blockSendTracking,
+    isCustomMode = false,
+    ...rest
+  }, ref) => {
+    const { isDesktop } = useDevice();
+    const Comp = isDesktop ? PopoverTrigger : SheetTrigger;
+    if (asChild && isCustomMode && children) {
+      const child = React.Children.only(children);
+      const mergedChild = React.cloneElement(child, {
+        className: cn(child.props.className, className),
+        "data-select-trigger": true,
+        ...child.props
+      });
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          className: "h-full",
+          trackingName,
+          trackingData,
+          trackingIndex,
+          blockSendTracking,
+          children: /* @__PURE__ */ jsx(Comp, { ref, asChild: true, ...rest, children: mergedChild })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SelectInputTrigger,
+      {
+        ref,
+        children,
+        asChild,
+        className,
+        ...rest
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+
+export { SelectAnchor, SelectInputTrigger, SelectTrigger };
+//# sourceMappingURL=select-trigger.mjs.map
+//# sourceMappingURL=select-trigger.mjs.map