@sixthshift/design-system 0.3.0 → 0.5.0

package/dist/components/StatsCard/StatsCard.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Caption } from "@sixthshift/design-system/caption";
-import { cn } from "@sixthshift/design-system/utils";
-import * as React from "react";
-const statusColors = {
-    healthy: "border-l-green-500",
-    warning: "border-l-amber-500",
-    error: "border-l-red-500",
-    neutral: "border-l-border-subtle",
-};
-export const StatsCard = React.forwardRef(({ title, description, icon, status = "neutral", children, className }, ref) => {
-    return (_jsxs("div", { ref: ref, className: cn("flex flex-col gap-3 rounded border border-border-subtle border-l-2 bg-bg-subtle p-4", statusColors[status], className), children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "font-medium text-fg-normal", children: title }), _jsx(Caption, { children: description })] }), icon && _jsx("div", { className: "text-fg-subtle", children: icon })] }), _jsx("div", { className: "flex-1", children: children })] }));
-});
-StatsCard.displayName = "StatsCard";
-//# sourceMappingURL=StatsCard.js.map

package/dist/components/StatsCard/StatsCard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatsCard.js","sourceRoot":"","sources":["../../../src/components/StatsCard/StatsCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,oBAAoB;IAC7B,OAAO,EAAE,oBAAoB;IAC7B,KAAK,EAAE,kBAAkB;IACzB,OAAO,EAAE,wBAAwB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAiC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IACvJ,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,qFAAqF,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,aAClJ,eAAK,SAAS,EAAC,wCAAwC,aACrD,eAAK,SAAS,EAAC,uBAAuB,aACpC,eAAM,SAAS,EAAC,4BAA4B,YAAE,KAAK,GAAQ,EAC3D,KAAC,OAAO,cAAE,WAAW,GAAW,IAC5B,EACL,IAAI,IAAI,cAAK,SAAS,EAAC,gBAAgB,YAAE,IAAI,GAAO,IACjD,EACN,cAAK,SAAS,EAAC,QAAQ,YAAE,QAAQ,GAAO,IACpC,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/components/StatsCard/index.d.ts

@@ -1,2 +0,0 @@
-export { StatsCard, type StatsCardProps } from "./StatsCard.js";
-//# sourceMappingURL=index.d.ts.map

package/dist/components/StatsCard/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StatsCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/StatsCard/index.js

@@ -1,2 +0,0 @@
-export { StatsCard } from "./StatsCard.js";
-//# sourceMappingURL=index.js.map

package/dist/components/StatsCard/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/StatsCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC"}

package/src/components/Avatar/Avatar.tsx

@@ -1,19 +0,0 @@
-import { cn } from "@sixthshift/design-system/utils";
-import * as React from "react";
-
-const Avatar = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(({ className, ...props }, ref) => (
-  <span ref={ref} className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)} {...props} />
-));
-Avatar.displayName = "Avatar";
-
-const AvatarImage = React.forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(({ className, alt, ...props }, ref) => (
-  <img ref={ref} alt={alt} className={cn("aspect-square h-full w-full", className)} {...props} />
-));
-AvatarImage.displayName = "AvatarImage";
-
-const AvatarFallback = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(({ className, ...props }, ref) => (
-  <span ref={ref} className={cn("flex h-full w-full items-center justify-center rounded-full bg-bg-subtle font-medium text-sm", className)} {...props} />
-));
-AvatarFallback.displayName = "AvatarFallback";
-
-export { Avatar, AvatarFallback, AvatarImage };

package/src/components/Avatar/index.ts

