@kosmeo-ui/react 0.1.0

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

@@ -0,0 +1,155 @@
+"use client";
+
+import type { TableColumn, TableRow } from "../dataTable/types.js";
+import parseDataKey from "../dataTable/utils/parseDataKey.js";
+import { ReactNode } from "react";
+import "./styles.css";
+
+export interface TableProps<TData> {
+  columns: TableColumn<TData>[];
+  rows: TData[];
+  /**
+   * Stable per-row key. Defaults to `index` — provide this if rows can
+   * reorder/insert so React reconciliation is correct.
+   */
+  rowKey?: (row: TData, index: number) => string | number;
+  /**
+   * Row click handler. Cells with `disableRowClick` on their column won't
+   * fire this. When set, rows render `cursor: pointer` automatically.
+   */
+  onRowClick?: (row: TData, index: number) => void;
+  /**
+   * When provided, matching rows get `data-selected="true"` for selection
+   * styling. Combine with `onRowClick` for click-to-select pickers.
+   */
+  isRowSelected?: (row: TData, index: number) => boolean;
+  /** Rendered (as a single full-width cell) when `rows` is empty. */
+  emptyMessage?: ReactNode;
+  striped?: boolean;
+  bordered?: boolean;
+  hover?: boolean;
+  /**
+   * Wraps the table in a scrollable container with a sticky header. Pass any
+   * CSS length (string) or a number (interpreted as pixels).
+   */
+  maxHeight?: string | number;
+  style?: React.CSSProperties;
+}
+
+const Table = <TData,>({
+  columns,
+  rows,
+  rowKey,
+  onRowClick,
+  isRowSelected,
+  emptyMessage,
+  striped = true,
+  bordered = true,
+  hover = true,
+  maxHeight,
+  style,
+}: TableProps<TData>) => {
+  const visibleColumns = columns.filter((c) => !c.hidden);
+  const clickable = !!onRowClick;
+
+  const tableClasses = [
+    "k-table",
+    striped ? "k-table-striped" : "",
+    hover ? "k-table-hover" : "",
+    bordered ? "k-table-bordered" : "",
+    clickable ? "k-table-clickable" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const table = (
+    <table className={tableClasses} style={maxHeight ? undefined : style}>
+      <thead>
+        <tr>
+          {visibleColumns.map((c, idx) => {
+            const alignClass = c.align ? `k-data-table-align-${c.align}` : "";
+            const content = c.headerElement
+              ? c.headerElement(c.title)
+              : c.title;
+            return (
+              <th
+                key={idx}
+                className={`k-data-table-header-cell ${alignClass}`.trim()}
+                style={{
+                  width: c.width,
+                  minWidth: c.minWidth,
+                  maxWidth: c.maxWidth,
+                }}
+              >
+                {content}
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.length === 0 && emptyMessage !== undefined ? (
+          <tr>
+            <td colSpan={visibleColumns.length}>{emptyMessage}</td>
+          </tr>
+        ) : (
+          rows.map((row, i) => {
+            const key = rowKey ? rowKey(row, i) : i;
+            return (
+              <tr
+                key={key}
+                onClick={onRowClick ? () => onRowClick(row, i) : undefined}
+                data-selected={
+                  isRowSelected && isRowSelected(row, i) ? "true" : undefined
+                }
+              >
+                {visibleColumns.map((c, ci) => {
+                  const alignClass = c.align
+                    ? `k-data-table-align-${c.align}`
+                    : "";
+                  const content = c.cellElement
+                    ? c.cellElement(row, i)
+                    : c.dataKey
+                      ? (parseDataKey(c.dataKey, row) as ReactNode)
+                      : null;
+                  return (
+                    <td
+                      key={ci}
+                      className={alignClass || undefined}
+                      onClick={
+                        c.disableRowClick
+                          ? (e) => e.stopPropagation()
+                          : undefined
+                      }
+                    >
+                      {content}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })
+        )}
+      </tbody>
+    </table>
+  );
+
+  if (maxHeight === undefined) {
+    return table;
+  }
+
+  const resolvedMaxHeight =
+    typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+
+  return (
+    <div
+      className="k-table-scroll-container"
+      style={{ maxHeight: resolvedMaxHeight, ...style }}
+    >
+      {table}
+    </div>
+  );
+};
+
+export default Table;
+export type { TableColumn, TableRow };

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

@@ -0,0 +1,61 @@
+.k-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  color: var(--text-color);
+  background-color: var(--background-color-light);
+}
+
+.k-table th,
+.k-table td {
+  padding: 0.5rem;
+}
+
+.k-table th {
+  font-weight: 600;
+}
+
+.k-table-striped tbody tr:nth-of-type(odd) {
+  background-color: var(--background-color-dark);
+}
+
+.k-table-hover tbody tr:hover {
+  background-color: var(--background-color-hover);
+}
+
+.k-table-bordered {
+  border: 1px solid var(--border-color);
+}
+
+.k-table-bordered th,
+.k-table-bordered td {
+  border-top: 1px solid var(--border-color);
+}
+
+.k-table-bordered th:not(:first-child),
+.k-table-bordered td:not(:first-child) {
+  border-left: 1px solid var(--border-color);
+}
+
+/* ===== Clickable rows ===== */
+.k-table-clickable tbody tr {
+  cursor: pointer;
+}
+
+/* ===== Row selection (caller marks rows with data-selected="true") ===== */
+.k-table tbody tr[data-selected="true"] {
+  background-color: var(--primary-color-background-light);
+}
+
+/* ===== Scrollable wrapper with sticky header ===== */
+.k-table-scroll-container {
+  overflow-y: auto;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+
+.k-table-scroll-container .k-table thead tr {
+  position: sticky;
+  top: 0;
+  background: var(--background-color-light);
+}

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

@@ -0,0 +1,39 @@
+"use client";
+
+import Badge from "../../feedback/badge/index.js";
+import Card from "../../layout/card/index.js";
+import Col from "../../layout/col/index.js";
+import "./styles.css";
+
+interface TagCardProps {
+  title: string;
+  tags: string[];
+  color?: "primary" | "secondary";
+  emptyText?: string;
+}
+
+const TagCard = (props: TagCardProps) => {
+  const { color = "primary" } = props;
+  return (
+    <Card>
+      <Col size="sm">
+        <h3>{props.title}</h3>
+        {props.tags.length ? (
+          <ul className="k-tag-card-list">
+            {props.tags.map((t) => (
+              <Badge key={t} variant={color} size="md" pill>
+                {t}
+              </Badge>
+            ))}
+          </ul>
+        ) : (
+          props.emptyText && (
+            <p className="k-tag-card-empty-text">{props.emptyText}</p>
+          )
+        )}
+      </Col>
+    </Card>
+  );
+};
+
+export default TagCard;

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

@@ -0,0 +1,14 @@
+.k-tag-card-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.k-tag-card-empty-text {
+  color: var(--text-color-secondary);
+  font-style: italic;
+  margin: 0;
+}

package/src/components/feedback/alert/index.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { PropsWithSize, PropsWithVariant } from "../../types.js";
+import Button from "../../buttons/button/index.js";
+import "./styles.css";
+import {
+  faCircleCheck,
+  faCircleInfo,
+  faHand,
+  faTriangleExclamation,
+} from "@fortawesome/free-solid-svg-icons";
+
+export interface AlertProps extends PropsWithSize, PropsWithVariant {
+  /** The child element(s) that will appear in the Alert */
+  children: React.ReactNode;
+  /** **_Optional_** bold heading rendered above the children. */
+  heading?: React.ReactNode;
+  /** **_Optional_** prop for whether to allow the alert to be dismissed by the user */
+  dismissible?: boolean;
+  /** **_Optional_** function that is called when the dismiss button is pressed on the Alert */
+  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
+  /** **_Optional_** button text to display */
+  buttonText?: string;
+}
+
+const Alert = (props: AlertProps) => {
+  const { size = "md", variant = "primary" } = props;
+  const icon = {
+    primary: faCircleInfo,
+    secondary: faCircleInfo,
+    light: faCircleInfo,
+    warning: faTriangleExclamation,
+    danger: faHand,
+    success: faCircleCheck,
+    custom: faCircleInfo,
+    link: faCircleInfo,
+  };
+
+  return (
+    <div className={`k-alert k-alert-${variant} k-alert-${size}`} role="alert">
+      <div className="k-alert-content">
+        <div className="k-alert-icon-message">
+          <FontAwesomeIcon size={"lg"} icon={icon[variant]} />
+          <div className="k-alert-body">
+            {props.heading && (
+              <div className="k-alert-heading">{props.heading}</div>
+            )}
+            <div className="k-alert-message">{props.children}</div>
+          </div>
+        </div>
+        {props.dismissible && (
+          <Button
+            size="sm"
+            variant={variant}
+            onClick={(e) => {
+              if (!props.onDismiss) return;
+              props.onDismiss(e);
+            }}
+          >
+            {props.buttonText ? props.buttonText : "Acknowledge"}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Alert;

package/src/components/feedback/alert/styles.css

@@ -0,0 +1,88 @@
+.k-alert {
+  width: 100%;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  display: flex;
+  box-sizing: border-box;
+}
+
+.k-alert-content {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.k-alert-icon-message {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.k-alert-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.k-alert-heading {
+  font-weight: 600;
+  font-size: 1.0625em;
+  line-height: 1.25;
+}
+
+.k-alert-message {
+  line-height: 1.4;
+}
+
+.k-alert-primary {
+  background-color: var(--primary-color-background);
+  color: var(--text-color-light);
+}
+
+.k-alert-secondary {
+  background-color: var(--secondary-color-background);
+  color: var(--text-color-light);
+}
+
+.k-alert-light {
+  background-color: var(--light-color-background);
+  color: var(--text-color);
+}
+
+.k-alert-danger {
+  background-color: var(--danger-color-background);
+  color: var(--text-color-light);
+}
+
+.k-alert-warning {
+  background-color: var(--warning-color-background);
+  color: var(--text-color);
+}
+
+.k-alert-success {
+  background-color: var(--success-color-background);
+  color: var(--text-color-light);
+}
+
+.k-alert-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.5rem 0.75rem;
+}
+
+.k-alert-md {
+  font-size: var(--text-size-md);
+  padding: 0.75rem 1rem;
+}
+
+.k-alert-lg {
+  font-size: var(--text-size-lg);
+  padding: 1rem 1.25rem;
+}

package/src/components/feedback/badge/index.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { PropsWithSize, PropsWithVariant } from "../../types.js";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { getContrastTextColor } from "./utils.js";
+import "./styles.css";
+
+export interface BadgeProps extends PropsWithSize, PropsWithVariant {
+  /** The content to display inside the badge */
+  children: React.ReactNode;
+  /** Whether to use pill-shaped (fully rounded) styling. Defaults to true */
+  pill?: boolean;
+  /** Whether to use subtle styling with transparent background. Defaults to false */
+  subtle?: boolean;
+  /** Custom hex color. Required when variant="custom". Sets background and auto-picks contrast text color. */
+  color?: string;
+  /** When present, renders an inline × button. Caller handles state mutation. */
+  onRemove?: () => void;
+  /** Optional icon rendered before children. */
+  startIcon?: React.ReactNode;
+  /** When set, renders the badge as a button. */
+  onClick?: () => void;
+  /** Accessible label used when onClick is set. */
+  ariaLabel?: string;
+}
+
+const Badge = ({
+  children,
+  size = "md",
+  variant = "primary",
+  pill = true,
+  subtle = false,
+  color,
+  onRemove,
+  startIcon,
+  onClick,
+  ariaLabel,
+}: BadgeProps) => {
+  if (variant === "custom" && !color) {
+    throw new Error(
+      'Badge: variant="custom" requires a `color` prop (hex string).'
+    );
+  }
+
+  const pillClass = pill ? "k-badge-pill" : "";
+  const subtleClass = subtle ? "k-badge-subtle" : "";
+  const clickableClass = onClick ? "k-badge-clickable" : "";
+  const classes =
+    `k-badge k-badge-${variant} k-badge-${size} ${pillClass} ${subtleClass} ${clickableClass}`.trim();
+
+  const inlineStyle =
+    variant === "custom" && color
+      ? {
+          backgroundColor: color,
+          color:
+            getContrastTextColor(color) === "light"
+              ? "var(--text-color-light)"
+              : "var(--text-color)",
+        }
+      : undefined;
+
+  const content = (
+    <>
+      {startIcon && <span className="k-badge-start-icon">{startIcon}</span>}
+      <span className="k-badge-content">{children}</span>
+      {onRemove && (
+        <button
+          type="button"
+          aria-label="Remove"
+          className="k-badge-remove"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+        >
+          <FontAwesomeIcon icon={faXmark} />
+        </button>
+      )}
+    </>
+  );
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        className={classes}
+        style={inlineStyle}
+        onClick={onClick}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <span className={classes} style={inlineStyle}>
+      {content}
+    </span>
+  );
+};
+
+export default Badge;

package/src/components/feedback/badge/styles.css

@@ -0,0 +1,162 @@
+.k-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+
+button.k-badge {
+  border: none;
+  font-family: inherit;
+}
+
+.k-badge-clickable {
+  cursor: pointer;
+}
+
+.k-badge-clickable:hover {
+  opacity: 0.85;
+}
+
+.k-badge-start-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.k-badge-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin-left: 0.125rem;
+  color: inherit;
+  opacity: 0.7;
+  cursor: pointer;
+  font-size: 0.85em;
+  line-height: 1;
+}
+
+.k-badge-remove:hover {
+  opacity: 1;
+}
+
+.k-badge-custom {
+  /* background-color + color set inline via style attribute */
+}
+
+/* Sizes */
+.k-badge-sm {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+.k-badge-md {
+  padding: 0.25rem 0.625rem;
+  font-size: 0.875rem;
+}
+
+.k-badge-lg {
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+}
+
+/* Variants */
+.k-badge-primary {
+  background-color: var(--primary-color);
+  color: var(--text-color-light);
+}
+
+.k-badge-secondary {
+  background-color: var(--secondary-color);
+  color: var(--text-color-light);
+}
+
+.k-badge-light {
+  background-color: var(--light-color-background);
+  color: var(--text-color);
+}
+
+.k-badge-danger {
+  background-color: var(--danger-color);
+  color: var(--text-color-light);
+}
+
+.k-badge-warning {
+  background-color: var(--warning-color);
+  color: var(--text-color);
+}
+
+.k-badge-success {
+  background-color: var(--success-color);
+  color: var(--text-color-light);
+}
+
+/* Pill shape */
+.k-badge-pill {
+  border-radius: 9999px;
+}
+
+/* Standard rounded corners when not pill */
+.k-badge:not(.k-badge-pill) {
+  border-radius: 4px;
+}
+
+/* Subtle variants - transparent background with colored text */
+.k-badge-subtle.k-badge-primary {
+  background-color: color-mix(
+    in srgb,
+    var(--primary-color) 15%,
+    var(--background-color)
+  );
+  color: var(--primary-color);
+}
+
+.k-badge-subtle.k-badge-secondary {
+  background-color: color-mix(
+    in srgb,
+    var(--secondary-color) 15%,
+    var(--background-color)
+  );
+  color: var(--secondary-color);
+}
+
+.k-badge-subtle.k-badge-light {
+  background-color: color-mix(
+    in srgb,
+    var(--light-color) 30%,
+    var(--background-color)
+  );
+  color: var(--text-color);
+}
+
+.k-badge-subtle.k-badge-danger {
+  background-color: color-mix(
+    in srgb,
+    var(--danger-color) 15%,
+    var(--background-color)
+  );
+  color: var(--danger-color);
+}
+
+.k-badge-subtle.k-badge-warning {
+  background-color: color-mix(
+    in srgb,
+    var(--warning-color) 20%,
+    var(--background-color)
+  );
+  color: var(--warning-color);
+}
+
+.k-badge-subtle.k-badge-success {
+  background-color: color-mix(
+    in srgb,
+    var(--success-color) 15%,
+    var(--background-color)
+  );
+  color: var(--success-color);
+}

package/src/components/feedback/badge/utils.ts

@@ -0,0 +1,14 @@
+/**
+ * Compute whether to use light or dark text on a given hex background.
+ * Uses YIQ luminance formula.
+ */
+export const getContrastTextColor = (hex: string): "light" | "dark" => {
+  const normalized = hex.replace("#", "");
+  if (normalized.length !== 6) return "dark";
+  const r = parseInt(normalized.slice(0, 2), 16);
+  const g = parseInt(normalized.slice(2, 4), 16);
+  const b = parseInt(normalized.slice(4, 6), 16);
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return "dark";
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+  return yiq >= 128 ? "dark" : "light";
+};