@redvars/peacock 3.0.0

package/.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.husky/pre-commit

@@ -0,0 +1 @@
+./node_modules/.bin/lint-staged

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 p-icon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,46 @@
+# `src/Icon.ts`:
+
+## class: `Icon`
+
+### Superclass
+
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
+
+### Fields
+
+| Name       | Privacy | Type                                          | Default              | Description | Inherited From |
+| ---------- | ------- | --------------------------------------------- | -------------------- | ----------- | -------------- |
+| `name`     |         | `string \| undefined`                         | `'home'`             |             |                |
+| `src`      |         | `string \| undefined`                         |                      |             |                |
+| `provider` |         | `'material-symbols' \| 'carbon' \| undefined` | `'material-symbols'` |             |                |
+
+### Events
+
+| Name         | Type          | Description | Inherited From |
+| ------------ | ------------- | ----------- | -------------- |
+| `icon-error` | `CustomEvent` |             |                |
+
+### Attributes
+
+| Name       | Field    | Inherited From |
+| ---------- | -------- | -------------- |
+| `name`     | name     |                |
+| `src`      | src      |                |
+| `provider` | provider |                |
+
+### CSS Properties
+
+| Name           | Default | Description                     |
+| -------------- | ------- | ------------------------------- |
+| `--icon-color` |         | Controls the color of the icon. |
+| `--icon-size`  |         | Controls the size of the icon.  |
+
+<hr/>
+
+## Exports
+
+| Kind | Name   | Declaration | Module      | Package |
+| ---- | ------ | ----------- | ----------- | ------- |
+| `js` | `Icon` | Icon        | src/Icon.ts |         |

package/custom-elements-manifest.config.mjs

@@ -0,0 +1,34 @@
+import { lazyLoaderPlugin } from '@wc-toolkit/lazy-loader';
+
+const formatComponentName = str => {
+  return (
+    str
+      // 1. Remove the word "Component" if it exists at the end
+      .replace(/Component$/, '')
+      // 2. Find uppercase letters and replace with "-lowercase"
+      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+      // 3. Convert the whole string to lowercase
+      .toLowerCase()
+  );
+};
+
+export default {
+  /** Globs to analyze */
+  globs: ['src/**/*.ts'],
+
+  outdir: 'dist',
+
+  /** Enable special handling for litelement */
+  litelement: true,
+
+  /*plugins: [
+    lazyLoaderPlugin({
+      importPathTemplate: (name, tagName) => {
+        console.log(`./src/${formatComponentName(name)}/${tagName}.js`);
+        return `./src/${formatComponentName(name)}/${tagName}.js`;
+      },
+      outdir: 'dist',
+      eagerLoad: ['p-icon'],
+    }),
+  ],*/
+};

package/custom-elements.md

