@klu_dev/ui-klu-green 1.2.16 → 1.2.18

package/README.md

@@ -12,6 +12,7 @@ npm install @klu_dev/ui-klu-green
 
 ## Componentes disponibles
 - Input
+- TextField
 - Button
 - BackButton
 - Select

package/dist/index.css

@@ -151,8 +151,11 @@
     --uiklu-gray-400: 220 2% 72%;
     --uiklu-gray-300: 210 3% 87%;
     --uiklu-gray-200: 220 8% 93%;
+    --uiklu-gray-100: 220 14% 96%;
     --uiklu-gray-50: 240 20% 98%;
 
+    --uiklu-grayicon: 210 1% 69%;
+
 
     --uiklu-successbg: 184 36% 91%;
     --uiklu-successborder: 180 34% 77%;
@@ -186,11 +189,14 @@ button,
 .uiklu-error-message {
     color: hsl(var(--uiklu-destructive)) !important;
   }
-[class*="bg-"]:not([class*="white"]) .uiklu-error-message {
+[class*="bg-"]:not([class*="white"]) .uiklu-error-message,
+  [class*="bg-"]:not([class*="white"]) .uiklu-label {
     color: #FFFFFF !important;
   }
 [class*="bg-white/"] .uiklu-error-message,
-  [class*="backdrop-blur"] .uiklu-error-message {
+  [class*="bg-white/"] .uiklu-label,
+  [class*="backdrop-blur"] .uiklu-error-message,
+  [class*="backdrop-blur"] .uiklu-label {
     color: #FFFFFF !important;
   }
 .uiklu-pointer-events-none{
@@ -224,6 +230,10 @@ button,
 .uiklu-left-0{
     left: 0px;
 
+}
+.uiklu-left-2{
+    left: 0.5rem;
+
 }
 .uiklu-left-3{
     left: 0.75rem;
@@ -240,6 +250,10 @@ button,
 .uiklu-right-0{
     right: 0px;
 
+}
+.uiklu-right-3{
+    right: 0.75rem;
+
 }
 .uiklu-right-6{
     right: 1.5rem;
@@ -360,10 +374,22 @@ button,
 .uiklu-mb-\[20px\]{
     margin-bottom: 20px;
 
+}
+.uiklu-mb-\[5px\]{
+    margin-bottom: 5px;
+
+}
+.uiklu-mb-\[7px\]{
+    margin-bottom: 7px;
+
 }
 .uiklu-mb-\[8px\]{
     margin-bottom: 8px;
 
+}
+.uiklu-ml-0\.5{
+    margin-left: 0.125rem;
+
 }
 .uiklu-ml-2{
     margin-left: 0.5rem;
@@ -632,10 +658,6 @@ button,
 .uiklu-min-h-screen{
     min-height: 100vh;
 
-}
-.uiklu-w-11{
-    width: 2.75rem;
-
 }
 .uiklu-w-12{
     width: 3rem;
@@ -672,6 +694,10 @@ button,
 .uiklu-w-8{
     width: 2rem;
 
+}
+.uiklu-w-9{
+    width: 2.25rem;
+
 }
 .uiklu-w-\[140px\]{
     width: 140px;
@@ -934,16 +960,6 @@ button,
     --tw-translate-y: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
-}
-.uiklu-translate-x-1{
-    --tw-translate-x: 0.25rem;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-
-}
-.uiklu-translate-x-6{
-    --tw-translate-x: 1.5rem;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-
 }
 .uiklu-translate-x-\[-50\%\]{
     --tw-translate-x: -50%;
@@ -959,14 +975,14 @@ button,
     --tw-translate-y: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
-}
-.uiklu-transform{
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-
 }
 .uiklu-cursor-default{
     cursor: default;
 
+}
+.uiklu-cursor-not-allowed{
+    cursor: not-allowed;
+
 }
 .uiklu-cursor-pointer{
     cursor: pointer;
@@ -1342,6 +1358,11 @@ button,
     --tw-border-opacity: 1;
     border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 
+}
+.uiklu-border-gray100{
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--uiklu-gray-100) / var(--tw-border-opacity, 1));
+
 }
 .uiklu-border-gray200{
     --tw-border-opacity: 1;
@@ -1487,11 +1508,6 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 
-}
-.uiklu-bg-gray300{
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--uiklu-gray-300) / var(--tw-bg-opacity, 1));
-
 }
 .uiklu-bg-gray50{
     --tw-bg-opacity: 1;
@@ -1658,14 +1674,6 @@ button,
 .uiklu-bg-origin-border{
     background-origin: border-box;
 
-}
-.uiklu-fill-destructive{
-    fill: hsl(var(--uiklu-destructive) / 1);
-
-}
-.uiklu-fill-gray400{
-    fill: hsl(var(--uiklu-gray-400) / 1);
-
 }
 .uiklu-object-cover{
     -o-object-fit: cover;
@@ -1859,6 +1867,10 @@ button,
 .uiklu-pl-6{
     padding-left: 1.5rem;
 
+}
+.uiklu-pr-10{
+    padding-right: 2.5rem;
+
 }
 .uiklu-pr-14{
     padding-right: 3.5rem;
@@ -1938,6 +1950,10 @@ button,
 .uiklu-text-\[12px\]{
     font-size: 12px;
 
+}
+.uiklu-text-\[13px\]{
+    font-size: 13px;
+
 }
 .uiklu-text-\[14px\]{
     font-size: 14px;
@@ -2146,6 +2162,11 @@ button,
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-gray-900) / var(--tw-text-opacity, 1));
 
+}
+.uiklu-text-grayicon{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-grayicon) / var(--tw-text-opacity, 1));
+
 }
 .uiklu-text-green-500{
     --tw-text-opacity: 1;
@@ -2416,6 +2437,16 @@ input.uiklu-flex:not(:placeholder-shown) {
   color: hsl(var(--uiklu-gray-800)) !important;
 }
 
+.placeholder\:uiklu-font-semibold::-moz-placeholder{
+    font-weight: 600;
+
+}
+
+.placeholder\:uiklu-font-semibold::placeholder{
+    font-weight: 600;
+
+}
+
 .placeholder\:\!uiklu-text-destructive::-moz-placeholder{
     --tw-text-opacity: 1 !important;
     color: hsl(var(--uiklu-destructive) / var(--tw-text-opacity, 1)) !important;
@@ -2428,6 +2459,16 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.placeholder\:\!uiklu-text-destructive\/60::-moz-placeholder{
+    color: hsl(var(--uiklu-destructive) / 0.6) !important;
+
+}
+
+.placeholder\:\!uiklu-text-destructive\/60::placeholder{
+    color: hsl(var(--uiklu-destructive) / 0.6) !important;
+
+}
+
 .placeholder\:uiklu-text-destructive::-moz-placeholder{
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-destructive) / var(--tw-text-opacity, 1));
@@ -2452,6 +2493,28 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.placeholder\:uiklu-text-gray800::-moz-placeholder{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-gray-800) / var(--tw-text-opacity, 1));
+
+}
+
+.placeholder\:uiklu-text-gray800::placeholder{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-gray-800) / var(--tw-text-opacity, 1));
+
+}
+
+.placeholder\:uiklu-text-white\/40::-moz-placeholder{
+    color: rgb(255 255 255 / 0.4);
+
+}
+
+.placeholder\:uiklu-text-white\/40::placeholder{
+    color: rgb(255 255 255 / 0.4);
+
+}
+
 .placeholder\:uiklu-opacity-100::-moz-placeholder{
     opacity: 1;
 
@@ -2497,6 +2560,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.focus-within\:uiklu-bg-white:focus-within{
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+}
+
 .focus-within\:uiklu-shadow-\[0_0_0_3px_\#AFD8D8\]:focus-within{
     --tw-shadow: 0 0 0 3px #AFD8D8;
     --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
@@ -2634,6 +2703,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.focus\:uiklu-bg-white:focus{
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+}
+
 .focus\:uiklu-text-primary:focus{
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-primary) / var(--tw-text-opacity, 1));
@@ -2734,21 +2809,21 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
-.data-\[state\=checked\]\:uiklu-translate-x-5[data-state="checked"]{
-    --tw-translate-x: 1.25rem;
+.data-\[state\=checked\]\:uiklu-translate-x-3[data-state="checked"]{
+    --tw-translate-x: 0.75rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
 }
 
-.data-\[state\=unchecked\]\:uiklu-translate-x-0[data-state="unchecked"]{
-    --tw-translate-x: 0px;
+.data-\[state\=unchecked\]\:uiklu-translate-x-\[-4px\][data-state="unchecked"]{
+    --tw-translate-x: -4px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
 }
 
-.data-\[state\=checked\]\:uiklu-bg-primary[data-state="checked"]{
+.data-\[state\=checked\]\:uiklu-bg-primary900[data-state="checked"]{
     --tw-bg-opacity: 1;
-    background-color: hsl(var(--uiklu-primary) / var(--tw-bg-opacity, 1));
+    background-color: hsl(var(--uiklu-primary-900) / var(--tw-bg-opacity, 1));
 
 }
 
@@ -2764,6 +2839,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.data-\[placeholder\]\:uiklu-text-gray800[data-placeholder]{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-gray-800) / var(--tw-text-opacity, 1));
+
+}
+
 @media (min-width: 640px){
     .sm\:uiklu-flex-row{
         flex-direction: row;

package/dist/index.d.ts

@@ -36,8 +36,8 @@ declare const Select: React.FC<SelectPrimitive.SelectProps>;
 
 declare const typographyVariants: (props?: ({
     size?: "sm" | "md" | "xl" | "xxxl" | "xxl" | null | undefined;
-    color?: "primary" | "secondary" | "black" | "orange" | "white" | null | undefined;
-    align?: "left" | "right" | "center" | "justify" | null | undefined;
+    color?: "white" | "primary" | "secondary" | "black" | "orange" | null | undefined;
+    align?: "center" | "left" | "right" | "justify" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">, VariantProps<typeof typographyVariants> {
     showDot?: boolean;
@@ -147,12 +147,14 @@ declare const Icons: {
     TICKET: react_jsx_runtime.JSX.Element;
     CASH: react_jsx_runtime.JSX.Element;
     CHEVRON_RIGHT: react_jsx_runtime.JSX.Element;
+    CHEVRON_DOWN: react_jsx_runtime.JSX.Element;
     SHIELD_CHECK: react_jsx_runtime.JSX.Element;
     CLOSE: react_jsx_runtime.JSX.Element;
     MONEY: react_jsx_runtime.JSX.Element;
     INFO: react_jsx_runtime.JSX.Element;
     EYE_MASKED: react_jsx_runtime.JSX.Element;
     EYE_OPEN: react_jsx_runtime.JSX.Element;
+    SEARCH_ICON: react_jsx_runtime.JSX.Element;
     COPY: react_jsx_runtime.JSX.Element;
     ARROW_UP: react_jsx_runtime.JSX.Element;
     ARROW_DOWN: react_jsx_runtime.JSX.Element;
@@ -204,13 +206,13 @@ declare const searchSelectTriggerVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "full" | null | undefined;
     error?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface Option {
+interface Option$1 {
     value: string;
     label: string;
     extra?: React.ReactNode;
 }
 interface SearchSelectProps extends VariantProps<typeof searchSelectTriggerVariants> {
-    options: Option[];
+    options: Option$1[];
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
@@ -290,4 +292,53 @@ interface DetailCardProps {
 }
 declare const DetailCard: React__default.FC<DetailCardProps>;
 
-export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, DetailCard, type DetailCardItem, type DetailCardProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, InputPhone, type InputPhoneProps, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PromoBanner, SearchSelect, Select, SidebarTabs, ToastAction, Toaster, Typography, useToast };
+type TextFieldSize = "sm" | "md" | "lg" | "full";
+interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    label: string;
+    size?: TextFieldSize;
+    error?: string;
+    isSearchable?: boolean;
+    onSearchClick?: () => void;
+    labelClassName?: string;
+}
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+
+type SelectFieldSize = "sm" | "md" | "lg" | "full";
+interface SelectFieldProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> {
+    label: string;
+    placeholder?: string;
+    size?: SelectFieldSize;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    labelClassName?: string;
+}
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectField: React.ForwardRefExoticComponent<SelectFieldProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+type SearchSelectFieldSize = "sm" | "md" | "lg" | "full";
+interface Option {
+    value: string;
+    label: string;
+    extra?: React.ReactNode;
+}
+interface SearchSelectFieldProps {
+    options: Option[];
+    value: string;
+    onChange: (value: string) => void;
+    label: string;
+    placeholder?: string;
+    size?: SearchSelectFieldSize;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    labelClassName?: string;
+}
+declare const SearchSelectField: ({ options, value, onChange, label, placeholder, size, error, required, disabled, className, labelClassName, }: SearchSelectFieldProps) => react_jsx_runtime.JSX.Element;
+
+export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, DetailCard, type DetailCardItem, type DetailCardProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, InputPhone, type InputPhoneProps, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PromoBanner, SearchSelect, SearchSelectField, type SearchSelectFieldProps, Select, SelectContent, SelectField, type SelectFieldProps, SelectGroup, SelectItem, SelectValue, SidebarTabs, TextField, type TextFieldProps, ToastAction, Toaster, Typography, useToast };