@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11

package/dist/styles/index.css

@@ -0,0 +1,171 @@
+/* src/styles/globals.css */
+:root {
+  --st-purple-50: #faf5ff;
+  --st-purple-100: #f3e8ff;
+  --st-purple-400: #c084fc;
+  --st-purple-500: #a855f7;
+  --st-purple-600: #6d28d9;
+  --st-purple-700: #5b21b6;
+  --st-white: #ffffff;
+  --st-gray-50: #f9fafb;
+  --st-gray-100: #f3f4f6;
+  --st-gray-200: #e5e7eb;
+  --st-gray-700: #374151;
+  --st-gray-800: #27272a;
+  --st-gray-900: #18181b;
+  --st-red-100: #fee2e2;
+  --st-red-500: #ef4444;
+  --st-red-600: #dc2626;
+  --st-red-900: #7f1d1d;
+  --st-green-100: #dcfce7;
+  --st-green-500: #22c55e;
+  --st-green-600: #16a34a;
+  --st-green-900: #14532d;
+  --st-amber-100: #fef3c7;
+  --st-amber-500: #f59e0b;
+  --st-amber-600: #d97706;
+  --st-amber-900: #78350f;
+  --st-blue-100: #dbeafe;
+  --st-blue-500: #3b82f6;
+  --st-blue-600: #2563eb;
+  --st-blue-900: #1e3a8a;
+  --st-spacing-xs: 0.25rem;
+  --st-spacing-sm: 0.5rem;
+  --st-spacing-md: 1rem;
+  --st-spacing-lg: 1.5rem;
+  --st-spacing-xl: 2rem;
+}
+
+/* src/styles/typography.css */
+:root {
+  --st-font-family-mono:
+    "Consolas",
+    "Courier New",
+    monospace;
+  --st-font-family:
+    "Inter",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  --st-font-weight-regular: 400;
+  --st-font-weight-medium: 500;
+  --st-font-weight-bold: 700;
+  --st-font-size-xs: 0.75rem;
+  --st-font-size-sm: 0.875rem;
+  --st-font-size-base: 1rem;
+  --st-font-size-lg: 1.125rem;
+  --st-font-size-xl: 1.25rem;
+  --st-font-size-2xl: 1.5rem;
+  --st-font-size-3xl: 1.875rem;
+  --st-font-size-4xl: 2.25rem;
+  --st-line-height-none: 1;
+  --st-line-height-tight: 1.25;
+  --st-line-height-normal: 1.5;
+  --st-line-height-relaxed: 1.75;
+}
+
+/* src/styles/theme.css */
+:root,
+:root[data-theme=light] {
+  --st-color-bg: var(--st-white);
+  --st-color-surface: var(--st-gray-50);
+  --st-color-border: var(--st-gray-200);
+  --st-color-text: var(--st-gray-900);
+  --st-color-text-muted: var(--st-gray-700);
+  --st-color-primary: var(--st-purple-600);
+  --st-color-primary-hover: var(--st-purple-700);
+  --st-color-error: var(--st-red-600);
+  --st-color-error-bg: var(--st-red-100);
+  --st-color-success: var(--st-green-600);
+  --st-color-success-bg: var(--st-green-100);
+  --st-color-warning: var(--st-amber-600);
+  --st-color-warning-bg: var(--st-amber-100);
+  --st-color-info: var(--st-blue-600);
+  --st-color-info-bg: var(--st-blue-100);
+}
+:root:not([data-theme=light]),
+:root[data-theme=dark] {
+  --st-color-bg: var(--st-gray-900);
+  --st-color-surface: var(--st-gray-800);
+  --st-color-surface-muted: color-mix(in srgb, var(--st-color-surface), black 15%);
+  --st-color-surface-hover: color-mix(in srgb, var(--st-color-surface), white 10%);
+  --st-color-border: var(--st-gray-700);
+  --st-color-text: var(--st-gray-50);
+  --st-color-text-muted: var(--st-gray-200);
+  --st-color-primary: var(--st-purple-400);
+  --st-color-primary-hover: var(--st-purple-600);
+  --st-color-error: var(--st-red-500);
+  --st-color-error-bg: #451a1a;
+  --st-color-success: var(--st-green-500);
+  --st-color-success-bg: #143620;
+  --st-color-warning: var(--st-amber-500);
+  --st-color-warning-bg: #422a14;
+  --st-color-info: var(--st-blue-500);
+  --st-color-info-bg: #172a54;
+}
+
+/* src/styles/index.css */
+:not(:defined) {
+  visibility: hidden;
+}
+body {
+  background-color: var(--st-color-bg);
+  color: var(--st-color-text);
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-base);
+  line-height: var(--st-line-height-normal);
+  -webkit-font-smoothing: antialiased;
+  padding: 0;
+  margin: 0;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--st-color-text);
+  font-weight: var(--st-font-weight-bold);
+  line-height: var(--st-line-height-tight);
+  margin-top: 0;
+  margin-bottom: var(--st-spacing-md);
+}
+h1 {
+  font-size: var(--st-font-size-4xl);
+}
+h2 {
+  font-size: var(--st-font-size-3xl);
+}
+h3 {
+  font-size: var(--st-font-size-2xl);
+}
+h4 {
+  font-size: var(--st-font-size-xl);
+}
+h5 {
+  font-size: var(--st-font-size-lg);
+}
+h6 {
+  font-size: var(--st-font-size-base);
+}
+p {
+  margin-top: 0;
+  margin-bottom: var(--st-spacing-md);
+}
+a {
+  color: var(--st-color-primary);
+  text-decoration: none;
+  font-weight: var(--st-font-weight-medium);
+  transition: color 0.2s ease;
+}
+a:hover {
+  color: var(--st-color-primary-hover);
+  text-decoration: underline;
+}
+code {
+  font-family: var(--st-font-family-mono);
+  font-size: var(--st-font-size-sm);
+  background-color: var(--st-color-surface);
+  padding: var(--st-spacing-xs) var(--st-spacing-sm);
+  border-radius: 4px;
+}