@@ -0,0 +1,252 @@
+# `src/index.ts`:
+
+## Exports
+
+| Kind | Name     | Declaration | Module             | Package |
+| ---- | -------- | ----------- | ------------------ | ------- |
+| `js` | `Icon`   | Icon        | ./icon/icon.js     |         |
+| `js` | `Avatar` | Avatar      | ./avatar/avatar.js |         |
+
+# `src/LoaderUtils.ts`:
+
+## class: `LoaderUtils`
+
+### Static Methods
+
+| Name                | Privacy | Description | Parameters                                 | Return | Inherited From |
+| ------------------- | ------- | ----------- | ------------------------------------------ | ------ | -------------- |
+| `registerComponent` |         |             | `tagName: string, CustomElementClass: any` |        |                |
+
+### Methods
+
+| Name                  | Privacy | Description | Parameters                  | Return          | Inherited From |
+| --------------------- | ------- | ----------- | --------------------------- | --------------- | -------------- |
+| `start`               |         |             |                             |                 |                |
+| `eagerLoadComponents` |         |             |                             |                 |                |
+| `getFullTagName`      |         |             | `name: string`              |                 |                |
+| `registerAsync`       |         |             | `tagName: string`           | `Promise<void>` |                |
+| `load`                |         |             | `root: Element \| Document` | `Promise<void>` |                |
+| `lazyLoadComponents`  |         |             | `root: any`                 |                 |                |
+
+<hr/>
+
+## Variables
+
+| Name                 | Description | Type |
+| -------------------- | ----------- | ---- |
+| `CustomElementClass` |             |      |
+
+<hr/>
+
+## Exports
+
+| Kind                        | Name           | Declaration        | Module             | Package |
+| --------------------------- | -------------- | ------------------ | ------------------ | ------- |
+| `js`                        | `LoaderConfig` | LoaderConfig       | src/LoaderUtils.ts |         |
+| `js`                        | `LoaderUtils`  | LoaderUtils        | src/LoaderUtils.ts |         |
+| `custom-element-definition` | `tagName`      | CustomElementClass | src/LoaderUtils.ts |         |
+| `custom-element-definition` | `tagName`      | CustomElementClass | src/LoaderUtils.ts |         |
+
+# `src/utils.ts`:
+
+## Functions
+
+| Name               | Description | Parameters       | Return |
+| ------------------ | ----------- | ---------------- | ------ |
+| `createCacheFetch` |             | `name: string`   |        |
+| `sanitizeSvg`      |             | `rawSvg: string` |        |
+| `getTypography`    |             | `name: string`   |        |
+
+<hr/>
+
+## Exports
+
+| Kind | Name               | Declaration      | Module       | Package |
+| ---- | ------------------ | ---------------- | ------------ | ------- |
+| `js` | `createCacheFetch` | createCacheFetch | src/utils.ts |         |
+| `js` | `sanitizeSvg`      | sanitizeSvg      | src/utils.ts |         |
+| `js` | `getTypography`    | getTypography    | src/utils.ts |         |
+
+# `src/avatar/avatar.css.ts`:
+
+## Variables
+
+| Name     | Description | Type |
+| -------- | ----------- | ---- |
+| `styles` |             |      |
+
+<hr/>
+
+## Exports
+
+| Kind | Name     | Declaration | Module                   | Package |
+| ---- | -------- | ----------- | ------------------------ | ------- |
+| `js` | `styles` | styles      | src/avatar/avatar.css.ts |         |
+
+# `src/avatar/avatar.ts`:
+
+## class: `Avatar`
+
+### Superclass
+
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
+
+### Fields
+
+| Name   | Privacy | Type                  | Default | Description | Inherited From |
+| ------ | ------- | --------------------- | ------- | ----------- | -------------- |
+| `name` |         | `string`              | `''`    |             |                |
+| `src`  |         | `string \| undefined` |         |             |                |
+
+### Attributes
+
+| Name   | Field | Inherited From |
+| ------ | ----- | -------------- |
+| `name` | name  |                |
+| `src`  | src   |                |
+
+### CSS Properties
+
+| Name           | Default | Description                     |
+| -------------- | ------- | ------------------------------- |
+| `--icon-color` |         | Controls the color of the icon. |
+| `--icon-size`  |         | Controls the size of the icon.  |
+
+<hr/>
+
+## Exports
+
+| Kind | Name     | Declaration | Module               | Package |
+| ---- | -------- | ----------- | -------------------- | ------- |
+| `js` | `Avatar` | Avatar      | src/avatar/avatar.ts |         |
+
+# `src/icon/datasource.ts`:
+
+## Functions
+
+| Name        | Description | Parameters                       | Return |
+| ----------- | ----------- | -------------------------------- | ------ |
+| `fetchSVG`  |             | `url: string`                    |        |
+| `fetchIcon` |             | `name: string, provider: string` |        |
+
+<hr/>
+
+## Exports
+
+| Kind | Name        | Declaration | Module                 | Package |
+| ---- | ----------- | ----------- | ---------------------- | ------- |
+| `js` | `fetchSVG`  | fetchSVG    | src/icon/datasource.ts |         |
+| `js` | `fetchIcon` | fetchIcon   | src/icon/datasource.ts |         |
+
+# `src/icon/icon.css.ts`:
+
+## Variables
+
+| Name     | Description | Type |
+| -------- | ----------- | ---- |
+| `styles` |             |      |
+
+<hr/>
+
+## Exports
+
+| Kind | Name     | Declaration | Module               | Package |
+| ---- | -------- | ----------- | -------------------- | ------- |
+| `js` | `styles` | styles      | src/icon/icon.css.ts |         |
+
+# `src/icon/icon.ts`:
+
+## class: `Icon`
+
+### Superclass
+
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
+
+### Fields
+
+| Name       | Privacy | Type                                          | Default              | Description | Inherited From |
+| ---------- | ------- | --------------------------------------------- | -------------------- | ----------- | -------------- |
+| `name`     |         | `string \| undefined`                         | `'home'`             |             |                |
+| `src`      |         | `string \| undefined`                         |                      |             |                |
+| `provider` |         | `'material-symbols' \| 'carbon' \| undefined` | `'material-symbols'` |             |                |
+
+### Events
+
+| Name         | Type          | Description | Inherited From |
+| ------------ | ------------- | ----------- | -------------- |
+| `icon-error` | `CustomEvent` |             |                |
+
+### Attributes
+
+| Name       | Field    | Inherited From |
+| ---------- | -------- | -------------- |
+| `name`     | name     |                |
+| `src`      | src      |                |
+| `provider` | provider |                |
+
+### CSS Properties
+
+| Name           | Default | Description                                       |
+| -------------- | ------- | ------------------------------------------------- |
+| `--icon-color` |         | Controls the color of the icon.                   |
+| `--icon-size`  | `1rem`  | Controls the size of the icon. Defaults to "1rem" |
+
+<hr/>
+
+## Exports
+
+| Kind | Name   | Declaration | Module           | Package |
+| ---- | ------ | ----------- | ---------------- | ------- |
+| `js` | `Icon` | Icon        | src/icon/icon.ts |         |
+
+# `src/icon/p-icon.ts`:
+
+## class: `IconComponent`, `p-icon`
+
+### Superclass
+
+| Name   | Module            | Package |
+| ------ | ----------------- | ------- |
+| `Icon` | /src/icon/icon.js |         |
+
+### Fields
+
+| Name       | Privacy | Type                                          | Default              | Description | Inherited From |
+| ---------- | ------- | --------------------------------------------- | -------------------- | ----------- | -------------- |
+| `name`     |         | `string \| undefined`                         | `'home'`             |             | Icon           |
+| `src`      |         | `string \| undefined`                         |                      |             | Icon           |
+| `provider` |         | `'material-symbols' \| 'carbon' \| undefined` | `'material-symbols'` |             | Icon           |
+
+### Events
+
+| Name         | Type          | Description | Inherited From |
+| ------------ | ------------- | ----------- | -------------- |
+| `icon-error` | `CustomEvent` |             | Icon           |
+
+### Attributes
+
+| Name       | Field    | Inherited From |
+| ---------- | -------- | -------------- |
+| `name`     | name     | Icon           |
+| `src`      | src      | Icon           |
+| `provider` | provider | Icon           |
+
+### CSS Properties
+
+| Name           | Default | Description                                       |
+| -------------- | ------- | ------------------------------------------------- |
+| `--icon-color` |         | Controls the color of the icon.                   |
+| `--icon-size`  | `1rem`  | Controls the size of the icon. Defaults to "1rem" |
+
+<hr/>
+
+## Exports
+
+| Kind                        | Name            | Declaration   | Module             | Package |
+| --------------------------- | --------------- | ------------- | ------------------ | ------- |
+| `js`                        | `IconComponent` | IconComponent | src/icon/p-icon.ts |         |
+| `custom-element-definition` | `p-icon`        | IconComponent | src/icon/p-icon.ts |         |

package/demo/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
+  <link rel='stylesheet' href='/demo/tokens.css' />
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+
+</head>
+<body>
+
+<a href='/src/icon/demo/index.html'>icon</a>
+
+<p-icon provider='carbon' name='logo--github'></p-icon>
+
+<p-avatar name='Test'></p-avatar>
+
+<script type='module' src='/dist/src/peacock-loader.js'></script>
+</body>
+</html>