@k3-universe/react-kit 0.0.1

package/src/kit/builder/section/SectionBuilder.tsx

@@ -0,0 +1,213 @@
+import { memo } from 'react';
+import { cn } from '../../../shadcn/lib/utils';
+import { FormSection } from '../form/components/FormSection';
+import type { SectionBuilderProps, SectionLeaf, SectionNode } from './types';
+
+// Tailwind-safe literal class maps (1-12)
+const GRID_COLS = {
+  base: {
+    1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3', 4: 'grid-cols-4', 5: 'grid-cols-5', 6: 'grid-cols-6',
+    7: 'grid-cols-7', 8: 'grid-cols-8', 9: 'grid-cols-9', 10: 'grid-cols-10', 11: 'grid-cols-11', 12: 'grid-cols-12',
+  } as Record<number, string>,
+  sm: {
+    1: 'sm:grid-cols-1', 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3', 4: 'sm:grid-cols-4', 5: 'sm:grid-cols-5', 6: 'sm:grid-cols-6',
+    7: 'sm:grid-cols-7', 8: 'sm:grid-cols-8', 9: 'sm:grid-cols-9', 10: 'sm:grid-cols-10', 11: 'sm:grid-cols-11', 12: 'sm:grid-cols-12',
+  } as Record<number, string>,
+  md: {
+    1: 'md:grid-cols-1', 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-4', 5: 'md:grid-cols-5', 6: 'md:grid-cols-6',
+    7: 'md:grid-cols-7', 8: 'md:grid-cols-8', 9: 'md:grid-cols-9', 10: 'md:grid-cols-10', 11: 'md:grid-cols-11', 12: 'md:grid-cols-12',
+  } as Record<number, string>,
+  lg: {
+    1: 'lg:grid-cols-1', 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-4', 5: 'lg:grid-cols-5', 6: 'lg:grid-cols-6',
+    7: 'lg:grid-cols-7', 8: 'lg:grid-cols-8', 9: 'lg:grid-cols-9', 10: 'lg:grid-cols-10', 11: 'lg:grid-cols-11', 12: 'lg:grid-cols-12',
+  } as Record<number, string>,
+  xl: {
+    1: 'xl:grid-cols-1', 2: 'xl:grid-cols-2', 3: 'xl:grid-cols-3', 4: 'xl:grid-cols-4', 5: 'xl:grid-cols-5', 6: 'xl:grid-cols-6',
+    7: 'xl:grid-cols-7', 8: 'xl:grid-cols-8', 9: 'xl:grid-cols-9', 10: 'xl:grid-cols-10', 11: 'xl:grid-cols-11', 12: 'xl:grid-cols-12',
+  } as Record<number, string>,
+};
+
+const COL_SPAN = {
+  base: {
+    1: 'col-span-1', 2: 'col-span-2', 3: 'col-span-3', 4: 'col-span-4', 5: 'col-span-5', 6: 'col-span-6',
+    7: 'col-span-7', 8: 'col-span-8', 9: 'col-span-9', 10: 'col-span-10', 11: 'col-span-11', 12: 'col-span-12',
+  } as Record<number, string>,
+  sm: {
+    1: 'sm:col-span-1', 2: 'sm:col-span-2', 3: 'sm:col-span-3', 4: 'sm:col-span-4', 5: 'sm:col-span-5', 6: 'sm:col-span-6',
+    7: 'sm:col-span-7', 8: 'sm:col-span-8', 9: 'sm:col-span-9', 10: 'sm:col-span-10', 11: 'sm:col-span-11', 12: 'sm:col-span-12',
+  } as Record<number, string>,
+  md: {
+    1: 'md:col-span-1', 2: 'md:col-span-2', 3: 'md:col-span-3', 4: 'md:col-span-4', 5: 'md:col-span-5', 6: 'md:col-span-6',
+    7: 'md:col-span-7', 8: 'md:col-span-8', 9: 'md:col-span-9', 10: 'md:col-span-10', 11: 'md:col-span-11', 12: 'md:col-span-12',
+  } as Record<number, string>,
+  lg: {
+    1: 'lg:col-span-1', 2: 'lg:col-span-2', 3: 'lg:col-span-3', 4: 'lg:col-span-4', 5: 'lg:col-span-5', 6: 'lg:col-span-6',
+    7: 'lg:col-span-7', 8: 'lg:col-span-8', 9: 'lg:col-span-9', 10: 'lg:col-span-10', 11: 'lg:col-span-11', 12: 'lg:col-span-12',
+  } as Record<number, string>,
+  xl: {
+    1: 'xl:col-span-1', 2: 'xl:col-span-2', 3: 'xl:col-span-3', 4: 'xl:col-span-4', 5: 'xl:col-span-5', 6: 'xl:col-span-6',
+    7: 'xl:col-span-7', 8: 'xl:col-span-8', 9: 'xl:col-span-9', 10: 'xl:col-span-10', 11: 'xl:col-span-11', 12: 'xl:col-span-12',
+  } as Record<number, string>,
+};
+
+function gridClasses(options: SectionNode['grid']): string {
+  const cols = options?.cols ?? 1;
+  const sm = options?.smCols;
+  const md = options?.mdCols;
+  const lg = options?.lgCols;
+  const xl = options?.xlCols;
+  const gap = options?.gap ?? 'gap-4';
+  return cn(
+    'grid',
+    GRID_COLS.base[cols],
+    sm ? GRID_COLS.sm[sm] : undefined,
+    md ? GRID_COLS.md[md] : undefined,
+    lg ? GRID_COLS.lg[lg] : undefined,
+    xl ? GRID_COLS.xl[xl] : undefined,
+    gap,
+  );
+}
+
+function flexClasses(options: SectionNode['flex']): string {
+  const direction = options?.direction ?? 'col';
+  const wrap = options?.wrap ? 'flex-wrap' : 'flex-nowrap';
+  const gap = options?.gap ?? 'gap-4';
+  const align = options?.align ?? 'stretch';
+  const justify = options?.justify ?? 'start';
+  const alignClass
+    = align === 'start' ? 'items-start' : align === 'center' ? 'items-center' : align === 'end' ? 'items-end' : 'items-stretch';
+  const justifyClass
+    = justify === 'start' ? 'justify-start' : justify === 'center' ? 'justify-center' : justify === 'between' ? 'justify-between' : 'justify-end';
+  return cn('flex', `flex-${direction}`, wrap, gap, alignClass, justifyClass);
+}
+
+function leafSpanClasses(leaf: SectionLeaf): string | undefined {
+  if (!leaf.span) return undefined;
+  const parts: string[] = [];
+  if (leaf.span.base) parts.push(COL_SPAN.base[leaf.span.base]);
+  if (leaf.span.sm) parts.push(COL_SPAN.sm[leaf.span.sm]);
+  if (leaf.span.md) parts.push(COL_SPAN.md[leaf.span.md]);
+  if (leaf.span.lg) parts.push(COL_SPAN.lg[leaf.span.lg]);
+  if (leaf.span.xl) parts.push(COL_SPAN.xl[leaf.span.xl]);
+  return parts.join(' ');
+}
+
+function isLeaf(child: SectionNode | SectionLeaf): child is SectionLeaf {
+  return (child as SectionLeaf).content !== undefined;
+}
+
+function shallowEqualSpan(a?: SectionLeaf['span'], b?: SectionLeaf['span']) {
+  if (a === b) return true;
+  if (!a || !b) return !a && !b;
+  return a.base === b.base && a.sm === b.sm && a.md === b.md && a.lg === b.lg && a.xl === b.xl;
+}
+
+function shallowEqualLeaf(a: SectionLeaf, b: SectionLeaf) {
+  // Use renderKey when provided to force updates; otherwise ignore content ref equality
+  const renderKeyEqual = (a.renderKey ?? null) === (b.renderKey ?? null);
+  return (
+    a.key === b.key
+    && a.hidden === b.hidden
+    && a.className === b.className
+    && a.labelLayout === b.labelLayout
+    && a.labelClassName === b.labelClassName
+    && a.valueClassName === b.valueClassName
+    && a.inlineLabelWidthClass === b.inlineLabelWidthClass
+    && shallowEqualSpan(a.span, b.span)
+    && renderKeyEqual
+  );
+}
+
+const SectionLeafRenderer = memo(
+  function SectionLeafRenderer({ leaf, renderLeaf }: { leaf: SectionLeaf; renderLeaf?: (leaf: SectionLeaf) => React.ReactNode }) {
+    if (leaf.hidden) return null;
+    const span = leafSpanClasses(leaf);
+
+    // If a custom renderLeaf is provided, let it fully control rendering
+    if (renderLeaf) {
+      return <div className={cn(span, leaf.className)}>{renderLeaf(leaf)}</div>;
+    }
+
+    // Default rendering with optional label support
+    const hasLabel = leaf.label !== undefined && leaf.label !== null && leaf.label !== '';
+    const layout = leaf.labelLayout ?? 'stacked';
+    const labelBaseCls = 'text-xs text-muted-foreground';
+    const valueBaseCls = 'text-sm leading-6';
+
+    if (!hasLabel) {
+      return <div className={cn(span, leaf.className, leaf.valueClassName)}>{leaf.content}</div>;
+    }
+
+    if (layout === 'inline') {
+      const labelWidth = leaf.inlineLabelWidthClass ?? 'w-32';
+      return (
+        <div className={cn(span, leaf.className, 'flex items-start gap-4')}>
+          <div className={cn(labelWidth, labelBaseCls, leaf.labelClassName)}>{leaf.label}</div>
+          <div className={cn('flex-1', valueBaseCls, leaf.valueClassName)}>
+            {leaf.content}
+            {leaf.description
+              ? (
+                  <div className={cn('mt-1', labelBaseCls)}>{leaf.description}</div>
+                )
+              : null}
+          </div>
+        </div>
+      );
+    }
+
+    // Stacked layout
+    return (
+      <div className={cn(span, leaf.className, 'flex flex-col')}>
+        <div className={cn(labelBaseCls, leaf.labelClassName)}>{leaf.label}</div>
+        <div className={cn(valueBaseCls, leaf.valueClassName)}>{leaf.content}</div>
+        {leaf.description
+          ? (
+              <div className={cn('mt-1', labelBaseCls)}>{leaf.description}</div>
+            )
+          : null}
+      </div>
+    );
+  },
+  (prev, next) => shallowEqualLeaf(prev.leaf, next.leaf) && prev.renderLeaf === next.renderLeaf,
+);
+
+function SectionNodeRenderer({ node, renderLeaf }: { node: SectionNode; renderLeaf?: (leaf: SectionLeaf) => React.ReactNode }) {
+  if (node.hidden) return null;
+  const layout = node.layout ?? 'grid';
+  const containerClass = layout === 'grid' ? gridClasses(node.grid) : flexClasses(node.flex);
+
+  return (
+    <FormSection
+      title={node.title}
+      description={node.subtitle}
+      variant={node.variant ?? 'card'}
+      className={node.className}
+      headerClassName={node.headerClassName}
+      contentClassName={node.contentClassName}
+    >
+      <div className={containerClass}>
+        {(node.children ?? []).map((child) => {
+          if (isLeaf(child)) {
+            return <SectionLeafRenderer key={child.key} leaf={child} renderLeaf={renderLeaf} />;
+          }
+          if ((child as SectionNode).hidden) return null;
+          return (
+            <div key={(child as SectionNode).id} className="col-span-full">
+              <SectionNodeRenderer node={child as SectionNode} renderLeaf={renderLeaf} />
+            </div>
+          );
+        })}
+      </div>
+    </FormSection>
+  );
+}
+
+export default function SectionBuilder({ sections, className, renderLeaf }: SectionBuilderProps) {
+  return (
+    <div className={cn('space-y-6', className)}>
+      {sections.map(section => (
+        <SectionNodeRenderer key={section.id} node={section} renderLeaf={renderLeaf} />
+      ))}
+    </div>
+  );
+}

