@tiendanube/nube-sdk-ui 0.1.3-alpha → 0.1.3

package/README.md

@@ -0,0 +1,78 @@
+# `@tiendanube/nube-sdk-ui`
+
+**Library for building declarative UI components in NubeSDK.**
+
+## About
+
+`@tiendanube/nube-sdk-ui` provides **a set of functions** to create UI components declaratively within **NubeSDK**. This package allows developers to define UI components as structured objects, ensuring that UI components are safely structured and passed to the platform for rendering.
+
+This package follows a **declarative approach**, where UI is described as data instead of imperative code. These structured objects are later interpreted by the platform to generate the final UI.
+
+Apps in NubeSDK run **inside isolated web workers**, without direct access to the DOM. This ensures security, consistency, and predictable rendering behavior.
+
+## Installation
+
+```sh
+npm install @tiendanube/nube-sdk-ui @tiendanube/nube-sdk-types
+```
+
+> Note: `@tiendanube/nube-sdk-types` is a peer dependency and must be installed alongside this package.
+
+## Main Components
+
+This package provides utility functions for creating UI components in **NubeSDK**, including:
+
+### Layout Components
+- `box` → Creates a flexible container for structuring layouts.
+- `col` → Defines a column layout inside a row or another container.
+- `row` → Defines a horizontal layout with flexible positioning.
+
+### Interactive Components
+- `field` → Represents an input element such as text fields, dropdowns, or checkboxes.
+
+### Visual Components
+- `img` → Displays an image with support for responsive sources.
+- `txt` → Renders text with optional formatting.
+
+### Structural Components
+- `fragment` → Groups multiple components without introducing an additional structural wrapper.
+
+## Example Usage
+
+```ts
+import { box, col, row, field, img, txt, fragment } from "@tiendanube/nube-sdk-ui";
+
+const componentTree = box({
+  children: [
+    row({
+      children: [
+        col({ children: txt({ children: "Hello, NubeSDK!" }) }),
+      ],
+    }),
+    field({ name: "email", label: "Email" })
+  ]
+});
+```
+
+## Example Project Setup
+
+A minimal example project using `@tiendanube/nube-sdk-ui` is available in the repository under:
+
+- [`examples/minimal-ui`](https://github.com/TiendaNube/nube-sdk/tree/main/examples/minimal-ui)
+
+This example include **pre-configured build setups**, ensuring a seamless development experience.
+
+## Official Documentation
+
+For more details about NubeSDK and how to build apps, check out our **official documentation**:
+
+[**NubeSDK Documentation**](https://dev.tiendanube.com/docs/applications/nube-sdk/overview)
+
+## Support
+
+- **Questions?** Use [GitHub Issues](https://github.com/TiendaNube/nube-sdk/issues).
+- **Found a bug?** Open an issue with a reproducible example.
+
+---
+
+© [Tiendanube / Nuvemshop](https://www.tiendanube.com), 2025. All rights reserved.

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"],"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\";\n","import type {\n\tNubeComponentBox,\n\tNubeComponentBoxProps,\n} from \"@tiendanube/nube-sdk-types\";\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\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\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\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\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\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\nexport const txt = (props: NubeComponentTxtProps): NubeComponentTxt => ({\n\ttype: \"txt\",\n\t...props,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACKO,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;;;ACHO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,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"],"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\";\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"],"mappings":";;;;;;;;;;;;;;;;;;;;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;","names":[]}

package/dist/index.d.cts

@@ -1,17 +1,81 @@
 import { NubeComponentBoxProps, NubeComponentBox, NubeComponentColProps, NubeComponentCol, NubeComponentRowProps, NubeComponentRow, NubeComponentFieldProps, NubeComponentField, NubeComponentFragmentProps, NubeComponentFragment, NubeComponentImgProps, NubeComponentImg, NubeComponentTxtProps, NubeComponentTxt } from '@tiendanube/nube-sdk-types';
 
+/**
+ * Creates a `box` component.
+ *
+ * A `box` is a flexible container that can be used for layout purposes.
+ * It supports properties like width, height, padding, margin, and flex-based alignment.
+ *
+ * @param props - The properties for configuring the box component.
+ * @returns A `NubeComponentBox` object representing the box component.
+ */
 declare const box: (props: NubeComponentBoxProps) => NubeComponentBox;
 
+/**
+ * Creates a `col` (column) component.
+ *
+ * A `col` is a flexible column container that can be used for structuring layouts.
+ * It inherits most properties from `box`, except for the `direction` property.
+ *
+ * @param props - The properties for configuring the column component.
+ * @returns A `NubeComponentCol` object representing the column component.
+ */
 declare const col: (props: NubeComponentColProps) => NubeComponentCol;
 
+/**
+ * Creates a `row` component.
+ *
+ * A `row` is a flexible container used for structuring layouts in a horizontal direction.
+ * It inherits most properties from `box`, except for the `direction` property.
+ *
+ * @param props - The properties for configuring the row component.
+ * @returns A `NubeComponentRow` object representing the row component.
+ */
 declare const row: (props: NubeComponentRowProps) => NubeComponentRow;
 
+/**
+ * Creates a `field` component.
+ *
+ * A `field` represents an input element in a form, such as text fields, dropdowns, or checkboxes.
+ * It supports properties like `name`, `label`, and event handlers (`onChange`, `onBlur`, `onFocus`).
+ *
+ * @param props - The properties for configuring the field component.
+ * @returns A `NubeComponentField` object representing the form field.
+ */
 declare const field: (props: NubeComponentFieldProps) => NubeComponentField;
 
+/**
+ * Creates a `fragment` component.
+ *
+ * A `fragment` is a logical grouping element that allows multiple children
+ * to be wrapped without introducing an additional DOM node.
+ *
+ * @param props - The properties for configuring the fragment component.
+ * @returns A `NubeComponentFragment` object representing the fragment.
+ */
 declare const fragment: (props: NubeComponentFragmentProps) => NubeComponentFragment;
 
+/**
+ * Creates an `img` (image) component.
+ *
+ * The `img` component is used to display images. It supports properties such as
+ * `src`, `alt`, `width`, `height`, and responsive `sources` for different screen sizes.
+ *
+ * @param props - The properties for configuring the image component.
+ * @returns A `NubeComponentImg` object representing the image component.
+ */
 declare const img: (props: NubeComponentImgProps) => NubeComponentImg;
 
+/**
+ * Creates a `txt` (text) component.
+ *
+ * The `txt` component is used to render text with optional styling.
+ * It supports properties such as `color`, `background`, `heading` levels (h1-h6),
+ * text formatting `modifiers` (bold, italic, etc.), and inline display.
+ *
+ * @param props - The properties for configuring the text component.
+ * @returns A `NubeComponentTxt` object representing the text component.
+ */
 declare const txt: (props: NubeComponentTxtProps) => NubeComponentTxt;
 
 export { box, col, field, fragment, img, row, txt };

package/dist/index.d.ts

@@ -1,17 +1,81 @@
 import { NubeComponentBoxProps, NubeComponentBox, NubeComponentColProps, NubeComponentCol, NubeComponentRowProps, NubeComponentRow, NubeComponentFieldProps, NubeComponentField, NubeComponentFragmentProps, NubeComponentFragment, NubeComponentImgProps, NubeComponentImg, NubeComponentTxtProps, NubeComponentTxt } from '@tiendanube/nube-sdk-types';
 
+/**
+ * Creates a `box` component.
+ *
+ * A `box` is a flexible container that can be used for layout purposes.
+ * It supports properties like width, height, padding, margin, and flex-based alignment.
+ *
+ * @param props - The properties for configuring the box component.
+ * @returns A `NubeComponentBox` object representing the box component.
+ */
 declare const box: (props: NubeComponentBoxProps) => NubeComponentBox;
 
+/**
+ * Creates a `col` (column) component.
+ *
+ * A `col` is a flexible column container that can be used for structuring layouts.
+ * It inherits most properties from `box`, except for the `direction` property.
+ *
+ * @param props - The properties for configuring the column component.
+ * @returns A `NubeComponentCol` object representing the column component.
+ */
 declare const col: (props: NubeComponentColProps) => NubeComponentCol;
 
+/**
+ * Creates a `row` component.
+ *
+ * A `row` is a flexible container used for structuring layouts in a horizontal direction.
+ * It inherits most properties from `box`, except for the `direction` property.
+ *
+ * @param props - The properties for configuring the row component.
+ * @returns A `NubeComponentRow` object representing the row component.
+ */
 declare const row: (props: NubeComponentRowProps) => NubeComponentRow;
 
+/**
+ * Creates a `field` component.
+ *
+ * A `field` represents an input element in a form, such as text fields, dropdowns, or checkboxes.
+ * It supports properties like `name`, `label`, and event handlers (`onChange`, `onBlur`, `onFocus`).
+ *
+ * @param props - The properties for configuring the field component.
+ * @returns A `NubeComponentField` object representing the form field.
+ */
 declare const field: (props: NubeComponentFieldProps) => NubeComponentField;
 
+/**
+ * Creates a `fragment` component.
+ *
+ * A `fragment` is a logical grouping element that allows multiple children
+ * to be wrapped without introducing an additional DOM node.
+ *
+ * @param props - The properties for configuring the fragment component.
+ * @returns A `NubeComponentFragment` object representing the fragment.
+ */
 declare const fragment: (props: NubeComponentFragmentProps) => NubeComponentFragment;
 
+/**
+ * Creates an `img` (image) component.
+ *
+ * The `img` component is used to display images. It supports properties such as
+ * `src`, `alt`, `width`, `height`, and responsive `sources` for different screen sizes.
+ *
+ * @param props - The properties for configuring the image component.
+ * @returns A `NubeComponentImg` object representing the image component.
+ */
 declare const img: (props: NubeComponentImgProps) => NubeComponentImg;
 
+/**
+ * Creates a `txt` (text) component.
+ *
+ * The `txt` component is used to render text with optional styling.
+ * It supports properties such as `color`, `background`, `heading` levels (h1-h6),
+ * text formatting `modifiers` (bold, italic, etc.), and inline display.
+ *
+ * @param props - The properties for configuring the text component.
+ * @returns A `NubeComponentTxt` object representing the text component.
+ */
 declare const txt: (props: NubeComponentTxtProps) => NubeComponentTxt;
 
 export { box, col, field, fragment, img, row, txt };

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"],"sourcesContent":["import type {\n\tNubeComponentBox,\n\tNubeComponentBoxProps,\n} from \"@tiendanube/nube-sdk-types\";\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\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\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\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\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\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\nexport const txt = (props: NubeComponentTxtProps): NubeComponentTxt => ({\n\ttype: \"txt\",\n\t...props,\n});\n"],"mappings":";AAKO,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;;;ACHO,IAAM,MAAM,CAAC,WAAoD;AAAA,EACvE,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"],"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"],"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;","names":[]}

package/package.json

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