@skybin-tech/nebula-ui 0.0.30 → 0.0.31

package/dist/cjs/components/Form/context.cjs

@@ -72,7 +72,7 @@ function buildZodSchemaFromRules(type, rules) {
 		if (rules.required) return finalizeSchema(schema.refine((val) => val === true, { message: typeof rules.required === "string" ? rules.required : "This field is required" }), rules);
 		return finalizeSchema(schema.optional(), rules);
 	}
-	if (type === "date") {
+	if (type === "date" || type === "datetime") {
 		const schema = zod.z.coerce.date();
 		if (!rules.required) return finalizeSchema(schema.optional(), rules);
 		return finalizeSchema(schema, rules);

package/dist/cjs/components/Form/context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.cjs","names":[],"sources":["../../../../src/components/Form/context.ts"],"sourcesContent":["'use client';\r\n\r\nimport { createContext, useCallback, useRef } from \"react\";\r\nimport type { UseFormReturn, FieldValues } from \"react-hook-form\";\r\nimport { z } from \"zod\";\r\n\r\n/**\r\n * Validation rule types that can be applied to form fields\r\n */\r\nexport interface FieldValidationRules {\r\n  /** Field is required */\r\n  required?: boolean | string;\r\n  /** Minimum length for strings */\r\n  minLength?: number | { value: number; message: string };\r\n  /** Maximum length for strings */\r\n  maxLength?: number | { value: number; message: string };\r\n  /** Minimum value for numbers */\r\n  min?: number | { value: number; message: string };\r\n  /** Maximum value for numbers */\r\n  max?: number | { value: number; message: string };\r\n  /** Regex pattern for validation */\r\n  pattern?: RegExp | { value: RegExp; message: string };\r\n  /** Email validation */\r\n  email?: boolean | string;\r\n  /** URL validation */\r\n  url?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * Form configuration options\r\n */\r\nexport interface FormConfig {\r\n  /** Show validation errors inline */\r\n  showInlineErrors?: boolean;\r\n  /** Validate on blur */\r\n  validateOnBlur?: boolean;\r\n  /** Validate on change */\r\n  validateOnChange?: boolean;\r\n  /** Size of form controls */\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n  /** Layout direction */\r\n  layout?: \"horizontal\" | \"vertical\" | \"inline\";\r\n  /** Label width for horizontal layout */\r\n  labelWidth?: string | number;\r\n  /** Whether form is disabled */\r\n  disabled?: boolean;\r\n  /** Colon after label */\r\n  colon?: boolean;\r\n}\r\n\r\n/**\r\n * Field registration info\r\n */\r\nexport interface FieldRegistration {\r\n  name: string;\r\n  type: \"string\" | \"number\" | \"boolean\" | \"date\" | \"array\";\r\n  rules: FieldValidationRules;\r\n}\r\n\r\n/**\r\n * Form context value\r\n */\r\nexport interface FormContextValue<TFieldValues extends FieldValues = FieldValues>\r\n  extends FormConfig {\r\n  form: UseFormReturn<TFieldValues>;\r\n  /** Register a field's validation rules */\r\n  registerFieldValidation: (field: FieldRegistration) => void;\r\n  /** Unregister a field's validation rules */\r\n  unregisterFieldValidation: (name: string) => void;\r\n  /** Get current validation schema */\r\n  getValidationSchema: () => z.ZodObject<Record<string, z.ZodTypeAny>>;\r\n  /** Trigger validation for a specific field */\r\n  triggerValidation: (name: string) => Promise<boolean>;\r\n}\r\n\r\n/**\r\n * Default form configuration\r\n */\r\nexport const defaultFormConfig: FormConfig = {\r\n  showInlineErrors: true,\r\n  validateOnBlur: true,\r\n  validateOnChange: false,\r\n  size: \"md\",\r\n  layout: \"vertical\",\r\n  disabled: false,\r\n  colon: true,\r\n};\r\n\r\n/**\r\n * Form context for sharing form state and configuration\r\n */\r\nexport const FormConfigContext = createContext<FormContextValue | null>(null);\r\n\r\n/**\r\n * Build a Zod schema from validation rules\r\n */\r\nexport function buildZodSchemaFromRules(\r\n  type: FieldRegistration[\"type\"],\r\n  rules: FieldValidationRules\r\n): z.ZodTypeAny {\r\n  // Helper to extract value and message\r\n  const getValueAndMessage = <T>(\r\n    rule: T | { value: T; message: string } | undefined,\r\n    defaultMessage: string\r\n  ): { value: T; message: string } | null => {\r\n    if (rule === undefined) return null;\r\n    if (typeof rule === \"object\" && rule !== null && \"value\" in rule) {\r\n      return rule as { value: T; message: string };\r\n    }\r\n    return { value: rule as T, message: defaultMessage };\r\n  };\r\n\r\n  // Build string schema\r\n  if (type === \"string\") {\r\n    let schema = z.string();\r\n\r\n    const minLengthRule = getValueAndMessage(\r\n      rules.minLength,\r\n      `Minimum ${typeof rules.minLength === \"number\" ? rules.minLength : (rules.minLength as { value: number })?.value} characters required`\r\n    );\r\n    if (minLengthRule) {\r\n      schema = schema.min(minLengthRule.value as number, minLengthRule.message);\r\n    }\r\n\r\n    const maxLengthRule = getValueAndMessage(\r\n      rules.maxLength,\r\n      `Maximum ${typeof rules.maxLength === \"number\" ? rules.maxLength : (rules.maxLength as { value: number })?.value} characters allowed`\r\n    );\r\n    if (maxLengthRule) {\r\n      schema = schema.max(maxLengthRule.value as number, maxLengthRule.message);\r\n    }\r\n\r\n    if (rules.pattern !== undefined) {\r\n      const patternRule = rules.pattern instanceof RegExp\r\n        ? { value: rules.pattern, message: \"Invalid format\" }\r\n        : rules.pattern;\r\n      schema = schema.regex(patternRule.value, patternRule.message);\r\n    }\r\n\r\n    if (rules.email) {\r\n      const message = typeof rules.email === \"string\" ? rules.email : \"Invalid email address\";\r\n      schema = schema.email(message);\r\n    }\r\n\r\n    if (rules.url) {\r\n      const message = typeof rules.url === \"string\" ? rules.url : \"Invalid URL\";\r\n      schema = schema.url(message);\r\n    }\r\n\r\n    // Handle required - for strings, require non-empty\r\n    if (rules.required) {\r\n      const message = typeof rules.required === \"string\" ? rules.required : \"This field is required\";\r\n      return finalizeSchema(\r\n        z.preprocess(\r\n          (value) => (value === undefined || value === null ? \"\" : value),\r\n          schema.min(1, message)\r\n        ),\r\n        rules\r\n      );\r\n    }\r\n\r\n    return finalizeSchema(schema.optional(), rules);\r\n  }\r\n\r\n  // Build number schema\r\n  if (type === \"number\") {\r\n    let schema = z.coerce.number();\r\n\r\n    const minRule = getValueAndMessage(\r\n      rules.min,\r\n      `Minimum value is ${typeof rules.min === \"number\" ? rules.min : (rules.min as { value: number })?.value}`\r\n    );\r\n    if (minRule) {\r\n      schema = schema.min(minRule.value as number, minRule.message);\r\n    }\r\n\r\n    const maxRule = getValueAndMessage(\r\n      rules.max,\r\n      `Maximum value is ${typeof rules.max === \"number\" ? rules.max : (rules.max as { value: number })?.value}`\r\n    );\r\n    if (maxRule) {\r\n      schema = schema.max(maxRule.value as number, maxRule.message);\r\n    }\r\n\r\n    if (!rules.required) {\r\n      return finalizeSchema(schema.optional(), rules);\r\n    }\r\n    return finalizeSchema(schema, rules);\r\n  }\r\n\r\n  // Build boolean schema\r\n  if (type === \"boolean\") {\r\n    const schema = z.boolean();\r\n    if (rules.required) {\r\n      return finalizeSchema(\r\n        schema.refine((val) => val === true, {\r\n          message: typeof rules.required === \"string\" ? rules.required : \"This field is required\",\r\n        }),\r\n        rules\r\n      );\r\n    }\r\n    return finalizeSchema(schema.optional(), rules);\r\n  }\r\n\r\n  // Build date schema\r\n  if (type === \"date\") {\r\n    const schema = z.coerce.date();\r\n    if (!rules.required) {\r\n      return finalizeSchema(schema.optional(), rules);\r\n    }\r\n    return finalizeSchema(schema, rules);\r\n  }\r\n\r\n  // Build array schema\r\n  if (type === \"array\") {\r\n    let schema = z.array(z.unknown());\r\n    if (rules.required) {\r\n      const message = typeof rules.required === \"string\" ? rules.required : \"This field is required\";\r\n      schema = schema.min(1, message);\r\n    }\r\n    return finalizeSchema(schema, rules);\r\n  }\r\n\r\n  // Default fallback\r\n  return finalizeSchema(z.unknown(), rules);\r\n}\r\n\r\nfunction applyCustomValidate(\r\n  schema: z.ZodTypeAny,\r\n  rules: FieldValidationRules\r\n): z.ZodTypeAny {\r\n  if (!rules.validate) {\r\n    return schema;\r\n  }\r\n\r\n  const validateFn = rules.validate;\r\n\r\n  return schema.superRefine(async (value, ctx) => {\r\n    const result = await validateFn(value);\r\n\r\n    if (result === true) {\r\n      return;\r\n    }\r\n\r\n    ctx.addIssue({\r\n      code: z.ZodIssueCode.custom,\r\n      message: typeof result === \"string\" ? result : \"Invalid value\",\r\n    });\r\n  });\r\n}\r\n\r\nfunction finalizeSchema(\r\n  schema: z.ZodTypeAny,\r\n  rules: FieldValidationRules\r\n): z.ZodTypeAny {\r\n  return applyCustomValidate(schema, rules);\r\n}\r\n\r\n/**\r\n * Hook to manage field validations\r\n */\r\nexport function useFieldValidationRegistry() {\r\n  const fieldsRef = useRef<Map<string, FieldRegistration>>(new Map());\r\n\r\n  const registerFieldValidation = useCallback((field: FieldRegistration) => {\r\n    fieldsRef.current.set(field.name, field);\r\n  }, []);\r\n\r\n  const unregisterFieldValidation = useCallback((name: string) => {\r\n    fieldsRef.current.delete(name);\r\n  }, []);\r\n\r\n  const getValidationSchema = useCallback(() => {\r\n    const shape: Record<string, z.ZodTypeAny> = {};\r\n    \r\n    fieldsRef.current.forEach((field) => {\r\n      shape[field.name] = buildZodSchemaFromRules(field.type, field.rules);\r\n    });\r\n\r\n    return z.object(shape);\r\n  }, []);\r\n\r\n  return {\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    getValidationSchema,\r\n    fieldsRef,\r\n  };\r\n}\r\n"],"mappings":"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"}
+{"version":3,"file":"context.cjs","names":[],"sources":["../../../../src/components/Form/context.ts"],"sourcesContent":["'use client';\r\n\r\nimport { createContext, useCallback, useRef } from \"react\";\r\nimport type { UseFormReturn, FieldValues } from \"react-hook-form\";\r\nimport { z } from \"zod\";\r\n\r\n/**\r\n * Validation rule types that can be applied to form fields\r\n */\r\nexport interface FieldValidationRules {\r\n  /** Field is required */\r\n  required?: boolean | string;\r\n  /** Minimum length for strings */\r\n  minLength?: number | { value: number; message: string };\r\n  /** Maximum length for strings */\r\n  maxLength?: number | { value: number; message: string };\r\n  /** Minimum value for numbers */\r\n  min?: number | { value: number; message: string };\r\n  /** Maximum value for numbers */\r\n  max?: number | { value: number; message: string };\r\n  /** Regex pattern for validation */\r\n  pattern?: RegExp | { value: RegExp; message: string };\r\n  /** Email validation */\r\n  email?: boolean | string;\r\n  /** URL validation */\r\n  url?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * Form configuration options\r\n */\r\nexport interface FormConfig {\r\n  /** Show validation errors inline */\r\n  showInlineErrors?: boolean;\r\n  /** Validate on blur */\r\n  validateOnBlur?: boolean;\r\n  /** Validate on change */\r\n  validateOnChange?: boolean;\r\n  /** Size of form controls */\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n  /** Layout direction */\r\n  layout?: \"horizontal\" | \"vertical\" | \"inline\";\r\n  /** Label width for horizontal layout */\r\n  labelWidth?: string | number;\r\n  /** Whether form is disabled */\r\n  disabled?: boolean;\r\n  /** Colon after label */\r\n  colon?: boolean;\r\n}\r\n\r\n/**\r\n * Field registration info\r\n */\r\nexport interface FieldRegistration {\r\n  name: string;\r\n  type: \"string\" | \"number\" | \"boolean\" | \"date\" | \"datetime\" | \"array\";\r\n  rules: FieldValidationRules;\r\n}\r\n\r\n/**\r\n * Form context value\r\n */\r\nexport interface FormContextValue<TFieldValues extends FieldValues = FieldValues>\r\n  extends FormConfig {\r\n  form: UseFormReturn<TFieldValues>;\r\n  /** Register a field's validation rules */\r\n  registerFieldValidation: (field: FieldRegistration) => void;\r\n  /** Unregister a field's validation rules */\r\n  unregisterFieldValidation: (name: string) => void;\r\n  /** Get current validation schema */\r\n  getValidationSchema: () => z.ZodObject<Record<string, z.ZodTypeAny>>;\r\n  /** Trigger validation for a specific field */\r\n  triggerValidation: (name: string) => Promise<boolean>;\r\n}\r\n\r\n/**\r\n * Default form configuration\r\n */\r\nexport const defaultFormConfig: FormConfig = {\r\n  showInlineErrors: true,\r\n  validateOnBlur: true,\r\n  validateOnChange: false,\r\n  size: \"md\",\r\n  layout: \"vertical\",\r\n  disabled: false,\r\n  colon: true,\r\n};\r\n\r\n/**\r\n * Form context for sharing form state and configuration\r\n */\r\nexport const FormConfigContext = createContext<FormContextValue | null>(null);\r\n\r\n/**\r\n * Build a Zod schema from validation rules\r\n */\r\nexport function buildZodSchemaFromRules(\r\n  type: FieldRegistration[\"type\"],\r\n  rules: FieldValidationRules\r\n): z.ZodTypeAny {\r\n  // Helper to extract value and message\r\n  const getValueAndMessage = <T>(\r\n    rule: T | { value: T; message: string } | undefined,\r\n    defaultMessage: string\r\n  ): { value: T; message: string } | null => {\r\n    if (rule === undefined) return null;\r\n    if (typeof rule === \"object\" && rule !== null && \"value\" in rule) {\r\n      return rule as { value: T; message: string };\r\n    }\r\n    return { value: rule as T, message: defaultMessage };\r\n  };\r\n\r\n  // Build string schema\r\n  if (type === \"string\") {\r\n    let schema = z.string();\r\n\r\n    const minLengthRule = getValueAndMessage(\r\n      rules.minLength,\r\n      `Minimum ${typeof rules.minLength === \"number\" ? rules.minLength : (rules.minLength as { value: number })?.value} characters required`\r\n    );\r\n    if (minLengthRule) {\r\n      schema = schema.min(minLengthRule.value as number, minLengthRule.message);\r\n    }\r\n\r\n    const maxLengthRule = getValueAndMessage(\r\n      rules.maxLength,\r\n      `Maximum ${typeof rules.maxLength === \"number\" ? rules.maxLength : (rules.maxLength as { value: number })?.value} characters allowed`\r\n    );\r\n    if (maxLengthRule) {\r\n      schema = schema.max(maxLengthRule.value as number, maxLengthRule.message);\r\n    }\r\n\r\n    if (rules.pattern !== undefined) {\r\n      const patternRule = rules.pattern instanceof RegExp\r\n        ? { value: rules.pattern, message: \"Invalid format\" }\r\n        : rules.pattern;\r\n      schema = schema.regex(patternRule.value, patternRule.message);\r\n    }\r\n\r\n    if (rules.email) {\r\n      const message = typeof rules.email === \"string\" ? rules.email : \"Invalid email address\";\r\n      schema = schema.email(message);\r\n    }\r\n\r\n    if (rules.url) {\r\n      const message = typeof rules.url === \"string\" ? rules.url : \"Invalid URL\";\r\n      schema = schema.url(message);\r\n    }\r\n\r\n    // Handle required - for strings, require non-empty\r\n    if (rules.required) {\r\n      const message = typeof rules.required === \"string\" ? rules.required : \"This field is required\";\r\n      return finalizeSchema(\r\n        z.preprocess(\r\n          (value) => (value === undefined || value === null ? \"\" : value),\r\n          schema.min(1, message)\r\n        ),\r\n        rules\r\n      );\r\n    }\r\n\r\n    return finalizeSchema(schema.optional(), rules);\r\n  }\r\n\r\n  // Build number schema\r\n  if (type === \"number\") {\r\n    let schema = z.coerce.number();\r\n\r\n    const minRule = getValueAndMessage(\r\n      rules.min,\r\n      `Minimum value is ${typeof rules.min === \"number\" ? rules.min : (rules.min as { value: number })?.value}`\r\n    );\r\n    if (minRule) {\r\n      schema = schema.min(minRule.value as number, minRule.message);\r\n    }\r\n\r\n    const maxRule = getValueAndMessage(\r\n      rules.max,\r\n      `Maximum value is ${typeof rules.max === \"number\" ? rules.max : (rules.max as { value: number })?.value}`\r\n    );\r\n    if (maxRule) {\r\n      schema = schema.max(maxRule.value as number, maxRule.message);\r\n    }\r\n\r\n    if (!rules.required) {\r\n      return finalizeSchema(schema.optional(), rules);\r\n    }\r\n    return finalizeSchema(schema, rules);\r\n  }\r\n\r\n  // Build boolean schema\r\n  if (type === \"boolean\") {\r\n    const schema = z.boolean();\r\n    if (rules.required) {\r\n      return finalizeSchema(\r\n        schema.refine((val) => val === true, {\r\n          message: typeof rules.required === \"string\" ? rules.required : \"This field is required\",\r\n        }),\r\n        rules\r\n      );\r\n    }\r\n    return finalizeSchema(schema.optional(), rules);\r\n  }\r\n\r\n  // Build date / datetime schema\r\n  if (type === \"date\" || type === \"datetime\") {\r\n    const schema = z.coerce.date();\r\n    if (!rules.required) {\r\n      return finalizeSchema(schema.optional(), rules);\r\n    }\r\n    return finalizeSchema(schema, rules);\r\n  }\r\n\r\n  // Build array schema\r\n  if (type === \"array\") {\r\n    let schema = z.array(z.unknown());\r\n    if (rules.required) {\r\n      const message = typeof rules.required === \"string\" ? rules.required : \"This field is required\";\r\n      schema = schema.min(1, message);\r\n    }\r\n    return finalizeSchema(schema, rules);\r\n  }\r\n\r\n  // Default fallback\r\n  return finalizeSchema(z.unknown(), rules);\r\n}\r\n\r\nfunction applyCustomValidate(\r\n  schema: z.ZodTypeAny,\r\n  rules: FieldValidationRules\r\n): z.ZodTypeAny {\r\n  if (!rules.validate) {\r\n    return schema;\r\n  }\r\n\r\n  const validateFn = rules.validate;\r\n\r\n  return schema.superRefine(async (value, ctx) => {\r\n    const result = await validateFn(value);\r\n\r\n    if (result === true) {\r\n      return;\r\n    }\r\n\r\n    ctx.addIssue({\r\n      code: z.ZodIssueCode.custom,\r\n      message: typeof result === \"string\" ? result : \"Invalid value\",\r\n    });\r\n  });\r\n}\r\n\r\nfunction finalizeSchema(\r\n  schema: z.ZodTypeAny,\r\n  rules: FieldValidationRules\r\n): z.ZodTypeAny {\r\n  return applyCustomValidate(schema, rules);\r\n}\r\n\r\n/**\r\n * Hook to manage field validations\r\n */\r\nexport function useFieldValidationRegistry() {\r\n  const fieldsRef = useRef<Map<string, FieldRegistration>>(new Map());\r\n\r\n  const registerFieldValidation = useCallback((field: FieldRegistration) => {\r\n    fieldsRef.current.set(field.name, field);\r\n  }, []);\r\n\r\n  const unregisterFieldValidation = useCallback((name: string) => {\r\n    fieldsRef.current.delete(name);\r\n  }, []);\r\n\r\n  const getValidationSchema = useCallback(() => {\r\n    const shape: Record<string, z.ZodTypeAny> = {};\r\n    \r\n    fieldsRef.current.forEach((field) => {\r\n      shape[field.name] = buildZodSchemaFromRules(field.type, field.rules);\r\n    });\r\n\r\n    return z.object(shape);\r\n  }, []);\r\n\r\n  return {\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    getValidationSchema,\r\n    fieldsRef,\r\n  };\r\n}\r\n"],"mappings":"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"}

