@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/documentation/ParamTabSection-DzcRCqZr.js

@@ -0,0 +1,581 @@
+import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { H as b, C as i, a as n, T as a, at as l, ar as s, y as g, P as u, A as y, c as x } from "../index-DoxeCFUJ.js";
+import { Hash as f, Home as d, BarChart as m, FileText as h, Settings as c, User as v, Bell as N } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const U = () => {
+  const o = [
+    { title: "Overview", path: "overview" },
+    { title: "Details", path: "details" },
+    { title: "Settings", path: "settings" }
+  ];
+  return /* @__PURE__ */ t(p, { children: [
+    /* @__PURE__ */ e(
+      b,
+      {
+        title: "ParamTab",
+        description: `A powerful tab component that automatically syncs with URL query
+          parameters and switches to a dropdown selector on mobile devices for
+          optimal responsive behavior.`,
+        icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-purple-600 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(f, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Underline Variant (Default)" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
+            children: "Classic underline style with animated indicator. URL syncs with ?view=overview, ?view=details, etc."
+          }
+        ),
+        /* @__PURE__ */ t(l, { tabMenu: o, variant: "underline", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "text-base font-semibold mb-2",
+                children: "Overview Dashboard"
+              }
+            ),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: "Main dashboard content with key metrics and overview information. The URL parameter updates to ?view=overview when this tab is active."
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "text-base font-semibold mb-2",
+                children: "Detailed Information"
+              }
+            ),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: "Comprehensive details and in-depth analysis. URL parameter: ?view=details"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "text-base font-semibold mb-2",
+                children: "Configuration Settings"
+              }
+            ),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: "Manage your preferences and application settings. URL parameter: ?view=settings"
+              }
+            )
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Pills Variant with Icons" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
+            children: "Modern rounded pills with icon support for enhanced visual clarity."
+          }
+        ),
+        /* @__PURE__ */ t(l, { tabMenu: [
+          {
+            title: "Dashboard",
+            path: "dashboard",
+            icon: /* @__PURE__ */ e(d, { size: 16 })
+          },
+          {
+            title: "Analytics",
+            path: "analytics",
+            icon: /* @__PURE__ */ e(m, { size: 16 })
+          },
+          {
+            title: "Reports",
+            path: "reports",
+            icon: /* @__PURE__ */ e(h, { size: 16 })
+          },
+          {
+            title: "Settings",
+            path: "settings",
+            icon: /* @__PURE__ */ e(c, { size: 16 })
+          }
+        ], variant: "pills", size: "medium", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
+              /* @__PURE__ */ e(d, { className: "text-brand", size: 24 }),
+              /* @__PURE__ */ e(
+                a,
+                {
+                  tag: "h3",
+                  className: "text-base font-semibold",
+                  children: "Dashboard Home"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: "Welcome to your dashboard! Here you'll find a summary of your most important information."
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
+              /* @__PURE__ */ e(m, { className: "text-brand", size: 24 }),
+              /* @__PURE__ */ e(
+                a,
+                {
+                  tag: "h3",
+                  className: "text-base font-semibold",
+                  children: "Analytics Overview"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: "Track your performance with detailed analytics and insights."
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
+              /* @__PURE__ */ e(h, { className: "text-brand", size: 24 }),
+              /* @__PURE__ */ e(
+                a,
+                {
+                  tag: "h3",
+                  className: "text-base font-semibold",
+                  children: "Reports Center"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: "Generate and view comprehensive reports for your data."
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
+              /* @__PURE__ */ e(c, { className: "text-brand", size: 24 }),
+              /* @__PURE__ */ e(
+                a,
+                {
+                  tag: "h3",
+                  className: "text-base font-semibold",
+                  children: "Application Settings"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: "Customize your application preferences and configuration."
+              }
+            )
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Bordered Variant" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
+            children: "Distinct bordered style with highlighted selection state."
+          }
+        ),
+        /* @__PURE__ */ t(l, { tabMenu: [
+          {
+            title: "Profile",
+            path: "profile",
+            icon: /* @__PURE__ */ e(v, { size: 16 })
+          },
+          {
+            title: "Notifications",
+            path: "notifications",
+            icon: /* @__PURE__ */ e(N, { size: 16 })
+          },
+          {
+            title: "Settings",
+            path: "settings",
+            icon: /* @__PURE__ */ e(c, { size: 16 })
+          }
+        ], variant: "bordered", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "text-base font-semibold mb-2",
+                children: "User Profile"
+              }
+            ),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: "Manage your personal information and profile settings."
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "text-base font-semibold mb-2",
+                children: "Notifications"
+              }
+            ),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: "Configure how and when you receive notifications."
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "text-base font-semibold mb-2",
+                children: "Account Settings"
+              }
+            ),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: "Manage your account security and privacy settings."
+              }
+            )
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Solid Variant (Small Size)" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
+            children: "Compact solid background style perfect for space-constrained layouts."
+          }
+        ),
+        /* @__PURE__ */ t(l, { tabMenu: o, variant: "solid", size: "small", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
+            a,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400",
+              children: "Compact overview content with small tab size."
+            }
+          ) }) }),
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
+            a,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400",
+              children: "Detailed information in a compact format."
+            }
+          ) }) }),
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
+            a,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400",
+              children: "Settings panel with space-efficient design."
+            }
+          ) }) })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Key Features", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
+          /* @__PURE__ */ e("span", { role: "img", "aria-label": "link", children: "🔗" }),
+          " ",
+          "URL Synchronization"
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
+            children: "Automatically syncs tab state with URL query parameters (e.g., ?view=overview). This enables:"
+          }
+        ),
+        /* @__PURE__ */ t("ul", { className: "list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1 ml-4", children: [
+          /* @__PURE__ */ e("li", { children: "Deep linking to specific tabs" }),
+          /* @__PURE__ */ e("li", { children: "Browser back/forward navigation" }),
+          /* @__PURE__ */ e("li", { children: "Shareable URLs with selected tab state" }),
+          /* @__PURE__ */ e("li", { children: "Bookmark support for specific views" })
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
+          /* @__PURE__ */ e("span", { role: "img", "aria-label": "mobile", children: "📱" }),
+          " ",
+          "Responsive Mobile Adaptation"
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
+            children: "Automatically switches to TabSelect dropdown on mobile devices (xs, sm breakpoints) for optimal space usage and better UX."
+          }
+        ),
+        /* @__PURE__ */ e(i, { className: "p-4 bg-blue-50 dark:bg-blue-900/20", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+          /* @__PURE__ */ e("span", { role: "img", "aria-label": "tip", children: "💡" }),
+          " ",
+          /* @__PURE__ */ e("span", { className: "font-semibold", children: "Tip:" }),
+          " Resize your browser window to see the automatic switch between tab bar and dropdown selector!"
+        ] }) })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
+          /* @__PURE__ */ e("span", { role: "img", "aria-label": "styles", children: "🎨" }),
+          " ",
+          "Multiple Style Variants"
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Choose from 4 distinct visual styles (underline, pills, bordered, solid) and 3 sizes (small, medium, large) to match your design system."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
+          /* @__PURE__ */ e("span", { role: "img", "aria-label": "icons", children: "✨" }),
+          " ",
+          "Icon Support"
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Add icons to tabs for better visual communication and improved scannability. Works seamlessly with Lucide Icons."
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "TabMenuItem Interface", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      g,
+      {
+        columns: [
+          {
+            key: "prop",
+            label: "Prop",
+            render: (r) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: r })
+          },
+          {
+            key: "type",
+            label: "Type",
+            render: (r) => /* @__PURE__ */ e("code", { className: "text-xs", children: r })
+          },
+          {
+            key: "default",
+            label: "Default",
+            render: (r) => r === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: r })
+          },
+          {
+            key: "description",
+            label: "Description",
+            className: "text-gray-600 dark:text-gray-400"
+          }
+        ],
+        data: [
+          {
+            prop: "title",
+            type: "React.ReactNode",
+            default: "required",
+            description: "Tab label (can be text, JSX, or components)"
+          },
+          {
+            prop: "path",
+            type: "string",
+            default: "required",
+            description: 'Unique path for URL parameter (e.g., "overview")'
+          },
+          {
+            prop: "icon",
+            type: "React.ReactNode",
+            default: "-",
+            description: "Optional icon to display before tab label"
+          }
+        ],
+        maxRows: 10,
+        resizable: !1
+      }
+    ) }) }) }),
+    /* @__PURE__ */ e(
+      u,
+      {
+        componentName: "ParamTab",
+        title: "ParamTab Playground",
+        defaultValues: {
+          variant: "solid",
+          size: "medium",
+          showMobileSelect: !1
+        },
+        excludeProps: ["tabMenu", "tabListClassName"],
+        children: (r) => /* @__PURE__ */ e(
+          l,
+          {
+            ...r,
+            tabMenu: [
+              { title: "Tab 1", path: "#tab1" },
+              { title: "Tab 2", path: "#tab2" },
+              { title: "Tab 3", path: "#tab3" }
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(y, { componentName: "ParamTab" }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      x,
+      {
+        language: "tsx",
+        code: `import { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
+import { Home, Settings, User } from 'lucide-react';
+
+// Basic usage with URL sync
+function BasicExample() {
+const tabMenu = [
+  { title: 'Overview', path: 'overview' },
+  { title: 'Details', path: 'details' },
+  { title: 'Settings', path: 'settings' },
+];
+
+  return (
+<ParamTab tabMenu={tabMenu}>
+  <TabPanel>
+    <div>Overview content</div>
+  </TabPanel>
+  <TabPanel>
+    <div>Details content</div>
+  </TabPanel>
+  <TabPanel>
+    <div>Settings content</div>
+  </TabPanel>
+</ParamTab>
+  );
+}
+
+// Pills variant with icons
+function PillsWithIcons() {
+  const tabMenu = [
+    {
+      title: 'Dashboard',
+      path: 'dashboard',
+      icon: <Home size={16} />,
+    },
+    {
+      title: 'Profile',
+      path: 'profile',
+      icon: <User size={16} />,
+    },
+    {
+      title: 'Settings',
+      path: 'settings',
+      icon: <Settings size={16} />,
+    },
+  ];
+
+  return (
+    <ParamTab tabMenu={tabMenu} variant="pills" size="medium">
+      <TabPanel>Dashboard content</TabPanel>
+      <TabPanel>Profile content</TabPanel>
+      <TabPanel>Settings content</TabPanel>
+    </ParamTab>
+  );
+}
+
+// Bordered variant
+function BorderedExample() {
+  const tabMenu = [
+    { title: 'Tab 1', path: 'tab1' },
+    { title: 'Tab 2', path: 'tab2' },
+  ];
+
+  return (
+    <ParamTab tabMenu={tabMenu} variant="bordered">
+      <TabPanel>Content 1</TabPanel>
+      <TabPanel>Content 2</TabPanel>
+    </ParamTab>
+  );
+}
+
+// Solid variant with small size
+function CompactExample() {
+  const tabMenu = [
+    { title: 'View 1', path: 'view1' },
+    { title: 'View 2', path: 'view2' },
+  ];
+
+  return (
+    <ParamTab tabMenu={tabMenu} variant="solid" size="small">
+      <TabPanel>Compact content 1</TabPanel>
+      <TabPanel>Compact content 2</TabPanel>
+    </ParamTab>
+  );
+}
+
+// How it works:
+// 1. Component reads current URL parameter (?view=overview)
+// 2. Matches it with tabMenu path to set active tab
+// 3. When user clicks tab, URL updates automatically
+// 4. On mobile (xs, sm), shows TabSelect dropdown
+// 5. On desktop, shows regular tab bar
+// 6. Browser back/forward buttons work seamlessly`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  U as default
+};

package/documentation/PieChartSection-DHKMnFF6.js

@@ -0,0 +1,91 @@
+import { jsxs as n, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { T as r, C as a, a as t, n as l, c as d, P as m, A as h } from "../index-DoxeCFUJ.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const s = [
+  { name: "Chrome", value: 62 },
+  { name: "Safari", value: 19 },
+  { name: "Firefox", value: 10 },
+  { name: "Edge", value: 6 },
+  { name: "Other", value: 3 }
+], v = () => /* @__PURE__ */ n(o, { children: [
+  /* @__PURE__ */ n("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(r, { tag: "h2", className: "text-base md:text-base font-semibold", children: "PieChart" }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "p",
+        className: "text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Pie and donut chart component for displaying proportions and distributions with labels and inner content support."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Basic Pie Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(l, { data: s, height: 300 }) }) }) }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Donut Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(l, { data: s, donut: !0, height: 300 }) }) }) }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Donut with Inner Content", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    l,
+    {
+      data: s,
+      donut: !0,
+      height: 300,
+      innerContent: /* @__PURE__ */ n("div", { className: "text-center", children: [
+        /* @__PURE__ */ e("p", { className: "text-2xl font-bold", children: "100%" }),
+        /* @__PURE__ */ e("p", { className: "text-sm text-gray-500", children: "Total" })
+      ] })
+    }
+  ) }) }) }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Without Labels", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(l, { data: s, showLabels: !1, height: 300 }) }) }) }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    d,
+    {
+      code: `import { PieChart } from '@e-burgos/tucu-ui';
+
+const data = [
+  { name: 'Chrome', value: 62 },
+  { name: 'Safari', value: 19 },
+  { name: 'Firefox', value: 10 },
+  { name: 'Edge', value: 6 },
+  { name: 'Other', value: 3 },
+];
+
+<PieChart
+  data={data}
+  height={300}
+  donut
+  showLabels
+  showTooltip
+  showLegend
+  innerContent={<p>Center</p>}
+/>`,
+      language: "tsx"
+    }
+  ) }) }) }),
+  /* @__PURE__ */ e(
+    m,
+    {
+      componentName: "PieChart",
+      defaultValues: {
+        height: 300,
+        donut: !1,
+        showLabels: !0,
+        showTooltip: !0,
+        showLegend: !0,
+        animate: !0
+      },
+      excludeProps: [
+        "data",
+        "colors",
+        "className",
+        "innerContent",
+        "emptyMessage"
+      ],
+      children: (i) => /* @__PURE__ */ e(l, { data: s, ...i })
+    }
+  ),
+  /* @__PURE__ */ e(h, { componentName: "PieChart" })
+] });
+export {
+  v as default
+};