odontogram 0.0.1

package/react/MyButton.js

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

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

package/react/index.js

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

package/react/react-utils.js

@@ -0,0 +1,67 @@
+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]);
+}

package/types/custom-element-jsx.d.ts

@@ -0,0 +1,236 @@
+import type { MyButton } from "src/components/button/button.ts";
+
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
+ */
+export type ScopedElements<
+  Prefix extends string = "",
+  Suffix extends string = "",
+> = {
+  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+};
+
+/**
+ * A generic type for strongly typing custom events with their targets
+ * @template T - The type of the event target (extends EventTarget)
+ * @template D - The type of the detail payload for the custom event
+ */
+type TypedEvent<T extends EventTarget, E = Event> = E & {
+  target: T;
+};
+
+type BaseProps<T extends HTMLElement> = {
+  /** Content added between the opening and closing tags of the element */
+  children?: any;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Keys tell React which array item each component corresponds to */
+  key?: string | number;
+  /** Specifies the language of the element. */
+  lang?: 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;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: T | ((e: T) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: Record<string, string | number>;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+  /** The popover global attribute is used to designate an element as a popover element. */
+  popover?: "auto" | "hint" | "manual";
+  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
+  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
+  /** Specifies the action to be performed on a popover element being controlled by a control element. */
+  popovertargetaction?: "show" | "hide" | "toggle";
+};
+
+type BaseEvents = {};
+
+export type MyButtonProps = {
+  /** Changes the display of the button */
+  variation?: MyButton["variation"];
+  /** Controls the disabled property of the button */
+  disabled?: MyButton["disabled"];
+};
+
+export type MyButtonSolidJsProps = {
+  /** Changes the display of the button */
+  "prop:variation"?: MyButton["variation"];
+  /** Controls the disabled property of the button */
+  "prop:disabled"?: MyButton["disabled"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
+export type CustomElements = {
+  /**
+   * 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
+   */
+  "my-button": Partial<MyButtonProps & BaseProps<MyButton> & BaseEvents>;
+};
+
+export type CustomElementsSolidJs = {
+  /**
+   * 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
+   */
+  "my-button": Partial<
+    MyButtonProps & MyButtonSolidJsProps & BaseProps<MyButton> & BaseEvents
+  >;
+};
+
+export type CustomCssProperties = {
+  /** The background color of the button */
+  "--button-bg-color"?: string;
+  /** The text color of the button */
+  "--button-fg-color"?: string;
+  /** The border color of the button */
+  "--button-border-color"?: string;
+};
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "preact" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "@builder.io/qwik" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "@stencil/core" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "hono/jsx" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "react-native" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module "solid-js" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElementsSolidJs {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}

package/types/custom-element-svelte.d.ts

@@ -0,0 +1,70 @@
+type BaseProps = {
+  /** Content added between the opening and closing tags of the element */
+  children?: JSX.Element;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Sets the HTML or XML markup contained within the element. */
+  innerHTML?: string;
+  /** Specifies the language of the element. */
+  lang?: 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;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: unknown | ((e: unknown) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: JSX.CSSProperties;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Sets the text content of the element */
+  textContent?: string;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+};
+
+type BaseEvents = {};
+
+type MyButtonProps = {
+  /** Changes the display of the button */
+  variation?: "default" | "primary" | "hollow" | "transparent" | undefined;
+  /** Controls the disabled property of the button */
+  disabled?: boolean;
+};
+
+export type CustomElements = {
+  /**
+   * An example button component
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The main content for the button
+   *
+   * ### **CSS Properties:**
+   *  - **--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:**
+   *  - **control** - The button element
+   */
+  "my-button": Partial<MyButtonProps & BaseProps & BaseEvents>;
+};
+
+declare namespace svelteHTML {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface IntrinsicElements extends CustomElements {}
+}

package/types/custom-element-vuejs.d.ts

@@ -0,0 +1,40 @@
+import type { DefineComponent } from "vue";
+
+type MyButtonProps = {
+  /** Changes the display of the button */
+  variation?: "default" | "primary" | "hollow" | "transparent" | undefined;
+  /** Controls the disabled property of the button */
+  disabled?: boolean;
+};
+
+export type CustomElements = {
+  /**
+   * An example button component
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The main content for the button
+   *
+   * ### **CSS Properties:**
+   *  - **--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:**
+   *  - **control** - The button element
+   */
+  "my-button": DefineComponent<MyButtonProps>;
+};
+
+declare module "vue" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface GlobalComponents extends CustomElements {}
+}
+
+declare global {
+  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IntrinsicElements extends CustomElements {}
+  }
+}