sea-dev 1.0.0

package/libs/ui-lit/src/components/sea-card.ts

@@ -0,0 +1,113 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { theme, reset } from "../theme";
+
+@customElement("sea-card")
+export class SeaCard extends LitElement {
+  static styles = [
+    theme,
+    reset,
+    css`
+      :host {
+        display: block;
+      }
+
+      .card {
+        background: var(--sea-background);
+        border: 1px solid var(--sea-border);
+        border-radius: var(--sea-radius-lg);
+        overflow: hidden;
+        transition: all var(--sea-transition-fast);
+      }
+
+      :host([hoverable]) .card {
+        cursor: pointer;
+      }
+
+      :host([hoverable]) .card:hover {
+        border-color: var(--sea-primary);
+        box-shadow: var(--sea-shadow-md);
+      }
+
+      .card-header {
+        padding: var(--sea-spacing-lg);
+        border-bottom: 1px solid var(--sea-border);
+      }
+
+      .card-title {
+        margin: 0;
+        font-size: var(--sea-font-size-lg);
+        font-weight: 600;
+        color: var(--sea-text-primary);
+      }
+
+      .card-description {
+        margin: var(--sea-spacing-xs) 0 0 0;
+        font-size: var(--sea-font-size-sm);
+        color: var(--sea-text-secondary);
+      }
+
+      .card-content {
+        padding: var(--sea-spacing-lg);
+      }
+
+      .card-footer {
+        padding: var(--sea-spacing-lg);
+        border-top: 1px solid var(--sea-border);
+        background: var(--sea-background-secondary);
+      }
+
+      /* Compact variant */
+      :host([compact]) .card-header,
+      :host([compact]) .card-content,
+      :host([compact]) .card-footer {
+        padding: var(--sea-spacing-md);
+      }
+
+      /* Hide sections if empty */
+      .card-header:empty,
+      .card-footer:empty {
+        display: none;
+      }
+    `,
+  ];
+
+  @property({ type: String }) title = "";
+  @property({ type: String }) description = "";
+  @property({ type: Boolean }) hoverable = false;
+  @property({ type: Boolean }) compact = false;
+
+  render() {
+    return html`
+      <div class="card">
+        ${this.title || this.description
+          ? html`
+              <div class="card-header">
+                ${this.title
+                  ? html`<h3 class="card-title">${this.title}</h3>`
+                  : ""}
+                ${this.description
+                  ? html`<p class="card-description">${this.description}</p>`
+                  : ""}
+                <slot name="header"></slot>
+              </div>
+            `
+          : ""}
+
+        <div class="card-content">
+          <slot></slot>
+        </div>
+
+        <div class="card-footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sea-card": SeaCard;
+  }
+}

package/libs/ui-lit/src/components/sea-input.ts

@@ -0,0 +1,184 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { theme, reset } from "../theme";
+
+@customElement("sea-input")
+export class SeaInput extends LitElement {
+  static styles = [
+    theme,
+    reset,
+    css`
+      :host {
+        display: block;
+      }
+
+      .input-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: var(--sea-spacing-xs);
+      }
+
+      label {
+        font-size: var(--sea-font-size-sm);
+        font-weight: 500;
+        color: var(--sea-text-primary);
+      }
+
+      input,
+      textarea {
+        width: 100%;
+        padding: var(--sea-spacing-sm) var(--sea-spacing-md);
+        font-family: var(--sea-font-family);
+        font-size: var(--sea-font-size-sm);
+        color: var(--sea-text-primary);
+        background: var(--sea-background);
+        border: 1px solid var(--sea-border);
+        border-radius: var(--sea-radius-md);
+        transition: all var(--sea-transition-fast);
+        outline: none;
+      }
+
+      input:focus,
+      textarea:focus {
+        border-color: var(--sea-primary);
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+      }
+
+      input:disabled,
+      textarea:disabled {
+        background: var(--sea-background-secondary);
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+
+      input::placeholder,
+      textarea::placeholder {
+        color: var(--sea-text-tertiary);
+      }
+
+      textarea {
+        resize: vertical;
+        min-height: 80px;
+      }
+
+      .error input,
+      .error textarea {
+        border-color: var(--sea-error-border);
+      }
+
+      .error input:focus,
+      .error textarea:focus {
+        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+      }
+
+      .helper-text {
+        font-size: var(--sea-font-size-xs);
+        color: var(--sea-text-secondary);
+      }
+
+      .error-text {
+        font-size: var(--sea-font-size-xs);
+        color: var(--sea-error-text);
+      }
+    `,
+  ];
+
+  @property({ type: String }) label = "";
+  @property({ type: String }) placeholder = "";
+  @property({ type: String }) value = "";
+  @property({ type: String }) type:
+    | "text"
+    | "password"
+    | "email"
+    | "number"
+    | "textarea" = "text";
+  @property({ type: Boolean }) disabled = false;
+  @property({ type: Boolean }) required = false;
+  @property({ type: String }) error = "";
+  @property({ type: String }) helper = "";
+  @property({ type: String }) name = "";
+
+  @query("input, textarea") private _input?:
+    | HTMLInputElement
+    | HTMLTextAreaElement;
+
+  render() {
+    const isTextarea = this.type === "textarea";
+    const classes = this.error ? "error" : "";
+
+    return html`
+      <div class="input-wrapper ${classes}">
+        ${this.label
+          ? html`<label>${this.label}${this.required ? " *" : ""}</label>`
+          : ""}
+        ${isTextarea
+          ? html`
+              <textarea
+                .value=${this.value}
+                placeholder=${this.placeholder}
+                ?disabled=${this.disabled}
+                ?required=${this.required}
+                name=${this.name}
+                @input=${this._handleInput}
+                @change=${this._handleChange}
+              ></textarea>
+            `
+          : html`
+              <input
+                type=${this.type}
+                .value=${this.value}
+                placeholder=${this.placeholder}
+                ?disabled=${this.disabled}
+                ?required=${this.required}
+                name=${this.name}
+                @input=${this._handleInput}
+                @change=${this._handleChange}
+              />
+            `}
+        ${this.error
+          ? html`<span class="error-text">${this.error}</span>`
+          : this.helper
+            ? html`<span class="helper-text">${this.helper}</span>`
+            : ""}
+      </div>
+    `;
+  }
+
+  private _handleInput(e: Event) {
+    const target = e.target as HTMLInputElement | HTMLTextAreaElement;
+    this.value = target.value;
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleChange(e: Event) {
+    const target = e.target as HTMLInputElement | HTMLTextAreaElement;
+    this.value = target.value;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  focus() {
+    this._input?.focus();
+  }
+
+  blur() {
+    this._input?.blur();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sea-input": SeaInput;
+  }
+}

package/libs/ui-lit/src/components/sea-spinner.ts

@@ -0,0 +1,65 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { theme, reset } from "../theme";
+
+export type SpinnerSize = "sm" | "md" | "lg";
+
+@customElement("sea-spinner")
+export class SeaSpinner extends LitElement {
+  static styles = [
+    theme,
+    reset,
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      .spinner {
+        border: 2px solid var(--sea-border);
+        border-top-color: var(--sea-primary);
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+      }
+
+      .sm {
+        width: 1rem;
+        height: 1rem;
+        border-width: 2px;
+      }
+
+      .md {
+        width: 1.5rem;
+        height: 1.5rem;
+        border-width: 2px;
+      }
+
+      .lg {
+        width: 2rem;
+        height: 2rem;
+        border-width: 3px;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+  ];
+
+  @property({ type: String }) size: SpinnerSize = "md";
+
+  render() {
+    return html`<div
+      class="spinner ${this.size}"
+      role="status"
+      aria-label="Loading"
+    ></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sea-spinner": SeaSpinner;
+  }
+}

