freesail 0.0.1 → 0.1.0

package/packages/lit-ui/src/catalogs/standard/elements/Card.ts

@@ -0,0 +1,78 @@
+/**
+ * Card Component
+ * 
+ * A card container with optional title and elevation.
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('fs-card')
+export class FreesailCard extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    .card {
+      background: white;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .card.elevated {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+    }
+
+    .card-header {
+      border-bottom: 1px solid #e5e7eb;
+      padding: 16px;
+    }
+
+    .card-title {
+      font-size: 1.125rem;
+      font-weight: 600;
+      margin: 0;
+      color: #111827;
+    }
+
+    .card-subtitle {
+      font-size: 0.875rem;
+      color: #6b7280;
+      margin: 4px 0 0 0;
+    }
+
+    .card-content {
+      padding: var(--card-padding, 16px);
+    }
+  `;
+
+  @property({ type: String }) title = '';
+  @property({ type: String }) subtitle = '';
+  @property({ type: String }) padding = '16px';
+  @property({ type: Boolean }) elevated = true;
+
+  override render() {
+    const cardClasses = `card ${this.elevated ? 'elevated' : ''}`;
+
+    return html`
+      <div class=${cardClasses} style="--card-padding: ${this.padding}">
+        ${this.title || this.subtitle ? html`
+          <div class="card-header">
+            ${this.title ? html`<h3 class="card-title">${this.title}</h3>` : ''}
+            ${this.subtitle ? html`<p class="card-subtitle">${this.subtitle}</p>` : ''}
+          </div>
+        ` : ''}
+        <div class="card-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'fs-card': FreesailCard;
+  }
+}

package/packages/lit-ui/src/catalogs/standard/elements/Checkbox.ts

@@ -0,0 +1,94 @@
+/**
+ * Checkbox Component
+ * 
+ * A checkbox input with label support.
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('fs-checkbox')
+export class FreesailCheckbox extends LitElement {
+  static override styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    .checkbox-wrapper {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    .checkbox-wrapper.disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      accent-color: #2563eb;
+    }
+
+    input[type="checkbox"]:disabled {
+      cursor: not-allowed;
+    }
+
+    label {
+      font-size: 0.875rem;
+      color: #374151;
+      cursor: pointer;
+    }
+
+    .disabled label {
+      cursor: not-allowed;
+    }
+  `;
+
+  @property({ type: Boolean }) checked = false;
+  @property({ type: String }) label = '';
+  @property({ type: Boolean }) disabled = false;
+  @property({ type: String }) bindPath = '';
+
+  private handleChange(e: Event) {
+    if (this.disabled) return;
+
+    const input = e.target as HTMLInputElement;
+    this.checked = input.checked;
+
+    this.dispatchEvent(new CustomEvent('fs-change', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        value: this.checked,
+        bindPath: this.bindPath,
+        componentId: this.id,
+      }
+    }));
+  }
+
+  override render() {
+    const wrapperClasses = `checkbox-wrapper ${this.disabled ? 'disabled' : ''}`;
+
+    return html`
+      <div class=${wrapperClasses}>
+        <input
+          type="checkbox"
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        />
+        ${this.label ? html`<label>${this.label}</label>` : ''}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'fs-checkbox': FreesailCheckbox;
+  }
+}

package/packages/lit-ui/src/catalogs/standard/elements/Column.ts

@@ -0,0 +1,66 @@
+/**
+ * Column Component
+ * 
+ * A vertical flex container that stacks children vertically.
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('fs-column')
+export class FreesailColumn extends LitElement {
+  static override styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+    }
+  `;
+
+  @property({ type: String }) gap = '8px';
+  @property({ type: String }) align = 'stretch';
+  @property({ type: String }) justify = 'start';
+  @property({ type: String }) padding = '0';
+
+  private getAlignItems(): string {
+    const map: Record<string, string> = {
+      'start': 'flex-start',
+      'center': 'center',
+      'end': 'flex-end',
+      'stretch': 'stretch',
+    };
+    return map[this.align] || 'stretch';
+  }
+
+  private getJustifyContent(): string {
+    const map: Record<string, string> = {
+      'start': 'flex-start',
+      'center': 'center',
+      'end': 'flex-end',
+      'between': 'space-between',
+      'around': 'space-around',
+    };
+    return map[this.justify] || 'flex-start';
+  }
+
+  override render() {
+    const style = `
+      gap: ${this.gap};
+      align-items: ${this.getAlignItems()};
+      justify-content: ${this.getJustifyContent()};
+      padding: ${this.padding};
+    `;
+
+    return html`
+      <div style=${style}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'fs-column': FreesailColumn;
+  }
+}

package/packages/lit-ui/src/catalogs/standard/elements/Divider.ts

@@ -0,0 +1,59 @@
+/**
+ * Divider Component
+ * 
+ * A horizontal or vertical divider line.
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+type Orientation = 'horizontal' | 'vertical';
+
+@customElement('fs-divider')
+export class FreesailDivider extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    .divider {
+      background-color: var(--divider-color, #e0e0e0);
+    }
+
+    .divider.horizontal {
+      width: 100%;
+      height: var(--divider-thickness, 1px);
+    }
+
+    .divider.vertical {
+      height: 100%;
+      width: var(--divider-thickness, 1px);
+    }
+  `;
+
+  @property({ type: String }) orientation: Orientation = 'horizontal';
+  @property({ type: String }) thickness = '1px';
+  @property({ type: String }) color = '#e0e0e0';
+
+  override render() {
+    const style = `
+      --divider-thickness: ${this.thickness};
+      --divider-color: ${this.color};
+    `;
+
+    return html`
+      <div 
+        class="divider ${this.orientation}"
+        style=${style}
+        role="separator"
+        aria-orientation=${this.orientation}
+      ></div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'fs-divider': FreesailDivider;
+  }
+}

package/packages/lit-ui/src/catalogs/standard/elements/Image.ts

@@ -0,0 +1,54 @@
+/**
+ * Image Component
+ * 
+ * An image display component with fit options.
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+type ObjectFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+
+@customElement('fs-image')
+export class FreesailImage extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    img {
+      display: block;
+      max-width: 100%;
+    }
+  `;
+
+  @property({ type: String }) src = '';
+  @property({ type: String }) alt = '';
+  @property({ type: String }) width = '';
+  @property({ type: String }) height = '';
+  @property({ type: String }) fit: ObjectFit = 'cover';
+  @property({ type: String }) borderRadius = '0';
+
+  override render() {
+    const style = `
+      width: ${this.width || 'auto'};
+      height: ${this.height || 'auto'};
+      object-fit: ${this.fit};
+      border-radius: ${this.borderRadius};
+    `;
+
+    return html`
+      <img 
+        src=${this.src} 
+        alt=${this.alt}
+        style=${style}
+      />
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'fs-image': FreesailImage;
+  }
+}

package/packages/lit-ui/src/catalogs/standard/elements/Input.ts

@@ -0,0 +1,125 @@
+/**
+ * Input Component
+ * 
+ * A text input field with label and validation support.
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+
+@customElement('fs-input')
+export class FreesailInput extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    .input-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    label {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: #374151;
+    }
+
+    input {
+      font-family: inherit;
+      font-size: 1rem;
+      padding: 10px 12px;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      outline: none;
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    input:focus {
+      border-color: #2563eb;
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+    input:disabled {
+      background: #f3f4f6;
+      cursor: not-allowed;
+    }
+
+    input.has-error {
+      border-color: #dc2626;
+    }
+
+    input.has-error:focus {
+      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+    }
+
+    .error-message {
+      font-size: 0.75rem;
+      color: #dc2626;
+    }
+
+    .required-mark {
+      color: #dc2626;
+    }
+  `;
+
+  @property({ type: String }) value = '';
+  @property({ type: String }) placeholder = '';
+  @property({ type: String }) label = '';
+  @property({ type: String }) type: InputType = 'text';
+  @property({ type: Boolean }) disabled = false;
+  @property({ type: Boolean }) required = false;
+  @property({ type: String }) error = '';
+  @property({ type: String }) bindPath = '';
+
+  private handleInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    this.value = input.value;
+
+    this.dispatchEvent(new CustomEvent('fs-change', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        value: this.value,
+        bindPath: this.bindPath,
+        componentId: this.id,
+      }
+    }));
+  }
+
+  override render() {
+    return html`
+      <div class="input-wrapper">
+        ${this.label ? html`
+          <label>
+            ${this.label}
+            ${this.required ? html`<span class="required-mark">*</span>` : ''}
+          </label>
+        ` : ''}
+        
+        <input
+          type=${this.type}
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          class=${this.error ? 'has-error' : ''}
+          @input=${this.handleInput}
+        />
+        
+        ${this.error ? html`
+          <span class="error-message">${this.error}</span>
+        ` : ''}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'fs-input': FreesailInput;
+  }
+}

package/packages/lit-ui/src/catalogs/standard/elements/Progress.ts

@@ -0,0 +1,79 @@
+/**
+ * Progress Component
+ * 
+ * A progress bar indicator.
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('fs-progress')
+export class FreesailProgress extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    .progress-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .progress-track {
+      width: 100%;
+      height: 8px;
+      background: #e5e7eb;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .progress-bar {
+      height: 100%;
+      background: var(--progress-color, #2563eb);
+      border-radius: 4px;
+      transition: width 0.3s ease;
+    }
+
+    .progress-label {
+      font-size: 0.75rem;
+      color: #6b7280;
+      text-align: right;
+    }
+  `;
+
+  @property({ type: Number }) value = 0;
+  @property({ type: Number }) max = 100;
+  @property({ type: Boolean }) showLabel = false;
+  @property({ type: String }) color = '#2563eb';
+
+  private get percentage(): number {
+    return Math.min(100, Math.max(0, (this.value / this.max) * 100));
+  }
+
+  override render() {
+    return html`
+      <div class="progress-wrapper">
+        <div class="progress-track">
+          <div 
+            class="progress-bar"
+            style="width: ${this.percentage}%; --progress-color: ${this.color}"
+            role="progressbar"
+            aria-valuenow=${this.value}
+            aria-valuemin="0"
+            aria-valuemax=${this.max}
+          ></div>
+        </div>
+        ${this.showLabel ? html`
+          <span class="progress-label">${Math.round(this.percentage)}%</span>
+        ` : ''}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'fs-progress': FreesailProgress;
+  }
+}

package/packages/lit-ui/src/catalogs/standard/elements/Row.ts

@@ -0,0 +1,68 @@
+/**
+ * Row Component
+ * 
+ * A horizontal flex container that arranges children horizontally.
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('fs-row')
+export class FreesailRow extends LitElement {
+  static override styles = css`
+    :host {
+      display: flex;
+      flex-direction: row;
+      box-sizing: border-box;
+    }
+  `;
+
+  @property({ type: String }) gap = '8px';
+  @property({ type: String }) align = 'center';
+  @property({ type: String }) justify = 'start';
+  @property({ type: Boolean }) wrap = false;
+  @property({ type: String }) padding = '0';
+
+  private getAlignItems(): string {
+    const map: Record<string, string> = {
+      'start': 'flex-start',
+      'center': 'center',
+      'end': 'flex-end',
+      'stretch': 'stretch',
+    };
+    return map[this.align] || 'center';
+  }
+
+  private getJustifyContent(): string {
+    const map: Record<string, string> = {
+      'start': 'flex-start',
+      'center': 'center',
+      'end': 'flex-end',
+      'between': 'space-between',
+      'around': 'space-around',
+    };
+    return map[this.justify] || 'flex-start';
+  }
+
+  override render() {
+    const style = `
+      gap: ${this.gap};
+      align-items: ${this.getAlignItems()};
+      justify-content: ${this.getJustifyContent()};
+      flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'};
+      padding: ${this.padding};
+    `;
+
+    return html`
+      <div style=${style}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'fs-row': FreesailRow;
+  }
+}