@mhmo91/schmancy 0.9.27 → 0.10.1

package/src/layout/layout.ts

@@ -1,122 +0,0 @@
-import { TailwindElement } from '@mixins/index'
-import { property } from 'lit/decorators.js'
-
-/**
- * @deprecated Use Tailwind CSS utility classes directly on HTML elements instead of this base class.
- * This component will be removed in a future version.
- * 
- * Migration guide:
- * - Use inline styles or Tailwind utility classes for layout properties
- * - Replace properties like padding, margin, width, etc. with their CSS equivalents
- * 
- * @class Layout
- */
-export default class Layout extends TailwindElement() {
-	static styles = [this.styles]
-	layout = true
-	@property({ type: Boolean }) center: boolean | undefined = undefined
-	@property({ type: String }) padding: string | undefined
-	@property({ type: String }) margin: string | undefined
-	@property({ type: String }) width: string | undefined
-	@property({ type: String }) height: string | undefined
-	@property({ type: String }) minWidth: string | undefined
-	@property({ type: String }) minHeight: string | undefined
-	@property({ type: String }) maxWidth: string | undefined
-	@property({ type: String }) maxHeight: string | undefined
-	@property({ type: String }) display:
-		| 'block'
-		| 'inline-block'
-		| 'inline'
-		| 'flex'
-		| 'inline-flex'
-		| 'grid'
-		| 'inline-grid'
-		| 'table'
-		| 'inline-table'
-		| 'flow-root'
-		| 'none'
-		| undefined = undefined
-	@property({ type: String }) overflow: 'visible' | 'hidden' | 'scroll' | 'auto' | undefined = undefined
-	@property({ type: String }) overflowX: 'visible' | 'hidden' | 'scroll' | 'auto' | undefined = undefined
-	@property({ type: String }) overflowY: 'visible' | 'hidden' | 'scroll' | 'auto' | undefined = undefined
-	@property({ type: String }) position: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | undefined = undefined
-	@property({ type: String }) top: string | undefined
-	@property({ type: String }) right: string | undefined
-	@property({ type: String }) bottom: string | undefined
-	@property({ type: String }) left: string | undefined
-	@property({ type: String }) inset: string | undefined
-	@property({ type: String }) zIndex: string | undefined
-
-	@property({ type: String }) border: string | undefined
-	@property({ type: String }) borderTop: string | undefined
-	@property({ type: String }) borderRight: string | undefined
-	@property({ type: String }) borderBottom: string | undefined
-	@property({ type: String }) borderLeft: string | undefined
-	@property({ type: String }) borderColor: string | undefined
-	@property({ type: String }) borderRadius: string | undefined
-	@property({ type: String }) borderWidth: string | undefined
-
-	@property({ type: String }) boxShadow: string | undefined
-	@property({ type: String }) opacity: string | undefined
-	@property({ type: String }) background: string | undefined
-	@property({ type: String }) backgroundImage: string | undefined
-	@property({ type: String }) backgroundPosition: string | undefined
-	@property({ type: String }) backgroundSize: string | undefined
-	@property({ type: String }) backgroundRepeat: string | undefined
-	@property({ type: String }) backgroundAttachment: string | undefined
-	@property({ type: String }) backgroundColor: string | undefined
-	@property({ type: String }) backgroundClip: string | undefined
-	@property({ type: String }) backgroundOrigin: string | undefined
-	@property({ type: String }) backgroundBlendMode: string | undefined
-	@property({ type: String }) filter: string | undefined
-	@property({ type: String }) backdropFilter: string | undefined
-
-	connectedCallback(): void {
-		super.connectedCallback()
-		this.style.setProperty('padding', this.padding ?? '')
-		this.style.setProperty('margin', this.margin ?? '')
-		this.style.setProperty('width', this.width ?? '')
-		this.style.setProperty('height', this.height ?? '')
-		this.style.setProperty('min-width', this.minWidth ?? '')
-		this.style.setProperty('min-height', this.minHeight ?? '')
-		this.style.setProperty('max-width', this.maxWidth ?? '')
-		this.style.setProperty('max-height', this.maxHeight ?? '')
-		this.style.setProperty('display', this.display ?? '')
-		this.style.setProperty('overflow', this.overflow ?? '')
-		this.style.setProperty('overflow-x', this.overflowX ?? '')
-		this.style.setProperty('overflow-y', this.overflowY ?? '')
-		this.style.setProperty('position', this.position ?? '')
-		this.style.setProperty('top', this.top ?? '')
-		this.style.setProperty('right', this.right ?? '')
-		this.style.setProperty('bottom', this.bottom ?? '')
-		this.style.setProperty('left', this.left ?? '')
-		this.style.setProperty('inset', this.inset ?? '')
-		this.style.setProperty('z-index', this.zIndex ?? '')
-		this.style.setProperty('border', this.border ?? '')
-		this.style.setProperty('border-top', this.borderTop ?? '')
-		this.style.setProperty('border-right', this.borderRight ?? '')
-		this.style.setProperty('border-bottom', this.borderBottom ?? '')
-		this.style.setProperty('border-left', this.borderLeft ?? '')
-		this.style.setProperty('border-color', this.borderColor ?? '')
-		this.style.setProperty('border-radius', this.borderRadius ?? '')
-		this.style.setProperty('border-width', this.borderWidth ?? '')
-		this.style.setProperty('box-shadow', this.boxShadow ?? '')
-		this.style.setProperty('opacity', this.opacity ?? '')
-		this.style.setProperty('background', this.background ?? '')
-		this.style.setProperty('background-image', this.backgroundImage ?? '')
-		this.style.setProperty('background-position', this.backgroundPosition ?? '')
-		this.style.setProperty('background-size', this.backgroundSize ?? '')
-		this.style.setProperty('background-repeat', this.backgroundRepeat ?? '')
-		this.style.setProperty('background-attachment', this.backgroundAttachment ?? '')
-		this.style.setProperty('background-color', this.backgroundColor ?? '')
-		this.style.setProperty('background-clip', this.backgroundClip ?? '')
-		this.style.setProperty('background-origin', this.backgroundOrigin ?? '')
-		this.style.setProperty('background-blend-mode', this.backgroundBlendMode ?? '')
-		this.style.setProperty('filter', this.filter ?? '')
-		this.style.setProperty('backdrop-filter', this.backdropFilter ?? '')
-		if (this.center) {
-			this.style.setProperty('margin-left', 'auto')
-			this.style.setProperty('margin-right', 'auto')
-		}
-	}
-}

