@flamingo-stack/openframe-frontend-core 0.0.200 → 0.0.201-snapshot.20260521140839

package/dist/components/features/organization-icon.d.ts

@@ -1,80 +0,0 @@
-export interface OrganizationIconProps {
-    /**
-     * Image URL - can be:
-     * - Pre-fetched blob URL (starts with 'blob:')
-     * - API path (starts with '/api/')
-     * - Full URL (starts with 'http://' or 'https://')
-     */
-    imageUrl?: string | null;
-    /**
-     * Organization name for fallback initials and alt text
-     */
-    organizationName: string;
-    /**
-     * Size variant (matching VendorIcon sizes)
-     * - xs: 24px (w-6 h-6)
-     * - sm: 32px (w-8 h-8) - for devices table
-     * - md: 40px (w-10 h-10) - for organizations table, dashboard (default)
-     * - lg: 48px (w-12 h-12)
-     * - l: 56px (w-14 h-14)
-     * - xl: 64px (w-16 h-16) - for detail views
-     */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'l' | 'xl';
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
-    /**
-     * Show background container (default: true)
-     */
-    showBackground?: boolean;
-    /**
-     * Background style variant (default: 'dark')
-     */
-    backgroundStyle?: 'dark' | 'light' | 'white';
-}
-/**
- * OrganizationIcon - Reusable component for displaying organization logos
- *
- * Matches VendorIcon styling and behavior exactly for 100% visual parity.
- *
- * Features:
- * - **Dual-mode support:** Auto-detects pre-fetched blob URLs vs raw URLs
- * - **Automatic fallback:** Shows 2-letter initials if no image
- * - **Loading states:** Built-in loading indicator
- * - **Zero layout jumps:** Fixed dimensions prevent shifting
- * - **ODS styling:** Consistent theming with design tokens
- * - **Flexible sizing:** Six size variants (xs/sm/md/lg/l/xl)
- * - **Background variants:** dark (default), light, white
- *
- * Usage Examples:
- *
- * ```typescript
- * // With pre-fetched blob URL (from useBatchImages)
- * const fetchedImages = useBatchImages(imageUrls)
- * <OrganizationIcon
- *   imageUrl={fetchedImages[org.imageUrl]}
- *   organizationName={org.name}
- *   size="md"
- *   preFetched={true}
- * />
- *
- * // With automatic fetching (single image)
- * <OrganizationIcon
- *   imageUrl={organization?.imageUrl}
- *   organizationName={organization?.name || 'Organization'}
- *   size="xl"
- *   refreshKey={organization?.imageVersion}
- * />
- *
- * // Without background (inline with text)
- * <OrganizationIcon
- *   imageUrl={org.imageUrl}
- *   organizationName={org.name}
- *   size="small-legacy"
- *   showBackground={false}
- * />
- * ```
- */
-export declare function OrganizationIcon({ imageUrl, organizationName, size, className, showBackground, backgroundStyle, }: OrganizationIconProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=organization-icon.d.ts.map

package/dist/components/features/organization-icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"organization-icon.d.ts","sourceRoot":"","sources":["../../../src/components/features/organization-icon.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAExB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAA;IAExB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,CAAA;IAE7C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;CAC7C;AAmCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,gBAAgB,EAChB,IAAW,EACX,SAAc,EACd,cAAqB,EACrB,eAAwB,GACzB,EAAE,qBAAqB,2CA2CvB"}

package/src/components/features/organization-icon.tsx

@@ -1,175 +0,0 @@
-'use client'
-
-import React from 'react'
-import Image from 'next/image'
-import { cn } from "../../utils/cn"
-import { useAuthenticatedImage, type AuthenticatedImageConfig } from '../../hooks/use-authenticated-image'
-
-export interface OrganizationIconProps {
-  /**
-   * Image URL - can be:
-   * - Pre-fetched blob URL (starts with 'blob:')
-   * - API path (starts with '/api/')
-   * - Full URL (starts with 'http://' or 'https://')
-   */
-  imageUrl?: string | null
-
-  /**
-   * Organization name for fallback initials and alt text
-   */
-  organizationName: string
-
-  /**
-   * Size variant (matching VendorIcon sizes)
-   * - xs: 24px (w-6 h-6)
-   * - sm: 32px (w-8 h-8) - for devices table
-   * - md: 40px (w-10 h-10) - for organizations table, dashboard (default)
-   * - lg: 48px (w-12 h-12)
-   * - l: 56px (w-14 h-14)
-   * - xl: 64px (w-16 h-16) - for detail views
-   */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'l' | 'xl'
-
-  /**
-   * Additional CSS classes
-   */
-  className?: string
-
-  /**
-   * Show background container (default: true)
-   */
-  showBackground?: boolean
-
-  /**
-   * Background style variant (default: 'dark')
-   */
-  backgroundStyle?: 'dark' | 'light' | 'white'
-}
-
-/**
- * Size classes matching VendorIcon exactly
- */
-const sizeClasses = {
-  xs: 'w-6 h-6',
-  sm: 'w-8 h-8',
-  md: 'w-10 h-10',
-  lg: 'w-12 h-12',
-  l: 'w-14 h-14',
-  xl: 'w-16 h-16'
-}
-
-/**
- * Image size mapping matching VendorIcon exactly
- */
-const imageSizeMap = {
-  xs: { width: 16, height: 16 },
-  sm: { width: 20, height: 20 },
-  md: { width: 32, height: 32 },
-  lg: { width: 40, height: 40 },
-  l: { width: 38, height: 38 },
-  xl: { width: 40, height: 40 }
-}
-
-/**
- * Background style classes matching VendorIcon exactly
- */
-const backgroundClasses = {
-  dark: 'bg-[#161616] border border-ods-border',
-  light: 'bg-ods-card border border-ods-border',
-  white: 'bg-white border border-[#E5E5E5]'
-}
-
-/**
- * OrganizationIcon - Reusable component for displaying organization logos
- *
- * Matches VendorIcon styling and behavior exactly for 100% visual parity.
- *
- * Features:
- * - **Dual-mode support:** Auto-detects pre-fetched blob URLs vs raw URLs
- * - **Automatic fallback:** Shows 2-letter initials if no image
- * - **Loading states:** Built-in loading indicator
- * - **Zero layout jumps:** Fixed dimensions prevent shifting
- * - **ODS styling:** Consistent theming with design tokens
- * - **Flexible sizing:** Six size variants (xs/sm/md/lg/l/xl)
- * - **Background variants:** dark (default), light, white
- *
- * Usage Examples:
- *
- * ```typescript
- * // With pre-fetched blob URL (from useBatchImages)
- * const fetchedImages = useBatchImages(imageUrls)
- * <OrganizationIcon
- *   imageUrl={fetchedImages[org.imageUrl]}
- *   organizationName={org.name}
- *   size="md"
- *   preFetched={true}
- * />
- *
- * // With automatic fetching (single image)
- * <OrganizationIcon
- *   imageUrl={organization?.imageUrl}
- *   organizationName={organization?.name || 'Organization'}
- *   size="xl"
- *   refreshKey={organization?.imageVersion}
- * />
- *
- * // Without background (inline with text)
- * <OrganizationIcon
- *   imageUrl={org.imageUrl}
- *   organizationName={org.name}
- *   size="small-legacy"
- *   showBackground={false}
- * />
- * ```
- */
-export function OrganizationIcon({
-  imageUrl,
-  organizationName,
-  size = 'md',
-  className = '',
-  showBackground = true,
-  backgroundStyle = 'dark',
-}: OrganizationIconProps) {
-  const { width, height } = imageSizeMap[size]
-
-  // Generate fallback initials (first 2 letters, matching VendorIcon)
-  const initials = organizationName?.substring(0, 2) || '??'
-
-  // Container classes matching VendorIcon exactly
-  const containerClasses = cn(
-    sizeClasses[size],
-    'rounded-lg flex items-center justify-center flex-shrink-0 relative',
-    showBackground && backgroundClasses[backgroundStyle],
-    !showBackground && 'overflow-hidden',
-    className
-  )
-
-  return (
-    <div className={containerClasses}>
-      <div className={cn(
-        'flex items-center justify-center text-xs font-medium uppercase',
-        imageUrl && 'hidden',
-        backgroundStyle === 'white' ? 'text-ods-text-primary' : 'text-ods-text-secondary'
-      )}>
-        {initials}
-      </div>
-      {imageUrl && (
-        <Image
-          src={imageUrl}
-          alt={`${initials}`}
-          width={width}
-          height={height}
-          className={cn(
-            'absolute object-contain',
-            showBackground ? 'p-1' : 'w-full h-full'
-          )}
-          onError={(e) => {
-            e.currentTarget.style.display = 'none'
-            const el = e.currentTarget.previousElementSibling as HTMLElement
-            if (el) el.classList.remove('hidden')
-          }}
-        />
-      )}
-    </div>
-  )
-}

package/src/styles/ods_color_tokens.json

@@ -1,302 +0,0 @@
-{
-  "color": {
-    "attention": {
-      "green": {
-        "success": {
-          "value": "#5ea62e",
-          "type": "color"
-        },
-        "success-action": {
-          "value": "#4a921a",
-          "type": "color"
-        },
-        "success-hover": {
-          "value": "#549c24",
-          "type": "color"
-        },
-        "success-secondary": {
-          "value": "#2e461f",
-          "type": "color"
-        },
-        "success-secondary-hover": {
-          "value": "#385029",
-          "type": "color"
-        },
-        "success-secondary-action": {
-          "value": "#425a33",
-          "type": "color"
-        }
-      },
-      "red": {
-        "error": {
-          "value": "#f36666",
-          "type": "color"
-        },
-        "error-action": {
-          "value": "#df5252",
-          "type": "color"
-        },
-        "error-hover": {
-          "value": "#e95c5c",
-          "type": "color"
-        },
-        "error-secondary": {
-          "value": "#4a2121",
-          "type": "color"
-        },
-        "error-secondary-hover": {
-          "value": "#542b2b",
-          "type": "color"
-        },
-        "error-secondary-action": {
-          "value": "#5e3535",
-          "type": "color"
-        }
-      },
-      "yellow": {
-        "warning": {
-          "value": "#e1b32f",
-          "type": "color"
-        },
-        "warning-action": {
-          "value": "#cd9f1b",
-          "type": "color"
-        },
-        "warning-hover": {
-          "value": "#d7a925",
-          "type": "color"
-        },
-        "warning-secondary": {
-          "value": "#5a4d25",
-          "type": "color"
-        },
-        "warning-secondary-hover": {
-          "value": "#64572f",
-          "type": "color"
-        },
-        "warning-secondary-action": {
-          "value": "#6e6139",
-          "type": "color"
-        }
-      }
-    },
-    "flamingo": {
-      "cyan": {
-        "base": {
-          "value": "#5efaf0",
-          "type": "color"
-        },
-        "action": {
-          "value": "#4ae6dc",
-          "type": "color"
-        },
-        "hover": {
-          "value": "#54f0e6",
-          "type": "color"
-        },
-        "secondary": {
-          "value": "#058c83",
-          "type": "color"
-        },
-        "secondary-hover": {
-          "value": "#008279",
-          "type": "color"
-        },
-        "secondary-action": {
-          "value": "#00786f",
-          "type": "color"
-        },
-        "dark": {
-          "value": "#058c83",
-          "type": "color"
-        },
-        "dark-action": {
-          "value": "#00786f",
-          "type": "color"
-        },
-        "dark-hover": {
-          "value": "#008279",
-          "type": "color"
-        },
-        "light": {
-          "value": "#a1fbf5",
-          "type": "color"
-        },
-        "light-action": {
-          "value": "#8de7e1",
-          "type": "color"
-        },
-        "light-hover": {
-          "value": "#97f1eb",
-          "type": "color"
-        }
-      },
-      "pink": {
-        "base": {
-          "value": "#f357bb",
-          "type": "color"
-        },
-        "action": {
-          "value": "#df43a7",
-          "type": "color"
-        },
-        "hover": {
-          "value": "#e94db1",
-          "type": "color"
-        },
-        "secondary": {
-          "value": "#792b5d",
-          "type": "color"
-        },
-        "secondary-hover": {
-          "value": "#6f2153",
-          "type": "color"
-        },
-        "secondary-action": {
-          "value": "#651749",
-          "type": "color"
-        },
-        "dark": {
-          "value": "#792b5d",
-          "type": "color"
-        },
-        "dark-action": {
-          "value": "#651749",
-          "type": "color"
-        },
-        "dark-hover": {
-          "value": "#6f2153",
-          "type": "color"
-        },
-        "light": {
-          "value": "#f9abdd",
-          "type": "color"
-        },
-        "light-action": {
-          "value": "#e597c9",
-          "type": "color"
-        },
-        "light-hover": {
-          "value": "#efa1d3",
-          "type": "color"
-        }
-      }
-    },
-    "open": {
-      "yellow": {
-        "base": {
-          "value": "#ffc008",
-          "type": "color"
-        },
-        "action": {
-          "value": "#ebac00",
-          "type": "color"
-        },
-        "hover": {
-          "value": "#f5b600",
-          "type": "color"
-        },
-        "secondary": {
-          "value": "#7f6004",
-          "type": "color"
-        },
-        "secondary-hover": {
-          "value": "#755600",
-          "type": "color"
-        },
-        "secondary-action": {
-          "value": "#6b4c00",
-          "type": "color"
-        },
-        "dark": {
-          "value": "#ffe084",
-          "type": "color"
-        },
-        "dark-action": {
-          "value": "#ebcc70",
-          "type": "color"
-        },
-        "dark-hover": {
-          "value": "#f5d67a",
-          "type": "color"
-        },
-        "light": {
-          "value": "#7f6004",
-          "type": "color"
-        },
-        "light-action": {
-          "value": "#6b4c00",
-          "type": "color"
-        },
-        "light-hover": {
-          "value": "#755600",
-          "type": "color"
-        }
-      }
-    },
-    "system": {
-      "greys": {
-        "background": {
-          "value": "#161616",
-          "type": "color"
-        },
-        "background-action": {
-          "value": "#2a2a2a",
-          "type": "color"
-        },
-        "background-hover": {
-          "value": "#202020",
-          "type": "color"
-        },
-        "black": {
-          "value": "#212121",
-          "type": "color"
-        },
-        "black-action": {
-          "value": "#353535",
-          "type": "color"
-        },
-        "black-hover": {
-          "value": "#2b2b2b",
-          "type": "color"
-        },
-        "grey": {
-          "value": "#888888",
-          "type": "color"
-        },
-        "grey-action": {
-          "value": "#747474",
-          "type": "color"
-        },
-        "grey-hover": {
-          "value": "#7e7e7e",
-          "type": "color"
-        },
-        "soft-grey": {
-          "value": "#3a3a3a",
-          "type": "color"
-        },
-        "soft-grey-action": {
-          "value": "#4e4e4e",
-          "type": "color"
-        },
-        "soft-grey-hover": {
-          "value": "#444444",
-          "type": "color"
-        },
-        "white": {
-          "value": "#fafafa",
-          "type": "color"
-        },
-        "white-action": {
-          "value": "#f0f0f0",
-          "type": "color"
-        },
-        "white-hover": {
-          "value": "#f5f5f5",
-          "type": "color"
-        }
-      }
-    }
-  }
-}