package/dist/cjs/components/Form/index.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_context = require("./context.cjs");
 const require_Form = require("./Form.cjs");
 const require_FieldLayout = require("./FieldLayout.cjs");
+const require_PasswordRevealToggle = require("./PasswordRevealToggle.cjs");
 const require_TextBox = require("./TextBox.cjs");
 const require_TextArea = require("./TextArea.cjs");
 const require_Select = require("./Select.cjs");
@@ -10,6 +11,8 @@ const require_CountryPicker = require("./CountryPicker.cjs");
 const require_CountrySelect = require("./CountrySelect.cjs");
 const require_PhoneInput = require("./PhoneInput.cjs");
 const require_DatePicker = require("./DatePicker.cjs");
+const require_TimePicker = require("./TimePicker.cjs");
+const require_DateTimePicker = require("./DateTimePicker.cjs");
 const require_Combobox = require("./Combobox.cjs");
 const require_Checkbox = require("./Checkbox.cjs");
 const require_Radio = require("./Radio.cjs");
@@ -20,6 +23,7 @@ exports.Combobox = require_Combobox.Combobox;
 exports.CountryPicker = require_CountryPicker.CountryPicker;
 exports.CountrySelect = require_CountrySelect.CountrySelect;
 exports.DatePicker = require_DatePicker.DatePicker;
