@sector.siit/mlz-components 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,21 +1,23 @@
1
1
  /// <reference types="react" />
2
- export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
3
- /** Variante visual del input */
4
- variant?: "default" | "error" | "success";
5
- /** Tamaño del input */
6
- size?: "sm" | "md" | "lg";
7
- /** Si el input tiene un label */
8
- label?: string;
9
- /** Texto de ayuda debajo del input */
10
- helperText?: string;
11
- /** Texto de error */
2
+ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
12
3
  errorText?: string;
13
- /** Si el input es de ancho completo */
4
+ hasError?: boolean;
5
+ helperText?: string;
6
+ label?: string;
7
+ disabled?: boolean;
8
+ placeholder?: string;
14
9
  fullWidth?: boolean;
10
+ containerProps: ContainerProp;
11
+ labelProps: LabelProp;
12
+ helperTextProps: HelperTextProp;
13
+ checkedIcon?: React.ReactNode;
14
+ }
15
+ interface ContainerProp extends React.HTMLAttributes<HTMLDivElement> {
16
+ }
17
+ interface LabelProp extends React.LabelHTMLAttributes<HTMLLabelElement> {
18
+ }
19
+ interface HelperTextProp extends React.HTMLAttributes<HTMLParagraphElement> {
15
20
  }
16
- /**
17
- * Componente Input básico con diferentes variantes y tamaños
18
- */
19
21
  export declare const Input: React.FC<InputProps>;
20
- export default Input;
22
+ export {};
21
23
  //# sourceMappingURL=Input.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAAA,MAAM,WAAW,UAChB,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE,gCAAgC;IAChC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1C,uBAAuB;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyHtC,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAEA,MAAM,WAAW,UAChB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,aAAa,CAAC;IAC9B,UAAU,EAAE,SAAS,CAAC;IACtB,eAAe,EAAE,cAAc,CAAC;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEvE,UAAU,SAAU,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;CAAG;AAE1E,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;CAAG;AAyB9E,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAoCtC,CAAC"}
@@ -1,85 +1,12 @@
1
- /// <reference types="react" />
2
- import type { StoryObj } from '@storybook/react';
3
- declare const meta: {
4
- title: string;
5
- component: import("react").FC<import("./Input").InputProps>;
6
- parameters: {
7
- layout: string;
8
- docs: {
9
- description: {
10
- component: string;
11
- };
12
- };
13
- };
14
- tags: string[];
15
- argTypes: {
16
- variant: {
17
- control: {
18
- type: string;
19
- };
20
- options: string[];
21
- description: string;
22
- };
23
- size: {
24
- control: {
25
- type: string;
26
- };
27
- options: string[];
28
- description: string;
29
- };
30
- label: {
31
- control: {
32
- type: string;
33
- };
34
- description: string;
35
- };
36
- placeholder: {
37
- control: {
38
- type: string;
39
- };
40
- description: string;
41
- };
42
- helperText: {
43
- control: {
44
- type: string;
45
- };
46
- description: string;
47
- };
48
- errorText: {
49
- control: {
50
- type: string;
51
- };
52
- description: string;
53
- };
54
- fullWidth: {
55
- control: {
56
- type: string;
57
- };
58
- description: string;
59
- };
60
- disabled: {
61
- control: {
62
- type: string;
63
- };
64
- description: string;
65
- };
66
- };
67
- };
1
+ import { Meta, StoryObj } from "@storybook/react";
2
+ import { Input } from "./Input";
3
+ declare const meta: Meta<typeof Input>;
68
4
  export default meta;
69
- type Story = StoryObj<typeof meta>;
5
+ type Story = StoryObj<typeof Input>;
70
6
  export declare const Default: Story;
71
- export declare const WithLabel: Story;
72
- export declare const WithHelperText: Story;
73
7
  export declare const WithError: Story;
74
- export declare const Success: Story;
75
- export declare const Small: Story;
76
- export declare const Medium: Story;
77
- export declare const Large: Story;
78
- export declare const Disabled: Story;
8
+ export declare const WithHelperText: Story;
9
+ export declare const WithLabel: Story;
10
+ export declare const WithPlaceholder: Story;
79
11
  export declare const FullWidth: Story;
