@gamecp/ui 0.1.32 → 0.1.33

package/dist/index.d.mts

@@ -202,8 +202,37 @@ interface InfoBoxProps {
     children: React__default.ReactNode;
     variant?: 'default' | 'warning' | 'info' | 'success' | 'danger';
     className?: string;
+    /** Compact mode for inline usage */
+    compact?: boolean;
 }
-declare function InfoBox({ title, children, variant, className }: InfoBoxProps): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Use Notice component instead. InfoBox is now a wrapper around Notice.
+ */
+declare function InfoBox({ title, children, variant, className, compact, }: InfoBoxProps): react_jsx_runtime.JSX.Element;
+
+interface NoticeProps {
+    /** Main content of the notice */
+    children: React__default.ReactNode;
+    /** Variant type of the notice */
+    variant?: 'info' | 'warning' | 'success' | 'danger' | 'default';
+    /** Icon to display. If not provided, uses default for variant */
+    icon?: React__default.ReactNode;
+    /** Optional title */
+    title?: string | React__default.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether to show the icon */
+    showIcon?: boolean;
+    /** Custom content to the right (e.g., a toggle button) */
+    action?: React__default.ReactNode;
+    /** Compact mode for inline usage (less padding, smaller text) */
+    compact?: boolean;
+}
+declare function Notice({ children, variant, icon, title, className, showIcon, action, compact, }: NoticeProps): react_jsx_runtime.JSX.Element;
+declare function InfoNotice(props: Omit<NoticeProps, 'variant'>): react_jsx_runtime.JSX.Element;
+declare function WarningNotice(props: Omit<NoticeProps, 'variant'>): react_jsx_runtime.JSX.Element;
+declare function SuccessNotice(props: Omit<NoticeProps, 'variant'>): react_jsx_runtime.JSX.Element;
+declare function DangerNotice(props: Omit<NoticeProps, 'variant'>): react_jsx_runtime.JSX.Element;
 
 interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     href: string;
