@licklist/design 0.78.5-dev.27 → 0.78.5-dev.3

package/dist/CustomDatePicker/CustomDatePicker.d.ts

@@ -1,10 +0,0 @@
-type CustomDatePickerProps = {
-    name: string;
-    error?: string;
-    label?: string;
-    showAge?: boolean;
-    required?: boolean;
-};
-export declare function CustomDatePicker({ name, error, showAge, required }: CustomDatePickerProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=CustomDatePicker.d.ts.map

package/dist/CustomDatePicker/CustomDatePicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomDatePicker.d.ts","sourceRoot":"","sources":["../../src/CustomDatePicker/CustomDatePicker.tsx"],"names":[],"mappings":"AAMA,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,OAAc,EACd,QAAe,EAChB,EAAE,qBAAqB,2CA8OvB"}

package/dist/customRadioButton/RadioButton.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-interface RadioButtonProps {
-    name: string;
-    value: string;
-    checked: boolean;
-    onChange: (value: string) => void;
-    label?: string;
-}
-declare const RadioButton: React.FC<RadioButtonProps>;
-export default RadioButton;
-//# sourceMappingURL=RadioButton.d.ts.map

package/dist/customRadioButton/RadioButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../src/customRadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/customRadioButton/RadioButton.js

@@ -1,93 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-
-var RadioButton = function(param) {
-    var name = param.name, value = param.value, checked = param.checked, onChange = param.onChange, label = param.label;
-    // Generate a stable id so label could be connected if needed
-    var id = "".concat(name, "-").concat(value);
-    return /*#__PURE__*/ jsxs("div", {
-        className: "tw-flex tw-items-center tw-space-x-3",
-        style: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 12
-        },
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "tw-relative tw-cursor-pointer",
-                style: {
-                    position: 'relative',
-                    cursor: 'pointer'
-                },
-                onClick: function() {
-                    return onChange(value);
-                },
-                children: [
-                    /*#__PURE__*/ jsx("input", {
-                        id: id,
-                        type: "radio",
-                        name: name,
-                        value: value,
-                        checked: checked,
-                        onChange: function() {
-                            return onChange(value);
-                        },
-                        className: "tw-sr-only",
-                        style: {
-                            position: 'absolute',
-                            opacity: 0,
-                            pointerEvents: 'none',
-                            width: 0,
-                            height: 0
-                        }
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: "tw-w-[47px] tw-h-[47px] tw-border-[3px] tw-border-black tw-rounded-full tw-bg-white tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-200 hover:tw-shadow-sm",
-                        style: {
-                            width: 52,
-                            height: 52,
-                            borderWidth: 3,
-                            borderStyle: 'solid',
-                            borderColor: '#000',
-                            borderRadius: 9999,
-                            background: '#fff',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            transition: 'all 200ms'
-                        },
-                        children: checked && /*#__PURE__*/ jsx("div", {
-                            className: "tw-w-[30px] tw-h-[30px] tw-bg-slate-900 tw-rounded-full",
-                            style: {
-                                width: 30,
-                                height: 30,
-                                background: '#0f172a',
-                                borderRadius: 9999
-                            }
-                        })
-                    })
-                ]
-            }),
-            label && /*#__PURE__*/ jsx("label", {
-                htmlFor: id,
-                className: "tw-cursor-pointer tw-text-gray-700 tw-select-none tw-flex tw-items-center tw-leading-none",
-                style: {
-                    cursor: 'pointer',
-                    color: '#374151',
-                    userSelect: 'none',
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    lineHeight: 1,
-                    position: 'relative',
-                    top: 5
-                },
-                onClick: function() {
-                    return onChange(value);
-                },
-                children: label
-            })
-        ]
-    });
-};
-
-export { RadioButton as default };

package/src/CustomDatePicker/CustomDatePicker.tsx

