@tiendanube/nube-sdk-ui 0.4.0 → 0.5.0
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.
- package/dist/index.cjs +32 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +35 -19
- package/dist/index.d.ts +35 -19
- package/dist/index.js +27 -7
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -23,11 +23,15 @@ __export(index_exports, {
|
|
|
23
23
|
box: () => box,
|
|
24
24
|
button: () => button,
|
|
25
25
|
check: () => check,
|
|
26
|
-
|
|
26
|
+
checkbox: () => checkbox,
|
|
27
|
+
column: () => column,
|
|
27
28
|
field: () => field,
|
|
28
29
|
fragment: () => fragment,
|
|
30
|
+
image: () => image,
|
|
29
31
|
img: () => img,
|
|
30
32
|
row: () => row,
|
|
33
|
+
text: () => text,
|
|
34
|
+
textarea: () => textarea,
|
|
31
35
|
txt: () => txt,
|
|
32
36
|
txtarea: () => txtarea
|
|
33
37
|
});
|
|
@@ -39,8 +43,8 @@ var box = (props) => ({
|
|
|
39
43
|
...props
|
|
40
44
|
});
|
|
41
45
|
|
|
42
|
-
// src/components/
|
|
43
|
-
var
|
|
46
|
+
// src/components/column.ts
|
|
47
|
+
var column = (props) => ({
|
|
44
48
|
type: "col",
|
|
45
49
|
...props
|
|
46
50
|
});
|
|
@@ -63,29 +67,45 @@ var fragment = (props) => ({
|
|
|
63
67
|
...props
|
|
64
68
|
});
|
|
65
69
|
|
|
66
|
-
// src/components/
|
|
70
|
+
// src/components/image.ts
|
|
67
71
|
var img = (props) => ({
|
|
68
72
|
type: "img",
|
|
69
73
|
...props
|
|
70
74
|
});
|
|
75
|
+
var image = (props) => ({
|
|
76
|
+
type: "img",
|
|
77
|
+
...props
|
|
78
|
+
});
|
|
71
79
|
|
|
72
|
-
// src/components/
|
|
80
|
+
// src/components/text.ts
|
|
81
|
+
var text = (props) => ({
|
|
82
|
+
type: "txt",
|
|
83
|
+
...props
|
|
84
|
+
});
|
|
73
85
|
var txt = (props) => ({
|
|
74
86
|
type: "txt",
|
|
75
87
|
...props
|
|
76
88
|
});
|
|
77
89
|
|
|
78
|
-
// src/components/
|
|
90
|
+
// src/components/checkbox.ts
|
|
79
91
|
var check = (props) => ({
|
|
80
92
|
type: "check",
|
|
81
93
|
...props
|
|
82
94
|
});
|
|
95
|
+
var checkbox = (props) => ({
|
|
96
|
+
type: "check",
|
|
97
|
+
...props
|
|
98
|
+
});
|
|
83
99
|
|
|
84
|
-
// src/components/
|
|
100
|
+
// src/components/textarea.ts
|
|
85
101
|
var txtarea = (props) => ({
|
|
86
102
|
type: "txtarea",
|
|
87
103
|
...props
|
|
88
104
|
});
|
|
105
|
+
var textarea = (props) => ({
|
|
106
|
+
type: "txtarea",
|
|
107
|
+
...props
|
|
108
|
+
});
|
|
89
109
|
|
|
90
110
|
// src/components/button.ts
|
|
91
111
|
var button = (props) => ({
|
|
@@ -97,11 +117,15 @@ var button = (props) => ({
|
|
|
97
117
|
box,
|
|
98
118
|
button,
|
|
99
119
|
check,
|
|
100
|
-
|
|
120
|
+
checkbox,
|
|
121
|
+
column,
|
|
101
122
|
field,
|
|
102
123
|
fragment,
|
|
124
|
+
image,
|
|
103
125
|
img,
|
|
104
126
|
row,
|
|
127
|
+
text,
|
|
128
|
+
textarea,
|
|
105
129
|
txt,
|
|
106
130
|
txtarea
|
|
107
131
|
});
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/box.ts","../src/components/
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/box.ts","../src/components/column.ts","../src/components/row.ts","../src/components/field.ts","../src/components/fragment.ts","../src/components/image.ts","../src/components/text.ts","../src/components/checkbox.ts","../src/components/textarea.ts","../src/components/button.ts"],"sourcesContent":["export * from \"./components/box\";\nexport * from \"./components/column\";\nexport * from \"./components/row\";\nexport * from \"./components/field\";\nexport * from \"./components/fragment\";\nexport * from \"./components/image\";\nexport * from \"./components/text\";\nexport * from \"./components/checkbox\";\nexport * from \"./components/textarea\";\nexport * from \"./components/button\";\n","import type {\n\tNubeComponentBox,\n\tNubeComponentBoxProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `box` component.\n *\n * A `box` is a flexible container that can be used for layout purposes.\n * It supports properties like width, height, padding, margin, and flex-based alignment.\n *\n * @param props - The properties for configuring the box component.\n * @returns A `NubeComponentBox` object representing the box component.\n */\nexport const box = (props: NubeComponentBoxProps): NubeComponentBox => ({\n\ttype: \"box\",\n\t...props,\n});\n","import type {\n\tNubeComponentColumn,\n\tNubeComponentColumnProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `column` component.\n *\n * A `column` is a flexible column container that can be used for structuring layouts.\n * It inherits most properties from `box`, except for the `direction` property.\n *\n * @param props - The properties for configuring the column component.\n * @returns A `NubeComponentColumn` object representing the column component.\n */\nexport const column = (\n\tprops: NubeComponentColumnProps,\n): NubeComponentColumn => ({\n\ttype: \"col\",\n\t...props,\n});\n","import type {\n\tNubeComponentRow,\n\tNubeComponentRowProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `row` component.\n *\n * A `row` is a flexible container used for structuring layouts in a horizontal direction.\n * It inherits most properties from `box`, except for the `direction` property.\n *\n * @param props - The properties for configuring the row component.\n * @returns A `NubeComponentRow` object representing the row component.\n */\nexport const row = (props: NubeComponentRowProps): NubeComponentRow => ({\n\ttype: \"row\",\n\t...props,\n});\n","import type {\n\tNubeComponentField,\n\tNubeComponentFieldProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `field` component.\n *\n * A `field` represents an input element in a form, such as text fields, dropdowns, or checkboxes.\n * It supports properties like `name`, `label`, and event handlers (`onChange`, `onBlur`, `onFocus`).\n *\n * @param props - The properties for configuring the field component.\n * @returns A `NubeComponentField` object representing the form field.\n */\nexport const field = (props: NubeComponentFieldProps): NubeComponentField => ({\n\ttype: \"field\",\n\t...props,\n});\n","import type {\n\tNubeComponentFragment,\n\tNubeComponentFragmentProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `fragment` component.\n *\n * A `fragment` is a logical grouping element that allows multiple children\n * to be wrapped without introducing an additional DOM node.\n *\n * @param props - The properties for configuring the fragment component.\n * @returns A `NubeComponentFragment` object representing the fragment.\n */\nexport const fragment = (\n\tprops: NubeComponentFragmentProps,\n): NubeComponentFragment => ({\n\ttype: \"fragment\",\n\t...props,\n});\n","import type {\n\tNubeComponentImage,\n\tNubeComponentImageProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * @deprecated This component has been deprecated since version `0.8.0`. Please use the `image` component instead.\n */\nexport const img = (props: NubeComponentImageProps): NubeComponentImage => ({\n\ttype: \"img\",\n\t...props,\n});\n\n/**\n * Creates an `image` (image) component.\n *\n * The `image` component is used to display images. It supports properties such as\n * `src`, `alt`, `width`, `height`, and responsive `sources` for different screen sizes.\n *\n * @param props - The properties for configuring the image component.\n * @returns A `NubeComponentImage` object representing the image component.\n */\nexport const image = (props: NubeComponentImageProps): NubeComponentImage => ({\n\ttype: \"img\",\n\t...props,\n});\n","import type {\n\tNubeComponentText,\n\tNubeComponentTextProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `txt` (text) component.\n *\n * The `txt` component is used to render text with optional styling.\n * It supports properties such as `color`, `background`, `heading` levels (h1-h6),\n * text formatting `modifiers` (bold, italic, etc.), and inline display.\n *\n * @param props - The properties for configuring the text component.\n * @returns A `NubeComponentTxt` object representing the text component.\n */\nexport const text = (props: NubeComponentTextProps): NubeComponentText => ({\n\ttype: \"txt\",\n\t...props,\n});\n\n/**\n * @deprecated This component has been deprecated since version `0.8.0`. Please use the `text` component instead.\n */\nexport const txt = (props: NubeComponentTextProps): NubeComponentText => ({\n\ttype: \"txt\",\n\t...props,\n});\n","import type {\n\tNubeComponentCheckbox,\n\tNubeComponentCheckboxProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * @deprecated This component has been deprecated since version `0.8.0`. Please use the `checkbox` component instead.\n */\nexport const check = (\n\tprops: NubeComponentCheckboxProps,\n): NubeComponentCheckbox => ({\n\ttype: \"check\",\n\t...props,\n});\n\n/**\n * Creates a `checkbox` component.\n *\n * A `checkbox` represents a selectable field that can be toggled between checked and unchecked states.\n * It is typically used to allow users to select one or more options.\n * Supports properties such as `name`, `label`, `checked`, and event handlers (`onChange`).\n *\n * @param props - The properties for configuring the checkbox component.\n * @returns A `NubeComponentCheckbox` object representing the checkbox.\n */\nexport const checkbox = (\n\tprops: NubeComponentCheckboxProps,\n): NubeComponentCheckbox => ({\n\ttype: \"check\",\n\t...props,\n});\n","import type {\n\tNubeComponentTextarea,\n\tNubeComponentTextareaProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * @deprecated This component has been deprecated since version `0.8.0`. Please use the `textarea` component instead.\n */\nexport const txtarea = (\n\tprops: NubeComponentTextareaProps,\n): NubeComponentTextarea => ({\n\ttype: \"txtarea\",\n\t...props,\n});\n\n/**\n * Creates a `textarea` component.\n *\n * A `textarea` represents a multi-line text input field that allows users to enter longer texts.\n * It supports properties such as `name`, `value`, and event handlers (`onChange`, `onBlur`, `onFocus`).\n *\n * @param props - The properties for configuring the textarea component.\n * @returns A `NubeComponentTextarea` object representing the textarea component.\n */\nexport const textarea = (\n\tprops: NubeComponentTextareaProps,\n): NubeComponentTextarea => ({\n\ttype: \"txtarea\",\n\t...props,\n});\n","import type {\n\tNubeComponentButton,\n\tNubeComponentButtonProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `button` component.\n *\n * A `button` represents a clickable element typically used to trigger an action or submit a form.\n * It supports properties such as `text`, `onClick`, and style configurations.\n *\n * @param props - The properties for configuring the button component.\n * @returns A `NubeComponentButton` object representing the button component.\n */\nexport const button = (\n\tprops: NubeComponentButtonProps,\n): NubeComponentButton => ({\n\ttype: \"button\",\n\t...props,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACcO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,IAAM,SAAS,CACrB,WAC0B;AAAA,EAC1B,MAAM;AAAA,EACN,GAAG;AACJ;;;ACLO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,IAAM,QAAQ,CAAC,WAAwD;AAAA,EAC7E,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,IAAM,WAAW,CACvB,WAC4B;AAAA,EAC5B,MAAM;AAAA,EACN,GAAG;AACJ;;;ACXO,IAAM,MAAM,CAAC,WAAwD;AAAA,EAC3E,MAAM;AAAA,EACN,GAAG;AACJ;AAWO,IAAM,QAAQ,CAAC,WAAwD;AAAA,EAC7E,MAAM;AAAA,EACN,GAAG;AACJ;;;ACVO,IAAM,OAAO,CAAC,WAAsD;AAAA,EAC1E,MAAM;AAAA,EACN,GAAG;AACJ;AAKO,IAAM,MAAM,CAAC,WAAsD;AAAA,EACzE,MAAM;AAAA,EACN,GAAG;AACJ;;;AClBO,IAAM,QAAQ,CACpB,WAC4B;AAAA,EAC5B,MAAM;AAAA,EACN,GAAG;AACJ;AAYO,IAAM,WAAW,CACvB,WAC4B;AAAA,EAC5B,MAAM;AAAA,EACN,GAAG;AACJ;;;ACtBO,IAAM,UAAU,CACtB,WAC4B;AAAA,EAC5B,MAAM;AAAA,EACN,GAAG;AACJ;AAWO,IAAM,WAAW,CACvB,WAC4B;AAAA,EAC5B,MAAM;AAAA,EACN,GAAG;AACJ;;;ACfO,IAAM,SAAS,CACrB,WAC0B;AAAA,EAC1B,MAAM;AAAA,EACN,GAAG;AACJ;","names":[]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { NubeComponentBoxProps, NubeComponentBox,
|
|
1
|
+
import { NubeComponentBoxProps, NubeComponentBox, NubeComponentColumnProps, NubeComponentColumn, NubeComponentRowProps, NubeComponentRow, NubeComponentFieldProps, NubeComponentField, NubeComponentFragmentProps, NubeComponentFragment, NubeComponentImageProps, NubeComponentImage, NubeComponentTextProps, NubeComponentText, NubeComponentCheckboxProps, NubeComponentCheckbox, NubeComponentTextareaProps, NubeComponentTextarea, NubeComponentButtonProps, NubeComponentButton } from '@tiendanube/nube-sdk-types';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Creates a `box` component.
|
|
@@ -12,15 +12,15 @@ import { NubeComponentBoxProps, NubeComponentBox, NubeComponentColProps, NubeCom
|
|
|
12
12
|
declare const box: (props: NubeComponentBoxProps) => NubeComponentBox;
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
|
-
* Creates a `
|
|
15
|
+
* Creates a `column` component.
|
|
16
16
|
*
|
|
17
|
-
* A `
|
|
17
|
+
* A `column` is a flexible column container that can be used for structuring layouts.
|
|
18
18
|
* It inherits most properties from `box`, except for the `direction` property.
|
|
19
19
|
*
|
|
20
20
|
* @param props - The properties for configuring the column component.
|
|
21
|
-
* @returns A `
|
|
21
|
+
* @returns A `NubeComponentColumn` object representing the column component.
|
|
22
22
|
*/
|
|
23
|
-
declare const
|
|
23
|
+
declare const column: (props: NubeComponentColumnProps) => NubeComponentColumn;
|
|
24
24
|
|
|
25
25
|
/**
|
|
26
26
|
* Creates a `row` component.
|
|
@@ -56,15 +56,19 @@ declare const field: (props: NubeComponentFieldProps) => NubeComponentField;
|
|
|
56
56
|
declare const fragment: (props: NubeComponentFragmentProps) => NubeComponentFragment;
|
|
57
57
|
|
|
58
58
|
/**
|
|
59
|
-
*
|
|
59
|
+
* @deprecated This component has been deprecated since version `0.8.0`. Please use the `image` component instead.
|
|
60
|
+
*/
|
|
61
|
+
declare const img: (props: NubeComponentImageProps) => NubeComponentImage;
|
|
62
|
+
/**
|
|
63
|
+
* Creates an `image` (image) component.
|
|
60
64
|
*
|
|
61
|
-
* The `
|
|
65
|
+
* The `image` component is used to display images. It supports properties such as
|
|
62
66
|
* `src`, `alt`, `width`, `height`, and responsive `sources` for different screen sizes.
|
|
63
67
|
*
|
|
64
68
|
* @param props - The properties for configuring the image component.
|
|
65
|
-
* @returns A `
|
|
69
|
+
* @returns A `NubeComponentImage` object representing the image component.
|
|
66
70
|
*/
|
|
67
|
-
declare const
|
|
71
|
+
declare const image: (props: NubeComponentImageProps) => NubeComponentImage;
|
|
68
72
|
|
|
69
73
|
/**
|
|
70
74
|
* Creates a `txt` (text) component.
|
|
@@ -76,30 +80,42 @@ declare const img: (props: NubeComponentImgProps) => NubeComponentImg;
|
|
|
76
80
|
* @param props - The properties for configuring the text component.
|
|
77
81
|
* @returns A `NubeComponentTxt` object representing the text component.
|
|
78
82
|
*/
|
|
79
|
-
declare const
|
|
83
|
+
declare const text: (props: NubeComponentTextProps) => NubeComponentText;
|
|
84
|
+
/**
|
|
85
|
+
* @deprecated This component has been deprecated since version `0.8.0`. Please use the `text` component instead.
|
|
86
|
+
*/
|
|
87
|
+
declare const txt: (props: NubeComponentTextProps) => NubeComponentText;
|
|
80
88
|
|
|
81
89
|
/**
|
|
82
|
-
*
|
|
90
|
+
* @deprecated This component has been deprecated since version `0.8.0`. Please use the `checkbox` component instead.
|
|
91
|
+
*/
|
|
92
|
+
declare const check: (props: NubeComponentCheckboxProps) => NubeComponentCheckbox;
|
|
93
|
+
/**
|
|
94
|
+
* Creates a `checkbox` component.
|
|
83
95
|
*
|
|
84
|
-
* A `
|
|
96
|
+
* A `checkbox` represents a selectable field that can be toggled between checked and unchecked states.
|
|
85
97
|
* It is typically used to allow users to select one or more options.
|
|
86
98
|
* Supports properties such as `name`, `label`, `checked`, and event handlers (`onChange`).
|
|
87
99
|
*
|
|
88
100
|
* @param props - The properties for configuring the checkbox component.
|
|
89
|
-
* @returns A `
|
|
101
|
+
* @returns A `NubeComponentCheckbox` object representing the checkbox.
|
|
90
102
|
*/
|
|
91
|
-
declare const
|
|
103
|
+
declare const checkbox: (props: NubeComponentCheckboxProps) => NubeComponentCheckbox;
|
|
92
104
|
|
|
93
105
|
/**
|
|
94
|
-
*
|
|
106
|
+
* @deprecated This component has been deprecated since version `0.8.0`. Please use the `textarea` component instead.
|
|
107
|
+
*/
|
|
108
|
+
declare const txtarea: (props: NubeComponentTextareaProps) => NubeComponentTextarea;
|
|
109
|
+
/**
|
|
110
|
+
* Creates a `textarea` component.
|
|
95
111
|
*
|
|
96
|
-
* A `
|
|
112
|
+
* A `textarea` represents a multi-line text input field that allows users to enter longer texts.
|
|
97
113
|
* It supports properties such as `name`, `value`, and event handlers (`onChange`, `onBlur`, `onFocus`).
|
|
98
114
|
*
|
|
99
115
|
* @param props - The properties for configuring the textarea component.
|
|
100
|
-
* @returns A `
|
|
116
|
+
* @returns A `NubeComponentTextarea` object representing the textarea component.
|
|
101
117
|
*/
|
|
102
|
-
declare const
|
|
118
|
+
declare const textarea: (props: NubeComponentTextareaProps) => NubeComponentTextarea;
|
|
103
119
|
|
|
104
120
|
/**
|
|
105
121
|
* Creates a `button` component.
|
|
@@ -112,4 +128,4 @@ declare const txtarea: (props: NubeComponentTxtAreaProps) => NubeComponentTxtAre
|
|
|
112
128
|
*/
|
|
113
129
|
declare const button: (props: NubeComponentButtonProps) => NubeComponentButton;
|
|
114
130
|
|
|
115
|
-
export { box, button, check,
|
|
131
|
+
export { box, button, check, checkbox, column, field, fragment, image, img, row, text, textarea, txt, txtarea };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { NubeComponentBoxProps, NubeComponentBox,
|
|
1
|
+
import { NubeComponentBoxProps, NubeComponentBox, NubeComponentColumnProps, NubeComponentColumn, NubeComponentRowProps, NubeComponentRow, NubeComponentFieldProps, NubeComponentField, NubeComponentFragmentProps, NubeComponentFragment, NubeComponentImageProps, NubeComponentImage, NubeComponentTextProps, NubeComponentText, NubeComponentCheckboxProps, NubeComponentCheckbox, NubeComponentTextareaProps, NubeComponentTextarea, NubeComponentButtonProps, NubeComponentButton } from '@tiendanube/nube-sdk-types';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Creates a `box` component.
|
|
@@ -12,15 +12,15 @@ import { NubeComponentBoxProps, NubeComponentBox, NubeComponentColProps, NubeCom
|
|
|
12
12
|
declare const box: (props: NubeComponentBoxProps) => NubeComponentBox;
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
|
-
* Creates a `
|
|
15
|
+
* Creates a `column` component.
|
|
16
16
|
*
|
|
17
|
-
* A `
|
|
17
|
+
* A `column` is a flexible column container that can be used for structuring layouts.
|
|
18
18
|
* It inherits most properties from `box`, except for the `direction` property.
|
|
19
19
|
*
|
|
20
20
|
* @param props - The properties for configuring the column component.
|
|
21
|
-
* @returns A `
|
|
21
|
+
* @returns A `NubeComponentColumn` object representing the column component.
|
|
22
22
|
*/
|
|
23
|
-
declare const
|
|
23
|
+
declare const column: (props: NubeComponentColumnProps) => NubeComponentColumn;
|
|
24
24
|
|
|
25
25
|
/**
|
|
26
26
|
* Creates a `row` component.
|
|
@@ -56,15 +56,19 @@ declare const field: (props: NubeComponentFieldProps) => NubeComponentField;
|
|
|
56
56
|
declare const fragment: (props: NubeComponentFragmentProps) => NubeComponentFragment;
|
|
57
57
|
|
|
58
58
|
/**
|
|
59
|
-
*
|
|
59
|
+
* @deprecated This component has been deprecated since version `0.8.0`. Please use the `image` component instead.
|
|
60
|
+
*/
|
|
61
|
+
declare const img: (props: NubeComponentImageProps) => NubeComponentImage;
|
|
62
|
+
/**
|
|
63
|
+
* Creates an `image` (image) component.
|
|
60
64
|
*
|
|
61
|
-
* The `
|
|
65
|
+
* The `image` component is used to display images. It supports properties such as
|
|
62
66
|
* `src`, `alt`, `width`, `height`, and responsive `sources` for different screen sizes.
|
|
63
67
|
*
|
|
64
68
|
* @param props - The properties for configuring the image component.
|
|
65
|
-
* @returns A `
|
|
69
|
+
* @returns A `NubeComponentImage` object representing the image component.
|
|
66
70
|
*/
|
|
67
|
-
declare const
|
|
71
|
+
declare const image: (props: NubeComponentImageProps) => NubeComponentImage;
|
|
68
72
|
|
|
69
73
|
/**
|
|
70
74
|
* Creates a `txt` (text) component.
|
|
@@ -76,30 +80,42 @@ declare const img: (props: NubeComponentImgProps) => NubeComponentImg;
|
|
|
76
80
|
* @param props - The properties for configuring the text component.
|
|
77
81
|
* @returns A `NubeComponentTxt` object representing the text component.
|
|
78
82
|
*/
|
|
79
|
-
declare const
|
|
83
|
+
declare const text: (props: NubeComponentTextProps) => NubeComponentText;
|
|
84
|
+
/**
|
|
85
|
+
* @deprecated This component has been deprecated since version `0.8.0`. Please use the `text` component instead.
|
|
86
|
+
*/
|
|
87
|
+
declare const txt: (props: NubeComponentTextProps) => NubeComponentText;
|
|
80
88
|
|
|
81
89
|
/**
|
|
82
|
-
*
|
|
90
|
+
* @deprecated This component has been deprecated since version `0.8.0`. Please use the `checkbox` component instead.
|
|
91
|
+
*/
|
|
92
|
+
declare const check: (props: NubeComponentCheckboxProps) => NubeComponentCheckbox;
|
|
93
|
+
/**
|
|
94
|
+
* Creates a `checkbox` component.
|
|
83
95
|
*
|
|
84
|
-
* A `
|
|
96
|
+
* A `checkbox` represents a selectable field that can be toggled between checked and unchecked states.
|
|
85
97
|
* It is typically used to allow users to select one or more options.
|
|
86
98
|
* Supports properties such as `name`, `label`, `checked`, and event handlers (`onChange`).
|
|
87
99
|
*
|
|
88
100
|
* @param props - The properties for configuring the checkbox component.
|
|
89
|
-
* @returns A `
|
|
101
|
+
* @returns A `NubeComponentCheckbox` object representing the checkbox.
|
|
90
102
|
*/
|
|
91
|
-
declare const
|
|
103
|
+
declare const checkbox: (props: NubeComponentCheckboxProps) => NubeComponentCheckbox;
|
|
92
104
|
|
|
93
105
|
/**
|
|
94
|
-
*
|
|
106
|
+
* @deprecated This component has been deprecated since version `0.8.0`. Please use the `textarea` component instead.
|
|
107
|
+
*/
|
|
108
|
+
declare const txtarea: (props: NubeComponentTextareaProps) => NubeComponentTextarea;
|
|
109
|
+
/**
|
|
110
|
+
* Creates a `textarea` component.
|
|
95
111
|
*
|
|
96
|
-
* A `
|
|
112
|
+
* A `textarea` represents a multi-line text input field that allows users to enter longer texts.
|
|
97
113
|
* It supports properties such as `name`, `value`, and event handlers (`onChange`, `onBlur`, `onFocus`).
|
|
98
114
|
*
|
|
99
115
|
* @param props - The properties for configuring the textarea component.
|
|
100
|
-
* @returns A `
|
|
116
|
+
* @returns A `NubeComponentTextarea` object representing the textarea component.
|
|
101
117
|
*/
|
|
102
|
-
declare const
|
|
118
|
+
declare const textarea: (props: NubeComponentTextareaProps) => NubeComponentTextarea;
|
|
103
119
|
|
|
104
120
|
/**
|
|
105
121
|
* Creates a `button` component.
|
|
@@ -112,4 +128,4 @@ declare const txtarea: (props: NubeComponentTxtAreaProps) => NubeComponentTxtAre
|
|
|
112
128
|
*/
|
|
113
129
|
declare const button: (props: NubeComponentButtonProps) => NubeComponentButton;
|
|
114
130
|
|
|
115
|
-
export { box, button, check,
|
|
131
|
+
export { box, button, check, checkbox, column, field, fragment, image, img, row, text, textarea, txt, txtarea };
|
package/dist/index.js
CHANGED
|
@@ -4,8 +4,8 @@ var box = (props) => ({
|
|
|
4
4
|
...props
|
|
5
5
|
});
|
|
6
6
|
|
|
7
|
-
// src/components/
|
|
8
|
-
var
|
|
7
|
+
// src/components/column.ts
|
|
8
|
+
var column = (props) => ({
|
|
9
9
|
type: "col",
|
|
10
10
|
...props
|
|
11
11
|
});
|
|
@@ -28,29 +28,45 @@ var fragment = (props) => ({
|
|
|
28
28
|
...props
|
|
29
29
|
});
|
|
30
30
|
|
|
31
|
-
// src/components/
|
|
31
|
+
// src/components/image.ts
|
|
32
32
|
var img = (props) => ({
|
|
33
33
|
type: "img",
|
|
34
34
|
...props
|
|
35
35
|
});
|
|
36
|
+
var image = (props) => ({
|
|
37
|
+
type: "img",
|
|
38
|
+
...props
|
|
39
|
+
});
|
|
36
40
|
|
|
37
|
-
// src/components/
|
|
41
|
+
// src/components/text.ts
|
|
42
|
+
var text = (props) => ({
|
|
43
|
+
type: "txt",
|
|
44
|
+
...props
|
|
45
|
+
});
|
|
38
46
|
var txt = (props) => ({
|
|
39
47
|
type: "txt",
|
|
40
48
|
...props
|
|
41
49
|
});
|
|
42
50
|
|
|
43
|
-
// src/components/
|
|
51
|
+
// src/components/checkbox.ts
|
|
44
52
|
var check = (props) => ({
|
|
45
53
|
type: "check",
|
|
46
54
|
...props
|
|
47
55
|
});
|
|
56
|
+
var checkbox = (props) => ({
|
|
57
|
+
type: "check",
|
|
58
|
+
...props
|
|
59
|
+
});
|
|
48
60
|
|
|
49
|
-
// src/components/
|
|
61
|
+
// src/components/textarea.ts
|
|
50
62
|
var txtarea = (props) => ({
|
|
51
63
|
type: "txtarea",
|
|
52
64
|
...props
|
|
53
65
|
});
|
|
66
|
+
var textarea = (props) => ({
|
|
67
|
+
type: "txtarea",
|
|
68
|
+
...props
|
|
69
|
+
});
|
|
54
70
|
|
|
55
71
|
// src/components/button.ts
|
|
56
72
|
var button = (props) => ({
|
|
@@ -61,11 +77,15 @@ export {
|
|
|
61
77
|
box,
|
|
62
78
|
button,
|
|
63
79
|
check,
|
|
64
|
-
|
|
80
|
+
checkbox,
|
|
81
|
+
column,
|
|
65
82
|
field,
|
|
66
83
|
fragment,
|
|
84
|
+
image,
|
|
67
85
|
img,
|
|
68
86
|
row,
|
|
87
|
+
text,
|
|
88
|
+
textarea,
|
|
69
89
|
txt,
|
|
70
90
|
txtarea
|
|
71
91
|
};
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/box.ts","../src/components/
|
|
1
|
+
{"version":3,"sources":["../src/components/box.ts","../src/components/column.ts","../src/components/row.ts","../src/components/field.ts","../src/components/fragment.ts","../src/components/image.ts","../src/components/text.ts","../src/components/checkbox.ts","../src/components/textarea.ts","../src/components/button.ts"],"sourcesContent":["import type {\n\tNubeComponentBox,\n\tNubeComponentBoxProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `box` component.\n *\n * A `box` is a flexible container that can be used for layout purposes.\n * It supports properties like width, height, padding, margin, and flex-based alignment.\n *\n * @param props - The properties for configuring the box component.\n * @returns A `NubeComponentBox` object representing the box component.\n */\nexport const box = (props: NubeComponentBoxProps): NubeComponentBox => ({\n\ttype: \"box\",\n\t...props,\n});\n","import type {\n\tNubeComponentColumn,\n\tNubeComponentColumnProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `column` component.\n *\n * A `column` is a flexible column container that can be used for structuring layouts.\n * It inherits most properties from `box`, except for the `direction` property.\n *\n * @param props - The properties for configuring the column component.\n * @returns A `NubeComponentColumn` object representing the column component.\n */\nexport const column = (\n\tprops: NubeComponentColumnProps,\n): NubeComponentColumn => ({\n\ttype: \"col\",\n\t...props,\n});\n","import type {\n\tNubeComponentRow,\n\tNubeComponentRowProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `row` component.\n *\n * A `row` is a flexible container used for structuring layouts in a horizontal direction.\n * It inherits most properties from `box`, except for the `direction` property.\n *\n * @param props - The properties for configuring the row component.\n * @returns A `NubeComponentRow` object representing the row component.\n */\nexport const row = (props: NubeComponentRowProps): NubeComponentRow => ({\n\ttype: \"row\",\n\t...props,\n});\n","import type {\n\tNubeComponentField,\n\tNubeComponentFieldProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `field` component.\n *\n * A `field` represents an input element in a form, such as text fields, dropdowns, or checkboxes.\n * It supports properties like `name`, `label`, and event handlers (`onChange`, `onBlur`, `onFocus`).\n *\n * @param props - The properties for configuring the field component.\n * @returns A `NubeComponentField` object representing the form field.\n */\nexport const field = (props: NubeComponentFieldProps): NubeComponentField => ({\n\ttype: \"field\",\n\t...props,\n});\n","import type {\n\tNubeComponentFragment,\n\tNubeComponentFragmentProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `fragment` component.\n *\n * A `fragment` is a logical grouping element that allows multiple children\n * to be wrapped without introducing an additional DOM node.\n *\n * @param props - The properties for configuring the fragment component.\n * @returns A `NubeComponentFragment` object representing the fragment.\n */\nexport const fragment = (\n\tprops: NubeComponentFragmentProps,\n): NubeComponentFragment => ({\n\ttype: \"fragment\",\n\t...props,\n});\n","import type {\n\tNubeComponentImage,\n\tNubeComponentImageProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * @deprecated This component has been deprecated since version `0.8.0`. Please use the `image` component instead.\n */\nexport const img = (props: NubeComponentImageProps): NubeComponentImage => ({\n\ttype: \"img\",\n\t...props,\n});\n\n/**\n * Creates an `image` (image) component.\n *\n * The `image` component is used to display images. It supports properties such as\n * `src`, `alt`, `width`, `height`, and responsive `sources` for different screen sizes.\n *\n * @param props - The properties for configuring the image component.\n * @returns A `NubeComponentImage` object representing the image component.\n */\nexport const image = (props: NubeComponentImageProps): NubeComponentImage => ({\n\ttype: \"img\",\n\t...props,\n});\n","import type {\n\tNubeComponentText,\n\tNubeComponentTextProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `txt` (text) component.\n *\n * The `txt` component is used to render text with optional styling.\n * It supports properties such as `color`, `background`, `heading` levels (h1-h6),\n * text formatting `modifiers` (bold, italic, etc.), and inline display.\n *\n * @param props - The properties for configuring the text component.\n * @returns A `NubeComponentTxt` object representing the text component.\n */\nexport const text = (props: NubeComponentTextProps): NubeComponentText => ({\n\ttype: \"txt\",\n\t...props,\n});\n\n/**\n * @deprecated This component has been deprecated since version `0.8.0`. Please use the `text` component instead.\n */\nexport const txt = (props: NubeComponentTextProps): NubeComponentText => ({\n\ttype: \"txt\",\n\t...props,\n});\n","import type {\n\tNubeComponentCheckbox,\n\tNubeComponentCheckboxProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * @deprecated This component has been deprecated since version `0.8.0`. Please use the `checkbox` component instead.\n */\nexport const check = (\n\tprops: NubeComponentCheckboxProps,\n): NubeComponentCheckbox => ({\n\ttype: \"check\",\n\t...props,\n});\n\n/**\n * Creates a `checkbox` component.\n *\n * A `checkbox` represents a selectable field that can be toggled between checked and unchecked states.\n * It is typically used to allow users to select one or more options.\n * Supports properties such as `name`, `label`, `checked`, and event handlers (`onChange`).\n *\n * @param props - The properties for configuring the checkbox component.\n * @returns A `NubeComponentCheckbox` object representing the checkbox.\n */\nexport const checkbox = (\n\tprops: NubeComponentCheckboxProps,\n): NubeComponentCheckbox => ({\n\ttype: \"check\",\n\t...props,\n});\n","import type {\n\tNubeComponentTextarea,\n\tNubeComponentTextareaProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * @deprecated This component has been deprecated since version `0.8.0`. Please use the `textarea` component instead.\n */\nexport const txtarea = (\n\tprops: NubeComponentTextareaProps,\n): NubeComponentTextarea => ({\n\ttype: \"txtarea\",\n\t...props,\n});\n\n/**\n * Creates a `textarea` component.\n *\n * A `textarea` represents a multi-line text input field that allows users to enter longer texts.\n * It supports properties such as `name`, `value`, and event handlers (`onChange`, `onBlur`, `onFocus`).\n *\n * @param props - The properties for configuring the textarea component.\n * @returns A `NubeComponentTextarea` object representing the textarea component.\n */\nexport const textarea = (\n\tprops: NubeComponentTextareaProps,\n): NubeComponentTextarea => ({\n\ttype: \"txtarea\",\n\t...props,\n});\n","import type {\n\tNubeComponentButton,\n\tNubeComponentButtonProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `button` component.\n *\n * A `button` represents a clickable element typically used to trigger an action or submit a form.\n * It supports properties such as `text`, `onClick`, and style configurations.\n *\n * @param props - The properties for configuring the button component.\n * @returns A `NubeComponentButton` object representing the button component.\n */\nexport const button = (\n\tprops: NubeComponentButtonProps,\n): NubeComponentButton => ({\n\ttype: \"button\",\n\t...props,\n});\n"],"mappings":";AAcO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,IAAM,SAAS,CACrB,WAC0B;AAAA,EAC1B,MAAM;AAAA,EACN,GAAG;AACJ;;;ACLO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,IAAM,QAAQ,CAAC,WAAwD;AAAA,EAC7E,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,IAAM,WAAW,CACvB,WAC4B;AAAA,EAC5B,MAAM;AAAA,EACN,GAAG;AACJ;;;ACXO,IAAM,MAAM,CAAC,WAAwD;AAAA,EAC3E,MAAM;AAAA,EACN,GAAG;AACJ;AAWO,IAAM,QAAQ,CAAC,WAAwD;AAAA,EAC7E,MAAM;AAAA,EACN,GAAG;AACJ;;;ACVO,IAAM,OAAO,CAAC,WAAsD;AAAA,EAC1E,MAAM;AAAA,EACN,GAAG;AACJ;AAKO,IAAM,MAAM,CAAC,WAAsD;AAAA,EACzE,MAAM;AAAA,EACN,GAAG;AACJ;;;AClBO,IAAM,QAAQ,CACpB,WAC4B;AAAA,EAC5B,MAAM;AAAA,EACN,GAAG;AACJ;AAYO,IAAM,WAAW,CACvB,WAC4B;AAAA,EAC5B,MAAM;AAAA,EACN,GAAG;AACJ;;;ACtBO,IAAM,UAAU,CACtB,WAC4B;AAAA,EAC5B,MAAM;AAAA,EACN,GAAG;AACJ;AAWO,IAAM,WAAW,CACvB,WAC4B;AAAA,EAC5B,MAAM;AAAA,EACN,GAAG;AACJ;;;ACfO,IAAM,SAAS,CACrB,WAC0B;AAAA,EAC1B,MAAM;AAAA,EACN,GAAG;AACJ;","names":[]}
|