minka-ds 0.3.10 → 0.3.12

package/package.json

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

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/date-time-range-picker.tsx

@@ -29,32 +29,37 @@ export function DateTimeRangePicker({
   const range: DateRange | undefined =
     value?.from ? { from: value.from, to: value.to } : undefined
 
-  // A range is "complete" once from and to differ (or a real end was picked).
-  const isComplete = Boolean(value?.from && value?.to && value.from.getTime() !== value.to.getTime())
+  // `anchor` is the source of truth for selection phase:
+  //   anchor === null → no active pick (nothing selected, or a complete range)
+  //   anchor !== null → first date is set, waiting for the second click
+  // This avoids the ambiguity of inferring phase from `from === to`.
+  const [anchor, setAnchor] = React.useState<Date | null>(null)
 
-  function handleRangeSelect(
-    selected: DateRange | undefined,
-    selectedDay: Date,
-  ) {
-    // If a complete range already exists, any click starts a brand-new range
-    // anchored on the clicked day — instead of extending the old one. This also
-    // frees the user from the max-range cap that was anchored on the old `from`.
-    if (isComplete) {
-      onChange({
-        from: selectedDay,
-        to: selectedDay,
-        startTime: value?.startTime ?? "",
-        endTime:   value?.endTime   ?? "",
-      })
+  function handleDay(day: Date) {
+    const startTime = value?.startTime ?? ""
+    const endTime   = value?.endTime   ?? ""
+
+    // Picking the second date.
+    if (anchor) {
+      const spanMs    = Math.abs(day.getTime() - anchor.getTime())
+      const withinCap = maxRangeDays == null || spanMs <= maxRangeDays * 86_400_000
+      if (withinCap) {
+        // Complete the range (order endpoints; can extend backward or forward).
+        const from = day < anchor ? day : anchor
+        const to   = day < anchor ? anchor : day
+        setAnchor(null)
+        onChange({ from, to, startTime, endTime })
+      } else {
+        // Outside the cap → treat as a fresh start anchored on the clicked day.
+        setAnchor(day)
+        onChange({ from: day, to: day, startTime, endTime })
+      }
       return
     }
-    if (!selected?.from) { onChange(null); return }
-    onChange({
-      from: selected.from,
-      to: selected.to ?? selected.from,
-      startTime: value?.startTime ?? "",
-      endTime:   value?.endTime   ?? "",
-    })
+
+    // No active pick (fresh, or restarting from a complete range).
+    setAnchor(day)
+    onChange({ from: day, to: day, startTime, endTime })
   }
 
   function handleStartTime(e: React.ChangeEvent<HTMLInputElement>) {
@@ -67,14 +72,6 @@ export function DateTimeRangePicker({
     onChange({ ...value, endTime: e.target.value })
   }
 
-  // Only cap the calendar while the user is picking the second date (from set,
-  // range not yet complete). Once complete, all dates stay clickable so a fresh
-  // click elsewhere can start a new range.
-  const disabledAfter =
-    maxRangeDays && range?.from && !isComplete
-      ? { after: new Date(range.from.getTime() + maxRangeDays * 86_400_000) }
-      : undefined
-
   return (
     <div className={cn(
       "[border-radius:var(--radius-card)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] overflow-hidden w-fit",
@@ -85,8 +82,17 @@ export function DateTimeRangePicker({
         numberOfMonths={1}
         captionLayout="label"
         selected={range}
-        onSelect={handleRangeSelect}
-        disabled={disabledAfter}
+        onSelect={(_, selectedDay) => handleDay(selectedDay)}
+        // While picking the second date, soften days outside the ±maxRangeDays
+        // window — a visual hint of the recommended span. They stay clickable
+        // (clicking one re-anchors) and hover still works; this is a hint, not
+        // a block.
+        modifiers={
+          anchor && maxRangeDays != null
+            ? { outOfRange: (d: Date) => Math.abs(d.getTime() - anchor.getTime()) > maxRangeDays * 86_400_000 }
+            : undefined
+        }
+        modifiersClassNames={{ outOfRange: "text-[var(--color-text-hint)]" }}
       />
       <div className="border-t border-[var(--color-border-default)] px-4 py-3 flex flex-col gap-3">
         <div className="flex flex-col gap-1.5">

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"