minka-ds 0.3.12 → 0.4.0

package/package.json

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