@phun-ky/speccer 7.0.0 → 8.0.0

package/README.md

@@ -1,6 +1,6 @@
 # @phun-ky/speccer
 
-![logo](./public/logo-speccer-colored-dark.svg)
+![logo](./public/logo-speccer-colored-package.svg)
 
 > A zero dependency package to highlight elements
 
@@ -12,9 +12,10 @@
    1. [About](#about)
    2. [API](#api)
    3. [Usage](#usage)
-      1. [ESM](#esm)
-      2. [Script](#script)
-      3. [React](#react)
+      1. [Typescript](#typescript)
+      2. [ESM](#esm)
+      3. [Script](#script)
+      4. [React](#react)
    4. [Advanced usage](#advanced-usage)
       1. [Lazy](#lazy)
    5. [Features](#features)
@@ -24,15 +25,15 @@
       3. [Highlight the anatomy of an element](#highlight-the-anatomy-of-an-element)
          1. [Subtle anatomy](#subtle-anatomy)
       4. [Curly brackets](#curly-brackets)
-      5. [Element typogpraphy](#element-typogpraphy)
+      5. [Element typography](#element-typography)
       6. [Mark elements](#mark-elements)
    6. [Customization](#customization)
 
 ## About
 
-Speccer was created to make it easier to document components in a design system.
+Speccer was originally created to make it easier to document components in a design system, but you can use it to whatever you like, if you are in the need to highlight any element!
 
-```zsh
+```shell-session
 npm i @phun-ky/speccer
 ```
 
@@ -40,10 +41,14 @@ See demo here: <https://codepen.io/phun-ky/pen/xaOrYX>
 
 ## API
 
-Go [here](api/README.md) to read the full API documentation.
+Go [here](https://github.com/phun-ky/speccer/blob/main/api/README.md) to read the full API documentation.
 
 ## Usage
 
+### Typescript
+
+Types can be found in `@phun-ky/speccer/speccer.d.ts`.
+
 ### ESM
 
 Either import and run the required functions:
@@ -239,7 +244,7 @@ The curly brackets are made with SVG paths, and it is required to have the follo
 
 This will give a dashed border, and a more subtle pin style.
 
-### Element typogpraphy
+### Element typography
 
 ![Image of typography speccer](./public/typography.png)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phun-ky/speccer",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
   "main": "speccer.js",
   "publishConfig": {
@@ -25,7 +25,8 @@
     "/speccer.js",
     "/speccer.js.map",
     "/speccer.min.css",
-    "/speccer.css"
+    "/speccer.css",
+    "/speccer.d.ts"
   ],
   "repository": {
     "type": "git",

package/speccer.d.ts

@@ -0,0 +1,52 @@
+declare type SpeccerFunctionType = () => void;
+
+/**
+ * Extends the global Window interface to add custom properties.
+ */
+declare global {
+    interface Window {
+        /**
+         * Represents the DrawSVGCurlyBracket class for drawing curly brackets.
+         */
+        DrawSVGCurlyBracket: any;
+        /**
+         * Represents the DrawSVGLine class for drawing lines.
+         */
+        DrawSVGLine: any;
+        /**
+         * Represents the speccer object for additional functionality.
+         */
+        speccer: any;
+    }
+}
+//# sourceMappingURL=global.d.ts.map
+
+declare const spacing: {
+    create: (text?: string | number, tag?: string) => HTMLElement;
+    element: (targetEl: HTMLElement) => Promise<void>;
+};
+declare const dissect: {
+    create: (textContent: string | undefined, area: string, n?: string) => HTMLElement;
+    element: (sectionEl: HTMLElement) => Promise<void>;
+};
+declare const measure: {
+    create: (text?: string | number, area?: string | null, tag?: string) => HTMLElement;
+    element: (targetEl: HTMLElement) => Promise<void>;
+};
+declare const mark: {
+    create: (n?: string) => HTMLElement;
+    element: (elementToMark: HTMLElement) => Promise<void>;
+};
+declare const typography: {
+    create: (html: string, area: string | null) => HTMLElement;
+    element: (targetEl: HTMLElement) => Promise<void>;
+};
+declare const modes: {
+    dom: (speccer: SpeccerFunctionType) => void;
+    lazy: () => void;
+    manual: (speccer: SpeccerFunctionType) => void;
+    activate: (speccer: SpeccerFunctionType) => void;
+};
+declare const speccer: () => void;
+
+export { speccer as default, dissect, mark, measure, modes, spacing, typography };