+exports.DateTimePicker = require_DateTimePicker.DateTimePicker;
 exports.FieldLayout = require_FieldLayout.FieldLayout;
 exports.Form = require_Form.Form;
 exports.FormCheckbox = require_Checkbox.Checkbox;
@@ -27,15 +31,18 @@ exports.FormCombobox = require_Combobox.Combobox;
 exports.FormConfigContext = require_context.FormConfigContext;
 exports.FormCountrySelect = require_CountrySelect.CountrySelect;
 exports.FormDatePicker = require_DatePicker.DatePicker;
+exports.FormDateTimePicker = require_DateTimePicker.DateTimePicker;
 exports.FormPhoneInput = require_PhoneInput.PhoneInput;
 exports.FormSelect = require_Select.Select;
 exports.FormSwitch = require_FormSwitch.FormSwitch;
+exports.PasswordRevealToggle = require_PasswordRevealToggle.PasswordRevealToggle;
 exports.PhoneInput = require_PhoneInput.PhoneInput;
 exports.RadioGroup = require_Radio.RadioGroup;
 exports.RadioItem = require_Radio.RadioItem;
 exports.Select = require_Select.Select;
 exports.TextArea = require_TextArea.TextArea;
 exports.TextBox = require_TextBox.TextBox;
+exports.TimePicker = require_TimePicker.TimePicker;
 exports.buildZodSchemaFromRules = require_context.buildZodSchemaFromRules;
 exports.defaultFormConfig = require_context.defaultFormConfig;
 exports.useFieldError = require_hooks.useFieldError;

package/dist/cjs/components/Input/Input.cjs

@@ -1,12 +1,40 @@
 "use client";
+"use client";
+const require_cn = require("../../utils/cn.cjs");
+const require_PasswordRevealToggle = require("../Form/PasswordRevealToggle.cjs");
 const require_textbox = require("../../primitives/textbox.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Input/Input.tsx
-var Input = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_textbox.TextBoxPrimitive, {
-	ref,
-	...props
-}));
+var Input = (0, react.forwardRef)(({ type, className, passwordToggle, disabled, ...props }, ref) => {
+	const [passwordVisible, setPasswordVisible] = (0, react.useState)(false);
+	const showPasswordToggle = type === "password" && passwordToggle !== false;
+	const resolvedType = showPasswordToggle && passwordVisible ? "text" : type;
+	if (!showPasswordToggle) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_textbox.TextBoxPrimitive, {
+		ref,
+		type,
+		className,
+		disabled,
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_textbox.TextBoxPrimitive, {
+			ref,
+			type: resolvedType,
+			className: require_cn.cn("pr-10", className),
+			disabled,
+			...props
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "absolute right-3 top-1/2 -translate-y-1/2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PasswordRevealToggle.PasswordRevealToggle, {
+				visible: passwordVisible,
+				onToggle: () => setPasswordVisible((visible) => !visible),
+				disabled
+			})
+		})]
+	});
+});
 Input.displayName = "Input";
 //#endregion
 exports.Input = Input;