@@ -652,4 +681,4 @@ declare function IconButtonWithCount({ icon, label, count, onClick, onClear, sho
 
 declare const VERSION = "0.1.3";
 
-export { ActionButton, Badge, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, ConfirmDialog, type ConfirmDialogOptions, Container, DataTable, DataTableActions, DataTableBody, DataTableCell, DataTableEmptyState, DataTableHeader, DataTableHeaderCell, DataTableLoadingState, DataTableRow, EmptyState, FilterSelect, FilterToggleButton, FormInput, FormSection, Grid, IconButtonWithCount, InfoBox, Link, type LinkProps, LoadingSpinner, MobileSearchLayout, Modal, PageHeader, RefreshButton, SearchCard, SearchCardContent, SearchCardHeader, SearchInput, SharedTooltip, SidebarNavItem, type SidebarNavItemProps, Skeleton, SkeletonCard, SkeletonEnvironmentsList, SkeletonForm, SkeletonGameCard, SkeletonGameServerCard, SkeletonGameServerCards, SkeletonGameServerTable, SkeletonGamesTable, SkeletonItem, SkeletonList, SkeletonNodeCard, SkeletonNodeCards, SkeletonNodeTable, SkeletonRecentActivity, SkeletonSearchCard, SkeletonStats, SkeletonTable, SkeletonTenantCard, SkeletonUserCard, SmartDropdown, SmartSelect, Spinner, StatusBadge, StickyActionsColumn, Switch, type SwitchVariant, Typography, VERSION, ViewToggle, useConfirmDialog };
+export { ActionButton, Badge, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, ConfirmDialog, type ConfirmDialogOptions, Container, DangerNotice, DataTable, DataTableActions, DataTableBody, DataTableCell, DataTableEmptyState, DataTableHeader, DataTableHeaderCell, DataTableLoadingState, DataTableRow, EmptyState, FilterSelect, FilterToggleButton, FormInput, FormSection, Grid, IconButtonWithCount, InfoBox, InfoNotice, Link, type LinkProps, LoadingSpinner, MobileSearchLayout, Modal, Notice, PageHeader, RefreshButton, SearchCard, SearchCardContent, SearchCardHeader, SearchInput, SharedTooltip, SidebarNavItem, type SidebarNavItemProps, Skeleton, SkeletonCard, SkeletonEnvironmentsList, SkeletonForm, SkeletonGameCard, SkeletonGameServerCard, SkeletonGameServerCards, SkeletonGameServerTable, SkeletonGamesTable, SkeletonItem, SkeletonList, SkeletonNodeCard, SkeletonNodeCards, SkeletonNodeTable, SkeletonRecentActivity, SkeletonSearchCard, SkeletonStats, SkeletonTable, SkeletonTenantCard, SkeletonUserCard, SmartDropdown, SmartSelect, Spinner, StatusBadge, StickyActionsColumn, SuccessNotice, Switch, type SwitchVariant, Typography, VERSION, ViewToggle, WarningNotice, useConfirmDialog };

package/dist/index.d.ts

@@ -202,8 +202,37 @@ interface InfoBoxProps {
     children: React__default.ReactNode;
     variant?: 'default' | 'warning' | 'info' | 'success' | 'danger';
     className?: string;
+    /** Compact mode for inline usage */
+    compact?: boolean;
 }
-declare function InfoBox({ title, children, variant, className }: InfoBoxProps): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Use Notice component instead. InfoBox is now a wrapper around Notice.
+ */
+declare function InfoBox({ title, children, variant, className, compact, }: InfoBoxProps): react_jsx_runtime.JSX.Element;
+
+interface NoticeProps {
+    /** Main content of the notice */
+    children: React__default.ReactNode;
+    /** Variant type of the notice */
+    variant?: 'info' | 'warning' | 'success' | 'danger' | 'default';
+    /** Icon to display. If not provided, uses default for variant */
+    icon?: React__default.ReactNode;
+    /** Optional title */
+    title?: string | React__default.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether to show the icon */
+    showIcon?: boolean;
+    /** Custom content to the right (e.g., a toggle button) */
+    action?: React__default.ReactNode;
+    /** Compact mode for inline usage (less padding, smaller text) */
+    compact?: boolean;
+}
+declare function Notice({ children, variant, icon, title, className, showIcon, action, compact, }: NoticeProps): react_jsx_runtime.JSX.Element;
+declare function InfoNotice(props: Omit<NoticeProps, 'variant'>): react_jsx_runtime.JSX.Element;
+declare function WarningNotice(props: Omit<NoticeProps, 'variant'>): react_jsx_runtime.JSX.Element;
+declare function SuccessNotice(props: Omit<NoticeProps, 'variant'>): react_jsx_runtime.JSX.Element;
+declare function DangerNotice(props: Omit<NoticeProps, 'variant'>): react_jsx_runtime.JSX.Element;
 
 interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     href: string;
@@ -652,4 +681,4 @@ declare function IconButtonWithCount({ icon, label, count, onClick, onClear, sho
 
 declare const VERSION = "0.1.3";
 
-export { ActionButton, Badge, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, ConfirmDialog, type ConfirmDialogOptions, Container, DataTable, DataTableActions, DataTableBody, DataTableCell, DataTableEmptyState, DataTableHeader, DataTableHeaderCell, DataTableLoadingState, DataTableRow, EmptyState, FilterSelect, FilterToggleButton, FormInput, FormSection, Grid, IconButtonWithCount, InfoBox, Link, type LinkProps, LoadingSpinner, MobileSearchLayout, Modal, PageHeader, RefreshButton, SearchCard, SearchCardContent, SearchCardHeader, SearchInput, SharedTooltip, SidebarNavItem, type SidebarNavItemProps, Skeleton, SkeletonCard, SkeletonEnvironmentsList, SkeletonForm, SkeletonGameCard, SkeletonGameServerCard, SkeletonGameServerCards, SkeletonGameServerTable, SkeletonGamesTable, SkeletonItem, SkeletonList, SkeletonNodeCard, SkeletonNodeCards, SkeletonNodeTable, SkeletonRecentActivity, SkeletonSearchCard, SkeletonStats, SkeletonTable, SkeletonTenantCard, SkeletonUserCard, SmartDropdown, SmartSelect, Spinner, StatusBadge, StickyActionsColumn, Switch, type SwitchVariant, Typography, VERSION, ViewToggle, useConfirmDialog };
+export { ActionButton, Badge, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, ConfirmDialog, type ConfirmDialogOptions, Container, DangerNotice, DataTable, DataTableActions, DataTableBody, DataTableCell, DataTableEmptyState, DataTableHeader, DataTableHeaderCell, DataTableLoadingState, DataTableRow, EmptyState, FilterSelect, FilterToggleButton, FormInput, FormSection, Grid, IconButtonWithCount, InfoBox, InfoNotice, Link, type LinkProps, LoadingSpinner, MobileSearchLayout, Modal, Notice, PageHeader, RefreshButton, SearchCard, SearchCardContent, SearchCardHeader, SearchInput, SharedTooltip, SidebarNavItem, type SidebarNavItemProps, Skeleton, SkeletonCard, SkeletonEnvironmentsList, SkeletonForm, SkeletonGameCard, SkeletonGameServerCard, SkeletonGameServerCards, SkeletonGameServerTable, SkeletonGamesTable, SkeletonItem, SkeletonList, SkeletonNodeCard, SkeletonNodeCards, SkeletonNodeTable, SkeletonRecentActivity, SkeletonSearchCard, SkeletonStats, SkeletonTable, SkeletonTenantCard, SkeletonUserCard, SmartDropdown, SmartSelect, Spinner, StatusBadge, StickyActionsColumn, SuccessNotice, Switch, type SwitchVariant, Typography, VERSION, ViewToggle, WarningNotice, useConfirmDialog };

package/dist/index.js

@@ -712,7 +712,7 @@ var paddingClasses2 = {
   none: "",
   sm: "p-4",
   md: "p-4 lg:p-6",
-  lg: "p-4 lg:p-8"
+  lg: "px-4 sm:px-6 lg:px-6 py-6"
 };
 function Container({
   children,
@@ -2564,30 +2564,123 @@ function Grid({
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid ${colClasses[cols]} ${gapClasses[gap]} ${className}`, children });
 }
-var variantConfig = {
-  default: { borderAccent: "gray", titleColor: "text-foreground" },
-  warning: { borderAccent: "amber", titleColor: "text-amber" },
-  info: { borderAccent: "info", titleColor: "text-info" },
-  success: { borderAccent: "success", titleColor: "text-success" },
-  danger: { borderAccent: "danger", titleColor: "text-danger" }
+var variantStyles = {
+  info: {
+    bg: "bg-info/5",
+    accent: "bg-info",
+    iconBg: "bg-info/10",
+    iconColor: "text-info",
+    titleColor: "text-info"
+  },
+  warning: {
+    bg: "bg-amber/5",
+    accent: "bg-amber",
+    iconBg: "bg-amber/10",
+    iconColor: "text-amber",
+    titleColor: "text-amber"
+  },
+  success: {
+    bg: "bg-success/5",
+    accent: "bg-success",
+    iconBg: "bg-success/10",
+    iconColor: "text-success",
+    titleColor: "text-success"
+  },
+  danger: {
+    bg: "bg-danger/5",
+    accent: "bg-danger",
+    iconBg: "bg-danger/10",
+    iconColor: "text-danger",
+    titleColor: "text-danger"
+  },
+  default: {
+    bg: "bg-muted/50",
+    accent: "bg-border",
+    iconBg: "bg-muted",
+    iconColor: "text-muted-foreground",
+    titleColor: "text-foreground"
+  }
+};
+var defaultIcons = {
+  info: ri.RiInformationLine,
+  warning: ri.RiAlertLine,
+  success: ri.RiCheckLine,
+  danger: ri.RiErrorWarningLine,
+  default: ri.RiInformationLine
 };
+function Notice({
+  children,
+  variant = "info",
+  icon,
+  title,
+  className = "",
+  showIcon = true,
+  action,
+  compact = false
+}) {
+  const styles = variantStyles[variant] || variantStyles.default;
+  const IconComponent = defaultIcons[variant] || defaultIcons.default;
+  const padding = compact ? "px-3 py-2.5" : "px-4 py-4";
+  const iconSize = compact ? "w-4 h-4" : "w-5 h-5";
+  const iconPadding = compact ? "p-1.5" : "p-2";
+  const textSize = compact ? "text-xs" : "text-sm";
+  const titleSize = compact ? "text-sm" : "text-base";
+  const gap = compact ? "gap-2.5" : "gap-3";
+  const displayIcon = showIcon ? icon || /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: iconSize }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `relative flex items-start ${gap} ${padding} rounded-lg overflow-hidden ${styles.bg} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `absolute left-0 top-0 bottom-0 w-1 ${styles.accent}`
+          }
+        ),
+        displayIcon && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `flex-shrink-0 ${iconPadding} rounded-lg ${styles.iconBg} ${styles.iconColor}`,
+            children: displayIcon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `font-medium ${titleSize} ${styles.titleColor} mb-1`, children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${textSize} text-muted-foreground leading-relaxed space-y-1 [&>ul]:list-disc [&>ul]:list-outside [&>ul]:pl-3 [&>ol]:list-decimal [&>ol]:list-outside [&>ol]:pl-4`, children })
+        ] }),
+        action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: action })
+      ]
+    }
+  );
+}
+function InfoNotice(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Notice, { variant: "info", ...props });
+}
+function WarningNotice(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Notice, { variant: "warning", ...props });
+}
+function SuccessNotice(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Notice, { variant: "success", ...props });
+}
+function DangerNotice(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Notice, { variant: "danger", ...props });
+}
 function InfoBox({
   title,
   children,
   variant = "default",
-  className = ""
+  className = "",
+  compact = false
 }) {
-  const config = variantConfig[variant] || variantConfig.default;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Card,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Notice,
     {
-      borderAccent: config.borderAccent,
-      padding: "md",
+      variant,
+      title,
       className,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: `font-medium mb-2 ${config.titleColor}`, children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground space-y-1 [&>ul]:list-disc [&>ul]:list-outside [&>ul]:pl-3 [&>ol]:list-decimal [&>ol]:list-outside [&>ol]:pl-4", children })
-      ]
+      compact,
+      children
     }
   );
 }
@@ -3344,7 +3437,7 @@ function ActionButton({
         return null;
     }
   };
-  const variantConfig2 = getVariantConfig();
+  const variantConfig = getVariantConfig();
   const variantClasses5 = {
     primary: "btn-primary",
     secondary: "btn-secondary",
@@ -3354,7 +3447,7 @@ function ActionButton({
     info: "bg-muted text-muted-foreground hover:bg-primary hover:text-primary-foreground border border-ring transition-all duration-300 ease-in-out",
     metrics: "bg-purple/10 text-purple hover:bg-purple/20 hover:text-purple-700 border border-purple-200 transition-all duration-300 ease-in-out"
   };
-  let variantClass = variantConfig2 ? variantConfig2.className : variant ? variantClasses5[variant] : "";
+  let variantClass = variantConfig ? variantConfig.className : variant ? variantClasses5[variant] : "";
   if (terminalMode && variantClass) {
     const hoverMatch = variantClass.match(/hover:text-(\w+)-(\d+)/);
     const hoverColor = hoverMatch ? `hover:text-${hoverMatch[1]}-${hoverMatch[2]}` : "hover:text-muted-foreground";
@@ -3381,13 +3474,13 @@ function ActionButton({
           }
         )
       }
-    ) : (variantConfig2?.icon || IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(
+    ) : (variantConfig?.icon || IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: `${iconSizes[size]} flex items-center justify-center flex-shrink-0`,
         "aria-hidden": "true",
-        children: variantConfig2?.icon ? /* @__PURE__ */ jsxRuntime.jsx(
-          variantConfig2.icon,
+        children: variantConfig?.icon ? /* @__PURE__ */ jsxRuntime.jsx(
+          variantConfig.icon,
           {
             className: "w-full h-full",
             "aria-hidden": "true"
@@ -3395,11 +3488,11 @@ function ActionButton({
         ) : IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "w-full h-full", "aria-hidden": "true" }) : null
       }
     ),
-    !iconOnly && (restProps.children ? restProps.children : (variantConfig2?.label || label) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center", children: variantConfig2?.label || label }))
+    !iconOnly && (restProps.children ? restProps.children : (variantConfig?.label || label) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center", children: variantConfig?.label || label }))
   ] });
-  const accessibleLabel = title || (iconOnly ? variantConfig2?.label || label : void 0);
-  const buttonAriaLabel = iconOnly && !accessibleLabel ? variantConfig2?.label || label || "Action button" : accessibleLabel;
-  const tooltipContent = title || (iconOnly ? variantConfig2?.label || label : void 0);
+  const accessibleLabel = title || (iconOnly ? variantConfig?.label || label : void 0);
+  const buttonAriaLabel = iconOnly && !accessibleLabel ? variantConfig?.label || label || "Action button" : accessibleLabel;
+  const tooltipContent = title || (iconOnly ? variantConfig?.label || label : void 0);
   const buttonClassName = `
 
     ${terminalMode ? "btn-terminal" : `btn ${variantClass} ${paddingClasses3} ${heightClasses[size]}  ${className} ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`}`;
@@ -3719,6 +3812,7 @@ exports.Button = Button_default;
 exports.Card = Card;
 exports.ConfirmDialog = ConfirmDialog_default;
 exports.Container = Container;
+exports.DangerNotice = DangerNotice;
 exports.DataTable = DataTable;
 exports.DataTableActions = DataTableActions;
 exports.DataTableBody = DataTableBody;
@@ -3736,10 +3830,12 @@ exports.FormSection = FormSection;
 exports.Grid = Grid;
 exports.IconButtonWithCount = IconButtonWithCount;
 exports.InfoBox = InfoBox;
+exports.InfoNotice = InfoNotice;
 exports.Link = Link_default;
 exports.LoadingSpinner = LoadingSpinner_default;
 exports.MobileSearchLayout = MobileSearchLayout;
 exports.Modal = Modal;
+exports.Notice = Notice;
 exports.PageHeader = PageHeader;
 exports.RefreshButton = RefreshButton;
 exports.SearchCard = SearchCard;
@@ -3773,10 +3869,12 @@ exports.SmartSelect = SmartSelect;
 exports.Spinner = Spinner_default;
 exports.StatusBadge = StatusBadge;
 exports.StickyActionsColumn = StickyActionsColumn;
+exports.SuccessNotice = SuccessNotice;
 exports.Switch = Switch;
 exports.Typography = Typography;
 exports.VERSION = VERSION;
 exports.ViewToggle = ViewToggle;
+exports.WarningNotice = WarningNotice;
 exports.useConfirmDialog = useConfirmDialog;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map