@questpie/admin 1.1.1 → 2.0.0

package/dist/client/components/ui/tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.mjs","names":["Tabs","TabsPrimitive"],"sources":["../../../../src/client/components/ui/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst tabsListVariants = cva(\n  \"p-[3px] group-data-horizontal/tabs:h-8 group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"gap-1.5 border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-3.5 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"text-xs/relaxed flex-1 outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };\n"],"mappings":";;;;;;;;AAOA,SAASA,OAAK,EACZ,WACA,cAAc,cACd,GAAG,SACwB;AAC3B,QACE,oBAACC,KAAc;EACb,aAAU;EACV,oBAAkB;EAClB,WAAW,GACT,gEACA,UACD;EACD,GAAI;GACJ;;AAIN,MAAM,mBAAmB,IACvB,2NACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACP,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAED,SAAS,SAAS,EAChB,WACA,UAAU,WACV,GAAG,SACgE;AACnE,QACE,oBAACA,KAAc;EACb,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,iBAAiB,EAAE,SAAS,CAAC,EAAE,UAAU;EACvD,GAAI;GACJ;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAAkC;AACrE,QACE,oBAACA,KAAc;EACb,aAAU;EACV,WAAW,GACT,+qBACA,iQACA,qJACA,4dACA,UACD;EACD,GAAI;GACJ;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAAoC;AACvE,QACE,oBAACA,KAAc;EACb,aAAU;EACV,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;GACJ"}

package/dist/client/components/ui/textarea.d.mts

@@ -0,0 +1,2 @@
+import "react";
+import "react/jsx-runtime";

package/dist/client/components/ui/textarea.mjs

@@ -0,0 +1,15 @@
+import { cn } from "../../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/ui/textarea.tsx
+function Textarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cn("border-input/80 bg-input/20  backdrop-blur-sm focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none border px-3 py-2.5 text-sm transition-all focus-visible:ring-[2px] aria-invalid:ring-[2px] placeholder:text-muted-foreground flex field-sizing-content min-h-24 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50", className),
+		...props
+	});
+}
+
+//#endregion
+export { Textarea };
+//# sourceMappingURL=textarea.mjs.map

package/dist/client/components/ui/textarea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.mjs","names":[],"sources":["../../../../src/client/components/ui/textarea.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input/80 bg-input/20  backdrop-blur-sm focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none border px-3 py-2.5 text-sm transition-all focus-visible:ring-[2px] aria-invalid:ring-[2px] placeholder:text-muted-foreground flex field-sizing-content min-h-24 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea };\n"],"mappings":";;;;AAIA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA2C;AAC3E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GACT,qeACA,UACD;EACD,GAAI;GACJ"}

package/dist/client/components/ui/toolbar.mjs

@@ -0,0 +1,54 @@
+import { cn } from "../../lib/utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/ui/toolbar.tsx
+/**
+* Toolbar - Container for toolbar elements with glass effect
+*
+* @example
+* ```tsx
+* <Toolbar>
+*   <ToolbarSection className="flex-1">
+*     <SearchInput value={search} onChange={setSearch} />
+*   </ToolbarSection>
+*   <ToolbarSeparator />
+*   <ToolbarSection>
+*     <Button variant="outline" size="sm">Options</Button>
+*   </ToolbarSection>
+* </Toolbar>
+* ```
+*/
+function Toolbar({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toolbar",
+		className: cn("bg-card/10 backdrop-blur-sm border border-border/40", "p-1 flex items-center gap-2", className),
+		...props,
+		children
+	});
+}
+/**
+* ToolbarSection - Group of related toolbar elements
+*/
+function ToolbarSection({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toolbar-section",
+		className: cn("flex items-center gap-1", className),
+		...props,
+		children
+	});
+}
+/**
+* ToolbarSeparator - Vertical separator between toolbar sections
+*/
+function ToolbarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toolbar-separator",
+		className: cn("h-4 w-px bg-border/40", className),
+		...props
+	});
+}
+
+//#endregion
+export { Toolbar, ToolbarSection, ToolbarSeparator };
+//# sourceMappingURL=toolbar.mjs.map