package/src/kit/builder/section/index.ts

@@ -0,0 +1,2 @@
+export { default as SectionBuilder } from './SectionBuilder';
+export * from './types';

package/src/kit/builder/section/types.ts

@@ -0,0 +1,66 @@
+import type React from 'react';
+
+export type SectionLayout = 'grid' | 'flex';
+
+export interface SectionGridOptions {
+  cols?: number;
+  smCols?: number;
+  mdCols?: number;
+  lgCols?: number;
+  xlCols?: number;
+  gap?: string; // Tailwind gap classes like 'gap-4' (optional)
+}
+
+export interface SectionFlexOptions {
+  direction?: 'row' | 'col';
+  wrap?: boolean;
+  gap?: string; // Tailwind gap classes like 'gap-4'
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  justify?: 'start' | 'center' | 'between' | 'end';
+}
+
+export interface SectionBase {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  variant?: 'card' | 'separator' | 'plain';
+  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+  hidden?: boolean;
+}
+
+export interface SectionLeaf {
+  key: string;
+  content: React.ReactNode;
+  className?: string;
+  // Optional label & layout
+  label?: React.ReactNode;
+  labelLayout?: 'inline' | 'stacked';
+  labelClassName?: string;
+  valueClassName?: string;
+  inlineLabelWidthClass?: string; // e.g. 'w-32' when labelLayout is 'inline'
+  description?: React.ReactNode;
+  span?: {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+  };
+  hidden?: boolean;
+  renderKey?: string | number;
+}
+
+export interface SectionNode extends SectionBase {
+  layout?: SectionLayout;
+  grid?: SectionGridOptions;
+  flex?: SectionFlexOptions;
+  children?: Array<SectionNode | SectionLeaf>;
+}
+
+export interface SectionBuilderProps {
+  sections: SectionNode[];
+  renderLeaf?: (leaf: SectionLeaf) => React.ReactNode;
+  className?: string;
+}