package/libs/ui-lit/src/index.ts

@@ -0,0 +1,15 @@
+// Export all components
+export { SeaButton, buttonVariants } from "./components/sea-button";
+
+export { SeaInput } from "./components/sea-input";
+
+export { SeaCard } from "./components/sea-card";
+
+export { SeaSpinner } from "./components/sea-spinner";
+export type { SpinnerSize } from "./components/sea-spinner";
+
+export { SeaAlert } from "./components/sea-alert";
+export type { AlertVariant } from "./components/sea-alert";
+
+// Export theme tokens for external use
+export { theme, reset } from "./theme";

package/libs/ui-lit/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/libs/ui-lit/src/styles/tailwind.css

@@ -0,0 +1,76 @@
+@import "tailwindcss";
+
+/* Base styles for Shadow DOM components */
+@layer base {
+  :host {
+    /* CSS custom properties will be inherited from document */
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+
+    --radius: 0.5rem;
+  }
+
+  :host([theme="dark"]) {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+
+/* Component base styles */
+* {
+  box-sizing: border-box;
+}
+
+button, input, textarea, select {
+  font-family: inherit;
+}

package/libs/ui-lit/src/theme.css

@@ -0,0 +1,66 @@
+/* Global theme variables for @sea/ui-lit components */
+/* Import this file in your application if you want to customize the theme */
+
+:root {
+  /* Colors */
+  --sea-primary: #3b82f6;
+  --sea-primary-hover: #2563eb;
+  --sea-primary-active: #1d4ed8;
+
+  --sea-secondary: #6b7280;
+  --sea-secondary-hover: #4b5563;
+
+  --sea-destructive: #ef4444;
+  --sea-destructive-hover: #dc2626;
+
+  --sea-border: #e5e7eb;
+  --sea-border-hover: #d1d5db;
+
+  --sea-background: #ffffff;
+  --sea-background-secondary: #f9fafb;
+  --sea-background-tertiary: #f3f4f6;
+
+  --sea-text-primary: #111827;
+  --sea-text-secondary: #6b7280;
+  --sea-text-tertiary: #9ca3af;
+
+  --sea-error-bg: #fee2e2;
+  --sea-error-border: #ef4444;
+  --sea-error-text: #991b1b;
+
+  --sea-success-bg: #d1fae5;
+  --sea-success-border: #10b981;
+  --sea-success-text: #065f46;
+
+  /* Spacing */
+  --sea-spacing-xs: 0.25rem;
+  --sea-spacing-sm: 0.5rem;
+  --sea-spacing-md: 0.75rem;
+  --sea-spacing-lg: 1rem;
+  --sea-spacing-xl: 1.5rem;
+  --sea-spacing-2xl: 2rem;
+
+  /* Border radius */
+  --sea-radius-sm: 0.25rem;
+  --sea-radius-md: 0.375rem;
+  --sea-radius-lg: 0.5rem;
+  --sea-radius-xl: 0.75rem;
+
+  /* Shadows */
+  --sea-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --sea-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --sea-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+  /* Typography */
+  --sea-font-family: system-ui, -apple-system, sans-serif;
+  --sea-font-size-xs: 0.75rem;
+  --sea-font-size-sm: 0.875rem;
+  --sea-font-size-base: 1rem;
+  --sea-font-size-lg: 1.125rem;
+  --sea-font-size-xl: 1.25rem;
+
+  /* Transitions */
+  --sea-transition-fast: 150ms ease;
+  --sea-transition-base: 200ms ease;
+  --sea-transition-slow: 300ms ease;
+}

package/libs/ui-lit/src/theme.ts

@@ -0,0 +1,79 @@
+import { css } from "lit";
+
+// Shared design tokens and theme variables
+export const theme = css`
+  :host {
+    /* Colors */
+    --sea-primary: #3b82f6;
+    --sea-primary-hover: #2563eb;
+    --sea-primary-active: #1d4ed8;
+
+    --sea-secondary: #6b7280;
+    --sea-secondary-hover: #4b5563;
+
+    --sea-destructive: #ef4444;
+    --sea-destructive-hover: #dc2626;
+
+    --sea-border: #e5e7eb;
+    --sea-border-hover: #d1d5db;
+
+    --sea-background: #ffffff;
+    --sea-background-secondary: #f9fafb;
+    --sea-background-tertiary: #f3f4f6;
+
+    --sea-text-primary: #111827;
+    --sea-text-secondary: #6b7280;
+    --sea-text-tertiary: #9ca3af;
+
+    --sea-error-bg: #fee2e2;
+    --sea-error-border: #ef4444;
+    --sea-error-text: #991b1b;
+
+    --sea-success-bg: #d1fae5;
+    --sea-success-border: #10b981;
+    --sea-success-text: #065f46;
+
+    /* Spacing */
+    --sea-spacing-xs: 0.25rem;
+    --sea-spacing-sm: 0.5rem;
+    --sea-spacing-md: 0.75rem;
+    --sea-spacing-lg: 1rem;
+    --sea-spacing-xl: 1.5rem;
+    --sea-spacing-2xl: 2rem;
+
+    /* Border radius */
+    --sea-radius-sm: 0.25rem;
+    --sea-radius-md: 0.375rem;
+    --sea-radius-lg: 0.5rem;
+    --sea-radius-xl: 0.75rem;
+
+    /* Shadows */
+    --sea-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --sea-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
+    --sea-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+    /* Typography */
+    --sea-font-family: system-ui, -apple-system, sans-serif;
+    --sea-font-size-xs: 0.75rem;
+    --sea-font-size-sm: 0.875rem;
+    --sea-font-size-base: 1rem;
+    --sea-font-size-lg: 1.125rem;
+    --sea-font-size-xl: 1.25rem;
+
+    /* Transitions */
+    --sea-transition-fast: 150ms ease;
+    --sea-transition-base: 200ms ease;
+    --sea-transition-slow: 300ms ease;
+  }
+`;
+
+// Common reset styles for components
+export const reset = css`
+  * {
+    box-sizing: border-box;
+  }
+
+  :host {
+    font-family: var(--sea-font-family);
+  }
+`;

package/libs/ui-lit/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.css?inline" {
+  const content: string;
+  export default content;
+}

package/libs/ui-lit/tailwind.config.ts

@@ -0,0 +1,50 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["./src/**/*.{ts,html}"],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;