package/dist/client/components/ui/toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.mjs","names":[],"sources":["../../../../src/client/components/ui/toolbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/utils\";\n\n// ============================================================================\n// Toolbar\n// ============================================================================\n\nexport interface ToolbarProps extends React.ComponentProps<\"div\"> {\n  /**\n   * Children elements\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Toolbar - Container for toolbar elements with glass effect\n *\n * @example\n * ```tsx\n * <Toolbar>\n *   <ToolbarSection className=\"flex-1\">\n *     <SearchInput value={search} onChange={setSearch} />\n *   </ToolbarSection>\n *   <ToolbarSeparator />\n *   <ToolbarSection>\n *     <Button variant=\"outline\" size=\"sm\">Options</Button>\n *   </ToolbarSection>\n * </Toolbar>\n * ```\n */\nexport function Toolbar({\n  children,\n  className,\n  ...props\n}: ToolbarProps): React.ReactElement {\n  return (\n    <div\n      data-slot=\"toolbar\"\n      className={cn(\n        \"bg-card/10 backdrop-blur-sm border border-border/40\",\n        \"p-1 flex items-center gap-2\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================================================\n// ToolbarSection\n// ============================================================================\n\nexport interface ToolbarSectionProps extends React.ComponentProps<\"div\"> {\n  /**\n   * Children elements\n   */\n  children: React.ReactNode;\n}\n\n/**\n * ToolbarSection - Group of related toolbar elements\n */\nexport function ToolbarSection({\n  children,\n  className,\n  ...props\n}: ToolbarSectionProps): React.ReactElement {\n  return (\n    <div\n      data-slot=\"toolbar-section\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================================================\n// ToolbarSeparator\n// ============================================================================\n\nexport interface ToolbarSeparatorProps extends React.ComponentProps<\"div\"> {}\n\n/**\n * ToolbarSeparator - Vertical separator between toolbar sections\n */\nexport function ToolbarSeparator({\n  className,\n  ...props\n}: ToolbarSeparatorProps): React.ReactElement {\n  return (\n    <div\n      data-slot=\"toolbar-separator\"\n      className={cn(\"h-4 w-px bg-border/40\", className)}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// ToolbarGroup\n// ============================================================================\n\nexport interface ToolbarGroupProps extends React.ComponentProps<\"div\"> {\n  /**\n   * Children elements\n   */\n  children: React.ReactNode;\n}\n\n/**\n * ToolbarGroup - Tightly grouped toolbar buttons (no gap)\n */\nexport function ToolbarGroup({\n  children,\n  className,\n  ...props\n}: ToolbarGroupProps): React.ReactElement {\n  return (\n    <div\n      data-slot=\"toolbar-group\"\n      className={cn(\"flex items-center\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,QAAQ,EACtB,UACA,WACA,GAAG,SACgC;AACnC,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GACT,uDACA,+BACA,UACD;EACD,GAAI;EAEH;GACG;;;;;AAkBV,SAAgB,eAAe,EAC7B,UACA,WACA,GAAG,SACuC;AAC1C,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EAEH;GACG;;;;;AAaV,SAAgB,iBAAiB,EAC/B,WACA,GAAG,SACyC;AAC5C,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,yBAAyB,UAAU;EACjD,GAAI;GACJ"}

package/dist/client/components/ui/tooltip.d.mts

@@ -0,0 +1,2 @@
+import "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";

package/dist/client/components/ui/tooltip.mjs

@@ -0,0 +1,45 @@
+"use client";
+
+import { cn } from "../../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+
+//#region src/client/components/ui/tooltip.tsx
+function TooltipProvider({ delay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		"data-slot": "tooltip-provider",
+		delay,
+		...props
+	});
+}
+function Tooltip$1({ ...props }) {
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Tooltip.Root, {
+		"data-slot": "tooltip",
+		...props
+	}) });
+}
+function TooltipTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+			"data-slot": "tooltip-content",
+			className: cn("data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)", "bg-card/10 backdrop-blur-md border text-foreground border-border/60", className),
+			...props,
+			children
+		})
+	}) });
+}
+
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipTrigger };
+//# sourceMappingURL=tooltip.mjs.map

package/dist/client/components/ui/tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.mjs","names":["TooltipPrimitive","Tooltip"],"sources":["../../../../src/client/components/ui/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"#questpie/admin/client/lib/utils.js\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)\",\n            \"bg-card/10 backdrop-blur-md border text-foreground border-border/60\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {/* <TooltipPrimitive.Arrow\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\",\n\t\t\t\t\t\t\t\"bg-card/10 fill-card/10 backdrop-blur-md border-border/60\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t/> */}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"mappings":";;;;;;;AAKA,SAAS,gBAAgB,EACvB,QAAQ,GACR,GAAG,SAC+B;AAClC,QACE,oBAACA,QAAiB;EAChB,aAAU;EACH;EACP,GAAI;GACJ;;AAIN,SAASC,UAAQ,EAAE,GAAG,SAAsC;AAC1D,QACE,oBAAC,6BACC,oBAACD,QAAiB;EAAK,aAAU;EAAU,GAAI;GAAS,GACxC;;AAItB,SAAS,eAAe,EAAE,GAAG,SAAyC;AACpE,QAAO,oBAACA,QAAiB;EAAQ,aAAU;EAAkB,GAAI;GAAS;;AAG5E,SAAS,eAAe,EACtB,WACA,OAAO,OACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,UACA,GAAG,SAKA;AACH,QACE,oBAACA,QAAiB,oBAChB,oBAACA,QAAiB;EACT;EACM;EACP;EACM;EACZ,WAAU;YAEV,oBAACA,QAAiB;GAChB,aAAU;GACV,WAAW,GACT,+fACA,uEACA,UACD;GACD,GAAI;GAEH;IAOsB;GACG,GACN"}

