@sixthshift/design-system 0.1.0

package/src/components/Code/Workspace/Toolbar.tsx

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { Button } from "../../Button";
+
+export type Action = {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+  variant?: "solid" | "outline" | "ghost" | "link";
+};
+
+export type ToolbarProps = HTMLAttributes<HTMLDivElement> & {
+  actions?: Action[] | undefined;
+  primaryAction?: Action | undefined;
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+};
+
+/**
+ * Toolbar component for code editor with actions and custom content areas
+ */
+export const Toolbar = ({ actions = [], primaryAction, leftContent, rightContent, className, ...props }: ToolbarProps) => {
+  return (
+    <div {...props} className={`flex items-center justify-between border-border-normal border-b bg-bg-normal px-4 py-2 ${className ?? ""}`}>
+      {/* Left content */}
+      <div className="flex items-center gap-2">{leftContent}</div>
+
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        {actions.map((action) => (
+          <Button key={action.id} variant={action.variant || "ghost"} size="sm" onClick={action.onClick} disabled={action.disabled}>
+            {action.icon && <span className="mr-1">{action.icon}</span>}
+            {action.label}
+          </Button>
+        ))}
+        {primaryAction && (
+          <Button variant={primaryAction.variant || "solid"} size="sm" onClick={primaryAction.onClick} disabled={primaryAction.disabled}>
+            {primaryAction.icon && <span className="mr-1">{primaryAction.icon}</span>}
+            {primaryAction.label}
+          </Button>
+        )}
+        {rightContent}
+      </div>
+    </div>
+  );
+};

package/src/components/Code/Workspace/Workspace.tsx

@@ -0,0 +1,109 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { useState } from "react";
+import { Editor } from "../Editor";
+import type { ValidationError } from "../ValidationStatus";
+import { ValidationStatus } from "../ValidationStatus";
+import type { StatusBarItem } from "./StatusBar";
+import { StatusBar } from "./StatusBar";
+import type { Action } from "./Toolbar";
+import { Toolbar } from "./Toolbar";
+
+export type WorkspaceProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  // Core editor props
+  value: string;
+  onChange: (value: string) => void;
+  readOnly?: boolean;
+  typeDefinitions?: string;
+  compilerOptions?: Record<string, unknown>;
+
+  // Toolbar
+  toolbar?: {
+    actions?: Action[];
+    primaryAction?: Action;
+    leftContent?: ReactNode;
+    rightContent?: ReactNode;
+  };
+
+  // Validation
+  onValidate?: (errors: ValidationError[]) => void;
+
+  // Status bar
+  statusBar?: {
+    items?: StatusBarItem[];
+    leftContent?: ReactNode;
+    rightContent?: ReactNode;
+  };
+};
+
+/**
+ * Comprehensive code editor workspace with toolbar, validation, and status bar
+ *
+ * Features:
+ * - Full Monaco editor with IntelliSense
+ * - Optional toolbar with actions
+ * - Built-in validation display
+ * - Status bar with metadata
+ *
+ * @example
+ * ```tsx
+ * <Workspace
+ *   value={code}
+ *   onChange={setCode}
+ *   toolbar={{
+ *     actions: [{ id: "format", label: "Format", onClick: format }],
+ *     primaryAction: { id: "save", label: "Save", onClick: save }
+ *   }}
+ * />
+ * ```
+ */
+export const Workspace = ({
+  value,
+  onChange,
+  readOnly = false,
+  typeDefinitions,
+  compilerOptions,
+  toolbar,
+  onValidate,
+  statusBar,
+  className,
+  ...props
+}: WorkspaceProps) => {
+  const [validationErrors, setValidationErrors] = useState<ValidationError[]>([]);
+
+  const handleValidate = (errors: ValidationError[]) => {
+    setValidationErrors(errors);
+    onValidate?.(errors);
+  };
+
+  return (
+    <div {...props} className={`flex flex-col overflow-hidden rounded-lg border border-border-normal bg-bg-normal ${className ?? ""}`}>
+      {/* Toolbar */}
+      {toolbar && (
+        <Toolbar actions={toolbar.actions} primaryAction={toolbar.primaryAction} leftContent={toolbar.leftContent} rightContent={toolbar.rightContent} />
+      )}
+
+      {/* Editor and validation */}
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <Editor
+          value={value}
+          onChange={onChange}
+          onValidate={handleValidate}
+          readOnly={readOnly}
+          typeDefinitions={typeDefinitions}
+          compilerOptions={compilerOptions}
+          className="flex-1"
+        />
+
+        {/* Validation panel */}
+        {validationErrors.length > 0 && (
+          <div className="border-border-normal border-t bg-bg-normal p-4">
+            <ValidationStatus errors={validationErrors} />
+          </div>
+        )}
+      </div>
+
+      {/* Status bar */}
+      <StatusBar items={statusBar?.items} leftContent={statusBar?.leftContent} rightContent={statusBar?.rightContent} />
+    </div>
+  );
+};