package/src/layout/v2/flex.ts

@@ -1,243 +0,0 @@
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import Layout from '../layout'
-
-/**
- * @deprecated Use Tailwind CSS flex classes directly instead of this component.
- * This component will be removed in a future version.
- * 
- * Migration guide:
- * - Replace <sch-flex> with <div class="flex ...">
- * - Use Tailwind's flex utilities: flex-row, flex-col, gap-*, items-*, justify-*, etc.
- * 
- * Original documentation:
- * 
- * SchmancyFlex exposes a flex container with all the Tailwind CSS 4 options:
- *
- * - **Display**: By default uses `flex` but can be set to inline using the `inline` property.
- * - **Flow**: Accepts 'row', 'row-reverse', 'col', 'col-reverse' as well as grid‐like dense variants:
- *    - Dense variants (`row-dense`, `col-dense`) force wrapping.
- * - **Wrap**: 'wrap', 'nowrap', or 'wrap-reverse'
- * - **Align Items**: 'start', 'center', 'end', 'stretch', or 'baseline'
- * - **Justify Content**: 'start', 'center', 'end', 'between', 'around', or 'evenly'
- * - **Align Content** (for multi-line flex containers): 'start', 'center', 'end', 'between', 'around', or 'evenly'
- * - **Gap**: Supports Tailwind’s spacing scale (e.g. 'none', '0', '1', '2', …, '64')
- */
-@customElement('sch-flex')
-export class SchmancyFlexV2 extends Layout {
-	static styles = [
-		Layout.styles,
-		css`
-			:host {
-				display: block;
-			}
-		`,
-	]
-	// If true, the container will use inline-flex instead of flex.
-	@property({ type: Boolean, reflect: true })
-	inline = false
-
-	/**
-	 * Flow property that determines the flex direction.
-	 * Allowed values:
-	 *  - Standard: 'row', 'row-reverse', 'col', 'col-reverse'
-	 *  - Dense variants: 'row-dense', 'col-dense' (dense implies wrapping)
-	 */
-	@property({ type: String, reflect: true })
-	flow: 'row' | 'row-reverse' | 'col' | 'col-reverse' | 'row-dense' | 'col-dense' = 'row'
-
-	/**
-	 * Flex-wrap options:
-	 *  - 'wrap', 'nowrap', or 'wrap-reverse'
-	 */
-	@property({ type: String, reflect: true })
-	wrap: 'wrap' | 'nowrap' | 'wrap-reverse' = 'wrap'
-
-	/**
-	 * Align-items (vertical alignment of flex items):
-	 *  - 'start', 'center', 'end', 'stretch', or 'baseline'
-	 */
-	@property({ type: String, reflect: true })
-	align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch'
-
-	/**
-	 * Justify-content (horizontal distribution):
-	 *  - 'start', 'center', 'end', 'between', 'around', or 'evenly'
-	 */
-	@property({ type: String, reflect: true })
-	justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' = 'start'
-
-	/**
-	 * Align-content (spacing between rows when wrapping):
-	 *  - 'start', 'center', 'end', 'between', 'around', or 'evenly'
-	 */
-	@property({ type: String, reflect: true })
-	content?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
-
-	/**
-	 * Gap between flex items.
-	 * Options (based on Tailwind CSS 4 spacing scale):
-	 *  - 'none', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '12', '16', '20', '24', '32', '40', '48', '56', or '64'
-	 */
-	@property({ type: String, reflect: true })
-	gap:
-		| 'none'
-		| '0'
-		| '1'
-		| '2'
-		| '3'
-		| '4'
-		| '5'
-		| '6'
-		| '7'
-		| '8'
-		| '9'
-		| '10'
-		| '12'
-		| '16'
-		| '20'
-		| '24'
-		| '32'
-		| '40'
-		| '48'
-		| '56'
-		| '64' = 'none'
-
-	render() {
-		// Determine whether to use inline-flex or flex.
-		const baseDisplay = this.inline ? 'inline-flex' : 'flex'
-
-		// Map the flow property to a flex-direction class.
-		// (Dense variants use the same class as their standard counterparts.)
-		let directionClass = ''
-		switch (this.flow) {
-			case 'row':
-			case 'row-dense':
-				directionClass = 'flex-row'
-				break
-			case 'row-reverse':
-				directionClass = 'flex-row-reverse'
-				break
-			case 'col':
-			case 'col-dense':
-				directionClass = 'flex-col'
-				break
-			case 'col-reverse':
-				directionClass = 'flex-col-reverse'
-				break
-			default:
-				directionClass = 'flex-row'
-		}
-
-		// Dense variants force wrapping regardless of the wrap property.
-		const isDense = this.flow === 'row-dense' || this.flow === 'col-dense'
-		const effectiveWrap = isDense ? 'wrap' : this.wrap
-
-		let wrapClass = ''
-		switch (effectiveWrap) {
-			case 'wrap':
-				wrapClass = 'flex-wrap'
-				break
-			case 'nowrap':
-				wrapClass = 'flex-nowrap'
-				break
-			case 'wrap-reverse':
-				wrapClass = 'flex-wrap-reverse'
-				break
-			default:
-				wrapClass = 'flex-wrap'
-		}
-
-		// Map align-items.
-		let alignClass = ''
-		switch (this.align) {
-			case 'start':
-				alignClass = 'items-start'
-				break
-			case 'center':
-				alignClass = 'items-center'
-				break
-			case 'end':
-				alignClass = 'items-end'
-				break
-			case 'stretch':
-				alignClass = 'items-stretch'
-				break
-			case 'baseline':
-				alignClass = 'items-baseline'
-				break
-			default:
-				alignClass = 'items-stretch'
-		}
-
-		// Map justify-content.
-		let justifyClass = ''
-		switch (this.justify) {
-			case 'start':
-				justifyClass = 'justify-start'
-				break
-			case 'center':
-				justifyClass = 'justify-center'
-				break
-			case 'end':
-				justifyClass = 'justify-end'
-				break
-			case 'between':
-				justifyClass = 'justify-between'
-				break
-			case 'around':
-				justifyClass = 'justify-around'
-				break
-			case 'evenly':
-				justifyClass = 'justify-evenly'
-				break
-			default:
-				justifyClass = 'justify-start'
-		}
-
-		// Map align-content (if provided).
-		let contentClass = ''
-		if (this.content) {
-			switch (this.content) {
-				case 'start':
-					contentClass = 'content-start'
-					break
-				case 'center':
-					contentClass = 'content-center'
-					break
-				case 'end':
-					contentClass = 'content-end'
-					break
-				case 'between':
-					contentClass = 'content-between'
-					break
-				case 'around':
-					contentClass = 'content-around'
-					break
-				case 'evenly':
-					contentClass = 'content-evenly'
-					break
-			}
-		}
-
-		// Map gap value.
-		const gapClass = this.gap === 'none' ? 'gap-0' : `gap-${this.gap}`
-
-		// Build the complete list of classes.
-		const classes = [baseDisplay, directionClass, wrapClass, alignClass, justifyClass, contentClass, gapClass]
-			.filter(Boolean)
-			.join(' ')
-
-		return html`
-			<section class=${classes}>
-				<slot></slot>
-			</section>
-		`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'sch-flex': SchmancyFlexV2
-	}
-}

