@ikas/component-cli 0.93.0 → 0.95.0

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

@@ -0,0 +1,152 @@
+.register {
+  width: 100%;
+}
+
+.register__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.register__container {
+  width: 100%;
+  max-width: 29rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.register__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-align: center;
+}
+
+.register__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+}
+
+.register__subtitle {
+  color: var(--kombos-gray-500);
+  margin: 0;
+}
+
+.register__error-banner {
+  padding: 0.75rem 1rem;
+  background: rgba(255, 60, 72, 0.08);
+  border: 1px solid var(--kombos-error);
+  border-radius: 6px;
+  color: var(--kombos-error);
+}
+
+/* Social Login */
+.register__social {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Divider */
+.register__divider {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.register__divider-line {
+  flex: 1;
+  height: 1px;
+  background: var(--kombos-gray-200);
+}
+
+.register__divider-text {
+  color: var(--kombos-gray-500);
+  white-space: nowrap;
+}
+
+/* Form */
+.register__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Consents */
+.register__consents {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.register__consent-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.register__consent-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.register__consent-row > .kombos-checkbox {
+  margin-top: 3px;
+}
+
+.register__consent-error {
+  color: var(--kombos-error);
+  padding-left: 1.5rem;
+}
+
+.register__consent-label {
+  color: var(--kombos-gray-700);
+  margin-top: 1px;
+}
+
+a.register__consent-label {
+  text-decoration: none;
+}
+
+a.register__consent-label:hover {
+  color: var(--kombos-gray-900);
+}
+
+.register__submit-btn {
+  width: 100%;
+}
+
+.register__footer {
+  text-align: center;
+}
+
+.register__login-link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--kombos-gray-700);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.register__login-link:hover {
+  color: var(--kombos-gray-900);
+}
+
+@media (min-width: 768px) {
+  .register__wrapper {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .register__wrapper {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}

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

@@ -0,0 +1,27 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasNavigationLink } from "@ikas/bp-storefront";
+
+export interface Props {
+  title?: string;
+  subtitle?: string;
+  firstNameLabel?: string;
+  firstNamePlaceholder?: string;
+  lastNameLabel?: string;
+  lastNamePlaceholder?: string;
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  passwordLabel?: string;
+  passwordPlaceholder?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  loginLinkText?: string;
+  marketingConsentText?: string;
+  marketingConsentLink?: IkasNavigationLink | null;
+  agreementConsentText?: string;
+  agreementConsentLink?: IkasNavigationLink | null;
+  showGoogleLogin?: boolean;
+  googleButtonText?: string;
+  showFacebookLogin?: boolean;
+  facebookButtonText?: string;
+  dividerText?: string;
+}

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

@@ -0,0 +1,25 @@
+import { Props } from "./types";
+
+export function RichText({ title, content }: Props) {
+  if (!title && !content) return null;
+
+  return (
+    <section className="kombos-rich-text">
+      <div className="kombos-container">
+        {title && (
+          <h2 className="kombos-rich-text__title display-xs-semibold">
+            {title}
+          </h2>
+        )}
+        {content && (
+          <div
+            className="kombos-rich-text__content text-md-regular kombos-richtext"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default RichText;

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

@@ -0,0 +1,51 @@
+.kombos-rich-text {
+  width: 100%;
+}
+
+.kombos-rich-text .kombos-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-width: 50rem;
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.kombos-rich-text__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+  text-align: center;
+}
+
+.kombos-rich-text__content {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-rich-text__content a {
+  color: var(--kombos-gray-900);
+  text-decoration: underline;
+}
+
+.kombos-rich-text__content a:hover {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-rich-text__content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+
+@media (min-width: 768px) {
+  .kombos-rich-text .kombos-container {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .kombos-rich-text .kombos-container {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+}

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

@@ -0,0 +1,5 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  title?: string;
+  content?: string;
+}

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

@@ -0,0 +1,26 @@
+import { getDefaultSrc, createMediaSrcset } from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export function SocialMediaIcon({ icon, link }: Props) {
+  if (!icon) return null;
+
+  return (
+    <a
+      href={link?.href}
+      target={link?.openInNewTab ? "_blank" : undefined}
+      rel={link?.openInNewTab ? "noopener noreferrer" : undefined}
+      aria-label={link?.label || undefined}
+      className="kombos-social-media-icon"
+    >
+      <img
+        src={getDefaultSrc(icon)}
+        srcSet={createMediaSrcset(icon)}
+        sizes="20px"
+        alt={link?.label || ""}
+        className="kombos-social-media-icon__img"
+      />
+    </a>
+  );
+}
+
+export default SocialMediaIcon;

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

@@ -0,0 +1,17 @@
+.kombos-social-media-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  transition: opacity 0.15s ease;
+}
+
+.kombos-social-media-icon:hover {
+  opacity: 0.7;
+}
+
+.kombos-social-media-icon__img {
+  width: 1.25rem;
+  height: 1.25rem;
+  object-fit: contain;
+}

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

@@ -0,0 +1,7 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasImage, IkasNavigationLink } from "@ikas/bp-storefront";
+
+export interface Props {
+  icon?: IkasImage | null;
+  link?: IkasNavigationLink | null;
+}

package/templates/create-full/src/components/index.ts

@@ -0,0 +1,50 @@
+export { Header } from "./Header/index";
+export { HeroSlider } from "./HeroSlider/index";
+export { CategoryImages } from "./CategoryImages/index";
+export { Footer } from "./Footer/index";
+export { Login } from "./Login/index";
+export { Register } from "./Register/index";
+export { ForgotPassword } from "./ForgotPassword/index";
+export { RecoverPassword } from "./RecoverPassword/index";
+export { ProductSlider } from "./ProductSlider/index";
+export { AccountInfo } from "./AccountInfo/index";
+export { CategoryList } from "./CategoryList/index";
+export { ProductDetail } from "./ProductDetail/index";
+export { AccountInfoContent } from "./AccountInfoContent/index";
+export { AccountOrders } from "./AccountOrders/index";
+export { AccountFavorites } from "./AccountFavorites/index";
+export { Announcements } from "./Announcements/index";
+export { Announcement } from "./Announcement/index";
+export { Navbar } from "./Navbar/index";
+export { HeroSliderItem } from "./HeroSliderItem/index";
+export { CategoryImageItem } from "./CategoryImageItem/index";
+export { SocialMediaIcon } from "./SocialMediaIcon/index";
+export { FeatureItem } from "./FeatureItem/index";
+export { Features } from "./Features/index";
+export { CardProductName } from "./CardProductName/index";
+export { CardProductVariants } from "./CardProductVariants/index";
+export { CardProductPrice } from "./CardProductPrice/index";
+export { ProductDetailNameFavorite } from "./ProductDetailNameFavorite/index";
+export { ProductDetailSku } from "./ProductDetailSku/index";
+export { ProductDetailPrices } from "./ProductDetailPrices/index";
+export { ProductDetailProductGroup } from "./ProductDetailProductGroup/index";
+export { ProductDetailVariant } from "./ProductDetailVariant/index";
+export { ProductDetailAddToCart } from "./ProductDetailAddToCart/index";
+export { ProductDetailFeatures } from "./ProductDetailFeatures/index";
+export { ProductDetailDescription } from "./ProductDetailDescription/index";
+export { ProductDetailBundleProduct } from "./ProductDetailBundleProduct/index";
+export { ProductDetailBundleFurniture } from "./ProductDetailBundleFurniture/index";
+export { ProductDetailOptionSet } from "./ProductDetailOptionSet/index";
+export { CartPage } from "./CartPage/index";
+export { ProductDetailOffer } from "./ProductDetailOffer/index";
+export { ProductDetailFeatureItem } from "./ProductDetailFeatureItem/index";
+export { AccountOrderDetail } from "./AccountOrderDetail/index";
+export { AccountAddresses } from "./AccountAddresses/index";
+export { CollapsibleContent } from "./CollapsibleContent/index";
+export { BlogPost } from "./BlogPost/index";
+export { BlogHome } from "./BlogHome/index";
+export { CustomerEmailVerification } from "./CustomerEmailVerification/index";
+export { RichText } from "./RichText/index";
+export { ProductDetailReviews } from "./ProductDetailReviews/index";
+export { NotFound } from "./NotFound/index";
+export { CookieBar } from "./CookieBar/index";

package/templates/create-full/src/global-types.ts

@@ -0,0 +1,13 @@
+// Auto-generated global type definitions for ikas code components.
+// This file is regenerated automatically — do not edit manually.
+
+/** Enum type: s3OODUmZpJ */
+export type AspectRatio = "Square" | "Portrait" | "Landscape" | "Video";
+/** Enum type: __breakpointsEnum__ */
+export type Breakpoints = "desktop";
+/** Enum type: Tkt3wfuJ5F */
+export type NumberOfColumns = "One" | "Two" | "Three" | "Four" | "Five";
+/** Enum type: GrylMqHxui */
+export type ObjectFit = "Fill" | "Cover" | "Contain";
+/** Enum type: 08UWYbbs0P */
+export type VerticalAlignment = "Top" | "Middle" | "Bottom";