@ikas/component-cli 0.92.0 → 0.94.0

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

@@ -0,0 +1,53 @@
+.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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,20 @@
+/* ── 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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,38 @@
+/* ===== 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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,50 @@
+/* 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

@@ -0,0 +1,69 @@
+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>
+  );
+}

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

@@ -0,0 +1,162 @@
+/* ===== Input Sub-Component ===== */
+
+/* --- Base --- */
+.kombos-input {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-white);
+  transition: border-color 0.15s ease;
+  width: 100%;
+}
+
+.kombos-input:hover {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-input:focus-within {
+  border-color: var(--kombos-gray-900);
+}
+
+/* --- Sizes --- */
+.kombos-input--s {
+  padding: 0.5rem 0.8125rem;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+}
+
+.kombos-input--xs {
+  padding: 0.375rem 0.75rem;
+  gap: 0.375rem;
+  min-height: 2.25rem;
+}
+
+/* --- Native input --- */
+.kombos-input__native {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--kombos-gray-900);
+  padding: 0;
+}
+
+.kombos-input__native::placeholder {
+  color: var(--kombos-gray-400);
+}
+
+/* --- Left icon --- */
+.kombos-input__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--kombos-gray-500);
+}
+
+.kombos-input--s .kombos-input__icon {
+  font-size: 1.25rem;
+}
+
+.kombos-input--xs .kombos-input__icon {
+  font-size: 1rem;
+}
+
+/* --- With-icon variant --- */
+.kombos-input--with-icon {
+  border-color: var(--kombos-gray-500);
+}
+
+.kombos-input--s.kombos-input--with-icon {
+  padding: 0.5rem 0.6875rem;
+  gap: 0.75rem;
+}
+
+.kombos-input--xs.kombos-input--with-icon {
+  padding: 0.375rem 0.6875rem;
+  gap: 0.5rem;
+}
+
+.kombos-input--with-icon:hover,
+.kombos-input--with-icon:focus-within {
+  border-color: var(--kombos-gray-700);
+}
+
+.kombos-input--with-icon:focus-within .kombos-input__icon {
+  color: var(--kombos-gray-700);
+}
+
+/* --- Password toggle --- */
+.kombos-input__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--kombos-gray-400);
+}
+
+.kombos-input--s .kombos-input__toggle {
+  font-size: 1.5rem;
+}
+
+.kombos-input--xs .kombos-input__toggle {
+  font-size: 1.25rem;
+}
+
+/* --- Date input --- */
+.kombos-input__native[type="date"],
+.kombos-input__native[type="datetime-local"] {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.kombos-input__native[type="date"]::-webkit-calendar-picker-indicator,
+.kombos-input__native[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  display: block;
+  opacity: 1;
+  cursor: pointer;
+  width: 1rem;
+  height: 1rem;
+}
+
+/* --- Status (standalone + inherited from FormItem) --- */
+.kombos-input[data-state="error"],
+[data-state="error"] .kombos-input {
+  border-color: var(--kombos-error);
+}
+
+.kombos-input[data-state="error"]:hover,
+.kombos-input[data-state="error"]:focus-within,
+[data-state="error"] .kombos-input:hover,
+[data-state="error"] .kombos-input:focus-within {
+  border-color: var(--kombos-error);
+}
+
+.kombos-input[data-state="success"],
+[data-state="success"] .kombos-input {
+  border-color: var(--kombos-success);
+}
+
+.kombos-input[data-state="success"]:hover,
+.kombos-input[data-state="success"]:focus-within,
+[data-state="success"] .kombos-input:hover,
+[data-state="success"] .kombos-input:focus-within {
+  border-color: var(--kombos-success);
+}
+
+/* --- Disabled state --- */
+.kombos-input--disabled {
+  background: var(--kombos-gray-50);
+  border-color: var(--kombos-gray-200);
+  pointer-events: none;
+}
+
+.kombos-input--disabled .kombos-input__native,
+.kombos-input--disabled .kombos-input__native::placeholder {
+  color: var(--kombos-gray-300);
+}

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

@@ -0,0 +1,118 @@
+import { useState, useEffect, useRef, useId } from "preact/hooks";
+import type { ComponentChildren } from "preact";
+import { useScrollLock } from "../../hooks/useScrollLock";
+import { cx } from "../../utils/cx";
+import { XSVG } from "../icons";
+import Button, { type ButtonProps } from "../Button";
+
+interface Props {
+  onClose: () => void;
+  title: string;
+  maxWidth?: string;
+  children: ComponentChildren;
+  className?: string;
+  okText?: string;
+  cancelText?: string;
+  onOk?: (e: Event) => void;
+  okButtonProps?: ButtonProps;
+  cancelButtonProps?: ButtonProps;
+  footer?: ComponentChildren | null;
+}
+
+export default function Modal({
+  onClose,
+  title,
+  maxWidth = "37.5rem",
+  children,
+  className,
+  okText,
+  cancelText,
+  onOk,
+  okButtonProps,
+  cancelButtonProps,
+  footer,
+}: Props) {
+  const titleId = useId();
+  const [visible, setVisible] = useState(false);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  const handleCloseRef = useRef(() => {});
+  handleCloseRef.current = () => {
+    setVisible(false);
+    setTimeout(() => onCloseRef.current(), 300);
+  };
+
+  useScrollLock();
+
+  useEffect(() => {
+    const rafId = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(rafId);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") handleCloseRef.current();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  return (
+    <div
+      className={cx("kombos-modal", visible && "kombos-modal--open", className)}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+    >
+      <div className="kombos-modal__panel" style={{ maxWidth }}>
+        <div className="kombos-modal__header">
+          <h2 id={titleId} className="kombos-modal__title text-md-medium">
+            {title}
+          </h2>
+          <button
+            type="button"
+            className="kombos-modal__close"
+            onClick={() => handleCloseRef.current()}
+            aria-label="Close"
+          >
+            <XSVG />
+          </button>
+        </div>
+
+        <div className="kombos-modal__body">{children}</div>
+
+        {footer !== null &&
+          (footer !== undefined ? (
+            <div className="kombos-modal__footer">{footer}</div>
+          ) : (
+            (cancelText || okText) && (
+              <div className="kombos-modal__footer">
+                {cancelText && (
+                  <Button
+                    variant="secondary"
+                    size="s"
+                    type="button"
+                    onClick={() => handleCloseRef.current()}
+                    {...cancelButtonProps}
+                  >
+                    {cancelText}
+                  </Button>
+                )}
+                {okText && (
+                  <Button
+                    variant="primary"
+                    size="s"
+                    onClick={onOk}
+                    {...okButtonProps}
+                  >
+                    {okText}
+                  </Button>
+                )}
+              </div>
+            )
+          ))}
+      </div>
+    </div>
+  );
+}