@caidentity/testicon 0.0.14 → 0.2.0

package/README.md

@@ -2,8 +2,8 @@
 
 React icon components generated from SVG sources.
 
-- Version: 0.0.11
-- Icons: 3
+- Version: 0.0.3
+- Icons: 2
 - Manifest: `iconsManifest` (id, name, component, viewBox, tags)
 
 ## Install
@@ -36,8 +36,36 @@ The Icon component extends `SVGProps<SVGSVGElement>` with these additional props
 - `size?: number | string` - Icon size in pixels (default: 24)
 - `title?: string` - Accessible title for screen readers
 
+### Animation Props
+
+- `animated?: boolean` - Enable or disable animation when available
+- `animationDuration?: number` - Override animation duration in milliseconds
+- `animationDelay?: number` - Delay before animation starts in milliseconds
+- `animationLoop?: boolean | number` - `true` for infinite, `false` for one-time, or a number of iterations
+- `animationDirection?: 'normal' | 'reverse' | 'alternate'` - Playback direction
+- `onAnimationStart?: () => void` and `onAnimationEnd?: () => void`
+
 All standard SVG props are supported (className, style, onClick, etc.).
 
+### Duotone Props
+
+- `duotone1?: string`, `duotone2?: string`, `duotone3?: string`
+- Apply when the icon declares layered content via `duotoneLayers` in the registry.
+- Mapped to CSS variables `--duotone1/2/3` for layer-targeted colors.
+- When any duotone color is provided and the icon reports layered content, `fill` is omitted so layered colors determine appearance.
+- Otherwise, `fill` falls back to `currentColor` or the explicit `fill` prop.
+
+Example:
+
+```tsx
+<Icon
+  name="logo"
+  duotone1="#4F46E5" // primary layer
+  duotone2="#A78BFA" // secondary layer
+  size={32}
+/>
+```
+
 ## Theming
 
 Icons use `fill="currentColor"` by default, so they inherit the text color of their container:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caidentity/testicon",
