@strategicos/ui 0.6.1 → 0.7.0

package/README.md

@@ -15,7 +15,7 @@ import { cn } from "@strategicos/ui/utils"
 
 ## Componentes
 
-`accordion` · `alert` · `alert-dialog` · `avatar` · `badge` · `button` · `card` · `checkbox` · `chip` · `dialog` · `dropdown-menu` · `dropzone` · `empty-state` · `field` · `input` · `label` · `multi-select` · `page-header` · `pagination` · `password-input` · `popover` · `progress` · `segmented-control` · `select` · `separator` · `sheet` · `sidebar` · `skeleton` · `sonner` · `stat` · `switch` · `table` · `tabs` · `textarea` · `tooltip`
+`accordion` · `alert` · `alert-dialog` · `avatar` · `badge` · `breadcrumb` · `button` · `card` · `checkbox` · `chip` · `dialog` · `dropdown-menu` · `dropzone` · `empty-state` · `field` · `input` · `label` · `multi-select` · `page-header` · `pagination` · `password-input` · `popover` · `progress` · `segmented-control` · `select` · `separator` · `sheet` · `sidebar` · `skeleton` · `sonner` · `stat` · `switch` · `table` · `tabs` · `textarea` · `tooltip`
 
 Utilitários: `@strategicos/ui/utils` (`cn`) e `@strategicos/ui/hooks/use-mobile` (`useIsMobile`).
 

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+/**
+ * Caminho até a tela atual: os níveis anteriores em tom apagado (links,
+ * quando dá para voltar a eles) e o atual em destaque, separados por "/".
+ *
+ *   <Breadcrumb>
+ *     <BreadcrumbList>
+ *       <BreadcrumbItem>
+ *         <BreadcrumbLink asChild><Link href="/configuracoes">Configurações</Link></BreadcrumbLink>
+ *       </BreadcrumbItem>
+ *       <BreadcrumbSeparator />
+ *       <BreadcrumbItem>
+ *         <BreadcrumbPage>Empresa</BreadcrumbPage>
+ *       </BreadcrumbItem>
+ *     </BreadcrumbList>
+ *   </Breadcrumb>
+ *
+ * Só o nível atual (`BreadcrumbPage`) encolhe com reticências; os anteriores
+ * mantêm o texto inteiro. Um nível sem link é texto puro dentro do item.
+ */
+declare function Breadcrumb({ "aria-label": ariaLabel, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, };
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/components/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,UAAU,CAAC,EAAE,YAAY,EAAE,SAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAEjG;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ1E;AAED,iBAAS,cAAc,CAAC,EACtB,OAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,qBAanD;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAS5E;AAED,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAYzF;AAED,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,GACpB,CAAA"}

package/dist/components/breadcrumb.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
+import { cn } from "../lib/utils.js";
+/**
+ * Caminho até a tela atual: os níveis anteriores em tom apagado (links,
+ * quando dá para voltar a eles) e o atual em destaque, separados por "/".
+ *
+ *   <Breadcrumb>
+ *     <BreadcrumbList>
+ *       <BreadcrumbItem>
+ *         <BreadcrumbLink asChild><Link href="/configuracoes">Configurações</Link></BreadcrumbLink>
+ *       </BreadcrumbItem>
+ *       <BreadcrumbSeparator />
+ *       <BreadcrumbItem>
+ *         <BreadcrumbPage>Empresa</BreadcrumbPage>
+ *       </BreadcrumbItem>
+ *     </BreadcrumbList>
+ *   </Breadcrumb>
+ *
+ * Só o nível atual (`BreadcrumbPage`) encolhe com reticências; os anteriores
+ * mantêm o texto inteiro. Um nível sem link é texto puro dentro do item.
+ */
+function Breadcrumb({ "aria-label": ariaLabel = "Caminho", ...props }) {
+    return _jsx("nav", { "data-slot": "breadcrumb", "aria-label": ariaLabel, ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn("flex min-w-0 items-center gap-1.5 text-sm text-muted-foreground", className), ...props }));
+}
+function BreadcrumbItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn("inline-flex min-w-0 items-center gap-1.5", className), ...props }));
+}
+function BreadcrumbLink({ asChild = false, className, ...props }) {
+    const Comp = asChild ? Slot.Root : "a";
+    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn("rounded-sm whitespace-nowrap transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", className), ...props }));
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-page", "aria-current": "page", className: cn("min-w-0 truncate font-medium text-foreground", className), ...props }));
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("shrink-0 text-muted-foreground/60 [&>svg]:size-3.5", className), ...props, children: children ?? "/" }));
+}
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, };
+//# sourceMappingURL=breadcrumb.js.map

