@ikas/code-components-mcp 0.105.0 → 0.106.0

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

@@ -0,0 +1,110 @@
+/* ===== Select ===== */
+.kombos-select-wrap {
+  width: 100%;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.kombos-select {
+  appearance: none;
+  width: 100%;
+  background: var(--kombos-white);
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  color: var(--kombos-gray-900);
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.kombos-select:hover {
+  border-color: var(--kombos-gray-300);
+}
+
+/* Sizes — match Button padding + extra right space for icon */
+.kombos-select--xs {
+  padding: 0.4375rem 2rem 0.4375rem 0.9375rem;
+  min-height: 2.25rem;
+}
+
+.kombos-select--s {
+  padding: 0.5625rem 2.25rem 0.5625rem 1.1875rem;
+  min-height: 2.75rem;
+}
+
+.kombos-select--m {
+  padding: 0.6875rem 2.5rem 0.6875rem 1.4375rem;
+  min-height: 3.375rem;
+}
+
+/* Caret icon */
+.kombos-select__icon {
+  position: absolute;
+  right: 0.75rem;
+  pointer-events: none;
+  color: var(--kombos-gray-900);
+  font-size: 1rem;
+  transition: opacity 0.15s ease;
+}
+
+/* Clear button */
+.kombos-select__clear {
+  position: absolute;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  color: var(--kombos-gray-700);
+  background-color: var(--kombos-white);
+  font-size: 1rem;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+/* On hover: show clear button, hide caret */
+.kombos-select-wrap:hover .kombos-select__clear {
+  opacity: 1;
+}
+
+.kombos-select-wrap:hover .kombos-select--clearable ~ .kombos-select__icon {
+  opacity: 0;
+}
+
+/* --- Status (standalone + inherited from FormItem) --- */
+[data-state="error"] .kombos-select {
+  border-color: var(--kombos-error);
+}
+
+[data-state="error"] .kombos-select:hover {
+  border-color: var(--kombos-error);
+}
+
+[data-state="success"] .kombos-select {
+  border-color: var(--kombos-success);
+}
+
+[data-state="success"] .kombos-select:hover {
+  border-color: var(--kombos-success);
+}
+
+/* --- Disabled state --- */
+.kombos-select:disabled {
+  background: var(--kombos-gray-50);
+  border-color: var(--kombos-gray-200);
+  color: var(--kombos-gray-300);
+  cursor: not-allowed;
+}
+
+.kombos-select:disabled:hover {
+  border-color: var(--kombos-gray-200);
+}
+
+.kombos-select:disabled ~ .kombos-select__icon {
+  color: var(--kombos-gray-300);
+}

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

@@ -0,0 +1,26 @@
+import type { JSX } from "preact";
+import { CaretLeftSVG, CaretRightSVG } from "../icons";
+import { cx } from "../../utils/cx";
+
+interface Props extends Omit<JSX.HTMLAttributes<HTMLButtonElement>, "direction"> {
+  direction: "left" | "right";
+  disabled?: boolean;
+}
+
+export default function SliderArrow({
+  direction,
+  className,
+  ...rest
+}: Props) {
+  const Icon = direction === "left" ? CaretLeftSVG : CaretRightSVG;
+
+  return (
+    <button
+      className={cx("kombos-slider-arrow", className)}
+      aria-label={direction === "left" ? "Previous" : "Next"}
+      {...rest}
+    >
+      <Icon />
+    </button>
+  );
+}

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

@@ -0,0 +1,24 @@
+/* ===== Slider Arrow ===== */
+.kombos-slider-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+  border-radius: 50%;
+  border: 1px solid var(--kombos-gray-200);
+  background: rgba(255, 255, 255, 0.5);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+  font-size: 1.25rem;
+  color: var(--kombos-gray-900);
+  transition: background 0.2s;
+}
+
+.kombos-slider-arrow:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.kombos-slider-arrow:disabled {
+  cursor: default;
+  color: var(--kombos-gray-400);
+}

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

@@ -0,0 +1,21 @@
+import type { ComponentChildren } from "preact";
+
+interface Props {
+  type: "discounted" | "new" | "dark";
+  size?: "s" | "m";
+  children: ComponentChildren;
+}
+
+export default function Tag({ type, size = "s", children }: Props) {
+  const typoClass = size === "s" ? "text-xs-semibold" : "text-md-semibold";
+  const typeClass =
+    type === "discounted"
+      ? "kombos-tag--discounted"
+      : type === "dark"
+        ? "kombos-tag--dark"
+        : "kombos-tag--new";
+
+  return (
+    <span className={`kombos-tag ${typeClass} ${typoClass}`}>{children}</span>
+  );
+}

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

@@ -0,0 +1,30 @@
+/* ===== Tag ===== */
+.kombos-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.5rem;
+  border-radius: 6px;
+  white-space: nowrap;
+}
+
+/* Discounted */
+.kombos-tag--discounted {
+  background: var(--kombos-discount-bg);
+  color: var(--kombos-white);
+}
+
+/* New */
+.kombos-tag--new {
+  background: var(--kombos-white);
+  border: 1px solid var(--kombos-gray-200);
+  color: var(--kombos-gray-900);
+}
+
+/* Dark */
+.kombos-tag--dark {
+  padding: 0.125rem 0.5rem;
+  border-radius: 4px;
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+}

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

@@ -0,0 +1,45 @@
+import type { JSX, Ref } from "preact";
+import { cx } from "../../utils/cx";
+
+const TYPOGRAPHY: Record<string, string> = {
+  s: "text-md-regular",
+  xs: "text-sm-regular",
+};
+
+interface Props
+  extends Omit<JSX.IntrinsicElements["textarea"], "size" | "ref"> {
+  size?: "xs" | "s";
+  status?: "default" | "error" | "success";
+  disabled?: boolean;
+  textareaRef?: Ref<HTMLTextAreaElement>;
+}
+
+export default function Textarea({
+  size = "s",
+  status = "default",
+  disabled,
+  textareaRef,
+  className,
+  value,
+  ...rest
+}: Props) {
+  const cls = cx(
+    "kombos-textarea",
+    `kombos-textarea--${size}`,
+    disabled && "kombos-textarea--disabled",
+    className,
+  );
+
+  return (
+    <div className={cls} data-state={status !== "default" ? status : undefined}>
+      <textarea
+        ref={textareaRef}
+        className={`kombos-textarea__native ${TYPOGRAPHY[size]}`}
+        disabled={disabled}
+        spellcheck={false}
+        value={value ?? ""}
+        {...rest}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,82 @@
+/* ===== Textarea Sub-Component ===== */
+
+/* --- Base --- */
+.kombos-textarea {
+  display: flex;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-white);
+  transition: border-color 0.15s ease;
+  width: 100%;
+}
+
+.kombos-textarea:hover {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-textarea:focus-within {
+  border-color: var(--kombos-gray-900);
+}
+
+/* --- Sizes --- */
+.kombos-textarea--s {
+  padding: 0.5625rem 0.8125rem;
+}
+
+.kombos-textarea--xs {
+  padding: 0.4375rem 0.75rem;
+}
+
+/* --- Native textarea --- */
+.kombos-textarea__native {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--kombos-gray-900);
+  padding: 0;
+  resize: vertical;
+  min-height: 5rem;
+}
+
+.kombos-textarea__native::placeholder {
+  color: var(--kombos-gray-400);
+}
+
+/* --- Status (standalone + inherited from FormItem) --- */
+.kombos-textarea[data-state="error"],
+[data-state="error"] .kombos-textarea {
+  border-color: var(--kombos-error);
+}
+
+.kombos-textarea[data-state="error"]:hover,
+.kombos-textarea[data-state="error"]:focus-within,
+[data-state="error"] .kombos-textarea:hover,
+[data-state="error"] .kombos-textarea:focus-within {
+  border-color: var(--kombos-error);
+}
+
+.kombos-textarea[data-state="success"],
+[data-state="success"] .kombos-textarea {
+  border-color: var(--kombos-success);
+}
+
+.kombos-textarea[data-state="success"]:hover,
+.kombos-textarea[data-state="success"]:focus-within,
+[data-state="success"] .kombos-textarea:hover,
+[data-state="success"] .kombos-textarea:focus-within {
+  border-color: var(--kombos-success);
+}
+
+/* --- Disabled state --- */
+.kombos-textarea--disabled {
+  background: var(--kombos-gray-50);
+  border-color: var(--kombos-gray-200);
+  pointer-events: none;
+}
+
+.kombos-textarea--disabled .kombos-textarea__native,
+.kombos-textarea--disabled .kombos-textarea__native::placeholder {
+  color: var(--kombos-gray-300);
+}

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

@@ -0,0 +1,46 @@
+import { cx } from "../../utils/cx";
+
+interface Props {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  "aria-label"?: string;
+}
+
+export default function Toggle({
+  checked = false,
+  onChange,
+  disabled = false,
+  className,
+  "aria-label": ariaLabel = "Toggle",
+}: Props) {
+  function handleClick(e: Event) {
+    e.preventDefault();
+    if (disabled) return;
+    onChange?.(!checked);
+  }
+
+  return (
+    <label
+      className={cx(
+        "kombos-toggle",
+        checked && "kombos-toggle--checked",
+        disabled && "kombos-toggle--disabled",
+        className,
+      )}
+      onClick={handleClick}
+    >
+      <input
+        type="checkbox"
+        className="kombos-toggle__native"
+        checked={checked}
+        disabled={disabled}
+        aria-label={ariaLabel}
+      />
+      <span className="kombos-toggle__track">
+        <span className="kombos-toggle__thumb" />
+      </span>
+    </label>
+  );
+}

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

@@ -0,0 +1,86 @@
+/* ===== Toggle Switch ===== */
+
+.kombos-toggle {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.kombos-toggle__native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.kombos-toggle__track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 2.5rem;
+  height: 1.5rem;
+  border-radius: 625rem;
+  background: var(--kombos-gray-200);
+  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.kombos-toggle__thumb {
+  position: absolute;
+  left: 0.375rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background: var(--kombos-white);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  transition:
+    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.2s ease;
+}
+
+/* Hover state */
+.kombos-toggle:hover .kombos-toggle__thumb {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
+}
+
+/* Focus-visible ring */
+.kombos-toggle__native:focus-visible ~ .kombos-toggle__track {
+  outline: 2px solid var(--kombos-gray-900);
+  outline-offset: 2px;
+}
+
+/* Checked state */
+.kombos-toggle--checked .kombos-toggle__track {
+  background: var(--kombos-gray-900);
+}
+
+.kombos-toggle--checked .kombos-toggle__thumb {
+  transform: translateX(0.75rem);
+}
+
+/* Disabled state */
+.kombos-toggle--disabled {
+  cursor: not-allowed;
+}
+
+.kombos-toggle--disabled .kombos-toggle__track {
+  background: var(--kombos-gray-100);
+}
+
+.kombos-toggle--disabled .kombos-toggle__thumb {
+  background: var(--kombos-gray-50);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.kombos-toggle--disabled.kombos-toggle--checked .kombos-toggle__track {
+  background: var(--kombos-gray-300);
+}
+
+.kombos-toggle--disabled:hover .kombos-toggle__thumb {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}

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

@@ -0,0 +1,153 @@
+import {
+  IkasProduct,
+  IkasVariantValue,
+  getIkasVariantValueThumbnailImage,
+  isIkasVariantTypeColorSelection,
+  selectVariantValue,
+  getDisplayedProductVariantTypes,
+  getProductVariantMainImage,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { BadgeImage, BadgeColor, BadgeText } from "../Badge";
+import { cx } from "../../utils/cx";
+
+interface Props {
+  product: IkasProduct;
+  size?: "xs" | "s" | "m" | "l";
+  disableRoute?: boolean;
+  scrollable?: boolean;
+  showLabels?: boolean;
+  useVariantImages?: boolean;
+  onSelect?: () => void;
+}
+
+const VariantBadge = observer(function VariantBadge({
+  product,
+  size = "s",
+  disableRoute,
+  scrollable,
+  showLabels,
+  useVariantImages,
+  onSelect,
+}: Props) {
+  const displayedVariantTypes = getDisplayedProductVariantTypes(product);
+  if (displayedVariantTypes.length === 0) return null;
+
+  function handleSelect(variantValue: IkasVariantValue) {
+    selectVariantValue(product, variantValue, disableRoute);
+    onSelect?.();
+  }
+
+  return (
+    <div
+      className={cx(
+        "kombos-variant-badge__groups",
+        size === "l" && "kombos-variant-badge__groups--l",
+      )}
+    >
+      {displayedVariantTypes.map((dvt) => {
+        const isColor = isIkasVariantTypeColorSelection(dvt.variantType);
+
+        return (
+          <div key={dvt.variantType.id} className="kombos-variant-badge__group">
+            {showLabels && (
+              <span className={cx("kombos-variant-badge__label", size === "xs" ? "text-xs-medium" : "text-sm-medium")}>
+                {dvt.variantType.name}
+              </span>
+            )}
+            <div
+              className={cx(
+                "kombos-variant-badge__row",
+                scrollable && "kombos-variant-badge__row--scrollable",
+                size === "l" && "kombos-variant-badge__row--l",
+              )}
+            >
+              {dvt.displayedVariantValues.map((dvv) => {
+                const isSelected = dvv.isSelected;
+                const outOfStock = dvv.hasStock === false;
+                const variantValue = dvv.variantValue;
+
+                if (isColor) {
+                  // Variant product image
+                  if (useVariantImages) {
+                    const variantImage = getProductVariantMainImage(
+                      dvv.variant,
+                    )?.image;
+
+                    if (variantImage) {
+                      return (
+                        <BadgeImage
+                          key={variantValue.id}
+                          image={variantImage}
+                          alt={variantValue.name}
+                          sizes="64px"
+                          variantImg
+                          size={size}
+                          selected={isSelected}
+                          outOfStock={outOfStock}
+                          onClick={() => handleSelect(variantValue)}
+                          aria-label={variantValue.name}
+                        />
+                      );
+                    }
+                  }
+
+                  // Thumbnail image
+                  const thumbImage =
+                    getIkasVariantValueThumbnailImage(variantValue);
+
+                  if (thumbImage) {
+                    return (
+                      <BadgeImage
+                        key={variantValue.id}
+                        image={thumbImage}
+                        alt={variantValue.name}
+                        sizes="(max-width: 1024px) 100vw, 100px"
+                        size={size}
+                        selected={isSelected}
+                        outOfStock={outOfStock}
+                        onClick={() => handleSelect(variantValue)}
+                        aria-label={variantValue.name}
+                      />
+                    );
+                  }
+
+                  // Color swatch
+                  const colorCode = variantValue.colorCode;
+                  if (colorCode) {
+                    return (
+                      <BadgeColor
+                        key={variantValue.id}
+                        colorCode={colorCode}
+                        size={size}
+                        selected={isSelected}
+                        outOfStock={outOfStock}
+                        onClick={() => handleSelect(variantValue)}
+                        aria-label={variantValue.name}
+                      />
+                    );
+                  }
+                }
+
+                // Text badge (fallback)
+                return (
+                  <BadgeText
+                    key={variantValue.id}
+                    size={size}
+                    selected={isSelected}
+                    outOfStock={outOfStock}
+                    onClick={() => handleSelect(variantValue)}
+                  >
+                    {variantValue.name}
+                  </BadgeText>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+
+export default VariantBadge;

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

@@ -0,0 +1,47 @@
+/* ===== Variant Badge Layout ===== */
+
+/* ---- Layout ---- */
+.kombos-variant-badge__groups {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.kombos-variant-badge__groups--l {
+  gap: 1.5rem;
+}
+
+.kombos-variant-badge__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.kombos-variant-badge__label {
+  color: var(--kombos-gray-900);
+  margin-bottom: 0.375rem;
+}
+
+.kombos-variant-badge__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.kombos-variant-badge__row--l {
+  gap: 0.5rem;
+}
+
+.kombos-variant-badge__row--scrollable {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.kombos-variant-badge__row--scrollable::-webkit-scrollbar {
+  display: none;
+}
+
+.kombos-variant-badge__row--scrollable .kombos-badge {
+  flex-shrink: 0;
+}