@kosmeo-ui/react 0.1.0

package/src/components/data-display/infiniteScroll/utils/hasPendingChanges.ts

@@ -0,0 +1,113 @@
+import {
+  InfiniteScrollMenuGeneratedFilter,
+  InfiniteScrollMenuLimitOption,
+  InfiniteScrollMenuSortDataKey,
+  SortDirection,
+} from "../types.js";
+
+interface PendingChangesParams {
+  filters: InfiniteScrollMenuGeneratedFilter[];
+  pendingFilters: InfiniteScrollMenuGeneratedFilter[];
+  sortBy: InfiniteScrollMenuSortDataKey[];
+  pendingSortBy: InfiniteScrollMenuSortDataKey[];
+  sortDirection: SortDirection;
+  pendingSortDirection: SortDirection;
+  limitOptions: InfiniteScrollMenuLimitOption[];
+  pendingLimitOptions: InfiniteScrollMenuLimitOption[];
+}
+
+export const hasPendingChanges = (params: PendingChangesParams): boolean => {
+  return (
+    hasFilterChanges(params.filters, params.pendingFilters) ||
+    hasSortChanges(
+      params.sortBy,
+      params.pendingSortBy,
+      params.sortDirection,
+      params.pendingSortDirection
+    ) ||
+    hasLimitChanges(params.limitOptions, params.pendingLimitOptions)
+  );
+};
+
+export const hasActiveFilters = (
+  pendingFilters: InfiniteScrollMenuGeneratedFilter[]
+): boolean => {
+  for (const filter of pendingFilters) {
+    if (filter.type === "RANGE") {
+      if (filter.startValue || filter.endValue) return true;
+    } else if (filter.type === "SEARCH") {
+      if (filter.value) return true;
+    } else if (filter.type === "LIST") {
+      if (filter.list) return true;
+    } else if (filter.type === "SELECT") {
+      if (filter.options?.some((o) => o.selected)) return true;
+    }
+  }
+  return false;
+};
+
+const hasFilterChanges = (
+  filters: InfiniteScrollMenuGeneratedFilter[],
+  pendingFilters: InfiniteScrollMenuGeneratedFilter[]
+): boolean => {
+  if (!filters || !pendingFilters) return false;
+
+  for (const filter of filters) {
+    const pending = pendingFilters[filters.indexOf(filter)];
+    if (!pending) return true;
+
+    if (filter.type === "SELECT" && pending.type === "SELECT") {
+      const selected = filter.options?.filter((o) => o.selected) || [];
+      const pendingSelected = pending.options?.filter((o) => o.selected) || [];
+      if (selected.length !== pendingSelected.length) return true;
+      if (!selected.every((o) => pendingSelected.some((p) => p.id === o.id)))
+        return true;
+    } else if (filter.type === "SEARCH" && pending.type === "SEARCH") {
+      if (filter.value !== pending.value) {
+        if (!(filter.value === "" && pending.value === undefined)) return true;
+      }
+    } else if (filter.type === "RANGE" && pending.type === "RANGE") {
+      if (filter.startValue !== pending.startValue) {
+        if (!(filter.startValue === "" && pending.startValue === undefined))
+          return true;
+      }
+      if (filter.endValue !== pending.endValue) {
+        if (!(filter.endValue === "" && pending.endValue === undefined))
+          return true;
+      }
+    } else if (filter.type === "LIST" && pending.type === "LIST") {
+      if (filter.list !== pending.list) {
+        if (!(filter.list === "" && pending.list === undefined)) return true;
+      }
+    }
+  }
+  return false;
+};
+
+const hasSortChanges = (
+  sortBy: InfiniteScrollMenuSortDataKey[],
+  pendingSortBy: InfiniteScrollMenuSortDataKey[],
+  sortDirection: SortDirection,
+  pendingSortDirection: SortDirection
+): boolean => {
+  if (sortDirection !== pendingSortDirection) return true;
+
+  const currentSelected = sortBy.find((s) => s.selected);
+  const pendingSelected = pendingSortBy.find((s) => s.selected);
+
+  if (!currentSelected && !pendingSelected) return false;
+  if (!currentSelected || !pendingSelected) return true;
+  return currentSelected.dataKey !== pendingSelected.dataKey;
+};
+
+const hasLimitChanges = (
+  limitOptions: InfiniteScrollMenuLimitOption[],
+  pendingLimitOptions: InfiniteScrollMenuLimitOption[]
+): boolean => {
+  const currentSelected = limitOptions.find((l) => l.selected);
+  const pendingSelected = pendingLimitOptions.find((l) => l.selected);
+
+  if (!currentSelected && !pendingSelected) return false;
+  if (!currentSelected || !pendingSelected) return true;
+  return currentSelected.value !== pendingSelected.value;
+};

