@adamosuiteservices/ui 1.2.5 → 1.4.5

package/docs/components/ui/tooltip.md

@@ -0,0 +1,320 @@
+# Tooltip
+
+Mensaje flotante informativo en hover/focus. Basado en Radix UI con arrow.
+
+## Descripción
+
+El componente `Tooltip` muestra información adicional al hacer hover sobre un elemento.
+
+## Importación
+
+```typescript
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@adamosuiteservices/ui/tooltip";
+```
+
+## Anatomía
+
+```tsx
+<Tooltip>
+  <TooltipTrigger>Hover me</TooltipTrigger>
+  <TooltipContent>
+    <p>Tooltip content</p>
+  </TooltipContent>
+</Tooltip>
+```
+
+**Componentes**: 4 (TooltipProvider, Tooltip, TooltipTrigger, TooltipContent)
+
+## Props
+
+### Tooltip (Root)
+
+| Prop            | Tipo                      | Descripción                             |
+| --------------- | ------------------------- | --------------------------------------- |
+| `open`          | `boolean`                 | Estado controlado                       |
+| `defaultOpen`   | `boolean`                 | Estado inicial                          |
+| `onOpenChange`  | `(open: boolean) => void` | Callback al cambiar                     |
+| `delayDuration` | `number`                  | Delay antes de mostrar (ms, default: 0) |
+
+### TooltipTrigger
+
+| Prop      | Tipo      | Descripción                  |
+| --------- | --------- | ---------------------------- |
+| `asChild` | `boolean` | Renderiza como child element |
+
+### TooltipContent
+
+| Prop         | Tipo                                     | Descripción                           |
+| ------------ | ---------------------------------------- | ------------------------------------- |
+| `side`       | `"top" \| "right" \| "bottom" \| "left"` | Posición del tooltip                  |
+| `sideOffset` | `number`                                 | Offset desde trigger (px, default: 0) |
+| `align`      | `"start" \| "center" \| "end"`           | Alineación                            |
+| `className`  | `string`                                 | Clases CSS adicionales                |
+
+### TooltipProvider
+
+| Prop            | Tipo     | Descripción                   |
+| --------------- | -------- | ----------------------------- |
+| `delayDuration` | `number` | Delay global (ms, default: 0) |
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@adamosuiteservices/ui/tooltip";
+import { Button } from "@adamosuiteservices/ui/button";
+
+<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="outline">Hover</Button>
+  </TooltipTrigger>
+  <TooltipContent>
+    <p>Add to library</p>
+  </TooltipContent>
+</Tooltip>;
+```
+
+### Con Icono
+
+```tsx
+import { InfoIcon } from "lucide-react";
+
+<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="outline" size="icon">
+      <InfoIcon className="h-4 w-4" />
+    </Button>
+  </TooltipTrigger>
+  <TooltipContent>
+    <p>More information</p>
+  </TooltipContent>
+</Tooltip>;
+```
+
+### Posiciones
+
+```tsx
+// Top (default)
+<Tooltip>
+  <TooltipTrigger asChild>
+    <Button>Top</Button>
+  </TooltipTrigger>
+  <TooltipContent side="top">
+    <p>Tooltip on top</p>
+  </TooltipContent>
+</Tooltip>
+
+// Right
+<TooltipContent side="right"><p>Tooltip on right</p></TooltipContent>
+
+// Bottom
+<TooltipContent side="bottom"><p>Tooltip on bottom</p></TooltipContent>
+
+// Left
+<TooltipContent side="left"><p>Tooltip on left</p></TooltipContent>
+```
+
+### Con Offset
+
+```tsx
+<Tooltip>
+  <TooltipTrigger asChild>
+    <Button>With Offset</Button>
+  </TooltipTrigger>
+  <TooltipContent sideOffset={10}>
+    <p>10px offset from trigger</p>
+  </TooltipContent>
+</Tooltip>
+```
+
+### Con Delay
+
+```tsx
+<TooltipProvider delayDuration={800}>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button>Slow Tooltip</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Appears after 800ms</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+```
+
+### Con Provider Global
+
+Para múltiples tooltips, usa TooltipProvider:
+
+```tsx
+<TooltipProvider delayDuration={300}>
+  <Tooltip>...</Tooltip>
+  <Tooltip>...</Tooltip>
+</TooltipProvider>
+```
+
+### Action Buttons
+
+```tsx
+import { CopyIcon, EditIcon, ShareIcon, TrashIcon } from "lucide-react";
+
+<div className="flex gap-2">
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button size="icon" variant="outline">
+        <CopyIcon className="h-4 w-4" />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Copy to clipboard</p>
+    </TooltipContent>
+  </Tooltip>
+
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button size="icon" variant="outline">
+        <EditIcon className="h-4 w-4" />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Edit document</p>
+    </TooltipContent>
+  </Tooltip>
+
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button size="icon" variant="outline">
+        <ShareIcon className="h-4 w-4" />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Share with others</p>
+    </TooltipContent>
+  </Tooltip>
+
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button size="icon" variant="destructive">
+        <TrashIcon className="h-4 w-4" />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Delete permanently</p>
+    </TooltipContent>
+  </Tooltip>
+</div>;
+```
+
+### Form Help Icons
+
+```tsx
+import { HelpCircleIcon, InfoIcon } from "lucide-react";
+import { Label } from "@adamosuiteservices/ui/label";
+import { Input } from "@adamosuiteservices/ui/input";
+
+<div className="space-y-2">
+  <div className="flex items-center gap-2">
+    <Label htmlFor="username">Username</Label>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <HelpCircleIcon className="h-4 w-4 text-muted-foreground cursor-help" />
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>
+          Must be 3-20 characters long and contain only letters, numbers, and
+          underscores
+        </p>
+      </TooltipContent>
+    </Tooltip>
+  </div>
+  <Input id="username" placeholder="Enter username" />
+</div>;
+```
+
+### Controlled
+
+```tsx
+import { useState } from "react";
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex items-center gap-4">
+      <Tooltip open={open} onOpenChange={setOpen}>
+        <TooltipTrigger asChild>
+          <Button>Controlled</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Controlled programmatically</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Button size="sm" onClick={() => setOpen(true)}>
+        Show
+      </Button>
+      <Button size="sm" variant="outline" onClick={() => setOpen(false)}>
+        Hide
+      </Button>
+    </div>
+  );
+}
+```
+
+## Casos de Uso
+
+**Icon buttons**: Descripción de acciones  
+**Form help**: Explicar campos de formulario  
+**Status indicators**: Detalles de estados  
+**Truncated text**: Mostrar texto completo  
+**Disabled elements**: Explicar por qué está deshabilitado
+
+## Estilos Base
+
+- **Background**: `bg-neutrals-800`
+- **Text**: `text-white text-xs`
+- **Padding**: `px-3 py-1.5`
+- **Border radius**: `rounded-md`
+- **Arrow**: `size-2.5` con `bg-neutrals-800`
+- **Z-index**: `z-50`
+- **Animation**: Fade + zoom in/out
+
+## Accesibilidad
+
+- ✅ **ARIA**: `aria-describedby` automático
+- ✅ **Keyboard**: Visible en focus del trigger
+- ✅ **Hover**: Aparece en hover
+- ✅ **Focus**: Aparece en focus del trigger
+- ✅ **Escape**: Cierra con Escape key
+
+## Notas de Implementación
+
+- **Radix UI**: Basado en `@radix-ui/react-tooltip`
+- **Portal**: Content se renderiza en portal (fuera del DOM tree)
+- **Arrow**: Incluido automáticamente en TooltipContent
+- **Provider**: Tooltip individual ya incluye TooltipProvider interno
+- **Global Provider**: Usa TooltipProvider para delay global
+
+## Troubleshooting
+
+**Tooltip no aparece**: Verifica que TooltipTrigger tenga `asChild` si es Button/componente  
+**Posición incorrecta**: Usa `side` prop en TooltipContent  
+**Delay muy largo**: Ajusta `delayDuration` en Tooltip o TooltipProvider  
+**Z-index issues**: Tooltip usa `z-50`, puede necesitar ajuste si hay overlays  
+**Arrow no visible**: Arrow incluido por default, verifica estilos no sobrescritos  
+**No se cierra**: Usa Escape key o mouseleave del trigger
+
+## Referencias
+
+- **Radix UI Tooltip**: <https://www.radix-ui.com/primitives/docs/components/tooltip>
+- **shadcn/ui Tooltip**: <https://ui.shadcn.com/docs/components/tooltip>

package/docs/components/ui/typography.md

@@ -0,0 +1,191 @@
+# Typography
+
+Sistema de estilos de texto con variantes de tamaño. Wrapper flexible con soporte `asChild`.
+
+## Importación
+
+```tsx
+import { Typography } from "@adamosuiteservices/ui/typography";
+```
+
+## Anatomía
+
+```tsx
+<Typography variant="md">Default paragraph text.</Typography>
+```
+
+**Componentes**: 1 (Typography)
+
+## Props
+
+| Prop        | Tipo                                        | Descripción                             |
+| ----------- | ------------------------------------------- | --------------------------------------- |
+| `variant`   | `"lg" \| "md" \| "sm" \| "xs" \| "caption"` | Tamaño del texto                        |
+| `asChild`   | `boolean`                                   | Renderiza como child element (usa Slot) |
+| `className` | `string`                                    | Clases CSS adicionales                  |
+
+**Nota**: Acepta todas las props de `<p>` cuando `asChild=false`
+
+## Variantes
+
+| Variante  | Font Size     | Line Height      | Uso                        |
+| --------- | ------------- | ---------------- | -------------------------- |
+| `lg`      | `text-lg`     | `leading-1`      | Headings, texto enfatizado |
+| `md`      | `text-base`   | `leading-0.5`    | Body text default          |
+| `sm`      | `text-sm`     | `leading`        | Secondary text, labels     |
+| `xs`      | `text-xs`     | `leading-[20px]` | Fine print, detalles       |
+| `caption` | `text-[11px]` | `leading-[18px]` | Captions, metadata         |
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+import { Typography } from "@adamosuiteservices/ui/typography";
+
+<Typography>Default paragraph with no variant.</Typography>
+<Typography variant="lg">Large text for emphasis.</Typography>
+<Typography variant="sm">Small secondary text.</Typography>
+```
+
+### Como Headings
+
+```tsx
+// H1
+<Typography asChild variant="lg">
+  <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight">
+    Main Page Heading
+  </h1>
+</Typography>
+
+// H2
+<Typography asChild variant="lg">
+  <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight">
+    Section Heading
+  </h2>
+</Typography>
+
+// H3
+<Typography asChild variant="md">
+  <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+    Subsection
+  </h3>
+</Typography>
+
+// H4
+<Typography asChild variant="md">
+  <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
+    Small Heading
+  </h4>
+</Typography>
+```
+
+### Paragraph
+
+```tsx
+<Typography asChild variant="md">
+  <p className="leading-7 [&:not(:first-child)]:mt-6">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </p>
+</Typography>
+```
+
+### Blockquote
+
+```tsx
+<Typography asChild variant="md">
+  <blockquote className="mt-6 border-l-2 pl-6 italic">
+    "This is a quote with proper styling and emphasis."
+  </blockquote>
+</Typography>
+```
+
+### Inline Code
+
+```tsx
+<Typography asChild variant="sm">
+  <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+    @radix-ui/react-alert-dialog
+  </code>
+</Typography>
+```
+
+### Lead Text
+
+```tsx
+<Typography asChild variant="lg">
+  <p className="text-xl text-muted-foreground">
+    An introductory paragraph that stands out from regular body text.
+  </p>
+</Typography>
+```
+
+### Small / Fine Print
+
+```tsx
+<Typography asChild variant="sm">
+  <small className="text-sm font-medium leading-none">Email address</small>
+</Typography>
+```
+
+### Muted Text
+
+```tsx
+<Typography asChild variant="sm">
+  <p className="text-sm text-muted-foreground">
+    Secondary information with reduced emphasis.
+  </p>
+</Typography>
+```
+
+### Caption
+
+```tsx
+<Typography variant="caption">
+  Image caption or metadata · Published 2 hours ago
+</Typography>
+```
+
+## Casos de Uso
+
+**Headings**: H1-H6 con tamaños consistentes  
+**Body text**: Párrafos y contenido principal  
+**Labels**: Etiquetas de formularios  
+**Captions**: Descripciones de imágenes, metadata  
+**Fine print**: Términos, condiciones, notas  
+**Quotes**: Citas y testimonios
+
+## Estilos Base
+
+- **lg**: 18px, line-height: leading-1
+- **md**: 16px, line-height: leading-0.5 (default)
+- **sm**: 14px, line-height: leading
+- **xs**: 12px, line-height: 20px
+- **caption**: 11px, line-height: 18px
+
+## Accesibilidad
+
+- ✅ **Semantic HTML**: Usa `asChild` con elementos semánticos apropiados
+- ✅ **Heading hierarchy**: Mantén orden lógico de headings (H1 → H2 → H3)
+- ✅ **Contrast**: Asegura contraste suficiente con backgrounds
+- ⚠️ **No usar solo para estilo**: Usa elementos semánticos apropiados
+
+## Notas de Implementación
+
+- **CVA**: Variantes con class-variance-authority
+- **Slot**: Usa `@radix-ui/react-slot` para `asChild`
+- **Default element**: `<p>` cuando `asChild=false`
+- **Data attribute**: `data-slot="typography"` para identificación
+- **No estilos de color**: Typography solo define tamaño/line-height, combina con utility classes para color/weight
+
+## Troubleshooting
+
+**Variant no aplica**: Verifica que variant esté entre las opciones válidas  
+**asChild no funciona**: Asegura que child sea un elemento válido, no texto plano  
+**Line height incorrecto**: Typography define line-heights base, pueden ser sobrescritos con className  
+**No semantic HTML**: Usa `asChild` con elementos apropiados (h1, h2, p, etc.)
+
+## Referencias
+
+- **shadcn/ui Typography**: <https://ui.shadcn.com/docs/components/typography>
+- **Tailwind Typography**: <https://tailwindcss.com/docs/typography-plugin>

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@adamosuiteservices/ui",
-  "version": "1.2.5",
+  "version": "1.4.5",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
+    "./docs/*": "./docs/*",
     "./styles.css": "./dist/styles.css",
     "./custom-layered-styles.css": "./dist/custom-layered-styles.css",
     "./colors.css": "./dist/colors.css",
