@sixthshift/design-system 0.1.0

package/src/components/DateTimeRangePicker/datetimerangepicker.types.ts

@@ -0,0 +1,62 @@
+import type { Temporal, WeekStartsOn } from "../../date-time";
+
+export type DisabledDateMatcher =
+  | Temporal.PlainDate
+  | Temporal.PlainDate[]
+  | ((date: Temporal.PlainDate) => boolean)
+  | { before: Temporal.PlainDate }
+  | { after: Temporal.PlainDate }
+  | { from: Temporal.PlainDate; to: Temporal.PlainDate };
+
+export type DateTimeRangeValue = {
+  from: Temporal.Instant | undefined;
+  to: Temporal.Instant | undefined;
+};
+
+export type DateTimeRangePresetOption = {
+  label: string;
+  value: () => DateTimeRangeValue;
+};
+
+export type DateTimeRangePickerProps = {
+  // Value (controlled/uncontrolled) - NOW USES INSTANT
+  value?: DateTimeRangeValue | undefined;
+  defaultValue?: DateTimeRangeValue | undefined;
+  onChange?: (range: DateTimeRangeValue | undefined) => void;
+
+  // Presets
+  presets?: DateTimeRangePresetOption[];
+  showPresets?: boolean; // Default: true
+
+  // Date constraints
+  minDate?: Temporal.PlainDate;
+  maxDate?: Temporal.PlainDate;
+  disabledDates?: DisabledDateMatcher | DisabledDateMatcher[];
+
+  // Time constraints (apply to both start and end times)
+  minTime?: Temporal.PlainTime;
+  maxTime?: Temporal.PlainTime;
+  minuteStep?: 1 | 5 | 10 | 15 | 30;
+
+  // Time format
+  clockFormat?: "12h" | "24h"; // Default: "12h"
+  showSeconds?: boolean; // Default: false
+
+  // Display
+  placeholder?: string;
+  weekStartsOn?: WeekStartsOn;
+
+  // Form
+  name?: string;
+
+  // State
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+
+  // Style
+  className?: string;
+  align?: "start" | "end";
+
+  /** Whether the clear button is shown when a value is present (default: true) */
+  clearable?: boolean;
+};

package/src/components/DateTimeRangePicker/index.ts

@@ -0,0 +1,2 @@
+export { DateTimeRangePicker } from "./DateTimeRangePicker";
+export type { DateTimeRangePickerProps, DateTimeRangePresetOption, DateTimeRangeValue } from "./datetimerangepicker.types";

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,29 @@
+import { Muted } from "@sixthshift/design-system/muted";
+import { cn } from "@sixthshift/design-system/utils";
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type EmptyStateProps = HTMLAttributes<HTMLDivElement> & {
+  /** Optional icon to display */
+  icon?: ReactNode;
+  /** Message to display */
+  message: string;
+  /** Optional description for more context */
+  description?: string;
+  /** Optional action button or element */
+  action?: ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+};
+
+export const EmptyState = ({ icon, message, description, action, className, ...props }: EmptyStateProps) => {
+  return (
+    <div className={cn("flex flex-col items-center justify-center gap-3 p-8 text-center", className)} {...props}>
+      {icon && <div className="text-fg-subtle">{icon}</div>}
+      <div className="flex flex-col gap-1">
+        <Muted>{message}</Muted>
+        {description && <span className="text-fg-subtle text-xs">{description}</span>}
+      </div>
+      {action && <div className="mt-2">{action}</div>}
+    </div>
+  );
+};

package/src/components/EmptyState/index.ts

@@ -0,0 +1 @@
+export { EmptyState, type EmptyStateProps } from "./EmptyState";

package/src/components/Field/Field.tsx

