@jiwambe/components 0.3.4 → 0.3.6

package/dist/components/Card/Card.d.ts

@@ -1,54 +1,68 @@
 import { default as React } from 'react';
 /**
- * Card layout type. 'text-only' — no image; 'media-horizontal' — image above content, video aspect;
- * 'media-vertical' — image above content, 4:3 aspect.
+ * Props for the Card component.
  */
-export type CardType = 'text-only' | 'media-horizontal' | 'media-vertical';
-/**
- * Props for the Card component. Title is required; image and action are optional.
- */
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Layout: text-only, or media with horizontal/vertical image aspect. @default 'text-only' */
-    type?: CardType;
-    /** Image source URL. Required when type is media-horizontal or media-vertical. @default undefined */
-    imageSrc?: string;
-    /** Image alt text for accessibility. @default '' */
-    imageAlt?: string;
-    /** Width for next/image. @default 600 */
-    imageWidth?: number;
-    /** Height for next/image. @default 400 */
-    imageHeight?: number;
-    /** Next.js image quality (1-100). @default undefined */
-    imageQuality?: number;
-    /** Bypass Next.js image optimization. Useful for small sharp PNGs. @default false */
-    imageUnoptimized?: boolean;
-    /** Overlay message displayed centered on the image. @default undefined */
-    message?: string;
-    /** Card title (required). Rendered as heading. */
-    title: string;
-    /** Card description text below the title. @default undefined */
-    description?: string;
-    /** Label for the action button or link. @default undefined */
-    label?: string;
-    /** Called when the action button is clicked (when labelHref is not set). @default undefined */
-    onLabelClick?: () => void;
-    /** When set, the action renders as a link to this href. @default undefined */
-    labelHref?: string;
-    /** Component to render the action link as (e.g. next/link). @default 'a' */
-    linkAs?: React.ElementType;
-    /** Forwarded ref for the root div. @default undefined */
-    ref?: React.Ref<HTMLDivElement>;
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /**
+     * Visual style of the card.
+     * - 'outlined' — border, no shadow (border-border-light)
+     * - 'elevated' — shadow, no border (elevation-normal)
+     * Defaults to 'outlined'.
+     */
+    variant?: 'outlined' | 'elevated';
+    /**
+     * When true, the card renders as a <button> element and is
+     * fully keyboard and pointer interactive. Adds hover elevation
+     * effect and focus ring styles.
+     * Defaults to false.
+     */
+    clickable?: boolean;
+    /**
+     * Controlled selected state. Only relevant when clickable is true.
+     * Applies a selected visual treatment (border-border-focus +
+     * bg-fill-bg-secondary).
+     */
+    selected?: boolean;
+    /**
+     * Called when a clickable card is activated (click or Enter/Space).
+     * Only fires when clickable is true.
+     */
+    onSelect?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Disables interaction when clickable is true.
+     * Applies opacity-50 and suppresses hover/focus styles.
+     */
+    disabled?: boolean;
+    /**
+     * Accepts any content — components, elements, or plain text.
+     * The card places no constraints on what is rendered inside.
+     */
+    children?: React.ReactNode;
+    className?: string;
 }
 /**
- * Card with optional image, title, description, and action. Renders a bordered container
- * with design-token styling. Use for product cards, feature highlights, or content blocks.
- * For image-only or custom layouts use Box or a custom component.
+ * A general-purpose Card component built using Jiwambe design tokens.
+ *
+ * @example
+ * // Presentational
+ * <Card variant="elevated">
+ *   <Typography variant="title-sm">Hello</Typography>
+ *   <Typography variant="text-sm">Any content here.</Typography>
+ * </Card>
  *
  * @example
- * <Card title="Feature" description="Description here." type="text-only" />
+ * // Clickable with DataTable inside
+ * <Card variant="outlined" clickable onSelect={handleSelect}>
+ *   <DataTable rows={rows} columns={columns} />
+ * </Card>
  *
  * @example
- * <Card type="media-horizontal" imageSrc="/img.jpg" imageAlt="Product" title="Product" label="View" labelHref="/product" />
+ * // Clickable with LineGraph inside
+ * <Card variant="elevated" clickable selected={isSelected}>
+ *   <LineGraph series={series} title="Revenue" />
+ * </Card>
  */