@@ -1,258 +0,0 @@
-import { TextInput } from '@mantine/core'
-import { useEffect, useState } from 'react'
-import { Controller, useFormContext } from 'react-hook-form'
-import { DateTime } from 'luxon'
-import { useTranslation } from 'react-i18next'
-
-type CustomDatePickerProps = {
-  name: string
-  error?: string
-  label?: string
-  showAge?: boolean
-  required?: boolean
-}
-
-export function CustomDatePicker({
-  name, 
-  error, 
-  showAge = true,
-  required = true 
-}: CustomDatePickerProps) {
-  const { t } = useTranslation()
-  const { control, setValue, watch, getValues, trigger, formState } = useFormContext()
-  const [age, setAge] = useState<number | null>(null)
-  const [localError, setLocalError] = useState<string | null>(null)
-  
-  // Get current field values
-  const day = watch(`${name}_day`) || ''
-  const month = watch(`${name}_month`) || ''
-  const year = watch(`${name}_year`) || ''
-  
-  // Initialize values from existing date
-  useEffect(() => {
-    const existingDate = getValues(name)
-    
-    if (existingDate instanceof Date && !day && !month && !year) {
-      const dateTime = DateTime.fromJSDate(existingDate)
-      if (dateTime.isValid) {
-        setValue(`${name}_day`, dateTime.day.toString().padStart(2, '0'))
-        setValue(`${name}_month`, dateTime.month.toString().padStart(2, '0'))
-        setValue(`${name}_year`, dateTime.year.toString())
-      }
-    }
-  }, [name, setValue, getValues, day, month, year])
-  
-  // Check for empty fields after submit attempt
-  useEffect(() => {
-    if (formState.isSubmitted && required) {
-      const hasEmptyFields = !day || !month || !year
-      
-      if (hasEmptyFields) {
-        setLocalError(t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') }))
-        // Set the main field to null to trigger form validation
-        setValue(name, null, { shouldValidate: true })
-      } else {
-        setLocalError(null)
-      }
-    }
-  }, [formState.isSubmitted, day, month, year, required, name, setValue, t])
-  
-  // Calculate age and validate date when all fields are filled
-  useEffect(() => {
-    if (day && month && year) {
-      try {
-        // Create a date object
-        const dateObj = DateTime.fromObject({ 
-          day: parseInt(day, 10), 
-          month: parseInt(month, 10), 
-          year: parseInt(year, 10) 
-        })
-        
-        // Only proceed if date is valid
-        if (dateObj.isValid) {
-          // Set the main field value
-          setValue(name, dateObj.toJSDate(), { shouldValidate: true })
-          setLocalError(null)
-          
-          // Calculate age
-          if (showAge) {
-            const now = DateTime.now()
-            const diff = now.diff(dateObj, 'years')
-            setAge(Math.floor(diff.years))
-          }
-        } else {
-          setLocalError(t('Validation:fieldInvalid', { attribute: t('App:dateOfBirth') }))
-          setValue(name, null, { shouldValidate: true })
-          setAge(null)
-        }
-      } catch (err) {
-        // If any parsing fails, just reset the age display
-        setLocalError(t('Validation:fieldInvalid', { attribute: t('App:dateOfBirth') }))
-        setValue(name, null, { shouldValidate: true })
-        setAge(null)
-      }
-    } else if (formState.isSubmitted && required) {
-      // If form was submitted and fields are required but not all filled
-      setLocalError(t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') }))
-      setValue(name, null, { shouldValidate: true })
-      setAge(null)
-    } else {
-      // Reset if not all fields are filled but not submitted yet
-      setValue(name, null, { shouldValidate: false })
-      setAge(null)
-    }
-  }, [day, month, year, name, setValue, showAge, formState.isSubmitted, required, t])
-
-  // After user completes all fields, validate the form
-  useEffect(() => {
-    if (day && month && year) {
-      trigger(name)
-    }
-  }, [day, month, year, name, trigger])
-
-  // Display either the form error or our local error
-  const displayError = error || localError
-
-  return (
-    <div className="tw-w-full">
-      <div className="tw-flex tw-flex-col">
-        <div className="tw-mb-2 tw-flex tw-items-center tw-justify-between">
-          <label className="tw-font-semibold">
-            {t('App:dateOfBirth')}
-            {required && <span className="tw-ml-1 tw-text-red-500"></span>}
-          </label>
-          {age !== null && (
-            <span className="tw-text-sm tw-text-gray-600">
-              {t('App:Age')}: {age}
-            </span>
-          )}
-        </div>
-        
-        <div className="tw-flex tw-flex-row tw-gap-4">
-          <div className="tw-w-1/3">
-            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Day')}</label>
-            <Controller
-              control={control}
-              name={`${name}_day`}
-              defaultValue=""
-              render={({ field }) => (
-                <TextInput
-                  {...field}
-                  value={field.value || ''}
-                  placeholder="DD"
-                  maxLength={2}
-                  error={!!displayError}
-                  classNames={{ input: 'tw-placeholder-[#626A90]' }}
-                  styles={{ input: { '&::placeholder': { color: '#626A90' } } }}
-                  onChange={(e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '')
-                    field.onChange(value)
-                  }}
-                  onBlur={(e) => {
-                    // Validate and format on blur
-                    let value = e.target.value.replace(/[^0-9]/g, '')
-                    if (value) {
-                      const num = parseInt(value, 10)
-                      if (num < 1) value = '01'
-                      else if (num > 31) value = '31'
-                      else value = num.toString().padStart(2, '0')
-                    }
-                    field.onChange(value)
-                  }}
-                />
-              )}
-            />
-          </div>
-          
-          <div className="tw-w-1/3">
-            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Month')}</label>
-            <Controller
-              control={control}
-              name={`${name}_month`}
-              defaultValue=""
-              render={({ field }) => (
-                <TextInput
-                  {...field}
-                  value={field.value || ''}
-                  placeholder="MM"
-                  maxLength={2}
-                  error={!!displayError}
-                  classNames={{ input: 'tw-placeholder-[#626A90]' }}
-                  styles={{ input: { '&::placeholder': { color: '#626A90' } } }}
-                  onChange={(e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '')
-                    field.onChange(value)
-                  }}
-                  onBlur={(e) => {
-                    // Validate and format on blur
-                    let value = e.target.value.replace(/[^0-9]/g, '')
-                    if (value) {
-                      const num = parseInt(value, 10)
-                      if (num < 1) value = '01'
-                      else if (num > 12) value = '12'
-                      else value = num.toString().padStart(2, '0')
-                    }
-                    field.onChange(value)
-                  }}
-                />
-              )}
-            />
-          </div>
-          
-          <div className="tw-w-1/3">
-            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Year')}</label>
-            <Controller
-              control={control}
-              name={`${name}_year`}
-              defaultValue=""
-              render={({ field }) => (
-                <TextInput
-                  {...field}
-                  value={field.value || ''}
-                  placeholder="YYYY"
-                  maxLength={4}
-                  error={!!displayError}
-                  classNames={{ input: 'tw-placeholder-[#626A90]' }}
-                  styles={{ input: { '&::placeholder': { color: '#626A90' } } }}
-                  onChange={(e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '')
-                    field.onChange(value)
-                  }}
-                  onBlur={(e) => {
-                    // Validate on blur
-                    const value = e.target.value.replace(/[^0-9]/g, '')
-                    if (value) {
-                      const num = parseInt(value, 10)
-                      const currentYear = new Date().getFullYear()
-                      if (num > currentYear) {
-                        field.onChange(currentYear.toString())
-                      } else if (num < 1900) {
-                        field.onChange('1900')
-                      }
-                    }
-                  }}
-                />
-              )}
-            />
-          </div>
-        </div>
-      </div>
-      
-      {/* Hidden field to store the actual date value */}
-      <Controller
-        control={control}
-        name={name}
-        defaultValue={null}
-        rules={{
-          validate: value => {
-            if (required && !value) {
-              return t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') })
-            }
-            return true
-          }
-        }}
-        render={() => <input type="hidden" />}
-      />
-    </div>
-  )
-}