@@ -0,0 +1,60 @@
+import { cn } from "@sixthshift/design-system/utils";
+import type { ReactNode } from "react";
+
+/**
+ * The labelled identifier carve-out used by identity-disclosure surfaces
+ * (Person Detail's Identifiers card, Calendar Event's per-source provenance).
+ *
+ * Field exists because identifiers (JIDs, external IDs, OAuth subs) are
+ * *content* on these surfaces — they answer "what does PA know about this
+ * contact?" The default value rendering is monospaced with `break-all`
+ * because a raw JID is the canonical case and it must wrap inside the row.
+ *
+ * Sibling primitive — not a replacement: `MetricRow` (in `@sixthshift/design-system/metric-list`)
+ * carries runtime metrics ("CPU: 12.5%"). Both are label/value pairs but the
+ * value semantics differ: a metric is a short readable number; an identifier
+ * is a long opaque string. Forcing `MetricRow` to do both would conflate the
+ * two and break Identifiers-card wrapping.
+ *
+ * See: docs/engineering/explanation/concepts/identity-rendering.md
+ */
+export type FieldProps = {
+  /** The humane label for what the identifier identifies ("WhatsApp", "Email"). */
+  label: string;
+  /** The identifier itself. Rendered monospaced + breakable by default. */
+  children: ReactNode;
+  /**
+   * `stacked` (default): label above, value below — best for long identifiers
+   * that need horizontal room to wrap.
+   * `row`: label and value on one line with the value right-aligned and
+   * wrapping — best for short identifiers (phone, short ID).
+   */
+  layout?: "stacked" | "row";
+  /**
+   * Set `false` to render the value in proportional text — e.g. when the
+   * value is itself a human-readable name (rare on identity-disclosure
+   * surfaces, but valid).
+   */
+  mono?: boolean;
+  className?: string;
+};
+
+export const Field = ({ label, children, layout = "stacked", mono = true, className }: FieldProps) => {
+  const valueClass = cn("text-fg-subtle text-xs", mono && "break-all font-mono");
+
+  if (layout === "row") {
+    return (
+      <div className={cn("flex items-baseline justify-between gap-3", className)}>
+        <span className="shrink-0 text-fg-subtle text-sm">{label}</span>
+        <span className={cn(valueClass, "min-w-0 text-right")}>{children}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-1", className)}>
+      <span className="text-fg-subtle text-xs uppercase tracking-wide">{label}</span>
+      <span className={valueClass}>{children}</span>
+    </div>
+  );
+};

package/src/components/Field/index.ts

@@ -0,0 +1 @@
+export { Field, type FieldProps } from "./Field";

package/src/components/FormField/FormField.tsx

@@ -0,0 +1,55 @@
+import { Label } from "@sixthshift/design-system/label";
+import { Message } from "@sixthshift/design-system/message";
+import { Muted } from "@sixthshift/design-system/muted";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type FormFieldFeedback = {
+  message: string;
+  intent: "danger" | "success" | "warning";
+};
+
+export type FormFieldProps = React.HTMLAttributes<HTMLDivElement> & {
+  label: string;
+  description?: string;
+  feedback?: FormFieldFeedback;
+  required?: boolean;
+};
+
+const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(({ className, label, description, feedback, required, children, id, ...props }, ref) => {
+  const generatedId = React.useId();
+  const fieldId = id ?? generatedId;
+  const descriptionId = description ? `${fieldId}-description` : undefined;
+  const feedbackId = feedback ? `${fieldId}-feedback` : undefined;
+
+  return (
+    <div ref={ref} className={cn("flex flex-col gap-1.5", className)} {...props}>
+      <Label htmlFor={fieldId}>
+        {label}
+        {required && <span className="ml-0.5 text-fg-danger">*</span>}
+      </Label>
+
+      {description && <Muted id={descriptionId}>{description}</Muted>}
+
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, {
+            id: fieldId,
+            "aria-describedby": cn(descriptionId, feedbackId) || undefined,
+            "aria-invalid": feedback?.intent === "danger" ? true : undefined,
+          } as React.HTMLAttributes<HTMLElement>);
+        }
+        return child;
+      })}
+
+      {feedback && (
+        <Message id={feedbackId} intent={feedback.intent} size="sm">
+          {feedback.message}
+        </Message>
+      )}
+    </div>
+  );
+});
+FormField.displayName = "FormField";
+
+export { FormField };

package/src/components/FormField/index.ts

@@ -0,0 +1,2 @@
+export type { FormFieldFeedback, FormFieldProps } from "./FormField";
+export { FormField } from "./FormField";

package/src/components/HeatMap/HeatMapCalendar.tsx