package/dist/client/components/widgets/chart-widget.d.mts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime37 from "react/jsx-runtime";
+
+//#region src/client/components/widgets/chart-widget.d.ts
+declare namespace chart_widget_d_exports {
+  export { ChartWidgetConfig, ChartWidgetProps, ChartWidget as default };
+}
+/**
+ * Chart Widget
+ *
+ * Displays data visualization over time.
+ * Uses WidgetCard for consistent styling.
+ */
+/**
+ * Chart widget config (local type for component props)
+ */
+type ChartWidgetConfig = {
+  id: string;
+  collection: string;
+  /** Field to aggregate by (e.g., "createdAt" for time series, "status" for categories) */
+  field: string;
+  chartType?: "line" | "bar" | "area" | "pie";
+  timeRange?: "7d" | "30d" | "90d" | "1y";
+  label?: string;
+  realtime?: boolean;
+  /** Color for the chart (CSS color value) */
+  color?: string;
+  /** Show grid lines */
+  showGrid?: boolean;
+  /** Aggregation type */
+  aggregation?: "count" | "sum" | "average";
+  /** Value field for sum/average aggregation */
+  valueField?: string;
+  /** Server has a fetchFn for this widget */
+  hasFetchFn?: boolean;
+  /** Refresh interval in ms */
+  refreshInterval?: number;
+};
+/**
+ * Chart widget props
+ */
+type ChartWidgetProps = {
+  config: ChartWidgetConfig;
+};
+/**
+ * Chart widget component
+ *
+ * Displays:
+ * - Time series data visualization
+ * - Multiple chart types (line, bar, area, pie)
+ * - Configurable time ranges
+ */
+declare function ChartWidget({
+  config
+}: ChartWidgetProps): react_jsx_runtime37.JSX.Element;
+//#endregion
+export { chart_widget_d_exports };
+//# sourceMappingURL=chart-widget.d.mts.map

package/dist/client/components/widgets/chart-widget.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-widget.d.mts","names":[],"sources":["../../../../src/client/components/widgets/chart-widget.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;AAuCY,KAAA,iBAAA,GAAiB;EA0BjB,EAAA,EAAA,MAAA;EA6CY,UAAA,EAAA,MAAW;EAAG;EAAU,KAAA,EAAA,MAAA;EAAgB,SAAA,CAAA,EAAA,MAAA,GAAA,KAAA,GAAA,MAAA,GAAA,KAAA;EAAA,SAAA,CAAA,EAAA,IAAA,GAAA,KAAA,GAAA,KAAA,GAAA,IAAA;;;;;;;;;;;;;;;;;;;KA7CpD,gBAAA;UACF;;;;;;;;;;iBA4Cc,WAAA;;GAAwB,mBAAgB,mBAAA,CAAA,GAAA,CAAA"}

package/dist/client/components/widgets/chart-widget.mjs