package/src/components/data-display/listCard/index.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import Card from "../../layout/card/index.js";
+import "./styles.css";
+
+interface ListCardProps {
+  listTitle: string;
+  items: { label: string; value: React.ReactNode }[];
+  headerActions?: React.ReactNode;
+  footerButtons?: React.ReactNode;
+}
+
+const ListCard = (props: ListCardProps) => {
+  return (
+    <Card>
+      {props.headerActions ? (
+        <div className="k-list-card-header">
+          <h3>{props.listTitle}</h3>
+          <div className="k-list-card-header-actions">
+            {props.headerActions}
+          </div>
+        </div>
+      ) : (
+        <h3>{props.listTitle}</h3>
+      )}
+      <dl className="k-list-card">
+        {props.items.map((item, index) => (
+          <div key={index}>
+            <dt>{item.label}</dt>
+            <dd>{item.value}</dd>
+          </div>
+        ))}
+      </dl>
+
+      {props.footerButtons && (
+        <div className="k-list-card-actions">{props.footerButtons}</div>
+      )}
+    </Card>
+  );
+};
+
+export default ListCard;

package/src/components/data-display/listCard/styles.css

@@ -0,0 +1,48 @@
+.k-list-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.k-list-card-header h3 {
+  margin: 0;
+}
+
+.k-list-card-header-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.k-list-card {
+  margin: 0;
+}
+
+.k-list-card > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.k-list-card > div:last-child {
+  border-bottom: none;
+}
+
+.k-list-card dt {
+  font-weight: 600;
+  text-align: left;
+  flex-shrink: 0;
+  color: var(--text-color-secondary);
+}
+
+.k-list-card dd {
+  margin: 0;
+}
+
+.k-list-card-actions {
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color);
+}

package/src/components/data-display/listRow/index.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { ReactNode } from "react";
+import "./styles.css";
+
+export interface ListRowProps {
+  children: ReactNode;
+  /** Right-aligned action cluster (icon buttons, etc.). */
+  actions?: ReactNode;
+}
+
+const ListRow = ({ children, actions }: ListRowProps) => {
+  return (
+    <div className="k-list-row">
+      <div className="k-list-row-body">{children}</div>
+      {actions && <div className="k-list-row-actions">{actions}</div>}
+    </div>
+  );
+};
+
+export default ListRow;

package/src/components/data-display/listRow/styles.css

@@ -0,0 +1,22 @@
+.k-list-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.25rem;
+  background: var(--background-color);
+}
+
+.k-list-row-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.k-list-row-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}

