@mshuja288/aksuicore 0.2.0

package/src/primitives/DateField.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+const weekdayLabels = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+
+function pad(value: number) {
+  return String(value).padStart(2, "0");
+}
+
+function toIso(date: Date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+function parseIso(value: string) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return null;
+  }
+  const [year, month, day] = value.split("-").map(Number);
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null;
+  }
+  return date;
+}
+
+function formatDisplay(value: string) {
+  const date = parseIso(value);
+  if (!date) {
+    return "";
+  }
+  return `${pad(date.getDate())}/${pad(date.getMonth() + 1)}/${date.getFullYear()}`;
+}
+
+function startOfMonth(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+
+function buildCells(month: Date) {
+  const first = startOfMonth(month);
+  const mondayBased = (first.getDay() + 6) % 7;
+  const start = new Date(first);
+  start.setDate(first.getDate() - mondayBased);
+  return Array.from({ length: 42 }, (_, index) => {
+    const day = new Date(start);
+    day.setDate(start.getDate() + index);
+    return day;
+  });
+}
+
+type MenuPosition = {
+  top: number;
+  left: number;
+  width: number;
+  openUp: boolean;
+};
+
+export function DateField({
+  value,
+  onChange,
+  placeholder = "dd/mm/yyyy",
+  disabled = false,
+  readOnly = false,
+}: {
+  value: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+}) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const selected = parseIso(value);
+  const [open, setOpen] = useState(false);
+  const [menuPos, setMenuPos] = useState<MenuPosition | null>(null);
+  const [viewMonth, setViewMonth] = useState(() => startOfMonth(selected ?? new Date()));
+  const cells = useMemo(() => buildCells(viewMonth), [viewMonth]);
+  const today = toIso(new Date());
+  const locked = disabled || readOnly;
+
+  function updatePosition() {
+    const root = rootRef.current;
+    if (!root) {
+      return;
+    }
+    const rect = root.getBoundingClientRect();
+    const openUp = window.innerHeight - rect.bottom < 340 && rect.top > 340;
+    setMenuPos({
+      top: openUp ? rect.top - 8 : rect.bottom + 6,
+      left: rect.left,
+      width: Math.max(rect.width, 280),
+      openUp,
+    });
+  }
+
+  useLayoutEffect(() => {
+    if (!open) {
+      return;
+    }
+    updatePosition();
+    function onReposition() {
+      updatePosition();
+    }
+    window.addEventListener("resize", onReposition);
+    window.addEventListener("scroll", onReposition, true);
+    return () => {
+      window.removeEventListener("resize", onReposition);
+      window.removeEventListener("scroll", onReposition, true);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function onPointerDown(event: MouseEvent) {
+      const target = event.target as Node;
+      if (rootRef.current?.contains(target) || menuRef.current?.contains(target)) {
+        return;
+      }
+      setOpen(false);
+    }
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
+  function openPicker() {
+    if (locked) {
+      return;
+    }
+    setViewMonth(startOfMonth(selected ?? new Date()));
+    setOpen(true);
+  }
+
+  function choose(date: Date) {
+    onChange?.(toIso(date));
+    setOpen(false);
+  }
+
+  const monthLabel = viewMonth.toLocaleString(undefined, { month: "long", year: "numeric" });
+
+  return (
+    <div className={readOnly ? "date-field read-only" : "date-field"} ref={rootRef}>
+      <button
+        type="button"
+        className={open ? "date-field-trigger open" : "date-field-trigger"}
+        disabled={disabled}
+        onClick={() => {
+          if (locked) {
+            return;
+          }
+          if (open) {
+            setOpen(false);
+          } else {
+            openPicker();
+          }
+        }}
+      >
+        <span className={value ? "date-field-value" : "date-field-placeholder"}>
+          {value ? formatDisplay(value) : placeholder}
+        </span>
+        <svg className="date-field-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <rect x="3.5" y="5" width="17" height="15.5" rx="2" fill="none" stroke="currentColor" strokeWidth="1.6" />
+          <path d="M3.5 9.5h17M8 3.5v3M16 3.5v3" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+        </svg>
+      </button>
+      {open && menuPos
+        ? createPortal(
+            <div
+              ref={menuRef}
+              className="date-picker"
+              style={{
+                top: menuPos.openUp ? undefined : menuPos.top,
+                bottom: menuPos.openUp ? window.innerHeight - menuPos.top : undefined,
+                left: menuPos.left,
+                width: menuPos.width,
+              }}
+            >
+              <div className="date-picker-head">
+                <strong>{monthLabel}</strong>
+                <div className="date-picker-nav">
+                  <button type="button" className="ghost" aria-label="Previous month" onClick={() => setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() - 1, 1))}>
+                    ‹
+                  </button>
+                  <button type="button" className="ghost" aria-label="Next month" onClick={() => setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 1))}>
+                    ›
+                  </button>
+                </div>
+              </div>
+              <div className="date-picker-weekdays">
+                {weekdayLabels.map((label) => (
+                  <span key={label}>{label}</span>
+                ))}
+              </div>
+              <div className="date-picker-grid">
+                {cells.map((day) => {
+                  const iso = toIso(day);
+                  const outside = day.getMonth() !== viewMonth.getMonth();
+                  const isSelected = value === iso;
+                  const isToday = today === iso;
+                  const className = [
+                    "date-picker-day",
+                    outside ? "outside" : "",
+                    isSelected ? "selected" : "",
+                    isToday ? "today" : "",
+                  ]
+                    .filter(Boolean)
+                    .join(" ");
+                  return (
+                    <button key={iso + String(outside)} type="button" className={className} onClick={() => choose(day)}>
+                      {day.getDate()}
+                    </button>
+                  );
+                })}
+              </div>
+              <div className="date-picker-footer">
+                <button
+                  type="button"
+                  className="ghost"
+                  onClick={() => {
+                    onChange?.("");
+                    setOpen(false);
+                  }}
+                >
+                  Clear
+                </button>
+                <button
+                  type="button"
+                  className="ghost"
+                  onClick={() => {
+                    const now = new Date();
+                    setViewMonth(startOfMonth(now));
+                    choose(now);
+                  }}
+                >
+                  Today
+                </button>
+              </div>
+            </div>,
+            document.body,
+          )
+        : null}
+    </div>
+  );
+}

