@lazhus/kg-ui 0.2.2

package/dist/index.js

@@ -0,0 +1,68 @@
+import { kgaccordionitem as e } from "./components/kg-accordion-item.js";
+import { kgaccordion as p } from "./components/kg-accordion.js";
+import { kgbutton as k } from "./components/kg-button.js";
+import { kgcard as x } from "./components/kg-card.js";
+import { kgcheckbox as a } from "./components/kg-checkbox.js";
+import { kgcolorpicker as i } from "./components/kg-colorpicker.js";
+import { kgcolumn as l } from "./components/kg-column.js";
+import { kgdatepicker as n } from "./components/kg-datepicker.js";
+import { kgdivider as b } from "./components/kg-divider.js";
+import { kgdrawer as h } from "./components/kg-drawer.js";
+import { kgfileupload as j } from "./components/kg-file-upload.js";
+import { kggrid as y } from "./components/kg-grid.js";
+import { kgdatagrid as A } from "./components/kg-datagrid.js";
+import { kginput as C } from "./components/kg-input.js";
+import { kgmodal as E } from "./components/kg-modal.js";
+import { kgradiogroup as G } from "./components/kg-radio-group.js";
+import { kgradio as I } from "./components/kg-radio.js";
+import { kgrow as K } from "./components/kg-row.js";
+import { kgselect as M } from "./components/kg-select.js";
+import { kgskeleton as O } from "./components/kg-skeleton.js";
+import { kgslider as Q } from "./components/kg-slider.js";
+import { kgstepper as S } from "./components/kg-stepper.js";
+import { kgswitch as U } from "./components/kg-switch.js";
+import { kgtabpanel as W } from "./components/kg-tab-panel.js";
+import { kgtabs as Y } from "./components/kg-tabs.js";
+import { kgtext as _ } from "./components/kg-text.js";
+import { kgtextarea as rr } from "./components/kg-textarea.js";
+import { kgtoast as er, toast as tr } from "./components/kg-toast.js";
+import { kgimage as gr } from "./components/kg-image.js";
+import { kgprogress as mr } from "./components/kg-progress.js";
+import { kgspinner as fr } from "./components/kg-spinner.js";
+import { kgloader as dr, loader as ir } from "./components/kg-loader.js";
+export {
+  p as kgaccordion,
+  e as kgaccordionitem,
+  k as kgbutton,
+  x as kgcard,
+  a as kgcheckbox,
+  i as kgcolorpicker,
+  l as kgcolumn,
+  A as kgdatagrid,
+  n as kgdatepicker,
+  b as kgdivider,
+  h as kgdrawer,
+  j as kgfileupload,
+  y as kggrid,
+  gr as kgimage,
+  C as kginput,
+  dr as kgloader,
+  E as kgmodal,
+  mr as kgprogress,
+  I as kgradio,
+  G as kgradiogroup,
+  K as kgrow,
+  M as kgselect,
+  O as kgskeleton,
+  Q as kgslider,
+  fr as kgspinner,
+  S as kgstepper,
+  U as kgswitch,
+  W as kgtabpanel,
+  Y as kgtabs,
+  _ as kgtext,
+  rr as kgtextarea,
+  er as kgtoast,
+  ir as loader,
+  tr as toast
+};

package/dist/kg-ui.css

