@pelatform/ui 1.5.0

package/dist/index.cjs

@@ -0,0 +1,234 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkKNS6QRVBcjs = require('./chunk-KNS6QRVB.cjs');
+
+
+var _chunkCJXIPSTGcjs = require('./chunk-CJXIPSTG.cjs');
+
+
+
+
+var _chunkI46SELBAcjs = require('./chunk-I46SELBA.cjs');
+
+
+var _chunkUP53DCYHcjs = require('./chunk-UP53DCYH.cjs');
+
+// src/lib/ohimg.ts
+var isValidHex = (color) => {
+  const hexPattern = /^#[0-9A-Fa-f]{6}$/;
+  return hexPattern.test(color);
+};
+var hexToRgba = (color, opacity) => {
+  const defaultColor = "#000000";
+  let normalizedColor = _optionalChain([color, 'optionalAccess', _ => _.startsWith, 'call', _2 => _2("#")]) ? color : `#${color}`;
+  if (!isValidHex(normalizedColor)) {
+    console.warn(`Invalid hex color: ${color}, using default black`);
+    normalizedColor = defaultColor;
+  }
+  const r = parseInt(normalizedColor.slice(1, 3), 16);
+  const g = parseInt(normalizedColor.slice(3, 5), 16);
+  const b = parseInt(normalizedColor.slice(5, 7), 16);
+  const safeOpacity = Math.max(0, Math.min(1, _nullishCoalesce(opacity, () => ( 1))));
+  return `rgba(${r}, ${g}, ${b}, ${safeOpacity})`;
+};
+var getMask = ({ direction = "circle at center", visibleRadius = 30, fadeWidth = 20 }) => {
+  const outerRadius = visibleRadius + fadeWidth;
+  return {
+    maskImage: `radial-gradient(${direction}, black ${visibleRadius}%, transparent ${outerRadius}%)`,
+    WebkitMaskImage: `radial-gradient(${direction}, black ${visibleRadius}%, transparent ${outerRadius}%)`
+  };
+};
+var getDotPattern = ({
+  color = "#000000",
+  opacity = 0.5,
+  size = 25,
+  backgroundSize = 20
+}) => {
+  const dotColor = hexToRgba(color, opacity);
+  return {
+    backgroundImage: `radial-gradient(${dotColor} ${size}%, transparent ${size + 1}%), radial-gradient(${dotColor} ${size - 0.5}%, transparent ${size + 0.5}%)`,
+    backgroundSize: `${backgroundSize}px ${backgroundSize}px, ${backgroundSize}px ${backgroundSize}px`,
+    backgroundPosition: `0 0, ${backgroundSize / 2}px ${backgroundSize / 2}px`
+  };
+};
+var getGridPattern = ({
+  color = "#000000",
+  opacity = 0.5,
+  size = 20,
+  lineThickness = 1
+}) => {
+  const colorWithOpacity = hexToRgba(color, opacity);
+  return {
+    backgroundImage: `
+      linear-gradient(to right, ${colorWithOpacity} ${lineThickness}px, transparent ${lineThickness}px),
+      linear-gradient(to bottom, ${colorWithOpacity} ${lineThickness}px, transparent ${lineThickness}px)
+    `,
+    backgroundSize: `${size}px ${size}px`
+  };
+};
+var getPatternStyle = (props) => {
+  switch (props.type) {
+    case "dots":
+      return {
+        ...getDotPattern({
+          color: props.color,
+          opacity: props.opacity,
+          size: props.size,
+          backgroundSize: props.backgroundSize
+        }),
+        ...props.mask && props.mask.enabled === true && getMask({
+          direction: props.mask.direction,
+          visibleRadius: props.mask.visibleRadius,
+          fadeWidth: props.mask.fadeWidth
+        })
+      };
+    case "grid":
+      return {
+        ...getGridPattern({
+          color: props.color,
+          opacity: props.opacity,
+          size: props.size,
+          lineThickness: props.lineThickness
+        }),
+        ...props.mask && props.mask.enabled === true && getMask({
+          direction: props.mask.direction,
+          visibleRadius: props.mask.visibleRadius,
+          fadeWidth: props.mask.fadeWidth
+        })
+      };
+    default:
+      return {};
+  }
+};
+var getGradientStyle = (props) => {
+  if (!props.direction || props.direction === "none") {
+    return {};
+  }
+  const baseGradient = {
+    background: `linear-gradient(${props.direction || "to bottom"}, ${props.startColor || "#000000"}, ${props.endColor || "#000000"})`,
+    opacity: _nullishCoalesce(props.opacity, () => ( 0.7))
+  };
+  return {
+    ...baseGradient,
+    ...props.mask && props.mask.enabled === true && getMask({
+      direction: props.mask.direction,
+      visibleRadius: props.mask.visibleRadius,
+      fadeWidth: props.mask.fadeWidth
+    })
+  };
+};
+function calculateMaxWidth(paddingX) {
+  const baseWidth = 1200;
+  if (!paddingX) {
+    return baseWidth;
+  }
+  const paddingValue = parseInt(paddingX.replace("px", ""), 10);
+  if (Number.isNaN(paddingValue)) {
+    return baseWidth;
+  }
+  const adjustedWidth = baseWidth - 2 * paddingValue;
+  const finalWidth = Math.min(adjustedWidth, baseWidth);
+  return finalWidth;
+}
+function getPositionClasses(element, maxWidth) {
+  return _chunkCJXIPSTGcjs.cn.call(void 0, element.customClasses && element.customClasses, `max-w-[${maxWidth}px]`);
+}
+
+// src/utils/flag-url.ts
+function getFlagUrl(flag) {
+  const baseUrl = "https://assets.pelatform.com/media/flags";
+  const flagCode = flag.toLowerCase();
+  return `${baseUrl}/${flagCode}.svg`;
+}
+
+// src/utils/ip.ts
+async function getIPAddress() {
+  if (typeof window === "undefined") {
+    return "unknown";
+  }
+  try {
+    const services = [
+      "https://api.ipify.org?format=json",
+      "https://ipapi.co/json/",
+      "https://api.ip.sb/jsonip"
+    ];
+    for (const service of services) {
+      try {
+        const response = await fetch(service, {
+          method: "GET",
+          headers: {
+            Accept: "application/json"
+          }
+        });
+        if (response.ok) {
+          const data = await response.json();
+          const ip = data.ip || data.query || data.ipAddress;
+          if (ip && typeof ip === "string") {
+            return ip;
+          }
+        }
+      } catch (serviceError) {
+        console.warn(`IP service ${service} failed:`, serviceError);
+      }
+    }
+    return "unknown";
+  } catch (error) {
+    console.error("Failed to get client IP:", error);
+    return "unknown";
+  }
+}
+
+// src/utils/parse.ts
+function normalizePath(input) {
+  if (!input) return "/";
+  let p = input.trim();
+  if (!p.startsWith("/")) p = `/${p}`;
+  p = p.replace(/\/{2,}/g, "/");
+  if (p.length > 1 && p.endsWith("/")) p = p.slice(0, -1);
+  return p;
+}
+var parse = (
+  // biome-ignore lint/suspicious/noExplicitAny: disable
+  (req) => {
+    let domain = req.headers.get("host");
+    domain = domain.replace(/^www\./, "").toLowerCase();
+    const path = req.nextUrl.pathname;
+    const searchParams = req.nextUrl.searchParams.toString();
+    const searchParamsObj = Object.fromEntries(req.nextUrl.searchParams);
+    const searchParamsString = searchParams.length > 0 ? `?${searchParams}` : "";
+    const fullPath = `${path}${searchParamsString}`;
+    const pathSegments = path.split("/").filter(Boolean);
+    const key = pathSegments.length > 0 ? decodeURIComponent(pathSegments[0]) : "";
+    const fullKey = path.length > 1 ? decodeURIComponent(path.slice(1)) : "";
+    return {
+      domain,
+      path,
+      fullPath,
+      key,
+      fullKey,
+      searchParamsObj,
+      searchParamsString
+    };
+  }
+);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.DEFAULT_THEME_MODE = _chunkI46SELBAcjs.DEFAULT_THEME_MODE; exports.META_THEME_COLORS = _chunkI46SELBAcjs.META_THEME_COLORS; exports.THEME_MODES = _chunkI46SELBAcjs.THEME_MODES; exports.calculateMaxWidth = calculateMaxWidth; exports.cn = _chunkCJXIPSTGcjs.cn; exports.cva = _chunkUP53DCYHcjs.cva; exports.getDotPattern = getDotPattern; exports.getFlagUrl = getFlagUrl; exports.getGradientStyle = getGradientStyle; exports.getGridPattern = getGridPattern; exports.getIPAddress = getIPAddress; exports.getMask = getMask; exports.getPatternStyle = getPatternStyle; exports.getPositionClasses = getPositionClasses; exports.googleTrackEvent = _chunkKNS6QRVBcjs.googleTrackEvent; exports.hexToRgba = hexToRgba; exports.isValidHex = isValidHex; exports.normalizePath = normalizePath; exports.parse = parse;