package/dist/cjs/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","names":[],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\"\r\nimport { Input as InputPrimitive } from \"../../primitives/input\"\r\n\r\nexport type InputProps = ComponentPropsWithoutRef<typeof InputPrimitive>\r\n\r\nexport const Input = forwardRef<\r\n  ElementRef<typeof InputPrimitive>,\r\n  InputProps\r\n>((props, ref) => <InputPrimitive ref={ref} {...props} />)\r\nInput.displayName = \"Input\"\r\n"],"mappings":";;;;;AAMA,IAAa,SAAA,GAAQ,MAAA,WAAA,EAGlB,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAA,kBAAD;CAAqB;CAAK,GAAI;AAAQ,CAAA,CAAC;AACzD,MAAM,cAAc"}
+{"version":3,"file":"Input.cjs","names":[],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { forwardRef, useState } from \"react\"\r\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\"\r\nimport { Input as InputPrimitive } from \"../../primitives/input\"\r\nimport { cn } from \"../../utils/cn\"\r\nimport { PasswordRevealToggle } from \"../Form/PasswordRevealToggle\"\r\n\r\nexport type InputProps = ComponentPropsWithoutRef<typeof InputPrimitive> & {\r\n  /**\r\n   * Show an eye toggle for password fields.\r\n   * Defaults to true when `type=\"password\"`.\r\n   */\r\n  passwordToggle?: boolean\r\n}\r\n\r\nexport const Input = forwardRef<\r\n  ElementRef<typeof InputPrimitive>,\r\n  InputProps\r\n>(({ type, className, passwordToggle, disabled, ...props }, ref) => {\r\n  const [passwordVisible, setPasswordVisible] = useState(false)\r\n  const isPasswordType = type === \"password\"\r\n  const showPasswordToggle = isPasswordType && passwordToggle !== false\r\n  const resolvedType = showPasswordToggle && passwordVisible ? \"text\" : type\r\n\r\n  if (!showPasswordToggle) {\r\n    return (\r\n      <InputPrimitive\r\n        ref={ref}\r\n        type={type}\r\n        className={className}\r\n        disabled={disabled}\r\n        {...props}\r\n      />\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div className=\"relative w-full\">\r\n      <InputPrimitive\r\n        ref={ref}\r\n        type={resolvedType}\r\n        className={cn(\"pr-10\", className)}\r\n        disabled={disabled}\r\n        {...props}\r\n      />\r\n      <div className=\"absolute right-3 top-1/2 -translate-y-1/2\">\r\n        <PasswordRevealToggle\r\n          visible={passwordVisible}\r\n          onToggle={() => setPasswordVisible((visible) => !visible)}\r\n          disabled={disabled}\r\n        />\r\n      </div>\r\n    </div>\r\n  )\r\n})\r\nInput.displayName = \"Input\"\r\n"],"mappings":";;;;;;;;AAgBA,IAAa,SAAA,GAAQ,MAAA,WAAA,EAGlB,EAAE,MAAM,WAAW,gBAAgB,UAAU,GAAG,SAAS,QAAQ;CAClE,MAAM,CAAC,iBAAiB,uBAAA,GAAsB,MAAA,SAAA,CAAS,KAAK;CAE5D,MAAM,qBADiB,SAAS,cACa,mBAAmB;CAChE,MAAM,eAAe,sBAAsB,kBAAkB,SAAS;CAEtE,IAAI,CAAC,oBACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAA,kBAAD;EACO;EACC;EACK;EACD;EACV,GAAI;CACL,CAAA;CAIL,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAA,kBAAD;GACO;GACL,MAAM;GACN,WAAW,WAAA,GAAG,SAAS,SAAS;GACtB;GACV,GAAI;EACL,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,6BAAA,sBAAD;IACE,SAAS;IACT,gBAAgB,oBAAoB,YAAY,CAAC,OAAO;IAC9C;GACX,CAAA;EACE,CAAA,CACF;;AAET,CAAC;AACD,MAAM,cAAc"}

package/dist/cjs/index.cjs

@@ -4,6 +4,7 @@ const require_cn = require("./utils/cn.cjs");
 const require_Button = require("./components/Button/Button.cjs");
 const require_context = require("./components/Form/context.cjs");
 const require_Form = require("./components/Form/Form.cjs");
+const require_PasswordRevealToggle = require("./components/Form/PasswordRevealToggle.cjs");
 const require_TextBox = require("./components/Form/TextBox.cjs");
 const require_TextArea = require("./components/Form/TextArea.cjs");
 const require_select = require("./primitives/select.cjs");
@@ -16,6 +17,8 @@ const require_CountrySelect = require("./components/Form/CountrySelect.cjs");
 const require_PhoneInput = require("./components/Form/PhoneInput.cjs");
 const require_calendar = require("./primitives/calendar.cjs");
 const require_DatePicker = require("./components/Form/DatePicker.cjs");
+const require_TimePicker = require("./components/Form/TimePicker.cjs");
+const require_DateTimePicker = require("./components/Form/DateTimePicker.cjs");
 const require_Combobox = require("./components/Form/Combobox.cjs");
 const require_Checkbox = require("./components/Form/Checkbox.cjs");
 const require_Radio = require("./components/Form/Radio.cjs");
@@ -102,6 +105,7 @@ exports.CommandSeparator = require_command.CommandSeparator;
 exports.CommandShortcut = require_command.CommandShortcut;
 exports.CountrySelect = require_CountrySelect.CountrySelect;
 exports.DatePicker = require_DatePicker.DatePicker;
+exports.DateTimePicker = require_DateTimePicker.DateTimePicker;
 exports.Dialog = require_dialog.Dialog;
 exports.DialogClose = require_dialog.DialogClose;
 exports.DialogContent = require_dialog.DialogContent;
@@ -133,6 +137,7 @@ exports.FormCombobox = require_Combobox.Combobox;
 exports.FormConfigContext = require_context.FormConfigContext;
 exports.FormCountrySelect = require_CountrySelect.CountrySelect;
 exports.FormDatePicker = require_DatePicker.DatePicker;
+exports.FormDateTimePicker = require_DateTimePicker.DateTimePicker;
 exports.FormPhoneInput = require_PhoneInput.PhoneInput;
 exports.FormSelect = require_Select.Select;
 exports.FormSwitch = require_FormSwitch.FormSwitch;
@@ -149,6 +154,7 @@ exports.PaginationItem = require_Pagination.PaginationItem;
 exports.PaginationLink = require_Pagination.PaginationLink;
 exports.PaginationNext = require_Pagination.PaginationNext;
 exports.PaginationPrevious = require_Pagination.PaginationPrevious;
+exports.PasswordRevealToggle = require_PasswordRevealToggle.PasswordRevealToggle;
 exports.PhoneInput = require_PhoneInput.PhoneInput;
 exports.Popover = require_popover.Popover;
 exports.PopoverAnchor = require_popover.PopoverAnchor;
@@ -198,6 +204,7 @@ exports.TabsTrigger = require_Tabs.TabsTrigger;
 exports.TextArea = require_TextArea.TextArea;
 exports.TextBox = require_TextBox.TextBox;
 exports.Textarea = require_Textarea.Textarea;
+exports.TimePicker = require_TimePicker.TimePicker;
 exports.Toast = require_toast.Toast;
 exports.ToastAction = require_toast.ToastAction;
 exports.ToastClose = require_toast.ToastClose;

package/dist/components/Form/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/Form/DatePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsD,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrI,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAQlE,QAAA,MAAM,kBAAkB;;;8EAiBtB,CAAC;AAEH,MAAM,WAAW,eAAe,CAC9B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,YAAY,CAAC,OAAO,kBAAkB,CAAC;IAC/C,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;CAC7E;AAED,wBAAgB,UAAU,CACxB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,UAAU,EACV,SAAgB,EAChB,KAAK,EAAE,WAAW,EAClB,IAAI,EACJ,OAAO,EACP,SAAgB,EAChB,WAA2B,EAC3B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,eAAe,EACxB,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,+BAkGtC;yBArHe,UAAU"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/Form/DatePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsD,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrI,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAqBlE,QAAA,MAAM,kBAAkB;;;8EAiBtB,CAAC;AAEH,MAAM,WAAW,eAAe,CAC9B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,YAAY,CAAC,OAAO,kBAAkB,CAAC;IAC/C,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;CAC7E;AAED,wBAAgB,UAAU,CACxB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,UAAU,EACV,SAAgB,EAChB,KAAK,EAAE,WAAW,EAClB,IAAI,EACJ,OAAO,EACP,SAAgB,EAChB,WAA2B,EAC3B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,eAAe,EACxB,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,+BAkGtC;yBArHe,UAAU"}

package/dist/components/Form/DatePicker.js

