@facter/ds-core 1.5.3 → 1.6.0

package/dist/index.js

@@ -6541,6 +6541,463 @@ var Kanban = {
   Column: KanbanColumn,
   Card: KanbanCard
 };
+var itemCardVariants = classVarianceAuthority.cva(
+  "relative flex flex-col bg-card rounded-lg border shadow-md overflow-hidden transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default: "border-border",
+        selected: "border-primary ring-2 ring-primary/20",
+        muted: "border-border/50 opacity-80"
+      },
+      hover: {
+        true: "hover:shadow-lg hover:border-border",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      hover: true
+    }
+  }
+);
+var ItemCardContext = React49__namespace.createContext(null);
+function useItemCard() {
+  const context = React49__namespace.useContext(ItemCardContext);
+  if (!context) {
+    throw new Error("ItemCard components must be used within ItemCard.Root");
+  }
+  return context;
+}
+var ItemCardRoot = React49__namespace.forwardRef(
+  ({
+    className,
+    variant,
+    hover,
+    selected = false,
+    asButton = false,
+    children,
+    ...props
+  }, ref) => {
+    const contextValue = React49__namespace.useMemo(
+      () => ({ isSelected: selected }),
+      [selected]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(ItemCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: asButton ? "button" : void 0,
+        tabIndex: asButton ? 0 : void 0,
+        className: cn(
+          itemCardVariants({
+            variant: selected ? "selected" : variant,
+            hover
+          }),
+          asButton && "cursor-pointer",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ItemCardRoot.displayName = "ItemCardRoot";
+var itemCardBadgeVariants = classVarianceAuthority.cva(
+  "absolute -top-px right-0 rounded-none rounded-bl-lg px-2.5 py-1 text-xs font-medium border-l border-b transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted text-muted-foreground border-border",
+        primary: "bg-primary/10 text-primary border-primary/20 hover:bg-primary/15",
+        success: "bg-green-500/10 text-green-600 border-green-500/20 hover:bg-green-500/15",
+        warning: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20 hover:bg-yellow-500/15",
+        destructive: "bg-red-500/10 text-red-600 border-red-500/20 hover:bg-red-500/15",
+        info: "bg-blue-500/10 text-blue-600 border-blue-500/20 hover:bg-blue-500/15",
+        muted: "bg-slate-500/10 text-slate-600 border-slate-500/20 hover:bg-slate-500/15"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var ItemCardBadge = React49__namespace.forwardRef(
+  ({ className, variant, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(itemCardBadgeVariants({ variant }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ItemCardBadge.displayName = "ItemCardBadge";
+var ItemCardHeader = React49__namespace.forwardRef(
+  ({ className, align = "between", children, ...props }, ref) => {
+    const alignmentClasses = {
+      left: "justify-start",
+      right: "justify-end",
+      between: "justify-between"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center gap-4 px-6 pt-6 pb-4",
+          alignmentClasses[align],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ItemCardHeader.displayName = "ItemCardHeader";
+var itemCardIconVariants = classVarianceAuthority.cva(
+  "flex items-center justify-center rounded-2xl shadow-lg transition-transform",
+  {
+    variants: {
+      size: {
+        sm: "p-2 w-10 h-10",
+        md: "p-3 w-12 h-12",
+        lg: "p-4 w-14 h-14"
+      },
+      variant: {
+        primary: "bg-primary text-primary-foreground shadow-primary/25",
+        secondary: "bg-secondary text-secondary-foreground shadow-secondary/25",
+        success: "bg-green-500 text-white shadow-green-500/25",
+        warning: "bg-yellow-500 text-white shadow-yellow-500/25",
+        destructive: "bg-red-500 text-white shadow-red-500/25",
+        info: "bg-blue-500 text-white shadow-blue-500/25",
+        muted: "bg-muted text-muted-foreground shadow-muted/25",
+        outline: "bg-background border-2 border-primary text-primary shadow-none"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "primary"
+    }
+  }
+);
+var ItemCardIcon = React49__namespace.forwardRef(
+  ({ className, size, variant, ripple = false, children, ...props }, ref) => {
+    if (ripple) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "absolute rounded-full opacity-20 animate-ping",
+              variant === "primary" && "bg-primary",
+              variant === "success" && "bg-green-500",
+              variant === "warning" && "bg-yellow-500",
+              variant === "destructive" && "bg-red-500",
+              variant === "info" && "bg-blue-500",
+              size === "sm" && "w-14 h-14",
+              size === "md" && "w-16 h-16",
+              size === "lg" && "w-20 h-20"
+            ),
+            style: { animationDuration: "2s" }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            className: cn(itemCardIconVariants({ size, variant }), "relative z-10", className),
+            ...props,
+            children
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(itemCardIconVariants({ size, variant }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ItemCardIcon.displayName = "ItemCardIcon";
+var ItemCardTitleGroup = React49__namespace.forwardRef(
+  ({ className, align = "right", children, ...props }, ref) => {
+    const alignmentClasses = {
+      left: "text-left",
+      right: "text-right",
+      center: "text-center"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex-1 min-w-0", alignmentClasses[align], className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ItemCardTitleGroup.displayName = "ItemCardTitleGroup";
+var ItemCardTitle = React49__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "h3",
+      {
+        ref,
+        className: cn("text-lg font-semibold text-foreground truncate", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ItemCardTitle.displayName = "ItemCardTitle";
+var ItemCardSubtitle = React49__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        ref,
+        className: cn("text-sm text-muted-foreground", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ItemCardSubtitle.displayName = "ItemCardSubtitle";
+var ItemCardContent = React49__namespace.forwardRef(
+  ({ className, muted = true, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "px-6 py-3 space-y-2",
+          muted && "bg-muted/40",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ItemCardContent.displayName = "ItemCardContent";
+var ItemCardContentItem = React49__namespace.forwardRef(
+  ({ className, label, value, secondary, children, ...props }, ref) => {
+    if (children) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          className: cn(
+            "flex justify-between items-center text-sm text-muted-foreground",
+            className
+          ),
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex justify-between items-center text-sm text-muted-foreground gap-2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", children: label }),
+          value && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium shrink-0", children: value }),
+          secondary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium shrink-0", children: secondary })
+        ]
+      }
+    );
+  }
+);
+ItemCardContentItem.displayName = "ItemCardContentItem";
+var ItemCardEmpty = React49__namespace.forwardRef(
+  ({ className, icon, message = "Nenhum item", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col items-center justify-center py-6 text-center text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 opacity-50", children: icon }),
+          children || /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: message })
+        ]
+      }
+    );
+  }
+);
+ItemCardEmpty.displayName = "ItemCardEmpty";
+var ItemCardFooter = React49__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "px-6 py-3 flex justify-between items-center gap-4",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ItemCardFooter.displayName = "ItemCardFooter";
+var ItemCardFooterItem = React49__namespace.forwardRef(
+  ({ className, label, value, align = "left", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col",
+          align === "right" && "items-end",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm text-foreground", children: value })
+        ]
+      }
+    );
+  }
+);
+ItemCardFooterItem.displayName = "ItemCardFooterItem";
+var ItemCardFooterDivider = React49__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex-1", className),
+        ...props
+      }
+    );
+  }
+);
+ItemCardFooterDivider.displayName = "ItemCardFooterDivider";
+var ItemCardActions = React49__namespace.forwardRef(
+  ({ className, bordered = true, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "mt-auto",
+          bordered && "border-t border-border",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ItemCardActions.displayName = "ItemCardActions";
+var ItemCardActionButton = React49__namespace.forwardRef(
+  ({
+    className,
+    showArrow = true,
+    loading = false,
+    variant = "default",
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const variantClasses = {
+      default: "bg-muted/50 text-foreground hover:bg-muted active:bg-muted/80",
+      primary: "bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      destructive: "bg-red-500/10 text-red-600 hover:bg-red-500/20 active:bg-red-500/30"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled: disabled || loading,
+        className: cn(
+          "w-full px-6 py-3 flex items-center justify-between",
+          "text-sm font-medium transition-colors",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          variantClasses[variant],
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+          showArrow && !loading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 opacity-60" }),
+          loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" })
+        ]
+      }
+    );
+  }
+);
+ItemCardActionButton.displayName = "ItemCardActionButton";
+var ItemCardActionsRow = React49__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center gap-2 p-3", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ItemCardActionsRow.displayName = "ItemCardActionsRow";
+
+// src/components/ItemCard/ItemCard.tsx
+var ItemCard = Object.assign(ItemCardRoot, {
+  // Badge
+  Badge: ItemCardBadge,
+  // Header components
+  Header: ItemCardHeader,
+  Icon: ItemCardIcon,
+  TitleGroup: ItemCardTitleGroup,
+  Title: ItemCardTitle,
+  Subtitle: ItemCardSubtitle,
+  // Content components
+  Content: ItemCardContent,
+  ContentItem: ItemCardContentItem,
+  Empty: ItemCardEmpty,
+  // Footer components
+  Footer: ItemCardFooter,
+  FooterItem: ItemCardFooterItem,
+  FooterDivider: ItemCardFooterDivider,
+  // Actions components
+  Actions: ItemCardActions,
+  ActionButton: ItemCardActionButton,
+  ActionsRow: ItemCardActionsRow
+});
 var WizardContext = React49.createContext(void 0);
 function useWizardContext() {
   const context = React49.useContext(WizardContext);
@@ -7415,6 +7872,23 @@ exports.FormSwitch = FormSwitch;
 exports.FormTextarea = FormTextarea;
 exports.GlobalLoaderController = GlobalLoaderController;
 exports.Input = Input;
+exports.ItemCard = ItemCard;
+exports.ItemCardActionButton = ItemCardActionButton;
+exports.ItemCardActions = ItemCardActions;
+exports.ItemCardActionsRow = ItemCardActionsRow;
+exports.ItemCardBadge = ItemCardBadge;
+exports.ItemCardContent = ItemCardContent;
+exports.ItemCardContentItem = ItemCardContentItem;
+exports.ItemCardEmpty = ItemCardEmpty;
+exports.ItemCardFooter = ItemCardFooter;
+exports.ItemCardFooterDivider = ItemCardFooterDivider;
+exports.ItemCardFooterItem = ItemCardFooterItem;
+exports.ItemCardHeader = ItemCardHeader;
+exports.ItemCardIcon = ItemCardIcon;
+exports.ItemCardRoot = ItemCardRoot;
+exports.ItemCardSubtitle = ItemCardSubtitle;
+exports.ItemCardTitle = ItemCardTitle;
+exports.ItemCardTitleGroup = ItemCardTitleGroup;
 exports.Kanban = Kanban;
 exports.Loader = Loader;
 exports.LoaderProvider = LoaderProvider;
@@ -7493,6 +7967,9 @@ exports.WizardStepConnector = WizardStepConnector;
 exports.WizardStepIndicator = WizardStepIndicator;
 exports.WizardSteps = WizardSteps;
 exports.cn = cn;
+exports.itemCardBadgeVariants = itemCardBadgeVariants;
+exports.itemCardIconVariants = itemCardIconVariants;
+exports.itemCardVariants = itemCardVariants;
 exports.loader = loader;
 exports.toast = toast;
 exports.useDashboardLayout = useDashboardLayout;
@@ -7510,6 +7987,7 @@ exports.useDataTableState = useDataTableState;
 exports.useDebounce = useDebounce;
 exports.useDebouncedCallback = useDebouncedCallback;
 exports.useFormFieldContext = useFormFieldContext;
+exports.useItemCard = useItemCard;
 exports.useKanban = useKanban;
 exports.useKanbanOptional = useKanbanOptional;
 exports.useLoader = useLoader;