@@ -0,0 +1,282 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { formatCollectionName } from "../../lib/utils.mjs";
+import { useCollectionList } from "../../hooks/use-collection.mjs";
+import { WidgetCard } from "../../views/dashboard/widget-card.mjs";
+import { useServerWidgetData } from "../../hooks/use-server-widget-data.mjs";
+import { ChartWidgetSkeleton } from "./widget-skeletons.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+//#region src/client/components/widgets/chart-widget.tsx
+/**
+* Chart Widget
+*
+* Displays data visualization over time.
+* Uses WidgetCard for consistent styling.
+*/
+const CHART_COLORS = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)",
+	"var(--color-chart-4)",
+	"var(--color-chart-5)"
+];
+/**
+* Custom tooltip component matching shadcn style
+*/
+function ChartTooltip({ active, payload, label }) {
+	if (!active || !payload?.length) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-md border border-border bg-background px-3 py-2 text-xs shadow-md",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "font-medium text-foreground",
+			children: label
+		}), payload.map((entry) => /* @__PURE__ */ jsxs("p", {
+			className: "text-muted-foreground",
+			children: [
+				entry.name,
+				":",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: entry.value
+				})
+			]
+		}, String(entry.name)))]
+	});
+}
+/**
+* Chart widget component
+*
+* Displays:
+* - Time series data visualization
+* - Multiple chart types (line, bar, area, pie)
+* - Configurable time ranges
+*/
+function ChartWidget({ config }) {
+	const resolveText = useResolveText();
+	const { collection, field, chartType = "area", timeRange = "30d", label, color = "var(--color-chart-1)", showGrid = true, realtime, hasFetchFn, refreshInterval } = config;
+	const serverQuery = useServerWidgetData(config.id, {
+		enabled: !!hasFetchFn,
+		refreshInterval
+	});
+	const collectionQuery = useCollectionList(collection, { limit: 1e3 }, void 0, { realtime });
+	const { isLoading, error, refetch } = hasFetchFn ? serverQuery : collectionQuery;
+	const collectionItems = hasFetchFn ? [] : Array.isArray(collectionQuery.data?.docs) ? collectionQuery.data.docs : [];
+	const displayLabel = label ? resolveText(label) : `${formatCollectionName(collection)} by ${field}`;
+	const chartData = React$1.useMemo(() => {
+		if (hasFetchFn) return serverQuery.data ?? [];
+		if (!collectionItems.length) return [];
+		const grouped = collectionItems.reduce((acc, item) => {
+			const value = item[field];
+			if (value === void 0 || value === null) return acc;
+			let key;
+			if (value instanceof Date || !isNaN(Date.parse(value))) key = formatDateForRange(new Date(value), timeRange);
+			else key = String(value);
+			acc[key] = (acc[key] || 0) + 1;
+			return acc;
+		}, {});
+		return Object.entries(grouped).map(([name, value]) => ({
+			name,
+			value
+		})).sort((a, b) => a.name.localeCompare(b.name));
+	}, [
+		hasFetchFn,
+		serverQuery.data,
+		collectionItems,
+		field,
+		timeRange
+	]);
+	const emptyContent = /* @__PURE__ */ jsx("div", {
+		className: "flex h-48 items-center justify-center text-muted-foreground",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm",
+			children: "No data available"
+		})
+	});
+	const chartContent = chartData.length === 0 ? emptyContent : /* @__PURE__ */ jsx("div", {
+		className: "h-48 w-full",
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: renderChart(chartType, chartData, color, showGrid)
+		})
+	});
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title: displayLabel,
+		isLoading,
+		loadingSkeleton: /* @__PURE__ */ jsx(ChartWidgetSkeleton, {}),
+		error: error instanceof Error ? error : error ? new Error(String(error)) : null,
+		onRefresh: () => refetch(),
+		children: chartContent
+	});
+}
+/**
+* Render the appropriate chart type
+*/
+function renderChart(type, data, color, showGrid) {
+	const commonProps = {
+		data,
+		margin: {
+			top: 5,
+			right: 5,
+			left: -20,
+			bottom: 5
+		}
+	};
+	const axisStyle = {
+		fontSize: 10,
+		fill: "var(--color-muted-foreground)"
+	};
+	switch (type) {
+		case "line": return /* @__PURE__ */ jsxs(LineChart, {
+			...commonProps,
+			children: [
+				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border)",
+					opacity: .5
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: "name",
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) }),
+				/* @__PURE__ */ jsx(Line, {
+					type: "monotone",
+					dataKey: "value",
+					stroke: color,
+					strokeWidth: 2,
+					dot: false
+				})
+			]
+		});
+		case "bar": return /* @__PURE__ */ jsxs(BarChart, {
+			...commonProps,
+			children: [
+				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border)",
+					opacity: .5
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: "name",
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					content: /* @__PURE__ */ jsx(ChartTooltip, {}),
+					cursor: {
+						fill: "var(--color-muted)",
+						opacity: .3
+					}
+				}),
+				/* @__PURE__ */ jsx(Bar, {
+					dataKey: "value",
+					fill: color,
+					radius: [
+						2,
+						2,
+						0,
+						0
+					]
+				})
+			]
+		});
+		case "pie": return /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(Pie, {
+			data,
+			dataKey: "value",
+			nameKey: "name",
+			cx: "50%",
+			cy: "50%",
+			outerRadius: 60,
+			label: ({ name }) => name,
+			labelLine: false,
+			stroke: "var(--color-background)",
+			strokeWidth: 2,
+			children: data.map((entry) => /* @__PURE__ */ jsx(Cell, { fill: CHART_COLORS[data.indexOf(entry) % CHART_COLORS.length] }, `cell-${entry.name}`))
+		}), /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) })] });
+		case "area":
+		default: return /* @__PURE__ */ jsxs(AreaChart, {
+			...commonProps,
+			children: [
+				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border)",
+					opacity: .5
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: "name",
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) }),
+				/* @__PURE__ */ jsx(Area, {
+					type: "monotone",
+					dataKey: "value",
+					stroke: color,
+					fill: color,
+					fillOpacity: .15
+				})
+			]
+		});
+	}
+}
+/**
+* Format date based on time range for grouping
+*/
+function formatDateForRange(date, timeRange) {
+	const months = [
+		"Jan",
+		"Feb",
+		"Mar",
+		"Apr",
+		"May",
+		"Jun",
+		"Jul",
+		"Aug",
+		"Sep",
+		"Oct",
+		"Nov",
+		"Dec"
+	];
+	switch (timeRange) {
+		case "7d": return `${[
+			"Sun",
+			"Mon",
+			"Tue",
+			"Wed",
+			"Thu",
+			"Fri",
+			"Sat"
+		][date.getDay()]} ${date.getDate()}`;
+		case "30d": return `${months[date.getMonth()]} ${date.getDate()}`;
+		case "90d": return `W${Math.ceil(date.getDate() / 7)} ${months[date.getMonth()]}`;
+		case "1y": return `${months[date.getMonth()]} ${date.getFullYear()}`;
+		default: return `${months[date.getMonth()]} ${date.getDate()}`;
+	}
+}
+
+//#endregion
+export { ChartWidget as default };
+//# sourceMappingURL=chart-widget.mjs.map

