@cranberry-money/shared-utils 4.3.0 → 4.4.0

package/dist/badge.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Badge System Core - Type definitions and factory function
+ *
+ * This module provides a standardized way to create and style badges.
+ * It ensures consistency in colors, typography, and semantic meaning
+ * while maintaining accessibility standards.
+ *
+ * Note: The actual style classes are designed to work with Tailwind CSS
+ * and assume a specific color system is in place.
+ */
+/**
+ * Badge variant types representing different semantic states
+ */
+export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+/**
+ * Badge size options
+ */
+export type BadgeSize = 'sm' | 'md' | 'lg';
+/**
+ * Configuration options for creating a badge
+ */
+export interface BadgeConfig {
+    /** The semantic variant of the badge */
+    variant: BadgeVariant;
+    /** Size of the badge (default: 'md') */
+    size?: BadgeSize;
+    /** Additional CSS classes to apply */
+    className?: string;
+}
+/**
+ * Badge style output with generated classes and accessibility attributes
+ */
+export interface BadgeStyle {
+    /** Combined CSS classes for the badge */
+    className: string;
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+}
+/**
+ * Creates a badge style configuration with appropriate CSS classes
+ *
+ * @param config - Badge configuration options
+ * @param variantStyles - Optional custom variant styles (defaults to DEFAULT_BADGE_VARIANTS)
+ * @param sizeStyles - Optional custom size styles (defaults to DEFAULT_BADGE_SIZES)
+ * @returns Badge style object with className and accessibility attributes
+ *
+ * @example
+ * ```typescript
+ * // Create a success badge
+ * const successBadge = createBadge({ variant: 'success' });
+ * // Returns: { className: 'inline-flex items-center rounded-md font-medium whitespace-nowrap transition-colors bg-success-900/80 text-success-300 text-xs px-2 py-1', ariaLabel: 'success status' }
+ *
+ * // Create a large warning badge with custom class
+ * const warningBadge = createBadge({ variant: 'warning', size: 'lg', className: 'ml-2' });
+ *
+ * // Use custom variant styles
+ * const customVariants = { primary: 'bg-blue-500 text-white', ... };
+ * const customBadge = createBadge({ variant: 'primary' }, customVariants);
+ * ```
+ */
+export declare function createBadge({ variant, size, className }: BadgeConfig, variantStyles?: Record<BadgeVariant, string>, sizeStyles?: Record<BadgeSize, string>): BadgeStyle;
+/**
+ * Export the default style mappings for consumers who want to use them directly
+ * or extend them with their own styles
+ */
+export declare const BADGE_VARIANTS: Record<BadgeVariant, string>;
+export declare const BADGE_SIZES: Record<BadgeSize, string>;
+//# sourceMappingURL=badge.d.ts.map

package/dist/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../src/badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1G;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,wCAAwC;IACxC,OAAO,EAAE,YAAY,CAAC;IACtB,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8BD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CACzB,EAAE,OAAO,EAAE,IAAW,EAAE,SAAc,EAAE,EAAE,WAAW,EACrD,aAAa,GAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAA0B,EACpE,UAAU,GAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAuB,GAC1D,UAAU,CAQZ;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,8BAAyB,CAAC;AACrD,eAAO,MAAM,WAAW,2BAAsB,CAAC"}

package/dist/badge.js

