@nice2dev/icons 1.2.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +103 -0
- package/dist/cjs/NiceDesktopIconExporter.js +2 -6
- package/dist/cjs/NiceFaviconGenerator.js +2 -1
- package/dist/cjs/NiceIconPicker.js +15 -20
- package/dist/cjs/NiceIconSetCreator.js +6 -29
- package/dist/cjs/NtdIconBadge.js +12 -12
- package/dist/cjs/NtdIconMorph.js +21 -11
- package/dist/cjs/NtdStateMorph.js +3 -3
- package/dist/cjs/animationControls.js +10 -3
- package/dist/cjs/createIcon.js +5 -2
- package/dist/cjs/headless-ui.js +3 -3
- package/dist/cjs/iconStyles.js +36 -34
- package/dist/cjs/icons/accessibility.js +13 -13
- package/dist/cjs/icons/actions.js +37 -25
- package/dist/cjs/icons/ai.js +15 -15
- package/dist/cjs/icons/brand.js +7 -7
- package/dist/cjs/icons/business.js +18 -81
- package/dist/cjs/icons/devtech.js +31 -103
- package/dist/cjs/icons/ecommerce.js +16 -16
- package/dist/cjs/icons/education.js +17 -17
- package/dist/cjs/icons/files.js +31 -31
- package/dist/cjs/icons/fintech.js +14 -14
- package/dist/cjs/icons/food.js +16 -16
- package/dist/cjs/icons/fun.js +13 -13
- package/dist/cjs/icons/gaming.js +15 -15
- package/dist/cjs/icons/health.js +13 -22
- package/dist/cjs/icons/index.js +4 -0
- package/dist/cjs/icons/legal.js +13 -13
- package/dist/cjs/icons/media.js +46 -23
- package/dist/cjs/icons/navigation.js +14 -14
- package/dist/cjs/icons/omniverk.js +10 -10
- package/dist/cjs/icons/realestate.js +17 -17
- package/dist/cjs/icons/saas.js +13 -13
- package/dist/cjs/icons/science.js +16 -16
- package/dist/cjs/icons/shapes.js +22 -22
- package/dist/cjs/icons/smarthome.js +13 -13
- package/dist/cjs/icons/social.js +8 -98
- package/dist/cjs/icons/sports.js +14 -14
- package/dist/cjs/icons/sustainability.js +15 -15
- package/dist/cjs/icons/travel.js +15 -15
- package/dist/cjs/icons/ui.js +39 -28
- package/dist/cjs/icons/weather.js +20 -20
- package/dist/cjs/index.js +4 -0
- package/dist/cjs/lottieIntegration.js +3 -3
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/cjs/particleEffects.js +11 -4
- package/dist/cjs/resolver.js +4 -0
- package/dist/esm/NiceDesktopIconExporter.js +2 -6
- package/dist/esm/NiceFaviconGenerator.js +2 -1
- package/dist/esm/NiceIconPicker.js +16 -21
- package/dist/esm/NiceIconSetCreator.js +6 -29
- package/dist/esm/NtdIconBadge.js +12 -12
- package/dist/esm/NtdIconMorph.js +21 -11
- package/dist/esm/NtdStateMorph.js +3 -3
- package/dist/esm/animationControls.js +11 -4
- package/dist/esm/createIcon.js +6 -3
- package/dist/esm/headless-ui.js +3 -3
- package/dist/esm/iconStyles.js +36 -34
- package/dist/esm/icons/accessibility.js +13 -13
- package/dist/esm/icons/actions.js +37 -26
- package/dist/esm/icons/ai.js +15 -15
- package/dist/esm/icons/brand.js +7 -7
- package/dist/esm/icons/business.js +18 -81
- package/dist/esm/icons/devtech.js +31 -103
- package/dist/esm/icons/ecommerce.js +16 -16
- package/dist/esm/icons/education.js +17 -17
- package/dist/esm/icons/files.js +31 -31
- package/dist/esm/icons/fintech.js +14 -14
- package/dist/esm/icons/food.js +16 -16
- package/dist/esm/icons/fun.js +13 -13
- package/dist/esm/icons/gaming.js +15 -15
- package/dist/esm/icons/health.js +13 -22
- package/dist/esm/icons/index.js +3 -3
- package/dist/esm/icons/legal.js +13 -13
- package/dist/esm/icons/media.js +45 -24
- package/dist/esm/icons/navigation.js +14 -14
- package/dist/esm/icons/omniverk.js +10 -10
- package/dist/esm/icons/realestate.js +17 -17
- package/dist/esm/icons/saas.js +13 -13
- package/dist/esm/icons/science.js +16 -16
- package/dist/esm/icons/shapes.js +22 -22
- package/dist/esm/icons/smarthome.js +13 -13
- package/dist/esm/icons/social.js +8 -98
- package/dist/esm/icons/sports.js +14 -14
- package/dist/esm/icons/sustainability.js +15 -15
- package/dist/esm/icons/travel.js +15 -15
- package/dist/esm/icons/ui.js +39 -29
- package/dist/esm/icons/weather.js +20 -20
- package/dist/esm/index.js +3 -3
- package/dist/esm/lottieIntegration.js +3 -3
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/esm/particleEffects.js +11 -4
- package/dist/esm/resolver.js +4 -0
- package/dist/esm/smilAnimations.js +1 -1
- package/dist/types/NiceDesktopIconExporter.d.ts +1 -0
- package/dist/types/NtdIconBadge.d.ts +12 -4
- package/dist/types/NtdIconMorph.d.ts +9 -3
- package/dist/types/NtdStateMorph.d.ts +3 -1
- package/dist/types/headless-ui.d.ts +6 -2
- package/dist/types/iconStyles.d.ts +33 -11
- package/dist/types/icons/actions.d.ts +1 -0
- package/dist/types/icons/index.d.ts +3 -3
- package/dist/types/icons/media.d.ts +3 -0
- package/dist/types/icons/ui.d.ts +2 -0
- package/dist/types/lottieIntegration.d.ts +3 -1
- package/dist/types/particleEffects.d.ts +3 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.ntd-picker{--ntd-picker-border:var(--nice-border-color,#3a3a4a);--ntd-picker-radius:var(--nice-radius-lg,10px);--ntd-picker-bg:var(--nice-bg-elevated,#1e1e2a);--ntd-picker-text:var(--nice-text-primary,#f0f0f5);--ntd-picker-accent:var(--nice-color-primary,#6c5ce7);--ntd-picker-accent-hover:var(--nice-color-primary-hover,#5b4cdb);--ntd-picker-accent-alpha:var(--nice-primary-tint-20,rgba(108,92,231,.2));--ntd-picker-muted:var(--nice-text-muted,#606078);--ntd-picker-input-bg:var(--nice-bg-inset,#14141c);display:inline-block;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;position:relative}.ntd-picker-trigger{align-items:center;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:var(--ntd-picker-radius,10px);color:var(--ntd-picker-text,#f0f0f5);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.875rem;gap:8px;min-width:160px;padding:8px 14px;transition:border-color .2s,box-shadow .2s;user-select:none}.ntd-picker-trigger:hover{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-trigger:focus-visible{border-color:var(--ntd-picker-accent,#6c5ce7);box-shadow:0 0 0 3px var(--ntd-picker-accent-alpha,rgba(108,92,231,.25));outline:none}.ntd-picker-trigger-icon{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));border-radius:6px;display:flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.ntd-picker-trigger-label{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ntd-picker-trigger-chevron,.ntd-picker-trigger-placeholder{color:var(--ntd-picker-muted,#606078)}.ntd-picker-trigger-chevron{flex-shrink:0;transition:transform .2s}.ntd-picker.open .ntd-picker-trigger-chevron{transform:rotate(180deg)}.ntd-picker-dropdown{animation:ntd-picker-appear .2s ease-out;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:var(--ntd-picker-radius,10px);box-shadow:0 12px 40px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.2);display:flex;flex-direction:column;left:0;max-height:460px;overflow:hidden;position:absolute;top:calc(100% + 6px);width:380px;z-index:1000}@keyframes ntd-picker-appear{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-picker-search{border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);flex-shrink:0;padding:10px 12px;position:relative}.ntd-picker-search-icon{color:var(--ntd-picker-muted,#606078);left:22px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.ntd-picker-search input{background:var(--ntd-picker-input-bg,#14141c);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:8px;color:var(--ntd-picker-text,#f0f0f5);font-family:inherit;font-size:.82rem;outline:none;padding:8px 12px 8px 34px;transition:border-color .2s;width:100%}.ntd-picker-search input:focus{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-search input::placeholder{color:var(--ntd-picker-muted,#606078)}.ntd-picker-tabs{border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);display:flex;flex-shrink:0;gap:2px;overflow-x:auto;padding:6px 10px;scrollbar-width:none}.ntd-picker-tabs::-webkit-scrollbar{display:none}.ntd-picker-tab{background:transparent;border:none;border-radius:6px;color:var(--ntd-picker-muted,#606078);cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;letter-spacing:.03em;padding:5px 10px;text-transform:uppercase;transition:all .15s;white-space:nowrap}.ntd-picker-tab:hover{background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));color:var(--ntd-picker-text,#f0f0f5)}.ntd-picker-tab.active{background:var(--ntd-picker-accent,#6c5ce7);color:#fff}.ntd-picker-grid-wrap{flex:1;overflow-y:auto;padding:8px;scrollbar-color:var(--ntd-picker-border,#3a3a4a) transparent;scrollbar-width:thin}.ntd-picker-grid-wrap::-webkit-scrollbar{width:5px}.ntd-picker-grid-wrap::-webkit-scrollbar-track{background:transparent}.ntd-picker-grid-wrap::-webkit-scrollbar-thumb{background:var(--ntd-picker-border,#3a3a4a);border-radius:3px}.ntd-picker-category-label{color:var(--ntd-picker-muted,#606078);font-size:.68rem;font-weight:600;letter-spacing:.05em;margin-top:4px;padding:6px 4px 4px;text-transform:uppercase}.ntd-picker-category-label:first-child{margin-top:0}.ntd-picker-grid{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}.ntd-picker-cell{align-items:center;aspect-ratio:1;background:transparent;border:none;border-radius:8px;color:var(--ntd-picker-text,#f0f0f5);cursor:pointer;display:flex;justify-content:center;position:relative;transition:all .15s;width:100%}.ntd-picker-cell:hover{background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));transform:scale(1.1)}.ntd-picker-cell.selected{background:var(--ntd-picker-accent,#6c5ce7);box-shadow:0 2px 8px var(--ntd-picker-accent-alpha,rgba(108,92,231,.25));color:#fff}.ntd-picker-cell:focus-visible{outline:2px solid var(--ntd-picker-accent,#6c5ce7);outline-offset:1px}.ntd-picker-cell:after{background:var(--ntd-picker-text,#f0f0f5);border-radius:5px;bottom:calc(100% + 6px);color:var(--ntd-picker-bg,#1e1e2a);content:attr(data-name);font-size:.65rem;font-weight:500;left:50%;opacity:0;padding:3px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .15s;white-space:nowrap;z-index:10}.ntd-picker-cell:hover:after{opacity:1}.ntd-picker-cell.draggable{cursor:grab}.ntd-picker-cell.draggable:active{cursor:grabbing}.ntd-picker-cell.draggable:hover:before{border:2px dashed var(--ntd-picker-accent,#6c5ce7);border-radius:8px;content:"";inset:0;opacity:.5;pointer-events:none;position:absolute}.ntd-picker-empty{color:var(--ntd-picker-muted,#606078);font-size:.82rem;padding:32px 16px;text-align:center}.ntd-picker-empty-icon{font-size:2rem;margin-bottom:8px;opacity:.4}.ntd-picker-footer{align-items:center;border-top:1px solid var(--ntd-picker-border,#3a3a4a);display:flex;flex-shrink:0;justify-content:space-between;padding:8px 12px}.ntd-picker-count{font-size:.7rem}.ntd-picker-clear,.ntd-picker-count{color:var(--ntd-picker-muted,#606078)}.ntd-picker-clear{background:transparent;border:none;border-radius:5px;cursor:pointer;font-family:inherit;font-size:.72rem;padding:4px 10px;transition:all .15s}.ntd-picker-clear:hover{background:rgba(255,80,80,.12);color:#ff5050}.ntd-picker-multi-badge{border-radius:10px;font-size:.7rem;font-weight:600;height:20px;min-width:20px;padding:0 6px}.ntd-picker-cell-check,.ntd-picker-multi-badge{align-items:center;background:var(--ntd-picker-accent,#6c5ce7);color:#fff;display:flex;justify-content:center}.ntd-picker-cell-check{border-radius:50%;height:16px;pointer-events:none;position:absolute;right:2px;top:2px;width:16px}.ntd-picker-cell.multi-select{position:relative}.ntd-picker-cell-fav{align-items:center;background:transparent;border:none;border-radius:50%;color:var(--ntd-picker-muted,#606078);cursor:pointer;display:flex;height:16px;justify-content:center;left:2px;opacity:0;padding:0;position:absolute;top:2px;transition:all .15s;width:16px}.ntd-picker-cell-fav.active,.ntd-picker-cell:hover .ntd-picker-cell-fav{opacity:1}.ntd-picker-cell-fav:hover{color:#feca57;transform:scale(1.2)}.ntd-picker-cell-fav.active{color:#feca57}.ntd-picker-tab-special{align-items:center;display:inline-flex;gap:4px}.ntd-picker-tab-special svg{height:10px;width:10px}.ntd-picker-tab-count{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.2));border-radius:8px;display:inline-flex;font-size:.65rem;font-weight:600;height:16px;justify-content:center;margin-left:2px;min-width:16px;padding:0 4px}.ntd-picker-tab.active .ntd-picker-tab-count{background:hsla(0,0%,100%,.2)}.ntd-picker-done{background:var(--ntd-picker-accent,#6c5ce7);border:none;border-radius:5px;color:#fff;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;padding:4px 12px;transition:all .15s}.ntd-picker-done:hover{background:var(--ntd-picker-accent-hover,#5b4cdb);transform:translateY(-1px)}.ntd-picker.disabled .ntd-picker-trigger{cursor:not-allowed;opacity:.5}.ntd-picker.multi .ntd-picker-trigger{border-style:dashed}.ntd-icon{display:inline-block;flex-shrink:0;transition:color .2s ease,transform .2s ease;vertical-align:-.125em}.ntd-anim-spin{animation:ntd-spin 1s linear infinite}.ntd-anim-spin-reverse{animation:ntd-spin 1s linear infinite reverse}@keyframes ntd-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ntd-anim-pulse{animation:ntd-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes ntd-pulse{0%,to{opacity:1}50%{opacity:.4}}.ntd-anim-bounce{animation:ntd-bounce 1s ease infinite}@keyframes ntd-bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(0)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:translateY(-25%)}}.ntd-anim-shake{animation:ntd-shake .6s ease-in-out infinite}@keyframes ntd-shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-2px)}20%,40%,60%,80%{transform:translateX(2px)}}.ntd-anim-float{animation:ntd-float 3s ease-in-out infinite}@keyframes ntd-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.ntd-anim-flip{animation:ntd-flip 1.2s ease-in-out infinite}@keyframes ntd-flip{0%{transform:perspective(400px) rotateY(0)}40%{transform:perspective(400px) rotateY(170deg)}50%{transform:perspective(400px) rotateY(190deg)}80%{transform:perspective(400px) rotateY(1turn)}to{transform:perspective(400px) rotateY(1turn)}}.ntd-anim-glow{animation:ntd-glow 2s ease-in-out infinite}@keyframes ntd-glow{0%,to{filter:drop-shadow(0 0 2px currentColor)}50%{filter:drop-shadow(0 0 12px currentColor) drop-shadow(0 0 20px currentColor)}}.ntd-anim-wiggle{animation:ntd-wiggle 1s ease-in-out infinite}@keyframes ntd-wiggle{0%,to{transform:rotate(0deg)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}.ntd-anim-rubber{animation:ntd-rubber 1s ease-in-out infinite}@keyframes ntd-rubber{0%{transform:scale(1)}30%{transform:scaleX(1.25) scaleY(.75)}40%{transform:scaleX(.75) scaleY(1.25)}50%{transform:scaleX(1.15) scaleY(.85)}65%{transform:scaleX(.95) scaleY(1.05)}75%{transform:scaleX(1.05) scaleY(.95)}to{transform:scale(1)}}.ntd-anim-swing{animation:ntd-swing 1s ease-in-out infinite;transform-origin:top center}@keyframes ntd-swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.ntd-anim-tada{animation:ntd-tada 1.2s ease-in-out infinite}@keyframes ntd-tada{0%{transform:scale(1) rotate(0deg)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}to{transform:scale(1) rotate(0deg)}}.ntd-anim-heartbeat{animation:ntd-heartbeat 1.2s ease-in-out infinite}@keyframes ntd-heartbeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.ntd-anim-fade-in{animation:ntd-fade-in .5s ease-out forwards}@keyframes ntd-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.ntd-anim-slide-up{animation:ntd-slide-up .4s ease-out forwards}@keyframes ntd-slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.ntd-anim-jello{animation:ntd-jello 1s ease-in-out infinite}@keyframes ntd-jello{0%,to{transform:skewX(0deg) skewY(0deg)}11.1%{transform:skewX(-12.5deg) skewY(-12.5deg)}22.2%{transform:skewX(6.25deg) skewY(6.25deg)}33.3%{transform:skewX(-3.125deg) skewY(-3.125deg)}44.4%{transform:skewX(1.5625deg) skewY(1.5625deg)}55.5%{transform:skewX(-.78125deg) skewY(-.78125deg)}66.6%{transform:skewX(.390625deg) skewY(.390625deg)}77.7%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.ntd-anim-pop{animation:ntd-pop .6s ease-out infinite}@keyframes ntd-pop{0%{transform:scale(1)}15%{transform:scale(1.35)}30%{transform:scale(.9)}45%{transform:scale(1.1)}60%{transform:scale(.97)}75%{transform:scale(1.03)}to{transform:scale(1)}}.ntd-anim-squeeze{animation:ntd-squeeze 1.4s ease-in-out infinite}@keyframes ntd-squeeze{0%,to{transform:scaleX(1) scaleY(1)}25%{transform:scaleX(.7) scaleY(1.3)}50%{transform:scaleX(1) scaleY(1)}75%{transform:scaleX(1.3) scaleY(.7)}}.ntd-anim-drop{animation:ntd-drop .8s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ntd-drop{0%{opacity:0;transform:translateY(-40px) scale(.8)}60%{opacity:1;transform:translateY(4px) scale(1.05)}75%{transform:translateY(-2px) scale(.98)}90%{transform:translateY(1px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-rise{animation:ntd-rise .7s cubic-bezier(.16,1,.3,1) forwards}@keyframes ntd-rise{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-slide-left{animation:ntd-slide-left .5s ease-out forwards}@keyframes ntd-slide-left{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.ntd-anim-slide-right{animation:ntd-slide-right .5s ease-out forwards}@keyframes ntd-slide-right{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.ntd-anim-slide-down{animation:ntd-slide-down .4s ease-out forwards}@keyframes ntd-slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.ntd-anim-roll-in{animation:ntd-roll-in .8s ease-out forwards}@keyframes ntd-roll-in{0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}to{opacity:1;transform:translateX(0) rotate(0deg)}}.ntd-anim-flash{animation:ntd-flash 1s ease-in-out infinite}@keyframes ntd-flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.ntd-anim-vibrate{animation:ntd-vibrate .3s linear infinite}@keyframes ntd-vibrate{0%{transform:translate(0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-1px,-1px)}80%{transform:translate(1px,1px)}to{transform:translate(0)}}.ntd-anim-wobble{animation:ntd-wobble 1.2s ease-in-out infinite}@keyframes ntd-wobble{0%{transform:translateX(0) rotate(0deg)}15%{transform:translateX(-15%) rotate(-5deg)}30%{transform:translateX(10%) rotate(3deg)}45%{transform:translateX(-10%) rotate(-3deg)}60%{transform:translateX(5%) rotate(2deg)}75%{transform:translateX(-3%) rotate(-1deg)}to{transform:translateX(0) rotate(0deg)}}.ntd-anim-spiral{animation:ntd-spiral 2s linear infinite}@keyframes ntd-spiral{0%{transform:rotate(0deg) scale(.8)}25%{transform:rotate(90deg) scale(1.1)}50%{transform:rotate(180deg) scale(.8)}75%{transform:rotate(270deg) scale(1.1)}to{transform:rotate(1turn) scale(.8)}}.ntd-anim-ping{animation:ntd-ping 1.5s ease-out infinite}@keyframes ntd-ping{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(1.6)}71%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1)}}.ntd-anim-flicker{animation:ntd-flicker 1.5s steps(1) infinite}@keyframes ntd-flicker{0%{opacity:1}4%{opacity:.3}8%{opacity:1}12%{opacity:.6}16%{opacity:1}20%{opacity:.2}22%{opacity:1}50%{opacity:1}52%{opacity:.4}54%{opacity:1}80%{opacity:1}82%{opacity:.3}85%{opacity:1}90%{opacity:.5}92%{opacity:1}}.ntd-anim-tilt{animation:ntd-tilt 2s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-tilt{0%,to{transform:rotate(0deg)}25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}.ntd-anim-breathe{animation:ntd-breathe 4s ease-in-out infinite}@keyframes ntd-breathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}.ntd-anim-drift{animation:ntd-drift 4s ease-in-out infinite}@keyframes ntd-drift{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(5px) rotate(1deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-5px) rotate(-1deg)}}.ntd-anim-orbit{animation:ntd-orbit 3s linear infinite}@keyframes ntd-orbit{0%{transform:translate(0)}25%{transform:translate(4px,-4px)}50%{transform:translateY(-6px)}75%{transform:translate(-4px,-4px)}to{transform:translate(0)}}.ntd-anim-crush{animation:ntd-crush .8s ease-in-out infinite}@keyframes ntd-crush{0%,to{transform:scaleY(1) scaleX(1)}40%{transform:scaleY(.3) scaleX(1.3)}60%{transform:scaleY(1.15) scaleX(.9)}80%{transform:scaleY(.95) scaleX(1.02)}}.ntd-anim-stretch{animation:ntd-stretch 1s ease-in-out infinite}@keyframes ntd-stretch{0%,to{transform:scaleY(1) scaleX(1)}30%{transform:scaleY(1.4) scaleX(.8)}50%{transform:scaleY(.85) scaleX(1.1)}70%{transform:scaleY(1.1) scaleX(.95)}}.ntd-anim-dissolve{animation:ntd-dissolve 2s ease-in-out infinite}@keyframes ntd-dissolve{0%,to{filter:blur(0);opacity:1}50%{filter:blur(4px);opacity:.1}}.ntd-anim-materialize{animation:ntd-materialize .8s ease-out forwards}@keyframes ntd-materialize{0%{filter:blur(8px);opacity:0;transform:scale(.6)}60%{filter:blur(1px);opacity:.8;transform:scale(1.05)}to{filter:blur(0);opacity:1;transform:scale(1)}}.ntd-anim-sway{animation:ntd-sway 2.5s ease-in-out infinite;transform-origin:top center}@keyframes ntd-sway{0%,to{transform:rotate(0deg)}20%{transform:rotate(12deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}}.ntd-anim-tremble{animation:ntd-tremble .15s linear infinite}@keyframes ntd-tremble{0%{transform:translate(0) rotate(0deg)}25%{transform:translate(-.5px,.5px) rotate(-.5deg)}50%{transform:translate(.5px,-.5px) rotate(.5deg)}75%{transform:translate(-.5px,-.5px) rotate(-.5deg)}to{transform:translate(0) rotate(0deg)}}.ntd-anim-rock{animation:ntd-rock 1.5s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-rock{0%,to{transform:rotate(0deg)}25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}.ntd-anim-snap{animation:ntd-snap 1.5s ease-in-out infinite}@keyframes ntd-snap{0%,30%{transform:rotate(0deg)}50%{transform:rotate(190deg)}55%{transform:rotate(175deg)}60%{transform:rotate(182deg)}65%,to{transform:rotate(180deg)}}.ntd-anim-warp{animation:ntd-warp 2s ease-in-out infinite}@keyframes ntd-warp{0%,to{transform:perspective(300px) rotateX(0deg) rotateY(0deg)}25%{transform:perspective(300px) rotateX(10deg) rotateY(10deg)}50%{transform:perspective(300px) rotateX(-5deg) rotateY(-10deg)}75%{transform:perspective(300px) rotateX(8deg) rotateY(-5deg)}}.ntd-anim-glitch{animation:ntd-glitch .8s steps(1) infinite}@keyframes ntd-glitch{0%{transform:translate(0)}5%{transform:translate(-3px,2px) skewX(2deg)}10%{transform:translate(3px,-1px) skewX(-1deg)}15%{transform:translate(0)}40%{transform:translate(0)}42%{transform:translate(2px,1px) skewX(-3deg)}44%{transform:translate(-2px,-2px) skewX(1deg)}46%{transform:translate(0)}70%{transform:translate(0)}72%{transform:translate(-1px,3px) skewX(2deg)}74%{transform:translate(1px,-1px)}76%{transform:translate(0)}to{transform:translate(0)}}.ntd-anim-zoom-pulse{animation:ntd-zoom-pulse 1.5s ease-in-out infinite}@keyframes ntd-zoom-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.ntd-anim-ripple{animation:ntd-ripple 1.6s ease-out infinite}@keyframes ntd-ripple{0%{opacity:1;transform:scale(1)}30%{opacity:.8;transform:scale(1.15)}50%{opacity:1;transform:scale(1)}70%{opacity:.9;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.ntd-anim-implode{animation:ntd-implode 1.2s ease-in-out infinite}@keyframes ntd-implode{0%,to{opacity:1;transform:scale(1)}40%{opacity:.3;transform:scale(.2) rotate(20deg)}60%{opacity:.2;transform:scale(.15) rotate(25deg)}80%{opacity:1;transform:scale(1.1) rotate(0deg)}}.ntd-anim-explode{animation:ntd-explode 1.4s ease-in-out infinite}@keyframes ntd-explode{0%,to{opacity:1;transform:scale(1)}30%{opacity:.6;transform:scale(1.8)}50%{opacity:0;transform:scale(2)}51%{opacity:0;transform:scale(.5)}70%{opacity:.8;transform:scale(1.1)}85%{opacity:1;transform:scale(.95)}}.ntd-anim-rotate-x{animation:ntd-rotate-x 1.5s ease-in-out infinite}@keyframes ntd-rotate-x{0%{transform:perspective(400px) rotateX(0deg)}to{transform:perspective(400px) rotateX(1turn)}}.ntd-anim-morph{animation:ntd-morph 3s ease-in-out infinite}@keyframes ntd-morph{0%,to{border-radius:0;transform:scaleX(1) scaleY(1) rotate(0deg)}20%{transform:scaleX(1.1) scaleY(.9) rotate(2deg)}40%{transform:scaleX(.9) scaleY(1.1) rotate(-1deg)}60%{transform:scaleX(1.05) scaleY(.95) rotate(1deg)}80%{transform:scaleX(.95) scaleY(1.05) rotate(-2deg)}}.ntd-anim-levitate{animation:ntd-levitate 3s ease-in-out infinite}@keyframes ntd-levitate{0%,to{filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));transform:translateY(0)}50%{filter:drop-shadow(0 12px 8px rgba(0,0,0,.1));transform:translateY(-10px)}}.ntd-anim-dash{animation:ntd-dash .8s ease-in-out infinite}@keyframes ntd-dash{0%,to{opacity:1;transform:translateX(0) scaleX(1)}30%{opacity:.8;transform:translateX(-3px) scaleX(.9)}60%{opacity:.6;transform:translateX(15px) scaleX(1.15)}80%{opacity:.9;transform:translateX(2px) scaleX(1)}}.ntd-anim-twist{animation:ntd-twist 1.5s ease-in-out infinite}@keyframes ntd-twist{0%,to{transform:rotate(0deg) scale(1)}25%{transform:rotate(30deg) scale(.9)}50%{transform:rotate(0deg) scale(1.05)}75%{transform:rotate(-30deg) scale(.9)}}.ntd-anim-stomp{animation:ntd-stomp 1s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-stomp{0%,to{transform:translateY(0) scaleY(1) scaleX(1)}20%{transform:translateY(-15px) scaleY(1.1) scaleX(.95)}50%{transform:translateY(0) scaleY(.7) scaleX(1.2)}65%{transform:translateY(-3px) scaleY(1.05) scaleX(.98)}80%{transform:translateY(0) scaleY(.95) scaleX(1.03)}}.ntd-anim-flap{animation:ntd-flap .6s ease-in-out infinite}@keyframes ntd-flap{0%,to{transform:perspective(400px) rotateX(0deg) translateY(0)}50%{transform:perspective(400px) rotateX(25deg) translateY(-5px)}}.ntd-anim-skate{animation:ntd-skate 2s ease-in-out infinite}@keyframes ntd-skate{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(8px) rotate(2deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-8px) rotate(-2deg)}}.ntd-anim-blink{animation:ntd-blink 1.4s steps(1) infinite}@keyframes ntd-blink{0%,49%{opacity:1}50%,99%{opacity:0}}.ntd-anim-reveal{animation:ntd-reveal 1s ease-out forwards}@keyframes ntd-reveal{0%{clip-path:circle(0 at 50% 50%);opacity:.5}to{clip-path:circle(75% at 50% 50%);opacity:1}}.ntd-anim-vortex{animation:ntd-vortex .8s ease-out forwards}@keyframes ntd-vortex{0%{opacity:0;transform:rotate(-540deg) scale(0)}60%{opacity:1;transform:rotate(20deg) scale(1.1)}80%{transform:rotate(-10deg) scale(.95)}to{opacity:1;transform:rotate(0deg) scale(1)}}.ntd-anim-meteor{animation:ntd-meteor .7s ease-out forwards}@keyframes ntd-meteor{0%{opacity:0;transform:translate(30px,-30px) rotate(15deg) scale(.5)}70%{opacity:1;transform:translate(-2px,2px) rotate(-2deg) scale(1.05)}to{opacity:1;transform:translate(0) rotate(0deg) scale(1)}}.ntd-anim-scale-in{animation:ntd-scale-in .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ntd-scale-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.ntd-anim-scale-out{animation:ntd-scale-out .4s ease-in forwards}@keyframes ntd-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.ntd-anim-pendulum{animation:ntd-pendulum 2s ease-in-out infinite;transform-origin:top center}@keyframes ntd-pendulum{0%{transform:rotate(0deg)}25%{transform:rotate(25deg)}50%{transform:rotate(0deg)}75%{transform:rotate(-25deg)}to{transform:rotate(0deg)}}.ntd-anim-surge{animation:ntd-surge 1.5s ease-in-out infinite}@keyframes ntd-surge{0%,to{filter:drop-shadow(0 0 0 currentColor);transform:scale(1)}15%{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);transform:scale(1.2)}30%{filter:drop-shadow(0 0 2px currentColor);transform:scale(.95)}45%{filter:drop-shadow(0 0 6px currentColor);transform:scale(1.1)}60%{filter:drop-shadow(0 0 0 currentColor);transform:scale(1)}}.ntd-anim-radar{animation:ntd-radar 2s linear infinite}@keyframes ntd-radar{0%{opacity:1;transform:rotate(0deg)}50%{opacity:.4}to{opacity:1;transform:rotate(1turn)}}.ntd-anim-typewriter{animation:ntd-typewriter 1s steps(12) forwards}@keyframes ntd-typewriter{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}.ntd-anim-unfold{animation:ntd-unfold .7s ease-out forwards}@keyframes ntd-unfold{0%{opacity:.3;transform:scaleY(.05) scaleX(1.3)}50%{opacity:.9;transform:scaleY(1.1) scaleX(.95)}70%{opacity:1;transform:scaleY(.95) scaleX(1.02)}to{opacity:1;transform:scaleY(1) scaleX(1)}}.ntd-anim-fold{animation:ntd-fold .6s ease-in forwards}@keyframes ntd-fold{0%{opacity:1;transform:scaleY(1) scaleX(1)}to{opacity:0;transform:scaleY(.05) scaleX(1.3)}}.ntd-anim-scatter{animation:ntd-scatter 1.5s ease-in-out infinite}@keyframes ntd-scatter{0%,to{filter:blur(0);opacity:1;transform:scale(1) rotate(0deg)}20%{filter:blur(2px);opacity:.6;transform:scale(1.3) rotate(5deg)}40%{filter:blur(4px);opacity:.2;transform:scale(1.5) rotate(-3deg)}50%{filter:blur(6px);opacity:0;transform:scale(.8) rotate(0deg)}65%{filter:blur(3px);opacity:.3;transform:scale(.6) rotate(-5deg)}80%{filter:blur(1px);opacity:.8;transform:scale(.95) rotate(2deg)}}.ntd-anim-assemble{animation:ntd-assemble 1s ease-out forwards}@keyframes ntd-assemble{0%{filter:blur(8px);opacity:0;transform:scale(2) rotate(15deg)}30%{filter:blur(3px);opacity:.5;transform:scale(.8) rotate(-5deg)}60%{filter:blur(1px);opacity:.9;transform:scale(1.1) rotate(2deg)}80%{filter:blur(0);opacity:1;transform:scale(.97) rotate(-1deg)}to{filter:blur(0);opacity:1;transform:scale(1) rotate(0deg)}}.ntd-anim-neon{animation:ntd-neon 2s ease-in-out infinite}@keyframes ntd-neon{0%,to{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}10%{filter:drop-shadow(0 0 0 currentColor);opacity:.4}11%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}15%{filter:drop-shadow(0 0 0 currentColor);opacity:.3}16%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}50%{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor) drop-shadow(0 0 24px currentColor);opacity:1}}.ntd-anim-earthquake{animation:ntd-earthquake .5s ease-in-out infinite}@keyframes ntd-earthquake{0%,to{transform:translate(0)}10%{transform:translate(-4px,2px) rotate(-1deg)}20%{transform:translate(3px,-3px) rotate(1deg)}30%{transform:translate(-2px,4px) rotate(-2deg)}40%{transform:translate(4px,-1px) rotate(2deg)}50%{transform:translate(-3px,3px) rotate(-1deg)}60%{transform:translate(2px,-4px) rotate(1deg)}70%{transform:translate(-4px,1px) rotate(-2deg)}80%{transform:translate(3px,2px) rotate(2deg)}90%{transform:translate(-1px,-3px) rotate(-1deg)}}.ntd-anim-signature{animation:ntd-signature-enter .65s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}.ntd-anim-signature circle,.ntd-anim-signature ellipse,.ntd-anim-signature line,.ntd-anim-signature path,.ntd-anim-signature polygon,.ntd-anim-signature polyline,.ntd-anim-signature rect{stroke-dasharray:150;stroke-dashoffset:150;animation:ntd-signature-stroke 1.7s ease-out .05s forwards,ntd-signature-fill .55s ease-out 1.05s forwards;filter:drop-shadow(0 0 0 currentColor)}@keyframes ntd-signature-enter{0%{opacity:.08;transform:scale(.05) rotate(-8deg)}60%{opacity:1;transform:scale(1.06) rotate(0deg)}to{opacity:1;transform:scale(1)}}@keyframes ntd-signature-stroke{0%{stroke-dashoffset:150;filter:drop-shadow(0 0 0 currentColor)}65%{stroke-dashoffset:0;filter:drop-shadow(0 0 6px currentColor)}to{stroke-dashoffset:0;filter:drop-shadow(0 0 2px currentColor)}}@keyframes ntd-signature-fill{0%{fill-opacity:.05}to{fill-opacity:1}}.ntd-anim-draw-sequence circle,.ntd-anim-draw-sequence ellipse,.ntd-anim-draw-sequence line,.ntd-anim-draw-sequence path,.ntd-anim-draw-sequence polygon,.ntd-anim-draw-sequence polyline,.ntd-anim-draw-sequence rect{stroke-dasharray:160;stroke-dashoffset:160;fill-opacity:0;animation:ntd-draw-sequence 1.6s ease-out forwards}.ntd-anim-draw-sequence circle:first-child,.ntd-anim-draw-sequence ellipse:first-child,.ntd-anim-draw-sequence line:first-child,.ntd-anim-draw-sequence path:first-child,.ntd-anim-draw-sequence polygon:first-child,.ntd-anim-draw-sequence polyline:first-child,.ntd-anim-draw-sequence rect:first-child{animation-delay:0s}.ntd-anim-draw-sequence circle:nth-child(2),.ntd-anim-draw-sequence ellipse:nth-child(2),.ntd-anim-draw-sequence line:nth-child(2),.ntd-anim-draw-sequence path:nth-child(2),.ntd-anim-draw-sequence polygon:nth-child(2),.ntd-anim-draw-sequence polyline:nth-child(2),.ntd-anim-draw-sequence rect:nth-child(2){animation-delay:.2s}.ntd-anim-draw-sequence circle:nth-child(3),.ntd-anim-draw-sequence ellipse:nth-child(3),.ntd-anim-draw-sequence line:nth-child(3),.ntd-anim-draw-sequence path:nth-child(3),.ntd-anim-draw-sequence polygon:nth-child(3),.ntd-anim-draw-sequence polyline:nth-child(3),.ntd-anim-draw-sequence rect:nth-child(3){animation-delay:.4s}@keyframes ntd-draw-sequence{0%{stroke-dashoffset:160;fill-opacity:0}75%{stroke-dashoffset:0;fill-opacity:.15}to{stroke-dashoffset:0;fill-opacity:1}}.ntd-anim-stroke-order circle,.ntd-anim-stroke-order ellipse,.ntd-anim-stroke-order line,.ntd-anim-stroke-order path,.ntd-anim-stroke-order polygon,.ntd-anim-stroke-order polyline,.ntd-anim-stroke-order rect{stroke-dasharray:220;stroke-dashoffset:220;animation:ntd-stroke-order 2s linear forwards}@keyframes ntd-stroke-order{0%{stroke-dashoffset:220;opacity:.2}30%{opacity:1}to{stroke-dashoffset:0;opacity:1}}.ntd-anim-glow-trace circle,.ntd-anim-glow-trace ellipse,.ntd-anim-glow-trace line,.ntd-anim-glow-trace path,.ntd-anim-glow-trace polygon,.ntd-anim-glow-trace polyline,.ntd-anim-glow-trace rect{stroke-dasharray:180;animation:ntd-glow-trace 2.8s ease-in-out infinite}@keyframes ntd-glow-trace{0%{stroke-dashoffset:180;filter:drop-shadow(0 0 0 currentColor);opacity:.3}45%{stroke-dashoffset:0;filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 14px currentColor);opacity:1}to{stroke-dashoffset:-180;filter:drop-shadow(0 0 2px currentColor);opacity:.5}}.ntd-anim-seal-stamp{animation:ntd-seal-stamp .75s cubic-bezier(.22,1,.36,1) forwards;transform-origin:center}@keyframes ntd-seal-stamp{0%{filter:blur(2px);opacity:0;transform:translateY(-14px) scale(1.25) rotate(-4deg)}45%{filter:blur(0);opacity:1;transform:translateY(2px) scale(.94) rotate(0deg)}70%{transform:translateY(-1px) scale(1.03)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-draw circle,.ntd-anim-draw ellipse,.ntd-anim-draw line,.ntd-anim-draw path,.ntd-anim-draw polygon,.ntd-anim-draw polyline,.ntd-anim-draw rect{stroke-dasharray:120;stroke-dashoffset:120;fill-opacity:0;animation:ntd-draw-stroke 1.2s ease-out forwards,ntd-draw-fill .4s ease-out .8s forwards}@keyframes ntd-draw-stroke{0%{stroke-dashoffset:120}to{stroke-dashoffset:0}}@keyframes ntd-draw-fill{0%{fill-opacity:0}to{fill-opacity:1}}.ntd-anim-draw-from-dot{animation:ntd-draw-dot-enter .45s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}.ntd-anim-draw-from-dot circle,.ntd-anim-draw-from-dot ellipse,.ntd-anim-draw-from-dot line,.ntd-anim-draw-from-dot path,.ntd-anim-draw-from-dot polygon,.ntd-anim-draw-from-dot polyline,.ntd-anim-draw-from-dot rect{stroke-dasharray:140;stroke-dashoffset:140;fill-opacity:0;animation:ntd-draw-dot-stroke 1.35s ease-out .15s forwards,ntd-draw-fill .45s ease-out .95s forwards}@keyframes ntd-draw-dot-enter{0%{opacity:.15;transform:scale(.08)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes ntd-draw-dot-stroke{0%{stroke-dashoffset:140}to{stroke-dashoffset:0}}.ntd-anim-draw-loop circle,.ntd-anim-draw-loop ellipse,.ntd-anim-draw-loop line,.ntd-anim-draw-loop path,.ntd-anim-draw-loop polygon,.ntd-anim-draw-loop polyline,.ntd-anim-draw-loop rect{stroke-dasharray:140;animation:ntd-draw-loop-stroke 2.4s ease-in-out infinite}@keyframes ntd-draw-loop-stroke{0%{stroke-dashoffset:140;opacity:0}25%{stroke-dashoffset:0;opacity:1}60%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:-140;opacity:.2}}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-shape-pop .7s cubic-bezier(.34,1.56,.64,1) .35s forwards;clip-path:circle(0 at 50% 50%);transform-box:fill-box;transform-origin:center}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.5s}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.65s}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.8s}@keyframes ntd-draw-shape-pop{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.5)}60%{fill-opacity:.9;clip-path:circle(75% at 50% 50%);transform:scale(1.08)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);transform:scale(1)}}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-dot-shape-burst .65s cubic-bezier(.34,1.56,.64,1) .25s forwards;clip-path:circle(0 at 50% 50%);transform-box:fill-box;transform-origin:center}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.4s}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.55s}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.7s}@keyframes ntd-draw-dot-shape-burst{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.1)}50%{fill-opacity:.85;clip-path:circle(65% at 50% 50%);transform:scale(1.14)}75%{clip-path:circle(88% at 50% 50%);transform:scale(.97)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);transform:scale(1)}}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-seq-shape-wipe .6s cubic-bezier(.22,1,.36,1) forwards;clip-path:inset(100% 0 0 0);transform-box:fill-box;transform-origin:center bottom}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):first-child{animation-delay:0s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.2s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.4s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.6s}@keyframes ntd-draw-seq-shape-wipe{0%{fill-opacity:0;clip-path:inset(100% 0 0 0);transform:scaleY(.6)}70%{fill-opacity:.9;clip-path:inset(5% 0 0 0);transform:scaleY(1.04)}to{fill-opacity:1;clip-path:inset(0 0 0 0);transform:scaleY(1)}}.ntd-anim-draw-loop :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;animation:ntd-draw-loop-shape-pulse 2.4s ease-in-out infinite}@keyframes ntd-draw-loop-shape-pulse{0%{clip-path:circle(0 at 50% 50%);opacity:0}25%{clip-path:circle(100% at 50% 50%);opacity:1}60%{clip-path:circle(100% at 50% 50%);opacity:1}to{clip-path:circle(0 at 50% 50%);opacity:.2}}.ntd-anim-signature :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-signature-shape-stamp .8s cubic-bezier(.22,1,.36,1) .5s forwards;clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);transform-box:fill-box;transform-origin:center}@keyframes ntd-signature-shape-stamp{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);transform:scale(.35) rotate(-6deg)}55%{fill-opacity:.85;clip-path:circle(70% at 50% 50%);filter:drop-shadow(0 0 8px currentColor);transform:scale(1.08) rotate(0deg)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);filter:drop-shadow(0 0 2px currentColor);transform:scale(1)}}.ntd-anim-stroke-order :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-stroke-order-shape-wipe 1.2s ease-out .3s forwards;clip-path:inset(0 100% 0 0)}@keyframes ntd-stroke-order-shape-wipe{0%{fill-opacity:0;clip-path:inset(0 100% 0 0)}40%{fill-opacity:.7}to{fill-opacity:1;clip-path:inset(0 0 0 0)}}.ntd-anim-glow-trace :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;animation:ntd-glow-trace-shape 2.8s ease-in-out infinite}@keyframes ntd-glow-trace-shape{0%{clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);opacity:.3}45%{clip-path:circle(100% at 50% 50%);filter:drop-shadow(0 0 10px currentColor) drop-shadow(0 0 16px currentColor);opacity:1}to{clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 2px currentColor);opacity:.4}}
|
|
1
|
+
.ntd-picker{--ntd-picker-border:var(--nice-border-color,#3a3a4a);--ntd-picker-radius:var(--nice-radius-lg,10px);--ntd-picker-bg:var(--nice-bg-elevated,#1e1e2a);--ntd-picker-text:var(--nice-text-primary,#f0f0f5);--ntd-picker-accent:var(--nice-color-primary,#6c5ce7);--ntd-picker-accent-hover:var(--nice-color-primary-hover,#5b4cdb);--ntd-picker-accent-alpha:var(--nice-primary-tint-20,rgba(108,92,231,.2));--ntd-picker-muted:var(--nice-text-muted,#606078);--ntd-picker-input-bg:var(--nice-bg-inset,#14141c);display:inline-block;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;position:relative}.ntd-picker-trigger{align-items:center;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:var(--ntd-picker-radius,10px);color:var(--ntd-picker-text,#f0f0f5);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.875rem;gap:8px;min-width:160px;padding:8px 14px;transition:border-color .2s,box-shadow .2s;user-select:none}.ntd-picker-trigger:hover{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-trigger:focus-visible{border-color:var(--ntd-picker-accent,#6c5ce7);box-shadow:0 0 0 3px var(--ntd-picker-accent-alpha,rgba(108,92,231,.25));outline:none}.ntd-picker-trigger-icon{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));border-radius:6px;display:flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.ntd-picker-trigger-label{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ntd-picker-trigger-chevron,.ntd-picker-trigger-placeholder{color:var(--ntd-picker-muted,#606078)}.ntd-picker-trigger-chevron{flex-shrink:0;transition:transform .2s}.ntd-picker.ntd-picker--open .ntd-picker-trigger-chevron{transform:rotate(180deg)}.ntd-picker-dropdown{animation:ntd-picker-appear .2s ease-out;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:var(--ntd-picker-radius,10px);box-shadow:0 12px 40px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.2);display:flex;flex-direction:column;left:0;max-height:460px;overflow:hidden;position:absolute;top:calc(100% + 6px);width:380px;z-index:1000}@keyframes ntd-picker-appear{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-picker-search{border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);flex-shrink:0;padding:10px 12px;position:relative}.ntd-picker-search-icon{color:var(--ntd-picker-muted,#606078);left:22px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.ntd-picker-search input{background:var(--ntd-picker-input-bg,#14141c);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:8px;color:var(--ntd-picker-text,#f0f0f5);font-family:inherit;font-size:.82rem;outline:none;padding:8px 12px 8px 34px;transition:border-color .2s;width:100%}.ntd-picker-search input:focus{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-search input::placeholder{color:var(--ntd-picker-muted,#606078)}.ntd-picker-tabs{border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);display:flex;flex-shrink:0;gap:2px;overflow-x:auto;padding:6px 10px;scrollbar-width:none}.ntd-picker-tabs::-webkit-scrollbar{display:none}.ntd-picker-tab{background:transparent;border:none;border-radius:6px;color:var(--ntd-picker-muted,#606078);cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;letter-spacing:.03em;padding:5px 10px;text-transform:uppercase;transition:all .15s;white-space:nowrap}.ntd-picker-tab:hover{background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));color:var(--ntd-picker-text,#f0f0f5)}.ntd-picker-tab.ntd-picker-tab--active{background:var(--ntd-picker-accent,#6c5ce7);color:#fff}.ntd-picker-grid-wrap{flex:1;overflow-y:auto;padding:8px;scrollbar-color:var(--ntd-picker-border,#3a3a4a) transparent;scrollbar-width:thin}.ntd-picker-grid-wrap::-webkit-scrollbar{width:5px}.ntd-picker-grid-wrap::-webkit-scrollbar-track{background:transparent}.ntd-picker-grid-wrap::-webkit-scrollbar-thumb{background:var(--ntd-picker-border,#3a3a4a);border-radius:3px}.ntd-picker-category-label{color:var(--ntd-picker-muted,#606078);font-size:.68rem;font-weight:600;letter-spacing:.05em;margin-top:4px;padding:6px 4px 4px;text-transform:uppercase}.ntd-picker-category-label:first-child{margin-top:0}.ntd-picker-grid{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}.ntd-picker-cell{align-items:center;aspect-ratio:1;background:transparent;border:none;border-radius:8px;color:var(--ntd-picker-text,#f0f0f5);cursor:pointer;display:flex;justify-content:center;position:relative;transition:all .15s;width:100%}.ntd-picker-cell:hover{background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));transform:scale(1.1)}.ntd-picker-cell.ntd-picker-cell--selected{background:var(--ntd-picker-accent,#6c5ce7);box-shadow:0 2px 8px var(--ntd-picker-accent-alpha,rgba(108,92,231,.25));color:#fff}.ntd-picker-cell:focus-visible{outline:2px solid var(--ntd-picker-accent,#6c5ce7);outline-offset:1px}.ntd-picker-cell:after{background:var(--ntd-picker-text,#f0f0f5);border-radius:5px;bottom:calc(100% + 6px);color:var(--ntd-picker-bg,#1e1e2a);content:attr(data-name);font-size:.65rem;font-weight:500;left:50%;opacity:0;padding:3px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .15s;white-space:nowrap;z-index:10}.ntd-picker-cell:hover:after{opacity:1}.ntd-picker-cell.ntd-picker-cell--draggable{cursor:grab}.ntd-picker-cell.ntd-picker-cell--draggable:active{cursor:grabbing}.ntd-picker-cell.ntd-picker-cell--draggable:hover:before{border:2px dashed var(--ntd-picker-accent,#6c5ce7);border-radius:8px;content:"";inset:0;opacity:.5;pointer-events:none;position:absolute}.ntd-picker-empty{color:var(--ntd-picker-muted,#606078);font-size:.82rem;padding:32px 16px;text-align:center}.ntd-picker-empty-icon{font-size:2rem;margin-bottom:8px;opacity:.4}.ntd-picker-footer{align-items:center;border-top:1px solid var(--ntd-picker-border,#3a3a4a);display:flex;flex-shrink:0;justify-content:space-between;padding:8px 12px}.ntd-picker-count{font-size:.7rem}.ntd-picker-clear,.ntd-picker-count{color:var(--ntd-picker-muted,#606078)}.ntd-picker-clear{background:transparent;border:none;border-radius:5px;cursor:pointer;font-family:inherit;font-size:.72rem;padding:4px 10px;transition:all .15s}.ntd-picker-clear:hover{background:rgba(255,80,80,.12);color:#ff5050}.ntd-picker-multi-badge{border-radius:10px;font-size:.7rem;font-weight:600;height:20px;min-width:20px;padding:0 6px}.ntd-picker-cell-check,.ntd-picker-multi-badge{align-items:center;background:var(--ntd-picker-accent,#6c5ce7);color:#fff;display:flex;justify-content:center}.ntd-picker-cell-check{border-radius:50%;height:16px;pointer-events:none;position:absolute;right:2px;top:2px;width:16px}.ntd-picker-cell.ntd-picker-cell--multi-select{position:relative}.ntd-picker-cell-fav{align-items:center;background:transparent;border:none;border-radius:50%;color:var(--ntd-picker-muted,#606078);cursor:pointer;display:flex;height:16px;justify-content:center;left:2px;opacity:0;padding:0;position:absolute;top:2px;transition:all .15s;width:16px}.ntd-picker-cell-fav.ntd-picker-cell-fav--active,.ntd-picker-cell:hover .ntd-picker-cell-fav{opacity:1}.ntd-picker-cell-fav:hover{color:#feca57;transform:scale(1.2)}.ntd-picker-cell-fav.ntd-picker-cell-fav--active{color:#feca57}.ntd-picker-tab-special{align-items:center;display:inline-flex;gap:4px}.ntd-picker-tab-special svg{height:10px;width:10px}.ntd-picker-tab-count{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.2));border-radius:8px;display:inline-flex;font-size:.65rem;font-weight:600;height:16px;justify-content:center;margin-left:2px;min-width:16px;padding:0 4px}.ntd-picker-tab.ntd-picker-tab--active .ntd-picker-tab-count{background:hsla(0,0%,100%,.2)}.ntd-picker-done{background:var(--ntd-picker-accent,#6c5ce7);border:none;border-radius:5px;color:#fff;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;padding:4px 12px;transition:all .15s}.ntd-picker-done:hover{background:var(--ntd-picker-accent-hover,#5b4cdb);transform:translateY(-1px)}.ntd-picker.ntd-picker--disabled .ntd-picker-trigger{cursor:not-allowed;opacity:.5}.ntd-picker.ntd-picker--multi .ntd-picker-trigger{border-style:dashed}.nice-desktop-icon-exporter{color:var(--nice-text-primary,inherit);display:grid;font-size:var(--nice-font-size-sm,.8125rem);gap:var(--nice-space-4,16px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));min-width:0}.nice-desktop-icon-exporter :where(h3,h4){font-weight:var(--nice-font-weight-semibold,600);margin:0 0 var(--nice-space-2,8px)}.nice-desktop-icon-exporter :where(h3){font-size:var(--nice-font-size-md,.875rem)}.nice-desktop-icon-exporter :where(h4){color:var(--nice-text-secondary,#64748b);font-size:var(--nice-font-size-xs,.75rem)}.nice-desktop-icon-exporter :where(button){background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);color:var(--nice-text-primary,inherit);cursor:pointer;font:inherit;padding:var(--nice-space-1-5,6px) var(--nice-space-3,12px)}.nice-desktop-icon-exporter :where(button:hover:not(:disabled)){background:var(--nice-bg-secondary,#f8fafc)}.nice-desktop-icon-exporter :where(button:disabled){cursor:not-allowed;opacity:.5}.nice-desktop-icon-exporter :where(input[type=text]){background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);box-sizing:border-box;color:var(--nice-text-primary,inherit);font:inherit;padding:var(--nice-space-1-5,6px) var(--nice-space-2,8px)}.nice-desktop-icon-exporter :where(input[type=range]){accent-color:var(--nice-color-primary,#3b82f6)}.nice-desktop-icon-exporter :where(button,input):focus-visible{box-shadow:var(--nice-focus-ring,0 0 0 2px var(--nice-color-primary,#3b82f6));outline:none}.nice-desktop-icon-exporter__config,.nice-desktop-icon-exporter__preview,.nice-desktop-icon-exporter__results{background:var(--nice-bg-elevated,var(--nice-bg-primary,#fff));border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-lg,8px);min-width:0;padding:var(--nice-space-3,12px)}.nice-desktop-icon-exporter__preview-grid{align-items:flex-end;display:flex;flex-wrap:wrap;gap:var(--nice-space-3,12px)}.nice-desktop-icon-exporter__preview-item{align-items:center;color:var(--nice-text-muted,#94a3b8);display:flex;flex-direction:column;font-size:var(--nice-font-size-xs,.75rem);font-variant-numeric:tabular-nums;gap:var(--nice-space-1,4px)}.nice-desktop-icon-exporter__preview-box{align-items:center;border-radius:var(--nice-radius-sm,4px);display:flex;justify-content:center}.nice-desktop-icon-exporter__config{display:flex;flex-direction:column;gap:var(--nice-space-2-5,10px)}.nice-desktop-icon-exporter__config>label{align-items:center;color:var(--nice-text-secondary,#64748b);display:flex;flex-wrap:wrap;font-weight:var(--nice-font-weight-medium,500);gap:var(--nice-space-2,8px)}.nice-desktop-icon-exporter__config>label>input[type=range],.nice-desktop-icon-exporter__config>label>input[type=text]{flex:1 1 140px;min-width:0}.nice-desktop-icon-exporter__platforms,.nice-desktop-icon-exporter__sizes{display:flex;flex-wrap:wrap;gap:var(--nice-space-1-5,6px) var(--nice-space-4,16px)}.nice-desktop-icon-exporter__sizes>h4{flex-basis:100%;margin:0}.nice-desktop-icon-exporter__platforms label,.nice-desktop-icon-exporter__sizes label{align-items:center;cursor:pointer;display:inline-flex;gap:var(--nice-space-1-5,6px)}.nice-desktop-icon-exporter__actions{display:flex;flex-wrap:wrap;gap:var(--nice-space-2,8px);grid-column:1/-1}.nice-desktop-icon-exporter__actions>button:first-child{background:var(--nice-color-primary,#3b82f6);border-color:var(--nice-color-primary,#3b82f6);color:var(--nice-text-on-primary,#fff);font-weight:var(--nice-font-weight-medium,500)}.nice-desktop-icon-exporter__results{grid-column:1/-1}.nice-desktop-icon-exporter__results-grid{display:grid;gap:var(--nice-space-2,8px);grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.nice-desktop-icon-exporter__result-item{align-items:center;border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);display:flex;flex-direction:column;gap:var(--nice-space-1,4px);padding:var(--nice-space-2,8px);text-align:center}.nice-desktop-icon-exporter__result-item>img{max-height:64px;max-width:64px}.nice-desktop-icon-exporter__result-item>span{color:var(--nice-text-secondary,#64748b);font-family:var(--nice-font-mono,ui-monospace,monospace);font-size:var(--nice-font-size-xxs,.625rem);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ntd-icon{display:inline-block;flex-shrink:0;transition:color .2s ease,transform .2s ease;vertical-align:-.125em}.ntd-anim-spin{animation:ntd-spin 1s linear infinite}.ntd-anim-spin-reverse{animation:ntd-spin 1s linear infinite reverse}@keyframes ntd-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ntd-anim-pulse{animation:ntd-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes ntd-pulse{0%,to{opacity:1}50%{opacity:.4}}.ntd-anim-bounce{animation:ntd-bounce 1s ease infinite}@keyframes ntd-bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(0)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:translateY(-25%)}}.ntd-anim-shake{animation:ntd-shake .6s ease-in-out infinite}@keyframes ntd-shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-2px)}20%,40%,60%,80%{transform:translateX(2px)}}.ntd-anim-float{animation:ntd-float 3s ease-in-out infinite}@keyframes ntd-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.ntd-anim-flip{animation:ntd-flip 1.2s ease-in-out infinite}@keyframes ntd-flip{0%{transform:perspective(400px) rotateY(0)}40%{transform:perspective(400px) rotateY(170deg)}50%{transform:perspective(400px) rotateY(190deg)}80%{transform:perspective(400px) rotateY(1turn)}to{transform:perspective(400px) rotateY(1turn)}}.ntd-anim-glow{animation:ntd-glow 2s ease-in-out infinite}@keyframes ntd-glow{0%,to{filter:drop-shadow(0 0 2px currentColor)}50%{filter:drop-shadow(0 0 12px currentColor) drop-shadow(0 0 20px currentColor)}}.ntd-anim-wiggle{animation:ntd-wiggle 1s ease-in-out infinite}@keyframes ntd-wiggle{0%,to{transform:rotate(0deg)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}.ntd-anim-rubber{animation:ntd-rubber 1s ease-in-out infinite}@keyframes ntd-rubber{0%{transform:scale(1)}30%{transform:scaleX(1.25) scaleY(.75)}40%{transform:scaleX(.75) scaleY(1.25)}50%{transform:scaleX(1.15) scaleY(.85)}65%{transform:scaleX(.95) scaleY(1.05)}75%{transform:scaleX(1.05) scaleY(.95)}to{transform:scale(1)}}.ntd-anim-swing{animation:ntd-swing 1s ease-in-out infinite;transform-origin:top center}@keyframes ntd-swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.ntd-anim-tada{animation:ntd-tada 1.2s ease-in-out infinite}@keyframes ntd-tada{0%{transform:scale(1) rotate(0deg)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}to{transform:scale(1) rotate(0deg)}}.ntd-anim-heartbeat{animation:ntd-heartbeat 1.2s ease-in-out infinite}@keyframes ntd-heartbeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.ntd-anim-fade-in{animation:ntd-fade-in .5s ease-out forwards}@keyframes ntd-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.ntd-anim-slide-up{animation:ntd-slide-up .4s ease-out forwards}@keyframes ntd-slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.ntd-anim-jello{animation:ntd-jello 1s ease-in-out infinite}@keyframes ntd-jello{0%,to{transform:skewX(0deg) skewY(0deg)}11.1%{transform:skewX(-12.5deg) skewY(-12.5deg)}22.2%{transform:skewX(6.25deg) skewY(6.25deg)}33.3%{transform:skewX(-3.125deg) skewY(-3.125deg)}44.4%{transform:skewX(1.5625deg) skewY(1.5625deg)}55.5%{transform:skewX(-.78125deg) skewY(-.78125deg)}66.6%{transform:skewX(.390625deg) skewY(.390625deg)}77.7%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.ntd-anim-pop{animation:ntd-pop .6s ease-out infinite}@keyframes ntd-pop{0%{transform:scale(1)}15%{transform:scale(1.35)}30%{transform:scale(.9)}45%{transform:scale(1.1)}60%{transform:scale(.97)}75%{transform:scale(1.03)}to{transform:scale(1)}}.ntd-anim-squeeze{animation:ntd-squeeze 1.4s ease-in-out infinite}@keyframes ntd-squeeze{0%,to{transform:scaleX(1) scaleY(1)}25%{transform:scaleX(.7) scaleY(1.3)}50%{transform:scaleX(1) scaleY(1)}75%{transform:scaleX(1.3) scaleY(.7)}}.ntd-anim-drop{animation:ntd-drop .8s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ntd-drop{0%{opacity:0;transform:translateY(-40px) scale(.8)}60%{opacity:1;transform:translateY(4px) scale(1.05)}75%{transform:translateY(-2px) scale(.98)}90%{transform:translateY(1px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-rise{animation:ntd-rise .7s cubic-bezier(.16,1,.3,1) forwards}@keyframes ntd-rise{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-slide-left{animation:ntd-slide-left .5s ease-out forwards}@keyframes ntd-slide-left{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.ntd-anim-slide-right{animation:ntd-slide-right .5s ease-out forwards}@keyframes ntd-slide-right{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.ntd-anim-slide-down{animation:ntd-slide-down .4s ease-out forwards}@keyframes ntd-slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.ntd-anim-roll-in{animation:ntd-roll-in .8s ease-out forwards}@keyframes ntd-roll-in{0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}to{opacity:1;transform:translateX(0) rotate(0deg)}}.ntd-anim-flash{animation:ntd-flash 1s ease-in-out infinite}@keyframes ntd-flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.ntd-anim-vibrate{animation:ntd-vibrate .3s linear infinite}@keyframes ntd-vibrate{0%{transform:translate(0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-1px,-1px)}80%{transform:translate(1px,1px)}to{transform:translate(0)}}.ntd-anim-wobble{animation:ntd-wobble 1.2s ease-in-out infinite}@keyframes ntd-wobble{0%{transform:translateX(0) rotate(0deg)}15%{transform:translateX(-15%) rotate(-5deg)}30%{transform:translateX(10%) rotate(3deg)}45%{transform:translateX(-10%) rotate(-3deg)}60%{transform:translateX(5%) rotate(2deg)}75%{transform:translateX(-3%) rotate(-1deg)}to{transform:translateX(0) rotate(0deg)}}.ntd-anim-spiral{animation:ntd-spiral 2s linear infinite}@keyframes ntd-spiral{0%{transform:rotate(0deg) scale(.8)}25%{transform:rotate(90deg) scale(1.1)}50%{transform:rotate(180deg) scale(.8)}75%{transform:rotate(270deg) scale(1.1)}to{transform:rotate(1turn) scale(.8)}}.ntd-anim-ping{animation:ntd-ping 1.5s ease-out infinite}@keyframes ntd-ping{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(1.6)}71%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1)}}.ntd-anim-flicker{animation:ntd-flicker 1.5s steps(1) infinite}@keyframes ntd-flicker{0%{opacity:1}4%{opacity:.3}8%{opacity:1}12%{opacity:.6}16%{opacity:1}20%{opacity:.2}22%{opacity:1}50%{opacity:1}52%{opacity:.4}54%{opacity:1}80%{opacity:1}82%{opacity:.3}85%{opacity:1}90%{opacity:.5}92%{opacity:1}}.ntd-anim-tilt{animation:ntd-tilt 2s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-tilt{0%,to{transform:rotate(0deg)}25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}.ntd-anim-breathe{animation:ntd-breathe 4s ease-in-out infinite}@keyframes ntd-breathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}.ntd-anim-drift{animation:ntd-drift 4s ease-in-out infinite}@keyframes ntd-drift{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(5px) rotate(1deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-5px) rotate(-1deg)}}.ntd-anim-orbit{animation:ntd-orbit 3s linear infinite}@keyframes ntd-orbit{0%{transform:translate(0)}25%{transform:translate(4px,-4px)}50%{transform:translateY(-6px)}75%{transform:translate(-4px,-4px)}to{transform:translate(0)}}.ntd-anim-crush{animation:ntd-crush .8s ease-in-out infinite}@keyframes ntd-crush{0%,to{transform:scaleY(1) scaleX(1)}40%{transform:scaleY(.3) scaleX(1.3)}60%{transform:scaleY(1.15) scaleX(.9)}80%{transform:scaleY(.95) scaleX(1.02)}}.ntd-anim-stretch{animation:ntd-stretch 1s ease-in-out infinite}@keyframes ntd-stretch{0%,to{transform:scaleY(1) scaleX(1)}30%{transform:scaleY(1.4) scaleX(.8)}50%{transform:scaleY(.85) scaleX(1.1)}70%{transform:scaleY(1.1) scaleX(.95)}}.ntd-anim-dissolve{animation:ntd-dissolve 2s ease-in-out infinite}@keyframes ntd-dissolve{0%,to{filter:blur(0);opacity:1}50%{filter:blur(4px);opacity:.1}}.ntd-anim-materialize{animation:ntd-materialize .8s ease-out forwards}@keyframes ntd-materialize{0%{filter:blur(8px);opacity:0;transform:scale(.6)}60%{filter:blur(1px);opacity:.8;transform:scale(1.05)}to{filter:blur(0);opacity:1;transform:scale(1)}}.ntd-anim-sway{animation:ntd-sway 2.5s ease-in-out infinite;transform-origin:top center}@keyframes ntd-sway{0%,to{transform:rotate(0deg)}20%{transform:rotate(12deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}}.ntd-anim-tremble{animation:ntd-tremble .15s linear infinite}@keyframes ntd-tremble{0%{transform:translate(0) rotate(0deg)}25%{transform:translate(-.5px,.5px) rotate(-.5deg)}50%{transform:translate(.5px,-.5px) rotate(.5deg)}75%{transform:translate(-.5px,-.5px) rotate(-.5deg)}to{transform:translate(0) rotate(0deg)}}.ntd-anim-rock{animation:ntd-rock 1.5s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-rock{0%,to{transform:rotate(0deg)}25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}.ntd-anim-snap{animation:ntd-snap 1.5s ease-in-out infinite}@keyframes ntd-snap{0%,30%{transform:rotate(0deg)}50%{transform:rotate(190deg)}55%{transform:rotate(175deg)}60%{transform:rotate(182deg)}65%,to{transform:rotate(180deg)}}.ntd-anim-warp{animation:ntd-warp 2s ease-in-out infinite}@keyframes ntd-warp{0%,to{transform:perspective(300px) rotateX(0deg) rotateY(0deg)}25%{transform:perspective(300px) rotateX(10deg) rotateY(10deg)}50%{transform:perspective(300px) rotateX(-5deg) rotateY(-10deg)}75%{transform:perspective(300px) rotateX(8deg) rotateY(-5deg)}}.ntd-anim-glitch{animation:ntd-glitch .8s steps(1) infinite}@keyframes ntd-glitch{0%{transform:translate(0)}5%{transform:translate(-3px,2px) skewX(2deg)}10%{transform:translate(3px,-1px) skewX(-1deg)}15%{transform:translate(0)}40%{transform:translate(0)}42%{transform:translate(2px,1px) skewX(-3deg)}44%{transform:translate(-2px,-2px) skewX(1deg)}46%{transform:translate(0)}70%{transform:translate(0)}72%{transform:translate(-1px,3px) skewX(2deg)}74%{transform:translate(1px,-1px)}76%{transform:translate(0)}to{transform:translate(0)}}.ntd-anim-zoom-pulse{animation:ntd-zoom-pulse 1.5s ease-in-out infinite}@keyframes ntd-zoom-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.ntd-anim-ripple{animation:ntd-ripple 1.6s ease-out infinite}@keyframes ntd-ripple{0%{opacity:1;transform:scale(1)}30%{opacity:.8;transform:scale(1.15)}50%{opacity:1;transform:scale(1)}70%{opacity:.9;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.ntd-anim-implode{animation:ntd-implode 1.2s ease-in-out infinite}@keyframes ntd-implode{0%,to{opacity:1;transform:scale(1)}40%{opacity:.3;transform:scale(.2) rotate(20deg)}60%{opacity:.2;transform:scale(.15) rotate(25deg)}80%{opacity:1;transform:scale(1.1) rotate(0deg)}}.ntd-anim-explode{animation:ntd-explode 1.4s ease-in-out infinite}@keyframes ntd-explode{0%,to{opacity:1;transform:scale(1)}30%{opacity:.6;transform:scale(1.8)}50%{opacity:0;transform:scale(2)}51%{opacity:0;transform:scale(.5)}70%{opacity:.8;transform:scale(1.1)}85%{opacity:1;transform:scale(.95)}}.ntd-anim-rotate-x{animation:ntd-rotate-x 1.5s ease-in-out infinite}@keyframes ntd-rotate-x{0%{transform:perspective(400px) rotateX(0deg)}to{transform:perspective(400px) rotateX(1turn)}}.ntd-anim-morph{animation:ntd-morph 3s ease-in-out infinite}@keyframes ntd-morph{0%,to{border-radius:0;transform:scaleX(1) scaleY(1) rotate(0deg)}20%{transform:scaleX(1.1) scaleY(.9) rotate(2deg)}40%{transform:scaleX(.9) scaleY(1.1) rotate(-1deg)}60%{transform:scaleX(1.05) scaleY(.95) rotate(1deg)}80%{transform:scaleX(.95) scaleY(1.05) rotate(-2deg)}}.ntd-anim-levitate{animation:ntd-levitate 3s ease-in-out infinite}@keyframes ntd-levitate{0%,to{filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));transform:translateY(0)}50%{filter:drop-shadow(0 12px 8px rgba(0,0,0,.1));transform:translateY(-10px)}}.ntd-anim-dash{animation:ntd-dash .8s ease-in-out infinite}@keyframes ntd-dash{0%,to{opacity:1;transform:translateX(0) scaleX(1)}30%{opacity:.8;transform:translateX(-3px) scaleX(.9)}60%{opacity:.6;transform:translateX(15px) scaleX(1.15)}80%{opacity:.9;transform:translateX(2px) scaleX(1)}}.ntd-anim-twist{animation:ntd-twist 1.5s ease-in-out infinite}@keyframes ntd-twist{0%,to{transform:rotate(0deg) scale(1)}25%{transform:rotate(30deg) scale(.9)}50%{transform:rotate(0deg) scale(1.05)}75%{transform:rotate(-30deg) scale(.9)}}.ntd-anim-stomp{animation:ntd-stomp 1s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-stomp{0%,to{transform:translateY(0) scaleY(1) scaleX(1)}20%{transform:translateY(-15px) scaleY(1.1) scaleX(.95)}50%{transform:translateY(0) scaleY(.7) scaleX(1.2)}65%{transform:translateY(-3px) scaleY(1.05) scaleX(.98)}80%{transform:translateY(0) scaleY(.95) scaleX(1.03)}}.ntd-anim-flap{animation:ntd-flap .6s ease-in-out infinite}@keyframes ntd-flap{0%,to{transform:perspective(400px) rotateX(0deg) translateY(0)}50%{transform:perspective(400px) rotateX(25deg) translateY(-5px)}}.ntd-anim-skate{animation:ntd-skate 2s ease-in-out infinite}@keyframes ntd-skate{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(8px) rotate(2deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-8px) rotate(-2deg)}}.ntd-anim-blink{animation:ntd-blink 1.4s steps(1) infinite}@keyframes ntd-blink{0%,49%{opacity:1}50%,99%{opacity:0}}.ntd-anim-reveal{animation:ntd-reveal 1s ease-out forwards}@keyframes ntd-reveal{0%{clip-path:circle(0 at 50% 50%);opacity:.5}to{clip-path:circle(75% at 50% 50%);opacity:1}}.ntd-anim-vortex{animation:ntd-vortex .8s ease-out forwards}@keyframes ntd-vortex{0%{opacity:0;transform:rotate(-540deg) scale(0)}60%{opacity:1;transform:rotate(20deg) scale(1.1)}80%{transform:rotate(-10deg) scale(.95)}to{opacity:1;transform:rotate(0deg) scale(1)}}.ntd-anim-meteor{animation:ntd-meteor .7s ease-out forwards}@keyframes ntd-meteor{0%{opacity:0;transform:translate(30px,-30px) rotate(15deg) scale(.5)}70%{opacity:1;transform:translate(-2px,2px) rotate(-2deg) scale(1.05)}to{opacity:1;transform:translate(0) rotate(0deg) scale(1)}}.ntd-anim-scale-in{animation:ntd-scale-in .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ntd-scale-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.ntd-anim-scale-out{animation:ntd-scale-out .4s ease-in forwards}@keyframes ntd-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.ntd-anim-pendulum{animation:ntd-pendulum 2s ease-in-out infinite;transform-origin:top center}@keyframes ntd-pendulum{0%{transform:rotate(0deg)}25%{transform:rotate(25deg)}50%{transform:rotate(0deg)}75%{transform:rotate(-25deg)}to{transform:rotate(0deg)}}.ntd-anim-surge{animation:ntd-surge 1.5s ease-in-out infinite}@keyframes ntd-surge{0%,to{filter:drop-shadow(0 0 0 currentColor);transform:scale(1)}15%{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);transform:scale(1.2)}30%{filter:drop-shadow(0 0 2px currentColor);transform:scale(.95)}45%{filter:drop-shadow(0 0 6px currentColor);transform:scale(1.1)}60%{filter:drop-shadow(0 0 0 currentColor);transform:scale(1)}}.ntd-anim-radar{animation:ntd-radar 2s linear infinite}@keyframes ntd-radar{0%{opacity:1;transform:rotate(0deg)}50%{opacity:.4}to{opacity:1;transform:rotate(1turn)}}.ntd-anim-typewriter{animation:ntd-typewriter 1s steps(12) forwards}@keyframes ntd-typewriter{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}.ntd-anim-unfold{animation:ntd-unfold .7s ease-out forwards}@keyframes ntd-unfold{0%{opacity:.3;transform:scaleY(.05) scaleX(1.3)}50%{opacity:.9;transform:scaleY(1.1) scaleX(.95)}70%{opacity:1;transform:scaleY(.95) scaleX(1.02)}to{opacity:1;transform:scaleY(1) scaleX(1)}}.ntd-anim-fold{animation:ntd-fold .6s ease-in forwards}@keyframes ntd-fold{0%{opacity:1;transform:scaleY(1) scaleX(1)}to{opacity:0;transform:scaleY(.05) scaleX(1.3)}}.ntd-anim-scatter{animation:ntd-scatter 1.5s ease-in-out infinite}@keyframes ntd-scatter{0%,to{filter:blur(0);opacity:1;transform:scale(1) rotate(0deg)}20%{filter:blur(2px);opacity:.6;transform:scale(1.3) rotate(5deg)}40%{filter:blur(4px);opacity:.2;transform:scale(1.5) rotate(-3deg)}50%{filter:blur(6px);opacity:0;transform:scale(.8) rotate(0deg)}65%{filter:blur(3px);opacity:.3;transform:scale(.6) rotate(-5deg)}80%{filter:blur(1px);opacity:.8;transform:scale(.95) rotate(2deg)}}.ntd-anim-assemble{animation:ntd-assemble 1s ease-out forwards}@keyframes ntd-assemble{0%{filter:blur(8px);opacity:0;transform:scale(2) rotate(15deg)}30%{filter:blur(3px);opacity:.5;transform:scale(.8) rotate(-5deg)}60%{filter:blur(1px);opacity:.9;transform:scale(1.1) rotate(2deg)}80%{filter:blur(0);opacity:1;transform:scale(.97) rotate(-1deg)}to{filter:blur(0);opacity:1;transform:scale(1) rotate(0deg)}}.ntd-anim-neon{animation:ntd-neon 2s ease-in-out infinite}@keyframes ntd-neon{0%,to{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}10%{filter:drop-shadow(0 0 0 currentColor);opacity:.4}11%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}15%{filter:drop-shadow(0 0 0 currentColor);opacity:.3}16%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}50%{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor) drop-shadow(0 0 24px currentColor);opacity:1}}.ntd-anim-earthquake{animation:ntd-earthquake .5s ease-in-out infinite}@keyframes ntd-earthquake{0%,to{transform:translate(0)}10%{transform:translate(-4px,2px) rotate(-1deg)}20%{transform:translate(3px,-3px) rotate(1deg)}30%{transform:translate(-2px,4px) rotate(-2deg)}40%{transform:translate(4px,-1px) rotate(2deg)}50%{transform:translate(-3px,3px) rotate(-1deg)}60%{transform:translate(2px,-4px) rotate(1deg)}70%{transform:translate(-4px,1px) rotate(-2deg)}80%{transform:translate(3px,2px) rotate(2deg)}90%{transform:translate(-1px,-3px) rotate(-1deg)}}.ntd-anim-signature{animation:ntd-signature-enter .65s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}.ntd-anim-signature circle,.ntd-anim-signature ellipse,.ntd-anim-signature line,.ntd-anim-signature path,.ntd-anim-signature polygon,.ntd-anim-signature polyline,.ntd-anim-signature rect{stroke-dasharray:150;stroke-dashoffset:150;animation:ntd-signature-stroke 1.7s ease-out .05s forwards,ntd-signature-fill .55s ease-out 1.05s forwards;filter:drop-shadow(0 0 0 currentColor)}@keyframes ntd-signature-enter{0%{opacity:.08;transform:scale(.05) rotate(-8deg)}60%{opacity:1;transform:scale(1.06) rotate(0deg)}to{opacity:1;transform:scale(1)}}@keyframes ntd-signature-stroke{0%{stroke-dashoffset:150;filter:drop-shadow(0 0 0 currentColor)}65%{stroke-dashoffset:0;filter:drop-shadow(0 0 6px currentColor)}to{stroke-dashoffset:0;filter:drop-shadow(0 0 2px currentColor)}}@keyframes ntd-signature-fill{0%{fill-opacity:.05}to{fill-opacity:1}}.ntd-anim-draw-sequence circle,.ntd-anim-draw-sequence ellipse,.ntd-anim-draw-sequence line,.ntd-anim-draw-sequence path,.ntd-anim-draw-sequence polygon,.ntd-anim-draw-sequence polyline,.ntd-anim-draw-sequence rect{stroke-dasharray:160;stroke-dashoffset:160;fill-opacity:0;animation:ntd-draw-sequence 1.6s ease-out forwards}.ntd-anim-draw-sequence circle:first-child,.ntd-anim-draw-sequence ellipse:first-child,.ntd-anim-draw-sequence line:first-child,.ntd-anim-draw-sequence path:first-child,.ntd-anim-draw-sequence polygon:first-child,.ntd-anim-draw-sequence polyline:first-child,.ntd-anim-draw-sequence rect:first-child{animation-delay:0s}.ntd-anim-draw-sequence circle:nth-child(2),.ntd-anim-draw-sequence ellipse:nth-child(2),.ntd-anim-draw-sequence line:nth-child(2),.ntd-anim-draw-sequence path:nth-child(2),.ntd-anim-draw-sequence polygon:nth-child(2),.ntd-anim-draw-sequence polyline:nth-child(2),.ntd-anim-draw-sequence rect:nth-child(2){animation-delay:.2s}.ntd-anim-draw-sequence circle:nth-child(3),.ntd-anim-draw-sequence ellipse:nth-child(3),.ntd-anim-draw-sequence line:nth-child(3),.ntd-anim-draw-sequence path:nth-child(3),.ntd-anim-draw-sequence polygon:nth-child(3),.ntd-anim-draw-sequence polyline:nth-child(3),.ntd-anim-draw-sequence rect:nth-child(3){animation-delay:.4s}@keyframes ntd-draw-sequence{0%{stroke-dashoffset:160;fill-opacity:0}75%{stroke-dashoffset:0;fill-opacity:.15}to{stroke-dashoffset:0;fill-opacity:1}}.ntd-anim-stroke-order circle,.ntd-anim-stroke-order ellipse,.ntd-anim-stroke-order line,.ntd-anim-stroke-order path,.ntd-anim-stroke-order polygon,.ntd-anim-stroke-order polyline,.ntd-anim-stroke-order rect{stroke-dasharray:220;stroke-dashoffset:220;animation:ntd-stroke-order 2s linear forwards}@keyframes ntd-stroke-order{0%{stroke-dashoffset:220;opacity:.2}30%{opacity:1}to{stroke-dashoffset:0;opacity:1}}.ntd-anim-glow-trace circle,.ntd-anim-glow-trace ellipse,.ntd-anim-glow-trace line,.ntd-anim-glow-trace path,.ntd-anim-glow-trace polygon,.ntd-anim-glow-trace polyline,.ntd-anim-glow-trace rect{stroke-dasharray:180;animation:ntd-glow-trace 2.8s ease-in-out infinite}@keyframes ntd-glow-trace{0%{stroke-dashoffset:180;filter:drop-shadow(0 0 0 currentColor);opacity:.3}45%{stroke-dashoffset:0;filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 14px currentColor);opacity:1}to{stroke-dashoffset:-180;filter:drop-shadow(0 0 2px currentColor);opacity:.5}}.ntd-anim-seal-stamp{animation:ntd-seal-stamp .75s cubic-bezier(.22,1,.36,1) forwards;transform-origin:center}@keyframes ntd-seal-stamp{0%{filter:blur(2px);opacity:0;transform:translateY(-14px) scale(1.25) rotate(-4deg)}45%{filter:blur(0);opacity:1;transform:translateY(2px) scale(.94) rotate(0deg)}70%{transform:translateY(-1px) scale(1.03)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-draw circle,.ntd-anim-draw ellipse,.ntd-anim-draw line,.ntd-anim-draw path,.ntd-anim-draw polygon,.ntd-anim-draw polyline,.ntd-anim-draw rect{stroke-dasharray:120;stroke-dashoffset:120;fill-opacity:0;animation:ntd-draw-stroke 1.2s ease-out forwards,ntd-draw-fill .4s ease-out .8s forwards}@keyframes ntd-draw-stroke{0%{stroke-dashoffset:120}to{stroke-dashoffset:0}}@keyframes ntd-draw-fill{0%{fill-opacity:0}to{fill-opacity:1}}.ntd-anim-draw-from-dot{animation:ntd-draw-dot-enter .45s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}.ntd-anim-draw-from-dot circle,.ntd-anim-draw-from-dot ellipse,.ntd-anim-draw-from-dot line,.ntd-anim-draw-from-dot path,.ntd-anim-draw-from-dot polygon,.ntd-anim-draw-from-dot polyline,.ntd-anim-draw-from-dot rect{stroke-dasharray:140;stroke-dashoffset:140;fill-opacity:0;animation:ntd-draw-dot-stroke 1.35s ease-out .15s forwards,ntd-draw-fill .45s ease-out .95s forwards}@keyframes ntd-draw-dot-enter{0%{opacity:.15;transform:scale(.08)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes ntd-draw-dot-stroke{0%{stroke-dashoffset:140}to{stroke-dashoffset:0}}.ntd-anim-draw-loop circle,.ntd-anim-draw-loop ellipse,.ntd-anim-draw-loop line,.ntd-anim-draw-loop path,.ntd-anim-draw-loop polygon,.ntd-anim-draw-loop polyline,.ntd-anim-draw-loop rect{stroke-dasharray:140;animation:ntd-draw-loop-stroke 2.4s ease-in-out infinite}@keyframes ntd-draw-loop-stroke{0%{stroke-dashoffset:140;opacity:0}25%{stroke-dashoffset:0;opacity:1}60%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:-140;opacity:.2}}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-shape-pop .7s cubic-bezier(.34,1.56,.64,1) .35s forwards;clip-path:circle(0 at 50% 50%);transform-box:fill-box;transform-origin:center}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.5s}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.65s}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.8s}@keyframes ntd-draw-shape-pop{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.5)}60%{fill-opacity:.9;clip-path:circle(75% at 50% 50%);transform:scale(1.08)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);transform:scale(1)}}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-dot-shape-burst .65s cubic-bezier(.34,1.56,.64,1) .25s forwards;clip-path:circle(0 at 50% 50%);transform-box:fill-box;transform-origin:center}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.4s}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.55s}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.7s}@keyframes ntd-draw-dot-shape-burst{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.1)}50%{fill-opacity:.85;clip-path:circle(65% at 50% 50%);transform:scale(1.14)}75%{clip-path:circle(88% at 50% 50%);transform:scale(.97)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);transform:scale(1)}}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-seq-shape-wipe .6s cubic-bezier(.22,1,.36,1) forwards;clip-path:inset(100% 0 0 0);transform-box:fill-box;transform-origin:center bottom}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):first-child{animation-delay:0s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.2s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.4s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.6s}@keyframes ntd-draw-seq-shape-wipe{0%{fill-opacity:0;clip-path:inset(100% 0 0 0);transform:scaleY(.6)}70%{fill-opacity:.9;clip-path:inset(5% 0 0 0);transform:scaleY(1.04)}to{fill-opacity:1;clip-path:inset(0 0 0 0);transform:scaleY(1)}}.ntd-anim-draw-loop :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;animation:ntd-draw-loop-shape-pulse 2.4s ease-in-out infinite}@keyframes ntd-draw-loop-shape-pulse{0%{clip-path:circle(0 at 50% 50%);opacity:0}25%{clip-path:circle(100% at 50% 50%);opacity:1}60%{clip-path:circle(100% at 50% 50%);opacity:1}to{clip-path:circle(0 at 50% 50%);opacity:.2}}.ntd-anim-signature :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-signature-shape-stamp .8s cubic-bezier(.22,1,.36,1) .5s forwards;clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);transform-box:fill-box;transform-origin:center}@keyframes ntd-signature-shape-stamp{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);transform:scale(.35) rotate(-6deg)}55%{fill-opacity:.85;clip-path:circle(70% at 50% 50%);filter:drop-shadow(0 0 8px currentColor);transform:scale(1.08) rotate(0deg)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);filter:drop-shadow(0 0 2px currentColor);transform:scale(1)}}.ntd-anim-stroke-order :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-stroke-order-shape-wipe 1.2s ease-out .3s forwards;clip-path:inset(0 100% 0 0)}@keyframes ntd-stroke-order-shape-wipe{0%{fill-opacity:0;clip-path:inset(0 100% 0 0)}40%{fill-opacity:.7}to{fill-opacity:1;clip-path:inset(0 0 0 0)}}.ntd-anim-glow-trace :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;animation:ntd-glow-trace-shape 2.8s ease-in-out infinite}@keyframes ntd-glow-trace-shape{0%{clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);opacity:.3}45%{clip-path:circle(100% at 50% 50%);filter:drop-shadow(0 0 10px currentColor) drop-shadow(0 0 16px currentColor);opacity:1}to{clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 2px currentColor);opacity:.4}}
|
|
@@ -174,7 +174,8 @@ function drawParticle(ctx, p) {
|
|
|
174
174
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
175
175
|
COMPONENT
|
|
176
176
|
───────────────────────────────────────────────────────────────────────────── */
|
|
177
|
-
const NtdParticleIcon =
|
|
177
|
+
const NtdParticleIcon = /* @__PURE__ */ Object.assign(
|
|
178
|
+
/* @__PURE__ */ React.forwardRef(({ icon: Icon, particle, trigger = 'click', active, size = 'md', iconProps, className, style, onEffectEnd, }, ref) => {
|
|
178
179
|
var _a;
|
|
179
180
|
const containerRef = React.useRef(null);
|
|
180
181
|
const canvasRef = React.useRef(null);
|
|
@@ -263,7 +264,14 @@ const NtdParticleIcon = React.forwardRef(({ icon: Icon, particle, trigger = 'cli
|
|
|
263
264
|
height: resolvedSize,
|
|
264
265
|
cursor: trigger === 'click' || trigger === 'hover' ? 'pointer' : undefined,
|
|
265
266
|
...style,
|
|
266
|
-
}, onClick: trigger === 'click' ? emit : undefined,
|
|
267
|
+
}, onClick: trigger === 'click' ? emit : undefined, onKeyDown: trigger === 'click'
|
|
268
|
+
? (e) => {
|
|
269
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
270
|
+
e.preventDefault();
|
|
271
|
+
emit();
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
: undefined, role: trigger === 'click' ? 'button' : undefined, tabIndex: trigger === 'click' ? 0 : undefined, onMouseEnter: trigger === 'hover' ? emit : undefined, children: [jsxRuntime.jsx(Icon, { size: size, ...iconProps }), jsxRuntime.jsx("canvas", { ref: canvasRef, width: canvasSize, height: canvasSize, style: {
|
|
267
275
|
position: 'absolute',
|
|
268
276
|
top: -canvasOffset,
|
|
269
277
|
left: -canvasOffset,
|
|
@@ -271,7 +279,6 @@ const NtdParticleIcon = React.forwardRef(({ icon: Icon, particle, trigger = 'cli
|
|
|
271
279
|
height: canvasSize,
|
|
272
280
|
pointerEvents: 'none',
|
|
273
281
|
} })] }));
|
|
274
|
-
});
|
|
275
|
-
NtdParticleIcon.displayName = 'NtdParticleIcon';
|
|
282
|
+
}), { displayName: 'NtdParticleIcon' });
|
|
276
283
|
|
|
277
284
|
exports.NtdParticleIcon = NtdParticleIcon;
|
package/dist/cjs/resolver.js
CHANGED
|
@@ -70,6 +70,7 @@ const NAME_MAP = {
|
|
|
70
70
|
'zoom-out': 'NtdZoomOut',
|
|
71
71
|
undo: 'NtdUndo',
|
|
72
72
|
redo: 'NtdRedo',
|
|
73
|
+
reply: 'NtdReply',
|
|
73
74
|
link: 'NtdLink',
|
|
74
75
|
login: 'NtdLogIn',
|
|
75
76
|
logout: 'NtdLogOut',
|
|
@@ -89,6 +90,7 @@ const NAME_MAP = {
|
|
|
89
90
|
image: 'NtdImage',
|
|
90
91
|
'link-2': 'NtdLink',
|
|
91
92
|
mail: 'NtdMail',
|
|
93
|
+
inbox: 'NtdInbox',
|
|
92
94
|
phone: 'NtdPhone',
|
|
93
95
|
user: 'NtdUser',
|
|
94
96
|
users: 'NtdUsers',
|
|
@@ -98,6 +100,7 @@ const NAME_MAP = {
|
|
|
98
100
|
bell: 'NtdBell',
|
|
99
101
|
grip: 'NtdGrid',
|
|
100
102
|
tag: 'NtdTag',
|
|
103
|
+
backspace: 'NtdBackspace',
|
|
101
104
|
bookmark: 'NtdBookmark',
|
|
102
105
|
flag: 'NtdFlag',
|
|
103
106
|
globe: 'NtdGlobe',
|
|
@@ -115,6 +118,7 @@ const NAME_MAP = {
|
|
|
115
118
|
camera: 'NtdCamera',
|
|
116
119
|
video: 'NtdVideo',
|
|
117
120
|
microphone: 'NtdMicrophone',
|
|
121
|
+
'microphone-off': 'NtdMicrophoneOff',
|
|
118
122
|
music: 'NtdMusic',
|
|
119
123
|
palette: 'NtdPalette',
|
|
120
124
|
// Misc
|
|
@@ -630,14 +630,10 @@ const NiceDesktopIconExporter = ({ icon, initialConfig, onExport, className = ''
|
|
|
630
630
|
onExport === null || onExport === void 0 ? void 0 : onExport(icons);
|
|
631
631
|
};
|
|
632
632
|
const IconComponent = icon;
|
|
633
|
-
return (jsxs("div", { className: `nice-desktop-icon-exporter ${className}`, children: [jsxs("div", { className: "nice-desktop-icon-exporter__preview", children: [jsx("h3", { children: "Preview" }), jsx("div", { className: "nice-desktop-icon-exporter__preview-grid", children: [16, 32, 48, 64, 128, 256].map((size) => (jsxs("div", { className: "nice-desktop-icon-exporter__preview-item", children: [jsx("div", { style: {
|
|
633
|
+
return (jsxs("div", { className: `nice-desktop-icon-exporter ${className}`, children: [jsxs("div", { className: "nice-desktop-icon-exporter__preview", children: [jsx("h3", { children: "Preview" }), jsx("div", { className: "nice-desktop-icon-exporter__preview-grid", children: [16, 32, 48, 64, 128, 256].map((size) => (jsxs("div", { className: "nice-desktop-icon-exporter__preview-item", children: [jsx("div", { className: "nice-desktop-icon-exporter__preview-box", style: {
|
|
634
634
|
width: Math.min(size, 128),
|
|
635
635
|
height: Math.min(size, 128),
|
|
636
636
|
backgroundColor: config.backgroundColor || '#f0f0f0',
|
|
637
|
-
display: 'flex',
|
|
638
|
-
alignItems: 'center',
|
|
639
|
-
justifyContent: 'center',
|
|
640
|
-
borderRadius: 4,
|
|
641
637
|
}, children: jsx(IconComponent, { size: Math.min(size, 128) * (1 - config.padding * 2), fill: config.fillColor }) }), jsxs("span", { children: [size, "\u00D7", size] })] }, size))) })] }), jsxs("div", { className: "nice-desktop-icon-exporter__config", children: [jsx("h3", { children: "Configuration" }), jsxs("label", { children: ["Icon Name:", jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })) })] }), jsxs("label", { children: ["Fill Color:", jsx("input", { type: "color", value: config.fillColor, onChange: (e) => setConfig((c) => ({ ...c, fillColor: e.target.value })) })] }), jsxs("label", { children: ["Background:", jsx("input", { type: "color", value: config.backgroundColor || '#ffffff', onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })) }), jsx("button", { onClick: () => setConfig((c) => ({ ...c, backgroundColor: undefined })), children: "Transparent" })] }), jsxs("label", { children: ["Padding: ", Math.round(config.padding * 100), "%", jsx("input", { type: "range", min: "0", max: "0.3", step: "0.01", value: config.padding, onChange: (e) => setConfig((c) => ({ ...c, padding: parseFloat(e.target.value) })) })] }), jsxs("div", { className: "nice-desktop-icon-exporter__platforms", children: [jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeWindows, onChange: (e) => setConfig((c) => ({ ...c, includeWindows: e.target.checked })) }), "Windows (.ico)"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeMacOS, onChange: (e) => setConfig((c) => ({ ...c, includeMacOS: e.target.checked })) }), "macOS (.iconset)"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeLinux, onChange: (e) => setConfig((c) => ({ ...c, includeLinux: e.target.checked })) }), "Linux (hicolor)"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeRetina, onChange: (e) => setConfig((c) => ({ ...c, includeRetina: e.target.checked })) }), "HiDPI/Retina (@2x, @3x)"] })] }), jsxs("div", { className: "nice-desktop-icon-exporter__sizes", children: [jsx("h4", { children: "Sizes:" }), DESKTOP_ICON_SIZES.map(({ size, label }) => (jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.sizes.includes(size), onChange: (e) => {
|
|
642
638
|
setConfig((c) => ({
|
|
643
639
|
...c,
|
|
@@ -645,7 +641,7 @@ const NiceDesktopIconExporter = ({ icon, initialConfig, onExport, className = ''
|
|
|
645
641
|
? [...c.sizes, size].sort((a, b) => a - b)
|
|
646
642
|
: c.sizes.filter((s) => s !== size),
|
|
647
643
|
}));
|
|
648
|
-
} }), label] }, size)))] })] }), jsxs("div", { className: "nice-desktop-icon-exporter__actions", children: [jsx("button", { onClick: handleExport, disabled: isExporting, children: isExporting ? `Exporting... ${Math.round(progress)}%` : 'Generate Icons' }), jsx("button", { onClick: downloadAll, disabled: isExporting || icons.length === 0, children: "Download All (ZIP)" })] }), icons.length > 0 && (jsxs("div", { className: "nice-desktop-icon-exporter__results", children: [jsxs("h3", { children: ["Generated Icons (", icons.length, ")"] }), jsx("div", { className: "nice-desktop-icon-exporter__results-grid", children: icons.map((exportedIcon) => (jsxs("div", { className: "nice-desktop-icon-exporter__result-item", children: [jsx("img", { src: exportedIcon.dataUrl, alt: exportedIcon.filename
|
|
644
|
+
} }), label] }, size)))] })] }), jsxs("div", { className: "nice-desktop-icon-exporter__actions", children: [jsx("button", { onClick: handleExport, disabled: isExporting, children: isExporting ? `Exporting... ${Math.round(progress)}%` : 'Generate Icons' }), jsx("button", { onClick: downloadAll, disabled: isExporting || icons.length === 0, children: "Download All (ZIP)" })] }), icons.length > 0 && (jsxs("div", { className: "nice-desktop-icon-exporter__results", children: [jsxs("h3", { children: ["Generated Icons (", icons.length, ")"] }), jsx("div", { className: "nice-desktop-icon-exporter__results-grid", children: icons.map((exportedIcon) => (jsxs("div", { className: "nice-desktop-icon-exporter__result-item", children: [jsx("img", { src: exportedIcon.dataUrl, alt: exportedIcon.filename }), jsx("span", { children: exportedIcon.filename }), jsx("button", { onClick: () => downloadSingle(exportedIcon), children: "Download" })] }, exportedIcon.filename))) })] }))] }));
|
|
649
645
|
};
|
|
650
646
|
|
|
651
647
|
export { DESKTOP_ICON_SIZES, LINUX_HICOLOR_DIRS, NiceDesktopIconExporter, RETINA_VARIANTS, useDesktopIconExporter };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState, useCallback } from 'react';
|
|
3
|
+
import { NtdDownload } from './icons/actions.js';
|
|
3
4
|
|
|
4
5
|
/* ══════════════════════════════════════════════════════════════════════════════
|
|
5
6
|
Constants
|
|
@@ -233,7 +234,7 @@ function NiceFaviconGenerator({ icon, fill = '#1e1e1e', manifestConfig, onGenera
|
|
|
233
234
|
return (jsxs("div", { className: `nice-favicon-generator ${className}`, style: styles.container, children: [jsxs("div", { style: styles.section, children: [jsx("h3", { style: styles.sectionTitle, children: "Manifest Configuration" }), jsxs("div", { style: styles.formGrid, children: [jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: "App Name" }), jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })), style: styles.input })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: "Short Name" }), jsx("input", { type: "text", value: config.shortName, onChange: (e) => setConfig((c) => ({ ...c, shortName: e.target.value })), style: styles.input })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: "Theme Color" }), jsx("input", { type: "color", value: config.themeColor, onChange: (e) => setConfig((c) => ({ ...c, themeColor: e.target.value })), style: styles.colorInput })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: "Background Color" }), jsx("input", { type: "color", value: config.backgroundColor, onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })), style: styles.colorInput })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: "Display Mode" }), jsxs("select", { value: config.display, onChange: (e) => setConfig((c) => ({ ...c, display: e.target.value })), style: styles.input, children: [jsx("option", { value: "standalone", children: "Standalone" }), jsx("option", { value: "fullscreen", children: "Fullscreen" }), jsx("option", { value: "minimal-ui", children: "Minimal UI" }), jsx("option", { value: "browser", children: "Browser" })] })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: "Start URL" }), jsx("input", { type: "text", value: config.startUrl, onChange: (e) => setConfig((c) => ({ ...c, startUrl: e.target.value })), style: styles.input })] })] })] }), jsxs("div", { style: styles.actions, children: [jsx("button", { onClick: handleGenerate, disabled: isGenerating, style: {
|
|
234
235
|
...styles.button,
|
|
235
236
|
...(isGenerating ? styles.buttonDisabled : styles.buttonPrimary),
|
|
236
|
-
}, children: isGenerating ? 'Generating...' : 'Generate Favicons' }), assets.length > 0 && (jsx("button", { onClick: downloadAll, style: { ...styles.button, ...styles.buttonSecondary }, children: "Download All" }))] }), assets.length > 0 && (jsxs("div", { style: styles.section, children: [jsxs("div", { style: styles.tabs, children: [jsx("button", { style: { ...styles.tab, ...(activeTab === 'preview' ? styles.tabActive : {}) }, onClick: () => setActiveTab('preview'), children: "Preview" }), jsx("button", { style: { ...styles.tab, ...(activeTab === 'manifest' ? styles.tabActive : {}) }, onClick: () => setActiveTab('manifest'), children: "manifest.json" }), jsx("button", { style: { ...styles.tab, ...(activeTab === 'html' ? styles.tabActive : {}) }, onClick: () => setActiveTab('html'), children: "HTML Tags" })] }), activeTab === 'preview' && (jsx("div", { style: styles.assetGrid, children: assets.map((asset) => (jsxs("div", { style: styles.assetCard, children: [jsx("div", { style: styles.assetPreview, children: jsx("img", { src: asset.dataUrl, alt: asset.filename, style: { maxWidth: '64px', maxHeight: '64px' } }) }), jsxs("div", { style: styles.assetInfo, children: [jsx("span", { style: styles.assetName, children: asset.filename }), jsxs("span", { style: styles.assetSize, children: [asset.size, "x", asset.size] }), jsx("span", { style: styles.assetPurpose, children: asset.purpose })] }), jsx("button", { onClick: () => downloadSingle(asset), style: styles.downloadBtn, children: "
|
|
237
|
+
}, children: isGenerating ? 'Generating...' : 'Generate Favicons' }), assets.length > 0 && (jsx("button", { onClick: downloadAll, style: { ...styles.button, ...styles.buttonSecondary }, children: "Download All" }))] }), assets.length > 0 && (jsxs("div", { style: styles.section, children: [jsxs("div", { style: styles.tabs, children: [jsx("button", { style: { ...styles.tab, ...(activeTab === 'preview' ? styles.tabActive : {}) }, onClick: () => setActiveTab('preview'), children: "Preview" }), jsx("button", { style: { ...styles.tab, ...(activeTab === 'manifest' ? styles.tabActive : {}) }, onClick: () => setActiveTab('manifest'), children: "manifest.json" }), jsx("button", { style: { ...styles.tab, ...(activeTab === 'html' ? styles.tabActive : {}) }, onClick: () => setActiveTab('html'), children: "HTML Tags" })] }), activeTab === 'preview' && (jsx("div", { style: styles.assetGrid, children: assets.map((asset) => (jsxs("div", { style: styles.assetCard, children: [jsx("div", { style: styles.assetPreview, children: jsx("img", { src: asset.dataUrl, alt: asset.filename, style: { maxWidth: '64px', maxHeight: '64px' } }) }), jsxs("div", { style: styles.assetInfo, children: [jsx("span", { style: styles.assetName, children: asset.filename }), jsxs("span", { style: styles.assetSize, children: [asset.size, "x", asset.size] }), jsx("span", { style: styles.assetPurpose, children: asset.purpose })] }), jsx("button", { onClick: () => downloadSingle(asset), style: styles.downloadBtn, "aria-label": `Download ${asset.filename}`, children: jsx(NtdDownload, { size: 14, variant: "outline" }) })] }, asset.filename))) })), activeTab === 'manifest' && jsx("pre", { style: styles.codeBlock, children: getManifestJson() }), activeTab === 'html' && jsx("pre", { style: styles.codeBlock, children: getHtmlTags() })] })), jsxs("div", { style: styles.reference, children: [jsx("h4", { style: styles.referenceTitle, children: "Favicon Sizes Reference" }), jsxs("table", { style: styles.table, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { style: styles.th, children: "File" }), jsx("th", { style: styles.th, children: "Size" }), jsx("th", { style: styles.th, children: "Purpose" })] }) }), jsx("tbody", { children: FAVICON_SIZES.map((f) => (jsxs("tr", { children: [jsxs("td", { style: styles.td, children: [f.name, ".", f.format] }), jsxs("td", { style: styles.td, children: [f.size, "x", f.size] }), jsx("td", { style: styles.td, children: f.purpose })] }, f.name))) })] })] })] }));
|
|
237
238
|
}
|
|
238
239
|
/* ══════════════════════════════════════════════════════════════════════════════
|
|
239
240
|
Styles
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef, useState, useRef, useCallback, useImperativeHandle,
|
|
2
|
+
import { forwardRef, useState, useRef, useMemo, useCallback, useImperativeHandle, useEffect } from 'react';
|
|
3
|
+
import { NtdSearch, NtdCheck } from './icons/actions.js';
|
|
4
|
+
import { NtdGrid } from './icons/files.js';
|
|
5
|
+
import { NtdInbox } from './icons/media.js';
|
|
6
|
+
import { NtdChevronDown } from './icons/navigation.js';
|
|
7
|
+
import { NtdStar, NtdClock } from './icons/ui.js';
|
|
3
8
|
|
|
4
9
|
const MAX_HISTORY_ITEMS = 20;
|
|
5
|
-
/* ───
|
|
6
|
-
const Chevron = () =>
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
/* ─── Clock SVG (history) ─── */
|
|
12
|
-
const ClockIcon = () => (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("polyline", { points: "12 6 12 12 16 14" })] }));
|
|
13
|
-
/* ─── Check SVG (multi-select) ─── */
|
|
14
|
-
const CheckIcon = () => (jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "20 6 9 17 4 12" }) }));
|
|
10
|
+
/* ─── Small icons: the package's own (until 1.2.0 these were pasted SVGs) ─── */
|
|
11
|
+
const Chevron = () => jsx(NtdChevronDown, { size: 12, variant: "outline" });
|
|
12
|
+
const SearchIcon = () => jsx(NtdSearch, { size: 14, variant: "outline" });
|
|
13
|
+
const StarIcon = ({ filled }) => (jsx(NtdStar, { size: 12, variant: filled ? 'solid' : 'outline' }));
|
|
14
|
+
const ClockIcon = () => jsx(NtdClock, { size: 12, variant: "outline" });
|
|
15
|
+
const CheckIcon = () => jsx(NtdCheck, { size: 10, variant: "outline" });
|
|
15
16
|
/* ─── localStorage helpers ─── */
|
|
16
17
|
function loadFromStorage(key, fallback) {
|
|
17
18
|
if (typeof window === 'undefined') {
|
|
@@ -68,7 +69,7 @@ function saveToStorage(key, value) {
|
|
|
68
69
|
* }
|
|
69
70
|
* ```
|
|
70
71
|
*/
|
|
71
|
-
const NiceIconPicker = forwardRef(function NiceIconPicker({ icons, value = null, values = [], onChange, onChangeMulti, multiSelect = false, maxSelections, placeholder = 'Select icon…', variant = 'solid', gridIconSize = 'md', triggerIconSize = 'sm', categories: categoriesProp, className, disabled = false, clearable = true, virtualized = false, virtualizedItemCount = 100, showHistory = false, showFavorites = false, storageKeyPrefix = 'ntd-icon-picker', enableDragAndDrop = false, onDragStart, onDragEnd, }, ref) {
|
|
72
|
+
const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icons, value = null, values = [], onChange, onChangeMulti, multiSelect = false, maxSelections, placeholder = 'Select icon…', variant = 'solid', gridIconSize = 'md', triggerIconSize = 'sm', categories: categoriesProp, className, disabled = false, clearable = true, virtualized = false, virtualizedItemCount = 100, showHistory = false, showFavorites = false, storageKeyPrefix = 'ntd-icon-picker', enableDragAndDrop = false, onDragStart, onDragEnd, }, ref) {
|
|
72
73
|
var _a;
|
|
73
74
|
const [isOpen, setIsOpen] = useState(false);
|
|
74
75
|
const [search, setSearch] = useState('');
|
|
@@ -83,13 +84,7 @@ const NiceIconPicker = forwardRef(function NiceIconPicker({ icons, value = null,
|
|
|
83
84
|
const [history, setHistory] = useState(() => loadFromStorage(historyKey, []));
|
|
84
85
|
// Multi-select state (internal when uncontrolled)
|
|
85
86
|
const [internalValues, setInternalValues] = useState([]);
|
|
86
|
-
const selectedValues = multiSelect
|
|
87
|
-
? values.length > 0
|
|
88
|
-
? values
|
|
89
|
-
: internalValues
|
|
90
|
-
: value
|
|
91
|
-
? [value]
|
|
92
|
-
: [];
|
|
87
|
+
const selectedValues = useMemo(() => (multiSelect ? (values.length > 0 ? values : internalValues) : value ? [value] : []), [multiSelect, values, internalValues, value]);
|
|
93
88
|
const rootRef = useRef(null);
|
|
94
89
|
const searchInputRef = useRef(null);
|
|
95
90
|
/* ─── Favorites helpers ─── */
|
|
@@ -395,14 +390,14 @@ const NiceIconPicker = forwardRef(function NiceIconPicker({ icons, value = null,
|
|
|
395
390
|
}
|
|
396
391
|
return selectedEntry ? readableName(selectedEntry.name) : placeholder;
|
|
397
392
|
}, [multiSelect, selectedEntries, selectedEntry, placeholder]);
|
|
398
|
-
return (jsxs("div", { ref: rootRef, className: `ntd-picker${isOpen ? ' open' : ''}${disabled ? ' disabled' : ''}${multiSelect ? ' multi' : ''}${className ? ` ${className}` : ''}`, children: [jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsx("span", { className: "ntd-picker-trigger-icon", children: selectedEntry ? (jsx(selectedEntry.Component, { size: triggerIconSize, variant: variant })) : multiSelect && selectedEntries.length > 1 ? (jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : (
|
|
393
|
+
return (jsxs("div", { ref: rootRef, className: `ntd-picker${isOpen ? ' ntd-picker--open' : ''}${disabled ? ' ntd-picker--disabled' : ''}${multiSelect ? ' ntd-picker--multi' : ''}${className ? ` ${className}` : ''}`, children: [jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsx("span", { className: "ntd-picker-trigger-icon", children: selectedEntry ? (jsx(selectedEntry.Component, { size: triggerIconSize, variant: variant })) : multiSelect && selectedEntries.length > 1 ? (jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : (jsx(NtdGrid, { size: 16, variant: "outline" })) }), jsx("span", { className: `ntd-picker-trigger-label${!selectedEntry && selectedEntries.length === 0 ? ' ntd-picker-trigger-placeholder' : ''}`, children: triggerLabel }), jsx("span", { className: "ntd-picker-trigger-chevron", children: jsx(Chevron, {}) })] }), isOpen && (jsxs("div", { className: "ntd-picker-dropdown", role: "listbox", children: [jsxs("div", { className: "ntd-picker-search", children: [jsx("span", { className: "ntd-picker-search-icon", children: jsx(SearchIcon, {}) }), jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search icons\u2026", value: search, onChange: (e) => setSearch(e.target.value), "aria-label": "Search icons" })] }), (allCategories.length > 1 || showFavorites || showHistory) && (jsxs("div", { className: "ntd-picker-tabs", role: "tablist", children: [jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === null ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(null), role: "tab", "aria-selected": activeCategory === null, children: "All" }), showFavorites && (jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__favorites__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__favorites__'), role: "tab", "aria-selected": activeCategory === '__favorites__', title: "Favorites", children: [jsx(StarIcon, { filled: true }), " Favorites", favorites.length > 0 && (jsx("span", { className: "ntd-picker-tab-count", children: favorites.length }))] })), showHistory && history.length > 0 && (jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__history__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__history__'), role: "tab", "aria-selected": activeCategory === '__history__', title: "Recently used", children: [jsx(ClockIcon, {}), " Recent"] })), allCategories.map((cat) => (jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === cat ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(cat), role: "tab", "aria-selected": activeCategory === cat, children: cat }, cat)))] })), jsx("div", { className: "ntd-picker-grid-wrap", ref: gridWrapRef, children: filtered.length === 0 ? (jsxs("div", { className: "ntd-picker-empty", children: [jsx("div", { className: "ntd-picker-empty-icon", children: jsx(NtdInbox, { size: 28, variant: "outline" }) }), activeCategory === '__favorites__'
|
|
399
394
|
? 'No favorites yet. Click the star icon to add.'
|
|
400
395
|
: activeCategory === '__history__'
|
|
401
396
|
? 'No recent icons.'
|
|
402
397
|
: 'No icons found'] })) : (jsxs(Fragment, { children: [virtualized && visibleRange.start > 0 && (jsx("div", { style: { height: Math.floor(visibleRange.start / 6) * 48 } })), Array.from(grouped.entries()).map(([category, entries]) => (jsxs("div", { children: [!activeCategory && !(activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.startsWith('__')) && (jsx("div", { className: "ntd-picker-category-label", children: category })), jsx("div", { className: "ntd-picker-grid", children: entries.map((entry) => {
|
|
403
398
|
const isSelected = selectedValues.includes(entry.name);
|
|
404
399
|
const isFavorite = favorites.includes(entry.name);
|
|
405
|
-
return (jsxs("button", { type: "button", className: `ntd-picker-cell${isSelected ? ' selected' : ''}${multiSelect ? ' multi-select' : ''}${enableDragAndDrop ? ' draggable' : ''}`, onClick: () => handleSelect(entry), "data-name": readableName(entry.name), role: "option", "aria-selected": isSelected, title: readableName(entry.name), draggable: enableDragAndDrop, onDragStart: enableDragAndDrop ? (e) => handleDragStart(entry, e) : undefined, onDragEnd: enableDragAndDrop ? (e) => handleDragEnd(entry, e) : undefined, children: [jsx(entry.Component, { size: gridIconSize, variant: variant }), multiSelect && isSelected && (jsx("span", { className: "ntd-picker-cell-check", children: jsx(CheckIcon, {}) })), showFavorites && (jsx("button", { type: "button", className: `ntd-picker-cell-fav${isFavorite ? ' active' : ''}`, onClick: (e) => handleFavoriteClick(e, entry.name), title: isFavorite ? 'Remove from favorites' : 'Add to favorites', children: jsx(StarIcon, { filled: isFavorite }) }))] }, entry.name));
|
|
400
|
+
return (jsxs("button", { type: "button", className: `ntd-picker-cell${isSelected ? ' ntd-picker-cell--selected' : ''}${multiSelect ? ' ntd-picker-cell--multi-select' : ''}${enableDragAndDrop ? ' ntd-picker-cell--draggable' : ''}`, onClick: () => handleSelect(entry), "data-name": readableName(entry.name), role: "option", "aria-selected": isSelected, title: readableName(entry.name), draggable: enableDragAndDrop, onDragStart: enableDragAndDrop ? (e) => handleDragStart(entry, e) : undefined, onDragEnd: enableDragAndDrop ? (e) => handleDragEnd(entry, e) : undefined, children: [jsx(entry.Component, { size: gridIconSize, variant: variant }), multiSelect && isSelected && (jsx("span", { className: "ntd-picker-cell-check", children: jsx(CheckIcon, {}) })), showFavorites && (jsx("button", { type: "button", className: `ntd-picker-cell-fav${isFavorite ? ' ntd-picker-cell-fav--active' : ''}`, onClick: (e) => handleFavoriteClick(e, entry.name), title: isFavorite ? 'Remove from favorites' : 'Add to favorites', children: jsx(StarIcon, { filled: isFavorite }) }))] }, entry.name));
|
|
406
401
|
}) })] }, category))), virtualized && visibleRange.end < filtered.length && (jsx("div", { style: { height: Math.ceil((filtered.length - visibleRange.end) / 6) * 48 } }))] })) }), jsxs("div", { className: "ntd-picker-footer", children: [jsxs("span", { className: "ntd-picker-count", children: [filtered.length, " icon", filtered.length !== 1 ? 's' : '', multiSelect && selectedValues.length > 0 && (jsxs(Fragment, { children: [" \u2022 ", selectedValues.length, " selected"] })), maxSelections && multiSelect && jsxs(Fragment, { children: [" (max ", maxSelections, ")"] })] }), clearable && selectedValues.length > 0 && (jsxs("button", { type: "button", className: "ntd-picker-clear", onClick: handleClear, children: ["Clear", multiSelect ? ' all' : ' selection'] })), multiSelect && (jsx("button", { type: "button", className: "ntd-picker-done", onClick: () => setIsOpen(false), children: "Done" }))] })] }))] }));
|
|
407
402
|
});
|
|
408
403
|
|
|
@@ -1,34 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState, useMemo, useCallback } from 'react';
|
|
3
|
-
import './icons/navigation.js';
|
|
4
3
|
import { NtdCheck } from './icons/actions.js';
|
|
5
|
-
import './icons/ui.js';
|
|
6
|
-
import './icons/sustainability.js';
|
|
7
|
-
import './icons/accessibility.js';
|
|
8
|
-
import './icons/legal.js';
|
|
9
|
-
import './icons/media.js';
|
|
10
|
-
import './icons/files.js';
|
|
11
|
-
import './icons/fun.js';
|
|
12
|
-
import './icons/weather.js';
|
|
13
|
-
import './icons/shapes.js';
|
|
14
|
-
import './icons/business.js';
|
|
15
|
-
import './icons/social.js';
|
|
16
|
-
import './icons/devtech.js';
|
|
17
|
-
import './icons/ecommerce.js';
|
|
18
|
-
import './icons/fintech.js';
|
|
19
|
-
import './icons/saas.js';
|
|
20
|
-
import './icons/smarthome.js';
|
|
21
|
-
import './icons/health.js';
|
|
22
|
-
import './icons/brand.js';
|
|
23
|
-
import './icons/gaming.js';
|
|
24
|
-
import './icons/ai.js';
|
|
25
|
-
import './icons/education.js';
|
|
26
|
-
import './icons/science.js';
|
|
27
|
-
import './icons/realestate.js';
|
|
28
|
-
import './icons/food.js';
|
|
29
|
-
import './icons/travel.js';
|
|
30
|
-
import './icons/sports.js';
|
|
31
|
-
import './icons/omniverk.js';
|
|
32
4
|
|
|
33
5
|
/* ══════════════════════════════════════════════════════════════════════════════
|
|
34
6
|
Constants
|
|
@@ -366,7 +338,12 @@ function NiceIconSetCreator({ icons, initialSelection, defaultConfig, onSelectio
|
|
|
366
338
|
URL.revokeObjectURL(url);
|
|
367
339
|
});
|
|
368
340
|
}, [creator]);
|
|
369
|
-
return (jsxs("div", { className: `nice-icon-set-creator ${className}`, style: styles.container, children: [jsxs("div", { style: styles.header, children: [jsx("h2", { style: styles.title, children: "Icon Set Creator" }), jsxs("div", { style: styles.stats, children: [creator.selectedCount, " / ", creator.items.length, " icons selected"] })] }), jsxs("div", { style: styles.content, children: [jsxs("div", { style: styles.configPanel, children: [jsx("h3", { style: styles.sectionTitle, children: "Configuration" }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Set Name" }), jsx("input", { type: "text", value: creator.config.name, onChange: (e) => creator.updateConfig({ name: e.target.value }), style: styles.input, placeholder: "MyIcons" })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Package Name" }), jsx("input", { type: "text", value: creator.config.packageName, onChange: (e) => creator.updateConfig({ packageName: e.target.value }), style: styles.input, placeholder: "@myproject/icons" })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Description" }), jsx("input", { type: "text", value: creator.config.description, onChange: (e) => creator.updateConfig({ description: e.target.value }), style: styles.input })] }), jsxs("div", { style: styles.fieldRow, children: [jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Version" }), jsx("input", { type: "text", value: creator.config.version, onChange: (e) => creator.updateConfig({ version: e.target.value }), style: styles.input })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "License" }), jsx("input", { type: "text", value: creator.config.license, onChange: (e) => creator.updateConfig({ license: e.target.value }), style: styles.input })] })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Export Format" }), jsxs("select", { value: creator.config.format, onChange: (e) => creator.updateConfig({ format: e.target.value }), style: styles.select, children: [jsx("option", { value: "esm", children: "ES Modules" }), jsx("option", { value: "cjs", children: "CommonJS" }), jsx("option", { value: "both", children: "Both" })] })] }), jsxs("div", { style: styles.checkboxGroup, children: [jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.generateTypes, onChange: (e) => creator.updateConfig({ generateTypes: e.target.checked }) }), "Generate TypeScript types"] }), jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.treeShaking, onChange: (e) => creator.updateConfig({ treeShaking: e.target.checked }) }), "Tree-shaking friendly"] }), jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.includeMetadata, onChange: (e) => creator.updateConfig({ includeMetadata: e.target.checked }) }), "Include metadata"] })] }), jsxs("div", { style: styles.exportActions, children: [jsx("button", { onClick: handleExport, style: styles.primaryButton, children: "Preview Export" }), jsx("button", { onClick: handleDownloadZip, style: styles.secondaryButton, children: "Download Files" })] })] }), jsxs("div", { style: styles.selectionPanel, children: [jsxs("div", { style: styles.selectionHeader, children: [jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search icons...", style: styles.searchInput }), jsxs("select", { value: categoryFilter, onChange: (e) => setCategoryFilter(e.target.value), style: styles.categorySelect, children: [jsx("option", { value: "all", children: "All Categories" }), categories.map((cat) => (jsx("option", { value: cat, children: cat }, cat)))] })] }), jsxs("div", { style: styles.selectionActions, children: [jsx("button", { onClick: creator.selectAll, style: styles.smallButton, children: "Select All" }), jsx("button", { onClick: creator.deselectAll, style: styles.smallButton, children: "Deselect All" })] }), jsx("div", { style: styles.iconGrid, children: filteredItems.map((item) => (jsxs("div", { onClick: () => creator.toggleIcon(item.originalName),
|
|
341
|
+
return (jsxs("div", { className: `nice-icon-set-creator ${className}`, style: styles.container, children: [jsxs("div", { style: styles.header, children: [jsx("h2", { style: styles.title, children: "Icon Set Creator" }), jsxs("div", { style: styles.stats, children: [creator.selectedCount, " / ", creator.items.length, " icons selected"] })] }), jsxs("div", { style: styles.content, children: [jsxs("div", { style: styles.configPanel, children: [jsx("h3", { style: styles.sectionTitle, children: "Configuration" }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Set Name" }), jsx("input", { type: "text", value: creator.config.name, onChange: (e) => creator.updateConfig({ name: e.target.value }), style: styles.input, placeholder: "MyIcons" })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Package Name" }), jsx("input", { type: "text", value: creator.config.packageName, onChange: (e) => creator.updateConfig({ packageName: e.target.value }), style: styles.input, placeholder: "@myproject/icons" })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Description" }), jsx("input", { type: "text", value: creator.config.description, onChange: (e) => creator.updateConfig({ description: e.target.value }), style: styles.input })] }), jsxs("div", { style: styles.fieldRow, children: [jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Version" }), jsx("input", { type: "text", value: creator.config.version, onChange: (e) => creator.updateConfig({ version: e.target.value }), style: styles.input })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "License" }), jsx("input", { type: "text", value: creator.config.license, onChange: (e) => creator.updateConfig({ license: e.target.value }), style: styles.input })] })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Export Format" }), jsxs("select", { value: creator.config.format, onChange: (e) => creator.updateConfig({ format: e.target.value }), style: styles.select, children: [jsx("option", { value: "esm", children: "ES Modules" }), jsx("option", { value: "cjs", children: "CommonJS" }), jsx("option", { value: "both", children: "Both" })] })] }), jsxs("div", { style: styles.checkboxGroup, children: [jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.generateTypes, onChange: (e) => creator.updateConfig({ generateTypes: e.target.checked }) }), "Generate TypeScript types"] }), jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.treeShaking, onChange: (e) => creator.updateConfig({ treeShaking: e.target.checked }) }), "Tree-shaking friendly"] }), jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.includeMetadata, onChange: (e) => creator.updateConfig({ includeMetadata: e.target.checked }) }), "Include metadata"] })] }), jsxs("div", { style: styles.exportActions, children: [jsx("button", { onClick: handleExport, style: styles.primaryButton, children: "Preview Export" }), jsx("button", { onClick: handleDownloadZip, style: styles.secondaryButton, children: "Download Files" })] })] }), jsxs("div", { style: styles.selectionPanel, children: [jsxs("div", { style: styles.selectionHeader, children: [jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search icons...", style: styles.searchInput }), jsxs("select", { value: categoryFilter, onChange: (e) => setCategoryFilter(e.target.value), style: styles.categorySelect, children: [jsx("option", { value: "all", children: "All Categories" }), categories.map((cat) => (jsx("option", { value: cat, children: cat }, cat)))] })] }), jsxs("div", { style: styles.selectionActions, children: [jsx("button", { onClick: creator.selectAll, style: styles.smallButton, children: "Select All" }), jsx("button", { onClick: creator.deselectAll, style: styles.smallButton, children: "Deselect All" })] }), jsx("div", { style: styles.iconGrid, children: filteredItems.map((item) => (jsxs("div", { role: "checkbox", "aria-checked": item.included, "aria-label": item.customName, tabIndex: 0, onClick: () => creator.toggleIcon(item.originalName), onKeyDown: (e) => {
|
|
342
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
343
|
+
e.preventDefault();
|
|
344
|
+
creator.toggleIcon(item.originalName);
|
|
345
|
+
}
|
|
346
|
+
}, style: {
|
|
370
347
|
...styles.iconItem,
|
|
371
348
|
borderColor: item.included ? '#3b82f6' : '#e5e7eb',
|
|
372
349
|
backgroundColor: item.included ? '#eff6ff' : '#fff',
|
package/dist/esm/NtdIconBadge.js
CHANGED
|
@@ -185,7 +185,8 @@ function injectStyles() {
|
|
|
185
185
|
* />
|
|
186
186
|
* ```
|
|
187
187
|
*/
|
|
188
|
-
const NtdBadge =
|
|
188
|
+
const NtdBadge = /* @__PURE__ */ Object.assign(
|
|
189
|
+
/* @__PURE__ */ forwardRef(({ icon: Icon, count = 0, maxCount = 99, showZero = false, position = 'top-right', variant = 'standard', badgeColor = '#ef4444', textColor = '#ffffff', animated = true, pulse = false, iconProps = {}, className, style, 'aria-label': ariaLabel, }, ref) => {
|
|
189
190
|
var _a, _b;
|
|
190
191
|
const [isEntering, setIsEntering] = useState(false);
|
|
191
192
|
const [countChanging, setCountChanging] = useState(false);
|
|
@@ -235,8 +236,7 @@ const NtdBadge = forwardRef(({ icon: Icon, count = 0, maxCount = 99, showZero =
|
|
|
235
236
|
backgroundColor: badgeColor,
|
|
236
237
|
color: textColor,
|
|
237
238
|
}, "aria-hidden": "true", children: variant !== 'dot' && displayCount }))] }));
|
|
238
|
-
});
|
|
239
|
-
NtdBadge.displayName = 'NtdBadge';
|
|
239
|
+
}), { displayName: 'NtdBadge' });
|
|
240
240
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
241
241
|
NtdStatusDot COMPONENT
|
|
242
242
|
───────────────────────────────────────────────────────────────────────────── */
|
|
@@ -255,7 +255,8 @@ NtdBadge.displayName = 'NtdBadge';
|
|
|
255
255
|
* <NtdStatusDot icon={NtdUser} status="away" position="bottom-right" />
|
|
256
256
|
* ```
|
|
257
257
|
*/
|
|
258
|
-
const NtdStatusDot =
|
|
258
|
+
const NtdStatusDot = /* @__PURE__ */ Object.assign(
|
|
259
|
+
/* @__PURE__ */ forwardRef(({ icon: Icon, status, statusColor, position = 'bottom-right', dotSize = 'md', animated = true, pulse = false, iconProps = {}, className, style, }, ref) => {
|
|
259
260
|
var _a, _b;
|
|
260
261
|
useEffect(() => {
|
|
261
262
|
injectStyles();
|
|
@@ -283,8 +284,7 @@ const NtdStatusDot = forwardRef(({ icon: Icon, status, statusColor, position = '
|
|
|
283
284
|
backgroundColor: resolvedColor,
|
|
284
285
|
color: resolvedColor,
|
|
285
286
|
}, "aria-hidden": "true" })] }));
|
|
286
|
-
});
|
|
287
|
-
NtdStatusDot.displayName = 'NtdStatusDot';
|
|
287
|
+
}), { displayName: 'NtdStatusDot' });
|
|
288
288
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
289
289
|
NtdIconOverlay COMPONENT
|
|
290
290
|
───────────────────────────────────────────────────────────────────────────── */
|
|
@@ -309,7 +309,8 @@ NtdStatusDot.displayName = 'NtdStatusDot';
|
|
|
309
309
|
* />
|
|
310
310
|
* ```
|
|
311
311
|
*/
|
|
312
|
-
const NtdIconOverlay =
|
|
312
|
+
const NtdIconOverlay = /* @__PURE__ */ Object.assign(
|
|
313
|
+
/* @__PURE__ */ forwardRef(({ icon: Icon, overlay, position = 'bottom-right', overlayScale = 0.5, overlayBg, circularBg = false, iconProps = {}, className, style, }, ref) => {
|
|
313
314
|
var _a, _b;
|
|
314
315
|
useEffect(() => {
|
|
315
316
|
injectStyles();
|
|
@@ -331,8 +332,7 @@ const NtdIconOverlay = forwardRef(({ icon: Icon, overlay, position = 'bottom-rig
|
|
|
331
332
|
height: overlaySize,
|
|
332
333
|
backgroundColor: overlayBg,
|
|
333
334
|
}, children: overlay })] }));
|
|
334
|
-
});
|
|
335
|
-
NtdIconOverlay.displayName = 'NtdIconOverlay';
|
|
335
|
+
}), { displayName: 'NtdIconOverlay' });
|
|
336
336
|
/**
|
|
337
337
|
* Stack two icons for composite imagery.
|
|
338
338
|
*
|
|
@@ -354,7 +354,8 @@ NtdIconOverlay.displayName = 'NtdIconOverlay';
|
|
|
354
354
|
* />
|
|
355
355
|
* ```
|
|
356
356
|
*/
|
|
357
|
-
const NtdIconStack =
|
|
357
|
+
const NtdIconStack = /* @__PURE__ */ Object.assign(
|
|
358
|
+
/* @__PURE__ */ forwardRef(({ base: BaseIcon, overlay: OverlayIcon, baseProps = {}, overlayProps = {}, position = 'bottom-right', overlayScale = 0.6, size, className, style, }, ref) => {
|
|
358
359
|
var _a, _b, _c;
|
|
359
360
|
const resolvedSize = size
|
|
360
361
|
? typeof size === 'number'
|
|
@@ -371,7 +372,6 @@ const NtdIconStack = forwardRef(({ base: BaseIcon, overlay: OverlayIcon, basePro
|
|
|
371
372
|
}, children: [jsx(BaseIcon, { ...baseProps, size: resolvedSize }), jsx("div", { className: "ntd-icon-overlay", style: {
|
|
372
373
|
...POSITION_STYLES[position],
|
|
373
374
|
}, children: jsx(OverlayIcon, { ...overlayProps, size: overlaySize }) })] }));
|
|
374
|
-
});
|
|
375
|
-
NtdIconStack.displayName = 'NtdIconStack';
|
|
375
|
+
}), { displayName: 'NtdIconStack' });
|
|
376
376
|
|
|
377
377
|
export { NtdBadge, NtdIconOverlay, NtdIconStack, NtdStatusDot };
|