package/dist/client/components/widgets/chart-widget.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-widget.mjs","names":["React","key: string"],"sources":["../../../../src/client/components/widgets/chart-widget.tsx"],"sourcesContent":["/**\n * Chart Widget\n *\n * Displays data visualization over time.\n * Uses WidgetCard for consistent styling.\n */\n\nimport * as React from \"react\";\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  ResponsiveContainer,\n  Tooltip,\n  type TooltipProps,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { useCollectionList } from \"../../hooks/use-collection\";\nimport { useServerWidgetData } from \"../../hooks/use-server-widget-data\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { formatCollectionName } from \"../../lib/utils\";\nimport { WidgetCard } from \"../../views/dashboard/widget-card\";\nimport { ChartWidgetSkeleton } from \"./widget-skeletons\";\n\n/**\n * Chart widget config (local type for component props)\n */\nexport type ChartWidgetConfig = {\n  id: string;\n  collection: string;\n  /** Field to aggregate by (e.g., \"createdAt\" for time series, \"status\" for categories) */\n  field: string;\n  chartType?: \"line\" | \"bar\" | \"area\" | \"pie\";\n  timeRange?: \"7d\" | \"30d\" | \"90d\" | \"1y\";\n  label?: string;\n  realtime?: boolean;\n  /** Color for the chart (CSS color value) */\n  color?: string;\n  /** Show grid lines */\n  showGrid?: boolean;\n  /** Aggregation type */\n  aggregation?: \"count\" | \"sum\" | \"average\";\n  /** Value field for sum/average aggregation */\n  valueField?: string;\n  /** Server has a fetchFn for this widget */\n  hasFetchFn?: boolean;\n  /** Refresh interval in ms */\n  refreshInterval?: number;\n};\n\n/**\n * Chart widget props\n */\nexport type ChartWidgetProps = {\n  config: ChartWidgetConfig;\n};\n\n// Theme-aware chart colors using CSS variables\n// Note: CSS vars contain full oklch() value, so use var() directly\nconst CHART_COLORS = [\n  \"var(--color-chart-1)\",\n  \"var(--color-chart-2)\",\n  \"var(--color-chart-3)\",\n  \"var(--color-chart-4)\",\n  \"var(--color-chart-5)\",\n];\n\n/**\n * Custom tooltip component matching shadcn style\n */\nfunction ChartTooltip({\n  active,\n  payload,\n  label,\n}: TooltipProps<ValueType, NameType>) {\n  if (!active || !payload?.length) return null;\n\n  return (\n    <div className=\"rounded-md border border-border bg-background px-3 py-2 text-xs shadow-md\">\n      <p className=\"font-medium text-foreground\">{label}</p>\n      {payload.map((entry) => (\n        <p key={String(entry.name)} className=\"text-muted-foreground\">\n          {entry.name}:{\" \"}\n          <span className=\"font-medium text-foreground\">{entry.value}</span>\n        </p>\n      ))}\n    </div>\n  );\n}\n\n/**\n * Chart widget component\n *\n * Displays:\n * - Time series data visualization\n * - Multiple chart types (line, bar, area, pie)\n * - Configurable time ranges\n */\nexport default function ChartWidget({ config }: ChartWidgetProps) {\n  const resolveText = useResolveText();\n  const {\n    collection,\n    field,\n    chartType = \"area\",\n    timeRange = \"30d\",\n    label,\n    color = \"var(--color-chart-1)\",\n    showGrid = true,\n    realtime,\n    hasFetchFn,\n    refreshInterval,\n  } = config;\n\n  // Server-side data fetching (when hasFetchFn is true)\n  type ChartDataPoint = { name: string; value: number };\n  const serverQuery = useServerWidgetData<ChartDataPoint[]>(config.id, {\n    enabled: !!hasFetchFn,\n    refreshInterval,\n  });\n\n  // Fetch collection data (limited to 1000 items for performance)\n  const collectionQuery = useCollectionList(\n    collection as any,\n    {\n      limit: 1000,\n    },\n    undefined,\n    { realtime },\n  );\n\n  const { isLoading, error, refetch } = hasFetchFn\n    ? serverQuery\n    : collectionQuery;\n\n  // API returns PaginatedResult with { docs, totalDocs, ... }\n  const collectionItems = hasFetchFn\n    ? []\n    : Array.isArray((collectionQuery.data as any)?.docs)\n      ? (collectionQuery.data as any).docs\n      : [];\n  const displayLabel = label\n    ? resolveText(label)\n    : `${formatCollectionName(collection)} by ${field}`;\n\n  // Process data for chart\n  const chartData = React.useMemo(() => {\n    // When using server data, it's already in the right format\n    if (hasFetchFn) {\n      return (serverQuery.data as ChartDataPoint[] | undefined) ?? [];\n    }\n\n    if (!collectionItems.length) return [];\n\n    // Group by field value\n    const grouped = collectionItems.reduce(\n      (acc: Record<string, number>, item: any) => {\n        const value = item[field];\n        if (value === undefined || value === null) return acc;\n\n        // For date fields, group by day/week/month based on timeRange\n        let key: string;\n        if (value instanceof Date || !isNaN(Date.parse(value))) {\n          const date = new Date(value);\n          key = formatDateForRange(date, timeRange);\n        } else {\n          key = String(value);\n        }\n\n        acc[key] = (acc[key] || 0) + 1;\n        return acc;\n      },\n      {} as Record<string, number>,\n    );\n\n    // Convert to array and sort\n    return Object.entries(grouped)\n      .map(([name, value]) => ({ name, value: value as number }))\n      .sort((a, b) => a.name.localeCompare(b.name));\n  }, [hasFetchFn, serverQuery.data, collectionItems, field, timeRange]);\n\n  // Empty state content\n  const emptyContent = (\n    <div className=\"flex h-48 items-center justify-center text-muted-foreground\">\n      <p className=\"text-sm\">No data available</p>\n    </div>\n  );\n\n  // Chart content\n  const chartContent =\n    chartData.length === 0 ? (\n      emptyContent\n    ) : (\n      <div className=\"h-48 w-full\">\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          {renderChart(chartType, chartData, color, showGrid)}\n        </ResponsiveContainer>\n      </div>\n    );\n\n  return (\n    <WidgetCard\n      title={displayLabel}\n      isLoading={isLoading}\n      loadingSkeleton={<ChartWidgetSkeleton />}\n      error={\n        error instanceof Error ? error : error ? new Error(String(error)) : null\n      }\n      onRefresh={() => refetch()}\n    >\n      {chartContent}\n    </WidgetCard>\n  );\n}\n\n/**\n * Render the appropriate chart type\n */\nfunction renderChart(\n  type: ChartWidgetConfig[\"chartType\"],\n  data: Array<{ name: string; value: number }>,\n  color: string,\n  showGrid: boolean,\n) {\n  const commonProps = {\n    data,\n    margin: { top: 5, right: 5, left: -20, bottom: 5 },\n  };\n\n  // Use CSS color variables (already contain full oklch values)\n  const axisStyle = {\n    fontSize: 10,\n    fill: \"var(--color-muted-foreground)\",\n  };\n\n  switch (type) {\n    case \"line\":\n      return (\n        <LineChart {...commonProps}>\n          {showGrid && (\n            <CartesianGrid\n              strokeDasharray=\"3 3\"\n              stroke=\"var(--color-border)\"\n              opacity={0.5}\n            />\n          )}\n          <XAxis\n            dataKey=\"name\"\n            tick={axisStyle}\n            tickLine={false}\n            axisLine={false}\n          />\n          <YAxis tick={axisStyle} tickLine={false} axisLine={false} />\n          <Tooltip content={<ChartTooltip />} />\n          <Line\n            type=\"monotone\"\n            dataKey=\"value\"\n            stroke={color}\n            strokeWidth={2}\n            dot={false}\n          />\n        </LineChart>\n      );\n\n    case \"bar\":\n      return (\n        <BarChart {...commonProps}>\n          {showGrid && (\n            <CartesianGrid\n              strokeDasharray=\"3 3\"\n              stroke=\"var(--color-border)\"\n              opacity={0.5}\n            />\n          )}\n          <XAxis\n            dataKey=\"name\"\n            tick={axisStyle}\n            tickLine={false}\n            axisLine={false}\n          />\n          <YAxis tick={axisStyle} tickLine={false} axisLine={false} />\n          <Tooltip\n            content={<ChartTooltip />}\n            cursor={{ fill: \"var(--color-muted)\", opacity: 0.3 }}\n          />\n          <Bar dataKey=\"value\" fill={color} radius={[2, 2, 0, 0]} />\n        </BarChart>\n      );\n\n    case \"pie\":\n      return (\n        <PieChart>\n          <Pie\n            data={data}\n            dataKey=\"value\"\n            nameKey=\"name\"\n            cx=\"50%\"\n            cy=\"50%\"\n            outerRadius={60}\n            label={({ name }) => name}\n            labelLine={false}\n            stroke=\"var(--color-background)\"\n            strokeWidth={2}\n          >\n            {data.map((entry) => (\n              <Cell\n                key={`cell-${entry.name}`}\n                fill={CHART_COLORS[data.indexOf(entry) % CHART_COLORS.length]}\n              />\n            ))}\n          </Pie>\n          <Tooltip content={<ChartTooltip />} />\n        </PieChart>\n      );\n\n    case \"area\":\n    default:\n      return (\n        <AreaChart {...commonProps}>\n          {showGrid && (\n            <CartesianGrid\n              strokeDasharray=\"3 3\"\n              stroke=\"var(--color-border)\"\n              opacity={0.5}\n            />\n          )}\n          <XAxis\n            dataKey=\"name\"\n            tick={axisStyle}\n            tickLine={false}\n            axisLine={false}\n          />\n          <YAxis tick={axisStyle} tickLine={false} axisLine={false} />\n          <Tooltip content={<ChartTooltip />} />\n          <Area\n            type=\"monotone\"\n            dataKey=\"value\"\n            stroke={color}\n            fill={color}\n            fillOpacity={0.15}\n          />\n        </AreaChart>\n      );\n  }\n}\n\n/**\n * Format date based on time range for grouping\n */\nfunction formatDateForRange(\n  date: Date,\n  timeRange: ChartWidgetConfig[\"timeRange\"],\n): string {\n  const months = [\n    \"Jan\",\n    \"Feb\",\n    \"Mar\",\n    \"Apr\",\n    \"May\",\n    \"Jun\",\n    \"Jul\",\n    \"Aug\",\n    \"Sep\",\n    \"Oct\",\n    \"Nov\",\n    \"Dec\",\n  ];\n\n  switch (timeRange) {\n    case \"7d\": {\n      // Group by day: \"Mon 15\"\n      const days = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n      return `${days[date.getDay()]} ${date.getDate()}`;\n    }\n\n    case \"30d\":\n      // Group by day: \"Jan 15\"\n      return `${months[date.getMonth()]} ${date.getDate()}`;\n\n    case \"90d\": {\n      // Group by week: \"W1 Jan\"\n      const weekNum = Math.ceil(date.getDate() / 7);\n      return `W${weekNum} ${months[date.getMonth()]}`;\n    }\n\n    case \"1y\":\n      // Group by month: \"Jan 2024\"\n      return `${months[date.getMonth()]} ${date.getFullYear()}`;\n\n    default:\n      return `${months[date.getMonth()]} ${date.getDate()}`;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAuEA,MAAM,eAAe;CACnB;CACA;CACA;CACA;CACA;CACD;;;;AAKD,SAAS,aAAa,EACpB,QACA,SACA,SACoC;AACpC,KAAI,CAAC,UAAU,CAAC,SAAS,OAAQ,QAAO;AAExC,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GAAE,WAAU;aAA+B;IAAU,EACrD,QAAQ,KAAK,UACZ,qBAAC;GAA2B,WAAU;;IACnC,MAAM;IAAK;IAAE;IACd,oBAAC;KAAK,WAAU;eAA+B,MAAM;MAAa;;KAF5D,OAAO,MAAM,KAAK,CAGtB,CACJ;GACE;;;;;;;;;;AAYV,SAAwB,YAAY,EAAE,UAA4B;CAChE,MAAM,cAAc,gBAAgB;CACpC,MAAM,EACJ,YACA,OACA,YAAY,QACZ,YAAY,OACZ,OACA,QAAQ,wBACR,WAAW,MACX,UACA,YACA,oBACE;CAIJ,MAAM,cAAc,oBAAsC,OAAO,IAAI;EACnE,SAAS,CAAC,CAAC;EACX;EACD,CAAC;CAGF,MAAM,kBAAkB,kBACtB,YACA,EACE,OAAO,KACR,EACD,QACA,EAAE,UAAU,CACb;CAED,MAAM,EAAE,WAAW,OAAO,YAAY,aAClC,cACA;CAGJ,MAAM,kBAAkB,aACpB,EAAE,GACF,MAAM,QAAS,gBAAgB,MAAc,KAAK,GAC/C,gBAAgB,KAAa,OAC9B,EAAE;CACR,MAAM,eAAe,QACjB,YAAY,MAAM,GAClB,GAAG,qBAAqB,WAAW,CAAC,MAAM;CAG9C,MAAM,YAAYA,QAAM,cAAc;AAEpC,MAAI,WACF,QAAQ,YAAY,QAAyC,EAAE;AAGjE,MAAI,CAAC,gBAAgB,OAAQ,QAAO,EAAE;EAGtC,MAAM,UAAU,gBAAgB,QAC7B,KAA6B,SAAc;GAC1C,MAAM,QAAQ,KAAK;AACnB,OAAI,UAAU,UAAa,UAAU,KAAM,QAAO;GAGlD,IAAIC;AACJ,OAAI,iBAAiB,QAAQ,CAAC,MAAM,KAAK,MAAM,MAAM,CAAC,CAEpD,OAAM,mBADO,IAAI,KAAK,MAAM,EACG,UAAU;OAEzC,OAAM,OAAO,MAAM;AAGrB,OAAI,QAAQ,IAAI,QAAQ,KAAK;AAC7B,UAAO;KAET,EAAE,CACH;AAGD,SAAO,OAAO,QAAQ,QAAQ,CAC3B,KAAK,CAAC,MAAM,YAAY;GAAE;GAAa;GAAiB,EAAE,CAC1D,MAAM,GAAG,MAAM,EAAE,KAAK,cAAc,EAAE,KAAK,CAAC;IAC9C;EAAC;EAAY,YAAY;EAAM;EAAiB;EAAO;EAAU,CAAC;CAGrE,MAAM,eACJ,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAE,WAAU;aAAU;IAAqB;GACxC;CAIR,MAAM,eACJ,UAAU,WAAW,IACnB,eAEA,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAoB,OAAM;GAAO,QAAO;aACtC,YAAY,WAAW,WAAW,OAAO,SAAS;IAC/B;GAClB;AAGV,QACE,oBAAC;EACC,OAAO;EACI;EACX,iBAAiB,oBAAC,wBAAsB;EACxC,OACE,iBAAiB,QAAQ,QAAQ,QAAQ,IAAI,MAAM,OAAO,MAAM,CAAC,GAAG;EAEtE,iBAAiB,SAAS;YAEzB;GACU;;;;;AAOjB,SAAS,YACP,MACA,MACA,OACA,UACA;CACA,MAAM,cAAc;EAClB;EACA,QAAQ;GAAE,KAAK;GAAG,OAAO;GAAG,MAAM;GAAK,QAAQ;GAAG;EACnD;CAGD,MAAM,YAAY;EAChB,UAAU;EACV,MAAM;EACP;AAED,SAAQ,MAAR;EACE,KAAK,OACH,QACE,qBAAC;GAAU,GAAI;;IACZ,YACC,oBAAC;KACC,iBAAgB;KAChB,QAAO;KACP,SAAS;MACT;IAEJ,oBAAC;KACC,SAAQ;KACR,MAAM;KACN,UAAU;KACV,UAAU;MACV;IACF,oBAAC;KAAM,MAAM;KAAW,UAAU;KAAO,UAAU;MAAS;IAC5D,oBAAC,WAAQ,SAAS,oBAAC,iBAAe,GAAI;IACtC,oBAAC;KACC,MAAK;KACL,SAAQ;KACR,QAAQ;KACR,aAAa;KACb,KAAK;MACL;;IACQ;EAGhB,KAAK,MACH,QACE,qBAAC;GAAS,GAAI;;IACX,YACC,oBAAC;KACC,iBAAgB;KAChB,QAAO;KACP,SAAS;MACT;IAEJ,oBAAC;KACC,SAAQ;KACR,MAAM;KACN,UAAU;KACV,UAAU;MACV;IACF,oBAAC;KAAM,MAAM;KAAW,UAAU;KAAO,UAAU;MAAS;IAC5D,oBAAC;KACC,SAAS,oBAAC,iBAAe;KACzB,QAAQ;MAAE,MAAM;MAAsB,SAAS;MAAK;MACpD;IACF,oBAAC;KAAI,SAAQ;KAAQ,MAAM;KAAO,QAAQ;MAAC;MAAG;MAAG;MAAG;MAAE;MAAI;;IACjD;EAGf,KAAK,MACH,QACE,qBAAC,uBACC,oBAAC;GACO;GACN,SAAQ;GACR,SAAQ;GACR,IAAG;GACH,IAAG;GACH,aAAa;GACb,QAAQ,EAAE,WAAW;GACrB,WAAW;GACX,QAAO;GACP,aAAa;aAEZ,KAAK,KAAK,UACT,oBAAC,QAEC,MAAM,aAAa,KAAK,QAAQ,MAAM,GAAG,aAAa,WADjD,QAAQ,MAAM,OAEnB,CACF;IACE,EACN,oBAAC,WAAQ,SAAS,oBAAC,iBAAe,GAAI,IAC7B;EAGf,KAAK;EACL,QACE,QACE,qBAAC;GAAU,GAAI;;IACZ,YACC,oBAAC;KACC,iBAAgB;KAChB,QAAO;KACP,SAAS;MACT;IAEJ,oBAAC;KACC,SAAQ;KACR,MAAM;KACN,UAAU;KACV,UAAU;MACV;IACF,oBAAC;KAAM,MAAM;KAAW,UAAU;KAAO,UAAU;MAAS;IAC5D,oBAAC,WAAQ,SAAS,oBAAC,iBAAe,GAAI;IACtC,oBAAC;KACC,MAAK;KACL,SAAQ;KACR,QAAQ;KACR,MAAM;KACN,aAAa;MACb;;IACQ;;;;;;AAQpB,SAAS,mBACP,MACA,WACQ;CACR,MAAM,SAAS;EACb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,SAAQ,WAAR;EACE,KAAK,KAGH,QAAO,GADM;GAAC;GAAO;GAAO;GAAO;GAAO;GAAO;GAAO;GAAM,CAC/C,KAAK,QAAQ,EAAE,GAAG,KAAK,SAAS;EAGjD,KAAK,MAEH,QAAO,GAAG,OAAO,KAAK,UAAU,EAAE,GAAG,KAAK,SAAS;EAErD,KAAK,MAGH,QAAO,IADS,KAAK,KAAK,KAAK,SAAS,GAAG,EAAE,CAC1B,GAAG,OAAO,KAAK,UAAU;EAG9C,KAAK,KAEH,QAAO,GAAG,OAAO,KAAK,UAAU,EAAE,GAAG,KAAK,aAAa;EAEzD,QACE,QAAO,GAAG,OAAO,KAAK,UAAU,EAAE,GAAG,KAAK,SAAS"}