package/src/components/Code/Workspace/index.ts

@@ -0,0 +1,3 @@
+export { StatusBar, type StatusBarItem, type StatusBarProps } from "./StatusBar";
+export { type Action, Toolbar, type ToolbarProps } from "./Toolbar";
+export { Workspace, type WorkspaceProps } from "./Workspace";

package/src/components/ColorDot/ColorDot.tsx

@@ -0,0 +1,50 @@
+import { cn } from "@sixthshift/design-system/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "react";
+
+const INTENT_CLASSES: Record<string, string> = {
+  neutral: "bg-fg-subtle",
+  brand: "bg-bg-brand",
+  primary: "bg-bg-brand",
+  success: "bg-bg-success",
+  warning: "bg-bg-warning",
+  danger: "bg-bg-danger",
+};
+
+const colorDotVariants = cva("inline-block shrink-0 rounded-full", {
+  variants: {
+    size: {
+      sm: "h-1.5 w-1.5",
+      md: "h-2 w-2",
+      lg: "h-2.5 w-2.5",
+    },
+    pulse: {
+      true: "animate-pulse",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    pulse: false,
+  },
+});
+
+export type ColorDotProps = HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof colorDotVariants> & {
+    /** Intent name (neutral, brand, success, warning, danger) or arbitrary CSS color */
+    color: string;
+  };
+
+export const ColorDot = ({ color, size, pulse, className, style, ...props }: ColorDotProps) => {
+  const intentClass = INTENT_CLASSES[color];
+
+  return (
+    <span
+      className={cn(colorDotVariants({ size, pulse }), intentClass, className)}
+      style={intentClass ? style : { ...style, backgroundColor: color }}
+      {...props}
+    />
+  );
+};
+
+export { colorDotVariants };

package/src/components/ColorDot/index.ts

@@ -0,0 +1 @@
+export { ColorDot, type ColorDotProps, colorDotVariants } from "./ColorDot";

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,236 @@
+import { autoUpdate, FloatingPortal, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { cn } from "@sixthshift/design-system/utils";
+import { Calendar as CalendarIcon, X } from "lucide-react";
+import type * as React from "react";
+import { useCallback, useId, useState } from "react";
+import { isPlainDate, type Temporal, today } from "../../date-time";
+import { Calendar } from "../Calendar";
+import { defaultFormatDisplay, getDisplayValue, temporalToISO } from "./datepicker.hooks";
+import type { DatePickerProps, DateRangeValue } from "./datepicker.types";
+
+export type { DatePickerProps };
+
+export const DatePicker = (props: DatePickerProps) => {
+  const {
+    mode = "single",
+    weekStartsOn = 0,
+    minDate,
+    maxDate,
+    disabled,
+    presets,
+    placeholder = "Select date",
+    isDisabled = false,
+    isInvalid = false,
+    name,
+    className,
+    align = "end",
+    clearable = true,
+  } = props;
+
+  // Get mode-specific props
+  const value = "value" in props ? props.value : undefined;
+  const defaultValue = "defaultValue" in props ? props.defaultValue : undefined;
+  const onChange = "onChange" in props ? props.onChange : undefined;
+  const max = mode === "multiple" && "max" in props ? props.max : undefined;
+
+  // Open state
+  const [open, setOpen] = useState(false);
+
+  // Controllable value state (external/committed value)
+  const [committedValue, setCommittedValue] = useControllableState({
+    value: value as Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[] | undefined,
+    defaultValue: defaultValue as Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[] | undefined,
+    onChange: onChange as ((value: Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[] | undefined) => void) | undefined,
+  });
+
+  // Draft value (internal state while popup is open)
+  const [draftValue, setDraftValue] = useState<Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[] | undefined>(committedValue);
+
+  // Sync draft when popup opens
+  const handleOpenChange = useCallback(
+    (newOpen: boolean) => {
+      if (newOpen) {
+        setDraftValue(committedValue);
+      }
+      setOpen(newOpen);
+    },
+    [committedValue]
+  );
+
+  // Month navigation state (uses Temporal.PlainDate for calendar grid)
+  const [month, setMonth] = useState<Temporal.PlainDate>(() => {
+    if (mode === "single" && isPlainDate(committedValue)) {
+      return committedValue;
+    }
+    if (mode === "range" && committedValue && typeof committedValue === "object" && "from" in committedValue && committedValue.from) {
+      return committedValue.from;
+    }
+    if (mode === "multiple" && Array.isArray(committedValue) && committedValue.length > 0 && committedValue[0]) {
+      return committedValue[0];
+    }
+    return today();
+  });
+
+  // Apply changes
+  const handleApply = useCallback(() => {
+    setCommittedValue(draftValue as Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[]);
+    setOpen(false);
+  }, [draftValue, setCommittedValue]);
+
+  // Cancel changes
+  const handleCancel = useCallback(() => {
+    setDraftValue(committedValue);
+    setOpen(false);
+  }, [committedValue]);
+
+  // Clear value
+  const handleClear = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (mode === "multiple") {
+        setCommittedValue([] as unknown as Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[]);
+      } else {
+        setCommittedValue(undefined);
+      }
+    },
+    [mode, setCommittedValue]
+  );
+
+  // Floating UI setup
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: handleOpenChange,
+    placement: align === "start" ? "bottom-start" : "bottom-end",
+    middleware: [offset(8), flip(), shift({ padding: 8 })],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
+
+  // IDs for accessibility
+  const id = useId();
+  const contentId = `datepicker-content-${id}`;
+  const inputId = `datepicker-input-${id}`;
+
+  // Display value (from committed value)
+  const displayValue = getDisplayValue(mode, committedValue, defaultFormatDisplay);
+  const hasValue = mode === "multiple" ? Array.isArray(committedValue) && committedValue.length > 0 : Boolean(committedValue);
+
+  // Helper to get ISO string for form submission
+  const getFormValue = (): string | undefined => {
+    if (mode === "single" && isPlainDate(committedValue)) {
+      return temporalToISO(committedValue);
+    }
+    return undefined;
+  };
+
+  const getRangeFormValues = (): {
+    from: string | undefined;
+    to: string | undefined;
+  } => {
+    if (mode === "range" && committedValue) {
+      const range = committedValue as DateRangeValue;
+      return {
+        from: range.from ? temporalToISO(range.from) : undefined,
+        to: range.to ? temporalToISO(range.to) : undefined,
+      };
+    }
+    return { from: undefined, to: undefined };
+  };
+
+  const rangeFormValues = getRangeFormValues();
+
+  return (
+    <>
+      {/* Trigger Input */}
+      <div className={cn("relative flex items-center", mode === "range" && "min-w-91.25", mode !== "range" && "min-w-65")}>
+        <CalendarIcon className="pointer-events-none absolute left-3 h-4 w-4 text-fg-subtle" />
+        <input
+          ref={refs.setReference as React.Ref<HTMLInputElement>}
+          id={inputId}
+          type="text"
+          readOnly
+          value={displayValue}
+          placeholder={placeholder}
+          disabled={isDisabled}
+          role="combobox"
+          aria-invalid={isInvalid}
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          aria-controls={open ? contentId : undefined}
+          className={cn(
+            `flex h-9 w-full cursor-pointer rounded-md border border-border-normal bg-transparent py-1 pl-9 text-sm shadow-xs transition-colors placeholder:text-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50`,
+            mode === "range" && "min-w-91.25",
+            mode !== "range" && "min-w-65",
+            clearable && hasValue ? "pr-9" : "pr-3",
+            isInvalid && "border-border-danger",
+            className
+          )}
+          {...getReferenceProps()}
+        />
+        {clearable && hasValue && !isDisabled && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className="absolute right-3 rounded-sm p-0.5 text-fg-subtle hover:bg-bg-subtle hover:text-fg-normal focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring"
+            aria-label="Clear date"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        )}
+
+        {/* Hidden inputs for form submission */}
+        {name && mode === "single" && committedValue && <input type="hidden" name={name} value={getFormValue()} />}
+        {name && mode === "range" && committedValue && (
+          <>
+            {rangeFormValues.from && <input type="hidden" name={`${name}.from`} value={rangeFormValues.from} />}
+            {rangeFormValues.to && <input type="hidden" name={`${name}.to`} value={rangeFormValues.to} />}
+          </>
+        )}
+        {name &&
+          mode === "multiple" &&
+          Array.isArray(committedValue) &&
+          // biome-ignore lint/suspicious/noArrayIndexKey: Hidden form inputs for stable date array
+          committedValue.map((date, i) => <input key={i} type="hidden" name={`${name}[]`} value={temporalToISO(date)} />)}
+      </div>
+
+      {/* Popover Content */}
+      {open && (
+        <FloatingPortal>
+          <div
+            ref={refs.setFloating}
+            id={contentId}
+            role="dialog"
+            aria-modal="true"
+            style={floatingStyles}
+            className="z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg"
+            {...getFloatingProps()}
+          >
+            {/* @ts-expect-error - TypeScript can't properly narrow discriminated union props across component boundaries */}
+            <Calendar
+              mode={mode}
+              value={draftValue}
+              onSelect={setDraftValue}
+              month={month}
+              onMonthChange={setMonth}
+              minDate={minDate}
+              maxDate={maxDate}
+              disabled={disabled}
+              weekStartsOn={weekStartsOn}
+              presets={presets}
+              showFooter
+              showToday={mode !== "range"}
+              onApply={handleApply}
+              onCancel={handleCancel}
+              {...(mode === "multiple" && max ? { max } : {})}
+            />
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+};