@ikas/code-components-mcp 0.105.0 → 0.106.0

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

@@ -0,0 +1,33 @@
+import { XSVG } from "../icons";
+
+interface Props {
+  value: string;
+  onInput: (e: Event) => void;
+  onClear?: () => void;
+  status?: "default" | "error" | "success";
+  id?: string;
+}
+
+export default function ColorInput({ value, onInput, onClear, status = "default", id }: Props) {
+  return (
+    <div className="kombos-color-input__row" data-state={status !== "default" ? status : undefined}>
+      <input
+        id={id}
+        type="color"
+        className="kombos-color-input__picker"
+        value={value}
+        onInput={onInput}
+      />
+      <span className="kombos-color-input__value text-sm-regular">{value}</span>
+      {onClear && (
+        <button
+          type="button"
+          className="kombos-color-input__clear"
+          onClick={onClear}
+        >
+          <XSVG />
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+.kombos-color-input__row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.kombos-color-input__picker {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  padding: 0.125rem;
+  cursor: pointer;
+  background: var(--kombos-white);
+}
+
+.kombos-color-input__picker::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.kombos-color-input__picker::-webkit-color-swatch {
+  border: none;
+  border-radius: 4px;
+}
+
+.kombos-color-input__value {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-color-input__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: var(--kombos-gray-400);
+  font-size: 1rem;
+}
+
+.kombos-color-input__clear:hover {
+  color: var(--kombos-gray-700);
+}
+
+/* --- Status (standalone + inherited from FormItem) --- */
+[data-state="error"] .kombos-color-input__picker {
+  border-color: var(--kombos-error);
+}
+
+[data-state="success"] .kombos-color-input__picker {
+  border-color: var(--kombos-success);
+}

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

@@ -0,0 +1,66 @@
+import type { ComponentChildren } from "preact";
+import { useId } from "preact/hooks";
+import { cx } from "../../utils/cx";
+import { cloneElement, isValidElement } from "preact";
+
+type FormItemStatus = "default" | "error" | "success";
+
+interface Props {
+  label?: ComponentChildren;
+  description?: ComponentChildren;
+  status?: FormItemStatus;
+  helper?: ComponentChildren;
+  children: ComponentChildren;
+  className?: string;
+  htmlFor?: string;
+}
+
+export default function FormItem({
+  label,
+  description,
+  status = "default",
+  helper,
+  children,
+  className,
+  htmlFor,
+}: Props) {
+  const autoId = useId();
+  const helperId = helper ? `${autoId}-helper` : undefined;
+
+  const enhancedChildren =
+    helperId && isValidElement(children)
+      ? cloneElement(children, { "aria-describedby": helperId })
+      : children;
+
+  return (
+    <div
+      className={cx("kombos-form-item", className)}
+      data-state={status !== "default" ? status : undefined}
+    >
+      {label &&
+        (htmlFor ? (
+          <label
+            htmlFor={htmlFor}
+            className="kombos-form-item__label text-xs-medium"
+          >
+            {label}
+          </label>
+        ) : (
+          <span className="kombos-form-item__label text-xs-medium">
+            {label}
+          </span>
+        ))}
+      {description && (
+        <span className="kombos-form-item__description text-xs-regular">
+          {description}
+        </span>
+      )}
+      {enhancedChildren}
+      {helper && (
+        <span id={helperId} className="kombos-form-item__helper text-xs-regular">
+          {helper}
+        </span>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,38 @@
+/* ===== FormItem Sub-Component ===== */
+
+.kombos-form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+/* Label */
+.kombos-form-item__label {
+  width: fit-content;
+  color: var(--kombos-gray-700);
+}
+
+/* Description */
+.kombos-form-item__description {
+  width: fit-content;
+  margin-top: -0.25rem;
+  color: var(--kombos-gray-500);
+}
+
+
+/* Helper text */
+.kombos-form-item__helper {
+  color: var(--kombos-gray-500);
+}
+
+/* === Error state === */
+[data-state="error"] .kombos-form-item__label,
+[data-state="error"] .kombos-form-item__helper {
+  color: var(--kombos-error);
+}
+
+/* === Success state === */
+[data-state="success"] .kombos-form-item__helper {
+  color: var(--kombos-success);
+}

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

@@ -0,0 +1,55 @@
+import { useState, useEffect, useCallback } from "preact/hooks";
+import { useScrollLock } from "../../hooks/useScrollLock";
+import { cx } from "../../utils/cx";
+import { XSVG } from "../icons";
+
+interface Props {
+  src: string;
+  alt: string;
+  onClose: () => void;
+}
+
+export default function ImagePreviewModal({ src, alt, onClose }: Props) {
+  const [open, setOpen] = useState(false);
+
+  useScrollLock();
+
+  useEffect(() => {
+    requestAnimationFrame(() => setOpen(true));
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    setTimeout(onClose, 300);
+  }, [onClose]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") handleClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleClose]);
+
+  return (
+    <div
+      className={cx("kombos-image-preview", open && "kombos-image-preview--open")}
+      onClick={handleClose}
+    >
+      <button
+        type="button"
+        className="kombos-image-preview__close"
+        onClick={handleClose}
+        aria-label="Close"
+      >
+        <XSVG />
+      </button>
+      <img
+        src={src}
+        alt={alt}
+        className="kombos-image-preview__img"
+        onClick={(e) => e.stopPropagation()}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+/* Image preview overlay */
+.kombos-image-preview {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kombos-z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.35);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  cursor: pointer;
+}
+
+.kombos-image-preview--open {
+  opacity: 1;
+}
+
+/* Close button */
+.kombos-image-preview__close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: var(--kombos-white);
+  border: none;
+  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 1.25rem;
+  color: var(--kombos-gray-900);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transition: background 0.15s;
+}
+
+.kombos-image-preview__close:hover {
+  background: var(--kombos-gray-50);
+}
+
+/* Preview image */
+.kombos-image-preview__img {
+  max-width: 90vw;
+  max-height: 85vh;
+  object-fit: contain;
+  border-radius: 6px;
+  cursor: default;
+}

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

@@ -0,0 +1,69 @@
+import { useState } from "preact/hooks";
+import type { Ref, InputHTMLAttributes, ComponentChildren } from "preact";
+import { cx } from "../../utils/cx";
+import { EyeSVG, EyeSlashSVG } from "../icons";
+
+const TYPOGRAPHY: Record<string, string> = {
+  s: "text-md-regular",
+  xs: "text-sm-regular",
+};
+
+interface Props extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "size" | "label" | "icon"
+> {
+  size?: "xs" | "s";
+  status?: "default" | "error" | "success";
+  password?: boolean;
+  disabled?: boolean;
+  leftIcon?: ComponentChildren;
+  inputRef?: Ref<HTMLInputElement>;
+}
+
+export default function Input({
+  size = "s",
+  status = "default",
+  password = false,
+  disabled,
+  leftIcon,
+  inputRef,
+  className,
+  value,
+  type = "text",
+  ...rest
+}: Props) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const cls = cx(
+    "kombos-input",
+    `kombos-input--${size}`,
+    leftIcon && "kombos-input--with-icon",
+    disabled && "kombos-input--disabled",
+    className,
+  );
+
+  return (
+    <div className={cls} data-state={status !== "default" ? status : undefined}>
+      {leftIcon && <span className="kombos-input__icon">{leftIcon}</span>}
+      <input
+        ref={inputRef}
+        className={`kombos-input__native ${TYPOGRAPHY[size]}`}
+        type={password ? (showPassword ? "text" : "password") : type}
+        disabled={disabled}
+        value={value ?? ""}
+        {...rest}
+      />
+      {password && (
+        <button
+          type="button"
+          className="kombos-input__toggle"
+          onClick={() => setShowPassword((prev) => !prev)}
+          tabIndex={-1}
+          aria-label={showPassword ? "Hide password" : "Show password"}
+        >
+          {showPassword ? <EyeSVG /> : <EyeSlashSVG />}
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,162 @@
+/* ===== Input Sub-Component ===== */
+
+/* --- Base --- */
+.kombos-input {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-white);
+  transition: border-color 0.15s ease;
+  width: 100%;
+}
+
+.kombos-input:hover {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-input:focus-within {
+  border-color: var(--kombos-gray-900);
+}
+
+/* --- Sizes --- */
+.kombos-input--s {
+  padding: 0.5rem 0.8125rem;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+}
+
+.kombos-input--xs {
+  padding: 0.375rem 0.75rem;
+  gap: 0.375rem;
+  min-height: 2.25rem;
+}
+
+/* --- Native input --- */
+.kombos-input__native {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--kombos-gray-900);
+  padding: 0;
+}
+
+.kombos-input__native::placeholder {
+  color: var(--kombos-gray-400);
+}
+
+/* --- Left icon --- */
+.kombos-input__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--kombos-gray-500);
+}
+
+.kombos-input--s .kombos-input__icon {
+  font-size: 1.25rem;
+}
+
+.kombos-input--xs .kombos-input__icon {
+  font-size: 1rem;
+}
+
+/* --- With-icon variant --- */
+.kombos-input--with-icon {
+  border-color: var(--kombos-gray-500);
+}
+
+.kombos-input--s.kombos-input--with-icon {
+  padding: 0.5rem 0.6875rem;
+  gap: 0.75rem;
+}
+
+.kombos-input--xs.kombos-input--with-icon {
+  padding: 0.375rem 0.6875rem;
+  gap: 0.5rem;
+}
+
+.kombos-input--with-icon:hover,
+.kombos-input--with-icon:focus-within {
+  border-color: var(--kombos-gray-700);
+}
+
+.kombos-input--with-icon:focus-within .kombos-input__icon {
+  color: var(--kombos-gray-700);
+}
+
+/* --- Password toggle --- */
+.kombos-input__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--kombos-gray-400);
+}
+
+.kombos-input--s .kombos-input__toggle {
+  font-size: 1.5rem;
+}
+
+.kombos-input--xs .kombos-input__toggle {
+  font-size: 1.25rem;
+}
+
+/* --- Date input --- */
+.kombos-input__native[type="date"],
+.kombos-input__native[type="datetime-local"] {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.kombos-input__native[type="date"]::-webkit-calendar-picker-indicator,
+.kombos-input__native[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  display: block;
+  opacity: 1;
+  cursor: pointer;
+  width: 1rem;
+  height: 1rem;
+}
+
+/* --- Status (standalone + inherited from FormItem) --- */
+.kombos-input[data-state="error"],
+[data-state="error"] .kombos-input {
+  border-color: var(--kombos-error);
+}
+
+.kombos-input[data-state="error"]:hover,
+.kombos-input[data-state="error"]:focus-within,
+[data-state="error"] .kombos-input:hover,
+[data-state="error"] .kombos-input:focus-within {
+  border-color: var(--kombos-error);
+}
+
+.kombos-input[data-state="success"],
+[data-state="success"] .kombos-input {
+  border-color: var(--kombos-success);
+}
+
+.kombos-input[data-state="success"]:hover,
+.kombos-input[data-state="success"]:focus-within,
+[data-state="success"] .kombos-input:hover,
+[data-state="success"] .kombos-input:focus-within {
+  border-color: var(--kombos-success);
+}
+
+/* --- Disabled state --- */
+.kombos-input--disabled {
+  background: var(--kombos-gray-50);
+  border-color: var(--kombos-gray-200);
+  pointer-events: none;
+}
+
+.kombos-input--disabled .kombos-input__native,
+.kombos-input--disabled .kombos-input__native::placeholder {
+  color: var(--kombos-gray-300);
+}

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

@@ -0,0 +1,41 @@
+import { MinusSVG, PlusSVG } from "../icons";
+import { cx } from "../../utils/cx";
+
+interface Props {
+  value: number;
+  onChange: (value: number) => void;
+  size?: "default" | "sm";
+}
+
+export default function QuantitySelector({
+  value,
+  onChange,
+  size = "default",
+}: Props) {
+  return (
+    <div className={cx("kombos-pd__qty", size === "sm" && "kombos-pd__qty--sm")}>
+      <button
+        type="button"
+        className="kombos-pd__qty-btn"
+        onClick={() => onChange(Math.max(1, value - 1))}
+        disabled={value <= 1}
+        aria-label="Decrease quantity"
+      >
+        <MinusSVG />
+      </button>
+      <span
+        className={cx("kombos-pd__qty-value", size === "sm" ? "text-sm-medium" : "text-md-medium")}
+      >
+        {value}
+      </span>
+      <button
+        type="button"
+        className="kombos-pd__qty-btn"
+        onClick={() => onChange(value + 1)}
+        aria-label="Increase quantity"
+      >
+        <PlusSVG />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+/* Qty — border ececed, rounded-6, px-12 py-10, gap-16 between items */
+.kombos-pd__qty {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  padding: 0.5625rem 0.6875rem;
+}
+
+.kombos-pd__qty-btn {
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--kombos-gray-900);
+  padding: 0;
+  margin: -0.75rem;
+  padding: 0.75rem;
+}
+
+.kombos-pd__qty-btn:hover:not(:disabled) {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-pd__qty-btn:disabled {
+  color: var(--kombos-gray-300);
+  cursor: not-allowed;
+}
+
+.kombos-pd__qty-value {
+  min-width: 1.5rem;
+  text-align: center;
+  color: var(--kombos-gray-900);
+}
+
+/* Small size variant */
+.kombos-pd__qty--sm {
+  gap: 0.75rem;
+  padding: 0.4375rem 0.6875rem;
+}
+
+.kombos-pd__qty--sm .kombos-pd__qty-btn {
+  margin: -0.5rem;
+  padding: 0.5rem;
+}

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

@@ -0,0 +1,86 @@
+import { CSSProperties } from "preact";
+import { cx } from "../../utils/cx";
+import { CaretDownSVG, XCircleSVG } from "../icons";
+
+type Size = "xs" | "s" | "m";
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+interface Props {
+  options: Option[];
+  size?: Size;
+  status?: "default" | "error" | "success";
+  value?: string;
+  onChange?: (e: Event) => void;
+  onClear?: () => void;
+  allowClear?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  disabled?: boolean;
+  id?: string;
+  "aria-label"?: string;
+}
+
+const typographyClass: Record<Size, string> = {
+  xs: "text-sm-semibold",
+  s: "text-md-semibold",
+  m: "text-lg-semibold",
+};
+
+export default function Select({
+  options,
+  size = "s",
+  status = "default",
+  value,
+  onChange,
+  onClear,
+  allowClear,
+  className,
+  disabled,
+  id,
+  style,
+  "aria-label": ariaLabel,
+}: Props) {
+  const showClear = allowClear && !!value && !disabled;
+
+  const cls = cx(
+    "kombos-select",
+    `kombos-select--${size}`,
+    showClear && "kombos-select--clearable",
+    typographyClass[size],
+    className,
+  );
+
+  return (
+    <div className="kombos-select-wrap" style={style} data-state={status !== "default" ? status : undefined}>
+      <select
+        id={id}
+        className={cls}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        aria-label={ariaLabel}
+      >
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      <CaretDownSVG className="kombos-select__icon" />
+      {showClear && (
+        <button
+          type="button"
+          className="kombos-select__clear"
+          onClick={onClear}
+          aria-label="Clear selection"
+        >
+          <XCircleSVG />
+        </button>
+      )}
+    </div>
+  );
+}