minka-ds 0.2.3 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -95,11 +95,47 @@ function ActionCell({ children, className }: ActionCellProps) {
|
|
|
95
95
|
)
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
|
|
98
|
+
// ── StatusCell ────────────────────────────────────────────────────────────────
|
|
99
|
+
// Dot + label status indicator. Use instead of badges for table status columns.
|
|
100
|
+
|
|
101
|
+
type StatusCellVariant = "success" | "warning" | "error" | "neutral"
|
|
102
|
+
|
|
103
|
+
interface StatusCellProps {
|
|
104
|
+
variant: StatusCellVariant
|
|
105
|
+
children: React.ReactNode
|
|
106
|
+
className?: string
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
const STATUS_DOT: Record<StatusCellVariant, string> = {
|
|
110
|
+
success: "bg-[var(--primitive-green-500)]",
|
|
111
|
+
warning: "bg-[var(--primitive-yellow-300)]",
|
|
112
|
+
error: "bg-[var(--primitive-red-500)]",
|
|
113
|
+
neutral: "bg-[var(--color-text-disabled)]",
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
const STATUS_TEXT: Record<StatusCellVariant, string> = {
|
|
117
|
+
success: "text-[var(--primitive-green-700)]",
|
|
118
|
+
warning: "text-[var(--color-text-default)]",
|
|
119
|
+
error: "text-[var(--color-text-default)]",
|
|
120
|
+
neutral: "text-[var(--color-text-disabled)]",
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
function StatusCell({ variant, children, className }: StatusCellProps) {
|
|
124
|
+
return (
|
|
125
|
+
<span className={cn("inline-flex items-center gap-1.5 text-body-sm", STATUS_TEXT[variant], className)}>
|
|
126
|
+
<span className={cn("size-1.5 rounded-full shrink-0", STATUS_DOT[variant])} />
|
|
127
|
+
{children}
|
|
128
|
+
</span>
|
|
129
|
+
)
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
export { TextStack, DataCell, AmountCell, BadgeCell, ActionCell, StatusCell }
|
|
99
133
|
export type {
|
|
100
134
|
TextStackProps,
|
|
101
135
|
DataCellProps,
|
|
102
136
|
AmountCellProps,
|
|
103
137
|
BadgeCellProps,
|
|
104
138
|
ActionCellProps,
|
|
139
|
+
StatusCellProps,
|
|
140
|
+
StatusCellVariant,
|
|
105
141
|
}
|
|
@@ -31,6 +31,7 @@ const tabsListVariants = cva(
|
|
|
31
31
|
variants: {
|
|
32
32
|
variant: {
|
|
33
33
|
default: "[border-radius:var(--radius-card)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] shadow-xs",
|
|
34
|
+
subtle: "[border-radius:var(--radius-card)] border border-[var(--color-border-default)] bg-[var(--color-bg-base)]",
|
|
34
35
|
line: "gap-1 rounded-none bg-transparent",
|
|
35
36
|
},
|
|
36
37
|
},
|
|
@@ -72,6 +73,8 @@ function TabsTrigger({
|
|
|
72
73
|
"disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
|
|
73
74
|
// default variant — active tab gets raised surface
|
|
74
75
|
"group-data-[variant=default]/tabs-list:data-[state=active]:bg-[var(--color-bg-inverted)] group-data-[variant=default]/tabs-list:data-[state=active]:text-[var(--color-bg-raised)] group-data-[variant=default]/tabs-list:data-[state=active]:shadow-[var(--shadow-card)]",
|
|
76
|
+
// subtle variant — active tab gets raised bg with default text, no inversion
|
|
77
|
+
"group-data-[variant=subtle]/tabs-list:data-[state=active]:bg-[var(--color-bg-raised)] group-data-[variant=subtle]/tabs-list:data-[state=active]:text-[var(--color-text-default)] group-data-[variant=subtle]/tabs-list:data-[state=active]:shadow-xs",
|
|
75
78
|
// line variant — active tab is transparent, underline indicator
|
|
76
79
|
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:text-[var(--color-text-default)] group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
|
|
77
80
|
// underline indicator for line variant
|