@ghs-hazard-pictograms/css 1.0.0

package/dist/cjs/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * CSS sprite utilities for the @ghs-hazard-pictograms/css package.
+ *
+ * Import `@ghs-hazard-pictograms/css/sprite.css` in your application and then
+ * use the class names returned by {@link getCssClassName} or from
+ * {@link pictogramCssClasses} on any block element sized with `width`/`height`.
+ *
+ * @module @ghs-hazard-pictograms/css
+ */
+/**
+ * Map of pictogram slug ID → CSS sprite class name.
+ *
+ * Import `@ghs-hazard-pictograms/css/sprite.css` and apply the class to a
+ * block element to show the pictogram as a background image.
+ *
+ * @example
+ * ```ts
+ * import { pictogramCssClasses } from '@ghs-hazard-pictograms/css';
+ * element.className = pictogramCssClasses['ghs01-explosive'];
+ * ```
+ */
+export declare const pictogramCssClasses: Readonly<Record<string, string>>;
+/**
+ * Returns the CSS sprite class name for a pictogram by its slug ID.
+ *
+ * Use together with `import '@ghs-hazard-pictograms/css/sprite.css'`.
+ *
+ * @param id - Pictogram slug ID, e.g. `"ghs01-explosive"`.
+ * @returns The CSS class name string, or `undefined` if the ID is not found.
+ *
+ * @example
+ * ```ts
+ * import { getCssClassName } from '@ghs-hazard-pictograms/css';
+ * const cls = getCssClassName('ghs01-explosive');
+ * // 'ghs-physical_hazards_pictograms_ghs01_explosive_ghs-pictogram-explos'
+ * ```
+ */
+export declare const getCssClassName: (id: string) => string | undefined;
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA8BH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEhE,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAM,GAAG,SAAoC,CAAC"}

package/dist/cjs/index.js

