@yokowasis/types-webcomponents 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 yokowasis
+
+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,26 @@
+# @yokowasis/types-webcomponents
+
+TypeScript type definitions for the custom elements in the yokowasis webcomponents project.
+
+## Install
+
+```bash
+npm install -D @yokowasis/types-webcomponents
+```
+
+or
+
+```bash
+pnpm add -D @yokowasis/types-webcomponents
+```
+
+## What it provides
+
+- `HTMLElementTagNameMap` entries for custom elements like `cs-dashboard`, `cs-data-table`, `cs-input`, and more.
+- JSX intrinsic element typing.
+- Svelte `svelteHTML.IntrinsicElements` typing.
+- Global helper typings for `toast`, `getVal`, and `setVal`.
+
+## Usage
+
+No runtime import is required. Ensure your `tsconfig.json` includes the package types (usually automatic under `node_modules`).

package/index.d.ts

@@ -0,0 +1,488 @@
+type CSIcons =
+  | "add"
+  | "apps"
+  | "calendar"
+  | "cancel"
+  | "check"
+  | "chevron_left"
+  | "chevron_right"
+  | "cloud"
+  | "dashboard"
+  | "delete"
+  | "document"
+  | "dropdown"
+  | "edit"
+  | "error"
+  | "excel"
+  | "home"
+  | "info"
+  | "invoice"
+  | "key"
+  | "list"
+  | "mail"
+  | "maintenance"
+  | "pdf"
+  | "reload"
+  | "send"
+  | "server"
+  | "signin"
+  | "signout"
+  | "signup"
+  | "upload"
+  | "user"
+  | "warning"
+  | "word";
+
+type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+type ToastType =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "danger"
+  | "info"
+  | "warning";
+type DataTableFieldType =
+  | "text"
+  | "number"
+  | "password"
+  | "date"
+  | "time"
+  | "select"
+  | "radio"
+  | "checkbox"
+  | "upload"
+  | "rtf";
+
+interface DashboardNavChild {
+  title: string;
+  link: string;
+}
+
+interface DashboardNavItem {
+  title: string;
+  link?: string;
+  icon?: string;
+  active?: boolean;
+  childs?: DashboardNavChild[];
+}
+
+interface DashboardTopLink {
+  title: string;
+  icon?: string;
+  link?: string;
+}
+
+interface DataTableColumn {
+  key: string;
+  title: string;
+  type?: DataTableFieldType;
+  data?: string | string[];
+  dataValue?: string | string[];
+  renderer?: (
+    value: unknown,
+    row: Record<string, unknown>,
+    rowIndex: number,
+    column: DataTableColumn,
+  ) => string;
+  readonly?: boolean;
+  placeholder?: string;
+  note?: string;
+}
+
+interface CSDashboardElement extends HTMLElement {
+  logo: string;
+  title: string;
+  subtitle: string;
+  sidebar: Record<string, DashboardNavItem[]>;
+  breadcrumb: string[];
+  links: DashboardTopLink[];
+  activePath: string;
+}
+
+interface CSInputElement extends HTMLElement {
+  value: string;
+  label?: string;
+  icon?: CSIcons;
+  type?: "text" | "number" | "password" | "date" | "time";
+  note?: string;
+  mode?: string;
+  readonly?: string | boolean;
+  placeholder?: string;
+  theme?: "mui" | "tailwind" | string;
+  onchange?: (event: Event) => void;
+}
+
+interface CSSelectElement extends HTMLElement {
+  value?: string;
+  data?: string;
+  dataValue?: string;
+  label?: string;
+  placeholder?: string;
+  onchange?: (event: CustomEvent<{ target: { value: string } }>) => void;
+}
+
+interface CSRadioElement extends HTMLElement {
+  type: "radio" | "checkbox";
+  value?: string;
+  label?: string;
+  data?: string;
+  dataValue?: string;
+  cols?: number | string;
+  note?: string;
+  style?: string;
+  onchange?: (event: CustomEvent<{ target: HTMLInputElement }>) => void;
+}
+
+interface CSUploadElement extends HTMLElement {
+  value?: string;
+  label?: string;
+  note?: string;
+  mode?: string;
+  limit?: number | string;
+  server?: string;
+  onchange?: (event: Event | CustomEvent<{ target: HTMLInputElement }>) => void;
+  uploadBlob(blob: Blob, filename: string, server: string): Promise<string>;
+  fetchFileSize(url: string): Promise<void>;
+  formatFileSize(bytes: number): string;
+}
+
+interface CSRTFElement extends HTMLElement {
+  value?: string;
+  rows?: number | string;
+  label?: string;
+  placeholder?: string;
+  note?: string;
+  toolbar?: string;
+  server?: string;
+  mode?: string;
+  editorReady: boolean;
+  onchange?: (event: CustomEvent<{ target: unknown }>) => void;
+  uploadBlob(blob: Blob, filename: string, server: string): Promise<string>;
+  remove(): void;
+}
+
+interface CSModalElement extends HTMLElement {
+  open?: boolean;
+  title?: string;
+  width?: string;
+  confirmText?: string;
+  confirm?: () => void;
+  close?: () => void;
+  show(): void;
+  hide(): void;
+}
+
+interface CSDataTableElement extends HTMLElement {
+  columns: DataTableColumn[];
+  data: Array<Record<string, unknown>>;
+  onAdd?: (payload: Record<string, unknown>) => unknown;
+  onEdit?: (
+    payload: Record<string, unknown>,
+    row: Record<string, unknown>,
+    rowIndex: number,
+  ) => unknown;
+  onDelete?: (row: Record<string, unknown>, rowIndex: number) => unknown;
+}
+
+interface CSSortableElement extends HTMLElement {
+  deleteable?: "" | "true" | "false";
+  insertable?: "" | "true" | "false";
+  readonly items: Element[];
+}
+
+interface CSToastElement extends HTMLElement {
+  showToast(
+    message: string,
+    type?: ToastType,
+    position?: ToastPosition,
+    durationMs?: number,
+  ): void;
+  showLoadingToast(
+    message?: string,
+    position?: ToastPosition,
+  ): HTMLElement | null;
+  removeToast(toastEl?: HTMLElement | null): void;
+  getToastContainer(position: ToastPosition): HTMLElement | null;
+}
+
+interface CSSidebarElement extends HTMLElement {
+  title?: string;
+  description?: string;
+  links?: string;
+  urls?: string;
+  logo?: string;
+  show?: string;
+}
+
+interface CSInfoCardElement extends HTMLElement {
+  title?: string;
+  value?: string;
+  unit?: string;
+  link?: string;
+  background?: string;
+}
+
+interface CSIconElement extends HTMLElement {
+  c?: CSIcons;
+  icon?: CSIcons;
+  color?: string;
+  invert?: "" | "true" | "false";
+}
+
+interface CSListIconElement extends HTMLElement {}
+
+type CSIntrinsicElements = {
+  "cs-dashboard": Partial<CSDashboardElement> & {
+    id: string;
+    logo?: string;
+    title?: string;
+    subtitle?: string;
+    breadcrumb?: string;
+    sidebar?: Record<string, DashboardNavItem[]>;
+    links?: DashboardTopLink[];
+    activePath?: string;
+    onbreadcrumbclick?: (
+      event: CustomEvent<{ index: number; item: string }>,
+    ) => void;
+  };
+  "cs-input": Partial<CSInputElement> & {
+    id: string;
+    value?: string;
+    label?: string;
+    icon?: CSIcons;
+    type?: "text" | "number" | "password" | "date" | "time";
+    note?: string;
+    mode?: "dark" | string;
+    readonly?: "readonly" | "true" | "false" | boolean;
+    placeholder?: string;
+    theme?: "mui" | "tailwind" | string;
+    onchange?: (event: Event) => void;
+  };
+  "cs-select": Partial<CSSelectElement> & {
+    id: string;
+    value?: string;
+    label?: string;
+    data?: string | string[];
+    dataValue?: string | string[];
+    "data-value"?: string;
+    datavalue?: string;
+    placeholder?: string;
+    onchange?: (event: CustomEvent<{ target: { value: string } }>) => void;
+  };
+  "cs-radio": Partial<CSRadioElement> & {
+    id: string;
+    type: "radio" | "checkbox";
+    value?: string;
+    label?: string;
+    data?: string | string[];
+    dataValue?: string | string[];
+    "data-value"?: string;
+    datavalue?: string;
+    cols?: number | string;
+    note?: string;
+    style?: string;
+    onchange?: (event: CustomEvent<{ target: HTMLInputElement }>) => void;
+  };
+  "cs-upload": Partial<CSUploadElement> & {
+    id: string;
+    value?: string;
+    label?: string;
+    note?: string;
+    mode?: "dark" | string;
+    limit?: number | string;
+    server?: string;
+    onchange?: (
+      event: Event | CustomEvent<{ target: HTMLInputElement }>,
+    ) => void;
+  };
+  "cs-rtf": Partial<CSRTFElement> & {
+    id?: string;
+    value?: string;
+    rows?: number | string;
+    label?: string;
+    placeholder?: string;
+    note?: string;
+    toolbar?: string;
+    server?: string;
+    mode?: "dark" | string;
+    onchange?: (event: CustomEvent<{ target: unknown }>) => void;
+    onready?: (event: CustomEvent<{ editor: unknown; id: string }>) => void;
+  };
+  "cs-modal": Partial<CSModalElement> & {
+    id?: string;
+    open?: boolean | "" | "true" | "false";
+    title?: string;
+    width?: string;
+    "confirm-text"?: string;
+    onconfirm?: (event: CustomEvent<{ target: CSModalElement }>) => void;
+    onclose?: (event: CustomEvent) => void;
+    children?: unknown;
+  };
+  "cs-data-table": Partial<CSDataTableElement> & {
+    id?: string;
+    title?: string;
+    columns?: DataTableColumn[] | string;
+    data?: Array<Record<string, unknown>> | string;
+    "page-size"?: number | string;
+    "page-size-options"?: string;
+    download?: boolean | "" | "true" | "false";
+    import?: boolean | "" | "true" | "false";
+    onadd?: (event: CustomEvent<{ payload: Record<string, unknown> }>) => void;
+    onedit?: (
+      event: CustomEvent<{
+        payload: Record<string, unknown>;
+        row: Record<string, unknown>;
+        rowIndex: number;
+      }>,
+    ) => void;
+    ondelete?: (
+      event: CustomEvent<{ row: Record<string, unknown>; rowIndex: number }>,
+    ) => void;
+    onimport?: (
+      event: CustomEvent<{ successCount: number; skippedCount: number }>,
+    ) => void;
+    "ondelete-checked"?: (
+      event: CustomEvent<{
+        deleted: Array<{ row: Record<string, unknown>; rowIndex: number }>;
+      }>,
+    ) => void;
+  };
+  "cs-sortable": Partial<CSSortableElement> & {
+    id?: string;
+    deleteable?: boolean | "" | "true" | "false";
+    insertable?: boolean | "" | "true" | "false";
+    "oncs-insert"?: (event: CustomEvent<{}>) => void;
+    "oncs-delete"?: (
+      event: CustomEvent<{ index: number; item: Element | null }>,
+    ) => void;
+    "oncs-reorder"?: (
+      event: CustomEvent<{ from: number; to: number; items: Element[] }>,
+    ) => void;
+  };
+  "cs-toast": Partial<CSToastElement> & {
+    id?: string;
+  };
+  "cs-sidebar": Partial<CSSidebarElement> & {
+    id: string;
+    title?: string;
+    description?: string;
+    links?: string | string[];
+    urls?: string | string[];
+    logo?: string;
+    show?: string;
+  };
+  "cs-infocard": Partial<CSInfoCardElement> & {
+    id?: string;
+    title?: string;
+    "btn-title"?: string;
+    value?: string;
+    unit?: string;
+    link?: string;
+    background?: string;
+  };
+  "i-c": Partial<CSIconElement> & {
+    id?: string;
+    c?: CSIcons;
+    icon?: CSIcons;
+    color?: string;
+    invert?: boolean | "" | "true" | "false";
+  };
+  "list-icon": Partial<CSListIconElement>;
+};
+
+declare module "solid-js" {
+  namespace JSX {
+    interface IntrinsicElements extends CSIntrinsicElements {}
+  }
+}
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements extends CSIntrinsicElements {}
+  }
+}
+
+declare global {
+  const toast: {
+    push: (
+      message: string,
+      duration?: number,
+      position?: ToastPosition,
+    ) => void;
+    error: (
+      message: string,
+      duration?: number,
+      position?: ToastPosition,
+    ) => void;
+    info: (
+      message: string,
+      duration?: number,
+      position?: ToastPosition,
+    ) => void;
+    success: (
+      message: string,
+      duration?: number,
+      position?: ToastPosition,
+    ) => void;
+    warn: (
+      message: string,
+      duration?: number,
+      position?: ToastPosition,
+    ) => void;
+    warning: (
+      message: string,
+      duration?: number,
+      position?: ToastPosition,
+    ) => void;
+    loading: (message: string, position?: ToastPosition) => HTMLElement | null;
+    hide: (toastEl?: HTMLElement | null) => void;
+    dismiss: (toastEl?: HTMLElement | null) => void;
+  };
+
+  const setVal: (id: string, value: string) => void;
+  const getVal: (id: string) => string;
+
+  interface Window {
+    showToast: (
+      message: string,
+      type?: ToastType,
+      position?: ToastPosition,
+      durationMs?: number,
+    ) => void;
+    showLoadingToast: (
+      message?: string,
+      position?: ToastPosition,
+    ) => HTMLElement | null;
+    removeToast: (toastEl?: HTMLElement | null) => void;
+    toast: typeof toast;
+    getVal: (id: string) => string;
+    setVal: (id: string, value: string) => void;
+  }
+
+  interface HTMLElementTagNameMap {
+    "cs-dashboard": CSDashboardElement;
+    "cs-input": CSInputElement;
+    "cs-select": CSSelectElement;
+    "cs-radio": CSRadioElement;
+    "cs-upload": CSUploadElement;
+    "cs-rtf": CSRTFElement;
+    "cs-modal": CSModalElement;
+    "cs-data-table": CSDataTableElement;
+    "cs-sortable": CSSortableElement;
+    "cs-toast": CSToastElement;
+    "cs-sidebar": CSSidebarElement;
+    "cs-infocard": CSInfoCardElement;
+    "i-c": CSIconElement;
+    "list-icon": CSListIconElement;
+  }
+
+  namespace svelteHTML {
+    interface IntrinsicElements extends CSIntrinsicElements {}
+  }
+
+  namespace JSX {
+    interface IntrinsicElements extends CSIntrinsicElements {}
+  }
+}
+
+export {};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@yokowasis/types-webcomponents",
+  "version": "1.0.0",
+  "description": "Type definitions for yokowasis webcomponents custom elements",
+  "types": "index.d.ts",
+  "files": [
+    "index.d.ts",
+    "README.md"
+  ],
+  "keywords": [
+    "types",
+    "typescript",
+    "webcomponents",
+    "custom-elements",
+    "svelte",
+    "react",
+    "solid-js"
+  ],
+  "license": "MIT",
+  "author": "yokowasis",
+  "publishConfig": {
+    "access": "public"
+  }
+}