@adamosuiteservices/ui 2.10.12 → 2.11.13

package/docs/components/ui/badge.md

@@ -499,29 +499,11 @@ Para etiquetas promocionales.
 ```tsx
 import { Icon } from "@adamosuiteservices/ui/icon";
 
-<div className="space-y-4">
-  {/* Badges básicos */}
-  <div className="flex gap-2">
-    <Badge variant="destructive">Sale</Badge>
-    <Badge variant="default">New</Badge>
-    <Badge variant="secondary">Bestseller</Badge>
-    <Badge variant="outline">Limited</Badge>
-  </div>
-
-  {/* Badges personalizados */}
-  <div className="flex gap-2">
-    <Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
-      Free Shipping
-    </Badge>
-    <Badge className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
-      <Icon symbol="star" />
-      Premium
-    </Badge>
-    <Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
-      <Icon symbol="redeem" />
-      Bundle Deal
-    </Badge>
-  </div>
+<div className="flex gap-2">
+  <Badge variant="destructive">Sale</Badge>
+  <Badge variant="default">New</Badge>
+  <Badge variant="secondary">Bestseller</Badge>
+  <Badge variant="outline">Limited</Badge>
 </div>;
 ```
 
@@ -548,12 +530,10 @@ import { Icon } from "@adamosuiteservices/ui/icon";
 
   <div className="flex items-center gap-2">
     <Avatar className="size-6">
-      <AvatarFallback>ML</AvatarFallback>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
     </Avatar>
-    <Badge variant="default">
-      <Icon symbol="verified" />
-      maxleiter
-    </Badge>
+    <Badge variant="secondary">shadcn</Badge>
   </div>
 </div>;
 ```
@@ -578,32 +558,9 @@ import { Icon } from "@adamosuiteservices/ui/icon";
     Best Value
   </Badge>
   <Badge variant="outline">Free Trial</Badge>
-</div>;
-```
-
-### Colores Personalizados
-
-Para casos especiales de branding.
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<div className="flex gap-2">
-  <Badge className="bg-blue-500 text-white dark:bg-blue-600">
-    <Icon symbol="verified" />
-    Verified
-  </Badge>
-  <Badge className="bg-green-500 text-white dark:bg-green-600">
+  <Badge variant="success-medium">
     <Icon symbol="check" />
-    Success
-  </Badge>
-  <Badge className="bg-purple-500 text-white dark:bg-purple-600">
-    <Icon symbol="star" />
-    Premium
-  </Badge>
-  <Badge className="bg-orange-500 text-white dark:bg-orange-600">
-    <Icon symbol="trending_up" />
-    Trending
+    Money Back Guarantee
   </Badge>
 </div>;
 ```

package/docs/components/ui/button.md

@@ -1072,7 +1072,7 @@ function Navigation() {
 
 ```tsx
 // ❌ Incorrecto - className sobrescribe variantes
-<Button className="bg-red-500">Click</Button>
+<Button className="bg-destructive">Click</Button>
 
 // ✅ Correcto - Usa variantes predefinidas
 <Button variant="destructive">Click</Button>

package/docs/components/ui/calendar.md

@@ -781,7 +781,7 @@ const bookedDates = [
     booked: bookedDates,
   }}
   modifiersClassNames={{
-    booked: "bg-red-100 text-red-900",
+    booked: "bg-destructive/10 text-destructive",
   }}
   className="rounded-md border"
 />;

package/docs/components/ui/combobox.md

