@datatechsolutions/ui 3.12.1 → 3.13.1

package/dist/chunk-7VJ7CMMT.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/lib/i18n-context.tsx"],"names":[],"mappings":"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","file":"chunk-7VJ7CMMT.mjs","sourcesContent":["import { createContext, useContext, type ReactNode } from 'react'\n\ntype TranslateFn = ((key: string, params?: Record<string, unknown>) => string) & {\n  /** Return the raw (unparsed) value at a given key — useful for arrays/objects in messages */\n  raw: (key: string) => unknown\n}\n\nexport interface I18nContextValue {\n  translate: (namespace?: string) => TranslateFn\n  locale: string\n  messages?: Record<string, unknown>\n}\n\nconst I18nContext = createContext<I18nContextValue | null>(null)\n\nexport type I18nProviderProps = {\n  children: ReactNode\n  value: I18nContextValue\n}\n\nexport function I18nProvider({ children, value }: I18nProviderProps) {\n  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>\n}\n\nexport function useTranslations(namespace?: string): TranslateFn {\n  const context = useContext(I18nContext)\n  if (!context) {\n    const fallback = ((key: string, params?: Record<string, unknown>) => {\n      let result = namespace ? `${namespace}.${key}` : key\n      if (params) {\n        for (const [paramKey, paramValue] of Object.entries(params)) {\n          result = result.replace(`{${paramKey}}`, String(paramValue))\n        }\n      }\n      return result\n    }) as TranslateFn\n    fallback.raw = (key: string) => key\n    return fallback\n  }\n  const translateFn = context.translate(namespace) as TranslateFn\n  if (!translateFn.raw) {\n    translateFn.raw = (key: string) => {\n      const messages = context.messages\n      if (!messages) return undefined\n      const fullKey = namespace ? `${namespace}.${key}` : key\n      return getNestedValue(messages, fullKey)\n    }\n  }\n  return translateFn\n}\n\nfunction getNestedValue(object: Record<string, unknown>, path: string): unknown {\n  const parts = path.split('.')\n  let current: unknown = object\n  for (const part of parts) {\n    if (current === null || current === undefined || typeof current !== 'object') return undefined\n    current = (current as Record<string, unknown>)[part]\n  }\n  return current\n}\n\nexport function useLocale(): string {\n  const context = useContext(I18nContext)\n  return context?.locale ?? 'en'\n}\n\nexport type I18nFormatter = {\n  dateTime: (date: Date, options?: Intl.DateTimeFormatOptions) => string\n  relativeTime: (date: Date, options?: Intl.RelativeTimeFormatOptions) => string\n  number: (value: number, options?: Intl.NumberFormatOptions) => string\n}\n\nexport function useFormatter(): I18nFormatter {\n  const locale = useLocale()\n  return {\n    dateTime: (date: Date, options?: Intl.DateTimeFormatOptions) =>\n      new Intl.DateTimeFormat(locale, options).format(date),\n    relativeTime: (date: Date) => {\n      const now = Date.now()\n      const diffMs = date.getTime() - now\n      const diffSeconds = Math.round(diffMs / 1000)\n      const diffMinutes = Math.round(diffMs / 60000)\n      const diffHours = Math.round(diffMs / 3600000)\n      const diffDays = Math.round(diffMs / 86400000)\n      const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })\n      if (Math.abs(diffSeconds) < 60) return rtf.format(diffSeconds, 'second')\n      if (Math.abs(diffMinutes) < 60) return rtf.format(diffMinutes, 'minute')\n      if (Math.abs(diffHours) < 24) return rtf.format(diffHours, 'hour')\n      return rtf.format(diffDays, 'day')\n    },\n    number: (value: number, options?: Intl.NumberFormatOptions) =>\n      new Intl.NumberFormat(locale, options).format(value),\n  }\n}\n\n/**\n * Create an I18nContextValue from a flat messages object and locale.\n * Messages should be a nested object where keys are namespaces\n * and values are objects of translation key → ICU message string.\n *\n * This performs simple string interpolation with {param} placeholders.\n * For full ICU MessageFormat (plurals, select, etc.), use intl-messageformat.\n */\nexport function createI18nFromMessages(\n  locale: string,\n  messages: Record<string, unknown>,\n): I18nContextValue {\n  return {\n    locale,\n    messages,\n    translate: (namespace?: string) => {\n      const fn = ((key: string, params?: Record<string, unknown>) => {\n        const fullKey = namespace ? `${namespace}.${key}` : key\n        const raw = getNestedValue(messages, fullKey)\n        let result = typeof raw === 'string' ? raw : key\n        if (params) {\n          for (const [paramKey, paramValue] of Object.entries(params)) {\n            result = result.replace(new RegExp(`\\\\{${paramKey}\\\\}`, 'g'), String(paramValue))\n          }\n        }\n        return result\n      }) as TranslateFn\n      fn.raw = (key: string) => {\n        const fullKey = namespace ? `${namespace}.${key}` : key\n        return getNestedValue(messages, fullKey)\n      }\n      return fn\n    },\n  }\n}\n"]}

