@facter/ds-core 1.6.1 → 1.7.0

package/dist/index.mjs

@@ -25,6 +25,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { Slot } from '@radix-ui/react-slot';
+import { ResponsiveContainer, AreaChart, Tooltip as Tooltip$1, Area } from 'recharts';
 
 // src/components/Button/Button.tsx
 function cn(...inputs) {
@@ -6657,8 +6658,14 @@ var itemCardIconVariants = cva(
 );
 var ItemCardIcon = React49.forwardRef(
   ({ className, size, variant, ripple = false, children, ...props }, ref) => {
+    const wrapperSizeClasses = {
+      sm: "w-10 h-10",
+      md: "w-12 h-12",
+      lg: "w-14 h-14"
+    };
+    const actualSize = size || "md";
     if (ripple) {
-      return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      return /* @__PURE__ */ jsxs("div", { className: cn("relative", wrapperSizeClasses[actualSize]), children: [
         /* @__PURE__ */ jsx(
           RippleEffect,
           {
@@ -7670,6 +7677,277 @@ function Logo({
     }
   );
 }
+var StatsCardContext = React49.createContext(null);
+function useStatsCard() {
+  const context = React49.useContext(StatsCardContext);
+  if (!context) {
+    throw new Error("StatsCard components must be used within StatsCard.Root");
+  }
+  return context;
+}
+var colorConfigs = {
+  green: {
+    lineColor: "#22c55e",
+    gradientStart: "rgba(34, 197, 94, 0.4)",
+    gradientEnd: "rgba(34, 197, 94, 0.02)",
+    bgGradient: "from-white via-emerald-50/30 to-emerald-100/50",
+    iconBg: "bg-emerald-100/80 text-emerald-600",
+    textColor: "text-emerald-500"
+  },
+  red: {
+    lineColor: "#f87171",
+    gradientStart: "rgba(248, 113, 113, 0.4)",
+    gradientEnd: "rgba(248, 113, 113, 0.02)",
+    bgGradient: "from-white via-rose-50/30 to-rose-100/50",
+    iconBg: "bg-rose-100/80 text-rose-500",
+    textColor: "text-rose-500"
+  },
+  yellow: {
+    lineColor: "#f59e0b",
+    gradientStart: "rgba(245, 158, 11, 0.4)",
+    gradientEnd: "rgba(245, 158, 11, 0.02)",
+    bgGradient: "from-white via-amber-50/30 to-amber-100/50",
+    iconBg: "bg-amber-100/80 text-amber-600",
+    textColor: "text-amber-500"
+  },
+  blue: {
+    lineColor: "#3b82f6",
+    gradientStart: "rgba(59, 130, 246, 0.4)",
+    gradientEnd: "rgba(59, 130, 246, 0.02)",
+    bgGradient: "from-white via-blue-50/30 to-blue-100/50",
+    iconBg: "bg-blue-100/80 text-blue-600",
+    textColor: "text-blue-500"
+  },
+  primary: {
+    lineColor: "#3b82f6",
+    gradientStart: "rgba(59, 130, 246, 0.4)",
+    gradientEnd: "rgba(59, 130, 246, 0.02)",
+    bgGradient: "from-white via-primary/5 to-primary/10",
+    iconBg: "bg-primary/10 text-primary",
+    textColor: "text-primary"
+  }
+};
+var rootVariants2 = cva(
+  "relative overflow-hidden bg-card shadow-sm border border-border h-full",
+  {
+    variants: {
+      variant: {
+        default: "rounded-2xl",
+        compact: "rounded-xl",
+        mini: "rounded-xl"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function StatsCardRoot({
+  colorScheme = "blue",
+  variant = "default",
+  className,
+  children,
+  ...props
+}) {
+  const config = colorConfigs[colorScheme];
+  return /* @__PURE__ */ jsx(StatsCardContext.Provider, { value: { colorScheme, variant, config }, children: /* @__PURE__ */ jsxs("div", { className: cn(rootVariants2({ variant }), className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 bg-gradient-to-br pointer-events-none", config.bgGradient) }),
+    /* @__PURE__ */ jsx("div", { className: cn(
+      "relative flex h-full",
+      variant === "compact" ? "flex-row items-center p-3 gap-3" : "flex-col",
+      variant === "mini" && "p-3",
+      variant === "default" && ""
+    ), children })
+  ] }) });
+}
+function StatsCardHeader({ className, children, ...props }) {
+  const { variant } = useStatsCard();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between",
+        variant === "default" && "p-4 pb-2",
+        variant === "mini" && "mb-2",
+        variant === "compact" && "flex-1 min-w-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function StatsCardIcon({ icon: Icon2, className, ...props }) {
+  const { config, variant } = useStatsCard();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-lg",
+        config.iconBg,
+        variant === "mini" ? "p-1.5" : "p-2",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon2, { className: cn(variant === "mini" ? "w-3.5 h-3.5" : "w-4 h-4") })
+    }
+  );
+}
+function StatsCardTitle({ className, children, ...props }) {
+  const { variant } = useStatsCard();
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn(
+        "font-medium text-gray-700",
+        variant === "mini" ? "text-xs leading-tight" : "text-sm",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function StatsCardSubtitle({ className, children, ...props }) {
+  const { variant } = useStatsCard();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(
+        "text-gray-400",
+        variant === "mini" ? "text-[9px] leading-tight" : "text-[10px]",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function StatsCardValue({ className, children, ...props }) {
+  const { variant } = useStatsCard();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(
+        "font-light tracking-tight text-gray-900",
+        variant === "mini" ? "text-3xl" : variant === "compact" ? "text-2xl" : "text-4xl",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function StatsCardChange({ type = "positive", className, children, ...props }) {
+  const { config, variant } = useStatsCard();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-0.5", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: cn(variant === "mini" ? "w-2 h-2" : "w-2.5 h-2.5", config.textColor),
+        viewBox: "0 0 12 12",
+        fill: "currentColor",
+        children: /* @__PURE__ */ jsx("path", { d: type === "negative" ? "M6 10L10 5H2L6 10Z" : "M6 2L10 7H2L6 2Z" })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: cn(
+      "font-medium",
+      config.textColor,
+      variant === "mini" ? "text-[9px]" : "text-[10px]"
+    ), children })
+  ] });
+}
+function StatsCardChart({ data, height, className, ...props }) {
+  const { config, variant } = useStatsCard();
+  const gradientId = React49.useId();
+  const chartHeight = height ?? (variant === "mini" ? 40 : variant === "compact" ? 40 : 70);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        variant === "mini" && "mt-auto h-10",
+        variant === "compact" && "w-16 h-10 shrink-0",
+        variant === "default" && "flex-1 relative mt-auto",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: chartHeight, children: /* @__PURE__ */ jsxs(AreaChart, { data, margin: { top: 2, right: 0, left: 0, bottom: 0 }, children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: config.gradientStart }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: config.gradientEnd })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          Tooltip$1,
+          {
+            content: ({ active, payload }) => {
+              if (active && payload && payload.length) {
+                const point = payload[0].payload;
+                return /* @__PURE__ */ jsxs("div", { className: "bg-white/95 backdrop-blur-sm rounded-lg px-2 py-1.5 shadow-lg border border-gray-100", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium text-gray-700", children: point.value }),
+                  /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400", children: point.date })
+                ] });
+              }
+              return null;
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: "value",
+            stroke: config.lineColor,
+            strokeWidth: 1.5,
+            fill: `url(#${gradientId})`,
+            dot: false,
+            activeDot: {
+              r: variant === "mini" ? 2 : 3,
+              fill: config.lineColor,
+              stroke: "white",
+              strokeWidth: variant === "mini" ? 1 : 2
+            }
+          }
+        )
+      ] }) })
+    }
+  );
+}
+function StatsCardContent({ className, children, ...props }) {
+  const { variant } = useStatsCard();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        variant === "mini" && "mb-2",
+        variant === "default" && "mt-2",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function StatsCardToday({ label, type = "positive", className, children, ...props }) {
+  const { config } = useStatsCard();
+  return /* @__PURE__ */ jsxs("p", { className: cn("text-xs mt-0.5", className), ...props, children: [
+    /* @__PURE__ */ jsxs("span", { className: config.textColor, children: [
+      type === "positive" ? "+" : "",
+      children
+    ] }),
+    label && /* @__PURE__ */ jsx("span", { className: "text-gray-500 ml-1", children: label })
+  ] });
+}
+var StatsCard = Object.assign(StatsCardRoot, {
+  Header: StatsCardHeader,
+  Icon: StatsCardIcon,
+  Title: StatsCardTitle,
+  Subtitle: StatsCardSubtitle,
+  Value: StatsCardValue,
+  Change: StatsCardChange,
+  Chart: StatsCardChart,
+  Content: StatsCardContent,
+  Today: StatsCardToday
+});
 var initialState = {
   theme: "system",
   setTheme: () => null
@@ -7754,6 +8032,6 @@ var THEME_INFO = {
   }
 };
 
-export { AuthLayout, Avatar, AvatarFallback, AvatarImage, Badge, BigNumberCard, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DENSITY_CONFIG, DashboardLayout, DataTable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FACTER_THEMES, Form, FormCheckbox, FormDescription, FormError, FormFieldProvider, FormFieldWrapper, FormInput, FormLabel, FormRadioGroup, FormSelect, FormSwitch, FormTextarea, GlobalLoaderController, Input, ItemCard, ItemCardActionButton, ItemCardActions, ItemCardActionsRow, ItemCardBadge, ItemCardContent, ItemCardContentItem, ItemCardEmpty, ItemCardFooter, ItemCardFooterDivider, ItemCardFooterItem, ItemCardHeader, ItemCardIcon, ItemCardRoot, ItemCardSubtitle, ItemCardTitle, ItemCardTitleGroup, Kanban, Loader, LoaderProvider, Logo, MobileNav, MobileNavItem, Navbar, NavbarCompanyProfile, NavbarNotification, NavbarUserMenu, Popover, PopoverContent, PopoverTrigger, RippleBackground, RippleEffect, RippleWrapper, ScrollArea, ScrollBar, SectionHeader, SectionHeaderActions, SectionHeaderBadge, SectionHeaderContent, SectionHeaderIcon, SectionHeaderRoot, SectionHeaderSubtitle, SectionHeaderTitle, Select, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectionLayout, Separator3 as Separator, Sidebar, SimpleTooltip, Skeleton, Sparkline, Switch, THEME_INFO, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, Toaster, Tooltip, TooltipAction, TooltipActions, TooltipArrow, TooltipContent, TooltipDescription, TooltipHeader, TooltipIcon, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTitle, TooltipTrigger, Wizard, WizardContent, WizardNavigation, WizardPanel, WizardProgress, WizardProvider, WizardStepConnector, WizardStepIndicator, WizardSteps, cn, itemCardBadgeVariants, itemCardIconVariants, itemCardVariants, loader, toast, useDashboardLayout, useDataTable, useDataTableColumnVisibility, useDataTableDensity, useDataTableEmpty, useDataTableInstance, useDataTableLoading, useDataTableMeta, useDataTablePagination, useDataTableSelection, useDataTableSorting, useDataTableState, useDebounce, useDebouncedCallback, useFormFieldContext, useItemCard, useKanban, useKanbanOptional, useLoader, useMediaQuery2 as useMediaQuery, useSidebar, useSidebarOptional, useTheme, useWizardContext, useWizardContextOptional };
+export { AuthLayout, Avatar, AvatarFallback, AvatarImage, Badge, BigNumberCard, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DENSITY_CONFIG, DashboardLayout, DataTable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FACTER_THEMES, Form, FormCheckbox, FormDescription, FormError, FormFieldProvider, FormFieldWrapper, FormInput, FormLabel, FormRadioGroup, FormSelect, FormSwitch, FormTextarea, GlobalLoaderController, Input, ItemCard, ItemCardActionButton, ItemCardActions, ItemCardActionsRow, ItemCardBadge, ItemCardContent, ItemCardContentItem, ItemCardEmpty, ItemCardFooter, ItemCardFooterDivider, ItemCardFooterItem, ItemCardHeader, ItemCardIcon, ItemCardRoot, ItemCardSubtitle, ItemCardTitle, ItemCardTitleGroup, Kanban, Loader, LoaderProvider, Logo, MobileNav, MobileNavItem, Navbar, NavbarCompanyProfile, NavbarNotification, NavbarUserMenu, Popover, PopoverContent, PopoverTrigger, RippleBackground, RippleEffect, RippleWrapper, ScrollArea, ScrollBar, SectionHeader, SectionHeaderActions, SectionHeaderBadge, SectionHeaderContent, SectionHeaderIcon, SectionHeaderRoot, SectionHeaderSubtitle, SectionHeaderTitle, Select, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectionLayout, Separator3 as Separator, Sidebar, SimpleTooltip, Skeleton, Sparkline, StatsCard, Switch, THEME_INFO, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, Toaster, Tooltip, TooltipAction, TooltipActions, TooltipArrow, TooltipContent, TooltipDescription, TooltipHeader, TooltipIcon, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTitle, TooltipTrigger, Wizard, WizardContent, WizardNavigation, WizardPanel, WizardProgress, WizardProvider, WizardStepConnector, WizardStepIndicator, WizardSteps, cn, itemCardBadgeVariants, itemCardIconVariants, itemCardVariants, loader, toast, useDashboardLayout, useDataTable, useDataTableColumnVisibility, useDataTableDensity, useDataTableEmpty, useDataTableInstance, useDataTableLoading, useDataTableMeta, useDataTablePagination, useDataTableSelection, useDataTableSorting, useDataTableState, useDebounce, useDebouncedCallback, useFormFieldContext, useItemCard, useKanban, useKanbanOptional, useLoader, useMediaQuery2 as useMediaQuery, useSidebar, useSidebarOptional, useTheme, useWizardContext, useWizardContextOptional };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map