@lateralus-ai/shipping-ui 1.4.16 → 2.0.0-dev.10

package/src/patterns/Chat/Greeting.tsx

@@ -0,0 +1,32 @@
+import { Avatar } from "../../primitives";
+import { cn } from "../../utils/cn";
+import type { Chief } from "../Sidebar/Switcher";
+
+export type GreetingProps = {
+  chief?: Chief;
+  name?: string;
+  className?: string;
+};
+
+const chiefGreetings: Record<Chief, string> = {
+  technical: "How can I help with technical matters?",
+  compliance: "How can I help with compliance today?",
+};
+
+export const Greeting = ({
+  chief = "technical",
+  name = "there",
+  className,
+}: GreetingProps) => (
+  <div className={cn("flex flex-col items-center gap-4 text-center", className)}>
+    <Avatar chief={chief} size={32} />
+    <div>
+      <h1 className="font-heading text-heading text-display-on-light-primary">
+        Hello, {name}
+      </h1>
+      <p className="mt-2 text-body text-display-on-light-secondary">
+        {chiefGreetings[chief]}
+      </p>
+    </div>
+  </div>
+);

package/src/patterns/Chat/Reference.tsx

@@ -0,0 +1,26 @@
+import { BookIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type ReferenceProps = {
+  title?: string;
+  page?: string;
+  className?: string;
+};
+
+export const Reference = ({
+  title = "SOLAS Chapter II-1",
+  page = "p. 42",
+  className,
+}: ReferenceProps) => (
+  <button
+    type="button"
+    className={cn(
+      "inline-flex items-center gap-1.5 rounded-control bg-accent-bg-lighter px-2 py-1 text-footnote text-accent-on-light transition-colors hover:bg-accent-bg-light",
+      className,
+    )}
+  >
+    <BookIcon className="size-3.5 shrink-0" />
+    <span className="truncate">{title}</span>
+    {page && <span className="text-display-on-light-quaternary">{page}</span>}
+  </button>
+);

package/src/patterns/Chat/Source.tsx

@@ -0,0 +1,27 @@
+import { DocumentIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type SourceProps = {
+  title?: string;
+  excerpt?: string;
+  className?: string;
+};
+
+export const Source = ({
+  title = "ISM Code Section 10",
+  excerpt = "The company should establish procedures to ensure that the ship is maintained in conformity with the provisions of the relevant rules and regulations...",
+  className,
+}: SourceProps) => (
+  <div
+    className={cn(
+      "rounded-control border border-divider-primary bg-background-primary p-3",
+      className,
+    )}
+  >
+    <div className="mb-1 flex items-center gap-2">
+      <DocumentIcon className="size-4 shrink-0 text-display-on-light-tertiary" />
+      <span className="text-caption-2-em text-display-on-light-primary">{title}</span>
+    </div>
+    <p className="line-clamp-2 text-caption-2 text-display-on-light-secondary">{excerpt}</p>
+  </div>
+);

package/src/patterns/Chat/Sources.tsx

@@ -0,0 +1,23 @@
+import { cn } from "../../utils/cn";
+import { Source } from "./Source";
+
+export type SourcesProps = {
+  count?: number;
+  className?: string;
+};
+
+const placeholderSources = [
+  { title: "ISM Code Section 10", excerpt: "The company should establish procedures to ensure that the ship is maintained..." },
+  { title: "Port State Control MOU", excerpt: "Inspections are carried out to verify compliance with international conventions..." },
+];
+
+export const Sources = ({ count = 2, className }: SourcesProps) => (
+  <div className={cn("flex flex-col gap-2", className)} role="region" aria-label="Sources">
+    <p className="text-footnote-em text-display-on-light-tertiary">
+      {count} source{count !== 1 ? "s" : ""}
+    </p>
+    {placeholderSources.slice(0, count).map((source) => (
+      <Source key={source.title} title={source.title} excerpt={source.excerpt} />
+    ))}
+  </div>
+);

package/src/patterns/Chat/Suggestion.tsx

@@ -0,0 +1,23 @@
+import { BulbIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type SuggestionProps = {
+  label?: string;
+  className?: string;
+};
+
+export const Suggestion = ({
+  label = "Summarize the latest inspection findings",
+  className,
+}: SuggestionProps) => (
+  <button
+    type="button"
+    className={cn(
+      "flex items-center gap-2 rounded-control border border-divider-primary bg-background-primary px-3 py-2 text-left text-caption-2 text-display-on-light-secondary transition-colors hover:border-divider-secondary hover:bg-background-hover hover:text-display-on-light-primary",
+      className,
+    )}
+  >
+    <BulbIcon className="size-4 shrink-0 text-display-on-light-tertiary" />
+    <span>{label}</span>
+  </button>
+);

package/src/patterns/Chat/Suggestions.tsx

@@ -0,0 +1,21 @@
+import { cn } from "../../utils/cn";
+import { Suggestion } from "./Suggestion";
+
+export type SuggestionsProps = {
+  className?: string;
+};
+
+const placeholderSuggestions = [
+  "Summarize the latest inspection findings",
+  "What actions are required before next port call?",
+  "Compare with previous survey results",
+];
+
+export const Suggestions = ({ className }: SuggestionsProps) => (
+  <div className={cn("flex flex-col gap-2", className)} role="group" aria-label="Suggestions">
+    <p className="text-footnote-em text-display-on-light-tertiary">Suggested prompts</p>
+    {placeholderSuggestions.map((label) => (
+      <Suggestion key={label} label={label} />
+    ))}
+  </div>
+);

package/src/patterns/Chat/index.ts

@@ -0,0 +1,14 @@
+export { Attachment, type AttachmentProps } from "./Attachment";
+export { ChatEntry, type ChatEntryProps, type ChatEntryRole } from "./ChatEntry";
+export { ChatHeader, type ChatHeaderProps } from "./ChatHeader";
+export { ChatInput, type ChatInputProps } from "./ChatInput";
+export { ChatStatus, type ChatStatusProps } from "./ChatStatus";
+export { ChatTile, type ChatTileProps } from "./ChatTile";
+export { Copilot, type CopilotProps } from "./Copilot";
+export { Draft, type DraftProps } from "./Draft";
+export { Greeting, type GreetingProps } from "./Greeting";
+export { Reference, type ReferenceProps } from "./Reference";
+export { Source, type SourceProps } from "./Source";
+export { Sources, type SourcesProps } from "./Sources";
+export { Suggestion, type SuggestionProps } from "./Suggestion";
+export { Suggestions, type SuggestionsProps } from "./Suggestions";

package/src/patterns/Modal/Invitee.tsx

@@ -0,0 +1,44 @@
+import { Avatar, GroupedAvatars } from "../../primitives";
+import { InviteIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type InviteeVariant = "single" | "multiple";
+
+export type InviteeProps = {
+  variant?: InviteeVariant;
+  name?: string;
+  names?: string[];
+  className?: string;
+};
+
+export const Invitee = ({
+  variant = "single",
+  name = "Jordan Lee",
+  names = ["Jordan Lee", "Sam Patel", "Riley Chen"],
+  className,
+}: InviteeProps) => (
+  <div
+    className={cn(
+      "flex items-center gap-3 rounded-control border border-divider-primary bg-background-primary px-3 py-2",
+      className,
+    )}
+    data-variant={variant}
+  >
+    {variant === "single" ? (
+      <Avatar chief="initials" size={32} initials={name} />
+    ) : (
+      <GroupedAvatars count={3} />
+    )}
+
+    <div className="min-w-0 flex-1">
+      <p className="truncate text-caption-1-em text-display-on-light-primary">
+        {variant === "single" ? name : `${names.length} invitees`}
+      </p>
+      <p className="text-footnote text-display-on-light-tertiary">
+        {variant === "single" ? "Pending invitation" : names.join(", ")}
+      </p>
+    </div>
+
+    <InviteIcon className="size-4 shrink-0 text-display-on-light-quaternary" />
+  </div>
+);

package/src/patterns/Modal/ModalFooter.tsx

@@ -0,0 +1,39 @@
+import { Button } from "../../primitives";
+import { Avatar } from "../../primitives";
+import { cn } from "../../utils/cn";
+import type { Chief } from "../Sidebar/Switcher";
+
+export type ModalFooterProps = {
+  chief?: Chief;
+  className?: string;
+};
+
+const chiefLabels: Record<Chief, string> = {
+  technical: "Technical Chief",
+  compliance: "Compliance Chief",
+};
+
+export const ModalFooter = ({
+  chief = "technical",
+  className,
+}: ModalFooterProps) => (
+  <footer
+    className={cn(
+      "flex items-center justify-between gap-3 border-t border-divider-primary bg-background-secondary px-4 py-3",
+      className,
+    )}
+    data-chief={chief}
+  >
+    <div className="flex items-center gap-2">
+      <Avatar chief={chief} size={24} />
+      <span className="text-caption-2 text-display-on-light-secondary">
+        {chiefLabels[chief]}
+      </span>
+    </div>
+
+    <div className="flex items-center gap-2">
+      <Button hierarchy="secondary">Cancel</Button>
+      <Button hierarchy="primary">Confirm</Button>
+    </div>
+  </footer>
+);

package/src/patterns/Modal/ModalHeader.tsx

@@ -0,0 +1,77 @@
+import { type ReactNode } from "react";
+import { Avatar, IconButton, ThinkingDot } from "../../primitives";
+import {
+  CriticalIcon,
+  FormsIcon,
+  InformationIcon,
+  IssuesIcon,
+  ReportIcon,
+  SettingsIcon,
+} from "../../icons";
+import { cn } from "../../utils/cn";
+import type { Chief } from "../Sidebar/Switcher";
+
+export type ModalHeaderVariant =
+  | "issue"
+  | "thinking"
+  | "generic"
+  | "settings"
+  | "audit"
+  | "forms";
+
+export type ModalHeaderProps = {
+  variant?: ModalHeaderVariant;
+  title?: string;
+  chief?: Chief;
+  onClose?: () => void;
+  className?: string;
+};
+
+const variantConfig: Record<
+  ModalHeaderVariant,
+  { icon: ReactNode; defaultTitle: string }
+> = {
+  issue: { icon: <IssuesIcon className="size-5" />, defaultTitle: "Issue details" },
+  thinking: { icon: <ThinkingDot />, defaultTitle: "Chief is thinking" },
+  generic: { icon: <InformationIcon className="size-5" />, defaultTitle: "Information" },
+  settings: { icon: <SettingsIcon className="size-5" />, defaultTitle: "Settings" },
+  audit: { icon: <ReportIcon className="size-5" />, defaultTitle: "Audit trail" },
+  forms: { icon: <FormsIcon className="size-5" />, defaultTitle: "Forms" },
+};
+
+export const ModalHeader = ({
+  variant = "generic",
+  title,
+  chief,
+  onClose,
+  className,
+}: ModalHeaderProps) => {
+  const config = variantConfig[variant];
+  const displayTitle = title ?? config.defaultTitle;
+
+  return (
+    <header
+      className={cn(
+        "flex items-center gap-3 border-b border-divider-primary bg-background-secondary px-4 py-3",
+        className,
+      )}
+      data-variant={variant}
+    >
+      <span className="shrink-0 text-display-on-light-tertiary">
+        {variant === "issue" ? <CriticalIcon className="size-5 text-meta-red" /> : config.icon}
+      </span>
+
+      {chief && <Avatar chief={chief} size={24} />}
+
+      <h2 className="min-w-0 flex-1 truncate text-subheader-em text-display-on-light-primary">
+        {displayTitle}
+      </h2>
+
+      {onClose && (
+        <IconButton hierarchy="quaternary" size="small" aria-label="Close" onClick={onClose}>
+          <span className="text-caption-1">✕</span>
+        </IconButton>
+      )}
+    </header>
+  );
+};

package/src/patterns/Modal/index.ts

@@ -0,0 +1,3 @@
+export { Invitee, type InviteeProps, type InviteeVariant } from "./Invitee";
+export { ModalFooter, type ModalFooterProps } from "./ModalFooter";
+export { ModalHeader, type ModalHeaderProps, type ModalHeaderVariant } from "./ModalHeader";

package/src/patterns/Search/Pill.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+export type PillState = "idle" | "active";
+export type PillSize = "large" | "small";
+
+export type PillProps = {
+  state?: PillState;
+  size?: PillSize;
+  children: ReactNode;
+  className?: string;
+};
+
+const stateStyles: Record<PillState, string> = {
+  idle: "border-divider-primary bg-background-primary text-display-on-light-secondary hover:bg-background-hover",
+  active: "border-blue-300 bg-blue-50 text-blue-700",
+};
+
+const sizeStyles: Record<PillSize, string> = {
+  large: "px-4 py-2 text-caption-1",
+  small: "px-3 py-1 text-caption-2",
+};
+
+export const Pill = ({
+  state = "idle",
+  size = "large",
+  children,
+  className,
+}: PillProps) => (
+  <button
+    type="button"
+    className={cn(
+      "inline-flex items-center rounded-full border transition-colors",
+      stateStyles[state],
+      sizeStyles[size],
+      className,
+    )}
+    data-state={state}
+    data-size={size}
+    aria-pressed={state === "active"}
+  >
+    {children}
+  </button>
+);

package/src/patterns/Search/PillInfo.tsx

@@ -0,0 +1,41 @@
+import { Count } from "../../primitives";
+import { ChevronIcon, TickIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type PillInfoType = "count" | "completed" | "dropdown";
+
+export type PillInfoProps = {
+  type?: PillInfoType;
+  value?: number;
+  label?: string;
+  className?: string;
+};
+
+export const PillInfo = ({
+  type = "count",
+  value = 5,
+  label = "Filters",
+  className,
+}: PillInfoProps) => (
+  <span
+    className={cn(
+      "inline-flex items-center gap-1.5 text-footnote text-display-on-light-tertiary",
+      className,
+    )}
+    data-type={type}
+  >
+    {type === "count" && <Count value={value} />}
+    {type === "completed" && (
+      <>
+        <TickIcon className="size-3.5 text-meta-green" />
+        <span>Completed</span>
+      </>
+    )}
+    {type === "dropdown" && (
+      <>
+        <span>{label}</span>
+        <ChevronIcon direction="down" className="size-3.5" />
+      </>
+    )}
+  </span>
+);

package/src/patterns/Search/ResultRow.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+import {
+  Entry,
+  type EntryProps,
+  type EntryState,
+  type EntryVariant,
+} from "../../components/Entry";
+
+/** @deprecated Prefer `EntryVariant`. */
+export type ResultRowVariant = EntryVariant;
+/** @deprecated Prefer `EntryState`. */
+export type ResultRowState = EntryState;
+
+export type ResultRowProps = {
+  variant?: EntryVariant;
+  state?: EntryState;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  onClick?: () => void;
+  className?: string;
+};
+
+/**
+ * @deprecated Prefer `Entry` — ResultRow is a thin alias for search lists.
+ */
+export const ResultRow = ({
+  variant = "report",
+  state = "idle",
+  title = "Search result",
+  subtitle,
+  onClick,
+  className,
+}: ResultRowProps) => (
+  <Entry
+    variant={variant}
+    state={state}
+    title={title}
+    subtitle={subtitle}
+    onClick={onClick}
+    className={className}
+  />
+);
+
+export type { EntryProps };