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

package/src/styles/index.css

@@ -1,80 +1,80 @@
-@import "./globals.css";
-@import "./typography.css";
-@import "./theme.css";
-
-/* Hide custom elements before they are initialized */
-:not(:defined) {
-  visibility: hidden;
-}
-
-/* Base document styles for consuming apps */
-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; /* Makes fonts look sharper on Mac */
-  padding: 0;
-  margin: 0;
-}
-
-/* Base Headings */
-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);
-}
-
-/* Paragraphs & Links */
-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;
-}
-
-/* Inline Code */
-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;
-}
+@import "./globals.css";
+@import "./typography.css";
+@import "./theme.css";
+
+/* Hide custom elements before they are initialized */
+:not(:defined) {
+  visibility: hidden;
+}
+
+/* Base document styles for consuming apps */
+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; /* Makes fonts look sharper on Mac */
+  padding: 0;
+  margin: 0;
+}
+
+/* Base Headings */
+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);
+}
+
+/* Paragraphs & Links */
+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;
+}
+
+/* Inline Code */
+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/src/styles/reset.ts

@@ -1,51 +1,51 @@
-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;
-  }
+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/src/styles/theme.css

@@ -1,59 +1,59 @@
-/* ==========================================================
-   Light Mode (Default)
-   ========================================================== */
-: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);
-  
-  /* Now referencing the global tokens */
-  --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);
-}
-
-/* ==========================================================
-   Dark Mode
-   ========================================================== */
-: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);
-  
-  /* Swapped to the lighter global token for contrast */
-  --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; 
+/* ==========================================================
+   Light Mode (Default)
+   ========================================================== */
+: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);
+  
+  /* Now referencing the global tokens */
+  --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);
+}
+
+/* ==========================================================
+   Dark Mode
+   ========================================================== */
+: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);
+  
+  /* Swapped to the lighter global token for contrast */
+  --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; 
 }

package/src/styles/typography.css

@@ -1,26 +1,26 @@
-:root {
-  /* Font Families */
-  --st-font-family-mono: 'Consolas', 'Courier New', monospace;
-  --st-font-family: 'Inter', system-ui, -apple-system, sans-serif;
-
-  /* Font Weights */
-  --st-font-weight-regular: 400;
-  --st-font-weight-medium: 500;
-  --st-font-weight-bold: 700;
-
-  /* Font Sizes (Scale) - Assuming a 16px browser base */
-  --st-font-size-xs: 0.75rem;    /* 12px */
-  --st-font-size-sm: 0.875rem;   /* 14px */
-  --st-font-size-base: 1rem;     /* 16px */
-  --st-font-size-lg: 1.125rem;   /* 18px */
-  --st-font-size-xl: 1.25rem;    /* 20px */
-  --st-font-size-2xl: 1.5rem;    /* 24px */
-  --st-font-size-3xl: 1.875rem;  /* 30px */
-  --st-font-size-4xl: 2.25rem;   /* 36px */
-
-  /* Line Heights (Leading) */
-  --st-line-height-none: 1;
-  --st-line-height-tight: 1.25;
-  --st-line-height-normal: 1.5;
-  --st-line-height-relaxed: 1.75;
+:root {
+  /* Font Families */
+  --st-font-family-mono: 'Consolas', 'Courier New', monospace;
+  --st-font-family: 'Inter', system-ui, -apple-system, sans-serif;
+
+  /* Font Weights */
+  --st-font-weight-regular: 400;
+  --st-font-weight-medium: 500;
+  --st-font-weight-bold: 700;
+
+  /* Font Sizes (Scale) - Assuming a 16px browser base */
+  --st-font-size-xs: 0.75rem;    /* 12px */
+  --st-font-size-sm: 0.875rem;   /* 14px */
+  --st-font-size-base: 1rem;     /* 16px */
+  --st-font-size-lg: 1.125rem;   /* 18px */
+  --st-font-size-xl: 1.25rem;    /* 20px */
+  --st-font-size-2xl: 1.5rem;    /* 24px */
+  --st-font-size-3xl: 1.875rem;  /* 30px */
+  --st-font-size-4xl: 2.25rem;   /* 36px */
+
+  /* Line Heights (Leading) */
+  --st-line-height-none: 1;
+  --st-line-height-tight: 1.25;
+  --st-line-height-normal: 1.5;
+  --st-line-height-relaxed: 1.75;
 }

package/tsconfig.json

@@ -1,16 +1,16 @@
-{
-  "compilerOptions": {
-    "target": "es2021",
-    "module": "es2022",
-    "moduleResolution": "bundler",
-    "lib": ["es2021", "DOM", "DOM.Iterable"],
-    "declaration": true,
-    "declarationMap": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "strict": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false
-  },
-  "include": ["src/**/*.ts"]
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "module": "es2022",
+    "moduleResolution": "bundler",
+    "lib": ["es2021", "DOM", "DOM.Iterable"],
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false
+  },
+  "include": ["src/**/*.ts"]
 }

package/README.md

@@ -1,8 +0,0 @@
-# Sondor Components
-The Sondor Copmonnents is a simple, light weight web-component library. All components follow industry standards, building on top of native
-functionality while providing an out of the box professional modern look.
-
-## Documentation
-For detailed documentation on each component within the library, visit the docs site here:
-
-[Sondor Components Documentation](https://docs.sondor-technology.dev)

package/dist/components/alert/alert.d.ts

@@ -1,13 +0,0 @@
-import { LitElement } from 'lit';
-export type AlertColor = 'info' | 'success' | 'warning' | 'error';
-export declare class StAlert extends LitElement {
-    color: AlertColor;
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'st-alert': StAlert;
-    }
-}
-//# sourceMappingURL=alert.d.ts.map

package/dist/components/alert/alert.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAElE,qBACa,OAAQ,SAAQ,UAAU;IACM,KAAK,EAAE,UAAU,CAAU;IAEtE,MAAM,CAAC,MAAM,4BAwEX;IAEF,MAAM,yCASL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/alert/alert.js

@@ -1,105 +0,0 @@
-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, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-let StAlert = class StAlert extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.color = 'info';
-    }
-    render() {
-        return html `
-      <div class="icon-container">
-        <slot name="icon"></slot>
-      </div>
-      <div class="content">
-        <slot></slot>
-      </div>
-    `;
-    }
-};
-StAlert.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;
-      }
-    `
-];
-__decorate([
-    property({ type: String, reflect: true })
-], StAlert.prototype, "color", void 0);
-StAlert = __decorate([
-    customElement('st-alert')
-], StAlert);
-export { StAlert };

package/dist/components/badge/badge.d.ts

@@ -1,13 +0,0 @@
-import { LitElement } from 'lit';
-export type BadgeColor = 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
-export declare class StBadge extends LitElement {
-    color: BadgeColor;
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'st-badge': StBadge;
-    }
-}
-//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge/badge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAE1F,qBACa,OAAQ,SAAQ,UAAU;IACM,KAAK,EAAE,UAAU,CAAa;IAEzE,MAAM,CAAC,MAAM,4BAwEX;IAEF,MAAM,yCAKL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}