sid-ui 0.0.0-stage → 0.1.0

package/src/components/Clock.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { useNow } from "./hooks";
+import {
+  HOURS_PER_HALF,
+  MINUTES_PER_HOUR,
+  SECONDS_PER_MINUTE,
+  meridiemOf,
+  pad2,
+  parseTime,
+  to12,
+  type HourCycle,
+  type TimeParts,
+} from "./time";
+
+import type { ControlSize } from "./size";
+
+/**
+ * analog  — numerals, minute ticks, three hands.
+ * minimal — twelve marks and two hands; calm enough for a sidebar.
+ * digital — large tabular digits with a quiet caption.
+ * compact — an inline pill for rows and headers.
+ */
+export type ClockVariant = "analog" | "minimal" | "digital" | "compact";
+
+export interface ClockProps {
+  /** A fixed "HH:mm[:ss]". Omit it for a live clock. */
+  value?: string;
+  variant?: ClockVariant;
+  size?: ControlSize;
+  hourCycle?: HourCycle;
+  showSeconds?: boolean;
+  /** IANA zone for a live clock, e.g. "Asia/Tokyo". Defaults to the viewer's. */
+  timeZone?: string;
+  /** Caption — a city, a room, a person. */
+  label?: string;
+}
+
+const TICK_MS = 1000;
+const DEGREES = 360;
+const NUMERALS = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+const NUMERAL_RADIUS = 32;
+
+function zoned(now: Date, timeZone?: string): TimeParts {
+  if (!timeZone) return { h: now.getHours(), m: now.getMinutes(), s: now.getSeconds() };
+  const pieces = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hourCycle: "h23",
+  }).formatToParts(now);
+  const read = (type: string) => Number(pieces.find((piece) => piece.type === type)?.value ?? 0);
+  return { h: read("hour"), m: read("minute"), s: read("second") };
+}
+
+function Hand({ turn, length, className }: { turn: number; length: number; className: string }) {
+  return (
+    <line
+      className={className}
+      x1="50"
+      y1="50"
+      x2="50"
+      y2={50 - length}
+      style={{ transform: `rotate(${turn}deg)` }}
+    />
+  );
+}
+
+function Face({
+  parts,
+  variant,
+  showSeconds,
+}: {
+  parts: TimeParts;
+  variant: "analog" | "minimal";
+  showSeconds: boolean;
+}) {
+  const minuteTurn = (parts.m + parts.s / SECONDS_PER_MINUTE) * (DEGREES / MINUTES_PER_HOUR);
+  const hourTurn =
+    ((parts.h % HOURS_PER_HALF) + parts.m / MINUTES_PER_HOUR) * (DEGREES / HOURS_PER_HALF);
+  const secondTurn = parts.s * (DEGREES / SECONDS_PER_MINUTE);
+  const marks = variant === "analog" ? MINUTES_PER_HOUR : HOURS_PER_HALF;
+
+  return (
+    <svg className="os-clock-face" viewBox="0 0 100 100" aria-hidden>
+      <circle className="os-clock-rim" cx="50" cy="50" r="48" />
+      {Array.from({ length: marks }, (_, i) => {
+        const major = i % (marks / HOURS_PER_HALF) === 0;
+        return (
+          <line
+            key={i}
+            className={major ? "os-clock-mark os-clock-mark-major" : "os-clock-mark"}
+            x1="50"
+            y1={major ? 6 : 6.5}
+            x2="50"
+            y2={major ? 10 : 8}
+            style={{ transform: `rotate(${(i * DEGREES) / marks}deg)` }}
+          />
+        );
+      })}
+      {variant === "analog" &&
+        NUMERALS.map((n, i) => {
+          const angle = (i / HOURS_PER_HALF) * Math.PI * 2 - Math.PI / 2;
+          return (
+            <text
+              key={n}
+              className="os-clock-numeral"
+              x={50 + NUMERAL_RADIUS * Math.cos(angle)}
+              y={50 + NUMERAL_RADIUS * Math.sin(angle)}
+            >
+              {n}
+            </text>
+          );
+        })}
+      <Hand className="os-clock-hour" turn={hourTurn} length={variant === "analog" ? 19 : 22} />
+      <Hand className="os-clock-minute" turn={minuteTurn} length={variant === "analog" ? 29 : 33} />
+      {showSeconds && <Hand className="os-clock-second" turn={secondTurn} length={36} />}
+      <circle className="os-clock-pin" cx="50" cy="50" r="2" />
+    </svg>
+  );
+}
+
+/** Shows a time — fixed or live — in four treatments. It never takes input. */
+export function Clock({
+  value,
+  variant = "analog",
+  size = "md",
+  hourCycle = "12h",
+  showSeconds = true,
+  timeZone,
+  label,
+}: ClockProps) {
+  const now = useNow(TICK_MS, value === undefined);
+  const parts = value !== undefined ? parseTime(value) : now ? zoned(now, timeZone) : null;
+  const twelve = hourCycle === "12h";
+  const hour = parts ? (twelve ? String(to12(parts.h)) : pad2(parts.h)) : "--";
+  const minute = parts ? pad2(parts.m) : "--";
+  const second = parts ? pad2(parts.s) : "--";
+  const meridiem = parts && twelve ? meridiemOf(parts.h) : "";
+  const spoken = parts ? `${hour}:${minute}${meridiem ? ` ${meridiem}` : ""}` : "Loading time";
+  const root = [
+    "os-clock",
+    `os-clock-${variant}`,
+    `os-clock-${size}`,
+    value === undefined && "os-clock-live",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  if (variant === "compact") {
+    return (
+      <span className={root} role="timer" aria-label={label ? `${label}, ${spoken}` : spoken}>
+        <span className="os-clock-pulse" aria-hidden />
+        <span className="os-clock-digits">
+          {hour}:{minute}
+          {meridiem && <span className="os-clock-meridiem"> {meridiem}</span>}
+        </span>
+        {label && <span className="os-clock-label">{label}</span>}
+      </span>
+    );
+  }
+
+  if (variant === "digital") {
+    return (
+      <div className={root} role="timer" aria-label={label ? `${label}, ${spoken}` : spoken}>
+        <div className="os-clock-digits" aria-hidden>
+          <span>{hour}</span>
+          <span className="os-clock-colon">:</span>
+          <span>{minute}</span>
+          <span className="os-clock-tail">
+            {meridiem && <span className="os-clock-meridiem">{meridiem}</span>}
+            {showSeconds && <span className="os-clock-seconds">{second}</span>}
+          </span>
+        </div>
+        {label && <span className="os-clock-label">{label}</span>}
+      </div>
+    );
+  }
+
+  return (
+    <figure className={root} role="timer" aria-label={label ? `${label}, ${spoken}` : spoken}>
+      {parts ? (
+        <Face parts={parts} variant={variant} showSeconds={showSeconds} />
+      ) : (
+        <span className="os-clock-face os-clock-face-empty" />
+      )}
+      {label && (
+        <figcaption className="os-clock-caption">
+          <span className="os-clock-label">{label}</span>
+          <span className="os-clock-small">{spoken}</span>
+        </figcaption>
+      )}
+    </figure>
+  );
+}

package/src/components/CodeInput.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import {
+  useId,
+  useRef,
+  type ClipboardEvent,
+  type ChangeEvent,
+  type CSSProperties,
+  type KeyboardEvent,
+} from "react";
+
+import {
+  deleteCode,
+  insertCode,
+  typedCharacters,
+  type CodeCharset,
+  type CodeEdit,
+} from "./codeInputRules";
+
+import type { ControlSize } from "./size";
+
+export const CODE_INPUT_LENGTH = 6;
+
+export type CodeInputStatus = "default" | "error" | "success";
+
+export interface CodeInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  /** Called once, when the last cell is filled. */
+  onComplete?: (value: string) => void;
+  length?: number;
+  /** Digits only by default; `alphanumeric` also accepts letters (shown upper-case). */
+  charset?: CodeCharset;
+  label: string;
+  isLabelHidden?: boolean;
+  description?: string;
+  /** `error` shakes the cells once and turns them red; `success` ripples green across them. */
+  status?: CodeInputStatus;
+  isDisabled?: boolean;
+  hasAutoFocus?: boolean;
+  size?: ControlSize;
+}
+
+/** One round cell per character. Typing, pasting, backspace, and arrow keys move between cells. */
+export function CodeInput({
+  value,
+  onChange,
+  onComplete,
+  length = CODE_INPUT_LENGTH,
+  charset = "numeric",
+  label,
+  isLabelHidden = false,
+  description,
+  status = "default",
+  isDisabled = false,
+  hasAutoFocus = false,
+  size = "md",
+}: CodeInputProps) {
+  const id = useId();
+  const cells = useRef<Array<HTMLInputElement | null>>([]);
+  // Focus moves before React re-renders, so handlers read the newest value from here.
+  const latest = useRef(value);
+  latest.current = value;
+
+  const focusCell = (index: number) => {
+    const cell = cells.current[Math.max(0, Math.min(index, length - 1))];
+    cell?.focus();
+    cell?.select();
+  };
+
+  const apply = ({ value: next, focusIndex }: CodeEdit) => {
+    if (next !== latest.current) {
+      latest.current = next;
+      onChange(next);
+      if (next.length === length) onComplete?.(next);
+    }
+    focusCell(focusIndex);
+  };
+
+  const handleChange = (index: number, event: ChangeEvent<HTMLInputElement>) => {
+    const current = latest.current;
+    const typed = typedCharacters(event.target.value, current[index]);
+    if (!typed) {
+      apply(deleteCode(current, index));
+      return;
+    }
+    apply(insertCode(current, index, typed, length, charset));
+  };
+
+  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {
+    const current = latest.current;
+    switch (event.key) {
+      case "Backspace":
+        event.preventDefault();
+        apply(deleteCode(current, index));
+        break;
+      case "Delete":
+        event.preventDefault();
+        if (index < current.length) apply(deleteCode(current, index));
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        focusCell(index - 1);
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        focusCell(Math.min(index + 1, current.length));
+        break;
+      case "Home":
+        event.preventDefault();
+        focusCell(0);
+        break;
+      case "End":
+        event.preventDefault();
+        focusCell(current.length);
+        break;
+    }
+  };
+
+  const handlePaste = (index: number, event: ClipboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    apply(insertCode(latest.current, index, event.clipboardData.getData("text"), length, charset));
+  };
+
+  return (
+    <div
+      className={`os-code os-code-${size}`}
+      role="group"
+      aria-labelledby={`${id}-label`}
+      aria-describedby={description ? `${id}-description` : undefined}
+      data-status={status}
+    >
+      <span
+        id={`${id}-label`}
+        className={isLabelHidden ? "os-code-label os-code-label-hidden" : "os-code-label"}
+      >
+        {label}
+      </span>
+      <div className="os-code-cells">
+        {Array.from({ length }, (_, index) => {
+          const character = value[index] ?? "";
+          return (
+            <div
+              key={index}
+              className="os-code-cell"
+              data-filled={character ? "true" : "false"}
+              style={{ "--os-code-index": index } as CSSProperties}
+            >
+              <input
+                ref={(node) => {
+                  cells.current[index] = node;
+                }}
+                className="os-code-input"
+                value={character}
+                onChange={(event) => handleChange(index, event)}
+                onKeyDown={(event) => handleKeyDown(index, event)}
+                onPaste={(event) => handlePaste(index, event)}
+                onFocus={(event) => {
+                  // Reaching a cell past the end lands on the first empty one.
+                  if (index > latest.current.length) focusCell(latest.current.length);
+                  else event.target.select();
+                }}
+                inputMode={charset === "numeric" ? "numeric" : "text"}
+                autoComplete="one-time-code"
+                autoCapitalize="characters"
+                spellCheck={false}
+                aria-label={`${label}, character ${index + 1} of ${length}`}
+                aria-invalid={status === "error" || undefined}
+                disabled={isDisabled}
+                autoFocus={hasAutoFocus && index === 0}
+              />
+            </div>
+          );
+        })}
+      </div>
+      {description ? (
+        <span id={`${id}-description`} className="os-code-description">
+          {description}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/Container.tsx

@@ -0,0 +1,20 @@
+/**
+ * Containers are original Astryx — Joined only themes them. Card itself
+ * lives in ./Primitives; JobCard composes these for the Joined room card.
+ */
+export { ClickableCard } from "@astryxdesign/core/ClickableCard";
+export type { ClickableCardProps } from "@astryxdesign/core/ClickableCard";
+
+export { SelectableCard } from "@astryxdesign/core/SelectableCard";
+export type { SelectableCardProps } from "@astryxdesign/core/SelectableCard";
+
+export { Carousel } from "@astryxdesign/core/Carousel";
+export type { CarouselProps, CarouselHandle } from "@astryxdesign/core/Carousel";
+
+export { Collapsible, CollapsibleGroup, useCollapsible } from "@astryxdesign/core/Collapsible";
+export type {
+  CollapsibleProps,
+  CollapsibleGroupProps,
+  CollapsibleChevronPosition,
+  CollapsibleGroupDensity,
+} from "@astryxdesign/core/Collapsible";

package/src/components/Content.tsx

@@ -0,0 +1,50 @@
+/**
+ * Content components are original Astryx — Joined only themes them.
+ * Text, Heading, and Icon live in ./Primitives; import everything from
+ * sid-ui so apps never reach into Astryx directly.
+ */
+export { Avatar, AvatarStatusDot } from "@astryxdesign/core/Avatar";
+export type {
+  AvatarProps,
+  AvatarSize,
+  AvatarShape,
+  AvatarStatusDotProps,
+  AvatarStatusDotVariant,
+} from "@astryxdesign/core/Avatar";
+
+export { AvatarGroup, AvatarGroupOverflow } from "@astryxdesign/core/AvatarGroup";
+export type { AvatarGroupProps, AvatarGroupOverflowProps } from "@astryxdesign/core/AvatarGroup";
+
+export { Blockquote } from "@astryxdesign/core/Blockquote";
+export type { BlockquoteProps } from "@astryxdesign/core/Blockquote";
+
+export { Citation } from "@astryxdesign/core/Citation";
+export type { CitationProps, CitationSource } from "@astryxdesign/core/Citation";
+
+export { Code } from "@astryxdesign/core/Code";
+export type { CodeProps, CodeColor, CodeSize } from "@astryxdesign/core/Code";
+
+export { CodeBlock } from "@astryxdesign/core/CodeBlock";
+export type { CodeBlockProps } from "@astryxdesign/core/CodeBlock";
+
+export { EmptyState } from "@astryxdesign/core/EmptyState";
+export type { EmptyStateProps } from "@astryxdesign/core/EmptyState";
+
+export { Kbd } from "@astryxdesign/core/Kbd";
+export type { KbdProps } from "@astryxdesign/core/Kbd";
+
+export { Markdown } from "@astryxdesign/core/Markdown";
+export type { MarkdownProps, MarkdownSource } from "@astryxdesign/core/Markdown";
+
+export { Thumbnail } from "@astryxdesign/core/Thumbnail";
+export type { ThumbnailProps } from "@astryxdesign/core/Thumbnail";
+
+export { Timestamp } from "@astryxdesign/core/Timestamp";
+export type {
+  TimestampProps,
+  TimestampFormat,
+  TimestampTooltipEntry,
+} from "@astryxdesign/core/Timestamp";
+
+export { Token } from "@astryxdesign/core/Token";
+export type { TokenProps, TokenColor, TokenSize } from "@astryxdesign/core/Token";

package/src/components/Data.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Tree, type TreeNode } from "./Tree";
+
+import type { ReactNode } from "react";
+
+/** The two-level shorthand for Tree — every branch starts open. */
+export function TreeList({
+  items,
+}: {
+  items: { label: string; children?: { label: string }[] }[];
+}) {
+  const nodes: TreeNode[] = items.map((item) => ({
+    id: item.label,
+    label: item.label,
+    children: item.children?.map((child) => ({
+      id: `${item.label}/${child.label}`,
+      label: child.label,
+    })),
+  }));
+  return <Tree nodes={nodes} variant="guides" defaultExpanded={nodes.map((node) => node.id)} />;
+}
+
+export function PageBody({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={className ? `os-page-body ${className}` : "os-page-body"}>{children}</div>;
+}
+
+export function PageHero({ children }: { children: ReactNode }) {
+  return <div className="os-page-hero">{children}</div>;
+}
+
+export function Preview({ label, children }: { label?: string; children: ReactNode }) {
+  return (
+    <div className="os-preview">
+      <div className="os-preview-stage">{children}</div>
+      {label && <p className="caption os-preview-label">{label}</p>}
+    </div>
+  );
+}
+
+export function PreviewGrid({ children }: { children: ReactNode }) {
+  return <div className="os-preview-grid">{children}</div>;
+}

package/src/components/DataInput.tsx

@@ -0,0 +1,107 @@
+/**
+ * Data input controls are original Astryx — Joined only themes them.
+ * Joined's own pickers (Calendar, DateField, TimeInput, Clock) and Rating
+ * live beside these; import everything from sid-ui.
+ */
+export { Field, FieldLabel, FieldStatus } from "@astryxdesign/core/Field";
+export type {
+  FieldProps,
+  FieldLabelProps,
+  FieldStatusProps,
+  FieldStatusVariant,
+  InputStatus,
+  InputStatusType,
+} from "@astryxdesign/core/Field";
+
+export { TextInput } from "@astryxdesign/core/TextInput";
+export type { TextInputProps, TextInputType, TextInputSize } from "@astryxdesign/core/TextInput";
+
+export { TextArea } from "@astryxdesign/core/TextArea";
+export type { TextAreaProps, TextAreaSize } from "@astryxdesign/core/TextArea";
+
+export { NumberInput } from "@astryxdesign/core/NumberInput";
+export type { NumberInputProps, NumberInputSize } from "@astryxdesign/core/NumberInput";
+
+export { InputGroup, InputGroupText } from "@astryxdesign/core/InputGroup";
+export type {
+  InputGroupProps,
+  InputGroupSize,
+  InputGroupTextProps,
+} from "@astryxdesign/core/InputGroup";
+
+export { CheckboxInput } from "@astryxdesign/core/CheckboxInput";
+export type { CheckboxInputProps, CheckboxInputSize } from "@astryxdesign/core/CheckboxInput";
+
+export { CheckboxList, CheckboxListItem } from "@astryxdesign/core/CheckboxList";
+export type { CheckboxListProps, CheckboxListItemProps } from "@astryxdesign/core/CheckboxList";
+
+export { RadioList, RadioListItem } from "@astryxdesign/core/RadioList";
+export type {
+  RadioListProps,
+  RadioListItemProps,
+  RadioListSize,
+} from "@astryxdesign/core/RadioList";
+
+export { Switch } from "@astryxdesign/core/Switch";
+export type {
+  SwitchProps,
+  SwitchLabelPosition,
+  SwitchLabelSpacing,
+} from "@astryxdesign/core/Switch";
+
+export { Slider } from "@astryxdesign/core/Slider";
+export type { SliderProps, SliderSingleProps, SliderRangeProps } from "@astryxdesign/core/Slider";
+
+export { Selector } from "@astryxdesign/core/Selector";
+export type {
+  SelectorProps,
+  SelectorSize,
+  SelectorOptionData,
+  SelectorSection,
+  SelectorDivider,
+} from "@astryxdesign/core/Selector";
+
+export { MultiSelector } from "@astryxdesign/core/MultiSelector";
+export type {
+  MultiSelectorProps,
+  MultiSelectorSize,
+  MultiSelectorOptionData,
+  MultiSelectorSection,
+} from "@astryxdesign/core/MultiSelector";
+
+export { DateInput } from "@astryxdesign/core/DateInput";
+export type { DateInputProps, DateInputSize, DateInputFormat } from "@astryxdesign/core/DateInput";
+export type { ISODateString, DayOfWeekName } from "@astryxdesign/core/Calendar";
+
+export { DateRangeInput } from "@astryxdesign/core/DateRangeInput";
+export type {
+  DateRangeInputProps,
+  DateRangePreset,
+  DateRange as DateRangeValue,
+} from "@astryxdesign/core/DateRangeInput";
+
+export { DateTimeInput } from "@astryxdesign/core/DateTimeInput";
+export type {
+  DateTimeInputProps,
+  DateTimeInputHourFormat,
+  ISODateTimeString,
+} from "@astryxdesign/core/DateTimeInput";
+
+export { FileInput } from "@astryxdesign/core/FileInput";
+export type { FileInputProps } from "@astryxdesign/core/FileInput";
+
+export { Typeahead, TypeaheadItem, createStaticSource } from "@astryxdesign/core/Typeahead";
+export type {
+  TypeaheadProps,
+  TypeaheadItemProps,
+  SearchableItem,
+  SearchSource,
+} from "@astryxdesign/core/Typeahead";
+
+export { Tokenizer } from "@astryxdesign/core/Tokenizer";
+export type {
+  TokenizerProps,
+  TokenizerSize,
+  TokenizerChange,
+  TokenizerOverflowBehavior,
+} from "@astryxdesign/core/Tokenizer";