minka-ds 0.3.12 → 0.4.1

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "minka-ds",
-  "version": "0.3.12",
+  "version": "0.4.1",
   "description": "Minka product design system — tokenized component library",
   "license": "MIT",
   "files": [
     "src",
-    "tokens"
+    "tokens",
+    "!src/textures/*.svg"
   ],
   "exports": {
     ".": "./src/index.ts",

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/components/ui/input-otp.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface InputOTPProps {
+  /** Number of digit boxes. */
+  length?: number
+  value: string
+  onChange: (value: string) => void
+  /** Fires when all boxes are filled. */
+  onComplete?: (value: string) => void
+  invalid?: boolean
+  disabled?: boolean
+  autoFocus?: boolean
+  className?: string
+}
+
+function InputOTP({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  invalid,
+  disabled,
+  autoFocus,
+  className,
+}: InputOTPProps) {
+  const refs = React.useRef<(HTMLInputElement | null)[]>([])
+  const digits = Array.from({ length }, (_, i) => value[i] ?? "")
+
+  function setAt(index: number, char: string) {
+    const next = digits.slice()
+    next[index] = char
+    const joined = next.join("").slice(0, length)
+    onChange(joined)
+    if (joined.length === length) onComplete?.(joined)
+  }
+
+  function handleChange(index: number, raw: string) {
+    const char = raw.replace(/\D/g, "").slice(-1) // keep last typed digit
+    if (!char) return
+    setAt(index, char)
+    if (index < length - 1) refs.current[index + 1]?.focus()
+  }
+
+  function handleKeyDown(index: number, e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Backspace") {
+      e.preventDefault()
+      if (digits[index]) {
+        setAt(index, "")
+      } else if (index > 0) {
+        refs.current[index - 1]?.focus()
+        setAt(index - 1, "")
+      }
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault()
+      refs.current[index - 1]?.focus()
+    } else if (e.key === "ArrowRight" && index < length - 1) {
+      e.preventDefault()
+      refs.current[index + 1]?.focus()
+    }
+  }
+
+  function handlePaste(e: React.ClipboardEvent) {
+    e.preventDefault()
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length)
+    if (!pasted) return
+    onChange(pasted)
+    if (pasted.length === length) onComplete?.(pasted)
+    refs.current[Math.min(pasted.length, length - 1)]?.focus()
+  }
+
+  return (
+    <div data-slot="input-otp" className={cn("flex items-center gap-2", className)} onPaste={handlePaste}>
+      {digits.map((d, i) => (
+        <input
+          key={i}
+          ref={el => { refs.current[i] = el }}
+          type="text"
+          inputMode="numeric"
+          autoComplete={i === 0 ? "one-time-code" : "off"}
+          maxLength={1}
+          value={d}
+          disabled={disabled}
+          autoFocus={autoFocus && i === 0}
+          aria-invalid={invalid || undefined}
+          aria-label={`Digit ${i + 1}`}
+          onChange={e => handleChange(i, e.target.value)}
+          onKeyDown={e => handleKeyDown(i, e)}
+          onFocus={e => e.target.select()}
+          className={cn(
+            "size-11 text-center text-heading-4 [border-radius:var(--radius-input)] border bg-[var(--color-bg-raised)] outline-none transition-[color,box-shadow]",
+            "border-[var(--color-border-default)]",
+            "focus-visible:border-[var(--color-border-focus)] focus-visible:ring-[3px] focus-visible:ring-[var(--color-border-focus)]/50",
+            "aria-invalid:border-[var(--color-border-error)] aria-invalid:ring-[3px] aria-invalid:ring-[var(--color-border-error)]/20",
+            "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+          )}
+        />
+      ))}
+    </div>
+  )
+}
+
+export { InputOTP }
+export type { InputOTPProps }

package/src/index.ts

@@ -27,6 +27,7 @@ export * from "./components/ui/filter-combobox"
 export * from "./components/ui/search-bar"
 export * from "./components/ui/input"
 export * from "./components/ui/input-group"
+export * from "./components/ui/input-otp"
 export * from "./components/ui/kbd"
 export * from "./components/ui/label"
 export * from "./components/ui/pagination"
@@ -42,3 +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"

package/src/textures/brand-texture.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { TEXTURES, type TextureName } from "./index"
+
+/** The five sanctioned brand pairs. */
+export type BrandPair =
+  | "yellow-darkforest"
+  | "rose-coral"
+  | "blue-navy"
+  | "beige-bronze"
+  | "gray-black"
+
+export interface BrandTextureProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Which texture motif to render. */
+  name: TextureName
+  /** Which brand pair colors it. */
+  pair: BrandPair
+  /**
+   * Swap which member is ink vs background. By default the pair's dark member
+   * is the ink (shapes) and the light member is the background.
+   */
+  reverse?: boolean
+  /**
+   * How the motif fills the box. `cover` (default) crops to fill — right for
+   * edge-to-edge patterns; `contain` fits the whole motif without cropping —
+   * right for the logo or any motif that must stay intact.
+   */
+  fit?: "cover" | "contain"
+}
+
+/**
+ * Renders a brand texture colored by a sanctioned pair. Sets --texture-ink and
+ * --texture-bg on a wrapper; the inlined SVG reads them. The wrapper clips the
+ * texture, so size it via className (e.g. `h-40 w-full`).
+ */
+function BrandTexture({ name, pair, reverse, fit = "cover", className, style, ...props }: BrandTextureProps) {
+  const Texture = TEXTURES[name]
+  const light = `var(--color-pair-${pair}-light)`
+  const dark  = `var(--color-pair-${pair}-dark)`
+
+  const vars = {
+    "--texture-ink": reverse ? light : dark,
+    "--texture-bg":  reverse ? dark : light,
+    backgroundColor: "var(--texture-bg)",
+  } as React.CSSProperties
+
+  const par = fit === "contain" ? "xMidYMid meet" : "xMidYMid slice"
+
+  return (
+    <div
+      className={cn("relative overflow-hidden", className)}
+      style={{ ...vars, ...style }}
+      {...props}
+    >
+      <Texture className="absolute inset-0 size-full" preserveAspectRatio={par} />
+    </div>
+  )
+}
+
+export { BrandTexture }