@axtec/components 0.1.8 → 0.1.10

package/dist/index19.js

@@ -1,157 +1,53 @@
-import { jsxs as t, jsx as l } from "react/jsx-runtime";
-import { cn as r } from "./index3.js";
-import { Badge as v } from "./index15.js";
-import { Button as N } from "./index17.js";
-const h = {
-  none: "",
-  sm: "p-3",
-  md: "p-4",
-  lg: "p-6"
-}, f = {
-  none: "",
-  sm: "shadow-sm",
-  md: "shadow-md",
-  lg: "shadow-lg"
-}, u = {
-  none: "",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
-  "2xl": "rounded-2xl"
-}, w = {
-  sm: "text-base",
-  md: "text-xl",
-  lg: "text-2xl"
-};
-function k({
-  children: a,
-  padding: i = "md",
-  shadow: n = "sm",
-  rounded: m = "xl",
-  border: c = !0,
-  hover: o = !1,
-  stat: s,
-  action: e,
-  className: x
-}) {
-  var b, p;
-  if (s) {
-    const d = ((b = s.trend) == null ? void 0 : b.direction) === "up" ? "text-green-600" : ((p = s.trend) == null ? void 0 : p.direction) === "down" ? "text-red-500" : "text-slate-500";
-    return /* @__PURE__ */ t(
-      "div",
-      {
-        className: r(
-          "bg-white",
-          h[i],
-          f[n],
-          u[m],
-          c && "border border-slate-200",
-          o && "hover:shadow-md transition-shadow",
-          x
-        ),
-        children: [
-          /* @__PURE__ */ t("div", { className: "flex justify-between items-start", children: [
-            /* @__PURE__ */ t("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ l("span", { className: "text-sm text-slate-500 font-medium mb-1", children: s.label }),
-              /* @__PURE__ */ l(
-                "span",
-                {
-                  className: r(
-                    "font-semibold text-primary-500 leading-tight",
-                    w[s.size || "md"]
-                  ),
-                  children: s.value
-                }
-              ),
-              s.subtext && /* @__PURE__ */ l("span", { className: "text-xs text-slate-500 mt-1", children: s.subtext })
-            ] }),
-            s.icon && /* @__PURE__ */ l("div", { className: "flex-shrink-0", children: s.icon })
-          ] }),
-          s.trend && /* @__PURE__ */ t("div", { className: r("flex items-center gap-1 mt-2 text-xs font-medium", d), children: [
-            s.trend.direction === "up" && "↑",
-            s.trend.direction === "down" && "↓",
-            s.trend.direction === "stable" && "→",
-            s.trend.value && /* @__PURE__ */ l("span", { children: s.trend.value })
-          ] }),
-          a
-        ]
-      }
-    );
-  }
-  return e ? /* @__PURE__ */ t(
-    "div",
+import { jsx as e, jsxs as d, Fragment as m } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { cn as b } from "./index3.js";
+import { Loader as f } from "./index37.js";
+const u = {
+  primary: "bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700 focus:ring-primary-500",
+  secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200 active:bg-slate-300 focus:ring-slate-500",
+  outline: "border border-slate-300 bg-transparent text-slate-700 hover:bg-slate-50 active:bg-slate-100 focus:ring-slate-500",
+  ghost: "bg-transparent text-slate-700 hover:bg-slate-100 active:bg-slate-200 focus:ring-slate-500",
+  danger: "bg-red-500 text-white hover:bg-red-600 active:bg-red-700 focus:ring-red-500"
+}, x = {
+  sm: "px-3 py-1.5 text-sm gap-1.5",
+  md: "px-4 py-2 text-base gap-2",
+  lg: "px-6 py-3 text-lg gap-2.5"
+}, y = p(
+  ({
+    className: o,
+    variant: i = "primary",
+    size: t = "md",
+    isLoading: r = !1,
+    leftIcon: s,
+    rightIcon: a,
+    disabled: n,
+    children: l,
+    ...c
+  }, g) => /* @__PURE__ */ e(
+    "button",
     {
-      className: r(
-        "bg-white flex flex-col",
-        h[i],
-        f[n],
-        u[m],
-        c && "border border-slate-200",
-        o && "hover:shadow-md transition-shadow",
-        x
+      ref: g,
+      className: b(
+        "inline-flex items-center justify-center font-semibold rounded-lg",
+        "transition-colors duration-200",
+        "focus:outline-none focus:ring-2 focus:ring-offset-2",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        u[i],
+        x[t],
+        o
       ),
-      children: [
-        (e.title || e.status) && /* @__PURE__ */ t("div", { className: "flex items-start justify-between gap-3 mb-3", children: [
-          e.title && /* @__PURE__ */ l("h3", { className: "font-semibold text-base text-slate-900", children: e.title }),
-          e.status && /* @__PURE__ */ l(v, { variant: e.status.variant || "default", size: "sm", children: e.status.label })
-        ] }),
-        e.description && /* @__PURE__ */ l("p", { className: "text-sm text-slate-600 mb-4 line-clamp-2 leading-relaxed", children: e.description }),
-        e.metrics && e.metrics.length > 0 && /* @__PURE__ */ l("div", { className: "space-y-2 mb-4 flex-1", children: e.metrics.map((d, g) => /* @__PURE__ */ t("div", { className: "flex justify-between text-sm", children: [
-          /* @__PURE__ */ l("span", { className: "text-slate-500", children: d.label }),
-          /* @__PURE__ */ l(
-            "span",
-            {
-              className: r("font-semibold", d.highlight ? "text-red-600" : "text-slate-900"),
-              children: d.value
-            }
-          )
-        ] }, g)) }),
-        a && /* @__PURE__ */ l("div", { className: "flex-1", children: a }),
-        e.badges && e.badges.length > 0 && /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1.5 mb-4", children: e.badges.map((d, g) => /* @__PURE__ */ l(v, { variant: d.variant || "default", size: "sm", children: d.label }, g)) }),
-        e.ctaLabel && /* @__PURE__ */ l(
-          N,
-          {
-            onClick: e.onCtaClick,
-            disabled: e.ctaDisabled,
-            isLoading: e.ctaLoading,
-            leftIcon: e.ctaIcon,
-            className: "w-full mt-auto",
-            children: e.ctaLabel
-          }
-        )
-      ]
+      disabled: n || r,
+      ...c,
+      children: r ? /* @__PURE__ */ e(f, { size: t === "lg" ? "md" : "sm", color: "current" }) : /* @__PURE__ */ d(m, { children: [
+        s && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: s }),
+        l,
+        a && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: a })
+      ] })
     }
