sid-ui 0.0.0-stage → 0.1.1

package/src/components/DateField.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useState } from "react";
+
+import { Button } from "./Action";
+import { Calendar, type CalendarProps } from "./Calendar";
+import { MONTHS_PER_YEAR, daysInMonth, startOfDay } from "./date";
+import { PickerShell } from "./PickerShell";
+import { NumberSegment, SegmentDivider } from "./Segment";
+
+import type { ControlSize } from "./size";
+
+const MIN_YEAR = 1;
+const MAX_YEAR = 9999;
+const LEAP_YEAR = 2024;
+
+export interface DateFieldProps {
+  value: Date | null;
+  onChange?: (value: Date | null) => void;
+  /** Type-only when false. */
+  withCalendar?: boolean;
+  /** Passed to the dropdown calendar — events, disabled days, week start. */
+  calendar?: Pick<
+    CalendarProps,
+    "events" | "min" | "max" | "isDateDisabled" | "weekStartsOn" | "showWeekNumbers"
+  >;
+  size?: ControlSize;
+  disabled?: boolean;
+  error?: boolean;
+  label?: string;
+  labelledBy?: string;
+}
+
+interface Draft {
+  month: number | null;
+  day: number | null;
+  year: number | null;
+}
+
+function draftOf(value: Date | null): Draft {
+  return value
+    ? { month: value.getMonth() + 1, day: value.getDate(), year: value.getFullYear() }
+    : { month: null, day: null, year: null };
+}
+
+/** Type a date as MM / DD / YYYY, or open the calendar and pick it. */
+export function DateField({
+  value,
+  onChange,
+  withCalendar = true,
+  calendar,
+  size = "md",
+  disabled,
+  error,
+  label = "Date",
+  labelledBy,
+}: DateFieldProps) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(() => draftOf(value));
+  const [seen, setSeen] = useState(value?.getTime() ?? null);
+  const stamp = value?.getTime() ?? null;
+  if (seen !== stamp) {
+    setSeen(stamp);
+    setDraft(draftOf(value));
+  }
+
+  function update(patch: Partial<Draft>) {
+    const next = { ...draft, ...patch };
+    setDraft(next);
+    if (next.month == null && next.day == null && next.year == null) return onChange?.(null);
+    if (next.month == null || next.day == null || next.year == null) return;
+    const day = Math.min(next.day, daysInMonth(next.year, next.month - 1));
+    const date = new Date(next.year, next.month - 1, day);
+    date.setFullYear(next.year);
+    onChange?.(date);
+  }
+
+  const dayMax = daysInMonth(draft.year ?? LEAP_YEAR, (draft.month ?? 1) - 1);
+
+  return (
+    <PickerShell
+      open={open}
+      onOpenChange={setOpen}
+      icon="calendar"
+      label={label}
+      labelledBy={labelledBy}
+      size={size}
+      error={error}
+      disabled={disabled}
+      panel={
+        withCalendar ? (
+          <div className="os-picker-body">
+            <Calendar
+              {...calendar}
+              size="sm"
+              value={value}
+              onChange={(date) => {
+                onChange?.(date);
+                setOpen(false);
+              }}
+              footer={
+                <div className="os-picker-footer">
+                  <Button
+                    label="Clear"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onChange?.(null)}
+                  />
+                  <Button
+                    label="Today"
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => {
+                      onChange?.(startOfDay(new Date()));
+                      setOpen(false);
+                    }}
+                  />
+                </div>
+              }
+            />
+          </div>
+        ) : undefined
+      }
+      segments={
+        <>
+          <NumberSegment
+            label="Month"
+            value={draft.month}
+            min={1}
+            max={MONTHS_PER_YEAR}
+            digits={2}
+            placeholder="MM"
+            disabled={disabled}
+            onChange={(month) => update({ month })}
+          />
+          <SegmentDivider>/</SegmentDivider>
+          <NumberSegment
+            label="Day"
+            value={draft.day}
+            min={1}
+            max={dayMax}
+            digits={2}
+            placeholder="DD"
+            disabled={disabled}
+            onChange={(day) => update({ day })}
+          />
+          <SegmentDivider>/</SegmentDivider>
+          <NumberSegment
+            label="Year"
+            value={draft.year}
+            min={MIN_YEAR}
+            max={MAX_YEAR}
+            digits={4}
+            placeholder="YYYY"
+            disabled={disabled}
+            onChange={(year) => update({ year })}
+          />
+        </>
+      }
+    />
+  );
+}

