rastack 0.0.26 → 0.0.27

package/components/primitives/controls.tsx

@@ -0,0 +1,291 @@
+import React, { useState } from "react";
+import {
+  tokens,
+  mergeStyles,
+  controlBaseStyle,
+  controlSizing,
+  focusRingStyle,
+  invalidControlStyle,
+  buttonVariantStyle,
+  type ButtonVariant,
+  type ControlSize,
+} from "../style";
+import { Spinner } from "./misc";
+
+/** Track focus so a control can apply the shared token focus ring on the web. */
+function useFocusRing<
+  E extends { onFocus?: unknown; onBlur?: unknown },
+>(handlers: {
+  onFocus?: React.FocusEventHandler<never>;
+  onBlur?: React.FocusEventHandler<never>;
+}): {
+  focused: boolean;
+  onFocus: React.FocusEventHandler<never>;
+  onBlur: React.FocusEventHandler<never>;
+} {
+  const [focused, setFocused] = useState(false);
+  return {
+    focused,
+    onFocus: (e) => {
+      setFocused(true);
+      handlers.onFocus?.(e);
+    },
+    onBlur: (e) => {
+      setFocused(false);
+      handlers.onBlur?.(e);
+    },
+  };
+}
+
+// --- Button -------------------------------------------------------------------
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ControlSize;
+  /** Show a spinner and block interaction. */
+  loading?: boolean;
+  /** Stretch to the container width. */
+  block?: boolean;
+}
+
+/** A token-styled button with five variants and three sizes. */
+export function Button({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  block = false,
+  disabled = false,
+  style,
+  children,
+  ...rest
+}: ButtonProps): React.JSX.Element {
+  const s = controlSizing[size];
+  const isDisabled = disabled || loading;
+  const base: React.CSSProperties = {
+    display: block ? "flex" : "inline-flex",
+    width: block ? "100%" : undefined,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: tokens.space.sm,
+    padding: `${s.paddingY} ${s.paddingX}`,
+    minHeight: s.height,
+    fontFamily: tokens.font.sans,
+    fontSize: s.fontSize,
+    fontWeight: tokens.font.weightMedium as unknown as number,
+    lineHeight: 1,
+    borderRadius: tokens.radius.md,
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? 0.6 : 1,
+    transition: `background ${tokens.duration.fast} ease, opacity ${tokens.duration.fast} ease`,
+    ...buttonVariantStyle[variant],
+  };
+  return (
+    <button
+      type="button"
+      style={mergeStyles(base, style)}
+      disabled={isDisabled}
+      {...rest}
+    >
+      {loading ? (
+        <Spinner
+          size={Math.round(parseFloat(s.fontSize) * 14)}
+          color="currentColor"
+        />
+      ) : null}
+      {children}
+    </button>
+  );
+}
+
+// --- Input --------------------------------------------------------------------
+
+export interface InputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> {
+  size?: ControlSize;
+  /** Paint the invalid (danger) border. */
+  invalid?: boolean;
+}
+
+/** A token-styled text input (also `type="number"`, `email`, `date`, …). */
+export function Input({
+  size = "md",
+  invalid = false,
+  style,
+  onFocus,
+  onBlur,
+  ...rest
+}: InputProps): React.JSX.Element {
+  const ring = useFocusRing({ onFocus, onBlur });
+  const base: React.CSSProperties = {
+    ...controlBaseStyle(size),
+    ...(invalid ? invalidControlStyle : null),
+    ...(ring.focused ? focusRingStyle : null),
+  };
+  return (
+    <input
+      style={mergeStyles(base, style)}
+      onFocus={ring.onFocus}
+      onBlur={ring.onBlur}
+      {...rest}
+    />
+  );
+}
+
+// --- Textarea -----------------------------------------------------------------
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  size?: ControlSize;
+  invalid?: boolean;
+}
+
+/** A token-styled multi-line text input. */
+export function Textarea({
+  size = "md",
+  invalid = false,
+  style,
+  onFocus,
+  onBlur,
+  rows = 3,
+  ...rest
+}: TextareaProps): React.JSX.Element {
+  const ring = useFocusRing({ onFocus, onBlur });
+  const base: React.CSSProperties = {
+    ...controlBaseStyle(size),
+    ...(invalid ? invalidControlStyle : null),
+    ...(ring.focused ? focusRingStyle : null),
+    resize: "vertical",
+    minHeight: "auto",
+    height: "auto",
+  };
+  return (
+    <textarea
+      rows={rows}
+      style={mergeStyles(base, style)}
+      onFocus={ring.onFocus}
+      onBlur={ring.onBlur}
+      {...rest}
+    />
+  );
+}
+
+// --- Select -------------------------------------------------------------------
+
+export interface SelectOption {
+  label: string;
+  value: string | number;
+}
+
+export interface SelectProps extends Omit<
+  React.SelectHTMLAttributes<HTMLSelectElement>,
+  "size"
+> {
+  size?: ControlSize;
+  invalid?: boolean;
+  /** Options to render. Omit and pass `<option>` children for full control. */
+  options?: SelectOption[];
+  /** A leading, empty, disabled option — the "choose…" affordance. */
+  placeholder?: string;
+}
+
+/** A token-styled native `<select>`. */
+export function Select({
+  size = "md",
+  invalid = false,
+  options,
+  placeholder,
+  style,
+  onFocus,
+  onBlur,
+  children,
+  ...rest
+}: SelectProps): React.JSX.Element {
+  const ring = useFocusRing({ onFocus, onBlur });
+  const base: React.CSSProperties = {
+    ...controlBaseStyle(size),
+    ...(invalid ? invalidControlStyle : null),
+    ...(ring.focused ? focusRingStyle : null),
+    appearance: "none",
+    cursor: "pointer",
+    // room for the chevron
+    paddingRight: tokens.space.xl,
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E\")",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: `right ${tokens.space.sm} center`,
+  };
+  return (
+    <select
+      style={mergeStyles(base, style)}
+      onFocus={ring.onFocus}
+      onBlur={ring.onBlur}
+      {...rest}
+    >
+      {placeholder !== undefined ? (
+        <option value="" disabled>
+          {placeholder}
+        </option>
+      ) : null}
+      {options
+        ? options.map((o) => (
+            <option key={String(o.value)} value={o.value}>
+              {o.label}
+            </option>
+          ))
+        : children}
+    </select>
+  );
+}
+
+// --- Checkbox -----------------------------------------------------------------
+
+export interface CheckboxProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "type"
+> {
+  /** An inline label rendered to the right of the box. */
+  label?: React.ReactNode;
+}
+
+/** A token-styled checkbox (accent colour follows the theme). */
+export function Checkbox({
+  label,
+  style,
+  disabled,
+  ...rest
+}: CheckboxProps): React.JSX.Element {
+  const box = (
+    <input
+      type="checkbox"
+      disabled={disabled}
+      style={mergeStyles(
+        {
+          width: "1rem",
+          height: "1rem",
+          accentColor: tokens.color.accent,
+          cursor: disabled ? "not-allowed" : "pointer",
+        },
+        style,
+      )}
+      {...rest}
+    />
+  );
+  if (label === undefined) return box;
+  return (
+    <label
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: tokens.space.sm,
+        fontFamily: tokens.font.sans,
+        fontSize: "0.875rem",
+        color: tokens.color.text,
+        cursor: disabled ? "not-allowed" : "pointer",
+      }}
+    >
+      {box}
+      {label}
+    </label>
+  );
+}