-  ) : /* @__PURE__ */ l(
-    "div",
-    {
-      className: r(
-        "bg-white",
-        h[i],
-        f[n],
-        u[m],
-        c && "border border-slate-200",
-        o && "hover:shadow-md transition-shadow",
-        x
-      ),
-      children: a
-    }
-  );
-}
-const y = {
-  1: "grid-cols-1",
-  2: "grid-cols-1 md:grid-cols-2",
-  3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-  4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
-}, S = {
-  sm: "gap-2",
-  md: "gap-3",
-  lg: "gap-4"
-};
-function B({ children: a, columns: i = 2, gap: n = "md", className: m }) {
-  return /* @__PURE__ */ l("div", { className: r("grid", y[i], S[n], m), children: a });
-}
+  )
+);
+y.displayName = "Button";
 export {
-  k as Card,
-  B as CardGrid
+  y as Button
 };
 //# sourceMappingURL=index19.js.map

package/dist/index19.js.map

@@ -1 +1 @@
-{"version":3,"file":"index19.js","sources":["../src/components/Card/Card.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '../Badge/Badge'\nimport { Button } from '../Button/Button'\n\n// Base card container props\nexport interface CardProps {\n  children?: ReactNode\n  padding?: 'none' | 'sm' | 'md' | 'lg'\n  shadow?: 'none' | 'sm' | 'md' | 'lg'\n  rounded?: 'none' | 'md' | 'lg' | 'xl' | '2xl'\n  border?: boolean\n  hover?: boolean\n  className?: string\n}\n\n// Stat card props (for displaying a prominent value)\nexport interface CardStatProps {\n  label: string\n  value: string | number\n  subtext?: string\n  trend?: {\n    direction: 'up' | 'down' | 'stable'\n    value?: string\n  }\n  icon?: ReactNode\n  size?: 'sm' | 'md' | 'lg'\n}\n\n// Metric row for action-style cards\nexport interface CardMetric {\n  label: string\n  value: string | number\n  highlight?: boolean\n}\n\n// Action card props (for actionable items with CTAs)\nexport interface CardActionProps {\n  title?: string\n  status?: {\n    label: string\n    variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'\n  }\n  description?: string\n  metrics?: CardMetric[]\n  badges?: Array<{\n    label: string\n    variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'\n  }>\n  ctaLabel?: string\n  onCtaClick?: () => void\n  ctaLoading?: boolean\n  ctaDisabled?: boolean\n  ctaIcon?: ReactNode\n}\n\n// Combined card props\nexport type FullCardProps = CardProps & {\n  stat?: CardStatProps\n  action?: CardActionProps\n}\n\nconst paddingStyles = {\n  none: '',\n  sm: 'p-3',\n  md: 'p-4',\n  lg: 'p-6',\n}\n\nconst shadowStyles = {\n  none: '',\n  sm: 'shadow-sm',\n  md: 'shadow-md',\n  lg: 'shadow-lg',\n}\n\nconst roundedStyles = {\n  none: '',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n}\n\nconst valueSizeStyles = {\n  sm: 'text-base',\n  md: 'text-xl',\n  lg: 'text-2xl',\n}\n\nexport function Card({\n  children,\n  padding = 'md',\n  shadow = 'sm',\n  rounded = 'xl',\n  border = true,\n  hover = false,\n  stat,\n  action,\n  className,\n}: FullCardProps) {\n  // Stat card mode\n  if (stat) {\n    const trendColor =\n      stat.trend?.direction === 'up'\n        ? 'text-green-600'\n        : stat.trend?.direction === 'down'\n          ? 'text-red-500'\n          : 'text-slate-500'\n\n    return (\n      <div\n        className={cn(\n          'bg-white',\n          paddingStyles[padding],\n          shadowStyles[shadow],\n          roundedStyles[rounded],\n          border && 'border border-slate-200',\n          hover && 'hover:shadow-md transition-shadow',\n          className\n        )}\n      >\n        <div className=\"flex justify-between items-start\">\n          <div className=\"flex flex-col\">\n            <span className=\"text-sm text-slate-500 font-medium mb-1\">{stat.label}</span>\n            <span\n              className={cn(\n                'font-semibold text-primary-500 leading-tight',\n                valueSizeStyles[stat.size || 'md']\n              )}\n            >\n              {stat.value}\n            </span>\n            {stat.subtext && <span className=\"text-xs text-slate-500 mt-1\">{stat.subtext}</span>}\n          </div>\n          {stat.icon && <div className=\"flex-shrink-0\">{stat.icon}</div>}\n        </div>\n        {stat.trend && (\n          <div className={cn('flex items-center gap-1 mt-2 text-xs font-medium', trendColor)}>\n            {stat.trend.direction === 'up' && '↑'}\n            {stat.trend.direction === 'down' && '↓'}\n            {stat.trend.direction === 'stable' && '→'}\n            {stat.trend.value && <span>{stat.trend.value}</span>}\n          </div>\n        )}\n        {children}\n      </div>\n    )\n  }\n\n  // Action card mode\n  if (action) {\n    return (\n      <div\n        className={cn(\n          'bg-white flex flex-col',\n          paddingStyles[padding],\n          shadowStyles[shadow],\n          roundedStyles[rounded],\n          border && 'border border-slate-200',\n          hover && 'hover:shadow-md transition-shadow',\n          className\n        )}\n      >\n        {/* Header with title and status badge */}\n        {(action.title || action.status) && (\n          <div className=\"flex items-start justify-between gap-3 mb-3\">\n            {action.title && (\n              <h3 className=\"font-semibold text-base text-slate-900\">{action.title}</h3>\n            )}\n            {action.status && (\n              <Badge variant={action.status.variant || 'default'} size=\"sm\">\n                {action.status.label}\n              </Badge>\n            )}\n          </div>\n        )}\n\n        {/* Description */}\n        {action.description && (\n          <p className=\"text-sm text-slate-600 mb-4 line-clamp-2 leading-relaxed\">\n            {action.description}\n          </p>\n        )}\n\n        {/* Metrics */}\n        {action.metrics && action.metrics.length > 0 && (\n          <div className=\"space-y-2 mb-4 flex-1\">\n            {action.metrics.map((metric, idx) => (\n              <div key={idx} className=\"flex justify-between text-sm\">\n                <span className=\"text-slate-500\">{metric.label}</span>\n                <span\n                  className={cn('font-semibold', metric.highlight ? 'text-red-600' : 'text-slate-900')}\n                >\n                  {metric.value}\n                </span>\n              </div>\n            ))}\n          </div>\n        )}\n\n        {/* Custom content */}\n        {children && <div className=\"flex-1\">{children}</div>}\n\n        {/* Status badges */}\n        {action.badges && action.badges.length > 0 && (\n          <div className=\"flex flex-wrap gap-1.5 mb-4\">\n            {action.badges.map((badge, idx) => (\n              <Badge key={idx} variant={badge.variant || 'default'} size=\"sm\">\n                {badge.label}\n              </Badge>\n            ))}\n          </div>\n        )}\n\n        {/* CTA Button */}\n        {action.ctaLabel && (\n          <Button\n            onClick={action.onCtaClick}\n            disabled={action.ctaDisabled}\n            isLoading={action.ctaLoading}\n            leftIcon={action.ctaIcon}\n            className=\"w-full mt-auto\"\n          >\n            {action.ctaLabel}\n          </Button>\n        )}\n      </div>\n    )\n  }\n\n  // Basic card mode (original behavior)\n  return (\n    <div\n      className={cn(\n        'bg-white',\n        paddingStyles[padding],\n        shadowStyles[shadow],\n        roundedStyles[rounded],\n        border && 'border border-slate-200',\n        hover && 'hover:shadow-md transition-shadow',\n        className\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\n// Grid layout for cards\nexport interface CardGridProps {\n  children: ReactNode\n  columns?: 1 | 2 | 3 | 4\n  gap?: 'sm' | 'md' | 'lg'\n  className?: string\n}\n\nconst columnStyles = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-1 md:grid-cols-2',\n  3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',\n  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',\n}\n\nconst gapStyles = {\n  sm: 'gap-2',\n  md: 'gap-3',\n  lg: 'gap-4',\n}\n\nexport function CardGrid({ children, columns = 2, gap = 'md', className }: CardGridProps) {\n  return (\n    <div className={cn('grid', columnStyles[columns], gapStyles[gap], className)}>{children}</div>\n  )\n}\n"],"names":["paddingStyles","shadowStyles","roundedStyles","valueSizeStyles","Card","children","padding","shadow","rounded","border","hover","stat","action","className","trendColor","_a","_b","jsxs","cn","jsx","Badge","metric","idx","badge","Button","columnStyles","gapStyles","CardGrid","columns","gap"],"mappings":"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"}
+{"version":3,"file":"index19.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\nimport { Loader } from '../Loader/Loader'\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'\n  size?: 'sm' | 'md' | 'lg'\n  isLoading?: boolean\n  leftIcon?: ReactNode\n  rightIcon?: ReactNode\n}\n\nconst variantStyles = {\n  primary:\n    'bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700 focus:ring-primary-500',\n  secondary:\n    'bg-slate-100 text-slate-900 hover:bg-slate-200 active:bg-slate-300 focus:ring-slate-500',\n  outline:\n    'border border-slate-300 bg-transparent text-slate-700 hover:bg-slate-50 active:bg-slate-100 focus:ring-slate-500',\n  ghost:\n    'bg-transparent text-slate-700 hover:bg-slate-100 active:bg-slate-200 focus:ring-slate-500',\n  danger:\n    'bg-red-500 text-white hover:bg-red-600 active:bg-red-700 focus:ring-red-500',\n}\n\nconst sizeStyles = {\n  sm: 'px-3 py-1.5 text-sm gap-1.5',\n  md: 'px-4 py-2 text-base gap-2',\n  lg: 'px-6 py-3 text-lg gap-2.5',\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = 'primary',\n      size = 'md',\n      isLoading = false,\n      leftIcon,\n      rightIcon,\n      disabled,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'inline-flex items-center justify-center font-semibold rounded-lg',\n          'transition-colors duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-offset-2',\n          'disabled:opacity-50 disabled:cursor-not-allowed',\n          variantStyles[variant],\n          sizeStyles[size],\n          className\n        )}\n        disabled={disabled || isLoading}\n        {...props}\n      >\n        {isLoading ? (\n          <Loader size={size === 'lg' ? 'md' : 'sm'} color=\"current\" />\n        ) : (\n          <>\n            {leftIcon && <span className=\"flex-shrink-0\">{leftIcon}</span>}\n            {children}\n            {rightIcon && <span className=\"flex-shrink-0\">{rightIcon}</span>}\n          </>\n        )}\n      </button>\n    )\n  }\n)\n\nButton.displayName = 'Button'\n"],"names":["variantStyles","sizeStyles","Button","forwardRef","className","variant","size","isLoading","leftIcon","rightIcon","disabled","children","props","ref","jsx","cn","Loader","jsxs","Fragment"],"mappings":";;;;AAYA,MAAMA,IAAgB;AAAA,EACpB,SACE;AAAA,EACF,WACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AAAA,EACF,QACE;AACJ,GAEMC,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAASC;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAGE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAf,EAAcK,CAAO;AAAA,QACrBJ,EAAWK,CAAI;AAAA,QACfF;AAAA,MAAA;AAAA,MAEF,UAAUM,KAAYH;AAAA,MACrB,GAAGK;AAAA,MAEH,UAAAL,IACC,gBAAAO,EAACE,GAAA,EAAO,MAAMV,MAAS,OAAO,OAAO,MAAM,OAAM,UAAA,CAAU,IAE3D,gBAAAW,EAAAC,GAAA,EACG,UAAA;AAAA,QAAAV,KAAY,gBAAAM,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAN,GAAS;AAAA,QACtDG;AAAA,QACAF,KAAa,gBAAAK,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAL,EAAA,CAAU;AAAA,MAAA,EAAA,CAC3D;AAAA,IAAA;AAAA,EAAA;AAKV;AAEAP,EAAO,cAAc;"}

