@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/src/states/error-state/error-state.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "../../utils/cn.js";
+
+export interface ErrorStateProps {
+  message: ReactNode;
+  /** Correlation code for support; never a raw exception. */
+  correlationId?: ReactNode;
+  /** Prefix shown before the correlation id. */
+  correlationLabel?: string;
+  onRetry?: () => void;
+  retryLabel?: string;
+  className?: string;
+}
+
+export function ErrorState({
+  message,
+  correlationId,
+  correlationLabel = "ID:",
+  onRetry,
+  retryLabel = "Retry",
+  className,
+}: ErrorStateProps) {
+  return (
+    <div
+      role="alert"
+      className={cn(
+        "@container/state flex min-w-0 flex-col items-center gap-2 px-4 py-8 text-center @min-[360px]/state:px-6 @min-[360px]/state:py-10",
+        className,
+      )}
+    >
+      <p className="max-w-full font-semibold text-[14px] text-ink [overflow-wrap:anywhere]">
+        {message}
+      </p>
+      {correlationId ? (
+        <p className="max-w-full text-[11.5px] text-ink-3 tabular-nums [overflow-wrap:anywhere]">
+          {correlationLabel} {correlationId}
+        </p>
+      ) : null}
+      {onRetry ? (
+        <button
+          type="button"
+          onClick={onRetry}
+          className="mt-2 inline-flex h-control-sm cursor-pointer items-center rounded-input border-control bg-surface-control px-3 font-semibold text-[13px] text-ink hover:bg-surface-2"
+        >
+          {retryLabel}
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/states/error-state/index.ts

@@ -0,0 +1 @@
+export * from "./error-state.js";

package/src/states/forbidden-state/forbidden-state.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { cn } from "../../utils/cn.js";
+
+export interface ForbiddenStateProps {
+  title: ReactNode;
+  /** Reason for the block, e.g. depending on role; never just "Forbidden". */
+  reason?: ReactNode;
+  className?: string;
+}
+
+export function ForbiddenState({ title, reason, className }: ForbiddenStateProps) {
+  return (
+    <div
+      role="alert"
+      className={cn(
+        "@container/state flex min-w-0 flex-col items-center gap-2 px-4 py-8 text-center @min-[360px]/state:px-6 @min-[360px]/state:py-10",
+        className,
+      )}
+    >
+      <p className="max-w-full font-semibold text-[14px] text-ink [overflow-wrap:anywhere]">
+        {title}
+      </p>
+      {reason ? (
+        <p className="max-w-[42ch] text-[13px] text-ink-3 [overflow-wrap:anywhere]">{reason}</p>
+      ) : null}
+    </div>
+  );
+}

package/src/states/forbidden-state/index.ts

@@ -0,0 +1 @@
+export * from "./forbidden-state.js";

package/src/states/index.ts

@@ -0,0 +1,5 @@
+export * from "./empty-state/index.js";
+export * from "./error-state/index.js";
+export * from "./forbidden-state/index.js";
+export * from "./offline-banner/index.js";
+export * from "./skeleton/index.js";

package/src/states/offline-banner/index.ts

@@ -0,0 +1 @@
+export * from "./offline-banner.js";

package/src/states/offline-banner/offline-banner.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { Banner } from "../../containers/banner/index.js";
+
+export interface OfflineBannerProps {
+  /** Number of changes queued while waiting to reconnect. */
+  queuedChanges?: number;
+  /** Screen reader text for the queue counter. */
+  queuedLabel?: string;
+  message: ReactNode;
+  className?: string;
+}
+
+export function OfflineBanner({
+  queuedChanges = 0,
+  queuedLabel,
+  message,
+  className,
+}: OfflineBannerProps) {
+  return (
+    <Banner
+      tone="warning"
+      className={className}
+      action={
+        queuedChanges > 0 ? (
+          <span className="font-semibold text-[12px] tabular-nums">
+            <span aria-hidden="true">{queuedChanges}</span>
+            <span className="sr-only">{queuedLabel ?? String(queuedChanges)}</span>
+          </span>
+        ) : undefined
+      }
+    >
+      {message}
+    </Banner>
+  );
+}

package/src/states/skeleton/index.ts

@@ -0,0 +1 @@
+export * from "./skeleton.js";

package/src/states/skeleton/skeleton.tsx

@@ -0,0 +1,53 @@
+import { cn } from "../../utils/cn.js";
+
+export type SkeletonVariant = "lines" | "table" | "card";
+
+const PLACEHOLDER_IDS = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l"] as const;
+
+export interface SkeletonProps {
+  variant?: SkeletonVariant;
+  /** Number of lines for the `lines` variant. */
+  lines?: number;
+  /** Number of rows for the `table` variant. */
+  rows?: number;
+  /** Text announced to screen readers while loading. */
+  label?: string;
+  className?: string;
+}
+
+export function Skeleton({
+  variant = "lines",
+  lines = 3,
+  rows = 4,
+  label = "Loading",
+  className,
+}: SkeletonProps) {
+  return (
+    <div
+      role="status"
+      aria-busy="true"
+      aria-label={label}
+      className={cn("animate-pulse", className)}
+    >
+      {variant === "lines" ? (
+        <div className="flex flex-col gap-2">
+          {PLACEHOLDER_IDS.slice(0, lines).map((id, index) => (
+            <div
+              key={id}
+              className="h-3 rounded-xs bg-surface-2"
+              style={{ width: index === lines - 1 ? "60%" : "100%" }}
+            />
+          ))}
+        </div>
+      ) : null}
+      {variant === "table" ? (
+        <div className="flex flex-col gap-2">
+          {PLACEHOLDER_IDS.slice(0, rows).map((id) => (
+            <div key={id} className="h-9 rounded-xs bg-surface-2" />
+          ))}
+        </div>
+      ) : null}
+      {variant === "card" ? <div className="h-40 rounded-card bg-surface-2" /> : null}
+    </div>
+  );
+}

package/src/utils/cn.ts

@@ -0,0 +1,94 @@
+import { type ClassValue, clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+/** Custom `text-*` size tokens from theme.css; without them twMerge reads them as colors. */
+const TEXT_SIZES = [
+  "kpi-number",
+  "page-title",
+  "dialog-title",
+  "card-title",
+  "lede",
+  "body",
+  "row-title",
+  "control",
+  "meta",
+  "chip-text",
+  "overline",
+  "clock",
+  "data",
+  "count",
+  "m-title",
+  "m-card-title",
+  "m-row-title",
+  "m-body",
+  "m-button",
+  "m-meta",
+];
+
+/** Role radii and legacy radius names from theme.css (`rounded-*`). */
+const RADII = [
+  "xs",
+  "chip",
+  "event",
+  "control",
+  "tile",
+  "banner",
+  "card",
+  "dialog",
+  "sheet",
+  "pill",
+  "button",
+  "input",
+  "badge",
+  "avatar",
+  "popover",
+];
+
+/** Role shadows and legacy shadow names from theme.css (`shadow-*`). */
+const SHADOWS = [
+  "flat",
+  "hero",
+  "cta",
+  "sel",
+  "pop",
+  "card",
+  "raised",
+  "overlay",
+  "control",
+  "selected",
+  "inset",
+  "inset-accent",
+  "pinned-start",
+  "pinned-end",
+];
+
+/** Density-aware sizes from theme.css, used by `h-*`, `p-*`, `px-*` and `gap-*`. */
+const SPACINGS = [
+  "control",
+  "control-sm",
+  "input",
+  "control-x",
+  "card",
+  "density-sm",
+  "density",
+  "density-lg",
+  "control-height",
+  "control-height-sm",
+  "input-height",
+];
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: { radius: RADII, shadow: SHADOWS, spacing: SPACINGS },
+    classGroups: {
+      "font-size": [{ text: TEXT_SIZES }],
+      // Preset edges set width, style and color together; a later `border-2` or `border-0` wins.
+      "border-w": [{ border: ["card", "control", "divider"] }],
+    },
+  },
+});
+
+/** Merge class names, resolving conflicting Tailwind utilities (last one wins). */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { cn } from "./cn.js";
+export { usePrefersReducedMotion } from "./reduced-motion.js";

package/src/utils/reduced-motion.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+const QUERY = "(prefers-reduced-motion: reduce)";
+
+function subscribe(onChange: () => void) {
+  const media = window.matchMedia(QUERY);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
+/** True when the user asked the OS for reduced motion; false during SSR. */
+export function usePrefersReducedMotion(): boolean {
+  return useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(QUERY).matches,
+    () => false,
+  );
+}

package/src/xlsx/crc32.ts

@@ -0,0 +1,22 @@
+// CRC-32 (IEEE 802.3, the checksum of ZIP and PNG). Pure.
+
+const TABLE: Uint32Array = (() => {
+  const table = new Uint32Array(256);
+  for (let n = 0; n < 256; n += 1) {
+    let c = n;
+    for (let k = 0; k < 8; k += 1) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+    table[n] = c >>> 0;
+  }
+  return table;
+})();
+
+/**
+ * CRC-32 of `bytes`. Pass the result of a previous call as `previous` to checksum data in chunks.
+ */
+export function crc32(bytes: Uint8Array, previous = 0): number {
+  let crc = ~previous >>> 0;
+  for (let i = 0; i < bytes.length; i += 1) {
+    crc = (TABLE[(crc ^ (bytes[i] as number)) & 0xff] as number) ^ (crc >>> 8);
+  }
+  return ~crc >>> 0;
+}

package/src/xlsx/index.ts

@@ -0,0 +1,15 @@
+export { crc32 } from "./crc32.js";
+export {
+  buildXlsx,
+  columnName,
+  escapeXml,
+  excelSerial,
+  sheetName,
+  XLSX_MIME,
+  type XlsxCellValue,
+  type XlsxColumn,
+  type XlsxFormat,
+  type XlsxSheet,
+  type XlsxWorkbook,
+} from "./xlsx.js";
+export { createZip, dosDateTime, type ZipEntry, type ZipOptions } from "./zip.js";