@sportswik/icons-react 1.0.0 → 1.2.0

package/README.md

@@ -11,7 +11,7 @@ npm i @sportswik/icons-react
 ## Usage
 
 ```tsx
-import PlayCircle from "@sportswik/icons-react/PlayCircle";
+import { PlayCircle } from "@sportswik/icons-react";
 
 export function Button() {
   return <PlayCircle width={24} height={24} />;
@@ -24,6 +24,49 @@ All icons inherit color via `currentColor`. Use CSS or inline styles to tint:
 <PlayCircle style={{ color: "#0EA5E9" }} />
 ```
 
+## Animated icons
+
+A hand-written subset animates on hover. Same names and props as the static
+icons, plus `animate`:
+
+```tsx
+import { Settings } from "@sportswik/icons-react/animated";
+
+<Settings />                 // animates on its own mouse hover
+<Settings animate={hovered} /> // a parent (e.g. a nav row) drives it
+```
+
+- `animate={true}` plays once and holds; `false` eases back to rest.
+- Touch never plays, and `prefers-reduced-motion` keeps icons at rest.
+- Requires React 18+ and `motion` (`npm i motion`), an optional peer dependency.
+- The entry is a client module (`"use client"`); the static entry is not.
+
+Every icon has an animated version under the same name.
+
+## Duotone icons
+
+A subset ships a two-colour variant with the same name plus `Duotone`. The
+primary layer follows `color`; the secondary has its own colour:
+
+```tsx
+import { RocketDuotone } from "@sportswik/icons-react";
+
+<RocketDuotone />                        // secondary = primary at 40%
+<RocketDuotone secondaryColor="#F97316" /> // explicit secondary
+```
+
+Theme every duotone icon at once with a CSS variable:
+
+```css
+:root { --sw-icon-secondary: #F97316; }
+```
+
+The default secondary uses `color-mix()` (Safari 16.2+, Chrome 111+). For older browsers, pass `secondaryColor` or set `--sw-icon-secondary`.
+
+`iconMetadata[name].variants` lists `"duotone"` for icons that have one.
+
+Available: AlertTriangle, Database, Idea, Rocket, Ticket, UserShield.
+
 ## Storybook & Chromatic
 
 View all icons in Storybook:

package/dist/animated.d.mts