package/src/components/data-display/recoveryCodeGrid/index.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import "./styles.css";
+
+export interface RecoveryCodeGridProps {
+  codes: string[];
+  /** Number of columns. Defaults to 2. */
+  columns?: 1 | 2 | 3;
+  /** Show each code with a numeric prefix (1., 2., …). Defaults to false. */
+  numbered?: boolean;
+}
+
+const RecoveryCodeGrid = ({
+  codes,
+  columns = 2,
+  numbered,
+}: RecoveryCodeGridProps) => {
+  return (
+    <ul className={`k-recovery-code-grid k-recovery-code-grid-${columns}col`}>
+      {codes.map((code, i) => (
+        <li key={code} className="k-recovery-code-grid-item">
+          {numbered && (
+            <span className="k-recovery-code-grid-index">{i + 1}.</span>
+          )}
+          <code className="k-recovery-code-grid-code">{code}</code>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default RecoveryCodeGrid;

package/src/components/data-display/recoveryCodeGrid/styles.css

@@ -0,0 +1,47 @@
+.k-recovery-code-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0.75rem;
+  display: grid;
+  gap: 0.5rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.375rem;
+  background: var(--background-color-light, var(--background-color));
+}
+
+.k-recovery-code-grid-1col {
+  grid-template-columns: 1fr;
+}
+.k-recovery-code-grid-2col {
+  grid-template-columns: repeat(2, 1fr);
+}
+.k-recovery-code-grid-3col {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+@media (max-width: 480px) {
+  .k-recovery-code-grid-2col,
+  .k-recovery-code-grid-3col {
+    grid-template-columns: 1fr;
+  }
+}
+
+.k-recovery-code-grid-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+}
+
+.k-recovery-code-grid-index {
+  font-size: 0.75rem;
+  color: var(--text-color);
+  opacity: 0.55;
+  min-width: 1.5rem;
+  text-align: right;
+}
+
+.k-recovery-code-grid-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.9375rem;
+  letter-spacing: 0.03em;
+}

package/src/components/data-display/secretDisplay/index.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import IconButton from "../../buttons/iconButton/index.js";
+import { ReactNode, useState } from "react";
+import "./styles.css";
+import {
+  faCheck,
+  faCopy,
+  faEye,
+  faEyeSlash,
+} from "@fortawesome/free-solid-svg-icons";
+
+export interface SecretDisplayProps {
+  /** The secret value to display. */
+  value: string;
+  /** Show a copy-to-clipboard button. Defaults to true. */
+  copyable?: boolean;
+  /** Show a reveal/hide toggle. Defaults to false. When true the value is masked initially. */
+  revealable?: boolean;
+  /** Optional element rendered before the value (icon, prefix). */
+  leading?: ReactNode;
+  /** When revealable, character used for masking. Defaults to "•". */
+  maskChar?: string;
+  /** Visible character count when masked. Defaults to 12. */
+  maskLength?: number;
+}
+
+const SecretDisplay = ({
+  value,
+  copyable = true,
+  revealable = false,
+  leading,
+  maskChar = "•",
+  maskLength = 12,
+}: SecretDisplayProps) => {
+  const [revealed, setRevealed] = useState(!revealable);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+
+  const display = revealed ? value : maskChar.repeat(maskLength);
+
+  return (
+    <div className="k-secret-display">
+      {leading && <div className="k-secret-display-leading">{leading}</div>}
+      <code className="k-secret-display-value k-mono">{display}</code>
+      {revealable && (
+        <IconButton
+          icon={revealed ? faEyeSlash : faEye}
+          onClick={() => setRevealed((r) => !r)}
+          variant="secondary"
+          size="sm"
+          fullWidth={false}
+          aria-label={revealed ? "Hide" : "Reveal"}
+        />
+      )}
+      {copyable && (
+        <IconButton
+          icon={copied ? faCheck : faCopy}
+          onClick={handleCopy}
+          variant="secondary"
+          size="sm"
+          fullWidth={false}
+          aria-label="Copy"
+        />
+      )}
+    </div>
+  );
+};
+
+export default SecretDisplay;

package/src/components/data-display/secretDisplay/styles.css

@@ -0,0 +1,24 @@
+.k-secret-display {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.375rem;
+  background: var(--background-color-light);
+}
+
+.k-secret-display-leading {
+  flex-shrink: 0;
+  color: var(--text-color-secondary);
+}
+
+.k-secret-display-value {
+  flex: 1;
+  min-width: 0;
+  padding: 0.125rem 0.25rem;
+  background-color: var(--background-color);
+  border-radius: 0.25rem;
+  word-break: break-all;
+  user-select: all;
+}

package/src/components/data-display/statCard/index.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import Card from "../../layout/card/index.js";
+import { ReactNode } from "react";
+import "./styles.css";
+
+export type StatCardIconVariant =
+  "primary" | "secondary" | "success" | "warning" | "danger";
+
+export interface StatCardProps {
+  label: ReactNode;
+  value: ReactNode;
+  /** Optional leading icon rendered in a colored tile. */
+  icon?: ReactNode;
+  /** Background color for the icon tile. Defaults to "primary". */
+  iconVariant?: StatCardIconVariant;
+  /** Optional element rendered on the right (e.g., chevron). */
+  trailing?: ReactNode;
+  /** If provided, the card renders as an anchor and uses `href`. */
+  href?: string;
+  /** Click handler. Card receives hover styling when interactive. */
+  onClick?: () => void;
+  /** Compact preset: small uppercase label above large value, no icon/trailing. */
+  compact?: boolean;
+}
+
+const StatCard = ({
+  label,
+  value,
+  icon,
+  iconVariant = "primary",
+  trailing,
+  href,
+  onClick,
+  compact = false,
+}: StatCardProps) => {
+  const isInteractive = Boolean(href || onClick);
+  const classes = [
+    "k-stat-card",
+    compact ? "k-stat-card-compact" : "k-stat-card-default",
+    isInteractive ? "k-stat-card-interactive" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const body = compact ? (
+    <>
+      <div className="k-stat-card-label">{label}</div>
+      <div className="k-stat-card-value">{value}</div>
+    </>
+  ) : (
+    <>
+      {icon && (
+        <div className={`k-stat-card-icon k-stat-card-icon-${iconVariant}`}>
+          {icon}
+        </div>
+      )}
+      <div className="k-stat-card-content">
+        <div className="k-stat-card-value">{value}</div>
+        <div className="k-stat-card-label">{label}</div>
+      </div>
+      {trailing && <div className="k-stat-card-trailing">{trailing}</div>}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className={classes} onClick={onClick}>
+        <Card padding={compact ? "small" : "default"} hoverable>
+          {body}
+        </Card>
+      </a>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button type="button" className={classes} onClick={onClick}>
+        <Card padding={compact ? "small" : "default"} hoverable>
+          {body}
+        </Card>
+      </button>
+    );
+  }
+
+  return (
+    <div className={classes}>
+      <Card padding={compact ? "small" : "default"}>{body}</Card>
+    </div>
+  );
+};
+
+export default StatCard;

package/src/components/data-display/statCard/styles.css

@@ -0,0 +1,96 @@
+.k-stat-card {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+}
+
+.k-stat-card-interactive {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  padding: 0;
+  text-align: inherit;
+  font: inherit;
+  width: 100%;
+}
+
+/* Lay the icon / value+label / trailing out in a row. The flex must sit on
+   .k-card-body (the element that directly contains them); Card wraps its
+   children in .k-card-body, so targeting .k-card alone has no effect. */
+.k-stat-card-default .k-card-body {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.k-stat-card-compact .k-card {
+  background: var(--background-color-dark);
+}
+
+.k-stat-card-icon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-color-light);
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.k-stat-card-icon-primary {
+  background-color: var(--primary-color);
+}
+.k-stat-card-icon-secondary {
+  background-color: var(--secondary-color);
+}
+.k-stat-card-icon-success {
+  background-color: var(--success-color);
+}
+.k-stat-card-icon-warning {
+  background-color: var(--warning-color);
+}
+.k-stat-card-icon-danger {
+  background-color: var(--danger-color);
+}
+
+.k-stat-card-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.k-stat-card-default .k-stat-card-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-color);
+  line-height: 1;
+}
+
+.k-stat-card-default .k-stat-card-label {
+  font-size: 0.875rem;
+  color: var(--text-color-secondary);
+  margin-top: 0.25rem;
+}
+
+.k-stat-card-compact .k-stat-card-label {
+  font-size: 0.75rem;
+  color: var(--text-color-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.k-stat-card-compact .k-stat-card-value {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-top: 0.25rem;
+}
+
+.k-stat-card-trailing {
+  color: var(--border-color);
+  flex-shrink: 0;
+}
+
+.k-stat-card-interactive:hover .k-stat-card-trailing {
+  color: var(--primary-color);
+}

package/src/components/data-display/summaryRow/index.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { ReactNode } from "react";
+import "./styles.css";
+
+export interface SummaryRowItem {
+  label: ReactNode;
+  value: ReactNode;
+}
+
+export interface SummaryRowProps {
+  items: SummaryRowItem[];
+}
+
+const SummaryRow = ({ items }: SummaryRowProps) => {
+  return (
+    <div className="k-summary-row">
+      {items.map((item, i) => (
+        <div key={i} className="k-summary-row-cell">
+          <span className="k-summary-row-label">{item.label}</span>
+          <span className="k-summary-row-value">{item.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SummaryRow;

package/src/components/data-display/summaryRow/styles.css

@@ -0,0 +1,26 @@
+.k-summary-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  background-color: var(--background-color-dark);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+
+.k-summary-row-cell {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.375rem;
+}
+
+.k-summary-row-label {
+  color: var(--text-color-secondary);
+  font-weight: 500;
+}
+
+.k-summary-row-value {
+  color: var(--text-color);
+}