@@ -11,8 +11,14 @@ import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 import { CalendarIcon } from "lucide-react";
-import { format } from "date-fns";
+import { format, startOfDay } from "date-fns";
 //#region src/components/Form/DatePicker.tsx
+function toStartOfDay(value) {
+	if (!value || value === "") return;
+	const date = value instanceof Date ? value : new Date(value);
+	if (Number.isNaN(date.getTime())) return;
+	return startOfDay(date);
+}
 var datePickerVariants = cva("w-full justify-start text-left font-normal", {
 	variants: {
 		size: {
@@ -66,7 +72,7 @@ function DatePicker({ name, label, helperText, showError = true, error: customEr
 		name,
 		control
 	});
-	const selectedDate = field.value ? new Date(field.value) : void 0;
+	const selectedDate = toStartOfDay(field.value);
 	const fieldError = fieldState.error?.message;
 	const errorMessage = customError ?? fieldError;
 	const hasError = !!errorMessage;
@@ -107,7 +113,7 @@ function DatePicker({ name, label, helperText, showError = true, error: customEr
 					mode: "single",
 					selected: selectedDate,
 					onSelect: (date) => {
-						field.onChange(date ?? "");
+						field.onChange(date ? startOfDay(date) : "");
 						setOpen(false);
 					}
 				})

package/dist/components/Form/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":[],"sources":["../../../src/components/Form/DatePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useState } from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { CalendarIcon } from \"lucide-react\";\r\nimport { useController, useFormContext as useRHFFormContext, type Control, type FieldPath, type FieldValues } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../../primitives/button\";\r\nimport { Calendar } from \"../../primitives/calendar\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../primitives/popover\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\n\r\nconst datePickerVariants = cva(\"w-full justify-start text-left font-normal\", {\r\n  variants: {\r\n    size: {\r\n      sm: \"h-8 text-xs\",\r\n      md: \"h-10 text-sm\",\r\n      lg: \"h-12 text-base\",\r\n    },\r\n    variant: {\r\n      default: \"border-input\",\r\n      error: \"border-destructive\",\r\n      success: \"border-green-500\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nexport interface DatePickerProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof datePickerVariants> {\r\n  name: TName;\r\n  label?: string;\r\n  helperText?: string;\r\n  showError?: boolean;\r\n  error?: string;\r\n  fullWidth?: boolean;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  id?: string;\r\n  control?: Control<TFieldValues>;\r\n  required?: boolean | string;\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nexport function DatePicker<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n  name,\r\n  label,\r\n  helperText,\r\n  showError = true,\r\n  error: customError,\r\n  size,\r\n  variant,\r\n  fullWidth = true,\r\n  placeholder = \"Pick a date\",\r\n  disabled,\r\n  className,\r\n  id: providedId,\r\n  control: externalControl,\r\n  required,\r\n  validate,\r\n}: DatePickerProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  const [open, setOpen] = useState(false);\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n  const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n  useEffect(() => {\r\n    if (registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      registerFieldValidation({\r\n        name: name as string,\r\n        type: \"date\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        unregisterFieldValidation?.(name as string);\r\n      };\r\n    }\r\n  }, [\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    name,\r\n    required,\r\n    validate,\r\n  ]);\r\n\r\n  const { field, fieldState } = useController<TFieldValues, TName>({\r\n    name,\r\n    control,\r\n  });\r\n\r\n  const selectedDate = field.value ? new Date(field.value) : undefined;\r\n  const fieldError = fieldState.error?.message;\r\n  const errorMessage = customError ?? fieldError;\r\n  const hasError = !!errorMessage;\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n  return (\r\n    <FieldLayout\r\n      inputId={inputId}\r\n      label={label}\r\n      required={!!required}\r\n      helperText={helperText}\r\n      errorMessage={showError ? errorMessage : undefined}\r\n      showError={showError}\r\n      fullWidth={fullWidth}\r\n      formConfig={formConfig}\r\n    >\r\n      <Popover open={open} onOpenChange={setOpen}>\r\n        <PopoverTrigger asChild>\r\n          <Button\r\n            id={inputId}\r\n            type=\"button\"\r\n            variant=\"outline\"\r\n            disabled={effectiveDisabled}\r\n            aria-invalid={hasError}\r\n            aria-describedby={\r\n              hasError\r\n                ? `${inputId}-error`\r\n                : helperText\r\n                  ? `${inputId}-helper`\r\n                  : undefined\r\n            }\r\n            className={cn(\r\n              datePickerVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n              !selectedDate && \"text-muted-foreground\",\r\n              className\r\n            )}\r\n          >\r\n            <CalendarIcon className=\"mr-2 h-4 w-4\" />\r\n            {selectedDate ? format(selectedDate, \"PPP\") : placeholder}\r\n          </Button>\r\n        </PopoverTrigger>\r\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n          <Calendar\r\n            mode=\"single\"\r\n            selected={selectedDate}\r\n            onSelect={(date) => {\r\n              field.onChange(date ?? \"\");\r\n              setOpen(false);\r\n            }}\r\n          />\r\n        </PopoverContent>\r\n      </Popover>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nDatePicker.displayName = \"DatePicker\";\r\n"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAM,qBAAqB,IAAI,8CAA8C;CAC3E,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,SAAS;GACP,SAAS;GACT,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AAqBD,SAAgB,WAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,cAAc,eACd,UACA,WACA,IAAI,YACJ,SAAS,iBACT,UACA,YACuC;CACvC,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAC9B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CACrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAE/C,MAAM,0BAA0B,mBAAmB;CACnD,MAAM,4BAA4B,mBAAmB;CAErD,gBAAgB;EACd,IAAI,yBAAyB;GAC3B,MAAM,QAA8B,CAAC;GACrC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,wBAAwB;IAChB;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,4BAA4B,IAAc;GAC5C;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,eAAe,MAAM,QAAQ,IAAI,KAAK,MAAM,KAAK,IAAI,KAAA;CAC3D,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CACnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,mBAAmB,WAAW,UAAU;CAE9C,OACE,oBAAC,aAAD;EACW;EACF;EACP,UAAU,CAAC,CAAC;EACA;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACA;EACC;EAEZ,UAAA,qBAAC,SAAD;GAAe;GAAM,cAAc;GAAnC,UAAA,CACE,oBAAC,gBAAD;IAAgB,SAAA;IACd,UAAA,qBAAC,QAAD;KACE,IAAI;KACJ,MAAK;KACL,SAAQ;KACR,UAAU;KACV,gBAAc;KACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;KAER,WAAW,GACT,mBAAmB;MAAE,MAAM;MAAe,SAAS;KAAiB,CAAC,GACrE,CAAC,gBAAgB,yBACjB,SACF;KAjBF,UAAA,CAmBE,oBAAC,cAAD,EAAc,WAAU,eAAgB,CAAA,GACvC,eAAe,OAAO,cAAc,KAAK,IAAI,WACxC;;GACM,CAAA,GAChB,oBAAC,gBAAD;IAAgB,WAAU;IAAa,OAAM;IAC3C,UAAA,oBAAC,UAAD;KACE,MAAK;KACL,UAAU;KACV,WAAW,SAAS;MAClB,MAAM,SAAS,QAAQ,EAAE;MACzB,QAAQ,KAAK;KACf;IACD,CAAA;GACa,CAAA,CACT;;CACE,CAAA;AAEjB;AAEA,WAAW,cAAc"}
+{"version":3,"file":"DatePicker.js","names":[],"sources":["../../../src/components/Form/DatePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useState } from \"react\";\r\nimport { format, startOfDay } from \"date-fns\";\r\nimport { CalendarIcon } from \"lucide-react\";\r\nimport { useController, useFormContext as useRHFFormContext, type Control, type FieldPath, type FieldValues } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../../primitives/button\";\r\nimport { Calendar } from \"../../primitives/calendar\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../primitives/popover\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\n\r\nfunction toStartOfDay(value: unknown): Date | undefined {\r\n  if (!value || value === \"\") {\r\n    return undefined;\r\n  }\r\n\r\n  const date = value instanceof Date ? value : new Date(value as string | number);\r\n  if (Number.isNaN(date.getTime())) {\r\n    return undefined;\r\n  }\r\n\r\n  return startOfDay(date);\r\n}\r\n\r\nconst datePickerVariants = cva(\"w-full justify-start text-left font-normal\", {\r\n  variants: {\r\n    size: {\r\n      sm: \"h-8 text-xs\",\r\n      md: \"h-10 text-sm\",\r\n      lg: \"h-12 text-base\",\r\n    },\r\n    variant: {\r\n      default: \"border-input\",\r\n      error: \"border-destructive\",\r\n      success: \"border-green-500\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nexport interface DatePickerProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof datePickerVariants> {\r\n  name: TName;\r\n  label?: string;\r\n  helperText?: string;\r\n  showError?: boolean;\r\n  error?: string;\r\n  fullWidth?: boolean;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  id?: string;\r\n  control?: Control<TFieldValues>;\r\n  required?: boolean | string;\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nexport function DatePicker<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n  name,\r\n  label,\r\n  helperText,\r\n  showError = true,\r\n  error: customError,\r\n  size,\r\n  variant,\r\n  fullWidth = true,\r\n  placeholder = \"Pick a date\",\r\n  disabled,\r\n  className,\r\n  id: providedId,\r\n  control: externalControl,\r\n  required,\r\n  validate,\r\n}: DatePickerProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  const [open, setOpen] = useState(false);\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n  const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n  useEffect(() => {\r\n    if (registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      registerFieldValidation({\r\n        name: name as string,\r\n        type: \"date\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        unregisterFieldValidation?.(name as string);\r\n      };\r\n    }\r\n  }, [\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    name,\r\n    required,\r\n    validate,\r\n  ]);\r\n\r\n  const { field, fieldState } = useController<TFieldValues, TName>({\r\n    name,\r\n    control,\r\n  });\r\n\r\n  const selectedDate = toStartOfDay(field.value);\r\n  const fieldError = fieldState.error?.message;\r\n  const errorMessage = customError ?? fieldError;\r\n  const hasError = !!errorMessage;\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n  return (\r\n    <FieldLayout\r\n      inputId={inputId}\r\n      label={label}\r\n      required={!!required}\r\n      helperText={helperText}\r\n      errorMessage={showError ? errorMessage : undefined}\r\n      showError={showError}\r\n      fullWidth={fullWidth}\r\n      formConfig={formConfig}\r\n    >\r\n      <Popover open={open} onOpenChange={setOpen}>\r\n        <PopoverTrigger asChild>\r\n          <Button\r\n            id={inputId}\r\n            type=\"button\"\r\n            variant=\"outline\"\r\n            disabled={effectiveDisabled}\r\n            aria-invalid={hasError}\r\n            aria-describedby={\r\n              hasError\r\n                ? `${inputId}-error`\r\n                : helperText\r\n                  ? `${inputId}-helper`\r\n                  : undefined\r\n            }\r\n            className={cn(\r\n              datePickerVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n              !selectedDate && \"text-muted-foreground\",\r\n              className\r\n            )}\r\n          >\r\n            <CalendarIcon className=\"mr-2 h-4 w-4\" />\r\n            {selectedDate ? format(selectedDate, \"PPP\") : placeholder}\r\n          </Button>\r\n        </PopoverTrigger>\r\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n          <Calendar\r\n            mode=\"single\"\r\n            selected={selectedDate}\r\n            onSelect={(date) => {\r\n              field.onChange(date ? startOfDay(date) : \"\");\r\n              setOpen(false);\r\n            }}\r\n          />\r\n        </PopoverContent>\r\n      </Popover>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nDatePicker.displayName = \"DatePicker\";\r\n"],"mappings":";;;;;;;;;;;;;;;AAcA,SAAS,aAAa,OAAkC;CACtD,IAAI,CAAC,SAAS,UAAU,IACtB;CAGF,MAAM,OAAO,iBAAiB,OAAO,QAAQ,IAAI,KAAK,KAAwB;CAC9E,IAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,GAC7B;CAGF,OAAO,WAAW,IAAI;AACxB;AAEA,IAAM,qBAAqB,IAAI,8CAA8C;CAC3E,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,SAAS;GACP,SAAS;GACT,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AAqBD,SAAgB,WAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,cAAc,eACd,UACA,WACA,IAAI,YACJ,SAAS,iBACT,UACA,YACuC;CACvC,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAC9B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CACrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAE/C,MAAM,0BAA0B,mBAAmB;CACnD,MAAM,4BAA4B,mBAAmB;CAErD,gBAAgB;EACd,IAAI,yBAAyB;GAC3B,MAAM,QAA8B,CAAC;GACrC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,wBAAwB;IAChB;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,4BAA4B,IAAc;GAC5C;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,eAAe,aAAa,MAAM,KAAK;CAC7C,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CACnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,mBAAmB,WAAW,UAAU;CAE9C,OACE,oBAAC,aAAD;EACW;EACF;EACP,UAAU,CAAC,CAAC;EACA;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACA;EACC;EAEZ,UAAA,qBAAC,SAAD;GAAe;GAAM,cAAc;GAAnC,UAAA,CACE,oBAAC,gBAAD;IAAgB,SAAA;IACd,UAAA,qBAAC,QAAD;KACE,IAAI;KACJ,MAAK;KACL,SAAQ;KACR,UAAU;KACV,gBAAc;KACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;KAER,WAAW,GACT,mBAAmB;MAAE,MAAM;MAAe,SAAS;KAAiB,CAAC,GACrE,CAAC,gBAAgB,yBACjB,SACF;KAjBF,UAAA,CAmBE,oBAAC,cAAD,EAAc,WAAU,eAAgB,CAAA,GACvC,eAAe,OAAO,cAAc,KAAK,IAAI,WACxC;;GACM,CAAA,GAChB,oBAAC,gBAAD;IAAgB,WAAU;IAAa,OAAM;IAC3C,UAAA,oBAAC,UAAD;KACE,MAAK;KACL,UAAU;KACV,WAAW,SAAS;MAClB,MAAM,SAAS,OAAO,WAAW,IAAI,IAAI,EAAE;MAC3C,QAAQ,KAAK;KACf;IACD,CAAA;GACa,CAAA,CACT;;CACE,CAAA;AAEjB;AAEA,WAAW,cAAc"}

package/dist/components/Form/DateTimePicker.d.ts

@@ -0,0 +1,28 @@
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { VariantProps } from 'class-variance-authority';
+declare const dateTimePickerVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+    variant?: "default" | "error" | "success" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DateTimePickerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends VariantProps<typeof dateTimePickerVariants> {
+    name: TName;
+    label?: string;
+    helperText?: string;
+    showError?: boolean;
+    error?: string;
+    fullWidth?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    control?: Control<TFieldValues>;
+    required?: boolean | string;
+    validate?: (value: unknown) => boolean | string | Promise<boolean | string>;
+    minuteStep?: number;
+}
+export declare function DateTimePicker<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, helperText, showError, error: customError, size, variant, fullWidth, placeholder, disabled, className, id: providedId, control: externalControl, required, validate, minuteStep, }: DateTimePickerProps<TFieldValues, TName>): import("react").JSX.Element;
+export declare namespace DateTimePicker {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=DateTimePicker.d.ts.map

package/dist/components/Form/DateTimePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/Form/DateTimePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsD,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrI,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAUlE,QAAA,MAAM,sBAAsB;;;8EAiB1B,CAAC;AAEH,MAAM,WAAW,mBAAmB,CAClC,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,YAAY,CAAC,OAAO,sBAAsB,CAAC;IACnD,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkCD,wBAAgB,cAAc,CAC5B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,UAAU,EACV,SAAgB,EAChB,KAAK,EAAE,WAAW,EAClB,IAAI,EACJ,OAAO,EACP,SAAgB,EAChB,WAA2B,EAC3B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,eAAe,EACxB,QAAQ,EACR,QAAQ,EACR,UAAc,GACf,EAAE,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,+BAuL1C;yBA3Me,cAAc"}

package/dist/components/Form/DateTimePicker.js

@@ -0,0 +1,202 @@
+"use client";
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../../primitives/button.js";
+import { FormConfigContext } from "./context.js";
+import { FieldLayout } from "./FieldLayout.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../primitives/popover.js";
+import { Calendar } from "../../primitives/calendar.js";
+import { Separator } from "../../primitives/separator.js";
+import { TimePicker } from "./TimePicker.js";
+import { useContext, useEffect, useId, useState } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useController, useFormContext } from "react-hook-form";
+import { CalendarIcon, Clock } from "lucide-react";
+import { format, startOfDay } from "date-fns";
+//#region src/components/Form/DateTimePicker.tsx
+var dateTimePickerVariants = cva("w-full justify-start text-left font-normal", {
+	variants: {
+		size: {
+			sm: "h-8 text-xs",
+			md: "h-10 text-sm",
+			lg: "h-12 text-base"
+		},
+		variant: {
+			default: "border-input",
+			error: "border-destructive",
+			success: "border-green-500"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	}
+});
+function toValidDate(value) {
+	if (!value || value === "") return;
+	const date = value instanceof Date ? value : new Date(value);
+	if (Number.isNaN(date.getTime())) return;
+	return date;
+}
+function hasTimePart(date) {
+	return date.getHours() !== 0 || date.getMinutes() !== 0 || date.getSeconds() !== 0 || date.getMilliseconds() !== 0;
+}
+function withPreservedTime(nextDay, previous) {
+	const next = new Date(nextDay);
+	next.setHours(previous.getHours(), previous.getMinutes(), previous.getSeconds(), previous.getMilliseconds());
+	return next;
+}
+function isSelectEventTarget(target) {
+	return target instanceof Element && Boolean(target.closest("[data-radix-select-content]"));
+}
+function DateTimePicker({ name, label, helperText, showError = true, error: customError, size, variant, fullWidth = true, placeholder = "Pick a date", disabled, className, id: providedId, control: externalControl, required, validate, minuteStep = 5 }) {
+	const generatedId = useId();
+	const inputId = providedId ?? generatedId;
+	const [open, setOpen] = useState(false);
+	const [timeOpen, setTimeOpen] = useState(false);
+	const [timeSet, setTimeSet] = useState(false);
+	const formConfigContext = useContext(FormConfigContext);
+	const formConfig = formConfigContext ?? {};
+	const rhfContext = useFormContext();
+	const control = externalControl ?? rhfContext?.control;
+	const registerFieldValidation = formConfigContext?.registerFieldValidation;
+	const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;
+	useEffect(() => {
+		if (registerFieldValidation) {
+			const rules = {};
+			if (required !== void 0) rules.required = required;
+			if (validate !== void 0) rules.validate = validate;
+			registerFieldValidation({
+				name,
+				type: "datetime",
+				rules
+			});
+			return () => {
+				unregisterFieldValidation?.(name);
+			};
+		}
+	}, [
+		registerFieldValidation,
+		unregisterFieldValidation,
+		name,
+		required,
+		validate
+	]);
+	const { field, fieldState } = useController({
+		name,
+		control
+	});
+	const selectedDate = toValidDate(field.value);
+	useEffect(() => {
+		const date = toValidDate(field.value);
+		if (!date) {
+			setTimeSet(false);
+			return;
+		}
+		if (hasTimePart(date)) setTimeSet(true);
+	}, [field.value]);
+	const fieldError = fieldState.error?.message;
+	const errorMessage = customError ?? fieldError;
+	const hasError = !!errorMessage;
+	const effectiveSize = size ?? formConfig.size ?? "md";
+	const effectiveDisabled = disabled ?? formConfig.disabled;
+	const effectiveVariant = hasError ? "error" : variant;
+	const displayHasTime = timeSet && !!selectedDate;
+	const handleOpenChange = (nextOpen) => {
+		setOpen(nextOpen);
+		if (nextOpen && timeSet) {
+			setTimeOpen(true);
+			return;
+		}
+		if (!nextOpen) setTimeOpen(false);
+	};
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		inputId,
+		label,
+		required: !!required,
+		helperText,
+		errorMessage: showError ? errorMessage : void 0,
+		showError,
+		fullWidth,
+		formConfig,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: handleOpenChange,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(Button, {
+					id: inputId,
+					type: "button",
+					variant: "outline",
+					disabled: effectiveDisabled,
+					"aria-invalid": hasError,
+					"aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+					className: cn(dateTimePickerVariants({
+						size: effectiveSize,
+						variant: effectiveVariant
+					}), !selectedDate && "text-muted-foreground", className),
+					children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), selectedDate ? format(selectedDate, displayHasTime ? "PPP p" : "PPP") : placeholder]
+				})
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				className: "w-auto p-0",
+				align: "start",
+				onPointerDownOutside: (event) => {
+					if (isSelectEventTarget(event.target)) event.preventDefault();
+				},
+				onFocusOutside: (event) => {
+					if (isSelectEventTarget(event.target)) event.preventDefault();
+				},
+				children: [
+					/* @__PURE__ */ jsx(Calendar, {
+						mode: "single",
+						selected: selectedDate,
+						onSelect: (date) => {
+							if (!date) {
+								field.onChange("");
+								setTimeSet(false);
+								return;
+							}
+							if (selectedDate && timeSet) {
+								field.onChange(withPreservedTime(date, selectedDate));
+								setOpen(false);
+								return;
+							}
+							field.onChange(startOfDay(date));
+						}
+					}),
+					/* @__PURE__ */ jsx(Separator, {}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "p-3",
+						children: [/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "ghost",
+							disabled: effectiveDisabled,
+							className: "h-8 w-full justify-start px-2 font-normal",
+							onClick: () => setTimeOpen((current) => !current),
+							children: [/* @__PURE__ */ jsx(Clock, { className: "mr-2 h-4 w-4" }), displayHasTime && selectedDate ? format(selectedDate, "p") : "Add time"]
+						}), timeOpen ? /* @__PURE__ */ jsx(TimePicker, {
+							className: "mt-2",
+							value: selectedDate,
+							minuteStep,
+							disabled: effectiveDisabled,
+							onChange: (date) => {
+								field.onChange(date);
+								setTimeSet(true);
+							},
+							onClear: () => {
+								if (selectedDate) field.onChange(startOfDay(selectedDate));
+								setTimeSet(false);
+							}
+						}) : null]
+					})
+				]
+			})]
+		})
+	});
+}
+DateTimePicker.displayName = "DateTimePicker";
+//#endregion
+export { DateTimePicker };
+
+//# sourceMappingURL=DateTimePicker.js.map

