@ikas/component-cli 0.92.0 → 0.94.0

package/templates/create-full/src/sub-components/CartItem/components/OptionValueDisplay/styles.css

@@ -0,0 +1,28 @@
+.kombos-cart-item__option {
+  color: var(--kombos-gray-500);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.kombos-cart-item__option-color {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  border: 1px solid var(--kombos-gray-200);
+  flex-shrink: 0;
+}
+
+.kombos-cart-item__option-file {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--kombos-gray-500);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.kombos-cart-item__option-file:hover {
+  color: var(--kombos-gray-700);
+}

package/templates/create-full/src/sub-components/CartItem/index.tsx

@@ -0,0 +1,216 @@
+import { observer } from "@ikas/component-utils";
+import { TrashSVG, NoProductSVG } from "../icons";
+import QuantitySelector from "../QuantitySelector";
+import BundleProducts from "./components/BundleProducts";
+import ItemOptions from "./components/ItemOptions";
+import {
+  getIkasOrderLineVariantMainImage,
+  getIkasOrderLineVariantHref,
+  getOrderLineItemFormattedFinalPriceWithQuantity,
+  getDefaultSrc,
+  createMediaSrcset,
+  changeItemQuantity,
+  IkasOrderLineItem,
+  getOrderLineItemFormattedOverridenPriceWithQuantity,
+  hasOrderLineItemDiscount,
+  getOrderLineItemOverridenPriceWithQuantity,
+} from "@ikas/bp-storefront";
+import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
+import { cx } from "../../utils/cx";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+interface CartItemProps {
+  item: IkasOrderLineItem;
+  onRemove: (item: IkasOrderLineItem) => void;
+  variant?: "sidebar" | "page";
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}
+
+const CartItem = observer(function CartItem({
+  item,
+  onRemove,
+  variant = "sidebar",
+  aspectRatio,
+  objectFit,
+}: CartItemProps) {
+  const isPage = variant === "page";
+
+  const mediaStyle: Record<string, string> = {
+    aspectRatio: resolveAspectRatio(aspectRatio),
+    objectFit: resolveObjectFit(objectFit),
+  };
+  const image = item.variant
+    ? getIkasOrderLineVariantMainImage(item.variant)
+    : null;
+  const href = item.variant
+    ? getIkasOrderLineVariantHref(item.variant)
+    : undefined;
+  const overridenPriceWithQuantity =
+    getOrderLineItemOverridenPriceWithQuantity(item);
+  const overridenFormattedPriceWithQuantity =
+    getOrderLineItemFormattedOverridenPriceWithQuantity(item);
+
+  const hasDiscount =
+    hasOrderLineItemDiscount(item) || !!overridenPriceWithQuantity;
+  const variantValues = item.variant?.variantValues ?? [];
+
+  const rootClass = isPage
+    ? "kombos-cart-item kombos-cart-item--page"
+    : "kombos-cart-item";
+  const nameClass = isPage
+    ? "kombos-cart-item__name text-md-semibold"
+    : "kombos-cart-item__name text-sm-regular";
+  const imgSizes = isPage ? "(min-width: 768px) 100px, 80px" : "72px";
+
+  return (
+    <div className={rootClass}>
+      <a href={href} className="kombos-cart-item__img-link">
+        {image?.isVideo ? (
+          <video
+            src={getDefaultSrc(image)}
+            className="kombos-cart-item__img"
+            style={mediaStyle}
+            muted
+            loop
+            autoPlay
+            playsInline
+          >
+            <track kind="captions" />
+          </video>
+        ) : image ? (
+          <img
+            src={getDefaultSrc(image)}
+            srcSet={createMediaSrcset(image)}
+            sizes={imgSizes}
+            alt={item.variant?.name || ""}
+            className="kombos-cart-item__img"
+            style={mediaStyle}
+          />
+        ) : (
+          <div
+            className="kombos-cart-item__img kombos-cart-item__img--placeholder"
+            style={mediaStyle}
+          >
+            <NoProductSVG />
+          </div>
+        )}
+      </a>
+      <div className="kombos-cart-item__details">
+        {isPage ? (
+          <div className="kombos-cart-item__top">
+            <div className="kombos-cart-item__info">
+              <a href={href} className={nameClass}>
+                {item.variant?.name}
+              </a>
+              {variantValues.length > 0 && (
+                <p className="kombos-cart-item__variant-text text-sm-regular">
+                  {variantValues
+                    .map(
+                      (vv) => `${vv.variantTypeName}: ${vv.variantValueName}`,
+                    )
+                    .join(" / ")}
+                </p>
+              )}
+            </div>
+            <button
+              className="kombos-cart-item__remove"
+              onClick={() => onRemove(item)}
+              aria-label="Remove"
+            >
+              <TrashSVG />
+            </button>
+          </div>
+        ) : (
+          <>
+            <a href={href} className={nameClass}>
+              {item.variant?.name}
+            </a>
+
+            {variantValues.length > 0 && (
+              <div className="kombos-cart-item__variants">
+                {variantValues.map((vv, idx) => (
+                  <span
+                    key={idx}
+                    className="kombos-cart-item__variant text-xs-regular"
+                  >
+                    {`${vv.variantTypeName}: ${vv.variantValueName}`}
+                  </span>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+
+        <ItemOptions item={item} />
+        <BundleProducts
+          item={item}
+          aspectRatio={aspectRatio}
+          objectFit={objectFit}
+        />
+
+        {isPage ? (
+          <div className="kombos-cart-item__bottom">
+            <QuantitySelector
+              size="sm"
+              value={item.quantity}
+              onChange={(qty) => changeItemQuantity(item, qty)}
+            />
+            <div className="kombos-cart-item__prices">
+              {hasDiscount && (
+                <span className="kombos-cart-item__original-price text-sm-regular-strike">
+                  {overridenFormattedPriceWithQuantity}
+                </span>
+              )}
+              <span
+                className={cx(
+                  "kombos-cart-item__price",
+                  "text-md-semibold",
+                  hasDiscount && "kombos-cart-item__price--discount",
+                )}
+              >
+                {getOrderLineItemFormattedFinalPriceWithQuantity(item)}
+              </span>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="kombos-cart-item__price-row">
+              <span
+                className={cx(
+                  "kombos-cart-item__price",
+                  "text-sm-medium",
+                  hasDiscount && "kombos-cart-item__price--discount",
+                )}
+              >
+                {getOrderLineItemFormattedFinalPriceWithQuantity(item)}
+              </span>
+              {hasDiscount && (
+                <span className="kombos-cart-item__original-price text-sm-regular-strike">
+                  {overridenFormattedPriceWithQuantity}
+                </span>
+              )}
+            </div>
+
+            <div className="kombos-cart-item__actions">
+              <QuantitySelector
+                size="sm"
+                value={item.quantity}
+                onChange={(qty) => changeItemQuantity(item, qty)}
+              />
+              <button
+                className="kombos-cart-item__remove"
+                onClick={() => onRemove(item)}
+                aria-label="Remove"
+              >
+                <TrashSVG />
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+});
+
+export default CartItem;

package/templates/create-full/src/sub-components/CartItem/styles.css

@@ -0,0 +1,170 @@
+/* Cart Sidebar Item */
+.kombos-cart-item {
+  display: flex;
+  gap: 0.875rem;
+  padding: 1.5rem 0;
+  border-bottom: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-cart-item:last-child {
+  border-bottom: none;
+}
+
+.kombos-cart-item__img-link {
+  flex-shrink: 0;
+  height: fit-content;
+}
+
+.kombos-cart-item__img {
+  width: 4.5rem;
+  border-radius: 6px;
+  border: 1px solid var(--kombos-gray-100);
+  background: var(--kombos-gray-100);
+}
+
+.kombos-cart-item__img--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kombos-gray-300);
+  font-size: 2.5rem;
+}
+
+.kombos-cart-item__details {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.kombos-cart-item__name {
+  max-width: 100%;
+  color: var(--kombos-gray-900);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kombos-cart-item__name:hover {
+  text-decoration: underline;
+}
+
+.kombos-cart-item__variants {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.75rem;
+}
+
+.kombos-cart-item__variant {
+  color: var(--kombos-gray-500);
+}
+
+/* Price Row */
+.kombos-cart-item__price-row {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.kombos-cart-item__original-price {
+  color: var(--kombos-gray-400);
+}
+
+.kombos-cart-item__price {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-cart-item__actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+}
+
+.kombos-cart-item__remove {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--kombos-gray-300);
+  padding: 0.25rem;
+  display: flex;
+  font-size: 1.25rem;
+  transition: color 0.15s;
+}
+
+.kombos-cart-item__remove:hover {
+  color: var(--kombos-gray-500);
+}
+
+/* Page variant */
+.kombos-cart-item--page {
+  gap: 1rem;
+  padding: 1.25rem 0;
+}
+
+.kombos-cart-item--page:first-child {
+  border-top: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-cart-item--page .kombos-cart-item__img {
+  width: 5rem;
+  background-color: var(--kombos-gray-50);
+}
+
+@media (min-width: 768px) {
+  .kombos-cart-item--page .kombos-cart-item__img {
+    width: 6.25rem;
+  }
+}
+
+.kombos-cart-item--page .kombos-cart-item__details {
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.kombos-cart-item--page .kombos-cart-item__remove {
+  color: var(--kombos-gray-400);
+  font-size: 1.125rem;
+}
+
+.kombos-cart-item--page .kombos-cart-item__remove:hover {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-cart-item__top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.kombos-cart-item__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.kombos-cart-item__variant-text {
+  color: var(--kombos-gray-500);
+  margin: 0;
+}
+
+.kombos-cart-item__bottom {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.kombos-cart-item__prices {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+

package/templates/create-full/src/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/templates/create-full/src/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/templates/create-full/src/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/templates/create-full/src/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;
+}

package/templates/create-full/src/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>
+  );
+}