80
- export declare const Password: Story;
81
- export declare const Email: Story;
82
- export declare const Number: Story;
83
- export declare const AllVariants: Story;
84
- export declare const AllSizes: Story;
85
12
  //# sourceMappingURL=Input.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAuBtB,CAAC"}
1
+ {"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAG5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC"}
@@ -1,3 +1,3 @@
1
- export { Input, type InputProps } from './Input';
2
- export { default } from './Input';
1
+ export type { InputProps } from "./Input";
2
+ export { Input } from "./Input";
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
package/dist/index.d.ts CHANGED
@@ -18,23 +18,25 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
18
18
  }
19
19
  declare const Button: React$1.FC<ButtonProps>;
20
20
 
21
- interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
22
- /** Variante visual del input */
23
- variant?: "default" | "error" | "success";
24
- /** Tamaño del input */
25
- size?: "sm" | "md" | "lg";
26
- /** Si el input tiene un label */
27
- label?: string;
28
- /** Texto de ayuda debajo del input */
29
- helperText?: string;
30
- /** Texto de error */
21
+ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
31
22
  errorText?: string;
32
- /** Si el input es de ancho completo */
23
+ hasError?: boolean;
24
+ helperText?: string;
25
+ label?: string;
26
+ disabled?: boolean;
27
+ placeholder?: string;
33
28
  fullWidth?: boolean;
29
+ containerProps: ContainerProp;
30
+ labelProps: LabelProp;
31
+ helperTextProps: HelperTextProp;
32
+ checkedIcon?: React.ReactNode;
33
+ }
34
+ interface ContainerProp extends React.HTMLAttributes<HTMLDivElement> {
35
+ }
36
+ interface LabelProp extends React.LabelHTMLAttributes<HTMLLabelElement> {
37
+ }
38
+ interface HelperTextProp extends React.HTMLAttributes<HTMLParagraphElement> {
34
39
  }
35
- /**
36
- * Componente Input básico con diferentes variantes y tamaños
37
- */
38
40
  declare const Input: React.FC<InputProps>;
39
41
 
40
42
  interface UserCardProps {
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC"}
package/dist/index.esm.js CHANGED
@@ -27,7 +27,7 @@ function styleInject(css, ref) {
27
27
  }
28
28
  }
29
29
 
