@panphora/bevel 0.1.1 → 0.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.
Files changed (7) hide show
  1. package/README.md +8 -0
  2. package/examples/setup-peers.mjs +1 -1
  3. package/icons/icons.d.ts +127 -0
  4. package/icons/icons.js +257 -627
  5. package/package.json +1 -1
  6. package/vendor/richclay/provenance.json +2 -2
  7. package/vendor/richclay/richclay.js +48 -30
package/README.md CHANGED
@@ -48,6 +48,14 @@ const labelled = bevelIcon('warning', { size: 20, label: 'Warning' })
48
48
 
49
49
  `size` defaults to 16 and sets both dimensions. Without `label`, the result is hidden from assistive technology. With `label`, it has `role="img"` and the supplied `aria-label`. Every drawing inherits `currentColor`.
50
50
 
51
+ `bevelIcon` reaches every drawing through `ICONS`, so a bundle that imports it carries all of them. To bundle only the icons you use, import each drawing by name and render it with `renderIcon`. The export name is `icon` followed by the public name in PascalCase:
52
+
53
+ ```js
54
+ import { renderIcon, iconComment, iconChevronLeft } from '@panphora/bevel/icons'
55
+
56
+ const comment = renderIcon(iconComment, { size: 17 })
57
+ ```
58
+
51
59
  The `@panphora/bevel/icons.svg` export contains one symbol per name. Copy or serve it as an asset, then reference `#bevel-icon-<name>`:
52
60
 
