npm - @intlayer/design-system - Versions diffs - 6.1.5 → 6.1.6 - Mend

@intlayer/design-system 6.1.5 → 6.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (336) hide show

package/dist/components/Loader/index.d.ts CHANGED Viewed

@@ -1,26 +1,97 @@
 import { FC, HTMLAttributes } from 'react';
+/**
+ * Props for the Loader component
+ */
 export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+    /** Controls whether the loading spinner is displayed. Defaults to true when undefined */
     isLoading?: boolean;
 };
 /**
+ * Loader Component
  *
- * Component can be use as a wrapper or standalone
+ * A versatile loading component that can function as both a standalone loader
+ * and a wrapper for content. When loading is true, displays an animated spinner.
+ * When loading is false, renders the wrapped content.
  *
- * Example:
- * ```jsx
- * <Loader isLoading={isLoading}>
- *   <div>Content</div>
- * </Loader>
+ * @component
+ * @example
+ * Standalone usage:
+ * ```tsx
+ * <Loader isLoading={true} />
  * ```
- * or
- * ```jsx
- * <Loader isLoading={isLoading} />
+ *
+ * @example
+ * As a content wrapper:
+ * ```tsx
+ * <Loader isLoading={isDataLoading}>
+ *   <div>Your content here</div>
+ * </Loader>
  * ```
  *
- * if isLoading is undefined, it will default to true
- * ```jsx
+ * @example
+ * Default behavior (loading = true):
+ * ```tsx
  * <Loader />
  * ```
+ *
+ * @example
+ * With custom styling:
+ * ```tsx
+ * <Loader
+ *   isLoading={true}
+ *   className="min-h-[200px] bg-gray-50"
+ *   aria-label="Loading user data"
+ * />
+ * ```
+ *
+ * @example
+ * Conditional content loading:
+ * ```tsx
+ * <Loader isLoading={!data}>
+ *   {data && (
+ *     <div>
+ *       <h2>{data.title}</h2>
+ *       <p>{data.content}</p>
+ *     </div>
+ *   )}
+ * </Loader>
+ * ```
+ *
+ * Features:
+ * - Dual-mode operation: standalone spinner or content wrapper
+ * - Responsive design with flexible sizing
+ * - Accessible with proper ARIA attributes and role
+ * - Smooth animated spinner using SVG
+ * - Customizable styling through className prop
+ * - Supports all standard HTML div attributes
+ * - Screen constraints (max-height/width) to prevent overflow
+ * - Internationalization ready with aria-label support
+ *
+ * Accessibility:
+ * - Uses role="status" for screen reader announcements
+ * - Includes descriptive aria-label for the loading state
+ * - Maintains focus management when transitioning between states
+ * - Supports custom aria-label through props for specific contexts
+ * - Compatible with keyboard navigation patterns
+ *
+ * Performance:
+ * - Lightweight SVG spinner with CSS animations
+ * - Conditional rendering prevents unnecessary DOM updates
+ * - Optimized for frequent loading state changes
+ * - No external dependencies beyond internal utilities
+ *
+ * @param props - Component props extending HTML div attributes
+ * @param props.children - Content to display when not loading
+ * @param props.isLoading - Loading state control (defaults to true)
+ * @param props.className - Additional CSS classes for the loader container
+ * @param props.role - ARIA role (defaults to "status")
+ * @param props.aria-label - Custom accessibility label
+ * @param props.id - Unique identifier for the loader
+ * @param props.style - Inline styles object
+ * @param props.data-* - Data attributes for testing or tracking
+ * @param props...rest - All other standard HTML div attributes
+ *
+ * @returns A loading spinner when isLoading is true, otherwise renders children
  */
 export declare const Loader: FC<LoaderProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Loader/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Loader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIhD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF~~;;;;;;;;;;;;;;;;;;;GAmBG~~;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAuBlC,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Loader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIhD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACzD,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAuBlC,CAAC"}