package/src/primitives/Dialog.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Button } from "./Button";
+
+export function Dialog({
+  title,
+  open,
+  onClose,
+  children,
+  wide = true,
+}: {
+  title: string;
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  wide?: boolean;
+}) {
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="dialog-backdrop" onClick={onClose}>
+      <div
+        className={wide ? "dialog form-dialog" : "dialog"}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="dialog-head">
+          <h2>{title}</h2>
+          <Button variant="ghost" onClick={onClose}>
+            Close
+          </Button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/** @deprecated Prefer Dialog — alias kept for configurator migration */
+export const FormDialog = Dialog;

package/src/primitives/FormActions.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+export function FormActions({
+  pending,
+  editing,
+  saveLabel,
+  updateLabel,
+  newLabel,
+  onNew,
+  saveDisabled = false,
+  replaceSaveWhenEditing = false,
+}: {
+  pending: boolean;
+  editing: boolean;
+  saveLabel: string;
+  updateLabel?: string;
+  newLabel: string;
+  onNew: () => void;
+  saveDisabled?: boolean;
+  replaceSaveWhenEditing?: boolean;
+}) {
+  if (editing && replaceSaveWhenEditing) {
+    return null;
+  }
+
+  return (
+    <div className="actions">
+      <button type="submit" disabled={pending || saveDisabled}>
+        {editing && updateLabel ? updateLabel : saveLabel}
+      </button>
+      <button type="button" className="ghost" onClick={onNew}>
+        {newLabel}
+      </button>
+    </div>
+  );
+}

package/src/primitives/Pagination.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { Select } from "./Select";
+
+export type PageSizeOption = {
+  value: string;
+  label: string;
+};
+
+const defaultPageSizes: PageSizeOption[] = [
+  { value: "15", label: "15" },
+  { value: "20", label: "20" },
+  { value: "50", label: "50" },
+  { value: "100", label: "100" },
+  { value: "all", label: "All" },
+];
+
+export function Pagination({
+  page,
+  pageCount,
+  pageSize,
+  onPageChange,
+  onPageSizeChange,
+  summary,
+  pageSizeOptions = defaultPageSizes,
+  disabled = false,
+}: {
+  page: number;
+  pageCount: number;
+  pageSize: string;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: string) => void;
+  summary: string;
+  pageSizeOptions?: PageSizeOption[];
+  disabled?: boolean;
+}) {
+  const showAll = pageSize === "all";
+
+  return (
+    <div className="table-pagination">
+      <label className="page-size">
+        Rows
+        <Select
+          className="page-size-select"
+          value={pageSize}
+          options={pageSizeOptions}
+          onChange={onPageSizeChange}
+          disabled={disabled}
+        />
+      </label>
+      <p className="page-summary">{summary}</p>
+      <div className="page-buttons">
+        <button
+          type="button"
+          className="ghost"
+          disabled={disabled || showAll || page <= 1}
+          onClick={() => onPageChange(page - 1)}
+        >
+          Previous
+        </button>
+        <span className="page-indicator">
+          Page {showAll ? 1 : page} of {pageCount}
+        </span>
+        <button
+          type="button"
+          className="ghost"
+          disabled={disabled || showAll || page >= pageCount}
+          onClick={() => onPageChange(page + 1)}
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/primitives/Select.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+export type SelectOption = {
+  value: string;
+  label: string;
+  tone?: "neutral" | "ok" | "warn" | "danger" | "accent";
+};
+
+type MenuPosition = {
+  top: number;
+  left: number;
+  width: number;
+  maxHeight: number;
+  openUp: boolean;
+};
+
+export function Select({
+  value,
+  options,
+  onChange,
+  placeholder = "Select",
+  disabled = false,
+  required = false,
+  className = "",
+}: {
+  value: string;
+  options: SelectOption[];
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+}) {
+  const listId = useId();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const [menuPos, setMenuPos] = useState<MenuPosition | null>(null);
+  const selected = options.find((option) => option.value === value) ?? null;
+
+  function updatePosition() {
+    const root = rootRef.current;
+    if (!root) {
+      return;
+    }
+    const rect = root.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom - 12;
+    const spaceAbove = rect.top - 12;
+    const openUp = spaceBelow < 220 && spaceAbove > spaceBelow;
+    const maxHeight = Math.max(160, Math.min(280, openUp ? spaceAbove : spaceBelow));
+    setMenuPos({
+      top: openUp ? rect.top - 8 : rect.bottom + 6,
+      left: rect.left,
+      width: rect.width,
+      maxHeight,
+      openUp,
+    });
+  }
+
+  useLayoutEffect(() => {
+    if (!open) {
+      return;
+    }
+    updatePosition();
+    function onReposition() {
+      updatePosition();
+    }
+    window.addEventListener("resize", onReposition);
+    window.addEventListener("scroll", onReposition, true);
+    return () => {
+      window.removeEventListener("resize", onReposition);
+      window.removeEventListener("scroll", onReposition, true);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function onPointerDown(event: MouseEvent) {
+      const target = event.target as Node;
+      if (rootRef.current?.contains(target) || menuRef.current?.contains(target)) {
+        return;
+      }
+      setOpen(false);
+    }
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
+  function choose(next: string) {
+    onChange(next);
+    setOpen(false);
+  }
+
+  return (
+    <div className={`app-select ${className}`.trim()} ref={rootRef}>
+      <input
+        className="app-select-mirror"
+        tabIndex={-1}
+        value={value}
+        required={required}
+        onChange={() => undefined}
+        aria-hidden="true"
+      />
+      <button
+        type="button"
+        className={open ? "app-select-trigger open" : "app-select-trigger"}
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={listId}
+        onClick={() => {
+          if (!disabled) {
+            setOpen((current) => !current);
+          }
+        }}
+      >
+        <span className={selected ? "app-select-value" : "app-select-placeholder"}>
+          {selected ? (
+            <>
+              {selected.tone ? <span className={`app-select-dot ${selected.tone}`} aria-hidden="true" /> : null}
+              {selected.label}
+            </>
+          ) : (
+            placeholder
+          )}
+        </span>
+        <svg className="app-select-chevron" viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M5 7.5 10 12.5 15 7.5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+      {open && menuPos
+        ? createPortal(
+            <div
+              ref={menuRef}
+              id={listId}
+              className={menuPos.openUp ? "app-select-menu open-up" : "app-select-menu"}
+              role="listbox"
+              style={{
+                top: menuPos.openUp ? undefined : menuPos.top,
+                bottom: menuPos.openUp ? window.innerHeight - menuPos.top : undefined,
+                left: menuPos.left,
+                width: menuPos.width,
+                maxHeight: menuPos.maxHeight,
+              }}
+            >
+              {options.length === 0 ? (
+                <div className="app-select-empty">No options</div>
+              ) : (
+                options.map((option) => {
+                  const active = option.value === value;
+                  return (
+                    <button
+                      key={option.value || "__empty"}
+                      type="button"
+                      role="option"
+                      aria-selected={active}
+                      className={active ? "app-select-option active" : "app-select-option"}
+                      onClick={() => choose(option.value)}
+                    >
+                      {option.tone ? <span className={`app-select-dot ${option.tone}`} aria-hidden="true" /> : null}
+                      <span>{option.label}</span>
+                      {active ? (
+                        <svg className="app-select-check" viewBox="0 0 20 20" aria-hidden="true">
+                          <path d="M4.5 10.5 8.2 14.2 15.5 6" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                      ) : null}
+                    </button>
+                  );
+                })
+              )}
+            </div>,
+            document.body,
+          )
+        : null}
+    </div>
+  );
+}
+
+/** @deprecated Prefer Select — alias kept for configurator migration */
+export const AppSelect = Select;
+export type AppSelectOption = SelectOption;

package/src/primitives/SideNav.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+export type SideNavItem = {
+  id: string;
+  label: string;
+  /** Compact label for the mobile bottom nav (falls back to `label`). */
+  short?: string;
+};
+
+export function SideNav({
+  items,
+  activeId,
+  onSelect,
+  label = "Sections",
+}: {
+  items: SideNavItem[];
+  activeId: string;
+  onSelect: (id: string) => void;
+  label?: string;
+}) {
+  return (
+    <nav className="side-nav" aria-label={label}>
+      {items.map((item) => (
+        <button
+          key={item.id}
+          type="button"
+          className={activeId === item.id ? "active" : ""}
+          onClick={() => onSelect(item.id)}
+        >
+          {item.label}
+        </button>
+      ))}
+    </nav>
+  );
+}