@kosmeo-ui/react 0.1.0

package/src/components/layout/sectionHeader/styles.css

@@ -0,0 +1,116 @@
+.k-section-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.k-section-header-dense {
+  margin-bottom: 0.375rem;
+}
+
+.k-section-header-divider {
+  padding-bottom: 1rem;
+  border-bottom: 0.0625rem solid var(--border-color);
+  margin-bottom: 1.5rem;
+}
+
+.k-section-header-preface {
+  font-size: 0.875rem;
+  color: var(--text-color-secondary);
+}
+
+.k-section-header-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.k-section-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.k-section-header-row-with-center .k-section-header-left {
+  flex: 1;
+}
+
+.k-section-header-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.k-section-header-leading {
+  display: inline-flex;
+  align-items: center;
+}
+
+.k-section-header-titles {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.k-section-header-title {
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.25;
+  word-break: break-word;
+}
+
+.k-section-header-h1 .k-section-header-title {
+  font-size: 1.5rem;
+  line-height: 1.2;
+}
+.k-section-header-h2 .k-section-header-title {
+  font-size: 1.25rem;
+}
+.k-section-header-h3 .k-section-header-title {
+  font-size: 1rem;
+}
+.k-section-header-h4 .k-section-header-title {
+  font-size: 0.9375rem;
+}
+
+.k-section-header-subtitle {
+  font-size: 0.8125rem;
+  color: var(--text-color);
+  opacity: 0.65;
+}
+
+.k-section-header-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  align-items: center;
+}
+
+.k-section-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.k-section-header-row-with-center .k-section-header-actions {
+  flex: 1;
+  justify-content: flex-end;
+}
+
+@media (max-width: 768px) {
+  .k-section-header-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .k-section-header-actions {
+    width: 100%;
+  }
+}

