@parksw/sw-ui-components 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './my-element.js';
+export * from './my-button.js';
+export * from './my-calendar.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './my-element.js';
+export * from './my-button.js';
+export * from './my-calendar.js';

package/dist/my-button.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export declare class MyButton extends LitElement {
+    label: string;
+    disabled: boolean;
+    variant: 'primary' | 'secondary';
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/dist/my-button.js

@@ -0,0 +1,75 @@
+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 { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let MyButton = class MyButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = 'Button';
+        this.disabled = false;
+        this.variant = 'primary';
+    }
+    render() {
+        return html `
+      <button
+        class="button ${this.variant}"
+        ?disabled=${this.disabled}
+      >
+        ${this.label}
+      </button>
+    `;
+    }
+    static { this.styles = css `
+    .button {
+      border: none;
+      color: white;
+      padding: 12px 24px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 16px;
+      margin: 4px 2px;
+      cursor: pointer;
+      border-radius: 8px;
+      transition: background-color 0.3s ease;
+    }
+
+    .button:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .primary {
+      background-color: #4CAF50; /* Green */
+    }
+
+    .primary:hover:not(:disabled) {
+      background-color: #45a049;
+    }
+
+    .secondary {
+      background-color: #008CBA; /* Blue */
+    }
+
+    .secondary:hover:not(:disabled) {
+      background-color: #007bb5;
+    }
+  `; }
+};
+__decorate([
+    property({ type: String })
+], MyButton.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MyButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], MyButton.prototype, "variant", void 0);
+MyButton = __decorate([
+    customElement('my-button')
+], MyButton);
+export { MyButton };

package/dist/my-calendar.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class MyCalendar extends LitElement {
+    private date;
+    private get year();
+    private get month();
+    private _changeMonth;
+    private _renderHeader;
+    private _renderDaysOfWeek;
+    private _renderDates;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/dist/my-calendar.js

@@ -0,0 +1,147 @@
+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 { LitElement, css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+let MyCalendar = class MyCalendar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.date = new Date();
+    }
+    get year() {
+        return this.date.getFullYear();
+    }
+    get month() {
+        return this.date.getMonth();
+    }
+    _changeMonth(offset) {
+        this.date = new Date(this.year, this.month + offset, 1);
+    }
+    _renderHeader() {
+        const monthName = this.date.toLocaleString('default', { month: 'long' });
+        return html `
+      <div class="header">
+        <button @click=${() => this._changeMonth(-1)}>‹</button>
+        <div class="month-year">${monthName} ${this.year}</div>
+        <button @click=${() => this._changeMonth(1)}>›</button>
+      </div>
+    `;
+    }
+    _renderDaysOfWeek() {
+        const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+        return html `
+      <div class="days-of-week">
+        ${days.map(day => html `<div>${day}</div>`)}
+      </div>
+    `;
+    }
+    _renderDates() {
+        const today = new Date();
+        const firstDayOfMonth = new Date(this.year, this.month, 1).getDay();
+        const daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
+        const dates = [];
+        for (let i = 0; i < firstDayOfMonth; i++) {
+            dates.push(html `<div class="date-cell empty"></div>`);
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            const isToday = this.year === today.getFullYear() &&
+                this.month === today.getMonth() &&
+                i === today.getDate();
+            dates.push(html `<div class="date-cell ${isToday ? 'today' : ''}">${i}</div>`);
+        }
+        return html `<div class="date-grid">${dates}</div>`;
+    }
+    render() {
+        return html `
+      <div class="calendar-container">
+        ${this._renderHeader()}
+        ${this._renderDaysOfWeek()}
+        ${this._renderDates()}
+      </div>
+    `;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      max-width: 350px;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      padding: 16px;
+      font-family: sans-serif;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    .header button {
+      background: none;
+      border: 1px solid #ccc;
+      border-radius: 50%;
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      font-size: 18px;
+      transition: background-color 0.2s;
+    }
+
+    .header button:hover {
+      background-color: #eee;
+    }
+
+    .month-year {
+      font-size: 1.2em;
+      font-weight: bold;
+    }
+
+    .days-of-week, .date-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      text-align: center;
+    }
+
+    .days-of-week > div {
+      font-weight: bold;
+      padding-bottom: 8px;
+      font-size: 0.9em;
+      color: #666;
+    }
+
+    .date-cell {
+      padding: 4px 0;
+      cursor: pointer;
+      border-radius: 50%;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 2px auto;
+      transition: background-color 0.2s;
+    }
+
+    .date-cell:not(.empty):hover {
+      background-color: #eee;
+    }
+
+    .date-cell.today {
+      background-color: #4CAF50;
+      color: white;
+      font-weight: bold;
+    }
+  `; }
+};
+__decorate([
+    state()
+], MyCalendar.prototype, "date", void 0);
+MyCalendar = __decorate([
+    customElement('my-calendar')
+], MyCalendar);
+export { MyCalendar };

package/dist/my-element.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+export declare class MyElement extends LitElement {
+    name: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/dist/my-element.js

@@ -0,0 +1,34 @@
+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 { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let MyElement = class MyElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = 'World';
+    }
+    render() {
+        return html `
+      <h1>Hello, ${this.name}!</h1>
+    `;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      border: solid 1px gray;
+      padding: 16px;
+      max-width: 800px;
+    }
+  `; }
+};
+__decorate([
+    property()
+], MyElement.prototype, "name", void 0);
+MyElement = __decorate([
+    customElement('my-element')
+], MyElement);
+export { MyElement };

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@parksw/sw-ui-components",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./my-button.js": "./dist/my-button.js",
+    "./my-calendar.js": "./dist/my-calendar.js",
+    "./my-element.js": "./dist/my-element.js"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lit": "^3.3.1"
+  },
+  "devDependencies": {
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}