@weft-js/warp-icons 0.0.0-stage → 0.1.0

package/src/action.tsx

@@ -0,0 +1,12 @@
+// An icon with a part that moves. CSS does the moving, so there is no script and nothing runs until the trigger.
+import { Svg, type IconProps } from './svg'
+
+/** What starts it. `on` runs now, and an icon that loops keeps going. Without one: hover, focus and press. */
+export type IconTrigger = 'hover' | 'focus' | 'press' | 'on'
+/** What an icon with a moving part takes: `IconProps`, and what starts it. */
+export type ActionIconProps = IconProps & { action?: IconTrigger | boolean }
+
+/*#__NO_SIDE_EFFECTS__*/
+export function acting(line: string, pixels: string) {
+  return ({ action, ...rest }: ActionIconProps) => <Svg {...rest} data-act={typeof action === 'string' ? action : 'hover focus press'} html={line + pixels} />
+}

package/src/all.tsx

@@ -0,0 +1,9 @@
+// Every icon by name: an app that takes names from data pays for the whole set here, and only here.
+import type { IconComponent } from '@weft-js/warp-icons'
+import { actions, names, type IconActionName, type IconName, type IconVariant } from './gen/names'
+import { lookup } from './lookup'
+
+export { actions, lookup, names, type IconActionName, type IconName, type IconVariant }
+export { Icon, type IconByNameProps } from './icon'
+/** Every icon, by its name. */
+export const icons = Object.fromEntries(names.map(n => [n, lookup(n)])) as Record<IconName, IconComponent>

package/src/gen/actions/bell.css

@@ -0,0 +1,9 @@
+/* Generated by scripts/build.mjs: do not edit. */
+@layer warp.components {
+@media (prefers-reduced-motion:no-preference) {
+:is(svg[data-act~="hover"]:hover,:hover>svg[data-act~="hover"],svg[data-act~="focus"]:focus-visible,:focus-visible>svg[data-act~="focus"],svg[data-act~="press"]:active,:active>svg[data-act~="press"],svg[data-act~="on"]) [data-a="bell"] { transform-box:view-box;transform-origin:12px 2px;animation:weft-bell calc(640ms*var(--warp-motion-scale,1)) ease-out; }
+:is(svg[data-act~="hover"]:hover,:hover>svg[data-act~="hover"],svg[data-act~="focus"]:focus-visible,:focus-visible>svg[data-act~="focus"],svg[data-act~="press"]:active,:active>svg[data-act~="press"],svg[data-act~="on"]) [data-a="bell"][data-t="v"] { animation-name:weft-bell-v;animation-timing-function:step-end; }
+}
+}
+@keyframes weft-bell { from,to { transform: none } 20% { transform: rotate(14deg) } 45% { transform: rotate(-11deg) } 70% { transform: rotate(6deg) } }
+@keyframes weft-bell-v { from,to { transform: none } 20%,60% { transform: translateX(1.5px) } 40%,80% { transform: translateX(-1.5px) } }

package/src/gen/actions/bell.tsx

@@ -0,0 +1,6 @@
+// Generated by scripts/build.mjs from art/*.mjs: do not edit.
+import { acting } from '../../action'
+import '../../tiers.css'
+import './bell.css'
+
+export const BellIconAction = /*#__PURE__*/ acting('<g data-a="bell"><path data-t="q" data-qs="" d="M11.25 2.25A6.75 6.75 0 0 1 18 9V14.25L20.25 17.25H2.25L4.5 14.25V9A6.75 6.75 0 0 1 6.75 3.75"/><path data-t="q" data-qs="" data-w="" d="M9 20.25L13.5 20.25"/><path data-t="b" data-bs="" d="M11.25 2.25A6.75 6.75 0 0 1 18 9V14.25L20.25 17.25H2.25L4.5 14.25V9A6.75 6.75 0 0 1 6.75 3.75"/><path data-t="b" data-bw="" data-w="" d="M9 20.25L13.5 20.25"/></g>','<g data-a="bell" data-t="v"><path data-p="" d="M7 0h2v1h-2zM6 1h1v1h-1zM9 1h2v1h-2zM4 2h1v1h-1zM10 2h2v1h-2zM4 3h2v1h-2zM11 3h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM11 4h2v1h-2zM3 5h1v1h-1zM5 5h1v1h-1zM12 5h2v1h-2zM3 6h2v1h-2zM6 6h1v1h-1zM12 6h1v1h-1zM2 7h1v1h-1zM5 7h1v1h-1zM13 7h1v1h-1zM2 8h14v1h-14zM3 9h1v1h-1zM5 9h1v1h-1zM7 9h1v1h-1zM9 9h1v1h-1zM11 9h1v1h-1zM13 9h1v1h-1zM15 9h1v1h-1zM4 10h1v1h-1zM6 10h5v1h-5zM12 10h1v1h-1zM14 10h1v1h-1zM7 11h1v1h-1zM9 11h1v1h-1zM11 11h1v1h-1zM13 11h1v1h-1zM8 12h1v1h-1zM10 12h1v1h-1zM12 12h1v1h-1z"/><path data-p="" data-w="" d="M6 9h1v1h-1zM8 9h1v1h-1zM10 9h1v1h-1z"/></g>')

