@arcote.tech/arc-ds 0.4.1

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@arcote.tech/arc-ds",
+  "type": "module",
+  "version": "0.4.1",
+  "private": false,
+  "author": "Przemysław Krasiński [arcote.tech]",
+  "description": "Design System for Arc framework — CVA-based components with display modes and variant overrides",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./ui/*": {
+      "types": "./src/ui/*.tsx",
+      "import": "./src/ui/*.tsx",
+      "default": "./src/ui/*.tsx"
+    }
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "peerDependencies": {
+    "@arcote.tech/arc": "workspace:*",
+    "framer-motion": "^12.0.0",
+    "lucide-react": ">=0.400.0",
+    "radix-ui": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.0.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.9.3"
+  }
+}

package/src/ds/avatar/avatar.tsx

@@ -0,0 +1,86 @@
+import { cva } from "class-variance-authority";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import { cn } from "../../lib/utils";
+import type { AvatarProps } from "../types";
+
+// ---------------------------------------------------------------------------
+// CVA
+// ---------------------------------------------------------------------------
+
+export const avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full select-none",
+  {
+    variants: {
+      size: {
+        default: "size-9 md:size-8",
+        sm: "size-7 md:size-6",
+        lg: "size-11 md:size-10",
+        xs: "size-6 md:size-5",
+      },
+      display: {
+        default: "",
+        compact: "",
+        minimal: "",
+        expanded: "",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      display: "default",
+    },
+  },
+);
+
+export const avatarFallbackVariants = cva(
+  "flex size-full items-center justify-center rounded-full bg-muted text-muted-foreground",
+  {
+    variants: {
+      size: {
+        default: "text-sm",
+        sm: "text-xs",
+        lg: "text-base",
+        xs: "text-[10px]",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+// ---------------------------------------------------------------------------
+// Avatar
+// ---------------------------------------------------------------------------
+
+export function Avatar({
+  src,
+  fallback,
+  size = "default",
+  display = "default",
+  className,
+  ...props
+}: AvatarProps) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(avatarVariants({ size, display }), className)}
+      {...props}
+    >
+      {src && (
+        <AvatarPrimitive.Image
+          data-slot="avatar-image"
+          src={src}
+          className="aspect-square size-full"
+        />
+      )}
+      {fallback && (
+        <AvatarPrimitive.Fallback
+          data-slot="avatar-fallback"
+          className={avatarFallbackVariants({ size })}
+        >
+          {fallback}
+        </AvatarPrimitive.Fallback>
+      )}
+    </AvatarPrimitive.Root>
+  );
+}

package/src/ds/badge/badge.tsx

@@ -0,0 +1,61 @@
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { cn } from "../../lib/utils";
+import type { BadgeProps } from "../types";
+
+// ---------------------------------------------------------------------------
+// CVA
+// ---------------------------------------------------------------------------
+
+export const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "bg-destructive text-white [a&]:hover:bg-destructive/90",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+      display: {
+        default: "",
+        compact: "px-1.5 py-0 text-[10px]",
+        minimal: "size-2 rounded-full p-0 [&>*]:hidden",
+        expanded: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      display: "default",
+    },
+  },
+);
+
+// ---------------------------------------------------------------------------
+// Badge
+// ---------------------------------------------------------------------------
+
+export function Badge({
+  className,
+  variant = "default",
+  display = "default",
+  asChild = false,
+  children,
+  ...props
+}: BadgeProps) {
+  const Comp = asChild ? Slot.Root : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant, display }), className)}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}

package/src/ds/bento-card/bento-card.tsx

@@ -0,0 +1,70 @@
+import { Box } from "../box/box";
+import { useBentoSpan } from "../bento-grid/bento-grid";
+import { motion } from "framer-motion";
+import { Plus } from "lucide-react";
+import type { ComponentType, ReactNode } from "react";
+
+export interface BentoCardProps {
+  layoutId: string;
+  title: ReactNode;
+  icon: ComponentType<{ className?: string }>;
+  isEmpty: boolean;
+  isModalOpen?: boolean;
+  onEdit: () => void;
+  emptyLabel?: ReactNode;
+  className?: string;
+  span?: string;
+  children?: ReactNode;
+}
+
+export function BentoCard({
+  layoutId,
+  title,
+  icon: Icon,
+  isEmpty,
+  isModalOpen,
+  onEdit,
+  emptyLabel,
+  className,
+  span,
+  children,
+}: BentoCardProps) {
+  const autoSpan = useBentoSpan();
+  const resolvedSpan = span ?? autoSpan;
+
+  return (
+    <div className={`h-full ${resolvedSpan} ${className ?? ""}`.trim()}>
+      <motion.div
+        layoutId={layoutId}
+        className="h-full"
+        style={{ opacity: isModalOpen ? 0 : 1 }}
+      >
+        <Box
+          layout={false}
+          className="group relative cursor-pointer p-5 hover:shadow-lg transition-all duration-300 h-full min-h-[140px] hover:scale-[1.01]"
+          onClick={onEdit}
+        >
+          <div className="flex items-center gap-2.5 mb-3">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
+              <Icon className="h-4 w-4 text-primary" />
+            </div>
+            <span className="text-sm font-semibold">{title}</span>
+          </div>
+
+          {isEmpty ? (
+            <div className="flex flex-col items-center justify-center gap-2 py-4 border-2 border-dashed border-muted-foreground/15 rounded-xl transition-colors group-hover:border-primary/30">
+              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-muted transition-colors group-hover:bg-primary/10">
+                <Plus className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-primary" />
+              </div>
+              {emptyLabel && (
+                <span className="text-xs text-muted-foreground">{emptyLabel}</span>
+              )}
+            </div>
+          ) : (
+            <div className="flex flex-col gap-2">{children}</div>
+          )}
+        </Box>
+      </motion.div>
+    </div>
+  );
+}

package/src/ds/bento-grid/bento-grid.tsx

@@ -0,0 +1,52 @@
+import { Children, createContext, useContext, type ReactNode } from "react";
+
+export interface BentoGridProps {
+  children: ReactNode;
+  className?: string;
+}
+
+type BentoGridItemContext = {
+  index: number;
+  count: number;
+};
+
+const BentoItemContext = createContext<BentoGridItemContext | null>(null);
+
+/**
+ * Hook for children to read their grid span class.
+ * Returns the appropriate Tailwind class (e.g., "md:row-span-2", "md:col-span-3")
+ * or empty string for normal cells.
+ */
+export function useBentoSpan(): string {
+  const ctx = useContext(BentoItemContext);
+  if (!ctx) return "";
+  const { index, count } = ctx;
+
+  if (count < 5) return "";
+  if (index === 0) return "md:row-span-2";
+  if (index === count - 1 && (count === 6 || count === 8)) return "md:col-span-3";
+  return "";
+}
+
+/**
+ * Responsive bento grid with auto-layout based on child count.
+ *
+ * Children call useBentoSpan() to get their grid span class.
+ * No wrapper divs — children control their own layout.
+ */
+export function BentoGrid({ children, className }: BentoGridProps) {
+  const items = Children.toArray(children);
+  const count = items.length;
+
+  if (count === 0) return null;
+
+  return (
+    <div className={`grid grid-cols-1 md:grid-cols-3 gap-3 ${className ?? ""}`}>
+      {items.map((child, index) => (
+        <BentoItemContext.Provider key={index} value={{ index, count }}>
+          {child}
+        </BentoItemContext.Provider>
+      ))}
+    </div>
+  );
+}