package/src/kit/components/autocomplete/Autocomplete.tsx

@@ -0,0 +1,247 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../../../shadcn/lib/utils';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../shadcn/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '../../../shadcn/ui/command';
+import { ChevronsUpDown, Check, Loader2 } from 'lucide-react';
+import { Button } from '../../../shadcn/ui/button';
+import type {
+  AutocompleteFetcher,
+  AutocompleteMode,
+  AutocompleteOption,
+  AutocompleteFetchResult,
+} from './types';
+import { useDebounce } from 'use-debounce';
+
+export type AutocompleteProps = {
+  mode: AutocompleteMode
+  options?: AutocompleteOption[]
+  fetcher?: AutocompleteFetcher
+  pageSize?: number
+  value?: string | number | null
+  onChange?: (value: string | number | null, option: AutocompleteOption | null) => void
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+  emptyText?: string
+  renderOption?: (option: AutocompleteOption, selected: boolean) => React.ReactNode
+  searchPlaceholder?: string
+  /** Controls initial open state; component is uncontrolled otherwise */
+  defaultOpen?: boolean
+}
+
+const DEFAULT_PAGE_SIZE = 20;
+
+const EMPTY_OPTIONS: AutocompleteOption[] = [];
+
+export function Autocomplete({
+  mode,
+  options = EMPTY_OPTIONS,
+  fetcher,
+  pageSize = DEFAULT_PAGE_SIZE,
+  value: controlledValue,
+  onChange,
+  placeholder = 'Select...',
+  disabled,
+  className,
+  emptyText = 'No results found',
+  renderOption,
+  searchPlaceholder = 'Search...',
+  defaultOpen,
+}: AutocompleteProps) {
+  const [open, setOpen] = useState<boolean>(!!defaultOpen);
+  const [search, setSearch] = useState('');
+  const [debouncedSearch] = useDebounce(search, 250);
+
+  // Selection
+  const [value, setValue] = useState<string | number | null>(controlledValue ?? null);
+  useEffect(() => {
+    if (controlledValue !== undefined) setValue(controlledValue);
+  }, [controlledValue]);
+
+  const handleSelect = useCallback(
+    (next: AutocompleteOption) => {
+      const newValue = next.value;
+      if (controlledValue === undefined) setValue(newValue);
+      onChange?.(newValue, next);
+      setOpen(false);
+    },
+    [controlledValue, onChange],
+  );
+
+  // Data state (shared for both modes)
+  const [items, setItems] = useState<AutocompleteOption[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
+  const [nextCursor, setNextCursor] = useState<string | number | null | undefined>(undefined);
+  const [page, setPage] = useState(1);
+
+  const resetData = useCallback(() => {
+    setItems([]);
+    setHasMore(false);
+    setNextCursor(undefined);
+    setPage(1);
+  }, []);
+
+  // Load data
+  const load = useCallback(async () => {
+    if (mode === 'server') {
+      if (!fetcher) return;
+      setLoading(true);
+      try {
+        const res: AutocompleteFetchResult = await fetcher({
+          search: debouncedSearch,
+          cursor: nextCursor ?? null,
+          page,
+          pageSize,
+        });
+        setItems(prev => (page === 1 ? res.items : [...prev, ...res.items]));
+        setHasMore(!!res.hasMore);
+        setNextCursor(res.nextCursor);
+      } finally {
+        setLoading(false);
+      }
+    } else {
+      // client mode: filter and paginate locally
+      setLoading(true);
+      try {
+        const filtered = debouncedSearch
+          ? options.filter(o =>
+            o.label.toLowerCase().includes(debouncedSearch.toLowerCase()),
+          )
+          : options;
+        const start = (page - 1) * pageSize;
+        const slice = filtered.slice(start, start + pageSize);
+        setItems(prev => (page === 1 ? slice : [...prev, ...slice]));
+        setHasMore(start + pageSize < filtered.length);
+        setNextCursor(undefined);
+      } finally {
+        setLoading(false);
+      }
+    }
+  }, [mode, fetcher, debouncedSearch, nextCursor, page, pageSize, options]);
+
+  // Reset and load on open/search change
+  useEffect(() => {
+    if (!open) return;
+    resetData();
+    // Load first page
+    const t = window.setTimeout(() => {
+      void load();
+    }, 0);
+    return () => window.clearTimeout(t);
+  }, [open, debouncedSearch, mode]);
+
+  // Infinite scroll
+  const listRef = useRef<HTMLDivElement | null>(null);
+  const onListScroll = useCallback(() => {
+    const el = listRef.current;
+    if (!el || loading) return;
+    const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 24;
+    if (nearBottom && hasMore) {
+      setPage(p => p + 1);
+    }
+  }, [loading, hasMore]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    load();
+  }, [page]);
+
+  // Selected label
+  const selectedOption = useMemo(() => items.find(i => i.value === value), [items, value]);
+
+  // Ensure selected label when item not in current page (server mode)
+  const displayedLabel = useMemo(() => {
+    if (selectedOption) return selectedOption.label;
+    if (mode === 'client') {
+      const found = options.find(i => i.value === value);
+      return found?.label ?? placeholder;
+    }
+    return placeholder;
+  }, [mode, options, selectedOption, value, placeholder]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn('w-full justify-between', className)}
+          disabled={disabled}
+        >
+          <span className={cn('truncate', !value && 'text-muted-foreground')}>{displayedLabel}</span>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+        <Command shouldFilter={false} className="w-full">
+          <div className="p-2">
+            <CommandInput
+              value={search}
+              onValueChange={setSearch}
+              placeholder={searchPlaceholder}
+              autoFocus
+            />
+          </div>
+          <CommandList className="max-h-56 overflow-auto" ref={listRef} onScroll={onListScroll}>
+            {loading && items.length === 0 ? (
+              <div className="flex items-center justify-center py-6 text-sm text-muted-foreground">
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loading
+              </div>
+            ) : null}
+            <CommandEmpty>{emptyText}</CommandEmpty>
+            {items.length > 0 ? (
+              <CommandGroup>
+                {items.map((item) => {
+                  const selected = item.value === value;
+                  return (
+                    <CommandItem
+                      key={`${item.value}`}
+                      value={`${item.label}`}
+                      onSelect={() => handleSelect(item)}
+                      className="flex items-center justify-between"
+                    >
+                      <div className="min-w-0 truncate">
+                        {renderOption ? renderOption(item, selected) : item.label}
+                      </div>
+                      {selected ? (
+                        <Check className="h-4 w-4" />
+                      ) : null}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            ) : null}
+            {hasMore ? (
+              <>
+                <CommandSeparator />
+                <div className="flex items-center justify-center py-2 text-xs text-muted-foreground">
+                  {loading ? (
+                    <>
+                      <Loader2 className="mr-1 h-3 w-3 animate-spin" /> Loading more
+                    </>
+                  ) : (
+                    'Scroll to load more'
+                  )}
+                </div>
+              </>
+            ) : null}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default Autocomplete;

package/src/kit/components/autocomplete/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export { default as Autocomplete } from './Autocomplete';

package/src/kit/components/autocomplete/types.ts

@@ -0,0 +1,24 @@
+export type AutocompleteOption = {
+  value: string | number
+  label: string
+}
+
+export type AutocompleteFetchParams = {
+  search: string
+  cursor?: string | number | null
+  page?: number
+  pageSize: number
+}
+
+export type AutocompleteFetchResult = {
+  items: AutocompleteOption[]
+  nextCursor?: string | number | null
+  hasMore: boolean
+  total?: number
+}
+
+export type AutocompleteFetcher = (
+  params: AutocompleteFetchParams,
+) => Promise<AutocompleteFetchResult>
+
+export type AutocompleteMode = 'client' | 'server'

package/src/kit/components/login/Login.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+
+export type LoginProps = {
+  // Application title shown above the form (e.g., "Acme Inc")
+  appTitle?: string;
+  // Optional subtitle under the app title
+  subtitle?: string;
+  // Customizable signup label and link
+  signupLabel?: string; // e.g., "Don't have an account?"
+  signupLinkLabel?: string; // e.g., "Sign up"
+  signupHref?: string;
+  // Optional: render a "Forgot password" link under the form
+  forgotPasswordLabel?: string; // e.g., "Forgot your password?"
+  forgotPasswordLinkLabel?: string; // e.g., "Forgot your password?"
+  forgotPasswordHref?: string; // when provided, the link will render
+  // Right-side image URL and alt
+  rightImageSrc?: string;
+  rightImageAlt?: string;
+  // Optional className for the outer container
+  className?: string;
+  // Optional continue-with slot (renders below the submit action area)
+  continueWith?: React.ReactNode;
+  // Children used as the form area
+  children?: React.ReactNode;
+};
+
+/**
+ * Login layout container.
+ *
+ * Responsibilities:
+ * - Provides a two-column layout (form + optional right-side image)
+ * - Renders an app title and optional subtitle above the form
+ * - Renders optional separator and custom `continueWith` content (e.g., social buttons)
+ * - Renders a footer with configurable signup CTA
+ * - Leaves the actual form implementation to children, so you can use FormBuilder or any custom form
+ */
+export function Login({
+  appTitle = 'Acme Inc',
+  subtitle,
+  signupLabel = "Don't have an account?",
+  signupLinkLabel = 'Sign up',
+  signupHref = '#',
+  forgotPasswordLabel = 'Forgot your password?',
+  forgotPasswordLinkLabel = 'Reset Here',
+  forgotPasswordHref,
+  rightImageSrc,
+  rightImageAlt = 'Login image',
+  className,
+  continueWith,
+  children,
+}: LoginProps) {
+  return (
+    <div className={['grid min-h-dvh grid-cols-1 md:grid-cols-2', className].filter(Boolean).join(' ')}>
+      {/* Left column: form section */}
+      <div className="flex items-center justify-center p-6 md:p-10">
+        <div className="w-full max-w-md">
+          {/* Title */}
+          <div className="mb-6 text-center">
+            <h1 className="text-2xl font-bold leading-tight tracking-tight">{appTitle}</h1>
+            {subtitle ? (
+              <p className="text-muted-foreground mt-1 text-sm">{subtitle}</p>
+            ) : null}
+          </div>
+
+          {/* Form area (children) */}
+          <div className="grid gap-6">
+            {children}
+
+            {/* Optional: Forgot password link */}
+            {forgotPasswordHref ? (
+              <div className="text-center text-sm">
+                {forgotPasswordLabel}{' '}
+                <a href={forgotPasswordHref} className="underline underline-offset-4">
+                  {forgotPasswordLinkLabel}
+                </a>
+              </div>
+            ) : null}
+
+            {/* Optional separator + continueWith slot */}
+            {continueWith ? (
+              <>
+                <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
+                  <span className="bg-background text-muted-foreground relative z-10 px-2">
+                    Or continue with
+                  </span>
+                </div>
+                <div className="grid gap-3">{continueWith}</div>
+              </>
+            ) : null}
+          </div>
+
+          {/* Signup footer */}
+          <div className="mt-6 text-center text-sm">
+            {signupLabel}{' '}
+            <a href={signupHref} className="underline underline-offset-4">
+              {signupLinkLabel}
+            </a>
+          </div>
+        </div>
+      </div>
+
+      {/* Right column: image */}
+      <div className="hidden md:block">
+        {rightImageSrc ? (
+          <img
+            src={rightImageSrc}
+            alt={rightImageAlt}
+            className="h-full w-full object-cover"
+            loading="lazy"
+          />
+        ) : (
+          <div className="h-full w-full bg-muted" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Login;

package/src/kit/components/login/index.ts

@@ -0,0 +1 @@
+export * from './Login';