package/dist/chunk-DJ33CSGJ.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/platform/billing/upgrade-prompt.tsx"],"names":[],"mappings":"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","file":"chunk-DJ33CSGJ.mjs","sourcesContent":["// =============================================================================\n// @datatechsolutions/windsock/ui — UpgradePrompt Component\n// Glassmorphism-styled prompt shown when a user hits subscription limits.\n// =============================================================================\n\nimport { type ReactNode } from 'react'\nimport type { SubscriptionTier } from '@datatechsolutions/shared-domain'\n\n/** Human-readable tier display names */\nconst TIER_DISPLAY_NAMES: Record<SubscriptionTier, string> = {\n  free_trial: 'Free Trial',\n  starter: 'Starter',\n  professional: 'Professional',\n  enterprise: 'Enterprise',\n}\n\ninterface UpgradePromptProps {\n  /** The user's current subscription tier */\n  currentTier: SubscriptionTier\n  /** The minimum tier required for access (shown in the prompt) */\n  requiredTier?: SubscriptionTier\n  /** Feature name that triggered the prompt */\n  feature?: string\n  /** Called when the user clicks \"Upgrade Now\" */\n  onUpgrade?: () => void\n  /** Called when the user dismisses the prompt */\n  onDismiss?: () => void\n  /** Optional custom content to render inside the card */\n  children?: ReactNode\n}\n\n/**\n * A glassmorphism-styled upgrade prompt shown when users hit subscription\n * limits or try to access features above their current tier.\n *\n * Renders a card with the current tier, the required tier (or feature name),\n * and action buttons for upgrading or dismissing.\n */\nexport function UpgradePrompt({\n  currentTier,\n  requiredTier,\n  feature,\n  onUpgrade,\n  onDismiss,\n  children,\n}: UpgradePromptProps) {\n  const currentTierName = TIER_DISPLAY_NAMES[currentTier] ?? currentTier\n  const requiredTierName = requiredTier ? TIER_DISPLAY_NAMES[requiredTier] ?? requiredTier : null\n\n  const heading = feature\n    ? `Upgrade to unlock ${feature}`\n    : requiredTierName\n      ? `Upgrade to ${requiredTierName}`\n      : 'Upgrade your plan'\n\n  return (\n    <div\n      className={[\n        'relative overflow-hidden rounded-2xl border border-white/20',\n        'bg-white/10 p-6 backdrop-blur-xl',\n        'shadow-lg shadow-black/5',\n        'dark:border-white/10 dark:bg-white/5 dark:shadow-black/20',\n      ].join(' ')}\n      role=\"alert\"\n      aria-label=\"Subscription upgrade prompt\"\n    >\n      {/* Decorative gradient accent */}\n      <div\n        className=\"pointer-events-none absolute -right-8 -top-8 h-32 w-32 rounded-full bg-gradient-to-br from-violet-500/20 to-blue-500/20 blur-2xl\"\n        aria-hidden=\"true\"\n      />\n\n      <div className=\"relative flex flex-col gap-4\">\n        {/* Icon */}\n        <div className=\"flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-blue-500 text-white\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            className=\"h-5 w-5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              d=\"M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5Z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </div>\n\n        {/* Heading */}\n        <h3 className=\"text-lg font-semibold text-gray-900 dark:text-white\">\n          {heading}\n        </h3>\n\n        {/* Tier comparison */}\n        <div className=\"flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300\">\n          <span className=\"rounded-md bg-gray-200/60 px-2 py-0.5 font-medium dark:bg-white/10\">\n            {currentTierName}\n          </span>\n          {requiredTierName && (\n            <>\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                className=\"h-4 w-4 text-gray-400 dark:text-gray-500\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n              <span className=\"rounded-md bg-gradient-to-r from-violet-500/10 to-blue-500/10 px-2 py-0.5 font-medium text-violet-700 dark:from-violet-500/20 dark:to-blue-500/20 dark:text-violet-300\">\n                {requiredTierName}\n              </span>\n            </>\n          )}\n        </div>\n\n        {/* Optional custom content */}\n        {children}\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3 pt-1\">\n          {onUpgrade && (\n            <button\n              type=\"button\"\n              onClick={onUpgrade}\n              className={[\n                'rounded-xl bg-gradient-to-r from-violet-600 to-blue-600 px-5 py-2 text-sm font-semibold text-white',\n                'shadow-md shadow-violet-500/25 transition-all',\n                'hover:from-violet-500 hover:to-blue-500 hover:shadow-lg hover:shadow-violet-500/30',\n                'focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2',\n                'active:scale-[0.98]',\n                'dark:shadow-violet-500/10 dark:hover:shadow-violet-500/20',\n              ].join(' ')}\n            >\n              Upgrade Now\n            </button>\n          )}\n          {onDismiss && (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\n              className={[\n                'rounded-xl px-4 py-2 text-sm font-medium',\n                'text-gray-500 transition-colors',\n                'hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200',\n                'focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2',\n              ].join(' ')}\n            >\n              Maybe Later\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport type { UpgradePromptProps }\n"]}