@mieweb/ui 0.7.2 → 0.7.3-dev.1

package/dist/{chunk-7AMOKHTW.cjs → chunk-P3JEMF6E.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkRUEEDOE3_cjs = require('./chunk-RUEEDOE3.cjs');
+var chunkYIXTGWT4_cjs = require('./chunk-YIXTGWT4.cjs');
 var DOMPurify = require('dompurify');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -130,7 +130,7 @@ var MermaidBlock = ({ code, id }) => {
     return () => observer.disconnect();
   }, [render]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkRUEEDOE3_cjs.FenceBlock,
+    chunkYIXTGWT4_cjs.FenceBlock,
     {
       code,
       language: "mermaid",
@@ -150,5 +150,5 @@ var MermaidBlock = ({ code, id }) => {
 };
 
 exports.MermaidBlock = MermaidBlock;
-//# sourceMappingURL=chunk-7AMOKHTW.cjs.map
-//# sourceMappingURL=chunk-7AMOKHTW.cjs.map
+//# sourceMappingURL=chunk-P3JEMF6E.cjs.map
+//# sourceMappingURL=chunk-P3JEMF6E.cjs.map

package/dist/{chunk-7AMOKHTW.cjs.map → chunk-P3JEMF6E.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Markdown/MermaidBlock.tsx"],"names":["DOMPurify","useState","useMemo","useCallback","useEffect","jsx","FenceBlock"],"mappings":"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","file":"chunk-7AMOKHTW.cjs","sourcesContent":["/**\n * MermaidBlock — Renders Mermaid diagrams.\n * Requires `mermaid` to be installed by the consumer (optional peer dependency).\n */\nimport DOMPurify from 'dompurify';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { FenceBlock } from './FenceBlock';\n\ninterface MermaidBlockProps {\n  code: string;\n  id: string;\n}\n\ntype MermaidApi = {\n  initialize: (config: Record<string, unknown>) => void;\n  parse: (text: string) => Promise<unknown>;\n  render: (id: string, text: string) => Promise<{ svg: string }>;\n};\n\nlet mermaidInstance: MermaidApi | null = null;\nlet mermaidReady: Promise<MermaidApi> | null = null;\nlet mermaidTheme: 'dark' | 'default' = 'default';\n\nfunction currentTheme(): 'dark' | 'default' {\n  return document.documentElement.classList.contains('dark') ||\n    document.documentElement.getAttribute('data-theme') === 'dark'\n    ? 'dark'\n    : 'default';\n}\n\nfunction buildConfig(theme: 'dark' | 'default'): Record<string, unknown> {\n  const base: Record<string, unknown> = {\n    startOnLoad: false,\n    theme,\n    securityLevel: 'strict',\n  };\n  if (theme === 'dark') {\n    base.themeVariables = {\n      nodeBorder: '#6b7280',\n      mainBkg: '#4a4a4a',\n      nodeTextColor: '#ffffff',\n      clusterBkg: '#374151',\n      titleColor: '#ffffff',\n      edgeLabelBackground: '#374151',\n      lineColor: '#9ca3af',\n    };\n  }\n  return base;\n}\n\nasync function getMermaid(): Promise<MermaidApi> {\n  const theme = currentTheme();\n  if (mermaidInstance) {\n    if (theme !== mermaidTheme) {\n      mermaidTheme = theme;\n      mermaidInstance.initialize(buildConfig(theme));\n    }\n    return mermaidInstance;\n  }\n  if (!mermaidReady) {\n    mermaidReady = import(/* @vite-ignore */ 'mermaid').then((mod) => {\n      const m = (mod as { default: MermaidApi }).default;\n      mermaidTheme = currentTheme();\n      m.initialize(buildConfig(mermaidTheme));\n      mermaidInstance = m;\n      return m;\n    });\n  }\n  return mermaidReady;\n}\n\nfunction sanitiseSvg(svg: string): string {\n  return DOMPurify.sanitize(svg, {\n    USE_PROFILES: { svg: true, svgFilters: true },\n    // Allow <style> so mermaid's embedded CSS applies, and <foreignObject>\n    // so node label text renders (mermaid escapes its content in strict mode).\n    ADD_TAGS: ['style', 'foreignObject'],\n    ADD_ATTR: [\n      'style',\n      'class',\n      'dominant-baseline',\n      'text-anchor',\n      'font-size',\n      'font-family',\n      'marker-end',\n      'marker-start',\n      'marker-mid',\n      'stroke-dasharray',\n      'stroke-width',\n    ],\n    FORBID_TAGS: ['script'],\n    FORBID_ATTR: ['onload', 'onerror', 'onclick', 'onmouseover'],\n  }) as string;\n}\n\nexport const MermaidBlock: React.FC<MermaidBlockProps> = ({ code, id }) => {\n  const [svg, setSvg] = useState<string>('');\n  const [error, setError] = useState<string>('');\n  const [loading, setLoading] = useState(true);\n\n  // Derive an accessible label from the diagram's declared type (first keyword).\n  const diagramLabel = useMemo(() => {\n    const firstWord =\n      code\n        .trim()\n        .split(/[\\s\\n]/)[0]\n        ?.toLowerCase() ?? '';\n    const typeMap: Record<string, string> = {\n      graph: 'Flowchart',\n      flowchart: 'Flowchart',\n      sequencediagram: 'Sequence diagram',\n      classdiagram: 'Class diagram',\n      statediagram: 'State diagram',\n      'statediagram-v2': 'State diagram',\n      erdiagram: 'Entity relationship diagram',\n      gantt: 'Gantt chart',\n      pie: 'Pie chart',\n      journey: 'User journey diagram',\n      gitgraph: 'Git graph',\n      mindmap: 'Mind map',\n      timeline: 'Timeline',\n      quadrantchart: 'Quadrant chart',\n    };\n    return `${typeMap[firstWord] ?? 'Mermaid'} diagram`;\n  }, [code]);\n\n  const render = useCallback(async () => {\n    setLoading(true);\n    setError('');\n    try {\n      const mermaid = await getMermaid();\n      await mermaid.parse(code);\n      const { svg: rendered } = await mermaid.render(`mermaid-${id}`, code);\n      setSvg(sanitiseSvg(rendered));\n    } catch (err) {\n      setError((err as Error).message ?? 'Failed to render diagram');\n    } finally {\n      setLoading(false);\n    }\n  }, [code, id]);\n\n  useEffect(() => {\n    void render();\n  }, [render]);\n\n  // Re-render when the page theme changes (dark ↔ light)\n  useEffect(() => {\n    const observer = new MutationObserver(() => void render());\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class', 'data-theme'],\n    });\n    return () => observer.disconnect();\n  }, [render]);\n\n  return (\n    <FenceBlock\n      code={code}\n      language=\"mermaid\"\n      supportsRawView\n      error={error || undefined}\n    >\n      {loading ? (\n        <div className=\"flex items-center justify-center p-8\">\n          <div className=\"border-primary-500 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent\" />\n        </div>\n      ) : (\n        <div\n          className=\"mermaid-svg flex justify-center p-4\"\n          role=\"img\"\n          aria-label={diagramLabel}\n          dangerouslySetInnerHTML={{ __html: svg }}\n        />\n      )}\n    </FenceBlock>\n  );\n};\n"]}
+{"version":3,"sources":["../src/components/Markdown/MermaidBlock.tsx"],"names":["DOMPurify","useState","useMemo","useCallback","useEffect","jsx","FenceBlock"],"mappings":"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","file":"chunk-P3JEMF6E.cjs","sourcesContent":["/**\n * MermaidBlock — Renders Mermaid diagrams.\n * Requires `mermaid` to be installed by the consumer (optional peer dependency).\n */\nimport DOMPurify from 'dompurify';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { FenceBlock } from './FenceBlock';\n\ninterface MermaidBlockProps {\n  code: string;\n  id: string;\n}\n\ntype MermaidApi = {\n  initialize: (config: Record<string, unknown>) => void;\n  parse: (text: string) => Promise<unknown>;\n  render: (id: string, text: string) => Promise<{ svg: string }>;\n};\n\nlet mermaidInstance: MermaidApi | null = null;\nlet mermaidReady: Promise<MermaidApi> | null = null;\nlet mermaidTheme: 'dark' | 'default' = 'default';\n\nfunction currentTheme(): 'dark' | 'default' {\n  return document.documentElement.classList.contains('dark') ||\n    document.documentElement.getAttribute('data-theme') === 'dark'\n    ? 'dark'\n    : 'default';\n}\n\nfunction buildConfig(theme: 'dark' | 'default'): Record<string, unknown> {\n  const base: Record<string, unknown> = {\n    startOnLoad: false,\n    theme,\n    securityLevel: 'strict',\n  };\n  if (theme === 'dark') {\n    base.themeVariables = {\n      nodeBorder: '#6b7280',\n      mainBkg: '#4a4a4a',\n      nodeTextColor: '#ffffff',\n      clusterBkg: '#374151',\n      titleColor: '#ffffff',\n      edgeLabelBackground: '#374151',\n      lineColor: '#9ca3af',\n    };\n  }\n  return base;\n}\n\nasync function getMermaid(): Promise<MermaidApi> {\n  const theme = currentTheme();\n  if (mermaidInstance) {\n    if (theme !== mermaidTheme) {\n      mermaidTheme = theme;\n      mermaidInstance.initialize(buildConfig(theme));\n    }\n    return mermaidInstance;\n  }\n  if (!mermaidReady) {\n    mermaidReady = import(/* @vite-ignore */ 'mermaid').then((mod) => {\n      const m = (mod as { default: MermaidApi }).default;\n      mermaidTheme = currentTheme();\n      m.initialize(buildConfig(mermaidTheme));\n      mermaidInstance = m;\n      return m;\n    });\n  }\n  return mermaidReady;\n}\n\nfunction sanitiseSvg(svg: string): string {\n  return DOMPurify.sanitize(svg, {\n    USE_PROFILES: { svg: true, svgFilters: true },\n    // Allow <style> so mermaid's embedded CSS applies, and <foreignObject>\n    // so node label text renders (mermaid escapes its content in strict mode).\n    ADD_TAGS: ['style', 'foreignObject'],\n    ADD_ATTR: [\n      'style',\n      'class',\n      'dominant-baseline',\n      'text-anchor',\n      'font-size',\n      'font-family',\n      'marker-end',\n      'marker-start',\n      'marker-mid',\n      'stroke-dasharray',\n      'stroke-width',\n    ],\n    FORBID_TAGS: ['script'],\n    FORBID_ATTR: ['onload', 'onerror', 'onclick', 'onmouseover'],\n  }) as string;\n}\n\nexport const MermaidBlock: React.FC<MermaidBlockProps> = ({ code, id }) => {\n  const [svg, setSvg] = useState<string>('');\n  const [error, setError] = useState<string>('');\n  const [loading, setLoading] = useState(true);\n\n  // Derive an accessible label from the diagram's declared type (first keyword).\n  const diagramLabel = useMemo(() => {\n    const firstWord =\n      code\n        .trim()\n        .split(/[\\s\\n]/)[0]\n        ?.toLowerCase() ?? '';\n    const typeMap: Record<string, string> = {\n      graph: 'Flowchart',\n      flowchart: 'Flowchart',\n      sequencediagram: 'Sequence diagram',\n      classdiagram: 'Class diagram',\n      statediagram: 'State diagram',\n      'statediagram-v2': 'State diagram',\n      erdiagram: 'Entity relationship diagram',\n      gantt: 'Gantt chart',\n      pie: 'Pie chart',\n      journey: 'User journey diagram',\n      gitgraph: 'Git graph',\n      mindmap: 'Mind map',\n      timeline: 'Timeline',\n      quadrantchart: 'Quadrant chart',\n    };\n    return `${typeMap[firstWord] ?? 'Mermaid'} diagram`;\n  }, [code]);\n\n  const render = useCallback(async () => {\n    setLoading(true);\n    setError('');\n    try {\n      const mermaid = await getMermaid();\n      await mermaid.parse(code);\n      const { svg: rendered } = await mermaid.render(`mermaid-${id}`, code);\n      setSvg(sanitiseSvg(rendered));\n    } catch (err) {\n      setError((err as Error).message ?? 'Failed to render diagram');\n    } finally {\n      setLoading(false);\n    }\n  }, [code, id]);\n\n  useEffect(() => {\n    void render();\n  }, [render]);\n\n  // Re-render when the page theme changes (dark ↔ light)\n  useEffect(() => {\n    const observer = new MutationObserver(() => void render());\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class', 'data-theme'],\n    });\n    return () => observer.disconnect();\n  }, [render]);\n\n  return (\n    <FenceBlock\n      code={code}\n      language=\"mermaid\"\n      supportsRawView\n      error={error || undefined}\n    >\n      {loading ? (\n        <div className=\"flex items-center justify-center p-8\">\n          <div className=\"border-primary-500 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent\" />\n        </div>\n      ) : (\n        <div\n          className=\"mermaid-svg flex justify-center p-4\"\n          role=\"img\"\n          aria-label={diagramLabel}\n          dangerouslySetInnerHTML={{ __html: svg }}\n        />\n      )}\n    </FenceBlock>\n  );\n};\n"]}

package/dist/{chunk-M26KJKZG.cjs → chunk-RDGRKYQ5.cjs}

@@ -29,6 +29,7 @@ var buttonVariants = classVarianceAuthority.cva(
   // Base styles
   [
     "inline-flex items-center justify-center gap-2",
+    "min-w-0 whitespace-nowrap",
     "font-semibold transition-all duration-200",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
     "disabled:pointer-events-none disabled:opacity-50",
@@ -108,9 +109,30 @@ var Button = React__namespace.forwardRef(
     loadingText,
     disabled,
     children,
+    title,
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
+    const labelRef = React__namespace.useRef(null);
+    const innerRef = React__namespace.useRef(null);
+    React__namespace.useImperativeHandle(ref, () => innerRef.current);
+    React__namespace.useLayoutEffect(() => {
+      const label = labelRef.current;
+      const button = innerRef.current;
+      if (!label || !button || title !== void 0) return;
+      const update = () => {
+        if (label.scrollWidth > label.clientWidth) {
+          button.title = label.textContent ?? "";
+        } else {
+          button.removeAttribute("title");
+        }
+      };
+      update();
+      if (typeof globalThis.ResizeObserver === "undefined") return;
+      const observer = new globalThis.ResizeObserver(update);
+      observer.observe(label);
+      return () => observer.disconnect();
+    }, [title, children, isLoading, loadingText]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -120,16 +142,17 @@ var Button = React__namespace.forwardRef(
           buttonVariants({ variant, size: resolvedSize, fullWidth }),
           className
         ),
-        ref,
+        ref: innerRef,
         disabled: disabled || isLoading,
         "aria-busy": isLoading,
+        title,
         ...props,
         children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}),
-          loadingText || children
+          /* @__PURE__ */ jsxRuntime.jsx("span", { ref: labelRef, "data-slot": "button-label", className: "truncate", children: loadingText || children })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           React__namespace.isValidElement(leftIcon) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: leftIcon }),
-          children,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { ref: labelRef, "data-slot": "button-label", className: "truncate", children }),
           React__namespace.isValidElement(rightIcon) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: rightIcon })
         ] })
       }
