@fragments-sdk/ui 0.9.6 → 0.9.7

package/dist/components/Stack/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Stack/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Stack.module.scss';\n\ntype Direction = 'row' | 'column';\ntype Gap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Responsive value — either a single value or per-breakpoint overrides */\nexport interface ResponsiveDirection {\n  /** Default (mobile-first) */\n  base?: Direction;\n  /** ≥640px */\n  sm?: Direction;\n  /** ≥768px */\n  md?: Direction;\n  /** ≥1024px */\n  lg?: Direction;\n  /** ≥1280px */\n  xl?: Direction;\n}\n\n/** Responsive gap value */\nexport interface ResponsiveGap {\n  /** Default (mobile-first) */\n  base?: Gap;\n  /** ≥640px */\n  sm?: Gap;\n  /** ≥768px */\n  md?: Gap;\n  /** ≥1024px */\n  lg?: Gap;\n  /** ≥1280px */\n  xl?: Gap;\n}\n\nexport interface StackProps {\n  children: React.ReactNode;\n  /**\n   * Stack direction.\n   * - A string for fixed direction: `\"row\"` or `\"column\"`\n   * - An object for responsive direction: `{ base: \"column\", md: \"row\" }`\n   */\n  direction?: Direction | ResponsiveDirection;\n  /**\n   * Gap between items.\n   * - A string for fixed gap: `\"sm\"`, `\"md\"`, etc.\n   * - An object for responsive gap: `{ base: \"sm\", md: \"lg\" }`\n   */\n  gap?: Gap | ResponsiveGap;\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'between';\n  wrap?: boolean;\n  /**\n   * Render a separator between each child.\n   * - `true` renders a default 1px border line\n   * - A ReactNode renders custom content between children\n   */\n  separator?: boolean | React.ReactNode;\n  as?: 'div' | 'section' | 'nav' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'ul' | 'ol';\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction isResponsiveDirection(\n  direction: StackProps['direction']\n): direction is ResponsiveDirection {\n  return typeof direction === 'object' && direction !== null;\n}\n\nfunction isResponsiveGap(gap: StackProps['gap']): gap is ResponsiveGap {\n  return typeof gap === 'object' && gap !== null;\n}\n\nconst StackRoot = React.forwardRef<HTMLElement, StackProps>(\n  function Stack(\n    {\n      children,\n      direction = 'column',\n      gap = 'md',\n      align,\n      justify,\n      wrap = false,\n      separator,\n      as: Component = 'div',\n      className,\n      style,\n    },\n    ref\n  ) {\n    let directionClass: string;\n    let gapClass: string | false;\n    let inlineStyle: React.CSSProperties | undefined;\n\n    // Handle responsive direction\n    if (isResponsiveDirection(direction)) {\n      directionClass = styles.directionResponsive;\n      const vars: Record<string, string> = {};\n      if (direction.base) vars['--fui-stack-direction'] = direction.base;\n      if (direction.sm) vars['--fui-stack-direction-sm'] = direction.sm;\n      if (direction.md) vars['--fui-stack-direction-md'] = direction.md;\n      if (direction.lg) vars['--fui-stack-direction-lg'] = direction.lg;\n      if (direction.xl) vars['--fui-stack-direction-xl'] = direction.xl;\n      inlineStyle = vars as unknown as React.CSSProperties;\n    } else {\n      directionClass = styles[direction];\n    }\n\n    // Handle responsive gap\n    if (isResponsiveGap(gap)) {\n      gapClass = styles.gapResponsive;\n      const gapVars: Record<string, string> = {};\n      if (gap.base && gap.base !== 'none') gapVars['--fui-stack-gap'] = `var(--fui-space-${gapToSpace(gap.base)})`;\n      if (gap.sm && gap.sm !== 'none') gapVars['--fui-stack-gap-sm'] = `var(--fui-space-${gapToSpace(gap.sm)})`;\n      if (gap.md && gap.md !== 'none') gapVars['--fui-stack-gap-md'] = `var(--fui-space-${gapToSpace(gap.md)})`;\n      if (gap.lg && gap.lg !== 'none') gapVars['--fui-stack-gap-lg'] = `var(--fui-space-${gapToSpace(gap.lg)})`;\n      if (gap.xl && gap.xl !== 'none') gapVars['--fui-stack-gap-xl'] = `var(--fui-space-${gapToSpace(gap.xl)})`;\n      inlineStyle = { ...inlineStyle, ...gapVars } as React.CSSProperties;\n    } else {\n      gapClass = gap !== 'none' && styles[`gap-${gap}`];\n    }\n\n    const classes = [\n      styles.stack,\n      directionClass,\n      gapClass,\n      align && styles[`align-${align}`],\n      justify && styles[`justify-${justify}`],\n      wrap && styles.wrap,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;\n\n    // Interleave separator between children when provided\n    let content: React.ReactNode = children;\n    if (separator) {\n      const validChildren = React.Children.toArray(children).filter(Boolean);\n      if (validChildren.length > 1) {\n        const resolvedDir = isResponsiveDirection(direction) ? (direction.base ?? 'column') : direction;\n        const separatorEl = separator === true ? (\n          <div\n            className={styles.separator}\n            data-orientation={resolvedDir === 'row' ? 'vertical' : 'horizontal'}\n            role=\"separator\"\n          />\n        ) : separator;\n\n        const items: React.ReactNode[] = [];\n        validChildren.forEach((child, i) => {\n          items.push(child);\n          if (i < validChildren.length - 1) {\n            items.push(\n              <React.Fragment key={`sep-${i}`}>{separatorEl}</React.Fragment>\n            );\n          }\n        });\n        content = items;\n      }\n    }\n\n    return (\n      <Component ref={ref as React.Ref<never>} className={classes} style={mergedStyle}>\n        {content}\n      </Component>\n    );\n  }\n);\n\n// Map gap prop values to space variable numbers\nfunction gapToSpace(gap: Gap): string {\n  const map: Record<Gap, string> = {\n    none: '0',\n    xs: '1',\n    sm: '2',\n    md: '3',\n    lg: '4',\n    xl: '6',\n  };\n  return map[gap];\n}\n\nexport const Stack = Object.assign(StackRoot, {\n  Root: StackRoot,\n});\n"],"names":["React","Stack","styles","jsx"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Stack/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Stack.module.scss';\n\ntype Direction = 'row' | 'column';\ntype Gap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Responsive value — either a single value or per-breakpoint overrides */\nexport interface ResponsiveDirection {\n  /** Default (mobile-first) */\n  base?: Direction;\n  /** ≥640px */\n  sm?: Direction;\n  /** ≥768px */\n  md?: Direction;\n  /** ≥1024px */\n  lg?: Direction;\n  /** ≥1280px */\n  xl?: Direction;\n}\n\n/** Responsive gap value */\nexport interface ResponsiveGap {\n  /** Default (mobile-first) */\n  base?: Gap;\n  /** ≥640px */\n  sm?: Gap;\n  /** ≥768px */\n  md?: Gap;\n  /** ≥1024px */\n  lg?: Gap;\n  /** ≥1280px */\n  xl?: Gap;\n}\n\nexport interface StackProps {\n  children: React.ReactNode;\n  /**\n   * Stack direction.\n   * - A string for fixed direction: `\"row\"` or `\"column\"`\n   * - An object for responsive direction: `{ base: \"column\", md: \"row\" }`\n   */\n  direction?: Direction | ResponsiveDirection;\n  /**\n   * Gap between items.\n   * - A string for fixed gap: `\"sm\"`, `\"md\"`, etc.\n   * - An object for responsive gap: `{ base: \"sm\", md: \"lg\" }`\n   */\n  gap?: Gap | ResponsiveGap;\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'between';\n  wrap?: boolean;\n  /**\n   * Render a separator between each child.\n   * - `true` renders a default 1px border line\n   * - A ReactNode renders custom content between children\n   */\n  separator?: boolean | React.ReactNode;\n  as?: 'div' | 'section' | 'nav' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'ul' | 'ol';\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction isResponsiveDirection(\n  direction: StackProps['direction']\n): direction is ResponsiveDirection {\n  return typeof direction === 'object' && direction !== null;\n}\n\nfunction isResponsiveGap(gap: StackProps['gap']): gap is ResponsiveGap {\n  return typeof gap === 'object' && gap !== null;\n}\n\nconst StackRoot = React.forwardRef<HTMLElement, StackProps>(\n  function Stack(\n    {\n      children,\n      direction = 'column',\n      gap = 'md',\n      align,\n      justify,\n      wrap = false,\n      separator,\n      as: Component = 'div',\n      className,\n      style,\n    },\n    ref\n  ) {\n    let directionClass: string;\n    let gapClass: string | false;\n    let inlineStyle: React.CSSProperties | undefined;\n\n    // Handle responsive direction\n    if (isResponsiveDirection(direction)) {\n      directionClass = styles.directionResponsive;\n      const vars: Record<string, string> = {};\n      if (direction.base) vars['--fui-stack-direction'] = direction.base;\n      if (direction.sm) vars['--fui-stack-direction-sm'] = direction.sm;\n      if (direction.md) vars['--fui-stack-direction-md'] = direction.md;\n      if (direction.lg) vars['--fui-stack-direction-lg'] = direction.lg;\n      if (direction.xl) vars['--fui-stack-direction-xl'] = direction.xl;\n      inlineStyle = vars as unknown as React.CSSProperties;\n    } else {\n      directionClass = styles[direction];\n    }\n\n    // Handle responsive gap\n    if (isResponsiveGap(gap)) {\n      gapClass = styles.gapResponsive;\n      const gapVars: Record<string, string> = {};\n      if (gap.base && gap.base !== 'none') gapVars['--fui-stack-gap'] = `var(--fui-space-${gapToSpace(gap.base)})`;\n      if (gap.sm && gap.sm !== 'none') gapVars['--fui-stack-gap-sm'] = `var(--fui-space-${gapToSpace(gap.sm)})`;\n      if (gap.md && gap.md !== 'none') gapVars['--fui-stack-gap-md'] = `var(--fui-space-${gapToSpace(gap.md)})`;\n      if (gap.lg && gap.lg !== 'none') gapVars['--fui-stack-gap-lg'] = `var(--fui-space-${gapToSpace(gap.lg)})`;\n      if (gap.xl && gap.xl !== 'none') gapVars['--fui-stack-gap-xl'] = `var(--fui-space-${gapToSpace(gap.xl)})`;\n      inlineStyle = { ...inlineStyle, ...gapVars } as React.CSSProperties;\n    } else {\n      gapClass = gap !== 'none' && styles[`gap-${gap}`];\n    }\n\n    const classes = [\n      styles.stack,\n      directionClass,\n      gapClass,\n      align && styles[`align-${align}`],\n      justify && styles[`justify-${justify}`],\n      wrap && styles.wrap,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;\n\n    // Interleave separator between children when provided\n    let content: React.ReactNode = children;\n    if (separator) {\n      const validChildren = React.Children.toArray(children).filter(Boolean);\n      if (validChildren.length > 1) {\n        const resolvedDir = isResponsiveDirection(direction) ? (direction.base ?? 'column') : direction;\n        const separatorEl = separator === true ? (\n          <div\n            className={styles.separator}\n            data-orientation={resolvedDir === 'row' ? 'vertical' : 'horizontal'}\n            role=\"separator\"\n          />\n        ) : separator;\n\n        const items: React.ReactNode[] = [];\n        validChildren.forEach((child, idx) => {\n          items.push(child);\n          if (idx < validChildren.length - 1) {\n            const childKey = React.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;\n            items.push(\n              <React.Fragment key={`sep-${childKey}`}>{separatorEl}</React.Fragment>\n            );\n          }\n        });\n        content = items;\n      }\n    }\n\n    return (\n      <Component ref={ref as React.Ref<never>} className={classes} style={mergedStyle}>\n        {content}\n      </Component>\n    );\n  }\n);\n\n// Map gap prop values to space variable numbers\nfunction gapToSpace(gap: Gap): string {\n  const map: Record<Gap, string> = {\n    none: '0',\n    xs: '1',\n    sm: '2',\n    md: '3',\n    lg: '4',\n    xl: '6',\n  };\n  return map[gap];\n}\n\nexport const Stack = Object.assign(StackRoot, {\n  Root: StackRoot,\n});\n"],"names":["React","Stack","styles","jsx"],"mappings":"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"}

package/dist/components/Stack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClC,KAAK,GAAG,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,2EAA2E;AAC3E,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB;AAED,2BAA2B;AAC3B,MAAM,WAAW,aAAa;IAC5B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,aAAa;IACb,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,aAAa;IACb,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,cAAc;IACd,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,cAAc;IACd,EAAE,CAAC,EAAE,GAAG,CAAC;CACV;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,mBAAmB,CAAC;IAC5C;;;;OAIG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA0HD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClC,KAAK,GAAG,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,2EAA2E;AAC3E,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB;AAED,2BAA2B;AAC3B,MAAM,WAAW,aAAa;IAC5B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,aAAa;IACb,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,aAAa;IACb,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,cAAc;IACd,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,cAAc;IACd,EAAE,CAAC,EAAE,GAAG,CAAC;CACV;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,mBAAmB,CAAC;IAC5C;;;;OAIG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA2HD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Stack/index.js

@@ -71,11 +71,12 @@ const StackRoot = React.forwardRef(
           }
         ) : separator;
         const items = [];
-        validChildren.forEach((child, i) => {
+        validChildren.forEach((child, idx) => {
           items.push(child);
-          if (i < validChildren.length - 1) {
+          if (idx < validChildren.length - 1) {
+            const childKey = React.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;
             items.push(
-              /* @__PURE__ */ jsx(React.Fragment, { children: separatorEl }, `sep-${i}`)
+              /* @__PURE__ */ jsx(React.Fragment, { children: separatorEl }, `sep-${childKey}`)
             );
           }
         });

package/dist/components/Stack/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Stack/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Stack.module.scss';\n\ntype Direction = 'row' | 'column';\ntype Gap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Responsive value — either a single value or per-breakpoint overrides */\nexport interface ResponsiveDirection {\n  /** Default (mobile-first) */\n  base?: Direction;\n  /** ≥640px */\n  sm?: Direction;\n  /** ≥768px */\n  md?: Direction;\n  /** ≥1024px */\n  lg?: Direction;\n  /** ≥1280px */\n  xl?: Direction;\n}\n\n/** Responsive gap value */\nexport interface ResponsiveGap {\n  /** Default (mobile-first) */\n  base?: Gap;\n  /** ≥640px */\n  sm?: Gap;\n  /** ≥768px */\n  md?: Gap;\n  /** ≥1024px */\n  lg?: Gap;\n  /** ≥1280px */\n  xl?: Gap;\n}\n\nexport interface StackProps {\n  children: React.ReactNode;\n  /**\n   * Stack direction.\n   * - A string for fixed direction: `\"row\"` or `\"column\"`\n   * - An object for responsive direction: `{ base: \"column\", md: \"row\" }`\n   */\n  direction?: Direction | ResponsiveDirection;\n  /**\n   * Gap between items.\n   * - A string for fixed gap: `\"sm\"`, `\"md\"`, etc.\n   * - An object for responsive gap: `{ base: \"sm\", md: \"lg\" }`\n   */\n  gap?: Gap | ResponsiveGap;\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'between';\n  wrap?: boolean;\n  /**\n   * Render a separator between each child.\n   * - `true` renders a default 1px border line\n   * - A ReactNode renders custom content between children\n   */\n  separator?: boolean | React.ReactNode;\n  as?: 'div' | 'section' | 'nav' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'ul' | 'ol';\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction isResponsiveDirection(\n  direction: StackProps['direction']\n): direction is ResponsiveDirection {\n  return typeof direction === 'object' && direction !== null;\n}\n\nfunction isResponsiveGap(gap: StackProps['gap']): gap is ResponsiveGap {\n  return typeof gap === 'object' && gap !== null;\n}\n\nconst StackRoot = React.forwardRef<HTMLElement, StackProps>(\n  function Stack(\n    {\n      children,\n      direction = 'column',\n      gap = 'md',\n      align,\n      justify,\n      wrap = false,\n      separator,\n      as: Component = 'div',\n      className,\n      style,\n    },\n    ref\n  ) {\n    let directionClass: string;\n    let gapClass: string | false;\n    let inlineStyle: React.CSSProperties | undefined;\n\n    // Handle responsive direction\n    if (isResponsiveDirection(direction)) {\n      directionClass = styles.directionResponsive;\n      const vars: Record<string, string> = {};\n      if (direction.base) vars['--fui-stack-direction'] = direction.base;\n      if (direction.sm) vars['--fui-stack-direction-sm'] = direction.sm;\n      if (direction.md) vars['--fui-stack-direction-md'] = direction.md;\n      if (direction.lg) vars['--fui-stack-direction-lg'] = direction.lg;\n      if (direction.xl) vars['--fui-stack-direction-xl'] = direction.xl;\n      inlineStyle = vars as unknown as React.CSSProperties;\n    } else {\n      directionClass = styles[direction];\n    }\n\n    // Handle responsive gap\n    if (isResponsiveGap(gap)) {\n      gapClass = styles.gapResponsive;\n      const gapVars: Record<string, string> = {};\n      if (gap.base && gap.base !== 'none') gapVars['--fui-stack-gap'] = `var(--fui-space-${gapToSpace(gap.base)})`;\n      if (gap.sm && gap.sm !== 'none') gapVars['--fui-stack-gap-sm'] = `var(--fui-space-${gapToSpace(gap.sm)})`;\n      if (gap.md && gap.md !== 'none') gapVars['--fui-stack-gap-md'] = `var(--fui-space-${gapToSpace(gap.md)})`;\n      if (gap.lg && gap.lg !== 'none') gapVars['--fui-stack-gap-lg'] = `var(--fui-space-${gapToSpace(gap.lg)})`;\n      if (gap.xl && gap.xl !== 'none') gapVars['--fui-stack-gap-xl'] = `var(--fui-space-${gapToSpace(gap.xl)})`;\n      inlineStyle = { ...inlineStyle, ...gapVars } as React.CSSProperties;\n    } else {\n      gapClass = gap !== 'none' && styles[`gap-${gap}`];\n    }\n\n    const classes = [\n      styles.stack,\n      directionClass,\n      gapClass,\n      align && styles[`align-${align}`],\n      justify && styles[`justify-${justify}`],\n      wrap && styles.wrap,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;\n\n    // Interleave separator between children when provided\n    let content: React.ReactNode = children;\n    if (separator) {\n      const validChildren = React.Children.toArray(children).filter(Boolean);\n      if (validChildren.length > 1) {\n        const resolvedDir = isResponsiveDirection(direction) ? (direction.base ?? 'column') : direction;\n        const separatorEl = separator === true ? (\n          <div\n            className={styles.separator}\n            data-orientation={resolvedDir === 'row' ? 'vertical' : 'horizontal'}\n            role=\"separator\"\n          />\n        ) : separator;\n\n        const items: React.ReactNode[] = [];\n        validChildren.forEach((child, i) => {\n          items.push(child);\n          if (i < validChildren.length - 1) {\n            items.push(\n              <React.Fragment key={`sep-${i}`}>{separatorEl}</React.Fragment>\n            );\n          }\n        });\n        content = items;\n      }\n    }\n\n    return (\n      <Component ref={ref as React.Ref<never>} className={classes} style={mergedStyle}>\n        {content}\n      </Component>\n    );\n  }\n);\n\n// Map gap prop values to space variable numbers\nfunction gapToSpace(gap: Gap): string {\n  const map: Record<Gap, string> = {\n    none: '0',\n    xs: '1',\n    sm: '2',\n    md: '3',\n    lg: '4',\n    xl: '6',\n  };\n  return map[gap];\n}\n\nexport const Stack = Object.assign(StackRoot, {\n  Root: StackRoot,\n});\n"],"names":["Stack"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Stack/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Stack.module.scss';\n\ntype Direction = 'row' | 'column';\ntype Gap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Responsive value — either a single value or per-breakpoint overrides */\nexport interface ResponsiveDirection {\n  /** Default (mobile-first) */\n  base?: Direction;\n  /** ≥640px */\n  sm?: Direction;\n  /** ≥768px */\n  md?: Direction;\n  /** ≥1024px */\n  lg?: Direction;\n  /** ≥1280px */\n  xl?: Direction;\n}\n\n/** Responsive gap value */\nexport interface ResponsiveGap {\n  /** Default (mobile-first) */\n  base?: Gap;\n  /** ≥640px */\n  sm?: Gap;\n  /** ≥768px */\n  md?: Gap;\n  /** ≥1024px */\n  lg?: Gap;\n  /** ≥1280px */\n  xl?: Gap;\n}\n\nexport interface StackProps {\n  children: React.ReactNode;\n  /**\n   * Stack direction.\n   * - A string for fixed direction: `\"row\"` or `\"column\"`\n   * - An object for responsive direction: `{ base: \"column\", md: \"row\" }`\n   */\n  direction?: Direction | ResponsiveDirection;\n  /**\n   * Gap between items.\n   * - A string for fixed gap: `\"sm\"`, `\"md\"`, etc.\n   * - An object for responsive gap: `{ base: \"sm\", md: \"lg\" }`\n   */\n  gap?: Gap | ResponsiveGap;\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'between';\n  wrap?: boolean;\n  /**\n   * Render a separator between each child.\n   * - `true` renders a default 1px border line\n   * - A ReactNode renders custom content between children\n   */\n  separator?: boolean | React.ReactNode;\n  as?: 'div' | 'section' | 'nav' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'ul' | 'ol';\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction isResponsiveDirection(\n  direction: StackProps['direction']\n): direction is ResponsiveDirection {\n  return typeof direction === 'object' && direction !== null;\n}\n\nfunction isResponsiveGap(gap: StackProps['gap']): gap is ResponsiveGap {\n  return typeof gap === 'object' && gap !== null;\n}\n\nconst StackRoot = React.forwardRef<HTMLElement, StackProps>(\n  function Stack(\n    {\n      children,\n      direction = 'column',\n      gap = 'md',\n      align,\n      justify,\n      wrap = false,\n      separator,\n      as: Component = 'div',\n      className,\n      style,\n    },\n    ref\n  ) {\n    let directionClass: string;\n    let gapClass: string | false;\n    let inlineStyle: React.CSSProperties | undefined;\n\n    // Handle responsive direction\n    if (isResponsiveDirection(direction)) {\n      directionClass = styles.directionResponsive;\n      const vars: Record<string, string> = {};\n      if (direction.base) vars['--fui-stack-direction'] = direction.base;\n      if (direction.sm) vars['--fui-stack-direction-sm'] = direction.sm;\n      if (direction.md) vars['--fui-stack-direction-md'] = direction.md;\n      if (direction.lg) vars['--fui-stack-direction-lg'] = direction.lg;\n      if (direction.xl) vars['--fui-stack-direction-xl'] = direction.xl;\n      inlineStyle = vars as unknown as React.CSSProperties;\n    } else {\n      directionClass = styles[direction];\n    }\n\n    // Handle responsive gap\n    if (isResponsiveGap(gap)) {\n      gapClass = styles.gapResponsive;\n      const gapVars: Record<string, string> = {};\n      if (gap.base && gap.base !== 'none') gapVars['--fui-stack-gap'] = `var(--fui-space-${gapToSpace(gap.base)})`;\n      if (gap.sm && gap.sm !== 'none') gapVars['--fui-stack-gap-sm'] = `var(--fui-space-${gapToSpace(gap.sm)})`;\n      if (gap.md && gap.md !== 'none') gapVars['--fui-stack-gap-md'] = `var(--fui-space-${gapToSpace(gap.md)})`;\n      if (gap.lg && gap.lg !== 'none') gapVars['--fui-stack-gap-lg'] = `var(--fui-space-${gapToSpace(gap.lg)})`;\n      if (gap.xl && gap.xl !== 'none') gapVars['--fui-stack-gap-xl'] = `var(--fui-space-${gapToSpace(gap.xl)})`;\n      inlineStyle = { ...inlineStyle, ...gapVars } as React.CSSProperties;\n    } else {\n      gapClass = gap !== 'none' && styles[`gap-${gap}`];\n    }\n\n    const classes = [\n      styles.stack,\n      directionClass,\n      gapClass,\n      align && styles[`align-${align}`],\n      justify && styles[`justify-${justify}`],\n      wrap && styles.wrap,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;\n\n    // Interleave separator between children when provided\n    let content: React.ReactNode = children;\n    if (separator) {\n      const validChildren = React.Children.toArray(children).filter(Boolean);\n      if (validChildren.length > 1) {\n        const resolvedDir = isResponsiveDirection(direction) ? (direction.base ?? 'column') : direction;\n        const separatorEl = separator === true ? (\n          <div\n            className={styles.separator}\n            data-orientation={resolvedDir === 'row' ? 'vertical' : 'horizontal'}\n            role=\"separator\"\n          />\n        ) : separator;\n\n        const items: React.ReactNode[] = [];\n        validChildren.forEach((child, idx) => {\n          items.push(child);\n          if (idx < validChildren.length - 1) {\n            const childKey = React.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;\n            items.push(\n              <React.Fragment key={`sep-${childKey}`}>{separatorEl}</React.Fragment>\n            );\n          }\n        });\n        content = items;\n      }\n    }\n\n    return (\n      <Component ref={ref as React.Ref<never>} className={classes} style={mergedStyle}>\n        {content}\n      </Component>\n    );\n  }\n);\n\n// Map gap prop values to space variable numbers\nfunction gapToSpace(gap: Gap): string {\n  const map: Record<Gap, string> = {\n    none: '0',\n    xs: '1',\n    sm: '2',\n    md: '3',\n    lg: '4',\n    xl: '6',\n  };\n  return map[gap];\n}\n\nexport const Stack = Object.assign(StackRoot, {\n  Root: StackRoot,\n});\n"],"names":["Stack"],"mappings":"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"}

package/dist/markdown.cjs

@@ -40,7 +40,7 @@ function loadDeps() {
 }
 function FallbackRenderer({ content, className }) {
   const paragraphs = content.split(/\n{2,}/);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: paragraphs.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx("p", { children: p }, i)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: paragraphs.map((p) => /* @__PURE__ */ jsxRuntime.jsx("p", { children: p }, p)) });
 }
 const MarkdownRoot = React__namespace.forwardRef(
   function Markdown2({ content, components: componentOverrides, className }, ref) {

package/dist/markdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.cjs","sources":["../src/components/Markdown/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Markdown.module.scss';\nimport '../../styles/globals.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface MarkdownProps {\n  /** Markdown string to render */\n  content: string;\n  /** Override map for markdown element components */\n  components?: Record<string, React.ComponentType<React.HTMLAttributes<HTMLElement>>>;\n  /** Additional class name */\n  className?: string;\n}\n\n// ============================================\n// Lazy-loaded react-markdown\n// ============================================\n\ntype ReactMarkdownType = React.ComponentType<{\n  children: string;\n  remarkPlugins?: unknown[];\n  components?: Record<string, React.ComponentType<unknown>>;\n}>;\n\nlet ReactMarkdown: ReactMarkdownType | null = null;\nlet remarkGfm: unknown = null;\nlet loadAttempted = false;\nlet loadFailed = false;\n\nfunction loadDeps() {\n  if (loadAttempted) return;\n  loadAttempted = true;\n\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    ReactMarkdown = require('react-markdown').default || require('react-markdown');\n  } catch {\n    loadFailed = true;\n  }\n\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    remarkGfm = require('remark-gfm').default || require('remark-gfm');\n  } catch {\n    // remark-gfm is optional; markdown still works without it\n  }\n}\n\n// ============================================\n// Fallback renderer (plain text with paragraphs)\n// ============================================\n\nfunction FallbackRenderer({ content, className }: { content: string; className?: string }) {\n  const paragraphs = content.split(/\\n{2,}/);\n  return (\n    <div className={className}>\n      {paragraphs.map((p, i) => (\n        <p key={i}>{p}</p>\n      ))}\n    </div>\n  );\n}\n\n// ============================================\n// Component\n// ============================================\n\nconst MarkdownRoot = React.forwardRef<HTMLDivElement, MarkdownProps>(\n  function Markdown({ content, components: componentOverrides, className }, ref) {\n    loadDeps();\n\n    const classes = [styles.markdown, className].filter(Boolean).join(' ');\n\n    if (loadFailed || !ReactMarkdown) {\n      if (loadFailed && process.env.NODE_ENV === 'development') {\n        console.warn(\n          '[@fragments-sdk/ui] Markdown: react-markdown is not installed. ' +\n          'Install it with: npm install react-markdown remark-gfm'\n        );\n      }\n      return (\n        <div ref={ref} className={classes}>\n          <FallbackRenderer content={content} />\n        </div>\n      );\n    }\n\n    const plugins = remarkGfm ? [remarkGfm] : [];\n\n    return (\n      <div ref={ref} className={classes}>\n        <ReactMarkdown\n          remarkPlugins={plugins}\n          components={componentOverrides as Record<string, React.ComponentType<unknown>>}\n        >\n          {content}\n        </ReactMarkdown>\n      </div>\n    );\n  }\n);\n\nexport const Markdown = Object.assign(MarkdownRoot, {\n  Root: MarkdownRoot,\n});\n"],"names":["jsx","React","Markdown","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAI,gBAA0C;AAC9C,IAAI,YAAqB;AACzB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AAEjB,SAAS,WAAW;AAClB,MAAI,cAAe;AACnB,kBAAgB;AAEhB,MAAI;AAEF,oBAAgB,QAAQ,gBAAgB,EAAE,WAAW,QAAQ,gBAAgB;AAAA,EAC/E,QAAQ;AACN,iBAAa;AAAA,EACf;AAEA,MAAI;AAEF,gBAAY,QAAQ,YAAY,EAAE,WAAW,QAAQ,YAAY;AAAA,EACnE,QAAQ;AAAA,EAER;AACF;AAMA,SAAS,iBAAiB,EAAE,SAAS,aAAsD;AACzF,QAAM,aAAa,QAAQ,MAAM,QAAQ;AACzC,SACEA,2BAAAA,IAAC,OAAA,EAAI,WACF,UAAA,WAAW,IAAI,CAAC,GAAG,MAClBA,2BAAAA,IAAC,KAAA,EAAW,UAAA,KAAJ,CAAM,CACf,GACH;AAEJ;AAMA,MAAM,eAAeC,iBAAM;AAAA,EACzB,SAASC,UAAS,EAAE,SAAS,YAAY,oBAAoB,UAAA,GAAa,KAAK;AAC7E,aAAA;AAEA,UAAM,UAAU,CAACC,gBAAAA,QAAO,UAAU,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAErE,QAAI,cAAc,CAAC,eAAe;AAChC,UAAI,cAAc,QAAQ,IAAI,aAAa,eAAe;AACxD,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAGJ;AACA,aACEH,+BAAC,SAAI,KAAU,WAAW,SACxB,UAAAA,2BAAAA,IAAC,kBAAA,EAAiB,SAAkB,EAAA,CACtC;AAAA,IAEJ;AAEA,UAAM,UAAU,YAAY,CAAC,SAAS,IAAI,CAAA;AAE1C,WACEA,2BAAAA,IAAC,OAAA,EAAI,KAAU,WAAW,SACxB,UAAAA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAe;AAAA,QACf,YAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAEO,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,MAAM;AACR,CAAC;;"}
+{"version":3,"file":"markdown.cjs","sources":["../src/components/Markdown/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Markdown.module.scss';\nimport '../../styles/globals.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface MarkdownProps {\n  /** Markdown string to render */\n  content: string;\n  /** Override map for markdown element components */\n  components?: Record<string, React.ComponentType<React.HTMLAttributes<HTMLElement>>>;\n  /** Additional class name */\n  className?: string;\n}\n\n// ============================================\n// Lazy-loaded react-markdown\n// ============================================\n\ntype ReactMarkdownType = React.ComponentType<{\n  children: string;\n  remarkPlugins?: unknown[];\n  components?: Record<string, React.ComponentType<unknown>>;\n}>;\n\nlet ReactMarkdown: ReactMarkdownType | null = null;\nlet remarkGfm: unknown = null;\nlet loadAttempted = false;\nlet loadFailed = false;\n\nfunction loadDeps() {\n  if (loadAttempted) return;\n  loadAttempted = true;\n\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    ReactMarkdown = require('react-markdown').default || require('react-markdown');\n  } catch {\n    loadFailed = true;\n  }\n\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    remarkGfm = require('remark-gfm').default || require('remark-gfm');\n  } catch {\n    // remark-gfm is optional; markdown still works without it\n  }\n}\n\n// ============================================\n// Fallback renderer (plain text with paragraphs)\n// ============================================\n\nfunction FallbackRenderer({ content, className }: { content: string; className?: string }) {\n  const paragraphs = content.split(/\\n{2,}/);\n  return (\n    <div className={className}>\n      {paragraphs.map((p) => (\n        <p key={p}>{p}</p>\n      ))}\n    </div>\n  );\n}\n\n// ============================================\n// Component\n// ============================================\n\nconst MarkdownRoot = React.forwardRef<HTMLDivElement, MarkdownProps>(\n  function Markdown({ content, components: componentOverrides, className }, ref) {\n    loadDeps();\n\n    const classes = [styles.markdown, className].filter(Boolean).join(' ');\n\n    if (loadFailed || !ReactMarkdown) {\n      if (loadFailed && process.env.NODE_ENV === 'development') {\n        console.warn(\n          '[@fragments-sdk/ui] Markdown: react-markdown is not installed. ' +\n          'Install it with: npm install react-markdown remark-gfm'\n        );\n      }\n      return (\n        <div ref={ref} className={classes}>\n          <FallbackRenderer content={content} />\n        </div>\n      );\n    }\n\n    const plugins = remarkGfm ? [remarkGfm] : [];\n\n    return (\n      <div ref={ref} className={classes}>\n        <ReactMarkdown\n          remarkPlugins={plugins}\n          components={componentOverrides as Record<string, React.ComponentType<unknown>>}\n        >\n          {content}\n        </ReactMarkdown>\n      </div>\n    );\n  }\n);\n\nexport const Markdown = Object.assign(MarkdownRoot, {\n  Root: MarkdownRoot,\n});\n"],"names":["jsx","React","Markdown","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAI,gBAA0C;AAC9C,IAAI,YAAqB;AACzB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AAEjB,SAAS,WAAW;AAClB,MAAI,cAAe;AACnB,kBAAgB;AAEhB,MAAI;AAEF,oBAAgB,QAAQ,gBAAgB,EAAE,WAAW,QAAQ,gBAAgB;AAAA,EAC/E,QAAQ;AACN,iBAAa;AAAA,EACf;AAEA,MAAI;AAEF,gBAAY,QAAQ,YAAY,EAAE,WAAW,QAAQ,YAAY;AAAA,EACnE,QAAQ;AAAA,EAER;AACF;AAMA,SAAS,iBAAiB,EAAE,SAAS,aAAsD;AACzF,QAAM,aAAa,QAAQ,MAAM,QAAQ;AACzC,SACEA,2BAAAA,IAAC,OAAA,EAAI,WACF,UAAA,WAAW,IAAI,CAAC,MACfA,2BAAAA,IAAC,KAAA,EAAW,UAAA,EAAA,GAAJ,CAAM,CACf,GACH;AAEJ;AAMA,MAAM,eAAeC,iBAAM;AAAA,EACzB,SAASC,UAAS,EAAE,SAAS,YAAY,oBAAoB,UAAA,GAAa,KAAK;AAC7E,aAAA;AAEA,UAAM,UAAU,CAACC,gBAAAA,QAAO,UAAU,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAErE,QAAI,cAAc,CAAC,eAAe;AAChC,UAAI,cAAc,QAAQ,IAAI,aAAa,eAAe;AACxD,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAGJ;AACA,aACEH,+BAAC,SAAI,KAAU,WAAW,SACxB,UAAAA,2BAAAA,IAAC,kBAAA,EAAiB,SAAkB,EAAA,CACtC;AAAA,IAEJ;AAEA,UAAM,UAAU,YAAY,CAAC,SAAS,IAAI,CAAA;AAE1C,WACEA,2BAAAA,IAAC,OAAA,EAAI,KAAU,WAAW,SACxB,UAAAA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAe;AAAA,QACf,YAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAEO,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,MAAM;AACR,CAAC;;"}

package/dist/markdown.js

@@ -21,7 +21,7 @@ function loadDeps() {
 }
 function FallbackRenderer({ content, className }) {
   const paragraphs = content.split(/\n{2,}/);
-  return /* @__PURE__ */ jsx("div", { className, children: paragraphs.map((p, i) => /* @__PURE__ */ jsx("p", { children: p }, i)) });
+  return /* @__PURE__ */ jsx("div", { className, children: paragraphs.map((p) => /* @__PURE__ */ jsx("p", { children: p }, p)) });
 }
 const MarkdownRoot = React.forwardRef(
   function Markdown2({ content, components: componentOverrides, className }, ref) {

package/dist/markdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.js","sources":["../src/components/Markdown/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Markdown.module.scss';\nimport '../../styles/globals.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface MarkdownProps {\n  /** Markdown string to render */\n  content: string;\n  /** Override map for markdown element components */\n  components?: Record<string, React.ComponentType<React.HTMLAttributes<HTMLElement>>>;\n  /** Additional class name */\n  className?: string;\n}\n\n// ============================================\n// Lazy-loaded react-markdown\n// ============================================\n\ntype ReactMarkdownType = React.ComponentType<{\n  children: string;\n  remarkPlugins?: unknown[];\n  components?: Record<string, React.ComponentType<unknown>>;\n}>;\n\nlet ReactMarkdown: ReactMarkdownType | null = null;\nlet remarkGfm: unknown = null;\nlet loadAttempted = false;\nlet loadFailed = false;\n\nfunction loadDeps() {\n  if (loadAttempted) return;\n  loadAttempted = true;\n\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    ReactMarkdown = require('react-markdown').default || require('react-markdown');\n  } catch {\n    loadFailed = true;\n  }\n\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    remarkGfm = require('remark-gfm').default || require('remark-gfm');\n  } catch {\n    // remark-gfm is optional; markdown still works without it\n  }\n}\n\n// ============================================\n// Fallback renderer (plain text with paragraphs)\n// ============================================\n\nfunction FallbackRenderer({ content, className }: { content: string; className?: string }) {\n  const paragraphs = content.split(/\\n{2,}/);\n  return (\n    <div className={className}>\n      {paragraphs.map((p, i) => (\n        <p key={i}>{p}</p>\n      ))}\n    </div>\n  );\n}\n\n// ============================================\n// Component\n// ============================================\n\nconst MarkdownRoot = React.forwardRef<HTMLDivElement, MarkdownProps>(\n  function Markdown({ content, components: componentOverrides, className }, ref) {\n    loadDeps();\n\n    const classes = [styles.markdown, className].filter(Boolean).join(' ');\n\n    if (loadFailed || !ReactMarkdown) {\n      if (loadFailed && process.env.NODE_ENV === 'development') {\n        console.warn(\n          '[@fragments-sdk/ui] Markdown: react-markdown is not installed. ' +\n          'Install it with: npm install react-markdown remark-gfm'\n        );\n      }\n      return (\n        <div ref={ref} className={classes}>\n          <FallbackRenderer content={content} />\n        </div>\n      );\n    }\n\n    const plugins = remarkGfm ? [remarkGfm] : [];\n\n    return (\n      <div ref={ref} className={classes}>\n        <ReactMarkdown\n          remarkPlugins={plugins}\n          components={componentOverrides as Record<string, React.ComponentType<unknown>>}\n        >\n          {content}\n        </ReactMarkdown>\n      </div>\n    );\n  }\n);\n\nexport const Markdown = Object.assign(MarkdownRoot, {\n  Root: MarkdownRoot,\n});\n"],"names":["Markdown"],"mappings":";;;;AA6BA,IAAI,gBAA0C;AAC9C,IAAI,YAAqB;AACzB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AAEjB,SAAS,WAAW;AAClB,MAAI,cAAe;AACnB,kBAAgB;AAEhB,MAAI;AAEF,oBAAgB,QAAQ,gBAAgB,EAAE,WAAW,QAAQ,gBAAgB;AAAA,EAC/E,QAAQ;AACN,iBAAa;AAAA,EACf;AAEA,MAAI;AAEF,gBAAY,QAAQ,YAAY,EAAE,WAAW,QAAQ,YAAY;AAAA,EACnE,QAAQ;AAAA,EAER;AACF;AAMA,SAAS,iBAAiB,EAAE,SAAS,aAAsD;AACzF,QAAM,aAAa,QAAQ,MAAM,QAAQ;AACzC,SACE,oBAAC,OAAA,EAAI,WACF,UAAA,WAAW,IAAI,CAAC,GAAG,MAClB,oBAAC,KAAA,EAAW,UAAA,KAAJ,CAAM,CACf,GACH;AAEJ;AAMA,MAAM,eAAe,MAAM;AAAA,EACzB,SAASA,UAAS,EAAE,SAAS,YAAY,oBAAoB,UAAA,GAAa,KAAK;AAC7E,aAAA;AAEA,UAAM,UAAU,CAAC,OAAO,UAAU,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAErE,QAAI,cAAc,CAAC,eAAe;AAChC,UAAI,cAAc,QAAQ,IAAI,aAAa,eAAe;AACxD,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAGJ;AACA,aACE,oBAAC,SAAI,KAAU,WAAW,SACxB,UAAA,oBAAC,kBAAA,EAAiB,SAAkB,EAAA,CACtC;AAAA,IAEJ;AAEA,UAAM,UAAU,YAAY,CAAC,SAAS,IAAI,CAAA;AAE1C,WACE,oBAAC,OAAA,EAAI,KAAU,WAAW,SACxB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAe;AAAA,QACf,YAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAEO,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,MAAM;AACR,CAAC;"}
+{"version":3,"file":"markdown.js","sources":["../src/components/Markdown/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Markdown.module.scss';\nimport '../../styles/globals.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface MarkdownProps {\n  /** Markdown string to render */\n  content: string;\n  /** Override map for markdown element components */\n  components?: Record<string, React.ComponentType<React.HTMLAttributes<HTMLElement>>>;\n  /** Additional class name */\n  className?: string;\n}\n\n// ============================================\n// Lazy-loaded react-markdown\n// ============================================\n\ntype ReactMarkdownType = React.ComponentType<{\n  children: string;\n  remarkPlugins?: unknown[];\n  components?: Record<string, React.ComponentType<unknown>>;\n}>;\n\nlet ReactMarkdown: ReactMarkdownType | null = null;\nlet remarkGfm: unknown = null;\nlet loadAttempted = false;\nlet loadFailed = false;\n\nfunction loadDeps() {\n  if (loadAttempted) return;\n  loadAttempted = true;\n\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    ReactMarkdown = require('react-markdown').default || require('react-markdown');\n  } catch {\n    loadFailed = true;\n  }\n\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    remarkGfm = require('remark-gfm').default || require('remark-gfm');\n  } catch {\n    // remark-gfm is optional; markdown still works without it\n  }\n}\n\n// ============================================\n// Fallback renderer (plain text with paragraphs)\n// ============================================\n\nfunction FallbackRenderer({ content, className }: { content: string; className?: string }) {\n  const paragraphs = content.split(/\\n{2,}/);\n  return (\n    <div className={className}>\n      {paragraphs.map((p) => (\n        <p key={p}>{p}</p>\n      ))}\n    </div>\n  );\n}\n\n// ============================================\n// Component\n// ============================================\n\nconst MarkdownRoot = React.forwardRef<HTMLDivElement, MarkdownProps>(\n  function Markdown({ content, components: componentOverrides, className }, ref) {\n    loadDeps();\n\n    const classes = [styles.markdown, className].filter(Boolean).join(' ');\n\n    if (loadFailed || !ReactMarkdown) {\n      if (loadFailed && process.env.NODE_ENV === 'development') {\n        console.warn(\n          '[@fragments-sdk/ui] Markdown: react-markdown is not installed. ' +\n          'Install it with: npm install react-markdown remark-gfm'\n        );\n      }\n      return (\n        <div ref={ref} className={classes}>\n          <FallbackRenderer content={content} />\n        </div>\n      );\n    }\n\n    const plugins = remarkGfm ? [remarkGfm] : [];\n\n    return (\n      <div ref={ref} className={classes}>\n        <ReactMarkdown\n          remarkPlugins={plugins}\n          components={componentOverrides as Record<string, React.ComponentType<unknown>>}\n        >\n          {content}\n        </ReactMarkdown>\n      </div>\n    );\n  }\n);\n\nexport const Markdown = Object.assign(MarkdownRoot, {\n  Root: MarkdownRoot,\n});\n"],"names":["Markdown"],"mappings":";;;;AA6BA,IAAI,gBAA0C;AAC9C,IAAI,YAAqB;AACzB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AAEjB,SAAS,WAAW;AAClB,MAAI,cAAe;AACnB,kBAAgB;AAEhB,MAAI;AAEF,oBAAgB,QAAQ,gBAAgB,EAAE,WAAW,QAAQ,gBAAgB;AAAA,EAC/E,QAAQ;AACN,iBAAa;AAAA,EACf;AAEA,MAAI;AAEF,gBAAY,QAAQ,YAAY,EAAE,WAAW,QAAQ,YAAY;AAAA,EACnE,QAAQ;AAAA,EAER;AACF;AAMA,SAAS,iBAAiB,EAAE,SAAS,aAAsD;AACzF,QAAM,aAAa,QAAQ,MAAM,QAAQ;AACzC,SACE,oBAAC,OAAA,EAAI,WACF,UAAA,WAAW,IAAI,CAAC,MACf,oBAAC,KAAA,EAAW,UAAA,EAAA,GAAJ,CAAM,CACf,GACH;AAEJ;AAMA,MAAM,eAAe,MAAM;AAAA,EACzB,SAASA,UAAS,EAAE,SAAS,YAAY,oBAAoB,UAAA,GAAa,KAAK;AAC7E,aAAA;AAEA,UAAM,UAAU,CAAC,OAAO,UAAU,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAErE,QAAI,cAAc,CAAC,eAAe;AAChC,UAAI,cAAc,QAAQ,IAAI,aAAa,eAAe;AACxD,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAGJ;AACA,aACE,oBAAC,SAAI,KAAU,WAAW,SACxB,UAAA,oBAAC,kBAAA,EAAiB,SAAkB,EAAA,CACtC;AAAA,IAEJ;AAEA,UAAM,UAAU,YAAY,CAAC,SAAS,IAAI,CAAA;AAE1C,WACE,oBAAC,OAAA,EAAI,KAAU,WAAW,SACxB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAe;AAAA,QACf,YAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAEO,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,MAAM;AACR,CAAC;"}