-export declare function Card({ type, imageSrc, imageAlt, imageWidth, imageHeight, imageQuality, imageUnoptimized, message, title, description, label, onLabelClick, labelHref, linkAs, className, ref, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ variant, clickable, selected, onSelect, disabled, children, className, ref, ...props }: CardProps & {
+    ref?: React.Ref<HTMLElement>;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Card.d.ts.map

package/dist/components/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,8FAA8F;IAC9F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+FAA+F;IAC/F,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC3B,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAmFD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAkB,EAClB,QAAQ,EACR,QAAa,EACb,UAAgB,EAChB,WAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,OAAO,EACP,KAAK,EACL,WAAW,EACX,KAAK,EACL,YAAY,EACZ,SAAS,EACT,MAAM,EACN,SAAc,EACd,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CAgDX"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACvF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;IACjC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,KAAK,IAAI,CAAA;IAC9D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAoB,EACpB,SAAiB,EACjB,QAAgB,EAChB,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAAE,2CAsD9C"}

package/dist/components/Card/Card.js

@@ -1,97 +1,59 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import Image from "next/image";
-function CardImage({
-  src,
-  alt,
-  ratio,
-  message,
-  width,
-  height,
-  quality,
-  unoptimized
-}) {
-  const aspectClass = ratio === "horizontal" ? "aspect-video" : "aspect-[4/3]";
-  return /* @__PURE__ */ jsxs("div", { className: `relative w-full overflow-hidden rounded-t-rad-md ${aspectClass}`, children: [
-    /* @__PURE__ */ jsx(
-      Image,
-      {
-        src,
-        alt,
-        width,
-        height,
-        quality,
-        unoptimized,
-        className: "h-full w-full object-cover"
-      }
-    ),
-    message && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-fill-bg-dimmer", children: /* @__PURE__ */ jsx("span", { className: "text-title-lg text-text-primary-inverse text-center leading-[1.1] px-space-fluid-4-8", children: message }) })
-  ] });
-}
-function CardAction({
-  label,
-  onClick,
-  href,
-  linkAs
-}) {
-  const classes = "inline-flex items-center justify-center h-12 min-h-12 rounded-rad-md px-space-5 text-btn-reg bg-fill-action-primary text-text-action-primary hover:bg-fill-action-primary-hover active:bg-fill-action-primary-active transition-colors";
-  if (href) {
-    const LinkComponent = linkAs || "a";
-    return /* @__PURE__ */ jsx(LinkComponent, { href, className: classes, children: label });
-  }
-  return /* @__PURE__ */ jsx("button", { type: "button", onClick, className: classes, children: label });
-}
+"use client";
+import { jsx } from "react/jsx-runtime";
 function Card({
-  type = "text-only",
-  imageSrc,
-  imageAlt = "",
-  imageWidth = 600,
-  imageHeight = 400,
-  imageQuality,
-  imageUnoptimized,
-  message,
-  title,
-  description,
-  label,
-  onLabelClick,
-  labelHref,
-  linkAs,
-  className = "",
+  variant = "outlined",
+  clickable = false,
+  selected = false,
+  onSelect,
+  disabled = false,
+  children,
+  className,
   ref,
-  ...rest
+  ...props
 }) {
-  const isMedia = type !== "text-only";
-  const ratio = type === "media-vertical" ? "vertical" : "horizontal";
-  const rootClasses = [
-    "flex flex-col rounded-rad-md overflow-hidden",
-    isMedia ? "bg-fill-bg-secondary pb-space-fluid-4-8 gap-space-fluid-4-6" : "bg-fill-bg-primary border border-border-light",
+  const isButton = clickable;
+  const Root = isButton ? "button" : "div";
+  const baseClasses = "rounded-rad-md bg-fill-bg-primary overflow-hidden p-space-4";
+  const variantClasses = variant === "outlined" ? "border border-border-light" : "elevation-normal";
+  const clickableClasses = clickable ? [
+    "cursor-pointer transition-all duration-trans-duration-normal ease-trans-timing-normal",
+    !disabled && (variant === "outlined" ? "hover:border-border-heavy" : "hover:scale-[1.01] hover:elevation-normal"),
+    "focus-visible:outline-none ring-2 ring-border-focus ring-offset-2",
+    disabled && "opacity-50 cursor-not-allowed pointer-events-none"
+  ] : [];
+  const selectedClasses = clickable && selected ? "border-border-focus bg-fill-bg-secondary" : "";
+  const combinedClasses = [
+    baseClasses,
+    variant === "outlined" && !selected ? variantClasses : "",
+    // selected overrides variant border
+    variant === "elevated" ? variantClasses : "",
+    ...clickableClasses,
+    selectedClasses,
     className
   ].filter(Boolean).join(" ");
-  const contentClasses = [
-    "flex flex-col text-text-primary",
-    isMedia ? "gap-space-fluid-4-6 px-space-fluid-4-8" : "gap-space-3 p-space-4"
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { ref, className: rootClasses, ...rest, children: [
-    isMedia && imageSrc && /* @__PURE__ */ jsx(
-      CardImage,
-      {
-        src: imageSrc,
-        alt: imageAlt,
-        ratio,
-        message,
-        width: imageWidth,
-        height: imageHeight,
-        quality: imageQuality,
-        unoptimized: imageUnoptimized
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: contentClasses, children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-title-md leading-[1.2] tracking-[0.19px]", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "text-text-md leading-[1.4]", children: description })
-      ] }),
-      label && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CardAction, { label, onClick: onLabelClick, href: labelHref, linkAs }) })
-    ] })
-  ] });
+  const handleAction = (e) => {
+    if (clickable && !disabled && onSelect) {
+      onSelect(e);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      ref,
+      type: isButton ? "button" : void 0,
+      className: combinedClasses,
+      onClick: clickable ? handleAction : void 0,
+      onKeyDown: clickable ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleAction(e);
+        }
+      } : void 0,
+      disabled: isButton ? disabled : void 0,
+      ...props,
+      children
+    }
+  );
 }
 export {
   Card

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport Image from 'next/image';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * Card layout type. 'text-only' — no image; 'media-horizontal' — image above content, video aspect;\n * 'media-vertical' — image above content, 4:3 aspect.\n */\nexport type CardType = 'text-only' | 'media-horizontal' | 'media-vertical';\n\n/**\n * Props for the Card component. Title is required; image and action are optional.\n */\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Layout: text-only, or media with horizontal/vertical image aspect. @default 'text-only' */\n  type?: CardType;\n  /** Image source URL. Required when type is media-horizontal or media-vertical. @default undefined */\n  imageSrc?: string;\n  /** Image alt text for accessibility. @default '' */\n  imageAlt?: string;\n  /** Width for next/image. @default 600 */\n  imageWidth?: number;\n  /** Height for next/image. @default 400 */\n  imageHeight?: number;\n  /** Next.js image quality (1-100). @default undefined */\n  imageQuality?: number;\n  /** Bypass Next.js image optimization. Useful for small sharp PNGs. @default false */\n  imageUnoptimized?: boolean;\n  /** Overlay message displayed centered on the image. @default undefined */\n  message?: string;\n  /** Card title (required). Rendered as heading. */\n  title: string;\n  /** Card description text below the title. @default undefined */\n  description?: string;\n  /** Label for the action button or link. @default undefined */\n  label?: string;\n  /** Called when the action button is clicked (when labelHref is not set). @default undefined */\n  onLabelClick?: () => void;\n  /** When set, the action renders as a link to this href. @default undefined */\n  labelHref?: string;\n  /** Component to render the action link as (e.g. next/link). @default 'a' */\n  linkAs?: React.ElementType;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Sub-components\n// ---------------------------------------------------------------------------\n\nfunction CardImage({\n  src,\n  alt,\n  ratio,\n  message,\n  width,\n  height,\n  quality,\n  unoptimized,\n}: {\n  src: string;\n  alt: string;\n  ratio: 'horizontal' | 'vertical';\n  message?: string;\n  width: number;\n  height: number;\n  quality?: number;\n  unoptimized?: boolean;\n}) {\n  const aspectClass = ratio === 'horizontal' ? 'aspect-video' : 'aspect-[4/3]';\n\n  return (\n    <div className={`relative w-full overflow-hidden rounded-t-rad-md ${aspectClass}`}>\n      <Image\n        src={src}\n        alt={alt}\n        width={width}\n        height={height}\n        quality={quality}\n        unoptimized={unoptimized}\n        className=\"h-full w-full object-cover\"\n      />\n      {message && (\n        <div className=\"absolute inset-0 flex items-center justify-center bg-fill-bg-dimmer\">\n          <span className=\"text-title-lg text-text-primary-inverse text-center leading-[1.1] px-space-fluid-4-8\">\n            {message}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction CardAction({\n  label,\n  onClick,\n  href,\n  linkAs,\n}: {\n  label: string;\n  onClick?: () => void;\n  href?: string;\n  linkAs?: React.ElementType;\n}) {\n  const classes =\n    'inline-flex items-center justify-center h-12 min-h-12 rounded-rad-md px-space-5 text-btn-reg bg-fill-action-primary text-text-action-primary hover:bg-fill-action-primary-hover active:bg-fill-action-primary-active transition-colors';\n\n  if (href) {\n    const LinkComponent = linkAs || 'a';\n    return (\n      <LinkComponent href={href} className={classes}>\n        {label}\n      </LinkComponent>\n    );\n  }\n\n  return (\n    <button type=\"button\" onClick={onClick} className={classes}>\n      {label}\n    </button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Card\n// ---------------------------------------------------------------------------\n\n/**\n * Card with optional image, title, description, and action. Renders a bordered container\n * with design-token styling. Use for product cards, feature highlights, or content blocks.\n * For image-only or custom layouts use Box or a custom component.\n *\n * @example\n * <Card title=\"Feature\" description=\"Description here.\" type=\"text-only\" />\n *\n * @example\n * <Card type=\"media-horizontal\" imageSrc=\"/img.jpg\" imageAlt=\"Product\" title=\"Product\" label=\"View\" labelHref=\"/product\" />\n */\nexport function Card({\n  type = 'text-only',\n  imageSrc,\n  imageAlt = '',\n  imageWidth = 600,\n  imageHeight = 400,\n  imageQuality,\n  imageUnoptimized,\n  message,\n  title,\n  description,\n  label,\n  onLabelClick,\n  labelHref,\n  linkAs,\n  className = '',\n  ref,\n  ...rest\n}: CardProps) {\n  const isMedia = type !== 'text-only';\n  const ratio = type === 'media-vertical' ? 'vertical' : 'horizontal';\n\n  const rootClasses = [\n    'flex flex-col rounded-rad-md overflow-hidden',\n    isMedia ? 'bg-fill-bg-secondary pb-space-fluid-4-8 gap-space-fluid-4-6' : 'bg-fill-bg-primary border border-border-light',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const contentClasses = [\n    'flex flex-col text-text-primary',\n    isMedia ? 'gap-space-fluid-4-6 px-space-fluid-4-8' : 'gap-space-3 p-space-4',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div ref={ref} className={rootClasses} {...rest}>\n      {isMedia && imageSrc && (\n        <CardImage\n          src={imageSrc}\n          alt={imageAlt}\n          ratio={ratio}\n          message={message}\n          width={imageWidth}\n          height={imageHeight}\n          quality={imageQuality}\n          unoptimized={imageUnoptimized}\n        />\n      )}\n\n      <div className={contentClasses}>\n        <div className=\"flex flex-col gap-space-1\">\n          <h3 className=\"text-title-md leading-[1.2] tracking-[0.19px]\">{title}</h3>\n          {description && <p className=\"text-text-md leading-[1.4]\">{description}</p>}\n        </div>\n\n        {label && (\n          <div>\n            <CardAction label={label} onClick={onLabelClick} href={labelHref} linkAs={linkAs} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAqDA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,QAAM,cAAc,UAAU,eAAe,iBAAiB;AAE9D,SACE,qBAAC,OAAA,EAAI,WAAW,oDAAoD,WAAW,IAC7E,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEX,WACC,oBAAC,OAAA,EAAI,WAAU,uEACb,8BAAC,QAAA,EAAK,WAAU,wFACb,UAAA,QAAA,CACH,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,UACJ;AAEF,MAAI,MAAM;AACR,UAAM,gBAAgB,UAAU;AAChC,WACE,oBAAC,eAAA,EAAc,MAAY,WAAW,SACnC,UAAA,OACH;AAAA,EAEJ;AAEA,6BACG,UAAA,EAAO,MAAK,UAAS,SAAkB,WAAW,SAChD,UAAA,OACH;AAEJ;AAiBO,SAAS,KAAK;AAAA,EACnB,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,UAAU,SAAS;AACzB,QAAM,QAAQ,SAAS,mBAAmB,aAAa;AAEvD,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,UAAU,gEAAgE;AAAA,IAC1E;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA,UAAU,2CAA2C;AAAA,EAAA,EAEpD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,8BACG,OAAA,EAAI,KAAU,WAAW,aAAc,GAAG,MACxC,UAAA;AAAA,IAAA,WAAW,YACV;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,aAAa;AAAA,MAAA;AAAA,IAAA;AAAA,IAIjB,qBAAC,OAAA,EAAI,WAAW,gBACd,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,iDAAiD,UAAA,OAAM;AAAA,QACpE,eAAe,oBAAC,KAAA,EAAE,WAAU,8BAA8B,UAAA,YAAA,CAAY;AAAA,MAAA,GACzE;AAAA,MAEC,SACC,oBAAC,OAAA,EACC,UAAA,oBAAC,YAAA,EAAW,OAAc,SAAS,cAAc,MAAM,WAAW,OAAA,CAAgB,EAAA,CACpF;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\n/**\n * Props for the Card component.\n */\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /**\n   * Visual style of the card.\n   * - 'outlined' — border, no shadow (border-border-light)\n   * - 'elevated' — shadow, no border (elevation-normal)\n   * Defaults to 'outlined'.\n   */\n  variant?: 'outlined' | 'elevated'\n  /**\n   * When true, the card renders as a <button> element and is \n   * fully keyboard and pointer interactive. Adds hover elevation \n   * effect and focus ring styles.\n   * Defaults to false.\n   */\n  clickable?: boolean\n  /**\n   * Controlled selected state. Only relevant when clickable is true.\n   * Applies a selected visual treatment (border-border-focus + \n   * bg-fill-bg-secondary).\n   */\n  selected?: boolean\n  /**\n   * Called when a clickable card is activated (click or Enter/Space).\n   * Only fires when clickable is true.\n   */\n  onSelect?: (e: React.MouseEvent | React.KeyboardEvent) => void\n  /**\n   * Disables interaction when clickable is true.\n   * Applies opacity-50 and suppresses hover/focus styles.\n   */\n  disabled?: boolean\n  /**\n   * Accepts any content — components, elements, or plain text.\n   * The card places no constraints on what is rendered inside.\n   */\n  children?: React.ReactNode\n  className?: string\n}\n\n/**\n * A general-purpose Card component built using Jiwambe design tokens.\n * \n * @example\n * // Presentational\n * <Card variant=\"elevated\">\n *   <Typography variant=\"title-sm\">Hello</Typography>\n *   <Typography variant=\"text-sm\">Any content here.</Typography>\n * </Card>\n * \n * @example\n * // Clickable with DataTable inside\n * <Card variant=\"outlined\" clickable onSelect={handleSelect}>\n *   <DataTable rows={rows} columns={columns} />\n * </Card>\n * \n * @example\n * // Clickable with LineGraph inside\n * <Card variant=\"elevated\" clickable selected={isSelected}>\n *   <LineGraph series={series} title=\"Revenue\" />\n * </Card>\n */\nexport function Card({\n  variant = 'outlined',\n  clickable = false,\n  selected = false,\n  onSelect,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...props\n}: CardProps & { ref?: React.Ref<HTMLElement> }) {\n  const isButton = clickable\n  const Root = isButton ? 'button' : 'div'\n\n  const baseClasses = 'rounded-rad-md bg-fill-bg-primary overflow-hidden p-space-4'\n  \n  const variantClasses = variant === 'outlined' \n    ? 'border border-border-light' \n    : 'elevation-normal'\n\n  const clickableClasses = clickable ? [\n    'cursor-pointer transition-all duration-trans-duration-normal ease-trans-timing-normal',\n    !disabled && (variant === 'outlined' ? 'hover:border-border-heavy' : 'hover:scale-[1.01] hover:elevation-normal'),\n    'focus-visible:outline-none ring-2 ring-border-focus ring-offset-2',\n    disabled && 'opacity-50 cursor-not-allowed pointer-events-none'\n  ] : []\n\n  const selectedClasses = (clickable && selected) \n    ? 'border-border-focus bg-fill-bg-secondary' \n    : ''\n\n  const combinedClasses = [\n    baseClasses,\n    variant === 'outlined' && !selected ? variantClasses : '', // selected overrides variant border\n    variant === 'elevated' ? variantClasses : '',\n    ...clickableClasses,\n    selectedClasses,\n    className\n  ].filter(Boolean).join(' ')\n\n  const handleAction = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {\n    if (clickable && !disabled && onSelect) {\n      onSelect(e as any)\n    }\n  }\n\n  return (\n    <Root\n      ref={ref as any}\n      type={isButton ? 'button' : undefined}\n      className={combinedClasses}\n      onClick={clickable ? (handleAction as any) : undefined}\n      onKeyDown={clickable ? ((e: React.KeyboardEvent<HTMLElement>) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault()\n          handleAction(e)\n        }\n      }) as any : undefined}\n      disabled={isButton ? disabled : undefined}\n      {...(props as any)}\n    >\n      {children}\n    </Root>\n  )\n}\n"],"names":[],"mappings":";;AAoEO;AAAc;AACT;AACE;AACD;AACX;AACW;AACX;AACA;AACA;AAEF;AACE;AACA;AAEA;AAEA;AAIA;AAAqC;AACnC;AACqE;AACrE;AACY;AAGd;AAIA;AAAwB;AACtB;AACuD;AAAA;AACb;AACvC;AACH;AACA;AAGF;AACE;AACE;AAAiB;AACnB;AAGF;AACE;AAAC;AAAA;AACC;AAC4B;AACjB;AACkC;AAE3C;AACE;AACA;AAAc;AAChB;AACU;AACoB;AAC3B;AAEJ;AAAA;AAGP;;;;"}

package/dist/components/Card/Card.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Card.test.d.ts.map

package/dist/components/Card/Card.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.test.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.test.tsx"],"names":[],"mappings":""}

package/dist/components/CheckboxGroup/CheckboxGroup.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CheckboxGroup.test.d.ts.map

package/dist/components/CheckboxGroup/CheckboxGroup.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.test.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.test.tsx"],"names":[],"mappings":""}

package/dist/components/Container/Container.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Container.test.d.ts.map

package/dist/components/Container/Container.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.test.d.ts","sourceRoot":"","sources":["../../../src/components/Container/Container.test.tsx"],"names":[],"mappings":""}

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,74 @@
+import { DataTableToolbar, DataTableTab } from './DataTableToolbar';
+import { DataTableHeader, ColumnDef } from './DataTableHeader';
+import { DataTableRow } from './DataTableRow';
+import { DataTablePagination } from './DataTablePagination';
+import { DataTableStatusBadge } from './DataTableStatusBadge';
+import { DataTableReviewerCell } from './DataTableReviewerCell';
+import { DataTableCell } from './DataTableCell';
+import { DataTableRowMenu, DataTableAction } from './DataTableRowMenu';
+/**
+ * Props for the DataTable component.
+ */
+export interface DataTableProps<TRow extends Record<string, unknown>> {
+    /** All rows of data. */
+    rows: TRow[];
+    /** Column definitions. */
+    columns: ColumnDef<TRow>[];
+    /** Tab definitions rendered in the toolbar. @default [] */
+    tabs?: DataTableTab[];
+    /** Currently active tab id. @default undefined */
+    activeTab?: string;
+    /** Fired when the active tab changes. */
+    onTabChange?: (tabId: string) => void;
+    /** Called when row order changes after drag-and-drop. */
+    onRowReorder?: (fromIndex: number, toIndex: number) => void;
+    /** Called when row selection changes. */
+    onSelectionChange?: (selectedRows: TRow[]) => void;
+    /** Controlled page index (0-based). @default 0 */
+    page?: number;
+    /** Fired when the page changes. */
+    onPageChange?: (page: number) => void;
+    /** Controlled rows per page. @default 10 */
+    pageSize?: number;
+    /** Fired when the number of rows per page changes. */
+    onPageSizeChange?: (size: number) => void;
+    /** Total row count for server-side pagination. @default rows.length */
+    totalRows?: number;
+    /** Show skeleton loading rows. @default false */
+    loading?: boolean;
+    /** Number of skeleton rows to render while loading. @default 5 */
+    loadingRowCount?: number;
+    /** Label shown in selection summary. @default 'row(s) selected' */
+    selectionLabel?: string;
+    /** When false, hides row and header checkboxes. @default true */
+    selectable?: boolean;
+    /** Actions for each row’s trailing ⋮ menu (built-in column). */
+    getRowActions?: (row: TRow) => DataTableAction[];
+    /** Additional class names for the wrapper. */
+    className?: string;
+}
+/**
+ * A comprehensive Data Table component with support for tabs, selection,
+ * sorting, pagination, and drag-and-drop reordering. Follows Jiwambe design tokens.
+ *
+ * @example
+ * <DataTable
+ *   rows={data}
+ *   columns={columns}
+ *   tabs={[{ id: 'all', label: 'All', count: 12 }, { id: 'pending', label: 'Pending' }]}
+ *   activeTab="all"
+ *   loading={isLoading}
+ * />
+ */
+export declare function DataTable<TRow extends Record<string, unknown>>({ rows, columns, tabs, activeTab, onTabChange, onRowReorder, onSelectionChange, page, onPageChange, pageSize, onPageSizeChange, totalRows, loading, loadingRowCount, selectionLabel, selectable, getRowActions, className, }: DataTableProps<TRow>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DataTable {
+    var Header: typeof DataTableHeader;
+    var Row: typeof DataTableRow;
+    var Cell: typeof DataTableCell;
+    var Toolbar: typeof DataTableToolbar;
+    var Pagination: typeof DataTablePagination;
+    var StatusBadge: typeof DataTableStatusBadge;
+    var ReviewerCell: typeof DataTableReviewerCell;
+    var RowMenu: typeof DataTableRowMenu;
+}
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/components/DataTable/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE,wBAAwB;IACxB,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,0BAA0B;IAC1B,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;IAC3B,2DAA2D;IAC3D,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,yDAAyD;IACzD,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACnD,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mEAAmE;IACnE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,eAAe,EAAE,CAAC;IACjD,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC9D,IAAI,EACJ,OAAO,EACP,IAAS,EACT,SAAS,EACT,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,IAAQ,EACR,YAAY,EACZ,QAAa,EACb,gBAAgB,EAChB,SAAS,EACT,OAAe,EACf,eAAmB,EACnB,cAAkC,EAClC,UAAiB,EACjB,aAAa,EACb,SAAc,GACf,EAAE,cAAc,CAAC,IAAI,CAAC,2CA0KtB;yBA7Le,SAAS"}

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,183 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { DataTableToolbar } from "./DataTableToolbar.js";
+import { DataTableHeader } from "./DataTableHeader.js";
+import { DataTableRow } from "./DataTableRow.js";
+import { DataTablePagination } from "./DataTablePagination.js";
+import { DataTableStatusBadge } from "./DataTableStatusBadge.js";
+import { DataTableReviewerCell } from "./DataTableReviewerCell.js";
+import { DataTableCell } from "./DataTableCell.js";
+import { DataTableRowMenu } from "./DataTableRowMenu.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+function DataTable({
+  rows,
+  columns,
+  tabs = [],
+  activeTab,
+  onTabChange,
+  onRowReorder,
+  onSelectionChange,
+  page = 0,
+  onPageChange,
+  pageSize = 10,
+  onPageSizeChange,
+  totalRows,
+  loading = false,
+  loadingRowCount = 5,
+  selectionLabel = "row(s) selected",
+  selectable = true,
+  getRowActions,
+  className = ""
+}) {
+  const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
+  const handleSelectRow = useCallback((row, isSelected) => {
+    const idField = "id" in row ? row.id : JSON.stringify(row);
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (isSelected) next.add(idField);
+      else next.delete(idField);
+      const selectedRows = rows.filter((r) => {
+        const rId = "id" in r ? r.id : JSON.stringify(r);
+        return next.has(rId);
+      });
+      onSelectionChange == null ? void 0 : onSelectionChange(selectedRows);
+      return next;
+    });
+  }, [rows, onSelectionChange]);
+  const handleSelectAll = useCallback((isSelected) => {
+    if (isSelected) {
+      const allIds = rows.map((r) => "id" in r ? r.id : JSON.stringify(r));
+      setSelectedIds(new Set(allIds));
+      onSelectionChange == null ? void 0 : onSelectionChange(rows);
+    } else {
+      setSelectedIds(/* @__PURE__ */ new Set());
+      onSelectionChange == null ? void 0 : onSelectionChange([]);
+    }
+  }, [rows, onSelectionChange]);
+  const allSelected = useMemo(
+    () => rows.length > 0 && selectedIds.size === rows.length,
+    [rows.length, selectedIds.size]
+  );
+  const [sortCol, setSortCol] = useState();
+  const [sortDir, setSortDir] = useState();
+  const handleSort = (columnId) => {
+    if (sortCol === columnId) {
+      setSortDir((prev) => prev === "asc" ? "desc" : "asc");
+    } else {
+      setSortCol(columnId);
+      setSortDir("asc");
+    }
+  };
+  const [draggedIndex, setDraggedIndex] = useState(null);
+  const handleDragStart = (e, index) => {
+    setDraggedIndex(index);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", index.toString());
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  };
+  const handleDrop = (e, index) => {
+    e.preventDefault();
+    if (draggedIndex !== null && draggedIndex !== index) {
+      onRowReorder == null ? void 0 : onRowReorder(draggedIndex, index);
+    }
+    setDraggedIndex(null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col w-full border border-border-light rounded-rad-md overflow-hidden bg-fill-bg-primary", className].filter(Boolean).join(" "), children: [
+    (tabs.length > 0 || onTabChange) && /* @__PURE__ */ jsx(
+      DataTableToolbar,
+      {
+        tabs,
+        activeTab,
+        onTabChange,
+        className: "px-space-4"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ jsx(
+        DataTableHeader,
+        {
+          columns,
+          allSelected,
+          onSelectAll: handleSelectAll,
+          sortColumn: sortCol,
+          sortDirection: sortDir,
+          onSort: handleSort,
+          reorderable: !!onRowReorder,
+          selectable
+        }
+      ),
+      /* @__PURE__ */ jsx("tbody", { children: loading ? (
+        // Skeleton Loading State
+        Array.from({ length: loadingRowCount }).map((_, idx) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border-light last:border-none", children: [
+          selectable && /* @__PURE__ */ jsx("td", { className: "p-space-4 w-[80px]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-space-2 text-left", children: [
+            onRowReorder && /* @__PURE__ */ jsx(Skeleton, { width: "1rem", height: "1rem", radius: "xs" }),
+            /* @__PURE__ */ jsx(Skeleton, { width: "1.25rem", height: "1.25rem", radius: "xs" })
+          ] }) }),
+          columns.map((col) => /* @__PURE__ */ jsx("td", { className: "p-space-4", children: /* @__PURE__ */ jsx(Skeleton.Text, { width: "70%" }) }, col.id)),
+          /* @__PURE__ */ jsx("td", { className: "p-space-4 w-[60px]" })
+        ] }, `skeleton-${idx}`))
+      ) : rows.length === 0 ? (
+        // Empty State
+        /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: columns.length + (selectable ? 1 : 0) + 1,
+            className: "p-space-12 text-center text-text-secondary",
+            children: "No data found."
+          }
+        ) })
+      ) : (
+        // Data Rows
+        rows.map((row, idx) => {
+          const id = "id" in row ? row.id : JSON.stringify(row);
+          return /* @__PURE__ */ jsx(
+            DataTableRow,
+            {
+              row,
+              rowIndex: idx,
+              columns,
+              selected: selectedIds.has(id),
+              onSelect: (isSelected) => handleSelectRow(row, isSelected),
+              onDragStart: onRowReorder ? handleDragStart : void 0,
+              onDragOver: onRowReorder ? handleDragOver : void 0,
+              onDrop: onRowReorder ? handleDrop : void 0,
+              reorderable: !!onRowReorder,
+              selectable,
+              actions: (getRowActions == null ? void 0 : getRowActions(row)) ?? []
+            },
+            id
+          );
+        })
+      ) })
+    ] }) }),
+    (onPageChange || onPageSizeChange) && /* @__PURE__ */ jsx(
+      DataTablePagination,
+      {
+        page,
+        pageSize,
+        totalRows: totalRows ?? rows.length,
+        selectedCount: selectedIds.size,
+        selectionLabel,
+        onPageChange,
+        onPageSizeChange,
+        hideSelectionSummary: !selectable
+      }
+    )
+  ] });
+}
+DataTable.Header = DataTableHeader;
+DataTable.Row = DataTableRow;
+DataTable.Cell = DataTableCell;
+DataTable.Toolbar = DataTableToolbar;
+DataTable.Pagination = DataTablePagination;
+DataTable.StatusBadge = DataTableStatusBadge;
+DataTable.ReviewerCell = DataTableReviewerCell;
+DataTable.RowMenu = DataTableRowMenu;
+export {
+  DataTable
+};
+//# sourceMappingURL=DataTable.js.map