package/src/gen/actions/check.css

@@ -0,0 +1,10 @@
+/* Generated by scripts/build.mjs: do not edit. */
+@layer warp.components {
+@media (prefers-reduced-motion:no-preference) {
+:is(svg[data-act~="hover"]:hover,:hover>svg[data-act~="hover"],svg[data-act~="focus"]:focus-visible,:focus-visible>svg[data-act~="focus"],svg[data-act~="press"]:active,:active>svg[data-act~="press"],svg[data-act~="on"]) [data-a="check"] { animation:weft-check calc(320ms*var(--warp-motion-scale,1)) ease-out; }
+:is(svg[data-act~="hover"]:hover,:hover>svg[data-act~="hover"],svg[data-act~="focus"]:focus-visible,:focus-visible>svg[data-act~="focus"],svg[data-act~="press"]:active,:active>svg[data-act~="press"],svg[data-act~="on"]) [data-a="check"][data-t="v"] { animation-name:weft-check-v;animation-timing-function:steps(6, end); }
+}
+[data-a="check"] path { stroke-dasharray:1; }
+}
+@keyframes weft-check { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
+@keyframes weft-check-v { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }

package/src/gen/actions/check.tsx

@@ -0,0 +1,6 @@
+// Generated by scripts/build.mjs from art/*.mjs: do not edit.
+import { acting } from '../../action'
+import '../../tiers.css'
+import './check.css'
+
+export const CheckIconAction = /*#__PURE__*/ acting('<g data-a="check"><path pathLength="1" data-t="q" data-qs="" data-w="" d="M2.25 12.75L8.25 18.75L20.25 5.25"/><path pathLength="1" data-t="b" data-bw="" data-w="" d="M2.25 12.75L8.25 18.75L20.25 5.25"/></g>','<g data-a="check" data-t="v"><path data-p="" d="M13 3h1v1h-1zM12 4h1v1h-1zM14 4h1v1h-1zM11 5h1v1h-1zM13 5h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM9 7h1v1h-1zM11 7h1v1h-1zM8 8h1v1h-1zM10 8h1v1h-1zM7 9h1v1h-1zM9 9h1v1h-1zM6 10h1v1h-1zM8 10h1v1h-1zM5 11h1v1h-1zM7 11h1v1h-1zM6 12h1v1h-1z"/><path data-p="" data-w="" d="M12 2h2v1h-2zM11 3h2v1h-2zM10 4h2v1h-2zM9 5h2v1h-2zM8 6h2v1h-2zM1 7h2v1h-2zM7 7h2v1h-2zM2 8h2v1h-2zM6 8h2v1h-2zM3 9h4v1h-4zM4 10h2v1h-2z"/></g>')

package/src/gen/actions/copy.css

@@ -0,0 +1,9 @@
+/* Generated by scripts/build.mjs: do not edit. */
+@layer warp.components {
+@media (prefers-reduced-motion:no-preference) {
+:is(svg[data-act~="hover"]:hover,:hover>svg[data-act~="hover"],svg[data-act~="focus"]:focus-visible,:focus-visible>svg[data-act~="focus"],svg[data-act~="press"]:active,:active>svg[data-act~="press"],svg[data-act~="on"]) [data-a="copy"] { animation:weft-copy calc(360ms*var(--warp-motion-scale,1)) ease-out; }
+:is(svg[data-act~="hover"]:hover,:hover>svg[data-act~="hover"],svg[data-act~="focus"]:focus-visible,:focus-visible>svg[data-act~="focus"],svg[data-act~="press"]:active,:active>svg[data-act~="press"],svg[data-act~="on"]) [data-a="copy"][data-t="v"] { animation-name:weft-copy-v;animation-timing-function:steps(4, end); }
+}
+}
+@keyframes weft-copy { from { transform: translate(-6px, -6px) } to { transform: none } }
+@keyframes weft-copy-v { from { transform: translate(-6px, -6px) } to { transform: none } }

package/src/gen/actions/copy.tsx

@@ -0,0 +1,6 @@
+// Generated by scripts/build.mjs from art/*.mjs: do not edit.
+import { acting } from '../../action'
+import '../../tiers.css'
+import './copy.css'
+
+export const CopyIconAction = /*#__PURE__*/ acting('<path data-t="q" data-qs="" d="M2.25 4.65Q2.25 2.25 4.65 2.25L11.85 2.25Q14.25 2.25 14.25 4.65L14.25 11.85Q14.25 14.25 11.85 14.25L4.65 14.25Q2.25 14.25 2.25 11.85z"/><path data-t="b" data-bs="" d="M2.25 3.3Q2.25 2.25 3.3 2.25L13.2 2.25Q14.25 2.25 14.25 3.3L14.25 13.2Q14.25 14.25 13.2 14.25L3.3 14.25Q2.25 14.25 2.25 13.2z"/><g data-a="copy"><path data-t="q" data-qs="" d="M14.55 8.25L17.85 8.25Q20.25 8.25 20.25 10.65L20.25 17.85Q20.25 20.25 17.85 20.25L10.65 20.25Q8.25 20.25 8.25 17.85L8.25 9.75Q8.25 8.25 9.75 8.25L11.25 8.25"/><path data-t="b" data-bs="" d="M15.45 8.25L19.2 8.25Q20.25 8.25 20.25 9.3L20.25 19.2Q20.25 20.25 19.2 20.25L9.3 20.25Q8.25 20.25 8.25 19.2L8.25 9.3Q8.25 8.25 9.3 8.25L11.25 8.25"/></g>','<path data-t="v" data-p="" d="M2 1h7v1h-7zM1 2h1v6h-1zM9 2h1v2h-1zM6 4h1v1h-1zM8 4h2v1h-2zM4 6h1v1h-1zM8 6h2v1h-2zM3 7h1v1h-1zM9 7h1v1h-1zM1 8h2v1h-2zM4 8h1v1h-1zM8 8h2v1h-2zM2 9h3v1h-3zM6 9h3v1h-3zM12 9h1v1h-1zM10 10h3v2h-3zM9 12h4v1h-4z"/><g data-a="copy" data-t="v"><path data-p="" d="M5 5h2v1h-2zM9 5h4v1h-4zM5 6h1v7h-1zM13 6h1v7h-1zM6 13h7v1h-7z"/></g>')

package/src/gen/actions/refresh.css

@@ -0,0 +1,11 @@
+/* Generated by scripts/build.mjs: do not edit. */
+@layer warp.components {
+@media (prefers-reduced-motion:no-preference) {
+:is(svg[data-act~="hover"]:hover,:hover>svg[data-act~="hover"],svg[data-act~="focus"]:focus-visible,:focus-visible>svg[data-act~="focus"],svg[data-act~="press"]:active,:active>svg[data-act~="press"],svg[data-act~="on"]) [data-a="refresh"] { transform-box:view-box;transform-origin:12px 12px;animation:weft-refresh calc(720ms*var(--warp-motion-scale,1)) ease-out; }
+:is(svg[data-act~="hover"]:hover,:hover>svg[data-act~="hover"],svg[data-act~="focus"]:focus-visible,:focus-visible>svg[data-act~="focus"],svg[data-act~="press"]:active,:active>svg[data-act~="press"],svg[data-act~="on"]) [data-a="refresh"][data-t="v"] { animation-name:weft-refresh-v;animation-timing-function:steps(4, end); }
+svg[data-act~="on"] [data-a="refresh"] { animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--warp-loop-play,running); }
+svg[data-act~="on"] [data-a="refresh"][data-t="v"] { animation-timing-function:steps(4, end); }
+}
+}
+@keyframes weft-refresh { to { transform: rotate(360deg) } }
+@keyframes weft-refresh-v { to { transform: rotate(360deg) } }