@@ -270,10 +270,10 @@ const options = [
   searchable
   options={frameworks}
   classNames={{
-    trigger: "border-2 border-blue-500 w-64",
-    popover: "border-blue-200 shadow-lg",
-    item: "rounded px-3 py-2 hover:bg-blue-50",
-    check: "text-blue-600",
+    trigger: "border-2 border-primary w-64",
+    popover: "border-border shadow-lg",
+    item: "rounded px-3 py-2 hover:bg-accent",
+    check: "text-primary",
   }}
 />
 ```
@@ -335,7 +335,7 @@ const [values, setValues] = useState<string[]>([]);
   {values.length > 0 && (
     <button
       onClick={() => setValues([])}
-      className="text-xs text-blue-600 hover:text-blue-800 underline"
+      className="text-xs text-primary hover:text-primary/80 underline"
     >
       Clear all
     </button>
@@ -390,7 +390,7 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
       <div className="flex items-center gap-2">
         <span>{text}</span>
         {text && (
-          <span className="px-1.5 py-0.5 text-xs bg-green-100 text-green-700 rounded font-medium">
+          <span className="px-1.5 py-0.5 text-xs bg-success/10 text-success rounded font-medium">
             Active
           </span>
         )}
@@ -411,7 +411,7 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
   renders={{
     optionLabel: ({ option }) => (
       <div className="flex items-center gap-2">
-        <span className="font-semibold text-blue-600">🚀</span>
+        <span className="font-semibold text-primary">🚀</span>
         <span>{option.label}</span>
       </div>
     ),

package/docs/components/ui/date-picker-selector.md

@@ -0,0 +1,376 @@
+# Date Picker Selector
+
+A comprehensive date range selector component combining preset date ranges with custom calendar selection.
+
+## Descripción
+
+El componente `DatePickerSelector` proporciona una interfaz intuitiva para seleccionar rangos de fechas. Incluye opciones predefinidas (últimos 7, 30, 90 días) y un selector de calendario personalizado para rangos específicos.
+
+## Características
+
+- ✅ Rangos predefinidos (7, 30, 90 días)
+- ✅ Selector de calendario personalizado para rangos específicos
+- ✅ Formato de fecha limpio (medianoche, sin horas)
+- ✅ Labels personalizables para internacionalización
+- ✅ Integración con Combobox y Calendar
+- ✅ Props personalizables para Combobox y Calendar
+- ✅ Estado controlado con callback onChange
+
+## Importación
+
+```typescript
+import { DatePickerSelector } from "@adamosuiteservices/ui/date-picker-selector";
+import type { DateRange } from "react-day-picker";
+```
+
+## Uso Básico
+
+```tsx
+import { DatePickerSelector } from "@adamosuiteservices/ui/date-picker-selector";
+import { useState } from "react";
+import type { DateRange } from "react-day-picker";
+
+function MyComponent() {
+  const [dateRange, setDateRange] = useState<DateRange>({
+    from: undefined,
+    to: undefined,
+  });
+
+  return (
+    <DatePickerSelector
+      dateRange={dateRange}
+      onDateRangeChange={setDateRange}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop               | Tipo                     | Default     | Descripción                                                    |
+| ------------------ | ------------------------ | ----------- | -------------------------------------------------------------- |
+| `dateRange`        | `DateRange`              | -           | **Requerido**. Rango de fechas actual                          |
+| `onDateRangeChange`| `(dateRange: DateRange) => void` | - | **Requerido**. Callback al cambiar el rango                    |
+| `labels`           | `DatePickerSelectorLabels` | -         | Labels personalizables para todos los textos de UI             |
+| `combobox`         | `ComboboxProps`          | -           | Props adicionales para el componente Combobox                  |
+| `calendar`         | `CalendarProps`          | -           | Props adicionales para el componente Calendar                  |
+| `className`        | `string`                 | -           | Clases CSS adicionales para el contenedor                      |
+| ...props           | `HTMLAttributes<HTMLDivElement>` | - | Props nativas de div                                           |
+
+### DateRange Type
+
+```typescript
+type DateRange = {
+  from: Date | undefined;
+  to: Date | undefined;
+};
+```
+
+### DatePickerSelectorLabels Type
+
+```typescript
+type DatePickerSelectorLabels = {
+  last30Days?: string;   // Default: "Last 30 days"
+  last7Days?: string;    // Default: "Last 7 days"
+  last90Days?: string;   // Default: "Last 90 days"
+  custom?: string;       // Default: "Custom"
+  placeholder?: string;  // Default: "Date"
+  cancel?: string;       // Default: "Cancel"
+  apply?: string;        // Default: "Apply"
+};
+```
+
+## Patrones de Uso
+
+### Con Valor Inicial
+
+```tsx
+import { subDays, startOfDay } from "date-fns";
+
+function MyComponent() {
+  const today = startOfDay(new Date());
+  const [dateRange, setDateRange] = useState<DateRange>({
+    from: subDays(today, 30),
+    to: today,
+  });
+
+  return (
+    <DatePickerSelector
+      dateRange={dateRange}
+      onDateRangeChange={setDateRange}
+    />
+  );
+}
+```
+
+### Con Labels Personalizados (Internacionalización)
+
+```tsx
+<DatePickerSelector
+  dateRange={dateRange}
+  onDateRangeChange={setDateRange}
+  labels={{
+    last7Days: "Últimos 7 días",
+    last30Days: "Últimos 30 días",
+    last90Days: "Últimos 90 días",
+    custom: "Personalizado",
+    placeholder: "Fecha",
+    cancel: "Cancelar",
+    apply: "Aplicar",
+  }}
+/>
+```
+
+### Con Props Personalizados del Combobox
+
+```tsx
+<DatePickerSelector
+  dateRange={dateRange}
+  onDateRangeChange={setDateRange}
+  combobox={{
+    classNames: {
+      trigger: "w-[300px]",
+    },
+  }}
+/>
+```
+
+### Con Props Personalizados del Calendar
+
+```tsx
+<DatePickerSelector
+  dateRange={dateRange}
+  onDateRangeChange={setDateRange}
+  calendar={{
+    fromYear: 2020,
+    toYear: 2030,
+  }}
+/>
+```
+
+### Formato de Fecha con date-fns
+
+```tsx
+import { format } from "date-fns";
+
+function MyComponent() {
+  const [dateRange, setDateRange] = useState<DateRange>({
+    from: undefined,
+    to: undefined,
+  });
+
+  const formatDateRange = () => {
+    if (!dateRange.from || !dateRange.to) return "No date selected";
+    return `${format(dateRange.from, "MMM d, yyyy")} - ${format(dateRange.to, "MMM d, yyyy")}`;
+  };
+
+  return (
+    <div>
+      <DatePickerSelector
+        dateRange={dateRange}
+        onDateRangeChange={setDateRange}
+      />
+      <p>Selected: {formatDateRange()}</p>
+    </div>
+  );
+}
+```
+
+### Validación de Rango
+
+```tsx
+function MyComponent() {
+  const [dateRange, setDateRange] = useState<DateRange>({
+    from: undefined,
+    to: undefined,
+  });
+
+  const handleDateRangeChange = (newRange: DateRange) => {
+    // Validate that both dates are selected
+    if (newRange.from && newRange.to) {
+      setDateRange(newRange);
+    }
+  };
+
+  const isValidRange = dateRange.from && dateRange.to;
+
+  return (
+    <div>
+      <DatePickerSelector
+        dateRange={dateRange}
+        onDateRangeChange={handleDateRangeChange}
+      />
+      {!isValidRange && (
+        <p className="text-destructive text-sm mt-2">
+          Please select a complete date range
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+## Comportamiento
+
+### Rangos Predefinidos
+
+El componente ofrece tres rangos predefinidos:
+
+- **Last 7 days**: Desde hace 7 días hasta hoy
+- **Last 30 days**: Desde hace 30 días hasta hoy
+- **Last 90 days**: Desde hace 90 días hasta hoy
+
+Todos los rangos predefinidos:
+- Usan `date-fns` para cálculos precisos
+- Establecen las fechas a medianoche (00:00:00)
+- Se calculan dinámicamente basándose en la fecha actual
+
+### Rango Personalizado
+
+Al seleccionar la opción "Custom":
+1. Se abre un popover con un calendario
+2. El usuario selecciona un rango de fechas
+3. Los botones "Cancel" y "Apply" permiten confirmar o descartar la selección
+4. El rango personalizado se mantiene independiente de los rangos predefinidos
+
+### Separación de Estados
+
+- Los rangos predefinidos resetean cualquier selección personalizada previa
+- El rango personalizado mantiene su valor hasta que se seleccione un rango predefinido
+- Esto previene conflictos entre los dos modos de selección
+
+## Casos de Uso
+
+**Filtros de reportes**: Seleccionar rango de fechas para generar reportes  
+**Dashboards**: Filtrar datos por períodos de tiempo  
+**Analytics**: Comparar métricas en diferentes rangos  
+**Búsquedas**: Filtrar resultados por rango de fechas  
+**Logs**: Visualizar registros en períodos específicos  
+
+## Dependencias
+
+Este componente utiliza internamente:
+
+- **Combobox**: Para el selector de opciones con el ícono de calendario
+- **Calendar**: Para la selección de rangos personalizados
+- **Popover**: Para mostrar el calendario
+- **Button**: Para las acciones "Cancel" y "Apply"
+- **date-fns**: Para cálculos de fechas (`startOfDay`, `subDays`)
+- **react-day-picker**: Para la gestión del calendario
+
+## Estilos Base
+
+- **Contenedor**: `flex w-max flex-col`
+- **Combobox**: Con placeholder siempre visible, ícono de calendario, feedback tipo check
+- **Calendar**: Con `captionLayout="dropdown"` para navegación por años
+- **Botones**: Estilo `variant="link"` para Cancel y Apply
+
+## Accesibilidad
+
+- ✅ Labels descriptivos para todas las opciones
+- ✅ Navegación por teclado en combobox y calendario
+- ✅ Estados de selección claramente indicados
+- ✅ Feedback visual en checkmarks
+- ✅ Acciones claramente etiquetadas (Cancel/Apply)
+
+## Mejores Prácticas
+
+### Gestión del Estado
+
+```tsx
+// ✅ Correcto - Estado controlado
+const [dateRange, setDateRange] = useState<DateRange>({
+  from: undefined,
+  to: undefined,
+});
+
+<DatePickerSelector
+  dateRange={dateRange}
+  onDateRangeChange={setDateRange}
+/>
+
+// ❌ Incorrecto - Estado no inicializado
+const [dateRange, setDateRange] = useState();
+```
+
+### Validación
+
+```tsx
+// ✅ Correcto - Validar rango completo
+const handleChange = (range: DateRange) => {
+  if (range.from && range.to) {
+    // Procesar rango válido
+    setDateRange(range);
+  }
+};
+
+// ✅ Correcto - Mostrar feedback de validación
+{!dateRange.from || !dateRange.to ? (
+  <p className="text-destructive">Please select both dates</p>
+) : null}
+```
+
+### Formateo de Fechas
+
+```tsx
+import { format } from "date-fns";
+
+// ✅ Correcto - Formatear con date-fns
+const displayDate = dateRange.from 
+  ? format(dateRange.from, "PP")
+  : "Not selected";
+
+// ❌ Evitar - toString() no es user-friendly
+const displayDate = dateRange.from?.toString();
+```
+
+### Internacionalización
+
+```tsx
+// ✅ Correcto - Proporcionar todos los labels
+<DatePickerSelector
+  labels={{
+    last7Days: t("dateRange.last7Days"),
+    last30Days: t("dateRange.last30Days"),
+    last90Days: t("dateRange.last90Days"),
+    custom: t("dateRange.custom"),
+    placeholder: t("dateRange.placeholder"),
+    cancel: t("actions.cancel"),
+    apply: t("actions.apply"),
+  }}
+/>
+```
+
+## Limitaciones
+
+- ❌ Solo soporta rangos (no fechas individuales)
+- ❌ Los rangos predefinidos son fijos (7, 30, 90 días)
+- ❌ No incluye presets personalizables adicionales
+- ❌ No soporta selección de hora (solo fechas)
+
+## Troubleshooting
+
+**Problema**: Las fechas tienen horas no deseadas  
+**Solución**: El componente usa `startOfDay()` automáticamente. Si pasas fechas con horas, normalízalas antes:
+
+```tsx
+import { startOfDay } from "date-fns";
+
+const normalizedRange = {
+  from: dateRange.from ? startOfDay(dateRange.from) : undefined,
+  to: dateRange.to ? startOfDay(dateRange.to) : undefined,
+};
+```
+
+**Problema**: El calendario no se abre  
+**Solución**: Verifica que estás pasando las props correctamente y que el componente Calendar está importado.
+
+**Problema**: Los rangos predefinidos no funcionan  
+**Solución**: Asegúrate de que `onDateRangeChange` esté actualizando el estado correctamente.
+
+## Referencias
+
+- **Combobox**: [Ver documentación](./combobox.md)
+- **Calendar**: [Ver documentación](./calendar.md)
+- **date-fns**: https://date-fns.org/
+- **react-day-picker**: https://react-day-picker.js.org/

package/docs/components/ui/hover-card.md

@@ -192,7 +192,7 @@ import { Icon } from "@adamosuiteservices/ui/icon";
           <span>4.1k</span>
         </div>
         <div className="flex items-center gap-1">
-          <div className="h-3 w-3 rounded-full bg-blue-500" />
+          <div className="h-3 w-3 rounded-full bg-primary" />
           <span>TypeScript</span>
         </div>
       </div>

package/docs/components/ui/icon.md

@@ -84,7 +84,7 @@ Usa clases de texto Tailwind para controlar el tamaño del icono. Se pueden comb
 <Icon symbol="star" className="adm:text-5xl" />   {/* ~48px */}
 
 // Combinando tamaño con color
-<Icon symbol="star" className="adm:text-2xl adm:text-yellow-500" />
+<Icon symbol="star" className="adm:text-2xl adm:text-warning" />
 ```
 
 ### fill
@@ -190,7 +190,7 @@ function FavoriteButton() {
         fill={isFavorite ? 1 : 0}
         className={cn(
           "adm:text-lg",
-          isFavorite ? "adm:text-red-500" : "adm:text-gray-400"
+          isFavorite ? "adm:text-destructive" : "adm:text-muted-foreground"
         )}
       />
       {isFavorite ? "Liked" : "Like"}
@@ -261,7 +261,7 @@ const commonIcons = [
 <Icon
   symbol="notification"
   weight={300}
-  className="adm:text-2xl adm:text-blue-500 adm:drop-shadow-sm"
+  className="adm:text-2xl adm:text-primary adm:drop-shadow-sm"
 />
 ```
 
@@ -270,7 +270,7 @@ const commonIcons = [
 ```tsx
 <Icon
   symbol="refresh"
-  className="adm:text-2xl adm:animate-spin adm:text-blue-500"
+  className="adm:text-2xl adm:animate-spin adm:text-primary"
 />
 ```
 
@@ -291,7 +291,7 @@ const commonIcons = [
 <Card>
   <CardHeader>
     <div className="adm:flex adm:items-center adm:gap-2">
-      <Icon symbol="folder" className="adm:text-2xl adm:text-blue-500" />
+      <Icon symbol="folder" className="adm:text-2xl adm:text-primary" />
       <CardTitle>Documents</CardTitle>
     </div>
   </CardHeader>
@@ -311,17 +311,17 @@ const commonIcons = [
 
 ```tsx
 <div className="adm:flex adm:items-center adm:gap-2">
-  <Icon symbol="check_circle" fill={1} className="adm:text-green-500" />
+  <Icon symbol="check_circle" fill={1} className="adm:text-success" />
   <span>Completed</span>
 </div>
 
 <div className="adm:flex adm:items-center adm:gap-2">
-  <Icon symbol="error" fill={1} className="adm:text-red-500" />
+  <Icon symbol="error" fill={1} className="adm:text-destructive" />
   <span>Error</span>
 </div>
 
 <div className="adm:flex adm:items-center adm:gap-2">
-  <Icon symbol="schedule" fill={1} className="adm:text-yellow-500" />
+  <Icon symbol="schedule" fill={1} className="adm:text-warning" />
   <span>Pending</span>
 </div>
 ```
@@ -396,7 +396,7 @@ const commonIcons = [
 {
   /* ✅ Correcto - Peso mayor para énfasis */
 }
-<Icon symbol="warning" weight={500} fill={1} className="adm:text-yellow-500" />;
+<Icon symbol="warning" weight={500} fill={1} className="adm:text-warning" />;
 
 {
   /* ❌ Evitar - Peso muy pesado sin propósito */
@@ -408,9 +408,9 @@ const commonIcons = [
 
 ```tsx
 {/* ✅ Correcto - Estados con significado claro */}
-<Icon symbol="check_circle" fill={1} className="adm:text-green-500" />  {/* Éxito */}
-<Icon symbol="error" fill={1} className="adm:text-red-500" />           {/* Error */}
-<Icon symbol="info" fill={1} className="adm:text-blue-500" />           {/* Info */}
+<Icon symbol="check_circle" fill={1} className="adm:text-success" />  {/* Éxito */}
+<Icon symbol="error" fill={1} className="adm:text-destructive" />           {/* Error */}
+<Icon symbol="info" fill={1} className="adm:text-primary" />           {/* Info */}
 
 {/* ✅ Correcto - Estados interactivos */}
 <Icon symbol="favorite" fill={liked ? 1 : 0} />

package/docs/components/ui/input-group.md

@@ -79,12 +79,12 @@ import {
 
 ### InputGroupButton
 
-| Prop      | Tipo                                     | Default    | Descripción                              |
-| --------- | ---------------------------------------- | ---------- | ---------------------------------------- |
-| `size`    | `"xs" \| "sm" \| "icon-xs" \| "icon-sm"` | `"xs"`     | Tamaño del botón                         |
-| `variant` | Button variants                          | `"ghost"`  | Variante del botón                       |
-| `type`    | `string`                                 | `"button"` | Tipo HTML del botón                      |
-| ...rest   | -                                        | -          | Todas las props de Button excepto `size` |
+| Prop      | Tipo                                     | Default           | Descripción                              |
+| --------- | ---------------------------------------- | ----------------- | ---------------------------------------- |
+| `size`    | `"xs" \| "sm" \| "icon-xs" \| "icon-sm"` | `"xs"`            | Tamaño del botón                         |
+| `variant` | Button variants                          | `"ghost-neutral"` | Variante del botón                       |
+| `type`    | `string`                                 | `"button"`        | Tipo HTML del botón                      |
+| ...rest   | -                                        | -                 | Todas las props de Button excepto `size` |
 
 **Sizes**:
 
@@ -235,7 +235,7 @@ import {
   <InputGroupAddon align="inline-end">
     <Tooltip>
       <TooltipTrigger asChild>
-        <InputGroupButton variant="ghost" size="icon-xs">
+        <InputGroupButton size="icon-xs">
           <Icon symbol="info" className="text-base" />
         </InputGroupButton>
       </TooltipTrigger>
@@ -268,7 +268,6 @@ function App() {
         />
         <InputGroupAddon align="inline-end">
           <InputGroupButton
-            variant="ghost"
             size="icon-xs"
             onClick={() => setShowPassword(!showPassword)}
             aria-label={showPassword ? "Hide password" : "Show password"}
@@ -315,7 +314,7 @@ import {
   <InputGroupAddon align="inline-end">
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <InputGroupButton variant="ghost" size="icon-xs">
+        <InputGroupButton size="icon-xs">
           <Icon symbol="more_horiz" className="text-base" />
         </InputGroupButton>
       </DropdownMenuTrigger>
@@ -362,11 +361,7 @@ import { Label } from "@adamosuiteservices/ui/label";
     </Label>
     <Tooltip>
       <TooltipTrigger asChild>
-        <InputGroupButton
-          variant="ghost"
-          className="ml-auto rounded-full"
-          size="icon-xs"
-        >
+        <InputGroupButton className="ml-auto rounded-full" size="icon-xs">
           <Icon symbol="info" className="text-base" />
         </InputGroupButton>
       </TooltipTrigger>