@mhmo91/schmancy 0.6.18 → 0.7.1

package/dist/mixins/discovery.service.ts

@@ -1,60 +0,0 @@
-import { fromEvent, timer, race, Observable } from 'rxjs'
-import { takeUntil, map, defaultIfEmpty } from 'rxjs/operators'
-
-/**
- * Discover a component in the DOM using the WhereAreYou/HereIAm pattern.
- *
- * @param componentTag - The tag name of the component to discover (e.g., 'schmancy-navigation-rail')
- * @param timeout - How long to wait for a response in milliseconds (default: 100)
- * @returns Observable that emits the discovered component or null if not found
- */
-export function discoverComponent<T extends HTMLElement>(
-	componentTag: string,
-	timeout = 100,
-): Observable<T | null> {
-	const whereAreYouEvent = `${componentTag}-where-are-you`
-	const hereIAmEvent = `${componentTag}-here-i-am`
-
-	return new Observable(subscriber => {
-		// Listen for response first (you were right!)
-		const subscription = fromEvent<CustomEvent>(window, hereIAmEvent)
-			.pipe(
-				takeUntil(timer(timeout)),
-				map(e => e.detail.component as T),
-				defaultIfEmpty(null),
-			)
-			.subscribe(component => {
-				subscriber.next(component)
-				subscriber.complete()
-			})
-
-		// Then dispatch discovery request
-		window.dispatchEvent(
-			new CustomEvent(whereAreYouEvent, {
-				bubbles: true,
-				composed: true,
-			}),
-		)
-
-		// Return cleanup function
-		return () => subscription.unsubscribe()
-	})
-}
-
-/**
- * Discover any of multiple components using race.
- * Returns the first component that responds.
- *
- * @param componentTags - Array of component tag names to discover
- * @returns Observable that emits the first discovered component or null if none found
- */
-export function discoverAnyComponent<T extends HTMLElement>(...componentTags: string[]): Observable<T | null> {
-	if (componentTags.length === 0) {
-		return new Observable(subscriber => {
-			subscriber.next(null)
-			subscriber.complete()
-		})
-	}
-
-	return race(...componentTags.map(tag => discoverComponent<T>(tag)))
-}

package/dist/mixins/formField.mixin.ts

