@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.2

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

@@ -1,6 +1,6 @@
 {
   "name": "@sondor-technology/sondor-components",
-  "version": "1.0.0",
+  "version": "1.0.1-develop.2",
   "description": "",
   "main": "src/index.js",
   "types": "dist/index.d.ts",
@@ -187,5 +187,6 @@
     "concurrently": "^10.0.3",
     "esbuild": "^0.28.1",
     "typescript": "^7.0.2"
-  }
+  },
+  "readme": "README.md"
 }

package/src/components/alert/alert.ts

@@ -1,101 +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;
-  }
+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

@@ -1,97 +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;
-  }
+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;
+  }
 }