@ikas/code-components-mcp 0.105.0 → 0.107.0

package/data/section-templates/product-detail-section/sub-components/Breadcrumb/index.tsx

@@ -0,0 +1,57 @@
+import { cx } from "../../utils/cx";
+import { CaretRightSVG } from "../icons";
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+interface Props {
+  items: BreadcrumbItem[];
+  size?: "sm" | "xs";
+  className?: string;
+}
+
+export default function Breadcrumb({ items, size = "sm", className }: Props) {
+  if (items.length === 0) return null;
+
+  const typographyClass = size === "xs" ? "text-xs-medium" : "text-sm-medium";
+
+  return (
+    <nav className={cx("kombos-breadcrumb", className)}>
+      {items.map((item, i) => {
+        const isLast = i === items.length - 1;
+        return (
+          <span key={item.href ?? item.label} className="kombos-breadcrumb__item">
+            {item.href ? (
+              <a
+                href={item.href}
+                className={cx("kombos-breadcrumb__link", typographyClass, isLast && "kombos-breadcrumb__link--active")}
+              >
+                {item.label}
+              </a>
+            ) : item.onClick ? (
+              <button
+                type="button"
+                onClick={item.onClick}
+                className={cx("kombos-breadcrumb__link", "kombos-breadcrumb__link-btn", typographyClass)}
+              >
+                {item.label}
+              </button>
+            ) : (
+              <span className={cx("kombos-breadcrumb__current", typographyClass)}>
+                {item.label}
+              </span>
+            )}
+            {!isLast && (
+              <span className={cx("kombos-breadcrumb__sep", size === "xs" && "kombos-breadcrumb__sep--xs")}>
+                <CaretRightSVG />
+              </span>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}

package/data/section-templates/product-detail-section/sub-components/Breadcrumb/styles.css

@@ -0,0 +1,49 @@
+/* ===== Breadcrumb Sub-Component ===== */
+.kombos-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.kombos-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.kombos-breadcrumb__link {
+  color: var(--kombos-gray-500);
+  text-decoration: none;
+}
+
+.kombos-breadcrumb__link:hover {
+  text-decoration: underline;
+}
+
+.kombos-breadcrumb__link-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.kombos-breadcrumb__link--active {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-breadcrumb__current {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-breadcrumb__sep {
+  font-size: 0.75rem;
+  color: var(--kombos-gray-400);
+  display: inline-flex;
+  align-items: center;
+}
+
+.kombos-breadcrumb__sep--xs {
+  font-size: 0.625rem;
+  color: var(--kombos-gray-300);
+}

package/data/section-templates/product-detail-section/sub-components/BundleMedia/index.tsx

@@ -0,0 +1,72 @@
+import {
+  getProductVariantMainImage,
+  getDefaultSrc,
+  IkasProductVariant,
+} from "@ikas/bp-storefront";
+import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+import { NoProductSVG } from "../icons";
+
+interface Props {
+  variant: IkasProductVariant | null;
+  alt: string;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  wrapperClassName: string;
+  mediaClassName: string;
+  placeholderClassName: string;
+}
+
+export default function BundleMedia({
+  variant,
+  alt,
+  aspectRatio,
+  objectFit,
+  wrapperClassName,
+  mediaClassName,
+  placeholderClassName,
+}: Props) {
+  const variantImage = variant ? getProductVariantMainImage(variant) : null;
+  const imageSrc = variantImage?.image
+    ? getDefaultSrc(variantImage.image)
+    : null;
+
+  const fitStyle = {
+    objectFit: resolveObjectFit(objectFit) as CSSStyleDeclaration["objectFit"],
+  };
+
+  return (
+    <div
+      className={wrapperClassName}
+      style={{ aspectRatio: resolveAspectRatio(aspectRatio) }}
+    >
+      {imageSrc ? (
+        variantImage?.isVideo ? (
+          <video
+            src={imageSrc}
+            className={mediaClassName}
+            autoPlay
+            loop
+            muted
+            playsInline
+            style={fitStyle}
+          >
+            <track kind="captions" />
+          </video>
+        ) : (
+          <img
+            src={imageSrc}
+            alt={alt}
+            className={mediaClassName}
+            loading="lazy"
+            style={fitStyle}
+          />
+        )
+      ) : (
+        <div className={placeholderClassName}>
+          <NoProductSVG />
+        </div>
+      )}
+    </div>
+  );
+}

package/data/section-templates/product-detail-section/sub-components/BundleQuantityBox/index.tsx

@@ -0,0 +1,73 @@
+import {
+  IkasBundleProduct,
+  isBundleProductQuantityEditable,
+  setBundleProductQuantity,
+  getSelectedProductVariant,
+  hasProductVariantStock,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { MinusSVG, PlusSVG } from "../icons";
+
+interface Props {
+  bundleProduct: IkasBundleProduct;
+}
+
+const BundleQuantityBox = observer(function BundleQuantityBox({
+  bundleProduct,
+}: Props) {
+  if (!isBundleProductQuantityEditable(bundleProduct)) {
+    return (
+      <span className="kombos-bundle-qty__static text-sm-medium">
+        {bundleProduct.quantity}
+      </span>
+    );
+  }
+
+  const selectedVariant = bundleProduct.product
+    ? getSelectedProductVariant(bundleProduct.product)
+    : null;
+
+  const stock = selectedVariant?.stock ?? 0;
+  const sellIfOutOfStock = selectedVariant?.sellIfOutOfStock ?? false;
+  const hasNoStock = selectedVariant
+    ? !hasProductVariantStock(selectedVariant)
+    : false;
+
+  const canDecrement =
+    bundleProduct.quantity > (bundleProduct.minQuantity ?? 0);
+  const canIncrement =
+    sellIfOutOfStock ||
+    (!hasNoStock && (stock >= 10 || bundleProduct.quantity < stock));
+
+  return (
+    <div className="kombos-bundle-qty">
+      <button
+        type="button"
+        className="kombos-bundle-qty__btn"
+        onClick={() =>
+          setBundleProductQuantity(bundleProduct, bundleProduct.quantity - 1)
+        }
+        disabled={!canDecrement}
+        aria-label="Decrease quantity"
+      >
+        <MinusSVG />
+      </button>
+      <span className="kombos-bundle-qty__value text-sm-medium">
+        {bundleProduct.quantity}
+      </span>
+      <button
+        type="button"
+        className="kombos-bundle-qty__btn"
+        onClick={() =>
+          setBundleProductQuantity(bundleProduct, bundleProduct.quantity + 1)
+        }
+        disabled={!canIncrement}
+        aria-label="Increase quantity"
+      >
+        <PlusSVG />
+      </button>
+    </div>
+  );
+});
+
+export default BundleQuantityBox;

package/data/section-templates/product-detail-section/sub-components/BundleQuantityBox/styles.css

@@ -0,0 +1,43 @@
+/* ===== BundleQuantityBox ===== */
+.kombos-bundle-qty {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  padding: 0.125rem;
+}
+
+.kombos-bundle-qty__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--kombos-gray-700);
+  font-size: 0.875rem;
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
+
+.kombos-bundle-qty__btn:hover:not(:disabled) {
+  background-color: var(--kombos-gray-50);
+}
+
+.kombos-bundle-qty__btn:disabled {
+  color: var(--kombos-gray-300);
+  cursor: not-allowed;
+}
+
+.kombos-bundle-qty__value {
+  min-width: 1.5rem;
+  text-align: center;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-bundle-qty__static {
+  color: var(--kombos-gray-700);
+}

package/data/section-templates/product-detail-section/sub-components/Button/index.tsx

@@ -0,0 +1,52 @@
+import type { ButtonHTMLAttributes, ComponentChildren } from "preact";
+import { SpinnerSVG } from "../icons";
+import { cx } from "../../utils/cx";
+
+type Variant = "primary" | "secondary" | "dangerous";
+type Size = "xs" | "s" | "m";
+
+export interface ButtonProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "size" | "icon" | "loading"
+> {
+  variant?: Variant;
+  size?: Size;
+  icon?: ComponentChildren;
+  loading?: boolean;
+}
+
+const TYPOGRAPHY: Record<Size, string> = {
+  xs: "text-sm-semibold",
+  s: "text-md-semibold",
+  m: "text-lg-semibold",
+};
+
+export default function Button({
+  variant = "primary",
+  size = "s",
+  icon,
+  loading,
+  className,
+  children,
+  disabled,
+  ...rest
+}: ButtonProps) {
+  const cls = cx(
+    "kombos-btn",
+    `kombos-btn--${variant}`,
+    `kombos-btn--${size}`,
+    TYPOGRAPHY[size],
+    className,
+  );
+
+  return (
+    <button className={cls} disabled={loading || disabled} {...rest}>
+      {loading ? (
+        <SpinnerSVG className="kombos-btn__spinner" />
+      ) : (
+        icon && <span className="kombos-btn__icon">{icon}</span>
+      )}
+      {children}
+    </button>
+  );
+}

package/data/section-templates/product-detail-section/sub-components/Button/styles.css

@@ -0,0 +1,114 @@
+/* ===== Button ===== */
+
+/* --- Base --- */
+.kombos-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+}
+
+.kombos-btn:disabled {
+  cursor: not-allowed;
+}
+
+/* --- Spinner --- */
+.kombos-btn__spinner {
+  animation: kombos-spin 1s linear infinite;
+}
+
+@keyframes kombos-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* --- Icon --- */
+.kombos-btn__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.kombos-btn--xs .kombos-btn__icon {
+  font-size: 1rem;
+}
+
+.kombos-btn--s .kombos-btn__icon {
+  font-size: 1.25rem;
+}
+
+.kombos-btn--m .kombos-btn__icon {
+  font-size: 1.5rem;
+}
+
+/* --- Sizes --- */
+.kombos-btn--xs {
+  padding: 0.4375rem 0.9375rem;
+  min-height: 2.25rem;
+}
+
+.kombos-btn--s {
+  padding: 0.5625rem 1.1875rem;
+  min-height: 2.75rem;
+}
+
+.kombos-btn--m {
+  padding: 0.6875rem 1.4375rem;
+  min-height: 3.375rem;
+}
+
+/* --- Primary --- */
+.kombos-btn--primary {
+  background-color: var(--kombos-gray-900);
+  border-color: var(--kombos-gray-900);
+  color: var(--kombos-white);
+}
+
+.kombos-btn--primary:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+.kombos-btn--primary:disabled {
+  background-color: var(--kombos-gray-300);
+  border-color: var(--kombos-gray-300);
+  color: var(--kombos-gray-50);
+}
+
+/* --- Secondary --- */
+.kombos-btn--secondary {
+  background-color: var(--kombos-white);
+  border-color: var(--kombos-gray-200);
+  color: var(--kombos-gray-900);
+}
+
+.kombos-btn--secondary:hover:not(:disabled) {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-btn--secondary:disabled {
+  background-color: var(--kombos-gray-50);
+  border-color: var(--kombos-gray-200);
+  color: var(--kombos-gray-300);
+}
+
+/* --- Dangerous --- */
+.kombos-btn--dangerous {
+  background-color: var(--kombos-error);
+  border-color: var(--kombos-error);
+  color: var(--kombos-white);
+}
+
+.kombos-btn--dangerous:hover:not(:disabled) {
+  background-color: var(--kombos-error-hover);
+  border-color: var(--kombos-error-hover);
+}
+
+.kombos-btn--dangerous:disabled {
+  background-color: var(--kombos-gray-300);
+  border-color: var(--kombos-gray-300);
+  color: var(--kombos-gray-50);
+}

package/data/section-templates/product-detail-section/sub-components/Checkbox/index.tsx

@@ -0,0 +1,42 @@
+import { cx } from "../../utils/cx";
+import { CheckSVG } from "../icons";
+
+interface Props {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  status?: "default" | "error" | "success";
+  className?: string;
+  "aria-label"?: string;
+}
+
+export default function Checkbox({
+  checked = false,
+  onChange,
+  status = "default",
+  className,
+  "aria-label": ariaLabel,
+}: Props) {
+  return (
+    <label
+      className={cx("kombos-checkbox", checked && "kombos-checkbox--checked", className)}
+      data-state={status !== "default" ? status : undefined}
+    >
+      <input
+        type="checkbox"
+        className="kombos-checkbox__native"
+        checked={checked}
+        onChange={() => onChange?.(!checked)}
+        aria-label={ariaLabel}
+      />
+      <span
+        className={cx("kombos-checkbox__box", checked && "kombos-checkbox__box--checked")}
+      >
+        {checked && (
+          <span className="kombos-checkbox__icon">
+            <CheckSVG />
+          </span>
+        )}
+      </span>
+    </label>
+  );
+}

package/data/section-templates/product-detail-section/sub-components/Checkbox/styles.css

@@ -0,0 +1,65 @@
+.kombos-checkbox {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+.kombos-checkbox__native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.kombos-checkbox__box {
+  width: 1rem;
+  height: 1rem;
+  min-width: 1rem;
+  border: 1px solid var(--kombos-gray-300);
+  border-radius: 4px;
+  background: var(--kombos-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.kombos-checkbox:hover .kombos-checkbox__box:not(.kombos-checkbox__box--checked) {
+  border-color: var(--kombos-gray-400);
+}
+
+.kombos-checkbox__box--checked {
+  background: var(--kombos-gray-900);
+  border-color: var(--kombos-gray-900);
+}
+
+.kombos-checkbox__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kombos-white);
+  font-size: 0.75rem;
+}
+
+/* --- Status (standalone + inherited from FormItem) --- */
+[data-state="error"] .kombos-checkbox__box {
+  border-color: var(--kombos-error);
+}
+
+.kombos-checkbox[data-state="error"]:hover .kombos-checkbox__box:not(.kombos-checkbox__box--checked),
+[data-state="error"] .kombos-checkbox:hover .kombos-checkbox__box:not(.kombos-checkbox__box--checked) {
+  border-color: var(--kombos-error);
+}
+
+[data-state="success"] .kombos-checkbox__box {
+  border-color: var(--kombos-success);
+}
+
+.kombos-checkbox[data-state="success"]:hover .kombos-checkbox__box:not(.kombos-checkbox__box--checked),
+[data-state="success"] .kombos-checkbox:hover .kombos-checkbox__box:not(.kombos-checkbox__box--checked) {
+  border-color: var(--kombos-success);
+}

package/data/section-templates/product-detail-section/sub-components/CollapsibleGroup/index.tsx

@@ -0,0 +1,52 @@
+import { ComponentChildren } from "preact";
+import { useState } from "preact/hooks";
+import { cx } from "../../utils/cx";
+import { MinusSVG, PlusSVG } from "../icons";
+
+interface Props {
+  title?: string;
+  defaultOpen?: boolean;
+  children: ComponentChildren;
+  className?: string;
+}
+
+export default function CollapsibleGroup({
+  title,
+  defaultOpen = false,
+  children,
+  className,
+}: Props) {
+  const [isCollapsed, setIsCollapsed] = useState(!defaultOpen);
+
+  return (
+    <div className={cx("kombos-collapsible-group", className)}>
+      <button
+        type="button"
+        className="kombos-collapsible-group__header"
+        onClick={() => setIsCollapsed((prev) => !prev)}
+      >
+        {title && (
+          <span className="kombos-collapsible-group__title text-sm-semibold">
+            {title}
+          </span>
+        )}
+        <span
+          className={cx(
+            "kombos-collapsible-group__toggle-icon",
+            isCollapsed && "kombos-collapsible-group__toggle-icon--collapsed",
+          )}
+        >
+          {isCollapsed ? <PlusSVG /> : <MinusSVG />}
+        </span>
+      </button>
+      <div
+        className={cx(
+          "kombos-collapsible-group__body",
+          isCollapsed && "kombos-collapsible-group__body--collapsed",
+        )}
+      >
+        <div className="kombos-collapsible-group__content">{children}</div>
+      </div>
+    </div>
+  );
+}

package/data/section-templates/product-detail-section/sub-components/CollapsibleGroup/styles.css

@@ -0,0 +1,51 @@
+/* ===== Collapsible Group ===== */
+.kombos-collapsible-group {
+  border-bottom: 1px solid var(--kombos-gray-200);
+  padding: 1rem 0;
+}
+
+.kombos-collapsible-group__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.kombos-collapsible-group__title {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-collapsible-group__toggle-icon {
+  font-size: 1rem;
+  color: var(--kombos-gray-500);
+  display: flex;
+  align-items: center;
+  transition: transform 0.25s ease;
+  margin-left: auto;
+}
+
+.kombos-collapsible-group__toggle-icon--collapsed {
+  transform: rotate(90deg);
+}
+
+/* Animated body — grid-template-rows trick */
+.kombos-collapsible-group__body {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 0.25s ease, padding-top 0.25s ease;
+  padding-top: 0.75rem;
+}
+
+.kombos-collapsible-group__body--collapsed {
+  grid-template-rows: 0fr;
+  padding-top: 0;
+}
+
+.kombos-collapsible-group__content {
+  overflow: hidden;
+  min-height: 0;
+}