package/dist/styles/reset.d.ts

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

package/dist/styles/reset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset.d.ts","sourceRoot":"","sources":["../../src/styles/reset.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAgDvB,CAAC"}

package/dist/styles/reset.js

@@ -0,0 +1,50 @@
+import { css } from 'lit';
+export const resetStyles = css `
+  /* 1. Box sizing rules */
+  :host,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* 2. Prevent mobile tap highlights and set base behavior */
+  :host {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* 3. Strip user-agent margins and padding */
+  body,
+  h1, h2, h3, h4, h5, h6,
+  p, figure, blockquote, dl, dd {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* 4. Form elements don't inherit typography by default, force them to */
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* 5. Make media easier to work with */
+  img,
+  picture,
+  svg {
+    max-width: 100%;
+    display: block;
+  }
+
+  /* 6. Strip default list styling if you use lists inside components */
+  ul,
+  ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+`;

package/package.json

@@ -0,0 +1,192 @@
+{
+  "name": "@sondor-technology/sondor-components",
+  "version": "1.0.0-1165-initial-setup.11",
+  "description": "",
+  "main": "src/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc && esbuild ./src/styles/index.css --bundle --outfile=dist/styles/index.css",
+    "watch": "concurrently \"tsc --watch\" \"esbuild src/styles/index.css --bundle --outfile=dist/styles/index.css --watch\""
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./button": {
+      "types": "./dist/components/button/button.d.ts",
+      "default": "./dist/components/button/button.js"
+    },
+    "./styles.css": {
+      "import": "./dist/styles/index.css",
+      "default": "./dist/styles/index.css"
+    },
+    "./theme-toggle": {
+      "types": "./dist/components/theme-toggle/theme-toggle.d.ts",
+      "default": "./dist/components/theme-toggle/theme-toggle.js"
+    },
+    "./input": {
+      "types": "./dist/components/input/input.d.ts",
+      "default": "./dist/components/input/input.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/textarea/textarea.d.ts",
+      "default": "./dist/components/textarea/textarea.js"
+    },
+    "./radio": {
+      "types": "./dist/components/radio/radio.d.ts",
+      "default": "./dist/components/radio/radio.js"
+    },
+    "./radio-group": {
+      "types": "./dist/components/radio-group/radio-group.d.ts",
+      "default": "./dist/components/radio-group/radio-group.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/checkbox/checkbox.d.ts",
+      "default": "./dist/components/checkbox/checkbox.js"
+    },
+    "./switch": {
+      "types": "./dist/components/switch/switch.d.ts",
+      "default": "./dist/components/switch/switch.js"
+    },
+    "./card": {
+      "types": "./dist/components/card/card.d.ts",
+      "default": "./dist/components/card/card.js"
+    },
+    "./alert": {
+      "types": "./dist/components/alert/alert.d.ts",
+      "default": "./dist/components/alert/alert.js"
+    },
+    "./tab": {
+      "types": "./dist/components/tabs/tab.d.ts",
+      "default": "./dist/components/tabs/tab.js"
+    },
+    "./tab-panel": {
+      "types": "./dist/components/tabs/tab-panel.d.ts",
+      "default": "./dist/components/tabs/tab-panel.js"
+    },
+    "./tabs": {
+      "types": "./dist/components/tabs/tabs.d.ts",
+      "default": "./dist/components/tabs/tabs.js"
+    },
+    "./badge": {
+      "types": "./dist/components/badge/badge.d.ts",
+      "default": "./dist/components/badge/badge.js"
+    },
+    "./vertical-nav-group": {
+      "types": "./dist/components/vertical-nav/vertical-nav-group.d.ts",
+      "default": "./dist/components/vertical-nav/vertical-nav-group.js"
+    },
+    "./vertical-nav-item": {
+      "types": "./dist/components/vertical-nav/vertical-nav-item.d.ts",
+      "default": "./dist/components/vertical-nav/vertical-nav-item.js"
+    },
+    "./code-block": {
+      "types": "./dist/components/code-block/code-block.d.ts",
+      "default": "./dist/components/code-block/code-block.js"
+    },
+    "./content-card": {
+      "types": "./dist/components/content-card/content-card.d.ts",
+      "default": "./dist/components/content-card/content-card.js"
+    },
+    "./grid": {
+      "types": "./dist/components/grid/grid.d.ts",
+      "default": "./dist/components/grid/grid.js"
+    },
+    "./grid-row": {
+      "types": "./dist/components/grid/grid-row.d.ts",
+      "default": "./dist/components/grid/grid-row.js"
+    },
+    "./icon": {
+      "types": "./dist/components/icon/icon.d.ts",
+      "default": "./dist/components/icon/icon.js"
+    },
+    "./footer": {
+      "types": "./dist/components/footer/footer.d.ts",
+      "default": "./dist/components/footer/footer.js"
+    },
+    "./link": {
+      "types": "./dist/components/link/link.d.ts",
+      "default": "./dist/components/link/link.js"
+    },
+    "./select": {
+      "types": "./dist/components/select/select.d.ts",
+      "default": "./dist/components/select/select.js"
+    },
+    "./button-group": {
+      "types": "./dist/components/button-group/button-group.d.ts",
+      "default": "./dist/components/button-group/button-group.js"
+    },
+    "./divider": {
+      "types": "./dist/components/divider/divider.d.ts",
+      "default": "./dist/components/divider/divider.js"
+    },
+    "./field": {
+      "types": "./dist/components/field/field.d.ts",
+      "default": "./dist/components/field/field.js"
+    },
+    "./table": {
+      "types": "./dist/components/table/table.d.ts",
+      "default": "./dist/components/table/table.js"
+    },
+    "./data-table": {
+      "types": "./dist/components/table/data-table.d.ts",
+      "default": "./dist/components/table/data-table.js"
+    },
+    "./metadata": {
+      "types": "./dist/components/metadata/metadata.d.ts",
+      "default": "./dist/components/metadata/metadata.js"
+    },
+    "./form": {
+      "types": "./dist/components/form/form.d.ts",
+      "default": "./dist/components/form/form.js"
+    },
+    "./form-step": {
+      "types": "./dist/components/form/form-step.d.ts",
+      "default": "./dist/components/form/form-step.js"
+    },
+    "./page-layout": {
+      "types": "./dist/components/page-layout/page-layout.d.ts",
+      "default": "./dist/components/page-layout/page-layout.js"
+    },
+    "./drawer": {
+      "types": "./dist/components/drawer/drawer.d.ts",
+      "default": "./dist/components/drawer/drawer.js"
+    },
+    "./skeleton": {
+      "types": "./dist/components/skeleton/skeleton.d.ts",
+      "default": "./dist/components/skeleton/skeleton.js"
+    },
+    "./router": {
+      "types": "./dist/components/router/router.d.ts",
+      "default": "./dist/components/router/router.js"
+    },
+    "./breadcrumb": {
+      "types": "./dist/components/breadcrumb/breadcrumb.d.ts",
+      "default": "./dist/components/breadcrumb/breadcrumb.js"
+    },
+    "./modal": {
+      "types": "./dist/components/modal/modal.d.ts",
+      "default": "./dist/components/modal/modal.js"
+    }
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.js"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "lit": "^3.3.3",
+    "prismjs": "^1.30.0"
+  },
+  "devDependencies": {
+    "@types/prismjs": "^1.26.6",
+    "concurrently": "^10.0.3",
+    "esbuild": "^0.28.1",
+    "typescript": "^7.0.2"
+  },
+  "readme": "README.md"
+}

