odontogram 0.0.1 → 0.1.2

package/cdn/loader.js

@@ -1,118 +0,0 @@
-
-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

@@ -1,152 +0,0 @@
-{
-  "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

@@ -1,25 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,47 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,43 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

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

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

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

package/dist/components/index.js

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

package/dist/components/index.js.map

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

package/dist/index.d.ts

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

package/dist/index.d.ts.map

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

package/dist/index.js

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

package/dist/index.js.map

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

package/react/MyButton.d.ts

@@ -1,90 +0,0 @@
-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>;

package/react/MyButton.js

@@ -1,32 +0,0 @@
-import React, { forwardRef, useRef } from "react";
-import "../dist/components/button/index.js";
-import { createForwardedRefHandler } from "./react-utils.js";
-
-export const MyButton = forwardRef((props, forwardedRef) => {
-  const ref = useRef(null);
-  const {
-    disabled,
-    variation,
-    exportparts,
-    htmlFor,
-    part,
-    tabIndex,
-    ...restProps
-  } = props;
-
-  return React.createElement(
-    "my-button",
-    {
-      ref: createForwardedRefHandler(ref, forwardedRef),
-      ...restProps,
-      variation: variation,
-      exportparts: exportparts,
-      for: htmlFor,
-      part: part,
-      tabindex: tabIndex,
-      disabled: disabled ? true : undefined,
-      style: { ...props.style },
-    },
-    props.children,
-  );
-});

package/react/index.d.ts

@@ -1 +0,0 @@
-export * from "./MyButton.js";

package/react/index.js

@@ -1 +0,0 @@
-export * from "./MyButton.js";

package/react/react-utils.js

@@ -1,67 +0,0 @@
-import { useEffect, useLayoutEffect, useRef } from "react";
-
-export function mergeRefs(target, forwardedRef) {
-  if (!forwardedRef) {
-    return;
-  }
-
-  if (typeof forwardedRef === "function") {
-    forwardedRef(target);
-  } else {
-    forwardedRef.current = target;
-  }
-}
-
-export function createForwardedRefHandler(localRef, forwardedRef) {
-  return (node) => {
-    localRef.current = node;
-    mergeRefs(node, forwardedRef);
-  };
-}
-
-export function useProperties(targetElement, propName, value) {
-  useEffect(() => {
-    const el = targetElement?.current;
-    if (!el || value === undefined || el[propName] === value) {
-      return;
-    }
-
-    try {
-      el[propName] = value;
-    } catch (e) {
-      console.warn(e);
-    }
-  }, [targetElement, propName, value]);
-}
-
-export function useEventListener(targetElement, eventName, eventHandler) {
-  // keep a ref to the latest handler so we don't need to re-register the event listener
-  // whenever the handler changes (avoids duplicate listeners on re-renders)
-  const handlerRef = useRef(eventHandler);
-  handlerRef.current = eventHandler;
-
-  useLayoutEffect(() => {
-    const el = targetElement?.current;
-    if (!el || eventName === undefined) {
-      return;
-    }
-
-    // capture the handler at the time the listener is attached so we can call cancel on it
-    const eventListener = (event) => {
-      const handler = handlerRef.current;
-      if (handler) {
-        handler(event);
-      }
-    };
-
-    el.addEventListener(eventName, eventListener);
-
-    return () => {
-      const handler = handlerRef.current;
-      if (handler?.cancel) {
-        handler.cancel();
-      }
-      el.removeEventListener(eventName, eventListener);
-    };
-  }, [eventName, targetElement?.current]);
-}