package/src/customRadioButton/RadioButton.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-
-interface RadioButtonProps {
-  name: string;
-  value: string;
-  checked: boolean;
-  onChange: (value: string) => void;
-  label?: string;
-}
-
-const RadioButton: React.FC<RadioButtonProps> = ({
-                                                   name,
-                                                   value,
-                                                   checked,
-                                                   onChange,
-                                                   label
-                                                 }) => {
-  // Generate a stable id so label could be connected if needed
-  const id = `${name}-${value}`;
-
-  return (
-    <div
-      className="tw-flex tw-items-center tw-space-x-3"
-      style={{ display: 'flex', alignItems: 'center', gap: 12 }}
-    >
-      <div
-        className="tw-relative tw-cursor-pointer"
-        style={{ position: 'relative', cursor: 'pointer' }}
-        onClick={() => onChange(value)}
-      >
-        {/* Hidden native radio input for accessibility */}
-        <input
-          id={id}
-          type="radio"
-          name={name}
-          value={value}
-          checked={checked}
-          onChange={() => onChange(value)}
-          className="tw-sr-only"
-          style={{ position: 'absolute', opacity: 0, pointerEvents: 'none', width: 0, height: 0 }}
-        />
-
-        {/* Custom radio button circle */}
-        <div
-          className="tw-w-[47px] tw-h-[47px] tw-border-[3px] tw-border-black tw-rounded-full tw-bg-white tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-200 hover:tw-shadow-sm"
-          style={{
-            width: 52,
-            height: 52,
-            borderWidth: 3,
-            borderStyle: 'solid',
-            borderColor: '#000',
-            borderRadius: 9999,
-            background: '#fff',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            transition: 'all 200ms',
-          }}
-        >
-          {/* Inner filled circle when selected */}
-          {checked && (
-            <div
-              className="tw-w-[30px] tw-h-[30px] tw-bg-slate-900 tw-rounded-full"
-              style={{ width: 30, height: 30, background: '#0f172a', borderRadius: 9999 }}
-            />
-          )}
-        </div>
-      </div>
-
-      {label && (
-        <label
-          htmlFor={id}
-          className="tw-cursor-pointer tw-text-gray-700 tw-select-none tw-flex tw-items-center tw-leading-none"
-          style={{ cursor: 'pointer', color: '#374151', userSelect: 'none', display: 'inline-flex', alignItems: 'center', lineHeight: 1, position: 'relative', top: 5 }}
-          onClick={() => onChange(value)}
-        >
-          {label}
-        </label>
-      )}
-    </div>
-  );
-};
-
-export default RadioButton;