package/dist/client/components/widgets/progress-widget.d.mts

@@ -0,0 +1,41 @@
+import { ProgressWidgetConfig } from "../../builder/types/widget-types.mjs";
+import * as react_jsx_runtime38 from "react/jsx-runtime";
+
+//#region src/client/components/widgets/progress-widget.d.ts
+declare namespace progress_widget_d_exports {
+  export { ProgressWidgetProps, ProgressWidget as default };
+}
+/**
+ * Progress widget props
+ */
+interface ProgressWidgetProps {
+  config: ProgressWidgetConfig;
+}
+/**
+ * Progress Widget Component
+ *
+ * Displays a progress bar with current/target values.
+ *
+ * @example
+ * ```tsx
+ * <ProgressWidget
+ *   config={{
+ *     type: "progress",
+ *     id: "monthly-sales",
+ *     title: "Monthly Sales Goal",
+ *     fetchFn: async (client) => ({
+ *       current: 75000,
+ *       target: 100000,
+ *       label: "$75,000 / $100,000"
+ *     }),
+ *     showPercentage: true,
+ *   }}
+ * />
+ * ```
+ */
+declare function ProgressWidget({
+  config
+}: ProgressWidgetProps): react_jsx_runtime38.JSX.Element;
+//#endregion
+export { progress_widget_d_exports };
+//# sourceMappingURL=progress-widget.d.mts.map

package/dist/client/components/widgets/progress-widget.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-widget.d.mts","names":[],"sources":["../../../../src/client/components/widgets/progress-widget.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAmBA;AA0BwB,UA1BP,mBAAA,CA0BqB;EAAG,MAAA,EAzBhC,oBAyBgC;;;;;;;;;;;;;;;;;;;;;;;;iBAAjB,cAAA;;GAA2B,sBAAmB,mBAAA,CAAA,GAAA,CAAA"}