@@ -56,6 +57,10 @@
       "types": "./dist/components/ui/badge/badge.d.ts",
       "import": "./dist/badge.js"
     },
+    "./breadcrumb": {
+      "types": "./dist/components/ui/breadcrumb/breadcrumb.d.ts",
+      "import": "./dist/breadcrumb.js"
+    },
     "./button": {
       "types": "./dist/components/ui/button/button.d.ts",
       "import": "./dist/button.js"
@@ -194,7 +199,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "docs"
   ],
   "scripts": {
     "dev": "cross-env vite",
@@ -213,11 +219,11 @@
     ]
   },
   "peerDependencies": {
+    "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "react": "^19.1.1",
     "react-day-picker": "^9.11.1",
-    "react-dom": "^19.1.1",
-    "cmdk": "^1.1.1"
+    "react-dom": "^19.1.1"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -236,7 +242,7 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toggle": "^1.1.10",

package/dist/index-6oTEokEx.js

@@ -1,82 +0,0 @@
-import * as i from "react";
-import { j as f } from "./jsx-runtime-BzflLqGi.js";
-function d(e, t) {
-  if (typeof e == "function")
-    return e(t);
-  e != null && (e.current = t);
-}
-function m(...e) {
-  return (t) => {
-    let r = !1;
-    const o = e.map((n) => {
-      const l = d(n, t);
-      return !r && typeof l == "function" && (r = !0), l;
-    });
-    if (r)
-      return () => {
-        for (let n = 0; n < o.length; n++) {
-          const l = o[n];
-          typeof l == "function" ? l() : d(e[n], null);
-        }
-      };
-  };
-}
-function x(...e) {
-  return i.useCallback(m(...e), e);
-}
-// @__NO_SIDE_EFFECTS__
-function g(e) {
-  const t = /* @__PURE__ */ C(e), r = i.forwardRef((o, n) => {
-    const { children: l, ...a } = o, s = i.Children.toArray(l), c = s.find(E);
-    if (c) {
-      const u = c.props.children, S = s.map((p) => p === c ? i.Children.count(u) > 1 ? i.Children.only(null) : i.isValidElement(u) ? u.props.children : null : p);
-      return /* @__PURE__ */ f.jsx(t, { ...a, ref: n, children: i.isValidElement(u) ? i.cloneElement(u, void 0, S) : null });
-    }
-    return /* @__PURE__ */ f.jsx(t, { ...a, ref: n, children: l });
-  });
-  return r.displayName = `${e}.Slot`, r;
-}
-var j = /* @__PURE__ */ g("Slot");
-// @__NO_SIDE_EFFECTS__
-function C(e) {
-  const t = i.forwardRef((r, o) => {
-    const { children: n, ...l } = r;
-    if (i.isValidElement(n)) {
-      const a = b(n), s = R(l, n.props);
-      return n.type !== i.Fragment && (s.ref = o ? m(o, a) : a), i.cloneElement(n, s);
-    }
-    return i.Children.count(n) > 1 ? i.Children.only(null) : null;
-  });
-  return t.displayName = `${e}.SlotClone`, t;
-}
-var y = Symbol("radix.slottable");
-// @__NO_SIDE_EFFECTS__
-function _(e) {
-  const t = ({ children: r }) => /* @__PURE__ */ f.jsx(f.Fragment, { children: r });
-  return t.displayName = `${e}.Slottable`, t.__radixId = y, t;
-}
-function E(e) {
-  return i.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === y;
-}
-function R(e, t) {
-  const r = { ...t };
-  for (const o in t) {
-    const n = e[o], l = t[o];
-    /^on[A-Z]/.test(o) ? n && l ? r[o] = (...s) => {
-      const c = l(...s);
-      return n(...s), c;
-    } : n && (r[o] = n) : o === "style" ? r[o] = { ...n, ...l } : o === "className" && (r[o] = [n, l].filter(Boolean).join(" "));
-  }
-  return { ...e, ...r };
-}
-function b(e) {
-  let t = Object.getOwnPropertyDescriptor(e.props, "ref")?.get, r = t && "isReactWarning" in t && t.isReactWarning;
-  return r ? e.ref : (t = Object.getOwnPropertyDescriptor(e, "ref")?.get, r = t && "isReactWarning" in t && t.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);
-}
-export {
-  j as S,
-  g as a,
-  _ as b,
-  m as c,
-  x as u
-};