@@ -0,0 +1,418 @@
+import { ComponentType, SVGProps } from 'react';
+
+declare const animatedIconBrand: unique symbol;
+type AnimatedIconProps = SVGProps<SVGSVGElement> & {
+    /**
+     * `true` plays the animation once and holds its end state; `false` eases back
+     * to rest. Leave it out and the icon animates on its own mouse hover.
+     */
+    animate?: boolean;
+};
+/**
+ * An animated icon. The brand exists only in the type system: it stops a static
+ * icon, whose props are a subset of these, from being accepted wherever a
+ * consumer means to pass `animate`.
+ */
+type AnimatedIcon = ComponentType<AnimatedIconProps> & {
+    readonly [animatedIconBrand]: true;
+};
+
+declare const _default$36: AnimatedIcon;
+
+declare const _default$35: AnimatedIcon;
+
+declare const _default$34: AnimatedIcon;
+
+declare const _default$33: AnimatedIcon;
+
+declare const _default$32: AnimatedIcon;
+
+declare const _default$31: AnimatedIcon;
+
+declare const _default$30: AnimatedIcon;
+
+declare const _default$2$: AnimatedIcon;
+
+declare const _default$2_: AnimatedIcon;
+
+declare const _default$2Z: AnimatedIcon;
+
+declare const _default$2Y: AnimatedIcon;
+
+declare const _default$2X: AnimatedIcon;
+
+declare const _default$2W: AnimatedIcon;
+
+declare const _default$2V: AnimatedIcon;
+
+declare const _default$2U: AnimatedIcon;
+
+declare const _default$2T: AnimatedIcon;
+
+declare const _default$2S: AnimatedIcon;
+
+declare const _default$2R: AnimatedIcon;
+
+declare const _default$2Q: AnimatedIcon;
+
+declare const _default$2P: AnimatedIcon;
+
+declare const _default$2O: AnimatedIcon;
+
+declare const _default$2N: AnimatedIcon;
+
+declare const _default$2M: AnimatedIcon;
+
+declare const _default$2L: AnimatedIcon;
+
+declare const _default$2K: AnimatedIcon;
+
+declare const _default$2J: AnimatedIcon;
+
+declare const _default$2I: AnimatedIcon;
+
+declare const _default$2H: AnimatedIcon;
+
+declare const _default$2G: AnimatedIcon;
+
+declare const _default$2F: AnimatedIcon;
+
+declare const _default$2E: AnimatedIcon;
+
+declare const _default$2D: AnimatedIcon;
+
+declare const _default$2C: AnimatedIcon;
+
+declare const _default$2B: AnimatedIcon;
+
+declare const _default$2A: AnimatedIcon;
+
+declare const _default$2z: AnimatedIcon;
+
+declare const _default$2y: AnimatedIcon;
+
+declare const _default$2x: AnimatedIcon;
+
+declare const _default$2w: AnimatedIcon;
+
+declare const _default$2v: AnimatedIcon;
+
+declare const _default$2u: AnimatedIcon;
+
+declare const _default$2t: AnimatedIcon;
+
+declare const _default$2s: AnimatedIcon;
+
+declare const _default$2r: AnimatedIcon;
+
+declare const _default$2q: AnimatedIcon;
+
+declare const _default$2p: AnimatedIcon;
+
+declare const _default$2o: AnimatedIcon;
+
+declare const _default$2n: AnimatedIcon;
+
+declare const _default$2m: AnimatedIcon;
+
+declare const _default$2l: AnimatedIcon;
+
+declare const _default$2k: AnimatedIcon;
+
+declare const _default$2j: AnimatedIcon;
+
+declare const _default$2i: AnimatedIcon;
+
+declare const _default$2h: AnimatedIcon;
+
+declare const _default$2g: AnimatedIcon;
+
+declare const _default$2f: AnimatedIcon;
+
+declare const _default$2e: AnimatedIcon;
+
+declare const _default$2d: AnimatedIcon;
+
+declare const _default$2c: AnimatedIcon;
+
+declare const _default$2b: AnimatedIcon;
+
+declare const _default$2a: AnimatedIcon;
+
+declare const _default$29: AnimatedIcon;
+
+declare const _default$28: AnimatedIcon;
+
+declare const _default$27: AnimatedIcon;
+
+declare const _default$26: AnimatedIcon;
+
+declare const _default$25: AnimatedIcon;
+
+declare const _default$24: AnimatedIcon;
+
+declare const _default$23: AnimatedIcon;
+
+declare const _default$22: AnimatedIcon;
+
+declare const _default$21: AnimatedIcon;
+
+declare const _default$20: AnimatedIcon;
+
+declare const _default$1$: AnimatedIcon;
+
+declare const _default$1_: AnimatedIcon;
+
+declare const _default$1Z: AnimatedIcon;
+
+declare const _default$1Y: AnimatedIcon;
+
+declare const _default$1X: AnimatedIcon;
+
+declare const _default$1W: AnimatedIcon;
+
+declare const _default$1V: AnimatedIcon;
+
+declare const _default$1U: AnimatedIcon;
+
+declare const _default$1T: AnimatedIcon;
+
+declare const _default$1S: AnimatedIcon;
+
+declare const _default$1R: AnimatedIcon;
+
+declare const _default$1Q: AnimatedIcon;
+
+declare const _default$1P: AnimatedIcon;
+
+declare const _default$1O: AnimatedIcon;
+
+declare const _default$1N: AnimatedIcon;
+
+declare const _default$1M: AnimatedIcon;
+
+declare const _default$1L: AnimatedIcon;
+
+declare const _default$1K: AnimatedIcon;
+
+declare const _default$1J: AnimatedIcon;
+
+declare const _default$1I: AnimatedIcon;
+
+declare const _default$1H: AnimatedIcon;
+
+declare const _default$1G: AnimatedIcon;
+
+declare const _default$1F: AnimatedIcon;
+
+declare const _default$1E: AnimatedIcon;
+
+declare const _default$1D: AnimatedIcon;
+
+declare const _default$1C: AnimatedIcon;
+
+declare const _default$1B: AnimatedIcon;
+
+declare const _default$1A: AnimatedIcon;
+
+declare const _default$1z: AnimatedIcon;
+
+declare const _default$1y: AnimatedIcon;
+
+declare const _default$1x: AnimatedIcon;
+
+declare const _default$1w: AnimatedIcon;
+
+declare const _default$1v: AnimatedIcon;
+
+declare const _default$1u: AnimatedIcon;
+
+declare const _default$1t: AnimatedIcon;
+
+declare const _default$1s: AnimatedIcon;
+
+declare const _default$1r: AnimatedIcon;
+
+declare const _default$1q: AnimatedIcon;
+
+declare const _default$1p: AnimatedIcon;
+
+declare const _default$1o: AnimatedIcon;
+
+declare const _default$1n: AnimatedIcon;
+
+declare const _default$1m: AnimatedIcon;
+
+declare const _default$1l: AnimatedIcon;
+
+declare const _default$1k: AnimatedIcon;
+
+declare const _default$1j: AnimatedIcon;
+
+declare const _default$1i: AnimatedIcon;
+
+declare const _default$1h: AnimatedIcon;
+
+declare const _default$1g: AnimatedIcon;
+
+declare const _default$1f: AnimatedIcon;
+
+declare const _default$1e: AnimatedIcon;
+
+declare const _default$1d: AnimatedIcon;
+
+declare const _default$1c: AnimatedIcon;
+
+declare const _default$1b: AnimatedIcon;
+
+declare const _default$1a: AnimatedIcon;
+
+declare const _default$19: AnimatedIcon;
+
+declare const _default$18: AnimatedIcon;
+
+declare const _default$17: AnimatedIcon;
+
+declare const _default$16: AnimatedIcon;
+
+declare const _default$15: AnimatedIcon;
+
+declare const _default$14: AnimatedIcon;
+
+declare const _default$13: AnimatedIcon;
+
+declare const _default$12: AnimatedIcon;
+
+declare const _default$11: AnimatedIcon;
+
+declare const _default$10: AnimatedIcon;
+
+declare const _default$$: AnimatedIcon;
+
+declare const _default$_: AnimatedIcon;
+
+declare const _default$Z: AnimatedIcon;
+
+declare const _default$Y: AnimatedIcon;
+
+declare const _default$X: AnimatedIcon;
+
+declare const _default$W: AnimatedIcon;
+
+declare const _default$V: AnimatedIcon;
+
+declare const _default$U: AnimatedIcon;
+
+declare const _default$T: AnimatedIcon;
+
+declare const _default$S: AnimatedIcon;
+
+declare const _default$R: AnimatedIcon;
+
+declare const _default$Q: AnimatedIcon;
+
+declare const _default$P: AnimatedIcon;
+
+declare const _default$O: AnimatedIcon;
+
+declare const _default$N: AnimatedIcon;
+
+declare const _default$M: AnimatedIcon;
+
+declare const _default$L: AnimatedIcon;
+
+declare const _default$K: AnimatedIcon;
+
+declare const _default$J: AnimatedIcon;
+
+declare const _default$I: AnimatedIcon;
+
+declare const _default$H: AnimatedIcon;
+
+declare const _default$G: AnimatedIcon;
+
+declare const _default$F: AnimatedIcon;
+
+declare const _default$E: AnimatedIcon;
+
+declare const _default$D: AnimatedIcon;
+
+declare const _default$C: AnimatedIcon;
+
+declare const _default$B: AnimatedIcon;
+
+declare const _default$A: AnimatedIcon;
+
+declare const _default$z: AnimatedIcon;
+
+declare const _default$y: AnimatedIcon;
+
+declare const _default$x: AnimatedIcon;
+
+declare const _default$w: AnimatedIcon;
+
+declare const _default$v: AnimatedIcon;
+
+declare const _default$u: AnimatedIcon;
+
+declare const _default$t: AnimatedIcon;
+
+declare const _default$s: AnimatedIcon;
+
+declare const _default$r: AnimatedIcon;
+
+declare const _default$q: AnimatedIcon;
+
+declare const _default$p: AnimatedIcon;
+
+declare const _default$o: AnimatedIcon;
+
+declare const _default$n: AnimatedIcon;
+
+declare const _default$m: AnimatedIcon;
+
+declare const _default$l: AnimatedIcon;
+
+declare const _default$k: AnimatedIcon;
+
+declare const _default$j: AnimatedIcon;
+
+declare const _default$i: AnimatedIcon;
+
+declare const _default$h: AnimatedIcon;
+
+declare const _default$g: AnimatedIcon;
+
+declare const _default$f: AnimatedIcon;
+
+declare const _default$e: AnimatedIcon;
+
+declare const _default$d: AnimatedIcon;
+
+declare const _default$c: AnimatedIcon;
+
+declare const _default$b: AnimatedIcon;
+
+declare const _default$a: AnimatedIcon;
+
+declare const _default$9: AnimatedIcon;
+
+declare const _default$8: AnimatedIcon;
+
+declare const _default$7: AnimatedIcon;
+
+declare const _default$6: AnimatedIcon;
+
+declare const _default$5: AnimatedIcon;
+
+declare const _default$4: AnimatedIcon;
+
+declare const _default$3: AnimatedIcon;
+
+declare const _default$2: AnimatedIcon;
+
+declare const _default$1: AnimatedIcon;
+
+declare const _default: AnimatedIcon;
+
+export { _default$36 as Aed, _default$35 as Airplay, _default$34 as AlertOctagon, _default$33 as AlertTriangle, type AnimatedIcon, type AnimatedIconProps, _default$32 as Archive, _default$31 as ArrowDown, _default$30 as ArrowLeft, _default$2$ as ArrowLeftRight, _default$2_ as ArrowRight, _default$2Z as ArrowUp, _default$2Y as Assist, _default$2X as BarChart_3, _default$2W as Bell, _default$2V as BellOff, _default$2U as Block, _default$2T as Box, _default$2S as Brush, _default$2R as BulletedList, _default$2Q as Calendar, _default$2P as CalendarArrowDown, _default$2O as CalendarClock, _default$2N as CalendarPlus, _default$2M as CalendarX, _default$2L as Camera, _default$2K as Captain, _default$2J as Card, _default$2I as CardOutline, _default$2H as Cast, _default$2G as ChangingRoom, _default$2F as Check, _default$2E as ChevronDown, _default$2D as ChevronLeft, _default$2C as ChevronRight, _default$2B as ChevronUp, _default$2A as ChevronsDown, _default$2z as ChevronsDownUp, _default$2y as ChevronsLeft, _default$2x as ChevronsLeftRight, _default$2w as ChevronsRight, _default$2v as ChevronsUp, _default$2u as ChevronsUpDown, _default$2t as CircleGauge, _default$2s as CircleStar, _default$2r as Clock_4, _default$2q as Coins, _default$2p as Contact, _default$2o as Copy, _default$2n as Corner, _default$2m as Cross, _default$2l as Crown, _default$2k as Dashboard, _default$2j as Database, _default$2i as Dices, _default$2h as Disability, _default$2g as Download, _default$2f as Edit, _default$2e as Edit_3, _default$2d as ExternalLink, _default$2c as Eye, _default$2b as FileImage, _default$2a as FileSpreadsheet, _default$29 as Film, _default$28 as Filter, _default$27 as Flag, _default$26 as Flame, _default$25 as Floorball, _default$24 as FloorballChance, _default$23 as Folder, _default$22 as FolderCheck, _default$21 as FolderMinus, _default$20 as FolderPlus, _default$1$ as Football, _default$1_ as FootballChance, _default$1Z as Frown, _default$1Y as Futsal, _default$1X as Gem, _default$1W as GenderFemale, _default$1V as GenderMale, _default$1U as GenderMix, _default$1T as Globe, _default$1S as Grass, _default$1R as Hand, _default$1Q as Hash, _default$1P as Heart, _default$1O as HelpCircle, _default$1N as Home, _default$1M as Idea, _default$1L as Image, _default$1K as ImageOff, _default$1J as ImagePlus, _default$1I as Images, _default$1H as Info, _default$1G as Lightbulb, _default$1F as Link, _default$1E as ListOrdered, _default$1D as Live, _default$1C as Loader, _default$1B as LoaderCircle, _default$1A as Locate, _default$1z as Lock, _default$1y as LogIn, _default$1x as Mail, _default$1w as MapPin, _default$1v as Maximize_2, _default$1u as Megaphone, _default$1t as Meh, _default$1s as Menu, _default$1r as MessageCircle, _default$1q as MessageSquareMore, _default$1p as Mic, _default$1o as Mic_2, _default$1n as Minimize_2, _default$1m as Minus, _default$1l as MonitorSmartphone, _default$1k as Moon, _default$1j as MoreHorizontal, _default$1i as MoreVertical, _default$1h as Move, _default$1g as Newspaper, _default$1f as Offside, _default$1e as Pause, _default$1d as Penalty, _default$1c as PenaltyGoal, _default$1b as PenaltyMiss, _default$1a as Phone, _default$19 as PictureInPicture, _default$18 as Pin, _default$17 as Pitch, _default$16 as Play, _default$15 as PlayCircle, _default$14 as PlayFill, _default$13 as PlayerInjured, _default$12 as PlayerSoccer, _default$11 as Plus, _default$10 as PlusCircle, _default$$ as Printer, _default$_ as Puzzle, _default$Z as Referee, _default$Y as RefreshCcw, _default$X as RefreshCw, _default$W as Reply, _default$V as Rocket, _default$U as RotateCcw, _default$T as Scissors, _default$S as Score, _default$R as Search, _default$Q as Send, _default$P as Settings, _default$O as Settings_2, _default$N as Share_2, _default$M as Shield, _default$L as ShieldCheck, _default$K as Shirt, _default$J as ShoppingCart, _default$I as Shower, _default$H as Siren, _default$G as SkipBack, _default$F as SkipForward, _default$E as Smartphone, _default$D as Smile, _default$C as SquareArrowRight, _default$B as SquareKanban, _default$A as Star, _default$z as Sun, _default$y as Tags, _default$x as Target, _default$w as ThumbsUp, _default$v as Ticket, _default$u as Timeline, _default$t as Timer, _default$s as Toilets, _default$r as Trash_2, _default$q as Trophy, _default$p as Unlink, _default$o as Unlock, _default$n as Upload, _default$m as User, _default$l as UserCheck, _default$k as UserMinus, _default$j as UserPlus, _default$h as UserShield, _default$i as Users, _default$g as Veo, _default$f as Verified, _default$e as Video, _default$d as VideoAlert, _default$c as VideoBack, _default$b as VideoClock, _default$a as VideoCut, _default$9 as VideoHeart, _default$8 as VideoLink, _default$7 as VideoSettings, _default$6 as VideoStar, _default$5 as VideoX, _default$4 as VolumeUp, _default$3 as VolumeX, _default$2 as Webcam, _default$1 as Whistle, _default as X };