minka-ds 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minka-ds",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Minka product design system — tokenized component library",
   "license": "MIT",
   "files": [

package/src/components/ui/cell.tsx

@@ -95,11 +95,47 @@ function ActionCell({ children, className }: ActionCellProps) {
   )
 }
 
-export { TextStack, DataCell, AmountCell, BadgeCell, ActionCell }
+// ── StatusCell ────────────────────────────────────────────────────────────────
+// Dot + label status indicator. Use instead of badges for table status columns.
+
+type StatusCellVariant = "success" | "warning" | "error" | "neutral"
+
+interface StatusCellProps {
+  variant: StatusCellVariant
+  children: React.ReactNode
+  className?: string
+}
+
+const STATUS_DOT: Record<StatusCellVariant, string> = {
+  success: "bg-[var(--primitive-green-500)]",
+  warning: "bg-[var(--primitive-yellow-300)]",
+  error:   "bg-[var(--primitive-red-500)]",
+  neutral: "bg-[var(--color-text-disabled)]",
+}
+
+const STATUS_TEXT: Record<StatusCellVariant, string> = {
+  success: "text-[var(--primitive-green-700)]",
+  warning: "text-[var(--color-text-default)]",
+  error:   "text-[var(--color-text-default)]",
+  neutral: "text-[var(--color-text-disabled)]",
+}
+
+function StatusCell({ variant, children, className }: StatusCellProps) {
+  return (
+    <span className={cn("inline-flex items-center gap-1.5 text-body-sm", STATUS_TEXT[variant], className)}>
+      <span className={cn("size-1.5 rounded-full shrink-0", STATUS_DOT[variant])} />
+      {children}
+    </span>
+  )
+}
+
+export { TextStack, DataCell, AmountCell, BadgeCell, ActionCell, StatusCell }
 export type {
   TextStackProps,
   DataCellProps,
   AmountCellProps,
   BadgeCellProps,
   ActionCellProps,
+  StatusCellProps,
+  StatusCellVariant,
 }

package/src/components/ui/sidebar.tsx

@@ -474,7 +474,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden [border-radius:var(--radius-button)] p-2 text-left text-body-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-[var(--color-bg-raised)] data-[active=true]:font-bold data-[active=true]:text-[var(--color-text-default)] data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden [border-radius:var(--radius-button)] p-2 text-left text-body-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-[var(--color-bg-raised)] data-[active=true]:ring-1 data-[active=true]:ring-[var(--color-border-default)] data-[active=true]:font-bold data-[active=true]:text-[var(--color-text-default)] data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -687,7 +687,7 @@ function SidebarMenuSubButton({
       data-active={isActive}
       className={cn(
         "flex h-8 min-w-0 items-center gap-2 overflow-hidden [border-radius:var(--radius-button)] px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-[var(--color-bg-raised)] data-[active=true]:font-bold data-[active=true]:text-[var(--color-text-default)]",
+        "data-[active=true]:bg-[var(--color-bg-raised)] data-[active=true]:ring-1 data-[active=true]:ring-[var(--color-border-default)] data-[active=true]:font-bold data-[active=true]:text-[var(--color-text-default)]",
         size === "sm" && "text-caption",
         size === "md" && "text-body-sm",
         "group-data-[collapsible=icon]:hidden",

package/tokens/primitives.css

@@ -7,9 +7,9 @@
 :root {
   /* --- Neutral scale --- */
   --primitive-neutral-0:    #ffffff;
-  --primitive-neutral-50:   #eeeeee;
-  --primitive-neutral-100:  #e6e6e6;
-  --primitive-neutral-200:  #d9d9d9;
+  --primitive-neutral-50:   #f5f5f5;
+  --primitive-neutral-100:  #eeeeee;
+  --primitive-neutral-200:  #e0e0e0;
   --primitive-neutral-300:  #c7c7c7;
   --primitive-neutral-400:  #b6b6b6;
   --primitive-neutral-500:  #a1a1a1;