@ikas/component-cli 0.102.0 → 0.103.0

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

@@ -1,28 +0,0 @@
-.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

@@ -1,216 +0,0 @@
-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

@@ -1,170 +0,0 @@
-/* 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

@@ -1,42 +0,0 @@
-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

@@ -1,65 +0,0 @@
-.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

@@ -1,52 +0,0 @@
-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

@@ -1,51 +0,0 @@
-/* ===== 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

@@ -1,33 +0,0 @@
-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>
-  );
-}