xertica-ui 2.1.2 → 2.1.3

package/components/examples/SimpleFilterableMap.tsx

@@ -1,192 +1,192 @@
-import React, { useState } from 'react';
-import { Map } from '../ui/map';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
-import { Badge } from '../ui/badge';
-import { Checkbox } from '../ui/checkbox';
-import { Label } from '../ui/label';
-
-/**
- * Exemplo simples de mapa com marcadores de EMOJI e filtro
- * Demonstra uso de emojis com fundo branco para contraste
- * IMPORTANTE: Marcadores com emojis usam fundo branco (#FFFFFF)
- */
-
-// Dados de exemplo com emojis e fundo branco
-const locations = [
-  {
-    position: { lat: -23.5505, lng: -46.6333 },
-    label: '🍕',
-    title: 'Pizzaria do Bairro',
-    info: 'Melhor pizza artesanal',
-    color: '#FFFFFF', // Fundo branco para emojis
-    iconColor: '#000000', // Texto preto para emojis (melhor contraste)
-    category: 'food',
-  },
-  {
-    position: { lat: -23.5485, lng: -46.6350 },
-    label: '🍣',
-    title: 'Sushi Premium',
-    info: 'Culinária japonesa autêntica',
-    color: '#FFFFFF',
-    iconColor: '#000000',
-    category: 'food',
-  },
-  {
-    position: { lat: -23.5475, lng: -46.6361 },
-    label: '🏨',
-    title: 'Hotel Luxo',
-    info: '5 estrelas com spa',
-    color: '#FFFFFF',
-    iconColor: '#000000',
-    category: 'hotel',
-  },
-  {
-    position: { lat: -23.5530, lng: -46.6340 },
-    label: '🏩',
-    title: 'Hotel Boutique',
-    info: 'Design contemporâneo',
-    color: '#FFFFFF',
-    iconColor: '#000000',
-    category: 'hotel',
-  },
-  {
-    position: { lat: -23.5613, lng: -46.6563 },
-    label: '🌳',
-    title: 'Parque Ibirapuera',
-    info: 'Maior parque da cidade',
-    color: '#FFFFFF',
-    iconColor: '#000000',
-    category: 'attraction',
-  },
-  {
-    position: { lat: -23.5558, lng: -46.6396 },
-    label: '🎨',
-    title: 'MASP',
-    info: 'Museu de Arte',
-    color: '#FFFFFF',
-    iconColor: '#000000',
-    category: 'attraction',
-  },
-  {
-    position: { lat: -23.5465, lng: -46.6400 },
-    label: '🛍️',
-    title: 'Shopping Center',
-    info: 'Mais de 300 lojas',
-    color: '#FFFFFF',
-    iconColor: '#000000',
-    category: 'shopping',
-  },
-  {
-    position: { lat: -23.5495, lng: -46.6345 },
-    label: '☕',
-    title: 'Café Artesanal',
-    info: 'Café especial e brunch',
-    color: '#FFFFFF',
-    iconColor: '#000000',
-    category: 'cafe',
-  },
-];
-
-export function SimpleFilterableMap() {
-  const [filters, setFilters] = useState({
-    food: true,
-    hotel: true,
-    attraction: true,
-    shopping: true,
-    cafe: true,
-  });
-
-  // Filtrar marcadores
-  const filteredMarkers = locations
-    .filter(loc => filters[loc.category as keyof typeof filters])
-    .map(loc => ({
-      position: loc.position,
-      label: loc.label,
-      title: loc.title,
-      info: loc.info,
-      customColor: loc.color, // Sempre branco para emojis
-      iconColor: loc.iconColor, // Texto preto para emojis
-    }));
-
-  const toggleFilter = (category: keyof typeof filters) => {
-    setFilters(prev => ({ ...prev, [category]: !prev[category] }));
-  };
-
-  const filterConfig = [
-    { id: 'food', label: 'Restaurantes', emoji: '🍕', color: 'var(--destructive)', count: locations.filter(l => l.category === 'food').length },
-    { id: 'hotel', label: 'Hotéis', emoji: '🏨', color: 'var(--info)', count: locations.filter(l => l.category === 'hotel').length },
-    { id: 'attraction', label: 'Atrações', emoji: '🌳', color: 'var(--success)', count: locations.filter(l => l.category === 'attraction').length },
-    { id: 'shopping', label: 'Compras', emoji: '🛍️', color: 'var(--warning)', count: locations.filter(l => l.category === 'shopping').length },
-    { id: 'cafe', label: 'Cafés', emoji: '☕', color: 'var(--primary)', count: locations.filter(l => l.category === 'cafe').length },
-  ];
-
-  return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <CardTitle>Mapa com Emojis</CardTitle>
-          <Badge variant="secondary">
-            {filteredMarkers.length} de {locations.length} locais
-          </Badge>
-        </div>
-        <CardDescription>
-          Marcadores com emojis em fundo branco - Selecione as categorias para visualizar
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {/* Filtros Compactos com Checkboxes */}
-        <div className="flex flex-wrap gap-4 p-3 rounded-lg border bg-muted">
-          {filterConfig.map(filter => (
-            <div key={filter.id} className="flex items-center space-x-2">
-              <Checkbox
-                id={filter.id}
-                checked={filters[filter.id as keyof typeof filters]}
-                onCheckedChange={() => toggleFilter(filter.id as keyof typeof filters)}
-              />
-              <Label htmlFor={filter.id} className="flex items-center gap-2 cursor-pointer text-sm">
-                <span className="text-base">{filter.emoji}</span>
-                <span>{filter.label}</span>
-                <Badge variant="outline" className="text-xs h-4 px-1">
-                  {filter.count}
-                </Badge>
-              </Label>
-            </div>
-          ))}
-        </div>
-
-        {/* Mapa */}
-        <Map
-          center={{ lat: -23.5505, lng: -46.6333 }}
-          zoom={14}
-          markers={filteredMarkers}
-          height="450px"
-          zoomControl={true}
-          fullscreenControl={true}
-        />
-
-        {/* Legenda */}
-        <div className="flex flex-wrap gap-3 justify-center pt-3 border-t border-border">
-          {filterConfig.map(filter => (
-            <div
-              key={filter.id}
-              className="flex items-center gap-2 px-3 py-1 rounded-lg"
-              style={{
-                backgroundColor: filters[filter.id as keyof typeof filters]
-                  ? `color-mix(in srgb, ${filter.color}, transparent 85%)`
-                  : 'var(--muted)',
-                opacity: filters[filter.id as keyof typeof filters] ? 1 : 0.5,
-              }}
-            >
-              <div
-                className="w-3 h-3 rounded-full"
-                style={{ backgroundColor: filter.color }}
-              />
-              <span className="text-base">{filter.emoji}</span>
-              <span className="text-sm">{filter.label}</span>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
+import React, { useState } from 'react';
+import { Map } from '../ui/map';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { Checkbox } from '../ui/checkbox';
+import { Label } from '../ui/label';
+
+/**
+ * Exemplo simples de mapa com marcadores de EMOJI e filtro
+ * Demonstra uso de emojis com fundo branco para contraste
+ * IMPORTANTE: Marcadores com emojis usam fundo branco (#FFFFFF)
+ */
+
+// Dados de exemplo com emojis e fundo branco
+const locations = [
+  {
+    position: { lat: -23.5505, lng: -46.6333 },
+    label: '🍕',
+    title: 'Pizzaria do Bairro',
+    info: 'Melhor pizza artesanal',
+    color: '#FFFFFF', // Fundo branco para emojis
+    iconColor: '#000000', // Texto preto para emojis (melhor contraste)
+    category: 'food',
+  },
+  {
+    position: { lat: -23.5485, lng: -46.6350 },
+    label: '🍣',
+    title: 'Sushi Premium',
+    info: 'Culinária japonesa autêntica',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'food',
+  },
+  {
+    position: { lat: -23.5475, lng: -46.6361 },
+    label: '🏨',
+    title: 'Hotel Luxo',
+    info: '5 estrelas com spa',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'hotel',
+  },
+  {
+    position: { lat: -23.5530, lng: -46.6340 },
+    label: '🏩',
+    title: 'Hotel Boutique',
+    info: 'Design contemporâneo',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'hotel',
+  },
+  {
+    position: { lat: -23.5613, lng: -46.6563 },
+    label: '🌳',
+    title: 'Parque Ibirapuera',
+    info: 'Maior parque da cidade',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'attraction',
+  },
+  {
+    position: { lat: -23.5558, lng: -46.6396 },
+    label: '🎨',
+    title: 'MASP',
+    info: 'Museu de Arte',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'attraction',
+  },
+  {
+    position: { lat: -23.5465, lng: -46.6400 },
+    label: '🛍️',
+    title: 'Shopping Center',
+    info: 'Mais de 300 lojas',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'shopping',
+  },
+  {
+    position: { lat: -23.5495, lng: -46.6345 },
+    label: '☕',
+    title: 'Café Artesanal',
+    info: 'Café especial e brunch',
+    color: '#FFFFFF',
+    iconColor: '#000000',
+    category: 'cafe',
+  },
+];
+
+export function SimpleFilterableMap() {
+  const [filters, setFilters] = useState({
+    food: true,
+    hotel: true,
+    attraction: true,
+    shopping: true,
+    cafe: true,
+  });
+
+  // Filtrar marcadores
+  const filteredMarkers = locations
+    .filter(loc => filters[loc.category as keyof typeof filters])
+    .map(loc => ({
+      position: loc.position,
+      label: loc.label,
+      title: loc.title,
+      info: loc.info,
+      customColor: loc.color, // Sempre branco para emojis
+      iconColor: loc.iconColor, // Texto preto para emojis
+    }));
+
+  const toggleFilter = (category: keyof typeof filters) => {
+    setFilters(prev => ({ ...prev, [category]: !prev[category] }));
+  };
+
+  const filterConfig = [
+    { id: 'food', label: 'Restaurantes', emoji: '🍕', color: 'var(--destructive)', count: locations.filter(l => l.category === 'food').length },
+    { id: 'hotel', label: 'Hotéis', emoji: '🏨', color: 'var(--info)', count: locations.filter(l => l.category === 'hotel').length },
+    { id: 'attraction', label: 'Atrações', emoji: '🌳', color: 'var(--success)', count: locations.filter(l => l.category === 'attraction').length },
+    { id: 'shopping', label: 'Compras', emoji: '🛍️', color: 'var(--warning)', count: locations.filter(l => l.category === 'shopping').length },
+    { id: 'cafe', label: 'Cafés', emoji: '☕', color: 'var(--primary)', count: locations.filter(l => l.category === 'cafe').length },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle>Mapa com Emojis</CardTitle>
+          <Badge variant="secondary">
+            {filteredMarkers.length} de {locations.length} locais
+          </Badge>
+        </div>
+        <CardDescription>
+          Marcadores com emojis em fundo branco - Selecione as categorias para visualizar
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Filtros Compactos com Checkboxes */}
+        <div className="flex flex-wrap gap-4 p-3 rounded-lg border bg-muted">
+          {filterConfig.map(filter => (
+            <div key={filter.id} className="flex items-center space-x-2">
+              <Checkbox
+                id={filter.id}
+                checked={filters[filter.id as keyof typeof filters]}
+                onCheckedChange={() => toggleFilter(filter.id as keyof typeof filters)}
+              />
+              <Label htmlFor={filter.id} className="flex items-center gap-2 cursor-pointer text-sm">
+                <span className="text-base">{filter.emoji}</span>
+                <span>{filter.label}</span>
+                <Badge variant="outline" className="text-xs h-4 px-1">
+                  {filter.count}
+                </Badge>
+              </Label>
+            </div>
+          ))}
+        </div>
+
+        {/* Mapa */}
+        <Map
+          center={{ lat: -23.5505, lng: -46.6333 }}
+          zoom={14}
+          markers={filteredMarkers}
+          height="450px"
+          zoomControl={true}
+          fullscreenControl={true}
+        />
+
+        {/* Legenda */}
+        <div className="flex flex-wrap gap-3 justify-center pt-3 border-t border-border">
+          {filterConfig.map(filter => (
+            <div
+              key={filter.id}
+              className="flex items-center gap-2 px-3 py-1 rounded-lg"
+              style={{
+                backgroundColor: filters[filter.id as keyof typeof filters]
+                  ? `color-mix(in srgb, ${filter.color}, transparent 85%)`
+                  : 'var(--muted)',
+                opacity: filters[filter.id as keyof typeof filters] ? 1 : 0.5,
+              }}
+            >
+              <div
+                className="w-3 h-3 rounded-full"
+                style={{ backgroundColor: filter.color }}
+              />
+              <span className="text-base">{filter.emoji}</span>
+              <span className="text-sm">{filter.label}</span>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
 }

package/components/examples/index.ts

@@ -1,52 +1,52 @@
-/**
- * Map Examples - Index
- * 
- * Exportação centralizada de todos os exemplos de Map
- */
-
-// Exemplos básicos
-export {
-  StoreDeliveryMap,
-  FavoritePlacesMap,
-  CompanyOfficesMap,
-  ServiceZoneMap,
-  CompactMapsGrid
-} from './MapExamples';
-
-// Exemplos de rotas
-export {
-  DeliveryRouteMap,
-  TouristRouteMap,
-  TransportModeComparison,
-  MultiStopDeliveryRoute,
-  RouteMapShowcase
-} from './RouteMapExamples';
-
-// Exemplos avançados
-export {
-  LocationPickerExample,
-  DeliveryAddressSelector
-} from './LocationPickerExample';
-
-// Exemplo com filtros
-export {
-  FilterableMapExample,
-  markerGroups,
-  type MarkerGroupId
-} from './FilterableMapExample';
-
-// Exemplo simples com filtros
-export { SimpleFilterableMap } from './SimpleFilterableMap';
-
-// Showcase completo
-export { MapShowcase } from './MapShowcase';
-
-/**
- * Uso:
- * 
- * import { StoreDeliveryMap, LocationPickerExample } from '@/components/examples';
- * 
- * ou
- * 
- * import { StoreDeliveryMap } from '@/components/examples/MapExamples';
+/**
+ * Map Examples - Index
+ * 
+ * Exportação centralizada de todos os exemplos de Map
+ */
+
+// Exemplos básicos
+export {
+  StoreDeliveryMap,
+  FavoritePlacesMap,
+  CompanyOfficesMap,
+  ServiceZoneMap,
+  CompactMapsGrid
+} from './MapExamples';
+
+// Exemplos de rotas
+export {
+  DeliveryRouteMap,
+  TouristRouteMap,
+  TransportModeComparison,
+  MultiStopDeliveryRoute,
+  RouteMapShowcase
+} from './RouteMapExamples';
+
+// Exemplos avançados
+export {
+  LocationPickerExample,
+  DeliveryAddressSelector
+} from './LocationPickerExample';
+
+// Exemplo com filtros
+export {
+  FilterableMapExample,
+  markerGroups,
+  type MarkerGroupId
+} from './FilterableMapExample';
+
+// Exemplo simples com filtros
+export { SimpleFilterableMap } from './SimpleFilterableMap';
+
+// Showcase completo
+export { MapShowcase } from './MapShowcase';
+
+/**
+ * Uso:
+ * 
+ * import { StoreDeliveryMap, LocationPickerExample } from '@/components/examples';
+ * 
+ * ou
+ * 
+ * import { StoreDeliveryMap } from '@/components/examples/MapExamples';
  */

package/components/figma/ImageWithFallback.tsx

@@ -1,27 +1,27 @@
-import React, { useState } from 'react'
-
-const ERROR_IMG_SRC =
-  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
-
-export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
-  const [didError, setDidError] = useState(false)
-
-  const handleError = () => {
-    setDidError(true)
-  }
-
-  const { src, alt, style, className, ...rest } = props
-
-  return didError ? (
-    <div
-      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
-      style={style}
-    >
-      <div className="flex items-center justify-center w-full h-full">
-        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
-      </div>
-    </div>
-  ) : (
-    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
-  )
-}
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
+  const [didError, setDidError] = useState(false)
+
+  const handleError = () => {
+    setDidError(true)
+  }
+
+  const { src, alt, style, className, ...rest } = props
+
+  return didError ? (
+    <div
+      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
+      style={style}
+    >
+      <div className="flex items-center justify-center w-full h-full">
+        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
+      </div>
+    </div>
+  ) : (
+    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+  )
+}

package/components/hooks/index.ts

@@ -1,7 +1,7 @@
-export * from '../../contexts/LayoutContext';
-export * from '../../contexts/ThemeContext';
-export * from '../../contexts/LanguageContext';
-export * from '../../contexts/BrandColorsContext';
-export * from '../../contexts/AssistenteContext';
-export * from '../../contexts/ApiKeyContext';
-export { useMobile, useIsMobile } from '../shared/use-mobile';
+export * from '../../contexts/LayoutContext';
+export * from '../../contexts/ThemeContext';
+export * from '../../contexts/LanguageContext';
+export * from '../../contexts/BrandColorsContext';
+export * from '../../contexts/AssistenteContext';
+export * from '../../contexts/ApiKeyContext';
+export { useMobile, useIsMobile } from '../shared/use-mobile';

package/components/index.ts

@@ -30,10 +30,10 @@ export type {
 } from './assistant/xertica-assistant/xertica-assistant';
 
 // ============================================================================
-// Page Components
-// ============================================================================
-
-export * from './pages';
+// Page Components
+// ============================================================================
+
+export * from './pages';
 
 // UI Components - All available via /components/ui/index.ts
 export * from './ui';
@@ -74,4 +74,4 @@ export { FloatingMediaWrapper } from './media/FloatingMediaWrapper';
 // PodcastPlayer was consolidated into AudioPlayer via colorVariant="primary" prop
 
 // Demo utilities (for templates)
-export { gerarResposta, gerarResposta as generateDemoResponse } from './shared/assistant-utils';
+export { gerarResposta, gerarResposta as generateDemoResponse } from './shared/assistant-utils';

package/components/layout/header/header.test.tsx

@@ -31,14 +31,14 @@ vi.mock('../../ui/dropdown-menu', () => ({
   DropdownMenuPortal: ({ children }: any) => <>{children}</>,
 }));
 
-describe('Header', () => {
-  it('renders without a LayoutProvider', () => {
-    render(<Header title="Standalone" />);
-
-    expect(screen.getByText('Standalone')).toBeInTheDocument();
-  });
-
-  it('renders correctly with title', () => {
+describe('Header', () => {
+  it('renders without a LayoutProvider', () => {
+    render(<Header title="Standalone" />);
+
+    expect(screen.getByText('Standalone')).toBeInTheDocument();
+  });
+
+  it('renders correctly with title', () => {
     render(
       <LayoutProvider>
         <Header title="Dashboard" />

package/components/layout/header/header.tsx

@@ -21,7 +21,7 @@ import {
 } from '../../ui/dropdown-menu';
 import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
 
-import { useOptionalLayout } from '../../../contexts/LayoutContext';
+import { useOptionalLayout } from '../../../contexts/LayoutContext';
 
 /**
  * Breadcrumb entry for the header navigation.
@@ -161,9 +161,9 @@ export function Header({
     onLogoutClick,
     renderLink,
     breadcrumbSlot,
-}: HeaderProps) {
-    const layout = useOptionalLayout();
-    const toggleSidebar = layout?.toggleSidebar ?? (() => {});
+}: HeaderProps) {
+    const layout = useOptionalLayout();
+    const toggleSidebar = layout?.toggleSidebar ?? (() => {});
 
     return (
         <header className={`bg-card text-foreground shadow-sm border-b border-border px-[24px] h-[64px] flex-shrink-0 flex items-center ${className || ''}`}>

package/components/layout/index.ts

@@ -1,2 +1,2 @@
-export * from './sidebar';
-export * from './header';
+export * from './sidebar';
+export * from './header';

package/components/layout/sidebar/index.ts

@@ -1 +1,3 @@
 export * from './sidebar';
+export { useSidebar } from './use-sidebar';
+export type { UseSidebarProps } from './use-sidebar';

package/components/layout/sidebar/sidebar.mdx

@@ -76,7 +76,7 @@ The expansion state is automatically persisted in a cookie (`sidebar_state`), en
 The Sidebar should ideally be synchronized with the `useLayout()` hook to ensure the main application container adjusts its padding accordingly.
 
 ```tsx
-import { Sidebar } from 'xertica-ui/layout';
+import { Sidebar } from 'xertica-ui/layout';
 import { useLayout } from 'xertica-ui/hooks';
 
 const { sidebarExpanded, toggleSidebar, sidebarWidth } = useLayout();