@ikas/component-cli 0.132.0 → 1.1.0

package/templates/create-full/src/components/HeroSlider/styles.css

@@ -1,129 +0,0 @@
-.kombos-hero-slider {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.kombos-hero-slider__viewport {
-  position: relative;
-  width: 100%;
-}
-
-.kombos-hero-slider__viewport--contained {
-  max-width: var(--kombos-max-width);
-  margin: 0 auto;
-}
-
-@media (max-width: 1499px) {
-  .kombos-hero-slider__viewport--contained {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-.kombos-hero-slider__viewport-inner {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.kombos-hero-slider__track {
-  display: flex;
-  transition: transform 0.5s ease-in-out;
-  will-change: transform;
-}
-
-/* IkasComponentRenderer renders a display:contents wrapper,
-   so the actual flex children are the grandchild ikas wrapper divs */
-.kombos-hero-slider__track > * > * > * {
-  position: relative;
-  flex: 0 0 100%;
-  width: 100%;
-}
-
-/* Navigation arrows — positioned over the slider */
-.kombos-hero-slider__arrow {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 1.125rem;
-}
-
-.kombos-hero-slider__arrow--prev {
-  left: 0.75rem;
-}
-
-.kombos-hero-slider__arrow--next {
-  right: 0.75rem;
-}
-
-/* Dot pagination */
-.kombos-hero-slider__dots {
-  position: absolute;
-  bottom: 1.25rem;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 0;
-  align-items: center;
-}
-
-.kombos-hero-slider__dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  border: none;
-  padding: 1rem;
-  box-sizing: content-box;
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.5);
-  background-clip: content-box;
-  transition: background 0.2s ease;
-}
-
-.kombos-hero-slider__dot--active {
-  background: var(--kombos-white);
-  background-clip: content-box;
-}
-
-.kombos-hero-slider__dot:hover {
-  background: rgba(255, 255, 255, 0.8);
-  background-clip: content-box;
-}
-
-/* Responsive — tablet */
-@media (min-width: 768px) {
-  .kombos-hero-slider__arrow--prev {
-    left: 1rem;
-  }
-
-  .kombos-hero-slider__arrow--next {
-    right: 1rem;
-  }
-
-  .kombos-hero-slider__dots {
-    bottom: 0.75rem;
-    gap: 0;
-  }
-
-  .kombos-hero-slider__dot {
-    width: 0.75rem;
-    height: 0.75rem;
-    padding: 0.75rem;
-  }
-}
-
-/* Responsive — desktop */
-@media (min-width: 1024px) {
-  .kombos-hero-slider__arrow--prev {
-    left: 2rem;
-  }
-
-  .kombos-hero-slider__arrow--next {
-    right: 2rem;
-  }
-
-  .kombos-hero-slider__dots {
-    bottom: 2rem;
-  }
-}

package/templates/create-full/src/components/HeroSlider/types.ts

@@ -1,9 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  backgroundColor?: string;
-  autoplay?: boolean;
-  autoplayDelay?: number;
-  fullWidth?: boolean;
-  showArrows?: boolean;
-  components?: any;
-}

package/templates/create-full/src/components/HeroSliderItem/index.tsx

@@ -1,231 +0,0 @@
-import {
-  IkasImage,
-  getDefaultSrc,
-  createMediaSrcset,
-  getFormattedFontSize,
-  Router,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-import {
-  resolveAspectRatio,
-  resolveObjectFit,
-  resolveVerticalAlignment,
-} from "../../utils/media";
-import { cx } from "../../utils/cx";
-
-function renderImage(params: {
-  img: IkasImage;
-  cssClass?: string;
-  objectFit?: string;
-  aspectRatio?: string;
-  alt?: string;
-  sizes?: string;
-}) {
-  const { img, cssClass, objectFit, aspectRatio, alt, sizes } = params;
-
-  return (
-    <div className={cssClass} style={aspectRatio ? { aspectRatio } : undefined}>
-      <img
-        className="kombos-hero-slider-item__img"
-        src={getDefaultSrc(img)}
-        srcSet={createMediaSrcset(img)}
-        sizes={sizes}
-        alt={alt}
-        style={{ objectFit }}
-        loading="eager"
-        fetchpriority="high"
-        decoding="async"
-      />
-    </div>
-  );
-}
-
-export function HeroSliderItem({
-  image,
-  aspectRatio,
-  objectFit,
-  title = "",
-  titleAlignment,
-  textColor = "#FFFFFF",
-  overlay = false,
-  roundedCorners = false,
-  link = null,
-  buttonFontSize,
-  buttonColor,
-  buttonBgColor,
-  buttonHoverColor,
-  buttonHoverBgColor,
-  mobileImage,
-  mobileAspectRatio,
-  mobileObjectFit,
-  mobileTitle,
-  mobileTextColor = "#FFFFFF",
-  mobileOverlay = false,
-  mobileRoundedCorners = false,
-  mobileLink,
-  mobileButtonFontSize,
-  mobileButtonColor,
-  mobileButtonBgColor,
-  mobileButtonHoverColor,
-  mobileButtonHoverBgColor,
-  mobileTitleAlignment,
-}: Props) {
-  const desktopImg = image || mobileImage;
-  const mobileImg = mobileImage || image;
-
-  if (!desktopImg && !mobileImg) return null;
-
-  const desktopFit = resolveObjectFit(objectFit);
-  const mobileFit = mobileObjectFit
-    ? resolveObjectFit(mobileObjectFit)
-    : desktopFit;
-
-  const desktopAR = aspectRatio ? resolveAspectRatio(aspectRatio) : undefined;
-  const mobileAR = mobileAspectRatio
-    ? resolveAspectRatio(mobileAspectRatio)
-    : desktopAR;
-
-  const desktopAlign = resolveVerticalAlignment(titleAlignment);
-  const mobileAlign = mobileTitleAlignment
-    ? resolveVerticalAlignment(mobileTitleAlignment)
-    : "flex-start";
-
-  const desktopTitle = title;
-  const mobTitle = mobileTitle ?? title;
-
-  const desktopTextColor = textColor;
-  const mobTextColor = mobileTextColor ?? textColor;
-
-  const desktopOverlay = overlay;
-  const mobOverlay = mobileOverlay;
-
-  // Mobile button falls back to desktop values
-  const mobLink = mobileLink ?? link;
-  const mobBtnFontSize = mobileButtonFontSize ?? buttonFontSize;
-  const mobBtnColor = mobileButtonColor ?? buttonColor;
-  const mobBtnBgColor = mobileButtonBgColor ?? buttonBgColor;
-  const mobBtnHoverColor = mobileButtonHoverColor ?? buttonHoverColor;
-  const mobBtnHoverBgColor = mobileButtonHoverBgColor ?? buttonHoverBgColor;
-
-  const rootClass = cx(
-    "kombos-hero-slider-item",
-    roundedCorners && "kombos-hero-slider-item--rounded",
-    mobileRoundedCorners && "kombos-hero-slider-item--mobile-rounded",
-  );
-
-  const handleDesktopClick = () => {
-    if (!link) return;
-    Router.navigate(link.href || "/", false, link.openInNewTab ?? false);
-  };
-
-  const handleMobileClick = () => {
-    if (!mobLink) return;
-    Router.navigate(mobLink.href || "/", false, mobLink.openInNewTab ?? false);
-  };
-
-  const formattedDesktopFontSize = getFormattedFontSize(buttonFontSize);
-  const formattedMobileFontSize = getFormattedFontSize(mobBtnFontSize);
-
-  const desktopBtnStyle = {
-    ...(formattedDesktopFontSize ? { fontSize: formattedDesktopFontSize } : {}),
-    ...(buttonColor ? { "--btn-color": buttonColor } : {}),
-    ...(buttonBgColor ? { "--btn-bg": buttonBgColor } : {}),
-    ...(buttonHoverColor ? { "--btn-hover-color": buttonHoverColor } : {}),
-    ...(buttonHoverBgColor ? { "--btn-hover-bg": buttonHoverBgColor } : {}),
-  };
-
-  const mobileBtnStyle = {
-    ...(formattedMobileFontSize ? { fontSize: formattedMobileFontSize } : {}),
-    ...(mobBtnColor ? { "--btn-color": mobBtnColor } : {}),
-    ...(mobBtnBgColor ? { "--btn-bg": mobBtnBgColor } : {}),
-    ...(mobBtnHoverColor ? { "--btn-hover-color": mobBtnHoverColor } : {}),
-    ...(mobBtnHoverBgColor ? { "--btn-hover-bg": mobBtnHoverBgColor } : {}),
-  };
-
-  return (
-    <div className={rootClass}>
-      {/* Desktop image */}
-      {desktopImg &&
-        renderImage({
-          img: desktopImg,
-          cssClass:
-            "kombos-hero-slider-item__img-wrap kombos-hero-slider-item__img-wrap--desktop",
-          objectFit: desktopFit,
-          aspectRatio: desktopAR,
-          alt: desktopImg?.altText ?? title,
-          sizes: "(min-width: 1024px) 100vw, 1px",
-        })}
-      {/* Mobile image */}
-      {mobileImg &&
-        renderImage({
-          img: mobileImg,
-          cssClass:
-            "kombos-hero-slider-item__img-wrap kombos-hero-slider-item__img-wrap--mobile",
-          objectFit: mobileFit,
-          aspectRatio: mobileAR,
-          alt: mobileImg?.altText ?? mobTitle,
-          sizes: "(max-width: 1023px) 100vw, 1px",
-        })}
-      {/* Desktop overlay */}
-      {desktopOverlay && (
-        <div className="kombos-hero-slider-item__overlay kombos-hero-slider-item__overlay--desktop" />
-      )}
-      {/* Mobile overlay */}
-      {mobOverlay && (
-        <div className="kombos-hero-slider-item__overlay kombos-hero-slider-item__overlay--mobile" />
-      )}
-      {/* Desktop content */}
-      <div
-        className="kombos-hero-slider-item__content kombos-hero-slider-item__content--desktop"
-        style={{
-          "--slide-justify": desktopAlign,
-          ...(desktopTextColor ? { color: desktopTextColor } : {}),
-        }}
-      >
-        {desktopTitle && (
-          <div
-            className="kombos-hero-slider-item__title display-md-medium md:display-lg-medium"
-            dangerouslySetInnerHTML={{ __html: desktopTitle }}
-          />
-        )}
-        {link && link.label && (
-          <button
-            type="button"
-            className="kombos-hero-slider-item__cta"
-            style={desktopBtnStyle}
-            onClick={handleDesktopClick}
-          >
-            {link.label}
-          </button>
-        )}
-      </div>
-      {/* Mobile content */}
-      <div
-        className="kombos-hero-slider-item__content kombos-hero-slider-item__content--mobile"
-        style={{
-          "--slide-justify": mobileAlign,
-          ...(mobTextColor ? { color: mobTextColor } : {}),
-        }}
-      >
-        {mobTitle && (
-          <div
-            className="kombos-hero-slider-item__title display-xs-semibold md:display-sm-semibold"
-            dangerouslySetInnerHTML={{ __html: mobTitle }}
-          />
-        )}
-        {mobLink && mobLink.label && (
-          <button
-            type="button"
-            className="kombos-hero-slider-item__cta"
-            style={mobileBtnStyle}
-            onClick={handleMobileClick}
-          >
-            {mobLink.label}
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default HeroSliderItem;

package/templates/create-full/src/components/HeroSliderItem/styles.css

@@ -1,152 +0,0 @@
-.kombos-hero-slider-item {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.kombos-hero-slider-item--mobile-rounded {
-  border-radius: 12px;
-}
-
-/* Image wrapper */
-.kombos-hero-slider-item__img-wrap {
-  width: 100%;
-}
-
-.kombos-hero-slider-item__img-wrap--desktop {
-  display: none;
-}
-
-.kombos-hero-slider-item__img-wrap--mobile {
-  display: block;
-}
-
-.kombos-hero-slider-item__img {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-/* Overlay */
-.kombos-hero-slider-item__overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.2);
-  pointer-events: none;
-}
-
-.kombos-hero-slider-item__overlay--desktop {
-  display: none;
-}
-
-.kombos-hero-slider-item__overlay--mobile {
-  display: block;
-}
-
-/* Content */
-.kombos-hero-slider-item__content {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: var(--slide-justify, center);
-  padding: 1.5rem 1rem;
-  gap: 1.25rem;
-  pointer-events: none;
-}
-
-.kombos-hero-slider-item__content--desktop {
-  display: none;
-}
-
-.kombos-hero-slider-item__content--mobile {
-  display: flex;
-  justify-content: var(--slide-justify, flex-start);
-  text-align: center;
-  align-items: center;
-}
-
-.kombos-hero-slider-item__title {
-  margin: 0;
-  color: inherit;
-  pointer-events: auto;
-  width: 100%;
-  text-wrap-style: pretty;
-}
-
-.kombos-hero-slider-item__content--desktop .kombos-hero-slider-item__title {
-  max-width: 80%;
-}
-
-/* CTA button */
-.kombos-hero-slider-item__cta {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.625rem 1.25rem;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  pointer-events: auto;
-  background: var(--btn-bg, var(--kombos-white));
-  color: var(--btn-color, var(--kombos-gray-900));
-  border-color: var(--btn-bg, var(--kombos-gray-200));
-  transition: background 0.2s ease, color 0.2s ease;
-}
-
-.kombos-hero-slider-item__cta:hover {
-  background: var(--btn-hover-bg, var(--kombos-gray-50));
-  color: var(--btn-hover-color, var(--btn-color, var(--kombos-gray-900)));
-  border-color: var(--btn-hover-bg, var(--kombos-gray-300));
-}
-
-/* Tablet */
-@media (min-width: 768px) {
-  .kombos-hero-slider-item__content {
-    padding: 3rem;
-    gap: 1.5rem;
-  }
-}
-
-/* Desktop */
-@media (min-width: 1024px) {
-  .kombos-hero-slider-item--rounded {
-    border-radius: 12px;
-  }
-
-  .kombos-hero-slider-item--mobile-rounded {
-    border-radius: 0;
-  }
-
-  /* Swap visibility: show desktop, hide mobile */
-  .kombos-hero-slider-item__img-wrap--desktop {
-    display: block;
-  }
-
-  .kombos-hero-slider-item__img-wrap--mobile {
-    display: none;
-  }
-
-  .kombos-hero-slider-item__overlay--desktop {
-    display: block;
-  }
-
-  .kombos-hero-slider-item__overlay--mobile {
-    display: none;
-  }
-
-  .kombos-hero-slider-item__content--desktop {
-    display: flex;
-    align-items: center;
-    text-align: center;
-  }
-
-  .kombos-hero-slider-item__content--mobile {
-    display: none;
-  }
-
-  .kombos-hero-slider-item__content {
-    padding: 2.5rem 4.5rem;
-  }
-}

package/templates/create-full/src/components/HeroSliderItem/types.ts

@@ -1,34 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasImage, IkasNavigationLink, FontSizeStyleType } from "@ikas/bp-storefront";
-import type { AspectRatio, ObjectFit, VerticalAlignment } from "../../global-types";
-
-export interface Props {
-  image?: IkasImage | null;
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-  title?: string;
-  titleAlignment?: VerticalAlignment;
-  textColor?: string;
-  overlay?: boolean;
-  roundedCorners?: boolean;
-  mobileImage?: IkasImage | null;
-  mobileAspectRatio?: AspectRatio;
-  mobileObjectFit?: ObjectFit;
-  mobileTitle?: string;
-  mobileTitleAlignment?: VerticalAlignment;
-  mobileTextColor?: string;
-  mobileOverlay?: boolean;
-  mobileRoundedCorners?: boolean;
-  link?: IkasNavigationLink | null;
-  buttonFontSize?: FontSizeStyleType;
-  buttonColor?: string;
-  buttonBgColor?: string;
-  buttonHoverColor?: string;
-  buttonHoverBgColor?: string;
-  mobileLink?: IkasNavigationLink | null;
-  mobileButtonFontSize?: FontSizeStyleType;
-  mobileButtonColor?: string;
-  mobileButtonBgColor?: string;
-  mobileButtonHoverColor?: string;
-  mobileButtonHoverBgColor?: string;
-}