@@ -1,223 +0,0 @@
-import { CSSResult, LitElement, PropertyValueMap } from 'lit'
-import { property } from 'lit/decorators.js'
-import { IBaseMixin } from './baseElement'
-import { Constructor } from './constructor'
-import { ITailwindElementMixin, TailwindElement } from './tailwind.mixin'
-
-/**
- * Interface defining the properties and methods that the FormFieldMixin adds.
- */
-export interface IFormFieldMixin extends Element {
-	// Properties
-	name: string
-	value: string | string[] | boolean | number | undefined
-	label: string
-	required: boolean
-	disabled: boolean
-	readonly: boolean
-	error: boolean
-	validationMessage: string
-	hint?: string
-	id: string
-
-	// Form association
-	form: HTMLFormElement | null
-
-	// Methods
-	checkValidity(): boolean
-	reportValidity(): boolean
-	setCustomValidity(message: string): void
-
-	// Event emitter helper
-	emitChange(detail: any): void
-}
-
-/**
- * A mixin that adds form field capabilities to a LitElement class.
- * This provides common form field properties, validation, and form association.
- *
- * @example
- * ```ts
- * class MyInput extends FormFieldMixin(TailwindElement(css`...`)) {
- *   // Your component code here
- * }
- * ```
- */
-export function FormFieldMixin<T extends Constructor<LitElement>>(superClass: T) {
-	class FormFieldMixinClass extends superClass {
-		static formAssociated = true
-
-		// Element internals for form association
-		private internals: ElementInternals | undefined
-
-		// Properties common to form fields
-		/**
-		 * The name of the form field (used for form submission)
-		 */
-		@property({ type: String })
-		name: string = ''
-
-		/**
-		 * The current value of the form field
-		 */
-		@property({ reflect: true })
-		value: string | string[] | boolean | number | undefined = ''
-
-		/**
-		 * Label text for the form field
-		 */
-		@property({ type: String })
-		label: string = ''
-
-		/**
-		 * Whether the field is required
-		 */
-		@property({ type: Boolean, reflect: true })
-		required: boolean = false
-
-		/**
-		 * Whether the field is disabled
-		 */
-		@property({ type: Boolean, reflect: true })
-		disabled: boolean = false
-
-		/**
-		 * Whether the field is read-only
-		 */
-		@property({ type: Boolean, reflect: true })
-		readonly: boolean = false
-
-		/**
-		 * Whether the field is in an error state
-		 */
-		@property({ type: Boolean, reflect: true })
-		error: boolean = false
-
-		/**
-		 * The validation message to display
-		 */
-		@property({ type: String })
-		validationMessage: string = ''
-
-		/**
-		 * Optional hint text to display below the field
-		 */
-		@property({ type: String })
-		hint?: string
-
-		/**
-		 * Unique identifier for the field
-		 */
-		@property({ reflect: true })
-		override id: string = `schmancy-field-${Date.now()}-${Math.floor(Math.random() * 1000)}`
-
-		constructor(...args: any[]) {
-			super(...args)
-			try {
-				this.internals = this.attachInternals()
-			} catch {
-				this.internals = undefined
-			}
-		}
-
-		/**
-		 * Gets the form this element is associated with
-		 */
-		get form(): HTMLFormElement | null {
-			return this.internals?.form ?? null
-		}
-
-		/**
-		 * Lifecycle method called when properties change
-		 */
-		protected willUpdate(changedProps: PropertyValueMap<any>): void {
-			super.willUpdate(changedProps)
-
-			// Update form value when value changes
-			if (changedProps.has('value')) {
-				this.internals?.setFormValue(this.value as string | File | FormData | null)
-			}
-
-			// Update validation state when error or validation message changes
-			if (changedProps.has('error') || changedProps.has('validationMessage')) {
-				if (this.error && this.validationMessage) {
-					this.internals?.setValidity({ customError: true }, this.validationMessage)
-				} else {
-					this.internals?.setValidity({})
-				}
-			}
-		}
-
-		/**
-		 * Checks if the field is valid without showing validation UI
-		 */
-		checkValidity(): boolean {
-			if (this.disabled) return true
-
-			if (this.required && (this.value === '' || this.value === undefined || this.value === null)) {
-				this.error = true
-				this.validationMessage = 'This field is required'
-				return false
-			}
-
-			return true
-		}
-
-		/**
-		 * Reports validity and shows validation UI if invalid
-		 */
-		reportValidity(): boolean {
-			const isValid = this.checkValidity()
-			if (!isValid) {
-				this.internals?.reportValidity()
-			}
-			return isValid
-		}
-
-		/**
-		 * Sets a custom validation message
-		 */
-		setCustomValidity(message: string): void {
-			this.validationMessage = message
-			this.error = message !== ''
-			if (message) {
-				this.internals?.setValidity({ customError: true }, message)
-			} else {
-				this.internals?.setValidity({})
-			}
-		}
-
-		/**
-		 * Helper method to emit change events
-		 */
-		emitChange(detail: any): void {
-			this.dispatchEvent(
-				new CustomEvent('change', {
-					detail,
-					bubbles: true,
-					composed: true,
-				}),
-			)
-		}
-	}
-
-	return FormFieldMixinClass as Constructor<IFormFieldMixin> & T
-}
-
-/**
- * A convenience function that composes FormFieldMixin with TailwindElement
- * to create a base class for Schmancy form components.
- *
- * @example
- * ```ts
- * class MyInput extends SchmancyFormField(css`...`) {
- *   // Your component code here
- * }
- * ```
- */
-export function SchmancyFormField<T extends CSSResult>(componentStyle?: T) {
-	return FormFieldMixin(TailwindElement(componentStyle)) as Constructor<IFormFieldMixin> &
-		Constructor<ITailwindElementMixin> &
-		Constructor<LitElement> &
-		Constructor<IBaseMixin>
-}

