@ikas/component-cli 0.133.0 → 1.2.0

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

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

@@ -1,53 +0,0 @@
-.kombos-color-input__row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.kombos-color-input__picker {
-  width: 2.5rem;
-  height: 2.5rem;
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  padding: 0.125rem;
-  cursor: pointer;
-  background: var(--kombos-white);
-}
-
-.kombos-color-input__picker::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-.kombos-color-input__picker::-webkit-color-swatch {
-  border: none;
-  border-radius: 4px;
-}
-
-.kombos-color-input__value {
-  color: var(--kombos-gray-500);
-}
-
-.kombos-color-input__clear {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  padding: 0.25rem;
-  cursor: pointer;
-  color: var(--kombos-gray-400);
-  font-size: 1rem;
-}
-
-.kombos-color-input__clear:hover {
-  color: var(--kombos-gray-700);
-}
-
-/* --- Status (standalone + inherited from FormItem) --- */
-[data-state="error"] .kombos-color-input__picker {
-  border-color: var(--kombos-error);
-}
-
-[data-state="success"] .kombos-color-input__picker {
-  border-color: var(--kombos-success);
-}

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

@@ -1,60 +0,0 @@
-import { useState } from "preact/hooks";
-import Modal from "../Modal";
-import Button from "../Button";
-
-interface Props {
-  title: string;
-  message: string;
-  cancelText: string;
-  confirmText: string;
-  confirmVariant?: "primary" | "dangerous";
-  onClose: () => void;
-  onConfirm: () => Promise<void> | void;
-}
-
-export default function ConfirmModal({
-  title,
-  message,
-  cancelText,
-  confirmText,
-  confirmVariant = "dangerous",
-  onClose,
-  onConfirm,
-}: Props) {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleConfirm = async () => {
-    setIsLoading(true);
-    await onConfirm();
-  };
-
-  return (
-    <Modal onClose={onClose} title={title} maxWidth="25rem" footer={null}>
-      <div className="confirm-modal">
-        <p className="confirm-modal__message text-md-regular">{message}</p>
-        <div className="confirm-modal__actions">
-          <Button
-            variant="secondary"
-            size="s"
-            type="button"
-            onClick={onClose}
-            disabled={isLoading}
-            className="confirm-modal__btn"
-          >
-            {cancelText}
-          </Button>
-          <Button
-            variant={confirmVariant}
-            size="s"
-            type="button"
-            onClick={handleConfirm}
-            disabled={isLoading}
-            className="confirm-modal__btn"
-          >
-            {confirmText}
-          </Button>
-        </div>
-      </div>
-    </Modal>
-  );
-}

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

@@ -1,20 +0,0 @@
-/* ── Confirm Modal ── */
-.confirm-modal {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  text-align: center;
-}
-
-.confirm-modal__message {
-  color: var(--kombos-gray-700);
-}
-
-.confirm-modal__actions {
-  display: flex;
-  gap: 0.75rem;
-}
-
-.confirm-modal__btn {
-  flex: 1;
-}

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

@@ -1,66 +0,0 @@
-import type { ComponentChildren } from "preact";
-import { useId } from "preact/hooks";
-import { cx } from "../../utils/cx";
-import { cloneElement, isValidElement } from "preact";
-
-type FormItemStatus = "default" | "error" | "success";
-
-interface Props {
-  label?: ComponentChildren;
-  description?: ComponentChildren;
-  status?: FormItemStatus;
-  helper?: ComponentChildren;
-  children: ComponentChildren;
-  className?: string;
-  htmlFor?: string;
-}
-
-export default function FormItem({
-  label,
-  description,
-  status = "default",
-  helper,
-  children,
-  className,
-  htmlFor,
-}: Props) {
-  const autoId = useId();
-  const helperId = helper ? `${autoId}-helper` : undefined;
-
-  const enhancedChildren =
-    helperId && isValidElement(children)
-      ? cloneElement(children, { "aria-describedby": helperId })
-      : children;
-
-  return (
-    <div
-      className={cx("kombos-form-item", className)}
-      data-state={status !== "default" ? status : undefined}
-    >
-      {label &&
-        (htmlFor ? (
-          <label
-            htmlFor={htmlFor}
-            className="kombos-form-item__label text-xs-medium"
-          >
-            {label}
-          </label>
-        ) : (
-          <span className="kombos-form-item__label text-xs-medium">
-            {label}
-          </span>
-        ))}
-      {description && (
-        <span className="kombos-form-item__description text-xs-regular">
-          {description}
-        </span>
-      )}
-      {enhancedChildren}
-      {helper && (
-        <span id={helperId} className="kombos-form-item__helper text-xs-regular">
-          {helper}
-        </span>
-      )}
-    </div>
-  );
-}

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

