odontogram 0.0.1

package/cdn/loader.js

@@ -0,0 +1,118 @@
+
+let observer;
+let components = {
+  "my-button": {
+    "importPath": "../dist/components/button/button.js",
+    "dependencies": []
+  }
+};
+const eagerLoad = [];
+
+/** Update the lazy-loader configuration at runtime */
+export async function updateConfig(config) {
+  if (config.components) {
+    components = { ...components, ...config.components };
+  }
+
+  if(config.prefix || config.suffix) {
+    components = getScopedComponents(config.prefix, config.suffix);
+  }
+
+  if (config.rootElement) {
+    if (observer) {
+      observer.disconnect();
+    }
+    start(config.rootElement);
+  }
+
+  if (config.eagerLoad) {
+    await Promise.allSettled(eagerLoad?.map((tagName) => register(tagName)));
+  }
+}
+
+function getScopedComponents(prefix = "", suffix = "") {
+  const scopedComponents = {};
+  for (const [key, value] of Object.entries(components)) {
+    const newKey = prefix + key + suffix;
+    scopedComponents[newKey] = value;
+  }
+
+  return scopedComponents;
+}
+
+/** Load any undefined custom elements and load the components in the list */
+async function load(root) {
+  const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : "";
+  const tags = [...root.querySelectorAll(":not(:defined)")]?.map((el) =>
+    el.tagName.toLowerCase()
+  ) || [];
+  if (rootTagName.includes("-") && !customElements.get(rootTagName)) {
+    tags.push(rootTagName);
+  }
+  const tagsToRegister = [...new Set(tags)];
+  await Promise.allSettled(tagsToRegister?.map((tagName) => register(tagName)));
+}
+
+/** Register the component and any dependencies */
+function register(tagName) {
+  const component = components[tagName];
+
+  if (customElements.get(tagName)) {
+    
+    cleanUp(component, tagName);
+    return Promise.resolve();
+  }
+
+  if (!component) {
+    
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve, reject) => {
+    import(component.importPath)
+      .then(() => {
+        
+        cleanUp(component, tagName);
+        resolve();
+      })
+      .catch(() => {
+        console.error(`Unable to load <${tagName}> from ${component.importPath}`);
+        reject();
+      });
+  });
+}
+
+/** Remove the component from the list of components to load */
+function cleanUp(component, tagName) {
+  delete components[tagName];
+  component.dependencies?.forEach((dependency) => {
+    delete components[dependency];
+  });
+
+  if (!Object.keys(component).length) {
+    observer.disconnect();
+  }
+}
+
+/** Initialize the loader */
+async function start(root = document.body) {
+  
+  // Eager load any components that are not defined in the Custom Elements Manifest
+  await Promise.allSettled(eagerLoad?.map((tagName) => register(tagName)));
+
+  // Watch for any new elements that are added to the DOM
+  observer = new MutationObserver((mutations) => {
+    for (const { addedNodes } of mutations) {
+      for (const node of addedNodes) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          load(node);
+        }
+      }
+    }
+  });
+  
+  load(root);
+  observer.observe(root, { subtree: true, childList: true });
+}
+
+start();

package/custom-elements.json