package/dist/components/Loader/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../src/components/Loader/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Spinner } from './spinner';\n\nexport type LoaderProps = HTMLAttributes<HTMLDivElement> & {\n isLoading?: boolean;\n};\n\n/*\n \n * ~~Component~~ can be ~~use~~ as a wrapper or ~~standalone~~\n \n ~~Example~~:\n * ```~~jsx~~\n * <Loader isLoading={~~isLoading~~}>\n * <div>~~Content~~</div>\n * </Loader>\n * ```\n * or\n * ```~~jsx~~\n * <Loader isLoading={~~isLoading~~} />\n * ```\n \n if isLoading is ~~undefined,~~ it ~~will~~ ~~default~~ to true\n * ~~```jsx~~\n * ~~<Loader~~ ~~/>\~~n * ~~```\~~n */\nexport const Loader: FC<LoaderProps> = ({\n children,\n isLoading = true,\n className,\n ...props\n}) => (\n <>\n {isLoading ? (\n <div\n className={cn(\n 'flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center',\n className\n )}\n role=\"status\"\n aria-label=\"Animated icon, meaning that the website is processing\"\n {...props}\n >\n <Spinner className=\"size-10 max-h-full max-w-full\" />\n </div>\n ) : (\n (children ?? <></>)\n )}\n </>\n);\n"],"names":[],"mappings":";;;~~AA4BO~~,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,sCAEK,UAAA,YACC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACL,cAAW;AAAA,IACV,GAAG;AAAA,IAEJ,UAAA,oBAAC,SAAA,EAAQ,WAAU,gCAAA,CAAgC;AAAA,EAAA;AACrD,IAEC,4CAAc,EAAA,CAEnB;"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../src/components/Loader/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Spinner } from './spinner';\n\n/*\n Props for the Loader component\n /\nexport type LoaderProps = HTMLAttributes<HTMLDivElement> & {\n /* Controls whether the loading spinner is displayed. Defaults to true when undefined /\n isLoading?: boolean;\n};\n\n/\n Loader Component\n \n A versatile loading component that can function as both a standalone loader\n * and a wrapper for content. When loading is true, displays an animated spinner.\n * When loading is false, renders the wrapped content.\n \n @component\n * @example\n * Standalone usage:\n * ```tsx\n * <Loader isLoading={true} />\n * ```\n \n @example\n * As a content wrapper:\n * ```tsx\n * <Loader isLoading={isDataLoading}>\n * <div>Your content here</div>\n * </Loader>\n * ```\n \n @example\n * Default behavior (loading = true):\n * ```tsx\n * <Loader />\n * ```\n \n @example\n * With custom styling:\n * ```tsx\n * <Loader\n * isLoading={true}\n * className=\"min-h-[200px] bg-gray-50\"\n * aria-label=\"Loading user data\"\n * />\n * ```\n \n @example\n * Conditional content loading:\n * ```tsx\n * <Loader isLoading={!data}>\n * {data && (\n * <div>\n * <h2>{data.title}</h2>\n * <p>{data.content}</p>\n * </div>\n * )}\n * </Loader>\n * ```\n \n Features:\n * - Dual-mode operation: standalone spinner or content wrapper\n * - Responsive design with flexible sizing\n * - Accessible with proper ARIA attributes and role\n * - Smooth animated spinner using SVG\n * - Customizable styling through className prop\n * - Supports all standard HTML div attributes\n * - Screen constraints (max-height/width) to prevent overflow\n * - Internationalization ready with aria-label support\n \n Accessibility:\n * - Uses role=\"status\" for screen reader announcements\n * - Includes descriptive aria-label for the loading state\n * - Maintains focus management when transitioning between states\n * - Supports custom aria-label through props for specific contexts\n * - Compatible with keyboard navigation patterns\n \n Performance:\n * - Lightweight SVG spinner with CSS animations\n * - Conditional rendering prevents unnecessary DOM updates\n * - Optimized for frequent loading state changes\n * - No external dependencies beyond internal utilities\n \n @param props - Component props extending HTML div attributes\n * @param props.children - Content to display when not loading\n * @param props.isLoading - Loading state control (defaults to true)\n * @param props.className - Additional CSS classes for the loader container\n * @param props.role - ARIA role (defaults to \"status\")\n * @param props.aria-label - Custom accessibility label\n * @param props.id - Unique identifier for the loader\n * @param props.style - Inline styles object\n * @param props.data-* - Data attributes for testing or tracking\n * @param props...rest - All other standard HTML div attributes\n \n @returns A loading spinner when isLoading is true, otherwise renders children\n */\nexport const Loader: FC<LoaderProps> = ({\n children,\n isLoading = true,\n className,\n ...props\n}) => (\n <>\n {isLoading ? (\n <div\n className={cn(\n 'flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center',\n className\n )}\n role=\"status\"\n aria-label=\"Animated icon, meaning that the website is processing\"\n {...props}\n >\n <Spinner className=\"size-10 max-h-full max-w-full\" />\n </div>\n ) : (\n (children ?? <></>)\n )}\n </>\n);\n"],"names":[],"mappings":";;;AAmGO,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,sCAEK,UAAA,YACC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACL,cAAW;AAAA,IACV,GAAG;AAAA,IAEJ,UAAA,oBAAC,SAAA,EAAQ,WAAU,gCAAA,CAAgC;AAAA,EAAA;AACrD,IAEC,4CAAc,EAAA,CAEnB;"}

package/dist/components/Loader/spinner.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spinner.cjs","sources":["../../../src/components/Loader/spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype SpinnerProps = SVGProps<SVGSVGElement> & {\n strokeWidth?: number;\n};\n\nexport const Spinner = ({ className, strokeWidth = 4 }: SpinnerProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"44\"\n height=\"44\"\n viewBox=\"0 0 44 44\"\n stroke=\"currentColor\"\n className={cn('size-full', className)}\n >\n <g fill=\"none\" fillRule=\"evenodd\" strokeWidth={strokeWidth}>\n <circle cx=\"22\" cy=\"22\" r=\"1\">\n <animate\n attributeName=\"r\"\n begin=\"0s\"\n dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"0s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n <circle cx=\"22\" cy=\"22\" r=\"1\">\n <animate\n attributeName=\"r\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n </g>\n </svg>\n);\n"],"names":["jsx","cn","jsxs"],"mappings":";;;;~~AAOO~~,MAAM,UAAU,CAAC,EAAE,WAAW,cAAc,QACjDA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,WAAWC,SAAAA,GAAG,aAAa,SAAS;AAAA,IAEpC,0CAAC,KAAA,EAAE,MAAK,QAAO,UAAS,WAAU,aAChC,UAAA;AAAA,MAAAC,gCAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAAF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEdA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,GACF;AAAA,sCACC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEdA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA;AACF;;"}
1	+ {"version":3,"file":"spinner.cjs","sources":["../../../src/components/Loader/spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\n/*\n Props for the Spinner component\n /\ntype SpinnerProps = SVGProps<SVGSVGElement> & {\n /* Stroke width for the spinner animation circles. Defaults to 4 /\n strokeWidth?: number;\n};\n\n/\n Spinner Component\n \n An animated SVG spinner that displays two expanding and fading circles\n * to indicate loading or processing states. Uses smooth CSS animations\n * with spline curves for natural motion.\n \n @component\n * @example\n * Basic usage:\n * ```tsx\n * <Spinner />\n * ```\n \n @example\n * Custom stroke width:\n * ```tsx\n * <Spinner strokeWidth={6} className=\"text-blue-500\" />\n * ```\n \n @example\n * Custom size:\n * ```tsx\n * <Spinner className=\"size-8 text-red-500\" strokeWidth={2} />\n * ```\n \n Features:\n * - Smooth expanding circle animation\n * - Customizable stroke width\n * - Inherits text color from parent (currentColor)\n * - Responsive sizing through className\n * - Infinite loop animation\n * - Two-phase animation with offset timing\n * - Optimized SVG with minimal DOM impact\n \n Animation Details:\n * - Duration: 1.8 seconds per cycle\n * - Two circles with 0.9s offset\n * - Radius expands from 1 to 20\n * - Opacity fades from 1 to 0\n * - Spline easing for natural motion\n \n @param props - SVG props with custom spinner options\n * @param props.className - CSS classes for styling and sizing\n * @param props.strokeWidth - Line thickness for the animated circles\n * @param props.color - SVG color (use className with text-color for easier styling)\n * @param props.width - SVG width (defaults to 44, use className for responsive sizing)\n * @param props.height - SVG height (defaults to 44, use className for responsive sizing)\n * @param props...rest - All other standard SVG element attributes\n \n @returns An animated SVG spinner element\n */\nexport const Spinner = ({ className, strokeWidth = 4 }: SpinnerProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"44\"\n height=\"44\"\n viewBox=\"0 0 44 44\"\n stroke=\"currentColor\"\n className={cn('size-full', className)}\n >\n <g fill=\"none\" fillRule=\"evenodd\" strokeWidth={strokeWidth}>\n <circle cx=\"22\" cy=\"22\" r=\"1\">\n <animate\n attributeName=\"r\"\n begin=\"0s\"\n dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"0s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n <circle cx=\"22\" cy=\"22\" r=\"1\">\n <animate\n attributeName=\"r\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n </g>\n </svg>\n);\n"],"names":["jsx","cn","jsxs"],"mappings":";;;;AA+DO,MAAM,UAAU,CAAC,EAAE,WAAW,cAAc,QACjDA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,WAAWC,SAAAA,GAAG,aAAa,SAAS;AAAA,IAEpC,0CAAC,KAAA,EAAE,MAAK,QAAO,UAAS,WAAU,aAChC,UAAA;AAAA,MAAAC,gCAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAAF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEdA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,GACF;AAAA,sCACC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEdA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA;AACF;;"}

package/dist/components/Loader/spinner.d.ts CHANGED Viewed

@@ -1,7 +1,63 @@
 import { SVGProps } from 'react';
+/**
+ * Props for the Spinner component
+ */
 type SpinnerProps = SVGProps<SVGSVGElement> & {
+    /** Stroke width for the spinner animation circles. Defaults to 4 */
     strokeWidth?: number;
 };
+/**
+ * Spinner Component
+ *
+ * An animated SVG spinner that displays two expanding and fading circles
+ * to indicate loading or processing states. Uses smooth CSS animations
+ * with spline curves for natural motion.
+ *
+ * @component
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <Spinner />
+ * ```
+ *
+ * @example
+ * Custom stroke width:
+ * ```tsx
+ * <Spinner strokeWidth={6} className="text-blue-500" />
+ * ```
+ *
+ * @example
+ * Custom size:
+ * ```tsx
+ * <Spinner className="size-8 text-red-500" strokeWidth={2} />
+ * ```
+ *
+ * Features:
+ * - Smooth expanding circle animation
+ * - Customizable stroke width
+ * - Inherits text color from parent (currentColor)
+ * - Responsive sizing through className
+ * - Infinite loop animation
+ * - Two-phase animation with offset timing
+ * - Optimized SVG with minimal DOM impact
+ *
+ * Animation Details:
+ * - Duration: 1.8 seconds per cycle
+ * - Two circles with 0.9s offset
+ * - Radius expands from 1 to 20
+ * - Opacity fades from 1 to 0
+ * - Spline easing for natural motion
+ *
+ * @param props - SVG props with custom spinner options
+ * @param props.className - CSS classes for styling and sizing
+ * @param props.strokeWidth - Line thickness for the animated circles
+ * @param props.color - SVG color (use className with text-color for easier styling)
+ * @param props.width - SVG width (defaults to 44, use className for responsive sizing)
+ * @param props.height - SVG height (defaults to 44, use className for responsive sizing)
+ * @param props...rest - All other standard SVG element attributes
+ *
+ * @returns An animated SVG spinner element
+ */
 export declare const Spinner: ({ className, strokeWidth }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=spinner.d.ts.map

package/dist/components/Loader/spinner.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Loader/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,4BAAgC,YAAY,4CAwDnE,CAAC"}
1	+ {"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Loader/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC;;GAEG;AACH,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG;IAC5C,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,OAAO,GAAI,4BAAgC,YAAY,4CAwDnE,CAAC"}

package/dist/components/Loader/spinner.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spinner.mjs","sources":["../../../src/components/Loader/spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype SpinnerProps = SVGProps<SVGSVGElement> & {\n strokeWidth?: number;\n};\n\nexport const Spinner = ({ className, strokeWidth = 4 }: SpinnerProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"44\"\n height=\"44\"\n viewBox=\"0 0 44 44\"\n stroke=\"currentColor\"\n className={cn('size-full', className)}\n >\n <g fill=\"none\" fillRule=\"evenodd\" strokeWidth={strokeWidth}>\n <circle cx=\"22\" cy=\"22\" r=\"1\">\n <animate\n attributeName=\"r\"\n begin=\"0s\"\n dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"0s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n <circle cx=\"22\" cy=\"22\" r=\"1\">\n <animate\n attributeName=\"r\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n </g>\n </svg>\n);\n"],"names":[],"mappings":";;~~AAOO~~,MAAM,UAAU,CAAC,EAAE,WAAW,cAAc,QACjD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,WAAW,GAAG,aAAa,SAAS;AAAA,IAEpC,+BAAC,KAAA,EAAE,MAAK,QAAO,UAAS,WAAU,aAChC,UAAA;AAAA,MAAA,qBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,GACF;AAAA,2BACC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA;AACF;"}
1	+ {"version":3,"file":"spinner.mjs","sources":["../../../src/components/Loader/spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\n/*\n Props for the Spinner component\n /\ntype SpinnerProps = SVGProps<SVGSVGElement> & {\n /* Stroke width for the spinner animation circles. Defaults to 4 /\n strokeWidth?: number;\n};\n\n/\n Spinner Component\n \n An animated SVG spinner that displays two expanding and fading circles\n * to indicate loading or processing states. Uses smooth CSS animations\n * with spline curves for natural motion.\n \n @component\n * @example\n * Basic usage:\n * ```tsx\n * <Spinner />\n * ```\n \n @example\n * Custom stroke width:\n * ```tsx\n * <Spinner strokeWidth={6} className=\"text-blue-500\" />\n * ```\n \n @example\n * Custom size:\n * ```tsx\n * <Spinner className=\"size-8 text-red-500\" strokeWidth={2} />\n * ```\n \n Features:\n * - Smooth expanding circle animation\n * - Customizable stroke width\n * - Inherits text color from parent (currentColor)\n * - Responsive sizing through className\n * - Infinite loop animation\n * - Two-phase animation with offset timing\n * - Optimized SVG with minimal DOM impact\n \n Animation Details:\n * - Duration: 1.8 seconds per cycle\n * - Two circles with 0.9s offset\n * - Radius expands from 1 to 20\n * - Opacity fades from 1 to 0\n * - Spline easing for natural motion\n \n @param props - SVG props with custom spinner options\n * @param props.className - CSS classes for styling and sizing\n * @param props.strokeWidth - Line thickness for the animated circles\n * @param props.color - SVG color (use className with text-color for easier styling)\n * @param props.width - SVG width (defaults to 44, use className for responsive sizing)\n * @param props.height - SVG height (defaults to 44, use className for responsive sizing)\n * @param props...rest - All other standard SVG element attributes\n \n @returns An animated SVG spinner element\n */\nexport const Spinner = ({ className, strokeWidth = 4 }: SpinnerProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"44\"\n height=\"44\"\n viewBox=\"0 0 44 44\"\n stroke=\"currentColor\"\n className={cn('size-full', className)}\n >\n <g fill=\"none\" fillRule=\"evenodd\" strokeWidth={strokeWidth}>\n <circle cx=\"22\" cy=\"22\" r=\"1\">\n <animate\n attributeName=\"r\"\n begin=\"0s\"\n dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"0s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n <circle cx=\"22\" cy=\"22\" r=\"1\">\n <animate\n attributeName=\"r\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n </g>\n </svg>\n);\n"],"names":[],"mappings":";;AA+DO,MAAM,UAAU,CAAC,EAAE,WAAW,cAAc,QACjD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,WAAW,GAAG,aAAa,SAAS;AAAA,IAEpC,+BAAC,KAAA,EAAE,MAAK,QAAO,UAAS,WAAU,aAChC,UAAA;AAAA,MAAA,qBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,GACF;AAAA,2BACC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA;AACF;"}

package/dist/components/MarkDownRender/MarkDownRender.cjs CHANGED Viewed

@@ -47,7 +47,6 @@ const MarkdownRenderer = ({
     components_MarkDownRender_processor.MarkdownProcessor,
     {
       options: {
-        disableParsingRawHTML: true,
         overrides: {
           h1: (props) => /* @__PURE__ */ jsxRuntime.jsx(components_Headers_index.H1, { isClickable: true, ...props }),
           h2: (props) => /* @__PURE__ */ jsxRuntime.jsx(components_Headers_index.H2, { isClickable: true, ...props }),

package/dist/components/MarkDownRender/MarkDownRender.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkDownRender.cjs","sources":["../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/config/client';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport type { BundledLanguage } from 'shiki';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport type { CodeCompAttributes } from '../IDE/Code';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\nimport { MarkdownProcessor, type MarkdownProcessorOptions } from './processor';\n\ntype MarkdownRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n options?: MarkdownProcessorOptions;\n};\n\n/*\n Removes frontmatter from markdown content\n * Frontmatter is the YAML metadata block at the beginning of markdown files\n * delimited by --- at the start and end\n */\nconst stripFrontmatter = (markdown: string): string => {\n const lines = markdown.split(/\\r?\\n/);\n\n // Check if the very first non-empty line is the metadata start delimiter\n const firstNonEmptyLine = lines.find((line) => line.trim() !== '');\n\n if (!firstNonEmptyLine \|\| firstNonEmptyLine.trim() !== '---') {\n // No frontmatter, return original content\n return markdown;\n }\n\n let inMetadataBlock = false;\n let endOfMetadataIndex = -1;\n\n for (let i = 0; i < lines.length; i++) {\n const trimmedLine = lines[i].trim();\n\n // Toggle metadata block on encountering the delimiter\n if (trimmedLine === '---') {\n if (!inMetadataBlock) {\n // Begin metadata block\n inMetadataBlock = true;\n continue;\n } else {\n // End of metadata block\n endOfMetadataIndex = i;\n break;\n }\n }\n }\n\n if (endOfMetadataIndex > -1) {\n // Return content after the frontmatter\n return lines.slice(endOfMetadataIndex + 1).join('\\n');\n }\n\n // If we couldn't find the end delimiter, return original content\n return markdown;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode,\n locale,\n options,\n}) => {\n const { overrides, ...restOptions } = options ?? {};\n\n // Strip frontmatter from the markdown content before rendering\n const cleanMarkdown = stripFrontmatter(children);\n\n return (\n <CodeProvider>\n <TabProvider>\n <MarkdownProcessor\n options={{\n disableParsingRawHTML: true,\n overrides: {\n h1: (props: ComponentProps<typeof H1>) => (\n <H1 isClickable={true} {...props} />\n ),\n h2: (props: ComponentProps<typeof H2>) => (\n <H2 isClickable={true} {...props} />\n ),\n h3: (props: ComponentProps<typeof H3>) => (\n <H3 isClickable={true} {...props} />\n ),\n h4: (props: ComponentProps<typeof H4>) => (\n <H4 isClickable={true} {...props} />\n ),\n h5: (props: ComponentProps<typeof H5>) => (\n <H5 isClickable={true} {...props} />\n ),\n h6: (props: ComponentProps<typeof H6>) => (\n <H6 isClickable={true} {...props} />\n ),\n\n code: (\n props: Omit<ComponentPropsWithoutRef<'code'>, 'children'> &\n Partial<CodeCompAttributes> & { children: string }\n ) =>\n !props.className ? (\n <strong className=\"bg-card/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n {props.children}\n </strong>\n ) : (\n <Code\n {...props}\n isDarkMode={isDarkMode}\n language={\n (props.className?.replace('lang-', '') \|\|\n 'plaintext') as BundledLanguage\n }\n fileName={props.fileName}\n showHeader={Boolean(props.fileName)}\n />\n ),\n\n blockquote: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'blockquote'>) => (\n <blockquote\n className={cn(\n 'border-card text-neutral mt-5 flex flex-col gap-3 border-l-4 pl-5',\n className\n )}\n {...props}\n />\n ),\n ul: ({ className, ...props }: ComponentPropsWithoutRef<'ul'>) => (\n <ul\n className={cn(\n 'mt-5 flex flex-col gap-3 pl-5 list-disc',\n className\n )}\n {...props}\n />\n ),\n ol: ({ className, ...props }: ComponentPropsWithoutRef<'ol'>) => (\n <ol\n className={cn(\n 'mt-5 flex flex-col gap-3 pl-5 list-decimal',\n className\n )}\n {...props}\n />\n ),\n img: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'img'>) => (\n <img\n {...props}\n loading=\"lazy\"\n className={cn(\n 'max-w-full max-h-[80vh] rounded-md',\n className\n )}\n src={`${props.src}?raw=true`}\n />\n ),\n a: (props: ComponentProps<typeof Link>) => (\n <Link\n color=\"neutral\"\n isExternalLink={props.href?.startsWith('http')}\n underlined={true}\n locale={locale}\n {...props}\n />\n ),\n pre: (props: ComponentPropsWithoutRef<'pre'>) => props.children,\n\n table: (props: ComponentProps<typeof Table>) => (\n <Table {...props} />\n ),\n th: ({ className, ...props }: ComponentPropsWithoutRef<'th'>) => (\n <th\n className={cn(\n 'border-neutral bg-neutral/10 border-b p-4',\n className\n )}\n {...props}\n />\n ),\n tr: ({ className, ...props }: ComponentPropsWithoutRef<'tr'>) => (\n <tr\n className={cn('hover:bg-neutral/10 hover:/10', className)}\n {...props}\n />\n ),\n td: ({ className, ...props }: ComponentPropsWithoutRef<'td'>) => (\n <td\n className={cn(\n 'border-b border-neutral-500/50 p-4',\n className\n )}\n {...props}\n />\n ),\n hr: ({ className, ...props }: ComponentPropsWithoutRef<'hr'>) => (\n <hr\n className={cn('mt-16 mx-6 text-neutral', className)}\n {...props}\n />\n ),\n // Support both <Tab> and <Tabs> in markdown\n Tabs: (props: ComponentProps<typeof Tab>) => <Tab {...props} />,\n Tab: (props: ComponentProps<typeof Tab>) => <Tab {...props} />,\n TabItem: (props: ComponentProps<typeof Tab.Item>) => (\n <Tab.Item {...props} />\n ),\n Columns: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'div'>) => (\n <div\n className={cn('flex max-md:flex-col gap-4', className)}\n {...props}\n />\n ),\n Column: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex-1', className)} {...props} />\n ),\n ...overrides,\n },\n ...restOptions,\n }}\n >\n {cleanMarkdown ?? ''}\n </MarkdownProcessor>\n </TabProvider>\n </CodeProvider>\n );\n};\n"],"names":["jsx","CodeProvider","TabProvider","MarkdownProcessor","H1","H2","H3","H4","H5","H6","Code","cn","Link","Table","Tab"],"mappings":"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"}
1	+ {"version":3,"file":"MarkDownRender.cjs","sources":["../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/config/client';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport type { BundledLanguage } from 'shiki';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport type { CodeCompAttributes } from '../IDE/Code';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\nimport { MarkdownProcessor, type MarkdownProcessorOptions } from './processor';\n\ntype MarkdownRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n options?: MarkdownProcessorOptions;\n};\n\n/*\n Removes frontmatter from markdown content\n * Frontmatter is the YAML metadata block at the beginning of markdown files\n * delimited by --- at the start and end\n /\nconst stripFrontmatter = (markdown: string): string => {\n const lines = markdown.split(/\\r?\\n/);\n\n // Check if the very first non-empty line is the metadata start delimiter\n const firstNonEmptyLine = lines.find((line) => line.trim() !== '');\n\n if (!firstNonEmptyLine \|\| firstNonEmptyLine.trim() !== '---') {\n // No frontmatter, return original content\n return markdown;\n }\n\n let inMetadataBlock = false;\n let endOfMetadataIndex = -1;\n\n for (let i = 0; i < lines.length; i++) {\n const trimmedLine = lines[i].trim();\n\n // Toggle metadata block on encountering the delimiter\n if (trimmedLine === '---') {\n if (!inMetadataBlock) {\n // Begin metadata block\n inMetadataBlock = true;\n continue;\n } else {\n // End of metadata block\n endOfMetadataIndex = i;\n break;\n }\n }\n }\n\n if (endOfMetadataIndex > -1) {\n // Return content after the frontmatter\n return lines.slice(endOfMetadataIndex + 1).join('\\n');\n }\n\n // If we couldn't find the end delimiter, return original content\n return markdown;\n};\n\n/\n MarkdownRenderer Component\n \n A comprehensive markdown renderer that transforms markdown text into rich,\n * interactive HTML with custom styling and Intlayer integration. Supports\n * code syntax highlighting, responsive tables, internationalized links,\n * and automatic frontmatter stripping.\n \n @component\n * @example\n * Basic usage:\n * ```tsx\n * const markdownContent = `\n * # Hello World\n * This is bold and italic text.\n * `;\n \n <MarkdownRenderer>{markdownContent}</MarkdownRenderer>\n * ```\n \n @example\n * With dark mode:\n * ```tsx\n * const codeExample = `\n * # API Documentation\n * \\`\\`\\`javascript\n * const response = await fetch('/api/data');\n * const data = await response.json();\n * \\`\\`\\`\n * `;\n \n <MarkdownRenderer isDarkMode={true}>\n * {codeExample}\n * </MarkdownRenderer>\n * ```\n \n @example\n * With internationalized links:\n * ```tsx\n * const content = `\n * Visit our [documentation](/docs) for more information.\n * External link: [Google](https://google.com)\n * `;\n \n <MarkdownRenderer locale=\"fr\">\n * {content}\n * </MarkdownRenderer>\n * ```\n \n @example\n * With custom overrides:\n * ```tsx\n * const customOptions = {\n * overrides: {\n * h1: ({ children }) => (\n * <h1 className=\"custom-title\">{children}</h1>\n * ),\n * },\n * };\n \n <MarkdownRenderer options={customOptions}>\n * {markdownContent}\n * </MarkdownRenderer>\n * ```\n \n @example\n * With frontmatter (automatically stripped):\n * ```tsx\n * const blogPost = `\n * ---\n * title: \"My Blog Post\"\n * date: \"2023-12-01\"\n * author: \"John Doe\"\n * ---\n * # My Blog Post\n * This content will be rendered without the frontmatter.\n * `;\n \n <MarkdownRenderer>{blogPost}</MarkdownRenderer>\n * ```\n \n Features:\n * - Automatic frontmatter detection and removal\n * - Syntax-highlighted code blocks with theme support\n * - Clickable headers with anchor links\n * - Internationalized link handling with locale awareness\n * - Responsive tables with hover effects\n * - Custom blockquote, list, and image styling\n * - External link detection and security attributes\n * - Inline code with distinctive styling\n * - Lazy-loaded images with GitHub raw URL support\n * - Horizontal rules with custom styling\n \n Supported Markdown Elements:\n * - Headers (h1-h4) with click-to-anchor functionality\n * - Code blocks with language-specific syntax highlighting\n * - Inline code with background styling\n * - Blockquotes with custom border and padding\n * - Ordered and unordered lists with custom spacing\n * - Links (internal and external) with security attributes\n * - Images with lazy loading and responsive sizing\n * - Tables with hover effects and proper styling\n * - Horizontal rules with custom appearance\n * - All standard markdown formatting (bold, italic, etc.)\n \n Code Block Support:\n * - Language detection from code fence info\n * - Syntax highlighting through Code component\n * - Dark/light mode theme switching\n * - Line numbers and copy functionality (via Code component)\n * - Support for popular languages (JS, TS, Python, etc.)\n \n Link Handling:\n * - Automatic external link detection (starts with 'http')\n * - Security attributes for external links (rel=\"noopener noreferrer\")\n * - Locale-aware internal link routing\n * - Custom Link component integration\n * - Underlined styling for better visibility\n \n Image Processing:\n * - Automatic lazy loading for performance\n * - GitHub raw URL transformation for repository images\n * - Responsive sizing with max-width constraints\n * - Rounded corners for visual appeal\n \n Accessibility:\n * - Semantic HTML structure with proper heading hierarchy\n * - ARIA attributes through component integration\n * - Screen reader friendly link descriptions\n * - Keyboard navigation support\n * - High contrast styling options\n \n Performance:\n * - Lazy loading for images\n * - Efficient re-rendering with React memo patterns\n * - Code syntax highlighting with minimal bundle impact\n * - Optimized markdown parsing with markdown-to-jsx\n \n @param props - Component props\n * @param props.children - Raw markdown content to render\n * @param props.isDarkMode - Enable dark mode styling for code blocks\n * @param props.locale - Current locale for link internationalization\n * @param props.options - Additional markdown-to-jsx options\n * @param props.options.overrides - Custom component overrides for markdown elements\n \n @returns Rendered markdown content with custom styling and functionality\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode,\n locale,\n options,\n}) => {\n const { overrides, ...restOptions } = options ?? {};\n\n // Strip frontmatter from the markdown content before rendering\n const cleanMarkdown = stripFrontmatter(children);\n\n return (\n <CodeProvider>\n <TabProvider>\n <MarkdownProcessor\n options={{\n overrides: {\n h1: (props: ComponentProps<typeof H1>) => (\n <H1 isClickable={true} {...props} />\n ),\n h2: (props: ComponentProps<typeof H2>) => (\n <H2 isClickable={true} {...props} />\n ),\n h3: (props: ComponentProps<typeof H3>) => (\n <H3 isClickable={true} {...props} />\n ),\n h4: (props: ComponentProps<typeof H4>) => (\n <H4 isClickable={true} {...props} />\n ),\n h5: (props: ComponentProps<typeof H5>) => (\n <H5 isClickable={true} {...props} />\n ),\n h6: (props: ComponentProps<typeof H6>) => (\n <H6 isClickable={true} {...props} />\n ),\n\n code: (\n props: Omit<ComponentPropsWithoutRef<'code'>, 'children'> &\n Partial<CodeCompAttributes> & { children: string }\n ) =>\n !props.className ? (\n <strong className=\"bg-card/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n {props.children}\n </strong>\n ) : (\n <Code\n {...props}\n isDarkMode={isDarkMode}\n language={\n (props.className?.replace('lang-', '') \|\|\n 'plaintext') as BundledLanguage\n }\n fileName={props.fileName}\n showHeader={Boolean(props.fileName)}\n />\n ),\n\n blockquote: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'blockquote'>) => (\n <blockquote\n className={cn(\n 'border-card text-neutral mt-5 flex flex-col gap-3 border-l-4 pl-5',\n className\n )}\n {...props}\n />\n ),\n ul: ({ className, ...props }: ComponentPropsWithoutRef<'ul'>) => (\n <ul\n className={cn(\n 'mt-5 flex flex-col gap-3 pl-5 list-disc',\n className\n )}\n {...props}\n />\n ),\n ol: ({ className, ...props }: ComponentPropsWithoutRef<'ol'>) => (\n <ol\n className={cn(\n 'mt-5 flex flex-col gap-3 pl-5 list-decimal',\n className\n )}\n {...props}\n />\n ),\n img: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'img'>) => (\n <img\n {...props}\n loading=\"lazy\"\n className={cn(\n 'max-w-full max-h-[80vh] rounded-md',\n className\n )}\n src={`${props.src}?raw=true`}\n />\n ),\n a: (props: ComponentProps<typeof Link>) => (\n <Link\n color=\"neutral\"\n isExternalLink={props.href?.startsWith('http')}\n underlined={true}\n locale={locale}\n {...props}\n />\n ),\n pre: (props: ComponentPropsWithoutRef<'pre'>) => props.children,\n\n table: (props: ComponentProps<typeof Table>) => (\n <Table {...props} />\n ),\n th: ({ className, ...props }: ComponentPropsWithoutRef<'th'>) => (\n <th\n className={cn(\n 'border-neutral bg-neutral/10 border-b p-4',\n className\n )}\n {...props}\n />\n ),\n tr: ({ className, ...props }: ComponentPropsWithoutRef<'tr'>) => (\n <tr\n className={cn('hover:bg-neutral/10 hover:/10', className)}\n {...props}\n />\n ),\n td: ({ className, ...props }: ComponentPropsWithoutRef<'td'>) => (\n <td\n className={cn(\n 'border-b border-neutral-500/50 p-4',\n className\n )}\n {...props}\n />\n ),\n hr: ({ className, ...props }: ComponentPropsWithoutRef<'hr'>) => (\n <hr\n className={cn('mt-16 mx-6 text-neutral', className)}\n {...props}\n />\n ),\n // Support both <Tab> and <Tabs> in markdown\n Tabs: (props: ComponentProps<typeof Tab>) => <Tab {...props} />,\n Tab: (props: ComponentProps<typeof Tab>) => <Tab {...props} />,\n TabItem: (props: ComponentProps<typeof Tab.Item>) => (\n <Tab.Item {...props} />\n ),\n Columns: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'div'>) => (\n <div\n className={cn('flex max-md:flex-col gap-4', className)}\n {...props}\n />\n ),\n Column: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex-1', className)} {...props} />\n ),\n ...overrides,\n },\n ...restOptions,\n }}\n >\n {cleanMarkdown ?? ''}\n </MarkdownProcessor>\n </TabProvider>\n </CodeProvider>\n );\n};\n"],"names":["jsx","CodeProvider","TabProvider","MarkdownProcessor","H1","H2","H3","H4","H5","H6","Code","cn","Link","Table","Tab"],"mappings":"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"}

package/dist/components/MarkDownRender/MarkDownRender.d.ts CHANGED Viewed

@@ -7,6 +7,153 @@ type MarkdownRendererProps = {
     locale?: LocalesValues;
     options?: MarkdownProcessorOptions;
 };
+/**
+ * MarkdownRenderer Component
+ *
+ * A comprehensive markdown renderer that transforms markdown text into rich,
+ * interactive HTML with custom styling and Intlayer integration. Supports
+ * code syntax highlighting, responsive tables, internationalized links,
+ * and automatic frontmatter stripping.
+ *
+ * @component
+ * @example
+ * Basic usage:
+ * ```tsx
+ * const markdownContent = `
+ * # Hello World
+ * This is **bold** and *italic* text.
+ * `;
+ *
+ * <MarkdownRenderer>{markdownContent}</MarkdownRenderer>
+ * ```
+ *
+ * @example
+ * With dark mode:
+ * ```tsx
+ * const codeExample = `
+ * # API Documentation
+ * \`\`\`javascript
+ * const response = await fetch('/api/data');
+ * const data = await response.json();
+ * \`\`\`
+ * `;
+ *
+ * <MarkdownRenderer isDarkMode={true}>
+ *   {codeExample}
+ * </MarkdownRenderer>
+ * ```
+ *
+ * @example
+ * With internationalized links:
+ * ```tsx
+ * const content = `
+ * Visit our [documentation](/docs) for more information.
+ * External link: [Google](https://google.com)
+ * `;
+ *
+ * <MarkdownRenderer locale="fr">
+ *   {content}
+ * </MarkdownRenderer>
+ * ```
+ *
+ * @example
+ * With custom overrides:
+ * ```tsx
+ * const customOptions = {
+ *   overrides: {
+ *     h1: ({ children }) => (
+ *       <h1 className="custom-title">{children}</h1>
+ *     ),
+ *   },
+ * };
+ *
+ * <MarkdownRenderer options={customOptions}>
+ *   {markdownContent}
+ * </MarkdownRenderer>
+ * ```
+ *
+ * @example
+ * With frontmatter (automatically stripped):
+ * ```tsx
+ * const blogPost = `
+ * ---
+ * title: "My Blog Post"
+ * date: "2023-12-01"
+ * author: "John Doe"
+ * ---
+ * # My Blog Post
+ * This content will be rendered without the frontmatter.
+ * `;
+ *
+ * <MarkdownRenderer>{blogPost}</MarkdownRenderer>
+ * ```
+ *
+ * Features:
+ * - Automatic frontmatter detection and removal
+ * - Syntax-highlighted code blocks with theme support
+ * - Clickable headers with anchor links
+ * - Internationalized link handling with locale awareness
+ * - Responsive tables with hover effects
+ * - Custom blockquote, list, and image styling
+ * - External link detection and security attributes
+ * - Inline code with distinctive styling
+ * - Lazy-loaded images with GitHub raw URL support
+ * - Horizontal rules with custom styling
+ *
+ * Supported Markdown Elements:
+ * - Headers (h1-h4) with click-to-anchor functionality
+ * - Code blocks with language-specific syntax highlighting
+ * - Inline code with background styling
+ * - Blockquotes with custom border and padding
+ * - Ordered and unordered lists with custom spacing
+ * - Links (internal and external) with security attributes
+ * - Images with lazy loading and responsive sizing
+ * - Tables with hover effects and proper styling
+ * - Horizontal rules with custom appearance
+ * - All standard markdown formatting (bold, italic, etc.)
+ *
+ * Code Block Support:
+ * - Language detection from code fence info
+ * - Syntax highlighting through Code component
+ * - Dark/light mode theme switching
+ * - Line numbers and copy functionality (via Code component)
+ * - Support for popular languages (JS, TS, Python, etc.)
+ *
+ * Link Handling:
+ * - Automatic external link detection (starts with 'http')
+ * - Security attributes for external links (rel="noopener noreferrer")
+ * - Locale-aware internal link routing
+ * - Custom Link component integration
+ * - Underlined styling for better visibility
+ *
+ * Image Processing:
+ * - Automatic lazy loading for performance
+ * - GitHub raw URL transformation for repository images
+ * - Responsive sizing with max-width constraints
+ * - Rounded corners for visual appeal
+ *
+ * Accessibility:
+ * - Semantic HTML structure with proper heading hierarchy
+ * - ARIA attributes through component integration
+ * - Screen reader friendly link descriptions
+ * - Keyboard navigation support
+ * - High contrast styling options
+ *
+ * Performance:
+ * - Lazy loading for images
+ * - Efficient re-rendering with React memo patterns
+ * - Code syntax highlighting with minimal bundle impact
+ * - Optimized markdown parsing with markdown-to-jsx
+ *
+ * @param props - Component props
+ * @param props.children - Raw markdown content to render
+ * @param props.isDarkMode - Enable dark mode styling for code blocks
+ * @param props.locale - Current locale for link internationalization
+ * @param props.options - Additional markdown-to-jsx options
+ * @param props.options.overrides - Custom component overrides for markdown elements
+ *
+ * @returns Rendered markdown content with custom styling and functionality
+ */
 export declare const MarkdownRenderer: FC<MarkdownRendererProps>;
 export {};
 //# sourceMappingURL=MarkDownRender.d.ts.map

package/dist/components/MarkDownRender/MarkDownRender.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkDownRender.d.ts","sourceRoot":"","sources":["../../../src/components/MarkDownRender/MarkDownRender.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAA4C,EAAE,EAAE,MAAM,OAAO,CAAC;AAW1E,OAAO,EAAqB,KAAK,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAE/E,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACpC,CAAC;AA+CF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,~~CAiLtD~~,CAAC"}
1	+ {"version":3,"file":"MarkDownRender.d.ts","sourceRoot":"","sources":["../../../src/components/MarkDownRender/MarkDownRender.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAA4C,EAAE,EAAE,MAAM,OAAO,CAAC;AAW1E,OAAO,EAAqB,KAAK,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAE/E,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACpC,CAAC;AA+CF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkJG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAgLtD,CAAC"}

package/dist/components/MarkDownRender/MarkDownRender.mjs CHANGED Viewed

@@ -45,7 +45,6 @@ const MarkdownRenderer = ({
     MarkdownProcessor,
     {
       options: {
-        disableParsingRawHTML: true,
         overrides: {
           h1: (props) => /* @__PURE__ */ jsx(H1, { isClickable: true, ...props }),
           h2: (props) => /* @__PURE__ */ jsx(H2, { isClickable: true, ...props }),

package/dist/components/MarkDownRender/MarkDownRender.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkDownRender.mjs","sources":["../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/config/client';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport type { BundledLanguage } from 'shiki';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport type { CodeCompAttributes } from '../IDE/Code';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\nimport { MarkdownProcessor, type MarkdownProcessorOptions } from './processor';\n\ntype MarkdownRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n options?: MarkdownProcessorOptions;\n};\n\n/*\n Removes frontmatter from markdown content\n * Frontmatter is the YAML metadata block at the beginning of markdown files\n * delimited by --- at the start and end\n */\nconst stripFrontmatter = (markdown: string): string => {\n const lines = markdown.split(/\\r?\\n/);\n\n // Check if the very first non-empty line is the metadata start delimiter\n const firstNonEmptyLine = lines.find((line) => line.trim() !== '');\n\n if (!firstNonEmptyLine \|\| firstNonEmptyLine.trim() !== '---') {\n // No frontmatter, return original content\n return markdown;\n }\n\n let inMetadataBlock = false;\n let endOfMetadataIndex = -1;\n\n for (let i = 0; i < lines.length; i++) {\n const trimmedLine = lines[i].trim();\n\n // Toggle metadata block on encountering the delimiter\n if (trimmedLine === '---') {\n if (!inMetadataBlock) {\n // Begin metadata block\n inMetadataBlock = true;\n continue;\n } else {\n // End of metadata block\n endOfMetadataIndex = i;\n break;\n }\n }\n }\n\n if (endOfMetadataIndex > -1) {\n // Return content after the frontmatter\n return lines.slice(endOfMetadataIndex + 1).join('\\n');\n }\n\n // If we couldn't find the end delimiter, return original content\n return markdown;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode,\n locale,\n options,\n}) => {\n const { overrides, ...restOptions } = options ?? {};\n\n // Strip frontmatter from the markdown content before rendering\n const cleanMarkdown = stripFrontmatter(children);\n\n return (\n <CodeProvider>\n <TabProvider>\n <MarkdownProcessor\n options={{\n disableParsingRawHTML: true,\n overrides: {\n h1: (props: ComponentProps<typeof H1>) => (\n <H1 isClickable={true} {...props} />\n ),\n h2: (props: ComponentProps<typeof H2>) => (\n <H2 isClickable={true} {...props} />\n ),\n h3: (props: ComponentProps<typeof H3>) => (\n <H3 isClickable={true} {...props} />\n ),\n h4: (props: ComponentProps<typeof H4>) => (\n <H4 isClickable={true} {...props} />\n ),\n h5: (props: ComponentProps<typeof H5>) => (\n <H5 isClickable={true} {...props} />\n ),\n h6: (props: ComponentProps<typeof H6>) => (\n <H6 isClickable={true} {...props} />\n ),\n\n code: (\n props: Omit<ComponentPropsWithoutRef<'code'>, 'children'> &\n Partial<CodeCompAttributes> & { children: string }\n ) =>\n !props.className ? (\n <strong className=\"bg-card/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n {props.children}\n </strong>\n ) : (\n <Code\n {...props}\n isDarkMode={isDarkMode}\n language={\n (props.className?.replace('lang-', '') \|\|\n 'plaintext') as BundledLanguage\n }\n fileName={props.fileName}\n showHeader={Boolean(props.fileName)}\n />\n ),\n\n blockquote: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'blockquote'>) => (\n <blockquote\n className={cn(\n 'border-card text-neutral mt-5 flex flex-col gap-3 border-l-4 pl-5',\n className\n )}\n {...props}\n />\n ),\n ul: ({ className, ...props }: ComponentPropsWithoutRef<'ul'>) => (\n <ul\n className={cn(\n 'mt-5 flex flex-col gap-3 pl-5 list-disc',\n className\n )}\n {...props}\n />\n ),\n ol: ({ className, ...props }: ComponentPropsWithoutRef<'ol'>) => (\n <ol\n className={cn(\n 'mt-5 flex flex-col gap-3 pl-5 list-decimal',\n className\n )}\n {...props}\n />\n ),\n img: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'img'>) => (\n <img\n {...props}\n loading=\"lazy\"\n className={cn(\n 'max-w-full max-h-[80vh] rounded-md',\n className\n )}\n src={`${props.src}?raw=true`}\n />\n ),\n a: (props: ComponentProps<typeof Link>) => (\n <Link\n color=\"neutral\"\n isExternalLink={props.href?.startsWith('http')}\n underlined={true}\n locale={locale}\n {...props}\n />\n ),\n pre: (props: ComponentPropsWithoutRef<'pre'>) => props.children,\n\n table: (props: ComponentProps<typeof Table>) => (\n <Table {...props} />\n ),\n th: ({ className, ...props }: ComponentPropsWithoutRef<'th'>) => (\n <th\n className={cn(\n 'border-neutral bg-neutral/10 border-b p-4',\n className\n )}\n {...props}\n />\n ),\n tr: ({ className, ...props }: ComponentPropsWithoutRef<'tr'>) => (\n <tr\n className={cn('hover:bg-neutral/10 hover:/10', className)}\n {...props}\n />\n ),\n td: ({ className, ...props }: ComponentPropsWithoutRef<'td'>) => (\n <td\n className={cn(\n 'border-b border-neutral-500/50 p-4',\n className\n )}\n {...props}\n />\n ),\n hr: ({ className, ...props }: ComponentPropsWithoutRef<'hr'>) => (\n <hr\n className={cn('mt-16 mx-6 text-neutral', className)}\n {...props}\n />\n ),\n // Support both <Tab> and <Tabs> in markdown\n Tabs: (props: ComponentProps<typeof Tab>) => <Tab {...props} />,\n Tab: (props: ComponentProps<typeof Tab>) => <Tab {...props} />,\n TabItem: (props: ComponentProps<typeof Tab.Item>) => (\n <Tab.Item {...props} />\n ),\n Columns: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'div'>) => (\n <div\n className={cn('flex max-md:flex-col gap-4', className)}\n {...props}\n />\n ),\n Column: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex-1', className)} {...props} />\n ),\n ...overrides,\n },\n ...restOptions,\n }}\n >\n {cleanMarkdown ?? ''}\n </MarkdownProcessor>\n </TabProvider>\n </CodeProvider>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"MarkDownRender.mjs","sources":["../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/config/client';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport type { BundledLanguage } from 'shiki';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport type { CodeCompAttributes } from '../IDE/Code';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\nimport { MarkdownProcessor, type MarkdownProcessorOptions } from './processor';\n\ntype MarkdownRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n options?: MarkdownProcessorOptions;\n};\n\n/*\n Removes frontmatter from markdown content\n * Frontmatter is the YAML metadata block at the beginning of markdown files\n * delimited by --- at the start and end\n /\nconst stripFrontmatter = (markdown: string): string => {\n const lines = markdown.split(/\\r?\\n/);\n\n // Check if the very first non-empty line is the metadata start delimiter\n const firstNonEmptyLine = lines.find((line) => line.trim() !== '');\n\n if (!firstNonEmptyLine \|\| firstNonEmptyLine.trim() !== '---') {\n // No frontmatter, return original content\n return markdown;\n }\n\n let inMetadataBlock = false;\n let endOfMetadataIndex = -1;\n\n for (let i = 0; i < lines.length; i++) {\n const trimmedLine = lines[i].trim();\n\n // Toggle metadata block on encountering the delimiter\n if (trimmedLine === '---') {\n if (!inMetadataBlock) {\n // Begin metadata block\n inMetadataBlock = true;\n continue;\n } else {\n // End of metadata block\n endOfMetadataIndex = i;\n break;\n }\n }\n }\n\n if (endOfMetadataIndex > -1) {\n // Return content after the frontmatter\n return lines.slice(endOfMetadataIndex + 1).join('\\n');\n }\n\n // If we couldn't find the end delimiter, return original content\n return markdown;\n};\n\n/\n MarkdownRenderer Component\n \n A comprehensive markdown renderer that transforms markdown text into rich,\n * interactive HTML with custom styling and Intlayer integration. Supports\n * code syntax highlighting, responsive tables, internationalized links,\n * and automatic frontmatter stripping.\n \n @component\n * @example\n * Basic usage:\n * ```tsx\n * const markdownContent = `\n * # Hello World\n * This is bold and italic text.\n * `;\n \n <MarkdownRenderer>{markdownContent}</MarkdownRenderer>\n * ```\n \n @example\n * With dark mode:\n * ```tsx\n * const codeExample = `\n * # API Documentation\n * \\`\\`\\`javascript\n * const response = await fetch('/api/data');\n * const data = await response.json();\n * \\`\\`\\`\n * `;\n \n <MarkdownRenderer isDarkMode={true}>\n * {codeExample}\n * </MarkdownRenderer>\n * ```\n \n @example\n * With internationalized links:\n * ```tsx\n * const content = `\n * Visit our [documentation](/docs) for more information.\n * External link: [Google](https://google.com)\n * `;\n \n <MarkdownRenderer locale=\"fr\">\n * {content}\n * </MarkdownRenderer>\n * ```\n \n @example\n * With custom overrides:\n * ```tsx\n * const customOptions = {\n * overrides: {\n * h1: ({ children }) => (\n * <h1 className=\"custom-title\">{children}</h1>\n * ),\n * },\n * };\n \n <MarkdownRenderer options={customOptions}>\n * {markdownContent}\n * </MarkdownRenderer>\n * ```\n \n @example\n * With frontmatter (automatically stripped):\n * ```tsx\n * const blogPost = `\n * ---\n * title: \"My Blog Post\"\n * date: \"2023-12-01\"\n * author: \"John Doe\"\n * ---\n * # My Blog Post\n * This content will be rendered without the frontmatter.\n * `;\n \n <MarkdownRenderer>{blogPost}</MarkdownRenderer>\n * ```\n \n Features:\n * - Automatic frontmatter detection and removal\n * - Syntax-highlighted code blocks with theme support\n * - Clickable headers with anchor links\n * - Internationalized link handling with locale awareness\n * - Responsive tables with hover effects\n * - Custom blockquote, list, and image styling\n * - External link detection and security attributes\n * - Inline code with distinctive styling\n * - Lazy-loaded images with GitHub raw URL support\n * - Horizontal rules with custom styling\n \n Supported Markdown Elements:\n * - Headers (h1-h4) with click-to-anchor functionality\n * - Code blocks with language-specific syntax highlighting\n * - Inline code with background styling\n * - Blockquotes with custom border and padding\n * - Ordered and unordered lists with custom spacing\n * - Links (internal and external) with security attributes\n * - Images with lazy loading and responsive sizing\n * - Tables with hover effects and proper styling\n * - Horizontal rules with custom appearance\n * - All standard markdown formatting (bold, italic, etc.)\n \n Code Block Support:\n * - Language detection from code fence info\n * - Syntax highlighting through Code component\n * - Dark/light mode theme switching\n * - Line numbers and copy functionality (via Code component)\n * - Support for popular languages (JS, TS, Python, etc.)\n \n Link Handling:\n * - Automatic external link detection (starts with 'http')\n * - Security attributes for external links (rel=\"noopener noreferrer\")\n * - Locale-aware internal link routing\n * - Custom Link component integration\n * - Underlined styling for better visibility\n \n Image Processing:\n * - Automatic lazy loading for performance\n * - GitHub raw URL transformation for repository images\n * - Responsive sizing with max-width constraints\n * - Rounded corners for visual appeal\n \n Accessibility:\n * - Semantic HTML structure with proper heading hierarchy\n * - ARIA attributes through component integration\n * - Screen reader friendly link descriptions\n * - Keyboard navigation support\n * - High contrast styling options\n \n Performance:\n * - Lazy loading for images\n * - Efficient re-rendering with React memo patterns\n * - Code syntax highlighting with minimal bundle impact\n * - Optimized markdown parsing with markdown-to-jsx\n \n @param props - Component props\n * @param props.children - Raw markdown content to render\n * @param props.isDarkMode - Enable dark mode styling for code blocks\n * @param props.locale - Current locale for link internationalization\n * @param props.options - Additional markdown-to-jsx options\n * @param props.options.overrides - Custom component overrides for markdown elements\n \n @returns Rendered markdown content with custom styling and functionality\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode,\n locale,\n options,\n}) => {\n const { overrides, ...restOptions } = options ?? {};\n\n // Strip frontmatter from the markdown content before rendering\n const cleanMarkdown = stripFrontmatter(children);\n\n return (\n <CodeProvider>\n <TabProvider>\n <MarkdownProcessor\n options={{\n overrides: {\n h1: (props: ComponentProps<typeof H1>) => (\n <H1 isClickable={true} {...props} />\n ),\n h2: (props: ComponentProps<typeof H2>) => (\n <H2 isClickable={true} {...props} />\n ),\n h3: (props: ComponentProps<typeof H3>) => (\n <H3 isClickable={true} {...props} />\n ),\n h4: (props: ComponentProps<typeof H4>) => (\n <H4 isClickable={true} {...props} />\n ),\n h5: (props: ComponentProps<typeof H5>) => (\n <H5 isClickable={true} {...props} />\n ),\n h6: (props: ComponentProps<typeof H6>) => (\n <H6 isClickable={true} {...props} />\n ),\n\n code: (\n props: Omit<ComponentPropsWithoutRef<'code'>, 'children'> &\n Partial<CodeCompAttributes> & { children: string }\n ) =>\n !props.className ? (\n <strong className=\"bg-card/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n {props.children}\n </strong>\n ) : (\n <Code\n {...props}\n isDarkMode={isDarkMode}\n language={\n (props.className?.replace('lang-', '') \|\|\n 'plaintext') as BundledLanguage\n }\n fileName={props.fileName}\n showHeader={Boolean(props.fileName)}\n />\n ),\n\n blockquote: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'blockquote'>) => (\n <blockquote\n className={cn(\n 'border-card text-neutral mt-5 flex flex-col gap-3 border-l-4 pl-5',\n className\n )}\n {...props}\n />\n ),\n ul: ({ className, ...props }: ComponentPropsWithoutRef<'ul'>) => (\n <ul\n className={cn(\n 'mt-5 flex flex-col gap-3 pl-5 list-disc',\n className\n )}\n {...props}\n />\n ),\n ol: ({ className, ...props }: ComponentPropsWithoutRef<'ol'>) => (\n <ol\n className={cn(\n 'mt-5 flex flex-col gap-3 pl-5 list-decimal',\n className\n )}\n {...props}\n />\n ),\n img: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'img'>) => (\n <img\n {...props}\n loading=\"lazy\"\n className={cn(\n 'max-w-full max-h-[80vh] rounded-md',\n className\n )}\n src={`${props.src}?raw=true`}\n />\n ),\n a: (props: ComponentProps<typeof Link>) => (\n <Link\n color=\"neutral\"\n isExternalLink={props.href?.startsWith('http')}\n underlined={true}\n locale={locale}\n {...props}\n />\n ),\n pre: (props: ComponentPropsWithoutRef<'pre'>) => props.children,\n\n table: (props: ComponentProps<typeof Table>) => (\n <Table {...props} />\n ),\n th: ({ className, ...props }: ComponentPropsWithoutRef<'th'>) => (\n <th\n className={cn(\n 'border-neutral bg-neutral/10 border-b p-4',\n className\n )}\n {...props}\n />\n ),\n tr: ({ className, ...props }: ComponentPropsWithoutRef<'tr'>) => (\n <tr\n className={cn('hover:bg-neutral/10 hover:/10', className)}\n {...props}\n />\n ),\n td: ({ className, ...props }: ComponentPropsWithoutRef<'td'>) => (\n <td\n className={cn(\n 'border-b border-neutral-500/50 p-4',\n className\n )}\n {...props}\n />\n ),\n hr: ({ className, ...props }: ComponentPropsWithoutRef<'hr'>) => (\n <hr\n className={cn('mt-16 mx-6 text-neutral', className)}\n {...props}\n />\n ),\n // Support both <Tab> and <Tabs> in markdown\n Tabs: (props: ComponentProps<typeof Tab>) => <Tab {...props} />,\n Tab: (props: ComponentProps<typeof Tab>) => <Tab {...props} />,\n TabItem: (props: ComponentProps<typeof Tab.Item>) => (\n <Tab.Item {...props} />\n ),\n Columns: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'div'>) => (\n <div\n className={cn('flex max-md:flex-col gap-4', className)}\n {...props}\n />\n ),\n Column: ({\n className,\n ...props\n }: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex-1', className)} {...props} />\n ),\n ...overrides,\n },\n ...restOptions,\n }}\n >\n {cleanMarkdown ?? ''}\n </MarkdownProcessor>\n </TabProvider>\n </CodeProvider>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/MarkDownRender/processor.cjs CHANGED Viewed

@@ -1436,15 +1436,18 @@ const compiler = (markdown = "", options = {}) => {
         };
       },
       _render(node, _output, state = {}) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
-          {
-            href: sanitize(node.target, "a", "href") ?? void 0,
-            title: node.title,
-            children: _output(node.children, state)
-          },
-          state.key
-        );
+        const renderedChildren = _output(node.children, state);
+        const overrideComponent = getTag("a", options.overrides ?? {});
+        const props = {
+          key: state.key,
+          href: sanitize(node.target, "a", "href") ?? void 0,
+          title: node.title,
+          children: renderedChildren
+        };
+        if (typeof overrideComponent === "function") {
+          return overrideComponent(props);
+        }
+        return h("a", props, renderedChildren);
       }
     },
     // https://daringfireball.net/projects/markdown/syntax#autolink