shekel-fe-shared-lib 1.0.18 → 1.0.20

package/dist/shekel-fe-shared-lib.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap";@tailwind base;@tailwind components;@tailwind utilities;@layer base{body{font-family:Plus Jakarta Sans,sans-serif}}.ant-input::placeholder{color:#7f7f7f!important}.ant-input:not(:focus):not(:placeholder-shown){border-color:#616161!important}.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-focused):has(input:not(:placeholder-shown)){border-color:#616161!important}.ant-input:focus,.ant-input-focused{border-color:#ec615b!important;box-shadow:0 0 0 2px #ec615b1a!important}.ant-input-affix-wrapper:focus-within,.ant-input-affix-wrapper-focused{border-color:#ec615b!important;box-shadow:0 0 0 2px #ec615b1a!important}.ant-input-affix-wrapper.password-input-custom,.ant-input-password.password-input-custom{height:44px!important;padding:0 11px!important;display:flex!important;align-items:center!important}.ant-input-affix-wrapper.password-input-custom input,.ant-input-password.password-input-custom input{height:auto!important;padding:0!important;margin:0!important;font-size:14px!important}.ant-input-affix-wrapper.password-input-custom input[type=password],.ant-input-password.password-input-custom input[type=password]{font-size:30px!important}.ant-input-affix-wrapper.password-input-custom input[type=text],.ant-input-password.password-input-custom input[type=text]{font-size:14px!important}.ant-input-affix-wrapper.password-input-custom input[type=password]::placeholder,.ant-input-password.password-input-custom input[type=password]::placeholder{font-size:14px!important;color:#7f7f7f!important;transform:translateY(-6px);display:block}.ant-input-affix-wrapper.password-input-custom input[type=text]::placeholder,.ant-input-password.password-input-custom input[type=text]::placeholder{font-size:14px!important;color:#7f7f7f!important}@layer components{.stat-card{animation:fadeInUp .3s ease-out}.stat-value{animation:countUp .5s ease-out}.card{animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes countUp{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.shimmer{animation:shimmer 2s infinite linear;background:linear-gradient(to right,#f6f7f8,#edeef1,#f6f7f8 40%,#f6f7f8);background-size:1000px 100%}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight .3s ease-out}.dropdown-slide-down{animation:dropdownSlideDown .2s cubic-bezier(.23,1,.32,1);transform-origin:top}.dropdown-slide-up{animation:dropdownSlideUp .2s cubic-bezier(.23,1,.32,1);transform-origin:bottom}@keyframes dropdownSlideDown{0%{opacity:0;transform:scaleY(0) translateY(0)}to{opacity:1;transform:scaleY(1) translateY(0)}}@keyframes dropdownSlideUp{0%{opacity:0;transform:scaleY(.8) translateY(8px)}to{opacity:1;transform:scaleY(1) translateY(0)}}.dropdown-menu-item{position:relative}.dropdown-menu-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:#3b82f6;transform:scaleY(0);transition:transform .2s ease}.dropdown-menu-item:hover:before{transform:scaleY(1)}.select-trigger{position:relative}.select-dropdown{animation:dropdownSlideDown .2s cubic-bezier(.23,1,.32,1)}.select-option{position:relative;transition:all .15s ease}.select-option:hover{padding-left:1.25rem}.modal-mask{animation:fadeIn .3s ease-out}.modal-content{animation:modalSlideIn .3s cubic-bezier(.23,1,.32,1)}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes progressActive{0%{background-position:0 0}to{background-position:40px 0}}.progress-active{background-image:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:40px 40px;animation:progressActive 1s linear infinite}@keyframes slideIn{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.animate-slide-in{animation:slideIn .5s cubic-bezier(.34,1.56,.64,1)}@keyframes slideInItem{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-slide-in-item{animation:slideInItem .3s cubic-bezier(.23,1,.32,1) both}}
+@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap";@tailwind base;@tailwind components;@tailwind utilities;@layer base{body{font-family:Plus Jakarta Sans,sans-serif}}.ant-input::placeholder{color:#7f7f7f!important}.ant-input:not(:focus):not(:placeholder-shown):not(.input-error-state){border-color:#616161!important}.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-focused):not(.password-input-error-state):has(input:not(:placeholder-shown)){border-color:#616161!important}.ant-input:focus,.ant-input-focused{border-color:#ec615b!important;box-shadow:0 0 0 2px #ec615b1a!important}.ant-input-affix-wrapper:focus-within,.ant-input-affix-wrapper-focused{border-color:#ec615b!important;box-shadow:0 0 0 2px #ec615b1a!important}.input-error-state.ant-input,.input-error-state .ant-input,input.input-error-state,input.ant-input.input-error-state,.input-error-state.ant-input:hover,.input-error-state .ant-input:hover,input.input-error-state:hover,input.ant-input.input-error-state:hover{border-color:#c21919!important}.input-error-state.ant-input:focus,.input-error-state.ant-input-focused,.input-error-state .ant-input:focus,.input-error-state .ant-input-focused,input.input-error-state:focus,input.ant-input.input-error-state:focus{border-color:#c21919!important;box-shadow:0 0 0 2px #c219191a!important}.input-error-state.ant-input-affix-wrapper,.input-error-state .ant-input-affix-wrapper,.input-error-state.ant-input-affix-wrapper:hover,.input-error-state .ant-input-affix-wrapper:hover{border-color:#c21919!important}.input-error-state.ant-input-affix-wrapper:focus-within,.input-error-state.ant-input-affix-wrapper-focused,.input-error-state .ant-input-affix-wrapper:focus-within,.input-error-state .ant-input-affix-wrapper-focused{border-color:#c21919!important;box-shadow:0 0 0 2px #c219191a!important}.input-error-state .ant-input-group-addon,.input-error-state.ant-input-group-addon{border-color:#c21919!important}.input-error-state .ant-input-group-addon:first-child,.input-error-state.ant-input-group-addon:first-child{border-right:none!important}.ant-input-status-error.input-error-state,.ant-input-status-error.input-error-state:hover,.ant-input-status-error.input-error-state:focus{border-color:#c21919!important}.password-input-error-state.ant-input-affix-wrapper,.password-input-error-state .ant-input-affix-wrapper,.ant-input-affix-wrapper.password-input-error-state,.password-input-error-state.ant-input-affix-wrapper:hover,.password-input-error-state .ant-input-affix-wrapper:hover,.ant-input-affix-wrapper.password-input-error-state:hover{border-color:#c21919!important}.password-input-error-state.ant-input-affix-wrapper:focus-within,.password-input-error-state.ant-input-affix-wrapper-focused,.password-input-error-state .ant-input-affix-wrapper:focus-within,.password-input-error-state .ant-input-affix-wrapper-focused,.ant-input-affix-wrapper.password-input-error-state:focus-within,.ant-input-affix-wrapper-focused.password-input-error-state{border-color:#c21919!important;box-shadow:0 0 0 2px #c219191a!important}.password-input-error-state .ant-input-group-addon,.password-input-error-state.ant-input-group-addon{border-color:#c21919!important}.password-input-error-state .ant-input-group-addon:first-child,.password-input-error-state.ant-input-group-addon:first-child{border-right:none!important}.password-input-error-state .ant-input,.password-input-error-state .ant-input-password .ant-input,.password-input-error-state.ant-input{border-color:#c21919!important}.password-input-error-state .ant-input:focus,.password-input-error-state .ant-input-focused,.password-input-error-state .ant-input-password .ant-input:focus,.password-input-error-state.ant-input:focus{border-color:#c21919!important;box-shadow:0 0 0 2px #c219191a!important}.ant-input-affix-wrapper-status-error.password-input-error-state,.ant-input-affix-wrapper-status-error.password-input-error-state:hover,.ant-input-affix-wrapper-status-error.password-input-error-state:focus-within{border-color:#c21919!important}.ant-input-affix-wrapper.password-input-custom,.ant-input-password.password-input-custom{height:44px!important;padding:0 11px!important;display:flex!important;align-items:center!important}.ant-input-affix-wrapper.password-input-custom input,.ant-input-password.password-input-custom input{height:auto!important;padding:0!important;margin:0!important;font-size:14px!important}.ant-input-affix-wrapper.password-input-custom input[type=password],.ant-input-password.password-input-custom input[type=password]{font-size:30px!important}.ant-input-affix-wrapper.password-input-custom input[type=text],.ant-input-password.password-input-custom input[type=text]{font-size:14px!important}.ant-input-affix-wrapper.password-input-custom input[type=password]::placeholder,.ant-input-password.password-input-custom input[type=password]::placeholder{font-size:14px!important;color:#7f7f7f!important;transform:translateY(-6px);display:block}.ant-input-affix-wrapper.password-input-custom input[type=text]::placeholder,.ant-input-password.password-input-custom input[type=text]::placeholder{font-size:14px!important;color:#7f7f7f!important}@layer components{.stat-card{animation:fadeInUp .3s ease-out}.stat-value{animation:countUp .5s ease-out}.card{animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes countUp{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.shimmer{animation:shimmer 2s infinite linear;background:linear-gradient(to right,#f6f7f8,#edeef1,#f6f7f8 40%,#f6f7f8);background-size:1000px 100%}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight .3s ease-out}.dropdown-slide-down{animation:dropdownSlideDown .2s cubic-bezier(.23,1,.32,1);transform-origin:top}.dropdown-slide-up{animation:dropdownSlideUp .2s cubic-bezier(.23,1,.32,1);transform-origin:bottom}@keyframes dropdownSlideDown{0%{opacity:0;transform:scaleY(0) translateY(0)}to{opacity:1;transform:scaleY(1) translateY(0)}}@keyframes dropdownSlideUp{0%{opacity:0;transform:scaleY(.8) translateY(8px)}to{opacity:1;transform:scaleY(1) translateY(0)}}.dropdown-menu-item{position:relative}.dropdown-menu-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:#3b82f6;transform:scaleY(0);transition:transform .2s ease}.dropdown-menu-item:hover:before{transform:scaleY(1)}.select-trigger{position:relative}.select-dropdown{animation:dropdownSlideDown .2s cubic-bezier(.23,1,.32,1)}.select-option{position:relative;transition:all .15s ease}.select-option:hover{padding-left:1.25rem}.modal-mask{animation:fadeIn .3s ease-out}.modal-content{animation:modalSlideIn .3s cubic-bezier(.23,1,.32,1)}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes progressActive{0%{background-position:0 0}to{background-position:40px 0}}.progress-active{background-image:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:40px 40px;animation:progressActive 1s linear infinite}@keyframes slideIn{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.animate-slide-in{animation:slideIn .5s cubic-bezier(.34,1.56,.64,1)}@keyframes slideInItem{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-slide-in-item{animation:slideInItem .3s cubic-bezier(.23,1,.32,1) both}}