-  "version": "0.0.14",
+  "version": "0.2.0",
   "description": "Icons for @caidentity/testicon",
   "license": "MIT",
   "keywords": [

package/src/Icon.tsx

@@ -1,18 +1,32 @@
-import React, { SVGProps } from 'react'
+import React, { SVGProps, useEffect } from 'react'
 
 export interface IconProps extends SVGProps<SVGSVGElement> {
   name: string
   size?: number | string
   title?: string
+
+  // Single color (backward compatible)
+  fill?: string
+
+  // Duotone colors (new)
+  duotone1?: string  // Primary duotone layer color
+  duotone2?: string  // Secondary duotone layer color
+  duotone3?: string  // Tertiary duotone layer color (optional)
+
+  // Animation controls (new). When an icon has animation defaults in the registry,
+  // these props can override or toggle playback intent; consumers can pair with CSS.
+  animated?: boolean
+  animationDuration?: number
+  animationDelay?: number
+  animationLoop?: boolean | number
+  animationDirection?: 'normal' | 'reverse' | 'alternate'
+  onAnimationStart?: () => void
+  onAnimationEnd?: () => void
 }
 
 const iconRegistry = {
   "frame": {
-    "svg": "<g transform=\"translate(-1486, -235)\"><path d=\"M 8 -90 L 422 -90 Q 430 -90 430 -82 L 430 172 Q 430 180 422 180 L 8 180 Q 0 180 0 172 L 0 -82 Q 0 -90 8 -90 Z\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"butt\" strokeLinejoin=\"miter\" transform=\"translate(747,440)\" />\n<path d=\"M 0 0 L 0 153 L 186 153 L 186 -7\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(1761,552)\" />\n<path d=\"M 8 -90 L 422 -90 Q 430 -90 430 -82 L 430 172 Q 430 180 422 180 L 8 180 Q 0 180 0 172 L 0 -82 Q 0 -90 8 -90 Z\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"butt\" strokeLinejoin=\"miter\" transform=\"translate(1611,438)\" /></g>",
-    "viewBox": "0 0 800 600"
-  },
-  "frame-b0y6eye-1765734231799": {
-    "svg": "<g transform=\"translate(-2349, -237)\"><path d=\"M 8 -90 L 422 -90 Q 430 -90 430 -82 L 430 172 Q 430 180 422 180 L 8 180 Q 0 180 0 172 L 0 -82 Q 0 -90 8 -90 Z\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"butt\" strokeLinejoin=\"miter\" transform=\"translate(747,440)\" />\n<path d=\"M 4 0 L 4 0 Q 8 0 8 4 L 8 4 Q 8 8 4 8 L 4 8 Q 0 8 0 4 L 0 4 Q 0 0 4 0 Z\" fill=\"none\" fill-opacity=\"0\" stroke=\"#ffcfcfff\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"butt\" strokeLinejoin=\"miter\" transform=\"translate(1031,671)\" />\n<path d=\"M 0 0 L 0 153 L 186 153 L 186 -7\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(1761,552)\" />\n<path d=\"M 8 -90 L 422 -90 Q 430 -90 430 -82 L 430 172 Q 430 180 422 180 L 8 180 Q 0 180 0 172 L 0 -82 Q 0 -90 8 -90 Z\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"butt\" strokeLinejoin=\"miter\" transform=\"translate(1611,438)\" />\n<path d=\"M 0 0 L 134 547 L 332 411 L 391 20 L 160 172\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(2424,313)\" />\n<path d=\"M 0 0 L -30 174 L 161 183 L 196 110 L 112 25 L -11 190 L 17 15 L 241 5 L -42 -119\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(2661,291)\" /></g>",
+    "svg": "<g transform=\"translate(-1490, -237)\"><path d=\"M 8 -90 L 422 -90 Q 430 -90 430 -82 L 430 172 Q 430 180 422 180 L 8 180 Q 0 180 0 172 L 0 -82 Q 0 -90 8 -90 Z\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"butt\" strokeLinejoin=\"miter\" transform=\"translate(746,441)\" />\n<path d=\"M 4 0 L 4 0 Q 8 0 8 4 L 8 4 Q 8 8 4 8 L 4 8 Q 0 8 0 4 L 0 4 Q 0 0 4 0 Z\" fill=\"none\" fill-opacity=\"0\" stroke=\"#ffcfcfff\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"butt\" strokeLinejoin=\"miter\" transform=\"translate(1031,672)\" />\n<path d=\"M 0 0 L 0 153 L 186 153 L 186 -7\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(1765,554)\" /></g>",
     "viewBox": "0 0 800 600"
   }
 }
@@ -22,6 +36,17 @@ export const Icon: React.FC<IconProps> = ({
   size = 24,
   title,
   className,
+  fill,
+  duotone1,
+  duotone2,
+  duotone3,
+  animated,
+  animationDuration,
+  animationDelay,
+  animationLoop,
+  animationDirection,
+  onAnimationStart,
+  onAnimationEnd,
   ...props
 }) => {
   const iconData = iconRegistry[name.toLowerCase()]
@@ -31,19 +56,68 @@ export const Icon: React.FC<IconProps> = ({
     return null
   }
 
+  // Apply duotone colors to CSS variables for layer targeting
+  const duotoneVars: Record<string, string> = {}
+  if (iconData.duotoneLayers && iconData.duotoneLayers >= 2 && duotone1) duotoneVars['--duotone1'] = duotone1
+  if (iconData.duotoneLayers && iconData.duotoneLayers >= 2 && duotone2) duotoneVars['--duotone2'] = duotone2
+  if (iconData.duotoneLayers && iconData.duotoneLayers >= 3 && duotone3) duotoneVars['--duotone3'] = duotone3
+
+  const styleWithDuotone = {
+    ...props.style,
+    ...duotoneVars
+  }
+
+  // Use duotone colors if available, otherwise fall back to single color
+  // Note: when duotone is present, we intentionally omit 'fill' to let layered colors drive
+  // the appearance; otherwise we use 'currentColor' or 'fill' prop.
+  const hasDuotone = iconData.duotoneLayers && (duotone1 || duotone2 || duotone3)
+  const svgFill = hasDuotone ? undefined : (fill || 'currentColor')
+
+  // Derive animation intent from registry defaults and props
+  const meta = iconData.animation || null
+  const isAnimated = typeof animated === 'boolean' ? animated : !!(meta && meta.autoplay)
+  const durationMs = typeof animationDuration === 'number' ? animationDuration : (meta && typeof meta.duration === 'number' ? meta.duration : undefined)
+  const delayMs = typeof animationDelay === 'number' ? animationDelay : undefined
+  const iterCount = typeof animationLoop === 'number' ? String(animationLoop) : (animationLoop === true ? 'infinite' : (animationLoop === false ? '1' : (meta && meta.loop ? 'infinite' : undefined)))
+  const dir = animationDirection ?? (meta && meta.direction ? meta.direction : undefined)
+
+  // Merge animation style on top of duotone variables and incoming style.
+  // Consumers can add 'animationName' via props.style or class to bind keyframes.
+  const styleWithAnimation: React.CSSProperties = {
+    ...styleWithDuotone,
+    ...(durationMs !== undefined ? { animationDuration: String(durationMs) + 'ms' } : {}),
+    ...(delayMs !== undefined ? { animationDelay: String(delayMs) + 'ms' } : {}),
+    ...(iterCount !== undefined ? { animationIterationCount: iterCount } : {}),
+    ...(dir !== undefined ? { animationDirection: dir } : {}),
+    animationPlayState: isAnimated ? 'running' : 'paused'
+  }
+
+  useEffect(() => {
+    if (isAnimated) onAnimationStart?.()
+    else onAnimationEnd?.()
+  }, [isAnimated])
+
   return (
     <svg
       width={size}
       height={size}
       viewBox={iconData.viewBox}
-      fill="currentColor"
+      fill={svgFill}
       className={className}
+      style={styleWithAnimation}
+      data-animated={isAnimated ? '1' : undefined}
+      data-animation-duration={durationMs}
+      data-animation-delay={delayMs}
+      data-animation-iter={iterCount}
+      data-animation-direction={dir}
       aria-hidden={title ? undefined : true}
       aria-labelledby={title ? `${name}-title` : undefined}
       role="img"
       {...props}
     >
-      {title && <title id={`${name}-title`}>{title}</title>}
+      {title && <title id={
+        
+      }>{title}</title>}
       <g dangerouslySetInnerHTML={{ __html: iconData.svg }} />
     </svg>
   )

package/src/icons/manifest.json

@@ -5,7 +5,10 @@
     "component": "frame",
     "width": 800,
     "height": 600,
-    "viewBox": "0 0 800 600"
+    "viewBox": "0 0 800 600",
+    "animation": {
+      "autoplay": false
+    }
   },
   {
     "id": "frame-t8zz5m1-1765658197783",
@@ -14,13 +17,5 @@
     "width": 800,
     "height": 600,
     "viewBox": "0 0 800 600"
-  },
-  {
-    "id": "frame-b0y6eye-1765734231799",
-    "name": "frame-b0y6eye-1765734231799",
-    "component": "frame-b0y6eye-1765734231799",
-    "width": 800,
-    "height": 600,
-    "viewBox": "0 0 800 600"
   }
 ]

package/src/icons/manifest.ts

@@ -7,6 +7,11 @@ export type IconManifestEntry = {
   height: number
   viewBox: string
   tags?: string[]
+  animation?: {
+    duration?: number
+    loop?: boolean | number
+    autoplay?: boolean
+  }
 }
 
 export const iconsManifest: IconManifestEntry[] = [
@@ -16,7 +21,10 @@ export const iconsManifest: IconManifestEntry[] = [
     "component": "frame",
     "width": 800,
     "height": 600,
-    "viewBox": "0 0 800 600"
+    "viewBox": "0 0 800 600",
+    "animation": {
+      "autoplay": false
+    }
   },
   {
     "id": "frame-t8zz5m1-1765658197783",
@@ -25,13 +33,5 @@ export const iconsManifest: IconManifestEntry[] = [
     "width": 800,
     "height": 600,
     "viewBox": "0 0 800 600"
-  },
-  {
-    "id": "frame-b0y6eye-1765734231799",
-    "name": "frame-b0y6eye-1765734231799",
-    "component": "frame-b0y6eye-1765734231799",
-    "width": 800,
-    "height": 600,
-    "viewBox": "0 0 800 600"
   }
 ] as IconManifestEntry[]

package/src/icons.tsx

@@ -1,8 +1,7 @@
 // Icon registry utilities
 export const iconNames = [
   "frame",
-  "frame",
-  "frame-b0y6eye-1765734231799"
+  "frame"
 ] as const
 
 export type IconName = typeof iconNames[number]