@ikas/component-cli 0.102.0 → 0.103.0

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

@@ -1,110 +0,0 @@
-/* ===== Select ===== */
-.kombos-select-wrap {
-  width: 100%;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.kombos-select {
-  appearance: none;
-  width: 100%;
-  background: var(--kombos-white);
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  color: var(--kombos-gray-900);
-  cursor: pointer;
-  transition: border-color 0.15s ease;
-}
-
-.kombos-select:hover {
-  border-color: var(--kombos-gray-300);
-}
-
-/* Sizes — match Button padding + extra right space for icon */
-.kombos-select--xs {
-  padding: 0.4375rem 2rem 0.4375rem 0.9375rem;
-  min-height: 2.25rem;
-}
-
-.kombos-select--s {
-  padding: 0.5625rem 2.25rem 0.5625rem 1.1875rem;
-  min-height: 2.75rem;
-}
-
-.kombos-select--m {
-  padding: 0.6875rem 2.5rem 0.6875rem 1.4375rem;
-  min-height: 3.375rem;
-}
-
-/* Caret icon */
-.kombos-select__icon {
-  position: absolute;
-  right: 0.75rem;
-  pointer-events: none;
-  color: var(--kombos-gray-900);
-  font-size: 1rem;
-  transition: opacity 0.15s ease;
-}
-
-/* Clear button */
-.kombos-select__clear {
-  position: absolute;
-  right: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  color: var(--kombos-gray-700);
-  background-color: var(--kombos-white);
-  font-size: 1rem;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-/* On hover: show clear button, hide caret */
-.kombos-select-wrap:hover .kombos-select__clear {
-  opacity: 1;
-}
-
-.kombos-select-wrap:hover .kombos-select--clearable ~ .kombos-select__icon {
-  opacity: 0;
-}
-
-/* --- Status (standalone + inherited from FormItem) --- */
-[data-state="error"] .kombos-select {
-  border-color: var(--kombos-error);
-}
-
-[data-state="error"] .kombos-select:hover {
-  border-color: var(--kombos-error);
-}
-
-[data-state="success"] .kombos-select {
-  border-color: var(--kombos-success);
-}
-
-[data-state="success"] .kombos-select:hover {
-  border-color: var(--kombos-success);
-}
-
-/* --- Disabled state --- */
-.kombos-select:disabled {
-  background: var(--kombos-gray-50);
-  border-color: var(--kombos-gray-200);
-  color: var(--kombos-gray-300);
-  cursor: not-allowed;
-}
-
-.kombos-select:disabled:hover {
-  border-color: var(--kombos-gray-200);
-}
-
-.kombos-select:disabled ~ .kombos-select__icon {
-  color: var(--kombos-gray-300);
-}

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

@@ -1,12 +0,0 @@
-interface Props {
-  labelWidth?: string;
-}
-
-export default function SkeletonField({ labelWidth = "40%" }: Props) {
-  return (
-    <div className="kombos-skeleton-field">
-      <div className="kombos-skeleton-field__label" style={{ width: labelWidth }} />
-      <div className="kombos-skeleton-field__input" />
-    </div>
-  );
-}

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

@@ -1,29 +0,0 @@
-/* ── Skeleton Field ── */
-.kombos-skeleton-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.kombos-skeleton-field__label {
-  height: 1.125rem;
-  border-radius: 4px;
-}
-
-.kombos-skeleton-field__input {
-  width: 100%;
-  height: 2.75rem;
-  border-radius: 6px;
-}
-
-.kombos-skeleton-field__label,
-.kombos-skeleton-field__input {
-  background: linear-gradient(
-    90deg,
-    var(--kombos-gray-100) 25%,
-    var(--kombos-gray-50) 50%,
-    var(--kombos-gray-100) 75%
-  );
-  background-size: 200% 100%;
-  animation: kombos-shimmer 1.5s ease-in-out infinite;
-}

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

@@ -1,26 +0,0 @@
-import type { JSX } from "preact";
-import { CaretLeftSVG, CaretRightSVG } from "../icons";
-import { cx } from "../../utils/cx";
-
-interface Props extends Omit<JSX.HTMLAttributes<HTMLButtonElement>, "direction"> {
-  direction: "left" | "right";
-  disabled?: boolean;
-}
-
-export default function SliderArrow({
-  direction,
-  className,
-  ...rest
-}: Props) {
-  const Icon = direction === "left" ? CaretLeftSVG : CaretRightSVG;
-
-  return (
-    <button
-      className={cx("kombos-slider-arrow", className)}
-      aria-label={direction === "left" ? "Previous" : "Next"}
-      {...rest}
-    >
-      <Icon />
-    </button>
-  );
-}

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

@@ -1,24 +0,0 @@
-/* ===== Slider Arrow ===== */
-.kombos-slider-arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.75rem;
-  border-radius: 50%;
-  border: 1px solid var(--kombos-gray-200);
-  background: rgba(255, 255, 255, 0.5);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  cursor: pointer;
-  font-size: 1.25rem;
-  color: var(--kombos-gray-900);
-  transition: background 0.2s;
-}
-
-.kombos-slider-arrow:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.8);
-}
-
-.kombos-slider-arrow:disabled {
-  cursor: default;
-  color: var(--kombos-gray-400);
-}

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

@@ -1,24 +0,0 @@
-import { ComponentChildren } from "preact";
-
-interface Props {
-  icon: ComponentChildren;
-  children: ComponentChildren;
-  onClick: () => void;
-}
-
-export default function SocialLoginButton({
-  icon,
-  children,
-  onClick,
-}: Props) {
-  return (
-    <button
-      type="button"
-      className="kombos-social-login-btn text-sm-medium"
-      onClick={onClick}
-    >
-      {icon}
-      <span>{children}</span>
-    </button>
-  );
-}

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

@@ -1,19 +0,0 @@
-.kombos-social-login-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.625rem;
-  width: 100%;
-  padding: 0.625rem 1.25rem;
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  background: var(--kombos-white);
-  color: var(--kombos-gray-900);
-  cursor: pointer;
-  transition: border-color 0.15s ease;
-  font-size: 1.125rem;
-}
-
-.kombos-social-login-btn:hover {
-  border-color: var(--kombos-gray-300);
-}

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

@@ -1,10 +0,0 @@
-import { cx } from "../../utils/cx";
-import { SpinnerSVG } from "../icons";
-
-interface Props {
-  className?: string;
-}
-
-export default function SpinnerIcon({ className }: Props) {
-  return <SpinnerSVG className={cx("kombos-spinner", className)} />;
-}

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

@@ -1,8 +0,0 @@
-.kombos-spinner {
-  animation: kombos-spin 1s linear infinite;
-}
-
-@keyframes kombos-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}

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);
-}