package/src/layout/v2/index.ts

@@ -1 +0,0 @@
-export * from './flex';

package/src/metric/index.ts

@@ -1 +0,0 @@
-export * from './metric';

package/src/metric/metric.ts

@@ -1,127 +0,0 @@
-import { TailwindElement } from '@mixins/index'
-import { css, html, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-export type MetricTrend = 'up' | 'down' | 'neutral'
-export type MetricSize = 'sm' | 'md' | 'lg'
-
-/**
- * KPI metric — a label + value pair for dashboards, with optional trend + delta indicators.
- *
- * @element schmancy-metric
- * @summary The building block of dashboards and meta bars. Pass `label` + `value` for a basic stat; add `trend` / `delta` for the delta-from-last-period pattern. Use multiple metrics side-by-side with Tailwind flex/grid utilities.
- * @example
- * <schmancy-metric label="In flight" value="4"></schmancy-metric>
- * <schmancy-metric label="Open value" value="€165,900" trend="up" delta="+12%"></schmancy-metric>
- * <schmancy-metric label="Error rate" value="0.3%" trend="down" delta="-0.1%"></schmancy-metric>
- * @platform div - Styled `<div>` with two text lines + optional trend arrow. Degrades to a plain div+spans if the tag never registers.
- * @slot - Optional custom value rendering (overrides the `value` attribute if present).
- * @slot label - Optional custom label rendering (overrides the `label` attribute if present).
- * @csspart label - The label line.
- * @csspart value - The value line.
- * @csspart delta - The delta pill (only when `delta` is set).
- */
-@customElement('schmancy-metric')
-export class SchmancyMetric extends TailwindElement(css`
-	:host {
-		display: inline-flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		min-width: 0;
-	}
-	:host([size='sm']) .label { font-size: 0.6875rem; }
-	:host([size='sm']) .value { font-size: 1.25rem; }
-	:host([size='md']) .label { font-size: 0.75rem; }
-	:host([size='md']) .value { font-size: 1.75rem; }
-	:host([size='lg']) .label { font-size: 0.8125rem; }
-	:host([size='lg']) .value { font-size: 2.5rem; }
-	.label {
-		font-weight: 500;
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-		color: var(--schmancy-sys-color-surface-onVariant);
-	}
-	.value {
-		font-weight: 600;
-		line-height: 1.1;
-		color: var(--schmancy-sys-color-surface-on);
-		font-variant-numeric: tabular-nums;
-	}
-	.delta {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.125rem;
-		font-size: 0.75rem;
-		font-weight: 600;
-		padding: 0.125rem 0.375rem;
-		border-radius: 999px;
-		font-variant-numeric: tabular-nums;
-	}
-	.delta[data-trend='up'] {
-		color: var(--schmancy-sys-color-success-on);
-		background: var(--schmancy-sys-color-success-default);
-	}
-	.delta[data-trend='down'] {
-		color: var(--schmancy-sys-color-error-on);
-		background: var(--schmancy-sys-color-error-default);
-	}
-	.delta[data-trend='neutral'] {
-		color: var(--schmancy-sys-color-surface-on);
-		background: var(--schmancy-sys-color-surface-containerHigh);
-	}
-	.arrow {
-		font-size: 0.625rem;
-		line-height: 1;
-	}
-	.row {
-		display: inline-flex;
-		align-items: baseline;
-		gap: 0.5rem;
-		flex-wrap: wrap;
-	}
-`) {
-	/** Upper-case caption shown above the value. */
-	@property({ type: String }) label = ''
-
-	/** Primary metric value, rendered large. Pre-format numbers/currency yourself. */
-	@property({ type: String }) value = ''
-
-	/** Optional trend direction. Controls the color + arrow on the delta pill. */
-	@property({ type: String, reflect: true }) trend?: MetricTrend
-
-	/** Optional delta copy displayed in a pill next to the value (e.g. `+12%`). */
-	@property({ type: String }) delta?: string
-
-	/** Size scale affecting label + value typography. */
-	@property({ type: String, reflect: true }) size: MetricSize = 'md'
-
-	private _arrowFor(trend: MetricTrend | undefined): string {
-		if (trend === 'up') return '↑'
-		if (trend === 'down') return '↓'
-		return '→'
-	}
-
-	protected render(): unknown {
-		const trend = this.trend ?? 'neutral'
-		return html`
-			<span class="label" part="label"><slot name="label">${this.label}</slot></span>
-			<span class="row">
-				<span class="value" part="value"><slot>${this.value}</slot></span>
-				${this.delta
-					? html`
-							<span class="delta" part="delta" data-trend=${trend}>
-								${this.trend ? html`<span class="arrow" aria-hidden="true">${this._arrowFor(this.trend)}</span>` : nothing}
-								${this.delta}
-							</span>
-						`
-					: nothing}
-			</span>
-		`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-metric': SchmancyMetric
-	}
-}