@ikas/component-cli 0.132.0 → 1.1.0

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

@@ -1,76 +0,0 @@
-import { useState } from "preact/hooks";
-import { cx } from "../../utils/cx";
-import { Star1SVG, StarFilledSVG } from "../icons";
-
-interface Props {
-  value: number;
-  max?: number;
-  interactive?: boolean;
-  onChange?: (value: number) => void;
-  size?: "sm" | "md";
-  className?: string;
-}
-
-export default function StarRating({
-  value,
-  max = 5,
-  interactive = false,
-  onChange,
-  size = "md",
-  className,
-}: Props) {
-  const [hovered, setHovered] = useState(0);
-
-  const displayValue = interactive && hovered > 0 ? hovered : value;
-
-  return (
-    <div
-      className={cx(
-        "kombos-star-rating",
-        `kombos-star-rating--${size}`,
-        interactive && "kombos-star-rating--interactive",
-        className
-      )}
-      onMouseLeave={interactive ? () => setHovered(0) : undefined}
-      role={!interactive ? "img" : undefined}
-      aria-label={!interactive ? `${value} out of ${max} stars` : undefined}
-    >
-      {Array.from({ length: max }, (_, i) => {
-        const starIndex = i + 1;
-        const isFilled = starIndex <= Math.round(displayValue);
-        const Icon = isFilled ? StarFilledSVG : Star1SVG;
-
-        if (!interactive) {
-          return (
-            <span
-              key={i}
-              className={cx(
-                "kombos-star-rating__star",
-                isFilled && "kombos-star-rating__star--filled"
-              )}
-              aria-hidden="true"
-            >
-              <Icon />
-            </span>
-          );
-        }
-
-        return (
-          <button
-            key={i}
-            type="button"
-            className={cx(
-              "kombos-star-rating__star",
-              isFilled && "kombos-star-rating__star--filled"
-            )}
-            onClick={() => onChange?.(starIndex)}
-            onMouseEnter={() => setHovered(starIndex)}
-            aria-label={`${starIndex} star`}
-          >
-            <Icon />
-          </button>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,40 +0,0 @@
-.kombos-star-rating {
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-}
-
-.kombos-star-rating--sm {
-  font-size: 1rem;
-}
-
-.kombos-star-rating--md {
-  font-size: 1.25rem;
-}
-
-.kombos-star-rating__star {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--kombos-gray-300);
-  line-height: 0;
-}
-
-.kombos-star-rating__star--filled {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-star-rating--interactive .kombos-star-rating__star {
-  all: unset;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--kombos-gray-900);
-  line-height: 0;
-  cursor: pointer;
-  transition: color 0.15s ease;
-}
-
-.kombos-star-rating--interactive .kombos-star-rating__star:hover {
-  color: var(--kombos-gray-900);
-}

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

@@ -1,21 +0,0 @@
-import type { ComponentChildren } from "preact";
-
-interface Props {
-  type: "discounted" | "new" | "dark";
-  size?: "s" | "m";
-  children: ComponentChildren;
-}
-
-export default function Tag({ type, size = "s", children }: Props) {
-  const typoClass = size === "s" ? "text-xs-semibold" : "text-md-semibold";
-  const typeClass =
-    type === "discounted"
-      ? "kombos-tag--discounted"
-      : type === "dark"
-        ? "kombos-tag--dark"
-        : "kombos-tag--new";
-
-  return (
-    <span className={`kombos-tag ${typeClass} ${typoClass}`}>{children}</span>
-  );
-}

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

@@ -1,30 +0,0 @@
-/* ===== Tag ===== */
-.kombos-tag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem 0.5rem;
-  border-radius: 6px;
-  white-space: nowrap;
-}
-
-/* Discounted */
-.kombos-tag--discounted {
-  background: var(--kombos-discount-bg);
-  color: var(--kombos-white);
-}
-
-/* New */
-.kombos-tag--new {
-  background: var(--kombos-white);
-  border: 1px solid var(--kombos-gray-200);
-  color: var(--kombos-gray-900);
-}
-
-/* Dark */
-.kombos-tag--dark {
-  padding: 0.125rem 0.5rem;
-  border-radius: 4px;
-  background: var(--kombos-gray-900);
-  color: var(--kombos-white);
-}

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

@@ -1,45 +0,0 @@
-import type { JSX, Ref } from "preact";
-import { cx } from "../../utils/cx";
-
-const TYPOGRAPHY: Record<string, string> = {
-  s: "text-md-regular",
-  xs: "text-sm-regular",
-};
-
-interface Props
-  extends Omit<JSX.IntrinsicElements["textarea"], "size" | "ref"> {
-  size?: "xs" | "s";
-  status?: "default" | "error" | "success";
-  disabled?: boolean;
-  textareaRef?: Ref<HTMLTextAreaElement>;
-}
-
-export default function Textarea({
-  size = "s",
-  status = "default",
-  disabled,
-  textareaRef,
-  className,
-  value,
-  ...rest
-}: Props) {
-  const cls = cx(
-    "kombos-textarea",
-    `kombos-textarea--${size}`,
-    disabled && "kombos-textarea--disabled",
-    className,
-  );
-
-  return (
-    <div className={cls} data-state={status !== "default" ? status : undefined}>
-      <textarea
-        ref={textareaRef}
-        className={`kombos-textarea__native ${TYPOGRAPHY[size]}`}
-        disabled={disabled}
-        spellcheck={false}
-        value={value ?? ""}
-        {...rest}
-      />
-    </div>
-  );
-}

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

@@ -1,82 +0,0 @@
-/* ===== Textarea Sub-Component ===== */
-
-/* --- Base --- */
-.kombos-textarea {
-  display: flex;
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  background: var(--kombos-white);
-  transition: border-color 0.15s ease;
-  width: 100%;
-}
-
-.kombos-textarea:hover {
-  border-color: var(--kombos-gray-300);
-}
-
-.kombos-textarea:focus-within {
-  border-color: var(--kombos-gray-900);
-}
-
-/* --- Sizes --- */
-.kombos-textarea--s {
-  padding: 0.5625rem 0.8125rem;
-}
-
-.kombos-textarea--xs {
-  padding: 0.4375rem 0.75rem;
-}
-
-/* --- Native textarea --- */
-.kombos-textarea__native {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--kombos-gray-900);
-  padding: 0;
-  resize: vertical;
-  min-height: 5rem;
-}
-
-.kombos-textarea__native::placeholder {
-  color: var(--kombos-gray-400);
-}
-
-/* --- Status (standalone + inherited from FormItem) --- */
-.kombos-textarea[data-state="error"],
-[data-state="error"] .kombos-textarea {
-  border-color: var(--kombos-error);
-}
-
-.kombos-textarea[data-state="error"]:hover,
-.kombos-textarea[data-state="error"]:focus-within,
-[data-state="error"] .kombos-textarea:hover,
-[data-state="error"] .kombos-textarea:focus-within {
-  border-color: var(--kombos-error);
-}
-
-.kombos-textarea[data-state="success"],
-[data-state="success"] .kombos-textarea {
-  border-color: var(--kombos-success);
-}
-
-.kombos-textarea[data-state="success"]:hover,
-.kombos-textarea[data-state="success"]:focus-within,
-[data-state="success"] .kombos-textarea:hover,
-[data-state="success"] .kombos-textarea:focus-within {
-  border-color: var(--kombos-success);
-}
-
-/* --- Disabled state --- */
-.kombos-textarea--disabled {
-  background: var(--kombos-gray-50);
-  border-color: var(--kombos-gray-200);
-  pointer-events: none;
-}
-
-.kombos-textarea--disabled .kombos-textarea__native,
-.kombos-textarea--disabled .kombos-textarea__native::placeholder {
-  color: var(--kombos-gray-300);
-}

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

@@ -1,257 +0,0 @@
-import { render } from "preact";
-import { useEffect, useRef, useState, useCallback } from "preact/hooks";
-import { CheckSVG, XSVG } from "../icons";
-import { cx } from "../../utils/cx";
-import type { ToastItem } from "../../hooks/useToast";
-import { TOAST_LIMIT } from "../../hooks/useToast";
-
-const DISMISS_DURATION = 3000;
-const EXIT_DURATION = 350;
-const GAP = 8;
-
-// Injected once into <head> so styles apply to portal elements on body
-let styleInjected = false;
-function injectStyles() {
-  if (styleInjected) return;
-  styleInjected = true;
-  const style = document.createElement("style");
-  style.textContent = `
-.kombos-toast-container{position:fixed;top:1.5rem;left:50%;transform:translateX(-50%);z-index:var(--kombos-z-overlay);pointer-events:none;display:flex;flex-direction:column;align-items:center}
-.kombos-toast-item{position:absolute;top:0;pointer-events:auto;transition:transform .4s cubic-bezier(.21,1.02,.73,1),opacity .3s ease}
-.kombos-toast{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:6px;border:1px solid var(--kombos-gray-200);background:var(--kombos-white);box-shadow:0 4px 12px rgba(0,0,0,.08);white-space:nowrap;min-width:18rem;max-width:25rem;opacity:0;transform:translateY(-2rem);transition:opacity .3s ease,transform .4s cubic-bezier(.21,1.02,.73,1)}
-.kombos-toast--mounted{opacity:1;transform:translateY(0)}
-.kombos-toast--exiting{opacity:0;transform:translateY(-2rem);transition:opacity .25s ease,transform .35s cubic-bezier(.06,.71,.55,1)}
-.kombos-toast__icon{display:flex;flex-shrink:0;font-size:1.125rem}
-.kombos-toast--success .kombos-toast__icon{color:var(--kombos-success)}
-.kombos-toast--error .kombos-toast__icon{color:var(--kombos-error)}
-.kombos-toast__message{color:var(--kombos-gray-900);overflow:hidden;text-overflow:ellipsis}
-.kombos-toast__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;margin-left:auto;border:none;background:none;cursor:pointer;color:var(--kombos-gray-400);font-size:.875rem;transition:color .15s ease}
-.kombos-toast__close:hover{color:var(--kombos-gray-700)}
-`;
-  document.head.appendChild(style);
-}
-
-interface ToastProps {
-  id: number;
-  message: string;
-  variant: "success" | "error";
-  frontIndex: number;
-  expanded: boolean;
-  pauseTimers: boolean;
-  onDismiss: (id: number) => void;
-  heights: { current: Map<number, number> };
-  toastIds: number[];
-}
-
-function Toast({
-  id,
-  message,
-  variant,
-  frontIndex,
-  expanded,
-  pauseTimers,
-  onDismiss,
-  heights,
-  toastIds,
-}: ToastProps) {
-  const [mounted, setMounted] = useState(false);
-  const [exiting, setExiting] = useState(false);
-  const cardRef = useRef<HTMLDivElement>(null);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const remainingRef = useRef(DISMISS_DURATION);
-  const startRef = useRef(0);
-  const onDismissRef = useRef(onDismiss);
-  const exitingRef = useRef(false);
-  onDismissRef.current = onDismiss;
-
-  useEffect(() => {
-    if (cardRef.current) {
-      heights.current.set(id, cardRef.current.getBoundingClientRect().height);
-    }
-    requestAnimationFrame(() => setMounted(true));
-    return () => {
-      heights.current.delete(id);
-    };
-  }, []);
-
-  const clearTimer = useCallback(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  }, []);
-
-  const startExit = useCallback(() => {
-    if (exitingRef.current) return;
-    exitingRef.current = true;
-    clearTimer();
-    setExiting(true);
-    setTimeout(() => onDismissRef.current(id), EXIT_DURATION);
-  }, [id, clearTimer]);
-
-  const startTimer = useCallback(() => {
-    clearTimer();
-    startRef.current = Date.now();
-    timerRef.current = setTimeout(startExit, remainingRef.current);
-  }, [clearTimer, startExit]);
-
-  useEffect(() => {
-    if (mounted && !pauseTimers && !exitingRef.current) startTimer();
-    return clearTimer;
-  }, [mounted, pauseTimers, startTimer]);
-
-  useEffect(() => {
-    if (!mounted || exitingRef.current) return;
-    if (pauseTimers && timerRef.current) {
-      clearTimer();
-      remainingRef.current -= Date.now() - startRef.current;
-      if (remainingRef.current < 0) remainingRef.current = 0;
-    }
-  }, [pauseTimers]);
-
-  // Expanded offset (downward from top)
-  let expandedOffset = 0;
-  if (expanded) {
-    const myIdx = toastIds.indexOf(id);
-    for (let i = myIdx + 1; i < toastIds.length; i++) {
-      expandedOffset += (heights.current.get(toastIds[i]) ?? 0) + GAP;
-    }
-  }
-
-  // Stacking styles
-  let wrapperTransform: string;
-  let wrapperOpacity: number;
-  let hidden = false;
-
-  if (expanded) {
-    wrapperTransform = `translateY(${expandedOffset}px) scale(1)`;
-    wrapperOpacity = 1;
-  } else if (frontIndex === 0) {
-    wrapperTransform = "translateY(0) scale(1)";
-    wrapperOpacity = 1;
-  } else if (frontIndex === 1) {
-    wrapperTransform = "translateY(0.5rem) scale(0.95)";
-    wrapperOpacity = 0.8;
-  } else if (frontIndex === 2) {
-    wrapperTransform = "translateY(1rem) scale(0.9)";
-    wrapperOpacity = 0.6;
-  } else {
-    wrapperTransform = "translateY(1rem) scale(0.9)";
-    wrapperOpacity = 0;
-    hidden = true;
-  }
-
-  const cardClass = cx(
-    "kombos-toast",
-    `kombos-toast--${variant}`,
-    mounted && !exiting && "kombos-toast--mounted",
-    exiting && "kombos-toast--exiting"
-  );
-
-  return (
-    <div
-      className="kombos-toast-item"
-      style={{
-        transform: wrapperTransform,
-        opacity: wrapperOpacity,
-        zIndex: 1000 - frontIndex,
-        visibility: hidden ? "hidden" : "visible",
-      }}
-    >
-      <div ref={cardRef} className={cardClass} role="alert">
-        <span className="kombos-toast__icon">
-          {variant === "success" ? <CheckSVG /> : <XSVG />}
-        </span>
-        <span className="kombos-toast__message text-sm-medium">{message}</span>
-        <button
-          type="button"
-          className="kombos-toast__close"
-          onClick={startExit}
-          aria-label="Close"
-        >
-          <XSVG />
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// Rendered inside the portal (body-level), manages its own state
-function ToastPortal({
-  toasts,
-  onDismiss,
-}: {
-  toasts: ToastItem[];
-  onDismiss: (id: number) => void;
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const heights = useRef<Map<number, number>>(new Map());
-
-  const visibleToasts = toasts.slice(-TOAST_LIMIT);
-  const toastIds = visibleToasts.map((t) => t.id);
-
-  return (
-    <div
-      className="kombos-toast-container"
-      onMouseEnter={() => setExpanded(true)}
-      onMouseLeave={() => setExpanded(false)}
-    >
-      {visibleToasts.map((t) => {
-        const frontIndex = visibleToasts.length - 1 - visibleToasts.indexOf(t);
-        return (
-          <Toast
-            key={t.id}
-            id={t.id}
-            message={t.message}
-            variant={t.variant}
-            frontIndex={frontIndex}
-            expanded={expanded}
-            pauseTimers={expanded}
-            onDismiss={onDismiss}
-            heights={heights}
-            toastIds={toastIds}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-// Public API — same interface, renders nothing in the component tree,
-// syncs toasts into a body-level portal via render()
-interface ToastContainerProps {
-  toasts: ToastItem[];
-  onDismiss: (id: number) => void;
-}
-
-export function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {
-  const elRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    injectStyles();
-    const el = document.createElement("div");
-    document.body.appendChild(el);
-    elRef.current = el;
-    return () => {
-      render(null, el);
-      el.remove();
-    };
-  }, []);
-
-  // Re-render portal on every parent render
-  useEffect(() => {
-    if (!elRef.current) return;
-    if (toasts.length === 0) {
-      render(null, elRef.current);
-    } else {
-      render(
-        <ToastPortal toasts={toasts} onDismiss={onDismiss} />,
-        elRef.current
-      );
-    }
-  });
-
-  return null;
-}
-
-export default Toast;

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

@@ -1,3 +0,0 @@
-/* Toast styles are injected via JS into <head> because the toast
-   renders in a body-level portal outside the ikas CSS scope.
-   See injectStyles() in index.tsx. */

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

@@ -1,46 +0,0 @@
-import { cx } from "../../utils/cx";
-
-interface Props {
-  checked?: boolean;
-  onChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  className?: string;
-  "aria-label"?: string;
-}
-
-export default function Toggle({
-  checked = false,
-  onChange,
-  disabled = false,
-  className,
-  "aria-label": ariaLabel = "Toggle",
-}: Props) {
-  function handleClick(e: Event) {
-    e.preventDefault();
-    if (disabled) return;
-    onChange?.(!checked);
-  }
-
-  return (
-    <label
-      className={cx(
-        "kombos-toggle",
-        checked && "kombos-toggle--checked",
-        disabled && "kombos-toggle--disabled",
-        className,
-      )}
-      onClick={handleClick}
-    >
-      <input
-        type="checkbox"
-        className="kombos-toggle__native"
-        checked={checked}
-        disabled={disabled}
-        aria-label={ariaLabel}
-      />
-      <span className="kombos-toggle__track">
-        <span className="kombos-toggle__thumb" />
-      </span>
-    </label>
-  );
-}

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

@@ -1,86 +0,0 @@
-/* ===== Toggle Switch ===== */
-
-.kombos-toggle {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  flex-shrink: 0;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.kombos-toggle__native {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-.kombos-toggle__track {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  width: 2.5rem;
-  height: 1.5rem;
-  border-radius: 625rem;
-  background: var(--kombos-gray-200);
-  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.kombos-toggle__thumb {
-  position: absolute;
-  left: 0.375rem;
-  width: 1rem;
-  height: 1rem;
-  border-radius: 50%;
-  background: var(--kombos-white);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
-  transition:
-    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-    box-shadow 0.2s ease;
-}
-
-/* Hover state */
-.kombos-toggle:hover .kombos-toggle__thumb {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
-}
-
-/* Focus-visible ring */
-.kombos-toggle__native:focus-visible ~ .kombos-toggle__track {
-  outline: 2px solid var(--kombos-gray-900);
-  outline-offset: 2px;
-}
-
-/* Checked state */
-.kombos-toggle--checked .kombos-toggle__track {
-  background: var(--kombos-gray-900);
-}
-
-.kombos-toggle--checked .kombos-toggle__thumb {
-  transform: translateX(0.75rem);
-}
-
-/* Disabled state */
-.kombos-toggle--disabled {
-  cursor: not-allowed;
-}
-
-.kombos-toggle--disabled .kombos-toggle__track {
-  background: var(--kombos-gray-100);
-}
-
-.kombos-toggle--disabled .kombos-toggle__thumb {
-  background: var(--kombos-gray-50);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-}
-
-.kombos-toggle--disabled.kombos-toggle--checked .kombos-toggle__track {
-  background: var(--kombos-gray-300);
-}
-
-.kombos-toggle--disabled:hover .kombos-toggle__thumb {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-}