@komensal/ui 0.16.1 → 0.17.1

package/dist/chunk-5VBG6IKL.js

@@ -1,649 +0,0 @@
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/utils/color.ts
-function isLightColor(hex) {
-  const normalized = hex.replace("#", "");
-  const r = parseInt(normalized.slice(0, 2), 16);
-  const g = parseInt(normalized.slice(2, 4), 16);
-  const b = parseInt(normalized.slice(4, 6), 16);
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.6;
-}
-
-// src/utils/format.ts
-var DEFAULT_CURRENCY = "COP";
-var DEFAULT_LOCALE = "es-CO";
-function capitalize(value) {
-  if (!value) return "";
-  const trimmed = value.trimStart();
-  if (trimmed.length === 0) return value;
-  return trimmed.charAt(0).toLocaleUpperCase("es") + trimmed.slice(1);
-}
-function formatNumber(value, locale = DEFAULT_LOCALE) {
-  return new Intl.NumberFormat(locale, { style: "decimal" }).format(value);
-}
-function formatPrice(value, locale = DEFAULT_LOCALE, currency = DEFAULT_CURRENCY) {
-  return new Intl.NumberFormat(locale, {
-    currency,
-    maximumFractionDigits: 0,
-    style: "currency"
-  }).format(value).replace(/\s/g, "");
-}
-
-// src/utils/styles.ts
-var focusRing = cn("focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none");
-var inputSurface = cn(
-  "w-full rounded-[10px] px-3 text-base font-normal",
-  "border-border bg-surface text-foreground border",
-  "transition-all duration-200 ease-in-out",
-  "placeholder:text-icon-muted placeholder:text-sm placeholder:leading-none placeholder:font-normal",
-  "disabled:bg-inactive disabled:text-inactive-text disabled:border-inactive disabled:placeholder:text-inactive-text disabled:cursor-not-allowed"
-);
-var inputBase = cn("flex h-[50px] items-center justify-between gap-[10px]", inputSurface);
-var inputPlaceholder = cn("text-icon-muted text-sm leading-none font-normal");
-var inputDisabled = cn("cursor-not-allowed opacity-50");
-var inputCompact = cn(
-  "border-border bg-surface text-foreground focus:border-primary focus:ring-ring h-9 w-full rounded-lg border px-2.5 text-sm focus:ring-2 focus:outline-none"
-);
-var inputFocus = cn(
-  "focus:outline-none focus-visible:outline-none",
-  "focus-visible:ring-ring focus-visible:border-primary focus-visible:ring-2",
-  "data-[state=open]:ring-ring data-[state=open]:border-primary data-[state=open]:ring-2"
-);
-
-// src/utils/tag-emoji.ts
-var TAG_EMOJI_RULES = [
-  { emoji: "\u{1F336}\uFE0F", keywords: ["picante", "picoso", "spicy"] },
-  { emoji: "\u{1F95C}", keywords: ["nuez", "nueces", "mani", "cacahuate", "frutos secos"] },
-  { emoji: "\u{1F331}", keywords: ["vegano", "vegetariano", "vegan"] },
-  { emoji: "\u{1F33E}", keywords: ["sin gluten", "gluten free"] },
-  { emoji: "\u{1F95B}", keywords: ["lacteos", "leche", "lactosa"] },
-  { emoji: "\u{1F990}", keywords: ["marisco", "camaron"] },
-  { emoji: "\u{1F525}", keywords: ["popular", "top ventas"] },
-  { emoji: "\u{1F195}", keywords: ["nuevo", "new"] },
-  { emoji: "\u{1F36C}", keywords: ["dulce"] },
-  { emoji: "\u{1F9CA}", keywords: ["frio", "helado"] }
-];
-function getTagEmoji(tag) {
-  const normalized = normalize(tag);
-  const match = TAG_EMOJI_RULES.find((rule) => rule.keywords.some((keyword) => normalized.includes(keyword)));
-  return match?.emoji ?? null;
-}
-function normalize(text) {
-  return text.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
-}
-
-// src/utils/toast-emitter.ts
-var emitToast = null;
-var toast = {
-  error(options) {
-    emit("destructive", options);
-  },
-  info(options) {
-    emit("info", options);
-  },
-  success(options) {
-    emit("success", options);
-  },
-  wait(options) {
-    emit("wait", options);
-  },
-  warning(options) {
-    emit("warning", options);
-  }
-};
-function registerToastEmitter(fn) {
-  emitToast = fn;
-}
-function emit(type, options) {
-  if (!emitToast) return;
-  if (typeof options === "string") {
-    emitToast(type, { title: options });
-  } else {
-    emitToast(type, options);
-  }
-}
-
-// src/utils/url.ts
-function isSafeUrl(url) {
-  try {
-    const parsed = new URL(url, "https://placeholder.invalid");
-    return parsed.protocol === "http:" || parsed.protocol === "https:";
-  } catch {
-    return false;
-  }
-}
-
-// src/utils/z-index.ts
-var zPopover = "z-50";
-var zDialogOverlay = "z-60";
-var zDialogContent = "z-70";
-var zPopoverAboveDialog = "z-100";
-var zToast = "z-4000";
-
-// src/components/form-context.ts
-import * as React from "react";
-import { useFormContext } from "react-hook-form";
-var FormFieldContext = React.createContext(null);
-var FormItemContext = React.createContext(null);
-var getFormItemId = (id) => `${id}-form-item`;
-var useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { formState, getFieldState } = useFormContext();
-  if (!fieldContext) {
-    throw new Error("useFormField must be used within <FormField>");
-  }
-  if (!itemContext) {
-    throw new Error("useFormField must be used within <FormItem>");
-  }
-  const fieldState = getFieldState(fieldContext.name, formState);
-  const { id } = itemContext;
-  return {
-    formDescriptionId: `${id}-form-item-description`,
-    formItemId: getFormItemId(id),
-    formMessageId: `${id}-form-item-message`,
-    id,
-    name: fieldContext.name,
-    ...fieldState
-  };
-};
-var useFormControlProps = () => {
-  const { error, formItemId, formMessageId } = useFormField();
-  return {
-    "aria-describedby": error?.message ? formMessageId : void 0,
-    "aria-invalid": !!error,
-    id: formItemId
-  };
-};
-var useOptionalFormItemId = () => {
-  const itemContext = React.useContext(FormItemContext);
-  return itemContext ? getFormItemId(itemContext.id) : void 0;
-};
-
-// src/components/form.tsx
-import { Slot } from "@radix-ui/react-slot";
-import * as React2 from "react";
-import { Controller, FormProvider } from "react-hook-form";
-import { jsx } from "react/jsx-runtime";
-var Form = FormProvider;
-var FormField = ({
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
-};
-var FormItem = React2.forwardRef(
-  ({ className, ...props }, ref) => {
-    const id = React2.useId();
-    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { className: cn("space-y-1", className), ref, ...props }) });
-  }
-);
-FormItem.displayName = "FormItem";
-var FormControl = React2.forwardRef(
-  ({ ...props }, ref) => {
-    const controlProps = useFormControlProps();
-    return /* @__PURE__ */ jsx(Slot, { ...controlProps, ref, ...props });
-  }
-);
-FormControl.displayName = "FormControl";
-var FormMessage = React2.forwardRef(
-  ({ children, className, ...props }, ref) => {
-    const { error, formMessageId } = useFormField();
-    const body = error?.message ? String(error.message) : children;
-    if (!body) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx("p", { className: cn("text-destructive text-xs font-medium", className), id: formMessageId, ref, ...props, children: body });
-  }
-);
-FormMessage.displayName = "FormMessage";
-
-// src/components/label.tsx
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva } from "class-variance-authority";
-import * as React3 from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-var Label = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(LabelPrimitive.Root, { className: cn(labelVariants(), className), ref, ...props }));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-// src/components/form-fields/label-field.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var LabelField = ({ htmlFor, label, labelClassName, name, visualRequired }) => {
-  const formItemId = useOptionalFormItemId();
-  return /* @__PURE__ */ jsxs(
-    Label,
-    {
-      className: cn("text-body mb-2 text-start text-sm leading-none font-normal tracking-normal", labelClassName),
-      htmlFor: htmlFor ?? formItemId ?? name,
-      children: [
-        /* @__PURE__ */ jsx3("span", { children: label }),
-        " ",
-        visualRequired && /* @__PURE__ */ jsx3("span", { className: "text-destructive", children: " *" })
-      ]
-    }
-  );
-};
-
-// src/components/google-map-picker.tsx
-import { AdvancedMarker, APIProvider, Map } from "@vis.gl/react-google-maps";
-import { useId as useId2 } from "react";
-
-// src/components/use-google-map-picker.ts
-import { useMap, useMapsLibrary } from "@vis.gl/react-google-maps";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-var PICKER_MAP_ID = "komensal-restaurant-map";
-var SELECTED_ZOOM = 15;
-var CITY_ZOOM = 12;
-var DEBOUNCE_MS = 300;
-var BLUR_CLOSE_DELAY_MS = 150;
-var parseComponents = (components) => {
-  const find = (type) => components.find((c) => c.types.includes(type));
-  const country = find("country");
-  const department = find("administrative_area_level_1");
-  const city = find("locality") ?? find("administrative_area_level_2");
-  return {
-    city: city?.long ?? null,
-    country: country?.short ?? null,
-    countryName: country?.long ?? null,
-    department: department?.long ?? null
-  };
-};
-function useGoogleMapPicker({
-  centerOn,
-  countryCode,
-  disabled,
-  initialPosition,
-  locationQuery,
-  locationZoom,
-  onAddressResolved,
-  onChange,
-  onError,
-  value
-}) {
-  const placesLib = useMapsLibrary("places");
-  const geocodingLib = useMapsLibrary("geocoding");
-  const map = useMap(PICKER_MAP_ID);
-  const onChangeRef = useRef(onChange);
-  const onResolvedRef = useRef(onAddressResolved);
-  const onErrorRef = useRef(onError);
-  const geocoder = useMemo(
-    () => geocodingLib ? new geocodingLib.Geocoder() : null,
-    [geocodingLib]
-  );
-  const debounceRef = useRef(null);
-  const blurTimeoutRef = useRef(null);
-  const [inputValue, setInputValue] = useState(value);
-  const [suggestions, setSuggestions] = useState([]);
-  const [showDropdown, setShowDropdown] = useState(false);
-  const [sessionToken, setSessionToken] = useState();
-  const [position, setPosition] = useState(initialPosition ?? null);
-  useEffect(() => {
-    onChangeRef.current = onChange;
-    onResolvedRef.current = onAddressResolved;
-    onErrorRef.current = onError;
-  });
-  useEffect(
-    () => () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
-    },
-    []
-  );
-  const [prevValue, setPrevValue] = useState(value);
-  if (prevValue !== value) {
-    setPrevValue(value);
-    setInputValue(value);
-  }
-  useEffect(() => {
-    if (map && centerOn) {
-      map.panTo(centerOn);
-      map.setZoom(CITY_ZOOM);
-    }
-  }, [map, centerOn]);
-  useEffect(() => {
-    if (map && position) {
-      map.panTo(position);
-      map.setZoom(SELECTED_ZOOM);
-    }
-  }, [map, position]);
-  const [prevPlacesLib, setPrevPlacesLib] = useState(placesLib);
-  if (prevPlacesLib !== placesLib) {
-    setPrevPlacesLib(placesLib);
-    if (placesLib) setSessionToken(new placesLib.AutocompleteSessionToken());
-  }
-  useEffect(() => {
-    if (!geocoder || !locationQuery || !map || position) return;
-    const g = geocoder;
-    const ctrl = { cancelled: false };
-    void (async () => {
-      try {
-        const { results } = await g.geocode({ address: locationQuery });
-        if (ctrl.cancelled || results.length === 0) return;
-        const loc = results[0].geometry.location;
-        map.panTo({ lat: loc.lat(), lng: loc.lng() });
-        map.setZoom(locationZoom ?? CITY_ZOOM);
-      } catch (error) {
-        if (!ctrl.cancelled) {
-          console.error("[GoogleMapPicker] geocode by query failed", error);
-          onErrorRef.current?.(error);
-        }
-      }
-    })();
-    return () => {
-      ctrl.cancelled = true;
-    };
-  }, [geocoder, locationQuery, locationZoom, map, position]);
-  const fetchSuggestions = useCallback(
-    async (input) => {
-      if (!placesLib || input.length < 2) {
-        setSuggestions([]);
-        return;
-      }
-      try {
-        const result = await placesLib.AutocompleteSuggestion.fetchAutocompleteSuggestions({
-          includedRegionCodes: countryCode ? [countryCode.trim().toLowerCase()] : void 0,
-          input,
-          sessionToken
-        });
-        setSuggestions(result.suggestions);
-        setShowDropdown(true);
-      } catch (error) {
-        console.error("[GoogleMapPicker] fetchAutocompleteSuggestions failed", error);
-        onErrorRef.current?.(error);
-        setSuggestions([]);
-      }
-    },
-    [placesLib, sessionToken, countryCode]
-  );
-  const reverseGeocode = useCallback(
-    async (latLng) => {
-      if (!geocoder) return;
-      try {
-        const { results } = await geocoder.geocode({ location: latLng });
-        if (results.length > 0) {
-          const result = results[0];
-          const address = result.formatted_address;
-          setInputValue(address);
-          onChangeRef.current(address);
-          const parts = parseComponents(
-            result.address_components.map((c) => ({ long: c.long_name, short: c.short_name, types: c.types }))
-          );
-          onResolvedRef.current?.({ address, lat: latLng.lat, lng: latLng.lng, ...parts });
-        }
-      } catch (error) {
-        console.error("[GoogleMapPicker] reverse geocode failed", error);
-        onErrorRef.current?.(error);
-      }
-    },
-    [geocoder]
-  );
-  const handleInputChange = (e) => {
-    const val = e.target.value;
-    setInputValue(val);
-    onChangeRef.current(val);
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => void fetchSuggestions(val), DEBOUNCE_MS);
-  };
-  const handleSelect = async (suggestion) => {
-    const prediction = suggestion.placePrediction;
-    if (!prediction) return;
-    const place = prediction.toPlace();
-    await place.fetchFields({ fields: ["formattedAddress", "location", "addressComponents"] });
-    const address = place.formattedAddress ?? prediction.text.text;
-    setInputValue(address);
-    onChangeRef.current(address);
-    setSuggestions([]);
-    setShowDropdown(false);
-    const lat = place.location?.lat() ?? null;
-    const lng = place.location?.lng() ?? null;
-    if (place.location) {
-      setPosition({ lat: place.location.lat(), lng: place.location.lng() });
-    }
-    const parts = parseComponents(
-      (place.addressComponents ?? []).map((c) => ({ long: c.longText, short: c.shortText, types: c.types }))
-    );
-    onResolvedRef.current?.({ address, lat, lng, ...parts });
-    if (placesLib) setSessionToken(new placesLib.AutocompleteSessionToken());
-  };
-  const handleBlur = () => {
-    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
-    blurTimeoutRef.current = setTimeout(() => setShowDropdown(false), BLUR_CLOSE_DELAY_MS);
-  };
-  const handleMapClick = useCallback(
-    (e) => {
-      if (disabled || !e.detail.latLng) return;
-      const latLng = e.detail.latLng;
-      setPosition(latLng);
-      void reverseGeocode(latLng);
-    },
-    [disabled, reverseGeocode]
-  );
-  const handleMarkerDragEnd = useCallback(
-    (e) => {
-      const latLng = e.latLng;
-      if (!latLng) return;
-      const pos = { lat: latLng.lat(), lng: latLng.lng() };
-      setPosition(pos);
-      void reverseGeocode(pos);
-    },
-    [reverseGeocode]
-  );
-  return {
-    handleBlur,
-    handleInputChange,
-    handleMapClick,
-    handleMarkerDragEnd,
-    handleSelect,
-    inputValue,
-    position,
-    setShowDropdown,
-    showDropdown,
-    suggestions
-  };
-}
-
-// src/components/google-map-picker.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var DEFAULT_CENTER = { lat: 4.711, lng: -74.0721 };
-var MapPickerContent = (props) => {
-  const {
-    "aria-describedby": ariaDescribedBy,
-    "aria-invalid": ariaInvalid,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    disabled,
-    hasError,
-    id,
-    mapId,
-    placeholder
-  } = props;
-  const listboxId = useId2();
-  const {
-    handleBlur,
-    handleInputChange,
-    handleMapClick,
-    handleMarkerDragEnd,
-    handleSelect,
-    inputValue,
-    position,
-    setShowDropdown,
-    showDropdown,
-    suggestions
-  } = useGoogleMapPicker(props);
-  const isExpanded = showDropdown && suggestions.length > 0;
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx4(
-        "input",
-        {
-          "aria-autocomplete": "list",
-          "aria-controls": isExpanded ? listboxId : void 0,
-          "aria-describedby": ariaDescribedBy,
-          "aria-expanded": isExpanded,
-          "aria-invalid": ariaInvalid ?? (hasError ? true : void 0),
-          "aria-label": ariaLabel,
-          "aria-labelledby": ariaLabelledBy,
-          className: cn(inputBase, inputFocus, hasError && "border-destructive"),
-          disabled,
-          id,
-          onBlur: handleBlur,
-          onChange: handleInputChange,
-          onFocus: () => suggestions.length > 0 && setShowDropdown(true),
-          placeholder,
-          role: "combobox",
-          type: "text",
-          value: inputValue
-        }
-      ),
-      isExpanded && /* @__PURE__ */ jsx4(
-        "ul",
-        {
-          className: cn(
-            "border-border bg-surface absolute mt-1 w-full overflow-hidden rounded-[10px] border shadow-md",
-            zPopover
-          ),
-          id: listboxId,
-          role: "listbox",
-          children: suggestions.map((suggestion) => /* @__PURE__ */ jsx4("li", { role: "none", children: /* @__PURE__ */ jsx4(
-            "button",
-            {
-              "aria-selected": false,
-              className: cn(
-                "text-foreground hover:bg-hover w-full px-4 py-3 text-left text-sm transition-colors focus-visible:ring-inset",
-                focusRing
-              ),
-              onClick: () => void handleSelect(suggestion),
-              role: "option",
-              type: "button",
-              children: suggestion.placePrediction?.text.text ?? ""
-            }
-          ) }, suggestion.placePrediction?.placeId ?? suggestion.placePrediction?.text.text))
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx4("div", { className: "border-border h-59 overflow-hidden rounded-[10px] border md:h-87.5", children: /* @__PURE__ */ jsx4(
-      Map,
-      {
-        defaultCenter: DEFAULT_CENTER,
-        defaultZoom: 5,
-        disableDefaultUI: true,
-        gestureHandling: "cooperative",
-        id: PICKER_MAP_ID,
-        mapId: mapId ?? import.meta.env.VITE_GOOGLE_MAPS_MAP_ID ?? "DEMO_MAP_ID",
-        onClick: handleMapClick,
-        style: { height: "100%", width: "100%" },
-        children: position && /* @__PURE__ */ jsx4(AdvancedMarker, { draggable: !disabled, onDragEnd: handleMarkerDragEnd, position })
-      }
-    ) })
-  ] });
-};
-var GoogleMapPicker = (props) => /* @__PURE__ */ jsx4(APIProvider, { apiKey: props.apiKey ?? import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "", language: "es", region: "CO", children: /* @__PURE__ */ jsx4(MapPickerContent, { ...props }) });
-
-// src/components/form-fields/form-field-shell.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var FieldControl = ({ children }) => {
-  const controlProps = useFormControlProps();
-  return /* @__PURE__ */ jsx5(Fragment, { children: children(controlProps) });
-};
-var FormFieldShell = ({
-  children,
-  hasError,
-  label,
-  labelClassName,
-  mainClassName,
-  name,
-  visualRequired
-}) => /* @__PURE__ */ jsxs3(FormItem, { className: cn("flex flex-col", mainClassName), children: [
-  /* @__PURE__ */ jsx5(
-    LabelField,
-    {
-      label,
-      labelClassName: cn(labelClassName, hasError && "text-destructive"),
-      name,
-      visualRequired
-    }
-  ),
-  /* @__PURE__ */ jsx5(FieldControl, { children }),
-  /* @__PURE__ */ jsx5(FormMessage, {})
-] });
-
-// src/components/form-fields/map-picker-field.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var MapPickerField = ({
-  control,
-  label,
-  labelClassName,
-  mainClassName,
-  name,
-  visualRequired,
-  ...pickerProps
-}) => /* @__PURE__ */ jsx6(
-  FormField,
-  {
-    control,
-    name,
-    render: ({ field, fieldState }) => /* @__PURE__ */ jsx6(
-      FormFieldShell,
-      {
-        hasError: !!fieldState.error,
-        label,
-        labelClassName,
-        mainClassName,
-        name,
-        visualRequired,
-        children: (controlProps) => /* @__PURE__ */ jsx6(
-          GoogleMapPicker,
-          {
-            ...pickerProps,
-            ...controlProps,
-            hasError: !!fieldState.error,
-            onChange: field.onChange,
-            value: field.value ?? ""
-          }
-        )
-      }
-    )
-  }
-);
-
-export {
-  cn,
-  isLightColor,
-  capitalize,
-  formatNumber,
-  formatPrice,
-  focusRing,
-  inputSurface,
-  inputBase,
-  inputPlaceholder,
-  inputDisabled,
-  inputCompact,
-  inputFocus,
-  getTagEmoji,
-  toast,
-  registerToastEmitter,
-  isSafeUrl,
-  zPopover,
-  zDialogOverlay,
-  zDialogContent,
-  zPopoverAboveDialog,
-  zToast,
-  useFormField,
-  Form,
-  FormField,
-  FormItem,
-  FormControl,
-  FormMessage,
-  Label,
-  LabelField,
-  FormFieldShell,
-  GoogleMapPicker,
-  MapPickerField
-};
-//# sourceMappingURL=chunk-5VBG6IKL.js.map