@nuralyui/card 0.0.3

package/card.component.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+import { CardSize } from './card.type.js';
+export declare class HyCardComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    header: string;
+    size: CardSize;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=card.component.d.ts.map

package/card.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.component.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAC,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAGxC,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAU;IAEpB,MAAM,EAAG,MAAM,CAAC;IAChB,IAAI,WAAoB;IAE3B,MAAM;CAYhB"}

package/card.component.js

@@ -0,0 +1,40 @@
+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 { customElement, property } from 'lit/decorators.js';
+import { styles } from './card.style.js';
+import { classMap } from 'lit/directives/class-map.js';
+let HyCardComponent = class HyCardComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = "default" /* CardSize.Default */;
+    }
+    render() {
+        return html `
+      <div
+        class="card ${classMap({ 'small-card': this.size == "small" /* CardSize.Small */, 'large-card': this.size == "large" /* CardSize.Large */ })}"
+      >
+        <div class="card-header">${this.header}</div>
+        <div class="card-content">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+HyCardComponent.styles = styles;
+__decorate([
+    property()
+], HyCardComponent.prototype, "header", void 0);
+__decorate([
+    property()
+], HyCardComponent.prototype, "size", void 0);
+HyCardComponent = __decorate([
+    customElement('hy-card')
+], HyCardComponent);
+export { HyCardComponent };
+//# sourceMappingURL=card.component.js.map

package/card.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.component.js","sourceRoot":"","sources":["../../../src/components/card/card.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAIc,SAAI,oCAAoB;IActC,CAAC;IAZU,MAAM;QACb,OAAO,IAAI,CAAA;;sBAEO,QAAQ,CAAC,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,gCAAkB,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,gCAAkB,EAAC,CAAC;;mCAEnF,IAAI,CAAC,MAAM;;;;;KAKzC,CAAC;IACJ,CAAC;CACF,CAAA;AAjBiB,sBAAM,GAAG,MAAO,CAAA;AAEpB;IAAX,QAAQ,EAAE;+CAAiB;AAChB;IAAX,QAAQ,EAAE;6CAAyB;AAJzB,eAAe;IAD3B,aAAa,CAAC,SAAS,CAAC;GACZ,eAAe,CAkB3B;SAlBY,eAAe","sourcesContent":["import {html, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styles} from './card.style.js';\nimport {CardSize} from './card.type.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\n@customElement('hy-card')\nexport class HyCardComponent extends LitElement {\n  static override styles = styles;\n\n  @property() header!: string;\n  @property() size = CardSize.Default;\n\n  override render() {\n    return html`\n      <div\n        class=\"card ${classMap({'small-card': this.size == CardSize.Small, 'large-card': this.size == CardSize.Large})}\"\n      >\n        <div class=\"card-header\">${this.header}</div>\n        <div class=\"card-content\">\n          <slot name=\"content\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/card.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=card.style.d.ts.map

package/card.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.style.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.style.ts"],"names":[],"mappings":"AAoEA,eAAO,MAAM,MAAM,yBAAa,CAAC"}

package/card.style.js

@@ -0,0 +1,68 @@
+import { css } from 'lit';
+const cardStyles = css `
+  .card {
+    background-color: var(--hybrid-card-background-color);
+    border-radius: 4px;
+    border: var(--hybrid-card-border);
+  }
+
+  .card-header {
+    font-weight: bold;
+    border-bottom: var(--hybrid-card-header-border-bottom);
+    padding: var(--hybrid-card-padding);
+    background-color: var(--hybrid-card-header-background-color);
+    font-size: var(--hybrid-card-font-size);
+    color: var(--hybrid-card-header-color);
+  }
+
+  .card-content {
+    padding: var(--hybrid-card-padding);
+    color: var(--hybrid-card-content-color);
+    font-size: var(--hybrid-card-font-size);
+  }
+
+  .card:hover {
+    cursor: pointer;
+  }
+
+  .small-card > .card-header,
+  .small-card > .card-content {
+    padding: var(--hybrid-card-small-padding);
+    font-size: var(--hybrid-card-small-font-size);
+  }
+
+  .large-card > .card-header,
+  .large-card > .card-content {
+    padding: var(--hybrid-card-large-padding);
+    font-size: var(--hybrid-card-large-font-size);
+  }
+
+  :host {
+    --hybrid-card-border: 1px solid #e8e8e8;
+    --hybrid-card-background-color: #ffffff;
+    --hybrid-card-header-background-color: #f5f5f5;
+    --hybrid-card-header-border-bottom: 1px solid #e8e8e8;
+    --hybrid-card-font-size: 15px;
+    --hybrid-card-padding: 13px;
+    --hybrid-card-header-color: #000000;
+    --hybrid-card-content-color: #000000;
+
+    --hybrid-card-small-font-size: 13px;
+    --hybrid-card-small-padding: 8px;
+
+    --hybrid-card-large-font-size: 17px;
+    --hybrid-card-large-padding: 16px;
+  }
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --hybrid-card-border: 1px solid #404040;
+      --hybrid-card-background-color: #383838;
+      --hybrid-card-header-background-color: #2e2e2e;
+      --hybrid-card-header-border-bottom: 1px solid #404040;
+      --hybrid-card-header-color: #ffffff;
+      --hybrid-card-content-color: #ffffff;
+    }
+  }
+`;
+export const styles = cardStyles;
+//# sourceMappingURL=card.style.js.map

package/card.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.style.js","sourceRoot":"","sources":["../../../src/components/card/card.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgErB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst cardStyles = css`\n  .card {\n    background-color: var(--hybrid-card-background-color);\n    border-radius: 4px;\n    border: var(--hybrid-card-border);\n  }\n\n  .card-header {\n    font-weight: bold;\n    border-bottom: var(--hybrid-card-header-border-bottom);\n    padding: var(--hybrid-card-padding);\n    background-color: var(--hybrid-card-header-background-color);\n    font-size: var(--hybrid-card-font-size);\n    color: var(--hybrid-card-header-color);\n  }\n\n  .card-content {\n    padding: var(--hybrid-card-padding);\n    color: var(--hybrid-card-content-color);\n    font-size: var(--hybrid-card-font-size);\n  }\n\n  .card:hover {\n    cursor: pointer;\n  }\n\n  .small-card > .card-header,\n  .small-card > .card-content {\n    padding: var(--hybrid-card-small-padding);\n    font-size: var(--hybrid-card-small-font-size);\n  }\n\n  .large-card > .card-header,\n  .large-card > .card-content {\n    padding: var(--hybrid-card-large-padding);\n    font-size: var(--hybrid-card-large-font-size);\n  }\n\n  :host {\n    --hybrid-card-border: 1px solid #e8e8e8;\n    --hybrid-card-background-color: #ffffff;\n    --hybrid-card-header-background-color: #f5f5f5;\n    --hybrid-card-header-border-bottom: 1px solid #e8e8e8;\n    --hybrid-card-font-size: 15px;\n    --hybrid-card-padding: 13px;\n    --hybrid-card-header-color: #000000;\n    --hybrid-card-content-color: #000000;\n\n    --hybrid-card-small-font-size: 13px;\n    --hybrid-card-small-padding: 8px;\n\n    --hybrid-card-large-font-size: 17px;\n    --hybrid-card-large-padding: 16px;\n  }\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --hybrid-card-border: 1px solid #404040;\n      --hybrid-card-background-color: #383838;\n      --hybrid-card-header-background-color: #2e2e2e;\n      --hybrid-card-header-border-bottom: 1px solid #404040;\n      --hybrid-card-header-color: #ffffff;\n      --hybrid-card-content-color: #ffffff;\n    }\n  }\n`;\n\nexport const styles = cardStyles;\n"]}

package/card.type.d.ts

@@ -0,0 +1,6 @@
+export declare const enum CardSize {
+    Small = "small",
+    Default = "default",
+    Large = "large"
+}
+//# sourceMappingURL=card.type.d.ts.map

package/card.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.type.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.type.ts"],"names":[],"mappings":"AAAA,0BAAkB,QAAQ;IACxB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB"}

package/card.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=card.type.js.map

package/card.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.type.js","sourceRoot":"","sources":["../../../src/components/card/card.type.ts"],"names":[],"mappings":"","sourcesContent":["export const enum CardSize {\n  Small = 'small',\n  Default = 'default',\n  Large = 'large',\n}\n"]}

package/demo/hy-card-demo.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+import '../card.component';
+import '../../button/demo/hy-buttons-demo';
+export declare class HyCardDemo extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=hy-card-demo.d.ts.map

package/demo/hy-card-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-card-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/card/demo/hy-card-demo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,mBAAmB,CAAC;AAE3B,OAAO,mCAAmC,CAAC;AAE3C,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAKpB;IACO,MAAM;CAqBhB"}

package/demo/hy-card-demo.js

@@ -0,0 +1,44 @@
+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 { css, html, LitElement } from 'lit';
+import '../card.component';
+import { customElement } from 'lit/decorators.js';
+import '../../button/demo/hy-buttons-demo';
+let HyCardDemo = class HyCardDemo extends LitElement {
+    render() {
+        return html `
+      Default
+      <hy-card .header=${'welcome'}>
+        <p slot="content">hello</p>
+      </hy-card>
+      <br />
+      Small
+
+      <hy-card .size=${'small'} .header=${'welcome small'}>
+        <p slot="content">hello</p>
+      </hy-card>
+      <br />
+
+      Large
+
+      <hy-card .size=${'large'} .header=${'welcome large'}>
+        <p slot="content">hello</p>
+      </hy-card>
+    `;
+    }
+};
+HyCardDemo.styles = css `
+    :host {
+      display: block;
+      width: 25%;
+    }
+  `;
+HyCardDemo = __decorate([
+    customElement('hy-card-demo')
+], HyCardDemo);
+export { HyCardDemo };
+//# sourceMappingURL=hy-card-demo.js.map

package/demo/hy-card-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-card-demo.js","sourceRoot":"","sources":["../../../../src/components/card/demo/hy-card-demo.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,mCAAmC,CAAC;AAG3C,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAO/B,MAAM;QACb,OAAO,IAAI,CAAA;;yBAEU,SAAS;;;;;;uBAMX,OAAO,YAAY,eAAe;;;;;;;uBAOlC,OAAO,YAAY,eAAe;;;KAGpD,CAAC;IACJ,CAAC;CACF,CAAA;AA3BiB,iBAAM,GAAG,GAAG,CAAA;;;;;GAK1B,CAAA;AANS,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CA4BtB;SA5BY,UAAU","sourcesContent":["import {css, html, LitElement} from 'lit';\nimport '../card.component';\nimport {customElement} from 'lit/decorators.js';\nimport '../../button/demo/hy-buttons-demo';\n\n@customElement('hy-card-demo')\nexport class HyCardDemo extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n      width: 25%;\n    }\n  `;\n  override render() {\n    return html`\n      Default\n      <hy-card .header=${'welcome'}>\n        <p slot=\"content\">hello</p>\n      </hy-card>\n      <br />\n      Small\n\n      <hy-card .size=${'small'} .header=${'welcome small'}>\n        <p slot=\"content\">hello</p>\n      </hy-card>\n      <br />\n\n      Large\n\n      <hy-card .size=${'large'} .header=${'welcome large'}>\n        <p slot=\"content\">hello</p>\n      </hy-card>\n    `;\n  }\n}\n"]}

package/index.d.ts

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

package/index.d.ts.map

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

package/index.js

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

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/card/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './card.component';\n"]}

package/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "@nuralyui/card",
+    "version": "0.0.3",
+    "description": "",
+    "main": "index.js",
+    "type": "module",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Labidi Aymen",
+    "license": "ISC"
+}

package/react.d.ts

@@ -0,0 +1,5 @@
+import { HyCardComponent } from './card.component.js';
+export declare const HyCard: import("@lit-labs/react").ReactWebComponent<HyCardComponent, {
+    click: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/card/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC;AAEpD,eAAO,MAAM,MAAM;;EAOjB,CAAC"}

package/react.js

@@ -0,0 +1,12 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { HyCardComponent } from './card.component.js';
+export const HyCard = createComponent({
+    tagName: 'hy-card',
+    elementClass: HyCardComponent,
+    react: React,
+    events: {
+        click: 'click',
+    },
+});
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/card/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC;AAEpD,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\nimport {HyCardComponent} from './card.component.js';\n\nexport const HyCard = createComponent({\n  tagName: 'hy-card',\n  elementClass: HyCardComponent,\n  react: React,\n  events: {\n    click: 'click',\n  },\n});\n"]}