package/src/ds/box/box.tsx

@@ -0,0 +1,96 @@
+import { cva } from "class-variance-authority";
+import { type HTMLMotionProps, motion } from "framer-motion";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+import { useDisplayMode } from "../display-mode";
+import { useDsVariantOverrides } from "../ds-provider";
+import { dsTransitions } from "../transitions";
+import type { DisplayMode } from "../types";
+
+// ---------------------------------------------------------------------------
+// CVA — Box
+// ---------------------------------------------------------------------------
+
+export const boxVariants = cva(
+  "rounded-2xl border bg-card text-card-foreground shadow-sm transition-all duration-300",
+  {
+    variants: {
+      variant: {
+        default: "",
+        ghost:
+          "border-transparent bg-transparent shadow-none hover:shadow-none",
+      },
+      display: {
+        default: "",
+        compact: "rounded-xl p-2",
+        minimal: "rounded-lg p-1",
+        expanded: "p-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      display: "default",
+    },
+  },
+);
+
+// ---------------------------------------------------------------------------
+// Box
+// ---------------------------------------------------------------------------
+
+export interface BoxProps extends HTMLMotionProps<"div"> {
+  variant?: "default" | "ghost";
+  displayMode?: DisplayMode;
+  /** Layout animation ID — dwa Boxy z tym samym layoutId animują przejście. */
+  layoutId?: string;
+}
+
+/**
+ * Box — bazowy kontener DS z layout animations.
+ *
+ * Domyślny wariant: neutralny card (border, bg-card, shadow-sm).
+ * `ghost`: przezroczysty, bez border/shadow.
+ *
+ * Wygląd można nadpisać per-app przez DesignSystemProvider variants:
+ * `{ Box: { className: { default: "glass" } } }` — dodaje klasę CSS.
+ */
+export const Box = forwardRef<HTMLDivElement, BoxProps>(
+  (
+    {
+      variant = "default",
+      displayMode: displayModeProp,
+      layoutId,
+      layout = "position",
+      className,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const contextMode = useDisplayMode();
+    const mode: DisplayMode = displayModeProp ?? contextMode;
+
+    // Extra classes injected by DesignSystemProvider (e.g. NDT adds "glass")
+    const overrides = useDsVariantOverrides("Box");
+    const extraClass = overrides?.className?.default;
+
+    return (
+      <motion.div
+        ref={ref}
+        layout={layout}
+        layoutId={layoutId}
+        className={cn(
+          boxVariants({ variant, display: mode }),
+          extraClass,
+          className,
+        )}
+        transition={{ layout: dsTransitions.smooth }}
+        {...rest}
+      >
+        {children}
+      </motion.div>
+    );
+  },
+);
+
+Box.displayName = "Box";

package/src/ds/button/button.tsx

@@ -0,0 +1,191 @@
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+import { useDisplayMode } from "../display-mode";
+import { Tooltip } from "../tooltip/tooltip";
+import type { ButtonProps, DisplayMode } from "../types";
+
+// ---------------------------------------------------------------------------
+// CVA — root button
+// ---------------------------------------------------------------------------
+
+export const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-white hover:bg-destructive/90",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-12 gap-2 px-5 py-2.5 text-base md:h-9 md:px-4 md:py-2 md:text-sm",
+        sm: "h-11 gap-2 rounded-md px-4 text-base md:h-8 md:gap-1.5 md:px-3 md:text-sm",
+        xs: "h-9 gap-1.5 rounded-md px-3 text-sm md:h-6 md:gap-1 md:px-2 md:text-xs",
+        lg: "h-14 gap-2.5 rounded-md px-8 text-lg md:h-10 md:px-6 md:text-sm",
+        icon: "size-12 md:size-9",
+        "icon-sm": "size-11 md:size-8",
+        "icon-xs": "size-9 rounded-md md:size-6",
+      },
+      display: {
+        default: "",
+        compact:
+          "flex-col h-auto min-h-[44px] min-w-[44px] gap-0.5 rounded-lg px-3 py-2 text-xs bg-transparent text-muted-foreground hover:text-foreground data-[active]:text-primary",
+        minimal: "",
+        expanded: "w-full justify-start gap-2",
+      },
+      active: {
+        true: "data-[active]:font-semibold",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        display: "compact",
+        active: true,
+        className: "text-primary bg-transparent",
+      },
+    ],
+    defaultVariants: {
+      variant: "ghost",
+      size: "sm",
+      display: "default",
+      active: false,
+    },
+  },
+);
+
+// ---------------------------------------------------------------------------
+// Sub-CVA — icon
+// ---------------------------------------------------------------------------
+
+export const buttonIconVariants = cva("shrink-0", {
+  variants: {
+    display: {
+      default: "size-4.5 md:size-4",
+      compact: "size-5",
+      minimal: "size-4.5 md:size-4",
+      expanded: "size-4.5 md:size-4",
+    },
+    active: {
+      true: "",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      display: "compact",
+      active: true,
+      className: "stroke-[2.5]",
+    },
+  ],
+  defaultVariants: {
+    display: "default",
+    active: false,
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Sub-CVA — label
+// ---------------------------------------------------------------------------
+
+export const buttonLabelVariants = cva("", {
+  variants: {
+    display: {
+      default: "",
+      compact: "",
+      minimal: "sr-only",
+      expanded: "flex-1 text-left",
+    },
+  },
+  defaultVariants: {
+    display: "default",
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Button
+// ---------------------------------------------------------------------------
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      icon: Icon,
+      label,
+      right,
+      tooltip,
+      isActive,
+      displayMode: displayModeProp,
+      variant: variantProp,
+      size: sizeProp,
+      className,
+      onClick,
+      disabled,
+      ...rest
+    },
+    ref,
+  ) => {
+    const contextMode = useDisplayMode();
+    const mode: DisplayMode = displayModeProp ?? contextMode;
+
+    const resolvedVariant = isActive
+      ? ("secondary" as const)
+      : (variantProp ?? "ghost");
+
+    const resolvedSize = sizeProp ?? (mode === "minimal" ? "icon-sm" : "sm");
+
+    const tooltipSide =
+      mode === "compact" ? "top" : mode === "expanded" ? "right" : "bottom";
+
+    const resolvedTooltip = mode === "minimal" ? (tooltip ?? label) : tooltip;
+
+    const content = (
+      <button
+        ref={ref}
+        data-active={isActive || undefined}
+        className={cn(
+          buttonVariants({
+            variant: resolvedVariant,
+            size: resolvedSize,
+            display: mode,
+            active: !!isActive,
+          }),
+          className,
+        )}
+        onClick={onClick}
+        disabled={disabled}
+        {...rest}
+      >
+        {Icon && (
+          <Icon
+            className={buttonIconVariants({
+              display: mode,
+              active: !!isActive,
+            })}
+          />
+        )}
+        {label && (
+          <span className={buttonLabelVariants({ display: mode })}>
+            {label}
+          </span>
+        )}
+        {mode !== "minimal" && mode !== "compact" && right}
+      </button>
+    );
+
+    return (
+      <Tooltip content={resolvedTooltip} side={tooltipSide}>
+        {content}
+      </Tooltip>
+    );
+  },
+);
+
+Button.displayName = "Button";