@intlayer/design-system 8.4.10 → 8.5.0

package/dist/esm/components/HTMLRender/HTMLRender.mjs

@@ -1,7 +1,7 @@
 import { Link } from "../Link/Link.mjs";
 import { H1, H2, H3, H4, H5, H6 } from "../Headers/index.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
-import { renderHTML } from "react-intlayer";
+import { renderHTML } from "react-intlayer/html";
 
 //#region src/components/HTMLRender/HTMLRender.tsx
 const getIntlayerHTMLOptions = () => ({ components: {

package/dist/esm/components/HTMLRender/HTMLRender.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HTMLRender.mjs","names":[],"sources":["../../../../src/components/HTMLRender/HTMLRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport type { ComponentProps, FC } from 'react';\nimport {\n  type HTMLRenderer as HTMLRendererIntlayer,\n  type RenderHTMLProps,\n  renderHTML,\n} from 'react-intlayer';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Link } from '../Link';\n\ntype HTMLRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  components?: ComponentProps<typeof HTMLRendererIntlayer>['components'];\n};\n\nexport const getIntlayerHTMLOptions: (isDarkMode: boolean) => RenderHTMLProps =\n  () => ({\n    components: {\n      h1: (props) => <H1 isClickable={true} {...props} />,\n      h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n      h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n      h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n      h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n      h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n      a: (props) => (\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          label=\"\"\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n    },\n  });\n\n/**\n * HTMLRenderer Component\n *\n * A comprehensive HTML renderer that transforms HTML text into rich,\n * interactive content with custom styling and Intlayer integration.\n */\nexport const HTMLRenderer: FC<HTMLRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  components: componentsProp,\n}) => {\n  const htmlOptions = getIntlayerHTMLOptions(isDarkMode ?? false);\n\n  const htmlContent = renderHTML(children, {\n    components: {\n      ...htmlOptions.components,\n      a: (props) => (\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          locale={locale}\n          label=\"\"\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n      ...componentsProp,\n    },\n  });\n\n  return <>{htmlContent}</>;\n};\n"],"mappings":";;;;;;AAiBA,MAAa,gCACJ,EACL,YAAY;CACV,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,GAAI;EAAS;CACnD,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAQ,GAAI;EAAS;CACrE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;EAAS;CACpE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;EAAS;CACpE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;EAAS;CACpE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;EAAS;CACpE,IAAI,UACF,oBAAC,MAAD;EACE,gBAAgB,MAAM,MAAM,WAAW,OAAO;EAC9C,YAAY;EACZ,OAAM;EACN,GAAI;EACJ,OAAM;EACN;CAEL,EACF;;;;;;;AAQH,MAAa,gBAAuC,EAClD,UACA,YACA,QACA,YAAY,qBACR;AAoBJ,QAAO,0CAjBa,WAAW,UAAU,EACvC,YAAY;EACV,GAJgB,uBAAuB,cAAc,MAAM,CAI5C;EACf,IAAI,UACF,oBAAC,MAAD;GACE,gBAAgB,MAAM,MAAM,WAAW,OAAO;GAC9C,YAAY;GACJ;GACR,OAAM;GACN,GAAI;GACJ,OAAM;GACN;EAEJ,GAAG;EACJ,EACF,CAAC,EAEuB"}
+{"version":3,"file":"HTMLRender.mjs","names":[],"sources":["../../../../src/components/HTMLRender/HTMLRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport type { ComponentProps, FC } from 'react';\nimport {\n  type HTMLRenderer as HTMLRendererIntlayer,\n  type RenderHTMLProps,\n  renderHTML,\n} from 'react-intlayer/html';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Link } from '../Link';\n\ntype HTMLRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  components?: ComponentProps<typeof HTMLRendererIntlayer>['components'];\n};\n\nexport const getIntlayerHTMLOptions: (isDarkMode: boolean) => RenderHTMLProps =\n  () => ({\n    components: {\n      h1: (props) => <H1 isClickable={true} {...props} />,\n      h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n      h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n      h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n      h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n      h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n      a: (props) => (\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          label=\"\"\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n    },\n  });\n\n/**\n * HTMLRenderer Component\n *\n * A comprehensive HTML renderer that transforms HTML text into rich,\n * interactive content with custom styling and Intlayer integration.\n */\nexport const HTMLRenderer: FC<HTMLRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  components: componentsProp,\n}) => {\n  const htmlOptions = getIntlayerHTMLOptions(isDarkMode ?? false);\n\n  const htmlContent = renderHTML(children, {\n    components: {\n      ...htmlOptions.components,\n      a: (props) => (\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          locale={locale}\n          label=\"\"\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n      ...componentsProp,\n    },\n  });\n\n  return <>{htmlContent}</>;\n};\n"],"mappings":";;;;;;AAiBA,MAAa,gCACJ,EACL,YAAY;CACV,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,GAAI;EAAS;CACnD,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAQ,GAAI;EAAS;CACrE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;EAAS;CACpE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;EAAS;CACpE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;EAAS;CACpE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;EAAS;CACpE,IAAI,UACF,oBAAC,MAAD;EACE,gBAAgB,MAAM,MAAM,WAAW,OAAO;EAC9C,YAAY;EACZ,OAAM;EACN,GAAI;EACJ,OAAM;EACN;CAEL,EACF;;;;;;;AAQH,MAAa,gBAAuC,EAClD,UACA,YACA,QACA,YAAY,qBACR;AAoBJ,QAAO,0CAjBa,WAAW,UAAU,EACvC,YAAY;EACV,GAJgB,uBAAuB,cAAc,MAAM,CAI5C;EACf,IAAI,UACF,oBAAC,MAAD;GACE,gBAAgB,MAAM,MAAM,WAAW,OAAO;GAC9C,YAAY;GACJ;GACR,OAAM;GACN,GAAI;GACJ,OAAM;GACN;EAEJ,GAAG;EACJ,EACF,CAAC,EAEuB"}

package/dist/types/components/Badge/index.d.ts

@@ -43,7 +43,7 @@ declare enum BadgeSize {
  * @description Defines the styling variants for different badge combinations
  */
 declare const badgeVariants: (props?: {
-  color?: "text" | "primary" | "secondary" | "destructive" | "success" | "error" | "neutral" | "light" | "dark" | "custom";
+  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "error" | "success" | "custom";
   variant?: "none" | "default" | "outline" | "hoverable";
   size?: "sm" | "md" | "lg";
 } & class_variance_authority_types0.ClassProp) => string;

package/dist/types/components/Button/Button.d.ts

@@ -61,9 +61,9 @@ declare enum ButtonTextAlign {
  */
 declare const buttonVariants: (props?: {
   size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
-  color?: "text" | "primary" | "secondary" | "destructive" | "success" | "error" | "neutral" | "light" | "dark" | "custom" | "card" | "current" | "text-inverse";
+  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "card" | "light" | "dark" | "current" | "text-inverse" | "error" | "success" | "custom";
   roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "5xl" | "full";
-  variant?: "input" | "none" | "default" | "link" | "outline" | "hoverable" | "invisible-link" | "fade";
+  variant?: "input" | "none" | "default" | "outline" | "link" | "invisible-link" | "hoverable" | "fade";
   textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;
 } & class_variance_authority_types0.ClassProp) => string;

package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/CollapsibleTable/CollapsibleTable.d.ts
 declare const collapsibleTableVariants: (props?: {
   size?: "sm" | "md" | "lg" | "xl" | "full";
-  variant?: "default" | "ghost" | "dark" | "outlined";
+  variant?: "default" | "dark" | "ghost" | "outlined";
   spacing?: "sm" | "md" | "lg" | "none" | "auto";
 } & class_variance_authority_types0.ClassProp) => string;
 interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {

package/dist/types/components/Command/index.d.ts

@@ -29,7 +29,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+  }, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & react.RefAttributes<HTMLInputElement>>;

package/dist/types/components/Container/index.d.ts

@@ -14,7 +14,7 @@ declare const containerVariants: (props?: {
   separator?: "both" | "without" | "x" | "y";
   border?: "none" | "with";
   borderColor?: "error" | "success" | "text" | "primary" | "secondary" | "neutral" | "card" | "warning";
-  background?: "none" | "with" | "hoverable";
+  background?: "none" | "hoverable" | "with";
   gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
 } & class_variance_authority_types0.ClassProp) => string;
 /** Available rounded corner sizes for the container */

package/dist/types/components/HTMLRender/HTMLRender.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps, FC } from "react";
 import { LocalesValues } from "@intlayer/types/module_augmentation";
-import { HTMLRenderer as HTMLRenderer$1, RenderHTMLProps } from "react-intlayer";
+import { HTMLRenderer as HTMLRenderer$1, RenderHTMLProps } from "react-intlayer/html";
 
 //#region src/components/HTMLRender/HTMLRender.d.ts
 type HTMLRendererProps = {

package/dist/types/components/Link/Link.d.ts

@@ -53,9 +53,9 @@ declare enum LinkUnderlined {
   FALSE = "false"
 }
 declare const linkVariants: (props?: {
-  variant?: "default" | "button" | "hoverable" | "invisible-link" | "button-outlined";
+  variant?: "default" | "invisible-link" | "hoverable" | "button" | "button-outlined";
   roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full";
-  color?: "text" | "primary" | "secondary" | "destructive" | "success" | "error" | "neutral" | "light" | "dark" | "custom" | "text-inverse";
+  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text-inverse" | "error" | "success" | "custom";
   size?: "sm" | "md" | "lg" | "xl" | "custom";
   underlined?: boolean | LinkUnderlined.DEFAULT;
 } & class_variance_authority_types0.ClassProp) => string;

package/dist/types/components/Tag/index.d.ts

@@ -186,7 +186,7 @@ declare enum TagBackground {
 }
 declare const containerVariants: (props?: {
   roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full";
-  color?: "text" | "primary" | "success" | "error" | "neutral" | "warning" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
+  color?: "text" | "primary" | "neutral" | "error" | "success" | "warning" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   border?: "none" | "with";
   background?: "none" | "with";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/design-system",
-  "version": "8.4.10",
+  "version": "8.5.0",
   "private": false,
   "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
   "keywords": [
@@ -106,12 +106,12 @@
   "dependencies": {
     "@better-auth/passkey": "1.5.5",
     "@better-auth/sso": "1.5.5",
-    "@intlayer/api": "8.4.10",
-    "@intlayer/config": "8.4.10",
-    "@intlayer/core": "8.4.10",
-    "@intlayer/dictionaries-entry": "8.4.10",
-    "@intlayer/editor-react": "8.4.10",
-    "@intlayer/types": "8.4.10",
+    "@intlayer/api": "8.5.0",
+    "@intlayer/config": "8.5.0",
+    "@intlayer/core": "8.5.0",
+    "@intlayer/dictionaries-entry": "8.5.0",
+    "@intlayer/editor-react": "8.5.0",
+    "@intlayer/types": "8.5.0",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-select": "2.2.6",
     "@radix-ui/react-slot": "1.2.4",
@@ -120,12 +120,12 @@
     "better-auth": "1.5.5",
     "class-variance-authority": "0.7.1",
     "cmdk": "1.1.1",
-    "react-intlayer": "8.4.10",
+    "react-intlayer": "8.5.0",
     "rollup-preserve-directives": "1.1.3",
     "zod": "4.3.6"
   },
   "devDependencies": {
-    "@intlayer/backend": "8.4.10",
+    "@intlayer/backend": "8.5.0",
     "@shikijs/transformers": "4.0.2",
     "@storybook/addon-a11y": "8.6.14",
     "@storybook/addon-essentials": "8.6.14",
@@ -154,14 +154,14 @@
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",
     "fast-glob": "3.3.3",
-    "intlayer": "8.4.10",
+    "intlayer": "8.5.0",
     "rimraf": "6.1.3",
     "shiki": "4.0.2",
     "storybook": "8.6.17",
     "tsdown": "0.21.4",
     "typescript": "6.0.2",
     "vite": "8.0.2",
-    "vite-intlayer": "8.4.10",
+    "vite-intlayer": "8.5.0",
     "vite-plugin-dts": "4.5.4",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.1"
@@ -169,7 +169,7 @@
   "peerDependencies": {
     "@better-fetch/fetch": "1.1.21",
     "@hookform/resolvers": "5.2.2",
-    "@intlayer/backend": "8.4.10",
+    "@intlayer/backend": "8.5.0",
     "@monaco-editor/react": "4.7.0",
     "@shikijs/transformers": "4.0.2",
     "@tanstack/react-query": "5.95.2",
@@ -177,12 +177,12 @@
     "clsx": "2.1.1",
     "framer-motion": "12.38.0",
     "fuse.js": "7.1.0",
-    "intlayer": "8.4.10",
+    "intlayer": "8.5.0",
     "lucide-react": "1.0.1",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0",
-    "react-hook-form": "7.71.2",
-    "react-intlayer": "8.4.10",
+    "react-hook-form": "7.72.0",
+    "react-intlayer": "8.5.0",
     "shiki": "4.0.2",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4.2.1"