@tiendanube/nube-sdk-ui 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   box: () => box,
+  button: () => button,
   check: () => check,
   col: () => col,
   field: () => field,
@@ -85,9 +86,16 @@ var txtarea = (props) => ({
   type: "txtarea",
   ...props
 });
+
+// src/components/button.ts
+var button = (props) => ({
+  type: "button",
+  ...props
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   box,
+  button,
   check,
   col,
   field,

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/box.ts","../src/components/col.ts","../src/components/row.ts","../src/components/field.ts","../src/components/fragment.ts","../src/components/img.ts","../src/components/txt.ts","../src/components/check.ts","../src/components/txtarea.ts"],"sourcesContent":["export * from \"./components/box\";\nexport * from \"./components/col\";\nexport * from \"./components/row\";\nexport * from \"./components/field\";\nexport * from \"./components/fragment\";\nexport * from \"./components/img\";\nexport * from \"./components/txt\";\nexport * from \"./components/check\";\nexport * from \"./components/txtarea\";\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\tNubeComponentCol,\n\tNubeComponentColProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `col` (column) component.\n *\n * A `col` 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 `NubeComponentCol` object representing the column component.\n */\nexport const col = (props: NubeComponentColProps): NubeComponentCol => ({\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\tNubeComponentImg,\n\tNubeComponentImgProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates an `img` (image) component.\n *\n * The `img` 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 `NubeComponentImg` object representing the image component.\n */\nexport const img = (props: NubeComponentImgProps): NubeComponentImg => ({\n\ttype: \"img\",\n\t...props,\n});\n","import type {\n\tNubeComponentTxt,\n\tNubeComponentTxtProps,\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 txt = (props: NubeComponentTxtProps): NubeComponentTxt => ({\n\ttype: \"txt\",\n\t...props,\n});\n","import type {\n\tNubeComponentCheck,\n\tNubeComponentCheckProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `check` component.\n *\n * A `check` 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 `NubeComponentCheck` object representing the checkbox.\n */\nexport const check = (props: NubeComponentCheckProps): NubeComponentCheck => ({\n\ttype: \"check\",\n\t...props,\n});\n","import type {\n\tNubeComponentTxtArea,\n\tNubeComponentTxtAreaProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `txtarea` component.\n *\n * A `txtarea` 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 `NubeComponentTxtArea` object representing the textarea component.\n */\nexport const txtarea = (\n\tprops: NubeComponentTxtAreaProps,\n): NubeComponentTxtArea => ({\n\ttype: \"txtarea\",\n\t...props,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;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,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,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;;;ACLO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACFO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,IAAM,QAAQ,CAAC,WAAwD;AAAA,EAC7E,MAAM;AAAA,EACN,GAAG;AACJ;;;ACJO,IAAM,UAAU,CACtB,WAC2B;AAAA,EAC3B,MAAM;AAAA,EACN,GAAG;AACJ;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/components/box.ts","../src/components/col.ts","../src/components/row.ts","../src/components/field.ts","../src/components/fragment.ts","../src/components/img.ts","../src/components/txt.ts","../src/components/check.ts","../src/components/txtarea.ts","../src/components/button.ts"],"sourcesContent":["export * from \"./components/box\";\nexport * from \"./components/col\";\nexport * from \"./components/row\";\nexport * from \"./components/field\";\nexport * from \"./components/fragment\";\nexport * from \"./components/img\";\nexport * from \"./components/txt\";\nexport * from \"./components/check\";\nexport * from \"./components/txtarea\";\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\tNubeComponentCol,\n\tNubeComponentColProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `col` (column) component.\n *\n * A `col` 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 `NubeComponentCol` object representing the column component.\n */\nexport const col = (props: NubeComponentColProps): NubeComponentCol => ({\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\tNubeComponentImg,\n\tNubeComponentImgProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates an `img` (image) component.\n *\n * The `img` 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 `NubeComponentImg` object representing the image component.\n */\nexport const img = (props: NubeComponentImgProps): NubeComponentImg => ({\n\ttype: \"img\",\n\t...props,\n});\n","import type {\n\tNubeComponentTxt,\n\tNubeComponentTxtProps,\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 txt = (props: NubeComponentTxtProps): NubeComponentTxt => ({\n\ttype: \"txt\",\n\t...props,\n});\n","import type {\n\tNubeComponentCheck,\n\tNubeComponentCheckProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `check` component.\n *\n * A `check` 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 `NubeComponentCheck` object representing the checkbox.\n */\nexport const check = (props: NubeComponentCheckProps): NubeComponentCheck => ({\n\ttype: \"check\",\n\t...props,\n});\n","import type {\n\tNubeComponentTxtArea,\n\tNubeComponentTxtAreaProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `txtarea` component.\n *\n * A `txtarea` 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 `NubeComponentTxtArea` object representing the textarea component.\n */\nexport const txtarea = (\n\tprops: NubeComponentTxtAreaProps,\n): NubeComponentTxtArea => ({\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;;;ACcO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,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;;;ACLO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACFO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,IAAM,QAAQ,CAAC,WAAwD;AAAA,EAC7E,MAAM;AAAA,EACN,GAAG;AACJ;;;ACJO,IAAM,UAAU,CACtB,WAC2B;AAAA,EAC3B,MAAM;AAAA,EACN,GAAG;AACJ;;;ACLO,IAAM,SAAS,CACrB,WAC0B;AAAA,EAC1B,MAAM;AAAA,EACN,GAAG;AACJ;","names":[]}

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { NubeComponentBoxProps, NubeComponentBox, NubeComponentColProps, NubeComponentCol, NubeComponentRowProps, NubeComponentRow, NubeComponentFieldProps, NubeComponentField, NubeComponentFragmentProps, NubeComponentFragment, NubeComponentImgProps, NubeComponentImg, NubeComponentTxtProps, NubeComponentTxt, NubeComponentCheckProps, NubeComponentCheck, NubeComponentTxtAreaProps, NubeComponentTxtArea } from '@tiendanube/nube-sdk-types';
+import { NubeComponentBoxProps, NubeComponentBox, NubeComponentColProps, NubeComponentCol, NubeComponentRowProps, NubeComponentRow, NubeComponentFieldProps, NubeComponentField, NubeComponentFragmentProps, NubeComponentFragment, NubeComponentImgProps, NubeComponentImg, NubeComponentTxtProps, NubeComponentTxt, NubeComponentCheckProps, NubeComponentCheck, NubeComponentTxtAreaProps, NubeComponentTxtArea, NubeComponentButtonProps, NubeComponentButton } from '@tiendanube/nube-sdk-types';
 
 /**
  * Creates a `box` component.
@@ -101,4 +101,15 @@ declare const check: (props: NubeComponentCheckProps) => NubeComponentCheck;
  */
 declare const txtarea: (props: NubeComponentTxtAreaProps) => NubeComponentTxtArea;
 
-export { box, check, col, field, fragment, img, row, txt, txtarea };
+/**
+ * Creates a `button` component.
+ *
+ * A `button` represents a clickable element typically used to trigger an action or submit a form.
+ * It supports properties such as `text`, `onClick`, and style configurations.
+ *
+ * @param props - The properties for configuring the button component.
+ * @returns A `NubeComponentButton` object representing the button component.
+ */
+declare const button: (props: NubeComponentButtonProps) => NubeComponentButton;
+
+export { box, button, check, col, field, fragment, img, row, txt, txtarea };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { NubeComponentBoxProps, NubeComponentBox, NubeComponentColProps, NubeComponentCol, NubeComponentRowProps, NubeComponentRow, NubeComponentFieldProps, NubeComponentField, NubeComponentFragmentProps, NubeComponentFragment, NubeComponentImgProps, NubeComponentImg, NubeComponentTxtProps, NubeComponentTxt, NubeComponentCheckProps, NubeComponentCheck, NubeComponentTxtAreaProps, NubeComponentTxtArea } from '@tiendanube/nube-sdk-types';
+import { NubeComponentBoxProps, NubeComponentBox, NubeComponentColProps, NubeComponentCol, NubeComponentRowProps, NubeComponentRow, NubeComponentFieldProps, NubeComponentField, NubeComponentFragmentProps, NubeComponentFragment, NubeComponentImgProps, NubeComponentImg, NubeComponentTxtProps, NubeComponentTxt, NubeComponentCheckProps, NubeComponentCheck, NubeComponentTxtAreaProps, NubeComponentTxtArea, NubeComponentButtonProps, NubeComponentButton } from '@tiendanube/nube-sdk-types';
 
 /**
  * Creates a `box` component.
@@ -101,4 +101,15 @@ declare const check: (props: NubeComponentCheckProps) => NubeComponentCheck;
  */
 declare const txtarea: (props: NubeComponentTxtAreaProps) => NubeComponentTxtArea;
 
-export { box, check, col, field, fragment, img, row, txt, txtarea };
+/**
+ * Creates a `button` component.
+ *
+ * A `button` represents a clickable element typically used to trigger an action or submit a form.
+ * It supports properties such as `text`, `onClick`, and style configurations.
+ *
+ * @param props - The properties for configuring the button component.
+ * @returns A `NubeComponentButton` object representing the button component.
+ */
+declare const button: (props: NubeComponentButtonProps) => NubeComponentButton;
+
+export { box, button, check, col, field, fragment, img, row, txt, txtarea };

package/dist/index.js

@@ -51,8 +51,15 @@ var txtarea = (props) => ({
   type: "txtarea",
   ...props
 });
+
+// src/components/button.ts
+var button = (props) => ({
+  type: "button",
+  ...props
+});
 export {
   box,
+  button,
   check,
   col,
   field,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/box.ts","../src/components/col.ts","../src/components/row.ts","../src/components/field.ts","../src/components/fragment.ts","../src/components/img.ts","../src/components/txt.ts","../src/components/check.ts","../src/components/txtarea.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\tNubeComponentCol,\n\tNubeComponentColProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `col` (column) component.\n *\n * A `col` 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 `NubeComponentCol` object representing the column component.\n */\nexport const col = (props: NubeComponentColProps): NubeComponentCol => ({\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\tNubeComponentImg,\n\tNubeComponentImgProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates an `img` (image) component.\n *\n * The `img` 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 `NubeComponentImg` object representing the image component.\n */\nexport const img = (props: NubeComponentImgProps): NubeComponentImg => ({\n\ttype: \"img\",\n\t...props,\n});\n","import type {\n\tNubeComponentTxt,\n\tNubeComponentTxtProps,\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 txt = (props: NubeComponentTxtProps): NubeComponentTxt => ({\n\ttype: \"txt\",\n\t...props,\n});\n","import type {\n\tNubeComponentCheck,\n\tNubeComponentCheckProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `check` component.\n *\n * A `check` 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 `NubeComponentCheck` object representing the checkbox.\n */\nexport const check = (props: NubeComponentCheckProps): NubeComponentCheck => ({\n\ttype: \"check\",\n\t...props,\n});\n","import type {\n\tNubeComponentTxtArea,\n\tNubeComponentTxtAreaProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `txtarea` component.\n *\n * A `txtarea` 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 `NubeComponentTxtArea` object representing the textarea component.\n */\nexport const txtarea = (\n\tprops: NubeComponentTxtAreaProps,\n): NubeComponentTxtArea => ({\n\ttype: \"txtarea\",\n\t...props,\n});\n"],"mappings":";AAcO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,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;;;ACLO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACFO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,IAAM,QAAQ,CAAC,WAAwD;AAAA,EAC7E,MAAM;AAAA,EACN,GAAG;AACJ;;;ACJO,IAAM,UAAU,CACtB,WAC2B;AAAA,EAC3B,MAAM;AAAA,EACN,GAAG;AACJ;","names":[]}
+{"version":3,"sources":["../src/components/box.ts","../src/components/col.ts","../src/components/row.ts","../src/components/field.ts","../src/components/fragment.ts","../src/components/img.ts","../src/components/txt.ts","../src/components/check.ts","../src/components/txtarea.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\tNubeComponentCol,\n\tNubeComponentColProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `col` (column) component.\n *\n * A `col` 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 `NubeComponentCol` object representing the column component.\n */\nexport const col = (props: NubeComponentColProps): NubeComponentCol => ({\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\tNubeComponentImg,\n\tNubeComponentImgProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates an `img` (image) component.\n *\n * The `img` 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 `NubeComponentImg` object representing the image component.\n */\nexport const img = (props: NubeComponentImgProps): NubeComponentImg => ({\n\ttype: \"img\",\n\t...props,\n});\n","import type {\n\tNubeComponentTxt,\n\tNubeComponentTxtProps,\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 txt = (props: NubeComponentTxtProps): NubeComponentTxt => ({\n\ttype: \"txt\",\n\t...props,\n});\n","import type {\n\tNubeComponentCheck,\n\tNubeComponentCheckProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `check` component.\n *\n * A `check` 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 `NubeComponentCheck` object representing the checkbox.\n */\nexport const check = (props: NubeComponentCheckProps): NubeComponentCheck => ({\n\ttype: \"check\",\n\t...props,\n});\n","import type {\n\tNubeComponentTxtArea,\n\tNubeComponentTxtAreaProps,\n} from \"@tiendanube/nube-sdk-types\";\n\n/**\n * Creates a `txtarea` component.\n *\n * A `txtarea` 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 `NubeComponentTxtArea` object representing the textarea component.\n */\nexport const txtarea = (\n\tprops: NubeComponentTxtAreaProps,\n): NubeComponentTxtArea => ({\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,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,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;;;ACLO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACFO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,MAAM;AAAA,EACN,GAAG;AACJ;;;ACHO,IAAM,QAAQ,CAAC,WAAwD;AAAA,EAC7E,MAAM;AAAA,EACN,GAAG;AACJ;;;ACJO,IAAM,UAAU,CACtB,WAC2B;AAAA,EAC3B,MAAM;AAAA,EACN,GAAG;AACJ;;;ACLO,IAAM,SAAS,CACrB,WAC0B;AAAA,EAC1B,MAAM;AAAA,EACN,GAAG;AACJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tiendanube/nube-sdk-ui",
-	"version": "0.2.0",
+	"version": "0.4.0",
 	"description": "Library for building declarative interfaces for NubeSDK",
 	"type": "module",
 	"main": "./dist/index.js",