package/dist/components/Form/DateTimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.js","names":[],"sources":["../../../src/components/Form/DateTimePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useState } from \"react\";\r\nimport { format, startOfDay } from \"date-fns\";\r\nimport { CalendarIcon, Clock } from \"lucide-react\";\r\nimport { useController, useFormContext as useRHFFormContext, type Control, type FieldPath, type FieldValues } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../../primitives/button\";\r\nimport { Calendar } from \"../../primitives/calendar\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../primitives/popover\";\r\nimport { Separator } from \"../../primitives/separator\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport { TimePicker } from \"./TimePicker\";\r\n\r\nconst dateTimePickerVariants = cva(\"w-full justify-start text-left font-normal\", {\r\n  variants: {\r\n    size: {\r\n      sm: \"h-8 text-xs\",\r\n      md: \"h-10 text-sm\",\r\n      lg: \"h-12 text-base\",\r\n    },\r\n    variant: {\r\n      default: \"border-input\",\r\n      error: \"border-destructive\",\r\n      success: \"border-green-500\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nexport interface DateTimePickerProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof dateTimePickerVariants> {\r\n  name: TName;\r\n  label?: string;\r\n  helperText?: string;\r\n  showError?: boolean;\r\n  error?: string;\r\n  fullWidth?: boolean;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  id?: string;\r\n  control?: Control<TFieldValues>;\r\n  required?: boolean | string;\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n  minuteStep?: number;\r\n}\r\n\r\nfunction toValidDate(value: unknown): Date | undefined {\r\n  if (!value || value === \"\") {\r\n    return undefined;\r\n  }\r\n\r\n  const date = value instanceof Date ? value : new Date(value as string | number);\r\n  if (Number.isNaN(date.getTime())) {\r\n    return undefined;\r\n  }\r\n\r\n  return date;\r\n}\r\n\r\nfunction hasTimePart(date: Date): boolean {\r\n  return date.getHours() !== 0 || date.getMinutes() !== 0 || date.getSeconds() !== 0 || date.getMilliseconds() !== 0;\r\n}\r\n\r\nfunction withPreservedTime(nextDay: Date, previous: Date): Date {\r\n  const next = new Date(nextDay);\r\n  next.setHours(\r\n    previous.getHours(),\r\n    previous.getMinutes(),\r\n    previous.getSeconds(),\r\n    previous.getMilliseconds()\r\n  );\r\n  return next;\r\n}\r\n\r\nfunction isSelectEventTarget(target: EventTarget | null): boolean {\r\n  return target instanceof Element && Boolean(target.closest(\"[data-radix-select-content]\"));\r\n}\r\n\r\nexport function DateTimePicker<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n  name,\r\n  label,\r\n  helperText,\r\n  showError = true,\r\n  error: customError,\r\n  size,\r\n  variant,\r\n  fullWidth = true,\r\n  placeholder = \"Pick a date\",\r\n  disabled,\r\n  className,\r\n  id: providedId,\r\n  control: externalControl,\r\n  required,\r\n  validate,\r\n  minuteStep = 5,\r\n}: DateTimePickerProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  const [open, setOpen] = useState(false);\r\n  const [timeOpen, setTimeOpen] = useState(false);\r\n  const [timeSet, setTimeSet] = useState(false);\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n  const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n  useEffect(() => {\r\n    if (registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      registerFieldValidation({\r\n        name: name as string,\r\n        type: \"datetime\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        unregisterFieldValidation?.(name as string);\r\n      };\r\n    }\r\n  }, [\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    name,\r\n    required,\r\n    validate,\r\n  ]);\r\n\r\n  const { field, fieldState } = useController<TFieldValues, TName>({\r\n    name,\r\n    control,\r\n  });\r\n\r\n  const selectedDate = toValidDate(field.value);\r\n\r\n  useEffect(() => {\r\n    const date = toValidDate(field.value);\r\n    if (!date) {\r\n      setTimeSet(false);\r\n      return;\r\n    }\r\n\r\n    if (hasTimePart(date)) {\r\n      setTimeSet(true);\r\n    }\r\n  }, [field.value]);\r\n\r\n  const fieldError = fieldState.error?.message;\r\n  const errorMessage = customError ?? fieldError;\r\n  const hasError = !!errorMessage;\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n  const displayHasTime = timeSet && !!selectedDate;\r\n\r\n  const handleOpenChange = (nextOpen: boolean) => {\r\n    setOpen(nextOpen);\r\n    if (nextOpen && timeSet) {\r\n      setTimeOpen(true);\r\n      return;\r\n    }\r\n\r\n    if (!nextOpen) {\r\n      setTimeOpen(false);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <FieldLayout\r\n      inputId={inputId}\r\n      label={label}\r\n      required={!!required}\r\n      helperText={helperText}\r\n      errorMessage={showError ? errorMessage : undefined}\r\n      showError={showError}\r\n      fullWidth={fullWidth}\r\n      formConfig={formConfig}\r\n    >\r\n      <Popover open={open} onOpenChange={handleOpenChange}>\r\n        <PopoverTrigger asChild>\r\n          <Button\r\n            id={inputId}\r\n            type=\"button\"\r\n            variant=\"outline\"\r\n            disabled={effectiveDisabled}\r\n            aria-invalid={hasError}\r\n            aria-describedby={\r\n              hasError\r\n                ? `${inputId}-error`\r\n                : helperText\r\n                  ? `${inputId}-helper`\r\n                  : undefined\r\n            }\r\n            className={cn(\r\n              dateTimePickerVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n              !selectedDate && \"text-muted-foreground\",\r\n              className\r\n            )}\r\n          >\r\n            <CalendarIcon className=\"mr-2 h-4 w-4\" />\r\n            {selectedDate\r\n              ? format(selectedDate, displayHasTime ? \"PPP p\" : \"PPP\")\r\n              : placeholder}\r\n          </Button>\r\n        </PopoverTrigger>\r\n        <PopoverContent\r\n          className=\"w-auto p-0\"\r\n          align=\"start\"\r\n          onPointerDownOutside={(event) => {\r\n            if (isSelectEventTarget(event.target)) {\r\n              event.preventDefault();\r\n            }\r\n          }}\r\n          onFocusOutside={(event) => {\r\n            if (isSelectEventTarget(event.target)) {\r\n              event.preventDefault();\r\n            }\r\n          }}\r\n        >\r\n          <Calendar\r\n            mode=\"single\"\r\n            selected={selectedDate}\r\n            onSelect={(date) => {\r\n              if (!date) {\r\n                field.onChange(\"\");\r\n                setTimeSet(false);\r\n                return;\r\n              }\r\n\r\n              if (selectedDate && timeSet) {\r\n                field.onChange(withPreservedTime(date, selectedDate));\r\n                setOpen(false);\r\n                return;\r\n              }\r\n\r\n              field.onChange(startOfDay(date));\r\n            }}\r\n          />\r\n          <Separator />\r\n          <div className=\"p-3\">\r\n            <Button\r\n              type=\"button\"\r\n              variant=\"ghost\"\r\n              disabled={effectiveDisabled}\r\n              className=\"h-8 w-full justify-start px-2 font-normal\"\r\n              onClick={() => setTimeOpen((current) => !current)}\r\n            >\r\n              <Clock className=\"mr-2 h-4 w-4\" />\r\n              {displayHasTime && selectedDate ? format(selectedDate, \"p\") : \"Add time\"}\r\n            </Button>\r\n            {timeOpen ? (\r\n              <TimePicker\r\n                className=\"mt-2\"\r\n                value={selectedDate}\r\n                minuteStep={minuteStep}\r\n                disabled={effectiveDisabled}\r\n                onChange={(date) => {\r\n                  field.onChange(date);\r\n                  setTimeSet(true);\r\n                }}\r\n                onClear={() => {\r\n                  if (selectedDate) {\r\n                    field.onChange(startOfDay(selectedDate));\r\n                  }\r\n                  setTimeSet(false);\r\n                }}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </PopoverContent>\r\n      </Popover>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nDateTimePicker.displayName = \"DateTimePicker\";\r\n"],"mappings":"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"}

