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

package/src/gen/index.tsx

@@ -0,0 +1,5 @@
+// Generated by scripts/build.mjs from art/*.mjs: do not edit.
+import * as pack from './all'
+
+export * from './all'
+export default pack

package/src/gen/names.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/build.mjs from art/*.mjs: do not edit.
+export const names = ["accessibility","activity","alarm","alert","alert-circle","align-center","align-justify","align-left","align-right","ampersand","anchor","antenna","api","archive","area-chart","arrow-down","arrow-down-circle","arrow-down-left","arrow-down-right","arrow-down-square","arrow-left","arrow-left-circle","arrow-left-right","arrow-right","arrow-right-circle","arrow-up","arrow-up-circle","arrow-up-down","arrow-up-left","arrow-up-right","arrow-up-square","asterisk","at","at-sign","atom","attachment","award","badge","badge-check","bag","ban","bandage","bank","banknote","bar-chart","bar-chart-h","barcode","basket","bath","battery","battery-charging","battery-full","battery-low","beaker","bed","beer","bell","bell-check","bell-off","bell-plus","bell-ring","bike","binary","board","bold","bolt","book","book-closed","book-open","bookmark","bookmark-check","bookmark-plus","bookmark-x","books","bot","box","braces","brackets","brain","branch","breadcrumb","briefcase","broadcast","broom","brush","bug","bug-off","building","bullseye","bus","cake","calculator","calendar","cam","cam-off","camera","camp","candlestick","captions","car","card","cart","cart-check","cart-plus","cart-x","cast","chat","chat-check","chat-dots","chat-heart","chat-off","chat-plus","chat-x","chats","check","check-circle","check-square","checks","chevron-down-circle","chevron-left-circle","chevron-right-circle","chevron-up-circle","chevrons-down","chevrons-left","chevrons-right","chevrons-up","chevrons-updown","circle","clapper","clear","clipboard","clipboard-check","clipboard-list","clipboard-plus","clipboard-x","clock","cloud","cloud-check","cloud-down","cloud-drizzle","cloud-fog","cloud-lightning","cloud-moon","cloud-off","cloud-rain","cloud-snow","cloud-sun","cloud-up","code","code-block","coffee","coin","coins","columns","command","comment","comment-lines","commit","compass","compasses","contact","container","cookie","copy","copy-check","copy-plus","copyright","corner-down-left","corner-down-right","corner-right-down","corner-right-up","corner-up-left","corner-up-right","cpu","credit-chip","crop","crosshair","crown","cube","cubes","cup","cursor","cursor-text","database","database-lock","database-plus","deploy","desktop","diamond","dice","disc","discount","divide","dollar","donut-chart","door","dot-circle","down","download","drag","drive","droplet","droplets","dropper","dumbbell","ear","ear-off","earbuds","edit","edit-box","envelope","environment","equalizer","equals","eraser","euro","exclamation","expand","external","eye","eye-off","face-laugh","face-neutral","face-sad","face-wink","factory","fast-forward","file","file-audio","file-chart","file-check","file-code","file-down","file-image","file-lock","file-minus","file-pen","file-plus","file-search","file-text","file-up","file-video","file-x","file-zip","files","film","filter","fingerprint","first-page","fish","flag","flame","flash","flash-off","flask","flip-horizontal","flip-vertical","flower","focus","folder","folder-check","folder-down","folder-lock","folder-minus","folder-open","folder-plus","folder-tree","folder-up","folder-x","forward","fuel","fullscreen","function","funnel","gallery","gamepad","gauge","gem","ghost","gift","gift-card","git-commit","git-compare","git-fork","git-merge","git-pull","glasses","globe","graduation-cap","greater-than","grid","grip","grip-horizontal","hammer","hand","hand-coins","hand-helping","hand-wave","hard-drive","hash","hat","heading","headphones","heart","heart-off","heart-plus","heart-pulse","help","hexagon","hierarchy","highlighter","histogram","history","home","hospital","hourglass","house","id-card","image","image-off","image-plus","inbox","inbox-box","indent","infinity","info","invoice","italic","joystick","kanban","key","key-round","keyboard","lamp","laptop","last-page","layers","layers-plus","layout","leaf","leave","left","less-than","library","lightbulb","lightbulb-off","line-chart","link","list","list-ordered","loader","locate","lock","lock-open","log-in","log-list","log-out","magnet","mail","mail-check","mail-open","mail-plus","mail-x","map","map-fold","matrix","medal","medical-cross","megaphone","memory","mention","menu","message-question","mic","mic-off","microscope","milestone","minus","minus-circle","minus-square","monitor","moon","moon-star","more","more-vertical","mountain","mouse","move","music","music-note","navigation","network","newspaper","nodes","not-equal","note","notebook","octagon","outbox","outdent","package","package-open","paint-bucket","palette","panel","panel-bottom","panel-top","paperclip","paragraph","parchment","parking","pause","pause-circle","paw","pen","pen-line","pen-tool","pencil","pentagon","percent","phone","phone-call","phone-in","phone-off","phone-out","pi","picture-in-picture","pie-chart","piggy-bank","pill","pin","pin-off","pizza","plane","play","play-circle","playlist","plug","plus","plus-circle","plus-minus","plus-square","podcast","pointer","pound","power","present","printer","projector","pulse","puzzle","qr-code","question","quote","rack","radio","radioactive","rainbow","receipt","record","recycle","redo","refresh","regex","registered","remote","repeat","repeat-one","reply","reply-all","rewind","right","rocket","rotate-ccw","rotate-cw","route","router","rss","ruler","safe","save","scale","scan","scatter-chart","school","scissors","scissors-line","scooter","screen","screwdriver","scroll","sd-card","search","search-x","section","send","server","settings","shapes","share","share-nodes","sheet","shield","shield-alert","shield-check","shield-off","shield-plus","shield-x","ship","shirt","shoe","shrink","shuffle","sidebar-left","sidebar-right","sigma","signal","signal-low","signpost","skip-back","skip-forward","skull","slash","sliders","smartphone","smile","snowflake","sofa","sort","sort-asc","sort-desc","sparkle","speaker","speed","spiral","sprout","square","stack","stacked-bars","stairs","stamp","star","star-half","stars","stethoscope","sticky-note","stop","stop-circle","stopwatch","store","strike","subtitles","sun","sunrise","sunset","swap","swap-vertical","sync","syringe","tab","table","table-columns","table-rows","tablet","tag","tape","target","team","tent","terminal","terminal-square","test-tube","text-cursor","thermometer","thumbs-down","thumbs-up","thumbtack","ticket","timer","to-bottom","to-top","toggle-off","toggle-on","token","tornado","traffic-cone","train","translate","trash","trash-x","tree","tree-round","trending-down","trending-up","triangle","trophy","truck","turn-left","turn-right","tv","type","u-turn","umbrella","underline","undo","unlink","unlock","unplug","up","upload","usb","user","user-check","user-circle","user-cog","user-minus","user-plus","user-search","user-x","users","utensils","variable","video","voicemail","volume","volume-low","volume-mute","volume-off","wallet","wand","warehouse","watch","waveform","waves","weave","webcam","webhook","wifi","wifi-low","wifi-off","wind","window","windows","wine","wrench","x","x-circle","x-square","yen","zoom-in","zoom-out"] as const
+export type IconName = (typeof names)[number]
+export type IconVariant = 'solid' | 'action'
+export const actions = ["trash","bell","check","refresh","copy"] as const
+export type IconActionName = (typeof actions)[number]

package/src/icon.tsx

@@ -0,0 +1,18 @@
+// `<Icon name>`. Literal names compile to the icon itself; what reaches this file is a name the build could only bound,
+// or not bound at all, and @weft-js/warp-icons/names holds exactly those.
+import { resolve, type IconActionName, type IconName, type IconVariant } from '@weft-js/warp-icons/names'
+import { untrack } from '@weft-js/core'
+import type { IconTrigger } from './action'
+import type { IconComponent, IconProps } from './svg'
+
+export type { IconName, IconVariant }
+/** An icon by name, or the icon itself. */
+export type IconRef = IconName | IconComponent
+/** `<Icon>`'s props: a name, and `solid` or `action` with a name that has one. */
+export type IconByNameProps = ({ name: IconRef; solid?: boolean; action?: undefined } | { name: IconActionName; action: IconTrigger | boolean; solid?: undefined }) & IconProps
+
+/** An icon by name. A literal name compiles to the icon itself; anything else is looked up at runtime. */
+export function Icon({ name, solid, ...rest }: IconByNameProps) {
+  const Draw = untrack(() => (typeof name === 'function' ? name : resolve(name, rest.action ? 'action' : solid ? 'solid' : undefined)))
+  return Draw ? <Draw {...rest} /> : null
+}

