@super-ic/sbr-icon-contracts 0.0.0-oidc-bootstrap.0 → 0.1.3
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/README.md +131 -1
- package/dist/index.d.ts +34 -0
- package/dist/index.js +264 -0
- package/dist/nucleo-micro.d.ts +1 -0
- package/dist/nucleo-micro.js +62 -0
- package/dist/nucleo.d.ts +1 -0
- package/dist/nucleo.js +58 -0
- package/package.json +49 -7
package/README.md
CHANGED
|
@@ -1,3 +1,133 @@
|
|
|
1
1
|
# @super-ic/sbr-icon-contracts
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The SBR tenant semantic icon contract. It adds 57 tenant-specific semantic icon IDs on top of the
|
|
4
|
+
36 core IDs in `@super-ic/icon-contracts`, giving a composite surface of 93 unique semantic IDs, and
|
|
5
|
+
it exposes two React components that will not render an icon unless the caller has made an explicit
|
|
6
|
+
accessibility decision.
|
|
7
|
+
|
|
8
|
+
Semantic IDs are the API. Vendor glyph component names are an implementation detail that this
|
|
9
|
+
package owns and may re-map; consumers must never import a glyph component directly.
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```sh
|
|
14
|
+
npm i @super-ic/sbr-icon-contracts
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Peers you provide:
|
|
18
|
+
|
|
19
|
+
| Peer | Range | Why |
|
|
20
|
+
| --- | --- | --- |
|
|
21
|
+
| `react` | `>=19.0.0` | The exported components are React components. |
|
|
22
|
+
|
|
23
|
+
There is no `react-dom` peer: nothing in `dist/` touches the DOM renderer, and no `@super-ic/foundation`
|
|
24
|
+
peer either, because this package emits no CSS and reads no design token. Icons inherit `currentColor`
|
|
25
|
+
and size from the props below, so a consumer that never installs the token layer still renders correct
|
|
26
|
+
icons. If you are also consuming `@super-ic/web-patterns` or `@super-ic/app-patterns`, the foundation
|
|
27
|
+
token import is required by those packages, not by this one.
|
|
28
|
+
|
|
29
|
+
`nucleo-ui-outline-18` is an **optional peer**. This package installs without
|
|
30
|
+
a licence. Rendering requires importing `@super-ic/sbr-icon-contracts/nucleo`
|
|
31
|
+
once at the application root, which requires the licensed vendor package. See
|
|
32
|
+
"Vendor licence gate" below.
|
|
33
|
+
|
|
34
|
+
## Usage
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import "@super-ic/sbr-icon-contracts/nucleo";
|
|
38
|
+
import "@super-ic/icon-contracts/nucleo";
|
|
39
|
+
import { SbrIcon, SupericIcon } from "@super-ic/sbr-icon-contracts";
|
|
40
|
+
|
|
41
|
+
// Decorative: the icon repeats adjacent text, so it is hidden from assistive tech.
|
|
42
|
+
<SbrIcon name="navigation.home" decorative size={20} />
|
|
43
|
+
|
|
44
|
+
// Meaningful: the icon is the only carrier of the meaning, so it needs a label.
|
|
45
|
+
<SbrIcon name="trust.residency-verified" decorative={false} label="Residency verified" size={18} />
|
|
46
|
+
|
|
47
|
+
// SupericIcon accepts core IDs and SBR IDs from the same union.
|
|
48
|
+
<SupericIcon name="action.search" decorative={false} label="Search" />
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## The `decorative` discriminator
|
|
52
|
+
|
|
53
|
+
`decorative` is a required discriminated-union tag, not an optional hint. There is no default, and the
|
|
54
|
+
component **throws at render** rather than emitting an inaccessible icon. Two shapes are legal and
|
|
55
|
+
nothing else is:
|
|
56
|
+
|
|
57
|
+
| Shape | Meaning | What renders |
|
|
58
|
+
| --- | --- | --- |
|
|
59
|
+
| `{ decorative: true }`, `label` absent | The icon adds no information a screen reader needs | `aria-hidden="true"`, no `aria-label`, no `role` |
|
|
60
|
+
| `{ decorative: false, label: "…" }` | The icon carries meaning on its own | `aria-label="<label>"` plus `role="img"` |
|
|
61
|
+
|
|
62
|
+
Three render-time throws enforce it:
|
|
63
|
+
|
|
64
|
+
| Call | Error message |
|
|
65
|
+
| --- | --- |
|
|
66
|
+
| `decorative` missing, or any value other than `true`/`false` (`"yes"`, `0`, `null`) | `icon decorative discriminator must be true or false` |
|
|
67
|
+
| `decorative: true` with a `label` | `decorative icons cannot carry a label` |
|
|
68
|
+
| `decorative: false` with a missing, non-string, or whitespace-only `label` | `meaningful icon label must be a non-empty string` |
|
|
69
|
+
|
|
70
|
+
TypeScript rejects all three at compile time; the runtime checks exist because the boundary between a
|
|
71
|
+
typed design system and an untyped caller (JS consumers, JSON-driven renderers, `as any`) is exactly
|
|
72
|
+
where accessibility regressions enter. Treat a throw as a bug in the call site, never as something to
|
|
73
|
+
catch and swallow.
|
|
74
|
+
|
|
75
|
+
An unknown semantic ID throws too, from the lookup rather than the render: `getSbrNucleoIcon` and
|
|
76
|
+
`getSupericNucleoIcon` raise `UnknownIconNameError` ("unknown semantic icon name") for any ID outside
|
|
77
|
+
the contract, and `SbrIcon` / `SupericIcon` inherit that behaviour because they resolve the glyph before
|
|
78
|
+
rendering.
|
|
79
|
+
|
|
80
|
+
Both components also emit `data-semantic-icon="<id>"` and `data-icon-size="<size>"`, which is what
|
|
81
|
+
contract tests and visual gates assert against. Do not strip them.
|
|
82
|
+
|
|
83
|
+
## Props
|
|
84
|
+
|
|
85
|
+
Both components take the shared shape below plus the `decorative` discriminator above. `aria-hidden`,
|
|
86
|
+
`aria-label`, `role` and `name` are removed from the passthrough SVG props, because the discriminator
|
|
87
|
+
owns them.
|
|
88
|
+
|
|
89
|
+
| Prop | Type | Default | Notes |
|
|
90
|
+
| --- | --- | --- | --- |
|
|
91
|
+
| `name` | `SbrIconName` (`SbrIcon`) or `SupericIconName` (`SupericIcon`) | required | Semantic ID from the contract |
|
|
92
|
+
| `size` | `IconSize` (`12 \| 14 \| 16 \| 18 \| 20 \| 24 \| 32`) | `16` | Also written to `data-icon-size` |
|
|
93
|
+
| `strokeWidth` | `number` | `1.5` | Only override for a deliberate optical fix |
|
|
94
|
+
| `...rest` | `SVGProps<SVGSVGElement>` | none | `className`, `style`, `data-*` and so on |
|
|
95
|
+
|
|
96
|
+
## Exports
|
|
97
|
+
|
|
98
|
+
| Export | Kind | What it is |
|
|
99
|
+
| --- | --- | --- |
|
|
100
|
+
| `SbrIcon`, `SupericIcon` | components | The two renderers described above |
|
|
101
|
+
| `SBR_ICON_NAMES` | `readonly string[]` | The 57 tenant semantic IDs, frozen order |
|
|
102
|
+
| `SBR_ICON_VENDOR_EXPORTS` | `Record<SbrIconName, string>` | ID to glyph *export name*, for contract tests |
|
|
103
|
+
| `SBR_NUCLEO_ICON_EXPORTS` | alias | Same map as `SBR_ICON_VENDOR_EXPORTS` |
|
|
104
|
+
| `bindSbrGlyphs` | function | Synchronous glyph injection; `/nucleo` calls this |
|
|
105
|
+
| `getSbrNucleoIcon`, `getSupericNucleoIcon` | functions | Throwing lookups |
|
|
106
|
+
| `CORE_ICON_NAMES`, `ICON_SIZES`, `UnknownIconNameError`, `IconGlyphsNotBoundError`, `IconGlyphsIncompleteError` | re-exports | Re-exported from `@super-ic/icon-contracts` |
|
|
107
|
+
| `SbrIconName`, `SupericIconName`, `CoreIconName`, `IconSize` | types | Semantic ID and size unions |
|
|
108
|
+
| `SbrIconProps`, `SupericIconProps`, `IconProps` | types | The discriminated prop unions |
|
|
109
|
+
|
|
110
|
+
The tenant ID namespaces are `communication.*`, `marketplace.*`, `navigation.*`, `operations.*` and
|
|
111
|
+
`trust.*`. `SBR_ICON_NAMES` is the authoritative list; enumerate it rather than hardcoding IDs.
|
|
112
|
+
|
|
113
|
+
## Vendor licence gate
|
|
114
|
+
|
|
115
|
+
The package installs without a licence. Rendering requires importing
|
|
116
|
+
`@super-ic/sbr-icon-contracts/nucleo` once, which requires
|
|
117
|
+
`nucleo-ui-outline-18@1.5.0` and the environment variable `NUCLEO_LICENSE_KEY`
|
|
118
|
+
for the vendor's own install check. This README names the variable only.
|
|
119
|
+
|
|
120
|
+
Without that import, `SbrIcon` throws `IconGlyphsNotBoundError` and never
|
|
121
|
+
degrades to a placeholder glyph. The `/nucleo` adapter binds the SBR set
|
|
122
|
+
only. Import `@super-ic/icon-contracts/nucleo` as well before rendering
|
|
123
|
+
`SupericIcon` with a core name.
|
|
124
|
+
|
|
125
|
+
Nothing in `dist/` contains vendor glyph path data; only the mapping from
|
|
126
|
+
semantic IDs to vendor export names. The vendor package supplies the glyphs.
|
|
127
|
+
|
|
128
|
+
## Package shape
|
|
129
|
+
|
|
130
|
+
`type: "module"`, ESM only. Entries: `.` resolving to `dist/index.js` and
|
|
131
|
+
`./nucleo` resolving to `dist/nucleo.js`. `sideEffects` lists `./dist/nucleo.js`
|
|
132
|
+
so bundlers keep the binding call. The published tarball is `dist/` plus the
|
|
133
|
+
manifest and this README: no source, no tests, no build state.
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { SVGProps } from "react";
|
|
2
|
+
import { type CoreIconName, type IconGlyphFamily, type IconComponent, type IconSize, type NucleoIconComponent } from "@super-ic/icon-contracts";
|
|
3
|
+
export type { CoreIconName, IconSize } from "@super-ic/icon-contracts";
|
|
4
|
+
export { CORE_ICON_NAMES, ICON_SIZES, IconGlyphsIncompleteError, IconGlyphsNotBoundError, UnknownIconNameError, } from "@super-ic/icon-contracts";
|
|
5
|
+
export declare const SBR_ICON_NAMES: readonly ["communication.attachment", "communication.message", "communication.notification", "communication.read", "communication.review", "communication.send", "communication.sent", "marketplace.ask", "marketplace.book", "marketplace.borrow", "marketplace.category-electronics", "marketplace.category-garden", "marketplace.category-kids", "marketplace.category-kitchen", "marketplace.category-other", "marketplace.category-sports-outdoors", "marketplace.category-tools", "marketplace.delivery", "marketplace.fulfillment", "marketplace.item", "marketplace.location", "marketplace.plan", "marketplace.ride", "marketplace.service", "marketplace.share", "marketplace.vehicle", "marketplace.view-grid", "marketplace.view-list", "marketplace.view-map", "navigation.activity", "navigation.home", "navigation.marketplace", "navigation.profile", "navigation.saved", "navigation.settings", "operations.admin", "operations.approve", "operations.earnings", "operations.listings", "operations.moderation", "operations.payment-methods", "operations.provider", "operations.requests", "operations.steward", "trust.accessibility", "trust.appeal", "trust.blocked", "trust.case", "trust.incident", "trust.policy", "trust.privacy", "trust.report", "trust.residency", "trust.safety", "trust.security", "trust.support", "trust.residency-verified"];
|
|
6
|
+
export type SbrIconName = (typeof SBR_ICON_NAMES)[number];
|
|
7
|
+
export type SupericIconName = CoreIconName | SbrIconName;
|
|
8
|
+
export type SbrSemanticGlyphs = Record<SbrIconName, IconComponent>;
|
|
9
|
+
export declare const SBR_ICON_VENDOR_EXPORTS: Record<SbrIconName, string>;
|
|
10
|
+
/** Exact Micro Bold semantic map. The side-effect binding imports these components by name. */
|
|
11
|
+
export declare const SBR_MICRO_ICON_EXPORTS: Record<SbrIconName, string>;
|
|
12
|
+
export declare const SBR_NUCLEO_ICON_EXPORTS: Record<"communication.attachment" | "communication.message" | "communication.notification" | "communication.read" | "communication.review" | "communication.send" | "communication.sent" | "marketplace.ask" | "marketplace.book" | "marketplace.borrow" | "marketplace.category-electronics" | "marketplace.category-garden" | "marketplace.category-kids" | "marketplace.category-kitchen" | "marketplace.category-other" | "marketplace.category-sports-outdoors" | "marketplace.category-tools" | "marketplace.delivery" | "marketplace.fulfillment" | "marketplace.item" | "marketplace.location" | "marketplace.plan" | "marketplace.ride" | "marketplace.service" | "marketplace.share" | "marketplace.vehicle" | "marketplace.view-grid" | "marketplace.view-list" | "marketplace.view-map" | "navigation.activity" | "navigation.home" | "navigation.marketplace" | "navigation.profile" | "navigation.saved" | "navigation.settings" | "operations.admin" | "operations.approve" | "operations.earnings" | "operations.listings" | "operations.moderation" | "operations.payment-methods" | "operations.provider" | "operations.requests" | "operations.steward" | "trust.accessibility" | "trust.appeal" | "trust.blocked" | "trust.case" | "trust.incident" | "trust.policy" | "trust.privacy" | "trust.report" | "trust.residency" | "trust.safety" | "trust.security" | "trust.support" | "trust.residency-verified", string>;
|
|
13
|
+
/** Binds a complete SBR semantic set without exposing vendor component names. */
|
|
14
|
+
export declare function bindSbrSemanticGlyphs(glyphs: SbrSemanticGlyphs, family?: IconGlyphFamily): void;
|
|
15
|
+
export declare function bindSbrGlyphs(glyphs: Record<string, IconComponent>): void;
|
|
16
|
+
export declare function getSbrNucleoIcon(name: string): NucleoIconComponent;
|
|
17
|
+
export declare function getSbrNucleoIconFamily(name: string): IconGlyphFamily;
|
|
18
|
+
export declare function getSupericNucleoIcon(name: string): NucleoIconComponent;
|
|
19
|
+
type SharedIconProps<Name extends string> = Omit<SVGProps<SVGSVGElement>, "aria-hidden" | "aria-label" | "name" | "role"> & {
|
|
20
|
+
name: Name;
|
|
21
|
+
size?: IconSize;
|
|
22
|
+
};
|
|
23
|
+
type AccessibleIconProps<Name extends string> = (SharedIconProps<Name> & {
|
|
24
|
+
decorative: true;
|
|
25
|
+
label?: never;
|
|
26
|
+
}) | (SharedIconProps<Name> & {
|
|
27
|
+
decorative: false;
|
|
28
|
+
label: string;
|
|
29
|
+
});
|
|
30
|
+
export type SbrIconProps = AccessibleIconProps<SbrIconName>;
|
|
31
|
+
export type SupericIconProps = AccessibleIconProps<SupericIconName>;
|
|
32
|
+
export type IconProps = SupericIconProps;
|
|
33
|
+
export declare function SbrIcon(props: SbrIconProps): import("react").JSX.Element;
|
|
34
|
+
export declare function SupericIcon(props: SupericIconProps): import("react").JSX.Element;
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { CORE_ICON_NAMES, IconGlyphsIncompleteError, IconGlyphsNotBoundError, UnknownIconNameError, getNucleoIcon, getNucleoIconFamily, } from "@super-ic/icon-contracts";
|
|
3
|
+
export { CORE_ICON_NAMES, ICON_SIZES, IconGlyphsIncompleteError, IconGlyphsNotBoundError, UnknownIconNameError, } from "@super-ic/icon-contracts";
|
|
4
|
+
export const SBR_ICON_NAMES = [
|
|
5
|
+
"communication.attachment",
|
|
6
|
+
"communication.message",
|
|
7
|
+
"communication.notification",
|
|
8
|
+
"communication.read",
|
|
9
|
+
"communication.review",
|
|
10
|
+
"communication.send",
|
|
11
|
+
"communication.sent",
|
|
12
|
+
"marketplace.ask",
|
|
13
|
+
"marketplace.book",
|
|
14
|
+
"marketplace.borrow",
|
|
15
|
+
"marketplace.category-electronics",
|
|
16
|
+
"marketplace.category-garden",
|
|
17
|
+
"marketplace.category-kids",
|
|
18
|
+
"marketplace.category-kitchen",
|
|
19
|
+
"marketplace.category-other",
|
|
20
|
+
"marketplace.category-sports-outdoors",
|
|
21
|
+
"marketplace.category-tools",
|
|
22
|
+
"marketplace.delivery",
|
|
23
|
+
"marketplace.fulfillment",
|
|
24
|
+
"marketplace.item",
|
|
25
|
+
"marketplace.location",
|
|
26
|
+
"marketplace.plan",
|
|
27
|
+
"marketplace.ride",
|
|
28
|
+
"marketplace.service",
|
|
29
|
+
"marketplace.share",
|
|
30
|
+
"marketplace.vehicle",
|
|
31
|
+
"marketplace.view-grid",
|
|
32
|
+
"marketplace.view-list",
|
|
33
|
+
"marketplace.view-map",
|
|
34
|
+
"navigation.activity",
|
|
35
|
+
"navigation.home",
|
|
36
|
+
"navigation.marketplace",
|
|
37
|
+
"navigation.profile",
|
|
38
|
+
"navigation.saved",
|
|
39
|
+
"navigation.settings",
|
|
40
|
+
"operations.admin",
|
|
41
|
+
"operations.approve",
|
|
42
|
+
"operations.earnings",
|
|
43
|
+
"operations.listings",
|
|
44
|
+
"operations.moderation",
|
|
45
|
+
"operations.payment-methods",
|
|
46
|
+
"operations.provider",
|
|
47
|
+
"operations.requests",
|
|
48
|
+
"operations.steward",
|
|
49
|
+
"trust.accessibility",
|
|
50
|
+
"trust.appeal",
|
|
51
|
+
"trust.blocked",
|
|
52
|
+
"trust.case",
|
|
53
|
+
"trust.incident",
|
|
54
|
+
"trust.policy",
|
|
55
|
+
"trust.privacy",
|
|
56
|
+
"trust.report",
|
|
57
|
+
"trust.residency",
|
|
58
|
+
"trust.safety",
|
|
59
|
+
"trust.security",
|
|
60
|
+
"trust.support",
|
|
61
|
+
"trust.residency-verified",
|
|
62
|
+
];
|
|
63
|
+
export const SBR_ICON_VENDOR_EXPORTS = {
|
|
64
|
+
"communication.attachment": "IconPaperclipOutline18",
|
|
65
|
+
"communication.message": "IconMessageOutline18",
|
|
66
|
+
"communication.notification": "IconBellOutline18",
|
|
67
|
+
"communication.read": "IconMessageCheckOutline18",
|
|
68
|
+
"communication.review": "IconMessageStarOutline18",
|
|
69
|
+
"communication.send": "IconPaperPlaneOutline18",
|
|
70
|
+
"communication.sent": "IconMessageArrowRightOutline18",
|
|
71
|
+
"marketplace.ask": "IconCircleQuestionOutline18",
|
|
72
|
+
"marketplace.book": "IconCalendarCheckOutline18",
|
|
73
|
+
"marketplace.borrow": "IconHandHoldingBoxOutline18",
|
|
74
|
+
"marketplace.category-electronics": "IconLaptopOutline18",
|
|
75
|
+
"marketplace.category-garden": "IconFlowerOutline18",
|
|
76
|
+
"marketplace.category-kids": "IconChildOutline18",
|
|
77
|
+
"marketplace.category-kitchen": "IconKnifeForkOutline18",
|
|
78
|
+
"marketplace.category-other": "IconBoxOutline18",
|
|
79
|
+
"marketplace.category-sports-outdoors": "IconShirtSportOutline18",
|
|
80
|
+
"marketplace.category-tools": "IconWrenchOutline18",
|
|
81
|
+
"marketplace.delivery": "IconBagOutForDeliveryOutline18",
|
|
82
|
+
"marketplace.fulfillment": "IconBoxCheckOutline18",
|
|
83
|
+
"marketplace.item": "IconBoxOutline18",
|
|
84
|
+
"marketplace.location": "IconLocationOutline18",
|
|
85
|
+
"marketplace.plan": "IconCalendarPlanningOutline18",
|
|
86
|
+
"marketplace.ride": "IconCarOutline18",
|
|
87
|
+
"marketplace.service": "IconHammerOutline18",
|
|
88
|
+
"marketplace.share": "IconShareUpRightOutline18",
|
|
89
|
+
"marketplace.vehicle": "IconCarOutline18",
|
|
90
|
+
"marketplace.view-grid": "IconGrid2Outline18",
|
|
91
|
+
"marketplace.view-list": "IconBulletListOutline18",
|
|
92
|
+
"marketplace.view-map": "IconMapOutline18",
|
|
93
|
+
"navigation.activity": "IconChartActivityOutline18",
|
|
94
|
+
"navigation.home": "IconHouseOutline18",
|
|
95
|
+
"navigation.marketplace": "IconStorehouseOutline18",
|
|
96
|
+
"navigation.profile": "IconCircleUserOutline18",
|
|
97
|
+
"navigation.saved": "IconBookmarkOutline18",
|
|
98
|
+
"navigation.settings": "IconHouseSettingsOutline18",
|
|
99
|
+
"operations.admin": "IconUserSettingsOutline18",
|
|
100
|
+
"operations.approve": "IconCircleCheckOutline18",
|
|
101
|
+
"operations.earnings": "IconMoneyOutline18",
|
|
102
|
+
"operations.listings": "IconClipboardListOutline18",
|
|
103
|
+
"operations.moderation": "IconShieldOutline18",
|
|
104
|
+
"operations.payment-methods": "IconCreditCardOutline18",
|
|
105
|
+
"operations.provider": "IconUserConstructionWorkerOutline18",
|
|
106
|
+
"operations.requests": "IconClipboardArrowInOutline18",
|
|
107
|
+
"operations.steward": "IconUserShieldOutline18",
|
|
108
|
+
"trust.accessibility": "IconAccessibilityOutline18",
|
|
109
|
+
"trust.appeal": "IconArrowRotateClockwiseOutline18",
|
|
110
|
+
"trust.blocked": "IconBanOutline18",
|
|
111
|
+
"trust.case": "IconFolderOutline18",
|
|
112
|
+
"trust.incident": "IconReportOutline18",
|
|
113
|
+
"trust.policy": "IconFileCheckOutline18",
|
|
114
|
+
"trust.privacy": "IconLockOutline18",
|
|
115
|
+
"trust.report": "IconReportFileOutline18",
|
|
116
|
+
"trust.residency": "IconHouseOutline18",
|
|
117
|
+
"trust.safety": "IconSafetyHelmetOutline18",
|
|
118
|
+
"trust.security": "IconShieldLockOutline18",
|
|
119
|
+
"trust.support": "IconLifeRingOutline18",
|
|
120
|
+
"trust.residency-verified": "IconShieldCheckOutline18",
|
|
121
|
+
};
|
|
122
|
+
/** Exact Micro Bold semantic map. The side-effect binding imports these components by name. */
|
|
123
|
+
export const SBR_MICRO_ICON_EXPORTS = {
|
|
124
|
+
"communication.attachment": "IconPaperclip",
|
|
125
|
+
"communication.message": "IconMsg",
|
|
126
|
+
"communication.notification": "IconBell",
|
|
127
|
+
"communication.read": "IconMsgCheck",
|
|
128
|
+
"communication.review": "IconMsgStar",
|
|
129
|
+
"communication.send": "IconPaperPlane2",
|
|
130
|
+
"communication.sent": "IconMsgArrowRight",
|
|
131
|
+
"marketplace.ask": "IconCircleQuestion",
|
|
132
|
+
"marketplace.book": "IconCalendarCheck",
|
|
133
|
+
"marketplace.borrow": "IconHandHoldingKey",
|
|
134
|
+
"marketplace.category-electronics": "IconLaptop",
|
|
135
|
+
"marketplace.category-garden": "IconFlower",
|
|
136
|
+
"marketplace.category-kids": "IconChildHead",
|
|
137
|
+
"marketplace.category-kitchen": "IconBurger",
|
|
138
|
+
"marketplace.category-other": "IconBox",
|
|
139
|
+
"marketplace.category-sports-outdoors": "IconTShirt",
|
|
140
|
+
"marketplace.category-tools": "IconWrench",
|
|
141
|
+
"marketplace.delivery": "IconTruck",
|
|
142
|
+
"marketplace.fulfillment": "IconBoxCheck",
|
|
143
|
+
"marketplace.item": "IconBox",
|
|
144
|
+
"marketplace.location": "IconLocation",
|
|
145
|
+
"marketplace.plan": "IconCalendar",
|
|
146
|
+
"marketplace.ride": "IconCar",
|
|
147
|
+
"marketplace.service": "IconHammer",
|
|
148
|
+
"marketplace.share": "IconShareUpRight",
|
|
149
|
+
"marketplace.vehicle": "IconCar",
|
|
150
|
+
"marketplace.view-grid": "IconGrid2",
|
|
151
|
+
"marketplace.view-list": "IconBulletList",
|
|
152
|
+
"marketplace.view-map": "IconMap",
|
|
153
|
+
"navigation.activity": "IconChartActivity",
|
|
154
|
+
"navigation.home": "IconHouse",
|
|
155
|
+
"navigation.marketplace": "IconShop",
|
|
156
|
+
"navigation.profile": "IconCircleUser",
|
|
157
|
+
"navigation.saved": "IconBookmark",
|
|
158
|
+
"navigation.settings": "IconGear",
|
|
159
|
+
"operations.admin": "IconUserKey",
|
|
160
|
+
"operations.approve": "IconCircleCheck",
|
|
161
|
+
"operations.earnings": "IconMoney",
|
|
162
|
+
"operations.listings": "IconClipboardList",
|
|
163
|
+
"operations.moderation": "IconShield",
|
|
164
|
+
"operations.payment-methods": "IconCreditCard",
|
|
165
|
+
"operations.provider": "IconUser",
|
|
166
|
+
"operations.requests": "IconClipboard",
|
|
167
|
+
"operations.steward": "IconShieldUser",
|
|
168
|
+
"trust.accessibility": "IconAccessibility",
|
|
169
|
+
"trust.appeal": "IconArrowRotateClockwise",
|
|
170
|
+
"trust.blocked": "IconBan",
|
|
171
|
+
"trust.case": "IconFolder",
|
|
172
|
+
"trust.incident": "IconAlertWarning",
|
|
173
|
+
"trust.policy": "IconFileCheck",
|
|
174
|
+
"trust.privacy": "IconLock",
|
|
175
|
+
"trust.report": "IconFileAlert",
|
|
176
|
+
"trust.residency": "IconHouse",
|
|
177
|
+
"trust.safety": "IconConstructionSign",
|
|
178
|
+
"trust.security": "IconShield",
|
|
179
|
+
"trust.support": "IconLifeRing",
|
|
180
|
+
"trust.residency-verified": "IconShield",
|
|
181
|
+
};
|
|
182
|
+
export const SBR_NUCLEO_ICON_EXPORTS = SBR_ICON_VENDOR_EXPORTS;
|
|
183
|
+
let boundSbr = null;
|
|
184
|
+
/** Binds a complete SBR semantic set without exposing vendor component names. */
|
|
185
|
+
export function bindSbrSemanticGlyphs(glyphs, family = "outline-18") {
|
|
186
|
+
const next = {};
|
|
187
|
+
const missing = [];
|
|
188
|
+
for (const name of SBR_ICON_NAMES) {
|
|
189
|
+
const glyph = glyphs[name];
|
|
190
|
+
if (typeof glyph !== "function")
|
|
191
|
+
missing.push(name);
|
|
192
|
+
else
|
|
193
|
+
next[name] = glyph;
|
|
194
|
+
}
|
|
195
|
+
if (missing.length > 0)
|
|
196
|
+
throw new IconGlyphsIncompleteError(missing);
|
|
197
|
+
if (boundSbr) {
|
|
198
|
+
const same = boundSbr.family === family &&
|
|
199
|
+
SBR_ICON_NAMES.every((name) => boundSbr.glyphs[name] === next[name]);
|
|
200
|
+
if (!same)
|
|
201
|
+
throw new Error("sbr icon glyphs already bound to a different set");
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
boundSbr = { glyphs: next, family };
|
|
205
|
+
}
|
|
206
|
+
export function bindSbrGlyphs(glyphs) {
|
|
207
|
+
const semanticGlyphs = {};
|
|
208
|
+
const missing = [];
|
|
209
|
+
for (const name of SBR_ICON_NAMES) {
|
|
210
|
+
const exportName = SBR_ICON_VENDOR_EXPORTS[name];
|
|
211
|
+
const glyph = glyphs[exportName];
|
|
212
|
+
if (typeof glyph !== "function")
|
|
213
|
+
missing.push(exportName);
|
|
214
|
+
else
|
|
215
|
+
semanticGlyphs[name] = glyph;
|
|
216
|
+
}
|
|
217
|
+
if (missing.length > 0)
|
|
218
|
+
throw new IconGlyphsIncompleteError([...new Set(missing)]);
|
|
219
|
+
bindSbrSemanticGlyphs(semanticGlyphs);
|
|
220
|
+
}
|
|
221
|
+
export function getSbrNucleoIcon(name) {
|
|
222
|
+
if (!boundSbr) {
|
|
223
|
+
throw new IconGlyphsNotBoundError("@super-ic/sbr-icon-contracts/nucleo");
|
|
224
|
+
}
|
|
225
|
+
if (!Object.prototype.hasOwnProperty.call(boundSbr.glyphs, name)) {
|
|
226
|
+
throw new UnknownIconNameError(name);
|
|
227
|
+
}
|
|
228
|
+
return boundSbr.glyphs[name];
|
|
229
|
+
}
|
|
230
|
+
export function getSbrNucleoIconFamily(name) {
|
|
231
|
+
getSbrNucleoIcon(name);
|
|
232
|
+
return boundSbr.family;
|
|
233
|
+
}
|
|
234
|
+
export function getSupericNucleoIcon(name) {
|
|
235
|
+
if (CORE_ICON_NAMES.includes(name)) {
|
|
236
|
+
return getNucleoIcon(name);
|
|
237
|
+
}
|
|
238
|
+
return getSbrNucleoIcon(name);
|
|
239
|
+
}
|
|
240
|
+
function renderSemanticIcon(props, NucleoIcon, family) {
|
|
241
|
+
if (props.decorative !== true && props.decorative !== false) {
|
|
242
|
+
throw new Error("icon decorative discriminator must be true or false");
|
|
243
|
+
}
|
|
244
|
+
if (props.decorative === true) {
|
|
245
|
+
if (props.label !== undefined)
|
|
246
|
+
throw new Error("decorative icons cannot carry a label");
|
|
247
|
+
const { decorative: _decorative, label: _label, name, size = 16, strokeWidth, ...svgProps } = props;
|
|
248
|
+
return (_jsx(NucleoIcon, { ...svgProps, "data-icon-size": size, "data-semantic-icon": name, "data-icon-family": family === "micro-bold" ? family : undefined, size: size, "aria-hidden": true, ...(family === "micro-bold" && strokeWidth === undefined ? {} : { strokeWidth: strokeWidth ?? 1.5 }) }));
|
|
249
|
+
}
|
|
250
|
+
if (typeof props.label !== "string" || props.label.trim().length === 0) {
|
|
251
|
+
throw new Error("meaningful icon label must be a non-empty string");
|
|
252
|
+
}
|
|
253
|
+
const { decorative: _decorative, label, name, size = 16, strokeWidth, ...svgProps } = props;
|
|
254
|
+
return (_jsx(NucleoIcon, { ...svgProps, "data-icon-size": size, "data-semantic-icon": name, "data-icon-family": family === "micro-bold" ? family : undefined, size: size, "aria-label": label, role: "img", ...(family === "micro-bold" && strokeWidth === undefined ? {} : { strokeWidth: strokeWidth ?? 1.5 }) }));
|
|
255
|
+
}
|
|
256
|
+
export function SbrIcon(props) {
|
|
257
|
+
return renderSemanticIcon(props, getSbrNucleoIcon(props.name), getSbrNucleoIconFamily(props.name));
|
|
258
|
+
}
|
|
259
|
+
export function SupericIcon(props) {
|
|
260
|
+
const family = CORE_ICON_NAMES.includes(props.name)
|
|
261
|
+
? getNucleoIconFamily(props.name)
|
|
262
|
+
: getSbrNucleoIconFamily(props.name);
|
|
263
|
+
return renderSemanticIcon(props, getSupericNucleoIcon(props.name), family);
|
|
264
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { IconAccessibility, IconAlertWarning, IconArrowRotateClockwise, IconBan, IconBell, IconBookmark, IconBox, IconBoxCheck, IconBulletList, IconBurger, IconCalendar, IconCalendarCheck, IconCar, IconChartActivity, IconChildHead, IconCircleCheck, IconCircleQuestion, IconCircleUser, IconClipboard, IconClipboardList, IconConstructionSign, IconCreditCard, IconFileAlert, IconFileCheck, IconFlower, IconFolder, IconGear, IconGrid2, IconHammer, IconHandHoldingKey, IconHouse, IconLaptop, IconLifeRing, IconLocation, IconLock, IconMap, IconMoney, IconMsg, IconMsgArrowRight, IconMsgCheck, IconMsgStar, IconPaperPlane2, IconPaperclip, IconShareUpRight, IconShield, IconShieldUser, IconShop, IconTShirt, IconTruck, IconUser, IconUserKey, IconWrench, } from "nucleo-micro-bold";
|
|
2
|
+
import { bindSbrSemanticGlyphs } from "./index.js";
|
|
3
|
+
/** Licensed Micro Bold binding. Import once at application root before SbrIcon renders. */
|
|
4
|
+
bindSbrSemanticGlyphs({
|
|
5
|
+
"communication.attachment": IconPaperclip,
|
|
6
|
+
"communication.message": IconMsg,
|
|
7
|
+
"communication.notification": IconBell,
|
|
8
|
+
"communication.read": IconMsgCheck,
|
|
9
|
+
"communication.review": IconMsgStar,
|
|
10
|
+
"communication.send": IconPaperPlane2,
|
|
11
|
+
"communication.sent": IconMsgArrowRight,
|
|
12
|
+
"marketplace.ask": IconCircleQuestion,
|
|
13
|
+
"marketplace.book": IconCalendarCheck,
|
|
14
|
+
"marketplace.borrow": IconHandHoldingKey,
|
|
15
|
+
"marketplace.category-electronics": IconLaptop,
|
|
16
|
+
"marketplace.category-garden": IconFlower,
|
|
17
|
+
"marketplace.category-kids": IconChildHead,
|
|
18
|
+
"marketplace.category-kitchen": IconBurger,
|
|
19
|
+
"marketplace.category-other": IconBox,
|
|
20
|
+
"marketplace.category-sports-outdoors": IconTShirt,
|
|
21
|
+
"marketplace.category-tools": IconWrench,
|
|
22
|
+
"marketplace.delivery": IconTruck,
|
|
23
|
+
"marketplace.fulfillment": IconBoxCheck,
|
|
24
|
+
"marketplace.item": IconBox,
|
|
25
|
+
"marketplace.location": IconLocation,
|
|
26
|
+
"marketplace.plan": IconCalendar,
|
|
27
|
+
"marketplace.ride": IconCar,
|
|
28
|
+
"marketplace.service": IconHammer,
|
|
29
|
+
"marketplace.share": IconShareUpRight,
|
|
30
|
+
"marketplace.vehicle": IconCar,
|
|
31
|
+
"marketplace.view-grid": IconGrid2,
|
|
32
|
+
"marketplace.view-list": IconBulletList,
|
|
33
|
+
"marketplace.view-map": IconMap,
|
|
34
|
+
"navigation.activity": IconChartActivity,
|
|
35
|
+
"navigation.home": IconHouse,
|
|
36
|
+
"navigation.marketplace": IconShop,
|
|
37
|
+
"navigation.profile": IconCircleUser,
|
|
38
|
+
"navigation.saved": IconBookmark,
|
|
39
|
+
"navigation.settings": IconGear,
|
|
40
|
+
"operations.admin": IconUserKey,
|
|
41
|
+
"operations.approve": IconCircleCheck,
|
|
42
|
+
"operations.earnings": IconMoney,
|
|
43
|
+
"operations.listings": IconClipboardList,
|
|
44
|
+
"operations.moderation": IconShield,
|
|
45
|
+
"operations.payment-methods": IconCreditCard,
|
|
46
|
+
"operations.provider": IconUser,
|
|
47
|
+
"operations.requests": IconClipboard,
|
|
48
|
+
"operations.steward": IconShieldUser,
|
|
49
|
+
"trust.accessibility": IconAccessibility,
|
|
50
|
+
"trust.appeal": IconArrowRotateClockwise,
|
|
51
|
+
"trust.blocked": IconBan,
|
|
52
|
+
"trust.case": IconFolder,
|
|
53
|
+
"trust.incident": IconAlertWarning,
|
|
54
|
+
"trust.policy": IconFileCheck,
|
|
55
|
+
"trust.privacy": IconLock,
|
|
56
|
+
"trust.report": IconFileAlert,
|
|
57
|
+
"trust.residency": IconHouse,
|
|
58
|
+
"trust.safety": IconConstructionSign,
|
|
59
|
+
"trust.security": IconShield,
|
|
60
|
+
"trust.support": IconLifeRing,
|
|
61
|
+
"trust.residency-verified": IconShield,
|
|
62
|
+
}, "micro-bold");
|
package/dist/nucleo.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/nucleo.js
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { IconAccessibilityOutline18, IconArrowRotateClockwiseOutline18, IconBagOutForDeliveryOutline18, IconBanOutline18, IconBellOutline18, IconBookmarkOutline18, IconBoxCheckOutline18, IconBoxOutline18, IconBulletListOutline18, IconCalendarCheckOutline18, IconCalendarPlanningOutline18, IconCarOutline18, IconChartActivityOutline18, IconCircleCheckOutline18, IconCircleQuestionOutline18, IconCircleUserOutline18, IconChildOutline18, IconClipboardArrowInOutline18, IconClipboardListOutline18, IconCreditCardOutline18, IconFileCheckOutline18, IconFlowerOutline18, IconFolderOutline18, IconGrid2Outline18, IconHammerOutline18, IconHandHoldingBoxOutline18, IconHouseOutline18, IconHouseSettingsOutline18, IconKnifeForkOutline18, IconLaptopOutline18, IconLifeRingOutline18, IconLocationOutline18, IconLockOutline18, IconMapOutline18, IconMessageArrowRightOutline18, IconMessageCheckOutline18, IconMessageOutline18, IconMessageStarOutline18, IconMoneyOutline18, IconPaperclipOutline18, IconPaperPlaneOutline18, IconReportFileOutline18, IconReportOutline18, IconSafetyHelmetOutline18, IconShareUpRightOutline18, IconShieldCheckOutline18, IconShieldLockOutline18, IconShieldOutline18, IconShirtSportOutline18, IconStorehouseOutline18, IconUserConstructionWorkerOutline18, IconUserSettingsOutline18, IconUserShieldOutline18, IconWrenchOutline18, } from "nucleo-ui-outline-18";
|
|
2
|
+
import { bindSbrGlyphs } from "./index.js";
|
|
3
|
+
bindSbrGlyphs({
|
|
4
|
+
IconAccessibilityOutline18,
|
|
5
|
+
IconArrowRotateClockwiseOutline18,
|
|
6
|
+
IconBagOutForDeliveryOutline18,
|
|
7
|
+
IconBanOutline18,
|
|
8
|
+
IconBellOutline18,
|
|
9
|
+
IconBookmarkOutline18,
|
|
10
|
+
IconBoxCheckOutline18,
|
|
11
|
+
IconBoxOutline18,
|
|
12
|
+
IconBulletListOutline18,
|
|
13
|
+
IconCalendarCheckOutline18,
|
|
14
|
+
IconCalendarPlanningOutline18,
|
|
15
|
+
IconCarOutline18,
|
|
16
|
+
IconChartActivityOutline18,
|
|
17
|
+
IconCircleCheckOutline18,
|
|
18
|
+
IconCircleQuestionOutline18,
|
|
19
|
+
IconCircleUserOutline18,
|
|
20
|
+
IconChildOutline18,
|
|
21
|
+
IconClipboardArrowInOutline18,
|
|
22
|
+
IconClipboardListOutline18,
|
|
23
|
+
IconCreditCardOutline18,
|
|
24
|
+
IconFileCheckOutline18,
|
|
25
|
+
IconFlowerOutline18,
|
|
26
|
+
IconFolderOutline18,
|
|
27
|
+
IconGrid2Outline18,
|
|
28
|
+
IconHammerOutline18,
|
|
29
|
+
IconHandHoldingBoxOutline18,
|
|
30
|
+
IconHouseOutline18,
|
|
31
|
+
IconHouseSettingsOutline18,
|
|
32
|
+
IconKnifeForkOutline18,
|
|
33
|
+
IconLaptopOutline18,
|
|
34
|
+
IconLifeRingOutline18,
|
|
35
|
+
IconLocationOutline18,
|
|
36
|
+
IconLockOutline18,
|
|
37
|
+
IconMapOutline18,
|
|
38
|
+
IconMessageArrowRightOutline18,
|
|
39
|
+
IconMessageCheckOutline18,
|
|
40
|
+
IconMessageOutline18,
|
|
41
|
+
IconMessageStarOutline18,
|
|
42
|
+
IconMoneyOutline18,
|
|
43
|
+
IconPaperclipOutline18,
|
|
44
|
+
IconPaperPlaneOutline18,
|
|
45
|
+
IconReportFileOutline18,
|
|
46
|
+
IconReportOutline18,
|
|
47
|
+
IconSafetyHelmetOutline18,
|
|
48
|
+
IconShareUpRightOutline18,
|
|
49
|
+
IconShieldCheckOutline18,
|
|
50
|
+
IconShieldLockOutline18,
|
|
51
|
+
IconShieldOutline18,
|
|
52
|
+
IconShirtSportOutline18,
|
|
53
|
+
IconStorehouseOutline18,
|
|
54
|
+
IconUserConstructionWorkerOutline18,
|
|
55
|
+
IconUserSettingsOutline18,
|
|
56
|
+
IconUserShieldOutline18,
|
|
57
|
+
IconWrenchOutline18,
|
|
58
|
+
});
|
package/package.json
CHANGED
|
@@ -1,19 +1,61 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@super-ic/sbr-icon-contracts",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"description": "SBR tenant semantic icon contract: 57 tenant icon IDs composed with the SuperIC core set behind a decorative/label accessibility discriminator that is enforced at render.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"sideEffects": [
|
|
8
|
+
"./dist/nucleo.js",
|
|
9
|
+
"./dist/nucleo-micro.js"
|
|
10
|
+
],
|
|
11
|
+
"main": "./dist/index.js",
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
6
13
|
"files": [
|
|
14
|
+
"dist",
|
|
7
15
|
"README.md"
|
|
8
16
|
],
|
|
17
|
+
"exports": {
|
|
18
|
+
".": {
|
|
19
|
+
"default": "./dist/index.js",
|
|
20
|
+
"types": "./dist/index.d.ts"
|
|
21
|
+
},
|
|
22
|
+
"./nucleo": {
|
|
23
|
+
"types": "./dist/nucleo.d.ts",
|
|
24
|
+
"default": "./dist/nucleo.js"
|
|
25
|
+
},
|
|
26
|
+
"./nucleo-micro": {
|
|
27
|
+
"types": "./dist/nucleo-micro.d.ts",
|
|
28
|
+
"default": "./dist/nucleo-micro.js"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
"scripts": {
|
|
32
|
+
"build": "tsc -b tsconfig.json --force",
|
|
33
|
+
"prepack": "node ../../scripts/prepack-check.mjs"
|
|
34
|
+
},
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"@super-ic/icon-contracts": "0.1.3"
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"nucleo-micro-bold": "1.2.1",
|
|
40
|
+
"nucleo-ui-outline-18": "1.5.0",
|
|
41
|
+
"react": ">=19.0.0",
|
|
42
|
+
"react-dom": ">=19.0.0"
|
|
43
|
+
},
|
|
44
|
+
"peerDependenciesMeta": {
|
|
45
|
+
"nucleo-micro-bold": {
|
|
46
|
+
"optional": true
|
|
47
|
+
},
|
|
48
|
+
"nucleo-ui-outline-18": {
|
|
49
|
+
"optional": true
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
"publishConfig": {
|
|
53
|
+
"access": "public",
|
|
54
|
+
"registry": "https://registry.npmjs.org/"
|
|
55
|
+
},
|
|
9
56
|
"repository": {
|
|
10
57
|
"type": "git",
|
|
11
58
|
"url": "git+https://github.com/superic-hq/superic-hq.git",
|
|
12
59
|
"directory": "ds/packages/sbr-icon-contracts"
|
|
13
|
-
},
|
|
14
|
-
"publishConfig": {
|
|
15
|
-
"access": "public",
|
|
16
|
-
"registry": "https://registry.npmjs.org/",
|
|
17
|
-
"tag": "oidc-bootstrap"
|
|
18
60
|
}
|
|
19
61
|
}
|