minka-ds 0.1.0

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "minka-ds",
+  "version": "0.1.0",
+  "description": "Minka product design system — tokenized component library",
+  "license": "MIT",
+  "files": ["src", "tokens"],
+  "exports": {
+    ".": "./src/index.ts",
+    "./tokens/*": "./tokens/*"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.4.1",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.14.0",
+    "radix-ui": "^1.4.3",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
+  }
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden [border-radius:var(--radius-badge)] border px-2 py-0.5 text-label-sm whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-[var(--color-bg-raised)] text-[var(--color-text-default)] border-transparent [a&]:hover:bg-[var(--color-action-secondary-hover)]",
+        filled:
+          "bg-[var(--color-action-primary-default)] text-[var(--color-action-primary-foreground)] border-transparent [a&]:hover:bg-[var(--color-action-primary-hover)]",
+        secondary:
+          "bg-[var(--color-bg-disabled)] text-[var(--color-text-default)] border-transparent",
+        destructive:
+          "bg-[var(--color-action-destructive-default)] text-[var(--color-action-destructive-foreground)] border-transparent focus-visible:ring-destructive/20 [a&]:hover:bg-[var(--color-action-destructive-hover)]",
+        success:
+          "bg-[var(--color-bg-success)] text-[var(--color-feedback-success)] border-transparent",
+        warning:
+          "bg-[var(--color-bg-warning)] text-[var(--color-text-default)] border-transparent",
+        error:
+          "bg-[var(--color-bg-error)] text-[var(--color-feedback-error)] border-transparent",
+        info:
+          "bg-[var(--color-bg-info)] text-[var(--color-feedback-info)] border-transparent",
+        pending:
+          "bg-[var(--color-bg-warning)] text-[var(--color-text-default)] border-transparent",
+        outline:
+          "border-[var(--color-border-default)] text-[var(--color-text-default)] [a&]:hover:bg-[var(--color-action-ghost-hover)]",
+        ghost:
+          "border-transparent text-[var(--color-text-default)] [a&]:hover:bg-[var(--color-action-ghost-hover)]",
+        link:
+          "border-transparent text-[var(--color-text-link)] underline-offset-4 [a&]:hover:text-[var(--color-text-link-hover)] [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-body-sm break-words text-[var(--color-text-muted)] sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-[var(--color-text-default)]", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-[var(--color-text-default)]", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/src/components/ui/button-group.tsx

@@ -0,0 +1,89 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+import { Separator } from "./separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [border-radius:var(--radius-button)] has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not([data-slot=button-group]):not(:first-child)]:rounded-l-none [&>*:not([data-slot=button-group]):not(:first-child)]:border-l-0 [&>*:not([data-slot=button-group]):not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not([data-slot=button-group]):not(:first-child)]:rounded-t-none [&>*:not([data-slot=button-group]):not(:first-child)]:border-t-0 [&>*:not([data-slot=button-group]):not(:last-child)]:rounded-b-none",
+      },
+      variant: {
+        elevated: "bg-[var(--color-bg-raised)]",
+        flat:     "bg-transparent",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+      variant:     "elevated",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation, variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "flex items-center gap-2 [border-radius:var(--radius-button)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] px-4 text-label text-[var(--color-text-muted)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,65 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 [border-radius:var(--radius-button)] text-label whitespace-nowrap transition-all outline-none focus-visible:border-[var(--color-border-focus)] focus-visible:ring-[3px] focus-visible:ring-[var(--color-border-focus)]/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-[var(--color-border-error)] aria-invalid:ring-[3px] aria-invalid:ring-[var(--color-border-error)]/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-[var(--color-action-primary-default)] text-[var(--color-action-primary-foreground)] hover:bg-[var(--color-action-primary-hover)]",
+        destructive:
+          "bg-[var(--color-action-destructive-default)] text-[var(--color-action-destructive-foreground)] hover:bg-[var(--color-action-destructive-hover)] focus-visible:ring-[var(--color-border-error)]/20",
+        outline:
+          "border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] shadow-xs hover:bg-[var(--color-action-ghost-hover)] hover:text-[var(--color-text-default)]",
+        secondary:
+          "bg-[var(--color-action-secondary-default)] text-[var(--color-action-secondary-foreground)] hover:bg-[var(--color-action-secondary-hover)]",
+        ghost:
+          "hover:bg-[var(--color-action-ghost-hover)] hover:text-[var(--color-text-default)]",
+        link: "text-[var(--color-text-link)] underline-offset-4 hover:underline hover:text-[var(--color-text-link-hover)]",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 px-2 text-caption has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex flex-col gap-6 [border-radius:var(--radius-card)] border bg-card py-6 text-card-foreground shadow-[var(--shadow-card)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("text-heading-4", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-body-sm text-[var(--color-text-muted)]", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/components/ui/cell.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+// ── TextStack ─────────────────────────────────────────────────────────────────
+// Two-line cell content: a primary label and an optional muted secondary line.
+// Use inside <TableCell> for entity columns (sender, receiver, etc.)
+
+interface TextStackProps {
+  primary: React.ReactNode
+  secondary?: React.ReactNode
+  className?: string
+}
+
+function TextStack({ primary, secondary, className }: TextStackProps) {
+  return (
+    <div className={cn("flex flex-col gap-0.5", className)}>
+      <span className="text-caption-light text-[var(--color-text-default)]">{primary}</span>
+      {secondary && (
+        <span className="text-caption-sm-light text-[var(--color-text-muted)]">{secondary}</span>
+      )}
+    </div>
+  )
+}
+
+// ── MonoCell ──────────────────────────────────────────────────────────────────
+// Single-line monospace text. Use for IDs, codes, hashes.
+
+interface MonoCellProps {
+  children: React.ReactNode
+  className?: string
+}
+
+function MonoCell({ children, className }: MonoCellProps) {
+  return (
+    <span
+      className={cn(
+        "text-body-sm-light text-[var(--color-text-default)]",
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+// ── AmountCell ────────────────────────────────────────────────────────────────
+// Right-aligned numeric/currency value.
+
+interface AmountCellProps {
+  children: React.ReactNode
+  className?: string
+}
+
+function AmountCell({ children, className }: AmountCellProps) {
+  return (
+    <span
+      className={cn(
+        "text-body-sm text-[var(--color-text-default)] tabular-nums tracking-tight",
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+// ── BadgeCell ─────────────────────────────────────────────────────────────────
+// Centered wrapper for one or more badges inside a table cell.
+
+interface BadgeCellProps {
+  children: React.ReactNode
+  className?: string
+}
+
+function BadgeCell({ children, className }: BadgeCellProps) {
+  return (
+    <div className={cn("flex items-center gap-1", className)}>{children}</div>
+  )
+}
+
+// ── ActionCell ────────────────────────────────────────────────────────────────
+// Flex row for action buttons inside a table cell.
+
+interface ActionCellProps {
+  children: React.ReactNode
+  className?: string
+}
+
+function ActionCell({ children, className }: ActionCellProps) {
+  return (
+    <div className={cn("flex items-center gap-1", className)}>{children}</div>
+  )
+}
+
+export { TextStack, MonoCell, AmountCell, BadgeCell, ActionCell }
+export type {
+  TextStackProps,
+  MonoCellProps,
+  AmountCellProps,
+  BadgeCellProps,
+  ActionCellProps,
+}

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }