xertica-ui 1.0.0

package/components/ui/input-otp.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName,
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number;
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "data-[active=true]:border-primary data-[active=true]:ring-primary/20 data-[active=true]:aria-invalid:ring-destructive/20 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex h-10 w-10 items-center justify-center border border-border rounded-[var(--radius)] text-base bg-background transition-all outline-none data-[active=true]:z-10 data-[active=true]:ring-2",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/components/ui/input.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+interface InputProps extends React.ComponentProps<"input"> {
+  size?: "sm" | "md" | "lg";
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, size = "md", ...props }, ref) => {
+    const sizeClasses = {
+      sm: "h-8 px-2 py-1 text-sm",
+      md: "h-10 px-3 py-2 text-base",
+      lg: "h-12 px-4 py-3 text-base",
+    };
+
+    return (
+      <input
+        type={type}
+        data-slot="input"
+        className={cn(
+          "flex w-full min-w-0 bg-background rounded-[var(--radius)] border border-border transition-colors outline-none text-foreground",
+          "placeholder:text-muted-foreground",
+          "focus:ring-2 focus:ring-primary focus:border-transparent",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+          sizeClasses[size],
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

package/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "./utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/components/ui/map-config.ts

@@ -0,0 +1,12 @@
+/**
+ * Configurações globais para Google Maps
+ * 
+ * GOOGLE_MAPS_LIBRARIES: Bibliotecas a serem carregadas
+ * - marker: Biblioteca de marcadores avançados (AdvancedMarkerElement)
+ * - places: Biblioteca de lugares e autocompletar
+ * - geometry: Biblioteca de cálculos geométricos
+ * 
+ * GOOGLE_MAPS_ID: ID único do script para prevenir duplicação
+ */
+export const GOOGLE_MAPS_LIBRARIES: ("marker" | "places" | "geometry" | "drawing")[] = ['marker', 'places', 'geometry', 'drawing'];
+export const GOOGLE_MAPS_ID = 'xertica-google-map-script';

package/components/ui/map-layers.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * MapLayers - Componentes de camadas para Map
+ * 
+ * Camadas nativas do Google Maps que podem ser adicionadas ao mapa.
+ * Estas camadas são usadas dentro do componente Map através da prop `layers`.
+ * 
+ * Tipos de camadas disponíveis:
+ * - traffic: Camada de tráfego em tempo real
+ * - transit: Camada de transporte público
+ * - bicycling: Camada de rotas para bicicletas
+ */
+
+export type MapLayerType = 'traffic' | 'transit' | 'bicycling';
+
+export interface MapLayersConfig {
+  traffic?: boolean;
+  transit?: boolean;
+  bicycling?: boolean;
+}
+
+/**
+ * Hook para gerenciar camadas do mapa
+ * 
+ * @param map - Instância do Google Maps
+ * @param layers - Configuração das camadas a serem exibidas
+ */
+export function useMapLayers(
+  map: google.maps.Map | null,
+  layers: MapLayersConfig
+) {
+  const trafficLayerRef = useRef<google.maps.TrafficLayer | null>(null);
+  const transitLayerRef = useRef<google.maps.TransitLayer | null>(null);
+  const bicyclingLayerRef = useRef<google.maps.BicyclingLayer | null>(null);
+
+  // Traffic Layer
+  useEffect(() => {
+    if (!map) return;
+
+    if (layers.traffic) {
+      if (!trafficLayerRef.current) {
+        trafficLayerRef.current = new google.maps.TrafficLayer();
+      }
+      trafficLayerRef.current.setMap(map);
+    } else {
+      if (trafficLayerRef.current) {
+        trafficLayerRef.current.setMap(null);
+      }
+    }
+
+    return () => {
+      if (trafficLayerRef.current) {
+        trafficLayerRef.current.setMap(null);
+      }
+    };
+  }, [map, layers.traffic]);
+
+  // Transit Layer
+  useEffect(() => {
+    if (!map) return;
+
+    if (layers.transit) {
+      if (!transitLayerRef.current) {
+        transitLayerRef.current = new google.maps.TransitLayer();
+      }
+      transitLayerRef.current.setMap(map);
+    } else {
+      if (transitLayerRef.current) {
+        transitLayerRef.current.setMap(null);
+      }
+    }
+
+    return () => {
+      if (transitLayerRef.current) {
+        transitLayerRef.current.setMap(null);
+      }
+    };
+  }, [map, layers.transit]);
+
+  // Bicycling Layer
+  useEffect(() => {
+    if (!map) return;
+
+    if (layers.bicycling) {
+      if (!bicyclingLayerRef.current) {
+        bicyclingLayerRef.current = new google.maps.BicyclingLayer();
+      }
+      bicyclingLayerRef.current.setMap(map);
+    } else {
+      if (bicyclingLayerRef.current) {
+        bicyclingLayerRef.current.setMap(null);
+      }
+    }
+
+    return () => {
+      if (bicyclingLayerRef.current) {
+        bicyclingLayerRef.current.setMap(null);
+      }
+    };
+  }, [map, layers.bicycling]);
+}
+
+/**
+ * Exemplo de uso:
+ * 
+ * ```tsx
+ * import { Map } from './ui/map';
+ * import { useState } from 'react';
+ * 
+ * function MyMapComponent() {
+ *   const [layers, setLayers] = useState({
+ *     traffic: false,
+ *     transit: false,
+ *     bicycling: false,
+ *   });
+ * 
+ *   return (
+ *     <Map
+ *       center={{ lat: -23.5505, lng: -46.6333 }}
+ *       zoom={13}
+ *       layers={layers}
+ *     />
+ *   );
+ * }
+ * ```
+ */

package/components/ui/map.exports.ts

@@ -0,0 +1,31 @@
+/**
+ * Map Components - Exports
+ * 
+ * Arquivo central para exportação de todos os componentes relacionados a mapas
+ */
+
+export { Map } from './map';
+export type { MapProps } from './map';
+
+export { SimpleMap } from './simple-map';
+
+export { RouteMap } from './route-map';
+export type { RouteMapProps } from './route-map';
+
+export { GoogleMapsLoaderProvider, useGoogleMapsLoader } from './google-maps-loader';
+
+export { useMapLayers } from './map-layers';
+export type { MapLayersConfig, MapLayerType } from './map-layers';
+
+/**
+ * Uso:
+ * 
+ * import { Map, SimpleMap, RouteMap } from './ui/map.exports';
+ * import type { MapProps, MapLayersConfig } from './ui/map.exports';
+ * 
+ * ou
+ * 
+ * import { Map } from './ui/map';
+ * import { SimpleMap } from './ui/simple-map';
+ * import { RouteMap } from './ui/route-map';
+ */