@sixthshift/design-system 0.1.0

package/src/components/Avatar/Avatar.tsx

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

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

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,59 @@
+import { cn } from "@sixthshift/design-system/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-border-brand focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        solid: "border-transparent shadow",
+        soft: "border-transparent",
+        outline: "",
+      },
+      intent: {
+        neutral: "",
+        primary: "",
+        danger: "",
+        success: "",
+        warning: "",
+        muted: "",
+      },
+    },
+    compoundVariants: [
+      // Solid variants
+      { variant: "solid", intent: "neutral", className: "bg-bg-strong text-fg-on-strong" },
+      { variant: "solid", intent: "primary", className: "bg-bg-brand text-fg-on-brand" },
+      { variant: "solid", intent: "danger", className: "bg-bg-danger text-fg-on-danger" },
+      { variant: "solid", intent: "success", className: "bg-bg-success text-fg-on-success" },
+      { variant: "solid", intent: "warning", className: "bg-bg-warning text-fg-on-warning" },
+      { variant: "solid", intent: "muted", className: "bg-bg-subtle text-fg-subtle" },
+      // Soft variants
+      { variant: "soft", intent: "neutral", className: "bg-bg-subtle text-fg-normal" },
+      { variant: "soft", intent: "primary", className: "bg-bg-brand-subtle text-fg-on-brand-subtle" },
+      { variant: "soft", intent: "danger", className: "bg-bg-danger-subtle text-fg-on-danger-subtle" },
+      { variant: "soft", intent: "success", className: "bg-bg-success-subtle text-fg-on-success-subtle" },
+      { variant: "soft", intent: "warning", className: "bg-bg-warning-subtle text-fg-on-warning-subtle" },
+      { variant: "soft", intent: "muted", className: "bg-bg-subtle text-fg-subtle" },
+      // Outline variants
+      { variant: "outline", intent: "neutral", className: "border-border-normal bg-bg-normal text-fg-normal" },
+      { variant: "outline", intent: "primary", className: "border-border-brand bg-bg-normal text-fg-brand" },
+      { variant: "outline", intent: "danger", className: "border-border-danger bg-bg-normal text-fg-danger" },
+      { variant: "outline", intent: "success", className: "border-border-success bg-bg-normal text-fg-success" },
+      { variant: "outline", intent: "warning", className: "border-border-warning bg-bg-normal text-fg-warning" },
+      { variant: "outline", intent: "muted", className: "border-border-normal bg-bg-normal text-fg-subtle" },
+    ],
+    defaultVariants: {
+      variant: "solid",
+      intent: "primary",
+    },
+  }
+);
+
+export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>;
+
+export const Badge = ({ className, variant, intent, ...props }: BadgeProps) => {
+  return <span className={cn(badgeVariants({ variant, intent }), className)} {...props} />;
+};
+
+export { badgeVariants };

package/src/components/Badge/index.ts

@@ -0,0 +1 @@
+export { Badge, type BadgeProps, badgeVariants } from "./Badge";

package/src/components/BarChart/BarChart.tsx