package/src/components/navigation/breadcrumbs/index.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { PropsWithSize } from "../../types.js";
+import "./styles.css";
+
+export interface Breadcrumb {
+  /** The text to be displayed to the user */
+  label: string;
+  /** The URL path that the user will be taken to when clicked */
+  path: string;
+  /**
+   * Optional click handler. Receives the native event so consumers can
+   * `preventDefault()` to override the anchor's navigation (e.g. to keep
+   * SPA state rather than doing a full page load).
+   */
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+
+export interface BreadcrumbsProps extends PropsWithSize {
+  /** An array of Breadcrumb object that represent each part of the Breadcrumb tree */
+  items: Breadcrumb[];
+}
+
+const Breadcrumbs = (props: BreadcrumbsProps) => {
+  const { size = "md" } = props;
+  return (
+    <nav aria-label="breadcrumb">
+      <ol className="k-breadcrumbs-list">
+        {props.items.map((item, index) => (
+          <li
+            key={index}
+            className={`k-breadcrumb-item k-breadcrumb-item-${size}`}
+          >
+            {index < props.items.length - 1 ? (
+              <a href={item.path} onClick={item.onClick}>
+                {item.label}
+              </a>
+            ) : (
+              <span>{item.label}</span>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+};
+
+export default Breadcrumbs;

package/src/components/navigation/breadcrumbs/styles.css

@@ -0,0 +1,42 @@
+.k-breadcrumbs-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+.k-breadcrumb-item {
+  font-size: var(--text-size-md);
+}
+
+.k-breadcrumb-item a {
+  text-decoration: none;
+  color: var(--text-color-link);
+}
+
+.k-breadcrumb-item a:hover {
+  text-decoration: underline;
+}
+
+.k-breadcrumb-item span {
+  color: var(--text-color-secondary);
+}
+
+.k-breadcrumb-item + .k-breadcrumb-item::before {
+  content: "/";
+  margin: 0 0.5rem;
+  color: var(--text-color-secondary);
+}
+
+.k-breadcrumb-item-sm {
+  font-size: var(--text-size-sm);
+}
+
+.k-breadcrumb-item-md {
+  font-size: var(--text-size-md);
+}
+
+.k-breadcrumb-item-lg {
+  font-size: var(--text-size-lg);
+}

package/src/components/navigation/sidebar/index.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./styles.css";
+
+export interface SidebarProps {
+  children: ReactNode;
+}
+
+export const Sidebar = ({ children }: SidebarProps) => {
+  return <nav className="k-sidebar-nav">{children}</nav>;
+};
+
+export interface SidebarNavGroupProps {
+  label: ReactNode;
+  children: ReactNode;
+}
+
+export const SidebarNavGroup = ({ label, children }: SidebarNavGroupProps) => {
+  return (
+    <div className="k-sidebar-nav-group">
+      <div className="k-sidebar-nav-group-label">{label}</div>
+      {children}
+    </div>
+  );
+};
+
+type SidebarNavLinkOwnProps<E extends ElementType> = {
+  /** Element type used for the link. Pass `NavLink` from react-router for active styling. Defaults to `a`. */
+  as?: E;
+  /** Icon rendered before the label. */
+  icon?: IconDefinition;
+  children: ReactNode;
+};
+
+export type SidebarNavLinkProps<E extends ElementType = "a"> =
+  SidebarNavLinkOwnProps<E> &
+    Omit<ComponentPropsWithoutRef<E>, keyof SidebarNavLinkOwnProps<E>>;
+
+export const SidebarNavLink = <E extends ElementType = "a">(
+  props: SidebarNavLinkProps<E>
+) => {
+  const { as, icon, children, ...rest } = props as {
+    as?: ElementType;
+    icon?: IconDefinition;
+    children: ReactNode;
+  } & Record<string, unknown>;
+  const Component: ElementType = as ?? "a";
+  return (
+    <Component {...rest} className="k-sidebar-nav-link">
+      {icon && <FontAwesomeIcon icon={icon} />}
+      <span>{children}</span>
+    </Component>
+  );
+};
+
+export default Sidebar;

package/src/components/navigation/sidebar/styles.css

@@ -0,0 +1,57 @@
+.k-sidebar-nav {
+  flex: 1;
+  padding: 0.5rem 0;
+  overflow-y: auto;
+}
+
+.k-sidebar-nav-group + .k-sidebar-nav-group {
+  margin-top: 0.5rem;
+}
+
+.k-sidebar-nav-group-label {
+  padding: 0.5rem 1.5rem 0.25rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--overlay-light-medium);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.k-sidebar-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 1.5rem;
+  color: var(--text-color-light);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.k-sidebar-nav-link:hover {
+  background-color: var(--overlay-light-weak);
+}
+
+.k-sidebar-nav-link.active {
+  background-color: var(--overlay-light-medium);
+  color: var(--text-color-light);
+  font-weight: 600;
+}
+
+.k-sidebar-nav-link > svg {
+  flex-shrink: 0;
+  width: 1.125rem;
+}
+
+.k-sidebar-nav-link > span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/components/navigation/stepper/index.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ReactNode } from "react";
+import "./styles.css";
+
+export type StepperStatus = "pending" | "active" | "complete" | "error";
+
+export interface StepperStep {
+  key: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  status: StepperStatus;
+  /** When false, this step ignores `onStepClick`. Defaults to true if `onStepClick` is provided. */
+  clickable?: boolean;
+}
+
+export interface StepperProps {
+  steps: StepperStep[];
+  /** Orientation. Defaults to horizontal. */
+  orientation?: "horizontal" | "vertical";
+  /** Optional handler invoked when a step is clicked. Provides the step `key` and its index. */
+  onStepClick?: (key: string, index: number) => void;
+}
+
+const defaultIconForStatus = (status: StepperStatus, index: number) => {
+  if (status === "complete") return <FontAwesomeIcon icon={faCheck} />;
+  if (status === "error") return <FontAwesomeIcon icon={faXmark} />;
+  return <span>{index + 1}</span>;
+};
+
+const Stepper = ({
+  steps,
+  orientation = "horizontal",
+  onStepClick,
+}: StepperProps) => {
+  return (
+    <ol className={`k-stepper k-stepper-${orientation}`} aria-label="Progress">
+      {steps.map((step, i) => {
+        const isClickable =
+          !!onStepClick &&
+          (step.clickable ?? true) &&
+          step.status !== "pending";
+        const handleClick = isClickable
+          ? () => onStepClick(step.key, i)
+          : undefined;
+        return (
+          <li
+            key={step.key}
+            className={`k-stepper-step k-stepper-step-${step.status}${
+              isClickable ? " k-stepper-step-clickable" : ""
+            }`}
+            aria-current={step.status === "active" ? "step" : undefined}
+            onClick={handleClick}
+          >
+            <div className="k-stepper-marker">
+              {step.icon ?? defaultIconForStatus(step.status, i)}
+            </div>
+            <div className="k-stepper-label">{step.label}</div>
+            {i < steps.length - 1 && (
+              <div className="k-stepper-connector" aria-hidden />
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  );
+};
+
+export default Stepper;

package/src/components/navigation/stepper/styles.css

@@ -0,0 +1,101 @@
+.k-stepper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.k-stepper-horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.k-stepper-vertical {
+  flex-direction: column;
+}
+
+.k-stepper-step {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative;
+  flex: 1;
+}
+
+.k-stepper-step-clickable {
+  cursor: pointer;
+}
+
+.k-stepper-horizontal .k-stepper-step {
+  flex-direction: column;
+  text-align: center;
+}
+
+.k-stepper-marker {
+  width: 2rem;
+  height: 2rem;
+  min-width: 2rem;
+  border-radius: 50%;
+  border: 0.125rem solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.875rem;
+  background: var(--background-color);
+  color: var(--text-color);
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+  z-index: 1;
+}
+
+.k-stepper-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.k-stepper-connector {
+  position: absolute;
+  background: var(--border-color);
+}
+
+.k-stepper-horizontal .k-stepper-connector {
+  top: 1rem;
+  left: 50%;
+  right: -50%;
+  height: 0.125rem;
+}
+
+.k-stepper-vertical .k-stepper-connector {
+  left: 0.9375rem;
+  top: 2rem;
+  bottom: -0.5rem;
+  width: 0.125rem;
+}
+
+.k-stepper-step-active .k-stepper-marker {
+  border-color: var(--primary-color);
+  background: var(--primary-color);
+  color: var(--text-color-light);
+}
+
+.k-stepper-step-complete .k-stepper-marker {
+  border-color: var(--success-color);
+  background: var(--success-color);
+  color: var(--text-color-light);
+}
+
+.k-stepper-step-error .k-stepper-marker {
+  border-color: var(--danger-color);
+  background: var(--danger-color);
+  color: var(--text-color-light);
+}
+
+.k-stepper-step-complete .k-stepper-connector,
+.k-stepper-step-active .k-stepper-connector {
+  background: var(--primary-color);
+}

package/src/components/navigation/tabButton/index.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { PropsWithSize, PropsWithVariant } from "../../types.js";
+import "./styles.css";
+
+interface TabButtonProps extends PropsWithSize, PropsWithVariant {
+  active?: boolean;
+  onClick?: () => void;
+  children: React.ReactNode;
+  disabled?: boolean;
+}
+
+const TabButton = ({
+  active = false,
+  onClick,
+  children,
+  disabled = false,
+  size = "md",
+  variant = "primary",
+}: TabButtonProps) => {
+  const buttonClasses = [
+    "k-tab-button",
+    `k-tab-button-${size}`,
+    `k-tab-button-${variant}`,
+    active && "k-tab-button-active",
+    disabled && "k-tab-button-disabled",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <button
+      className={buttonClasses}
+      onClick={onClick}
+      disabled={disabled}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+};
+
+export default TabButton;

package/src/components/navigation/tabButton/styles.css

@@ -0,0 +1,148 @@
+.k-tab-button {
+  background: var(--background-color);
+  border: 0.0625rem solid var(--border-color);
+  border-bottom: 0.125rem solid transparent;
+  border-radius: 0.375rem 0.375rem 0 0;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-weight: 500;
+  position: relative;
+  outline: none;
+  margin-right: 0.25rem;
+}
+
+/* Size variations */
+.k-tab-button-sm {
+  padding: 0.375rem 0.75rem;
+  font-size: var(--text-size-sm);
+}
+
+.k-tab-button-md {
+  padding: 0.5rem 1rem;
+  font-size: var(--text-size-md);
+}
+
+.k-tab-button-lg {
+  padding: 0.625rem 1.25rem;
+  font-size: var(--text-size-lg);
+}
+
+/* Variant styles - all keep white background, only text and border colors change */
+.k-tab-button-primary {
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+.k-tab-button-primary:hover:not(.k-tab-button-disabled) {
+  color: var(--primary-color);
+  background-color: var(--background-color);
+}
+
+.k-tab-button-primary.k-tab-button-active {
+  color: var(--primary-color);
+  background-color: var(--background-color);
+  border-bottom-color: var(--primary-color);
+  border-color: var(--primary-color) var(--primary-color) transparent
+    var(--primary-color);
+}
+
+.k-tab-button-secondary {
+  color: var(--text-color-secondary);
+  background-color: var(--background-color);
+}
+
+.k-tab-button-secondary:hover:not(.k-tab-button-disabled) {
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+.k-tab-button-secondary.k-tab-button-active {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  border-bottom-color: var(--secondary-color);
+  border-color: var(--secondary-color) var(--secondary-color) transparent
+    var(--secondary-color);
+}
+
+.k-tab-button-success {
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+.k-tab-button-success:hover:not(.k-tab-button-disabled) {
+  color: var(--success-color);
+  background-color: var(--background-color);
+}
+
+.k-tab-button-success.k-tab-button-active {
+  color: var(--success-color);
+  background-color: var(--background-color);
+  border-bottom-color: var(--success-color);
+  border-color: var(--success-color) var(--success-color) transparent
+    var(--success-color);
+}
+
+.k-tab-button-danger {
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+.k-tab-button-danger:hover:not(.k-tab-button-disabled) {
+  color: var(--danger-color);
+  background-color: var(--background-color);
+}
+
+.k-tab-button-danger.k-tab-button-active {
+  color: var(--danger-color);
+  background-color: var(--background-color);
+  border-bottom-color: var(--danger-color);
+  border-color: var(--danger-color) var(--danger-color) transparent
+    var(--danger-color);
+}
+
+.k-tab-button-warning {
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+.k-tab-button-warning:hover:not(.k-tab-button-disabled) {
+  color: var(--warning-color);
+  background-color: var(--background-color);
+}
+
+.k-tab-button-warning.k-tab-button-active {
+  color: var(--warning-color);
+  background-color: var(--background-color);
+  border-bottom-color: var(--warning-color);
+  border-color: var(--warning-color) var(--warning-color) transparent
+    var(--warning-color);
+}
+
+.k-tab-button-light {
+  color: var(--text-color-secondary);
+  background-color: var(--background-color);
+}
+
+.k-tab-button-light:hover:not(.k-tab-button-disabled) {
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+.k-tab-button-light.k-tab-button-active {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  border-bottom-color: var(--border-color);
+  border-color: var(--border-color) var(--border-color) transparent
+    var(--border-color);
+}
+
+/* Disabled state */
+.k-tab-button-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.k-tab-button-disabled:hover {
+  background-color: transparent;
+}