package/dist/index.d.cts

@@ -0,0 +1,298 @@
+export { D as DEFAULT_THEME_MODE, M as META_THEME_COLORS, T as THEME_MODES, a as ThemeMode } from './colors-CUDWvz1g.cjs';
+import { ClassValue } from 'clsx';
+export { cva } from 'class-variance-authority';
+export { B as BaseProps, I as Image, L as Link } from './components-BgbIL9EW.cjs';
+export { a as MenuConfig, M as MenuItem } from './menu-GmSRfRGB.cjs';
+import 'react';
+
+/**
+ * Interface for event tracking parameters
+ * Defines the structure for tracking events in Google Analytics
+ */
+interface EventProps {
+    /** Event name to be tracked (required, non-empty string) */
+    name: string;
+    /** Optional properties/attributes for the event */
+    properties?: Record<string, string | number | boolean>;
+}
+/**
+ * Global declaration for Google Analytics gtag function
+ * This extends the Window interface to include the gtag function
+ * that's injected by the Google Analytics script
+ */
+declare global {
+    interface Window {
+        gtag?: (command: 'event' | 'config' | 'set', targetId: string, config?: Record<string, string | number | boolean | object | null | undefined>) => void;
+    }
+}
+/**
+ * Tracks an event in Google Analytics with proper error handling and validation.
+ *
+ * @param params - Event parameters
+ * @param params.name - Event name (required, non-empty string)
+ * @param params.properties - Optional event properties
+ */
+declare const googleTrackEvent: ({ name, properties }: EventProps) => void;
+
+type PatternType = 'none' | 'grid' | 'dots';
+type GradientDirection = 'none' | 'to right' | 'to left' | 'to bottom' | 'to top' | 'to bottom right' | 'to bottom left' | 'to top right' | 'to top left';
+type MaskDirection = 'none' | 'circle at center' | 'circle at center top' | 'circle at top right' | 'circle at center right' | 'circle at bottom right' | 'circle at center bottom' | 'circle at bottom left' | 'circle at center left' | 'circle at top left';
+type PositionOption = 'start' | 'center' | 'end';
+type AlignmentOption = 'left' | 'center' | 'right';
+interface BackgroundImageLayer {
+    imageSrc?: string;
+}
+interface MaskLayer {
+    enabled?: boolean;
+    direction?: MaskDirection;
+    visibleRadius?: number;
+    fadeWidth?: number;
+}
+interface PatternLayer {
+    type?: PatternType;
+    color?: string;
+    opacity?: number;
+    size?: number;
+    backgroundSize?: number;
+    lineThickness?: number;
+    mask?: MaskLayer;
+}
+interface GradientLayer {
+    startColor?: string;
+    endColor?: string;
+    opacity?: number;
+    direction?: GradientDirection;
+    mask?: MaskLayer;
+}
+interface PositionedElement {
+    customClasses?: string;
+    textColor?: string;
+    bgColor?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    width?: string;
+    height?: string;
+    hPosition?: PositionOption;
+    vPosition?: PositionOption;
+    alignment?: AlignmentOption;
+    autoMargin?: boolean;
+}
+interface ContentLayout {
+    layoutContainer?: string;
+    logoContainer?: string;
+    logo?: string;
+    tagContainer?: string;
+    contentContainer?: string;
+    tag?: string;
+    title?: string;
+    description?: string;
+    website?: string;
+}
+interface OhImgBaseTemplateProps {
+    content: {
+        title: string;
+        description?: string;
+        tags?: string[];
+        website?: string;
+        logoSrc?: string;
+    };
+    background?: BackgroundImageLayer;
+    pattern?: PatternLayer;
+    gradient?: GradientLayer;
+    layout?: ContentLayout;
+}
+
+/**
+ * Converts hex color to rgba format with specified opacity
+ */
+declare const isValidHex: (color: string) => boolean;
+declare const hexToRgba: (color: string, opacity: number) => string;
+declare const getMask: ({ direction, visibleRadius, fadeWidth }: {
+    direction?: string | undefined;
+    visibleRadius?: number | undefined;
+    fadeWidth?: number | undefined;
+}) => {
+    maskImage: string;
+    WebkitMaskImage: string;
+};
+declare const getDotPattern: ({ color, opacity, size, backgroundSize, }: {
+    color?: string | undefined;
+    opacity?: number | undefined;
+    size?: number | undefined;
+    backgroundSize?: number | undefined;
+}) => {
+    backgroundImage: string;
+    backgroundSize: string;
+    backgroundPosition: string;
+};
+declare const getGridPattern: ({ color, opacity, size, lineThickness, }: {
+    color?: string;
+    opacity?: number;
+    size?: number;
+    lineThickness?: number;
+}) => {
+    backgroundImage: string;
+    backgroundSize: string;
+};
+declare const getPatternStyle: (props: PatternLayer) => {};
+declare const getGradientStyle: (props: GradientLayer) => {};
+declare function calculateMaxWidth(paddingX: string | undefined): number;
+declare function getPositionClasses(element: PositionedElement, maxWidth: number): string;
+
+/**
+ * Utility functions for CSS class name management
+ * Provides optimized class name merging with Tailwind CSS conflict resolution
+ * Essential for component styling and conditional class application
+ */
+
+/**
+ * Merges Tailwind class names, resolving any conflicts.
+ * This utility combines clsx for conditional classes with tailwind-merge
+ * to properly handle Tailwind CSS class conflicts.
+ *
+ * @param inputs - An array of class names, objects, or arrays to merge
+ * @returns A string of merged and optimized class names
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Build a CDN URL for a country flag SVG.
+ *
+ * The function lowercases the given ISO country code and returns a
+ * fully-qualified URL pointing to the SVG flag hosted on the Pelatform
+ * assets CDN.
+ *
+ * @param flag - ISO 3166-1 alpha-2 country code (e.g., "US", "ID", "GB")
+ * @returns A URL string to the SVG flag on the CDN
+ *
+ * @example
+ * ```ts
+ * import { getFlagUrl } from "@pelatform/ui/utils/flag-url";
+ *
+ * const urlUs = getFlagUrl("US");
+ * // "https://assets.pelatform.com/media/flags/us.svg"
+ *
+ * const urlId = getFlagUrl("id");
+ * // "https://assets.pelatform.com/media/flags/id.svg"
+ *
+ * // Can be used directly in an <img /> or <Image /> component
+ * // <img src={getFlagUrl("GB")} alt="United Kingdom flag" />
+ * ```
+ */
+declare function getFlagUrl(flag: string): string;
+
+/**
+ * Get the client's public IP address using external services.
+ *
+ * This utility is intended for client-side usage only (it checks for `window`).
+ * It attempts multiple providers for resiliency and normalizes the response
+ * to a simple string. If all providers fail or the environment is not a
+ * browser, it resolves to `'unknown'`.
+ *
+ * Providers queried (in order):
+ * - `https://api.ipify.org?format=json`
+ * - `https://ipapi.co/json/`
+ * - `https://api.ip.sb/jsonip`
+ *
+ * @returns Promise that resolves to an IP address string or `'unknown'` if not available
+ *
+ * @example
+ * ```ts
+ * import { getIPAddress } from "@pelatform/ui/utils/ip";
+ *
+ * const ip = await getIPAddress();
+ * // e.g., "203.0.113.42" or "unknown"
+ *
+ * // Example in a React component
+ * // useEffect(() => {
+ * //   getIPAddress().then(setIp);
+ * // }, []);
+ * ```
+ */
+declare function getIPAddress(): Promise<string>;
+
+/**
+ * Normalize a pathname string.
+ *
+ * - Ensures it always starts with '/'
+ * - Collapses multiple slashes (e.g., `'//a///b'` becomes `'/a/b'`)
+ * - Removes trailing slash except for root path (e.g., `'/login/'` becomes `'/login'`)
+ *
+ * @param input - Any path-like string
+ * @returns A normalized path beginning with '/'
+ *
+ * @example
+ * ```ts
+ * import { normalizePath } from "@pelatform/ui/utils/parse";
+ *
+ * normalizePath("dashboard");       // "/dashboard"
+ * normalizePath("//a///b");         // "/a/b"
+ * normalizePath("/login/");         // "/login"
+ * normalizePath("");                // "/"
+ * ```
+ */
+declare function normalizePath(input: string): string;
+/**
+ * Interface for parsed request data
+ */
+interface ParsedRequest {
+    /** Normalized domain name (lowercase, without www) */
+    domain: string;
+    /** URL pathname (e.g., '/dashboard/users') */
+    path: string;
+    /** Full path including query parameters (e.g., '/dashboard/users?page=1') */
+    fullPath: string;
+    /** First path segment (e.g., 'dashboard' from '/dashboard/users') */
+    key: string;
+    /** Full path without leading slash (e.g., 'dashboard/users') */
+    fullKey: string;
+    /** Query parameters as object */
+    searchParamsObj: Record<string, string>;
+    /** Query parameters as string (e.g., '?page=1&limit=10') */
+    searchParamsString: string;
+}
+/**
+ * Parse and normalize a Next.js `NextRequest`.
+ *
+ * Extracts domain, normalized path, first segment key, full path, and
+ * query parameters (both as object and as string). Handles international
+ * characters via `decodeURIComponent` and normalizes the host by removing
+ * a leading `www.`.
+ *
+ * @param req - The incoming Next.js `NextRequest`
+ * @returns Parsed request data with normalized components
+ *
+ * @example
+ * ```ts
+ * import type { NextRequest } from "next/server";
+ * import { parse } from "@pelatform/ui/utils/parse";
+ *
+ * export function middleware(req: NextRequest) {
+ *   const { domain, path, fullPath, key } = parse(req);
+ *
+ *   console.log(domain);   // e.g., "api.pelatform.com"
+ *   console.log(path);     // e.g., "/v1/users"
+ *   console.log(fullPath); // e.g., "/v1/users?page=1"
+ *   console.log(key);      // e.g., "v1"
+ * }
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Handling international URLs
+ * const { key, fullKey } = parse(req);
+ * console.log(key);     // Decoded first path segment
+ * console.log(fullKey); // Decoded full path
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Working with query parameters
+ * const { searchParamsObj, searchParamsString } = parse(req);
+ * // searchParamsObj -> { page: "1", limit: "10" }
+ * // searchParamsString -> "?page=1&limit=10"
+ * ```
+ */
+declare const parse: (req: any) => ParsedRequest;
+
+export { type AlignmentOption, type BackgroundImageLayer, type ContentLayout, type GradientDirection, type GradientLayer, type MaskDirection, type MaskLayer, type OhImgBaseTemplateProps, type ParsedRequest, type PatternLayer, type PatternType, type PositionOption, type PositionedElement, calculateMaxWidth, cn, getDotPattern, getFlagUrl, getGradientStyle, getGridPattern, getIPAddress, getMask, getPatternStyle, getPositionClasses, googleTrackEvent, hexToRgba, isValidHex, normalizePath, parse };