@kenpan/zds-r8f3v1 0.1.0

package/dist/components/forms/InputNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNumber.js","sources":["../../../src/components/forms/InputNumber.tsx"],"sourcesContent":["/**\n * InputNumber component\n *\n * A number input component with increment/decrement buttons.\n * Number input component with increment/decrement buttons\n *\n * Features:\n * - Three sizes (xs, sm, md) with different padding and heights\n * - Destructive (error) state support\n * - Optional label with help icon\n * - Optional leading/trailing text\n * - Hint text with optional checkbox\n * - Increment/decrement buttons with customizable min/max\n * - Button group for currency/percentage toggle\n * - Loading state\n * - Tooltip support for all interactive elements\n */\nimport * as React from 'react'\nimport Box from '@mui/material/Box'\nimport Typography from '@mui/material/Typography'\nimport CircularProgress from '@mui/material/CircularProgress'\nimport { useTheme } from '@mui/material/styles'\nimport type { Theme, SxProps } from '@mui/material/styles'\nimport type { ChangeEvent, FocusEvent, ReactNode, RefObject } from 'react'\nimport { HelpIcon } from '../HelpIcon'\nimport { Icon } from '../Icon'\nimport { Checkbox, type CheckboxProps } from './Checkbox'\n\n// ============================================================================\n// TYPES - Matching Storybook API\n// ============================================================================\n\nexport type InputNumberSize = 'xs' | 'sm' | 'md'\n// Keep for backward compatibility, but prefer direct props\nexport type InputNumberState = 'Placeholder' | 'Filled' | 'Focused' | 'Disabled' | 'Read-only'\n// Storybook uses 'defualt' (typo) and 'emphasis'\nexport type InputNumberType = 'default' | 'defualt' | 'emphasis'\nexport type InputNumberTooltipPlacement = \n  | 'None' | 'Top Left' | 'Top Right' | 'Top Center' \n  | 'Bottom Left' | 'Bottom Right' | 'Bottom Center' | 'Left' | 'Right'\nexport type InputNumberTooltipVariant = 'light' | 'dark'\nexport type InputNumberHintTextAlign = 'left' | 'center' | 'right'\nexport type InputNumberChangeReason = 'input' | 'blur' | 'min' | 'max' | 'step'\nexport type InputNumberButtonGroupItem = 'percentage' | 'currency'\n\nexport interface DataAttributes {\n  [key: string]: string\n}\n\nexport interface InputNumberDataAttributes {\n  inputField?: DataAttributes\n  minusIcon?: DataAttributes\n  plusIcon?: DataAttributes\n}\n\nexport interface InputNumberProps {\n  // ============================================================================\n  // Core Props (Storybook API)\n  // ============================================================================\n  \n  /** The current quantity value (Storybook naming) */\n  quantity?: number\n  /** Callback when value changes */\n  onChange?: (newQuantity: number, reason?: InputNumberChangeReason) => void\n  /** The current value (alternative to quantity) */\n  value?: number\n  /** Default value (uncontrolled) */\n  defaultValue?: number | string\n\n  // ============================================================================\n  // Size and Type\n  // ============================================================================\n  \n  /** Size variant @default 'md' */\n  size?: InputNumberSize\n  /** Visual type @default 'default' */\n  type?: InputNumberType\n  /** @deprecated Use type instead */\n  variant?: 'default' | 'emphasis'\n\n  // ============================================================================\n  // States\n  // ============================================================================\n  \n  /** @deprecated Use disabled/readOnly props instead */\n  state?: InputNumberState\n  /** Whether the input is in destructive (error) state */\n  destructive?: boolean\n  /** Whether the input is disabled */\n  disabled?: boolean\n  /** Whether the input is read-only */\n  readOnly?: boolean\n  /** Whether the input is loading */\n  loading?: boolean\n  /** Whether the input is required */\n  required?: boolean\n  /** Whether to allow zero value */\n  allowZero?: boolean\n\n  // ============================================================================\n  // Quantity Limits\n  // ============================================================================\n  \n  /** Minimum quantity (Storybook naming) */\n  minQuantity?: number\n  /** Maximum quantity (Storybook naming) */\n  maxQuantity?: number\n  /** Minimum allowed value (backward compatibility) */\n  min?: number\n  /** Maximum allowed value (backward compatibility) */\n  max?: number\n  /** Step value for increment/decrement @default 1 */\n  step?: number\n\n  // ============================================================================\n  // Label Props\n  // ============================================================================\n  \n  /** Label text */\n  label?: string\n  /** Text displayed before the label */\n  labelLeadingText?: string\n  /** Text displayed after the label */\n  labelTrailingText?: string\n  /** Label tooltip label */\n  labelTooltipLabel?: string\n  /** Label tooltip description */\n  labelTooltipDescription?: ReactNode\n  /** Label tooltip placement */\n  labelTooltipPlacement?: InputNumberTooltipPlacement\n  /** Label tooltip variant */\n  labelTooltipVariant?: InputNumberTooltipVariant\n\n  // ============================================================================\n  // Hint Props\n  // ============================================================================\n  \n  /** Hint text shown below the input */\n  hintText?: string\n  /** Hint text alignment @default 'left' */\n  hintTextAlign?: InputNumberHintTextAlign\n  /** Whether to show hint checkbox */\n  hintCheckbox?: boolean\n  /** Props for the hint checkbox */\n  hintCheckboxProps?: CheckboxProps\n  /** Checkbox checked state */\n  checked?: boolean\n  /** Callback when checkbox changes */\n  onChangeCheckbox?: (event: ChangeEvent<HTMLInputElement>) => void\n\n  // ============================================================================\n  // Button Group Props\n  // ============================================================================\n  \n  /** Whether to show button group (currency/percentage) */\n  buttonGroup?: boolean\n  /** Selected button group item */\n  selectedButtonGroupItem?: InputNumberButtonGroupItem\n  /** Callback when currency button is clicked */\n  onCurrencyClick?: () => void\n  /** Callback when percentage button is clicked */\n  onPercentageClick?: () => void\n\n  // ============================================================================\n  // Tooltip Props - Minus Button\n  // ============================================================================\n  \n  /** Whether to show minus button tooltip */\n  minusTooltip?: boolean\n  /** Minus button tooltip label */\n  minusTooltipLabel?: string\n  /** Minus button tooltip description */\n  minusTooltipDescription?: ReactNode\n  /** Minus button tooltip placement */\n  minusTooltipPlacement?: InputNumberTooltipPlacement\n  /** Minus button tooltip variant */\n  minusTooltipVariant?: InputNumberTooltipVariant\n\n  // ============================================================================\n  // Tooltip Props - Plus Button\n  // ============================================================================\n  \n  /** Whether to show plus button tooltip */\n  plusTooltip?: boolean\n  /** Plus button tooltip label */\n  plusTooltipLabel?: string\n  /** Plus button tooltip description */\n  plusTooltipDescription?: ReactNode\n  /** Plus button tooltip placement */\n  plusTooltipPlacement?: InputNumberTooltipPlacement\n  /** Plus button tooltip variant */\n  plusTooltipVariant?: InputNumberTooltipVariant\n\n  // ============================================================================\n  // Tooltip Props - Input\n  // ============================================================================\n  \n  /** Input tooltip label */\n  inputTooltipLabel?: string\n  /** Input tooltip description */\n  inputTooltipDescription?: ReactNode\n  /** Input tooltip placement */\n  inputTooltipPlacement?: InputNumberTooltipPlacement\n  /** Input tooltip variant */\n  inputTooltipVariant?: InputNumberTooltipVariant\n\n  // ============================================================================\n  // Layout Props\n  // ============================================================================\n  \n  /** Custom input width */\n  customInputWidth?: number\n  /** Whether to take full width */\n  fullWidth?: boolean\n\n  // ============================================================================\n  // Event Props\n  // ============================================================================\n  \n  /** Callback when input loses focus */\n  onBlur?: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void\n\n  // ============================================================================\n  // Data & Refs\n  // ============================================================================\n  \n  /** Data attributes for different parts of the component */\n  dataAttrributes?: InputNumberDataAttributes\n  /** Mobile breakpoint value @default true */\n  mobileBreakpoint?: boolean | number\n  /** Ref for mobile breakpoint container */\n  mobileBreakpointContainerRef?: RefObject<HTMLElement>\n\n  // ============================================================================\n  // Backward Compatibility Props\n  // ============================================================================\n  \n  /** @deprecated Use labelTooltipLabel instead */\n  helpTitle?: string\n  /** @deprecated Use labelTooltipDescription instead */\n  helpSupportingText?: string\n  /** @deprecated Use labelLeadingText instead */\n  leadingText?: string\n  /** @deprecated Use hintText with destructive state instead */\n  errorText?: string\n  /** Placeholder text */\n  placeholder?: string\n  /** Custom sx styles */\n  sx?: SxProps<Theme>\n}\n\n/**\n * Size configuration\n */\ninterface SizeConfig {\n  height: number\n  paddingY: number\n  paddingX: number\n  buttonSize: number\n  iconSize: number\n  width?: number\n}\n\nconst getSizeConfig = (size: InputNumberSize): SizeConfig => {\n  switch (size) {\n    case 'md':\n      return {\n        // Zenith md: 40px height, 40px buttons, content padding 8/12\n        height: 40,\n        paddingY: 8,\n        paddingX: 12,\n        buttonSize: 40,\n        iconSize: 20,\n      }\n    case 'sm':\n      return {\n        height: 36,\n        paddingY: 6,\n        paddingX: 10,\n        buttonSize: 36,\n        iconSize: 20,\n      }\n    case 'xs':\n      return {\n        height: 32,\n        paddingY: 6,\n        paddingX: 10,\n        buttonSize: 32,\n        iconSize: 16,\n        width: 180,\n      }\n    default:\n      return getSizeConfig('md')\n  }\n}\n\n/**\n * Get design token colors from theme\n */\nconst getDesignTokenColors = (theme: Theme) => {\n  return {\n    onSurface: theme.palette.dsTokens?.semantic?.onsurface ?? theme.palette.text?.primary ?? '#364152',\n    onSurfaceVariant: theme.palette.gray?.[500] ?? '#697586',\n    error: theme.palette.error?.main ?? '#D92D20',\n    surfaceContainerLowest: theme.palette.common?.white ?? '#FFFFFF',\n    outlineVariant: theme.palette.gray?.[200] ?? '#D4DCE7',\n    surfaceContainerLow: theme.palette.gray?.[25] ?? '#FCFCFD',\n    outline: theme.palette.gray?.[400] ?? '#8C96A2',\n    primary: theme.palette.primary?.main ?? '#1570EF',\n    outlineStrong: theme.palette.gray?.[600] ?? '#4B5565',\n    focusRing: (theme.palette as any).blue?.[100] ?? '#D1E9FF',\n    disabledSurface: (theme.palette as any).graymodern?.[50] ?? theme.palette.gray?.[50] ?? '#F8FAFC',\n    disabledOutline: (theme.palette as any).graymodern?.[300] ?? theme.palette.gray?.[300] ?? '#BBC6D3',\n    inactiveControl: (theme.palette as any).graymodern?.[300] ?? theme.palette.gray?.[300] ?? '#BBC6D3',\n    emphasisLight: (theme.palette as any).blue?.[200] ?? '#B2DDFF',\n    shadowSm: 'rgba(18, 25, 38, 0.05) 0px 1px 2px 0px',\n    disabledOpacity: 0.38,\n  }\n}\n\n/**\n * Stepper button component\n */\nconst StepperButton: React.FC<{\n  type: 'increment' | 'decrement'\n  onClick: () => void\n  disabled: boolean\n  size: SizeConfig\n  sx?: SxProps<Theme>\n}> = ({ type, onClick, disabled, size, sx }) => {\n  const iconName = type === 'increment' ? 'Plus' : 'Minus'\n\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      sx={[\n        {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: size.buttonSize,\n        height: '100%',\n        border: 'none',\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        flexShrink: 0,\n      },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      ]}\n    >\n      <Icon name={iconName} size={size.iconSize} color=\"currentColor\" />\n    </Box>\n  )\n}\n\nexport const InputNumber = React.forwardRef<HTMLDivElement, InputNumberProps>(\n  function InputNumber(props, ref) {\n    const {\n      // Core props\n      quantity,\n      value: valueProp,\n      defaultValue = 1,\n      onChange,\n      \n      // Size and type\n      size = 'md',\n      type = 'default',\n      variant, // deprecated\n      \n      // States\n      state, // deprecated\n      destructive = false,\n      disabled: disabledProp = false,\n      readOnly: readOnlyProp = false,\n      loading = false,\n      required = false,\n      allowZero = false,\n      \n      // Limits\n      minQuantity,\n      maxQuantity,\n      min: minProp,\n      max: maxProp,\n      step = 1,\n      \n      // Label props\n      label,\n      labelLeadingText,\n      labelTrailingText,\n      labelTooltipLabel,\n      labelTooltipDescription,\n      labelTooltipPlacement: _labelTooltipPlacement,\n      labelTooltipVariant: _labelTooltipVariant = 'light',\n      \n      // Hint props\n      hintText,\n      hintTextAlign = 'left',\n      hintCheckbox = false,\n      hintCheckboxProps,\n      checked,\n      onChangeCheckbox,\n      \n      // Button group props\n      buttonGroup = false,\n      selectedButtonGroupItem,\n      onCurrencyClick,\n      onPercentageClick,\n      \n      // Tooltip props - minus (not implemented yet, but accepted)\n      minusTooltip: _minusTooltip = false,\n      minusTooltipLabel: _minusTooltipLabel,\n      minusTooltipDescription: _minusTooltipDescription,\n      minusTooltipPlacement: _minusTooltipPlacement,\n      minusTooltipVariant: _minusTooltipVariant = 'light',\n      \n      // Tooltip props - plus (not implemented yet, but accepted)\n      plusTooltip: _plusTooltip = false,\n      plusTooltipLabel: _plusTooltipLabel,\n      plusTooltipDescription: _plusTooltipDescription,\n      plusTooltipPlacement: _plusTooltipPlacement,\n      plusTooltipVariant: _plusTooltipVariant = 'light',\n      \n      // Tooltip props - input (not implemented yet, but accepted)\n      inputTooltipLabel: _inputTooltipLabel,\n      inputTooltipDescription: _inputTooltipDescription,\n      inputTooltipPlacement: _inputTooltipPlacement,\n      inputTooltipVariant: _inputTooltipVariant = 'light',\n      \n      // Layout\n      customInputWidth,\n      fullWidth = false,\n      \n      // Events\n      onBlur,\n      \n      // Data attributes\n      dataAttrributes,\n      mobileBreakpoint: _mobileBreakpoint = true,\n      mobileBreakpointContainerRef: _mobileBreakpointContainerRef,\n      \n      // Backward compatibility\n      helpTitle,\n      helpSupportingText,\n      leadingText,\n      errorText,\n      placeholder,\n      sx,\n    } = props\n\n    const theme = useTheme()\n    const colors = getDesignTokenColors(theme)\n    const sizeConfig = getSizeConfig(size)\n\n    // Normalize props for backward compatibility\n    const controlledValue = quantity ?? valueProp\n    const min = minQuantity ?? minProp\n    const max = maxQuantity ?? maxProp\n    const effectiveType = type === 'defualt' ? 'default' : type // fix Storybook typo\n    const isEmphasis = effectiveType === 'emphasis' || variant === 'emphasis'\n    \n    // Parse defaultValue if string\n    const parsedDefaultValue = typeof defaultValue === 'string' \n      ? parseFloat(defaultValue) || 0 \n      : defaultValue\n\n    // Internal state for uncontrolled mode\n    const [internalValue, setInternalValue] = React.useState<number>(parsedDefaultValue)\n    const isControlled = controlledValue !== undefined\n    const currentValue = isControlled ? controlledValue : internalValue\n    const [hasFocus, setHasFocus] = React.useState(false)\n\n    // Derived states - support both state prop and direct props\n    const isDisabled = disabledProp || state === 'Disabled' || loading\n    const isReadOnly = readOnlyProp || state === 'Read-only'\n    const isFocused = state === 'Focused' || hasFocus\n    const isPlaceholder = state === 'Placeholder' || (!controlledValue && currentValue === parsedDefaultValue)\n    const showError = destructive && (errorText || hintText)\n    \n    // Resolved label tooltip props\n    const resolvedLabelTooltipLabel = labelTooltipLabel ?? helpTitle\n    const resolvedLabelTooltipDescription = labelTooltipDescription ?? helpSupportingText\n    \n    // Resolved leading text for label (only use labelLeadingText, NOT leadingText)\n    const resolvedLabelLeadingText = labelLeadingText\n\n    // Resolved leading text for input field\n    // If buttonGroup is enabled and currency is selected, show \"$\" prefix automatically\n    const resolvedInputLeadingText = leadingText ?? (buttonGroup && selectedButtonGroupItem === 'currency' ? '$' : undefined)\n\n    // Update value with reason (Storybook API)\n    const updateValue = React.useCallback(\n      (newValue: number, reason: InputNumberChangeReason = 'input') => {\n        let clampedValue = newValue\n        let actualReason = reason\n        \n        // Check min/max and update reason\n        if (min !== undefined && clampedValue < min) {\n          clampedValue = min\n          actualReason = 'min'\n        }\n        if (max !== undefined && clampedValue > max) {\n          clampedValue = max\n          actualReason = 'max'\n        }\n        \n        // Check allowZero\n        if (!allowZero && clampedValue === 0 && min !== undefined && min > 0) {\n          clampedValue = min\n        }\n\n        if (!isControlled) {\n          setInternalValue(clampedValue)\n        }\n        onChange?.(clampedValue, actualReason)\n      },\n      [isControlled, min, max, allowZero, onChange],\n    )\n\n    const handleDecrement = () => {\n      if (isDisabled || isReadOnly) return\n      updateValue(currentValue - step, 'step')\n    }\n\n    const handleIncrement = () => {\n      if (isDisabled || isReadOnly) return\n      updateValue(currentValue + step, 'step')\n    }\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled || isReadOnly) return\n      const newValue = parseFloat(e.target.value)\n      if (!isNaN(newValue)) {\n        updateValue(newValue, 'input')\n      }\n    }\n    \n    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n      setHasFocus(false)\n      // Call updateValue with blur reason to trigger any validation\n      updateValue(currentValue, 'blur')\n      onBlur?.(e)\n    }\n\n    const radius = isEmphasis ? 32 : 8\n\n    const baseOutline = destructive\n      ? colors.error\n      : isDisabled\n        ? colors.disabledOutline\n        : colors.outline\n\n    // Focus state should show primary blue color, not just stronger outline\n    const focusedOutline = destructive ? colors.error : colors.primary\n\n    const middleBackground = isEmphasis\n      ? colors.primary\n      : isDisabled\n        ? colors.disabledSurface\n        : isReadOnly\n          ? colors.surfaceContainerLow\n          : colors.surfaceContainerLowest\n\n    const middleTextColor = isEmphasis\n      ? colors.surfaceContainerLowest\n      : isDisabled\n        ? colors.onSurfaceVariant\n        : colors.onSurface\n\n    const leadingColor = isEmphasis\n      ? colors.surfaceContainerLowest\n      : isDisabled\n        ? colors.onSurfaceVariant\n        : colors.outlineStrong\n\n    // Check if buttons should be disabled\n    const isDecrementDisabled = isDisabled || isReadOnly || (min !== undefined && currentValue <= min)\n    const isIncrementDisabled = isDisabled || isReadOnly || (max !== undefined && currentValue >= max)\n\n    const isDecrementInactive = !isDisabled && !isReadOnly && (min !== undefined && currentValue <= min)\n    const isIncrementInactive = !isDisabled && !isReadOnly && (max !== undefined && currentValue >= max)\n\n    const groupShadow = isDisabled ? 'none' : colors.shadowSm\n\n    // Calculate width\n    const componentWidth = fullWidth \n      ? '100%' \n      : customInputWidth \n        ? customInputWidth \n        : sizeConfig.width ?? 200\n\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: '6px',\n          width: componentWidth,\n          ...sx,\n        }}\n      >\n        {/* Label row */}\n        {(label || labelLeadingText || labelTrailingText) && (\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'row',\n              alignItems: 'center',\n              gap: '4px',\n              width: '100%',\n            }}\n          >\n            {/* Leading text before label */}\n            {resolvedLabelLeadingText && (\n              <Typography\n                variant=\"text-sm-regular\"\n                sx={{\n                  color: isDisabled\n                    ? `rgba(54, 65, 82, ${colors.disabledOpacity})`\n                    : colors.onSurfaceVariant,\n                }}\n              >\n                {resolvedLabelLeadingText}\n              </Typography>\n            )}\n            \n            {/* Label */}\n            {label && (\n              <Typography\n                variant=\"text-sm-medium\"\n                sx={{\n                  color: isDisabled\n                    ? `rgba(54, 65, 82, ${colors.disabledOpacity})`\n                    : colors.onSurface,\n                }}\n              >\n                {label}\n                {required && ' *'}\n              </Typography>\n            )}\n            \n            {/* Trailing text after label */}\n            {labelTrailingText && (\n              <Typography\n                variant=\"text-sm-regular\"\n                sx={{\n                  color: isDisabled\n                    ? `rgba(54, 65, 82, ${colors.disabledOpacity})`\n                    : colors.onSurfaceVariant,\n                }}\n              >\n                {labelTrailingText}\n              </Typography>\n            )}\n            \n            {/* Help icon / Label tooltip */}\n            {resolvedLabelTooltipLabel && (\n              <HelpIcon\n                title={resolvedLabelTooltipLabel}\n                supportingText={\n                  typeof resolvedLabelTooltipDescription === 'string' \n                    ? resolvedLabelTooltipDescription \n                    : undefined\n                }\n                tooltipPlacement=\"top-center\"\n                iconSize={16}\n              />\n            )}\n          </Box>\n        )}\n\n        {/* Input container */}\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'row',\n            width: '100%',\n          }}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'row',\n              width: '100%',\n              height: sizeConfig.height,\n              boxShadow: groupShadow,\n            }}\n          >\n            {/* Decrement button */}\n            <StepperButton\n              type=\"decrement\"\n              onClick={handleDecrement}\n              disabled={isDecrementDisabled}\n              size={sizeConfig}\n              sx={{\n                borderRadius: `${radius}px 0px 0px ${radius}px`,\n                outline: `1px solid ${\n                  isEmphasis\n                    ? colors.emphasisLight\n                    : isDisabled\n                      ? colors.disabledOutline\n                      : isDecrementInactive\n                        ? colors.inactiveControl\n                        : baseOutline\n                }`,\n                outlineOffset: '-1px',\n                backgroundColor: isEmphasis\n                  ? colors.emphasisLight\n                  : isDisabled\n                    ? colors.disabledSurface\n                    : isDecrementInactive\n                      ? 'rgba(0, 0, 0, 0)'\n                      : 'rgba(0, 0, 0, 0)',\n                color: isEmphasis\n                  ? colors.surfaceContainerLowest\n                  : isDisabled\n                    ? colors.onSurfaceVariant\n                    : isDecrementInactive\n                      ? colors.inactiveControl\n                      : colors.onSurface,\n                // Hover state - subtle background change\n                '&:hover:not(:disabled)': {\n                  backgroundColor: isEmphasis ? colors.emphasisLight : colors.surfaceContainerLow,\n                },\n                // Active/pressed state - slightly darker\n                '&:active:not(:disabled)': {\n                  backgroundColor: isEmphasis ? colors.emphasisLight : colors.outlineVariant,\n                },\n              }}\n            />\n\n            {/* Middle input segment */}\n            <Box\n              sx={{\n                display: 'flex',\n                flexDirection: 'row',\n                alignItems: 'center',\n                gap: '8px',\n                flex: 1,\n                paddingY: `${sizeConfig.paddingY}px`,\n                paddingX: `${sizeConfig.paddingX}px`,\n                backgroundColor: middleBackground,\n                outline: `1px solid ${isFocused ? focusedOutline : baseOutline}`,\n                outlineOffset: '-1px',\n                marginLeft: '-1px',\n                marginRight: '-1px',\n                ...(isFocused && !isDisabled && !isEmphasis && !destructive && {\n                  // No focus ring - just outline width change handled by outline property\n                  outlineWidth: 2,\n                  zIndex: 1,\n                }),\n                ...(isDisabled && {\n                  boxShadow: colors.shadowSm,\n                }),\n              }}\n            >\n              {/* Leading text (currency symbol, etc.) */}\n              {resolvedInputLeadingText && (\n                <Typography\n                  variant=\"text-md-regular\"\n                  sx={{\n                    color: leadingColor,\n                    flexShrink: 0,\n                  }}\n                >\n                  {resolvedInputLeadingText}\n                </Typography>\n              )}\n\n              {/* Number input */}\n              <Box\n                component=\"input\"\n                type=\"number\"\n                value={isPlaceholder && !currentValue ? '' : currentValue}\n                placeholder={placeholder}\n                onChange={handleInputChange}\n                disabled={isDisabled}\n                readOnly={isReadOnly}\n                sx={{\n                  flex: 1,\n                  width: '100%',\n                  border: 'none',\n                  outline: 'none',\n                  backgroundColor: 'transparent',\n                  fontFamily: 'Inter, sans-serif',\n                  fontSize: '16px',\n                  fontWeight: 400,\n                  lineHeight: '24px',\n                  color: middleTextColor,\n                  textAlign: 'center',\n                  MozAppearance: 'textfield',\n                  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\n                    WebkitAppearance: 'none',\n                    margin: 0,\n                  },\n                  '&::placeholder': {\n                    color: colors.onSurfaceVariant,\n                  },\n                  cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'text',\n                  '&:focus': {\n                    outline: 'none',\n                  },\n                }}\n                onFocus={() => setHasFocus(true)}\n                onBlur={handleBlur}\n                {...(dataAttrributes?.inputField && Object.fromEntries(\n                  Object.entries(dataAttrributes.inputField).map(([k, v]) => [`data-${k}`, v])\n                ))}\n              />\n            </Box>\n\n            {/* Increment button */}\n            <StepperButton\n              type=\"increment\"\n              onClick={handleIncrement}\n              disabled={isIncrementDisabled}\n              size={sizeConfig}\n              sx={{\n                borderRadius: `0px ${radius}px ${radius}px 0px`,\n                outline: `1px solid ${\n                  isEmphasis\n                    ? colors.primary\n                    : isDisabled\n                      ? colors.disabledOutline\n                      : isIncrementInactive\n                        ? colors.inactiveControl\n                        : baseOutline\n                }`,\n                outlineOffset: '-1px',\n                backgroundColor: isEmphasis\n                  ? colors.primary\n                  : isDisabled\n                    ? colors.disabledSurface\n                    : isIncrementInactive\n                      ? colors.surfaceContainerLowest\n                      : colors.surfaceContainerLowest,\n                color: isEmphasis\n                  ? colors.surfaceContainerLowest\n                  : isDisabled\n                    ? colors.onSurfaceVariant\n                    : isIncrementInactive\n                      ? colors.inactiveControl\n                      : colors.onSurface,\n                // Hover state - subtle background change\n                '&:hover:not(:disabled)': {\n                  backgroundColor: isEmphasis ? colors.primary : colors.surfaceContainerLow,\n                  opacity: isEmphasis ? 0.9 : 1,\n                },\n                // Active/pressed state - slightly darker\n                '&:active:not(:disabled)': {\n                  backgroundColor: isEmphasis ? colors.primary : colors.outlineVariant,\n                  opacity: isEmphasis ? 0.8 : 1,\n                },\n              }}\n            />\n          </Box>\n        </Box>\n\n        {/* Button Group (currency/percentage) */}\n        {buttonGroup && (\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'row',\n              gap: 0,\n              width: '100%',\n              mt: 1,\n            }}\n          >\n            <Box\n              component=\"button\"\n              type=\"button\"\n              onClick={onCurrencyClick}\n              sx={{\n                px: 2,\n                py: 1,\n                border: '1px solid',\n                borderColor: selectedButtonGroupItem === 'currency' ? colors.primary : colors.outline,\n                backgroundColor: selectedButtonGroupItem === 'currency' ? colors.primary : 'transparent',\n                color: selectedButtonGroupItem === 'currency' ? colors.surfaceContainerLowest : colors.onSurface,\n                borderRadius: '8px 0 0 8px',\n                cursor: 'pointer',\n                fontSize: '14px',\n                fontWeight: 500,\n              }}\n            >\n              $\n            </Box>\n            <Box\n              component=\"button\"\n              type=\"button\"\n              onClick={onPercentageClick}\n              sx={{\n                px: 2,\n                py: 1,\n                border: '1px solid',\n                borderColor: selectedButtonGroupItem === 'percentage' ? colors.primary : colors.outline,\n                backgroundColor: selectedButtonGroupItem === 'percentage' ? colors.primary : 'transparent',\n                color: selectedButtonGroupItem === 'percentage' ? colors.surfaceContainerLowest : colors.onSurface,\n                borderRadius: '0 8px 8px 0',\n                cursor: 'pointer',\n                fontSize: '14px',\n                fontWeight: 500,\n                marginLeft: '-1px',\n              }}\n            >\n              %\n            </Box>\n          </Box>\n        )}\n\n        {/* Hint text with optional checkbox */}\n        {(hintText || showError || hintCheckbox) && (\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'row',\n              alignItems: 'flex-start',\n              gap: '8px',\n              width: '100%',\n              justifyContent: hintTextAlign === 'center' ? 'center' : hintTextAlign === 'right' ? 'flex-end' : 'flex-start',\n            }}\n          >\n            {hintCheckbox && (\n              <Checkbox\n                checked={checked}\n                onChange={onChangeCheckbox}\n                size=\"sm\"\n                disabled={isDisabled}\n                {...hintCheckboxProps}\n              />\n            )}\n            {(hintText || showError) && (\n              <Typography\n                variant=\"text-sm-regular\"\n                sx={{\n                  color: showError\n                    ? colors.error\n                    : isDisabled\n                    ? `rgba(54, 65, 82, ${colors.disabledOpacity})`\n                    : colors.onSurfaceVariant,\n                  textAlign: hintTextAlign,\n                }}\n              >\n                {showError ? (errorText || hintText) : hintText}\n              </Typography>\n            )}\n          </Box>\n        )}\n        \n        {/* Loading indicator */}\n        {loading && (\n          <Box\n            sx={{\n              position: 'absolute',\n              top: '50%',\n              left: '50%',\n              transform: 'translate(-50%, -50%)',\n            }}\n          >\n            <CircularProgress size={20} />\n          </Box>\n        )}\n      </Box>\n    )\n  },\n)\n\nexport default InputNumber\n\n"],"names":["InputNumber"],"mappings":"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"}