30
- var css_248z = "@import \"tailwindcss\";@source inline(\"text-semantic-error-600 text-primary-600 border-semantic-error-600 border-primary-400 placeholder:text-semantic-error-600 placeholder:text-primary-400 focus:border-semantic-error-600 focus:border-primary-600 focus:ring-semantic-error-600 focus:ring-primary-600 active:border-semantic-error-600 active:border-primary-600 w-full\");@font-face{font-family:Geometria;font-style:normal;font-weight:300;src:url(/fonts/Geometria-Light.woff2) format(\"woff2\")}@font-face{font-family:Geometria;font-style:normal;font-weight:400;src:url(/fonts/Geometria-Regular.woff2) format(\"woff2\")}@font-face{font-family:Geometria;font-style:bold;font-weight:700;src:url(/fonts/Geometria-Bold.woff2) format(\"woff2\")}body{font-family:Geometria,sans-serif}@theme{--color-primary-50:var(--mlz-primary-50,#eff6ff);--color-primary-100:var(--mlz-primary-100,#dbeafe);--color-primary-200:var(--mlz-primary-200,#bfdbfe);--color-primary-300:var(--mlz-primary-300,#93c5fd);--color-primary-400:var(--mlz-primary-400,#5ba8d5);--color-primary-500:var(--mlz-primary-500,#3b82f6);--color-primary-600:var(--mlz-primary-600,#236999);--color-primary-700:var(--mlz-primary-700,#1d4ed8);--color-primary-800:var(--mlz-primary-800,#1e40af);--color-primary-900:var(--mlz-primary-900,#1e3a8a);--color-primary-950:var(--mlz-primary-950,#172554);--color-semantic-info:var(--mlz-semantic-info,#006eff);--color-semantic-error-600:var(--mlz-semantic-error-600,#ef284c);--color-secondary-50:var(--mlz-secondary-50,#f8fafc);--color-secondary-100:var(--mlz-secondary-100,#f1f5f9);--color-secondary-200:var(--mlz-secondary-200,#e2e8f0);--color-secondary-300:var(--mlz-secondary-300,#cbd5e1);--color-secondary-400:var(--mlz-secondary-400,#94a3b8);--color-secondary-500:var(--mlz-secondary-500,#64748b);--color-secondary-600:var(--mlz-secondary-600,#475569);--color-secondary-700:var(--mlz-secondary-700,#334155);--color-secondary-800:var(--mlz-secondary-800,#1e293b);--color-secondary-900:var(--mlz-secondary-900,#0f172a);--color-secondary-950:var(--mlz-secondary-950,#020617);--spacing-mlz-xs:var(--mlz-spacing-xs,0.25rem);--spacing-mlz-sm:var(--mlz-spacing-sm,0.5rem);--spacing-mlz-md:var(--mlz-spacing-md,1rem);--spacing-mlz-lg:var(--mlz-spacing-lg,1.5rem);--spacing-mlz-xl:var(--mlz-spacing-xl,2rem);--spacing-mlz-2xl:var(--mlz-spacing-2xl,3rem);--radius-mlz-sm:var(--mlz-border-radius-sm,0.25rem);--radius-mlz-md:var(--mlz-border-radius-md,0.375rem);--radius-mlz-lg:var(--mlz-border-radius-lg,0.5rem);--radius-mlz-xl:var(--mlz-border-radius-xl,0.75rem);--text-mlz-xs:var(--mlz-font-size-xs,0.75rem);--text-mlz-sm:var(--mlz-font-size-sm,0.875rem);--text-mlz-base:var(--mlz-font-size-base,1rem);--text-mlz-lg:var(--mlz-font-size-lg,1.125rem);--text-mlz-xl:var(--mlz-font-size-xl,1.25rem);--font-geometria:\"Geometria\",sans-serif}@layer base{*,::backdrop,::file-selector-button,:after,:before{border-color:var(--color-gray-200,currentcolor)}}@utility mlz-btn-primary{@apply bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 text-white;background-color:var(--mlz-primary-600,#2563eb);&:hover{background-color:var(--mlz-primary-700,#1d4ed8)}}@utility mlz-btn-secondary{@apply bg-gray-600 hover:bg-gray-700 focus:ring-gray-500 text-white;background-color:var(--mlz-secondary-600,#475569);&:hover{background-color:var(--mlz-secondary-700,#334155)}}@layer utilities{:root{--mlz-primary-50:#eff6ff;--mlz-primary-100:#e5f0f9;--mlz-primary-200:#bfdbfe;--mlz-primary-300:#94c6e5;--mlz-primary-400:#5ba8d5;--mlz-primary-500:#3b82f6;--mlz-primary-600:#236999;--mlz-primary-700:#1d4ed8;--mlz-primary-800:#1e40af;--mlz-primary-900:#1e3a8a;--mlz-primary-950:#172554;--mlz-semantic-info:#006eff;--mlz-semantic-error-600:#ef284c;--mlz-secondary-50:#f8fafc;--mlz-secondary-100:#f1f5f9;--mlz-secondary-200:#e2e8f0;--mlz-secondary-300:#cbd5e1;--mlz-secondary-400:#94a3b8;--mlz-secondary-500:#64748b;--mlz-secondary-600:#475569;--mlz-secondary-700:#334155;--mlz-secondary-800:#1e293b;--mlz-secondary-900:#0f172a;--mlz-secondary-950:#020617;--mlz-spacing-xs:0.25rem;--mlz-spacing-sm:0.5rem;--mlz-spacing-md:1rem;--mlz-spacing-lg:1.5rem;--mlz-spacing-xl:2rem;--mlz-spacing-2xl:3rem;--mlz-border-radius-sm:0.25rem;--mlz-border-radius-md:0.375rem;--mlz-border-radius-lg:0.5rem;--mlz-border-radius-xl:0.75rem;--mlz-font-size-xs:0.75rem;--mlz-font-size-sm:0.875rem;--mlz-font-size-base:1rem;--mlz-font-size-lg:1.125rem;--mlz-font-size-xl:1.25rem;--mlz-input-border-color:#d1d5db;--mlz-input-label-color:#374151;--mlz-input-helper-color:#6b7280;--mlz-input-height-sm:2rem;--mlz-input-height-md:2.5rem;--mlz-input-height-lg:3rem;--mlz-input-padding-x-sm:0.75rem;--mlz-input-padding-y-sm:0.375rem;--mlz-input-padding-x-md:1rem;--mlz-input-padding-y-md:0.5rem;--mlz-input-padding-x-lg:1.25rem;--mlz-input-padding-y-lg:0.75rem;--mlz-input-font-size-sm:0.875rem;--mlz-input-font-size-md:1rem;--mlz-input-font-size-lg:1.125rem;--mlz-error-500:#ef4444;--mlz-error-600:#dc2626;--mlz-success-500:#22c55e;--mlz-success-600:#16a34a}}";
30
+ var css_248z = "/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-blue-50:oklch(97% 0.014 254.604);--color-blue-500:oklch(62.3% 0.214 259.815);--color-blue-600:oklch(54.6% 0.245 262.881);--color-blue-700:oklch(48.8% 0.243 264.376);--color-gray-200:oklch(92.8% 0.006 264.531);--color-gray-500:oklch(55.1% 0.027 264.364);--color-gray-600:oklch(44.6% 0.03 256.802);--color-gray-700:oklch(37.3% 0.034 259.733);--color-white:#fff;--spacing:0.25rem;--text-sm:0.875rem;--text-sm--line-height:1.42857;--text-base:1rem;--text-base--line-height:1.5;--text-lg:1.125rem;--text-lg--line-height:1.55556;--font-weight-medium:500;--font-weight-bold:700;--radius-md:0.375rem;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary-100:var(--mlz-primary-100,#dbeafe);--color-primary-300:var(--mlz-primary-300,#93c5fd);--color-primary-400:var(--mlz-primary-400,#5ba8d5);--color-primary-600:var(--mlz-primary-600,#236999);--color-semantic-error-600:var(--mlz-semantic-error-600,#ef284c);--font-geometria:\"Geometria\",sans-serif}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var(--default-mono-font-feature-settings,normal);font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.absolute{position:absolute}.relative{position:relative}.top-1\\/2{top:50%}.right-4{right:calc(var(--spacing)*4)}.container{width:100%;@media (width >= 40rem){max-width:40rem}@media (width >= 48rem){max-width:48rem}@media (width >= 64rem){max-width:64rem}@media (width >= 80rem){max-width:80rem}@media (width >= 96rem){max-width:96rem}}.mt-1{margin-top:calc(var(--spacing)*1)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.block{display:block}.contents{display:contents}.flex{display:flex}.inline{display:inline}.inline-flex{display:inline-flex}.w-80{width:calc(var(--spacing)*80)}.w-\\[250px\\]{width:250px}.w-full{width:100%}.-translate-y-1\\/2{--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.rounded{border-radius:.25rem}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-\\(--mlz-newcomponent-border\\,\\#e5e7eb\\){border-color:var(--mlz-newcomponent-border,#e5e7eb)}.border-blue-600{border-color:var(--color-blue-600)}.border-gray-200{border-color:var(--color-gray-200)}.border-primary-400{border-color:var(--color-primary-400)}.border-semantic-error-600{border-color:var(--color-semantic-error-600)}.mlz-btn-primary{background-color:var(--color-blue-600);background-color:var(--mlz-primary-600,#2563eb);color:var(--color-white);&:hover{@media (hover:hover){background-color:var(--color-blue-700)}}&:focus{--tw-ring-color:var(--color-blue-500)}&:hover{background-color:var(--mlz-primary-700,#1d4ed8)}}.mlz-btn-secondary{background-color:var(--color-gray-600);background-color:var(--mlz-secondary-600,#475569);color:var(--color-white);&:hover{@media (hover:hover){background-color:var(--color-gray-700)}}&:focus{--tw-ring-color:var(--color-gray-500)}&:hover{background-color:var(--mlz-secondary-700,#334155)}}.bg-\\(--mlz-newcomponent-bg\\,\\#ffffff\\){background-color:var(--mlz-newcomponent-bg,#fff)}.bg-transparent{background-color:transparent}.bg-white{background-color:var(--color-white)}.p-4{padding:calc(var(--spacing)*4)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.font-geometria{font-family:var(--font-geometria)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-\\(--mlz-newcomponent-text\\,\\#374151\\){color:var(--mlz-newcomponent-text,#374151)}.text-blue-600{color:var(--color-blue-600)}.text-gray-700{color:var(--color-gray-700)}.text-primary-600{color:var(--color-primary-600)}.text-semantic-error-600{color:var(--color-semantic-error-600)}.opacity-50{opacity:50%}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-colors{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.outline-solid{--tw-outline-style:solid;outline-style:solid}.placeholder\\:text-base{&::placeholder{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}.placeholder\\:text-primary-400{&::placeholder{color:var(--color-primary-400)}}.placeholder\\:text-semantic-error-600{&::placeholder{color:var(--color-semantic-error-600)}}.hover\\:bg-blue-50{&:hover{@media (hover:hover){background-color:var(--color-blue-50)}}}.focus\\:border-primary-600{&:focus{border-color:var(--color-primary-600)}}.focus\\:border-semantic-error-600{&:focus{border-color:var(--color-semantic-error-600)}}.focus\\:ring-2{&:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\\:ring-blue-500{&:focus{--tw-ring-color:var(--color-blue-500)}}.focus\\:ring-primary-600{&:focus{--tw-ring-color:var(--color-primary-600)}}.focus\\:ring-semantic-error-600{&:focus{--tw-ring-color:var(--color-semantic-error-600)}}.focus\\:ring-offset-2{&:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}}.focus\\:outline-hidden{&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline:2px solid transparent;outline-offset:2px}}}.focus\\:outline-none{&:focus{--tw-outline-style:none;outline-style:none}}.active\\:border-primary-600{&:active{border-color:var(--color-primary-600)}}.active\\:border-semantic-error-600{&:active{border-color:var(--color-semantic-error-600)}}.active\\:ring-2{&:active{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.disabled\\:cursor-not-allowed{&:disabled{cursor:not-allowed}}.disabled\\:bg-primary-100{&:disabled{background-color:var(--color-primary-100)}}.disabled\\:text-primary-300{&:disabled{color:var(--color-primary-300)}}.disabled\\:opacity-50{&:disabled{opacity:50%}}}@font-face{font-family:Geometria;font-style:normal;font-weight:300;src:url(fonts/Geometria-Light.woff2) format(\"woff2\")}@font-face{font-family:Geometria;font-style:normal;font-weight:400;src:url(fonts/Geometria-Regular.woff2) format(\"woff2\")}@font-face{font-family:Geometria;font-style:bold;font-weight:700;src:url(fonts/Geometria-Bold.woff2) format(\"woff2\")}body{font-family:Geometria,sans-serif}@layer base{*,::backdrop,::file-selector-button,:after,:before{border-color:var(--color-gray-200,currentcolor)}}@layer utilities{:root{--mlz-primary-50:#eff6ff;--mlz-primary-100:#e5f0f9;--mlz-primary-200:#bfdbfe;--mlz-primary-300:#94c6e5;--mlz-primary-400:#5ba8d5;--mlz-primary-500:#3b82f6;--mlz-primary-600:#236999;--mlz-primary-700:#1d4ed8;--mlz-primary-800:#1e40af;--mlz-primary-900:#1e3a8a;--mlz-primary-950:#172554;--mlz-semantic-info:#006eff;--mlz-semantic-error-600:#ef284c;--mlz-secondary-50:#f8fafc;--mlz-secondary-100:#f1f5f9;--mlz-secondary-200:#e2e8f0;--mlz-secondary-300:#cbd5e1;--mlz-secondary-400:#94a3b8;--mlz-secondary-500:#64748b;--mlz-secondary-600:#475569;--mlz-secondary-700:#334155;--mlz-secondary-800:#1e293b;--mlz-secondary-900:#0f172a;--mlz-secondary-950:#020617;--mlz-spacing-xs:0.25rem;--mlz-spacing-sm:0.5rem;--mlz-spacing-md:1rem;--mlz-spacing-lg:1.5rem;--mlz-spacing-xl:2rem;--mlz-spacing-2xl:3rem;--mlz-border-radius-sm:0.25rem;--mlz-border-radius-md:0.375rem;--mlz-border-radius-lg:0.5rem;--mlz-border-radius-xl:0.75rem;--mlz-font-size-xs:0.75rem;--mlz-font-size-sm:0.875rem;--mlz-font-size-base:1rem;--mlz-font-size-lg:1.125rem;--mlz-font-size-xl:1.25rem;--mlz-input-border-color:#d1d5db;--mlz-input-label-color:#374151;--mlz-input-helper-color:#6b7280;--mlz-input-height-sm:2rem;--mlz-input-height-md:2.5rem;--mlz-input-height-lg:3rem;--mlz-input-padding-x-sm:0.75rem;--mlz-input-padding-y-sm:0.375rem;--mlz-input-padding-x-md:1rem;--mlz-input-padding-y-md:0.5rem;--mlz-input-padding-x-lg:1.25rem;--mlz-input-padding-y-lg:0.75rem;--mlz-input-font-size-sm:0.875rem;--mlz-input-font-size-md:1rem;--mlz-input-font-size-lg:1.125rem;--mlz-error-500:#ef4444;--mlz-error-600:#dc2626;--mlz-success-500:#22c55e;--mlz-success-600:#16a34a}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-outline-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}";
31
31
  styleInject(css_248z,{"insertAt":"top"});