package/src/icons.css

@@ -0,0 +1,29 @@
+/* Every @weft-js/warp-icons svg, with or without warp. warp's own base rule says the same; this one lets the set stand alone. */
+/* warp's layer order, first: a layer ranks by when the page first names it, and this file can load before warp.css. */
+@layer warp.tokens, warp.base, warp.signature, warp.layout, warp.components, warp.inputs, warp.inputs-rich, warp.data, warp.app, warp.flows, warp.marketing, warp.canvas, warp.flow;
+@layer warp.components {
+  :where(svg[data-icon]) { inline-size: var(--warp-icon-md, 1em); block-size: var(--warp-icon-md, 1em); flex: none; fill: none; stroke: currentColor; stroke-width: var(--warp-icon-stroke, 1.5); stroke-linecap: round; stroke-linejoin: round; }
+    /* weights: each tier has its own, on the path, so they hold when a build compiles the tier switch out */
+  :where(svg[data-icon] [data-qs]) { stroke-width: 1; }
+  :where(svg[data-icon] [data-bs]) { stroke-width: 2; }
+  :where(svg[data-icon] [data-bw]) { stroke-width: 2.5; }
+  /* the weft, the stroke that says what the icon means: colour it with --warp-icon-weft-color */
+  :where(svg[data-icon] [data-w]) { stroke: var(--warp-icon-weft-color, currentColor); }
+  /* pixels: a 16 grid in the 24 box. In forced colours currentColor is the system's, so these follow it. */
+  :where(svg[data-icon] [data-p], svg[data-icon] [data-c]) { stroke: none; transform: scale(1.5); shape-rendering: crispEdges; }
+  :where(svg[data-icon] [data-p]) { fill: currentColor; }
+  :where(svg[data-icon] [data-p][data-w]) { fill: var(--warp-icon-weft-color, currentColor); }
+  /* An icon picks its form from its own size (10 §6). Dither is depth, and at 16 px it reads as noise, so it needs 20. */
+  :where(svg[data-icon]) { container-type: size; }
+  :where(svg[data-icon] [data-d]) { opacity: 0; }
+  @container (min-width: 20px) { :where(svg[data-icon] [data-d]) { opacity: 1; } }
+  /* solid: a filled body, its offset shade, and what's cut from it */
+  :where(svg[data-icon] [data-s]) { fill: currentColor; stroke: none; }
+  :where(svg[data-icon] [data-sh]) { stroke: currentColor; stroke-width: 1.5; }
+  :where(svg[data-icon] [data-so]) { fill: currentColor; fill-opacity: .3; stroke: none; }
+  :where(svg[data-icon] [data-k]) { stroke: var(--warp-icon-knock, Canvas); stroke-width: 2.5; }
+  :where(svg[data-icon] [data-k][data-qs]) { stroke-width: 1.5; }
+  :where(svg[data-icon] [data-hi]) { stroke-width: 1.25; }
+  :where(svg[data-icon] [data-c]) { fill: var(--warp-icon-knock, Canvas); }
+  @media (forced-colors: active) { :where(svg[data-icon] [data-so]) { display: none; } }
+}