package/dist/components/Form/PasswordRevealToggle.d.ts

@@ -0,0 +1,7 @@
+export interface PasswordRevealToggleProps {
+    visible: boolean;
+    onToggle: () => void;
+    disabled?: boolean;
+}
+export declare function PasswordRevealToggle({ visible, onToggle, disabled, }: PasswordRevealToggleProps): import("react").JSX.Element;
+//# sourceMappingURL=PasswordRevealToggle.d.ts.map

package/dist/components/Form/PasswordRevealToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordRevealToggle.d.ts","sourceRoot":"","sources":["../../../src/components/Form/PasswordRevealToggle.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,yBAAyB;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,oBAAoB,CAAC,EACpC,OAAO,EACP,QAAQ,EACR,QAAgB,GAChB,EAAE,yBAAyB,+BAc3B"}

package/dist/components/Form/PasswordRevealToggle.js

@@ -0,0 +1,21 @@
+"use client";
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Eye, EyeOff } from "lucide-react";
+//#region src/components/Form/PasswordRevealToggle.tsx
+function PasswordRevealToggle({ visible, onToggle, disabled = false }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onToggle,
+		disabled,
+		className: "text-muted-foreground hover:text-foreground transition-colors disabled:pointer-events-none disabled:opacity-50",
+		tabIndex: -1,
+		"aria-label": visible ? "Hide password" : "Show password",
+		"aria-pressed": visible,
+		children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+	});
+}
+//#endregion
+export { PasswordRevealToggle };
+
+//# sourceMappingURL=PasswordRevealToggle.js.map