package/src/components/alert/alert.ts

@@ -0,0 +1,101 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+export type AlertColor = 'info' | 'success' | 'warning' | 'error';
+
+@customElement('st-alert')
+export class StAlert extends LitElement {
+  @property({ type: String, reflect: true }) color: AlertColor = 'info';
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: flex;
+        gap: var(--st-spacing-md);
+        padding: var(--st-spacing-md);
+        border-radius: 6px;
+        border: 1px solid transparent;
+        font-size: var(--st-font-size-base);
+        line-height: 1.5;
+        
+        /* Default Palette */
+        --_alert-bg: var(--st-color-info-bg);
+        --_alert-border: var(--st-color-info);
+        --_alert-text: var(--st-color-text);
+        --_alert-icon: var(--st-color-info);
+      }
+
+      /* State Modifiers */
+      :host([color="error"]) {
+        --_alert-bg: var(--st-color-error-bg);
+        --_alert-border: var(--st-color-error);
+        --_alert-icon: var(--st-color-error);
+      }
+
+      :host([color="success"]) {
+        --_alert-bg: var(--st-color-success-bg);
+        --_alert-border: var(--st-color-success);
+        --_alert-icon: var(--st-color-success);
+      }
+
+      :host([color="warning"]) {
+        --_alert-bg: var(--st-color-warning-bg);
+        --_alert-border: var(--st-color-warning);
+        --_alert-icon: var(--st-color-warning);
+        /* Amber backgrounds often need forced dark text in light mode, but your tokens handle this */
+      }
+
+      /* Apply the variables */
+      :host {
+        background-color: var(--_alert-bg);
+        border-color: var(--_alert-border);
+        color: var(--_alert-text);
+      }
+
+      /* Icon Slot */
+      .icon-container {
+        display: flex;
+        flex-shrink: 0;
+        color: var(--_alert-icon);
+        /* Align icon with the first line of text */
+        margin-top: 2px; 
+      }
+
+      ::slotted([slot="icon"]) {
+        width: 1.25rem;
+        height: 1.25rem;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-xs);
+        flex: 1;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <div class="icon-container">
+        <slot name="icon"></slot>
+      </div>
+      <div class="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-alert': StAlert;
+  }
+}