package/src/components/DonutChart.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState } from "react";
+
+import { arcPath, segmentShares } from "./chartMath";
+import { ChartTable, defaultFormat, toneAt, type ChartTone } from "./chartParts";
+
+export type DonutSlice = {
+  label: string;
+  value: number;
+  tone?: ChartTone;
+};
+
+const DEFAULT_SIZE = 168;
+const RING = 0.22;
+/** The 2px surface gap between slices, in px along the outer edge. */
+const GAP_PX = 2;
+
+/**
+ * Part of a whole, for up to five slices. The middle shows the total, or the hovered
+ * slice. The legend carries every name, value, and share, so colour never works alone.
+ */
+export function DonutChart({
+  data,
+  label,
+  centerLabel = "Total",
+  size = DEFAULT_SIZE,
+  formatValue = defaultFormat,
+}: {
+  data: DonutSlice[];
+  /** Accessible name for the chart. */
+  label: string;
+  /** Names the figure in the middle, e.g. "Applications". */
+  centerLabel?: string;
+  size?: number;
+  formatValue?: (value: number) => string;
+}) {
+  const [active, setActive] = useState<number | null>(null);
+  const shares = segmentShares(data.map((slice) => slice.value));
+  const total = data.reduce((sum, slice) => sum + Math.max(0, slice.value), 0);
+  const outer = size / 2;
+  const inner = outer * (1 - RING * 2);
+  const pad = GAP_PX / (2 * Math.PI * outer);
+  const visible = shares.filter((share) => share > 0).length;
+  const toned = data.map((slice, index) => ({ ...slice, tone: toneAt(index, slice.tone) }));
+
+  let start = 0;
+  const arcs = toned.map((slice, index) => {
+    const fraction = shares[index] / 100;
+    const from = start;
+    start += fraction;
+    const gap = visible > 1 ? pad : 0;
+    return {
+      slice,
+      index,
+      d: fraction > 0 ? arcPath(outer, outer, inner, outer, from + gap / 2, start - gap / 2) : "",
+    };
+  });
+
+  const focus = active === null ? null : toned[active];
+
+  return (
+    <div className="os-donut">
+      <div className="os-donut-figure" style={{ width: size, height: size }}>
+        <svg width={size} height={size} aria-hidden>
+          <circle
+            className="os-donut-track"
+            cx={outer}
+            cy={outer}
+            r={(outer + inner) / 2}
+            strokeWidth={outer - inner}
+          />
+          {arcs.map(({ slice, index, d }) =>
+            d ? (
+              <path
+                key={slice.label}
+                d={d}
+                className="os-donut-slice"
+                data-tone={slice.tone}
+                data-dim={active !== null && active !== index ? true : undefined}
+                onPointerEnter={() => setActive(index)}
+                onPointerLeave={() => setActive(null)}
+              />
+            ) : null,
+          )}
+        </svg>
+        <div className="os-donut-center" aria-live="polite">
+          <strong>{formatValue(focus ? focus.value : total)}</strong>
+          <span>
+            {focus ? `${focus.label} · ${Math.round(shares[active ?? 0])}%` : centerLabel}
+          </span>
+        </div>
+      </div>
+      <ul className="os-donut-legend" aria-label={label}>
+        {toned.map((slice, index) => (
+          <li
+            key={slice.label}
+            tabIndex={0}
+            data-active={active === index || undefined}
+            onPointerEnter={() => setActive(index)}
+            onPointerLeave={() => setActive(null)}
+            onFocus={() => setActive(index)}
+            onBlur={() => setActive(null)}
+          >
+            <span className="os-chart-key" data-tone={slice.tone} aria-hidden />
+            <span className="os-donut-name">{slice.label}</span>
+            <strong>{formatValue(slice.value)}</strong>
+            <span className="os-donut-share">{Math.round(shares[index])}%</span>
+          </li>
+        ))}
+      </ul>
+      <ChartTable
+        caption={label}
+        headers={["", "Value", "Share"]}
+        rows={data.map((slice, index) => [
+          slice.label,
+          formatValue(slice.value),
+          `${Math.round(shares[index])}%`,
+        ])}
+      />
+    </div>
+  );
+}