53
61
  ```html
package/examples/setup-peers.mjs CHANGED
@@ -7,7 +7,7 @@ const distributions = {
7
7
  richclay: ["richclay.js", "richclay.css", "LICENSE", "THIRD-PARTY-NOTICES.md", "vendor/squire.js", "vendor/squire.provenance.json", "vendor/SQUIRE-LICENSE", "vendor/purify.min.js", "vendor/DOMPURIFY-LICENSE", "vendor/DOMPURIFY-LICENSE-MPL"],
8
8
  quickcrop: ["quickcrop.js", "quickcrop.css", "LICENSE"],
9
9
  hypercms: ["dist/hypercms.min.js", "LICENSE"],
10
- "clay-mutation": ["src/lib/mutation.js", "src/lib/extension-noise.js", "src/lib/region-policy.js", "src/lib/region-capabilities.js", "src/lib/root-attrs.js", "src/lib/user-gesture.js", "LICENSE"]
10
+ "clay-mutation": ["src/lib/mutation.js", "src/lib/extension-noise.js", "src/lib/region-policy.js", "src/lib/region-capabilities.js", "src/lib/root-attrs.js", "src/lib/user-gesture.js", "src/lib/ephemeral.js", "LICENSE"]
11
11
  };
12
12
  const packageNames = { hypercms: "@panphora/hyper-cms", "clay-mutation": "@panphora/clayjs" };
13
13
  const [name, source] = process.argv.slice(2);
package/icons/icons.d.ts CHANGED
@@ -9,9 +9,136 @@ export interface BevelIconDefinition {
9
9
 
10
10
  export const ICONS: Readonly<Record<BevelIconName, BevelIconDefinition>>;
11
11
 
12
+ export const iconPlus: BevelIconDefinition;
13
+ export const iconMore: BevelIconDefinition;
14
+ export const iconSearch: BevelIconDefinition;
15
+ export const iconFilter: BevelIconDefinition;
16
+ export const iconChevron: BevelIconDefinition;
17
+ export const iconCheck: BevelIconDefinition;
18
+ export const iconClock: BevelIconDefinition;
19
+ export const iconComment: BevelIconDefinition;
20
+ export const iconFlag: BevelIconDefinition;
21
+ export const iconBoard: BevelIconDefinition;
22
+ export const iconLock: BevelIconDefinition;
23
+ export const iconDoc: BevelIconDefinition;
24
+ export const iconShare: BevelIconDefinition;
25
+ export const iconSort: BevelIconDefinition;
26
+ export const iconArrow: BevelIconDefinition;
27
+ export const iconTemplate: BevelIconDefinition;
28
+ export const iconCollapseLeft: BevelIconDefinition;
29
+ export const iconCollapseRight: BevelIconDefinition;
30
+ export const iconChevronLeft: BevelIconDefinition;
31
+ export const iconChevronRight: BevelIconDefinition;
32
+ export const iconChevronUp: BevelIconDefinition;
33
+ export const iconChevronDown: BevelIconDefinition;
34
+ export const iconFolder: BevelIconDefinition;
35
+ export const iconArrowUp: BevelIconDefinition;
36
+ export const iconUnlink: BevelIconDefinition;
37
+ export const iconGrid: BevelIconDefinition;
38
+ export const iconShareNodes: BevelIconDefinition;
39
+ export const iconSpinner: BevelIconDefinition;
40
+ export const iconSettings: BevelIconDefinition;
41
+ export const iconHome: BevelIconDefinition;
42
+ export const iconStar: BevelIconDefinition;
43
+ export const iconKey: BevelIconDefinition;
44
+ export const iconCheckCircle: BevelIconDefinition;
45
+ export const iconXCircle: BevelIconDefinition;
46
+ export const iconMenu: BevelIconDefinition;
47
+ export const iconCrop: BevelIconDefinition;
48
+ export const iconInfo: BevelIconDefinition;
49
+ export const iconBell: BevelIconDefinition;
50
+ export const iconGlobe: BevelIconDefinition;
51
+ export const iconSun: BevelIconDefinition;
52
+ export const iconCloud: BevelIconDefinition;
53
+ export const iconDatabase: BevelIconDefinition;
54
+ export const iconMinus: BevelIconDefinition;
55
+ export const iconSidebar: BevelIconDefinition;
56
+ export const iconFolderPlus: BevelIconDefinition;
57
+ export const iconFilePlus: BevelIconDefinition;
58
+ export const iconFolderOpen: BevelIconDefinition;
59
+ export const iconMove: BevelIconDefinition;
60
+ export const iconRename: BevelIconDefinition;
61
+ export const iconSplit: BevelIconDefinition;
62
+ export const iconPalette: BevelIconDefinition;
63
+ export const iconZoomIn: BevelIconDefinition;
64
+ export const iconCrown: BevelIconDefinition;
65
+ export const iconUsers: BevelIconDefinition;
66
+ export const iconUserPlus: BevelIconDefinition;
67
+ export const iconBilling: BevelIconDefinition;
68
+ export const iconPaintBrush: BevelIconDefinition;
69
+ export const iconClearFormatting: BevelIconDefinition;
70
+ export const iconDocs: BevelIconDefinition;
71
+ export const iconBug: BevelIconDefinition;
72
+ export const iconShieldCheck: BevelIconDefinition;
73
+ export const iconWrap: BevelIconDefinition;
74
+ export const iconFloppyDisk: BevelIconDefinition;
75
+ export const iconParagraph: BevelIconDefinition;
76
+ export const iconUpload: BevelIconDefinition;
77
+ export const iconDiscover: BevelIconDefinition;
78
+ export const iconSparkle: BevelIconDefinition;
79
+ export const iconChartBarHorizontal: BevelIconDefinition;
80
+ export const iconPlay: BevelIconDefinition;
81
+ export const iconH1: BevelIconDefinition;
82
+ export const iconH2: BevelIconDefinition;
83
+ export const iconH3: BevelIconDefinition;
84
+ export const iconClip: BevelIconDefinition;
85
+ export const iconTimeline: BevelIconDefinition;
86
+ export const iconLink: BevelIconDefinition;
87
+ export const iconClose: BevelIconDefinition;
88
+ export const iconImage: BevelIconDefinition;
89
+ export const iconGroup: BevelIconDefinition;
90
+ export const iconBlocked: BevelIconDefinition;
91
+ export const iconExpand: BevelIconDefinition;
92
+ export const iconPencil: BevelIconDefinition;
93
+ export const iconCopy: BevelIconDefinition;
94
+ export const iconArchive: BevelIconDefinition;
95
+ export const iconTrash: BevelIconDefinition;
96
+ export const iconOffline: BevelIconDefinition;
97
+ export const iconUser: BevelIconDefinition;
98
+ export const iconGrip: BevelIconDefinition;
99
+ export const iconHighlight: BevelIconDefinition;
100
+ export const iconRefresh: BevelIconDefinition;
101
+ export const iconHistory: BevelIconDefinition;
102
+ export const iconHelp: BevelIconDefinition;
103
+ export const iconMail: BevelIconDefinition;
104
+ export const iconMoon: BevelIconDefinition;
105
+ export const iconTerminal: BevelIconDefinition;
106
+ export const iconFileCode: BevelIconDefinition;
107
+ export const iconSignOut: BevelIconDefinition;
108
+ export const iconExternal: BevelIconDefinition;
109
+ export const iconDownload: BevelIconDefinition;
110
+ export const iconEye: BevelIconDefinition;
111
+ export const iconPin: BevelIconDefinition;
112
+ export const iconTag: BevelIconDefinition;
113
+ export const iconWarning: BevelIconDefinition;
114
+ export const iconCalendar: BevelIconDefinition;
115
+ export const iconEyeOff: BevelIconDefinition;
116
+ export const iconUndo: BevelIconDefinition;
117
+ export const iconRedo: BevelIconDefinition;
118
+ export const iconHeading: BevelIconDefinition;
119
+ export const iconBold: BevelIconDefinition;
120
+ export const iconItalic: BevelIconDefinition;
121
+ export const iconUnderline: BevelIconDefinition;
122
+ export const iconStrikethrough: BevelIconDefinition;
123
+ export const iconCode: BevelIconDefinition;
124
+ export const iconList: BevelIconDefinition;
125
+ export const iconListNumbers: BevelIconDefinition;
126
+ export const iconQuote: BevelIconDefinition;
127
+ export const iconOutdent: BevelIconDefinition;
128
+ export const iconIndent: BevelIconDefinition;
129
+ export const iconTeam: BevelIconDefinition;
130
+ export const iconLinkSimple: BevelIconDefinition;
131
+ export const iconQrCode: BevelIconDefinition;
132
+ export const iconFileHtml: BevelIconDefinition;
133
+ export const iconCursor: BevelIconDefinition;
134
+ export const iconInvite: BevelIconDefinition;
135
+ export const iconHyperclayLocal: BevelIconDefinition;
136
+
12
137
  export interface BevelIconOptions {
13
138
  size?: number | string;
14
139
  label?: string;
15
140
  }
16
141
 
17
142
  export function bevelIcon(name: BevelIconName | string, options?: BevelIconOptions): string;
143
+
144
+ export function renderIcon(icon: BevelIconDefinition, options?: BevelIconOptions): string;