package/dist/index20.js

@@ -1,21 +1,16 @@
 import { jsx as r } from "react/jsx-runtime";
-import { cn as m } from "./index3.js";
-function n({
-  children: t,
-  className: e
-}) {
-  return /* @__PURE__ */ r(
-    "h4",
-    {
-      className: m(
-        "text-base font-medium text-slate-900",
-        e
-      ),
-      children: t
-    }
-  );
-}
+import { cn as i } from "./index3.js";
+const m = ({ buttons: o, className: e }) => /* @__PURE__ */ r("div", { className: i("flex flex-row items-center justify-end gap-1", e), children: o.map(({ icon: t, onClick: n, label: s }, a) => /* @__PURE__ */ r(
+  "button",
+  {
+    onClick: n,
+    "aria-label": s,
+    className: "cursor-pointer p-2 rounded-md hover:bg-slate-100 transition-colors",
+    children: t
+  },
+  `btnGroup_${a}`
+)) });
 export {
-  n as CardHeading
+  m as ButtonGroup
 };
 //# sourceMappingURL=index20.js.map

package/dist/index20.js.map

@@ -1 +1 @@
-{"version":3,"file":"index20.js","sources":["../src/components/Typography/CardHeading.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\nimport type { ReactNode } from 'react'\n\nexport interface CardHeadingProps {\n  children: ReactNode\n  className?: string\n}\n\nexport function CardHeading({\n  children,\n  className,\n}: CardHeadingProps) {\n  return (\n    <h4\n      className={cn(\n        'text-base font-medium text-slate-900',\n        className\n      )}\n    >\n      {children}\n    </h4>\n  )\n}\n"],"names":["CardHeading","children","className","jsx","cn"],"mappings":";;AAQO,SAASA,EAAY;AAAA,EAC1B,UAAAC;AAAA,EACA,WAAAC;AACF,GAAqB;AACnB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"index20.js","sources":["../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { type ReactElement } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface ButtonGroupItem {\n  icon: ReactElement\n  onClick: () => void\n  label?: string\n}\n\nexport interface ButtonGroupProps {\n  buttons: ButtonGroupItem[]\n  className?: string\n}\n\nexport const ButtonGroup = ({ buttons, className }: ButtonGroupProps) => {\n  return (\n    <div className={cn('flex flex-row items-center justify-end gap-1', className)}>\n      {buttons.map(({ icon, onClick, label }, index) => (\n        <button\n          key={`btnGroup_${index}`}\n          onClick={onClick}\n          aria-label={label}\n          className=\"cursor-pointer p-2 rounded-md hover:bg-slate-100 transition-colors\"\n        >\n          {icon}\n        </button>\n      ))}\n    </div>\n  )\n}\n"],"names":["ButtonGroup","buttons","className","jsx","cn","icon","onClick","label","index"],"mappings":";;AAcO,MAAMA,IAAc,CAAC,EAAE,SAAAC,GAAS,WAAAC,QAEnC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAG,gDAAgDF,CAAS,GACzE,UAAAD,EAAQ,IAAI,CAAC,EAAE,MAAAI,GAAM,SAAAC,GAAS,OAAAC,EAAA,GAASC,MACtC,gBAAAL;AAAA,EAAC;AAAA,EAAA;AAAA,IAEC,SAAAG;AAAA,IACA,cAAYC;AAAA,IACZ,WAAU;AAAA,IAET,UAAAF;AAAA,EAAA;AAAA,EALI,YAAYG,CAAK;AAAA,CAOzB,GACH;"}

package/dist/index21.js

@@ -1,49 +1,157 @@
-import { jsx as l, jsxs as s } from "react/jsx-runtime";
-import { cn as n } from "./index3.js";
-const o = ({
-  items: c,
-  className: t
-}) => /* @__PURE__ */ l("div", { className: n("flex justify-center gap-8 p-5", t), children: c.map((e, r) => /* @__PURE__ */ s("div", { className: "flex flex-col flex-1", children: [
-  /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-3", children: [
-    /* @__PURE__ */ l(
+import { jsxs as t, jsx as l } from "react/jsx-runtime";
+import { cn as r } from "./index3.js";
+import { Badge as v } from "./index17.js";
+import { Button as N } from "./index19.js";
+const h = {
+  none: "",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6"
+}, f = {
+  none: "",
+  sm: "shadow-sm",
+  md: "shadow-md",
+  lg: "shadow-lg"
+}, u = {
+  none: "",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl"
+}, w = {
+  sm: "text-base",
+  md: "text-xl",
+  lg: "text-2xl"
+};
+function k({
+  children: a,
+  padding: i = "md",
+  shadow: n = "sm",
+  rounded: m = "xl",
+  border: c = !0,
+  hover: o = !1,
+  stat: s,
+  action: e,
+  className: x
+}) {
+  var b, p;
+  if (s) {
+    const d = ((b = s.trend) == null ? void 0 : b.direction) === "up" ? "text-green-600" : ((p = s.trend) == null ? void 0 : p.direction) === "down" ? "text-red-500" : "text-slate-500";
+    return /* @__PURE__ */ t(
       "div",
       {
-        className: "w-5 h-2.5 rounded-full",
-        style: { backgroundColor: e.color }
-      }
-    ),
-    /* @__PURE__ */ l(
-      "span",
-      {
-        className: "text-sm font-medium",
-        style: { color: e.color },
-        children: e.label
+        className: r(
+          "bg-white",
+          h[i],
+          f[n],
+          u[m],
+          c && "border border-slate-200",
+          o && "hover:shadow-md transition-shadow",
+          x
+        ),
+        children: [
+          /* @__PURE__ */ t("div", { className: "flex justify-between items-start", children: [
+            /* @__PURE__ */ t("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ l("span", { className: "text-sm text-slate-500 font-medium mb-1", children: s.label }),
+              /* @__PURE__ */ l(
+                "span",
+                {
+                  className: r(
+                    "font-semibold text-primary-500 leading-tight",
+                    w[s.size || "md"]
+                  ),
+                  children: s.value
+                }
+              ),
+              s.subtext && /* @__PURE__ */ l("span", { className: "text-xs text-slate-500 mt-1", children: s.subtext })
+            ] }),
+            s.icon && /* @__PURE__ */ l("div", { className: "flex-shrink-0", children: s.icon })
+          ] }),
+          s.trend && /* @__PURE__ */ t("div", { className: r("flex items-center gap-1 mt-2 text-xs font-medium", d), children: [
+            s.trend.direction === "up" && "↑",
+            s.trend.direction === "down" && "↓",
+            s.trend.direction === "stable" && "→",
+            s.trend.value && /* @__PURE__ */ l("span", { children: s.trend.value })
+          ] }),
+          a
+        ]
       }
-    )
-  ] }),
-  e.data.map((a, d) => /* @__PURE__ */ s("div", { className: "mb-2", children: [
-    /* @__PURE__ */ l("div", { className: "text-sm font-semibold text-slate-900 mb-1", children: a.title }),
-    /* @__PURE__ */ s("div", { className: "text-sm text-slate-500", children: [
-      a.value,
-      a.percentage && /* @__PURE__ */ s("span", { className: "ml-1 text-slate-400", children: [
-        "(",
-        a.percentage,
-        ")"
-      ] })
-    ] })
-  ] }, d))
-] }, r)) }), x = ({ items: c, className: t }) => /* @__PURE__ */ l("div", { className: n("flex items-center justify-center gap-6", t), children: c.map((e, r) => /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-  /* @__PURE__ */ l(
+    );
+  }
+  return e ? /* @__PURE__ */ t(
     "div",
     {
-      className: "w-3 h-3 rounded-full",
-      style: { backgroundColor: e.color }
+      className: r(
+        "bg-white flex flex-col",
+        h[i],
+        f[n],
+        u[m],
+        c && "border border-slate-200",
+        o && "hover:shadow-md transition-shadow",
+        x
+      ),
+      children: [
+        (e.title || e.status) && /* @__PURE__ */ t("div", { className: "flex items-start justify-between gap-3 mb-3", children: [
+          e.title && /* @__PURE__ */ l("h3", { className: "font-semibold text-base text-slate-900", children: e.title }),
+          e.status && /* @__PURE__ */ l(v, { variant: e.status.variant || "default", size: "sm", children: e.status.label })
+        ] }),
+        e.description && /* @__PURE__ */ l("p", { className: "text-sm text-slate-600 mb-4 line-clamp-2 leading-relaxed", children: e.description }),
+        e.metrics && e.metrics.length > 0 && /* @__PURE__ */ l("div", { className: "space-y-2 mb-4 flex-1", children: e.metrics.map((d, g) => /* @__PURE__ */ t("div", { className: "flex justify-between text-sm", children: [
+          /* @__PURE__ */ l("span", { className: "text-slate-500", children: d.label }),
+          /* @__PURE__ */ l(
+            "span",
+            {
+              className: r("font-semibold", d.highlight ? "text-red-600" : "text-slate-900"),
+              children: d.value
+            }
+          )
+        ] }, g)) }),
+        a && /* @__PURE__ */ l("div", { className: "flex-1", children: a }),
+        e.badges && e.badges.length > 0 && /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1.5 mb-4", children: e.badges.map((d, g) => /* @__PURE__ */ l(v, { variant: d.variant || "default", size: "sm", children: d.label }, g)) }),
+        e.ctaLabel && /* @__PURE__ */ l(
+          N,
+          {
+            onClick: e.onCtaClick,
+            disabled: e.ctaDisabled,
+            isLoading: e.ctaLoading,
+            leftIcon: e.ctaIcon,
+            className: "w-full mt-auto",
+            children: e.ctaLabel
+          }
+        )
+      ]
     }
-  ),
-  /* @__PURE__ */ l("span", { className: "text-sm text-slate-600", children: e.label })
-] }, r)) });
+  ) : /* @__PURE__ */ l(
+    "div",
+    {
+      className: r(
+        "bg-white",
+        h[i],
+        f[n],
+        u[m],
+        c && "border border-slate-200",
+        o && "hover:shadow-md transition-shadow",
+        x
+      ),
+      children: a
+    }
+  );
+}
+const y = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 md:grid-cols-2",
+  3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+}, S = {
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-4"
+};
+function B({ children: a, columns: i = 2, gap: n = "md", className: m }) {
+  return /* @__PURE__ */ l("div", { className: r("grid", y[i], S[n], m), children: a });
+}
 export {
-  x as ChartLegend,
-  o as StatisticsLegend
+  k as Card,
+  B as CardGrid
 };
 //# sourceMappingURL=index21.js.map