package/src/late.tsx

@@ -0,0 +1,36 @@
+// A name only known at runtime: the icon holds its box while it loads, on the server too, and fills in on the client. If it
+// can't load, the box stays, marked data-failed, and the page carries on.
+import { state } from '@weft-js/core'
+import type { IconComponent, IconProps } from './svg'
+import { icon, Svg } from './svg'
+
+type Lookup = (name: string, variant?: string) => IconComponent | undefined | Promise<IconComponent | undefined>
+const held = new Map<string, IconComponent>()
+
+function deferred(key: string, find: () => Promise<IconComponent | undefined>): IconComponent {
+  let made = held.get(key)
+  if (made) return made
+  let got: Promise<IconComponent | undefined> | undefined
+  made = (props: IconProps) => {
+    const ready = state<IconComponent | null>(null), failed = state(false)
+    if (typeof window !== 'undefined') (got ??= find()).then(i => { if (i) ready.value = i; else failed.value = true }, () => { got = undefined; failed.value = true })
+    return <>{ready.value ? ready.value(props) : <Svg {...props} data-loading={failed.value ? undefined : ''} data-failed={failed.value ? '' : undefined} html="" />}</>
+  }
+  held.set(key, made)
+  return made
+}
+
+let loaded: Promise<Lookup> | undefined
+/** From the pack, a chunk of its own: the first use on a page fetches it. */
+export const late = (name: string, variant: string | undefined, pack: () => Promise<Lookup>) => deferred(`${name}:${variant ?? ''}`, async () => (await (loaded ??= pack()))(name, variant))
+
+// Only paths go in, with their d and data attributes: what a remote host sends is data, never markup that can run.
+const clean = (svg: string) => (svg.match(/<path(?:\s+data-[a-z]+(?:="[^"<>]*")?|\s+d="[^"<>]*"|\s+transform="translate\([\d. ]+\)")*\s*\/>/g) ?? []).join('')
+
+/** From a host of static files (`weft icons publish`): one small fetch per icon. */
+export const remote = (source: string) => (name: string, variant?: string) => deferred(`${name}:${variant ?? ''}`, async () => {
+  const response = await fetch(`${source}${name}${variant ? `.${variant}` : ''}.svg`)
+  if (!response.ok) return undefined
+  const html = clean(await response.text())
+  return html ? icon(html) : undefined
+})

package/src/lookup.tsx

@@ -0,0 +1,9 @@
+// An icon by name. Apart from all.tsx so that names.tsx can use it without going through `Icon`, which imports names.tsx.
+import * as all from '@weft-js/warp-icons'
+import type { IconComponent } from '@weft-js/warp-icons'
+
+const table = all as unknown as Record<string, IconComponent>
+const title = (name: string) => name.replace(/(^|-)(.)/g, (_, __, c) => c.toUpperCase())
+
+/** The icon of a kebab-case name, in `solid` or `action` if asked: undefined for a name nobody drew. */
+export const lookup = (name: string, variant?: string): IconComponent | undefined => table[`${title(name)}Icon${variant ? variant[0]!.toUpperCase() + variant.slice(1) : ''}`]

package/src/names.tsx

@@ -0,0 +1,12 @@
+// A name to its icon. This file is what dev and tests see, with every icon in. A build swaps it for a module holding only
+// the names the app uses (compile.mjs), so nothing here reaches production unless a name is truly dynamic.
+import * as all from '@weft-js/warp-icons'
+import type { IconComponent } from '@weft-js/warp-icons'
+import type { IconActionName, IconName, IconVariant } from './gen/names'
+import { lookup } from './lookup'
+
+export type { IconActionName, IconName, IconVariant }
+/** The icon of a name, or undefined. A build's version knows only the names the app uses. */
+export const resolve = lookup
+/** `Icons[id]` for an id only known at runtime. The build's version does the same over what it kept. */
+export const pack = (id: string) => (all as unknown as Record<string, IconComponent>)[id]

package/src/set.tsx

@@ -0,0 +1,13 @@
+// `<Icon name>` over the icons you list: a name is a lookup, so only a list can stay tree-shakable. `@weft-js/warp-icons/all` is
+// the same thing over every icon, for an app that takes names from data. An icon itself passes straight through.
+import { untrack } from '@weft-js/core'
+import type { IconComponent, IconProps } from './svg'
+
+/** An `<Icon>` over these icons only: names stay typed, and whatever isn't listed tree-shakes away. */
+export function iconSet<const S extends Record<string, IconComponent>>(icons: S) {
+  return function Icon({ name, ...rest }: { name: (keyof S & string) | IconComponent } & IconProps) {
+    const icon = untrack(() => name)
+    const Draw: IconComponent = typeof icon === 'function' ? icon : icons[icon]!
+    return <Draw {...rest} />
+  }
+}

package/src/svg.tsx

@@ -0,0 +1,31 @@
+// The one <svg> every icon renders. An icon is its drawing as a string, so it costs that string and nothing per icon.
+// Decorative unless it is given a `label`.
+import type { JSX } from '@weft-js/core/jsx-runtime'
+import './icons.css'
+
+/** What every icon takes. Anything else lands on the `<svg>`. */
+export type IconProps = {
+  /** An accessible name: the icon becomes role="img". Without one it is aria-hidden. */
+  label?: string | undefined
+  /** Width and height, in px or any CSS length. warp's own sizes apply otherwise. */
+  size?: number | string | undefined
+  /** Show this tier whatever the page's expression is. */
+  tier?: 'quiet' | 'balanced' | 'vivid' | undefined
+  /** Inline CSS. `size` goes in front of it. */
+  style?: string | undefined
+  [attr: string]: unknown
+}
+/** One icon. Each is a plain component, so an unused one tree-shakes. */
+export type IconComponent = (props: IconProps) => JSX.Element
+
+const length = (size: number | string) => (typeof size === 'number' ? `${size}px` : size)
+
+export function Svg({ label, size, tier, html, style, ...rest }: IconProps & { html: string }) {
+  // oxlint-disable-next-line weft/no-html-sink -- `html` is this package's generated art: `icon` and `acting` set it after the props spread, so no caller reaches it
+  return <svg data-icon data-expression={tier} viewBox="0 0 24 24" role={label ? 'img' : undefined} aria-label={label} aria-hidden={label ? undefined : 'true'} focusable="false" style={size === undefined ? style : `width:${length(size)};height:${length(size)}${style ? `;${style}` : ''}`} innerHTML={html} {...rest} />
+}
+
+/*#__NO_SIDE_EFFECTS__*/
+export function icon(line: string, pixels = ''): IconComponent {
+  return p => <Svg {...p} html={line + pixels} />
+}

package/src/tiers.css

@@ -0,0 +1,15 @@
+/* The runtime tier switch. warp's expression stops set these four properties, so the nearest data-expression wins with
+   no script and no reflow; a page without warp shows balanced. */
+/* warp's layer order, first: a layer ranks by when the page first names it, and this file can load before warp.css. */
+@layer warp.tokens, warp.base, warp.signature, warp.layout, warp.components, warp.inputs, warp.inputs-rich, warp.data, warp.app, warp.flows, warp.marketing, warp.canvas, warp.flow;
+@layer warp.components {
+  :where(svg[data-icon] [data-t="o"]) { display: var(--warp-icon-o, inline); }
+  :where(svg[data-icon] [data-t="q"]) { display: var(--warp-icon-q, none); }
+  :where(svg[data-icon] [data-t="b"]) { display: var(--warp-icon-b, inline); }
+  :where(svg[data-icon] [data-t="v"]) { display: var(--warp-icon-v, none); }
+  /* Pixels need whole cells: under 16 px they lose rows, so the pixel tier shows the balanced line there (--warp-icon-fine). */
+  @container (max-width: 15.5px) {
+    :where(svg[data-icon] [data-t="b"]) { display: var(--warp-icon-fine, var(--warp-icon-b, inline)); }
+    :where(svg[data-icon] [data-t="v"]) { display: none; }
+  }
+}