@@ -0,0 +1,152 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/components/button/button.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An example button component",
+          "name": "MyButton",
+          "cssProperties": [
+            {
+              "description": "The background color of the button",
+              "name": "--button-bg-color",
+              "default": "#f0f0f0"
+            },
+            {
+              "description": "The text color of the button",
+              "name": "--button-fg-color",
+              "default": "#333"
+            },
+            {
+              "description": "The border color of the button",
+              "name": "--button-border-color",
+              "default": "transparent"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The button element",
+              "name": "control"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The main content for the button",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls the disabled property of the button",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "variation",
+              "type": {
+                "text": "'default' | 'primary' | 'hollow' | 'transparent' | undefined"
+              },
+              "description": "Changes the display of the button",
+              "attribute": "variation"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls the disabled property of the button",
+              "fieldName": "disabled",
+              "propName": "disabled"
+            },
+            {
+              "name": "variation",
+              "type": {
+                "text": "'default' | 'primary' | 'hollow' | 'transparent' | undefined"
+              },
+              "description": "Changes the display of the button",
+              "fieldName": "variation",
+              "propName": "variation"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "my-button",
+          "customElement": true,
+          "modulePath": "src/components/button/button.ts",
+          "definitionPath": "src/components/button/index.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "MyButton",
+            "module": "src/components/button/button.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MyButton",
+          "declaration": {
+            "name": "MyButton",
+            "module": "src/components/button/button.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/button/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/button/button.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "my-button",
+          "declaration": {
+            "name": "MyButton",
+            "module": "/src/components/button/button.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/button/index.js"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/components/button/button.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * An example button component
+ *
+ * @tag my-button
+ *
+ * @csspart control - The button element
+ *
+ * @cssproperty [--button-bg-color=#f0f0f0] - The background color of the button
+ * @cssproperty [--button-fg-color=#333] - The text color of the button
+ * @cssproperty [--button-border-color=transparent] - The border color of the button
+ *
+ * @slot - The main content for the button
+ *
+ */
+export default class MyButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Changes the display of the button */
+    variation?: 'default' | 'primary' | 'hollow' | 'transparent';
+    /** Controls the disabled property of the button */
+    disabled: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+export { MyButton };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAU;IAEhC,wCAAwC;IAExC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;IAE7D,mDAAmD;IAEnD,QAAQ,UAAS;IAER,MAAM;CAOhB;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/button/button.js

@@ -0,0 +1,47 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './button.styles.js';
+/**
+ * An example button component
+ *
+ * @tag my-button
+ *
+ * @csspart control - The button element
+ *
+ * @cssproperty [--button-bg-color=#f0f0f0] - The background color of the button
+ * @cssproperty [--button-fg-color=#333] - The text color of the button
+ * @cssproperty [--button-border-color=transparent] - The border color of the button
+ *
+ * @slot - The main content for the button
+ *
+ */
+class MyButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Controls the disabled property of the button */
+        this.disabled = false;
+    }
+    render() {
+        return html `
+      <button part="control" ?disabled=${this.disabled}>
+        <slot></slot>
+      </button>
+    `;
+    }
+}
+MyButton.styles = styles;
+export default MyButton;
+__decorate([
+    property()
+], MyButton.prototype, "variation", void 0);
+__decorate([
+    property({ type: Boolean })
+], MyButton.prototype, "disabled", void 0);
+export { MyButton };
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC;;;;;;;;;;;;;GAaG;AACH,MAAqB,QAAS,SAAQ,UAAU;IAAhD;;QAOE,mDAAmD;QAEnD,aAAQ,GAAG,KAAK,CAAC;IASnB,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,QAAQ;;;KAGjD,CAAC;IACJ,CAAC;;AAhBe,eAAM,GAAG,MAAM,AAAT,CAAU;eADb,QAAQ;AAK3B;IADC,QAAQ,EAAE;2CACkD;AAI7D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAWnB,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/button/button.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=button.styles.d.ts.map

package/dist/components/button/button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":";AAEA,wBAwCE"}

package/dist/components/button/button.styles.js

@@ -0,0 +1,43 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    --button-bg-color: #f0f0f0;
+    --button-fg-color: #333;
+    --button-border-color: transparent;
+
+    display: inline-flex;
+  }
+
+  button {
+    cursor: pointer;
+    background-color: var(--button-bg-color);
+    border: 1px solid var(--button-border-color);
+    border-radius: 4px;
+    color: var(--button-fg-color);
+    padding: 8px 16px;
+  }
+
+  button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :host([variation='primary']) {
+    --button-bg-color: #024996;
+    --button-fg-color: white;
+    --button-border-color: #024996;
+  }
+
+  :host([variation='hollow']) {
+    --button-bg-color: transparent;
+    --button-fg-color: #024996;
+    --button-border-color: #024996;
+  }
+
+  :host([variation='transparent']) {
+    --button-bg-color: transparent;
+    --button-fg-color: #024996;
+    --button-border-color: transparent;
+  }
+`;
+//# sourceMappingURL=button.styles.js.map

package/dist/components/button/button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCjB,CAAC"}

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './button.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAEA,mBAAmB,aAAa,CAAC"}

package/dist/components/button/index.js

@@ -0,0 +1,3 @@
+import { MyButton } from './button.js';
+customElements.define('my-button', MyButton);
+//# sourceMappingURL=index.js.map

package/dist/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIvC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './button/index.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export * from './button/index.js';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "odontogram",
+  "version": "0.0.1",
+  "description": "An Simple Web Component library for odontogram",
+  "author": "Pratik Sharma <sharma.pratik2016@gmail.com>",
+  "license": "MIT",
+  "keywords": [
+    "odontogram",
+    "react",
+    "dental-chart"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/biomathcode/odontogram"
+  },
+  "main": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "analyze": "cem analyze",
+    "analyze:dev": "cem analyze --watch",
+    "clean": "git clean -fqdx",
+    "dev": "npm run build && concurrently -k -r \"npm run analyze:dev\" \"npm run build:watch\" \"npm run storybook\"",
+    "test": "web-test-runner --group default",
+    "build": "tsc && npm run analyze && npm run build:kitchen-sink",
+    "build:cdn": "npx cross-env BUILD_TARGET=cdn vite build && npm run analyze",
+    "build:html": "npx cross-env BUILD_TARGET=html vite build",
+    "build:react": "npx cross-env BUILD_TARGET=react vite build && npx rimraf -rf ./public/react/html",
+    "build:kitchen-sink": "npx rimraf ./public && npm run build:cdn && npm run build:html && npm run build:react",
+    "build:watch": "concurrently -k -r \"tsc --watch\" \"npx cross-env BUILD_TARGET=cdn vite build --watch\"",
+    "new": "plop",
+    "deploy": "npm run build && npm publish",
+    "format": "npm run format:eslint && npm run format:prettier",
+    "format:eslint": "npx eslint --fix",
+    "format:prettier": "npx prettier . --write",
+    "lint": "wctools validate && npm run lint:eslint && npm run lint:prettier",
+    "lint:eslint": "npx eslint",
+    "lint:prettier": "npx prettier . --check",
+    "prepare": "husky && npx playwright install-deps",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "code-bubble": "^1.3.3",
+    "lit": "^3.2.1",
+    "wc-dox": "^1.3.5"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@eslint/js": "^9.16.0",
+    "@eslint/json": "^0.8.0",
+    "@eslint/markdown": "^6.2.1",
+    "@open-wc/testing": "^4.0.0",
+    "@playwright/test": "^1.46.1",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-links": "^10.1.11",
+    "@storybook/web-components": "^10.1.11",
+    "@storybook/web-components-vite": "^10.1.11",
+    "@types/mocha": "^10.0.2",
+    "@wc-toolkit/cem-inheritance": "^1.2.2",
+    "@wc-toolkit/cem-sorter": "^1.0.1",
+    "@wc-toolkit/cem-validator": "^1.0.3",
+    "@wc-toolkit/jsdoc-tags": "^1.1.0",
+    "@wc-toolkit/jsx-types": "^1.5.2",
+    "@wc-toolkit/lazy-loader": "^1.0.1",
+    "@wc-toolkit/module-path-resolver": "^1.0.0",
+    "@wc-toolkit/react-wrappers": "^1.1.1",
+    "@wc-toolkit/storybook-helpers": "^10.0.0",
+    "@wc-toolkit/type-parser": "^1.2.0",
+    "@wc-toolkit/wctools": "^0.0.18",
+    "@web/dev-server-esbuild": "^1.0.4",
+    "@web/test-runner": "^0.20.2",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.1",
+    "concurrently": "^9.1.0",
+    "custom-element-svelte-integration": "^1.1.2",
+    "custom-element-vuejs-integration": "^1.3.3",
+    "custom-elements-manifest-deprecator": "^1.1.1",
+    "eslint": "^9.16.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-lit": "^1.15.0",
+    "eslint-plugin-lit-a11y": "^5.1.1",
+    "eslint-plugin-require-extensions": "^0.1.3",
+    "eslint-plugin-storybook": "^10.1.11",
+    "glob": "^11.0.0",
+    "globals": "^15.13.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
+    "plop": "^4.0.1",
+    "prettier": "^3.3.2",
+    "rollup-plugin-summary": "^3.0.0",
+    "storybook": "^10.1.11",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.17.0",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "lint-staged": {
+    "*.js": "eslint --cache --fix",
+    "*.format:prettier": "prettier --write"
+  },
+  "files": [
+    "cdn",
+    "eslint",
+    "dist",
+    "react",
+    "types",
+    "index.d.ts",
+    "index.js",
+    "package.json",
+    "custom-elements.json",
+    "vscode.css-custom-data.json",
+    "vscode.html-custom-data.json",
+    "web-types.json"
+  ],
+  "customElements": "custom-elements.json"
+}

package/react/MyButton.d.ts

@@ -0,0 +1,90 @@
+import React from "react";
+import { MyButton as MyButtonElement } from "../dist/components/button/index.js";
+
+export type { MyButtonElement };
+
+export interface MyButtonProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Controls the disabled property of the button */
+  disabled?: boolean;
+
+  /** Changes the display of the button */
+  variation?: MyButtonElement["variation"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<MyButtonElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+declare module "react" {
+  interface CSSProperties {
+    /** The background color of the button */
+    "--button-bg-color"?: string | number;
+    /** The text color of the button */
+    "--button-fg-color"?: string | number;
+    /** The border color of the button */
+    "--button-border-color"?: string | number;
+  }
+}
+
+/**
+ * An example button component
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `variation`: Changes the display of the button
+ * - `disabled`: Controls the disabled property of the button
+ *
+ * ## Slots
+ *
+ * Areas where markup can be added to the component.
+ *
+ * - `(default)`: The main content for the button
+ *
+ * ## CSS Custom Properties
+ *
+ * CSS variables available for styling the component.
+ *
+ * - `--button-bg-color`: The background color of the button (default: `#f0f0f0`)
+ * - `--button-fg-color`: The text color of the button (default: `#333`)
+ * - `--button-border-color`: The border color of the button (default: `transparent`)
+ *
+ * ## CSS Parts
+ *
+ * Custom selectors for styling elements within the component.
+ *
+ * - `control`: The button element
+ */
+export const MyButton: React.ForwardRefExoticComponent<MyButtonProps>;