minka-ds 0.3.11 → 0.4.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "minka-ds",
-  "version": "0.3.11",
+  "version": "0.4.0",
   "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

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+const SIZE: Record<NonNullable<AvatarProps["size"]>, string> = {
+  sm: "size-7 text-caption-serif",
+  md: "size-9 text-body-sm-serif",
+  lg: "size-12 text-body-serif",
+}
+
+interface AvatarProps {
+  /** Image URL. When absent, initials (or a fallback) are shown. */
+  src?: string
+  /** Full name — used for alt text and to derive initials. */
+  name?: string
+  /** Explicit initials override; otherwise derived from `name`. */
+  initials?: string
+  size?: "sm" | "md" | "lg"
+  /** Background for the initials state. Defaults to a brand color. */
+  background?: string
+  className?: string
+}
+
+function deriveInitials(name?: string): string {
+  if (!name) return "?"
+  return name.trim().split(/\s+/).map(p => p[0]).join("").slice(0, 2).toUpperCase()
+}
+
+function Avatar({ src, name, initials, size = "md", background, className }: AvatarProps) {
+  return (
+    <div
+      data-slot="avatar"
+      className={cn(
+        "shrink-0 rounded-full flex items-center justify-center overflow-hidden text-[var(--color-text-inverse)]",
+        SIZE[size],
+        className
+      )}
+      style={{ background: src ? undefined : (background ?? "var(--color-brand-blue)") }}
+    >
+      {src
+        ? <img src={src} alt={name ?? ""} className="size-full object-cover" />
+        : <span className="leading-none">{initials ?? deriveInitials(name)}</span>}
+    </div>
+  )
+}
+
+export { Avatar }
+export type { AvatarProps }

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

@@ -7,6 +7,7 @@ import { Slot } from "radix-ui"
 
 import { useIsMobile } from "../../hooks/use-mobile"
 import { cn } from "../../lib/utils"
+import { Avatar } from "./avatar"
 import { Button } from "./button"
 import { Input } from "./input"
 import { Separator } from "./separator"
@@ -368,6 +369,38 @@ function SidebarSeparator({
   )
 }
 
+// Footer user block: avatar + name/role, with an optional trailing action
+// (e.g. a kebab dropdown trigger). Composed for the sidebar footer.
+function SidebarUser({
+  name,
+  role,
+  avatarSrc,
+  avatarBackground,
+  action,
+  className,
+}: {
+  name: string
+  role?: string
+  avatarSrc?: string
+  avatarBackground?: string
+  action?: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      data-slot="sidebar-user"
+      className={cn("flex items-center gap-2.5 px-2 py-1.5", className)}
+    >
+      <Avatar name={name} src={avatarSrc} background={avatarBackground} />
+      <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+        <span className="text-body-sm text-[var(--color-text-default)] truncate">{name}</span>
+        {role && <span className="text-caption-light text-[var(--color-text-muted)] truncate">{role}</span>}
+      </div>
+      {action}
+    </div>
+  )
+}
+
 function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -722,5 +755,6 @@ export {
   SidebarRail,
   SidebarSeparator,
   SidebarTrigger,
+  SidebarUser,
   useSidebar,
 }

package/src/index.ts

@@ -6,6 +6,7 @@ export { usePlatform } from "./hooks/use-platform"
 
 // Components
 export * from "./components/ui/alert"
+export * from "./components/ui/avatar"
 export * from "./components/ui/badge"
 export * from "./components/ui/breadcrumb"
 export * from "./components/ui/calendar"
@@ -26,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"
@@ -41,3 +43,6 @@ export * from "./components/ui/tab-count"
 export * from "./components/ui/tabs"
 export * from "./components/ui/textarea"
 export * from "./components/ui/tooltip"
+
+// 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 }