@@ -141,7 +164,7 @@ function LoadingSpinner() {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
-      className: "h-4 w-4 animate-spin",
+      className: "h-4 w-4 shrink-0 animate-spin",
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
       viewBox: "0 0 24 24",
@@ -173,5 +196,5 @@ function LoadingSpinner() {
 
 exports.Button = Button;
 exports.buttonVariants = buttonVariants;
-//# sourceMappingURL=chunk-M26KJKZG.cjs.map
-//# sourceMappingURL=chunk-M26KJKZG.cjs.map
+//# sourceMappingURL=chunk-RDGRKYQ5.cjs.map
+//# sourceMappingURL=chunk-RDGRKYQ5.cjs.map

package/dist/chunk-RDGRKYQ5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx"],"names":["cva","React","jsx","cn","jsxs","Fragment"],"mappings":"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","file":"chunk-RDGRKYQ5.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst buttonVariants = cva(\n  // Base styles\n  [\n    'inline-flex items-center justify-center gap-2',\n    'min-w-0 whitespace-nowrap',\n    'font-semibold transition-all duration-200',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'active:scale-[0.98]',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-primary-800 text-white',\n          'hover:bg-primary-900',\n          'active:bg-primary-950',\n        ],\n        secondary: [\n          'bg-neutral-200 text-neutral-900',\n          'hover:bg-neutral-300',\n          'active:bg-neutral-400',\n          'dark:bg-neutral-700 dark:text-neutral-100',\n          'dark:hover:bg-neutral-600',\n          'dark:active:bg-neutral-500',\n        ],\n        ghost: [\n          'bg-transparent text-neutral-600',\n          'hover:bg-neutral-100',\n          'active:bg-neutral-200',\n          'dark:text-neutral-400',\n          'dark:hover:bg-neutral-800',\n          'dark:active:bg-neutral-700',\n        ],\n        outline: [\n          'border-2 border-primary-800 text-primary-800 bg-transparent',\n          'hover:bg-primary-50 hover:text-primary-900',\n          'active:bg-primary-100',\n          'dark:border-primary-400 dark:text-primary-400',\n          'dark:hover:bg-primary-950',\n          'dark:active:bg-primary-900',\n        ],\n        danger: [\n          'bg-red-600 text-white',\n          'hover:bg-red-700',\n          'active:bg-red-800',\n        ],\n        link: [\n          'text-primary-800 underline-offset-4',\n          'hover:underline hover:text-primary-900',\n          'active:text-primary-950',\n          'dark:text-primary-400',\n        ],\n      },\n      size: {\n        sm: 'h-8 px-3 text-sm rounded-md',\n        md: 'h-10 px-4 text-base rounded-lg',\n        lg: 'h-12 px-6 text-lg rounded-xl',\n        icon: 'h-10 w-10 rounded-lg',\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n      fullWidth: false,\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** Optional icon element to render before the button text */\n  leftIcon?: React.ReactElement | null;\n  /** Optional icon element to render after the button text */\n  rightIcon?: React.ReactElement | null;\n  /** Shows a loading spinner and disables the button */\n  isLoading?: boolean;\n  /** Accessible label for the loading state */\n  loadingText?: string;\n}\n\n/**\n * A versatile button component with multiple variants and sizes.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" size=\"md\">Click me</Button>\n * <Button variant=\"danger\" leftIcon={<TrashIcon />}>Delete</Button>\n * <Button variant=\"ghost\" isLoading loadingText=\"Saving...\">Save</Button>\n * ```\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      fullWidth,\n      leftIcon,\n      rightIcon,\n      isLoading,\n      loadingText,\n      disabled,\n      children,\n      title,\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedSize = size ?? 'md';\n    const labelRef = React.useRef<HTMLSpanElement>(null);\n    const innerRef = React.useRef<HTMLButtonElement>(null);\n    React.useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement);\n\n    // When the label truncates, expose the full text as a native tooltip.\n    // A consumer-provided `title` always takes precedence.\n    React.useLayoutEffect(() => {\n      const label = labelRef.current;\n      const button = innerRef.current;\n      if (!label || !button || title !== undefined) return;\n\n      const update = () => {\n        if (label.scrollWidth > label.clientWidth) {\n          button.title = label.textContent ?? '';\n        } else {\n          button.removeAttribute('title');\n        }\n      };\n\n      update();\n      if (typeof globalThis.ResizeObserver === 'undefined') return;\n      const observer = new globalThis.ResizeObserver(update);\n      observer.observe(label);\n      return () => observer.disconnect();\n    }, [title, children, isLoading, loadingText]);\n\n    return (\n      <button\n        data-slot=\"button\"\n        data-size={resolvedSize}\n        className={cn(\n          buttonVariants({ variant, size: resolvedSize, fullWidth }),\n          className\n        )}\n        ref={innerRef}\n        disabled={disabled || isLoading}\n        aria-busy={isLoading}\n        title={title}\n        {...props}\n      >\n        {isLoading ? (\n          <>\n            <LoadingSpinner />\n            <span ref={labelRef} data-slot=\"button-label\" className=\"truncate\">\n              {loadingText || children}\n            </span>\n          </>\n        ) : (\n          <>\n            {React.isValidElement(leftIcon) && (\n              <span className=\"shrink-0\">{leftIcon}</span>\n            )}\n            <span ref={labelRef} data-slot=\"button-label\" className=\"truncate\">\n              {children}\n            </span>\n            {React.isValidElement(rightIcon) && (\n              <span className=\"shrink-0\">{rightIcon}</span>\n            )}\n          </>\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\n/**\n * Simple loading spinner for the button\n */\nfunction LoadingSpinner() {\n  return (\n    <svg\n      className=\"h-4 w-4 shrink-0 animate-spin\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      />\n    </svg>\n  );\n}\n\nexport { Button, buttonVariants };\n"]}

package/dist/chunk-SEN7FIF3.cjs

@@ -0,0 +1,158 @@
+'use strict';
+
+var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
+var q = require('@mieweb/q');
+var jsxRuntime = require('react/jsx-runtime');
+var universal = require('@mieweb/q/universal');
+
+function Q({ className, style, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "q",
+      className: chunkS5RVSXDV_cjs.cn("h-full min-h-0 w-full", className),
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx(q.AgentConfigGenerator, { ...props })
+    }
+  );
+}
+var qTwilioAgentSchema = q.defaultSchema;
+var qAgentSchema = {
+  schemaType: "mieforms-v1.0",
+  title: "Agent Configuration",
+  fields: [
+    {
+      id: "sec-basic",
+      fieldType: "section",
+      title: "Basic Info",
+      fields: [
+        {
+          id: "name",
+          fieldType: "text",
+          question: "Agent Name",
+          answer: "New Agent",
+          required: false
+        },
+        {
+          id: "instructions",
+          fieldType: "longtext",
+          question: "Instructions",
+          answer: "You are a helpful assistant.",
+          required: false
+        }
+      ]
+    },
+    {
+      id: "sec-generation",
+      fieldType: "section",
+      title: "Generation Settings",
+      fields: [
+        {
+          id: "temperature",
+          fieldType: "text",
+          question: "Temperature (0.0 - 1.0)",
+          answer: "0.7",
+          required: false,
+          configType: "number"
+        }
+      ]
+    }
+  ]
+};
+var qLandingPageAgentConfig = {
+  ...q.deriveDefaultConfig(qAgentSchema),
+  name: "Landing Page Assistant",
+  instructions: "You are a helpful assistant for a demo page that shows user profile information (name, address, zip code). When the user asks about their current information or details, call the appropriate tool.",
+  temperature: 0.7
+};
+function createQAgentConfig() {
+  return q.deriveDefaultConfig(qAgentSchema);
+}
+function createQTwilioAgentConfig() {
+  return q.deriveDefaultConfig(qTwilioAgentSchema);
+}
+
+Object.defineProperty(exports, "AgentConfigGenerator", {
+  enumerable: true,
+  get: function () { return q.AgentConfigGenerator; }
+});
+Object.defineProperty(exports, "ConfigEditor", {
+  enumerable: true,
+  get: function () { return q.ConfigEditor; }
+});
+Object.defineProperty(exports, "FormBuilder", {
+  enumerable: true,
+  get: function () { return q.FormBuilder; }
+});
+Object.defineProperty(exports, "GENERIC_TOOLS", {
+  enumerable: true,
+  get: function () { return q.GENERIC_TOOLS; }
+});
+Object.defineProperty(exports, "Header", {
+  enumerable: true,
+  get: function () { return q.Header; }
+});
+Object.defineProperty(exports, "TIMEZONES", {
+  enumerable: true,
+  get: function () { return q.TIMEZONES; }
+});
+Object.defineProperty(exports, "ToolBuilder", {
+  enumerable: true,
+  get: function () { return q.ToolBuilder; }
+});
+Object.defineProperty(exports, "configToQuestionnaire", {
+  enumerable: true,
+  get: function () { return q.configToQuestionnaire; }
+});
+Object.defineProperty(exports, "configToYaml", {
+  enumerable: true,
+  get: function () { return q.configToYaml; }
+});
+Object.defineProperty(exports, "copyToClipboard", {
+  enumerable: true,
+  get: function () { return q.copyToClipboard; }
+});
+Object.defineProperty(exports, "defaultSchema", {
+  enumerable: true,
+  get: function () { return q.defaultSchema; }
+});
+Object.defineProperty(exports, "deriveDefaultConfig", {
+  enumerable: true,
+  get: function () { return q.deriveDefaultConfig; }
+});
+Object.defineProperty(exports, "downloadConfig", {
+  enumerable: true,
+  get: function () { return q.downloadConfig; }
+});
+Object.defineProperty(exports, "questionnaireToConfig", {
+  enumerable: true,
+  get: function () { return q.questionnaireToConfig; }
+});
+Object.defineProperty(exports, "validateConfig", {
+  enumerable: true,
+  get: function () { return q.validateConfig; }
+});
+Object.defineProperty(exports, "yamlToConfig", {
+  enumerable: true,
+  get: function () { return q.yamlToConfig; }
+});
+Object.defineProperty(exports, "UniversalAgentConfigGenerator", {
+  enumerable: true,
+  get: function () { return universal.UniversalAgentConfigGenerator; }
+});
+Object.defineProperty(exports, "brands", {
+  enumerable: true,
+  get: function () { return universal.brands; }
+});
+Object.defineProperty(exports, "generateBrandCSS", {
+  enumerable: true,
+  get: function () { return universal.generateBrandCSS; }
+});
+exports.Q = Q;
+exports.createQAgentConfig = createQAgentConfig;
+exports.createQTwilioAgentConfig = createQTwilioAgentConfig;
+exports.qAgentSchema = qAgentSchema;
+exports.qLandingPageAgentConfig = qLandingPageAgentConfig;
+exports.qTwilioAgentSchema = qTwilioAgentSchema;
+//# sourceMappingURL=chunk-SEN7FIF3.cjs.map
+//# sourceMappingURL=chunk-SEN7FIF3.cjs.map

package/dist/chunk-SEN7FIF3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Q/Q.tsx","../src/components/Q/presets.ts"],"names":["jsx","cn","AgentConfigGenerator","defaultSchema","deriveDefaultConfig"],"mappings":";;;;;;;AAwBO,SAAS,EAAE,EAAE,SAAA,EAAW,KAAA,EAAO,GAAG,OAAM,EAAW;AACxD,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,GAAA;AAAA,MACV,SAAA,EAAWC,oBAAA,CAAG,uBAAA,EAAyB,SAAS,CAAA;AAAA,MAChD,KAAA;AAAA,MAEA,QAAA,kBAAAD,cAAA,CAACE,sBAAA,EAAA,EAAsB,GAAG,KAAA,EAAO;AAAA;AAAA,GACnC;AAEJ;AC3BO,IAAM,kBAAA,GAAqBC;AAE3B,IAAM,YAAA,GAAwB;AAAA,EACnC,UAAA,EAAY,eAAA;AAAA,EACZ,KAAA,EAAO,qBAAA;AAAA,EACP,MAAA,EAAQ;AAAA,IACN;AAAA,MACE,EAAA,EAAI,WAAA;AAAA,MACJ,SAAA,EAAW,SAAA;AAAA,MACX,KAAA,EAAO,YAAA;AAAA,MACP,MAAA,EAAQ;AAAA,QACN;AAAA,UACE,EAAA,EAAI,MAAA;AAAA,UACJ,SAAA,EAAW,MAAA;AAAA,UACX,QAAA,EAAU,YAAA;AAAA,UACV,MAAA,EAAQ,WAAA;AAAA,UACR,QAAA,EAAU;AAAA,SACZ;AAAA,QACA;AAAA,UACE,EAAA,EAAI,cAAA;AAAA,UACJ,SAAA,EAAW,UAAA;AAAA,UACX,QAAA,EAAU,cAAA;AAAA,UACV,MAAA,EAAQ,8BAAA;AAAA,UACR,QAAA,EAAU;AAAA;AACZ;AACF,KACF;AAAA,IACA;AAAA,MACE,EAAA,EAAI,gBAAA;AAAA,MACJ,SAAA,EAAW,SAAA;AAAA,MACX,KAAA,EAAO,qBAAA;AAAA,MACP,MAAA,EAAQ;AAAA,QACN;AAAA,UACE,EAAA,EAAI,aAAA;AAAA,UACJ,SAAA,EAAW,MAAA;AAAA,UACX,QAAA,EAAU,yBAAA;AAAA,UACV,MAAA,EAAQ,KAAA;AAAA,UACR,QAAA,EAAU,KAAA;AAAA,UACV,UAAA,EAAY;AAAA;AACd;AACF;AACF;AAEJ;AAEO,IAAM,uBAAA,GAAmC;AAAA,EAC9C,GAAGC,sBAAoB,YAAY,CAAA;AAAA,EACnC,IAAA,EAAM,wBAAA;AAAA,EACN,YAAA,EACE,sMAAA;AAAA,EACF,WAAA,EAAa;AACf;AAEO,SAAS,kBAAA,GAAqB;AACnC,EAAA,OAAOA,sBAAoB,YAAY,CAAA;AACzC;AAEO,SAAS,wBAAA,GAA2B;AACzC,EAAA,OAAOA,sBAAoB,kBAAkB,CAAA;AAC/C","file":"chunk-SEN7FIF3.cjs","sourcesContent":["import type * as React from 'react';\nimport {\n  AgentConfigGenerator,\n  type AgentConfigGeneratorProps,\n  type QConfig,\n  type QSchema,\n} from '@mieweb/q';\nimport { cn } from '../../utils/cn';\n\nexport type { QConfig, QSchema };\n\nexport interface QProps extends AgentConfigGeneratorProps {\n  /** Additional class name for the Q container. */\n  className?: string;\n  /** Inline styles for the Q container. */\n  style?: React.CSSProperties;\n}\n\n/**\n * Q is the agent config generator form surface.\n *\n * It wraps the published @mieweb/q form generator so it can be consumed through\n * @mieweb/ui/q while keeping Q's heavier dependencies out of the main UI entry.\n */\nexport function Q({ className, style, ...props }: QProps) {\n  return (\n    <div\n      data-slot=\"q\"\n      className={cn('h-full min-h-0 w-full', className)}\n      style={style}\n    >\n      <AgentConfigGenerator {...props} />\n    </div>\n  );\n}\n","import {\n  defaultSchema,\n  deriveDefaultConfig,\n  type QConfig,\n  type QSchema,\n} from '@mieweb/q';\n\nexport const qTwilioAgentSchema = defaultSchema;\n\nexport const qAgentSchema: QSchema = {\n  schemaType: 'mieforms-v1.0',\n  title: 'Agent Configuration',\n  fields: [\n    {\n      id: 'sec-basic',\n      fieldType: 'section',\n      title: 'Basic Info',\n      fields: [\n        {\n          id: 'name',\n          fieldType: 'text',\n          question: 'Agent Name',\n          answer: 'New Agent',\n          required: false,\n        },\n        {\n          id: 'instructions',\n          fieldType: 'longtext',\n          question: 'Instructions',\n          answer: 'You are a helpful assistant.',\n          required: false,\n        },\n      ],\n    },\n    {\n      id: 'sec-generation',\n      fieldType: 'section',\n      title: 'Generation Settings',\n      fields: [\n        {\n          id: 'temperature',\n          fieldType: 'text',\n          question: 'Temperature (0.0 - 1.0)',\n          answer: '0.7',\n          required: false,\n          configType: 'number',\n        },\n      ],\n    },\n  ],\n};\n\nexport const qLandingPageAgentConfig: QConfig = {\n  ...deriveDefaultConfig(qAgentSchema),\n  name: 'Landing Page Assistant',\n  instructions:\n    'You are a helpful assistant for a demo page that shows user profile information (name, address, zip code). When the user asks about their current information or details, call the appropriate tool.',\n  temperature: 0.7,\n};\n\nexport function createQAgentConfig() {\n  return deriveDefaultConfig(qAgentSchema);\n}\n\nexport function createQTwilioAgentConfig() {\n  return deriveDefaultConfig(qTwilioAgentSchema);\n}\n"]}

package/dist/{chunk-VVI32P7L.cjs → chunk-SPWVKDGC.cjs}

@@ -90,13 +90,15 @@ function formatE164(phoneNumber, countryCode) {
     return phoneNumber;
   }
 }
-function CountryCodeDropdown({
+function CountryDropdownBase({
   value,
   onChange,
   disabled = false,
   className,
   placement = "bottom-start",
   searchPlaceholder = "Search countries\u2026",
+  id,
+  showDialCode = true,
   "aria-label": ariaLabel = "Select country code"
 }) {
   const [isOpen, setIsOpen] = React__namespace.useState(false);
@@ -131,9 +133,9 @@ function CountryCodeDropdown({
     if (!search) return countries;
     const q = search.toLowerCase();
     return countries.filter(
-      (c) => c.name.toLowerCase().includes(q) || c.dialCode.includes(q) || c.code.toLowerCase().includes(q)
+      (c) => c.name.toLowerCase().includes(q) || showDialCode && c.dialCode.includes(q) || c.code.toLowerCase().includes(q)
     );
-  }, [search, countries]);
+  }, [search, countries, showDialCode]);
   const close = React__namespace.useCallback(() => {
     setIsOpen(false);
     setSearch("");
@@ -199,6 +201,7 @@ function CountryCodeDropdown({
           "button",
           {
             type: "button",
+            id,
             "data-slot": "country-dropdown-trigger",
             onClick: handleToggle,
             disabled,
@@ -225,7 +228,7 @@ function CountryCodeDropdown({
                   children: selected.flag
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "country-dropdown-dialcode", children: selected.dialCode }),
+              showDialCode ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "country-dropdown-dialcode", children: selected.dialCode }) : /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "country-dropdown-name", className: "min-w-0 truncate", children: selected.name }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "svg",
                 {
@@ -334,7 +337,7 @@ function CountryCodeDropdown({
                               children: country.name
                             }
                           ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
+                          showDialCode && /* @__PURE__ */ jsxRuntime.jsx(
                             "span",
                             {
                               "data-slot": "country-dropdown-option-dialcode",
@@ -357,10 +360,15 @@ function CountryCodeDropdown({
     }
   );
 }
+CountryDropdownBase.displayName = "CountryDropdownBase";
+function CountryCodeDropdown(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CountryDropdownBase, { ...props });
+}
 CountryCodeDropdown.displayName = "CountryCodeDropdown";
 
 exports.CountryCodeDropdown = CountryCodeDropdown;
+exports.CountryDropdownBase = CountryDropdownBase;
 exports.formatE164 = formatE164;
 exports.validatePhoneNumber = validatePhoneNumber;
-//# sourceMappingURL=chunk-VVI32P7L.cjs.map
-//# sourceMappingURL=chunk-VVI32P7L.cjs.map
+//# sourceMappingURL=chunk-SPWVKDGC.cjs.map
+//# sourceMappingURL=chunk-SPWVKDGC.cjs.map

package/dist/chunk-SPWVKDGC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CountryCodeDropdown/CountryCodeDropdown.tsx"],"names":["PhoneNumberUtil","libphonenumber","PhoneNumberFormat","React","useAnchoredPosition","useClickOutside","useEscapeKey","jsxs","cn","jsx","createPortal"],"mappings":"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","file":"chunk-SPWVKDGC.cjs","sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport * as libphonenumber from 'google-libphonenumber';\nimport { cn } from '../../utils/cn';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { useAnchoredPosition } from '../../hooks/useAnchoredPosition';\n\nconst PhoneNumberUtil =\n  (libphonenumber as unknown as { default?: typeof libphonenumber }).default\n    ?.PhoneNumberUtil ?? libphonenumber.PhoneNumberUtil;\nconst PhoneNumberFormat =\n  (libphonenumber as unknown as { default?: typeof libphonenumber }).default\n    ?.PhoneNumberFormat ?? libphonenumber.PhoneNumberFormat;\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface CountryData {\n  /** ISO 3166-1 alpha-2 country code (e.g. \"US\") */\n  code: string;\n  /** Country name (e.g. \"United States\") */\n  name: string;\n  /** Dial code (e.g. \"+1\") */\n  dialCode: string;\n  /** Emoji flag (e.g. \"🇺🇸\") */\n  flag: string;\n}\n\nexport interface CountryCodeDropdownProps {\n  /** The currently selected country code (ISO alpha-2, e.g. \"US\") */\n  value?: string;\n  /** Called when a country is selected */\n  onChange?: (country: CountryData) => void;\n  /** Whether the dropdown is disabled */\n  disabled?: boolean;\n  /** Additional class name for the trigger button */\n  className?: string;\n  /** Placement of the dropdown panel */\n  placement?: 'bottom-start' | 'bottom-end';\n  /** Placeholder text for the search field */\n  searchPlaceholder?: string;\n  /** id for the trigger button, enabling `<label htmlFor>` association */\n  id?: string;\n  /** Label for accessibility — visually hidden */\n  'aria-label'?: string;\n}\n\n// =============================================================================\n// Country Data (generated from libphonenumber)\n// =============================================================================\n\n/** Convert an ISO alpha-2 code to an emoji flag. */\nfunction isoToEmoji(code: string): string {\n  return [...code.toUpperCase()]\n    .map((c) => String.fromCodePoint(0x1f1e6 - 65 + c.charCodeAt(0)))\n    .join('');\n}\n\n/** Build the full sorted list of countries from libphonenumber. */\nfunction buildCountryList(): CountryData[] {\n  const phoneUtil = PhoneNumberUtil.getInstance();\n  const regions = phoneUtil.getSupportedRegions() as string[];\n  const list: CountryData[] = regions.map((code: string) => {\n    const callingCode = phoneUtil.getCountryCodeForRegion(code);\n    return {\n      code,\n      name: regionDisplayName(code),\n      dialCode: `+${callingCode}`,\n      flag: isoToEmoji(code),\n    };\n  });\n  list.sort((a, b) => a.name.localeCompare(b.name));\n  return list;\n}\n\n/** Lazy singleton so we only build the list once. */\nlet _countries: CountryData[] | null = null;\nfunction getCountries(): CountryData[] {\n  if (!_countries) _countries = buildCountryList();\n  return _countries;\n}\n\n// =============================================================================\n// Region display name mapping\n// =============================================================================\n\n/** Lazy singleton for Intl.DisplayNames so we only construct it once. */\nlet _regionDisplayNames: Intl.DisplayNames | null = null;\n\nfunction getRegionDisplayNames(): Intl.DisplayNames | null {\n  if (_regionDisplayNames === null) {\n    try {\n      const locales =\n        typeof navigator !== 'undefined' && navigator.languages?.length\n          ? [...navigator.languages]\n          : ['en'];\n      _regionDisplayNames = new Intl.DisplayNames(locales, { type: 'region' });\n    } catch {\n      return null;\n    }\n  }\n  return _regionDisplayNames;\n}\n\n/**\n * Use the browser Intl API for display names where available,\n * falling back to the raw ISO code.\n */\nfunction regionDisplayName(code: string): string {\n  const dn = getRegionDisplayNames();\n  if (!dn) return code;\n  return dn.of(code) ?? code;\n}\n\n// =============================================================================\n// Validation helper (exported for consumers)\n// =============================================================================\n\n/**\n * Validate a phone number string for a given country code using libphonenumber.\n *\n * @param phoneNumber - The phone number (digits, may include formatting)\n * @param countryCode - ISO alpha-2 code (e.g. \"US\")\n * @returns Whether the number is valid for the given region.\n */\nexport function validatePhoneNumber(\n  phoneNumber: string,\n  countryCode: string\n): boolean {\n  try {\n    const phoneUtil = PhoneNumberUtil.getInstance();\n    const parsed = phoneUtil.parse(phoneNumber, countryCode);\n    return phoneUtil.isValidNumberForRegion(parsed, countryCode);\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Format a phone number into E.164 international format.\n *\n * @param phoneNumber - The phone number (digits, may include formatting)\n * @param countryCode - ISO alpha-2 code (e.g. \"US\")\n * @returns The formatted number (e.g. \"+15551234567\") or the original string if parsing fails.\n */\nexport function formatE164(phoneNumber: string, countryCode: string): string {\n  try {\n    const phoneUtil = PhoneNumberUtil.getInstance();\n    const parsed = phoneUtil.parse(phoneNumber, countryCode);\n    return phoneUtil.format(parsed, PhoneNumberFormat.E164);\n  } catch {\n    return phoneNumber;\n  }\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/** Internal base props — `showDialCode` is not part of the public API. */\ninterface CountryDropdownBaseProps extends CountryCodeDropdownProps {\n  /** Show dial codes on the trigger and in the list (default: true) */\n  showDialCode?: boolean;\n}\n\n/**\n * Shared implementation behind {@link CountryCodeDropdown} (dial-code mode)\n * and `CountryDropdown` (country-only mode). Not exported from the package.\n */\nfunction CountryDropdownBase({\n  value,\n  onChange,\n  disabled = false,\n  className,\n  placement = 'bottom-start',\n  searchPlaceholder = 'Search countries…',\n  id,\n  showDialCode = true,\n  'aria-label': ariaLabel = 'Select country code',\n}: CountryDropdownBaseProps) {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [search, setSearch] = React.useState('');\n  const [internalValue, setInternalValue] = React.useState(value ?? 'US');\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const searchInputRef = React.useRef<HTMLInputElement>(null);\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const menuId = React.useId();\n\n  const isControlled = value !== undefined;\n  const activeValue = isControlled ? value : internalValue;\n\n  // Defer building the full country list until the dropdown is first opened\n  const [countriesLoaded, setCountriesLoaded] = React.useState(false);\n  const countries = React.useMemo(\n    () => (countriesLoaded ? getCountries() : []),\n    [countriesLoaded]\n  );\n\n  React.useEffect(() => {\n    if (isOpen && !countriesLoaded) setCountriesLoaded(true);\n  }, [isOpen, countriesLoaded]);\n\n  const selected = React.useMemo(() => {\n    if (countries.length) {\n      return (\n        countries.find((c) => c.code === activeValue) ??\n        countries.find((c) => c.code === 'US')!\n      );\n    }\n    // Lightweight fallback while list hasn't loaded yet\n    return {\n      code: activeValue ?? 'US',\n      name: regionDisplayName(activeValue ?? 'US'),\n      dialCode: `+${PhoneNumberUtil.getInstance().getCountryCodeForRegion(activeValue ?? 'US')}`,\n      flag: isoToEmoji(activeValue ?? 'US'),\n    };\n  }, [activeValue, countries]);\n\n  const filtered = React.useMemo(() => {\n    if (!search) return countries;\n    const q = search.toLowerCase();\n    return countries.filter(\n      (c) =>\n        c.name.toLowerCase().includes(q) ||\n        (showDialCode && c.dialCode.includes(q)) ||\n        c.code.toLowerCase().includes(q)\n    );\n  }, [search, countries, showDialCode]);\n\n  // Close helpers\n  const close = React.useCallback(() => {\n    setIsOpen(false);\n    setSearch('');\n  }, []);\n\n  // Portal + fixed positioning so the panel escapes overflow-hidden ancestors.\n  const { anchorRef, floatingRef, style } = useAnchoredPosition<\n    HTMLDivElement,\n    HTMLDivElement\n  >({ open: isOpen, placement });\n\n  const outsideRefs = React.useMemo(\n    () => [containerRef, floatingRef],\n    [containerRef, floatingRef]\n  );\n  useClickOutside(outsideRefs, close, isOpen);\n  useEscapeKey(close, isOpen);\n\n  // Focus search input when opening\n  React.useEffect(() => {\n    if (isOpen) {\n      // Defer to let the DOM render\n      requestAnimationFrame(() => searchInputRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleToggle = React.useCallback(() => {\n    if (!disabled) setIsOpen((prev) => !prev);\n  }, [disabled]);\n\n  const handleSelect = React.useCallback(\n    (country: CountryData) => {\n      if (!isControlled) {\n        setInternalValue(country.code);\n      }\n      onChange?.(country);\n      close();\n    },\n    [isControlled, onChange, close]\n  );\n\n  // Keyboard navigation inside the list\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!isOpen) return;\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        e.preventDefault();\n        const items =\n          listRef.current?.querySelectorAll<HTMLButtonElement>(\n            '[role=\"option\"]'\n          );\n        if (!items?.length) return;\n\n        const current = document.activeElement as HTMLElement;\n        const idx = Array.from(items).indexOf(current as HTMLButtonElement);\n        let next: number;\n        if (e.key === 'ArrowDown') {\n          next = idx < items.length - 1 ? idx + 1 : 0;\n        } else {\n          next = idx > 0 ? idx - 1 : items.length - 1;\n        }\n        items[next].focus();\n      }\n    },\n    [isOpen]\n  );\n\n  return (\n    <div\n      ref={(node) => {\n        containerRef.current = node;\n        anchorRef.current = node;\n      }}\n      data-slot=\"country-dropdown\"\n      className=\"relative inline-flex\"\n    >\n      {/* Trigger button */}\n      <button\n        type=\"button\"\n        id={id}\n        data-slot=\"country-dropdown-trigger\"\n        onClick={handleToggle}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? menuId : undefined}\n        className={cn(\n          'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm',\n          'border-input bg-background text-foreground',\n          'transition-colors duration-200',\n          'hover:bg-neutral-50 dark:hover:bg-neutral-700',\n          'focus:ring-ring focus:ring-2 focus:outline-none',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          className\n        )}\n      >\n        <span\n          data-slot=\"country-dropdown-flag\"\n          className=\"text-base leading-none\"\n          aria-hidden=\"true\"\n        >\n          {selected.flag}\n        </span>\n        {showDialCode ? (\n          <span data-slot=\"country-dropdown-dialcode\">{selected.dialCode}</span>\n        ) : (\n          <span data-slot=\"country-dropdown-name\" className=\"min-w-0 truncate\">\n            {selected.name}\n          </span>\n        )}\n        <svg\n          data-slot=\"country-dropdown-chevron\"\n          className={cn(\n            'h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200',\n            isOpen && 'rotate-180'\n          )}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n            clipRule=\"evenodd\"\n          />\n        </svg>\n      </button>\n\n      {/* Dropdown panel */}\n      {isOpen &&\n        createPortal(\n          <div\n            ref={floatingRef}\n            style={style}\n            id={menuId}\n            role=\"listbox\"\n            data-slot=\"country-dropdown-panel\"\n            aria-label={ariaLabel}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            className={cn(\n              'flex w-72 flex-col overflow-hidden',\n              'rounded-xl border border-neutral-200 bg-white shadow-lg',\n              'dark:border-neutral-700 dark:bg-neutral-800',\n              'animate-in fade-in zoom-in-95 duration-100'\n            )}\n          >\n            {/* Search input */}\n            <div\n              data-slot=\"country-dropdown-search\"\n              className=\"shrink-0 border-b border-neutral-200 p-2 dark:border-neutral-700\"\n            >\n              <input\n                ref={searchInputRef}\n                type=\"text\"\n                data-slot=\"country-dropdown-search-input\"\n                value={search}\n                onChange={(e) => setSearch(e.target.value)}\n                placeholder={searchPlaceholder}\n                aria-label=\"Search countries\"\n                className={cn(\n                  'w-full rounded-lg border border-neutral-200 px-3 py-1.5 text-sm',\n                  'text-foreground placeholder:text-muted-foreground bg-white',\n                  'focus:ring-ring focus:border-transparent focus:ring-2 focus:outline-none',\n                  'dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100'\n                )}\n              />\n            </div>\n\n            {/* Country list */}\n            <div\n              ref={listRef}\n              data-slot=\"country-dropdown-list\"\n              className=\"max-h-60 min-h-0 overflow-y-auto p-1\"\n            >\n              {filtered.length === 0 ? (\n                <div className=\"text-muted-foreground px-3 py-4 text-center text-sm\">\n                  No countries found\n                </div>\n              ) : (\n                filtered.map((country) => (\n                  <button\n                    key={country.code}\n                    type=\"button\"\n                    role=\"option\"\n                    data-slot=\"country-dropdown-option\"\n                    aria-selected={country.code === selected.code}\n                    onClick={() => handleSelect(country)}\n                    className={cn(\n                      'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm',\n                      'transition-colors duration-150',\n                      'focus:outline-none',\n                      country.code === selected.code\n                        ? 'bg-neutral-100 font-medium text-neutral-900 dark:bg-neutral-700 dark:text-white'\n                        : 'text-neutral-700 hover:bg-neutral-50 dark:text-neutral-300 dark:hover:bg-neutral-700/50',\n                      'focus:bg-neutral-100 dark:focus:bg-neutral-700'\n                    )}\n                  >\n                    <span\n                      data-slot=\"country-dropdown-option-flag\"\n                      className=\"text-base leading-none\"\n                      aria-hidden=\"true\"\n                    >\n                      {country.flag}\n                    </span>\n                    <span\n                      data-slot=\"country-dropdown-option-name\"\n                      className=\"flex-1 truncate\"\n                    >\n                      {country.name}\n                    </span>\n                    {showDialCode && (\n                      <span\n                        data-slot=\"country-dropdown-option-dialcode\"\n                        className=\"text-muted-foreground shrink-0 text-xs\"\n                      >\n                        {country.dialCode}\n                      </span>\n                    )}\n                  </button>\n                ))\n              )}\n            </div>\n          </div>,\n          document.body\n        )}\n    </div>\n  );\n}\n\nCountryDropdownBase.displayName = 'CountryDropdownBase';\n\n/**\n * A country-code selector dropdown designed to sit beside a phone number input.\n *\n * Defaults to United States (+1) with the 🇺🇸 flag. Clicking the trigger opens\n * a searchable list of all supported countries with their dial codes and flags.\n *\n * Uses Google's libphonenumber for the canonical country/code list and provides\n * a `validatePhoneNumber` helper for phone validation.\n *\n * For a country selector without dial codes, use `CountryDropdown`.\n *\n * @example\n * ```tsx\n * const [country, setCountry] = useState<CountryData>();\n *\n * <div className=\"flex gap-2\">\n *   <CountryCodeDropdown value={country?.code} onChange={setCountry} />\n *   <Input placeholder=\"Phone number\" />\n * </div>\n * ```\n */\nfunction CountryCodeDropdown(props: CountryCodeDropdownProps) {\n  return <CountryDropdownBase {...props} />;\n}\n\nCountryCodeDropdown.displayName = 'CountryCodeDropdown';\n\nexport { CountryCodeDropdown, CountryDropdownBase };\n"]}