32
32
 
33
33
  var jsxRuntime = {exports: {}};
@@ -1422,92 +1422,31 @@ const Button = ({ children, variant = 'primary', size = 'md', disabled = false,
1422
1422
  return (jsxRuntimeExports.jsx("button", { type: type, className: classes, disabled: disabled, onClick: onClick, ...props, children: children }));
1423
1423
  };
1424
1424
 
1425
- /**
1426
- * Componente Input básico con diferentes variantes y tamaños
1427
- */
1428
- const Input = ({ variant = "default", size = "md", label, helperText, errorText, fullWidth = false, className = "", ...props }) => {
1429
- // Clases base del input
1430
- const baseClasses = [
1431
- "border rounded-md transition-colors duration-200 focus:outline-hidden focus:ring-2",
1432
- "bg-white dark:bg-gray-800",
1433
- "text-gray-900 dark:text-gray-100",
1434
- "placeholder-gray-500 dark:placeholder-gray-400",
1435
- ];
1436
- // Clases de tamaño
1437
- const sizeClasses = {
1438
- sm: [
1439
- "px-3 py-1.5 text-sm",
1440
- "h-8",
1441
- // CSS Variables con fallbacks
1442
- `h-(--mlz-input-height-sm,2rem)`,
1443
- `px-(--mlz-input-padding-x-sm,0.75rem)`,
1444
- `py-(--mlz-input-padding-y-sm,0.375rem)`,
1445
- `text-(--mlz-input-font-size-sm,0.875rem)`,
1446
- ],
1447
- md: [
1448
- "px-4 py-2 text-base",
1449
- "h-10",
1450
- // CSS Variables con fallbacks
1451
- `h-(--mlz-input-height-md,2.5rem)`,
1452
- `px-(--mlz-input-padding-x-md,1rem)`,
1453
- `py-(--mlz-input-padding-y-md,0.5rem)`,
1454
- `text-(--mlz-input-font-size-md,1rem)`,
1455
- ],
1456
- lg: [
1457
- "px-5 py-3 text-lg",
1458
- "h-12",
1459
- // CSS Variables con fallbacks
1460
- `h-(--mlz-input-height-lg,3rem)`,
1461
- `px-(--mlz-input-padding-x-lg,1.25rem)`,
1462
- `py-(--mlz-input-padding-y-lg,0.75rem)`,
1463
- `text-(--mlz-input-font-size-lg,1.125rem)`,
1464
- ],
1425
+ const CheckIcon = (props) => (jsxRuntimeExports.jsx("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { d: "M4 9.4L0 5.4L1.4 4L4 6.6L10.6 0L12 1.4L4 9.4Z", fill: "#2ABB5B" }) }));
1426
+
1427
+ const inputClasses = (hasError, fullWidth) => {
1428
+ const colorClass = hasError ? "semantic-error-600" : "primary-600";
1429
+ const borderColorClass = hasError ? "semantic-error-600" : "primary-400";
1430
+ return {
1431
+ containerStyle: "flex flex-col relative font-geometria" + (fullWidth ? " w-full" : ""),
1432
+ labelStyle: `block text-base font-bold text-${colorClass}`,
1433
+ inputStyle: [
1434
+ "disabled:bg-primary-100 disabled:cursor-not-allowed disabled:text-primary-300",
1435
+ "block w-full rounded border px-4 py-2",
1436
+ "placeholder:text-base",
1437
+ "focus:outline-none focus:ring-2",
1438
+ "active:ring-2",
1439
+ `border-${borderColorClass}`,
1440
+ `placeholder:text-${borderColorClass}`,
1441
+ `focus:border-${colorClass} focus:ring-${colorClass}`,
1442
+ `active:border-${colorClass}`,
1443
+ ].join(" "),
1444
+ helperTextStyle: `mt-1 text-base text-${colorClass}`,
1465
1445
  };
1466
- // Clases de variante
1467
- const variantClasses = {
1468
- default: [
1469
- "border-gray-300 dark:border-gray-600",
1470
- "focus:border-blue-500 focus:ring-blue-500/20",
1471
- // CSS Variables con fallbacks
1472
- `border-(--mlz-input-border-color,rgb(209,213,219))`,
1473
- `focus:border-(--mlz-primary-500,rgb(59,130,246))`,
1474
- `focus:ring-(--mlz-primary-500,rgb(59,130,246))`,
1475
- ],
1476
- error: [
1477
- "border-red-500 dark:border-red-400",
1478
- "focus:border-red-500 focus:ring-red-500/20",
1479
- // CSS Variables con fallbacks
1480
- `border-(--mlz-error-500,rgb(239,68,68))`,
1481
- `focus:border-(--mlz-error-500,rgb(239,68,68))`,
1482
- `focus:ring-(--mlz-error-500,rgb(239,68,68))`,
1483
- ],
1484
- success: [
1485
- "border-green-500 dark:border-green-400",
1486
- "focus:border-green-500 focus:ring-green-500/20",
1487
- // CSS Variables con fallbacks
1488
- `border-(--mlz-success-500,rgb(34,197,94))`,
1489
- `focus:border-(--mlz-success-500,rgb(34,197,94))`,
1490
- `focus:ring-(--mlz-success-500,rgb(34,197,94))`,
1491
- ],
1492
- };
1493
- // Clases de ancho
1494
- const widthClasses = fullWidth ? "w-full" : "w-auto";
1495
- // Combinar todas las clases
1496
- const inputClasses = [
1497
- ...baseClasses,
1498
- ...sizeClasses[size],
1499
- ...variantClasses[variant],
1500
- widthClasses,
1501
- className,
1502
- ].join(" ");
1503
- // Determinar el texto de ayuda efectivo
1504
- const effectiveHelperText = errorText || helperText;
1505
- const effectiveVariant = errorText ? "error" : variant;
1506
- return (jsxRuntimeExports.jsxs("div", { className: `flex flex-col ${fullWidth ? "w-full" : "w-auto"}`, children: [label && (jsxRuntimeExports.jsx("label", { htmlFor: props.id, className: `mb-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 text-(--mlz-input-label-color,rgb(55,65,81))`, children: label })), jsxRuntimeExports.jsx("input", { ...props, className: inputClasses }), effectiveHelperText && (jsxRuntimeExports.jsx("p", { className: `mt-1.5 text-sm ${effectiveVariant === "error"
1507
- ? "text-red-600 dark:text-red-400 text-(--mlz-error-600,rgb(220,38,38))"
1508
- : effectiveVariant === "success"
1509
- ? "text-green-600 dark:text-green-400 text-(--mlz-success-600,rgb(22,163,74))"
1510
- : "text-gray-500 dark:text-gray-400 text-(--mlz-input-helper-color,rgb(107,114,128))"}`, children: effectiveHelperText }))] }));
1446
+ };
1447
+ const Input = ({ labelProps, helperTextProps, containerProps, errorText, helperText, hasError = false, disabled, label, placeholder, fullWidth, checkedIcon, ...props }) => {
1448
+ const classes = inputClasses(hasError, fullWidth);
1449
+ return (jsxRuntimeExports.jsxs("div", { className: classes.containerStyle, children: [jsxRuntimeExports.jsx("label", { ...labelProps, className: classes.labelStyle, children: label }), jsxRuntimeExports.jsx("input", { ...props, disabled: disabled, placeholder: placeholder, className: classes.inputStyle }), checkedIcon && (jsxRuntimeExports.jsx("div", { className: "absolute right-4 top-1/2 -translate-y-1/2", children: jsxRuntimeExports.jsx(CheckIcon, {}) })), jsxRuntimeExports.jsx("p", { ...helperTextProps, className: classes.helperTextStyle, children: errorText ? errorText : helperText })] }));
1511
1450
  };
1512
1451
 
1513
1452
  function UserCard({ name, email, changeUser, editUser }) {