@jiwambe/components 0.3.4 → 0.3.5

package/dist/components/ProductCard/ProductCard.d.ts

@@ -20,6 +20,18 @@ export interface ProductCardProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     imageWidth?: number;
     /** Height for next/image (aspect 16:9). @default 162 */
     imageHeight?: number;
+    /**
+     * How the image fills the card image area. `cover` (default) fills the area and crops;
+     * `contain` shows the full image with padding and no crop.
+     * @default 'cover'
+     */
+    imageFit?: 'cover' | 'contain';
+    /**
+     * When imageFit is `cover`, controls which part of the image is visible (e.g. `'center'`, `'top'`).
+     * Ignored when imageFit is `contain`. Accepts any valid CSS object-position value.
+     * @default 'center'
+     */
+    imagePosition?: string;
     /** Show prev/next image nav overlay on hover (e.g. for carousel). @default false */
     showImageNav?: boolean;
     /** Called when the previous image control is clicked. Only relevant when showImageNav is true. */

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

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/ProductCard/ProductCard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/ProductCard/ProductCard.tsx"],"names":[],"mappings":"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"}

package/dist/components/ProductCard/ProductCard.js

@@ -25,6 +25,8 @@ function ProductCardInner({
   imageAlt = "",
   imageWidth = 288,
   imageHeight = 162,
+  imageFit = "cover",
+  imagePosition,
   showImageNav = false,
   onPrevImage,
   onNextImage,
@@ -83,14 +85,24 @@ function ProductCardInner({
             onMouseEnter: () => setImageHover(true),
             onMouseLeave: () => setImageHover(false),
             children: [
-              /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden shrink-0", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden shrink-0 bg-fill-bg-secondary", children: imageFit === "contain" ? /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center p-space-4", children: /* @__PURE__ */ jsx(
                 Image,
                 {
                   src: imageSrc,
                   alt: imageAlt,
                   width: imageWidth,
                   height: imageHeight,
-                  className: "h-full w-full object-cover"
+                  className: "max-h-full max-w-full object-contain"
+                }
+              ) }) : /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: imageSrc,
+                  alt: imageAlt,
+                  width: imageWidth,
+                  height: imageHeight,
+                  className: "h-full w-full object-cover",
+                  style: imagePosition != null ? { objectPosition: imagePosition } : void 0
                 }
               ) }),
               showNav && (onPrevImage ?? onNextImage) && /* @__PURE__ */ jsxs("div", { className: "absolute left-4 right-4 top-1/2 flex -translate-y-1/2 items-center justify-between pointer-events-none", children: [
@@ -131,7 +143,7 @@ function ProductCardInner({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Divider, { variant: "light", className: "my-0" }),
+        /* @__PURE__ */ jsx(Divider, { variant: "light", className: "my-0 mx-space-4" }),
         specs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -143,7 +155,7 @@ function ProductCardInner({
               ] }, i))
             }
           ),