@@ -0,0 +1,71 @@
+/**
+ * Badge System Core - Type definitions and factory function
+ *
+ * This module provides a standardized way to create and style badges.
+ * It ensures consistency in colors, typography, and semantic meaning
+ * while maintaining accessibility standards.
+ *
+ * Note: The actual style classes are designed to work with Tailwind CSS
+ * and assume a specific color system is in place.
+ */
+/**
+ * Default variant styles using Tailwind CSS classes
+ * These assume a specific color system with surface and semantic colors
+ */
+const DEFAULT_BADGE_VARIANTS = {
+    primary: 'bg-surface-tertiary text-content-secondary',
+    secondary: 'bg-surface-secondary text-content-body',
+    success: 'bg-success-900/80 text-success-300',
+    warning: 'bg-warning-900/80 text-warning-300',
+    error: 'bg-error-900/80 text-error-300',
+    info: 'bg-surface-tertiary text-content-body',
+    neutral: 'bg-surface-secondary text-content-muted',
+};
+/**
+ * Default size styles for badges
+ */
+const DEFAULT_BADGE_SIZES = {
+    sm: 'text-xs px-1.5 py-0.5',
+    md: 'text-xs px-2 py-1',
+    lg: 'text-sm px-3 py-1.5',
+};
+/**
+ * Base badge styles that apply to all badges
+ */
+const BASE_BADGE_STYLES = 'inline-flex items-center rounded-md font-medium whitespace-nowrap transition-colors';
+/**
+ * Creates a badge style configuration with appropriate CSS classes
+ *
+ * @param config - Badge configuration options
+ * @param variantStyles - Optional custom variant styles (defaults to DEFAULT_BADGE_VARIANTS)
+ * @param sizeStyles - Optional custom size styles (defaults to DEFAULT_BADGE_SIZES)
+ * @returns Badge style object with className and accessibility attributes
+ *
+ * @example
+ * ```typescript
+ * // Create a success badge
+ * const successBadge = createBadge({ variant: 'success' });
+ * // Returns: { className: 'inline-flex items-center rounded-md font-medium whitespace-nowrap transition-colors bg-success-900/80 text-success-300 text-xs px-2 py-1', ariaLabel: 'success status' }
+ *
+ * // Create a large warning badge with custom class
+ * const warningBadge = createBadge({ variant: 'warning', size: 'lg', className: 'ml-2' });
+ *
+ * // Use custom variant styles
+ * const customVariants = { primary: 'bg-blue-500 text-white', ... };
+ * const customBadge = createBadge({ variant: 'primary' }, customVariants);
+ * ```
+ */
+export function createBadge({ variant, size = 'md', className = '' }, variantStyles = DEFAULT_BADGE_VARIANTS, sizeStyles = DEFAULT_BADGE_SIZES) {
+    const variantClasses = variantStyles[variant] || variantStyles.neutral;
+    const sizeClasses = sizeStyles[size];
+    return {
+        className: `${BASE_BADGE_STYLES} ${variantClasses} ${sizeClasses} ${className}`.trim(),
+        ariaLabel: `${variant} status`,
+    };
+}
+/**
+ * Export the default style mappings for consumers who want to use them directly
+ * or extend them with their own styles
+ */
+export const BADGE_VARIANTS = DEFAULT_BADGE_VARIANTS;
+export const BADGE_SIZES = DEFAULT_BADGE_SIZES;

package/dist/index.d.ts

@@ -7,4 +7,6 @@
 export { truncateText } from './text';
 export { formatDate, formatShortDate, formatTime, formatDateTime } from './date';
 export { NUMBER_FORMAT_OPTIONS_CURRENCY, NUMBER_FORMAT_OPTIONS_CURRENCY_SIGNED, formatCurrency, parseCurrencyInput, formatCurrencyWithCode, formatDefaultCurrency, formatShares, } from './currency';
+export type { BadgeVariant, BadgeSize, BadgeConfig, BadgeStyle } from './badge';
+export { createBadge, BADGE_VARIANTS, BADGE_SIZES } from './badge';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGjF,OAAO,EACL,8BAA8B,EAC9B,qCAAqC,EACrC,cAAc,EACd,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,YAAY,GACb,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGjF,OAAO,EACL,8BAA8B,EAC9B,qCAAqC,EACrC,cAAc,EACd,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,YAAY,GACb,MAAM,YAAY,CAAC;AAGpB,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -10,3 +10,4 @@ export { truncateText } from './text';
 export { formatDate, formatShortDate, formatTime, formatDateTime } from './date';
 // Currency formatting utilities
 export { NUMBER_FORMAT_OPTIONS_CURRENCY, NUMBER_FORMAT_OPTIONS_CURRENCY_SIGNED, formatCurrency, parseCurrencyInput, formatCurrencyWithCode, formatDefaultCurrency, formatShares, } from './currency';
+export { createBadge, BADGE_VARIANTS, BADGE_SIZES } from './badge';

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@cranberry-money/shared-utils",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "Shared utility functions for MyPortfolio platform",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -18,7 +19,9 @@
     "build": "tsc",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
-    "dev": "tsc --watch"
+    "dev": "tsc --watch",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix"
   },
   "dependencies": {
     "@cranberry-money/shared-constants": "^4.0.0",