@tiendanube/nube-sdk-ui 0.9.2 → 0.9.3

package/dist/index.cjs

@@ -69,7 +69,17 @@ function djb2Hash(str) {
 function createId(type, hash) {
   return `${type}-${self.__APP_DATA__.id}-${hash}`;
 }
+function createInternalIdRegex(appId) {
+  const escapedAppId = appId.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`^[a-zA-Z0-9_-]+-${escapedAppId}-[a-z0-9]+$`);
+}
+function isValidInternalId(id) {
+  if (typeof id !== "string" || id === "") return false;
+  const regex = createInternalIdRegex(self.__APP_DATA__.id);
+  return regex.test(id);
+}
 function generateInternalId(type, props) {
+  if (isValidInternalId(props.__internalId)) return props.__internalId;
   const cached = memo.get(props);
   if (cached) return createId(type, cached);
   const key = stableStringify(props);
@@ -370,8 +380,6 @@ function isKeyframesObject(value) {
 function styled(baseComponent) {
   return (strings, ...exprs) => {
     const StyledComponent = (props) => {
-      const component = baseComponent(props);
-      if (typeof component === "string") return component;
       let rawCSS = "";
       const animation = [];
       for (let i = 0; i < strings.length; i++) {
@@ -386,6 +394,13 @@ function styled(baseComponent) {
         }
       }
       const minifiedCSS = minify(`${animation.join("")}${rawCSS}`);
+      const componentType = baseComponent.name || "component";
+      const internalId = generateInternalId(componentType, {
+        ...props,
+        __styledCSS: minifiedCSS
+      });
+      const component = baseComponent({ ...props, __internalId: internalId });
+      if (typeof component === "string") return component;
       component.styled = `${component.styled || ""}${minifiedCSS}`;
       return component;
     };

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/generateInternalId.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","../src/components/select.ts","../src/components/accordion.ts","../src/components/accordion-item.ts","../src/components/accordion-content.ts","../src/components/accordion.header.ts","../src/components/toast-root.ts","../src/components/toast-title.ts","../src/components/toast-description.ts","../src/components/icon.ts","../src/styles/ThemeColor.ts","../src/styles/StyleSheet.ts","../src/styles/theme.ts","../src/styles/minify.ts","../src/styles/shortid.ts","../src/styles/keyframes.ts","../src/styles/styled.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\";\nexport * from \"./components/select\";\nexport * from \"./components/accordion\";\nexport * from \"./components/accordion-item\";\nexport * from \"./components/accordion-content\";\nexport * from \"./components/accordion.header\";\nexport * from \"./components/toast-root\";\nexport * from \"./components/toast-title\";\nexport * from \"./components/toast-description\";\nexport * from \"./components/icon\";\nexport * from \"./styles/StyleSheet\";\nexport * from \"./styles/theme\";\nexport * from \"./styles/styled\";\nexport { keyframes } from \"./styles/keyframes\";\n","type Props = Record<string, unknown>;\n\nconst memo = new WeakMap<object, string>();\n\n/**\n * Serialize the props in a stable way, ignoring functions.\n */\nfunction stableStringify(value: unknown): string {\n\treturn JSON.stringify(value, (key, val) => {\n\t\tif (key === \"children\" && typeof val !== \"string\") return \"[children]\";\n\t\tif (typeof val === \"function\") return \"[fn]\";\n\t\treturn val;\n\t});\n}\n\n/**\n * djb2 hash function (32 bits, returning base36 for reduced size).\n */\nfunction djb2Hash(str: string): string {\n\tlet hash = 5381;\n\tfor (let i = 0; i < str.length; i++) {\n\t\thash = (hash * 33) ^ str.charCodeAt(i);\n\t}\n\treturn (hash >>> 0).toString(36); // eg: \"1v3tuh\"\n}\n\nfunction createId(type: string, hash: string) {\n\treturn `${type}-${self.__APP_DATA__.id}-${hash}`;\n}\n\n/**\n * Generate a stable ID for a component based on the type and props.\n */\nexport function generateInternalId(type: string, props: Props): string {\n\t// Use cache based on the props reference\n\tconst cached = memo.get(props);\n\tif (cached) return createId(type, cached);\n\n\tconst key = stableStringify(props);\n\tconst hash = djb2Hash(key);\n\tmemo.set(props, hash);\n\n\treturn createId(type, hash);\n}\n","import type {\n\tNubeComponentBox,\n\tNubeComponentBoxProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"box\", props),\n});\n","import type {\n\tNubeComponentColumn,\n\tNubeComponentColumnProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"col\", props),\n});\n","import type {\n\tNubeComponentRow,\n\tNubeComponentRowProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"row\", props),\n});\n","import type {\n\tNubeComponentField,\n\tNubeComponentFieldProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"field\", props),\n});\n","import type {\n\tNubeComponentFragment,\n\tNubeComponentFragmentProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"fragment\", props),\n});\n","import type {\n\tNubeComponentImage,\n\tNubeComponentImageProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"img\", 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\t__internalId: generateInternalId(\"img\", props),\n});\n","import type {\n\tNubeComponentText,\n\tNubeComponentTextProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"txt\", 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\t__internalId: generateInternalId(\"txt\", props),\n});\n","import type {\n\tNubeComponentCheckbox,\n\tNubeComponentCheckboxProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"check\", 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\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"txtarea\", 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\t__internalId: generateInternalId(\"txtarea\", props),\n});\n","import type {\n\tNubeComponentButton,\n\tNubeComponentButtonProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"button\", props),\n});\n","import type {\n\tNubeComponentSelect,\n\tNubeComponentSelectProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `select` component.\n *\n * A `select` represents a dropdown menu that allows users to select one option from a list.\n * It supports properties such as `name`, `label`, `options`, and event handlers (`onChange`).\n */\nexport const select = (\n\tprops: NubeComponentSelectProps,\n): NubeComponentSelect => ({\n\ttype: \"select\",\n\t...props,\n\t__internalId: generateInternalId(\"select\", props),\n});\n","import type {\n\tNubeComponentAccordionRoot,\n\tNubeComponentAccordionRootProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion` component.\n *\n * An `accordion` is a vertically stacked list of items that can be expanded or collapsed to reveal their content.\n * It supports properties such as `defaultValue` for controlling which item is expanded by default, and custom styling.\n */\nexport const accordionRoot = (\n\tprops: NubeComponentAccordionRootProps,\n): NubeComponentAccordionRoot => ({\n\ttype: \"accordionRoot\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionRoot\", props),\n});\n","import type {\n\tNubeComponentAccordionItem,\n\tNubeComponentAccordionItemProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion-item` component.\n *\n * An `accordion-item` represents a single item within an accordion.\n * Each item contains a header that can be clicked to show/hide its content.\n * It supports properties such as `title`, `content`, `isExpanded`, and event handlers (`onToggle`).\n */\nexport const accordionItem = (\n\tprops: NubeComponentAccordionItemProps,\n): NubeComponentAccordionItem => ({\n\ttype: \"accordionItem\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionItem\", props),\n});\n","import type {\n\tNubeComponentAccordionContent,\n\tNubeComponentAccordionContentProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion-content` component.\n *\n * An `accordion-content` represents the content of an accordion item.\n * It supports properties such as `children`.\n */\nexport const accordionContent = (\n\tprops: NubeComponentAccordionContentProps,\n): NubeComponentAccordionContent => ({\n\ttype: \"accordionContent\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionContent\", props),\n});\n","import type {\n\tNubeComponentAccordionHeader,\n\tNubeComponentAccordionHeaderProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion-header` component.\n *\n * An `accordion-header` represents the header of an accordion item.\n * It supports properties such as `children`.\n */\nexport const accordionHeader = (\n\tprops: NubeComponentAccordionHeaderProps,\n): NubeComponentAccordionHeader => ({\n\ttype: \"accordionHeader\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionHeader\", props),\n});\n","import type {\n\tNubeComponentToastRoot,\n\tNubeComponentToastRootProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `toast` component.\n *\n * A `toast` is a small notification that appears at the bottom of the screen to inform the user about an action or a message.\n * It supports properties such as `type` for controlling the type of toast, and custom styling.\n */\nexport const toastRoot = (\n\tprops: NubeComponentToastRootProps,\n): NubeComponentToastRoot => ({\n\ttype: \"toastRoot\",\n\t...props,\n\t__internalId: generateInternalId(\"toastRoot\", props),\n});\n","import type {\n\tNubeComponentToastTitle,\n\tNubeComponentToastTitleProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `toast` title component.\n *\n * A `toast` title is a small notification that appears at the bottom of the screen to inform the user about an action or a message.\n * It supports properties such as `children` for the title text, and custom styling.\n */\nexport const toastTitle = (\n\tprops: NubeComponentToastTitleProps,\n): NubeComponentToastTitle => ({\n\ttype: \"toastTitle\",\n\t...props,\n\t__internalId: generateInternalId(\"toastTitle\", props),\n});\n","import type {\n\tNubeComponentToastDescription,\n\tNubeComponentToastDescriptionProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `toast` description component.\n *\n * A `toast` description is a small notification that appears at the bottom of the screen to inform the user about an action or a message.\n * It supports properties such as `children` for the description text, and custom styling.\n */\nexport const toastDescription = (\n\tprops: NubeComponentToastDescriptionProps,\n): NubeComponentToastDescription => ({\n\ttype: \"toastDescription\",\n\t...props,\n\t__internalId: generateInternalId(\"toastDescription\", props),\n});\n","import type {\n\tNubeComponentIcon,\n\tNubeComponentIconProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `icon` component.\n *\n * @param props - The properties for configuring the icon component.\n * @returns A `NubeComponentIcon` object representing the icon.\n */\nexport const icon = (props: NubeComponentIconProps): NubeComponentIcon => ({\n\ttype: \"icon\",\n\t...props,\n\t__internalId: generateInternalId(\"icon\", props),\n});\n","export type ThemeColorOpacityRange =\n\t| 0\n\t| 5\n\t| 10\n\t| 20\n\t| 30\n\t| 40\n\t| 50\n\t| 60\n\t| 70\n\t| 80\n\t| 90;\n\nexport class ThemeColor {\n\tconstructor(private readonly token: string) {}\n\n\topacity(opacity: ThemeColorOpacityRange) {\n\t\treturn `var(--${this.token}-opacity-${opacity.toString().padStart(2, \"0\")})`;\n\t}\n\n\ttoValue(): string {\n\t\treturn `var(--${this.token})`;\n\t}\n\n\ttoString() {\n\t\treturn this.toValue();\n\t}\n}\n","import type { Size } from \"@tiendanube/nube-sdk-types\";\nimport type * as CSS from \"csstype\";\nimport { ThemeColor } from \"./ThemeColor\";\nimport type { ThemeCSSValue } from \"./theme\";\n\n/**\n * Maps properties that should use the Size type\n */\ntype SizePropertyKeys =\n\t| \"width\"\n\t| \"height\"\n\t| \"minWidth\"\n\t| \"minHeight\"\n\t| \"maxWidth\"\n\t| \"maxHeight\"\n\t| \"top\"\n\t| \"right\"\n\t| \"bottom\"\n\t| \"left\"\n\t| \"margin\"\n\t| \"marginTop\"\n\t| \"marginBottom\"\n\t| \"marginLeft\"\n\t| \"marginRight\"\n\t| \"padding\"\n\t| \"paddingTop\"\n\t| \"paddingBottom\"\n\t| \"paddingLeft\"\n\t| \"paddingRight\"\n\t| \"fontSize\"\n\t| \"lineHeight\"\n\t| \"borderWidth\"\n\t| \"borderRadius\";\n\n/**\n * Applies Size only to size properties.\n * The others remain as string | number.\n */\ntype EnhancedCSSProperties = {\n\t[K in keyof CSS.Properties]?: K extends SizePropertyKeys\n\t\t? Size | ThemeCSSValue\n\t\t: CSS.Properties[K] | ThemeCSSValue;\n};\n\n/**\n * Define named styles\n */\nexport type NubeComponentStyle = Partial<EnhancedCSSProperties>;\n\nfunction parseValue(value: unknown): unknown {\n\tif (value instanceof ThemeColor) {\n\t\treturn value.toValue();\n\t}\n\treturn value;\n}\n\nfunction parseStyleObject(\n\tstyle: Record<string, unknown>,\n): Record<string, unknown> {\n\tconst parsed: Record<string, unknown> = {};\n\tfor (const key in style) {\n\t\tconst val = style[key];\n\t\tif (\n\t\t\tval &&\n\t\t\ttypeof val === \"object\" &&\n\t\t\t!Array.isArray(val) &&\n\t\t\t!(val instanceof ThemeColor) &&\n\t\t\tObject.prototype.hasOwnProperty.call(val, \"toString\")\n\t\t) {\n\t\t\tparsed[key] = parseStyleObject(val as Record<string, unknown>);\n\t\t} else {\n\t\t\tparsed[key] = parseValue(val);\n\t\t}\n\t}\n\treturn parsed;\n}\n\nexport const StyleSheet = {\n\tcreate<T extends { [key: string]: NubeComponentStyle }>(styles: T): T {\n\t\tconst parsedStyles: Record<string, unknown> = {};\n\t\tfor (const key in styles) {\n\t\t\tparsedStyles[key] = parseStyleObject(\n\t\t\t\tstyles[key] as Record<string, unknown>,\n\t\t\t);\n\t\t}\n\t\treturn parsedStyles as T;\n\t},\n} as const;\n","import { ThemeColor } from \"./ThemeColor\";\n\nexport const theme = {\n\tcolor: {\n\t\taccent: new ThemeColor(\"accent-color\"),\n\t\tmain: {\n\t\t\tforeground: new ThemeColor(\"main-foreground\"),\n\t\t\tbackground: new ThemeColor(\"main-background\"),\n\t\t},\n\t},\n\tborder: {\n\t\tcolor: \"var(--border-color)\",\n\t\tradius: \"var(--border-radius)\",\n\t},\n\tbox: {\n\t\tborder: {\n\t\t\tcolor: \"var(--box-border-color)\",\n\t\t\tradius: \"var(--box-border-radius)\",\n\t\t},\n\t},\n\tinput: {\n\t\tborder: {\n\t\t\tcolor: \"var(--input-border-color)\",\n\t\t},\n\t},\n\tbutton: {\n\t\tforeground: \"var(--button-foreground)\",\n\t\tbackground: \"var(--button-background)\",\n\t\tborderColor: \"var(--button-border-color)\",\n\t\tborderRadius: \"var(--button-border-radius)\",\n\t},\n\tlabel: {\n\t\tforeground: \"var(--label-foreground)\",\n\t\tbackground: \"var(--label-background)\",\n\t},\n\theader: {\n\t\tforeground: \"var(--header-foreground)\",\n\t\tbackground: \"var(--header-background)\",\n\t\tlogo: {\n\t\t\tmaxWidth: \"var(--header-logo-max-width)\",\n\t\t\tmaxHeight: \"var(--header-logo-max-height)\",\n\t\t\tfont: \"var(--header-logo-font)\",\n\t\t\tfontSize: \"var(--header-logo-font-size)\",\n\t\t\tfontWeight: \"var(--header-logo-font-weight)\",\n\t\t\ttextTransform: \"var(--header-logo-text-transform)\",\n\t\t\tletterSpacing: \"var(--header-logo-letter-spacing)\",\n\t\t},\n\t},\n\tfooter: {\n\t\tforeground: \"var(--footer-foreground)\",\n\t\tbackground: \"var(--footer-background)\",\n\t},\n\theading: {\n\t\tfont: \"var(--heading-font)\",\n\t\tfontWeight: \"var(--heading-font-weight)\",\n\t\ttextTransform: \"var(--heading-text-transform)\",\n\t\tletterSpacing: \"var(--heading-letter-spacing)\",\n\t},\n} as const;\n\nexport type Theme = typeof theme;\nexport type ThemeColorValue = ReturnType<ThemeColor[\"toValue\"]>;\nexport type ThemeColorOpacityValue = ReturnType<ThemeColor[\"opacity\"]>;\n\ntype ThemeCSSPrimitive = string | number;\n\nexport type ThemeCSSValue =\n\t| ThemeColor\n\t| ThemeColorOpacityValue\n\t| ThemeCSSPrimitive;\n","/**\n * Minifies an inline CSS string by removing line breaks and unnecessary spaces.\n */\nexport function minify(css: string): string {\n\treturn css\n\t\t.replace(/\\/\\*[\\s\\S]*?\\*\\//g, \"\") // remove comments\n\t\t.replace(/\\s*([\\{\\}:;,])\\s*/g, \"$1\") // remove spaces around { } : ; ,\n\t\t.replace(/\\s+/g, \" \") // collapse multiple spaces into one\n\t\t.replace(/;\\}/g, \"}\") // remove ; before }\n\t\t.replace(/\\n/g, \"\") // remove break lines\n\t\t.trim();\n}\n","/**\n * Generates a short random ID.\n * @param length - The length of the ID.\n * @returns A short random ID.\n */\nexport function shortid(length = 8): string {\n\tconst chars =\n\t\t\"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";\n\tconst array = new Uint8Array(length);\n\tcrypto.getRandomValues(array);\n\treturn Array.from(array, (byte) => chars[byte % chars.length]).join(\"\");\n}\n","import { minify } from \"./minify\";\nimport { shortid } from \"./shortid\";\n\nexport type KeyframesObject = {\n\tname: string;\n\tcss: string;\n\ttoString(): string;\n};\n\n/**\n * Generates a unique name and returns a keyframes object that can be interpolated in template literals.\n */\nexport function keyframes(\n\tstrings: TemplateStringsArray,\n\t...exprs: unknown[]\n): KeyframesObject {\n\tconst rawCSS = String.raw({ raw: strings }, ...exprs);\n\tconst css = minify(rawCSS);\n\tconst id = `kf-${shortid()}`;\n\n\treturn {\n\t\tname: id,\n\t\tcss: `@keyframes ${id}{${css}}`,\n\t\ttoString() {\n\t\t\treturn id;\n\t\t},\n\t};\n}\n\n/**\n * Type guard to check if an object is a keyframes object.\n * @param value - The object to check.\n * @returns True if the object is a keyframes object, false otherwise.\n */\nexport function isKeyframesObject(value: unknown): value is KeyframesObject {\n\treturn (\n\t\ttypeof value === \"object\" &&\n\t\tvalue !== null &&\n\t\t\"css\" in value &&\n\t\t\"name\" in value &&\n\t\t\"toString\" in value &&\n\t\ttypeof (value as KeyframesObject).toString === \"function\"\n\t);\n}\n","import type {\n\tNubeComponent,\n\tNubeComponentProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { isKeyframesObject } from \"./keyframes\";\nimport { minify } from \"./minify\";\n\n/**\n * Type for functions that create Nube components.\n * This is used to ensure type safety when creating styled components.\n */\ntype NubeComponentFunction<Props = NubeComponentProps> = (\n\tprops: Props,\n) => NubeComponent;\n\n/**\n * `styled` allows declarative styling with CSS-in-JS.\n * The CSS is inserted directly into the `styled` prop as a string literal.\n */\nexport function styled<Props extends NubeComponentProps>(\n\tbaseComponent: NubeComponentFunction<Props>,\n) {\n\treturn (strings: TemplateStringsArray, ...exprs: unknown[]) => {\n\t\tconst StyledComponent: NubeComponentFunction<Props> = (props) => {\n\t\t\tconst component = baseComponent(props);\n\t\t\tif (typeof component === \"string\") return component;\n\n\t\t\tlet rawCSS = \"\";\n\t\t\tconst animation: string[] = [];\n\n\t\t\tfor (let i = 0; i < strings.length; i++) {\n\t\t\t\tconst currentString = strings[i] ?? \"\";\n\t\t\t\tconst expr = exprs[i];\n\n\t\t\t\tif (isKeyframesObject(expr)) {\n\t\t\t\t\tanimation.push(expr.css);\n\t\t\t\t\trawCSS += `${currentString}${expr.name} `;\n\t\t\t\t} else {\n\t\t\t\t\tconst value = expr === null || expr === undefined ? \"\" : String(expr);\n\t\t\t\t\trawCSS += `${currentString}${value}`;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst minifiedCSS = minify(`${animation.join(\"\")}${rawCSS}`);\n\n\t\t\tcomponent.styled = `${component.styled || \"\"}${minifiedCSS}`;\n\n\t\t\treturn component;\n\t\t};\n\n\t\treturn StyledComponent as typeof baseComponent;\n\t};\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/components/generateInternalId.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","../src/components/select.ts","../src/components/accordion.ts","../src/components/accordion-item.ts","../src/components/accordion-content.ts","../src/components/accordion.header.ts","../src/components/toast-root.ts","../src/components/toast-title.ts","../src/components/toast-description.ts","../src/components/icon.ts","../src/styles/ThemeColor.ts","../src/styles/StyleSheet.ts","../src/styles/theme.ts","../src/styles/minify.ts","../src/styles/shortid.ts","../src/styles/keyframes.ts","../src/styles/styled.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\";\nexport * from \"./components/select\";\nexport * from \"./components/accordion\";\nexport * from \"./components/accordion-item\";\nexport * from \"./components/accordion-content\";\nexport * from \"./components/accordion.header\";\nexport * from \"./components/toast-root\";\nexport * from \"./components/toast-title\";\nexport * from \"./components/toast-description\";\nexport * from \"./components/icon\";\nexport * from \"./styles/StyleSheet\";\nexport * from \"./styles/theme\";\nexport * from \"./styles/styled\";\nexport { keyframes } from \"./styles/keyframes\";\n","type Props = Record<string, unknown>;\n\nconst memo = new WeakMap<object, string>();\n\n/**\n * Serialize the props in a stable way, ignoring functions.\n */\nfunction stableStringify(value: unknown): string {\n\treturn JSON.stringify(value, (key, val) => {\n\t\tif (key === \"children\" && typeof val !== \"string\") return \"[children]\";\n\t\tif (typeof val === \"function\") return \"[fn]\";\n\t\treturn val;\n\t});\n}\n\n/**\n * djb2 hash function (32 bits, returning base36 for reduced size).\n */\nfunction djb2Hash(str: string): string {\n\tlet hash = 5381;\n\tfor (let i = 0; i < str.length; i++) {\n\t\thash = (hash * 33) ^ str.charCodeAt(i);\n\t}\n\treturn (hash >>> 0).toString(36); // eg: \"1v3tuh\"\n}\n\nfunction createId(type: string, hash: string) {\n\treturn `${type}-${self.__APP_DATA__.id}-${hash}`;\n}\n\n/**\n * Regular expression to validate the internal ID format: {type}-{appId}-{hash}\n * - type: component type (letters, numbers, underscore, hyphen)\n * - appId: application ID (alphanumeric)\n * - hash: base36 hash (letters and numbers)\n */\nfunction createInternalIdRegex(appId: string): RegExp {\n\t// Escape special regex characters in appId\n\tconst escapedAppId = appId.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n\treturn new RegExp(`^[a-zA-Z0-9_-]+-${escapedAppId}-[a-z0-9]+$`);\n}\n\nfunction isValidInternalId(id: unknown): id is string {\n\tif (typeof id !== \"string\" || id === \"\") return false;\n\n\tconst regex = createInternalIdRegex(self.__APP_DATA__.id);\n\treturn regex.test(id);\n}\n\n/**\n * Generate a stable ID for a component based on the type and props.\n */\nexport function generateInternalId(type: string, props: Props): string {\n\tif (isValidInternalId(props.__internalId)) return props.__internalId;\n\n\tconst cached = memo.get(props);\n\tif (cached) return createId(type, cached);\n\n\tconst key = stableStringify(props);\n\tconst hash = djb2Hash(key);\n\tmemo.set(props, hash);\n\n\treturn createId(type, hash);\n}\n","import type {\n\tNubeComponentBox,\n\tNubeComponentBoxProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"box\", props),\n});\n","import type {\n\tNubeComponentColumn,\n\tNubeComponentColumnProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"col\", props),\n});\n","import type {\n\tNubeComponentRow,\n\tNubeComponentRowProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"row\", props),\n});\n","import type {\n\tNubeComponentField,\n\tNubeComponentFieldProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"field\", props),\n});\n","import type {\n\tNubeComponentFragment,\n\tNubeComponentFragmentProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"fragment\", props),\n});\n","import type {\n\tNubeComponentImage,\n\tNubeComponentImageProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"img\", 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\t__internalId: generateInternalId(\"img\", props),\n});\n","import type {\n\tNubeComponentText,\n\tNubeComponentTextProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"txt\", 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\t__internalId: generateInternalId(\"txt\", props),\n});\n","import type {\n\tNubeComponentCheckbox,\n\tNubeComponentCheckboxProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"check\", 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\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"txtarea\", 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\t__internalId: generateInternalId(\"txtarea\", props),\n});\n","import type {\n\tNubeComponentButton,\n\tNubeComponentButtonProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"button\", props),\n});\n","import type {\n\tNubeComponentSelect,\n\tNubeComponentSelectProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `select` component.\n *\n * A `select` represents a dropdown menu that allows users to select one option from a list.\n * It supports properties such as `name`, `label`, `options`, and event handlers (`onChange`).\n */\nexport const select = (\n\tprops: NubeComponentSelectProps,\n): NubeComponentSelect => ({\n\ttype: \"select\",\n\t...props,\n\t__internalId: generateInternalId(\"select\", props),\n});\n","import type {\n\tNubeComponentAccordionRoot,\n\tNubeComponentAccordionRootProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion` component.\n *\n * An `accordion` is a vertically stacked list of items that can be expanded or collapsed to reveal their content.\n * It supports properties such as `defaultValue` for controlling which item is expanded by default, and custom styling.\n */\nexport const accordionRoot = (\n\tprops: NubeComponentAccordionRootProps,\n): NubeComponentAccordionRoot => ({\n\ttype: \"accordionRoot\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionRoot\", props),\n});\n","import type {\n\tNubeComponentAccordionItem,\n\tNubeComponentAccordionItemProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion-item` component.\n *\n * An `accordion-item` represents a single item within an accordion.\n * Each item contains a header that can be clicked to show/hide its content.\n * It supports properties such as `title`, `content`, `isExpanded`, and event handlers (`onToggle`).\n */\nexport const accordionItem = (\n\tprops: NubeComponentAccordionItemProps,\n): NubeComponentAccordionItem => ({\n\ttype: \"accordionItem\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionItem\", props),\n});\n","import type {\n\tNubeComponentAccordionContent,\n\tNubeComponentAccordionContentProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion-content` component.\n *\n * An `accordion-content` represents the content of an accordion item.\n * It supports properties such as `children`.\n */\nexport const accordionContent = (\n\tprops: NubeComponentAccordionContentProps,\n): NubeComponentAccordionContent => ({\n\ttype: \"accordionContent\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionContent\", props),\n});\n","import type {\n\tNubeComponentAccordionHeader,\n\tNubeComponentAccordionHeaderProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion-header` component.\n *\n * An `accordion-header` represents the header of an accordion item.\n * It supports properties such as `children`.\n */\nexport const accordionHeader = (\n\tprops: NubeComponentAccordionHeaderProps,\n): NubeComponentAccordionHeader => ({\n\ttype: \"accordionHeader\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionHeader\", props),\n});\n","import type {\n\tNubeComponentToastRoot,\n\tNubeComponentToastRootProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `toast` component.\n *\n * A `toast` is a small notification that appears at the bottom of the screen to inform the user about an action or a message.\n * It supports properties such as `type` for controlling the type of toast, and custom styling.\n */\nexport const toastRoot = (\n\tprops: NubeComponentToastRootProps,\n): NubeComponentToastRoot => ({\n\ttype: \"toastRoot\",\n\t...props,\n\t__internalId: generateInternalId(\"toastRoot\", props),\n});\n","import type {\n\tNubeComponentToastTitle,\n\tNubeComponentToastTitleProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `toast` title component.\n *\n * A `toast` title is a small notification that appears at the bottom of the screen to inform the user about an action or a message.\n * It supports properties such as `children` for the title text, and custom styling.\n */\nexport const toastTitle = (\n\tprops: NubeComponentToastTitleProps,\n): NubeComponentToastTitle => ({\n\ttype: \"toastTitle\",\n\t...props,\n\t__internalId: generateInternalId(\"toastTitle\", props),\n});\n","import type {\n\tNubeComponentToastDescription,\n\tNubeComponentToastDescriptionProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `toast` description component.\n *\n * A `toast` description is a small notification that appears at the bottom of the screen to inform the user about an action or a message.\n * It supports properties such as `children` for the description text, and custom styling.\n */\nexport const toastDescription = (\n\tprops: NubeComponentToastDescriptionProps,\n): NubeComponentToastDescription => ({\n\ttype: \"toastDescription\",\n\t...props,\n\t__internalId: generateInternalId(\"toastDescription\", props),\n});\n","import type {\n\tNubeComponentIcon,\n\tNubeComponentIconProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `icon` component.\n *\n * @param props - The properties for configuring the icon component.\n * @returns A `NubeComponentIcon` object representing the icon.\n */\nexport const icon = (props: NubeComponentIconProps): NubeComponentIcon => ({\n\ttype: \"icon\",\n\t...props,\n\t__internalId: generateInternalId(\"icon\", props),\n});\n","export type ThemeColorOpacityRange =\n\t| 0\n\t| 5\n\t| 10\n\t| 20\n\t| 30\n\t| 40\n\t| 50\n\t| 60\n\t| 70\n\t| 80\n\t| 90;\n\nexport class ThemeColor {\n\tconstructor(private readonly token: string) {}\n\n\topacity(opacity: ThemeColorOpacityRange) {\n\t\treturn `var(--${this.token}-opacity-${opacity.toString().padStart(2, \"0\")})`;\n\t}\n\n\ttoValue(): string {\n\t\treturn `var(--${this.token})`;\n\t}\n\n\ttoString() {\n\t\treturn this.toValue();\n\t}\n}\n","import type { Size } from \"@tiendanube/nube-sdk-types\";\nimport type * as CSS from \"csstype\";\nimport { ThemeColor } from \"./ThemeColor\";\nimport type { ThemeCSSValue } from \"./theme\";\n\n/**\n * Maps properties that should use the Size type\n */\ntype SizePropertyKeys =\n\t| \"width\"\n\t| \"height\"\n\t| \"minWidth\"\n\t| \"minHeight\"\n\t| \"maxWidth\"\n\t| \"maxHeight\"\n\t| \"top\"\n\t| \"right\"\n\t| \"bottom\"\n\t| \"left\"\n\t| \"margin\"\n\t| \"marginTop\"\n\t| \"marginBottom\"\n\t| \"marginLeft\"\n\t| \"marginRight\"\n\t| \"padding\"\n\t| \"paddingTop\"\n\t| \"paddingBottom\"\n\t| \"paddingLeft\"\n\t| \"paddingRight\"\n\t| \"fontSize\"\n\t| \"lineHeight\"\n\t| \"borderWidth\"\n\t| \"borderRadius\";\n\n/**\n * Applies Size only to size properties.\n * The others remain as string | number.\n */\ntype EnhancedCSSProperties = {\n\t[K in keyof CSS.Properties]?: K extends SizePropertyKeys\n\t\t? Size | ThemeCSSValue\n\t\t: CSS.Properties[K] | ThemeCSSValue;\n};\n\n/**\n * Define named styles\n */\nexport type NubeComponentStyle = Partial<EnhancedCSSProperties>;\n\nfunction parseValue(value: unknown): unknown {\n\tif (value instanceof ThemeColor) {\n\t\treturn value.toValue();\n\t}\n\treturn value;\n}\n\nfunction parseStyleObject(\n\tstyle: Record<string, unknown>,\n): Record<string, unknown> {\n\tconst parsed: Record<string, unknown> = {};\n\tfor (const key in style) {\n\t\tconst val = style[key];\n\t\tif (\n\t\t\tval &&\n\t\t\ttypeof val === \"object\" &&\n\t\t\t!Array.isArray(val) &&\n\t\t\t!(val instanceof ThemeColor) &&\n\t\t\tObject.prototype.hasOwnProperty.call(val, \"toString\")\n\t\t) {\n\t\t\tparsed[key] = parseStyleObject(val as Record<string, unknown>);\n\t\t} else {\n\t\t\tparsed[key] = parseValue(val);\n\t\t}\n\t}\n\treturn parsed;\n}\n\nexport const StyleSheet = {\n\tcreate<T extends { [key: string]: NubeComponentStyle }>(styles: T): T {\n\t\tconst parsedStyles: Record<string, unknown> = {};\n\t\tfor (const key in styles) {\n\t\t\tparsedStyles[key] = parseStyleObject(\n\t\t\t\tstyles[key] as Record<string, unknown>,\n\t\t\t);\n\t\t}\n\t\treturn parsedStyles as T;\n\t},\n} as const;\n","import { ThemeColor } from \"./ThemeColor\";\n\nexport const theme = {\n\tcolor: {\n\t\taccent: new ThemeColor(\"accent-color\"),\n\t\tmain: {\n\t\t\tforeground: new ThemeColor(\"main-foreground\"),\n\t\t\tbackground: new ThemeColor(\"main-background\"),\n\t\t},\n\t},\n\tborder: {\n\t\tcolor: \"var(--border-color)\",\n\t\tradius: \"var(--border-radius)\",\n\t},\n\tbox: {\n\t\tborder: {\n\t\t\tcolor: \"var(--box-border-color)\",\n\t\t\tradius: \"var(--box-border-radius)\",\n\t\t},\n\t},\n\tinput: {\n\t\tborder: {\n\t\t\tcolor: \"var(--input-border-color)\",\n\t\t},\n\t},\n\tbutton: {\n\t\tforeground: \"var(--button-foreground)\",\n\t\tbackground: \"var(--button-background)\",\n\t\tborderColor: \"var(--button-border-color)\",\n\t\tborderRadius: \"var(--button-border-radius)\",\n\t},\n\tlabel: {\n\t\tforeground: \"var(--label-foreground)\",\n\t\tbackground: \"var(--label-background)\",\n\t},\n\theader: {\n\t\tforeground: \"var(--header-foreground)\",\n\t\tbackground: \"var(--header-background)\",\n\t\tlogo: {\n\t\t\tmaxWidth: \"var(--header-logo-max-width)\",\n\t\t\tmaxHeight: \"var(--header-logo-max-height)\",\n\t\t\tfont: \"var(--header-logo-font)\",\n\t\t\tfontSize: \"var(--header-logo-font-size)\",\n\t\t\tfontWeight: \"var(--header-logo-font-weight)\",\n\t\t\ttextTransform: \"var(--header-logo-text-transform)\",\n\t\t\tletterSpacing: \"var(--header-logo-letter-spacing)\",\n\t\t},\n\t},\n\tfooter: {\n\t\tforeground: \"var(--footer-foreground)\",\n\t\tbackground: \"var(--footer-background)\",\n\t},\n\theading: {\n\t\tfont: \"var(--heading-font)\",\n\t\tfontWeight: \"var(--heading-font-weight)\",\n\t\ttextTransform: \"var(--heading-text-transform)\",\n\t\tletterSpacing: \"var(--heading-letter-spacing)\",\n\t},\n} as const;\n\nexport type Theme = typeof theme;\nexport type ThemeColorValue = ReturnType<ThemeColor[\"toValue\"]>;\nexport type ThemeColorOpacityValue = ReturnType<ThemeColor[\"opacity\"]>;\n\ntype ThemeCSSPrimitive = string | number;\n\nexport type ThemeCSSValue =\n\t| ThemeColor\n\t| ThemeColorOpacityValue\n\t| ThemeCSSPrimitive;\n","/**\n * Minifies an inline CSS string by removing line breaks and unnecessary spaces.\n */\nexport function minify(css: string): string {\n\treturn css\n\t\t.replace(/\\/\\*[\\s\\S]*?\\*\\//g, \"\") // remove comments\n\t\t.replace(/\\s*([\\{\\}:;,])\\s*/g, \"$1\") // remove spaces around { } : ; ,\n\t\t.replace(/\\s+/g, \" \") // collapse multiple spaces into one\n\t\t.replace(/;\\}/g, \"}\") // remove ; before }\n\t\t.replace(/\\n/g, \"\") // remove break lines\n\t\t.trim();\n}\n","/**\n * Generates a short random ID.\n * @param length - The length of the ID.\n * @returns A short random ID.\n */\nexport function shortid(length = 8): string {\n\tconst chars =\n\t\t\"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";\n\tconst array = new Uint8Array(length);\n\tcrypto.getRandomValues(array);\n\treturn Array.from(array, (byte) => chars[byte % chars.length]).join(\"\");\n}\n","import { minify } from \"./minify\";\nimport { shortid } from \"./shortid\";\n\nexport type KeyframesObject = {\n\tname: string;\n\tcss: string;\n\ttoString(): string;\n};\n\n/**\n * Generates a unique name and returns a keyframes object that can be interpolated in template literals.\n */\nexport function keyframes(\n\tstrings: TemplateStringsArray,\n\t...exprs: unknown[]\n): KeyframesObject {\n\tconst rawCSS = String.raw({ raw: strings }, ...exprs);\n\tconst css = minify(rawCSS);\n\tconst id = `kf-${shortid()}`;\n\n\treturn {\n\t\tname: id,\n\t\tcss: `@keyframes ${id}{${css}}`,\n\t\ttoString() {\n\t\t\treturn id;\n\t\t},\n\t};\n}\n\n/**\n * Type guard to check if an object is a keyframes object.\n * @param value - The object to check.\n * @returns True if the object is a keyframes object, false otherwise.\n */\nexport function isKeyframesObject(value: unknown): value is KeyframesObject {\n\treturn (\n\t\ttypeof value === \"object\" &&\n\t\tvalue !== null &&\n\t\t\"css\" in value &&\n\t\t\"name\" in value &&\n\t\t\"toString\" in value &&\n\t\ttypeof (value as KeyframesObject).toString === \"function\"\n\t);\n}\n","import type {\n\tNubeComponent,\n\tNubeComponentProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"../components/generateInternalId\";\nimport { isKeyframesObject } from \"./keyframes\";\nimport { minify } from \"./minify\";\n\n/**\n * Type for functions that create Nube components.\n * This is used to ensure type safety when creating styled components.\n */\ntype NubeComponentFunction<Props = NubeComponentProps> = (\n\tprops: Props,\n) => NubeComponent;\n\n/**\n * `styled` allows declarative styling with CSS-in-JS.\n * The CSS is inserted directly into the `styled` prop as a string literal.\n */\nexport function styled<Props extends NubeComponentProps>(\n\tbaseComponent: NubeComponentFunction<Props>,\n) {\n\treturn (strings: TemplateStringsArray, ...exprs: unknown[]) => {\n\t\tconst StyledComponent: NubeComponentFunction<Props> = (props) => {\n\t\t\tlet rawCSS = \"\";\n\t\t\tconst animation: string[] = [];\n\n\t\t\tfor (let i = 0; i < strings.length; i++) {\n\t\t\t\tconst currentString = strings[i] ?? \"\";\n\t\t\t\tconst expr = exprs[i];\n\n\t\t\t\tif (isKeyframesObject(expr)) {\n\t\t\t\t\tanimation.push(expr.css);\n\t\t\t\t\trawCSS += `${currentString}${expr.name} `;\n\t\t\t\t} else {\n\t\t\t\t\tconst value = expr === null || expr === undefined ? \"\" : String(expr);\n\t\t\t\t\trawCSS += `${currentString}${value}`;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst minifiedCSS = minify(`${animation.join(\"\")}${rawCSS}`);\n\n\t\t\tconst componentType = baseComponent.name || \"component\";\n\n\t\t\tconst internalId = generateInternalId(componentType, {\n\t\t\t\t...props,\n\t\t\t\t__styledCSS: minifiedCSS,\n\t\t\t});\n\n\t\t\t// Create the base component with pre-generated ID\n\t\t\tconst component = baseComponent({ ...props, __internalId: internalId });\n\n\t\t\tif (typeof component === \"string\") return component;\n\n\t\t\t// Apply the styled CSS\n\t\t\tcomponent.styled = `${component.styled || \"\"}${minifiedCSS}`;\n\n\t\t\treturn component;\n\t\t};\n\n\t\treturn StyledComponent as typeof baseComponent;\n\t};\n}\n"],"mappings":"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","names":[]}

package/dist/index.js

@@ -17,7 +17,17 @@ function djb2Hash(str) {
 function createId(type, hash) {
   return `${type}-${self.__APP_DATA__.id}-${hash}`;
 }
+function createInternalIdRegex(appId) {
+  const escapedAppId = appId.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`^[a-zA-Z0-9_-]+-${escapedAppId}-[a-z0-9]+$`);
+}
+function isValidInternalId(id) {
+  if (typeof id !== "string" || id === "") return false;
+  const regex = createInternalIdRegex(self.__APP_DATA__.id);
+  return regex.test(id);
+}
 function generateInternalId(type, props) {
+  if (isValidInternalId(props.__internalId)) return props.__internalId;
   const cached = memo.get(props);
   if (cached) return createId(type, cached);
   const key = stableStringify(props);
@@ -318,8 +328,6 @@ function isKeyframesObject(value) {
 function styled(baseComponent) {
   return (strings, ...exprs) => {
     const StyledComponent = (props) => {
-      const component = baseComponent(props);
-      if (typeof component === "string") return component;
       let rawCSS = "";
       const animation = [];
       for (let i = 0; i < strings.length; i++) {
@@ -334,6 +342,13 @@ function styled(baseComponent) {
         }
       }
       const minifiedCSS = minify(`${animation.join("")}${rawCSS}`);
+      const componentType = baseComponent.name || "component";
+      const internalId = generateInternalId(componentType, {
+        ...props,
+        __styledCSS: minifiedCSS
+      });
+      const component = baseComponent({ ...props, __internalId: internalId });
+      if (typeof component === "string") return component;
       component.styled = `${component.styled || ""}${minifiedCSS}`;
       return component;
     };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/generateInternalId.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","../src/components/select.ts","../src/components/accordion.ts","../src/components/accordion-item.ts","../src/components/accordion-content.ts","../src/components/accordion.header.ts","../src/components/toast-root.ts","../src/components/toast-title.ts","../src/components/toast-description.ts","../src/components/icon.ts","../src/styles/ThemeColor.ts","../src/styles/StyleSheet.ts","../src/styles/theme.ts","../src/styles/minify.ts","../src/styles/shortid.ts","../src/styles/keyframes.ts","../src/styles/styled.ts"],"sourcesContent":["type Props = Record<string, unknown>;\n\nconst memo = new WeakMap<object, string>();\n\n/**\n * Serialize the props in a stable way, ignoring functions.\n */\nfunction stableStringify(value: unknown): string {\n\treturn JSON.stringify(value, (key, val) => {\n\t\tif (key === \"children\" && typeof val !== \"string\") return \"[children]\";\n\t\tif (typeof val === \"function\") return \"[fn]\";\n\t\treturn val;\n\t});\n}\n\n/**\n * djb2 hash function (32 bits, returning base36 for reduced size).\n */\nfunction djb2Hash(str: string): string {\n\tlet hash = 5381;\n\tfor (let i = 0; i < str.length; i++) {\n\t\thash = (hash * 33) ^ str.charCodeAt(i);\n\t}\n\treturn (hash >>> 0).toString(36); // eg: \"1v3tuh\"\n}\n\nfunction createId(type: string, hash: string) {\n\treturn `${type}-${self.__APP_DATA__.id}-${hash}`;\n}\n\n/**\n * Generate a stable ID for a component based on the type and props.\n */\nexport function generateInternalId(type: string, props: Props): string {\n\t// Use cache based on the props reference\n\tconst cached = memo.get(props);\n\tif (cached) return createId(type, cached);\n\n\tconst key = stableStringify(props);\n\tconst hash = djb2Hash(key);\n\tmemo.set(props, hash);\n\n\treturn createId(type, hash);\n}\n","import type {\n\tNubeComponentBox,\n\tNubeComponentBoxProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"box\", props),\n});\n","import type {\n\tNubeComponentColumn,\n\tNubeComponentColumnProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"col\", props),\n});\n","import type {\n\tNubeComponentRow,\n\tNubeComponentRowProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"row\", props),\n});\n","import type {\n\tNubeComponentField,\n\tNubeComponentFieldProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"field\", props),\n});\n","import type {\n\tNubeComponentFragment,\n\tNubeComponentFragmentProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"fragment\", props),\n});\n","import type {\n\tNubeComponentImage,\n\tNubeComponentImageProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"img\", 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\t__internalId: generateInternalId(\"img\", props),\n});\n","import type {\n\tNubeComponentText,\n\tNubeComponentTextProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"txt\", 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\t__internalId: generateInternalId(\"txt\", props),\n});\n","import type {\n\tNubeComponentCheckbox,\n\tNubeComponentCheckboxProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"check\", 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\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"txtarea\", 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\t__internalId: generateInternalId(\"txtarea\", props),\n});\n","import type {\n\tNubeComponentButton,\n\tNubeComponentButtonProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"button\", props),\n});\n","import type {\n\tNubeComponentSelect,\n\tNubeComponentSelectProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `select` component.\n *\n * A `select` represents a dropdown menu that allows users to select one option from a list.\n * It supports properties such as `name`, `label`, `options`, and event handlers (`onChange`).\n */\nexport const select = (\n\tprops: NubeComponentSelectProps,\n): NubeComponentSelect => ({\n\ttype: \"select\",\n\t...props,\n\t__internalId: generateInternalId(\"select\", props),\n});\n","import type {\n\tNubeComponentAccordionRoot,\n\tNubeComponentAccordionRootProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion` component.\n *\n * An `accordion` is a vertically stacked list of items that can be expanded or collapsed to reveal their content.\n * It supports properties such as `defaultValue` for controlling which item is expanded by default, and custom styling.\n */\nexport const accordionRoot = (\n\tprops: NubeComponentAccordionRootProps,\n): NubeComponentAccordionRoot => ({\n\ttype: \"accordionRoot\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionRoot\", props),\n});\n","import type {\n\tNubeComponentAccordionItem,\n\tNubeComponentAccordionItemProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion-item` component.\n *\n * An `accordion-item` represents a single item within an accordion.\n * Each item contains a header that can be clicked to show/hide its content.\n * It supports properties such as `title`, `content`, `isExpanded`, and event handlers (`onToggle`).\n */\nexport const accordionItem = (\n\tprops: NubeComponentAccordionItemProps,\n): NubeComponentAccordionItem => ({\n\ttype: \"accordionItem\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionItem\", props),\n});\n","import type {\n\tNubeComponentAccordionContent,\n\tNubeComponentAccordionContentProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion-content` component.\n *\n * An `accordion-content` represents the content of an accordion item.\n * It supports properties such as `children`.\n */\nexport const accordionContent = (\n\tprops: NubeComponentAccordionContentProps,\n): NubeComponentAccordionContent => ({\n\ttype: \"accordionContent\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionContent\", props),\n});\n","import type {\n\tNubeComponentAccordionHeader,\n\tNubeComponentAccordionHeaderProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion-header` component.\n *\n * An `accordion-header` represents the header of an accordion item.\n * It supports properties such as `children`.\n */\nexport const accordionHeader = (\n\tprops: NubeComponentAccordionHeaderProps,\n): NubeComponentAccordionHeader => ({\n\ttype: \"accordionHeader\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionHeader\", props),\n});\n","import type {\n\tNubeComponentToastRoot,\n\tNubeComponentToastRootProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `toast` component.\n *\n * A `toast` is a small notification that appears at the bottom of the screen to inform the user about an action or a message.\n * It supports properties such as `type` for controlling the type of toast, and custom styling.\n */\nexport const toastRoot = (\n\tprops: NubeComponentToastRootProps,\n): NubeComponentToastRoot => ({\n\ttype: \"toastRoot\",\n\t...props,\n\t__internalId: generateInternalId(\"toastRoot\", props),\n});\n","import type {\n\tNubeComponentToastTitle,\n\tNubeComponentToastTitleProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `toast` title component.\n *\n * A `toast` title is a small notification that appears at the bottom of the screen to inform the user about an action or a message.\n * It supports properties such as `children` for the title text, and custom styling.\n */\nexport const toastTitle = (\n\tprops: NubeComponentToastTitleProps,\n): NubeComponentToastTitle => ({\n\ttype: \"toastTitle\",\n\t...props,\n\t__internalId: generateInternalId(\"toastTitle\", props),\n});\n","import type {\n\tNubeComponentToastDescription,\n\tNubeComponentToastDescriptionProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `toast` description component.\n *\n * A `toast` description is a small notification that appears at the bottom of the screen to inform the user about an action or a message.\n * It supports properties such as `children` for the description text, and custom styling.\n */\nexport const toastDescription = (\n\tprops: NubeComponentToastDescriptionProps,\n): NubeComponentToastDescription => ({\n\ttype: \"toastDescription\",\n\t...props,\n\t__internalId: generateInternalId(\"toastDescription\", props),\n});\n","import type {\n\tNubeComponentIcon,\n\tNubeComponentIconProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `icon` component.\n *\n * @param props - The properties for configuring the icon component.\n * @returns A `NubeComponentIcon` object representing the icon.\n */\nexport const icon = (props: NubeComponentIconProps): NubeComponentIcon => ({\n\ttype: \"icon\",\n\t...props,\n\t__internalId: generateInternalId(\"icon\", props),\n});\n","export type ThemeColorOpacityRange =\n\t| 0\n\t| 5\n\t| 10\n\t| 20\n\t| 30\n\t| 40\n\t| 50\n\t| 60\n\t| 70\n\t| 80\n\t| 90;\n\nexport class ThemeColor {\n\tconstructor(private readonly token: string) {}\n\n\topacity(opacity: ThemeColorOpacityRange) {\n\t\treturn `var(--${this.token}-opacity-${opacity.toString().padStart(2, \"0\")})`;\n\t}\n\n\ttoValue(): string {\n\t\treturn `var(--${this.token})`;\n\t}\n\n\ttoString() {\n\t\treturn this.toValue();\n\t}\n}\n","import type { Size } from \"@tiendanube/nube-sdk-types\";\nimport type * as CSS from \"csstype\";\nimport { ThemeColor } from \"./ThemeColor\";\nimport type { ThemeCSSValue } from \"./theme\";\n\n/**\n * Maps properties that should use the Size type\n */\ntype SizePropertyKeys =\n\t| \"width\"\n\t| \"height\"\n\t| \"minWidth\"\n\t| \"minHeight\"\n\t| \"maxWidth\"\n\t| \"maxHeight\"\n\t| \"top\"\n\t| \"right\"\n\t| \"bottom\"\n\t| \"left\"\n\t| \"margin\"\n\t| \"marginTop\"\n\t| \"marginBottom\"\n\t| \"marginLeft\"\n\t| \"marginRight\"\n\t| \"padding\"\n\t| \"paddingTop\"\n\t| \"paddingBottom\"\n\t| \"paddingLeft\"\n\t| \"paddingRight\"\n\t| \"fontSize\"\n\t| \"lineHeight\"\n\t| \"borderWidth\"\n\t| \"borderRadius\";\n\n/**\n * Applies Size only to size properties.\n * The others remain as string | number.\n */\ntype EnhancedCSSProperties = {\n\t[K in keyof CSS.Properties]?: K extends SizePropertyKeys\n\t\t? Size | ThemeCSSValue\n\t\t: CSS.Properties[K] | ThemeCSSValue;\n};\n\n/**\n * Define named styles\n */\nexport type NubeComponentStyle = Partial<EnhancedCSSProperties>;\n\nfunction parseValue(value: unknown): unknown {\n\tif (value instanceof ThemeColor) {\n\t\treturn value.toValue();\n\t}\n\treturn value;\n}\n\nfunction parseStyleObject(\n\tstyle: Record<string, unknown>,\n): Record<string, unknown> {\n\tconst parsed: Record<string, unknown> = {};\n\tfor (const key in style) {\n\t\tconst val = style[key];\n\t\tif (\n\t\t\tval &&\n\t\t\ttypeof val === \"object\" &&\n\t\t\t!Array.isArray(val) &&\n\t\t\t!(val instanceof ThemeColor) &&\n\t\t\tObject.prototype.hasOwnProperty.call(val, \"toString\")\n\t\t) {\n\t\t\tparsed[key] = parseStyleObject(val as Record<string, unknown>);\n\t\t} else {\n\t\t\tparsed[key] = parseValue(val);\n\t\t}\n\t}\n\treturn parsed;\n}\n\nexport const StyleSheet = {\n\tcreate<T extends { [key: string]: NubeComponentStyle }>(styles: T): T {\n\t\tconst parsedStyles: Record<string, unknown> = {};\n\t\tfor (const key in styles) {\n\t\t\tparsedStyles[key] = parseStyleObject(\n\t\t\t\tstyles[key] as Record<string, unknown>,\n\t\t\t);\n\t\t}\n\t\treturn parsedStyles as T;\n\t},\n} as const;\n","import { ThemeColor } from \"./ThemeColor\";\n\nexport const theme = {\n\tcolor: {\n\t\taccent: new ThemeColor(\"accent-color\"),\n\t\tmain: {\n\t\t\tforeground: new ThemeColor(\"main-foreground\"),\n\t\t\tbackground: new ThemeColor(\"main-background\"),\n\t\t},\n\t},\n\tborder: {\n\t\tcolor: \"var(--border-color)\",\n\t\tradius: \"var(--border-radius)\",\n\t},\n\tbox: {\n\t\tborder: {\n\t\t\tcolor: \"var(--box-border-color)\",\n\t\t\tradius: \"var(--box-border-radius)\",\n\t\t},\n\t},\n\tinput: {\n\t\tborder: {\n\t\t\tcolor: \"var(--input-border-color)\",\n\t\t},\n\t},\n\tbutton: {\n\t\tforeground: \"var(--button-foreground)\",\n\t\tbackground: \"var(--button-background)\",\n\t\tborderColor: \"var(--button-border-color)\",\n\t\tborderRadius: \"var(--button-border-radius)\",\n\t},\n\tlabel: {\n\t\tforeground: \"var(--label-foreground)\",\n\t\tbackground: \"var(--label-background)\",\n\t},\n\theader: {\n\t\tforeground: \"var(--header-foreground)\",\n\t\tbackground: \"var(--header-background)\",\n\t\tlogo: {\n\t\t\tmaxWidth: \"var(--header-logo-max-width)\",\n\t\t\tmaxHeight: \"var(--header-logo-max-height)\",\n\t\t\tfont: \"var(--header-logo-font)\",\n\t\t\tfontSize: \"var(--header-logo-font-size)\",\n\t\t\tfontWeight: \"var(--header-logo-font-weight)\",\n\t\t\ttextTransform: \"var(--header-logo-text-transform)\",\n\t\t\tletterSpacing: \"var(--header-logo-letter-spacing)\",\n\t\t},\n\t},\n\tfooter: {\n\t\tforeground: \"var(--footer-foreground)\",\n\t\tbackground: \"var(--footer-background)\",\n\t},\n\theading: {\n\t\tfont: \"var(--heading-font)\",\n\t\tfontWeight: \"var(--heading-font-weight)\",\n\t\ttextTransform: \"var(--heading-text-transform)\",\n\t\tletterSpacing: \"var(--heading-letter-spacing)\",\n\t},\n} as const;\n\nexport type Theme = typeof theme;\nexport type ThemeColorValue = ReturnType<ThemeColor[\"toValue\"]>;\nexport type ThemeColorOpacityValue = ReturnType<ThemeColor[\"opacity\"]>;\n\ntype ThemeCSSPrimitive = string | number;\n\nexport type ThemeCSSValue =\n\t| ThemeColor\n\t| ThemeColorOpacityValue\n\t| ThemeCSSPrimitive;\n","/**\n * Minifies an inline CSS string by removing line breaks and unnecessary spaces.\n */\nexport function minify(css: string): string {\n\treturn css\n\t\t.replace(/\\/\\*[\\s\\S]*?\\*\\//g, \"\") // remove comments\n\t\t.replace(/\\s*([\\{\\}:;,])\\s*/g, \"$1\") // remove spaces around { } : ; ,\n\t\t.replace(/\\s+/g, \" \") // collapse multiple spaces into one\n\t\t.replace(/;\\}/g, \"}\") // remove ; before }\n\t\t.replace(/\\n/g, \"\") // remove break lines\n\t\t.trim();\n}\n","/**\n * Generates a short random ID.\n * @param length - The length of the ID.\n * @returns A short random ID.\n */\nexport function shortid(length = 8): string {\n\tconst chars =\n\t\t\"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";\n\tconst array = new Uint8Array(length);\n\tcrypto.getRandomValues(array);\n\treturn Array.from(array, (byte) => chars[byte % chars.length]).join(\"\");\n}\n","import { minify } from \"./minify\";\nimport { shortid } from \"./shortid\";\n\nexport type KeyframesObject = {\n\tname: string;\n\tcss: string;\n\ttoString(): string;\n};\n\n/**\n * Generates a unique name and returns a keyframes object that can be interpolated in template literals.\n */\nexport function keyframes(\n\tstrings: TemplateStringsArray,\n\t...exprs: unknown[]\n): KeyframesObject {\n\tconst rawCSS = String.raw({ raw: strings }, ...exprs);\n\tconst css = minify(rawCSS);\n\tconst id = `kf-${shortid()}`;\n\n\treturn {\n\t\tname: id,\n\t\tcss: `@keyframes ${id}{${css}}`,\n\t\ttoString() {\n\t\t\treturn id;\n\t\t},\n\t};\n}\n\n/**\n * Type guard to check if an object is a keyframes object.\n * @param value - The object to check.\n * @returns True if the object is a keyframes object, false otherwise.\n */\nexport function isKeyframesObject(value: unknown): value is KeyframesObject {\n\treturn (\n\t\ttypeof value === \"object\" &&\n\t\tvalue !== null &&\n\t\t\"css\" in value &&\n\t\t\"name\" in value &&\n\t\t\"toString\" in value &&\n\t\ttypeof (value as KeyframesObject).toString === \"function\"\n\t);\n}\n","import type {\n\tNubeComponent,\n\tNubeComponentProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { isKeyframesObject } from \"./keyframes\";\nimport { minify } from \"./minify\";\n\n/**\n * Type for functions that create Nube components.\n * This is used to ensure type safety when creating styled components.\n */\ntype NubeComponentFunction<Props = NubeComponentProps> = (\n\tprops: Props,\n) => NubeComponent;\n\n/**\n * `styled` allows declarative styling with CSS-in-JS.\n * The CSS is inserted directly into the `styled` prop as a string literal.\n */\nexport function styled<Props extends NubeComponentProps>(\n\tbaseComponent: NubeComponentFunction<Props>,\n) {\n\treturn (strings: TemplateStringsArray, ...exprs: unknown[]) => {\n\t\tconst StyledComponent: NubeComponentFunction<Props> = (props) => {\n\t\t\tconst component = baseComponent(props);\n\t\t\tif (typeof component === \"string\") return component;\n\n\t\t\tlet rawCSS = \"\";\n\t\t\tconst animation: string[] = [];\n\n\t\t\tfor (let i = 0; i < strings.length; i++) {\n\t\t\t\tconst currentString = strings[i] ?? \"\";\n\t\t\t\tconst expr = exprs[i];\n\n\t\t\t\tif (isKeyframesObject(expr)) {\n\t\t\t\t\tanimation.push(expr.css);\n\t\t\t\t\trawCSS += `${currentString}${expr.name} `;\n\t\t\t\t} else {\n\t\t\t\t\tconst value = expr === null || expr === undefined ? \"\" : String(expr);\n\t\t\t\t\trawCSS += `${currentString}${value}`;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst minifiedCSS = minify(`${animation.join(\"\")}${rawCSS}`);\n\n\t\t\tcomponent.styled = `${component.styled || \"\"}${minifiedCSS}`;\n\n\t\t\treturn component;\n\t\t};\n\n\t\treturn StyledComponent as typeof baseComponent;\n\t};\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/components/generateInternalId.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","../src/components/select.ts","../src/components/accordion.ts","../src/components/accordion-item.ts","../src/components/accordion-content.ts","../src/components/accordion.header.ts","../src/components/toast-root.ts","../src/components/toast-title.ts","../src/components/toast-description.ts","../src/components/icon.ts","../src/styles/ThemeColor.ts","../src/styles/StyleSheet.ts","../src/styles/theme.ts","../src/styles/minify.ts","../src/styles/shortid.ts","../src/styles/keyframes.ts","../src/styles/styled.ts"],"sourcesContent":["type Props = Record<string, unknown>;\n\nconst memo = new WeakMap<object, string>();\n\n/**\n * Serialize the props in a stable way, ignoring functions.\n */\nfunction stableStringify(value: unknown): string {\n\treturn JSON.stringify(value, (key, val) => {\n\t\tif (key === \"children\" && typeof val !== \"string\") return \"[children]\";\n\t\tif (typeof val === \"function\") return \"[fn]\";\n\t\treturn val;\n\t});\n}\n\n/**\n * djb2 hash function (32 bits, returning base36 for reduced size).\n */\nfunction djb2Hash(str: string): string {\n\tlet hash = 5381;\n\tfor (let i = 0; i < str.length; i++) {\n\t\thash = (hash * 33) ^ str.charCodeAt(i);\n\t}\n\treturn (hash >>> 0).toString(36); // eg: \"1v3tuh\"\n}\n\nfunction createId(type: string, hash: string) {\n\treturn `${type}-${self.__APP_DATA__.id}-${hash}`;\n}\n\n/**\n * Regular expression to validate the internal ID format: {type}-{appId}-{hash}\n * - type: component type (letters, numbers, underscore, hyphen)\n * - appId: application ID (alphanumeric)\n * - hash: base36 hash (letters and numbers)\n */\nfunction createInternalIdRegex(appId: string): RegExp {\n\t// Escape special regex characters in appId\n\tconst escapedAppId = appId.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n\treturn new RegExp(`^[a-zA-Z0-9_-]+-${escapedAppId}-[a-z0-9]+$`);\n}\n\nfunction isValidInternalId(id: unknown): id is string {\n\tif (typeof id !== \"string\" || id === \"\") return false;\n\n\tconst regex = createInternalIdRegex(self.__APP_DATA__.id);\n\treturn regex.test(id);\n}\n\n/**\n * Generate a stable ID for a component based on the type and props.\n */\nexport function generateInternalId(type: string, props: Props): string {\n\tif (isValidInternalId(props.__internalId)) return props.__internalId;\n\n\tconst cached = memo.get(props);\n\tif (cached) return createId(type, cached);\n\n\tconst key = stableStringify(props);\n\tconst hash = djb2Hash(key);\n\tmemo.set(props, hash);\n\n\treturn createId(type, hash);\n}\n","import type {\n\tNubeComponentBox,\n\tNubeComponentBoxProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"box\", props),\n});\n","import type {\n\tNubeComponentColumn,\n\tNubeComponentColumnProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"col\", props),\n});\n","import type {\n\tNubeComponentRow,\n\tNubeComponentRowProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"row\", props),\n});\n","import type {\n\tNubeComponentField,\n\tNubeComponentFieldProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"field\", props),\n});\n","import type {\n\tNubeComponentFragment,\n\tNubeComponentFragmentProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"fragment\", props),\n});\n","import type {\n\tNubeComponentImage,\n\tNubeComponentImageProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"img\", 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\t__internalId: generateInternalId(\"img\", props),\n});\n","import type {\n\tNubeComponentText,\n\tNubeComponentTextProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"txt\", 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\t__internalId: generateInternalId(\"txt\", props),\n});\n","import type {\n\tNubeComponentCheckbox,\n\tNubeComponentCheckboxProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"check\", 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\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"txtarea\", 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\t__internalId: generateInternalId(\"txtarea\", props),\n});\n","import type {\n\tNubeComponentButton,\n\tNubeComponentButtonProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\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\t__internalId: generateInternalId(\"button\", props),\n});\n","import type {\n\tNubeComponentSelect,\n\tNubeComponentSelectProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `select` component.\n *\n * A `select` represents a dropdown menu that allows users to select one option from a list.\n * It supports properties such as `name`, `label`, `options`, and event handlers (`onChange`).\n */\nexport const select = (\n\tprops: NubeComponentSelectProps,\n): NubeComponentSelect => ({\n\ttype: \"select\",\n\t...props,\n\t__internalId: generateInternalId(\"select\", props),\n});\n","import type {\n\tNubeComponentAccordionRoot,\n\tNubeComponentAccordionRootProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion` component.\n *\n * An `accordion` is a vertically stacked list of items that can be expanded or collapsed to reveal their content.\n * It supports properties such as `defaultValue` for controlling which item is expanded by default, and custom styling.\n */\nexport const accordionRoot = (\n\tprops: NubeComponentAccordionRootProps,\n): NubeComponentAccordionRoot => ({\n\ttype: \"accordionRoot\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionRoot\", props),\n});\n","import type {\n\tNubeComponentAccordionItem,\n\tNubeComponentAccordionItemProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion-item` component.\n *\n * An `accordion-item` represents a single item within an accordion.\n * Each item contains a header that can be clicked to show/hide its content.\n * It supports properties such as `title`, `content`, `isExpanded`, and event handlers (`onToggle`).\n */\nexport const accordionItem = (\n\tprops: NubeComponentAccordionItemProps,\n): NubeComponentAccordionItem => ({\n\ttype: \"accordionItem\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionItem\", props),\n});\n","import type {\n\tNubeComponentAccordionContent,\n\tNubeComponentAccordionContentProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion-content` component.\n *\n * An `accordion-content` represents the content of an accordion item.\n * It supports properties such as `children`.\n */\nexport const accordionContent = (\n\tprops: NubeComponentAccordionContentProps,\n): NubeComponentAccordionContent => ({\n\ttype: \"accordionContent\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionContent\", props),\n});\n","import type {\n\tNubeComponentAccordionHeader,\n\tNubeComponentAccordionHeaderProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `accordion-header` component.\n *\n * An `accordion-header` represents the header of an accordion item.\n * It supports properties such as `children`.\n */\nexport const accordionHeader = (\n\tprops: NubeComponentAccordionHeaderProps,\n): NubeComponentAccordionHeader => ({\n\ttype: \"accordionHeader\",\n\t...props,\n\t__internalId: generateInternalId(\"accordionHeader\", props),\n});\n","import type {\n\tNubeComponentToastRoot,\n\tNubeComponentToastRootProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `toast` component.\n *\n * A `toast` is a small notification that appears at the bottom of the screen to inform the user about an action or a message.\n * It supports properties such as `type` for controlling the type of toast, and custom styling.\n */\nexport const toastRoot = (\n\tprops: NubeComponentToastRootProps,\n): NubeComponentToastRoot => ({\n\ttype: \"toastRoot\",\n\t...props,\n\t__internalId: generateInternalId(\"toastRoot\", props),\n});\n","import type {\n\tNubeComponentToastTitle,\n\tNubeComponentToastTitleProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `toast` title component.\n *\n * A `toast` title is a small notification that appears at the bottom of the screen to inform the user about an action or a message.\n * It supports properties such as `children` for the title text, and custom styling.\n */\nexport const toastTitle = (\n\tprops: NubeComponentToastTitleProps,\n): NubeComponentToastTitle => ({\n\ttype: \"toastTitle\",\n\t...props,\n\t__internalId: generateInternalId(\"toastTitle\", props),\n});\n","import type {\n\tNubeComponentToastDescription,\n\tNubeComponentToastDescriptionProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates a `toast` description component.\n *\n * A `toast` description is a small notification that appears at the bottom of the screen to inform the user about an action or a message.\n * It supports properties such as `children` for the description text, and custom styling.\n */\nexport const toastDescription = (\n\tprops: NubeComponentToastDescriptionProps,\n): NubeComponentToastDescription => ({\n\ttype: \"toastDescription\",\n\t...props,\n\t__internalId: generateInternalId(\"toastDescription\", props),\n});\n","import type {\n\tNubeComponentIcon,\n\tNubeComponentIconProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"./generateInternalId\";\n\n/**\n * Creates an `icon` component.\n *\n * @param props - The properties for configuring the icon component.\n * @returns A `NubeComponentIcon` object representing the icon.\n */\nexport const icon = (props: NubeComponentIconProps): NubeComponentIcon => ({\n\ttype: \"icon\",\n\t...props,\n\t__internalId: generateInternalId(\"icon\", props),\n});\n","export type ThemeColorOpacityRange =\n\t| 0\n\t| 5\n\t| 10\n\t| 20\n\t| 30\n\t| 40\n\t| 50\n\t| 60\n\t| 70\n\t| 80\n\t| 90;\n\nexport class ThemeColor {\n\tconstructor(private readonly token: string) {}\n\n\topacity(opacity: ThemeColorOpacityRange) {\n\t\treturn `var(--${this.token}-opacity-${opacity.toString().padStart(2, \"0\")})`;\n\t}\n\n\ttoValue(): string {\n\t\treturn `var(--${this.token})`;\n\t}\n\n\ttoString() {\n\t\treturn this.toValue();\n\t}\n}\n","import type { Size } from \"@tiendanube/nube-sdk-types\";\nimport type * as CSS from \"csstype\";\nimport { ThemeColor } from \"./ThemeColor\";\nimport type { ThemeCSSValue } from \"./theme\";\n\n/**\n * Maps properties that should use the Size type\n */\ntype SizePropertyKeys =\n\t| \"width\"\n\t| \"height\"\n\t| \"minWidth\"\n\t| \"minHeight\"\n\t| \"maxWidth\"\n\t| \"maxHeight\"\n\t| \"top\"\n\t| \"right\"\n\t| \"bottom\"\n\t| \"left\"\n\t| \"margin\"\n\t| \"marginTop\"\n\t| \"marginBottom\"\n\t| \"marginLeft\"\n\t| \"marginRight\"\n\t| \"padding\"\n\t| \"paddingTop\"\n\t| \"paddingBottom\"\n\t| \"paddingLeft\"\n\t| \"paddingRight\"\n\t| \"fontSize\"\n\t| \"lineHeight\"\n\t| \"borderWidth\"\n\t| \"borderRadius\";\n\n/**\n * Applies Size only to size properties.\n * The others remain as string | number.\n */\ntype EnhancedCSSProperties = {\n\t[K in keyof CSS.Properties]?: K extends SizePropertyKeys\n\t\t? Size | ThemeCSSValue\n\t\t: CSS.Properties[K] | ThemeCSSValue;\n};\n\n/**\n * Define named styles\n */\nexport type NubeComponentStyle = Partial<EnhancedCSSProperties>;\n\nfunction parseValue(value: unknown): unknown {\n\tif (value instanceof ThemeColor) {\n\t\treturn value.toValue();\n\t}\n\treturn value;\n}\n\nfunction parseStyleObject(\n\tstyle: Record<string, unknown>,\n): Record<string, unknown> {\n\tconst parsed: Record<string, unknown> = {};\n\tfor (const key in style) {\n\t\tconst val = style[key];\n\t\tif (\n\t\t\tval &&\n\t\t\ttypeof val === \"object\" &&\n\t\t\t!Array.isArray(val) &&\n\t\t\t!(val instanceof ThemeColor) &&\n\t\t\tObject.prototype.hasOwnProperty.call(val, \"toString\")\n\t\t) {\n\t\t\tparsed[key] = parseStyleObject(val as Record<string, unknown>);\n\t\t} else {\n\t\t\tparsed[key] = parseValue(val);\n\t\t}\n\t}\n\treturn parsed;\n}\n\nexport const StyleSheet = {\n\tcreate<T extends { [key: string]: NubeComponentStyle }>(styles: T): T {\n\t\tconst parsedStyles: Record<string, unknown> = {};\n\t\tfor (const key in styles) {\n\t\t\tparsedStyles[key] = parseStyleObject(\n\t\t\t\tstyles[key] as Record<string, unknown>,\n\t\t\t);\n\t\t}\n\t\treturn parsedStyles as T;\n\t},\n} as const;\n","import { ThemeColor } from \"./ThemeColor\";\n\nexport const theme = {\n\tcolor: {\n\t\taccent: new ThemeColor(\"accent-color\"),\n\t\tmain: {\n\t\t\tforeground: new ThemeColor(\"main-foreground\"),\n\t\t\tbackground: new ThemeColor(\"main-background\"),\n\t\t},\n\t},\n\tborder: {\n\t\tcolor: \"var(--border-color)\",\n\t\tradius: \"var(--border-radius)\",\n\t},\n\tbox: {\n\t\tborder: {\n\t\t\tcolor: \"var(--box-border-color)\",\n\t\t\tradius: \"var(--box-border-radius)\",\n\t\t},\n\t},\n\tinput: {\n\t\tborder: {\n\t\t\tcolor: \"var(--input-border-color)\",\n\t\t},\n\t},\n\tbutton: {\n\t\tforeground: \"var(--button-foreground)\",\n\t\tbackground: \"var(--button-background)\",\n\t\tborderColor: \"var(--button-border-color)\",\n\t\tborderRadius: \"var(--button-border-radius)\",\n\t},\n\tlabel: {\n\t\tforeground: \"var(--label-foreground)\",\n\t\tbackground: \"var(--label-background)\",\n\t},\n\theader: {\n\t\tforeground: \"var(--header-foreground)\",\n\t\tbackground: \"var(--header-background)\",\n\t\tlogo: {\n\t\t\tmaxWidth: \"var(--header-logo-max-width)\",\n\t\t\tmaxHeight: \"var(--header-logo-max-height)\",\n\t\t\tfont: \"var(--header-logo-font)\",\n\t\t\tfontSize: \"var(--header-logo-font-size)\",\n\t\t\tfontWeight: \"var(--header-logo-font-weight)\",\n\t\t\ttextTransform: \"var(--header-logo-text-transform)\",\n\t\t\tletterSpacing: \"var(--header-logo-letter-spacing)\",\n\t\t},\n\t},\n\tfooter: {\n\t\tforeground: \"var(--footer-foreground)\",\n\t\tbackground: \"var(--footer-background)\",\n\t},\n\theading: {\n\t\tfont: \"var(--heading-font)\",\n\t\tfontWeight: \"var(--heading-font-weight)\",\n\t\ttextTransform: \"var(--heading-text-transform)\",\n\t\tletterSpacing: \"var(--heading-letter-spacing)\",\n\t},\n} as const;\n\nexport type Theme = typeof theme;\nexport type ThemeColorValue = ReturnType<ThemeColor[\"toValue\"]>;\nexport type ThemeColorOpacityValue = ReturnType<ThemeColor[\"opacity\"]>;\n\ntype ThemeCSSPrimitive = string | number;\n\nexport type ThemeCSSValue =\n\t| ThemeColor\n\t| ThemeColorOpacityValue\n\t| ThemeCSSPrimitive;\n","/**\n * Minifies an inline CSS string by removing line breaks and unnecessary spaces.\n */\nexport function minify(css: string): string {\n\treturn css\n\t\t.replace(/\\/\\*[\\s\\S]*?\\*\\//g, \"\") // remove comments\n\t\t.replace(/\\s*([\\{\\}:;,])\\s*/g, \"$1\") // remove spaces around { } : ; ,\n\t\t.replace(/\\s+/g, \" \") // collapse multiple spaces into one\n\t\t.replace(/;\\}/g, \"}\") // remove ; before }\n\t\t.replace(/\\n/g, \"\") // remove break lines\n\t\t.trim();\n}\n","/**\n * Generates a short random ID.\n * @param length - The length of the ID.\n * @returns A short random ID.\n */\nexport function shortid(length = 8): string {\n\tconst chars =\n\t\t\"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";\n\tconst array = new Uint8Array(length);\n\tcrypto.getRandomValues(array);\n\treturn Array.from(array, (byte) => chars[byte % chars.length]).join(\"\");\n}\n","import { minify } from \"./minify\";\nimport { shortid } from \"./shortid\";\n\nexport type KeyframesObject = {\n\tname: string;\n\tcss: string;\n\ttoString(): string;\n};\n\n/**\n * Generates a unique name and returns a keyframes object that can be interpolated in template literals.\n */\nexport function keyframes(\n\tstrings: TemplateStringsArray,\n\t...exprs: unknown[]\n): KeyframesObject {\n\tconst rawCSS = String.raw({ raw: strings }, ...exprs);\n\tconst css = minify(rawCSS);\n\tconst id = `kf-${shortid()}`;\n\n\treturn {\n\t\tname: id,\n\t\tcss: `@keyframes ${id}{${css}}`,\n\t\ttoString() {\n\t\t\treturn id;\n\t\t},\n\t};\n}\n\n/**\n * Type guard to check if an object is a keyframes object.\n * @param value - The object to check.\n * @returns True if the object is a keyframes object, false otherwise.\n */\nexport function isKeyframesObject(value: unknown): value is KeyframesObject {\n\treturn (\n\t\ttypeof value === \"object\" &&\n\t\tvalue !== null &&\n\t\t\"css\" in value &&\n\t\t\"name\" in value &&\n\t\t\"toString\" in value &&\n\t\ttypeof (value as KeyframesObject).toString === \"function\"\n\t);\n}\n","import type {\n\tNubeComponent,\n\tNubeComponentProps,\n} from \"@tiendanube/nube-sdk-types\";\nimport { generateInternalId } from \"../components/generateInternalId\";\nimport { isKeyframesObject } from \"./keyframes\";\nimport { minify } from \"./minify\";\n\n/**\n * Type for functions that create Nube components.\n * This is used to ensure type safety when creating styled components.\n */\ntype NubeComponentFunction<Props = NubeComponentProps> = (\n\tprops: Props,\n) => NubeComponent;\n\n/**\n * `styled` allows declarative styling with CSS-in-JS.\n * The CSS is inserted directly into the `styled` prop as a string literal.\n */\nexport function styled<Props extends NubeComponentProps>(\n\tbaseComponent: NubeComponentFunction<Props>,\n) {\n\treturn (strings: TemplateStringsArray, ...exprs: unknown[]) => {\n\t\tconst StyledComponent: NubeComponentFunction<Props> = (props) => {\n\t\t\tlet rawCSS = \"\";\n\t\t\tconst animation: string[] = [];\n\n\t\t\tfor (let i = 0; i < strings.length; i++) {\n\t\t\t\tconst currentString = strings[i] ?? \"\";\n\t\t\t\tconst expr = exprs[i];\n\n\t\t\t\tif (isKeyframesObject(expr)) {\n\t\t\t\t\tanimation.push(expr.css);\n\t\t\t\t\trawCSS += `${currentString}${expr.name} `;\n\t\t\t\t} else {\n\t\t\t\t\tconst value = expr === null || expr === undefined ? \"\" : String(expr);\n\t\t\t\t\trawCSS += `${currentString}${value}`;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst minifiedCSS = minify(`${animation.join(\"\")}${rawCSS}`);\n\n\t\t\tconst componentType = baseComponent.name || \"component\";\n\n\t\t\tconst internalId = generateInternalId(componentType, {\n\t\t\t\t...props,\n\t\t\t\t__styledCSS: minifiedCSS,\n\t\t\t});\n\n\t\t\t// Create the base component with pre-generated ID\n\t\t\tconst component = baseComponent({ ...props, __internalId: internalId });\n\n\t\t\tif (typeof component === \"string\") return component;\n\n\t\t\t// Apply the styled CSS\n\t\t\tcomponent.styled = `${component.styled || \"\"}${minifiedCSS}`;\n\n\t\t\treturn component;\n\t\t};\n\n\t\treturn StyledComponent as typeof baseComponent;\n\t};\n}\n"],"mappings":"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","names":[]}

package/package.json

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