@customafk/lunas-ui 0.0.80 → 0.0.82

package/dist/forms/number-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.js","names":["NumberInput: React.FC<IProps>","value","precision","maxIntegerLength"],"sources":["../../packages/components/ui/inputs/number-input.tsx","../../packages/components/forms/number-field.tsx"],"sourcesContent":["'use client'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { Input } from '../input'\n\nconst createValidationRegex = (allowNegative: boolean): RegExp => {\n  return allowNegative ? /^-?\\d*\\.?\\d*$/ : /^\\d*\\.?\\d*$/\n}\n\nconst formatNumberWithCommas = (num: number | string): string => {\n  return Number(num).toLocaleString()\n}\n\ninterface IProps extends React.HTMLAttributes<HTMLInputElement> {\n  /**\n   * Description: Value for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Value for the text field\n   */\n  value?: string | number\n  /**\n   * Description: Disabled state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Disabled state of the text field\n   *\n   * Note: If true, the text field will be disabled\n   */\n  disabled?: boolean\n  /**\n   * Description: Readonly state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Readonly state of the text field\n   */\n  readonly?: boolean\n  /**\n   * Description: Allow negative value for the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Allow negative value for the text field\n   */\n  allowNegative?: boolean\n  /**\n   * Description: Decimal point for the text field\n   *\n   * Default: `undefined`\n   *\n   * Usage: Ex: [12,3] => console.log(2323.23) // True\n   *\n   * Note: IF use this prop, `numberAfterDecimalPoint` will be ignored\n   */\n  decimal?: [number, number]\n  /**\n   * Description: Rounding rule for the text field\n   *\n   * Default: `nearest`\n   *\n   * Usage: Rounding rule for the text field\n   */\n  roundingRule?: 'up' | 'down' | 'nearest' | 'none'\n  /**\n   * Description: Number of digits after the decimal point\n   *\n   * Default: `2`\n   *\n   * Usage: Number of digits after the decimal point\n   */\n  numberAfterDecimalPoint?: number\n  /**\n   * Description: Placeholder for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Placeholder for the text field\n   */\n  placeholder?: string\n  /**\n   * Description: Unit text for the text field\n   *\n   * Default: ''\n   *\n   * E.g. 'kg', 'm', 'USD'...\n   */\n  unitText?: string\n  /**\n   * Description: Invalid state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Invalid state of the text field\n   */\n  invalid?: boolean\n  /**\n   * Description: Precision for the text field\n   *\n   * Default: `undefined`\n   * E.g.\n   * - 2.13 => 2.1 when precision is 1\n   * - 2.134 => 2.13 when precision is 2\n   */\n  precision?: number\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  onValueChange?: (value?: number) => void\n  onBlur?: () => void\n}\n/**\n * ## Unit Text Field Component\n *\n * **Description**: This component is to display common text field with unit\n *\n * **Usage**: Text field with unit example: 1000 (kg), 100 (m), 1000 (USD)...\n */\nexport const NumberInput: React.FC<IProps> = ({\n  disabled = false,\n  readonly = false,\n  allowNegative = false,\n  numberAfterDecimalPoint = 2,\n  roundingRule = 'none',\n  value: initialValue = '',\n  unitText,\n  decimal,\n  placeholder,\n  precision,\n  onChange,\n  onValueChange,\n  onBlur,\n  ...props\n}) => {\n  const _unitRef = useRef<HTMLSpanElement>(null)\n  const _inputRef = useRef<HTMLInputElement>(null)\n\n  const [value, setValue] = useState<string>(initialValue.toString())\n\n  // Memoized values for validation and formatting\n  const maxDecimalPlaces = decimal?.[1] ?? numberAfterDecimalPoint\n  const maxIntegerLength = decimal && decimal[0] - decimal[1]\n  const validationRegex = useMemo(() => createValidationRegex(allowNegative), [allowNegative])\n\n  // Validation functions\n  const isValidDecimalLength = useCallback(\n    (value: string): boolean => {\n      if (!maxDecimalPlaces && value.includes('.')) return false\n      const decimalPart = value.split('.')[1]\n      return !decimalPart || decimalPart.length <= maxDecimalPlaces\n    },\n    [maxDecimalPlaces],\n  )\n  const isValidFormat = useCallback(\n    (value: string): boolean => {\n      if (!decimal || value === '-') return true\n      const [integerPart, decimalPart = ''] = value.split('.')\n\n      return decimalPart.length <= decimal[1] && (integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length) <= maxIntegerLength!\n    },\n    [decimal, maxIntegerLength],\n  )\n  const customRoundedValue = useCallback(\n    (value: number, precision: number) => {\n      if (roundingRule === 'none') return value\n\n      const factor = Math.pow(10, precision)\n      const scaledValue = value * factor\n\n      switch (roundingRule) {\n        case 'up':\n          return Math.ceil(scaledValue) / factor\n        case 'down':\n          return Math.floor(scaledValue) / factor\n        case 'nearest': {\n          if (scaledValue % 1 < 0.1) return Math.floor(scaledValue) / factor\n          if (scaledValue % 1 >= 0.59) return Math.ceil(scaledValue) / factor\n          return (Math.floor(scaledValue) + 0.5) / factor\n        }\n        default:\n          return value\n      }\n    },\n    [roundingRule],\n  )\n  const isDecimalPointGreaterThanLimit = useCallback(\n    (value: string) => (!numberAfterDecimalPoint && value.includes('.')) || value.split('.')[1]?.length > numberAfterDecimalPoint,\n    [numberAfterDecimalPoint],\n  )\n  const formattedValue = useCallback(\n    (val: string) => {\n      if (val === '0') return '0'\n      if (!Number(val)) return ''\n\n      const numValue = parseFloat(val)\n      const effectivePrecision = Math.min(maxDecimalPlaces - 1, precision || 0)\n      const roundedValue = customRoundedValue(numValue, effectivePrecision).toString()\n      const [integerPart, decimalPart = ''] = roundedValue.split('.')\n      const formattedInteger = formatNumberWithCommas(integerPart)\n      return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger\n    },\n    [customRoundedValue, maxDecimalPlaces, precision],\n  )\n  // Validate decimal point is less than or equal to the limit\n  const validateDecimalPoint = useCallback(\n    (value: string) => {\n      if (!decimal || value === '-') return true\n\n      const [integerPart, decimalPart = ''] = value.split('.')\n      const integerLength = integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length\n      const maxIntegerLength = decimal[0] - decimal[1]\n\n      return decimalPart.length <= decimal[1] && integerLength <= maxIntegerLength\n    },\n    [decimal],\n  )\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      // Don't prevent default behavior of input change\n      onChange?.(e)\n\n      // Custom event handler for value change\n      const { value: inputValue } = e.target\n\n      // Handle empty input\n      if (!inputValue) {\n        onValueChange?.(undefined)\n        setValue('')\n        return\n      }\n\n      // Handle zero and negative zero\n      const isZero = inputValue === '0'\n      const isNegativeZero = inputValue === '-' && allowNegative\n      if (isZero || isNegativeZero) {\n        onValueChange?.(0)\n        setValue(inputValue)\n        return\n      }\n\n      // Validate input format\n      const isValid = validationRegex.test(inputValue) && isValidFormat(inputValue) && (decimal || isValidDecimalLength(inputValue))\n      if (!isValid) return\n\n      const numericValue = parseFloat(inputValue) || 0\n      onValueChange?.(numericValue)\n      setValue(inputValue)\n    },\n    [allowNegative, decimal, isValidDecimalLength, isValidFormat, onChange, onValueChange, validationRegex],\n  )\n\n  const handleFocus = useCallback(() => {\n    if (readonly) return\n    setValue((prev) => prev.replace(/,/g, '')) // Remove commas for easier editing\n  }, [readonly])\n\n  const handleBlur = useCallback(() => {\n    if (readonly) return\n    onBlur?.()\n    setValue((prev) => formattedValue(prev))\n  }, [readonly, onBlur, formattedValue])\n\n  // Set initial value\n  useEffect(() => {\n    const isFocused = document.activeElement === _inputRef.current\n\n    if (\n      !initialValue ||\n      !validationRegex.test(initialValue.toString()) ||\n      !validateDecimalPoint(initialValue.toString()) ||\n      (!decimal && isDecimalPointGreaterThanLimit(initialValue.toString()))\n    ) {\n      setValue('')\n      return\n    }\n\n    setValue((prev) => {\n      if (prev === '-') return '-'\n      if (!prev) return ''\n      return isFocused ? initialValue.toString() : formattedValue(initialValue.toString())\n    })\n  }, [decimal, formattedValue, initialValue, isDecimalPointGreaterThanLimit, validateDecimalPoint, validationRegex])\n\n  // Set padding right for the input field\n  useEffect(() => {\n    if (!_unitRef.current || !_inputRef.current || !unitText) return\n    const unitWidth = _unitRef.current.offsetWidth\n    _inputRef.current.style.setProperty('padding-right', `${(unitWidth + 10) / 16}rem`)\n  }, [disabled, unitText])\n\n  return (\n    <div className=\"relative\">\n      <Input\n        {...props}\n        ref={_inputRef}\n        value={value || (readonly ? '0' : '')}\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readonly}\n        className={cn('font-number text-end', readonly && 'bg-muted text-muted-foreground')}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n      {unitText && (\n        <span ref={_unitRef} className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm\">\n          {unitText}\n        </span>\n      )}\n    </div>\n  )\n}\n","import { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { NumberInput } from '../ui/inputs/number-input'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  description?: string\n  placeholder?: string\n  unitText?: string\n  isShowClearButton?: boolean\n  isShowErrorMsg?: boolean\n  isShowCount?: boolean\n  onValueChange?: (value?: number) => void\n}\nexport const NumberField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Number Field',\n  placeholder = '0',\n  isShowErrorMsg = false,\n  isShowCount = false,\n  unitText = '',\n  description = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const valueWatch = useWatch({ name })\n\n  return (\n    <FormField\n      name={name}\n      render={({ field: { onChange, ...field } }) => (\n        <FormItem className=\"w-full gap-0\">\n          <FormLabel>{label}</FormLabel>\n          <FormControl>\n            <NumberInput\n              {...field}\n              placeholder={placeholder}\n              className=\"w-full\"\n              unitText={unitText}\n              onValueChange={(value) => {\n                onChange(value)\n                onValueChange?.(value)\n              }}\n            />\n          </FormControl>\n          {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n          {!!description && <FormDescription>{description}</FormDescription>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"number-field.js","names":["NumberInput: React.FC<IProps>","value","precision","maxIntegerLength"],"sources":["../../packages/components/ui/inputs/number-input.tsx","../../packages/components/forms/number-field.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '../input';\n\nconst createValidationRegex = (allowNegative: boolean): RegExp => {\n  return allowNegative ? /^-?\\d*\\.?\\d*$/ : /^\\d*\\.?\\d*$/;\n};\n\nconst formatNumberWithCommas = (num: number | string): string => {\n  return Number(num).toLocaleString();\n};\n\ninterface IProps extends React.HTMLAttributes<HTMLInputElement> {\n  /**\n   * Description: Value for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Value for the text field\n   */\n  value?: string | number;\n  /**\n   * Description: Disabled state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Disabled state of the text field\n   *\n   * Note: If true, the text field will be disabled\n   */\n  disabled?: boolean;\n  /**\n   * Description: Readonly state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Readonly state of the text field\n   */\n  readonly?: boolean;\n  /**\n   * Description: Allow negative value for the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Allow negative value for the text field\n   */\n  allowNegative?: boolean;\n  /**\n   * Description: Decimal point for the text field\n   *\n   * Default: `undefined`\n   *\n   * Usage: Ex: [12,3] => console.log(2323.23) // True\n   *\n   * Note: IF use this prop, `numberAfterDecimalPoint` will be ignored\n   */\n  decimal?: [number, number];\n  /**\n   * Description: Rounding rule for the text field\n   *\n   * Default: `nearest`\n   *\n   * Usage: Rounding rule for the text field\n   */\n  roundingRule?: 'up' | 'down' | 'nearest' | 'none';\n  /**\n   * Description: Number of digits after the decimal point\n   *\n   * Default: `2`\n   *\n   * Usage: Number of digits after the decimal point\n   */\n  numberAfterDecimalPoint?: number;\n  /**\n   * Description: Placeholder for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Placeholder for the text field\n   */\n  placeholder?: string;\n  /**\n   * Description: Unit text for the text field\n   *\n   * Default: ''\n   *\n   * E.g. 'kg', 'm', 'USD'...\n   */\n  unitText?: string;\n  /**\n   * Description: Invalid state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Invalid state of the text field\n   */\n  invalid?: boolean;\n  /**\n   * Description: Precision for the text field\n   *\n   * Default: `undefined`\n   * E.g.\n   * - 2.13 => 2.1 when precision is 1\n   * - 2.134 => 2.13 when precision is 2\n   */\n  precision?: number;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  onValueChange?: (value?: number) => void;\n  onBlur?: () => void;\n}\n/**\n * ## Unit Text Field Component\n *\n * **Description**: This component is to display common text field with unit\n *\n * **Usage**: Text field with unit example: 1000 (kg), 100 (m), 1000 (USD)...\n */\nexport const NumberInput: React.FC<IProps> = ({\n  disabled = false,\n  readonly = false,\n  allowNegative = false,\n  numberAfterDecimalPoint = 2,\n  roundingRule = 'none',\n  value: initialValue = '',\n  unitText,\n  decimal,\n  placeholder,\n  precision,\n  onChange,\n  onValueChange,\n  onBlur,\n  ...props\n}) => {\n  const _unitRef = useRef<HTMLSpanElement>(null);\n  const _inputRef = useRef<HTMLInputElement>(null);\n\n  const [value, setValue] = useState<string>(initialValue.toString());\n\n  // Memoized values for validation and formatting\n  const maxDecimalPlaces = decimal?.[1] ?? numberAfterDecimalPoint;\n  const maxIntegerLength = decimal && decimal[0] - decimal[1];\n  const validationRegex = useMemo(() => createValidationRegex(allowNegative), [allowNegative]);\n\n  // Validation functions\n  const isValidDecimalLength = useCallback(\n    (value: string): boolean => {\n      if (!maxDecimalPlaces && value.includes('.')) return false;\n      const decimalPart = value.split('.')[1];\n      return !decimalPart || decimalPart.length <= maxDecimalPlaces;\n    },\n    [maxDecimalPlaces]\n  );\n  const isValidFormat = useCallback(\n    (value: string): boolean => {\n      if (!decimal || value === '-') return true;\n      const [integerPart, decimalPart = ''] = value.split('.');\n\n      return decimalPart.length <= decimal[1] && (integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length) <= maxIntegerLength!;\n    },\n    [decimal, maxIntegerLength]\n  );\n  const customRoundedValue = useCallback(\n    (value: number, precision: number) => {\n      if (roundingRule === 'none') return value;\n\n      const factor = Math.pow(10, precision);\n      const scaledValue = value * factor;\n\n      switch (roundingRule) {\n        case 'up':\n          return Math.ceil(scaledValue) / factor;\n        case 'down':\n          return Math.floor(scaledValue) / factor;\n        case 'nearest': {\n          if (scaledValue % 1 < 0.1) return Math.floor(scaledValue) / factor;\n          if (scaledValue % 1 >= 0.59) return Math.ceil(scaledValue) / factor;\n          return (Math.floor(scaledValue) + 0.5) / factor;\n        }\n        default:\n          return value;\n      }\n    },\n    [roundingRule]\n  );\n  const isDecimalPointGreaterThanLimit = useCallback(\n    (value: string) => (!numberAfterDecimalPoint && value.includes('.')) || value.split('.')[1]?.length > numberAfterDecimalPoint,\n    [numberAfterDecimalPoint]\n  );\n  const formattedValue = useCallback(\n    (val: string) => {\n      if (val === '0') return '0';\n      if (!Number(val)) return '';\n\n      const numValue = parseFloat(val);\n      const effectivePrecision = Math.min(maxDecimalPlaces - 1, precision || 0);\n      const roundedValue = customRoundedValue(numValue, effectivePrecision).toString();\n      const [integerPart, decimalPart = ''] = roundedValue.split('.');\n      const formattedInteger = formatNumberWithCommas(integerPart);\n      return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;\n    },\n    [customRoundedValue, maxDecimalPlaces, precision]\n  );\n  // Validate decimal point is less than or equal to the limit\n  const validateDecimalPoint = useCallback(\n    (value: string) => {\n      if (!decimal || value === '-') return true;\n\n      const [integerPart, decimalPart = ''] = value.split('.');\n      const integerLength = integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length;\n      const maxIntegerLength = decimal[0] - decimal[1];\n\n      return decimalPart.length <= decimal[1] && integerLength <= maxIntegerLength;\n    },\n    [decimal]\n  );\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      // Don't prevent default behavior of input change\n      onChange?.(e);\n\n      // Custom event handler for value change\n      const { value: inputValue } = e.target;\n\n      // Handle empty input\n      if (!inputValue) {\n        onValueChange?.(undefined);\n        setValue('');\n        return;\n      }\n\n      // Handle zero and negative zero\n      const isZero = inputValue === '0';\n      const isNegativeZero = inputValue === '-' && allowNegative;\n      if (isZero || isNegativeZero) {\n        onValueChange?.(0);\n        setValue(inputValue);\n        return;\n      }\n\n      // Validate input format\n      const isValid = validationRegex.test(inputValue) && isValidFormat(inputValue) && (decimal || isValidDecimalLength(inputValue));\n      if (!isValid) return;\n\n      const numericValue = parseFloat(inputValue) || 0;\n      onValueChange?.(numericValue);\n      setValue(inputValue);\n    },\n    [allowNegative, decimal, isValidDecimalLength, isValidFormat, onChange, onValueChange, validationRegex]\n  );\n\n  const handleFocus = useCallback(() => {\n    if (readonly) return;\n    setValue(prev => prev.replace(/,/g, '')); // Remove commas for easier editing\n  }, [readonly]);\n\n  const handleBlur = useCallback(() => {\n    if (readonly) return;\n    onBlur?.();\n    setValue(prev => formattedValue(prev));\n  }, [readonly, onBlur, formattedValue]);\n\n  // Set initial value\n  useEffect(() => {\n    const isFocused = document.activeElement === _inputRef.current;\n\n    if (\n      !initialValue ||\n      !validationRegex.test(initialValue.toString()) ||\n      !validateDecimalPoint(initialValue.toString()) ||\n      (!decimal && isDecimalPointGreaterThanLimit(initialValue.toString()))\n    ) {\n      setValue('');\n      return;\n    }\n\n    setValue(prev => {\n      if (prev === '-') return '-';\n      if (!prev) return '';\n      return isFocused ? initialValue.toString() : formattedValue(initialValue.toString());\n    });\n  }, [decimal, formattedValue, initialValue, isDecimalPointGreaterThanLimit, validateDecimalPoint, validationRegex]);\n\n  // Set padding right for the input field\n  useEffect(() => {\n    if (!_unitRef.current || !_inputRef.current || !unitText) return;\n    const unitWidth = _unitRef.current.offsetWidth;\n    _inputRef.current.style.setProperty('padding-right', `${(unitWidth + 10) / 16}rem`);\n  }, [disabled, unitText]);\n\n  return (\n    <div className=\"relative\">\n      <Input\n        {...props}\n        ref={_inputRef}\n        value={value || (readonly ? '0' : '')}\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readonly}\n        className={cn('font-number text-end', readonly && 'bg-muted text-muted-foreground')}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n      {unitText && (\n        <span ref={_unitRef} className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm\">\n          {unitText}\n        </span>\n      )}\n    </div>\n  );\n};\n","import { Activity } from 'react';\nimport { type FieldPath, type FieldValues, useWatch } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { NumberInput } from '../ui/inputs/number-input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  unitText?: string;\n  isShowClearButton?: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  onValueChange?: (value?: number) => void;\n};\nexport const NumberField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Number Field',\n  placeholder = '0',\n  isShowErrorMsg = false,\n  isShowCount = false,\n  unitText = '',\n  description = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const valueWatch = useWatch({ name });\n\n  return (\n    <FormField\n      name={name}\n      render={({ field: { onChange, ...field } }) => (\n        <FormItem>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              <FormLabel>{label}</FormLabel>\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <FormControl>\n            <NumberInput\n              {...field}\n              placeholder={placeholder}\n              className=\"w-full\"\n              unitText={unitText}\n              onValueChange={value => {\n                onChange(value);\n                onValueChange?.(value);\n              }}\n            />\n          </FormControl>\n          {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/forms/password-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-CHNSlaoz.cjs`);const t=require(`../form-DyH5iWq7.cjs`),n=require(`../input-DfGojpRF.cjs`),r=e.__toESM(require(`lucide-react`)),i=e.__toESM(require(`@customafk/react-toolkit/utils`)),a=e.__toESM(require(`react`)),o=e.__toESM(require(`react/jsx-runtime`)),s=({className:e,...t})=>{let s=(0,a.useId)(),[c,l]=(0,a.useState)(!1),u=(0,a.useCallback)(()=>l(e=>!e),[]);return(0,o.jsxs)(`div`,{className:`relative`,children:[(0,o.jsx)(n.Input,{...t,id:s,placeholder:`Password`,type:c?`text`:`password`,className:(0,i.cn)(`pe-9`,e)}),(0,o.jsx)(`button`,{className:`text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:u,"aria-label":c?`Hide password`:`Show password`,"aria-pressed":c,"aria-controls":`password`,children:c?(0,o.jsx)(r.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,o.jsx)(r.EyeIcon,{size:16,"aria-hidden":`true`})})]})},c=({name:e,label:n=`Text Field`,placeholder:r=`Enter text here`,isShowErrorMsg:i=!1,description:a,onValueChange:c})=>(0,o.jsx)(t.FormField,{name:e,render:({field:e})=>(0,o.jsxs)(t.FormItem,{className:`w-full`,children:[(0,o.jsx)(t.FormLabel,{children:n}),(0,o.jsx)(t.FormControl,{children:(0,o.jsx)(s,{placeholder:r,...e,onValueChange:c})}),!!a&&(0,o.jsx)(t.FormDescription,{children:a}),i&&(0,o.jsx)(t.FormMessage,{})]})});exports.PasswordField=c;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const t=require(`../field-A43YZ5Wj.cjs`),n=require(`../form-DV9tQbiO.cjs`),r=require(`../input-D_tClptL.cjs`);let i=require(`lucide-react`);i=e.__toESM(i);let a=require(`@customafk/react-toolkit/utils`);a=e.__toESM(a);let o=require(`react`);o=e.__toESM(o);let s=require(`react/jsx-runtime`);s=e.__toESM(s);const c=({className:e,...t})=>{let n=(0,o.useId)(),[c,l]=(0,o.useState)(!1),u=(0,o.useCallback)(()=>l(e=>!e),[]);return(0,s.jsxs)(`div`,{className:`relative`,children:[(0,s.jsx)(r.Input,{...t,id:n,placeholder:`Password`,type:c?`text`:`password`,className:(0,a.cn)(`pe-9`,e)}),(0,s.jsx)(`button`,{className:`text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:u,"aria-label":c?`Hide password`:`Show password`,"aria-pressed":c,"aria-controls":`password`,children:c?(0,s.jsx)(i.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,s.jsx)(i.EyeIcon,{size:16,"aria-hidden":`true`})})]})},l=({name:e,label:r=`Text Field`,placeholder:i=`Enter text here`,isShowErrorMsg:a=!1,description:l,onValueChange:u})=>(0,s.jsx)(n.FormField,{name:e,render:({field:e})=>(0,s.jsxs)(n.FormItem,{className:`w-full`,children:[(0,s.jsx)(o.Activity,{mode:r||l?`visible`:`hidden`,children:(0,s.jsxs)(t.FieldContent,{children:[(0,s.jsx)(n.FormLabel,{children:r}),!!l&&(0,s.jsx)(n.FormDescription,{children:l})]})}),(0,s.jsx)(n.FormControl,{children:(0,s.jsx)(c,{placeholder:i,...e,onValueChange:u})}),a&&(0,s.jsx)(n.FormMessage,{})]})});exports.PasswordField=l;
 //# sourceMappingURL=password-field.cjs.map

package/dist/forms/password-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"password-field.cjs","names":["PasswordInput: React.FC<Props>","Input","EyeOffIcon","EyeIcon","FormField","FormItem","FormLabel","FormControl","FormDescription","FormMessage"],"sources":["../../packages/components/ui/inputs/password-input.tsx","../../packages/components/forms/password-field.tsx"],"sourcesContent":["'use client'\nimport { cn } from '@customafk/react-toolkit/utils'\nimport { EyeIcon, EyeOffIcon } from 'lucide-react'\nimport { useCallback, useId, useState } from 'react'\n\nimport { Input } from '../input'\n\ntype Props = React.ComponentPropsWithoutRef<typeof Input>\nexport const PasswordInput: React.FC<Props> = ({ className, ...rest }) => {\n  const id = useId()\n  const [isVisible, setIsVisible] = useState<boolean>(false)\n  const toggleVisibility = useCallback(() => setIsVisible((prevState) => !prevState), [])\n  return (\n    <div className=\"relative\">\n      <Input {...rest} id={id} placeholder=\"Password\" type={isVisible ? 'text' : 'password'} className={cn('pe-9', className)} />\n      <button\n        className=\"text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        type=\"button\"\n        onClick={toggleVisibility}\n        aria-label={isVisible ? 'Hide password' : 'Show password'}\n        aria-pressed={isVisible}\n        aria-controls=\"password\"\n      >\n        {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n      </button>\n    </div>\n  )\n}\n","'use client'\nimport type { FieldPath, FieldValues } from 'react-hook-form'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { PasswordInput } from '../ui/inputs/password-input'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  description?: string\n  placeholder?: string\n  isShowErrorMsg?: boolean\n  onValueChange?: (value: string) => void\n}\nexport const PasswordField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isShowErrorMsg = false,\n  description,\n  onValueChange,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className=\"w-full\">\n          <FormLabel>{label}</FormLabel>\n          <FormControl>\n            <PasswordInput placeholder={placeholder} {...field} onValueChange={onValueChange} />\n          </FormControl>\n          {!!description && <FormDescription>{description}</FormDescription>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"sUAQaA,GAAkC,CAAE,YAAW,GAAG,KAAW,CACxE,IAAM,GAAA,EAAA,EAAA,SACA,CAAC,EAAW,IAAA,EAAA,EAAA,UAAkC,IAC9C,GAAA,EAAA,EAAA,iBAAqC,EAAc,GAAc,CAAC,GAAY,IACpF,OACE,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,sBACb,EAAA,EAAA,KAACC,EAAAA,MAAAA,CAAM,GAAI,EAAU,KAAI,YAAY,WAAW,KAAM,EAAY,OAAS,WAAY,WAAA,EAAA,EAAA,IAAc,OAAQ,MAC7G,EAAA,EAAA,KAAC,SAAA,CACC,UAAU,oVACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,gBAAkB,gBAC1C,eAAc,EACd,gBAAc,oBAEb,GAAY,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,KAAM,GAAI,cAAY,UAAY,EAAA,EAAA,KAACC,EAAAA,QAAAA,CAAQ,KAAM,GAAI,cAAY,eCTrF,GAAiE,CAC5E,OACA,QAAQ,aACR,cAAc,kBACd,iBAAiB,GACjB,cACA,oBAGE,EAAA,EAAA,KAACC,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,UAAU,oBAClB,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,KACZ,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAAC,EAAA,CAA2B,cAAa,GAAI,EAAsB,oBAEpE,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,IACnC,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA"}
+{"version":3,"file":"password-field.cjs","names":["PasswordInput: React.FC<Props>","Input","EyeOffIcon","EyeIcon","FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","FormControl","FormMessage"],"sources":["../../packages/components/ui/inputs/password-input.tsx","../../packages/components/forms/password-field.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { useCallback, useId, useState } from 'react';\n\nimport { Input } from '../input';\n\ntype Props = React.ComponentPropsWithoutRef<typeof Input>;\nexport const PasswordInput: React.FC<Props> = ({ className, ...rest }) => {\n  const id = useId();\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n  const toggleVisibility = useCallback(() => setIsVisible(prevState => !prevState), []);\n  return (\n    <div className=\"relative\">\n      <Input {...rest} id={id} placeholder=\"Password\" type={isVisible ? 'text' : 'password'} className={cn('pe-9', className)} />\n      <button\n        className=\"text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        type=\"button\"\n        onClick={toggleVisibility}\n        aria-label={isVisible ? 'Hide password' : 'Show password'}\n        aria-pressed={isVisible}\n        aria-controls=\"password\"\n      >\n        {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n      </button>\n    </div>\n  );\n};\n","'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { PasswordInput } from '../ui/inputs/password-input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isShowErrorMsg?: boolean;\n  onValueChange?: (value: string) => void;\n};\nexport const PasswordField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isShowErrorMsg = false,\n  description,\n  onValueChange,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className=\"w-full\">\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              <FormLabel>{label}</FormLabel>\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <FormControl>\n            <PasswordInput placeholder={placeholder} {...field} onValueChange={onValueChange} />\n          </FormControl>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"8aAQA,MAAaA,GAAkC,CAAE,YAAW,GAAG,KAAW,CACxE,IAAM,GAAA,EAAA,EAAA,QAAY,CACZ,CAAC,EAAW,IAAA,EAAA,EAAA,UAAkC,GAAM,CACpD,GAAA,EAAA,EAAA,iBAAqC,EAAa,GAAa,CAAC,EAAU,CAAE,EAAE,CAAC,CACrF,OACE,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,sBACb,EAAA,EAAA,KAACC,EAAAA,MAAAA,CAAM,GAAI,EAAU,KAAI,YAAY,WAAW,KAAM,EAAY,OAAS,WAAY,WAAA,EAAA,EAAA,IAAc,OAAQ,EAAU,EAAI,EAC3H,EAAA,EAAA,KAAC,SAAA,CACC,UAAU,oVACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,gBAAkB,gBAC1C,eAAc,EACd,gBAAc,oBAEb,GAAY,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,KAAM,GAAI,cAAY,QAAS,EAAG,EAAA,EAAA,KAACC,EAAAA,QAAAA,CAAQ,KAAM,GAAI,cAAY,QAAS,EAC5F,CAAA,EACL,ECTG,GAAiE,CAC5E,OACA,QAAQ,aACR,cAAc,kBACd,iBAAiB,GACjB,cACA,oBAGE,EAAA,EAAA,KAACC,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,UAAU,oBAClB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,aAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAAC,EAAA,CAA2B,cAAa,GAAI,EAAsB,iBAAiB,CAAA,CACxE,CACb,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA,EAAAA,CAAc,GACzB,EAEb"}

package/dist/forms/password-field.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/password-field.d.ts
@@ -17,7 +17,7 @@ declare const PasswordField: <TFieldValues extends FieldValues = FieldValues>({
   isShowErrorMsg,
   description,
   onValueChange
-}: Props<TFieldValues>) => react_jsx_runtime5.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime8.JSX.Element;
 //#endregion
 export { PasswordField };
 //# sourceMappingURL=password-field.d.cts.map

package/dist/forms/password-field.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/password-field.d.ts
@@ -17,7 +17,7 @@ declare const PasswordField: <TFieldValues extends FieldValues = FieldValues>({
   isShowErrorMsg,
   description,
   onValueChange
-}: Props<TFieldValues>) => react_jsx_runtime7.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime10.JSX.Element;
 //#endregion
 export { PasswordField };
 //# sourceMappingURL=password-field.d.ts.map

package/dist/forms/password-field.js

@@ -1,2 +1,2 @@
-"use client";import"../label-CdrxlBJ8.js";import{FormControl as e,FormDescription as t,FormField as n,FormItem as r,FormLabel as i,FormMessage as a}from"../form-BT1TbgK6.js";import{Input as o}from"../input-BtT8HfYE.js";import{EyeIcon as s,EyeOffIcon as c}from"lucide-react";import{cn as l}from"@customafk/react-toolkit/utils";import{useCallback as u,useId as d,useState as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";const h=({className:e,...t})=>{let n=d(),[r,i]=f(!1),a=u(()=>i(e=>!e),[]);return m(`div`,{className:`relative`,children:[p(o,{...t,id:n,placeholder:`Password`,type:r?`text`:`password`,className:l(`pe-9`,e)}),p(`button`,{className:`text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:a,"aria-label":r?`Hide password`:`Show password`,"aria-pressed":r,"aria-controls":`password`,children:p(r?c:s,{size:16,"aria-hidden":`true`})})]})},g=({name:o,label:s=`Text Field`,placeholder:c=`Enter text here`,isShowErrorMsg:l=!1,description:u,onValueChange:d})=>p(n,{name:o,render:({field:n})=>m(r,{className:`w-full`,children:[p(i,{children:s}),p(e,{children:p(h,{placeholder:c,...n,onValueChange:d})}),!!u&&p(t,{children:u}),l&&p(a,{})]})});export{g as PasswordField};
+"use client";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as e}from"../field-CGacT8J3.js";import{FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o}from"../form-B_tL9lO4.js";import{Input as s}from"../input-BStypTnq.js";import{EyeIcon as c,EyeOffIcon as l}from"lucide-react";import{cn as u}from"@customafk/react-toolkit/utils";import{Activity as d,useCallback as f,useId as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";const _=({className:e,...t})=>{let n=p(),[r,i]=m(!1),a=f(()=>i(e=>!e),[]);return g(`div`,{className:`relative`,children:[h(s,{...t,id:n,placeholder:`Password`,type:r?`text`:`password`,className:u(`pe-9`,e)}),h(`button`,{className:`text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:a,"aria-label":r?`Hide password`:`Show password`,"aria-pressed":r,"aria-controls":`password`,children:h(r?l:c,{size:16,"aria-hidden":`true`})})]})},v=({name:s,label:c=`Text Field`,placeholder:l=`Enter text here`,isShowErrorMsg:u=!1,description:f,onValueChange:p})=>h(r,{name:s,render:({field:r})=>g(i,{className:`w-full`,children:[h(d,{mode:c||f?`visible`:`hidden`,children:g(e,{children:[h(a,{children:c}),!!f&&h(n,{children:f})]})}),h(t,{children:h(_,{placeholder:l,...r,onValueChange:p})}),u&&h(o,{})]})});export{v as PasswordField};
 //# sourceMappingURL=password-field.js.map

package/dist/forms/password-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","names":["PasswordInput: React.FC<Props>"],"sources":["../../packages/components/ui/inputs/password-input.tsx","../../packages/components/forms/password-field.tsx"],"sourcesContent":["'use client'\nimport { cn } from '@customafk/react-toolkit/utils'\nimport { EyeIcon, EyeOffIcon } from 'lucide-react'\nimport { useCallback, useId, useState } from 'react'\n\nimport { Input } from '../input'\n\ntype Props = React.ComponentPropsWithoutRef<typeof Input>\nexport const PasswordInput: React.FC<Props> = ({ className, ...rest }) => {\n  const id = useId()\n  const [isVisible, setIsVisible] = useState<boolean>(false)\n  const toggleVisibility = useCallback(() => setIsVisible((prevState) => !prevState), [])\n  return (\n    <div className=\"relative\">\n      <Input {...rest} id={id} placeholder=\"Password\" type={isVisible ? 'text' : 'password'} className={cn('pe-9', className)} />\n      <button\n        className=\"text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        type=\"button\"\n        onClick={toggleVisibility}\n        aria-label={isVisible ? 'Hide password' : 'Show password'}\n        aria-pressed={isVisible}\n        aria-controls=\"password\"\n      >\n        {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n      </button>\n    </div>\n  )\n}\n","'use client'\nimport type { FieldPath, FieldValues } from 'react-hook-form'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { PasswordInput } from '../ui/inputs/password-input'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  description?: string\n  placeholder?: string\n  isShowErrorMsg?: boolean\n  onValueChange?: (value: string) => void\n}\nexport const PasswordField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isShowErrorMsg = false,\n  description,\n  onValueChange,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className=\"w-full\">\n          <FormLabel>{label}</FormLabel>\n          <FormControl>\n            <PasswordInput placeholder={placeholder} {...field} onValueChange={onValueChange} />\n          </FormControl>\n          {!!description && <FormDescription>{description}</FormDescription>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"qbAQA,MAAaA,GAAkC,CAAE,YAAW,GAAG,KAAW,CACxE,IAAM,EAAK,IACL,CAAC,EAAW,GAAgB,EAAkB,IAC9C,EAAmB,MAAkB,EAAc,GAAc,CAAC,GAAY,IACpF,OACE,EAAC,MAAA,CAAI,UAAU,qBACb,EAAC,EAAA,CAAM,GAAI,EAAU,KAAI,YAAY,WAAW,KAAM,EAAY,OAAS,WAAY,UAAW,EAAG,OAAQ,KAC7G,EAAC,SAAA,CACC,UAAU,oVACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,gBAAkB,gBAC1C,eAAc,EACd,gBAAc,oBAED,EAAZ,EAAa,EAA8C,EAA9C,CAAW,KAAM,GAAI,cAAY,eCT1C,GAAiE,CAC5E,OACA,QAAQ,aACR,cAAc,kBACd,iBAAiB,GACjB,cACA,mBAGE,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAS,UAAU,mBAClB,EAAC,EAAA,CAAA,SAAW,IACZ,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAA2B,cAAa,GAAI,EAAsB,oBAEpE,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,IACnC,GAAkB,EAAC,EAAA"}
+{"version":3,"file":"password-field.js","names":["PasswordInput: React.FC<Props>"],"sources":["../../packages/components/ui/inputs/password-input.tsx","../../packages/components/forms/password-field.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { useCallback, useId, useState } from 'react';\n\nimport { Input } from '../input';\n\ntype Props = React.ComponentPropsWithoutRef<typeof Input>;\nexport const PasswordInput: React.FC<Props> = ({ className, ...rest }) => {\n  const id = useId();\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n  const toggleVisibility = useCallback(() => setIsVisible(prevState => !prevState), []);\n  return (\n    <div className=\"relative\">\n      <Input {...rest} id={id} placeholder=\"Password\" type={isVisible ? 'text' : 'password'} className={cn('pe-9', className)} />\n      <button\n        className=\"text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        type=\"button\"\n        onClick={toggleVisibility}\n        aria-label={isVisible ? 'Hide password' : 'Show password'}\n        aria-pressed={isVisible}\n        aria-controls=\"password\"\n      >\n        {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n      </button>\n    </div>\n  );\n};\n","'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { PasswordInput } from '../ui/inputs/password-input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isShowErrorMsg?: boolean;\n  onValueChange?: (value: string) => void;\n};\nexport const PasswordField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isShowErrorMsg = false,\n  description,\n  onValueChange,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className=\"w-full\">\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              <FormLabel>{label}</FormLabel>\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <FormControl>\n            <PasswordInput placeholder={placeholder} {...field} onValueChange={onValueChange} />\n          </FormControl>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"whBAQA,MAAaA,GAAkC,CAAE,YAAW,GAAG,KAAW,CACxE,IAAM,EAAK,GAAO,CACZ,CAAC,EAAW,GAAgB,EAAkB,GAAM,CACpD,EAAmB,MAAkB,EAAa,GAAa,CAAC,EAAU,CAAE,EAAE,CAAC,CACrF,OACE,EAAC,MAAA,CAAI,UAAU,qBACb,EAAC,EAAA,CAAM,GAAI,EAAU,KAAI,YAAY,WAAW,KAAM,EAAY,OAAS,WAAY,UAAW,EAAG,OAAQ,EAAU,EAAI,CAC3H,EAAC,SAAA,CACC,UAAU,oVACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,gBAAkB,gBAC1C,eAAc,EACd,gBAAc,oBAED,EAAZ,EAAa,EAA8C,EAA9C,CAAW,KAAM,GAAI,cAAY,QAAoD,EAC5F,CAAA,EACL,ECTG,GAAiE,CAC5E,OACA,QAAQ,aACR,cAAc,kBACd,iBAAiB,GACjB,cACA,mBAGE,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAS,UAAU,mBAClB,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,kBACjD,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,CACX,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAA2B,cAAa,GAAI,EAAsB,iBAAiB,CAAA,CACxE,CACb,GAAkB,EAAC,EAAA,EAAA,CAAc,GACzB,EAEb"}

package/dist/forms/select-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-CHNSlaoz.cjs`);const t=require(`../form-DyH5iWq7.cjs`),n=require(`../select-Ce-YROpe.cjs`),r=e.__toESM(require(`@customafk/react-toolkit/utils`)),i=e.__toESM(require(`react/jsx-runtime`)),a=({name:e,label:a=`Select Field`,placeholder:o=`Select an option`,disabledValues:s=[],options:c=[],isShowLabel:l=!0,isShowErrorMsg:u=!1,description:d=``,className:f=``})=>(0,i.jsx)(t.FormField,{name:e,render:({field:e})=>(0,i.jsxs)(t.FormItem,{className:(0,r.cn)(`w-full`,f),children:[l&&(0,i.jsx)(t.FormLabel,{children:a}),(0,i.jsxs)(n.Select,{defaultValue:e.value,onValueChange:e.onChange,children:[(0,i.jsx)(t.FormControl,{children:(0,i.jsx)(n.SelectTrigger,{className:`w-full`,children:(0,i.jsx)(n.SelectValue,{placeholder:o})})}),(0,i.jsx)(n.SelectContent,{children:c.map(e=>(0,i.jsx)(n.SelectItem,{disabled:s.includes(e.value),value:e.value,children:e.label},e.value))})]}),!!d&&(0,i.jsx)(t.FormDescription,{children:d}),u&&(0,i.jsx)(t.FormMessage,{})]})});exports.SelectField=a;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const t=require(`../field-A43YZ5Wj.cjs`),n=require(`../form-DV9tQbiO.cjs`),r=require(`../select-BD7dul2u.cjs`);let i=require(`react`);i=e.__toESM(i);let a=require(`react/jsx-runtime`);a=e.__toESM(a);const o=({name:e,label:o=`Select Field`,placeholder:s=`Select an option`,disabledValues:c=[],options:l=[],isShowLabel:u=!0,isShowErrorMsg:d=!1,description:f=``,className:p=``})=>(0,a.jsx)(n.FormField,{name:e,render:({field:e})=>(0,a.jsxs)(n.FormItem,{className:p,children:[(0,a.jsx)(i.Activity,{mode:o||f?`visible`:`hidden`,children:(0,a.jsxs)(t.FieldContent,{children:[u&&(0,a.jsx)(n.FormLabel,{children:o}),!!f&&(0,a.jsx)(n.FormDescription,{children:f})]})}),(0,a.jsxs)(r.Select,{defaultValue:e.value,onValueChange:e.onChange,children:[(0,a.jsx)(n.FormControl,{children:(0,a.jsx)(r.SelectTrigger,{className:`w-full`,children:(0,a.jsx)(r.SelectValue,{placeholder:s})})}),(0,a.jsx)(r.SelectContent,{children:l.map(e=>(0,a.jsx)(r.SelectItem,{disabled:c.includes(e.value),value:e.value,children:e.label},e.value))})]}),d&&(0,a.jsx)(n.FormMessage,{})]})});exports.SelectField=o;
 //# sourceMappingURL=select-field.cjs.map

package/dist/forms/select-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-field.cjs","names":["FormField","FormItem","FormLabel","Select","FormControl","SelectTrigger","SelectValue","SelectContent","SelectItem","FormDescription","FormMessage"],"sources":["../../packages/components/forms/select-field.tsx"],"sourcesContent":["'use client'\nimport type { FieldPath, FieldValues } from 'react-hook-form'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  placeholder?: string\n  disabledValues?: string[]\n  options?: { value: string; label: string }[]\n  isShowLabel?: boolean\n  isShowErrorMsg?: boolean\n  modal?: boolean\n  description?: string\n  className?: string\n}\nexport const SelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Select Field',\n  placeholder = 'Select an option',\n  disabledValues = [],\n  options = [],\n  isShowLabel = true,\n  isShowErrorMsg = false,\n  description = '',\n  className = '',\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={cn('w-full', className)}>\n          {isShowLabel && <FormLabel>{label}</FormLabel>}\n          <Select defaultValue={field.value} onValueChange={field.onChange}>\n            <FormControl>\n              <SelectTrigger className=\"w-full\">\n                <SelectValue placeholder={placeholder} />\n              </SelectTrigger>\n            </FormControl>\n            <SelectContent>\n              {options.map((option) => (\n                <SelectItem key={option.value} disabled={disabledValues.includes(option.value)} value={option.value}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {!!description && <FormDescription>{description}</FormDescription>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"oQAmBa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,mBACd,iBAAiB,GACjB,UAAU,GACV,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,YAAY,OAGV,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,WAAA,EAAA,EAAA,IAAc,SAAU,aAC/B,IAAe,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,KAC5B,EAAA,EAAA,MAACC,EAAAA,OAAAA,CAAO,aAAc,EAAM,MAAO,cAAe,EAAM,oBACtD,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAc,UAAU,mBACvB,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAyB,qBAG9B,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAAA,SACE,EAAQ,IAAK,IACZ,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAA8B,SAAU,EAAe,SAAS,EAAO,OAAQ,MAAO,EAAO,eAC3F,EAAO,OADO,EAAO,aAM7B,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,IACnC,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA"}
+{"version":3,"file":"select-field.cjs","names":["FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","Select","FormControl","SelectTrigger","SelectValue","SelectContent","SelectItem","FormMessage"],"sources":["../../packages/components/forms/select-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  disabledValues?: string[];\n  options?: { value: string; label: string }[];\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n  description?: string;\n  className?: string;\n};\nexport const SelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Select Field',\n  placeholder = 'Select an option',\n  disabledValues = [],\n  options = [],\n  isShowLabel = true,\n  isShowErrorMsg = false,\n  description = '',\n  className = '',\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              {isShowLabel && <FormLabel>{label}</FormLabel>}\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <Select defaultValue={field.value} onValueChange={field.onChange}>\n            <FormControl>\n              <SelectTrigger className=\"w-full\">\n                <SelectValue placeholder={placeholder} />\n              </SelectTrigger>\n            </FormControl>\n            <SelectContent>\n              {options.map(option => (\n                <SelectItem key={option.value} disabled={disabledValues.includes(option.value)} value={option.value}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"mUAoBA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,mBACd,iBAAiB,EAAE,CACnB,UAAU,EAAE,CACZ,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,YAAY,OAGV,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAoB,uBACnB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,aAAAA,CAAAA,SAAAA,CACE,IAAe,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,MAACC,EAAAA,OAAAA,CAAO,aAAc,EAAM,MAAO,cAAe,EAAM,oBACtD,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAc,UAAU,mBACvB,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAyB,cAAA,CAAe,EAC3B,CAAA,CACJ,EACd,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAAA,SACE,EAAQ,IAAI,IACX,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAA8B,SAAU,EAAe,SAAS,EAAO,MAAM,CAAE,MAAO,EAAO,eAC3F,EAAO,OADO,EAAO,MAEX,CACb,CAAA,CACY,CAAA,EACT,CACR,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA,EAAAA,CAAc,GACzB,EAEb"}

package/dist/forms/select-field.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/select-field.d.ts
@@ -27,7 +27,7 @@ declare const SelectField: <TFieldValues extends FieldValues = FieldValues>({
   isShowErrorMsg,
   description,
   className
-}: Props<TFieldValues>) => react_jsx_runtime7.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime9.JSX.Element;
 //#endregion
 export { SelectField };
 //# sourceMappingURL=select-field.d.cts.map

package/dist/forms/select-field.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/select-field.d.ts
@@ -27,7 +27,7 @@ declare const SelectField: <TFieldValues extends FieldValues = FieldValues>({
   isShowErrorMsg,
   description,
   className
-}: Props<TFieldValues>) => react_jsx_runtime8.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { SelectField };
 //# sourceMappingURL=select-field.d.ts.map

package/dist/forms/select-field.js

@@ -1,2 +1,2 @@
-"use client";import"../label-CdrxlBJ8.js";import{FormControl as e,FormDescription as t,FormField as n,FormItem as r,FormLabel as i,FormMessage as a}from"../form-BT1TbgK6.js";import{Select as o,SelectContent as s,SelectItem as c,SelectTrigger as l,SelectValue as u}from"../select-Di8fOKVF.js";import{cn as d}from"@customafk/react-toolkit/utils";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=({name:m,label:h=`Select Field`,placeholder:g=`Select an option`,disabledValues:_=[],options:v=[],isShowLabel:y=!0,isShowErrorMsg:b=!1,description:x=``,className:S=``})=>f(n,{name:m,render:({field:n})=>p(r,{className:d(`w-full`,S),children:[y&&f(i,{children:h}),p(o,{defaultValue:n.value,onValueChange:n.onChange,children:[f(e,{children:f(l,{className:`w-full`,children:f(u,{placeholder:g})})}),f(s,{children:v.map(e=>f(c,{disabled:_.includes(e.value),value:e.value,children:e.label},e.value))})]}),!!x&&f(t,{children:x}),b&&f(a,{})]})});export{m as SelectField};
+"use client";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as e}from"../field-CGacT8J3.js";import{FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o}from"../form-B_tL9lO4.js";import{Select as s,SelectContent as c,SelectItem as l,SelectTrigger as u,SelectValue as d}from"../select-B8sXsuUI.js";import{Activity as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";const h=({name:h,label:g=`Select Field`,placeholder:_=`Select an option`,disabledValues:v=[],options:y=[],isShowLabel:b=!0,isShowErrorMsg:x=!1,description:S=``,className:C=``})=>p(r,{name:h,render:({field:r})=>m(i,{className:C,children:[p(f,{mode:g||S?`visible`:`hidden`,children:m(e,{children:[b&&p(a,{children:g}),!!S&&p(n,{children:S})]})}),m(s,{defaultValue:r.value,onValueChange:r.onChange,children:[p(t,{children:p(u,{className:`w-full`,children:p(d,{placeholder:_})})}),p(c,{children:y.map(e=>p(l,{disabled:v.includes(e.value),value:e.value,children:e.label},e.value))})]}),x&&p(o,{})]})});export{h as SelectField};
 //# sourceMappingURL=select-field.js.map

package/dist/forms/select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","names":[],"sources":["../../packages/components/forms/select-field.tsx"],"sourcesContent":["'use client'\nimport type { FieldPath, FieldValues } from 'react-hook-form'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  placeholder?: string\n  disabledValues?: string[]\n  options?: { value: string; label: string }[]\n  isShowLabel?: boolean\n  isShowErrorMsg?: boolean\n  modal?: boolean\n  description?: string\n  className?: string\n}\nexport const SelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Select Field',\n  placeholder = 'Select an option',\n  disabledValues = [],\n  options = [],\n  isShowLabel = true,\n  isShowErrorMsg = false,\n  description = '',\n  className = '',\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={cn('w-full', className)}>\n          {isShowLabel && <FormLabel>{label}</FormLabel>}\n          <Select defaultValue={field.value} onValueChange={field.onChange}>\n            <FormControl>\n              <SelectTrigger className=\"w-full\">\n                <SelectValue placeholder={placeholder} />\n              </SelectTrigger>\n            </FormControl>\n            <SelectContent>\n              {options.map((option) => (\n                <SelectItem key={option.value} disabled={disabledValues.includes(option.value)} value={option.value}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {!!description && <FormDescription>{description}</FormDescription>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"0YAmBA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,mBACd,iBAAiB,GACjB,UAAU,GACV,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,YAAY,MAGV,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAS,UAAW,EAAG,SAAU,aAC/B,GAAe,EAAC,EAAA,CAAA,SAAW,IAC5B,EAAC,EAAA,CAAO,aAAc,EAAM,MAAO,cAAe,EAAM,mBACtD,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAc,UAAU,kBACvB,EAAC,EAAA,CAAyB,oBAG9B,EAAC,EAAA,CAAA,SACE,EAAQ,IAAK,GACZ,EAAC,EAAA,CAA8B,SAAU,EAAe,SAAS,EAAO,OAAQ,MAAO,EAAO,eAC3F,EAAO,OADO,EAAO,aAM7B,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,IACnC,GAAkB,EAAC,EAAA"}
+{"version":3,"file":"select-field.js","names":[],"sources":["../../packages/components/forms/select-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  placeholder?: string;\n  disabledValues?: string[];\n  options?: { value: string; label: string }[];\n  isShowLabel?: boolean;\n  isShowErrorMsg?: boolean;\n  modal?: boolean;\n  description?: string;\n  className?: string;\n};\nexport const SelectField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Select Field',\n  placeholder = 'Select an option',\n  disabledValues = [],\n  options = [],\n  isShowLabel = true,\n  isShowErrorMsg = false,\n  description = '',\n  className = '',\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              {isShowLabel && <FormLabel>{label}</FormLabel>}\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <Select defaultValue={field.value} onValueChange={field.onChange}>\n            <FormControl>\n              <SelectTrigger className=\"w-full\">\n                <SelectValue placeholder={placeholder} />\n              </SelectTrigger>\n            </FormControl>\n            <SelectContent>\n              {options.map(option => (\n                <SelectItem key={option.value} disabled={disabledValues.includes(option.value)} value={option.value}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"4cAoBA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cAAc,mBACd,iBAAiB,EAAE,CACnB,UAAU,EAAE,CACZ,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,YAAY,MAGV,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAoB,sBACnB,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,kBACjD,EAAC,EAAA,CAAA,SAAA,CACE,GAAe,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,CACX,EAAC,EAAA,CAAO,aAAc,EAAM,MAAO,cAAe,EAAM,mBACtD,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAc,UAAU,kBACvB,EAAC,EAAA,CAAyB,cAAA,CAAe,EAC3B,CAAA,CACJ,CACd,EAAC,EAAA,CAAA,SACE,EAAQ,IAAI,GACX,EAAC,EAAA,CAA8B,SAAU,EAAe,SAAS,EAAO,MAAM,CAAE,MAAO,EAAO,eAC3F,EAAO,OADO,EAAO,MAEX,CACb,CAAA,CACY,CAAA,EACT,CACR,GAAkB,EAAC,EAAA,EAAA,CAAc,GACzB,EAEb"}

package/dist/forms/switch-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-CHNSlaoz.cjs`);const t=require(`../form-DyH5iWq7.cjs`),n=require(`../switch-DOgkZVAD.cjs`),r=e.__toESM(require(`@customafk/react-toolkit/utils`)),i=e.__toESM(require(`react/jsx-runtime`)),a=({name:e,label:a=`Switch Field`,description:o,isShowErrorMsg:s=!1})=>(0,i.jsx)(t.FormField,{name:e,render:({field:e})=>(0,i.jsxs)(`div`,{className:`spage-y-1`,children:[(0,i.jsxs)(t.FormItem,{className:(0,r.cn)(`border-border-weak flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs`),children:[(0,i.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,i.jsx)(t.FormLabel,{className:`cursor-pointer text-sm`,children:a}),o&&(0,i.jsx)(t.FormDescription,{className:`text-xs`,children:o})]}),(0,i.jsx)(t.FormControl,{children:(0,i.jsx)(n.Switch,{checked:e.value,onCheckedChange:e.onChange})})]}),s&&(0,i.jsx)(t.FormMessage,{})]})});exports.SwitchField=a;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const t=require(`../field-A43YZ5Wj.cjs`),n=require(`../form-DV9tQbiO.cjs`),r=require(`../switch-o_YbWKw4.cjs`);let i=require(`react`);i=e.__toESM(i);let a=require(`react/jsx-runtime`);a=e.__toESM(a);const o=({name:e,label:o=`Switch Field`,className:s=``,description:c,isShowErrorMsg:l=!1})=>(0,a.jsx)(n.FormField,{name:e,render:({field:e})=>(0,a.jsxs)(n.FormItem,{className:s,children:[(0,a.jsx)(t.FieldContent,{children:(0,a.jsxs)(i.Activity,{mode:o||c?`visible`:`hidden`,children:[(0,a.jsx)(n.FormLabel,{children:o}),c&&(0,a.jsx)(n.FormDescription,{className:`text-xs`,children:c})]})}),(0,a.jsx)(n.FormControl,{children:(0,a.jsx)(r.Switch,{checked:e.value,className:`!w-8`,onCheckedChange:e.onChange})}),l&&(0,a.jsx)(n.FormMessage,{})]})});exports.SwitchField=o;
 //# sourceMappingURL=switch-field.cjs.map

package/dist/forms/switch-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch-field.cjs","names":["FormField","FormItem","FormLabel","FormDescription","FormControl","Switch","FormMessage"],"sources":["../../packages/components/forms/switch-field.tsx"],"sourcesContent":["'use client'\nimport type { FieldPath, FieldValues } from 'react-hook-form'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { Switch } from '../ui/switch'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  description?: string\n  isShowErrorMsg?: boolean\n}\nexport const SwitchField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Switch Field',\n  description,\n  isShowErrorMsg = false,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <div className=\"spage-y-1\">\n          <FormItem className={cn('border-border-weak flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs')}>\n            <div className=\"space-y-0.5\">\n              <FormLabel className=\"cursor-pointer text-sm\">{label}</FormLabel>\n              {description && <FormDescription className=\"text-xs\">{description}</FormDescription>}\n            </div>\n            <FormControl>\n              <Switch checked={field.value} onCheckedChange={field.onChange} />\n            </FormControl>\n          </FormItem>\n          {isShowErrorMsg && <FormMessage />}\n        </div>\n      )}\n    />\n  )\n}\n"],"mappings":"oQAaa,GAA+D,CAC1E,OACA,QAAQ,eACR,cACA,iBAAiB,OAGf,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,uBACb,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,WAAA,EAAA,EAAA,IAAc,4GACtB,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,yBACb,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAU,UAAU,kCAA0B,IAC9C,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,UAAU,mBAAW,QAExD,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,OAAAA,CAAO,QAAS,EAAM,MAAO,gBAAiB,EAAM,gBAGxD,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA"}
+{"version":3,"file":"switch-field.cjs","names":["FormField","FormItem","FieldContent","Activity","FormLabel","FormDescription","FormControl","Switch","FormMessage"],"sources":["../../packages/components/forms/switch-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Switch } from '../ui/switch';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  className?: string;\n  description?: string;\n  isShowErrorMsg?: boolean;\n};\nexport const SwitchField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Switch Field',\n  className = '',\n  description,\n  isShowErrorMsg = false,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <FieldContent>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FormLabel>{label}</FormLabel>\n              {description && <FormDescription className=\"text-xs\">{description}</FormDescription>}\n            </Activity>\n          </FieldContent>\n          <FormControl>\n            <Switch checked={field.value} className=\"!w-8\" onCheckedChange={field.onChange} />\n          </FormControl>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"mUAeA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,YAAY,GACZ,cACA,iBAAiB,OAGf,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAoB,uBACnB,EAAA,EAAA,KAACC,EAAAA,aAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,oBACjD,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,UAAU,mBAAW,GAA8B,CAAA,EAC3E,CAAA,CACE,EACf,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,OAAAA,CAAO,QAAS,EAAM,MAAO,UAAU,OAAO,gBAAiB,EAAM,UAAY,CAAA,CACtE,CACb,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA,EAAAA,CAAc,GACzB,EAEb"}

package/dist/forms/switch-field.d.cts

@@ -1,19 +1,21 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/switch-field.d.ts
 type Props<TFieldValues extends FieldValues = FieldValues> = {
   name: FieldPath<TFieldValues>;
   label?: string;
+  className?: string;
   description?: string;
   isShowErrorMsg?: boolean;
 };
 declare const SwitchField: <TFieldValues extends FieldValues = FieldValues>({
   name,
   label,
+  className,
   description,
   isShowErrorMsg
-}: Props<TFieldValues>) => react_jsx_runtime4.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime10.JSX.Element;
 //#endregion
 export { SwitchField };
 //# sourceMappingURL=switch-field.d.cts.map

package/dist/forms/switch-field.d.ts

@@ -1,19 +1,21 @@
-import * as react_jsx_runtime25 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/switch-field.d.ts
 type Props<TFieldValues extends FieldValues = FieldValues> = {
   name: FieldPath<TFieldValues>;
   label?: string;
+  className?: string;
   description?: string;
   isShowErrorMsg?: boolean;
 };
 declare const SwitchField: <TFieldValues extends FieldValues = FieldValues>({
   name,
   label,
+  className,
   description,
   isShowErrorMsg
-}: Props<TFieldValues>) => react_jsx_runtime25.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime9.JSX.Element;
 //#endregion
 export { SwitchField };
 //# sourceMappingURL=switch-field.d.ts.map

package/dist/forms/switch-field.js

@@ -1,2 +1,2 @@
-"use client";import"../label-CdrxlBJ8.js";import{FormControl as e,FormDescription as t,FormField as n,FormItem as r,FormLabel as i,FormMessage as a}from"../form-BT1TbgK6.js";import{Switch as o}from"../switch-C7foFKpS.js";import{cn as s}from"@customafk/react-toolkit/utils";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=({name:u,label:d=`Switch Field`,description:f,isShowErrorMsg:p=!1})=>c(n,{name:u,render:({field:n})=>l(`div`,{className:`spage-y-1`,children:[l(r,{className:s(`border-border-weak flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs`),children:[l(`div`,{className:`space-y-0.5`,children:[c(i,{className:`cursor-pointer text-sm`,children:d}),f&&c(t,{className:`text-xs`,children:f})]}),c(e,{children:c(o,{checked:n.value,onCheckedChange:n.onChange})})]}),p&&c(a,{})]})});export{u as SwitchField};
+"use client";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as e}from"../field-CGacT8J3.js";import{FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o}from"../form-B_tL9lO4.js";import{Switch as s}from"../switch-DwBg-iL4.js";import{Activity as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=({name:d,label:f=`Switch Field`,className:p=``,description:m,isShowErrorMsg:h=!1})=>l(r,{name:d,render:({field:r})=>u(i,{className:p,children:[l(e,{children:u(c,{mode:f||m?`visible`:`hidden`,children:[l(a,{children:f}),m&&l(n,{className:`text-xs`,children:m})]})}),l(t,{children:l(s,{checked:r.value,className:`!w-8`,onCheckedChange:r.onChange})}),h&&l(o,{})]})});export{d as SwitchField};
 //# sourceMappingURL=switch-field.js.map

package/dist/forms/switch-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-field.js","names":[],"sources":["../../packages/components/forms/switch-field.tsx"],"sourcesContent":["'use client'\nimport type { FieldPath, FieldValues } from 'react-hook-form'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { Switch } from '../ui/switch'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  description?: string\n  isShowErrorMsg?: boolean\n}\nexport const SwitchField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Switch Field',\n  description,\n  isShowErrorMsg = false,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <div className=\"spage-y-1\">\n          <FormItem className={cn('border-border-weak flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs')}>\n            <div className=\"space-y-0.5\">\n              <FormLabel className=\"cursor-pointer text-sm\">{label}</FormLabel>\n              {description && <FormDescription className=\"text-xs\">{description}</FormDescription>}\n            </div>\n            <FormControl>\n              <Switch checked={field.value} onCheckedChange={field.onChange} />\n            </FormControl>\n          </FormItem>\n          {isShowErrorMsg && <FormMessage />}\n        </div>\n      )}\n    />\n  )\n}\n"],"mappings":"mUAaA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,cACA,iBAAiB,MAGf,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,MAAA,CAAI,UAAU,sBACb,EAAC,EAAA,CAAS,UAAW,EAAG,2GACtB,EAAC,MAAA,CAAI,UAAU,wBACb,EAAC,EAAA,CAAU,UAAU,kCAA0B,IAC9C,GAAe,EAAC,EAAA,CAAgB,UAAU,mBAAW,OAExD,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAO,QAAS,EAAM,MAAO,gBAAiB,EAAM,gBAGxD,GAAkB,EAAC,EAAA"}
+{"version":3,"file":"switch-field.js","names":[],"sources":["../../packages/components/forms/switch-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport type { FieldPath, FieldValues } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Switch } from '../ui/switch';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  className?: string;\n  description?: string;\n  isShowErrorMsg?: boolean;\n};\nexport const SwitchField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Switch Field',\n  className = '',\n  description,\n  isShowErrorMsg = false,\n}: Props<TFieldValues>) => {\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <FieldContent>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              <FormLabel>{label}</FormLabel>\n              {description && <FormDescription className=\"text-xs\">{description}</FormDescription>}\n            </Activity>\n          </FieldContent>\n          <FormControl>\n            <Switch checked={field.value} className=\"!w-8\" onCheckedChange={field.onChange} />\n          </FormControl>\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"qYAeA,MAAa,GAA+D,CAC1E,OACA,QAAQ,eACR,YAAY,GACZ,cACA,iBAAiB,MAGf,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAoB,sBACnB,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7B,GAAe,EAAC,EAAA,CAAgB,UAAU,mBAAW,GAA8B,CAAA,EAC3E,CAAA,CACE,CACf,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAO,QAAS,EAAM,MAAO,UAAU,OAAO,gBAAiB,EAAM,UAAY,CAAA,CACtE,CACb,GAAkB,EAAC,EAAA,EAAA,CAAc,GACzB,EAEb"}

package/dist/forms/text-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=require(`../flex-DS4mxjtf.cjs`);require(`../label-CHNSlaoz.cjs`);const n=require(`../form-DyH5iWq7.cjs`),r=require(`../input-DfGojpRF.cjs`),i=e.__toESM(require(`lucide-react`)),a=e.__toESM(require(`@customafk/react-toolkit/utils`)),o=e.__toESM(require(`react`)),s=e.__toESM(require(`react/jsx-runtime`)),c=e.__toESM(require(`react-hook-form`)),l=({name:e,label:l=`Text Field`,placeholder:u=`Enter text here`,isShowLabel:d=!0,isShowClearButton:f=!1,isShowErrorMsg:p=!1,isShowCount:m=!1,description:h,className:g=``,onValueChange:_})=>{let{resetField:v}=n.useFormField(),y=(0,c.useWatch)({name:e}),b=(0,o.useCallback)(()=>{v(e)},[v,e]);return(0,s.jsx)(n.FormField,{name:e,render:({field:e})=>(0,s.jsxs)(n.FormItem,{className:(0,a.cn)(`w-full gap-0`,m||!!h&&`space-y-1`,g),children:[d&&(0,s.jsx)(n.FormLabel,{children:l}),(0,s.jsxs)(`div`,{className:`relative`,children:[(0,s.jsx)(n.FormControl,{children:(0,s.jsx)(r.Input,{...e,placeholder:u,className:(0,a.cn)(`w-full`,f&&`pr-9`),onValueChange:_})}),f&&y&&(0,s.jsx)(`button`,{type:`button`,className:`text-text-positive-weak hover:text-text-positive focus-visible:ring-border absolute inset-y-0 end-0 flex h-full w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2`,"aria-label":`Clear input`,onClick:b,children:(0,s.jsx)(i.XIcon,{size:14,"aria-hidden":`true`})})]}),(0,s.jsxs)(t.Flex,{width:`full`,padding:`none`,justify:`end`,children:[p&&(0,s.jsx)(n.FormMessage,{className:`grow`}),m&&(0,s.jsxs)(`div`,{className:`text-text-positive-weak text-end text-xs`,children:[y?.length??0,` characters`]})]}),!!h&&(0,s.jsx)(n.FormDescription,{children:h})]})})};exports.TextField=l;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=require(`../flex-B4klVEz9.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const n=require(`../field-A43YZ5Wj.cjs`),r=require(`../form-DV9tQbiO.cjs`),i=require(`../input-D_tClptL.cjs`);let a=require(`lucide-react`);a=e.__toESM(a);let o=require(`@customafk/react-toolkit/utils`);o=e.__toESM(o);let s=require(`react`);s=e.__toESM(s);let c=require(`react/jsx-runtime`);c=e.__toESM(c);let l=require(`react-hook-form`);l=e.__toESM(l);const u=({name:e,label:u=`Text Field`,placeholder:d=`Enter text here`,isShowLabel:f=!0,isShowClearButton:p=!1,isShowErrorMsg:m=!1,isShowCount:h=!1,description:g,className:_=``,onValueChange:v})=>{let{resetField:y}=r.useFormField(),b=(0,l.useWatch)({name:e}),x=(0,s.useCallback)(()=>{y(e)},[y,e]);return(0,c.jsx)(r.FormField,{name:e,render:({field:e})=>(0,c.jsxs)(r.FormItem,{className:_,children:[(0,c.jsx)(n.FieldContent,{children:(0,c.jsxs)(s.Activity,{mode:u||g?`visible`:`hidden`,children:[f&&(0,c.jsx)(r.FormLabel,{children:u}),!!g&&(0,c.jsx)(r.FormDescription,{children:g})]})}),(0,c.jsxs)(`div`,{className:`relative`,children:[(0,c.jsx)(r.FormControl,{children:(0,c.jsx)(i.Input,{...e,placeholder:d,className:(0,o.cn)(`w-full`,p&&`pr-9`),onValueChange:v})}),p&&b&&(0,c.jsx)(`button`,{type:`button`,className:`text-text-positive-weak hover:text-text-positive focus-visible:ring-border absolute inset-y-0 end-0 flex h-full w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2`,"aria-label":`Clear input`,onClick:x,children:(0,c.jsx)(a.XIcon,{size:14,"aria-hidden":`true`})})]}),(0,c.jsxs)(t.Flex,{width:`full`,padding:`none`,justify:`end`,children:[m&&(0,c.jsx)(r.FormMessage,{className:`grow`}),h&&(0,c.jsxs)(`div`,{className:`text-text-positive-weak text-end text-xs`,children:[b?.length??0,` characters`]})]})]})})};exports.TextField=u;
 //# sourceMappingURL=text-field.cjs.map

package/dist/forms/text-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.cjs","names":["useFormField","FormField","FormItem","FormLabel","FormControl","Input","XIcon","Flex","FormMessage","FormDescription"],"sources":["../../packages/components/forms/text-field.tsx"],"sourcesContent":["'use client'\nimport { useCallback } from 'react'\nimport { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { XIcon } from 'lucide-react'\n\nimport { Flex } from '../layouts/flex'\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from '../ui/form'\nimport { Input } from '../ui/input'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  description?: string\n  placeholder?: string\n  isShowLabel?: boolean\n  isShowClearButton?: boolean\n  isShowErrorMsg?: boolean\n  isShowCount?: boolean\n  className?: string\n  onValueChange?: (value: string) => void\n}\nexport const TextField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isShowLabel = true,\n  isShowClearButton = false,\n  isShowErrorMsg = false,\n  isShowCount = false,\n  description,\n  className = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const { resetField } = useFormField()\n  const valueWatch = useWatch({ name })\n\n  const handleClearInput = useCallback(() => {\n    resetField(name)\n  }, [resetField, name])\n\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={cn('w-full gap-0', isShowCount || (!!description && 'space-y-1'), className)}>\n          {isShowLabel && <FormLabel>{label}</FormLabel>}\n          <div className=\"relative\">\n            <FormControl>\n              <Input {...field} placeholder={placeholder} className={cn('w-full', isShowClearButton && 'pr-9')} onValueChange={onValueChange} />\n            </FormControl>\n            {isShowClearButton && valueWatch && (\n              <button\n                type=\"button\"\n                className=\"text-text-positive-weak hover:text-text-positive focus-visible:ring-border absolute inset-y-0 end-0 flex h-full w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2\"\n                aria-label=\"Clear input\"\n                onClick={handleClearInput}\n              >\n                <XIcon size={14} aria-hidden=\"true\" />\n              </button>\n            )}\n          </div>\n          <Flex width=\"full\" padding=\"none\" justify=\"end\">\n            {isShowErrorMsg && <FormMessage className=\"grow\" />}\n            {isShowCount && <div className=\"text-text-positive-weak text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n          </Flex>\n          {!!description && <FormDescription>{description}</FormDescription>}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"gZAuBa,GAA6D,CACxE,OACA,QAAQ,aACR,cAAc,kBACd,cAAc,GACd,oBAAoB,GACpB,iBAAiB,GACjB,cAAc,GACd,cACA,YAAY,GACZ,mBACyB,CACzB,GAAM,CAAE,cAAeA,EAAAA,eACjB,GAAA,EAAA,EAAA,UAAsB,CAAE,SAExB,GAAA,EAAA,EAAA,iBAAqC,CACzC,EAAW,IACV,CAAC,EAAY,IAEhB,OACE,EAAA,EAAA,KAACC,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,WAAA,EAAA,EAAA,IAAc,eAAgB,GAAgB,CAAC,CAAC,GAAe,YAAc,aACpF,IAAe,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,KAC5B,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,sBACb,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,MAAAA,CAAM,GAAI,EAAoB,cAAa,WAAA,EAAA,EAAA,IAAc,SAAU,GAAqB,QAAwB,oBAElH,GAAqB,IACpB,EAAA,EAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAU,yPACV,aAAW,cACX,QAAS,YAET,EAAA,EAAA,KAACC,EAAAA,MAAAA,CAAM,KAAM,GAAI,cAAY,eAInC,EAAA,EAAA,MAACC,EAAAA,KAAAA,CAAK,MAAM,OAAO,QAAQ,OAAO,QAAQ,gBACvC,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAY,UAAU,SACzC,IAAe,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,qDAA4C,GAAY,QAAU,EAAE,oBAEpG,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB"}
+{"version":3,"file":"text-field.cjs","names":["useFormField","FormField","FormItem","FieldContent","Activity","FormLabel","FormDescription","FormControl","Input","XIcon","Flex","FormMessage"],"sources":["../../packages/components/forms/text-field.tsx"],"sourcesContent":["'use client';\nimport { Activity, useCallback } from 'react';\nimport { type FieldPath, type FieldValues, useWatch } from 'react-hook-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Flex } from '../layouts/flex';\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from '../ui/form';\nimport { Input } from '../ui/input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isShowLabel?: boolean;\n  isShowClearButton?: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  className?: string;\n  onValueChange?: (value: string) => void;\n};\nexport const TextField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isShowLabel = true,\n  isShowClearButton = false,\n  isShowErrorMsg = false,\n  isShowCount = false,\n  description,\n  className = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const { resetField } = useFormField();\n  const valueWatch = useWatch({ name });\n\n  const handleClearInput = useCallback(() => {\n    resetField(name);\n  }, [resetField, name]);\n\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <FieldContent>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              {isShowLabel && <FormLabel>{label}</FormLabel>}\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </Activity>\n          </FieldContent>\n          <div className=\"relative\">\n            <FormControl>\n              <Input {...field} placeholder={placeholder} className={cn('w-full', isShowClearButton && 'pr-9')} onValueChange={onValueChange} />\n            </FormControl>\n            {isShowClearButton && valueWatch && (\n              <button\n                type=\"button\"\n                className=\"text-text-positive-weak hover:text-text-positive focus-visible:ring-border absolute inset-y-0 end-0 flex h-full w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2\"\n                aria-label=\"Clear input\"\n                onClick={handleClearInput}\n              >\n                <XIcon size={14} aria-hidden=\"true\" />\n              </button>\n            )}\n          </div>\n          <Flex width=\"full\" padding=\"none\" justify=\"end\">\n            {isShowErrorMsg && <FormMessage className=\"grow\" />}\n            {isShowCount && <div className=\"text-text-positive-weak text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n          </Flex>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"ggBAyBA,MAAa,GAA6D,CACxE,OACA,QAAQ,aACR,cAAc,kBACd,cAAc,GACd,oBAAoB,GACpB,iBAAiB,GACjB,cAAc,GACd,cACA,YAAY,GACZ,mBACyB,CACzB,GAAM,CAAE,cAAeA,EAAAA,cAAc,CAC/B,GAAA,EAAA,EAAA,UAAsB,CAAE,OAAM,CAAC,CAE/B,GAAA,EAAA,EAAA,iBAAqC,CACzC,EAAW,EAAK,EACf,CAAC,EAAY,EAAK,CAAC,CAEtB,OACE,EAAA,EAAA,KAACC,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAoB,uBACnB,EAAA,EAAA,KAACC,EAAAA,aAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBAChD,IAAe,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,EACzD,CAAA,CACE,EACf,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,sBACb,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,MAAAA,CAAM,GAAI,EAAoB,cAAa,WAAA,EAAA,EAAA,IAAc,SAAU,GAAqB,OAAO,CAAiB,iBAAiB,CAAA,CACtH,CACb,GAAqB,IACpB,EAAA,EAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAU,yPACV,aAAW,cACX,QAAS,YAET,EAAA,EAAA,KAACC,EAAAA,MAAAA,CAAM,KAAM,GAAI,cAAY,QAAS,EAC/B,CAAA,EAEP,EACN,EAAA,EAAA,MAACC,EAAAA,KAAAA,CAAK,MAAM,OAAO,QAAQ,OAAO,QAAQ,gBACvC,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAY,UAAU,OAAA,CAAS,CAClD,IAAe,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,qDAA4C,GAAY,QAAU,EAAE,cAAA,EAAiB,CAAA,EAC/G,GACE,EAEb"}

package/dist/forms/text-field.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime49 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/text-field.d.ts
@@ -25,7 +25,7 @@ declare const TextField: <TFieldValues extends FieldValues = FieldValues>({
   description,
   className,
   onValueChange
-}: Props<TFieldValues>) => react_jsx_runtime49.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { TextField };
 //# sourceMappingURL=text-field.d.cts.map

package/dist/forms/text-field.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/text-field.d.ts
@@ -25,7 +25,7 @@ declare const TextField: <TFieldValues extends FieldValues = FieldValues>({
   description,
   className,
   onValueChange
-}: Props<TFieldValues>) => react_jsx_runtime9.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { TextField };
 //# sourceMappingURL=text-field.d.ts.map

package/dist/forms/text-field.js

@@ -1,2 +1,2 @@
-"use client";import{Flex as e}from"../flex-D6XrXRQW.js";import"../label-CdrxlBJ8.js";import{FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o,useFormField as s}from"../form-BT1TbgK6.js";import{Input as c}from"../input-BtT8HfYE.js";import{XIcon as l}from"lucide-react";import{cn as u}from"@customafk/react-toolkit/utils";import{useCallback as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{useWatch as m}from"react-hook-form";const h=({name:h,label:g=`Text Field`,placeholder:_=`Enter text here`,isShowLabel:v=!0,isShowClearButton:y=!1,isShowErrorMsg:b=!1,isShowCount:x=!1,description:S,className:C=``,onValueChange:w})=>{let{resetField:T}=s(),E=m({name:h}),D=d(()=>{T(h)},[T,h]);return f(r,{name:h,render:({field:r})=>p(i,{className:u(`w-full gap-0`,x||!!S&&`space-y-1`,C),children:[v&&f(a,{children:g}),p(`div`,{className:`relative`,children:[f(t,{children:f(c,{...r,placeholder:_,className:u(`w-full`,y&&`pr-9`),onValueChange:w})}),y&&E&&f(`button`,{type:`button`,className:`text-text-positive-weak hover:text-text-positive focus-visible:ring-border absolute inset-y-0 end-0 flex h-full w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2`,"aria-label":`Clear input`,onClick:D,children:f(l,{size:14,"aria-hidden":`true`})})]}),p(e,{width:`full`,padding:`none`,justify:`end`,children:[b&&f(o,{className:`grow`}),x&&p(`div`,{className:`text-text-positive-weak text-end text-xs`,children:[E?.length??0,` characters`]})]}),!!S&&f(n,{children:S})]})})};export{h as TextField};
+"use client";import{Flex as e}from"../flex-D6XrXRQW.js";import"../label-CdrxlBJ8.js";import"../separator-D17HxS2f.js";import{FieldContent as t}from"../field-CGacT8J3.js";import{FormControl as n,FormDescription as r,FormField as i,FormItem as a,FormLabel as o,FormMessage as s,useFormField as c}from"../form-B_tL9lO4.js";import{Input as l}from"../input-BStypTnq.js";import{XIcon as u}from"lucide-react";import{cn as d}from"@customafk/react-toolkit/utils";import{Activity as f,useCallback as p}from"react";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useWatch as g}from"react-hook-form";const _=({name:_,label:v=`Text Field`,placeholder:y=`Enter text here`,isShowLabel:b=!0,isShowClearButton:x=!1,isShowErrorMsg:S=!1,isShowCount:C=!1,description:w,className:T=``,onValueChange:E})=>{let{resetField:D}=c(),O=g({name:_}),k=p(()=>{D(_)},[D,_]);return m(i,{name:_,render:({field:i})=>h(a,{className:T,children:[m(t,{children:h(f,{mode:v||w?`visible`:`hidden`,children:[b&&m(o,{children:v}),!!w&&m(r,{children:w})]})}),h(`div`,{className:`relative`,children:[m(n,{children:m(l,{...i,placeholder:y,className:d(`w-full`,x&&`pr-9`),onValueChange:E})}),x&&O&&m(`button`,{type:`button`,className:`text-text-positive-weak hover:text-text-positive focus-visible:ring-border absolute inset-y-0 end-0 flex h-full w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2`,"aria-label":`Clear input`,onClick:k,children:m(u,{size:14,"aria-hidden":`true`})})]}),h(e,{width:`full`,padding:`none`,justify:`end`,children:[S&&m(s,{className:`grow`}),C&&h(`div`,{className:`text-text-positive-weak text-end text-xs`,children:[O?.length??0,` characters`]})]})]})})};export{_ as TextField};
 //# sourceMappingURL=text-field.js.map

package/dist/forms/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","names":[],"sources":["../../packages/components/forms/text-field.tsx"],"sourcesContent":["'use client'\nimport { useCallback } from 'react'\nimport { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { XIcon } from 'lucide-react'\n\nimport { Flex } from '../layouts/flex'\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from '../ui/form'\nimport { Input } from '../ui/input'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  description?: string\n  placeholder?: string\n  isShowLabel?: boolean\n  isShowClearButton?: boolean\n  isShowErrorMsg?: boolean\n  isShowCount?: boolean\n  className?: string\n  onValueChange?: (value: string) => void\n}\nexport const TextField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isShowLabel = true,\n  isShowClearButton = false,\n  isShowErrorMsg = false,\n  isShowCount = false,\n  description,\n  className = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const { resetField } = useFormField()\n  const valueWatch = useWatch({ name })\n\n  const handleClearInput = useCallback(() => {\n    resetField(name)\n  }, [resetField, name])\n\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={cn('w-full gap-0', isShowCount || (!!description && 'space-y-1'), className)}>\n          {isShowLabel && <FormLabel>{label}</FormLabel>}\n          <div className=\"relative\">\n            <FormControl>\n              <Input {...field} placeholder={placeholder} className={cn('w-full', isShowClearButton && 'pr-9')} onValueChange={onValueChange} />\n            </FormControl>\n            {isShowClearButton && valueWatch && (\n              <button\n                type=\"button\"\n                className=\"text-text-positive-weak hover:text-text-positive focus-visible:ring-border absolute inset-y-0 end-0 flex h-full w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2\"\n                aria-label=\"Clear input\"\n                onClick={handleClearInput}\n              >\n                <XIcon size={14} aria-hidden=\"true\" />\n              </button>\n            )}\n          </div>\n          <Flex width=\"full\" padding=\"none\" justify=\"end\">\n            {isShowErrorMsg && <FormMessage className=\"grow\" />}\n            {isShowCount && <div className=\"text-text-positive-weak text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n          </Flex>\n          {!!description && <FormDescription>{description}</FormDescription>}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"kfAuBA,MAAa,GAA6D,CACxE,OACA,QAAQ,aACR,cAAc,kBACd,cAAc,GACd,oBAAoB,GACpB,iBAAiB,GACjB,cAAc,GACd,cACA,YAAY,GACZ,mBACyB,CACzB,GAAM,CAAE,cAAe,IACjB,EAAa,EAAS,CAAE,SAExB,EAAmB,MAAkB,CACzC,EAAW,IACV,CAAC,EAAY,IAEhB,OACE,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAS,UAAW,EAAG,eAAgB,GAAgB,CAAC,CAAC,GAAe,YAAc,aACpF,GAAe,EAAC,EAAA,CAAA,SAAW,IAC5B,EAAC,MAAA,CAAI,UAAU,qBACb,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAM,GAAI,EAAoB,cAAa,UAAW,EAAG,SAAU,GAAqB,QAAwB,oBAElH,GAAqB,GACpB,EAAC,SAAA,CACC,KAAK,SACL,UAAU,yPACV,aAAW,cACX,QAAS,WAET,EAAC,EAAA,CAAM,KAAM,GAAI,cAAY,cAInC,EAAC,EAAA,CAAK,MAAM,OAAO,QAAQ,OAAO,QAAQ,gBACvC,GAAkB,EAAC,EAAA,CAAY,UAAU,SACzC,GAAe,EAAC,MAAA,CAAI,UAAU,qDAA4C,GAAY,QAAU,EAAE,oBAEpG,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB"}
+{"version":3,"file":"text-field.js","names":[],"sources":["../../packages/components/forms/text-field.tsx"],"sourcesContent":["'use client';\nimport { Activity, useCallback } from 'react';\nimport { type FieldPath, type FieldValues, useWatch } from 'react-hook-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Flex } from '../layouts/flex';\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from '../ui/form';\nimport { Input } from '../ui/input';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isShowLabel?: boolean;\n  isShowClearButton?: boolean;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  className?: string;\n  onValueChange?: (value: string) => void;\n};\nexport const TextField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Text Field',\n  placeholder = 'Enter text here',\n  isShowLabel = true,\n  isShowClearButton = false,\n  isShowErrorMsg = false,\n  isShowCount = false,\n  description,\n  className = '',\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const { resetField } = useFormField();\n  const valueWatch = useWatch({ name });\n\n  const handleClearInput = useCallback(() => {\n    resetField(name);\n  }, [resetField, name]);\n\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className={className}>\n          <FieldContent>\n            <Activity mode={label || description ? 'visible' : 'hidden'}>\n              {isShowLabel && <FormLabel>{label}</FormLabel>}\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </Activity>\n          </FieldContent>\n          <div className=\"relative\">\n            <FormControl>\n              <Input {...field} placeholder={placeholder} className={cn('w-full', isShowClearButton && 'pr-9')} onValueChange={onValueChange} />\n            </FormControl>\n            {isShowClearButton && valueWatch && (\n              <button\n                type=\"button\"\n                className=\"text-text-positive-weak hover:text-text-positive focus-visible:ring-border absolute inset-y-0 end-0 flex h-full w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2\"\n                aria-label=\"Clear input\"\n                onClick={handleClearInput}\n              >\n                <XIcon size={14} aria-hidden=\"true\" />\n              </button>\n            )}\n          </div>\n          <Flex width=\"full\" padding=\"none\" justify=\"end\">\n            {isShowErrorMsg && <FormMessage className=\"grow\" />}\n            {isShowCount && <div className=\"text-text-positive-weak text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n          </Flex>\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"qlBAyBA,MAAa,GAA6D,CACxE,OACA,QAAQ,aACR,cAAc,kBACd,cAAc,GACd,oBAAoB,GACpB,iBAAiB,GACjB,cAAc,GACd,cACA,YAAY,GACZ,mBACyB,CACzB,GAAM,CAAE,cAAe,GAAc,CAC/B,EAAa,EAAS,CAAE,OAAM,CAAC,CAE/B,EAAmB,MAAkB,CACzC,EAAW,EAAK,EACf,CAAC,EAAY,EAAK,CAAC,CAEtB,OACE,EAAC,EAAA,CACO,OACN,QAAS,CAAE,WACT,EAAC,EAAA,CAAoB,sBACnB,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBAChD,GAAe,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC7C,CAAC,CAAC,GAAe,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAAA,EACzD,CAAA,CACE,CACf,EAAC,MAAA,CAAI,UAAU,qBACb,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAM,GAAI,EAAoB,cAAa,UAAW,EAAG,SAAU,GAAqB,OAAO,CAAiB,iBAAiB,CAAA,CACtH,CACb,GAAqB,GACpB,EAAC,SAAA,CACC,KAAK,SACL,UAAU,yPACV,aAAW,cACX,QAAS,WAET,EAAC,EAAA,CAAM,KAAM,GAAI,cAAY,QAAS,EAC/B,CAAA,EAEP,CACN,EAAC,EAAA,CAAK,MAAM,OAAO,QAAQ,OAAO,QAAQ,gBACvC,GAAkB,EAAC,EAAA,CAAY,UAAU,OAAA,CAAS,CAClD,GAAe,EAAC,MAAA,CAAI,UAAU,qDAA4C,GAAY,QAAU,EAAE,cAAA,EAAiB,CAAA,EAC/G,GACE,EAEb"}

package/dist/forms/textarea-field.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-CHNSlaoz.cjs`);const t=require(`../form-DyH5iWq7.cjs`),n=require(`../textarea-Ewj89Eq3.cjs`),r=e.__toESM(require(`react/jsx-runtime`)),i=e.__toESM(require(`react-hook-form`)),a=({name:e,label:a=`Textarea Field`,placeholder:o=`Enter text here`,isShowErrorMsg:s=!1,isShowCount:c=!1,description:l,rows:u=3,onValueChange:d})=>{let f=(0,i.useWatch)({name:e});return(0,r.jsx)(t.FormField,{name:e,render:({field:e})=>(0,r.jsxs)(t.FormItem,{className:`w-full`,children:[(0,r.jsx)(t.FormLabel,{children:a}),(0,r.jsx)(t.FormControl,{children:(0,r.jsx)(n.Textarea,{...e,placeholder:o,className:`w-full`,rows:u,onValueChange:d})}),c&&(0,r.jsxs)(`div`,{className:`text-muted-foreground text-end text-xs`,children:[f?.length??0,` characters`]}),!!l&&(0,r.jsx)(t.FormDescription,{children:l}),s&&(0,r.jsx)(t.FormMessage,{})]})})};exports.TextareaField=a;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`);require(`../label-D6mAvVmw.cjs`),require(`../separator-DMMoR-d2.cjs`);const t=require(`../field-A43YZ5Wj.cjs`),n=require(`../form-DV9tQbiO.cjs`),r=require(`../textarea-BHME8i5L.cjs`);let i=require(`react`);i=e.__toESM(i);let a=require(`react/jsx-runtime`);a=e.__toESM(a);let o=require(`react-hook-form`);o=e.__toESM(o);const s=({name:e,label:s=`Textarea Field`,placeholder:c=`Enter text here`,isShowErrorMsg:l=!1,isShowCount:u=!1,description:d,rows:f=3,onValueChange:p})=>{let m=(0,o.useWatch)({name:e});return(0,a.jsx)(n.FormField,{name:e,render:({field:e})=>(0,a.jsxs)(n.FormItem,{className:`w-full`,children:[(0,a.jsx)(i.Activity,{mode:s||d?`visible`:`hidden`,children:(0,a.jsxs)(t.FieldContent,{children:[(0,a.jsx)(n.FormLabel,{children:s}),!!d&&(0,a.jsx)(n.FormDescription,{children:d})]})}),(0,a.jsx)(n.FormControl,{children:(0,a.jsx)(r.Textarea,{...e,placeholder:c,className:`w-full`,rows:f,onValueChange:p})}),u&&(0,a.jsxs)(`div`,{className:`text-muted-foreground text-end text-xs`,children:[m?.length??0,` characters`]}),l&&(0,a.jsx)(n.FormMessage,{})]})})};exports.TextareaField=s;
 //# sourceMappingURL=textarea-field.cjs.map

package/dist/forms/textarea-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"textarea-field.cjs","names":["FormField","FormItem","FormLabel","FormControl","Textarea","FormDescription","FormMessage"],"sources":["../../packages/components/forms/textarea-field.tsx"],"sourcesContent":["'use client'\nimport { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'\n\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'\nimport { Textarea } from '../ui/textarea'\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>\n  label?: string\n  description?: string\n  placeholder?: string\n  isShowErrorMsg?: boolean\n  isShowCount?: boolean\n  rows?: number\n  onValueChange?: (value: string) => void\n}\nexport const TextareaField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Textarea Field',\n  placeholder = 'Enter text here',\n  isShowErrorMsg = false,\n  isShowCount = false,\n  description,\n  rows = 3,\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const valueWatch = useWatch({ name })\n\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className=\"w-full\">\n          <FormLabel>{label}</FormLabel>\n          <FormControl>\n            <Textarea {...field} placeholder={placeholder} className=\"w-full\" rows={rows} onValueChange={onValueChange} />\n          </FormControl>\n          {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n          {!!description && <FormDescription>{description}</FormDescription>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  )\n}\n"],"mappings":"uPAgBa,GAAiE,CAC5E,OACA,QAAQ,iBACR,cAAc,kBACd,iBAAiB,GACjB,cAAc,GACd,cACA,OAAO,EACP,mBACyB,CACzB,IAAM,GAAA,EAAA,EAAA,UAAsB,CAAE,SAE9B,OACE,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,UAAU,oBAClB,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,KACZ,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,GAAI,EAAoB,cAAa,UAAU,SAAe,OAAqB,oBAE9F,IAAe,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,mDAA0C,GAAY,QAAU,EAAE,iBAChG,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,IACnC,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA"}
+{"version":3,"file":"textarea-field.cjs","names":["FormField","FormItem","Activity","FieldContent","FormLabel","FormDescription","FormControl","Textarea","FormMessage"],"sources":["../../packages/components/forms/textarea-field.tsx"],"sourcesContent":["'use client';\nimport { Activity } from 'react';\nimport { type FieldPath, type FieldValues, useWatch } from 'react-hook-form';\n\nimport { FieldContent } from '../ui/field';\nimport { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';\nimport { Textarea } from '../ui/textarea';\n\ntype Props<TFieldValues extends FieldValues = FieldValues> = {\n  name: FieldPath<TFieldValues>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  isShowErrorMsg?: boolean;\n  isShowCount?: boolean;\n  rows?: number;\n  onValueChange?: (value: string) => void;\n};\nexport const TextareaField = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label = 'Textarea Field',\n  placeholder = 'Enter text here',\n  isShowErrorMsg = false,\n  isShowCount = false,\n  description,\n  rows = 3,\n  onValueChange,\n}: Props<TFieldValues>) => {\n  const valueWatch = useWatch({ name });\n\n  return (\n    <FormField\n      name={name}\n      render={({ field }) => (\n        <FormItem className=\"w-full\">\n          <Activity mode={label || description ? 'visible' : 'hidden'}>\n            <FieldContent>\n              <FormLabel>{label}</FormLabel>\n              {!!description && <FormDescription>{description}</FormDescription>}\n            </FieldContent>\n          </Activity>\n          <FormControl>\n            <Textarea {...field} placeholder={placeholder} className=\"w-full\" rows={rows} onValueChange={onValueChange} />\n          </FormControl>\n          {isShowCount && <div className=\"text-muted-foreground text-end text-xs\">{valueWatch?.length ?? 0} characters</div>}\n          {isShowErrorMsg && <FormMessage />}\n        </FormItem>\n      )}\n    />\n  );\n};\n"],"mappings":"qXAkBA,MAAa,GAAiE,CAC5E,OACA,QAAQ,iBACR,cAAc,kBACd,iBAAiB,GACjB,cAAc,GACd,cACA,OAAO,EACP,mBACyB,CACzB,IAAM,GAAA,EAAA,EAAA,UAAsB,CAAE,OAAM,CAAC,CAErC,OACE,EAAA,EAAA,KAACA,EAAAA,UAAAA,CACO,OACN,QAAS,CAAE,YACT,EAAA,EAAA,MAACC,EAAAA,SAAAA,CAAS,UAAU,oBAClB,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,KAAM,GAAS,EAAc,UAAY,mBACjD,EAAA,EAAA,MAACC,EAAAA,aAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAAA,SAAW,EAAA,CAAkB,CAC7B,CAAC,CAAC,IAAe,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAAA,SAAiB,EAAA,CAA8B,CAAA,CAAA,CACrD,EACN,EACX,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,GAAI,EAAoB,cAAa,UAAU,SAAe,OAAqB,iBAAiB,CAAA,CAClG,CACb,IAAe,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,mDAA0C,GAAY,QAAU,EAAE,cAAA,EAAiB,CACjH,IAAkB,EAAA,EAAA,KAACC,EAAAA,YAAAA,EAAAA,CAAc,GACzB,EAEb"}

package/dist/forms/textarea-field.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/textarea-field.d.ts
@@ -21,7 +21,7 @@ declare const TextareaField: <TFieldValues extends FieldValues = FieldValues>({
   description,
   rows,
   onValueChange
-}: Props<TFieldValues>) => react_jsx_runtime10.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime12.JSX.Element;
 //#endregion
 export { TextareaField };
 //# sourceMappingURL=textarea-field.d.cts.map

package/dist/forms/textarea-field.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { FieldPath, FieldValues } from "react-hook-form";
 
 //#region packages/components/forms/textarea-field.d.ts
@@ -21,7 +21,7 @@ declare const TextareaField: <TFieldValues extends FieldValues = FieldValues>({
   description,
   rows,
   onValueChange
-}: Props<TFieldValues>) => react_jsx_runtime10.JSX.Element;
+}: Props<TFieldValues>) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { TextareaField };
 //# sourceMappingURL=textarea-field.d.ts.map