package/dist/components/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../src/components/breadcrumb.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAEpC;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAS,UAAU,CAAC,EAAE,YAAY,EAAE,SAAS,GAAG,SAAS,EAAE,GAAG,KAAK,EAA+B;IAChG,OAAO,2BAAe,YAAY,gBAAa,SAAS,KAAM,KAAK,GAAI,CAAA;AACzE,CAAC;AAED,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACzE,OAAO,CACL,0BACY,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CAAC,iEAAiE,EAAE,SAAS,CAAC,KACvF,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACzE,OAAO,CACL,0BACY,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,KAChE,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,OAAO,GAAG,KAAK,EACf,SAAS,EACT,GAAG,KAAK,EAC0C;IAClD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAA;IAEtC,OAAO,CACL,KAAC,IAAI,iBACO,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CACX,mIAAmI,EACnI,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgC;IAC3E,OAAO,CACL,4BACY,iBAAiB,kBACd,MAAM,EACnB,SAAS,EAAE,EAAE,CAAC,8CAA8C,EAAE,SAAS,CAAC,KACpE,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACxF,OAAO,CACL,0BACY,sBAAsB,EAChC,IAAI,EAAC,cAAc,iBACP,MAAM,EAClB,SAAS,EAAE,EAAE,CAAC,oDAAoD,EAAE,SAAS,CAAC,KAC1E,KAAK,YAER,QAAQ,IAAI,GAAG,GACb,CACN,CAAA;AACH,CAAC;AAED,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,GACpB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strategicos/ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Componentes React da Strategicos (shadcn + Radix + Tailwind v4).",
   "license": "UNLICENSED",
   "repository": {

package/src/components/breadcrumb.tsx

@@ -0,0 +1,100 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "../lib/utils.js"
+
+/**
+ * Caminho até a tela atual: os níveis anteriores em tom apagado (links,
+ * quando dá para voltar a eles) e o atual em destaque, separados por "/".
+ *
+ *   <Breadcrumb>
+ *     <BreadcrumbList>
+ *       <BreadcrumbItem>
+ *         <BreadcrumbLink asChild><Link href="/configuracoes">Configurações</Link></BreadcrumbLink>
+ *       </BreadcrumbItem>
+ *       <BreadcrumbSeparator />
+ *       <BreadcrumbItem>
+ *         <BreadcrumbPage>Empresa</BreadcrumbPage>
+ *       </BreadcrumbItem>
+ *     </BreadcrumbList>
+ *   </Breadcrumb>
+ *
+ * Só o nível atual (`BreadcrumbPage`) encolhe com reticências; os anteriores
+ * mantêm o texto inteiro. Um nível sem link é texto puro dentro do item.
+ */
+function Breadcrumb({ "aria-label": ariaLabel = "Caminho", ...props }: React.ComponentProps<"nav">) {
+  return <nav data-slot="breadcrumb" aria-label={ariaLabel} {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn("flex min-w-0 items-center gap-1.5 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex min-w-0 items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn(
+        "rounded-sm whitespace-nowrap transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      aria-current="page"
+      className={cn("min-w-0 truncate font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("shrink-0 text-muted-foreground/60 [&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? "/"}
+    </li>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+}