package/dist/index21.js.map

@@ -1 +1 @@
-{"version":3,"file":"index21.js","sources":["../src/components/StatisticsLegend/StatisticsLegend.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\n\nexport interface StatisticsLegendItem {\n  label: string\n  color: string\n  data: {\n    title: string\n    value: string | number\n    percentage?: string\n  }[]\n}\n\nexport interface StatisticsLegendProps {\n  items: StatisticsLegendItem[]\n  className?: string\n}\n\nexport const StatisticsLegend = ({\n  items,\n  className,\n}: StatisticsLegendProps) => {\n  return (\n    <div className={cn('flex justify-center gap-8 p-5', className)}>\n      {items.map((item, index) => (\n        <div key={index} className=\"flex flex-col flex-1\">\n          {/* Legend label */}\n          <div className=\"flex items-center gap-2 mb-3\">\n            <div\n              className=\"w-5 h-2.5 rounded-full\"\n              style={{ backgroundColor: item.color }}\n            />\n            <span\n              className=\"text-sm font-medium\"\n              style={{ color: item.color }}\n            >\n              {item.label}\n            </span>\n          </div>\n\n          {/* Data items */}\n          {item.data.map((dataItem, dataIndex) => (\n            <div key={dataIndex} className=\"mb-2\">\n              <div className=\"text-sm font-semibold text-slate-900 mb-1\">\n                {dataItem.title}\n              </div>\n              <div className=\"text-sm text-slate-500\">\n                {dataItem.value}\n                {dataItem.percentage && (\n                  <span className=\"ml-1 text-slate-400\">\n                    ({dataItem.percentage})\n                  </span>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n}\n\n// Simple color dot legend for charts\nexport interface ChartLegendProps {\n  items: {\n    label: string\n    color: string\n  }[]\n  className?: string\n}\n\nexport const ChartLegend = ({ items, className }: ChartLegendProps) => {\n  return (\n    <div className={cn('flex items-center justify-center gap-6', className)}>\n      {items.map((item, index) => (\n        <div key={index} className=\"flex items-center gap-2\">\n          <div\n            className=\"w-3 h-3 rounded-full\"\n            style={{ backgroundColor: item.color }}\n          />\n          <span className=\"text-sm text-slate-600\">{item.label}</span>\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"names":["StatisticsLegend","items","className","jsx","cn","item","index","jsxs","dataItem","dataIndex","ChartLegend"],"mappings":";;AAiBO,MAAMA,IAAmB,CAAC;AAAA,EAC/B,OAAAC;AAAA,EACA,WAAAC;AACF,MAEI,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAG,iCAAiCF,CAAS,GAC1D,UAAAD,EAAM,IAAI,CAACI,GAAMC,MAChB,gBAAAC,EAAC,OAAA,EAAgB,WAAU,wBAEzB,UAAA;AAAA,EAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,IAAA,gBAAAJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,iBAAiBE,EAAK,MAAA;AAAA,MAAM;AAAA,IAAA;AAAA,IAEvC,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,OAAOE,EAAK,MAAA;AAAA,QAEpB,UAAAA,EAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,GACF;AAAA,EAGCA,EAAK,KAAK,IAAI,CAACG,GAAUC,MACxB,gBAAAF,EAAC,OAAA,EAAoB,WAAU,QAC7B,UAAA;AAAA,IAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,6CACZ,UAAAK,EAAS,OACZ;AAAA,IACA,gBAAAD,EAAC,OAAA,EAAI,WAAU,0BACZ,UAAA;AAAA,MAAAC,EAAS;AAAA,MACTA,EAAS,cACR,gBAAAD,EAAC,QAAA,EAAK,WAAU,uBAAsB,UAAA;AAAA,QAAA;AAAA,QAClCC,EAAS;AAAA,QAAW;AAAA,MAAA,EAAA,CACxB;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,EAAA,GAXQC,CAYV,CACD;AAAA,KA9BOH,CA+BV,CACD,GACH,GAaSI,IAAc,CAAC,EAAE,OAAAT,GAAO,WAAAC,QAEjC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAG,0CAA0CF,CAAS,GACnE,UAAAD,EAAM,IAAI,CAACI,GAAMC,MAChB,gBAAAC,EAAC,OAAA,EAAgB,WAAU,2BACzB,UAAA;AAAA,EAAA,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,iBAAiBE,EAAK,MAAA;AAAA,IAAM;AAAA,EAAA;AAAA,EAEvC,gBAAAF,EAAC,QAAA,EAAK,WAAU,0BAA0B,YAAK,MAAA,CAAM;AAAA,KAL7CG,CAMV,CACD,GACH;"}
+{"version":3,"file":"index21.js","sources":["../src/components/Card/Card.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '../Badge/Badge'\nimport { Button } from '../Button/Button'\n\n// Base card container props\nexport interface CardProps {\n  children?: ReactNode\n  padding?: 'none' | 'sm' | 'md' | 'lg'\n  shadow?: 'none' | 'sm' | 'md' | 'lg'\n  rounded?: 'none' | 'md' | 'lg' | 'xl' | '2xl'\n  border?: boolean\n  hover?: boolean\n  className?: string\n}\n\n// Stat card props (for displaying a prominent value)\nexport interface CardStatProps {\n  label: string\n  value: string | number\n  subtext?: string\n  trend?: {\n    direction: 'up' | 'down' | 'stable'\n    value?: string\n  }\n  icon?: ReactNode\n  size?: 'sm' | 'md' | 'lg'\n}\n\n// Metric row for action-style cards\nexport interface CardMetric {\n  label: string\n  value: string | number\n  highlight?: boolean\n}\n\n// Action card props (for actionable items with CTAs)\nexport interface CardActionProps {\n  title?: string\n  status?: {\n    label: string\n    variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'\n  }\n  description?: string\n  metrics?: CardMetric[]\n  badges?: Array<{\n    label: string\n    variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'\n  }>\n  ctaLabel?: string\n  onCtaClick?: () => void\n  ctaLoading?: boolean\n  ctaDisabled?: boolean\n  ctaIcon?: ReactNode\n}\n\n// Combined card props\nexport type FullCardProps = CardProps & {\n  stat?: CardStatProps\n  action?: CardActionProps\n}\n\nconst paddingStyles = {\n  none: '',\n  sm: 'p-3',\n  md: 'p-4',\n  lg: 'p-6',\n}\n\nconst shadowStyles = {\n  none: '',\n  sm: 'shadow-sm',\n  md: 'shadow-md',\n  lg: 'shadow-lg',\n}\n\nconst roundedStyles = {\n  none: '',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n}\n\nconst valueSizeStyles = {\n  sm: 'text-base',\n  md: 'text-xl',\n  lg: 'text-2xl',\n}\n\nexport function Card({\n  children,\n  padding = 'md',\n  shadow = 'sm',\n  rounded = 'xl',\n  border = true,\n  hover = false,\n  stat,\n  action,\n  className,\n}: FullCardProps) {\n  // Stat card mode\n  if (stat) {\n    const trendColor =\n      stat.trend?.direction === 'up'\n        ? 'text-green-600'\n        : stat.trend?.direction === 'down'\n          ? 'text-red-500'\n          : 'text-slate-500'\n\n    return (\n      <div\n        className={cn(\n          'bg-white',\n          paddingStyles[padding],\n          shadowStyles[shadow],\n          roundedStyles[rounded],\n          border && 'border border-slate-200',\n          hover && 'hover:shadow-md transition-shadow',\n          className\n        )}\n      >\n        <div className=\"flex justify-between items-start\">\n          <div className=\"flex flex-col\">\n            <span className=\"text-sm text-slate-500 font-medium mb-1\">{stat.label}</span>\n            <span\n              className={cn(\n                'font-semibold text-primary-500 leading-tight',\n                valueSizeStyles[stat.size || 'md']\n              )}\n            >\n              {stat.value}\n            </span>\n            {stat.subtext && <span className=\"text-xs text-slate-500 mt-1\">{stat.subtext}</span>}\n          </div>\n          {stat.icon && <div className=\"flex-shrink-0\">{stat.icon}</div>}\n        </div>\n        {stat.trend && (\n          <div className={cn('flex items-center gap-1 mt-2 text-xs font-medium', trendColor)}>\n            {stat.trend.direction === 'up' && '↑'}\n            {stat.trend.direction === 'down' && '↓'}\n            {stat.trend.direction === 'stable' && '→'}\n            {stat.trend.value && <span>{stat.trend.value}</span>}\n          </div>\n        )}\n        {children}\n      </div>\n    )\n  }\n\n  // Action card mode\n  if (action) {\n    return (\n      <div\n        className={cn(\n          'bg-white flex flex-col',\n          paddingStyles[padding],\n          shadowStyles[shadow],\n          roundedStyles[rounded],\n          border && 'border border-slate-200',\n          hover && 'hover:shadow-md transition-shadow',\n          className\n        )}\n      >\n        {/* Header with title and status badge */}\n        {(action.title || action.status) && (\n          <div className=\"flex items-start justify-between gap-3 mb-3\">\n            {action.title && (\n              <h3 className=\"font-semibold text-base text-slate-900\">{action.title}</h3>\n            )}\n            {action.status && (\n              <Badge variant={action.status.variant || 'default'} size=\"sm\">\n                {action.status.label}\n              </Badge>\n            )}\n          </div>\n        )}\n\n        {/* Description */}\n        {action.description && (\n          <p className=\"text-sm text-slate-600 mb-4 line-clamp-2 leading-relaxed\">\n            {action.description}\n          </p>\n        )}\n\n        {/* Metrics */}\n        {action.metrics && action.metrics.length > 0 && (\n          <div className=\"space-y-2 mb-4 flex-1\">\n            {action.metrics.map((metric, idx) => (\n              <div key={idx} className=\"flex justify-between text-sm\">\n                <span className=\"text-slate-500\">{metric.label}</span>\n                <span\n                  className={cn('font-semibold', metric.highlight ? 'text-red-600' : 'text-slate-900')}\n                >\n                  {metric.value}\n                </span>\n              </div>\n            ))}\n          </div>\n        )}\n\n        {/* Custom content */}\n        {children && <div className=\"flex-1\">{children}</div>}\n\n        {/* Status badges */}\n        {action.badges && action.badges.length > 0 && (\n          <div className=\"flex flex-wrap gap-1.5 mb-4\">\n            {action.badges.map((badge, idx) => (\n              <Badge key={idx} variant={badge.variant || 'default'} size=\"sm\">\n                {badge.label}\n              </Badge>\n            ))}\n          </div>\n        )}\n\n        {/* CTA Button */}\n        {action.ctaLabel && (\n          <Button\n            onClick={action.onCtaClick}\n            disabled={action.ctaDisabled}\n            isLoading={action.ctaLoading}\n            leftIcon={action.ctaIcon}\n            className=\"w-full mt-auto\"\n          >\n            {action.ctaLabel}\n          </Button>\n        )}\n      </div>\n    )\n  }\n\n  // Basic card mode (original behavior)\n  return (\n    <div\n      className={cn(\n        'bg-white',\n        paddingStyles[padding],\n        shadowStyles[shadow],\n        roundedStyles[rounded],\n        border && 'border border-slate-200',\n        hover && 'hover:shadow-md transition-shadow',\n        className\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\n// Grid layout for cards\nexport interface CardGridProps {\n  children: ReactNode\n  columns?: 1 | 2 | 3 | 4\n  gap?: 'sm' | 'md' | 'lg'\n  className?: string\n}\n\nconst columnStyles = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-1 md:grid-cols-2',\n  3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',\n  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',\n}\n\nconst gapStyles = {\n  sm: 'gap-2',\n  md: 'gap-3',\n  lg: 'gap-4',\n}\n\nexport function CardGrid({ children, columns = 2, gap = 'md', className }: CardGridProps) {\n  return (\n    <div className={cn('grid', columnStyles[columns], gapStyles[gap], className)}>{children}</div>\n  )\n}\n"],"names":["paddingStyles","shadowStyles","roundedStyles","valueSizeStyles","Card","children","padding","shadow","rounded","border","hover","stat","action","className","trendColor","_a","_b","jsxs","cn","jsx","Badge","metric","idx","badge","Button","columnStyles","gapStyles","CardGrid","columns","gap"],"mappings":";;;;AA8DA,MAAMA,IAAgB;AAAA,EACpB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAe;AAAA,EACnB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAgB;AAAA,EACpB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT,GAEMC,IAAkB;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,SAASC,EAAK;AAAA,EACnB,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,GAAkB;;AAEhB,MAAIF,GAAM;AACR,UAAMG,MACJC,IAAAJ,EAAK,UAAL,gBAAAI,EAAY,eAAc,OACtB,qBACAC,IAAAL,EAAK,UAAL,gBAAAK,EAAY,eAAc,SACxB,iBACA;AAER,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAlB,EAAcM,CAAO;AAAA,UACrBL,EAAaM,CAAM;AAAA,UACnBL,EAAcM,CAAO;AAAA,UACrBC,KAAU;AAAA,UACVC,KAAS;AAAA,UACTG;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,YAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,cAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,2CAA2C,UAAAR,EAAK,OAAM;AAAA,cACtE,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD;AAAA,oBACT;AAAA,oBACAf,EAAgBQ,EAAK,QAAQ,IAAI;AAAA,kBAAA;AAAA,kBAGlC,UAAAA,EAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEPA,EAAK,WAAW,gBAAAQ,EAAC,UAAK,WAAU,+BAA+B,YAAK,QAAA,CAAQ;AAAA,YAAA,GAC/E;AAAA,YACCR,EAAK,QAAQ,gBAAAQ,EAAC,SAAI,WAAU,iBAAiB,YAAK,KAAA,CAAK;AAAA,UAAA,GAC1D;AAAA,UACCR,EAAK,SACJ,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAG,oDAAoDJ,CAAU,GAC9E,UAAA;AAAA,YAAAH,EAAK,MAAM,cAAc,QAAQ;AAAA,YACjCA,EAAK,MAAM,cAAc,UAAU;AAAA,YACnCA,EAAK,MAAM,cAAc,YAAY;AAAA,YACrCA,EAAK,MAAM,2BAAU,QAAA,EAAM,UAAAA,EAAK,MAAM,MAAA,CAAM;AAAA,UAAA,GAC/C;AAAA,UAEDN;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAGA,SAAIO,IAEA,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAlB,EAAcM,CAAO;AAAA,QACrBL,EAAaM,CAAM;AAAA,QACnBL,EAAcM,CAAO;AAAA,QACrBC,KAAU;AAAA,QACVC,KAAS;AAAA,QACTG;AAAA,MAAA;AAAA,MAIA,UAAA;AAAA,SAAAD,EAAO,SAASA,EAAO,WACvB,gBAAAK,EAAC,OAAA,EAAI,WAAU,+CACZ,UAAA;AAAA,UAAAL,EAAO,SACN,gBAAAO,EAAC,MAAA,EAAG,WAAU,0CAA0C,YAAO,OAAM;AAAA,UAEtEP,EAAO,UACN,gBAAAO,EAACC,GAAA,EAAM,SAASR,EAAO,OAAO,WAAW,WAAW,MAAK,MACtD,UAAAA,EAAO,OAAO,MAAA,CACjB;AAAA,QAAA,GAEJ;AAAA,QAIDA,EAAO,eACN,gBAAAO,EAAC,OAAE,WAAU,4DACV,YAAO,aACV;AAAA,QAIDP,EAAO,WAAWA,EAAO,QAAQ,SAAS,uBACxC,OAAA,EAAI,WAAU,yBACZ,UAAAA,EAAO,QAAQ,IAAI,CAACS,GAAQC,MAC3B,gBAAAL,EAAC,OAAA,EAAc,WAAU,gCACvB,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAE,EAAO,OAAM;AAAA,UAC/C,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,EAAG,iBAAiBG,EAAO,YAAY,iBAAiB,gBAAgB;AAAA,cAElF,UAAAA,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACV,KANQC,CAOV,CACD,GACH;AAAA,QAIDjB,KAAY,gBAAAc,EAAC,OAAA,EAAI,WAAU,UAAU,UAAAd,GAAS;AAAA,QAG9CO,EAAO,UAAUA,EAAO,OAAO,SAAS,KACvC,gBAAAO,EAAC,OAAA,EAAI,WAAU,+BACZ,UAAAP,EAAO,OAAO,IAAI,CAACW,GAAOD,MACzB,gBAAAH,EAACC,GAAA,EAAgB,SAASG,EAAM,WAAW,WAAW,MAAK,MACxD,UAAAA,EAAM,MAAA,GADGD,CAEZ,CACD,GACH;AAAA,QAIDV,EAAO,YACN,gBAAAO;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAASZ,EAAO;AAAA,YAChB,UAAUA,EAAO;AAAA,YACjB,WAAWA,EAAO;AAAA,YAClB,UAAUA,EAAO;AAAA,YACjB,WAAU;AAAA,YAET,UAAAA,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACV;AAAA,IAAA;AAAA,EAAA,IAQN,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD;AAAA,QACT;AAAA,QACAlB,EAAcM,CAAO;AAAA,QACrBL,EAAaM,CAAM;AAAA,QACnBL,EAAcM,CAAO;AAAA,QACrBC,KAAU;AAAA,QACVC,KAAS;AAAA,QACTG;AAAA,MAAA;AAAA,MAGD,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP;AAUA,MAAMoB,IAAe;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL,GAEMC,IAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,SAASC,EAAS,EAAE,UAAAtB,GAAU,SAAAuB,IAAU,GAAG,KAAAC,IAAM,MAAM,WAAAhB,KAA4B;AACxF,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAG,QAAQO,EAAaG,CAAO,GAAGF,EAAUG,CAAG,GAAGhB,CAAS,GAAI,UAAAR,EAAA,CAAS;AAE5F;"}

package/dist/index22.js

@@ -1,53 +1,21 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { cn as i } from "./index3.js";
-import { CheckIcon as l } from "@heroicons/react/20/solid";
-const f = d(
-  ({ className: c, label: e, description: s, id: m, checked: o, ...n }, p) => {
-    const a = m || (e == null ? void 0 : e.toLowerCase().replace(/\s+/g, "-"));
-    return /* @__PURE__ */ t(
-      "label",
-      {
-        htmlFor: a,
-        className: i("flex items-start gap-3 cursor-pointer group", c),
-        children: [
-          /* @__PURE__ */ t("div", { className: "relative flex-shrink-0 mt-0.5", children: [
-            /* @__PURE__ */ r(
-              "input",
-              {
-                ref: p,
-                type: "checkbox",
-                id: a,
-                checked: o,
-                className: "peer sr-only",
-                ...n
-              }
-            ),
-            /* @__PURE__ */ r(
-              "div",
-              {
-                className: i(
-                  "h-5 w-5 rounded border-2 transition-colors duration-200",
-                  "flex items-center justify-center",
-                  "peer-focus:ring-2 peer-focus:ring-primary-500 peer-focus:ring-offset-2",
-                  "peer-disabled:opacity-50 peer-disabled:cursor-not-allowed",
-                  o ? "bg-primary-500 border-primary-500" : "bg-white border-slate-300 group-hover:border-slate-400"
-                ),
-                children: o && /* @__PURE__ */ r(l, { className: "h-3.5 w-3.5 text-white" })
-              }
-            )
-          ] }),
-          (e || s) && /* @__PURE__ */ t("div", { className: "flex flex-col", children: [
-            e && /* @__PURE__ */ r("span", { className: "text-sm font-medium text-slate-900", children: e }),
-            s && /* @__PURE__ */ r("span", { className: "text-sm text-slate-500", children: s })
-          ] })
-        ]
-      }
-    );
-  }
-);
-f.displayName = "Checkbox";
+import { jsx as r } from "react/jsx-runtime";
+import { cn as m } from "./index3.js";
+function n({
+  children: t,
+  className: e
+}) {
+  return /* @__PURE__ */ r(
+    "h4",
+    {
+      className: m(
+        "text-base font-medium text-slate-900",
+        e
+      ),
+      children: t
+    }
+  );
+}
 export {
-  f as Checkbox
+  n as CardHeading
 };
 //# sourceMappingURL=index22.js.map

package/dist/index22.js.map

@@ -1 +1 @@
-{"version":3,"file":"index22.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes } from 'react'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@heroicons/react/20/solid'\n\nexport interface CheckboxProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  label?: string\n  description?: string\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, label, description, id, checked, ...props }, ref) => {\n    const checkboxId = id || label?.toLowerCase().replace(/\\s+/g, '-')\n\n    return (\n      <label\n        htmlFor={checkboxId}\n        className={cn('flex items-start gap-3 cursor-pointer group', className)}\n      >\n        <div className=\"relative flex-shrink-0 mt-0.5\">\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={checkboxId}\n            checked={checked}\n            className=\"peer sr-only\"\n            {...props}\n          />\n          <div\n            className={cn(\n              'h-5 w-5 rounded border-2 transition-colors duration-200',\n              'flex items-center justify-center',\n              'peer-focus:ring-2 peer-focus:ring-primary-500 peer-focus:ring-offset-2',\n              'peer-disabled:opacity-50 peer-disabled:cursor-not-allowed',\n              checked\n                ? 'bg-primary-500 border-primary-500'\n                : 'bg-white border-slate-300 group-hover:border-slate-400'\n            )}\n          >\n            {checked && <CheckIcon className=\"h-3.5 w-3.5 text-white\" />}\n          </div>\n        </div>\n        {(label || description) && (\n          <div className=\"flex flex-col\">\n            {label && (\n              <span className=\"text-sm font-medium text-slate-900\">{label}</span>\n            )}\n            {description && (\n              <span className=\"text-sm text-slate-500\">{description}</span>\n            )}\n          </div>\n        )}\n      </label>\n    )\n  }\n)\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["Checkbox","forwardRef","className","label","description","id","checked","props","ref","checkboxId","jsxs","cn","jsx","CheckIcon"],"mappings":";;;;AAUO,MAAMA,IAAWC;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,IAAAC,GAAI,SAAAC,GAAS,GAAGC,EAAA,GAASC,MAAQ;AACjE,UAAMC,IAAaJ,MAAMF,KAAA,gBAAAA,EAAO,cAAc,QAAQ,QAAQ;AAE9D,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASD;AAAA,QACT,WAAWE,EAAG,+CAA+CT,CAAS;AAAA,QAEtE,UAAA;AAAA,UAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAAJ;AAAA,gBACA,MAAK;AAAA,gBACL,IAAIC;AAAA,gBACJ,SAAAH;AAAA,gBACA,WAAU;AAAA,gBACT,GAAGC;AAAA,cAAA;AAAA,YAAA;AAAA,YAEN,gBAAAK;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWD;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACAL,IACI,sCACA;AAAA,gBAAA;AAAA,gBAGL,UAAAA,KAAW,gBAAAM,EAACC,GAAA,EAAU,WAAU,yBAAA,CAAyB;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5D,GACF;AAAA,WACEV,KAASC,MACT,gBAAAM,EAAC,OAAA,EAAI,WAAU,iBACZ,UAAA;AAAA,YAAAP,KACC,gBAAAS,EAAC,QAAA,EAAK,WAAU,sCAAsC,UAAAT,GAAM;AAAA,YAE7DC,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAR,EAAA,CAAY;AAAA,UAAA,EAAA,CAE1D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEAJ,EAAS,cAAc;"}
+{"version":3,"file":"index22.js","sources":["../src/components/Typography/CardHeading.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\nimport type { ReactNode } from 'react'\n\nexport interface CardHeadingProps {\n  children: ReactNode\n  className?: string\n}\n\nexport function CardHeading({\n  children,\n  className,\n}: CardHeadingProps) {\n  return (\n    <h4\n      className={cn(\n        'text-base font-medium text-slate-900',\n        className\n      )}\n    >\n      {children}\n    </h4>\n  )\n}\n"],"names":["CardHeading","children","className","jsx","cn"],"mappings":";;AAQO,SAASA,EAAY;AAAA,EAC1B,UAAAC;AAAA,EACA,WAAAC;AACF,GAAqB;AACnB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}