package/dist/components/Form/PasswordRevealToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordRevealToggle.js","names":[],"sources":["../../../src/components/Form/PasswordRevealToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { Eye, EyeOff } from \"lucide-react\";\n\nexport interface PasswordRevealToggleProps {\n\tvisible: boolean;\n\tonToggle: () => void;\n\tdisabled?: boolean;\n}\n\nexport function PasswordRevealToggle({\n\tvisible,\n\tonToggle,\n\tdisabled = false,\n}: PasswordRevealToggleProps) {\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={onToggle}\n\t\t\tdisabled={disabled}\n\t\t\tclassName=\"text-muted-foreground hover:text-foreground transition-colors disabled:pointer-events-none disabled:opacity-50\"\n\t\t\ttabIndex={-1}\n\t\t\taria-label={visible ? \"Hide password\" : \"Show password\"}\n\t\t\taria-pressed={visible}\n\t\t>\n\t\t\t{visible ? <EyeOff className=\"h-4 w-4\" /> : <Eye className=\"h-4 w-4\" />}\n\t\t</button>\n\t);\n}\n"],"mappings":";;;;;AAUA,SAAgB,qBAAqB,EACpC,SACA,UACA,WAAW,SACkB;CAC7B,OACC,oBAAC,UAAD;EACC,MAAK;EACL,SAAS;EACC;EACV,WAAU;EACV,UAAU;EACV,cAAY,UAAU,kBAAkB;EACxC,gBAAc;EAEb,UAAA,UAAU,oBAAC,QAAD,EAAQ,WAAU,UAAW,CAAA,IAAI,oBAAC,KAAD,EAAK,WAAU,UAAW,CAAA;CAC/D,CAAA;AAEV"}

package/dist/components/Form/TextBox.d.ts

@@ -33,6 +33,11 @@ export interface TextBoxProps<TFieldValues extends FieldValues = FieldValues, TN
     allowClear?: boolean;
     /** Callback when clear is clicked */
     onClear?: () => void;
+    /**
+     * Show an eye toggle for password fields.
+     * Defaults to true when `type="password"`.
+     */
+    passwordToggle?: boolean;
     /** External control (for use outside Form) */
     control?: Control<TFieldValues>;
     /** Field is required */