@@ -0,0 +1,127 @@
+import { cn } from "@sixthshift/design-system/utils";
+import type * as React from "react";
+import { Temporal } from "../../date-time";
+import { DAY_KEYS, DAY_LABELS, DEFAULT_COLOR_SCALE, getIntensity, type HeatMapCell, MONTH_NAMES } from "./heat-map.utils";
+
+export type HeatMapCalendarProps = React.HTMLAttributes<HTMLDivElement> & {
+  data: HeatMapCell[];
+  colorScale?: string[];
+  cellSize?: number;
+  cellGap?: number;
+  formatTooltip?: (cell: HeatMapCell) => string;
+};
+
+type MonthGrid = {
+  year: number;
+  month: number;
+  label: string;
+  weeks: ({ date: string; value: number; col: number } | null)[][];
+};
+
+function buildMonthGrids(data: HeatMapCell[]): MonthGrid[] {
+  const dataMap = new Map(data.map((d) => [d.date, d.value]));
+
+  const dates = data.map((d) => Temporal.PlainDate.from(d.date)).sort(Temporal.PlainDate.compare);
+  const minDate = dates[0]!;
+  const maxDate = dates[dates.length - 1]!;
+
+  const months: MonthGrid[] = [];
+  let cursor = Temporal.PlainDate.from({ year: minDate.year, month: minDate.month, day: 1 });
+  const endMonth = Temporal.PlainDate.from({ year: maxDate.year, month: maxDate.month, day: 1 });
+
+  while (Temporal.PlainDate.compare(cursor, endMonth) <= 0) {
+    const year = cursor.year;
+    const month = cursor.month;
+    const daysInMonth = cursor.daysInMonth;
+
+    const weeks: ({ date: string; value: number; col: number } | null)[][] = [];
+    let currentWeek: ({ date: string; value: number; col: number } | null)[] = [];
+
+    const firstDow = cursor.dayOfWeek - 1;
+    for (let i = 0; i < firstDow; i++) {
+      currentWeek.push(null);
+    }
+
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = Temporal.PlainDate.from({ year, month, day });
+      const dateStr = date.toString();
+      const col = date.dayOfWeek - 1;
+
+      currentWeek.push({ date: dateStr, value: dataMap.get(dateStr) ?? 0, col });
+
+      if (col === 6 || day === daysInMonth) {
+        if (day === daysInMonth && col < 6) {
+          for (let i = col + 1; i <= 6; i++) {
+            currentWeek.push(null);
+          }
+        }
+        weeks.push(currentWeek);
+        currentWeek = [];
+      }
+    }
+
+    months.push({
+      year,
+      month,
+      label: `${MONTH_NAMES[month - 1]} ${year}`,
+      weeks,
+    });
+
+    cursor = month === 12 ? Temporal.PlainDate.from({ year: year + 1, month: 1, day: 1 }) : Temporal.PlainDate.from({ year, month: month + 1, day: 1 });
+  }
+
+  return months;
+}
+
+export const HeatMapCalendar = ({
+  data,
+  colorScale = DEFAULT_COLOR_SCALE,
+  cellSize = 12,
+  cellGap = 2,
+  formatTooltip,
+  className,
+  ...rest
+}: HeatMapCalendarProps) => {
+  if (data.length === 0) return null;
+
+  const maxValue = Math.max(...data.map((d) => d.value), 1);
+  const months = buildMonthGrids(data);
+  const step = cellSize + cellGap;
+  const gridWidth = 7 * step;
+
+  return (
+    <div {...rest} className={cn("flex flex-wrap gap-4", className)}>
+      {months.map((month) => {
+        const headerHeight = 24;
+        const dayLabelHeight = 14;
+        const svgHeight = headerHeight + dayLabelHeight + month.weeks.length * step;
+
+        return (
+          <svg key={month.label} width={gridWidth} height={svgHeight} className="overflow-visible" role="img">
+            <title>{month.label}</title>
+            <text x={0} y={14} className="fill-fg-normal" fontSize={12} fontWeight={500}>
+              {month.label}
+            </text>
+            {DAY_LABELS.map((label, i) => (
+              <text key={`day-${DAY_KEYS[i]}`} x={i * step + cellSize / 2} y={headerHeight + 10} textAnchor="middle" className="fill-fg-subtle" fontSize={9}>
+                {label}
+              </text>
+            ))}
+            {month.weeks.map((week, wi) =>
+              week.map((cell) => {
+                if (!cell) return null;
+                const intensity = getIntensity(cell.value, maxValue, colorScale.length);
+                const fill = cell.value > 0 ? colorScale[intensity]! : colorScale[0]!;
+                return (
+                  <rect key={cell.date} x={cell.col * step} y={headerHeight + dayLabelHeight + wi * step} width={cellSize} height={cellSize} rx={2} fill={fill}>
+                    {formatTooltip && <title>{formatTooltip({ date: cell.date, value: cell.value })}</title>}
+                  </rect>
+                );
+              })
+            )}
+          </svg>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/HeatMap/HeatMapMatrix.tsx

@@ -0,0 +1,75 @@
+import { cn } from "@sixthshift/design-system/utils";
+import type * as React from "react";
+import { Temporal } from "../../date-time";
+import { DAY_KEYS, DAY_LABELS, DEFAULT_COLOR_SCALE, getIntensity, type HeatMapCell } from "./heat-map.utils";
+
+export type HeatMapMatrixProps = React.HTMLAttributes<HTMLDivElement> & {
+  data: HeatMapCell[];
+  colorScale?: string[];
+  cellSize?: number;
+  cellGap?: number;
+  showDayLabels?: boolean;
+  formatTooltip?: (cell: HeatMapCell) => string;
+};
+
+export const HeatMapMatrix = ({
+  data,
+  colorScale = DEFAULT_COLOR_SCALE,
+  cellSize = 12,
+  cellGap = 2,
+  showDayLabels = true,
+  formatTooltip,
+  className,
+  ...rest
+}: HeatMapMatrixProps) => {
+  if (data.length === 0) return null;
+
+  const maxValue = Math.max(...data.map((d) => d.value), 1);
+
+  const sorted = [...data].map((d) => ({ ...d, plain: Temporal.PlainDate.from(d.date) })).sort((a, b) => Temporal.PlainDate.compare(a.plain, b.plain));
+
+  const rows: { date: string; value: number; col: number }[][] = [];
+  let currentRow: { date: string; value: number; col: number }[] = [];
+  let lastDow = -1;
+
+  for (const cell of sorted) {
+    const dow = cell.plain.dayOfWeek - 1;
+    if (dow <= lastDow && currentRow.length > 0) {
+      rows.push(currentRow);
+      currentRow = [];
+    }
+    currentRow.push({ date: cell.date, value: cell.value, col: dow });
+    lastDow = dow;
+  }
+  if (currentRow.length > 0) rows.push(currentRow);
+
+  const step = cellSize + cellGap;
+  const labelHeight = showDayLabels ? 14 : 0;
+  const gridWidth = 7 * step;
+  const gridHeight = rows.length * step;
+
+  return (
+    <div {...rest} className={cn("inline-block", className)}>
+      <svg width={gridWidth} height={gridHeight + labelHeight} className="overflow-visible" role="img">
+        <title>Heat map</title>
+        {showDayLabels &&
+          DAY_LABELS.map((label, i) => (
+            <text key={`col-${DAY_KEYS[i]}`} x={i * step + cellSize / 2} y={10} textAnchor="middle" className="fill-fg-subtle" fontSize={9}>
+              {label}
+            </text>
+          ))}
+        {rows.map((row, ri) =>
+          row.map((cell) => {
+            const intensity = getIntensity(cell.value, maxValue, colorScale.length);
+            const fill = cell.value > 0 ? colorScale[intensity]! : colorScale[0]!;
+            return (
+              <rect key={cell.date} x={cell.col * step} y={labelHeight + ri * step} width={cellSize} height={cellSize} rx={2} fill={fill}>
+                {formatTooltip && <title>{formatTooltip({ date: cell.date, value: cell.value })}</title>}
+              </rect>
+            );
+          })
+        )}
+      </svg>
+    </div>
+  );
+};

package/src/components/HeatMap/heat-map.utils.ts

@@ -0,0 +1,15 @@
+export type HeatMapCell = {
+  date: string;
+  value: number;
+};
+
+export const DAY_LABELS = ["M", "T", "W", "T", "F", "S", "S"];
+export const DAY_KEYS = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
+export const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+export const DEFAULT_COLOR_SCALE = ["var(--bg-subtle)", "var(--bg-brand-subtle)", "var(--bg-brand)", "var(--bg-brand-strong)"];
+
+export function getIntensity(value: number, max: number, levels: number): number {
+  if (value <= 0 || max <= 0) return 0;
+  return Math.ceil(Math.min(value / max, 1) * (levels - 1));
+}

package/src/components/HeatMap/index.ts

@@ -0,0 +1,3 @@
+export { HeatMapCalendar, type HeatMapCalendarProps } from "./HeatMapCalendar";
+export { HeatMapMatrix, type HeatMapMatrixProps } from "./HeatMapMatrix";
+export type { HeatMapCell } from "./heat-map.utils";

package/src/components/HoverCard/HoverCard.tsx

@@ -0,0 +1,83 @@
+import { autoUpdate, flip, offset, type Placement, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions } from "@floating-ui/react";
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import type * as React from "react";
+import { HoverCardContent } from "./components/HoverCardContent";
+import { HoverCardContext } from "./components/HoverCardContext";
+import { HoverCardTrigger } from "./components/HoverCardTrigger";
+
+export type HoverCardProps = {
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Default open state for uncontrolled mode */
+  defaultOpen?: boolean;
+  /** Placement relative to trigger */
+  placement?: Placement;
+  /** Delay before showing (ms). Defaults to 500ms — longer than a tooltip so hover-cards don't pop on incidental hover. */
+  delayShow?: number;
+  /** Delay before hiding (ms). Defaults to 200ms. */
+  delayHide?: number;
+  /** Offset from trigger in pixels */
+  offsetPx?: number;
+  /** Children — compound components */
+  children: React.ReactNode;
+};
+
+const HoverCardRoot = ({
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
+  placement = "bottom-start",
+  delayShow = 500,
+  delayHide = 200,
+  offsetPx = 8,
+  children,
+}: HoverCardProps) => {
+  const [open, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    strategy: "fixed",
+    middleware: [offset(offsetPx), flip(), shift({ padding: 8 })],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const hover = useHover(context, {
+    delay: { open: delayShow, close: delayHide },
+    handleClose: safePolygon(),
+  });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss]);
+
+  const contextValue = {
+    open,
+    refs: {
+      setReference: refs.setReference,
+      setFloating: refs.setFloating,
+    },
+    floatingStyles,
+    getReferenceProps,
+    getFloatingProps,
+  };
+
+  return <HoverCardContext.Provider value={contextValue}>{children}</HoverCardContext.Provider>;
+};
+
+type HoverCardComponent = typeof HoverCardRoot & {
+  Trigger: typeof HoverCardTrigger;
+  Content: typeof HoverCardContent;
+};
+
+export const HoverCard: HoverCardComponent = Object.assign(HoverCardRoot, {
+  Trigger: HoverCardTrigger,
+  Content: HoverCardContent,
+});

package/src/components/HoverCard/components/HoverCardContent.tsx

@@ -0,0 +1,30 @@
+import { FloatingPortal } from "@floating-ui/react";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+import { useHoverCardContext } from "./HoverCardContext";
+
+export type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const HoverCardContent = React.forwardRef<HTMLDivElement, HoverCardContentProps>(({ className, children, ...props }, forwardedRef) => {
+  const { open, refs, floatingStyles, getFloatingProps } = useHoverCardContext();
+
+  if (!open) return null;
+
+  return (
+    <FloatingPortal>
+      <div
+        ref={(node) => {
+          refs.setFloating(node);
+          if (typeof forwardedRef === "function") forwardedRef(node);
+          else if (forwardedRef) forwardedRef.current = node;
+        }}
+        style={floatingStyles}
+        className={cn("z-popover w-80 rounded-lg border border-border-normal bg-bg-normal p-4 shadow-lg", className)}
+        {...getFloatingProps(props)}
+      >
+        {children}
+      </div>
+    </FloatingPortal>
+  );
+});
+HoverCardContent.displayName = "HoverCardContent";

package/src/components/HoverCard/components/HoverCardContext.tsx

@@ -0,0 +1,22 @@
+import { createContext, useContext } from "react";
+
+export type HoverCardContextValue = {
+  open: boolean;
+  refs: {
+    setReference: (node: HTMLElement | null) => void;
+    setFloating: (node: HTMLElement | null) => void;
+  };
+  floatingStyles: React.CSSProperties;
+  getReferenceProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+  getFloatingProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+};
+
+export const HoverCardContext = createContext<HoverCardContextValue | null>(null);
+
+export function useHoverCardContext() {
+  const context = useContext(HoverCardContext);
+  if (!context) {
+    throw new Error("HoverCard compound components must be used within <HoverCard>");
+  }
+  return context;
+}

package/src/components/HoverCard/components/HoverCardTrigger.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Slot } from "../../../internal/Slot";
+import type { WritableRefObject } from "../../../internal/types";
+import { useHoverCardContext } from "./HoverCardContext";
+
+export type HoverCardTriggerProps = React.HTMLAttributes<HTMLElement> & {
+  /** Render as child element (default true — hover-cards typically wrap an existing inline element). */
+  asChild?: boolean;
+};
+
+export const HoverCardTrigger = React.forwardRef<HTMLElement, HoverCardTriggerProps>(({ asChild = true, children, className, ...props }, forwardedRef) => {
+  const { refs, getReferenceProps } = useHoverCardContext();
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      ref={(node: HTMLElement | null) => {
+        refs.setReference(node);
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) (forwardedRef as WritableRefObject<HTMLElement | null>).current = node;
+      }}
+      // When rendering as a span wrapper (not asChild), use block layout so the
+      // bounding box matches the wrapped element. Without this, the span has
+      // inline layout and floating-ui anchors to the wrong position.
+      className={asChild ? className : `block ${className ?? ""}`.trim()}
+      {...getReferenceProps(props)}
+    >
+      {children}
+    </Comp>
+  );
+});
+HoverCardTrigger.displayName = "HoverCardTrigger";

package/src/components/HoverCard/index.ts

@@ -0,0 +1,3 @@
+export { HoverCardContent, type HoverCardContentProps } from "./components/HoverCardContent";
+export { HoverCardTrigger, type HoverCardTriggerProps } from "./components/HoverCardTrigger";
+export { HoverCard, type HoverCardProps } from "./HoverCard";

package/src/components/Input/Input.tsx

@@ -0,0 +1,48 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+};
+
+const iconSlotStyles = `absolute top-1/2 -translate-y-1/2 text-fg-subtle
+  [&_svg]:h-4 [&_svg]:w-4
+  [&_button]:flex [&_button]:cursor-pointer [&_button]:appearance-none
+  [&_button]:border-0 [&_button]:bg-transparent`;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, iconLeft, iconRight, ...props }, ref) => {
+  if (iconLeft || iconRight) {
+    return (
+      <div className={cn("relative h-9 w-full text-sm", className)}>
+        {iconLeft && <span className={cn(iconSlotStyles, "left-3")}>{iconLeft}</span>}
+        <input
+          type={type}
+          className={cn(
+            `flex h-full w-full rounded-md border border-border-normal bg-bg-normal py-1 text-[length:inherit] shadow-xs transition-colors file:border-0 file:bg-bg-normal file:font-medium file:text-fg-normal file:text-sm placeholder:text-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50`,
+            iconLeft ? "pl-9" : "pl-3",
+            iconRight ? "pr-9" : "pr-3"
+          )}
+          ref={ref}
+          {...props}
+        />
+        {iconRight && <span className={cn(iconSlotStyles, "right-3")}>{iconRight}</span>}
+      </div>
+    );
+  }
+
+  return (
+    <input
+      type={type}
+      className={cn(
+        `flex h-9 w-full rounded-md border border-border-normal bg-bg-normal px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-bg-normal file:font-medium file:text-fg-normal file:text-sm placeholder:text-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50`,
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };

package/src/components/Input/index.ts

@@ -0,0 +1 @@
+export { Input, type InputProps } from "./Input";