@@ -0,0 +1,65 @@
+"use strict";
+/**
+ * CSS sprite utilities for the @ghs-hazard-pictograms/css package.
+ *
+ * Import `@ghs-hazard-pictograms/css/sprite.css` in your application and then
+ * use the class names returned by {@link getCssClassName} or from
+ * {@link pictogramCssClasses} on any block element sized with `width`/`height`.
+ *
+ * @module @ghs-hazard-pictograms/css
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCssClassName = exports.pictogramCssClasses = void 0;
+const core_1 = require("@ghs-hazard-pictograms/core");
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/**
+ * Derives the CSS class name for a given asset path by applying the same
+ * sanitisation logic used in the sprite generator.
+ *
+ * @param assetPath - Relative asset path, e.g. `"physical_hazards/ghs01/foo.svg"`.
+ * @returns CSS class name string (prefixed with `ghs-`).
+ */
+function cssClassForPath(assetPath) {
+    return ('ghs-' +
+        assetPath
+            .replace(/[/\\?%*:|"<>]/g, '_')
+            .replace(/\s/g, '')
+            .toLowerCase()
+            .replace(/\.svg$/, ''));
+}
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+/**
+ * Map of pictogram slug ID → CSS sprite class name.
+ *
+ * Import `@ghs-hazard-pictograms/css/sprite.css` and apply the class to a
+ * block element to show the pictogram as a background image.
+ *
+ * @example
+ * ```ts
+ * import { pictogramCssClasses } from '@ghs-hazard-pictograms/css';
+ * element.className = pictogramCssClasses['ghs01-explosive'];
+ * ```
+ */
+exports.pictogramCssClasses = Object.fromEntries(core_1.pictograms.map((p) => [p.id, cssClassForPath(p.assets.svg)]));
+/**
+ * Returns the CSS sprite class name for a pictogram by its slug ID.
+ *
+ * Use together with `import '@ghs-hazard-pictograms/css/sprite.css'`.
+ *
+ * @param id - Pictogram slug ID, e.g. `"ghs01-explosive"`.
+ * @returns The CSS class name string, or `undefined` if the ID is not found.
+ *
+ * @example
+ * ```ts
+ * import { getCssClassName } from '@ghs-hazard-pictograms/css';
+ * const cls = getCssClassName('ghs01-explosive');
+ * // 'ghs-physical_hazards_pictograms_ghs01_explosive_ghs-pictogram-explos'
+ * ```
+ */
+const getCssClassName = (id) => exports.pictogramCssClasses[id];
+exports.getCssClassName = getCssClassName;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;;AAEH,8CAAiD;AAEjD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;GAMG;AACH,SAAS,eAAe,CAAC,SAAiB;IACxC,OAAO,CACL,MAAM;QACN,SAAS;aACN,OAAO,CAAC,gBAAgB,EAAE,GAAG,CAAC;aAC9B,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;aAClB,WAAW,EAAE;aACb,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzB,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;;GAWG;AACU,QAAA,mBAAmB,GAAqC,MAAM,CAAC,WAAW,CACrF,iBAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAC7D,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACI,MAAM,eAAe,GAAG,CAAC,EAAU,EAAsB,EAAE,CAAC,2BAAmB,CAAC,EAAE,CAAC,CAAC;AAA9E,QAAA,eAAe,mBAA+D"}

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/dist/esm/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * CSS sprite utilities for the @ghs-hazard-pictograms/css package.
+ *
+ * Import `@ghs-hazard-pictograms/css/sprite.css` in your application and then
+ * use the class names returned by {@link getCssClassName} or from
+ * {@link pictogramCssClasses} on any block element sized with `width`/`height`.
+ *
+ * @module @ghs-hazard-pictograms/css
+ */
+/**
+ * Map of pictogram slug ID → CSS sprite class name.
+ *
+ * Import `@ghs-hazard-pictograms/css/sprite.css` and apply the class to a
+ * block element to show the pictogram as a background image.
+ *
+ * @example
+ * ```ts
+ * import { pictogramCssClasses } from '@ghs-hazard-pictograms/css';
+ * element.className = pictogramCssClasses['ghs01-explosive'];
+ * ```
+ */
+export declare const pictogramCssClasses: Readonly<Record<string, string>>;
+/**
+ * Returns the CSS sprite class name for a pictogram by its slug ID.
+ *
+ * Use together with `import '@ghs-hazard-pictograms/css/sprite.css'`.
+ *
+ * @param id - Pictogram slug ID, e.g. `"ghs01-explosive"`.
+ * @returns The CSS class name string, or `undefined` if the ID is not found.
+ *
+ * @example
+ * ```ts
+ * import { getCssClassName } from '@ghs-hazard-pictograms/css';
+ * const cls = getCssClassName('ghs01-explosive');
+ * // 'ghs-physical_hazards_pictograms_ghs01_explosive_ghs-pictogram-explos'
+ * ```
+ */
+export declare const getCssClassName: (id: string) => string | undefined;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA8BH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEhE,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAM,GAAG,SAAoC,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,61 @@
+/**
+ * CSS sprite utilities for the @ghs-hazard-pictograms/css package.
+ *
+ * Import `@ghs-hazard-pictograms/css/sprite.css` in your application and then
+ * use the class names returned by {@link getCssClassName} or from
+ * {@link pictogramCssClasses} on any block element sized with `width`/`height`.
+ *
+ * @module @ghs-hazard-pictograms/css
+ */
+import { pictograms } from '@ghs-hazard-pictograms/core';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/**
+ * Derives the CSS class name for a given asset path by applying the same
+ * sanitisation logic used in the sprite generator.
+ *
+ * @param assetPath - Relative asset path, e.g. `"physical_hazards/ghs01/foo.svg"`.
+ * @returns CSS class name string (prefixed with `ghs-`).
+ */
+function cssClassForPath(assetPath) {
+    return ('ghs-' +
+        assetPath
+            .replace(/[/\\?%*:|"<>]/g, '_')
+            .replace(/\s/g, '')
+            .toLowerCase()
+            .replace(/\.svg$/, ''));
+}
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+/**
+ * Map of pictogram slug ID → CSS sprite class name.
+ *
+ * Import `@ghs-hazard-pictograms/css/sprite.css` and apply the class to a
+ * block element to show the pictogram as a background image.
+ *
+ * @example
+ * ```ts
+ * import { pictogramCssClasses } from '@ghs-hazard-pictograms/css';
+ * element.className = pictogramCssClasses['ghs01-explosive'];
+ * ```
+ */
+export const pictogramCssClasses = Object.fromEntries(pictograms.map((p) => [p.id, cssClassForPath(p.assets.svg)]));
+/**
+ * Returns the CSS sprite class name for a pictogram by its slug ID.
+ *
+ * Use together with `import '@ghs-hazard-pictograms/css/sprite.css'`.
+ *
+ * @param id - Pictogram slug ID, e.g. `"ghs01-explosive"`.
+ * @returns The CSS class name string, or `undefined` if the ID is not found.
+ *
+ * @example
+ * ```ts
+ * import { getCssClassName } from '@ghs-hazard-pictograms/css';
+ * const cls = getCssClassName('ghs01-explosive');
+ * // 'ghs-physical_hazards_pictograms_ghs01_explosive_ghs-pictogram-explos'
+ * ```
+ */
+export const getCssClassName = (id) => pictogramCssClasses[id];
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;GAMG;AACH,SAAS,eAAe,CAAC,SAAiB;IACxC,OAAO,CACL,MAAM;QACN,SAAS;aACN,OAAO,CAAC,gBAAgB,EAAE,GAAG,CAAC;aAC9B,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;aAClB,WAAW,EAAE;aACb,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzB,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqC,MAAM,CAAC,WAAW,CACrF,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAC7D,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAU,EAAsB,EAAE,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC"}

package/dist/esm/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@ghs-hazard-pictograms/css",
+  "version": "1.0.0",
+  "description": "GHS hazard pictogram CSS sprite utilities",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/esm/index.d.ts"
+    },
+    "./sprite.css": "./sprite.css"
+  },
+  "files": [
+    "dist/",
+    "sprite.css"
+  ],
+  "scripts": {
+    "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && node -e \"require('fs').writeFileSync('dist/cjs/package.json', JSON.stringify({type:'commonjs'})); require('fs').writeFileSync('dist/esm/package.json', JSON.stringify({type:'module'}))\"",
+    "test": "jest",
+    "type-check": "tsc --noEmit -p tsconfig.cjs.json"
+  },
+  "dependencies": {
+    "@ghs-hazard-pictograms/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "jest": "^30.3.0",
+    "ts-jest": "^29.4.0",
+    "typescript": "^5.8.3"
+  }
+}

package/sprite.css

@@ -0,0 +1,208 @@
+/* GHS Hazard Pictograms — CSS Sprite
+   Generated by 'yarn update'. Do not edit manually.
+   Import this file and apply the class to a sized block element to display the pictogram. */
+
+/* Physical hazards */
+
+.ghs-ghs01 {
+  background-image: url('../assets/assets/physical_hazards_pictograms/ghs01_explosive/GHS-pictogram-explos.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-ghs02 {
+  background-image: url('../assets/assets/physical_hazards_pictograms/ghs02_flammable/GHS-pictogram-flamme.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-ghs03 {
+  background-image: url('../assets/assets/physical_hazards_pictograms/ghs03_oxidizing/GHS-pictogram-rondflam.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-ghs04 {
+  background-image: url('../assets/assets/physical_hazards_pictograms/ghs04_compressedgas/GHS-pictogram-bottle.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-ghs05 {
+  background-image: url('../assets/assets/physical_hazards_pictograms/ghs05_corrosive/GHS-pictogram-acid.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+/* Health hazards */
+
+.ghs-ghs06 {
+  background-image: url('../assets/assets/health_hazards_pictograms/ghs06_toxic/GHS-pictogram-skull.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-ghs07 {
+  background-image: url('../assets/assets/health_hazards_pictograms/ghs07_healthhazard_hazardoustoozonelayer/GHS-pictogram-exclam.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-ghs08 {
+  background-image: url('../assets/assets/health_hazards_pictograms/ghs08_serioushealthhazard/GHS-pictogram-silhouette.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+/* Environmental hazards */
+
+.ghs-ghs09 {
+  background-image: url('../assets/assets/environmental_hazards_pictograms/ghs09_hazardoustotheenvironment/GHS-pictogram-pollu.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+/* Transport: Class 1 — Explosives */
+
+.ghs-adr-1 {
+  background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-adr-1-4 {
+  background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.4.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-adr-1-5 {
+  background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.5.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-adr-1-6 {
+  background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.6.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+/* Transport: Class 2 — Gases */
+
+.ghs-adr-2-1 {
+  background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.1.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-adr-2-2 {
+  background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.2.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-adr-2-3 {
+  background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.3.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+/* Transport: Classes 3 & 4 — Flammable */
+
+.ghs-adr-3 {
+  background-image: url('../assets/assets/transport_pictograms/classes_3_and_4__flammable_liquids_and_solids/ADR_3.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+/* Transport: Other GHS classes */
+
+.ghs-adr-5-1 {
+  background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/ADR_5.1.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-un-5-2-black {
+  background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_5.2_(black).svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-un-6 {
+  background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_6.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-un-8 {
+  background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_8.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+/* Transport: Non-GHS pictograms */
+
+.ghs-adr-6-2 {
+  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_6.2.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-adr-7a {
+  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7A.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-adr-7b {
+  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7B.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-adr-7c {
+  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7C.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-adr-7e {
+  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7E.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.ghs-adr-9 {
+  background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_9.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}