@@ -0,0 +1 @@
+@import"https://fonts.cdnfonts.com/css/century-gothic";:root{--kg-primary: #41ab34;--kg-primary-hover: #368e2b;--kg-primary-active: #2b7122;--kg-secondary: #6c757d;--kg-secondary-hover: #5a6268;--kg-secondary-active: #545b62;--kg-tertiary: #fbb140;--kg-tertiary-hover: #e59e36;--kg-tertiary-active: #cf8c2d;--kg-space-xs: .25rem;--kg-space-sm: .5rem;--kg-space-md: 1rem;--kg-space-lg: 1.5rem;--kg-space-xl: 2rem;--kg-radius-sm: 4px;--kg-radius-md: 8px;--kg-radius-lg: 12px;--kg-bg: #ffffff;--kg-text: #1a1a1b;--kg-text-muted: #64748b;--kg-surface: #f8fafc;--kg-border: #e2e8f0;--kg-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);--kg-header-gradient: linear-gradient(to right, #1a1a1b, #64748b);--kg-form-height: 38px;--datagrid-hover-bg: rgba(0, 0, 0, .04)}[data-theme=dark]{--kg-bg: #0a0a0c;--kg-text: #f8fafc;--kg-text-muted: #94a3b8;--kg-surface: #16161a;--kg-border: #2d2d34;--kg-shadow: 0 10px 15px -3px rgb(0 0 0 / .3);--kg-header-gradient: linear-gradient(to right, #fff, #94a3b8);--datagrid-hover-bg: rgba(255, 255, 255, .12)}*{box-sizing:border-box;transition:background-color .3s ease,color .3s ease,border-color .3s ease}body,h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}body{font-family:Century Gothic,Apple Gothic,CenturyGothic,sans-serif;background-color:var(--kg-bg);color:var(--kg-text);line-height:1.5;-webkit-font-smoothing:antialiased;padding:1rem;height:100vh;overflow:hidden}#app{max-width:1400px;margin:0 auto;height:100%;display:flex;flex-direction:column}.doc-layout{display:grid;grid-template-columns:260px 1fr;gap:3rem;flex:1;min-height:0;overflow:hidden}@media(max-width:1024px){.doc-layout{grid-template-columns:1fr;height:auto;overflow:visible;gap:1rem}.sidebar{display:none!important}#mobile-menu-btn{display:flex!important}body{height:auto;overflow:auto}#app{height:auto}.header-container{padding:1rem 0}}.sidebar{height:100%;padding:1.5rem 0;display:flex;flex-direction:column;min-height:0}.sidebar-nav{display:flex;flex-direction:column;gap:.25rem;overflow-y:auto;padding-right:.5rem;flex:1}.sidebar-nav::-webkit-scrollbar{width:5px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background:var(--kg-border);border-radius:10px}.sidebar-nav::-webkit-scrollbar-thumb:hover{background:var(--kg-text-muted)}.main-content{overflow-y:auto;height:100%;padding:1rem 0 4rem}.nav-item{padding:.75rem 1rem;border-radius:var(--kg-radius-md);color:var(--kg-text);text-decoration:none;font-weight:600;transition:all .2s ease;cursor:pointer}.nav-item:hover{background:var(--kg-surface);color:var(--kg-primary)}.nav-item.active{background:var(--kg-primary);color:#fff}.doc-section{margin-bottom:4rem}.code-block{background:#1e1e1e;color:#d4d4d4;padding:1.5rem;border-radius:var(--kg-radius-md);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.85rem;line-height:1.6;white-space:pre;overflow-x:auto;margin:0;border:1px solid var(--kg-border)}.code-block code{font-family:inherit;color:inherit}.example-preview{padding:2rem;border:1px solid var(--kg-border);border-bottom:none;border-radius:var(--kg-radius-md) var(--kg-radius-md) 0 0;background:var(--kg-bg);display:flex!important;flex-direction:row!important;gap:1rem!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important}.example-code{margin:0;border-radius:0 0 var(--kg-radius-md) var(--kg-radius-md)}.header-container{display:flex;justify-content:space-between;align-items:center;padding-bottom:2rem;border-bottom:1px solid var(--kg-border)}h2{font-size:1.75rem;margin-bottom:1.5rem;color:var(--kg-text)}h3{font-size:1.25rem;margin-bottom:1rem;color:var(--kg-text-muted);text-transform:uppercase;letter-spacing:.05em}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@lazhus/kg-ui",
+  "version": "0.2.2",
+  "type": "module",
+  "files": [
+    "dist",
+    "custom-elements.json",
+    "types"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./types/index.d.ts",
+  "custom-elements": "custom-elements.json",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/*.js": {
+      "types": "./types/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./style.css": "./dist/kg-ui.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && npm run analyze && npm run types",
+    "analyze": "custom-elements-manifest analyze --outdir . --globs \"src/components/*.js\"",
+    "types": "node generate-types.js",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build",
+    "upload": "npm run build && npm publish --access public"
+  },
+  "keywords": [
+    "ui",
+    "components",
+    "web-components",
+    "lit",
+    "litelement",
+    "design-system"
+  ],
+  "author": "Kolay Gelsin FE Team",
+  "license": "MIT",
+  "dependencies": {
+    "lit": "^3.0.0",
+    "lit-html": "^3.3.2"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "glob": "^13.0.0",
+    "vite": "^7.2.4"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
+  "customElements": "custom-elements.json"
+}

package/types/components/kg-accordion-item.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-accordion-item */
+export class kgaccordionitem extends LitElement {
+  /**  */
+  open: boolean;
+  /**  */
+  disabled: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-accordion-item': kgaccordionitem;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-accordion-item': {
+      open?: boolean;
+      disabled?: boolean;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-accordion.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-accordion */
+export class kgaccordion extends LitElement {
+  /**  */
+  exclusive: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-accordion': kgaccordion;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-accordion': {
+      exclusive?: boolean;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-button.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-button */
+export class kgbutton extends LitElement {
+  /**  */
+  color: string;
+  /**  */
+  size: string;
+  /**  */
+  hasText: boolean;
+  /**  */
+  hasLeft: boolean;
+  /**  */
+  hasRight: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-button': kgbutton;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-button': {
+      color?: string;
+      size?: string;
+      hasText?: boolean;
+      hasLeft?: boolean;
+      hasRight?: boolean;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-card.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-card */
+export class kgcard extends LitElement {
+  /**  */
+  raised: boolean;
+  /**  */
+  inverted: boolean;
+  /**  */
+  basic: boolean;
+  /**  */
+  padded: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-card': kgcard;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-card': {
+      raised?: boolean;
+      inverted?: boolean;
+      basic?: boolean;
+      padded?: boolean;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-checkbox.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-checkbox */
+export class kgcheckbox extends LitElement {
+  /**  */
+  checked: boolean;
+  /**  */
+  disabled: boolean;
+  /**  */
+  indeterminate: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-checkbox': kgcheckbox;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-checkbox': {
+      checked?: boolean;
+      disabled?: boolean;
+      indeterminate?: boolean;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-colorpicker.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-colorpicker */
+export class kgcolorpicker extends LitElement {
+  /**  */
+  value: string;
+  /**  */
+  open: boolean;
+  /**  */
+  disabled: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-colorpicker': kgcolorpicker;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-colorpicker': {
+      value?: string;
+      open?: boolean;
+      disabled?: boolean;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-column.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-column */
+export class kgcolumn extends LitElement {
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-column': kgcolumn;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-column': {
+
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-datagrid.d.ts

@@ -0,0 +1,55 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-datagrid */
+export class kgdatagrid extends LitElement {
+  /**  */
+  columns: any[];
+  /**  */
+  data: any[];
+  /**  */
+  loading: boolean;
+  /**  */
+  striped: boolean;
+  /**  */
+  bordered: boolean;
+  /**  */
+  hover: boolean;
+  /**  */
+  selectable: boolean;
+  /**  */
+  selectionMode: string;
+  /**  */
+  selectedRows: any[];
+  /**  */
+  sortable: boolean;
+  /**  */
+  pagination: boolean;
+  /**  */
+  pageSize: number;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-datagrid': kgdatagrid;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-datagrid': {
+      columns?: any[];
+      data?: any[];
+      loading?: boolean;
+      striped?: boolean;
+      bordered?: boolean;
+      hover?: boolean;
+      selectable?: boolean;
+      selectionMode?: string;
+      selectedRows?: any[];
+      sortable?: boolean;
+      pagination?: boolean;
+      pageSize?: number;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-datepicker.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-datepicker */
+export class kgdatepicker extends LitElement {
+  /**  */
+  open: boolean;
+  /**  */
+  disabled: boolean;
+  /**  */
+  mode: string;
+  /**  */
+  locale: string;
+  /**  */
+  placeholder: string;
+  /**  */
+  min: string;
+  /**  */
+  max: string;
+  /**  */
+  value: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-datepicker': kgdatepicker;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-datepicker': {
+      open?: boolean;
+      disabled?: boolean;
+      mode?: string;
+      locale?: string;
+      placeholder?: string;
+      min?: string;
+      max?: string;
+      value?: string;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-divider.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-divider */
+export class kgdivider extends LitElement {
+  /**  */
+  vertical: boolean;
+  /**  */
+  dashed: boolean;
+  /**  */
+  fitted: boolean;
+  /**  */
+  inverted: boolean;
+  /**  */
+  label: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-divider': kgdivider;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-divider': {
+      vertical?: boolean;
+      dashed?: boolean;
+      fitted?: boolean;
+      inverted?: boolean;
+      label?: string;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-drawer.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-drawer */
+export class kgdrawer extends LitElement {
+  /**  */
+  open: boolean;
+  /**  */
+  placement: string;
+  /**  */
+  size: string;
+  /**  */
+  closable: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-drawer': kgdrawer;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-drawer': {
+      open?: boolean;
+      placement?: string;
+      size?: string;
+      closable?: boolean;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-file-upload.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-file-upload */
+export class kgfileupload extends LitElement {
+  /**  */
+  label: string;
+  /**  */
+  placeholder: string;
+  /**  */
+  accept: string;
+  /**  */
+  multiple: boolean;
+  /**  */
+  disabled: boolean;
+  /**  */
+  hideChips: boolean;
+  /**  */
+  files: any[];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-file-upload': kgfileupload;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-file-upload': {
+      label?: string;
+      placeholder?: string;
+      accept?: string;
+      multiple?: boolean;
+      disabled?: boolean;
+      hideChips?: boolean;
+      files?: any[];
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-grid.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-grid */
+export class kggrid extends LitElement {
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-grid': kggrid;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-grid': {
+
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-image.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-image */
+export class kgimage extends LitElement {
+  /**  */
+  src: string;
+  /**  */
+  alt: string;
+  /**  */
+  width: string;
+  /**  */
+  height: string;
+  /**  */
+  fit: string;
+  /**  */
+  shape: string;
+  /**  */
+  lazy: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-image': kgimage;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-image': {
+      src?: string;
+      alt?: string;
+      width?: string;
+      height?: string;
+      fit?: string;
+      shape?: string;
+      lazy?: boolean;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-input.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-input */
+export class kginput extends LitElement {
+  /**  */
+  type: string;
+  /**  */
+  value: string;
+  /**  */
+  placeholder: string;
+  /**  */
+  hasLeft: boolean;
+  /**  */
+  hasRight: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-input': kginput;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-input': {
+      type?: string;
+      value?: string;
+      placeholder?: string;
+      hasLeft?: boolean;
+      hasRight?: boolean;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/components/kg-loader.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-loader */
+export class kgloader extends LitElement {
+  /**  */
+  src: string;
+  /**  */
+  text: string;
+  /**  */
+  visible: boolean;
+  /**  */
+  glass: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-loader': kgloader;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-loader': {
+      src?: string;
+      text?: string;
+      visible?: boolean;
+      glass?: boolean;
+        [key: string]: any;
+      };
+    }
+  }
+}