cyberui-2045 2.3.0 → 2.4.0

package/dist/components/Badge.js

@@ -0,0 +1,49 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import "react";
+import { getResponsiveClasses as u, RESPONSIVE_SIZE_MAPS as m } from "../utils/responsive.js";
+import { cn as v } from "../utils/cn.js";
+const y = ({
+  variant: o = "primary",
+  size: n = "md",
+  children: t,
+  className: i = "",
+  leftIcon: c,
+  rightIcon: d,
+  clickable: h = !1,
+  onClick: s,
+  ...g
+}) => {
+  const w = (r) => u(r, m.badge), p = (r) => ({
+    primary: "bg-primary shadow-lg",
+    secondary: "bg-secondary shadow-lg",
+    accent: "bg-accent shadow-lg",
+    success: "bg-success shadow-lg",
+    error: "bg-error shadow-lg",
+    warning: "bg-warning shadow-lg"
+  })[r], l = (r, a) => !a && !s ? "transition-shadow" : {
+    primary: "hover:shadow-primary transition-shadow cursor-pointer",
+    secondary: "hover:shadow-secondary transition-shadow cursor-pointer",
+    accent: "hover:shadow-lg-accent transition-shadow cursor-pointer",
+    success: "hover:shadow-success transition-shadow cursor-pointer",
+    error: "hover:shadow-error transition-shadow cursor-pointer",
+    warning: "hover:shadow-warning transition-shadow cursor-pointer"
+  }[r];
+  return /* @__PURE__ */ e.jsxs(
+    "span",
+    {
+      className: v("inline-flex items-center rounded-full font-semibold", w(n), p(o), l(o, h || !!s), i),
+      onClick: s,
+      ...g,
+      children: [
+        c,
+        /* @__PURE__ */ e.jsx("span", { children: t }),
+        d
+      ]
+    }
+  );
+};
+y.displayName = "CyberUI.Badge";
+export {
+  y as default
+};
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../src/components/Badge.tsx"],"sourcesContent":["import React from 'react';\r\nimport type { ResponsiveValue } from '../utils/responsive';\r\nimport { getResponsiveClasses, RESPONSIVE_SIZE_MAPS } from '../utils/responsive';\r\nimport { cn } from '../utils/cn';\r\n\r\n/**\r\n * A status indicator badge with various semantic variants.\r\n *\r\n * @example\r\n * // Success badge\r\n * <Badge variant=\"success\">ONLINE</Badge>\r\n *\r\n * @example\r\n * // Clickable badge with icon\r\n * <Badge\r\n *   variant=\"primary\"\r\n *   clickable\r\n *   onClick={handleClick}\r\n *   leftIcon={<Icon name=\"user\" />}\r\n * >\r\n *   Profile\r\n * </Badge>\r\n */\r\nexport interface BadgeProps {\r\n  /**\r\n   * Semantic style of the badge.\r\n   * @default 'primary'\r\n   */\r\n  variant?: 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning';\r\n  /**\r\n   * Size of the badge.\r\n   * @default 'md'\r\n   */\r\n  size?: ResponsiveValue<'sm' | 'md' | 'lg'>;\r\n  /** The label or content of the badge */\r\n  children: React.ReactNode;\r\n  /** Optional custom class name */\r\n  className?: string;\r\n  /** Icon to render on the left side of the label */\r\n  leftIcon?: React.ReactNode;\r\n  /** Icon to render on the right side of the label */\r\n  rightIcon?: React.ReactNode;\r\n  /** Whether the badge should show hover effects and a pointer cursor */\r\n  clickable?: boolean;\r\n  /** Optional click handler */\r\n  onClick?: () => void;\r\n}\r\n\r\n/**\r\n * A compact Cyberpunk-style tag or indicator used for status, categories, or metrics.\r\n * \r\n * @example\r\n * <Badge variant=\"success\">Online</Badge>\r\n * \r\n * @example\r\n * <Badge variant=\"accent\" size=\"sm\" leftIcon={<ShieldIcon />}>\r\n *   Protected\r\n * </Badge>\r\n */\r\nconst Badge: React.FC<BadgeProps> = ({\r\n  variant = 'primary',\r\n  size = 'md',\r\n  children,\r\n  className = '',\r\n  leftIcon,\r\n  rightIcon,\r\n  clickable = false,\r\n  onClick,\r\n  ...props\r\n}) => {\r\n  const getSizeClasses = (size: ResponsiveValue<'sm' | 'md' | 'lg'>): string => {\r\n    return getResponsiveClasses(size, RESPONSIVE_SIZE_MAPS.badge);\r\n  };\r\n\r\n  const getVariantClasses = (variant: string): string => {\r\n    const variants = {\r\n      primary: 'bg-primary shadow-lg',\r\n      secondary: 'bg-secondary shadow-lg',\r\n      accent: 'bg-accent shadow-lg',\r\n      success: 'bg-success shadow-lg',\r\n      error: 'bg-error shadow-lg',\r\n      warning: 'bg-warning shadow-lg'\r\n    };\r\n    return variants[variant as keyof typeof variants];\r\n  };\r\n\r\n  const getHoverClasses = (variant: string, clickable: boolean): string => {\r\n    if (!clickable && !onClick) {\r\n      return 'transition-shadow';\r\n    }\r\n\r\n    const hoverVariants = {\r\n      primary: 'hover:shadow-primary transition-shadow cursor-pointer',\r\n      secondary: 'hover:shadow-secondary transition-shadow cursor-pointer',\r\n      accent: 'hover:shadow-lg-accent transition-shadow cursor-pointer',\r\n      success: 'hover:shadow-success transition-shadow cursor-pointer',\r\n      error: 'hover:shadow-error transition-shadow cursor-pointer',\r\n      warning: 'hover:shadow-warning transition-shadow cursor-pointer'\r\n    };\r\n    return hoverVariants[variant as keyof typeof hoverVariants];\r\n  };\r\n\r\n  return (\r\n    <span\r\n      className={cn('inline-flex items-center rounded-full font-semibold', getSizeClasses(size), getVariantClasses(variant), getHoverClasses(variant, clickable || !!onClick), className)}\r\n      onClick={onClick}\r\n      {...props}\r\n    >\r\n      {leftIcon}\r\n      <span>{children}</span>\r\n      {rightIcon}\r\n    </span>\r\n  );\r\n};\r\n\r\nBadge.displayName = \"CyberUI.Badge\";\r\n\r\nexport default Badge;\r\n"],"names":["Badge","variant","size","children","className","leftIcon","rightIcon","clickable","onClick","props","getSizeClasses","getResponsiveClasses","RESPONSIVE_SIZE_MAPS","getVariantClasses","getHoverClasses","jsxs","cn","jsx"],"mappings":";;;;AA2DA,MAAMA,IAA8B,CAAC;AAAA,EACnC,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAiB,CAACR,MACfS,EAAqBT,GAAMU,EAAqB,KAAK,GAGxDC,IAAoB,CAACZ,OACR;AAAA,IACf,SAAS;AAAA,IACT,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,EAAA,GAEKA,CAAgC,GAG5Ca,IAAkB,CAACb,GAAiBM,MACpC,CAACA,KAAa,CAACC,IACV,sBAGa;AAAA,IACpB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,EAAA,EAEUP,CAAqC;AAG5D,SACEc,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,uDAAuDN,EAAeR,CAAI,GAAGW,EAAkBZ,CAAO,GAAGa,EAAgBb,GAASM,KAAa,CAAC,CAACC,CAAO,GAAGJ,CAAS;AAAA,MAClL,SAAAI;AAAA,MACC,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAJ;AAAA,QACDY,gBAAAA,MAAC,UAAM,UAAAd,GAAS;AAAA,QACfG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAN,EAAM,cAAc;"}

package/dist/components/Button.js

@@ -0,0 +1,62 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import "react";
+import { getResponsiveClasses as v, RESPONSIVE_SIZE_MAPS as h } from "../utils/responsive.js";
+import { cn as p } from "../utils/cn.js";
+const f = ({
+  variant: a = "primary",
+  size: s = "md",
+  className: t = "",
+  disabled: e = !1,
+  children: n,
+  ...i
+}) => {
+  const c = [
+    "group",
+    "relative",
+    "overflow-hidden",
+    "rounded-lg",
+    "font-bold",
+    "uppercase",
+    "tracking-wider",
+    "transition-all",
+    "duration-300",
+    "ease-in-out",
+    "focus:outline-none",
+    e ? "cursor-not-allowed" : "cursor-pointer"
+  ].join(" "), d = (o) => v(o, h.button), b = (o, g) => ({
+    primary: {
+      enabled: "bg-linear-(--gradient-accent) text-base shadow-primary border-none hover:shadow-lg-accent hover:brightness-110 focus-visible:ring-2 focus-visible:ring-accent/50 active:scale-95",
+      disabled: "bg-base border-2 border-accent/20 text-accent/40 shadow-none opacity-50"
+    },
+    secondary: {
+      enabled: "bg-surface border-2 border-secondary text-secondary shadow-secondary/30 hover:bg-secondary hover:text-base hover:shadow-secondary focus-visible:ring-2 focus-visible:ring-secondary/50 active:scale-95",
+      disabled: "bg-base border-2 border-secondary/20 text-secondary/40 shadow-none opacity-50"
+    },
+    danger: {
+      enabled: "bg-surface border-2 border-error text-error shadow-error/30 hover:bg-error hover:text-base hover:shadow-error focus-visible:ring-2 focus-visible:ring-error/50 active:scale-95",
+      disabled: "bg-base border-2 border-error/20 text-error/40 shadow-none opacity-50"
+    },
+    ghost: {
+      enabled: "bg-surface border-2 border-accent text-accent shadow-secondary hover:bg-accent hover:text-base hover:shadow-lg-accent focus-visible:ring-2 focus-visible:ring-accent/50 active:scale-95",
+      disabled: "bg-base border-2 border-accent/10 text-muted/60 shadow-none opacity-40"
+    }
+  })[o][g ? "disabled" : "enabled"], l = p(c, d(s), b(a, e), t), u = a === "primary" && !e;
+  return /* @__PURE__ */ r.jsxs(
+    "button",
+    {
+      className: l,
+      disabled: e,
+      ...i,
+      children: [
+        /* @__PURE__ */ r.jsx("span", { className: "relative z-10", children: n }),
+        u && /* @__PURE__ */ r.jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700" }),
+        e && /* @__PURE__ */ r.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-transparent via-base/10 to-transparent pointer-events-none" })
+      ]
+    }
+  );
+};
+f.displayName = "CyberUI.Button";
+export {
+  f as default
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import React from 'react';\r\nimport type { ResponsiveValue } from '../utils/responsive';\r\nimport { getResponsiveClasses, RESPONSIVE_SIZE_MAPS } from '../utils/responsive';\r\nimport { cn } from '../utils/cn';\r\n\r\n/**\r\n * A neon-styled cyberpunk button component.\r\n *\r\n * Supports multiple variants and responsive sizing.\r\n *\r\n * @example\r\n * // Primary button\r\n * <Button variant=\"primary\" onClick={handleClick}>\r\n *   INITIATE\r\n * </Button>\r\n *\r\n * @example\r\n * // Responsive size (Small on mobile, Large on desktop)\r\n * <Button size={{ base: 'sm', lg: 'lg' }}>\r\n *   RESPONSIVE\r\n * </Button>\r\n *\r\n * @example\r\n * // Ghost variant for secondary actions\r\n * <Button variant=\"ghost\">\r\n *   CANCEL\r\n * </Button>\r\n */\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /**\r\n   * Visual style of the button.\r\n   * - `primary`: Main action, neon glow.\r\n   * - `secondary`: Alternative action, bordered.\r\n   * - `danger`: Destructive action, red glow.\r\n   * - `ghost`: Subtle action, transparent background.\r\n   * @default 'primary'\r\n   */\r\n  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';\r\n  /**\r\n   * Size of the button. Can be a static value or a responsive object.\r\n   * @default 'md'\r\n   */\r\n  size?: ResponsiveValue<'sm' | 'md' | 'lg'>;\r\n  /** The content to be rendered inside the button */\r\n  children: React.ReactNode;\r\n}\r\n\r\n/**\r\n * A highly customizable Cyberpunk-themed button with neon effects and animations.\r\n * \r\n * @example\r\n * <Button variant=\"primary\" size={{ base: 'sm', md: 'md' }}>\r\n *   Initialize System\r\n * </Button>\r\n * \r\n * @example\r\n * <Button variant=\"secondary\" disabled>\r\n *   Access Denied\r\n * </Button>\r\n */\r\nconst Button: React.FC<ButtonProps> = ({\r\n  variant = 'primary',\r\n  size = 'md',\r\n  className = '',\r\n  disabled = false,\r\n  children,\r\n  ...props\r\n}) => {\r\n  // Base classes that apply to all buttons\r\n  const baseClasses = [\r\n    'group',\r\n    'relative',\r\n    'overflow-hidden',\r\n    'rounded-lg',\r\n    'font-bold',\r\n    'uppercase',\r\n    'tracking-wider',\r\n    'transition-all',\r\n    'duration-300',\r\n    'ease-in-out',\r\n    'focus:outline-none',\r\n    disabled ? 'cursor-not-allowed' : 'cursor-pointer'\r\n  ].join(' ');\r\n\r\n  const getSizeClasses = (size: ResponsiveValue<'sm' | 'md' | 'lg'>): string => {\r\n    return getResponsiveClasses(size, RESPONSIVE_SIZE_MAPS.button);\r\n  };\r\n\r\n  const getVariantClasses = (variant: string, disabled: boolean): string => {\r\n    const variants = {\r\n      primary: {\r\n        enabled: 'bg-linear-(--gradient-accent) text-base shadow-primary border-none hover:shadow-lg-accent hover:brightness-110 focus-visible:ring-2 focus-visible:ring-accent/50 active:scale-95',\r\n        disabled: 'bg-base border-2 border-accent/20 text-accent/40 shadow-none opacity-50'\r\n      },\r\n      secondary: {\r\n        enabled: 'bg-surface border-2 border-secondary text-secondary shadow-secondary/30 hover:bg-secondary hover:text-base hover:shadow-secondary focus-visible:ring-2 focus-visible:ring-secondary/50 active:scale-95',\r\n        disabled: 'bg-base border-2 border-secondary/20 text-secondary/40 shadow-none opacity-50'\r\n      },\r\n      danger: {\r\n        enabled: 'bg-surface border-2 border-error text-error shadow-error/30 hover:bg-error hover:text-base hover:shadow-error focus-visible:ring-2 focus-visible:ring-error/50 active:scale-95',\r\n        disabled: 'bg-base border-2 border-error/20 text-error/40 shadow-none opacity-50'\r\n      },\r\n      ghost: {\r\n        enabled: 'bg-surface border-2 border-accent text-accent shadow-secondary hover:bg-accent hover:text-base hover:shadow-lg-accent focus-visible:ring-2 focus-visible:ring-accent/50 active:scale-95',\r\n        disabled: 'bg-base border-2 border-accent/10 text-muted/60 shadow-none opacity-40'\r\n      }\r\n    };\r\n\r\n    return variants[variant as keyof typeof variants][disabled ? 'disabled' : 'enabled'];\r\n  };\r\n\r\n  const buttonClasses = cn(baseClasses, getSizeClasses(size), getVariantClasses(variant, disabled), className);\r\n\r\n  // Show gradient animation only for primary variant when enabled\r\n  const showGradientAnimation = variant === 'primary' && !disabled;\r\n\r\n  return (\r\n    <button\r\n      className={buttonClasses}\r\n      disabled={disabled}\r\n      {...props}\r\n    >\r\n      <span className=\"relative z-10\">{children}</span>\r\n      {showGradientAnimation && (\r\n        <div className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700\" />\r\n      )}\r\n      {disabled && (\r\n        <div className=\"absolute inset-0 bg-gradient-to-br from-transparent via-base/10 to-transparent pointer-events-none\" />\r\n      )}\r\n    </button>\r\n  );\r\n};\r\n\r\nButton.displayName = \"CyberUI.Button\";\r\n\r\nexport default Button;\r\n"],"names":["Button","variant","size","className","disabled","children","props","baseClasses","getSizeClasses","getResponsiveClasses","RESPONSIVE_SIZE_MAPS","getVariantClasses","buttonClasses","cn","showGradientAnimation","jsxs","jsx"],"mappings":";;;;AA4DA,MAAMA,IAAgC,CAAC;AAAA,EACrC,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AAEJ,QAAMC,IAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAH,IAAW,uBAAuB;AAAA,EAAA,EAClC,KAAK,GAAG,GAEJI,IAAiB,CAACN,MACfO,EAAqBP,GAAMQ,EAAqB,MAAM,GAGzDC,IAAoB,CAACV,GAAiBG,OACzB;AAAA,IACf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,IAEZ,WAAW;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,IAEZ,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,IAEZ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,EACZ,GAGcH,CAAgC,EAAEG,IAAW,aAAa,SAAS,GAG/EQ,IAAgBC,EAAGN,GAAaC,EAAeN,CAAI,GAAGS,EAAkBV,GAASG,CAAQ,GAAGD,CAAS,GAGrGW,IAAwBb,MAAY,aAAa,CAACG;AAExD,SACEW,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWH;AAAA,MACX,UAAAR;AAAA,MACC,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAAU,gBAAAA,EAAAA,IAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAX,EAAA,CAAS;AAAA,QACzCS,KACCE,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,kKAAA,CAAkK;AAAA,QAElLZ,KACCY,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,qGAAA,CAAqG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI5H;AAEAhB,EAAO,cAAc;"}

package/dist/components/Card.js

@@ -0,0 +1,31 @@
+import { j as a } from "../_virtual/jsx-runtime.js";
+import "react";
+import { getResponsiveClasses as u, RESPONSIVE_SIZE_MAPS as x } from "../utils/responsive.js";
+import { cn as p } from "../utils/cn.js";
+const f = ({
+  variant: s = "default",
+  size: o = "md",
+  title: t,
+  titleBorder: d = !0,
+  children: n,
+  className: l = "",
+  ...c
+}) => {
+  const i = (e) => u(e, x.card), b = (e) => {
+    const r = i(o);
+    return {
+      default: `bg-base border border-border-default rounded-xl text-primary ${r}`,
+      accent: `bg-surface border-2 border-accent rounded-xl shadow-input-accent/50 hover:shadow-lg-accent transition-all duration-300 transform text-primary ${r}`,
+      small: `bg-base rounded-lg border border-border-default text-primary ${r}`
+    }[e];
+  }, m = (e) => e ? "text-xl font-semibold text-secondary mb-4 border-b border-accent pb-2" : "text-xl font-semibold text-secondary mb-4";
+  return /* @__PURE__ */ a.jsxs("div", { className: p(b(s), l), ...c, children: [
+    t && /* @__PURE__ */ a.jsx("h3", { className: m(d), children: t }),
+    n
+  ] });
+};
+f.displayName = "CyberUI.Card";
+export {
+  f as default
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../src/components/Card.tsx"],"sourcesContent":["import React from 'react';\r\nimport type { ResponsiveValue } from '../utils/responsive';\r\nimport { getResponsiveClasses, RESPONSIVE_SIZE_MAPS } from '../utils/responsive';\r\nimport { cn } from '../utils/cn';\r\n\r\n/**\r\n * A glassmorphism container for grouping content.\r\n *\r\n * @example\r\n * // Basic card with title\r\n * <Card title=\"System Status\">\r\n *   <p>All systems operational.</p>\r\n * </Card>\r\n *\r\n * @example\r\n * // Accent variant with hover effect\r\n * <Card variant=\"accent\" title=\"High Priority\">\r\n *   <Button>Action Required</Button>\r\n * </Card>\r\n */\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\r\n  /**\r\n   * Visual style of the card.\r\n   * - `default`: Standard glassmorphism.\r\n   * - `accent`: Glowing border and hover effects.\r\n   * - `small`: Compact padding for tight spaces.\r\n   * @default 'default'\r\n   */\r\n  variant?: 'default' | 'accent' | 'small';\r\n  /**\r\n   * Padding size of the card content.\r\n   * @default 'md'\r\n   */\r\n  size?: ResponsiveValue<'sm' | 'md' | 'lg'>;\r\n  /** Optional title for the card */\r\n  title?: string;\r\n  /**\r\n   * Whether to show a border under the title.\r\n   * @default true\r\n   */\r\n  titleBorder?: boolean;\r\n  /** The content to be rendered inside the card */\r\n  children: React.ReactNode;\r\n}\r\n\r\n/**\r\n * A cyberpunk-themed container with glassmorphism, neon borders, and responsive spacing.\r\n * \r\n * @example\r\n * <Card title=\"Security Log\" variant=\"accent\">\r\n *   <p>Unauthorized access detected.</p>\r\n * </Card>\r\n * \r\n * @example\r\n * <Card size={{ base: 'sm', lg: 'lg' }}>\r\n *   Compact on mobile, spacious on desktop.\r\n * </Card>\r\n */\r\nconst Card: React.FC<CardProps> = ({\r\n  variant = 'default',\r\n  size = 'md',\r\n  title,\r\n  titleBorder = true,\r\n  children,\r\n  className = '',\r\n  ...props\r\n}) => {\r\n  const getSizeClasses = (size: ResponsiveValue<'sm' | 'md' | 'lg'>): string => {\r\n    return getResponsiveClasses(size, RESPONSIVE_SIZE_MAPS.card);\r\n  };\r\n\r\n  const getVariantClasses = (variant: string): string => {\r\n    const baseSize = getSizeClasses(size);\r\n    const variants = {\r\n      default: `bg-base border border-border-default rounded-xl text-primary ${baseSize}`,\r\n      accent: `bg-surface border-2 border-accent rounded-xl shadow-input-accent/50 hover:shadow-lg-accent transition-all duration-300 transform text-primary ${baseSize}`,\r\n      small: `bg-base rounded-lg border border-border-default text-primary ${baseSize}`\r\n    };\r\n    return variants[variant as keyof typeof variants];\r\n  };\r\n\r\n  const getTitleClasses = (titleBorder: boolean): string => {\r\n    return titleBorder\r\n      ? 'text-xl font-semibold text-secondary mb-4 border-b border-accent pb-2'\r\n      : 'text-xl font-semibold text-secondary mb-4';\r\n  };\r\n\r\n  return (\r\n    <div className={cn(getVariantClasses(variant), className)} {...props}>\r\n      {title && (\r\n        <h3 className={getTitleClasses(titleBorder)}>\r\n          {title}\r\n        </h3>\r\n      )}\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\nCard.displayName = \"CyberUI.Card\";\r\n\r\nexport default Card;\r\n"],"names":["Card","variant","size","title","titleBorder","children","className","props","getSizeClasses","getResponsiveClasses","RESPONSIVE_SIZE_MAPS","getVariantClasses","baseSize","getTitleClasses","jsxs","cn"],"mappings":";;;;AA0DA,MAAMA,IAA4B,CAAC;AAAA,EACjC,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAiB,CAACN,MACfO,EAAqBP,GAAMQ,EAAqB,IAAI,GAGvDC,IAAoB,CAACV,MAA4B;AACrD,UAAMW,IAAWJ,EAAeN,CAAI;AAMpC,WALiB;AAAA,MACf,SAAS,gEAAgEU,CAAQ;AAAA,MACjF,QAAQ,iJAAiJA,CAAQ;AAAA,MACjK,OAAO,gEAAgEA,CAAQ;AAAA,IAAA,EAEjEX,CAAgC;AAAA,EAClD,GAEMY,IAAkB,CAACT,MAChBA,IACH,0EACA;AAGN,SACEU,gBAAAA,OAAC,OAAA,EAAI,WAAWC,EAAGJ,EAAkBV,CAAO,GAAGK,CAAS,GAAI,GAAGC,GAC5D,UAAA;AAAA,IAAAJ,2BACE,MAAA,EAAG,WAAWU,EAAgBT,CAAW,GACvC,UAAAD,GACH;AAAA,IAEDE;AAAA,EAAA,GACH;AAEJ;AAEAL,EAAK,cAAc;"}