package/src/gen/actions/refresh.tsx

@@ -0,0 +1,6 @@
+// Generated by scripts/build.mjs from art/*.mjs: do not edit.
+import { acting } from '../../action'
+import '../../tiers.css'
+import './refresh.css'
+
+export const RefreshIconAction = /*#__PURE__*/ acting('<g data-a="refresh"><path data-t="q" data-qs="" d="M19.35 9A9 9 0 0 0 4.35 6.15L3 8.25M3.15 13.5A9 9 0 0 0 18.15 16.35L19.5 14.25"/><path data-t="q" data-qs="" data-w="" d="M20.25 2.25L20.25 8.25L14.25 8.25M2.25 20.25L2.25 14.25L8.25 14.25"/><path data-t="b" data-bs="" d="M19.35 9A9 9 0 0 0 4.35 6.15L3 8.25M3.15 13.5A9 9 0 0 0 18.15 16.35L19.5 14.25"/><path data-t="b" data-bw="" data-w="" d="M20.25 2.25L20.25 8.25L14.25 8.25M2.25 20.25L2.25 14.25L8.25 14.25"/></g>','<g data-a="refresh" data-t="v"><path data-p="" data-w="" d="M5 1h4v1h-4zM12 1h2v4h-2zM3 2h2v1h-2zM9 2h1v1h-1zM2 3h1v1h-1zM10 3h1v1h-1zM1 4h2v1h-2zM1 5h1v2h-1zM8 5h6v2h-6zM1 8h6v2h-6zM13 8h1v2h-1zM1 10h2v4h-2zM12 10h2v1h-2zM4 11h1v1h-1zM12 11h1v1h-1zM5 12h1v1h-1zM10 12h2v1h-2zM6 13h4v1h-4z"/></g>')

