minka-ds 0.4.0 → 0.4.1

package/package.json

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

package/src/components/ui/avatar.tsx

@@ -17,6 +17,8 @@ interface AvatarProps {
   size?: "sm" | "md" | "lg"
   /** Background for the initials state. Defaults to a brand color. */
   background?: string
+  /** Foreground (initials) color. Defaults to the inverse text token. */
+  color?: string
   className?: string
 }
 
@@ -25,7 +27,7 @@ function deriveInitials(name?: string): string {
   return name.trim().split(/\s+/).map(p => p[0]).join("").slice(0, 2).toUpperCase()
 }
 
-function Avatar({ src, name, initials, size = "md", background, className }: AvatarProps) {
+function Avatar({ src, name, initials, size = "md", background, color, className }: AvatarProps) {
   return (
     <div
       data-slot="avatar"
@@ -34,7 +36,10 @@ function Avatar({ src, name, initials, size = "md", background, className }: Ava
         SIZE[size],
         className
       )}
-      style={{ background: src ? undefined : (background ?? "var(--color-brand-blue)") }}
+      style={{
+        background: src ? undefined : (background ?? "var(--color-brand-blue)"),
+        ...(color ? { color } : {}),
+      }}
     >
       {src
         ? <img src={src} alt={name ?? ""} className="size-full object-cover" />

package/src/components/ui/dialog.tsx

@@ -47,6 +47,44 @@ function DialogOverlay({
   )
 }
 
+type PanelPlacement = "side" | "top"
+
+/**
+ * Optional contextual panel rendered inside DialogContent. Holds supporting
+ * media or guidance (illustration, brand texture, action summary, help text).
+ * Place it as a direct child of DialogContent; the content adapts its layout.
+ *
+ * By default the panel bleeds to the dialog edges. Pass `inset` to float it
+ * inside the dialog with an 8px frame and rounded corners.
+ */
+function DialogPanel({
+  className,
+  placement = "side",
+  inset = false,
+  ...props
+}: React.ComponentProps<"div"> & { placement?: PanelPlacement; inset?: boolean }) {
+  return (
+    <div
+      data-slot="dialog-panel"
+      data-placement={placement}
+      data-inset={inset || undefined}
+      className={cn(
+        "relative flex flex-col justify-center bg-[var(--color-bg-canvas)]",
+        // inset panels are tighter — the 8px frame already adds breathing room
+        inset ? "p-4" : "p-6",
+        // side: a column down the left; top: a banner across the top
+        placement === "side" ? "shrink-0 sm:w-2/5" : "min-h-32",
+        // inset: float inside the dialog with an 8px frame on the dialog-facing
+        // edges only — the interior edge stays flush, the body padding separates
+        inset && "overflow-hidden [border-radius:var(--radius-card)]",
+        inset && (placement === "side" ? "ml-2 my-2" : "mt-2 mx-2"),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
 function DialogContent({
   className,
   children,
@@ -57,31 +95,66 @@ function DialogContent({
   showCloseButton?: boolean
   container?: HTMLElement | null
 }) {
+  // Detect an optional DialogPanel child and split it out from the body.
+  const childArray = React.Children.toArray(children)
+  const panel = childArray.find(
+    (c): c is React.ReactElement<{ placement?: PanelPlacement; children?: React.ReactNode }> =>
+      React.isValidElement(c) && (c.type as { displayName?: string })?.displayName === "DialogPanel"
+  )
+  const body = childArray.filter(c => c !== panel)
+  const placement = panel?.props.placement ?? "side"
+  const hasPanel = Boolean(panel)
+
+  const closeButton = showCloseButton && (
+    <DialogPrimitive.Close asChild>
+      <Button
+        data-slot="dialog-close"
+        variant="ghost"
+        size="icon-sm"
+        aria-label="Close"
+        className="absolute top-5 right-5 z-10 translate-y-[5px] text-current opacity-70 hover:opacity-100"
+      >
+        <XIcon />
+      </Button>
+    </DialogPrimitive.Close>
+  )
+
   return (
     <DialogPortal container={container}>
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
+        data-panel={hasPanel ? placement : undefined}
         className={cn(
-          "fixed top-[50%] left-[50%] [z-index:var(--z-modal)] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 [border-radius:var(--radius-modal)] border border-[var(--color-border-default)] bg-[var(--color-bg-overlay)] p-6 shadow-[var(--shadow-modal)] duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] [z-index:var(--z-modal)] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-hidden [border-radius:var(--radius-modal)] border border-[var(--color-border-default)] bg-[var(--color-bg-overlay)] shadow-[var(--shadow-modal)] duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          // layout: plain (padded grid) vs panelled (flex split, panel bleeds to edges)
+          hasPanel
+            ? placement === "side"
+              ? "flex flex-col sm:flex-row sm:max-w-2xl"
+              : "flex flex-col"
+            : "grid gap-4 p-5",
           className
         )}
         {...props}
       >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
+        {/* top: close lives inside the panel so it inherits the panel's foreground */}
+        {placement === "top" && panel
+          ? React.cloneElement(panel, {}, panel.props.children, closeButton)
+          : panel}
+        {hasPanel ? (
+          <div data-slot="dialog-body" className="relative flex flex-1 flex-col gap-4 p-5">
+            {body}
+          </div>
+        ) : (
+          body
         )}
+        {/* side / no panel: close sits over the content body */}
+        {placement !== "top" && closeButton}
       </DialogPrimitive.Content>
     </DialogPortal>
   )
 }
+DialogPanel.displayName = "DialogPanel"
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -127,7 +200,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-heading-4", className)}
+      className={cn("text-heading-2-serif", className)}
       {...props}
     />
   )
@@ -154,6 +227,7 @@ export {
   DialogFooter,
   DialogHeader,
   DialogOverlay,
+  DialogPanel,
   DialogPortal,
   DialogTitle,
   DialogTrigger,

package/src/components/ui/flow-diagram.tsx

@@ -0,0 +1,202 @@
+"use client"
+
+import * as React from "react"
+
+export interface FlowNode {
+  /** Node label (party name). */
+  name: string
+  /** Current balance; null when hidden (e.g. balance not shown). */
+  current: number | null
+  /** Projected balance after the movement; null when no amount yet or hidden. */
+  after: number | null
+  /** Shown in place of a balance when `current` is null (e.g. "Master balance"). */
+  subtitle?: string
+  /** True when this node is an unfilled slot (e.g. nothing selected yet). */
+  empty?: boolean
+}
+
+type FormatFn = (n: number) => string
+const defaultFormat: FormatFn = (n) => "$" + n.toLocaleString("en-US")
+
+/**
+ * Exact-dash rounded border via an SVG rect overlay (CSS border-dashed has a
+ * fixed dash pattern that can't be sized). 6px dash / 6px gap. Fills its
+ * relatively-positioned parent.
+ */
+function DashedBorder({ radius = 10 }: { radius?: number }) {
+  return (
+    <svg className="pointer-events-none absolute inset-0 size-full" aria-hidden>
+      <rect
+        x="0.75" y="0.75"
+        width="100%" height="100%"
+        rx={radius} ry={radius}
+        fill="none"
+        stroke="var(--color-border-default)"
+        strokeWidth="1.5"
+        strokeDasharray="6 6"
+        style={{ width: "calc(100% - 1.5px)", height: "calc(100% - 1.5px)" }}
+      />
+    </svg>
+  )
+}
+
+export interface FlowDiagramProps {
+  /** Top node (fixed position). */
+  top: FlowNode
+  /** Bottom node (fixed position). */
+  bottom: FlowNode
+  /** The amount flowing; 0 = idle/empty state. */
+  amount: number
+  /** Flow direction — arrow + sheen travel this way. */
+  direction: "up" | "down"
+  /** Unit shown beside the amount. */
+  currency?: string
+  /** Custom amount/balance formatter (defaults to "$" + en-US grouping). */
+  format?: FormatFn
+  /** Optional content rendered below the diagram (e.g. a reference pill). */
+  footer?: React.ReactNode
+}
+
+/**
+ * Vertical flow diagram for a value movement between two parties. Positions are
+ * FIXED (`top` / `bottom`); only the `direction` changes which way the arrow
+ * points and the light sheen travels. Each node shows its current balance,
+ * which demotes to a "was …" caption as the new (after) balance slides in once
+ * an amount is entered. Unfilled nodes render as a dashed empty slot. Neutral
+ * styling — suited to neutral transfers.
+ */
+function FlowDiagram({ top, bottom, amount, direction, currency = "COP", format = defaultFormat, footer }: FlowDiagramProps) {
+  const active = amount > 0
+  const glintKey = active ? amount : 0
+
+  return (
+    <div data-slot="flow-diagram" className="flex flex-col items-center">
+      <style>{`
+        @keyframes flow-slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes flow-pop { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+      `}</style>
+
+      <FlowNodeCard key={top.empty ? "top-empty" : `top-${top.name}`} node={top} active={active} format={format} pop />
+
+      <Connector active={active} direction={direction} amount={amount} currency={currency} format={format} glintKey={glintKey} />
+
+      <FlowNodeCard key={bottom.empty ? "bottom-empty" : `bottom-${bottom.name}`} node={bottom} active={active} format={format} pop />
+
+      {footer && <div className="mt-4">{footer}</div>}
+    </div>
+  )
+}
+
+// Full connector height: enough for top gap + badge + bottom gap.
+const CONNECTOR_H = 80
+
+function Connector({
+  active, direction, amount, currency, format, glintKey,
+}: {
+  active: boolean
+  direction: "up" | "down"
+  amount: number
+  currency: string
+  format: FormatFn
+  glintKey: number
+}) {
+  const gid = React.useId()
+  const H = CONNECTOR_H
+  const headUp = direction === "up"
+
+  const head = headUp ? "M2 6 L7 0 L12 6" : `M2 ${H - 6} L7 ${H} L12 ${H - 6}`
+  const shapes = (
+    <>
+      <line x1="7" y1="0" x2="7" y2={H} />
+      <path d={head} />
+    </>
+  )
+
+  return (
+    <div className="relative flex items-center justify-center my-1" style={{ height: H }}>
+      <svg width="14" height={H} viewBox={`0 0 14 ${H}`} className="block overflow-visible" aria-hidden>
+        <g stroke={active ? "var(--color-text-default)" : "var(--color-border-strong)"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none">
+          {shapes}
+        </g>
+        {active && (
+          <>
+            <defs>
+              <linearGradient id={gid} gradientUnits="userSpaceOnUse" x1="7" y1="0" x2="7" y2="18">
+                <stop offset="0%"   stopColor="var(--color-bg-raised)" stopOpacity="0" />
+                <stop offset="50%"  stopColor="var(--color-bg-raised)" stopOpacity="0.5" />
+                <stop offset="100%" stopColor="var(--color-bg-raised)" stopOpacity="0" />
+                <animate attributeName="y1" values={direction === "down" ? `-20;${H}` : `${H};-20`} dur="2.4s" repeatCount="indefinite" />
+                <animate attributeName="y2" values={direction === "down" ? `-2;${H + 18}` : `${H + 18};-2`} dur="2.4s" repeatCount="indefinite" />
+              </linearGradient>
+            </defs>
+            <g stroke={`url(#${gid})`} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none">
+              {shapes}
+            </g>
+          </>
+        )}
+      </svg>
+
+      <span
+        key={glintKey}
+        className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 px-2.5 py-1 [border-radius:var(--radius-badge)] text-label-mono transition-colors duration-300 ${
+          active
+            ? "bg-[var(--color-bg-inverted)] text-[var(--color-text-inverse)]"
+            : "bg-[var(--color-bg-base)] text-[var(--color-text-hint)]"
+        }`}
+      >
+        {!active && <DashedBorder radius={16} />}
+        {active ? format(amount) : format(0)}
+        <span className={`text-caption ml-1 ${active ? "text-[var(--color-text-inverse-muted)]" : "text-[var(--color-text-muted)]"}`}>{currency}</span>
+      </span>
+    </div>
+  )
+}
+
+function FlowNodeCard({ node, active, format, pop }: { node: FlowNode; active: boolean; format: FormatFn; pop?: boolean }) {
+  const showAfter = active && node.after !== null
+  const overdrawn = node.after !== null && node.after < 0
+
+  if (node.empty) {
+    return (
+      <div className="relative flex flex-col items-center justify-center gap-1 [border-radius:var(--radius-card)] bg-[var(--color-bg-base)] px-5 py-3 text-center min-w-[180px] min-h-[64px]">
+        <DashedBorder radius={10} />
+        <span className="text-body-sm text-[var(--color-text-hint)]">{node.name}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className="flex flex-col items-center gap-1 [border-radius:var(--radius-card)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] px-5 py-3 text-center min-w-[180px]"
+      style={pop ? { animation: "flow-pop .18s cubic-bezier(0.16,1,0.3,1) both" } : undefined}
+    >
+      <span className="text-body-sm text-[var(--color-text-default)]">{node.name}</span>
+
+      {node.current === null ? (
+        node.subtitle ? <span className="text-caption text-[var(--color-text-muted)]">{node.subtitle}</span> : null
+      ) : (
+        <div className="flex flex-col items-center leading-none">
+          <span
+            className={`origin-bottom transition-all duration-300 ${
+              showAfter
+                ? "scale-[0.78] text-caption text-[var(--color-text-muted)] mb-0.5"
+                : "text-label-mono text-[var(--color-text-default)]"
+            }`}
+          >
+            {showAfter ? `was ${format(node.current)}` : format(node.current)}
+          </span>
+          {showAfter && (
+            <span
+              className={`text-label-mono ${overdrawn ? "text-[var(--color-feedback-error)]" : "text-[var(--color-text-default)]"}`}
+              style={{ animation: "flow-slide-in .3s ease both" }}
+            >
+              {format(node.after!)}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { FlowDiagram }

package/src/index.ts

@@ -43,6 +43,7 @@ export * from "./components/ui/tab-count"
 export * from "./components/ui/tabs"
 export * from "./components/ui/textarea"
 export * from "./components/ui/tooltip"
+export * from "./components/ui/flow-diagram"
 
 // Brand textures + logo
 export * from "./textures"