package/dist/mixins/index.ts

@@ -1,5 +0,0 @@
-export * from './baseElement';
-export * from './constructor';
-export * from './formField.mixin';
-export * from './litElement.mixin';
-export * from './tailwind.mixin';

package/dist/mixins/litElement.mixin.ts

@@ -1,15 +0,0 @@
-import { CSSResult, LitElement } from 'lit'
-import { TailwindElement } from './tailwind.mixin'
-import { BaseElement, IBaseMixin } from './baseElement'
-import { Constructor } from './constructor'
-
-export const $LitElement = <T extends CSSResult>(componentStyle?: T) => {
-	class TailwindMixinClass extends BaseElement(TailwindElement(componentStyle)) {
-		disconnectedCallback = () => {
-			super.disconnectedCallback()
-		}
-	}
-	return TailwindMixinClass as CustomElementConstructor &
-		Constructor<LitElement> &
-		Constructor<IBaseMixin> /* see "typing the subclass" below */
-}

package/dist/mixins/scss.d.ts

@@ -1,21 +0,0 @@
-declare module '*.scss?inline' {
-	import { type CSSResult } from 'lit'
-	const styles: CSSResult
-	export default styles
-}
-
-declare module '*.module.scss' {
-	const classes: Record<string, string>
-	export default classes
-}
-
-declare module '*.css?inline' {
-	import { type CSSResult } from 'lit'
-	const styles: CSSResult
-	export default styles
-}
-
-declare module '*.module.css' {
-	const classes: Record<string, string>
-	export default classes
-}

package/dist/mixins/tailwind.css

