@ikas/code-components-mcp 0.105.0 → 0.106.0

package/data/section-templates/login-section/sub-components/Button/styles.css

@@ -0,0 +1,114 @@
+/* ===== Button ===== */
+
+/* --- Base --- */
+.kombos-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+}
+
+.kombos-btn:disabled {
+  cursor: not-allowed;
+}
+
+/* --- Spinner --- */
+.kombos-btn__spinner {
+  animation: kombos-spin 1s linear infinite;
+}
+
+@keyframes kombos-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* --- Icon --- */
+.kombos-btn__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.kombos-btn--xs .kombos-btn__icon {
+  font-size: 1rem;
+}
+
+.kombos-btn--s .kombos-btn__icon {
+  font-size: 1.25rem;
+}
+
+.kombos-btn--m .kombos-btn__icon {
+  font-size: 1.5rem;
+}
+
+/* --- Sizes --- */
+.kombos-btn--xs {
+  padding: 0.4375rem 0.9375rem;
+  min-height: 2.25rem;
+}
+
+.kombos-btn--s {
+  padding: 0.5625rem 1.1875rem;
+  min-height: 2.75rem;
+}
+
+.kombos-btn--m {
+  padding: 0.6875rem 1.4375rem;
+  min-height: 3.375rem;
+}
+
+/* --- Primary --- */
+.kombos-btn--primary {
+  background-color: var(--kombos-gray-900);
+  border-color: var(--kombos-gray-900);
+  color: var(--kombos-white);
+}
+
+.kombos-btn--primary:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+.kombos-btn--primary:disabled {
+  background-color: var(--kombos-gray-300);
+  border-color: var(--kombos-gray-300);
+  color: var(--kombos-gray-50);
+}
+
+/* --- Secondary --- */
+.kombos-btn--secondary {
+  background-color: var(--kombos-white);
+  border-color: var(--kombos-gray-200);
+  color: var(--kombos-gray-900);
+}
+
+.kombos-btn--secondary:hover:not(:disabled) {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-btn--secondary:disabled {
+  background-color: var(--kombos-gray-50);
+  border-color: var(--kombos-gray-200);
+  color: var(--kombos-gray-300);
+}
+
+/* --- Dangerous --- */
+.kombos-btn--dangerous {
+  background-color: var(--kombos-error);
+  border-color: var(--kombos-error);
+  color: var(--kombos-white);
+}
+
+.kombos-btn--dangerous:hover:not(:disabled) {
+  background-color: var(--kombos-error-hover);
+  border-color: var(--kombos-error-hover);
+}
+
+.kombos-btn--dangerous:disabled {
+  background-color: var(--kombos-gray-300);
+  border-color: var(--kombos-gray-300);
+  color: var(--kombos-gray-50);
+}

package/data/section-templates/login-section/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/data/section-templates/login-section/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/data/section-templates/login-section/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/data/section-templates/login-section/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/data/section-templates/login-section/sub-components/PageLoader/index.tsx

@@ -0,0 +1,14 @@
+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/data/section-templates/login-section/sub-components/PageLoader/styles.css

@@ -0,0 +1,12 @@
+.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/data/section-templates/login-section/sub-components/SocialLoginButton/index.tsx

@@ -0,0 +1,24 @@
+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/data/section-templates/login-section/sub-components/SocialLoginButton/styles.css

@@ -0,0 +1,19 @@
+.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/data/section-templates/login-section/sub-components/SpinnerIcon/index.tsx

@@ -0,0 +1,10 @@
+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/data/section-templates/login-section/sub-components/SpinnerIcon/styles.css

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