package/src/components/badge/badge.ts

@@ -0,0 +1,97 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+export type BadgeColor = 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+
+@customElement('st-badge')
+export class StBadge extends LitElement {
+  @property({ type: String, reflect: true }) color: BadgeColor = 'neutral';
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.125rem 0.5rem; /* 2px 8px */
+        font-size: var(--st-font-size-xs);
+        font-weight: var(--st-font-weight-medium);
+        border-radius: 999px; /* Pill shape */
+        line-height: 1.25;
+        white-space: nowrap;
+        
+        /* Base / Neutral Palette */
+        --_badge-bg: var(--st-color-surface);
+        --_badge-text: var(--st-color-text-muted);
+        --_badge-border: var(--st-color-border);
+      }
+
+      /* Base Application */
+      :host {
+        background-color: var(--_badge-bg);
+        color: var(--_badge-text);
+        border: 1px solid var(--_badge-border);
+      }
+
+      /* ==========================================================
+         Soft Semantic Variants
+         ========================================================== */
+      :host([color="primary"]) {
+        --_badge-bg: var(--st-color-primary);
+        --_badge-text: var(--st-white);
+        --_badge-border: transparent;
+      }
+
+      :host([color="success"]) {
+        --_badge-bg: var(--st-color-success-bg);
+        --_badge-text: var(--st-color-success);
+        --_badge-border: transparent;
+      }
+
+      :host([color="warning"]) {
+        --_badge-bg: var(--st-color-warning-bg);
+        --_badge-text: var(--st-color-warning);
+        --_badge-border: transparent;
+      }
+
+      :host([color="error"]) {
+        --_badge-bg: var(--st-color-error-bg);
+        --_badge-text: var(--st-color-error);
+        --_badge-border: transparent;
+      }
+
+      :host([color="info"]) {
+        --_badge-bg: var(--st-color-info-bg);
+        --_badge-text: var(--st-color-info);
+        --_badge-border: transparent;
+      }
+
+      /* Optional icon support inside the badge */
+      ::slotted(svg) {
+        width: 0.75rem;
+        height: 0.75rem;
+        margin-right: 0.25rem;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <slot name="icon"></slot>
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-badge': StBadge;
+  }
+}