@strategicos/ui 0.4.1 → 0.6.0

package/src/components/sheet.tsx

@@ -45,14 +45,26 @@ function SheetOverlay({
   )
 }
 
+/** Largura máxima das gavetas laterais a partir de `sm`. No celular elas
+ *  ocupam a largura toda. */
+const sheetSizes = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-[480px]",
+  lg: "sm:max-w-[640px]",
+  xl: "sm:max-w-[800px]",
+}
+
 function SheetContent({
   className,
   children,
   side = "right",
+  size = "sm",
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
+  /** Largura das gavetas `left`/`right` a partir de `sm`: 384, 480, 640 ou 800px. */
+  size?: keyof typeof sheetSizes
   showCloseButton?: boolean
 }) {
   return (
@@ -62,7 +74,8 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-full data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-full data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          (side === "left" || side === "right") && sheetSizes[size],
           className
         )}
         {...props}

package/src/components/sidebar.tsx

@@ -27,7 +27,9 @@ import { PanelLeftIcon } from "lucide-react"
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
+// No celular o menu ocupa a tela inteira; quem usa a Sidebar põe o botão de
+// fechar no próprio cabeçalho (o X padrão do Sheet fica escondido).
+const SIDEBAR_WIDTH_MOBILE = "100%"
 const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
@@ -195,8 +197,8 @@ function Sidebar({
           side={side}
         >
           <SheetHeader className="sr-only">
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+            <SheetTitle>Menu</SheetTitle>
+            <SheetDescription>Navegação principal.</SheetDescription>
           </SheetHeader>
           <div className="flex h-full w-full flex-col">{children}</div>
         </SheetContent>

package/src/components/stat.tsx

@@ -0,0 +1,65 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils.js"
+import { Badge } from "./badge.js"
+
+/**
+ * Indicador numérico, como os "StatsGrid" do Mantine: rótulo, valor em
+ * destaque, contexto e, opcionalmente, um selo de variação e um ícone.
+ *
+ *   <Stat
+ *     label="Total após a reforma"
+ *     value="R$ 1.890.000"
+ *     description="2024 — primeira fase"
+ *     delta="−R$ 560k"
+ *     deltaTone="success"
+ *     icon={<TrendingDown />}
+ *   />
+ *
+ * Use num grid (ex.: `grid gap-4 sm:grid-cols-2 xl:grid-cols-4`).
+ */
+function Stat({
+  label,
+  value,
+  description,
+  delta,
+  deltaTone = "secondary",
+  icon,
+  className,
+  ...props
+}: Omit<React.ComponentProps<"div">, "children"> & {
+  label: React.ReactNode
+  value: React.ReactNode
+  description?: React.ReactNode
+  /** Variação ou etiqueta curta, num selo. */
+  delta?: React.ReactNode
+  deltaTone?: "secondary" | "success" | "warning" | "destructive" | "info"
+  icon?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="stat"
+      className={cn("flex flex-col gap-1 rounded-lg border border-border bg-card p-4 shadow-card", className)}
+      {...props}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <p className="text-sm text-muted-foreground">{label}</p>
+        {icon && (
+          <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&_svg]:size-4">
+            {icon}
+          </span>
+        )}
+      </div>
+      <p className="text-2xl leading-tight font-semibold text-foreground tabular-nums">{value}</p>
+      {(description || delta) && (
+        <div className="mt-1 flex flex-wrap items-center gap-2">
+          {/* normal-case: o Badge é em caixa alta, o que distorce valores ("p.p." → "P.P."). */}
+          {delta && <Badge variant={deltaTone} className="normal-case">{delta}</Badge>}
+          {description && <span className="text-xs text-muted-foreground">{description}</span>}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { Stat }