@@ -1,201 +0,0 @@
-@import 'tailwindcss';
-:host,
-:root {
-	font-family: var(--schmancy-font-family);
-}
-@theme inline {
-	--md-ref-typeface-brand: var(--schmancy-font-family);
-	--md-ref-typeface-plain: var(--schmancy-font-family);
-	--md-sys-color-primary: var(--schmancy-sys-color-primary-default);
-	--md-sys-color-secondary: var(--schmancy-sys-color-secondary-default);
-
-	--*: initial;
-	--border-style: solid;
-	--spacing: 4px;
-	--color-scrim: var(--schmancy-sys-color-scrim);
-	--color-outline: var(--schmancy-sys-color-outline);
-	--color-outlineVariant: var(--schmancy-sys-color-outlineVariant);
-	--color-surface-default: var(--schmancy-sys-color-surface-default);
-	--color-surface-dim: var(--schmancy-sys-color-surface-dim);
-	--color-surface-bright: var(--schmancy-sys-color-surface-bright);
-	--color-surface-container: var(--schmancy-sys-color-surface-container);
-	--color-surface-low: var(--schmancy-sys-color-surface-low);
-	--color-surface-high: var(--schmancy-sys-color-surface-high);
-	--color-surface-highest: var(--schmancy-sys-color-surface-highest);
-	--color-surface-lowest: var(--schmancy-sys-color-surface-lowest);
-	--color-surface-on: var(--schmancy-sys-color-surface-on);
-	--color-surface-onVariant: var(--schmancy-sys-color-surface-onVariant);
-	--color-primary-default: var(--schmancy-sys-color-primary-default);
-	--color-primary-on: var(--schmancy-sys-color-primary-on);
-	--color-primary-container: var(--schmancy-sys-color-primary-container);
-	--color-primary-onContainer: var(--schmancy-sys-color-primary-onContainer);
-	--color-secondary-default: var(--schmancy-sys-color-secondary-default);
-	--color-secondary-on: var(--schmancy-sys-color-secondary-on);
-	--color-secondary-container: var(--schmancy-sys-color-secondary-container);
-	--color-secondary-onContainer: var(--schmancy-sys-color-secondary-onContainer);
-	--color-tertiary-default: var(--schmancy-sys-color-tertiary-default);
-	--color-tertiary-on: var(--schmancy-sys-color-tertiary-on);
-	--color-tertiary-container: var(--schmancy-sys-color-tertiary-container);
-	--color-tertiary-onContainer: var(--schmancy-sys-color-tertiary-onContainer);
-	--color-error-default: var(--schmancy-sys-color-error-default);
-	--color-error-on: var(--schmancy-sys-color-error-on);
-	--color-error-container: var(--schmancy-sys-color-error-container);
-	--color-error-onContainer: var(--schmancy-sys-color-error-onContainer);
-	--color-success-default: var(--schmancy-sys-color-success-default);
-	--color-success-on: var(--schmancy-sys-color-success-on);
-	--color-success-container: var(--schmancy-sys-color-success-container);
-	--color-success-onContainer: var(--schmancy-sys-color-success-onContainer);
-	--shadow-0: var(--schmancy-sys-elevation-0);
-	--shadow-1: var(--schmancy-sys-elevation-1);
-	--shadow-2: var(--schmancy-sys-elevation-2);
-	--shadow-3: var(--schmancy-sys-elevation-3);
-	--shadow-4: var(--schmancy-sys-elevation-4);
-	--shadow-5: var(--schmancy-sys-elevation-5);
-	--outline-1: var(--schmancy-sys-outline-1);
-	--font-sans:
-		var(--schmancy-font-family), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-		'Segoe UI Symbol', 'Noto Color Emoji';
-	--font-serif: var(--schmancy-font-family), ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-	--font-mono:
-		var(--schmancy-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-		'Courier New', monospace;
-	--color-black: #000;
-	--color-white: #fff;
-	--spacing: 0.25rem;
-	--breakpoint-sm: 40rem;
-	--breakpoint-md: 48rem;
-	--breakpoint-lg: 64rem;
-	--breakpoint-xl: 80rem;
-	--breakpoint-2xl: 96rem;
-	--container-3xs: 16rem;
-	--container-2xs: 18rem;
-	--container-xs: 20rem;
-	--container-sm: 24rem;
-	--container-md: 28rem;
-	--container-lg: 32rem;
-	--container-xl: 36rem;
-	--container-2xl: 42rem;
-	--container-3xl: 48rem;
-	--container-4xl: 56rem;
-	--container-5xl: 64rem;
-	--container-6xl: 72rem;
-	--container-7xl: 80rem;
-	--text-xs: 0.75rem;
-	--text-xs--line-height: calc(1 / 0.75);
-	--text-sm: 0.875rem;
-	--text-sm--line-height: calc(1.25 / 0.875);
-	--text-base: 1rem;
-	--text-base--line-height: calc(1.5 / 1);
-	--text-lg: 1.125rem;
-	--text-lg--line-height: calc(1.75 / 1.125);
-	--text-xl: 1.25rem;
-	--text-xl--line-height: calc(1.75 / 1.25);
-	--text-2xl: 1.5rem;
-	--text-2xl--line-height: calc(2 / 1.5);
-	--text-3xl: 1.875rem;
-	--text-3xl--line-height: calc(2.25 / 1.875);
-	--text-4xl: 2.25rem;
-	--text-4xl--line-height: calc(2.5 / 2.25);
-	--text-5xl: 3rem;
-	--text-5xl--line-height: 1;
-	--text-6xl: 3.75rem;
-	--text-6xl--line-height: 1;
-	--text-7xl: 4.5rem;
-	--text-7xl--line-height: 1;
-	--text-8xl: 6rem;
-	--text-8xl--line-height: 1;
-	--text-9xl: 8rem;
-	--text-9xl--line-height: 1;
-	--font-weight-thin: 100;
-	--font-weight-extralight: 200;
-	--font-weight-light: 300;
-	--font-weight-normal: 400;
-	--font-weight-medium: 500;
-	--font-weight-semibold: 600;
-	--font-weight-bold: 700;
-	--font-weight-extrabold: 800;
-	--font-weight-black: 900;
-	--tracking-tighter: -0.05em;
-	--tracking-tight: -0.025em;
-	--tracking-normal: 0em;
-	--tracking-wide: 0.025em;
-	--tracking-wider: 0.05em;
-	--tracking-widest: 0.1em;
-	--leading-tight: 1.25;
-	--leading-snug: 1.375;
-	--leading-normal: 1.5;
-	--leading-relaxed: 1.625;
-	--leading-loose: 2;
-	--radius-xs: 0.125rem;
-	--radius-sm: 0.25rem;
-	--radius-md: 0.375rem;
-	--radius-lg: 0.5rem;
-	--radius-xl: 0.75rem;
-	--radius-2xl: 1rem;
-	--radius-3xl: 1.5rem;
-	--radius-4xl: 2rem;
-	--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
-	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-	--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-	--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
-	--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
-	--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
-	--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
-	--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
-	--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
-	--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
-	--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
-	--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
-	--blur-xs: 4px;
-	--blur-sm: 8px;
-	--blur-md: 12px;
-	--blur-lg: 16px;
-	--blur-xl: 24px;
-	--blur-2xl: 40px;
-	--blur-3xl: 64px;
-	--perspective-dramatic: 100px;
-	--perspective-near: 300px;
-	--perspective-normal: 500px;
-	--perspective-midrange: 800px;
-	--perspective-distant: 1200px;
-	--aspect-video: 16 / 9;
-	--ease-in: cubic-bezier(0.4, 0, 1, 1);
-	--ease-out: cubic-bezier(0, 0, 0.2, 1);
-	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-	--animate-spin: spin 1s linear infinite;
-	--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-	--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-	--animate-bounce: bounce 1s infinite;
-	@keyframes spin {
-		to {
-			transform: rotate(360deg);
-		}
-	}
-	@keyframes ping {
-		75%,
-		100% {
-			transform: scale(2);
-			opacity: 0;
-		}
-	}
-	@keyframes pulse {
-		50% {
-			opacity: 0.5;
-		}
-	}
-	@keyframes bounce {
-		0%,
-		100% {
-			transform: translateY(-25%);
-			animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-		}
-		50% {
-			transform: none;
-			animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-		}
-	}
-}

package/dist/mixins/tailwind.mixin.ts

@@ -1,30 +0,0 @@
-import { CSSResult, LitElement, unsafeCSS } from 'lit'
-
-import style from './tailwind.css?inline'
-import { BaseElement, IBaseMixin } from './baseElement'
-import { Constructor } from './constructor'
-
-export declare class ITailwindElementMixin {
-	styles: (typeof CSSResult)[]
-}
-
-export const tailwindStyles = unsafeCSS(style)
-
-const TailwindElementBase = <T extends CSSResult>(componentStyle?: T) => {
-	class TailwindMixinClass extends LitElement {
-		static styles = [unsafeCSS(componentStyle), tailwindStyles]
-	}
-	return TailwindMixinClass as Constructor<LitElement> /* see "typing the subclass" below */
-}
-
-export const TailwindElement = <T extends CSSResult>(componentStyle?: T) => {
-	class TailwindMixinClass extends BaseElement(TailwindElementBase(componentStyle)) {
-		disconnectedCallback = () => {
-			super.disconnectedCallback()
-		}
-	}
-	return TailwindMixinClass as Constructor<CustomElementConstructor> &
-		Constructor<ITailwindElementMixin> &
-		Constructor<LitElement> &
-		Constructor<IBaseMixin>
-}