-          /* @__PURE__ */ jsx(Divider, { variant: "light", className: "my-0" })
+          /* @__PURE__ */ jsx(Divider, { variant: "light", className: "my-0 mx-space-4" })
         ] }),
         /* @__PURE__ */ jsxs(
           "div",
@@ -158,7 +170,7 @@ function ProductCardInner({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Divider, { variant: "light", className: "my-0" }),
+        /* @__PURE__ */ jsx(Divider, { variant: "light", className: "my-0 mx-space-4" }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-2 px-space-4", children: [
           variant === "apply" && /* @__PURE__ */ jsxs(Fragment, { children: [
             primaryActionHref != null ? /* @__PURE__ */ jsx(
@@ -166,7 +178,7 @@ function ProductCardInner({
               {
                 href: primaryActionHref,
                 as: linkAs,
-                className: "h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-primary text-text-action-primary hover:bg-fill-action-primary-hover text-btn-small no-underline",
+                className: "flex h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-primary text-text-action-primary hover:bg-fill-action-primary-hover text-btn-small text-base font-medium no-underline",
                 children: primaryLabel
               }
             ) : /* @__PURE__ */ jsx(
@@ -185,7 +197,7 @@ function ProductCardInner({
               {
                 href: secondaryActionHref,
                 as: linkAs,
-                className: "h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-secondary text-text-action-secondary hover:bg-fill-action-secondary-hover text-btn-small no-underline",
+                className: "flex h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-secondary text-text-action-secondary hover:bg-fill-action-secondary-hover text-btn-small text-base font-medium no-underline",
                 children: secondaryLabel
               }
             ) : /* @__PURE__ */ jsx(

package/dist/components/ProductCard/ProductCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.js","sources":["../../../src/components/ProductCard/ProductCard.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport Image from 'next/image';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { Divider } from '../Divider/Divider';\nimport { Link } from '../Link/Link';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * ProductCard variant from Figma: Apply (two CTAs) or Choose (single CTA with selected state).\n * Use variant=\"apply\" for apply + view-details flows; variant=\"choose\" for pick-one flows.\n */\nexport type ProductCardVariant = 'apply' | 'choose';\n\n/** One spec line: plain string or { text, secondary? } for text with muted suffix e.g. \"150km range (full day coverage)\". */\nexport type ProductCardSpec = string | { text: string; secondary?: string };\n\nexport interface ProductCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Which CTA layout to use: apply (two buttons) or choose (one button, optional selected). @default 'apply' */\n  variant?: ProductCardVariant;\n\n  // Image\n  /** Main product image URL. */\n  imageSrc: string;\n  /** Alt text for the image. @default '' */\n  imageAlt?: string;\n  /** Width for next/image. @default 288 */\n  imageWidth?: number;\n  /** Height for next/image (aspect 16:9). @default 162 */\n  imageHeight?: number;\n  /** Show prev/next image nav overlay on hover (e.g. for carousel). @default false */\n  showImageNav?: boolean;\n  /** Called when the previous image control is clicked. Only relevant when showImageNav is true. */\n  onPrevImage?: () => void;\n  /** Called when the next image control is clicked. Only relevant when showImageNav is true. */\n  onNextImage?: () => void;\n\n  // Head\n  /** Product name (e.g. \"Magnus 3000\"). */\n  name: string;\n  /** Brand or model line (e.g. \"Mazi\"). @default undefined */\n  brand?: string;\n  /** Short description or tagline below the name. @default undefined */\n  description?: string;\n\n  // Specs\n  /** List of feature lines; each can be a string or { text, secondary? }. */\n  specs?: ProductCardSpec[];\n\n  // Price\n  /** Daily price label (e.g. \"500 KES\"). */\n  priceDaily: string;\n  /** Optional unit after daily price (e.g. \"/day\"). @default '/day' */\n  priceUnit?: string;\n  /** Total or purchase price (e.g. \"280,732 KES\"). @default undefined */\n  priceTotal?: string;\n\n  // Apply variant — primary and secondary actions (labels configurable by client)\n  /** Label for the primary action button. @default 'Apply now' */\n  primaryActionLabel?: string;\n  /** Label for the secondary action button. @default 'View details' */\n  secondaryActionLabel?: string;\n  /** Called when the primary action is clicked. Used when variant=\"apply\". */\n  onPrimaryAction?: () => void;\n  /** When set, the primary action renders as a link. Used when variant=\"apply\". */\n  primaryActionHref?: string;\n  /** Called when the secondary action is clicked. Used when variant=\"apply\". */\n  onSecondaryAction?: () => void;\n  /** When set, the secondary action renders as a link. Used when variant=\"apply\". */\n  secondaryActionHref?: string;\n\n  // Choose variant\n  /** Label for the choose button when not selected. @default 'Choose' */\n  chooseLabel?: string;\n  /** Label for the choose button when selected. @default 'Selected' */\n  selectedLabel?: string;\n  /** Called when the choose button is clicked. Used when variant=\"choose\". */\n  onChoose?: () => void;\n  /** When true, card shows selected state (heavier border, muted content). Used when variant=\"choose\". @default false */\n  selected?: boolean;\n\n  // Common\n  /** Disables all actions and applies disabled styling. @default false */\n  disabled?: boolean;\n  /** Component to render link-style actions as (e.g. next/link). @default 'a' */\n  linkAs?: React.ElementType;\n  /** Additional class name for the root. */\n  className?: string;\n  /** Forwarded ref for the root div. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction SpecItem({ spec }: { spec: ProductCardSpec }) {\n  if (typeof spec === 'string') {\n    return <span>{spec}</span>;\n  }\n  return (\n    <>\n      <span>{spec.text}</span>\n      {spec.secondary != null && <span className=\"text-text-secondary\"> ({spec.secondary})</span>}\n    </>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ProductCard\n// ---------------------------------------------------------------------------\n\n/**\n * Product card with two variants: apply (primary + secondary actions) or choose (single action with selected state).\n * Action labels are configurable: primaryActionLabel / secondaryActionLabel default to \"Apply now\" and \"View details\".\n * Use ProductCard.Apply or ProductCard.Choose for the same with variant fixed (less typing).\n *\n * @example\n * <ProductCard variant=\"apply\" imageSrc=\"...\" name=\"Product\" priceDaily=\"500 KES\" onPrimaryAction={...} onSecondaryAction={...} />\n *\n * @example\n * <ProductCard variant=\"apply\" primaryActionLabel=\"Get quote\" secondaryActionLabel=\"Learn more\" ... />\n *\n * @example\n * <ProductCard variant=\"choose\" imageSrc=\"...\" name=\"...\" priceDaily=\"500 KES\" onChoose={...} selected={isSelected} />\n */\nfunction ProductCardInner(\n  {\n    variant = 'apply',\n    imageSrc,\n    imageAlt = '',\n    imageWidth = 288,\n    imageHeight = 162,\n    showImageNav = false,\n    onPrevImage,\n    onNextImage,\n    name,\n    brand,\n    description,\n    specs = [],\n    priceDaily,\n    priceUnit = '/day',\n    priceTotal,\n    primaryActionLabel,\n    secondaryActionLabel,\n    onPrimaryAction,\n    primaryActionHref,\n    onSecondaryAction,\n    secondaryActionHref,\n    chooseLabel,\n    selectedLabel,\n    onChoose,\n    selected = false,\n    disabled = false,\n    linkAs = 'a',\n    className = '',\n    ...rest\n  }: ProductCardProps,\n  forwardedRef: React.Ref<HTMLDivElement>\n) {\n  const [imageHover, setImageHover] = useState(false);\n  const [cardHover, setCardHover] = useState(false);\n  const showNav = showImageNav && imageHover;\n  const isChoose = variant === 'choose';\n  const isSelected = isChoose && selected;\n  const contentMuted = disabled || isSelected;\n  const borderHeavy = cardHover || isSelected;\n\n  const borderClass = borderHeavy ? 'border-border-heavy' : 'border-border-light';\n\n  const primaryLabel = primaryActionLabel ?? 'Apply now';\n  const secondaryLabel = secondaryActionLabel ?? 'View details';\n  const chooseBtnLabel = chooseLabel ?? 'Choose';\n  const selectedBtnLabel = selectedLabel ?? 'Selected';\n\n  const rootClasses = [\n    'flex flex-col rounded-rad-md overflow-hidden bg-fill-bg-primary border border-solid pb-space-4 gap-space-4 w-full max-w-[288px]',\n    borderClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={rootClasses}\n      onMouseEnter={() => setCardHover(true)}\n      onMouseLeave={() => setCardHover(false)}\n      {...rest}\n    >\n      {/* Image block */}\n      <div\n        className=\"relative flex flex-col gap-3 bg-fill-bg-secondary p-space-8 rounded-tl-rad-md rounded-tr-rad-md\"\n        onMouseEnter={() => setImageHover(true)}\n        onMouseLeave={() => setImageHover(false)}\n      >\n        <div className=\"relative aspect-video w-full overflow-hidden shrink-0\">\n          <Image\n            src={imageSrc}\n            alt={imageAlt}\n            width={imageWidth}\n            height={imageHeight}\n            className=\"h-full w-full object-cover\"\n          />\n        </div>\n        {showNav && (onPrevImage ?? onNextImage) && (\n          <div className=\"absolute left-4 right-4 top-1/2 flex -translate-y-1/2 items-center justify-between pointer-events-none\">\n            <span className=\"pointer-events-auto\">\n              {onPrevImage && (\n                <Button\n                  variant=\"inverse\"\n                  size=\"small\"\n                  iconOnly={<Icon name=\"chevron-left\" />}\n                  aria-label=\"Previous image\"\n                  onClick={onPrevImage}\n                />\n              )}\n            </span>\n            <span className=\"pointer-events-auto\">\n              {onNextImage && (\n                <Button\n                  variant=\"inverse\"\n                  size=\"small\"\n                  iconOnly={<Icon name=\"chevron-right\" />}\n                  aria-label=\"Next image\"\n                  onClick={onNextImage}\n                />\n              )}\n            </span>\n          </div>\n        )}\n      </div>\n\n      {/* Head */}\n      <div\n        className={`flex flex-col gap-space-1 px-space-4 ${contentMuted ? 'text-text-disabled [&_.text-text-primary]:text-text-disabled [&_.text-text-secondary]:text-text-disabled' : ''}`}\n      >\n        <div className=\"flex flex-col\">\n          <p className=\"text-title-md leading-[1.2] tracking-[0.19px] text-text-primary\">{name}</p>\n          {brand != null && (\n            <p className=\"text-text-sm leading-[1.4] tracking-[0.16px] text-text-secondary\">\n              {brand}\n            </p>\n          )}\n        </div>\n        {description != null && (\n          <p className=\"text-text-sm leading-[1.4] tracking-[0.16px] text-text-primary\">\n            {description}\n          </p>\n        )}\n      </div>\n\n      <Divider variant=\"light\" className=\"my-0\" />\n\n      {/* Specs */}\n      {specs.length > 0 && (\n        <>\n          <div\n            className={`flex flex-col gap-space-2 px-space-4 ${contentMuted ? 'text-text-disabled [&_*]:text-text-disabled' : ''}`}\n          >\n            {specs.map((spec, i) => (\n              <div key={i} className=\"flex items-center gap-space-2\">\n                <span className=\"shrink-0\">\n                  <Icon name=\"check\" size={10} />\n                </span>\n                <p className=\"text-text-xs tracking-[0.18px] leading-[1.4] min-w-0\">\n                  <SpecItem spec={spec} />\n                </p>\n              </div>\n            ))}\n          </div>\n          <Divider variant=\"light\" className=\"my-0\" />\n        </>\n      )}\n\n      {/* Price */}\n      <div\n        className={`flex flex-col gap-space-1 px-space-4 ${contentMuted ? 'text-text-disabled [&_*]:text-text-disabled' : ''}`}\n      >\n        <div className=\"flex items-center gap-space-1\">\n          <p className=\"text-title-md leading-[1.2] tracking-[0.19px] text-text-primary whitespace-nowrap\">\n            {priceDaily}\n          </p>\n          <p className=\"text-text-xs tracking-[0.18px] text-text-secondary\">{priceUnit}</p>\n        </div>\n        {priceTotal != null && (\n          <p className=\"text-text-xs tracking-[0.18px] text-text-secondary whitespace-nowrap\">\n            {priceTotal}\n          </p>\n        )}\n      </div>\n\n      <Divider variant=\"light\" className=\"my-0\" />\n\n      {/* Action */}\n      <div className=\"flex flex-col gap-space-2 px-space-4\">\n        {variant === 'apply' && (\n          <>\n            {primaryActionHref != null ? (\n              <Link\n                href={primaryActionHref}\n                as={linkAs}\n                className=\"h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-primary text-text-action-primary hover:bg-fill-action-primary-hover text-btn-small no-underline\"\n              >\n                {primaryLabel}\n              </Link>\n            ) : (\n              <Button\n                variant=\"primary\"\n                size=\"small\"\n                disabled={disabled}\n                className=\"w-full justify-center\"\n                onClick={onPrimaryAction}\n              >\n                {primaryLabel}\n              </Button>\n            )}\n            {secondaryActionHref != null ? (\n              <Link\n                href={secondaryActionHref}\n                as={linkAs}\n                className=\"h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-secondary text-text-action-secondary hover:bg-fill-action-secondary-hover text-btn-small no-underline\"\n              >\n                {secondaryLabel}\n              </Link>\n            ) : (\n              <Button\n                variant=\"secondary\"\n                size=\"small\"\n                disabled={disabled}\n                className=\"w-full justify-center\"\n                onClick={onSecondaryAction}\n              >\n                {secondaryLabel}\n              </Button>\n            )}\n          </>\n        )}\n        {variant === 'choose' && (\n          <Button\n            variant=\"primary\"\n            size=\"small\"\n            disabled={disabled}\n            className=\"w-full justify-center\"\n            onClick={onChoose}\n          >\n            {selected ? selectedBtnLabel : chooseBtnLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Compound components for minimal typing\n// ---------------------------------------------------------------------------\n\ntype ProductCardApplyProps = Omit<ProductCardProps, 'variant'>;\ntype ProductCardChooseProps = Omit<ProductCardProps, 'variant'>;\n\nfunction ProductCardApply(props: ProductCardApplyProps, ref: React.Ref<HTMLDivElement>) {\n  return <ProductCardBase {...(props as ProductCardProps)} variant=\"apply\" ref={ref} />;\n}\n\nfunction ProductCardChoose(props: ProductCardChooseProps, ref: React.Ref<HTMLDivElement>) {\n  return <ProductCardBase {...(props as ProductCardProps)} variant=\"choose\" ref={ref} />;\n}\n\nconst ProductCardApplyWithRef = React.forwardRef(ProductCardApply);\nconst ProductCardChooseWithRef = React.forwardRef(ProductCardChoose);\n\nconst ProductCardBase = React.forwardRef(ProductCardInner);\n\nconst ProductCard = Object.assign(ProductCardBase, {\n  Apply: ProductCardApplyWithRef,\n  Choose: ProductCardChooseWithRef,\n}) as React.ForwardRefExoticComponent<\n  Omit<ProductCardProps, 'ref'> & React.RefAttributes<HTMLDivElement>\n> & {\n  Apply: typeof ProductCardApplyWithRef;\n  Choose: typeof ProductCardChooseWithRef;\n};\n\nexport { ProductCard };\n"],"names":[],"mappings":";;;;;;;;AAqGA;AACE;AACE;AAAmB;AAErB;AAEI;AAAiB;AACgD;AAAA;AAAQ;AAAU;AAAC;AAG1F;AAoBA;AACE;AACY;AACV;AACW;AACE;AACC;AACC;AACf;AACA;AACA;AACA;AACA;AACQ;AACR;AACY;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AACA;AACF;AACG;AAEd;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAEA;AAAoB;AAClB;AACA;AACA;AAKF;AACE;AAAC;AAAA;AACM;AACM;AAC0B;AACC;AAClC;AAGJ;AAAA;AAAC;AAAA;AACW;AAC4B;AACC;AAEvC;AACE;AAAC;AAAA;AACM;AACA;AACE;AACC;AACE;AAAA;AAEd;AAGI;AAEI;AAAC;AAAA;AACS;AACH;AAC+B;AACzB;AACF;AAAA;AAGf;AAGI;AAAC;AAAA;AACS;AACH;AACgC;AAC1B;AACF;AAAA;AAGf;AACF;AAAA;AAAA;AAAA;AAKJ;AAAC;AAAA;AACkL;AAEjL;AACE;AAAqF;AAInF;AAEJ;AAIE;AAAA;AAAA;AAAA;AAIsC;AAKtC;AAAA;AAAC;AAAA;AACqH;AAIhH;AAEA;AAGA;AAEH;AAAA;AAAA;AAEuC;AAC5C;AAIF;AAAC;AAAA;AACqH;AAEpH;AACE;AAEA;AAC6E;AAC/E;AAIE;AAAA;AAAA;AAAA;AAIsC;AAIvC;AAEI;AACC;AAAC;AAAA;AACO;AACF;AACM;AAET;AAAA;AAGH;AAAC;AAAA;AACS;AACH;AACL;AACU;AACD;AAER;AAAA;AAAA;AAIH;AAAC;AAAA;AACO;AACF;AACM;AAET;AAAA;AAGH;AAAC;AAAA;AACS;AACH;AACL;AACU;AACD;AAER;AAAA;AAAA;AAGP;AAGA;AAAC;AAAA;AACS;AACH;AACL;AACU;AACD;AAEsB;AAAA;AAAA;AAGrC;AAAA;AAAA;AAGN;AASA;AACE;AACF;AAEA;AACE;AACF;AAEA;AACA;AAEA;AAEA;AAAmD;AAC1C;AAET;;;;"}
+{"version":3,"file":"ProductCard.js","sources":["../../../src/components/ProductCard/ProductCard.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport Image from 'next/image';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { Divider } from '../Divider/Divider';\nimport { Link } from '../Link/Link';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * ProductCard variant from Figma: Apply (two CTAs) or Choose (single CTA with selected state).\n * Use variant=\"apply\" for apply + view-details flows; variant=\"choose\" for pick-one flows.\n */\nexport type ProductCardVariant = 'apply' | 'choose';\n\n/** One spec line: plain string or { text, secondary? } for text with muted suffix e.g. \"150km range (full day coverage)\". */\nexport type ProductCardSpec = string | { text: string; secondary?: string };\n\nexport interface ProductCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Which CTA layout to use: apply (two buttons) or choose (one button, optional selected). @default 'apply' */\n  variant?: ProductCardVariant;\n\n  // Image\n  /** Main product image URL. */\n  imageSrc: string;\n  /** Alt text for the image. @default '' */\n  imageAlt?: string;\n  /** Width for next/image. @default 288 */\n  imageWidth?: number;\n  /** Height for next/image (aspect 16:9). @default 162 */\n  imageHeight?: number;\n  /**\n   * How the image fills the card image area. `cover` (default) fills the area and crops;\n   * `contain` shows the full image with padding and no crop.\n   * @default 'cover'\n   */\n  imageFit?: 'cover' | 'contain';\n  /**\n   * When imageFit is `cover`, controls which part of the image is visible (e.g. `'center'`, `'top'`).\n   * Ignored when imageFit is `contain`. Accepts any valid CSS object-position value.\n   * @default 'center'\n   */\n  imagePosition?: string;\n  /** Show prev/next image nav overlay on hover (e.g. for carousel). @default false */\n  showImageNav?: boolean;\n  /** Called when the previous image control is clicked. Only relevant when showImageNav is true. */\n  onPrevImage?: () => void;\n  /** Called when the next image control is clicked. Only relevant when showImageNav is true. */\n  onNextImage?: () => void;\n\n  // Head\n  /** Product name (e.g. \"Magnus 3000\"). */\n  name: string;\n  /** Brand or model line (e.g. \"Mazi\"). @default undefined */\n  brand?: string;\n  /** Short description or tagline below the name. @default undefined */\n  description?: string;\n\n  // Specs\n  /** List of feature lines; each can be a string or { text, secondary? }. */\n  specs?: ProductCardSpec[];\n\n  // Price\n  /** Daily price label (e.g. \"500 KES\"). */\n  priceDaily: string;\n  /** Optional unit after daily price (e.g. \"/day\"). @default '/day' */\n  priceUnit?: string;\n  /** Total or purchase price (e.g. \"280,732 KES\"). @default undefined */\n  priceTotal?: string;\n\n  // Apply variant — primary and secondary actions (labels configurable by client)\n  /** Label for the primary action button. @default 'Apply now' */\n  primaryActionLabel?: string;\n  /** Label for the secondary action button. @default 'View details' */\n  secondaryActionLabel?: string;\n  /** Called when the primary action is clicked. Used when variant=\"apply\". */\n  onPrimaryAction?: () => void;\n  /** When set, the primary action renders as a link. Used when variant=\"apply\". */\n  primaryActionHref?: string;\n  /** Called when the secondary action is clicked. Used when variant=\"apply\". */\n  onSecondaryAction?: () => void;\n  /** When set, the secondary action renders as a link. Used when variant=\"apply\". */\n  secondaryActionHref?: string;\n\n  // Choose variant\n  /** Label for the choose button when not selected. @default 'Choose' */\n  chooseLabel?: string;\n  /** Label for the choose button when selected. @default 'Selected' */\n  selectedLabel?: string;\n  /** Called when the choose button is clicked. Used when variant=\"choose\". */\n  onChoose?: () => void;\n  /** When true, card shows selected state (heavier border, muted content). Used when variant=\"choose\". @default false */\n  selected?: boolean;\n\n  // Common\n  /** Disables all actions and applies disabled styling. @default false */\n  disabled?: boolean;\n  /** Component to render link-style actions as (e.g. next/link). @default 'a' */\n  linkAs?: React.ElementType;\n  /** Additional class name for the root. */\n  className?: string;\n  /** Forwarded ref for the root div. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction SpecItem({ spec }: { spec: ProductCardSpec }) {\n  if (typeof spec === 'string') {\n    return <span>{spec}</span>;\n  }\n  return (\n    <>\n      <span>{spec.text}</span>\n      {spec.secondary != null && <span className=\"text-text-secondary\"> ({spec.secondary})</span>}\n    </>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ProductCard\n// ---------------------------------------------------------------------------\n\n/**\n * Product card with two variants: apply (primary + secondary actions) or choose (single action with selected state).\n * Action labels are configurable: primaryActionLabel / secondaryActionLabel default to \"Apply now\" and \"View details\".\n * Use ProductCard.Apply or ProductCard.Choose for the same with variant fixed (less typing).\n *\n * @example\n * <ProductCard variant=\"apply\" imageSrc=\"...\" name=\"Product\" priceDaily=\"500 KES\" onPrimaryAction={...} onSecondaryAction={...} />\n *\n * @example\n * <ProductCard variant=\"apply\" primaryActionLabel=\"Get quote\" secondaryActionLabel=\"Learn more\" ... />\n *\n * @example\n * <ProductCard variant=\"choose\" imageSrc=\"...\" name=\"...\" priceDaily=\"500 KES\" onChoose={...} selected={isSelected} />\n */\nfunction ProductCardInner(\n  {\n    variant = 'apply',\n    imageSrc,\n    imageAlt = '',\n    imageWidth = 288,\n    imageHeight = 162,\n    imageFit = 'cover',\n    imagePosition,\n    showImageNav = false,\n    onPrevImage,\n    onNextImage,\n    name,\n    brand,\n    description,\n    specs = [],\n    priceDaily,\n    priceUnit = '/day',\n    priceTotal,\n    primaryActionLabel,\n    secondaryActionLabel,\n    onPrimaryAction,\n    primaryActionHref,\n    onSecondaryAction,\n    secondaryActionHref,\n    chooseLabel,\n    selectedLabel,\n    onChoose,\n    selected = false,\n    disabled = false,\n    linkAs = 'a',\n    className = '',\n    ...rest\n  }: ProductCardProps,\n  forwardedRef: React.Ref<HTMLDivElement>\n) {\n  const [imageHover, setImageHover] = useState(false);\n  const [cardHover, setCardHover] = useState(false);\n  const showNav = showImageNav && imageHover;\n  const isChoose = variant === 'choose';\n  const isSelected = isChoose && selected;\n  const contentMuted = disabled || isSelected;\n  const borderHeavy = cardHover || isSelected;\n\n  const borderClass = borderHeavy ? 'border-border-heavy' : 'border-border-light';\n\n  const primaryLabel = primaryActionLabel ?? 'Apply now';\n  const secondaryLabel = secondaryActionLabel ?? 'View details';\n  const chooseBtnLabel = chooseLabel ?? 'Choose';\n  const selectedBtnLabel = selectedLabel ?? 'Selected';\n\n  const rootClasses = [\n    'flex flex-col rounded-rad-md overflow-hidden bg-fill-bg-primary border border-solid pb-space-4 gap-space-4 w-full max-w-[288px]',\n    borderClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={rootClasses}\n      onMouseEnter={() => setCardHover(true)}\n      onMouseLeave={() => setCardHover(false)}\n      {...rest}\n    >\n      {/* Image block */}\n      <div\n        className=\"relative flex flex-col gap-3 bg-fill-bg-secondary p-space-8 rounded-tl-rad-md rounded-tr-rad-md\"\n        onMouseEnter={() => setImageHover(true)}\n        onMouseLeave={() => setImageHover(false)}\n      >\n        <div className=\"relative aspect-video w-full overflow-hidden shrink-0 bg-fill-bg-secondary\">\n          {imageFit === 'contain' ? (\n            <div className=\"flex h-full w-full items-center justify-center p-space-4\">\n              <Image\n                src={imageSrc}\n                alt={imageAlt}\n                width={imageWidth}\n                height={imageHeight}\n                className=\"max-h-full max-w-full object-contain\"\n              />\n            </div>\n          ) : (\n            <Image\n              src={imageSrc}\n              alt={imageAlt}\n              width={imageWidth}\n              height={imageHeight}\n              className=\"h-full w-full object-cover\"\n              style={\n                imagePosition != null ? { objectPosition: imagePosition } : undefined\n              }\n            />\n          )}\n        </div>\n        {showNav && (onPrevImage ?? onNextImage) && (\n          <div className=\"absolute left-4 right-4 top-1/2 flex -translate-y-1/2 items-center justify-between pointer-events-none\">\n            <span className=\"pointer-events-auto\">\n              {onPrevImage && (\n                <Button\n                  variant=\"inverse\"\n                  size=\"small\"\n                  iconOnly={<Icon name=\"chevron-left\" />}\n                  aria-label=\"Previous image\"\n                  onClick={onPrevImage}\n                />\n              )}\n            </span>\n            <span className=\"pointer-events-auto\">\n              {onNextImage && (\n                <Button\n                  variant=\"inverse\"\n                  size=\"small\"\n                  iconOnly={<Icon name=\"chevron-right\" />}\n                  aria-label=\"Next image\"\n                  onClick={onNextImage}\n                />\n              )}\n            </span>\n          </div>\n        )}\n      </div>\n\n      {/* Head */}\n      <div\n        className={`flex flex-col gap-space-1 px-space-4 ${contentMuted ? 'text-text-disabled [&_.text-text-primary]:text-text-disabled [&_.text-text-secondary]:text-text-disabled' : ''}`}\n      >\n        <div className=\"flex flex-col\">\n          <p className=\"text-title-md leading-[1.2] tracking-[0.19px] text-text-primary\">{name}</p>\n          {brand != null && (\n            <p className=\"text-text-sm leading-[1.4] tracking-[0.16px] text-text-secondary\">\n              {brand}\n            </p>\n          )}\n        </div>\n        {description != null && (\n          <p className=\"text-text-sm leading-[1.4] tracking-[0.16px] text-text-primary\">\n            {description}\n          </p>\n        )}\n      </div>\n\n      <Divider variant=\"light\" className=\"my-0 mx-space-4\" />\n\n      {/* Specs */}\n      {specs.length > 0 && (\n        <>\n          <div\n            className={`flex flex-col gap-space-2 px-space-4 ${contentMuted ? 'text-text-disabled [&_*]:text-text-disabled' : ''}`}\n          >\n            {specs.map((spec, i) => (\n              <div key={i} className=\"flex items-center gap-space-2\">\n                <span className=\"shrink-0\">\n                  <Icon name=\"check\" size={10} />\n                </span>\n                <p className=\"text-text-xs tracking-[0.18px] leading-[1.4] min-w-0\">\n                  <SpecItem spec={spec} />\n                </p>\n              </div>\n            ))}\n          </div>\n          <Divider variant=\"light\" className=\"my-0 mx-space-4\" />\n        </>\n      )}\n\n      {/* Price */}\n      <div\n        className={`flex flex-col gap-space-1 px-space-4 ${contentMuted ? 'text-text-disabled [&_*]:text-text-disabled' : ''}`}\n      >\n        <div className=\"flex items-center gap-space-1\">\n          <p className=\"text-title-md leading-[1.2] tracking-[0.19px] text-text-primary whitespace-nowrap\">\n            {priceDaily}\n          </p>\n          <p className=\"text-text-xs tracking-[0.18px] text-text-secondary\">{priceUnit}</p>\n        </div>\n        {priceTotal != null && (\n          <p className=\"text-text-xs tracking-[0.18px] text-text-secondary whitespace-nowrap\">\n            {priceTotal}\n          </p>\n        )}\n      </div>\n\n      <Divider variant=\"light\" className=\"my-0 mx-space-4\" />\n\n      {/* Action */}\n      <div className=\"flex flex-col gap-space-2 px-space-4\">\n        {variant === 'apply' && (\n          <>\n            {primaryActionHref != null ? (\n              <Link\n                href={primaryActionHref}\n                as={linkAs}\n                className=\"flex h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-primary text-text-action-primary hover:bg-fill-action-primary-hover text-btn-small text-base font-medium no-underline\"\n              >\n                {primaryLabel}\n              </Link>\n            ) : (\n              <Button\n                variant=\"primary\"\n                size=\"small\"\n                disabled={disabled}\n                className=\"w-full justify-center\"\n                onClick={onPrimaryAction}\n              >\n                {primaryLabel}\n              </Button>\n            )}\n            {secondaryActionHref != null ? (\n              <Link\n                href={secondaryActionHref}\n                as={linkAs}\n                className=\"flex h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-secondary text-text-action-secondary hover:bg-fill-action-secondary-hover text-btn-small text-base font-medium no-underline\"\n              >\n                {secondaryLabel}\n              </Link>\n            ) : (\n              <Button\n                variant=\"secondary\"\n                size=\"small\"\n                disabled={disabled}\n                className=\"w-full justify-center\"\n                onClick={onSecondaryAction}\n              >\n                {secondaryLabel}\n              </Button>\n            )}\n          </>\n        )}\n        {variant === 'choose' && (\n          <Button\n            variant=\"primary\"\n            size=\"small\"\n            disabled={disabled}\n            className=\"w-full justify-center\"\n            onClick={onChoose}\n          >\n            {selected ? selectedBtnLabel : chooseBtnLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Compound components for minimal typing\n// ---------------------------------------------------------------------------\n\ntype ProductCardApplyProps = Omit<ProductCardProps, 'variant'>;\ntype ProductCardChooseProps = Omit<ProductCardProps, 'variant'>;\n\nfunction ProductCardApply(props: ProductCardApplyProps, ref: React.Ref<HTMLDivElement>) {\n  return <ProductCardBase {...(props as ProductCardProps)} variant=\"apply\" ref={ref} />;\n}\n\nfunction ProductCardChoose(props: ProductCardChooseProps, ref: React.Ref<HTMLDivElement>) {\n  return <ProductCardBase {...(props as ProductCardProps)} variant=\"choose\" ref={ref} />;\n}\n\nconst ProductCardApplyWithRef = React.forwardRef(ProductCardApply);\nconst ProductCardChooseWithRef = React.forwardRef(ProductCardChoose);\n\nconst ProductCardBase = React.forwardRef(ProductCardInner);\n\nconst ProductCard = Object.assign(ProductCardBase, {\n  Apply: ProductCardApplyWithRef,\n  Choose: ProductCardChooseWithRef,\n}) as React.ForwardRefExoticComponent<\n  Omit<ProductCardProps, 'ref'> & React.RefAttributes<HTMLDivElement>\n> & {\n  Apply: typeof ProductCardApplyWithRef;\n  Choose: typeof ProductCardChooseWithRef;\n};\n\nexport { ProductCard };\n"],"names":[],"mappings":";;;;;;;;AAiHA;AACE;AACE;AAAmB;AAErB;AAEI;AAAiB;AACgD;AAAA;AAAQ;AAAU;AAAC;AAG1F;AAoBA;AACE;AACY;AACV;AACW;AACE;AACC;AACH;AACX;AACe;AACf;AACA;AACA;AACA;AACA;AACQ;AACR;AACY;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AACA;AACF;AACG;AAEd;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAEA;AAAoB;AAClB;AACA;AACA;AAKF;AACE;AAAC;AAAA;AACM;AACM;AAC0B;AACC;AAClC;AAGJ;AAAA;AAAC;AAAA;AACW;AAC4B;AACC;AAEvC;AAGM;AAAC;AAAA;AACM;AACA;AACE;AACC;AACE;AAAA;AAId;AAAC;AAAA;AACM;AACA;AACE;AACC;AACE;AAEoD;AAAA;AAIpE;AAGI;AAEI;AAAC;AAAA;AACS;AACH;AAC+B;AACzB;AACF;AAAA;AAGf;AAGI;AAAC;AAAA;AACS;AACH;AACgC;AAC1B;AACF;AAAA;AAGf;AACF;AAAA;AAAA;AAAA;AAKJ;AAAC;AAAA;AACkL;AAEjL;AACE;AAAqF;AAInF;AAEJ;AAIE;AAAA;AAAA;AAAA;AAIiD;AAKjD;AAAA;AAAC;AAAA;AACqH;AAIhH;AAEA;AAGA;AAEH;AAAA;AAAA;AAEkD;AACvD;AAIF;AAAC;AAAA;AACqH;AAEpH;AACE;AAEA;AAC6E;AAC/E;AAIE;AAAA;AAAA;AAAA;AAIiD;AAIlD;AAEI;AACC;AAAC;AAAA;AACO;AACF;AACM;AAET;AAAA;AAGH;AAAC;AAAA;AACS;AACH;AACL;AACU;AACD;AAER;AAAA;AAAA;AAIH;AAAC;AAAA;AACO;AACF;AACM;AAET;AAAA;AAGH;AAAC;AAAA;AACS;AACH;AACL;AACU;AACD;AAER;AAAA;AAAA;AAGP;AAGA;AAAC;AAAA;AACS;AACH;AACL;AACU;AACD;AAEsB;AAAA;AAAA;AAGrC;AAAA;AAAA;AAGN;AASA;AACE;AACF;AAEA;AACE;AACF;AAEA;AACA;AAEA;AAEA;AAAmD;AAC1C;AAET;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiwambe/components",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "publishConfig": {
     "access": "public"
   },