@@ -1,38 +0,0 @@
-/* ===== FormItem Sub-Component ===== */
-
-.kombos-form-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  width: 100%;
-}
-
-/* Label */
-.kombos-form-item__label {
-  width: fit-content;
-  color: var(--kombos-gray-700);
-}
-
-/* Description */
-.kombos-form-item__description {
-  width: fit-content;
-  margin-top: -0.25rem;
-  color: var(--kombos-gray-500);
-}
-
-
-/* Helper text */
-.kombos-form-item__helper {
-  color: var(--kombos-gray-500);
-}
-
-/* === Error state === */
-[data-state="error"] .kombos-form-item__label,
-[data-state="error"] .kombos-form-item__helper {
-  color: var(--kombos-error);
-}
-
-/* === Success state === */
-[data-state="success"] .kombos-form-item__helper {
-  color: var(--kombos-success);
-}

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

@@ -1,55 +0,0 @@
-import { useState, useEffect, useCallback } from "preact/hooks";
-import { useScrollLock } from "../../hooks/useScrollLock";
-import { cx } from "../../utils/cx";
-import { XSVG } from "../icons";
-
-interface Props {
-  src: string;
-  alt: string;
-  onClose: () => void;
-}
-
-export default function ImagePreviewModal({ src, alt, onClose }: Props) {
-  const [open, setOpen] = useState(false);
-
-  useScrollLock();
-
-  useEffect(() => {
-    requestAnimationFrame(() => setOpen(true));
-  }, []);
-
-  const handleClose = useCallback(() => {
-    setOpen(false);
-    setTimeout(onClose, 300);
-  }, [onClose]);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") handleClose();
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [handleClose]);
-
-  return (
-    <div
-      className={cx("kombos-image-preview", open && "kombos-image-preview--open")}
-      onClick={handleClose}
-    >
-      <button
-        type="button"
-        className="kombos-image-preview__close"
-        onClick={handleClose}
-        aria-label="Close"
-      >
-        <XSVG />
-      </button>
-      <img
-        src={src}
-        alt={alt}
-        className="kombos-image-preview__img"
-        onClick={(e) => e.stopPropagation()}
-      />
-    </div>
-  );
-}

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

@@ -1,50 +0,0 @@
-/* Image preview overlay */
-.kombos-image-preview {
-  position: fixed;
-  inset: 0;
-  z-index: var(--kombos-z-overlay);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.35);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  cursor: pointer;
-}
-
-.kombos-image-preview--open {
-  opacity: 1;
-}
-
-/* Close button */
-.kombos-image-preview__close {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  background: var(--kombos-white);
-  border: none;
-  border-radius: 50%;
-  width: 2.5rem;
-  height: 2.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  font-size: 1.25rem;
-  color: var(--kombos-gray-900);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  transition: background 0.15s;
-}
-
-.kombos-image-preview__close:hover {
-  background: var(--kombos-gray-50);
-}
-
-/* Preview image */
-.kombos-image-preview__img {
-  max-width: 90vw;
-  max-height: 85vh;
-  object-fit: contain;
-  border-radius: 6px;
-  cursor: default;
-}

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

@@ -1,69 +0,0 @@
-import { useState } from "preact/hooks";
-import type { Ref, InputHTMLAttributes, ComponentChildren } from "preact";
-import { cx } from "../../utils/cx";
-import { EyeSVG, EyeSlashSVG } from "../icons";
-
-const TYPOGRAPHY: Record<string, string> = {
-  s: "text-md-regular",
-  xs: "text-sm-regular",
-};
-
-interface Props extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "size" | "label" | "icon"
-> {
-  size?: "xs" | "s";
-  status?: "default" | "error" | "success";
-  password?: boolean;
-  disabled?: boolean;
-  leftIcon?: ComponentChildren;
-  inputRef?: Ref<HTMLInputElement>;
-}
-
-export default function Input({
-  size = "s",
-  status = "default",
-  password = false,
-  disabled,
-  leftIcon,
-  inputRef,
-  className,
-  value,
-  type = "text",
-  ...rest
-}: Props) {
-  const [showPassword, setShowPassword] = useState(false);
-
-  const cls = cx(
-    "kombos-input",
-    `kombos-input--${size}`,
-    leftIcon && "kombos-input--with-icon",
-    disabled && "kombos-input--disabled",
-    className,
-  );
-
-  return (
-    <div className={cls} data-state={status !== "default" ? status : undefined}>
-      {leftIcon && <span className="kombos-input__icon">{leftIcon}</span>}
-      <input
-        ref={inputRef}
-        className={`kombos-input__native ${TYPOGRAPHY[size]}`}
-        type={password ? (showPassword ? "text" : "password") : type}
-        disabled={disabled}
-        value={value ?? ""}
-        {...rest}
-      />
-      {password && (
-        <button
-          type="button"
-          className="kombos-input__toggle"
-          onClick={() => setShowPassword((prev) => !prev)}
-          tabIndex={-1}
-          aria-label={showPassword ? "Hide password" : "Show password"}
-        >
-          {showPassword ? <EyeSVG /> : <EyeSlashSVG />}
-        </button>
-      )}
-    </div>
-  );
-}