package/dist/types/components/Input/CurrencyInput.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
-import { InputProps as AntInputProps } from 'antd';
+import { InputRef, InputProps as AntInputProps } from 'antd';
+import { Control } from 'react-hook-form';
 export interface CurrencyInputProps extends Omit<AntInputProps, 'onChange'> {
     label?: string;
     error?: string;
@@ -7,5 +8,6 @@ export interface CurrencyInputProps extends Omit<AntInputProps, 'onChange'> {
     currencySymbol?: string;
     formatAmount?: boolean;
     onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    control?: Control<any>;
 }
-export declare const CurrencyInput: React.FC<CurrencyInputProps>;
+export declare const CurrencyInput: React.ForwardRefExoticComponent<CurrencyInputProps & React.RefAttributes<InputRef>>;

package/dist/types/components/Input/Input.d.ts

@@ -1,8 +1,10 @@
 import { default as React } from 'react';
-import { InputProps as AntInputProps } from 'antd';
+import { InputProps as AntInputProps, InputRef } from 'antd';
+import { Control } from 'react-hook-form';
 export interface InputProps extends AntInputProps {
     label?: string;
     error?: string;
     helperText?: string;
+    control?: Control<any>;
 }
-export declare const Input: React.FC<InputProps>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;

package/dist/types/components/Input/OTPInput.d.ts

@@ -1,12 +1,16 @@
 import { default as React } from 'react';
+import { Control } from 'react-hook-form';
 export interface OTPInputProps {
     length?: number;
     value?: string;
     onChange?: (value: string) => void;
+    onBlur?: () => void;
     onComplete?: (value: string) => void;
+    name?: string;
     error?: boolean;
     errorMessage?: string;
     disabled?: boolean;
     className?: string;
+    control?: Control<any>;
 }
 export declare const OTPInput: React.FC<OTPInputProps>;

package/dist/types/components/Input/PasswordInput.d.ts

@@ -1,8 +1,11 @@
 import { default as React } from 'react';
+import { InputRef } from 'antd';
 import { PasswordProps as AntPasswordProps } from 'antd/es/input';
+import { Control } from 'react-hook-form';
 export interface PasswordInputProps extends AntPasswordProps {
     label?: string;
     error?: string;
     helperText?: string;
+    control?: Control<any>;
 }
-export declare const PasswordInput: React.FC<PasswordInputProps>;
+export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<InputRef>>;

package/dist/types/components/Input/PhoneInput.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
-import { InputProps as AntInputProps } from 'antd';
+import { InputRef, InputProps as AntInputProps } from 'antd';
+import { Control } from 'react-hook-form';
 export interface PhoneInputProps extends Omit<AntInputProps, 'addonBefore' | 'value' | 'onChange'> {
     label?: string;
     error?: string;
@@ -15,5 +16,6 @@ export interface PhoneInputProps extends Omit<AntInputProps, 'addonBefore' | 'va
     customFormat?: (value: string) => string;
     value?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    control?: Control<any>;
 }
-export declare const PhoneInput: React.FC<PhoneInputProps>;
+export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<InputRef>>;

package/dist/types/components/Select.d.ts

@@ -1,4 +1,5 @@
 import { FC, CSSProperties } from 'react';
+import { Control } from 'react-hook-form';
 export interface SelectOption {
     value: string | number;
     label: string;
@@ -10,6 +11,8 @@ export interface SelectProps {
     defaultValue?: string | number;
     placeholder?: string;
     onChange?: (value: string | number) => void;
+    onBlur?: () => void;
+    name?: string;
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'responsive';
     fullWidth?: boolean;
@@ -25,6 +28,10 @@ export interface SelectProps {
     hoverBgColor?: string;
     rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
     style?: CSSProperties;
+    label?: string;
+    error?: string;
+    helperText?: string;
+    control?: Control<any>;
 }
 export declare const Select: FC<SelectProps>;
 export default Select;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shekel-fe-shared-lib",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "Shared component library built with React and Tailwind CSS",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -39,6 +39,7 @@
     "@vitejs/plugin-react": "^4.7.0",
     "autoprefixer": "^10.4.22",
     "postcss": "^8.5.6",
+    "react-hook-form": "^7.72.1",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
     "vite": "^6.4.1",
@@ -47,6 +48,12 @@
   "peerDependencies": {
     "antd": "^5.0.0 || ^6.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": ">=7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-hook-form": {
+      "optional": true
+    }
   }
 }