@cal.macconnachie/web-components 0.0.8 → 0.0.9

package/README.md

@@ -18,7 +18,7 @@ Load only the components you need:
 
 ```html
 <!-- Load just the auth component -->
-<script type="module" src="https://cdn.cals-api.com/components/cals-auth.js"></script>
+<script type="module" src="https://cdn.cals-api.com/components/auth.js"></script>
 ```
 
 ### Option 3: Using with Vue, React, or other frameworks
@@ -27,13 +27,13 @@ For framework projects (Vue, React, etc.), load the component via script tag in
 
 ```html
 <!-- index.html -->
-<script type="module" src="https://cdn.cals-api.com/components/cals-auth.js"></script>
+<script type="module" src="https://cdn.cals-api.com/components/auth.js"></script>
 ```
 
 Then create a type declaration file for TypeScript support:
 
 ```typescript
-// src/types/cals-auth.d.ts
+// src/types/auth.d.ts
 export interface CalsAuth extends HTMLElement {
   openModal(): void;
   logout(): void;
@@ -41,7 +41,7 @@ export interface CalsAuth extends HTMLElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'cals-auth': CalsAuth;
+    'auth': CalsAuth;
   }
 }
 ```
@@ -51,13 +51,13 @@ Now you can use it with full type safety in your components:
 **Vue:**
 ```vue
 <template>
-  <cals-auth ref="authRef" app-name="Marketplace"></cals-auth>
+  <auth ref="authRef" app-name="Marketplace"></auth>
   <button @click="openAuth">Login / Sign up</button>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import type { CalsAuth } from '@/types/cals-auth';
+import type { CalsAuth } from '@/types/auth';
 
 const authRef = ref<CalsAuth>();
 
@@ -70,14 +70,14 @@ const openAuth = () => {
 **React:**
 ```tsx
 import { useRef } from 'react';
-import type { CalsAuth } from '@/types/cals-auth';
+import type { CalsAuth } from '@/types/auth';
 
 function App() {
   const authRef = useRef<CalsAuth>(null);
 
   return (
     <>
-      <cals-auth ref={authRef} app-name="Marketplace"></cals-auth>
+      <auth ref={authRef} app-name="Marketplace"></auth>
       <button onClick={() => authRef.current?.openModal()}>
         Login / Sign up
       </button>
@@ -91,7 +91,7 @@ function App() {
 HTML:
 
 ```html
-<cals-auth id="cals-auth" app-name="Marketplace"></cals-auth>
+<auth id="auth" app-name="Marketplace"></auth>
 
 <button id="open-auth">Login / Sign up</button>
 <button id="logout-auth">Logout</button>
@@ -99,7 +99,7 @@ HTML:
 
 JavaScript:
 ```js
-const auth = document.querySelector('cals-auth');
+const auth = document.querySelector('auth');
 
 document.getElementById('open-auth')?.addEventListener('click', () => {
   auth?.openModal();
@@ -112,9 +112,9 @@ document.getElementById('logout-auth')?.addEventListener('click', () => {
 
 TypeScript:
 ```typescript
-import type { CalsAuth } from 'https://cdn.cals-api.com/components/cals-auth.js';
+import type { CalsAuth } from 'https://cdn.cals-api.com/components/auth.js';
 
-const auth = document.querySelector<CalsAuth>('cals-auth');
+const auth = document.querySelector<CalsAuth>('auth');
 
 document.getElementById('open-auth')?.addEventListener('click', () => {
   auth?.openModal();
@@ -127,7 +127,7 @@ document.getElementById('logout-auth')?.addEventListener('click', () => {
 
 ## Available Components
 
-- `cals-auth` - Authentication component with sign in, sign up, and password reset
+- `auth` - Authentication component with sign in, sign up, and password reset
 
 ## Project Structure
 

package/dist/components/{cals-auth.js → auth.js}

@@ -966,24 +966,24 @@ const yt = (e, t, s) => {
       display: inline-block;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       box-sizing: border-box;
-      --color-primary: var(--cals-auth-color-primary, #2563eb);
-      --color-bg-primary: var(--cals-auth-color-bg-primary, #ffffff);
-      --color-bg-secondary: var(--cals-auth-color-bg-secondary, #f8fafc);
-      --color-text-primary: var(--cals-auth-color-text-primary, #0f172a);
-      --color-text-secondary: var(--cals-auth-color-text-secondary, #64748b);
-      --color-text-muted: var(--cals-auth-color-text-muted, #94a3b8);
-      --color-border: var(--cals-auth-color-border, #e2e8f0);
-      --color-error: var(--cals-auth-color-error, #dc2626);
-      --color-success: var(--cals-auth-color-success, #16a34a);
-      --transition-slow: var(--cals-auth-transition-slow, 300ms);
-      --radius-md: var(--cals-auth-radius-md, 0.5rem);
-      --radius-lg: var(--cals-auth-radius-lg, 0.75rem);
-      --radius-xl: var(--cals-auth-radius-xl, 1.25rem);
-      --space-2: var(--cals-auth-space-2, 0.5rem);
-      --space-3: var(--cals-auth-space-3, 0.75rem);
-      --space-4: var(--cals-auth-space-4, 1rem);
-      --space-5: var(--cals-auth-space-5, 1.25rem);
-      --space-6: var(--cals-auth-space-6, 1.5rem);
+      --color-primary: var(--auth-color-primary, #2563eb);
+      --color-bg-primary: var(--auth-color-bg-primary, #ffffff);
+      --color-bg-secondary: var(--auth-color-bg-secondary, #f8fafc);
+      --color-text-primary: var(--auth-color-text-primary, #0f172a);
+      --color-text-secondary: var(--auth-color-text-secondary, #64748b);
+      --color-text-muted: var(--auth-color-text-muted, #94a3b8);
+      --color-border: var(--auth-color-border, #e2e8f0);
+      --color-error: var(--auth-color-error, #dc2626);
+      --color-success: var(--auth-color-success, #16a34a);
+      --transition-slow: var(--auth-transition-slow, 300ms);
+      --radius-md: var(--auth-radius-md, 0.5rem);
+      --radius-lg: var(--auth-radius-lg, 0.75rem);
+      --radius-xl: var(--auth-radius-xl, 1.25rem);
+      --space-2: var(--auth-space-2, 0.5rem);
+      --space-3: var(--auth-space-3, 0.75rem);
+      --space-4: var(--auth-space-4, 1rem);
+      --space-5: var(--auth-space-5, 1.25rem);
+      --space-6: var(--auth-space-6, 1.5rem);
     }
 
     *,
@@ -2503,7 +2503,7 @@ y([
   it(".modal-body")
 ], m.prototype, "modalBody", 2);
 m = y([
-  Zt("cals-auth")
+  Zt("auth")
 ], m);
 export {
   m as CalsAuth

package/dist/components/index.d.ts

@@ -110,4 +110,19 @@ export declare class CalsAuth extends LitElement {
     static styles: CSSResult;
 }
 
+export declare class CalsThemeToggle extends LitElement {
+    theme: 'light' | 'dark';
+    storageKey: string;
+    size: 'sm' | 'md' | 'lg';
+    variant: 'ghost' | 'outline' | 'solid';
+    private isDark;
+    connectedCallback(): void;
+    private applyTheme;
+    private toggleTheme;
+    private getSizeClass;
+    private getVariantClass;
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
 export { }