@@ -0,0 +1,51 @@
+import { cn } from "@sixthshift/design-system/utils";
+import type * as React from "react";
+
+export type BarChartItem = {
+  label: string;
+  value: number;
+  color?: string;
+};
+
+export type BarChartProps = React.HTMLAttributes<HTMLDivElement> & {
+  data: BarChartItem[];
+  showValues?: boolean;
+  maxValue?: number;
+  formatValue?: (value: number) => string;
+  barHeight?: number;
+};
+
+const DEFAULT_COLORS = ["var(--fg-brand)", "var(--fg-success)", "var(--fg-warning)", "var(--fg-danger)", "var(--fg-subtle)"];
+
+export const BarChart = ({
+  data,
+  showValues = true,
+  maxValue: maxValueProp,
+  formatValue = (v) => String(v),
+  barHeight = 24,
+  className,
+  ...rest
+}: BarChartProps) => {
+  const maxValue = maxValueProp ?? Math.max(...data.map((d) => d.value), 1);
+
+  return (
+    <div {...rest} className={cn("flex flex-col gap-2", className)}>
+      {data.map((item, i) => {
+        // Clamp both ends: a negative value would otherwise emit an invalid
+        // `width: -n%`, whose rendering is undefined.
+        const percent = Math.min(Math.max((item.value / maxValue) * 100, 0), 100);
+        const color = item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+
+        return (
+          <div key={item.label} className="flex items-center gap-3">
+            <span className="w-20 shrink-0 truncate text-right text-fg-subtle text-sm">{item.label}</span>
+            <div className="flex-1 overflow-hidden rounded-sm bg-bg-subtle" style={{ height: barHeight }}>
+              <div className="h-full rounded-sm transition-all duration-300" style={{ width: `${percent}%`, backgroundColor: color }} />
+            </div>
+            {showValues && <span className="w-12 shrink-0 text-right font-medium text-fg-normal text-sm">{formatValue(item.value)}</span>}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/BarChart/index.ts

@@ -0,0 +1 @@
+export { BarChart, type BarChartItem, type BarChartProps } from "./BarChart";

package/src/components/Breadcrumb/Breadcrumb.tsx

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

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

package/src/components/Button/Button.tsx

@@ -0,0 +1,157 @@
+import { cn } from "@sixthshift/design-system/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Slot } from "../../internal/Slot";
+
+const buttonVariants = cva(
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        solid: "shadow",
+        outline: "border bg-bg-normal shadow-xs",
+        ghost: "",
+        link: "underline-offset-4 hover:underline",
+      },
+      intent: {
+        neutral: "",
+        danger: "",
+        success: "",
+        warning: "",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        xs: "h-7 rounded-md px-2 text-xs",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        xl: "h-12 rounded-md px-10 text-base",
+        icon: "h-9 w-9",
+      },
+    },
+    compoundVariants: [
+      // Solid variants
+      {
+        variant: "solid",
+        intent: "neutral",
+        className: "bg-bg-brand text-fg-on-brand hover:bg-bg-brand-hovered active:bg-bg-brand-pressed",
+      },
+      {
+        variant: "solid",
+        intent: "danger",
+        className: "bg-bg-danger text-fg-on-danger hover:bg-bg-danger-hovered active:bg-bg-danger-pressed",
+      },
+      {
+        variant: "solid",
+        intent: "success",
+        className: "bg-bg-success text-fg-on-success hover:bg-bg-success-hovered active:bg-bg-success-pressed",
+      },
+      {
+        variant: "solid",
+        intent: "warning",
+        className: "bg-bg-warning text-fg-on-warning hover:bg-bg-warning-hovered active:bg-bg-warning-pressed",
+      },
+      // Outline variants
+      {
+        variant: "outline",
+        intent: "neutral",
+        className: "border-border-normal text-fg-normal hover:bg-bg-subtle-hovered active:bg-bg-subtle-pressed",
+      },
+      {
+        variant: "outline",
+        intent: "danger",
+        className: "border-border-danger text-fg-danger hover:bg-bg-danger-subtle-hovered active:bg-bg-danger-subtle-pressed",
+      },
+      {
+        variant: "outline",
+        intent: "success",
+        className: "border-border-success text-fg-success hover:bg-bg-success-subtle-hovered active:bg-bg-success-subtle-pressed",
+      },
+      {
+        variant: "outline",
+        intent: "warning",
+        className: "border-border-warning text-fg-warning hover:bg-bg-warning-subtle-hovered active:bg-bg-warning-subtle-pressed",
+      },
+      // Ghost variants
+      {
+        variant: "ghost",
+        intent: "neutral",
+        className: "text-fg-normal hover:bg-bg-subtle-hovered active:bg-bg-subtle-pressed",
+      },
+      {
+        variant: "ghost",
+        intent: "danger",
+        className: "text-fg-danger hover:bg-bg-danger-subtle-hovered active:bg-bg-danger-subtle-pressed",
+      },
+      {
+        variant: "ghost",
+        intent: "success",
+        className: "text-fg-success hover:bg-bg-success-subtle-hovered active:bg-bg-success-subtle-pressed",
+      },
+      {
+        variant: "ghost",
+        intent: "warning",
+        className: "text-fg-warning hover:bg-bg-warning-subtle-hovered active:bg-bg-warning-subtle-pressed",
+      },
+      // Link variants
+      {
+        variant: "link",
+        intent: "neutral",
+        className: "text-fg-brand",
+      },
+      {
+        variant: "link",
+        intent: "danger",
+        className: "text-fg-danger",
+      },
+      {
+        variant: "link",
+        intent: "success",
+        className: "text-fg-success",
+      },
+      {
+        variant: "link",
+        intent: "warning",
+        className: "text-fg-warning",
+      },
+    ],
+    defaultVariants: {
+      variant: "solid",
+      intent: "neutral",
+      size: "default",
+    },
+  }
+);
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    loading?: boolean;
+  };
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, intent, size, asChild = false, loading = false, children, disabled, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, intent, size, className }))} ref={ref} disabled={disabled || loading} {...props}>
+        {loading ? (
+          <>
+            <svg className="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+            {children}
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button, type ButtonProps, buttonVariants } from "./Button";