package/components/primitives/field.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { tokens, mergeStyles } from "../style";
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  /** Append a danger-coloured `*`. */
+  required?: boolean;
+}
+
+/** A token-styled form label. */
+export function Label({
+  required = false,
+  style,
+  children,
+  ...rest
+}: LabelProps): React.JSX.Element {
+  const base: React.CSSProperties = {
+    display: "inline-block",
+    fontFamily: tokens.font.sans,
+    fontSize: "0.8125rem",
+    fontWeight: tokens.font.weightMedium as unknown as number,
+    color: tokens.color.text,
+  };
+  return (
+    <label style={mergeStyles(base, style)} {...rest}>
+      {children}
+      {required ? (
+        <span style={{ color: tokens.color.danger, marginLeft: 2 }}>*</span>
+      ) : null}
+    </label>
+  );
+}
+
+/** Muted helper text under a control. */
+export function FieldHint({
+  style,
+  children,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+  const base: React.CSSProperties = {
+    fontFamily: tokens.font.sans,
+    fontSize: "0.75rem",
+    color: tokens.color.textMuted,
+  };
+  return (
+    <div style={mergeStyles(base, style)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+/** A danger-coloured validation message. */
+export function FieldError({
+  style,
+  children,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+  const base: React.CSSProperties = {
+    fontFamily: tokens.font.sans,
+    fontSize: "0.75rem",
+    color: tokens.color.danger,
+  };
+  return (
+    <div role="alert" style={mergeStyles(base, style)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+export interface FieldProps {
+  /** The label text; omit for an unlabelled field. */
+  label?: React.ReactNode;
+  /** Associates the label with the control. */
+  htmlFor?: string;
+  required?: boolean;
+  /** When truthy, shown as a `<FieldError>` (and hides the hint). */
+  error?: string;
+  /** Helper text shown when there is no error. */
+  hint?: React.ReactNode;
+  /** The control itself. */
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+/**
+ * The label + control + message stack used by `<AutoForm>`, also usable on its
+ * own to lay out a hand-built control.
+ */
+export function Field({
+  label,
+  htmlFor,
+  required,
+  error,
+  hint,
+  children,
+  style,
+}: FieldProps): React.JSX.Element {
+  const base: React.CSSProperties = {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.space.xs,
+  };
+  return (
+    <div style={mergeStyles(base, style)}>
+      {label != null ? (
+        <Label htmlFor={htmlFor} required={required}>
+          {label}
+        </Label>
+      ) : null}
+      {children}
+      {error ? (
+        <FieldError>{error}</FieldError>
+      ) : hint ? (
+        <FieldHint>{hint}</FieldHint>
+      ) : null}
+    </div>
+  );
+}

package/components/primitives/index.ts

@@ -0,0 +1,11 @@
+/**
+ * The token-styled building blocks — the "shadcn layer". Every one paints
+ * exclusively from design tokens (see `../style.ts`) and forwards `style` /
+ * `className` / native props, so you can compose or restyle freely. The
+ * data-connected components (`<DataTable>`, `<AutoForm>`) are built on top of
+ * these.
+ */
+export * from "./controls";
+export * from "./field";
+export * from "./table";
+export * from "./misc";

package/components/primitives/misc.tsx

@@ -0,0 +1,173 @@
+import React, { useEffect } from "react";
+import { tokens, mergeStyles } from "../style";
+
+/**
+ * One-time injection of the keyframes the kit needs (only the spinner today).
+ * Guarded so it runs once per document and no-ops under SSR / React Native.
+ */
+let keyframesInjected = false;
+function useKitKeyframes(): void {
+  useEffect(() => {
+    if (keyframesInjected || typeof document === "undefined") return;
+    keyframesInjected = true;
+    const el = document.createElement("style");
+    el.setAttribute("data-rastack-ui", "");
+    el.textContent = "@keyframes rastack-spin{to{transform:rotate(360deg)}}";
+    document.head.appendChild(el);
+  }, []);
+}
+
+export interface SpinnerProps {
+  /** Diameter in px. Default 16. */
+  size?: number;
+  /** Ring colour. Defaults to the accent token. */
+  color?: string;
+  style?: React.CSSProperties;
+  "aria-label"?: string;
+}
+
+/** An indeterminate loading ring, painted from tokens. */
+export function Spinner({
+  size = 16,
+  color,
+  style,
+  ...rest
+}: SpinnerProps): React.JSX.Element {
+  useKitKeyframes();
+  const base: React.CSSProperties = {
+    display: "inline-block",
+    width: size,
+    height: size,
+    border: `2px solid ${tokens.color.border}`,
+    borderTopColor: color ?? tokens.color.accent,
+    borderRadius: "50%",
+    animation: "rastack-spin 0.6s linear infinite",
+    flex: "none",
+  };
+  return (
+    <span
+      role="status"
+      aria-label={rest["aria-label"] ?? "Loading"}
+      style={mergeStyles(base, style)}
+    />
+  );
+}
+
+export type BadgeTone = "neutral" | "accent" | "success" | "danger" | "warning";
+
+const badgeTone: Record<BadgeTone, React.CSSProperties> = {
+  neutral: {
+    background: tokens.color.surfaceAlt,
+    color: tokens.color.textMuted,
+  },
+  accent: { background: tokens.color.accent, color: tokens.color.onAccent },
+  success: { background: tokens.color.success, color: "#ffffff" },
+  danger: { background: tokens.color.danger, color: "#ffffff" },
+  warning: { background: tokens.color.warning, color: "#1a1205" },
+};
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  tone?: BadgeTone;
+}
+
+/** A small status pill. */
+export function Badge({
+  tone = "neutral",
+  style,
+  children,
+  ...rest
+}: BadgeProps): React.JSX.Element {
+  const base: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: tokens.space.xs,
+    padding: `2px ${tokens.space.sm}`,
+    fontFamily: tokens.font.sans,
+    fontSize: "0.75rem",
+    fontWeight: tokens.font.weightMedium as unknown as number,
+    lineHeight: 1.4,
+    borderRadius: tokens.radius.pill,
+    whiteSpace: "nowrap",
+    ...badgeTone[tone],
+  };
+  return (
+    <span style={mergeStyles(base, style)} {...rest}>
+      {children}
+    </span>
+  );
+}
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Drop the default padding (e.g. to hold a flush `<DataTable>`). */
+  flush?: boolean;
+}
+
+/** A surface container: token background, border, radius and shadow. */
+export function Card({
+  flush,
+  style,
+  children,
+  ...rest
+}: CardProps): React.JSX.Element {
+  const base: React.CSSProperties = {
+    background: tokens.color.surface,
+    border: `1px solid ${tokens.color.border}`,
+    borderRadius: tokens.radius.lg,
+    boxShadow: tokens.shadow.sm,
+    padding: flush ? 0 : tokens.space.lg,
+    color: tokens.color.text,
+    overflow: "hidden",
+  };
+  return (
+    <div style={mergeStyles(base, style)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+type SpaceKey = keyof typeof tokens.space;
+
+function resolveGap(
+  gap: SpaceKey | number | string | undefined,
+): string | number | undefined {
+  if (gap == null) return undefined;
+  if (typeof gap === "number") return gap;
+  return (tokens.space as Record<string, string>)[gap] ?? gap;
+}
+
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+  direction?: "row" | "column";
+  /** A `space` token key (`"md"`), a number (px) or any CSS length. */
+  gap?: SpaceKey | number | string;
+  align?: React.CSSProperties["alignItems"];
+  justify?: React.CSSProperties["justifyContent"];
+  wrap?: boolean;
+  inline?: boolean;
+}
+
+/** A flexbox layout primitive with token-aware `gap`. */
+export function Stack({
+  direction = "column",
+  gap = "md",
+  align,
+  justify,
+  wrap,
+  inline,
+  style,
+  children,
+  ...rest
+}: StackProps): React.JSX.Element {
+  const base: React.CSSProperties = {
+    display: inline ? "inline-flex" : "flex",
+    flexDirection: direction,
+    gap: resolveGap(gap),
+    alignItems: align,
+    justifyContent: justify,
+    flexWrap: wrap ? "wrap" : undefined,
+  };
+  return (
+    <div style={mergeStyles(base, style)} {...rest}>
+      {children}
+    </div>
+  );
+}