@strategicos/ui 0.0.0-stage → 0.1.0

package/src/components/sonner.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/components/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils.js"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/tabs.tsx

@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils.js"
+
+/**
+ * Abas do app — shadcn/Radix, com o visual do app. O Radix dá o comportamento de
+ * tablist: `role`/`aria-selected`/`aria-controls`, setas (← → na horizontal,
+ * ↑ ↓ na vertical) e tabIndex roving (só a aba ativa entra no Tab).
+ *
+ * Variantes da lista (`<TabsList variant>`):
+ * - `line` — sublinhada. O padrão para NAVEGAR entre painéis de conteúdo
+ *   distintos (Comentários | Histórico, Meus imports | Acervo). Na orientação
+ *   vertical vira uma lista lateral (configurações).
+ * - `default` — seletor segmentado (pill sobre fundo cinza), para escolher um
+ *   MODO que transforma o mesmo conteúdo (Ações | Tarefas no kanban). Evite-o
+ *   dentro de diálogo: o item ativo usa a cor de fundo da página, que sobre a
+ *   superfície do diálogo (branca) fica mais escura — elevação invertida.
+ *
+ * Para esconder o rótulo das abas inativas no mobile, use no rótulo:
+ * `className="hidden group-data-active/tabs-trigger:inline sm:inline"`.
+ */
+
+type Orientation = "horizontal" | "vertical"
+type Variant = "default" | "line"
+
+const OrientationContext = React.createContext<Orientation>("horizontal")
+const VariantContext = React.createContext<Variant>("default")
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <OrientationContext.Provider value={orientation}>
+      <TabsPrimitive.Root
+        data-slot="tabs"
+        orientation={orientation}
+        className={cn(
+          "flex gap-2",
+          orientation === "horizontal" ? "flex-col" : "flex-row",
+          className
+        )}
+        {...props}
+      />
+    </OrientationContext.Provider>
+  )
+}
+
+const tabsListVariants = cva("flex text-muted-foreground", {
+  variants: {
+    variant: {
+      default: "w-fit items-center rounded-lg bg-muted p-[3px]",
+      line: "gap-1",
+    },
+    orientation: {
+      horizontal: "",
+      vertical: "flex-col items-stretch",
+    },
+  },
+  compoundVariants: [
+    { variant: "default", orientation: "horizontal", className: "h-8" },
+    { variant: "line", orientation: "horizontal", className: "border-b border-border" },
+    { variant: "line", orientation: "vertical", className: "gap-0.5" },
+  ],
+  defaultVariants: { variant: "default", orientation: "horizontal" },
+})
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  Omit<VariantProps<typeof tabsListVariants>, "orientation">) {
+  const orientation = React.useContext(OrientationContext)
+  const v = variant ?? "default"
+  return (
+    <VariantContext.Provider value={v}>
+      <TabsPrimitive.List
+        data-slot="tabs-list"
+        data-variant={v}
+        className={cn(tabsListVariants({ variant: v, orientation }), className)}
+        {...props}
+      />
+    </VariantContext.Provider>
+  )
+}
+
+const tabsTriggerVariants = cva(
+  "group/tabs-trigger relative inline-flex cursor-pointer items-center gap-2 text-sm font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "h-full flex-1 justify-center rounded-md border border-transparent px-2 py-0.5 text-foreground/60 hover:text-foreground data-active:bg-background data-active:text-foreground data-active:shadow-sm dark:text-muted-foreground dark:data-active:border-input dark:data-active:bg-input/30",
+        line: "text-muted-foreground hover:text-foreground data-active:text-primary-strong",
+      },
+      orientation: {
+        horizontal: "",
+        vertical: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "line",
+        orientation: "horizontal",
+        className:
+          "-mb-px justify-center border-b-2 border-transparent px-3 py-2.5 data-active:border-primary-strong sm:px-4",
+      },
+      {
+        variant: "line",
+        orientation: "vertical",
+        className:
+          "w-full justify-start rounded-md px-2.5 py-1.5 text-left font-normal text-foreground/80 hover:bg-accent/60 hover:text-foreground data-active:bg-accent data-active:font-medium data-active:text-foreground",
+      },
+    ],
+    defaultVariants: { variant: "default", orientation: "horizontal" },
+  }
+)
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  const orientation = React.useContext(OrientationContext)
+  const variant = React.useContext(VariantContext)
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(tabsTriggerVariants({ variant, orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("min-w-0 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/components/textarea.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils.js"
+
+/**
+ * Campo multilinha. Espelha os tokens do <Input> — mesma borda, mesmo raio,
+ * mesmo anel de foco, mesmo tratamento de desabilitado e de aria-invalid — para
+ * que um campo de texto longo não pareça de outro sistema ao lado de um curto.
+ *
+ * Difere do Input só no que a multilinha exige: sem altura fixa, com padding
+ * vertical maior e `leading-relaxed`.
+ *
+ * Não confundir com o InlineTextarea do gerenciador: aquele é um editor inline
+ * (sem borda até o hover, salva no blur), um padrão deliberadamente diferente.
+ */
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "w-full min-w-0 resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-base leading-relaxed transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils.js"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/src/hooks/use-mobile.ts

@@ -0,0 +1,20 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+function subscribe(callback: () => void) {
+  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+  mql.addEventListener("change", callback)
+  return () => mql.removeEventListener("change", callback)
+}
+
+export function useIsMobile() {
+  // Assina a media query como um "external store" — sem setState em effect
+  // (evita o cascading render que o react-hooks/set-state-in-effect alerta) e
+  // com snapshot de servidor (false) para não quebrar o SSR/hidratação.
+  return React.useSyncExternalStore(
+    subscribe,
+    () => window.innerWidth < MOBILE_BREAKPOINT,
+    () => false,
+  )
+}

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+/** Junta classes condicionais e resolve conflitos do Tailwind (a última vence). */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/styles.css

@@ -0,0 +1,112 @@
+/* @strategicos/ui — estilos que os componentes precisam.
+ *
+ * Importe DEPOIS do tailwindcss e dos tokens:
+ *   @import "tailwindcss";
+ *   @import "@strategicos/tokens/theme.css";
+ *   @import "@strategicos/ui/styles.css";
+ *
+ * O @source abaixo faz o Tailwind do app escanear o JS compilado deste pacote.
+ * Sem ele, as classes usadas só aqui dentro (h-7.5, data-active:…) não são
+ * geradas, porque o Tailwind ignora node_modules por padrão. */
+
+@import "tw-animate-css";
+
+@source "./dist";
+
+/* Variantes de estado do Radix e utilitário no-scrollbar. Copiado do
+ * shadcn/tailwind.css para não depender do pacote `shadcn` (que é a CLI). */
+@theme inline {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(
+        --radix-accordion-content-height,
+        var(--accordion-panel-height, auto)
+      );
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(
+        --radix-accordion-content-height,
+        var(--accordion-panel-height, auto)
+      );
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+/* Custom variants */
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}