package/dist/components/forms/InputSearch.d.ts

@@ -0,0 +1,233 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import { ChangeEvent, ReactNode, RefObject } from 'react';
+import { TooltipProps } from '../Tooltip';
+import { CheckboxProps } from './Checkbox';
+import * as React from 'react';
+export type InputSearchSize = 'xs' | 'sm' | 'md' | 'small' | 'medium';
+export type InputSearchShape = 'square' | 'rounded';
+export type InputSearchOptionsSize = 'small' | 'medium';
+export type InputSearchType = 'default' | 'badgeCount';
+export type InputSearchTooltipPlacement = 'None' | 'Top Left' | 'Top Right' | 'Top Center' | 'Bottom Left' | 'Bottom Right' | 'Bottom Center' | 'Left' | 'Right';
+export type InputSearchTooltipVariant = 'light' | 'dark';
+export interface InputSearchOption {
+    id: string | number;
+    label: string;
+    supportingText?: string;
+    avatarImg?: string;
+    icon?: React.ReactNode;
+    typeLeading?: 'Icon Leading' | 'Avatar Leading' | 'Dot Leading';
+    [key: string]: any;
+}
+export interface MenuItemOption {
+    value: string;
+    label: string;
+}
+export interface InputSearchDataAttributes {
+    [key: string]: string;
+}
+export interface InputSearchProps<T extends InputSearchOption = InputSearchOption> {
+    /**
+     * Label text shown above the input.
+     */
+    label?: string;
+    /**
+     * Hint text shown below the input.
+     */
+    hintText?: string;
+    /**
+     * Placeholder text for the input.
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is required.
+     */
+    required?: boolean;
+    /**
+     * Size variant.
+     * @default 'md'
+     */
+    size?: InputSearchSize;
+    /**
+     * Size of search options in dropdown.
+     * @default 'medium'
+     */
+    searchOptionsSize?: InputSearchOptionsSize;
+    /**
+     * Shape variant.
+     * @default 'square'
+     */
+    shape?: InputSearchShape;
+    /**
+     * Component type.
+     * @default 'default'
+     */
+    type?: InputSearchType;
+    /**
+     * Search options for autocomplete.
+     */
+    searchOptions: T[];
+    /**
+     * Current input value (text).
+     */
+    inputValue?: string;
+    /**
+     * Current selected value(s).
+     */
+    value?: T | T[] | null;
+    /**
+     * Callback when value changes.
+     */
+    onChange?: (value: T | T[] | null) => void;
+    /**
+     * Callback when input value changes.
+     */
+    onInputChange?: (value: string) => void;
+    /**
+     * Callback when input search is triggered.
+     */
+    onInputSearch?: (value: string) => void;
+    /**
+     * Whether to support multiple selection.
+     * @default false
+     */
+    multipleInputValues?: boolean;
+    /**
+     * Whether the input is in a destructive/error state.
+     */
+    destructive?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Whether the input is read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * It will open up a dropdown when user clicks on Input.
+     * Rounded variant won't support dropdown.
+     */
+    enableDropdown?: boolean;
+    /**
+     * Options for leading dropdown.
+     * Rounded variant won't support secondary dropdown.
+     */
+    leadingDropDownMenuOptions?: MenuItemOption[];
+    /**
+     * Selected option for leading dropdown.
+     */
+    leadingDropDownSelectedOption?: string;
+    /**
+     * Callback when leading dropdown option changes.
+     */
+    onLeadingDropDownChange?: (value: string) => void;
+    /**
+     * Whether to show search icon with dropdown.
+     */
+    showInputLeadingIconWithDropdown?: boolean;
+    /**
+     * Width of the component.
+     */
+    width?: string | number;
+    /**
+     * If provided, help icon with tooltip appears next to label.
+     */
+    labelTooltipLabel?: string;
+    /**
+     * Help icon tooltip description.
+     */
+    labelTooltipDescription?: ReactNode;
+    /**
+     * Help icon tooltip placement.
+     */
+    labelTooltipPlacement?: InputSearchTooltipPlacement;
+    /**
+     * Help icon tooltip variant.
+     */
+    labelTooltipVariant?: InputSearchTooltipVariant;
+    /**
+     * Props for label tooltip (alternative to individual props).
+     */
+    labelTooltipProps?: Partial<TooltipProps>;
+    /**
+     * Whether to show reset to default button.
+     */
+    showResetToDefault?: boolean;
+    /**
+     * Callback when reset button is clicked.
+     */
+    onResetToDefaultClick?: () => void;
+    /**
+     * Props for reset to default tooltip.
+     */
+    resetToDefaultTooltipProps?: Omit<TooltipProps, 'children'>;
+    /**
+     * Tooltip label for input field.
+     */
+    inputTooltipLabel?: string;
+    /**
+     * Tooltip description for input field.
+     */
+    inputTooltipDescription?: ReactNode;
+    /**
+     * Tooltip placement for input field.
+     */
+    inputTooltipPlacement?: InputSearchTooltipPlacement;
+    /**
+     * Tooltip variant for input field.
+     */
+    inputTooltipVariant?: InputSearchTooltipVariant;
+    /**
+     * Props for input tooltip (alternative to individual props).
+     */
+    inputTooltipProps?: Partial<TooltipProps>;
+    /**
+     * Show hint checkbox.
+     */
+    hintCheckbox?: boolean;
+    /**
+     * Props for the hint checkbox.
+     */
+    hintCheckboxProps?: CheckboxProps;
+    /**
+     * Checkbox checked state.
+     */
+    checked?: boolean;
+    /**
+     * Callback when checkbox changes.
+     */
+    onChangeCheckbox?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Data attributes for the component.
+     */
+    dataAttributes?: InputSearchDataAttributes;
+    /**
+     * Type of leading element in options: icon, avatar, or dot.
+     * Can also be set per-option via option.typeLeading
+     */
+    typeLeading?: 'Icon Leading' | 'Avatar Leading' | 'Dot Leading';
+    /**
+     * Whether to allow free text input.
+     * @default false
+     */
+    freeSolo?: boolean;
+    /**
+     * Additional styles for the root container.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+    /**
+     * Ref to the component.
+     */
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null;
+}
+export declare const InputSearch: React.ForwardRefExoticComponent<Omit<InputSearchProps<InputSearchOption>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default InputSearch;
+//# sourceMappingURL=InputSearch.d.ts.map

package/dist/components/forms/InputSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputSearch.d.ts","sourceRoot":"","sources":["../../../src/components/forms/InputSearch.tsx"],"names":[],"mappings":"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"}