package/src/gen/actions/trash.css

@@ -0,0 +1,9 @@
+/* Generated by scripts/build.mjs: do not edit. */
+@layer warp.components {
+@media (prefers-reduced-motion:no-preference) {
+:is(svg[data-act~="hover"]:hover,:hover>svg[data-act~="hover"],svg[data-act~="focus"]:focus-visible,:focus-visible>svg[data-act~="focus"],svg[data-act~="press"]:active,:active>svg[data-act~="press"],svg[data-act~="on"]) [data-a="trash"] { transform-box:view-box;transform-origin:3px 6px;animation:weft-trash calc(420ms*var(--warp-motion-scale,1)) ease-out; }
+:is(svg[data-act~="hover"]:hover,:hover>svg[data-act~="hover"],svg[data-act~="focus"]:focus-visible,:focus-visible>svg[data-act~="focus"],svg[data-act~="press"]:active,:active>svg[data-act~="press"],svg[data-act~="on"]) [data-a="trash"][data-t="v"] { animation-name:weft-trash-v;animation-timing-function:step-end; }
+}
+}
+@keyframes weft-trash { from,to { transform: none } 45% { transform: translateY(-1.5px) rotate(-7deg) } }
+@keyframes weft-trash-v { from,to { transform: none } 25%,75% { transform: translateY(-1.5px) } }

package/src/gen/actions/trash.tsx

@@ -0,0 +1,6 @@
+// Generated by scripts/build.mjs from art/*.mjs: do not edit.
+import { acting } from '../../action'
+import '../../tiers.css'
+import './trash.css'
+
+export const TrashIconAction = /*#__PURE__*/ acting('<path data-t="q" data-qs="" d="M4.5 5.25L5.76 17.86Q6 20.25 8.4 20.25L14.1 20.25Q16.5 20.25 16.74 17.86L18 5.25"/><path data-t="q" data-qs="" data-w="" d="M9 9.75L9 15.75M13.5 9.75L13.5 15.75"/><path data-t="b" data-bs="" d="M4.5 5.25L5.9 19.21Q6 20.25 7.05 20.25L15.45 20.25Q16.5 20.25 16.6 19.21L18 5.25"/><path data-t="b" data-bw="" data-w="" d="M9 9.75L9 15.75M13.5 9.75L13.5 15.75"/><g data-a="trash"><path data-t="q" data-qs="" d="M2.25 5.25L20.25 5.25M8.25 5.25L8.25 3.75Q8.25 2.25 9.75 2.25L12.75 2.25Q14.25 2.25 14.25 3.75L14.25 5.25"/><path data-t="b" data-bs="" d="M2.25 5.25L20.25 5.25M8.25 5.25L8.25 3.3Q8.25 2.25 9.3 2.25L13.2 2.25Q14.25 2.25 14.25 3.3L14.25 5.25"/></g>','<path data-t="v" data-p="" d="M4 4h1v6h-1zM12 4h1v6h-1zM5 10h8v1h-8z"/><path data-t="v" data-p="" data-w="" d="M7 4h1v5h-1zM9 4h1v5h-1z"/><g data-a="trash" data-t="v"><path data-p="" d="M6 0h4v1h-4zM4 1h9v1h-9zM3 2h10v1h-10zM4 3h1v1h-1zM12 3h1v1h-1z"/><path data-p="" data-w="" d="M7 3h1v1h-1zM9 3h1v1h-1z"/></g>')