@ayasofyazilim/ui 0.0.0 → 0.0.2

package/dist/custom/charts/bar-chart.js

@@ -0,0 +1,232 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent
+} from "@repo/ayasofyazilim-ui/components/chart";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import {
+  Bar,
+  CartesianGrid,
+  BarChart as RechartsBarChart,
+  XAxis,
+  YAxis
+} from "recharts";
+import { ChartCard } from "./chart-card";
+function BarChart({ layout = "vertical", ...props }) {
+  if (layout === "horizontal") {
+    return /* @__PURE__ */ jsx(HorizontalBarChart, { ...props });
+  }
+  return /* @__PURE__ */ jsx(VerticalBarChart, { ...props });
+}
+function HorizontalBarChart({
+  data,
+  config,
+  xAxisKey,
+  title,
+  description,
+  period,
+  footer,
+  trendText,
+  trendIcon,
+  xAxisTickFormatter = (value) => value,
+  yAxisTickFormatter = (value) => value,
+  classNames,
+  showLegend,
+  valuePrefix,
+  valueSuffix,
+  emptyState
+}) {
+  return /* @__PURE__ */ jsx(
+    ChartCard,
+    {
+      title,
+      description,
+      period,
+      footer,
+      trendText,
+      trendIcon,
+      classNames: classNames?.card,
+      emptyState: data.length === 0 ? emptyState : void 0,
+      children: /* @__PURE__ */ jsx(
+        ChartContainer,
+        {
+          config,
+          className: cn("mx-auto max-h-full", classNames?.chart?.container),
+          children: /* @__PURE__ */ jsxs(
+            RechartsBarChart,
+            {
+              accessibilityLayer: true,
+              data,
+              layout: "vertical",
+              className: cn("flex flex-col pb-2", classNames?.chart?.bar),
+              margin: { top: 0, bottom: 0, left: 0, right: 0 },
+              children: [
+                /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
+                Object.keys(config).map((key) => /* @__PURE__ */ jsx(XAxis, { type: "number", dataKey: key }, key)),
+                /* @__PURE__ */ jsx(
+                  YAxis,
+                  {
+                    dataKey: xAxisKey,
+                    type: "category",
+                    tickLine: false,
+                    tickMargin: 10,
+                    axisLine: false,
+                    tickFormatter: yAxisTickFormatter
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ChartTooltip,
+                  {
+                    cursor: false,
+                    content: /* @__PURE__ */ jsx(
+                      ChartTooltipContent,
+                      {
+                        hideLabel: true,
+                        valuePrefix,
+                        valueSuffix
+                      }
+                    )
+                  }
+                ),
+                Object.keys(config).map((key) => /* @__PURE__ */ jsx(
+                  Bar,
+                  {
+                    dataKey: key,
+                    fill: config[key]?.color || "var(--chart-1)",
+                    radius: 5
+                  },
+                  key
+                )),
+                showLegend && /* @__PURE__ */ jsx(
+                  ChartLegend,
+                  {
+                    wrapperStyle: {
+                      position: "relative",
+                      top: "unset",
+                      left: "unset",
+                      bottom: "unset",
+                      right: "unset",
+                      width: "100%",
+                      textAlign: "center"
+                    },
+                    className: cn("p-0", classNames?.chart?.legend),
+                    content: /* @__PURE__ */ jsx(ChartLegendContent, {})
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function VerticalBarChart({
+  data,
+  config,
+  xAxisKey,
+  title,
+  description,
+  period,
+  footer,
+  trendText,
+  trendIcon,
+  xAxisTickFormatter = (value) => value,
+  classNames,
+  showLegend,
+  valuePrefix,
+  valueSuffix,
+  emptyState
+}) {
+  return /* @__PURE__ */ jsx(
+    ChartCard,
+    {
+      title,
+      description,
+      period,
+      footer,
+      trendText,
+      trendIcon,
+      classNames: classNames?.card,
+      emptyState: data.length === 0 ? emptyState : void 0,
+      children: /* @__PURE__ */ jsx(
+        ChartContainer,
+        {
+          config,
+          className: cn("mx-auto max-h-full", classNames?.chart?.container),
+          children: /* @__PURE__ */ jsxs(
+            RechartsBarChart,
+            {
+              accessibilityLayer: true,
+              data,
+              layout: "horizontal",
+              className: cn("flex flex-col pb-2", classNames?.chart?.bar),
+              margin: { top: 0, bottom: 0, left: 0, right: 0 },
+              children: [
+                /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
+                /* @__PURE__ */ jsx(
+                  XAxis,
+                  {
+                    dataKey: xAxisKey,
+                    tickLine: false,
+                    axisLine: false,
+                    tickMargin: 8,
+                    minTickGap: 32,
+                    tickFormatter: xAxisTickFormatter
+                  }
+                ),
+                /* @__PURE__ */ jsx(YAxis, {}),
+                /* @__PURE__ */ jsx(
+                  ChartTooltip,
+                  {
+                    cursor: false,
+                    content: /* @__PURE__ */ jsx(
+                      ChartTooltipContent,
+                      {
+                        valuePrefix,
+                        valueSuffix
+                      }
+                    )
+                  }
+                ),
+                Object.keys(config).map((key) => /* @__PURE__ */ jsx(
+                  Bar,
+                  {
+                    dataKey: key,
+                    fill: config[key]?.color || "var(--chart-1)",
+                    radius: 0
+                  },
+                  key
+                )),
+                showLegend && /* @__PURE__ */ jsx(
+                  ChartLegend,
+                  {
+                    wrapperStyle: {
+                      position: "relative",
+                      top: "unset",
+                      left: "unset",
+                      bottom: "unset",
+                      right: "unset",
+                      width: "100%",
+                      textAlign: "center"
+                    },
+                    className: cn("p-0", classNames?.chart?.legend),
+                    content: /* @__PURE__ */ jsx(ChartLegendContent, {})
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  BarChart
+};
+//# sourceMappingURL=bar-chart.js.map

package/dist/custom/charts/bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/custom/charts/bar-chart.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartLegend,\r\n  ChartLegendContent,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from \"@repo/ayasofyazilim-ui/components/chart\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport * as React from \"react\";\r\nimport {\r\n  Bar,\r\n  CartesianGrid,\r\n  BarChart as RechartsBarChart,\r\n  XAxis,\r\n  YAxis,\r\n} from \"recharts\";\r\nimport { BaseAxisProps } from \"recharts/types/util/types\";\r\nimport { ChartData, EmptyConfig } from \".\";\r\nimport { CardClassNames, ChartCard } from \"./chart-card\";\r\n\r\nexport type BarChartProps = {\r\n  data: ChartData;\r\n  config: ChartConfig;\r\n  xAxisKey: string;\r\n  layout?: \"vertical\" | \"horizontal\";\r\n  title?: React.ReactNode;\r\n  description?: React.ReactNode;\r\n  period?: React.ReactNode;\r\n  footer?: React.ReactNode;\r\n  trendText?: React.ReactNode;\r\n  showLegend?: boolean;\r\n  trendIcon?: React.ReactNode;\r\n  xAxisTickFormatter?: BaseAxisProps[\"tickFormatter\"];\r\n  yAxisTickFormatter?: BaseAxisProps[\"tickFormatter\"];\r\n  valuePrefix?: string;\r\n  valueSuffix?: string;\r\n  classNames?: {\r\n    chart?: {\r\n      container?: string;\r\n      bar?: string;\r\n      legend?: string;\r\n    };\r\n    card?: CardClassNames;\r\n  };\r\n} & EmptyConfig;\r\n\r\nexport function BarChart({ layout = \"vertical\", ...props }: BarChartProps) {\r\n  if (layout === \"horizontal\") {\r\n    return <HorizontalBarChart {...props} />;\r\n  }\r\n  return <VerticalBarChart {...props} />;\r\n}\r\n\r\nfunction HorizontalBarChart({\r\n  data,\r\n  config,\r\n  xAxisKey,\r\n  title,\r\n  description,\r\n  period,\r\n  footer,\r\n  trendText,\r\n  trendIcon,\r\n  xAxisTickFormatter = (value) => value,\r\n  yAxisTickFormatter = (value) => value,\r\n  classNames,\r\n  showLegend,\r\n  valuePrefix,\r\n  valueSuffix,\r\n  emptyState,\r\n}: BarChartProps) {\r\n  return (\r\n    <ChartCard\r\n      title={title}\r\n      description={description}\r\n      period={period}\r\n      footer={footer}\r\n      trendText={trendText}\r\n      trendIcon={trendIcon}\r\n      classNames={classNames?.card}\r\n      emptyState={data.length === 0 ? emptyState : undefined}\r\n    >\r\n      <ChartContainer\r\n        config={config}\r\n        className={cn(\"mx-auto max-h-full\", classNames?.chart?.container)}\r\n      >\r\n        <RechartsBarChart\r\n          accessibilityLayer\r\n          data={data}\r\n          layout=\"vertical\"\r\n          className={cn(\"flex flex-col pb-2\", classNames?.chart?.bar)}\r\n          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\r\n        >\r\n          <CartesianGrid vertical={false} />\r\n          {Object.keys(config).map((key) => (\r\n            <XAxis type=\"number\" dataKey={key} key={key} />\r\n          ))}\r\n          <YAxis\r\n            dataKey={xAxisKey}\r\n            type=\"category\"\r\n            tickLine={false}\r\n            tickMargin={10}\r\n            axisLine={false}\r\n            tickFormatter={yAxisTickFormatter}\r\n          />\r\n          <ChartTooltip\r\n            cursor={false}\r\n            content={\r\n              <ChartTooltipContent\r\n                hideLabel\r\n                valuePrefix={valuePrefix}\r\n                valueSuffix={valueSuffix}\r\n              />\r\n            }\r\n          />\r\n          {Object.keys(config).map((key) => (\r\n            <Bar\r\n              key={key}\r\n              dataKey={key}\r\n              fill={config[key]?.color || \"var(--chart-1)\"}\r\n              radius={5}\r\n            />\r\n          ))}\r\n          {showLegend && (\r\n            <ChartLegend\r\n              wrapperStyle={{\r\n                position: \"relative\",\r\n                top: \"unset\",\r\n                left: \"unset\",\r\n                bottom: \"unset\",\r\n                right: \"unset\",\r\n                width: \"100%\",\r\n                textAlign: \"center\",\r\n              }}\r\n              className={cn(\"p-0\", classNames?.chart?.legend)}\r\n              content={<ChartLegendContent />}\r\n            />\r\n          )}\r\n        </RechartsBarChart>\r\n      </ChartContainer>\r\n    </ChartCard>\r\n  );\r\n}\r\n\r\nfunction VerticalBarChart({\r\n  data,\r\n  config,\r\n  xAxisKey,\r\n  title,\r\n  description,\r\n  period,\r\n  footer,\r\n  trendText,\r\n  trendIcon,\r\n  xAxisTickFormatter = (value) => value,\r\n  classNames,\r\n  showLegend,\r\n  valuePrefix,\r\n  valueSuffix,\r\n  emptyState,\r\n}: BarChartProps) {\r\n  return (\r\n    <ChartCard\r\n      title={title}\r\n      description={description}\r\n      period={period}\r\n      footer={footer}\r\n      trendText={trendText}\r\n      trendIcon={trendIcon}\r\n      classNames={classNames?.card}\r\n      emptyState={data.length === 0 ? emptyState : undefined}\r\n    >\r\n      <ChartContainer\r\n        config={config}\r\n        className={cn(\"mx-auto max-h-full\", classNames?.chart?.container)}\r\n      >\r\n        <RechartsBarChart\r\n          accessibilityLayer\r\n          data={data}\r\n          layout=\"horizontal\"\r\n          className={cn(\"flex flex-col pb-2\", classNames?.chart?.bar)}\r\n          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\r\n        >\r\n          <CartesianGrid vertical={false} />\r\n          <XAxis\r\n            dataKey={xAxisKey}\r\n            tickLine={false}\r\n            axisLine={false}\r\n            tickMargin={8}\r\n            minTickGap={32}\r\n            tickFormatter={xAxisTickFormatter}\r\n          />\r\n          <YAxis />\r\n          <ChartTooltip\r\n            cursor={false}\r\n            content={\r\n              <ChartTooltipContent\r\n                valuePrefix={valuePrefix}\r\n                valueSuffix={valueSuffix}\r\n              />\r\n            }\r\n          />\r\n          {Object.keys(config).map((key) => (\r\n            <Bar\r\n              key={key}\r\n              dataKey={key}\r\n              fill={config[key]?.color || \"var(--chart-1)\"}\r\n              radius={0}\r\n            />\r\n          ))}\r\n          {showLegend && (\r\n            <ChartLegend\r\n              wrapperStyle={{\r\n                position: \"relative\",\r\n                top: \"unset\",\r\n                left: \"unset\",\r\n                bottom: \"unset\",\r\n                right: \"unset\",\r\n                width: \"100%\",\r\n                textAlign: \"center\",\r\n              }}\r\n              className={cn(\"p-0\", classNames?.chart?.legend)}\r\n              content={<ChartLegendContent />}\r\n            />\r\n          )}\r\n        </RechartsBarChart>\r\n      </ChartContainer>\r\n    </ChartCard>\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/custom/charts/chart-card.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "@repo/ayasofyazilim-ui/components/card";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle
+} from "@repo/ayasofyazilim-ui/components/empty";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+function ChartCard({
+  title,
+  description,
+  period,
+  header,
+  footer,
+  trendText,
+  trendIcon,
+  children,
+  classNames,
+  emptyState
+}) {
+  return /* @__PURE__ */ jsxs(Card, { className: cn(classNames?.container), children: [
+    /* @__PURE__ */ jsxs(
+      CardHeader,
+      {
+        className: cn("items-center pb-4! grid-rows-1", classNames?.header),
+        children: [
+          title && /* @__PURE__ */ jsx(CardTitle, { className: cn("my-auto", classNames?.title), children: title }),
+          period && /* @__PURE__ */ jsx(CardDescription, { className: cn(classNames?.description), children: period }),
+          description && /* @__PURE__ */ jsx(CardDescription, { className: cn(classNames?.description), children: description }),
+          header
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(CardContent, { className: cn("pb-0 relative", classNames?.content), children: [
+      emptyState && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-white/50 z-2", children: /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+        /* @__PURE__ */ jsx(EmptyMedia, { variant: "icon", children: emptyState.icon }),
+        /* @__PURE__ */ jsx(EmptyTitle, { children: emptyState.title }),
+        /* @__PURE__ */ jsx(EmptyDescription, { children: emptyState.description })
+      ] }) }) }),
+      children
+    ] }),
+    (trendText || trendIcon) && /* @__PURE__ */ jsxs(
+      CardFooter,
+      {
+        className: cn(
+          "flex items-center gap-2 leading-none font-medium",
+          classNames?.footer
+        ),
+        children: [
+          trendText,
+          " ",
+          trendIcon
+        ]
+      }
+    ),
+    footer && /* @__PURE__ */ jsx(CardFooter, { className: cn(classNames?.footer), children: footer })
+  ] });
+}
+export {
+  ChartCard
+};
+//# sourceMappingURL=chart-card.js.map

package/dist/custom/charts/chart-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/custom/charts/chart-card.tsx"],"sourcesContent":["import {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@repo/ayasofyazilim-ui/components/card\";\r\nimport {\r\n  Empty,\r\n  EmptyDescription,\r\n  EmptyHeader,\r\n  EmptyMedia,\r\n  EmptyTitle,\r\n} from \"@repo/ayasofyazilim-ui/components/empty\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport { ReactNode } from \"react\";\r\nimport { EmptyConfig } from \".\";\r\n\r\nexport type CardClassNames = {\r\n  container?: string;\r\n  header?: string;\r\n  content?: string;\r\n  title?: string;\r\n  description?: string;\r\n  footer?: string;\r\n  isEmpty?: string;\r\n};\r\n\r\nexport function ChartCard({\r\n  title,\r\n  description,\r\n  period,\r\n  header,\r\n  footer,\r\n  trendText,\r\n  trendIcon,\r\n  children,\r\n  classNames,\r\n  emptyState,\r\n}: {\r\n  title?: ReactNode;\r\n  description?: ReactNode;\r\n  period?: ReactNode;\r\n  header?: ReactNode;\r\n  footer?: ReactNode;\r\n  trendText?: ReactNode;\r\n  trendIcon?: ReactNode;\r\n  children: ReactNode;\r\n  classNames?: CardClassNames;\r\n} & Partial<EmptyConfig>) {\r\n  return (\r\n    <Card className={cn(classNames?.container)}>\r\n      <CardHeader\r\n        className={cn(\"items-center pb-4! grid-rows-1\", classNames?.header)}\r\n      >\r\n        {title && (\r\n          <CardTitle className={cn(\"my-auto\", classNames?.title)}>\r\n            {title}\r\n          </CardTitle>\r\n        )}\r\n        {period && (\r\n          <CardDescription className={cn(classNames?.description)}>\r\n            {period}\r\n          </CardDescription>\r\n        )}\r\n        {description && (\r\n          <CardDescription className={cn(classNames?.description)}>\r\n            {description}\r\n          </CardDescription>\r\n        )}\r\n        {header}\r\n      </CardHeader>\r\n      <CardContent className={cn(\"pb-0 relative\", classNames?.content)}>\r\n        {emptyState && (\r\n          <div className=\"absolute inset-0 bg-white/50 z-2\">\r\n            <Empty>\r\n              <EmptyHeader>\r\n                <EmptyMedia variant=\"icon\">{emptyState.icon}</EmptyMedia>\r\n                <EmptyTitle>{emptyState.title}</EmptyTitle>\r\n                <EmptyDescription>{emptyState.description}</EmptyDescription>\r\n              </EmptyHeader>\r\n            </Empty>\r\n          </div>\r\n        )}\r\n        {children}\r\n      </CardContent>\r\n      {(trendText || trendIcon) && (\r\n        <CardFooter\r\n          className={cn(\r\n            \"flex items-center gap-2 leading-none font-medium\",\r\n            classNames?.footer\r\n          )}\r\n        >\r\n          {trendText} {trendIcon}\r\n        </CardFooter>\r\n      )}\r\n      {footer && (\r\n        <CardFooter className={cn(classNames?.footer)}>{footer}</CardFooter>\r\n      )}\r\n    </Card>\r\n  );\r\n}\r\n"],"mappings":"AAqDM,SAII,KAJJ;AArDN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAcZ,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAU0B;AACxB,SACE,qBAAC,QAAK,WAAW,GAAG,YAAY,SAAS,GACvC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,kCAAkC,YAAY,MAAM;AAAA,QAEjE;AAAA,mBACC,oBAAC,aAAU,WAAW,GAAG,WAAW,YAAY,KAAK,GAClD,iBACH;AAAA,UAED,UACC,oBAAC,mBAAgB,WAAW,GAAG,YAAY,WAAW,GACnD,kBACH;AAAA,UAED,eACC,oBAAC,mBAAgB,WAAW,GAAG,YAAY,WAAW,GACnD,uBACH;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,IACA,qBAAC,eAAY,WAAW,GAAG,iBAAiB,YAAY,OAAO,GAC5D;AAAA,oBACC,oBAAC,SAAI,WAAU,oCACb,8BAAC,SACC,+BAAC,eACC;AAAA,4BAAC,cAAW,SAAQ,QAAQ,qBAAW,MAAK;AAAA,QAC5C,oBAAC,cAAY,qBAAW,OAAM;AAAA,QAC9B,oBAAC,oBAAkB,qBAAW,aAAY;AAAA,SAC5C,GACF,GACF;AAAA,MAED;AAAA,OACH;AAAA,KACE,aAAa,cACb;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QAEC;AAAA;AAAA,UAAU;AAAA,UAAE;AAAA;AAAA;AAAA,IACf;AAAA,IAED,UACC,oBAAC,cAAW,WAAW,GAAG,YAAY,MAAM,GAAI,kBAAO;AAAA,KAE3D;AAEJ;","names":[]}

package/dist/custom/charts/index.js

@@ -0,0 +1,5 @@
+export * from "./pie-chart";
+export * from "./area-chart";
+export * from "./radar-chart";
+export * from "./bar-chart";
+//# sourceMappingURL=index.js.map

package/dist/custom/charts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/custom/charts/index.tsx"],"sourcesContent":["export * from \"./pie-chart\";\r\nexport * from \"./area-chart\";\r\nexport * from \"./radar-chart\";\r\nexport * from \"./bar-chart\";\r\n\r\nexport type ChartData = Array<{\r\n  [key: string]: number | string;\r\n}>;\r\n\r\nexport type EmptyConfig = {\r\n  emptyState: {\r\n    icon: React.ReactNode;\r\n    title: string;\r\n    description: string;\r\n  };\r\n};\r\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/custom/charts/pie-chart.js

@@ -0,0 +1,153 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Label, Pie, PieChart as RechartsPieChart } from "recharts";
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent
+} from "@repo/ayasofyazilim-ui/components/chart";
+import { ChartCard } from "./chart-card";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+function PieChart({
+  data,
+  config,
+  valueKey,
+  nameKey,
+  title,
+  description,
+  period,
+  trendText,
+  trendIcon,
+  footer,
+  totalLabel,
+  chartStyle,
+  classNames,
+  innerRadius,
+  strokeWidth,
+  valuePrefix,
+  valueSuffix,
+  showLegend = true,
+  emptyState
+}) {
+  const totalCount = useMemo(
+    () => data.reduce((acc, curr) => acc + (Number(curr[valueKey]) || 0), 0),
+    [data, valueKey]
+  );
+  const renderLabelContent = ({
+    viewBox
+  }) => {
+    if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+      return /* @__PURE__ */ jsxs(
+        "text",
+        {
+          x: viewBox.cx,
+          y: viewBox.cy,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          children: [
+            /* @__PURE__ */ jsxs(
+              "tspan",
+              {
+                x: viewBox.cx,
+                y: viewBox.cy,
+                className: "fill-foreground text-3xl font-bold",
+                children: [
+                  valuePrefix,
+                  " ",
+                  totalCount.toLocaleString(),
+                  " ",
+                  valueSuffix
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "tspan",
+              {
+                x: viewBox.cx,
+                y: (viewBox.cy || 0) + 24,
+                className: "fill-muted-foreground",
+                children: totalLabel
+              }
+            )
+          ]
+        }
+      );
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx(
+    ChartCard,
+    {
+      title,
+      description,
+      period,
+      footer,
+      trendText,
+      trendIcon,
+      classNames: classNames?.card,
+      emptyState: data.length === 0 ? emptyState : void 0,
+      children: /* @__PURE__ */ jsx(
+        ChartContainer,
+        {
+          config,
+          className: cn("max-h-[300px]", classNames?.chart?.container),
+          children: /* @__PURE__ */ jsxs(RechartsPieChart, { className: cn("relative", classNames?.chart?.pie), children: [
+            /* @__PURE__ */ jsx(
+              ChartTooltip,
+              {
+                cursor: false,
+                content: /* @__PURE__ */ jsx(
+                  ChartTooltipContent,
+                  {
+                    valuePrefix,
+                    valueSuffix
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Pie,
+              {
+                data: data.map((item, index) => ({
+                  ...item,
+                  fill: config[String(item[nameKey])]?.color || `var(--chart-${index + 1})`
+                })),
+                className: "fixed",
+                dataKey: valueKey,
+                nameKey,
+                innerRadius: innerRadius || (chartStyle === "donut" ? 60 : 0),
+                strokeWidth: strokeWidth || (chartStyle === "donut" ? 0 : void 0),
+                children: /* @__PURE__ */ jsx(Label, { content: renderLabelContent })
+              }
+            ),
+            showLegend && /* @__PURE__ */ jsx(
+              ChartLegend,
+              {
+                wrapperStyle: {
+                  width: "100%",
+                  height: 0,
+                  bottom: 0
+                },
+                content: /* @__PURE__ */ jsx(
+                  ChartLegendContent,
+                  {
+                    className: cn(
+                      "flex-col absolute size-full inset-0 items-start justify-end w-full text-nowrap gap-1 p-0",
+                      classNames?.chart?.legend
+                    )
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+export {
+  PieChart
+};
+//# sourceMappingURL=pie-chart.js.map

package/dist/custom/charts/pie-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/custom/charts/pie-chart.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { useMemo } from \"react\";\r\nimport { Label, LabelProps, Pie, PieChart as RechartsPieChart } from \"recharts\";\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartLegend,\r\n  ChartLegendContent,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from \"@repo/ayasofyazilim-ui/components/chart\";\r\nimport { CardClassNames, ChartCard } from \"./chart-card\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport { ChartData, EmptyConfig } from \".\";\r\n\r\nexport type PieChartProps = {\r\n  data: ChartData;\r\n  config: ChartConfig;\r\n  valueKey: string;\r\n  nameKey: string;\r\n  title?: React.ReactNode;\r\n  description?: React.ReactNode;\r\n  period?: React.ReactNode;\r\n  trendText?: React.ReactNode;\r\n  trendIcon?: React.ReactNode;\r\n  footer?: React.ReactNode;\r\n  totalLabel?: string;\r\n  chartStyle: \"donut\" | \"pie\";\r\n  innerRadius?: number;\r\n  strokeWidth?: number;\r\n  valuePrefix?: string;\r\n  valueSuffix?: string;\r\n  showLegend?: boolean;\r\n  classNames?: {\r\n    chart?: {\r\n      container?: string;\r\n      tooltip?: string;\r\n      legend?: string;\r\n      pie?: string;\r\n    };\r\n    card?: CardClassNames;\r\n  };\r\n} & EmptyConfig;\r\n\r\nexport function PieChart({\r\n  data,\r\n  config,\r\n  valueKey,\r\n  nameKey,\r\n  title,\r\n  description,\r\n  period,\r\n  trendText,\r\n  trendIcon,\r\n  footer,\r\n  totalLabel,\r\n  chartStyle,\r\n  classNames,\r\n  innerRadius,\r\n  strokeWidth,\r\n  valuePrefix,\r\n  valueSuffix,\r\n  showLegend = true,\r\n  emptyState,\r\n}: PieChartProps) {\r\n  const totalCount = useMemo(\r\n    () => data.reduce((acc, curr) => acc + (Number(curr[valueKey]) || 0), 0),\r\n    [data, valueKey]\r\n  );\r\n\r\n  // Transform data to ChartConfig shape for ChartContainer\r\n  const renderLabelContent = ({\r\n    viewBox,\r\n  }: {\r\n    viewBox?: LabelProps[\"viewBox\"] | null;\r\n  }) => {\r\n    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\r\n      return (\r\n        <text\r\n          x={viewBox.cx}\r\n          y={viewBox.cy}\r\n          textAnchor=\"middle\"\r\n          dominantBaseline=\"middle\"\r\n        >\r\n          <tspan\r\n            x={viewBox.cx}\r\n            y={viewBox.cy}\r\n            className=\"fill-foreground text-3xl font-bold\"\r\n          >\r\n            {valuePrefix} {totalCount.toLocaleString()} {valueSuffix}\r\n          </tspan>\r\n          <tspan\r\n            x={viewBox.cx}\r\n            y={(viewBox.cy || 0) + 24}\r\n            className=\"fill-muted-foreground\"\r\n          >\r\n            {totalLabel}\r\n          </tspan>\r\n        </text>\r\n      );\r\n    }\r\n    return null;\r\n  };\r\n\r\n  return (\r\n    <ChartCard\r\n      title={title}\r\n      description={description}\r\n      period={period}\r\n      footer={footer}\r\n      trendText={trendText}\r\n      trendIcon={trendIcon}\r\n      classNames={classNames?.card}\r\n      emptyState={data.length === 0 ? emptyState : undefined}\r\n    >\r\n      <ChartContainer\r\n        config={config}\r\n        className={cn(\"max-h-[300px]\", classNames?.chart?.container)}\r\n      >\r\n        <RechartsPieChart className={cn(\"relative\", classNames?.chart?.pie)}>\r\n          <ChartTooltip\r\n            cursor={false}\r\n            content={\r\n              <ChartTooltipContent\r\n                valuePrefix={valuePrefix}\r\n                valueSuffix={valueSuffix}\r\n              />\r\n            }\r\n          />\r\n          <Pie\r\n            data={data.map((item, index) => ({\r\n              ...item,\r\n              fill:\r\n                config[String(item[nameKey])]?.color ||\r\n                `var(--chart-${index + 1})`,\r\n            }))}\r\n            className=\"fixed\"\r\n            dataKey={valueKey}\r\n            nameKey={nameKey}\r\n            innerRadius={innerRadius || (chartStyle === \"donut\" ? 60 : 0)}\r\n            strokeWidth={\r\n              strokeWidth || (chartStyle === \"donut\" ? 0 : undefined)\r\n            }\r\n          >\r\n            <Label content={renderLabelContent} />\r\n          </Pie>\r\n          {showLegend && (\r\n            <ChartLegend\r\n              wrapperStyle={{\r\n                width: \"100%\",\r\n                height: 0,\r\n                bottom: 0,\r\n              }}\r\n              content={\r\n                <ChartLegendContent\r\n                  className={cn(\r\n                    \"flex-col absolute size-full inset-0 items-start justify-end w-full text-nowrap gap-1 p-0\",\r\n                    classNames?.chart?.legend\r\n                  )}\r\n                />\r\n              }\r\n            />\r\n          )}\r\n        </RechartsPieChart>\r\n      </ChartContainer>\r\n    </ChartCard>\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/custom/charts/radar-chart.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  PolarAngleAxis,
+  PolarGrid,
+  Radar,
+  RadarChart as RechartsRadarChart
+} from "recharts";
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent
+} from "@repo/ayasofyazilim-ui/components/chart";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { ChartCard } from "./chart-card";
+function RadarChart({
+  data,
+  config,
+  polarKey,
+  title,
+  description,
+  period,
+  footer,
+  trendText,
+  trendIcon,
+  showLegend = true,
+  linesOnly = false,
+  classNames,
+  valuePrefix,
+  valueSuffix,
+  emptyState
+}) {
+  return /* @__PURE__ */ jsx(
+    ChartCard,
+    {
+      title,
+      description,
+      period,
+      footer,
+      trendText,
+      trendIcon,
+      classNames: classNames?.card,
+      emptyState: data.length === 0 ? emptyState : void 0,
+      children: /* @__PURE__ */ jsx(
+        ChartContainer,
+        {
+          config,
+          className: cn("mx-auto max-h-full", classNames?.chart?.container),
+          children: /* @__PURE__ */ jsxs(
+            RechartsRadarChart,
+            {
+              data,
+              className: cn("flex flex-col pb-2", classNames?.chart?.radar),
+              margin: { top: 0, bottom: 0, left: 0, right: 0 },
+              children: [
+                /* @__PURE__ */ jsx(
+                  ChartTooltip,
+                  {
+                    cursor: false,
+                    content: /* @__PURE__ */ jsx(
+                      ChartTooltipContent,
+                      {
+                        indicator: "line",
+                        valuePrefix,
+                        valueSuffix
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(PolarAngleAxis, { dataKey: polarKey }),
+                /* @__PURE__ */ jsx(PolarGrid, { radialLines: !linesOnly }),
+                Object.keys(config).map((key, idx) => /* @__PURE__ */ jsx(
+                  Radar,
+                  {
+                    dataKey: key,
+                    fill: config[key]?.color || `var(--color-${idx})`,
+                    fillOpacity: linesOnly ? 0 : idx === 0 ? 0.6 : 0.4,
+                    stroke: config[key]?.color || `var(--color-${idx})`,
+                    strokeWidth: linesOnly ? 2 : 1
+                  },
+                  key
+                )),
+                showLegend && /* @__PURE__ */ jsx(
+                  ChartLegend,
+                  {
+                    wrapperStyle: {
+                      position: "relative",
+                      top: "unset",
+                      left: "unset",
+                      bottom: "unset",
+                      right: "unset",
+                      width: "100%",
+                      textAlign: "center"
+                    },
+                    className: cn("p-0", classNames?.chart?.legend),
+                    content: /* @__PURE__ */ jsx(ChartLegendContent, {})
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  RadarChart
+};
+//# sourceMappingURL=radar-chart.js.map

package/dist/custom/charts/radar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/custom/charts/radar-chart.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport {\r\n  PolarAngleAxis,\r\n  PolarGrid,\r\n  Radar,\r\n  RadarChart as RechartsRadarChart,\r\n} from \"recharts\";\r\n\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartLegend,\r\n  ChartLegendContent,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from \"@repo/ayasofyazilim-ui/components/chart\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport { ChartCard, CardClassNames } from \"./chart-card\";\r\nimport { ChartData, EmptyConfig } from \".\";\r\n\r\nexport type RadarChartProps = {\r\n  data: ChartData;\r\n  config: ChartConfig;\r\n  polarKey: string;\r\n  title?: React.ReactNode;\r\n  description?: React.ReactNode;\r\n  period?: React.ReactNode;\r\n  footer?: React.ReactNode;\r\n  trendText?: React.ReactNode;\r\n  trendIcon?: React.ReactNode;\r\n  showLegend?: boolean;\r\n  linesOnly?: boolean;\r\n  valuePrefix?: string;\r\n  valueSuffix?: string;\r\n  classNames?: {\r\n    chart?: {\r\n      container?: string;\r\n      tooltip?: string;\r\n      legend?: string;\r\n      radar?: string;\r\n    };\r\n    card?: CardClassNames;\r\n  };\r\n} & EmptyConfig;\r\n\r\nexport function RadarChart({\r\n  data,\r\n  config,\r\n  polarKey,\r\n  title,\r\n  description,\r\n  period,\r\n  footer,\r\n  trendText,\r\n  trendIcon,\r\n  showLegend = true,\r\n  linesOnly = false,\r\n  classNames,\r\n  valuePrefix,\r\n  valueSuffix,\r\n  emptyState,\r\n}: RadarChartProps) {\r\n  return (\r\n    <ChartCard\r\n      title={title}\r\n      description={description}\r\n      period={period}\r\n      footer={footer}\r\n      trendText={trendText}\r\n      trendIcon={trendIcon}\r\n      classNames={classNames?.card}\r\n      emptyState={data.length === 0 ? emptyState : undefined}\r\n    >\r\n      <ChartContainer\r\n        config={config}\r\n        className={cn(\"mx-auto max-h-full\", classNames?.chart?.container)}\r\n      >\r\n        <RechartsRadarChart\r\n          data={data}\r\n          className={cn(\"flex flex-col pb-2\", classNames?.chart?.radar)}\r\n          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\r\n        >\r\n          <ChartTooltip\r\n            cursor={false}\r\n            content={\r\n              <ChartTooltipContent\r\n                indicator=\"line\"\r\n                valuePrefix={valuePrefix}\r\n                valueSuffix={valueSuffix}\r\n              />\r\n            }\r\n          />\r\n          <PolarAngleAxis dataKey={polarKey} />\r\n          <PolarGrid radialLines={!linesOnly} />\r\n          {Object.keys(config).map((key, idx) => (\r\n            <Radar\r\n              key={key}\r\n              dataKey={key}\r\n              fill={config[key]?.color || `var(--color-${idx})`}\r\n              fillOpacity={linesOnly ? 0 : idx === 0 ? 0.6 : 0.4}\r\n              stroke={config[key]?.color || `var(--color-${idx})`}\r\n              strokeWidth={linesOnly ? 2 : 1}\r\n            />\r\n          ))}\r\n          {showLegend && (\r\n            <ChartLegend\r\n              wrapperStyle={{\r\n                position: \"relative\",\r\n                top: \"unset\",\r\n                left: \"unset\",\r\n                bottom: \"unset\",\r\n                right: \"unset\",\r\n                width: \"100%\",\r\n                textAlign: \"center\",\r\n              }}\r\n              className={cn(\"p-0\", classNames?.chart?.legend)}\r\n              content={<ChartLegendContent />}\r\n            />\r\n          )}\r\n        </RechartsRadarChart>\r\n      </ChartContainer>\r\n    </ChartCard>\r\n  );\r\n}\r\n"],"mappings":";AA+EQ,SAQM,KARN;AA5ER;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,OACT;AAEP;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,iBAAiC;AA4BnC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,YAAY;AAAA,MACxB,YAAY,KAAK,WAAW,IAAI,aAAa;AAAA,MAE7C;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,sBAAsB,YAAY,OAAO,SAAS;AAAA,UAEhE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAW,GAAG,sBAAsB,YAAY,OAAO,KAAK;AAAA,cAC5D,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAE;AAAA,cAE/C;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,QAAQ;AAAA,oBACR,SACE;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAU;AAAA,wBACV;AAAA,wBACA;AAAA;AAAA,oBACF;AAAA;AAAA,gBAEJ;AAAA,gBACA,oBAAC,kBAAe,SAAS,UAAU;AAAA,gBACnC,oBAAC,aAAU,aAAa,CAAC,WAAW;AAAA,gBACnC,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC,KAAK,QAC7B;AAAA,kBAAC;AAAA;AAAA,oBAEC,SAAS;AAAA,oBACT,MAAM,OAAO,GAAG,GAAG,SAAS,eAAe,GAAG;AAAA,oBAC9C,aAAa,YAAY,IAAI,QAAQ,IAAI,MAAM;AAAA,oBAC/C,QAAQ,OAAO,GAAG,GAAG,SAAS,eAAe,GAAG;AAAA,oBAChD,aAAa,YAAY,IAAI;AAAA;AAAA,kBALxB;AAAA,gBAMP,CACD;AAAA,gBACA,cACC;AAAA,kBAAC;AAAA;AAAA,oBACC,cAAc;AAAA,sBACZ,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,MAAM;AAAA,sBACN,QAAQ;AAAA,sBACR,OAAO;AAAA,sBACP,OAAO;AAAA,sBACP,WAAW;AAAA,oBACb;AAAA,oBACA,WAAW,GAAG,OAAO,YAAY,OAAO,MAAM;AAAA,oBAC9C,SAAS,oBAAC,sBAAmB;AAAA;AAAA,gBAC/B;AAAA;AAAA;AAAA,UAEJ;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}