@ikas/component-cli 0.133.0 → 1.1.0

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

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

@@ -1,120 +0,0 @@
-import { useState, useEffect, useRef, useId } from "preact/hooks";
-import { createPortal } from "preact/compat";
-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 createPortal(
-    <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>,
-    document.body,
-  );
-}

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

@@ -1,70 +0,0 @@
-/* ── Modal ── */
-.kombos-modal {
-  position: fixed;
-  inset: 0;
-  z-index: var(--kombos-z-overlay);
-  background: rgba(0, 0, 0, 0.35);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.3s;
-  padding: 1rem;
-}
-
-.kombos-modal--open {
-  opacity: 1;
-}
-
-.kombos-modal__panel {
-  background: var(--kombos-white);
-  border-radius: 6px;
-  width: 100%;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  transform: translateY(1rem);
-  transition: transform 0.3s;
-}
-
-.kombos-modal--open .kombos-modal__panel {
-  transform: translateY(0);
-}
-
-.kombos-modal__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: var(--kombos-white);
-  padding: 1.5rem;
-  border-bottom: 1px solid var(--kombos-gray-200);
-  border-radius: 6px 6px 0 0;
-}
-
-.kombos-modal__title {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-modal__close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  color: var(--kombos-gray-700);
-  font-size: 1.25rem;
-}
-
-.kombos-modal__body {
-  padding: 1.5rem;
-  overflow-y: auto;
-}
-
-.kombos-modal__footer {
-  background: var(--kombos-white);
-  padding: 1.5rem;
-  border-top: 1px solid var(--kombos-gray-200);
-  border-radius: 0 0 6px 6px;
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-}

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

@@ -1,14 +0,0 @@
-import { cx } from "../../utils/cx";
-import SpinnerIcon from "../SpinnerIcon";
-
-interface Props {
-  className?: string;
-}
-
-export default function PageLoader({ className }: Props) {
-  return (
-    <div className={cx("page-loader", className)}>
-      <SpinnerIcon />
-    </div>
-  );
-}

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

@@ -1,12 +0,0 @@
-.page-loader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 12.5rem;
-}
-
-.page-loader .kombos-spinner {
-  font-size: 2rem;
-  color: var(--kombos-gray-500);
-}

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

@@ -1,107 +0,0 @@
-import { observer } from "@ikas/component-utils";
-import { cx } from "../../utils/cx";
-import { getPageNumbers } from "../../utils/pagination";
-import {
-  CaretDoubleLeftSVG,
-  CaretLeftSVG,
-  CaretRightSVG,
-  CaretDoubleRightSVG,
-  DotsThreeSVG,
-} from "../icons";
-
-interface Props {
-  currentPage: number;
-  totalPages: number;
-  hasPrev: boolean;
-  hasNext: boolean;
-  onPageChange: (page: number) => void;
-}
-
-const Pagination = observer(function Pagination({
-  currentPage,
-  totalPages,
-  hasPrev,
-  hasNext,
-  onPageChange,
-}: Props) {
-  if (totalPages <= 1) return null;
-
-  const pages = getPageNumbers(currentPage, totalPages);
-
-  const showFirstBtn = totalPages > 5 && currentPage >= 5;
-  const showLastBtn = totalPages > 5 && currentPage <= totalPages - 4;
-
-  return (
-    <nav className="kombos-pagination" aria-label="Pagination">
-      <div className="kombos-pagination__nav-group">
-        {showFirstBtn && (
-          <button
-            type="button"
-            className="kombos-pagination__nav-btn"
-            onClick={() => onPageChange(1)}
-            aria-label="First page"
-          >
-            <CaretDoubleLeftSVG />
-          </button>
-        )}
-        <button
-          type="button"
-          className="kombos-pagination__nav-btn"
-          onClick={() => onPageChange(currentPage - 1)}
-          disabled={!hasPrev}
-          aria-label="Previous page"
-        >
-          <CaretLeftSVG />
-        </button>
-      </div>
-
-      <div className="kombos-pagination__pages">
-        {pages.map((page, i) =>
-          page === "dots" ? (
-            <span key={`dots-${i}`} className="kombos-pagination__dots">
-              <DotsThreeSVG />
-            </span>
-          ) : (
-            <button
-              key={page}
-              type="button"
-              className={cx(
-                "kombos-pagination__page",
-                "text-md-semibold",
-                page === currentPage && "kombos-pagination__page--active"
-              )}
-              onClick={() => onPageChange(page)}
-              aria-current={page === currentPage ? "page" : undefined}
-            >
-              {page}
-            </button>
-          )
-        )}
-      </div>
-
-      <div className="kombos-pagination__nav-group">
-        <button
-          type="button"
-          className="kombos-pagination__nav-btn"
-          onClick={() => onPageChange(currentPage + 1)}
-          disabled={!hasNext}
-          aria-label="Next page"
-        >
-          <CaretRightSVG />
-        </button>
-        {showLastBtn && (
-          <button
-            type="button"
-            className="kombos-pagination__nav-btn"
-            onClick={() => onPageChange(totalPages)}
-            aria-label="Last page"
-          >
-            <CaretDoubleRightSVG />
-          </button>
-        )}
-      </div>
-    </nav>
-  );
-});
-
-export default Pagination;

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

@@ -1,88 +0,0 @@
-/* ===== Pagination ===== */
-.kombos-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 0.75rem 1.5rem;
-  max-width: 100%;
-}
-
-/* Left/right button groups (first+prev, next+last) */
-.kombos-pagination__nav-group {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-/* Navigation buttons (first, prev, next, last) */
-.kombos-pagination__nav-btn {
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--kombos-gray-50);
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 1rem;
-  color: var(--kombos-gray-900);
-  transition: border-color 0.15s ease, background-color 0.15s ease;
-}
-
-.kombos-pagination__nav-btn:hover:not(:disabled) {
-  border-color: var(--kombos-gray-300);
-  background: var(--kombos-gray-100);
-}
-
-.kombos-pagination__nav-btn:disabled {
-  cursor: default;
-  color: var(--kombos-gray-300);
-  background: var(--kombos-gray-50);
-}
-
-/* Page numbers container */
-.kombos-pagination__pages {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-/* Page number buttons — 32×32 */
-.kombos-pagination__page {
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  padding: 0;
-  color: var(--kombos-gray-500);
-  transition: color 0.15s ease, background-color 0.15s ease;
-}
-
-.kombos-pagination__page:hover {
-  color: var(--kombos-gray-900);
-  background: var(--kombos-gray-50);
-}
-
-.kombos-pagination__page--active {
-  color: var(--kombos-white);
-  background: var(--kombos-gray-900);
-  pointer-events: none;
-}
-
-/* Dots separator */
-.kombos-pagination__dots {
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1rem;
-  color: var(--kombos-gray-400);
-}