@sixthshift/design-system 0.3.0 → 0.4.0

package/src/components/NavSide/types.ts

@@ -1,36 +0,0 @@
-import type { ComponentType, ReactNode, SVGProps } from "react";
-
-/**
- * Icon component type - compatible with lucide-react and similar icon libraries
- */
-export type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
-
-/**
- * A single navigation item
- */
-export type NavItem = {
-  /** Route path */
-  to: string;
-  /** Display label */
-  label: string;
-  /** Icon component (e.g., from lucide-react) */
-  icon: IconComponent;
-  /** Optional count badge (e.g. pending suggestions). Rendered when > 0. */
-  badge?: number;
-};
-
-/**
- * A group of navigation items
- */
-export type NavSection = {
-  /** Unique identifier for the section */
-  id: string;
-  /** Navigation items in this section */
-  items: NavItem[];
-};
-
-/**
- * Render function for navigation links.
- * Allows router-agnostic link rendering.
- */
-export type RenderLinkFn = (props: { to: string; className: string; title?: string; children: ReactNode }) => ReactNode;

package/src/components/Pagination/Pagination.tsx

@@ -1,86 +0,0 @@
-import { Button } from "@sixthshift/design-system/button";
-import { Select, type SelectOption } from "@sixthshift/design-system/select";
-import { cn } from "@sixthshift/design-system/utils";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import * as React from "react";
-
-const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-
-export type PaginationProps = React.HTMLAttributes<HTMLDivElement> & {
-  /** Current page index (0-based) */
-  page: number;
-  /** Number of items per page */
-  pageSize: number;
-  /** Total number of items */
-  total: number;
-  /** Called when page changes */
-  onPageChange: (page: number) => void;
-  /** Called when page size changes */
-  onPageSizeChange: (size: number) => void;
-  /** Available page size options */
-  pageSizeOptions?: number[];
-  /** Label for rows per page (default: "Rows per page") */
-  rowsLabel?: string;
-};
-
-const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
-  (
-    { page, pageSize, total, onPageChange, onPageSizeChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, rowsLabel = "Rows per page", className, ...props },
-    ref
-  ) => {
-    const start = total > 0 ? page * pageSize + 1 : 0;
-    const end = Math.min((page + 1) * pageSize, total);
-    const totalPages = Math.ceil(total / pageSize);
-
-    const canGoPrev = page > 0;
-    const canGoNext = page < totalPages - 1;
-
-    const selectOptions: SelectOption<string>[] = pageSizeOptions.map((size) => ({
-      value: String(size),
-      label: String(size),
-    }));
-
-    const handlePageSizeChange = (value: string) => {
-      onPageSizeChange(Number(value));
-      onPageChange(0);
-    };
-
-    return (
-      <div ref={ref} className={cn("flex items-center justify-between gap-4 px-4 py-2", className)} {...props}>
-        {/* Page size selector */}
-        <div className="flex items-center gap-2">
-          <span className="text-fg-subtle text-sm">{rowsLabel}</span>
-          <Select value={String(pageSize)} options={selectOptions} onValueChange={handlePageSizeChange} className="w-20" />
-        </div>
-
-        {/* Results info */}
-        <span className="text-fg-subtle text-sm">
-          {total > 0 ? (
-            <>
-              <span className="font-medium text-fg-normal">{start}</span>
-              {"-"}
-              <span className="font-medium text-fg-normal">{end}</span>
-              {" of "}
-              <span className="font-medium text-fg-normal">{total}</span>
-            </>
-          ) : (
-            "No results"
-          )}
-        </span>
-
-        {/* Navigation buttons */}
-        <div className="flex items-center gap-1">
-          <Button variant="ghost" size="icon" onClick={() => onPageChange(page - 1)} disabled={!canGoPrev} aria-label="Previous page">
-            <ChevronLeft />
-          </Button>
-          <Button variant="ghost" size="icon" onClick={() => onPageChange(page + 1)} disabled={!canGoNext} aria-label="Next page">
-            <ChevronRight />
-          </Button>
-        </div>
-      </div>
-    );
-  }
-);
-Pagination.displayName = "Pagination";
-
-export { Pagination };

package/src/components/Pagination/index.ts

@@ -1,2 +0,0 @@
-export type { PaginationProps } from "./Pagination";
-export { Pagination } from "./Pagination";

package/src/components/Skeleton/Skeleton.tsx

@@ -1,9 +0,0 @@
-import { cn } from "@sixthshift/design-system/utils";
-import * as React from "react";
-
-const Skeleton = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
-  return <div ref={ref} className={cn("animate-pulse rounded-md bg-bg-strong/10", className)} {...props} />;
-});
-Skeleton.displayName = "Skeleton";
-
-export { Skeleton };

package/src/components/Skeleton/index.ts

@@ -1 +0,0 @@
-export { Skeleton } from "./Skeleton";

package/src/components/StatsCard/StatsCard.tsx

@@ -1,41 +0,0 @@
-import { Caption } from "@sixthshift/design-system/caption";
-import { cn } from "@sixthshift/design-system/utils";
-import * as React from "react";
-
-export type StatsCardProps = {
-  /** Title of the stats card */
-  title: string;
-  /** Description text shown below the title */
-  description: string;
-  /** Optional icon displayed in the header */
-  icon?: React.ReactNode;
-  /** Visual status indicator via left border color */
-  status?: "healthy" | "warning" | "error" | "neutral";
-  /** Card content */
-  children: React.ReactNode;
-  /** Additional CSS classes */
-  className?: string;
-};
-
-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<HTMLDivElement, StatsCardProps>(({ title, description, icon, status = "neutral", children, className }, ref) => {
-  return (
-    <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)}>
-      <div className="flex items-start justify-between gap-2">
-        <div className="flex flex-col gap-0.5">
-          <span className="font-medium text-fg-normal">{title}</span>
-          <Caption>{description}</Caption>
-        </div>
-        {icon && <div className="text-fg-subtle">{icon}</div>}
-      </div>
-      <div className="flex-1">{children}</div>
-    </div>
-  );
-});
-StatsCard.displayName = "StatsCard";

package/src/components/StatsCard/index.ts

@@ -1 +0,0 @@
-export { StatsCard, type StatsCardProps } from "./StatsCard";