@@ -1 +0,0 @@
-export { Avatar, AvatarFallback, AvatarImage } from "./Avatar";

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,47 +0,0 @@
-import { useComponents } from "@sixthshift/design-system/components";
-import { cn } from "@sixthshift/design-system/utils";
-import { ChevronRight } from "lucide-react";
-import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from "react";
-
-export type BreadcrumbItem = {
-  label: ReactNode;
-  href?: string;
-};
-
-export type BreadcrumbProps = Omit<ComponentPropsWithoutRef<"nav">, "children"> & {
-  items: BreadcrumbItem[];
-};
-
-export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(({ className, items, ...props }, ref) => {
-  const { Link } = useComponents();
-
-  if (items.length === 0) return null;
-
-  return (
-    <nav ref={ref} aria-label="breadcrumb" className={cn("", className)} {...props}>
-      <ol className="flex flex-wrap items-center gap-1.5 text-sm sm:gap-2.5">
-        {items.map((item, index) => {
-          const isLast = index === items.length - 1;
-          const isClickable = !isLast && item.href;
-
-          return (
-            // biome-ignore lint/suspicious/noArrayIndexKey: Breadcrumb path items maintain stable order
-            <li key={index} className="inline-flex items-center gap-1.5">
-              {isClickable ? (
-                <Link href={item.href!} className="text-fg-subtle transition-colors hover:text-fg-normal">
-                  {item.label}
-                </Link>
-              ) : (
-                <span className={cn(isLast ? "font-medium text-fg-normal" : "text-fg-subtle")} aria-current={isLast ? "page" : undefined}>
-                  {item.label}
-                </span>
-              )}
-              {!isLast && <ChevronRight className="size-3.5 text-fg-subtle" aria-hidden="true" />}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-});
-Breadcrumb.displayName = "Breadcrumb";

package/src/components/Breadcrumb/index.ts

@@ -1,5 +0,0 @@
-export {
-  Breadcrumb,
-  type BreadcrumbItem,
-  type BreadcrumbProps,
-} from "./Breadcrumb";

package/src/components/ColorDot/ColorDot.tsx

@@ -1,52 +0,0 @@
-import { cn } from "@sixthshift/design-system/utils";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React 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 = React.HTMLAttributes<HTMLSpanElement> &
-  VariantProps<typeof colorDotVariants> & {
-    /** Intent name (neutral, brand, success, warning, danger) or arbitrary CSS color */
-    color: string;
-  };
-
-export const ColorDot = React.forwardRef<HTMLSpanElement, ColorDotProps>(({ color, size, pulse, className, style, ...props }, ref) => {
-  const intentClass = INTENT_CLASSES[color];
-
-  return (
-    <span
-      ref={ref}
-      className={cn(colorDotVariants({ size, pulse }), intentClass, className)}
-      style={intentClass ? style : { ...style, backgroundColor: color }}
-      {...props}
-    />
-  );
-});
-ColorDot.displayName = "ColorDot";
-
-export { colorDotVariants };

package/src/components/ColorDot/index.ts

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

package/src/components/EmptyState/EmptyState.tsx

@@ -1,30 +0,0 @@
-import { Muted } from "@sixthshift/design-system/muted";
-import { cn } from "@sixthshift/design-system/utils";
-import * as React from "react";
-
-export type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> & {
-  /** Optional icon to display */
-  icon?: React.ReactNode;
-  /** Message to display */
-  message: string;
-  /** Optional description for more context */
-  description?: string;
-  /** Optional action button or element */
-  action?: React.ReactNode;
-  /** Additional CSS classes */
-  className?: string;
-};
-
-export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(({ icon, message, description, action, className, ...props }, ref) => {
-  return (
-    <div ref={ref} 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>
-  );
-});
-EmptyState.displayName = "EmptyState";

package/src/components/EmptyState/index.ts

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

package/src/components/HeatMap/HeatMapCalendar.tsx

@@ -1,127 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

package/src/components/MetricList/MetricList.tsx

@@ -1,18 +0,0 @@
-import { cn } from "@sixthshift/design-system/utils";
-import * as React from "react";
-
-export type MetricListProps = {
-  /** Metric rows */
-  children: React.ReactNode;
-  /** Additional CSS classes */
-  className?: string;
-};
-
-export const MetricList = React.forwardRef<HTMLDivElement, MetricListProps>(({ children, className }, ref) => {
-  return (
-    <div ref={ref} className={cn("flex flex-col gap-2 text-fg-subtle", className)}>
-      {children}
-    </div>
-  );
-});
-MetricList.displayName = "MetricList";

package/src/components/MetricList/MetricRow.tsx

@@ -1,30 +0,0 @@
-import { cn } from "@sixthshift/design-system/utils";
-import type { ReactNode } from "react";
-
-export type MetricRowProps = {
-  /** Label displayed on the left */
-  label: string;
-  /** Value displayed on the right, can be string or ReactNode for complex content */
-  value: ReactNode;
-  /** Optional variant for styling the value */
-  valueVariant?: "normal" | "success" | "warning" | "danger" | "info";
-  /** Additional CSS classes */
-  className?: string;
-};
-
-const valueVariants = {
-  normal: "text-fg-normal",
-  success: "text-fg-success",
-  warning: "text-fg-warning",
-  danger: "text-fg-danger",
-  info: "text-fg-brand",
-};
-
-export const MetricRow = ({ label, value, valueVariant = "normal", className }: MetricRowProps) => {
-  return (
-    <div className={cn("flex justify-between", className)}>
-      <span>{label}</span>
-      <span className={valueVariants[valueVariant]}>{value}</span>
-    </div>
-  );
-};

package/src/components/MetricList/index.ts

@@ -1,2 +0,0 @@
-export { MetricList, type MetricListProps } from "./MetricList";
-export { MetricRow, type MetricRowProps } from "./MetricRow";

package/src/components/NavBottom/NavBottom.tsx

@@ -1,55 +0,0 @@
-import { useComponents } from "@sixthshift/design-system/components";
-import { cn } from "@sixthshift/design-system/utils";
-import * as React from "react";
-import type { NavItem as NavItemType, NavSection, RenderLinkFn } from "../NavSide";
-
-export type NavBottomProps = {
-  /** Navigation sections (will be flattened) */
-  sections: NavSection[];
-  /** Callback to determine if an item is active */
-  isActive: (item: NavItemType) => boolean;
-  /** Render function for links (allows router integration). Falls back to ComponentsContext Link. */
-  renderLink?: RenderLinkFn;
-  /** Maximum number of items to display (default: 5) */
-  maxItems?: number;
-  /** Additional class names */
-  className?: string;
-};
-
-export const NavBottom = React.forwardRef<HTMLElement, NavBottomProps>(({ sections, isActive, renderLink, maxItems = 5, className }, ref) => {
-  const { Link } = useComponents();
-  const linkRenderer: RenderLinkFn = renderLink ?? (({ to, ...rest }) => <Link href={to} {...rest} />);
-  // Flatten all sections and limit to maxItems
-  const items = sections.flatMap((section) => section.items).slice(0, maxItems);
-
-  return (
-    <nav ref={ref} className={cn("fixed inset-x-0 bottom-0 z-app-bar bg-bg-brand-strong text-fg-on-brand-strong", className)}>
-      <ul className="flex items-center justify-around">
-        {items.map((item) => {
-          const Icon = item.icon;
-          const active = isActive(item);
-
-          return (
-            <li key={item.to}>
-              {linkRenderer({
-                to: item.to,
-                className: cn(
-                  "flex flex-col items-center gap-1 rounded-md px-3 py-2 text-xs",
-                  "hover:bg-bg-brand-hovered hover:text-fg-on-brand-hovered",
-                  active && "bg-bg-brand-pressed text-fg-on-brand-pressed"
-                ),
-                children: (
-                  <>
-                    <Icon className="h-5 w-5" />
-                    <span>{item.label}</span>
-                  </>
-                ),
-              })}
-            </li>
-          );
-        })}
-      </ul>
-    </nav>
-  );
-});
-NavBottom.displayName = "NavBottom";

package/src/components/NavBottom/index.ts

@@ -1,3 +0,0 @@
-// Re-export types from NavSide for convenience
-export type { IconComponent, NavItem, NavSection, RenderLinkFn } from "../NavSide";
-export { NavBottom, type NavBottomProps } from "./NavBottom";

package/src/components/NavSide/NavItem.tsx

@@ -1,39 +0,0 @@
-import { cn } from "@sixthshift/design-system/utils";
-import type { NavItem as NavItemType, RenderLinkFn } from "./types";
-
-export type NavItemProps = {
-  item: NavItemType;
-  active: boolean;
-  expanded: boolean;
-  renderLink: RenderLinkFn;
-};
-
-export const NavItem = ({ item, active, expanded, renderLink }: NavItemProps) => {
-  const Icon = item.icon;
-
-  return (
-    <>
-      {renderLink({
-        to: item.to,
-        className: cn(
-          "flex items-center gap-3 rounded-md px-2 py-2 font-medium text-sm",
-          "hover:bg-bg-brand-hovered hover:text-fg-on-brand-hovered",
-          active && "bg-bg-brand-pressed text-fg-on-brand-pressed"
-        ),
-        // Only include title when collapsed (for tooltip)
-        ...(expanded ? {} : { title: item.label }),
-        children: (
-          <>
-            <Icon className="h-6 w-6 shrink-0" />
-            {expanded && <span className="flex-1">{item.label}</span>}
-            {expanded && item.badge !== undefined && item.badge > 0 && (
-              <span className="flex min-w-5 items-center justify-center rounded-full bg-bg-on-brand/20 px-1.5 py-0.5 font-medium text-fg-on-brand text-xs tabular-nums">
-                {item.badge > 9 ? "9+" : item.badge}
-              </span>
-            )}
-          </>
-        ),
-      })}
-    </>
-  );
-};

package/src/components/NavSide/NavSide.tsx

@@ -1,42 +0,0 @@
-import { useComponents } from "@sixthshift/design-system/components";
-import { cn } from "@sixthshift/design-system/utils";
-import * as React from "react";
-import { NavItem } from "./NavItem";
-import type { NavItem as NavItemType, NavSection, RenderLinkFn } from "./types";
-
-export type NavSideProps = {
-  /** Navigation sections */
-  sections: NavSection[];
-  /** Whether the nav is expanded (shows labels) or collapsed (icons only) */
-  expanded?: boolean;
-  /** Callback to determine if an item is active */
-  isActive: (item: NavItemType) => boolean;
-  /** Render function for links (allows router integration). Falls back to ComponentsContext Link. */
-  renderLink?: RenderLinkFn;
-  /** Additional class names */
-  className?: string;
-};
-
-export const NavSide = React.forwardRef<HTMLElement, NavSideProps>(({ sections, expanded = true, isActive, renderLink, className }, ref) => {
-  const { Link } = useComponents();
-  const linkRenderer: RenderLinkFn = renderLink ?? (({ to, ...rest }) => <Link href={to} {...rest} />);
-  return (
-    <aside ref={ref} className={cn("flex flex-col bg-bg-brand-strong text-fg-on-brand-strong", expanded ? "w-48" : "w-16", className)}>
-      <nav className="flex-1 overflow-y-auto py-3">
-        {sections.map((section, sectionIndex) => (
-          <div key={section.id}>
-            {sectionIndex > 0 && <div className="my-2 border-border-subtle border-t" />}
-            <ul className={cn("flex flex-col gap-0.5 px-3")}>
-              {section.items.map((item) => (
-                <li key={item.to}>
-                  <NavItem item={item} active={isActive(item)} expanded={expanded} renderLink={linkRenderer} />
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </nav>
-    </aside>
-  );
-});
-NavSide.displayName = "NavSide";

package/src/components/NavSide/index.ts

@@ -1,2 +0,0 @@
-export { NavSide, type NavSideProps } from "./NavSide";
-export type { IconComponent, NavItem, NavSection, RenderLinkFn } from "./types";