@motor-hero/ui-kit 0.40.0 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-hero/ui-kit",
-  "version": "0.40.0",
+  "version": "0.43.0",
   "description": "Componentes React reutilizáveis para o ecossistema MotorHero — shadcn/ui + Tailwind CSS v4",
   "author": "MotorHero",
   "license": "UNLICENSED",

package/src/components/date-picker.tsx

@@ -16,10 +16,13 @@ const MASK_REPLACEMENT = { _: /\d/ }
 const DATE_FORMAT = "dd/MM/yyyy"
 const TIME_FORMAT = "HH:mm"
 const DATE_VALUE_FORMAT = "yyyy-MM-dd"
+const DATETIME_VALUE_FORMAT = "yyyy-MM-dd'T'HH:mm"
 
 export interface DatePickerProps {
-  /** `DatePicker`: data pura `"yyyy-MM-dd"`, sem conversão de fuso. `DateTimePicker`:
-   *  ISO UTC completo (`...Z`). `""`/`undefined` = sem valor. */
+  /** `DatePicker`: data pura `"yyyy-MM-dd"`. `DateTimePicker`: hora de parede
+   *  `"yyyy-MM-ddTHH:mm"` — os dígitos digitados, tal qual. Nenhum dos dois
+   *  passa por conversão de fuso: o significado (Brasília, local, UTC) é
+   *  decisão do consumidor. `""`/`undefined` = sem valor. */
   value?: string
   onChange: (value: string) => void
   placeholder?: string
@@ -60,8 +63,8 @@ function dateOnlyToDate(value: string | undefined): Date | undefined {
 
 function dateTimeToDate(value: string | undefined): Date | undefined {
   if (!value) return undefined
-  const parsed = new Date(value)
-  return Number.isNaN(parsed.getTime()) ? undefined : parsed
+  const parsed = parse(value, DATETIME_VALUE_FORMAT, new Date())
+  return isValid(parsed) ? parsed : undefined
 }
 
 function displayFor(value: string | undefined, withTime: boolean): string {
@@ -196,7 +199,7 @@ function DatePickerImpl({
     if (!time) return
     const combined = new Date(date)
     combined.setHours(time.getHours(), time.getMinutes(), 0, 0)
-    onChange(combined.toISOString())
+    onChange(format(combined, DATETIME_VALUE_FORMAT))
     setOpen(false)
   }
 

package/src/components/highlight-pill.tsx

@@ -0,0 +1,43 @@
+import type { CSSProperties, ReactNode } from "react"
+import { cn } from "../lib/utils"
+
+export interface HighlightPillProps {
+  /** Pill background. Falls back to the neutral/muted status token when omitted. */
+  backgroundColor?: string
+  /** Pill text color. Falls back to the neutral/muted status token when omitted. */
+  textColor?: string
+  className?: string
+  children: ReactNode
+}
+
+/**
+ * Pílula de cor livre — `backgroundColor`/`textColor` vêm do consumidor, ao
+ * invés de um enum fechado de variantes como o `StatusBadge`. Sem eles, cai
+ * no mesmo tom neutro do `StatusBadge` (`--status-neutral-*`), servindo como
+ * o "default muted" de qualquer feature que atribua cor por entidade (ex.:
+ * cor de destaque por usuário admin, ADR 0081 do workspace IMMA).
+ */
+export function HighlightPill({
+  backgroundColor,
+  textColor,
+  className,
+  children,
+}: HighlightPillProps) {
+  const style: CSSProperties = {
+    backgroundColor:
+      backgroundColor ?? "var(--status-neutral-surface, #f3f4f6)",
+    color: textColor ?? "var(--status-neutral-text, #374151)",
+  }
+
+  return (
+    <span
+      style={style}
+      className={cn(
+        "inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium",
+        className,
+      )}
+    >
+      {children}
+    </span>
+  )
+}

package/src/index.ts

@@ -31,6 +31,8 @@ export {
 export type { FormDialogProps, FormDialogSize } from "./components/form-dialog";
 export { FormDialog, FormDialogLayout } from "./components/form-dialog";
 export { FormField } from "./components/form-field";
+export type { HighlightPillProps } from "./components/highlight-pill";
+export { HighlightPill } from "./components/highlight-pill";
 export { MobileCardList } from "./components/mobile-card-list";
 // Components
 export { ModeToggle } from "./components/mode-toggle";