package/src/components/Drawer.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { Layout, LayoutContent, LayoutFooter } from "./LayoutPrimitives";
+import { Dialog, DialogHeader, type DialogPurpose } from "./Overlay";
+
+import type { CSSProperties, ReactNode } from "react";
+
+export type DrawerSide = "start" | "end" | "top" | "bottom";
+export type DrawerSize = "sm" | "md" | "lg" | "full";
+
+/** Panel length along the drawer's axis: width for start/end, height for top/bottom. */
+const LENGTH: Record<Exclude<DrawerSize, "full">, number> = { sm: 360, md: 480, lg: 720 };
+const FULL = "100%";
+
+/** Flush to the viewport. A radius leaves a crescent of the scrim in each corner. */
+const FLUSH = { borderRadius: 0, "--_dialog-radius": "0px" } as CSSProperties;
+
+export interface DrawerProps {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+  /** Sticky actions at the bottom — Save, Cancel, Next. */
+  footer?: ReactNode;
+  /** Actions beside the title, before the close button. */
+  headerActions?: ReactNode;
+  /** Leading content in the header — an avatar or icon. */
+  headerStart?: ReactNode;
+  /** Which edge the drawer slides from. Logical start/end mirror under RTL. */
+  side?: DrawerSide;
+  /** sm 360, md 480, lg 720, full — or any px/CSS length. */
+  size?: number | string;
+  /**
+   * form keeps focus inside and guards against losing input; info closes on
+   * outside click; required must be answered.
+   */
+  purpose?: DialogPurpose;
+  /** Renders in place instead of on the top layer — for docs and embedded previews. */
+  isInline?: boolean;
+}
+
+function lengthOf(size: DrawerProps["size"]) {
+  if (size === undefined) return LENGTH.md;
+  if (size === "full") return FULL;
+  if (typeof size === "string" && size in LENGTH) return LENGTH[size as keyof typeof LENGTH];
+  return size;
+}
+
+/**
+ * A panel that slides in from an edge for detail, editing, or filters while the
+ * page stays in context. Built on Astryx Dialog, so focus, Escape, and the
+ * scrim behave like every other overlay.
+ */
+export function Drawer({
+  isOpen,
+  onOpenChange,
+  title,
+  subtitle,
+  children,
+  footer,
+  headerActions,
+  headerStart,
+  side = "end",
+  size = "md",
+  purpose = "info",
+  isInline,
+}: DrawerProps) {
+  const horizontal = side === "start" || side === "end";
+  const length = lengthOf(size);
+  const position = {
+    start: { start: 0, top: 0, bottom: 0 },
+    end: { end: 0, top: 0, bottom: 0 },
+    top: { top: 0, start: 0, end: 0 },
+    bottom: { bottom: 0, start: 0, end: 0 },
+  }[side];
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      isInline={isInline}
+      purpose={purpose}
+      position={position}
+      width={horizontal ? length : FULL}
+      maxHeight={horizontal ? FULL : length}
+      style={
+        horizontal
+          ? { height: FULL, maxWidth: FULL, ...FLUSH }
+          : { height: length, width: FULL, maxWidth: FULL, ...FLUSH }
+      }
+    >
+      <Layout
+        height="fill"
+        header={
+          <DialogHeader
+            title={title}
+            subtitle={subtitle}
+            startContent={headerStart}
+            endContent={headerActions}
+            onOpenChange={onOpenChange}
+            hasDivider
+          />
+        }
+        content={<LayoutContent>{children}</LayoutContent>}
+        footer={footer ? <LayoutFooter hasDivider>{footer}</LayoutFooter> : undefined}
+      />
+    </Dialog>
+  );
+}

package/src/components/Feedback.tsx

@@ -0,0 +1,37 @@
+/**
+ * Feedback and status components are original Astryx — Joined only themes
+ * them. JoinedProvider mounts the ToastViewport, so useToast works anywhere.
+ */
+export { Badge } from "@astryxdesign/core/Badge";
+export type { BadgeProps, BadgeVariant } from "@astryxdesign/core/Badge";
+
+export { Banner } from "@astryxdesign/core/Banner";
+export type { BannerProps, BannerStatus, BannerContainer } from "@astryxdesign/core/Banner";
+
+export { ProgressBar } from "@astryxdesign/core/ProgressBar";
+export type {
+  ProgressBarProps,
+  ProgressBarMark,
+  ProgressBarVariant,
+} from "@astryxdesign/core/ProgressBar";
+
+export { Skeleton } from "@astryxdesign/core/Skeleton";
+export type { SkeletonProps, SkeletonRadius } from "@astryxdesign/core/Skeleton";
+
+export { Spinner } from "@astryxdesign/core/Spinner";
+export type { SpinnerProps, SpinnerSize, SpinnerShade } from "@astryxdesign/core/Spinner";
+
+export { StatusDot } from "@astryxdesign/core/StatusDot";
+export type { StatusDotProps, StatusDotVariant } from "@astryxdesign/core/StatusDot";
+
+export { Toast, ToastViewport, useToast } from "@astryxdesign/core/Toast";
+export type {
+  ToastProps,
+  ToastViewportProps,
+  ToastOptions,
+  ToastType,
+  ToastPosition,
+  ToastDismissFn,
+  ToastDismissReason,
+  ShowToastFn,
+} from "@astryxdesign/core/Toast";