@melodicdev/components 1.2.4 → 1.4.0

package/lib/components/sections/page-section/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-section/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}

package/lib/components/sections/page-section/index.js

@@ -0,0 +1 @@
+export { PageSectionComponent } from './page-section.component.js';

package/lib/components/sections/page-section/page-section.component.d.ts

@@ -0,0 +1,39 @@
+import type { IElementRef } from '@melodicdev/core';
+type SectionPadding = 'none' | 'sm' | 'md' | 'lg';
+/**
+ * ml-page-section - Titled content section with consistent heading typography
+ *
+ * @example
+ * ```html
+ * <ml-page-section title="Recent Activity" subtitle="Last 7 days">
+ *   <div>Section content here</div>
+ * </ml-page-section>
+ *
+ * <ml-page-section title="Members" action-label="View All" action-href="/members">
+ *   <div>Members list</div>
+ * </ml-page-section>
+ * ```
+ *
+ * @slot default - Section content
+ * @slot action - Override for complex action content (replaces action-label link)
+ *
+ * @cssproperty --ml-page-section-title-font - Title font family (default: 'Cormorant Garamond', serif)
+ * @cssproperty --ml-page-section-gap - Gap between header and content (default: var(--ml-space-4))
+ */
+export declare class PageSectionComponent implements IElementRef {
+    elementRef: HTMLElement;
+    /** Section title */
+    title: string;
+    /** Subtitle text */
+    subtitle: string;
+    /** Action link label */
+    'action-label': string;
+    /** Action link URL */
+    'action-href': string;
+    /** Content padding */
+    padding: SectionPadding;
+    /** Check if action slot has content */
+    get hasActionSlot(): boolean;
+}
+export {};
+//# sourceMappingURL=page-section.component.d.ts.map

package/lib/components/sections/page-section/page-section.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-section.component.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-section/page-section.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,KAAK,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAMa,oBAAqB,YAAW,WAAW;IAChD,UAAU,EAAG,WAAW,CAAC;IAEhC,oBAAoB;IACb,KAAK,SAAM;IAElB,oBAAoB;IACb,QAAQ,SAAM;IAErB,wBAAwB;IACjB,cAAc,SAAM;IAE3B,sBAAsB;IACf,aAAa,SAAM;IAE1B,sBAAsB;IACf,OAAO,EAAE,cAAc,CAAQ;IAEtC,uCAAuC;IACvC,IAAW,aAAa,IAAI,OAAO,CAElC;CACD"}

package/lib/components/sections/page-section/page-section.component.js

@@ -0,0 +1,56 @@
+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 { MelodicComponent } from '@melodicdev/core';
+import { pageSectionTemplate } from './page-section.template.js';
+import { pageSectionStyles } from './page-section.styles.js';
+/**
+ * ml-page-section - Titled content section with consistent heading typography
+ *
+ * @example
+ * ```html
+ * <ml-page-section title="Recent Activity" subtitle="Last 7 days">
+ *   <div>Section content here</div>
+ * </ml-page-section>
+ *
+ * <ml-page-section title="Members" action-label="View All" action-href="/members">
+ *   <div>Members list</div>
+ * </ml-page-section>
+ * ```
+ *
+ * @slot default - Section content
+ * @slot action - Override for complex action content (replaces action-label link)
+ *
+ * @cssproperty --ml-page-section-title-font - Title font family (default: 'Cormorant Garamond', serif)
+ * @cssproperty --ml-page-section-gap - Gap between header and content (default: var(--ml-space-4))
+ */
+let PageSectionComponent = class PageSectionComponent {
+    constructor() {
+        /** Section title */
+        this.title = '';
+        /** Subtitle text */
+        this.subtitle = '';
+        /** Action link label */
+        this['action-label'] = '';
+        /** Action link URL */
+        this['action-href'] = '';
+        /** Content padding */
+        this.padding = 'md';
+    }
+    /** Check if action slot has content */
+    get hasActionSlot() {
+        return this.elementRef?.querySelector('[slot="action"]') !== null;
+    }
+};
+PageSectionComponent = __decorate([
+    MelodicComponent({
+        selector: 'ml-page-section',
+        template: pageSectionTemplate,
+        styles: pageSectionStyles,
+        attributes: ['title', 'subtitle', 'action-label', 'action-href', 'padding']
+    })
+], PageSectionComponent);
+export { PageSectionComponent };

package/lib/components/sections/page-section/page-section.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const pageSectionStyles: () => import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=page-section.styles.d.ts.map

package/lib/components/sections/page-section/page-section.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-section.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-section/page-section.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iDAsE7B,CAAC"}

package/lib/components/sections/page-section/page-section.styles.js

@@ -0,0 +1,72 @@
+import { css } from '@melodicdev/core';
+export const pageSectionStyles = () => css `
+	:host {
+		display: block;
+	}
+
+	.ml-page-section__header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--ml-space-4);
+		margin-bottom: var(--ml-page-section-gap, var(--ml-space-4));
+	}
+
+	.ml-page-section__heading {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-space-1);
+	}
+
+	.ml-page-section__title {
+		margin: 0;
+		font-family: var(--ml-page-section-title-font, 'Cormorant Garamond', 'Georgia', serif);
+		font-size: var(--ml-page-section-title-size, var(--ml-text-2xl));
+		font-weight: var(--ml-font-semibold);
+		color: var(--ml-color-text);
+		line-height: var(--ml-leading-tight);
+	}
+
+	.ml-page-section__subtitle {
+		margin: 0;
+		font-family: var(--ml-font-sans);
+		font-size: var(--ml-text-sm);
+		color: var(--ml-color-text-muted);
+		line-height: var(--ml-leading-normal);
+	}
+
+	.ml-page-section__action {
+		flex-shrink: 0;
+	}
+
+	.ml-page-section__action-link {
+		font-family: var(--ml-font-sans);
+		font-size: var(--ml-text-sm);
+		font-weight: var(--ml-font-medium);
+		color: var(--ml-color-primary);
+		text-decoration: none;
+		transition: color var(--ml-duration-150) var(--ml-ease-in-out);
+	}
+
+	.ml-page-section__action-link:hover {
+		color: var(--ml-color-primary-hover);
+		text-decoration: underline;
+	}
+
+	/* Padding variants */
+	.ml-page-section--pad-none .ml-page-section__content {
+		padding: 0;
+	}
+
+	.ml-page-section--pad-sm .ml-page-section__content {
+		padding: var(--ml-space-2) 0;
+	}
+
+	.ml-page-section--pad-md .ml-page-section__content {
+		padding: var(--ml-space-4) 0;
+	}
+
+	.ml-page-section--pad-lg .ml-page-section__content {
+		padding: var(--ml-space-6) 0;
+	}
+`;

package/lib/components/sections/page-section/page-section.template.d.ts

@@ -0,0 +1,3 @@
+import type { PageSectionComponent } from './page-section.component.js';
+export declare function pageSectionTemplate(c: PageSectionComponent): import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=page-section.template.d.ts.map

package/lib/components/sections/page-section/page-section.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-section.template.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-section/page-section.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,oBAAoB,6CA4B1D"}

package/lib/components/sections/page-section/page-section.template.js

@@ -0,0 +1,30 @@
+import { html, classMap, when } from '@melodicdev/core';
+export function pageSectionTemplate(c) {
+    return html `
+		<section class=${classMap({
+        'ml-page-section': true,
+        [`ml-page-section--pad-${c.padding}`]: true
+    })}>
+			${when(!!c.title, () => html `
+				<div class="ml-page-section__header">
+					<div class="ml-page-section__heading">
+						<h2 class="ml-page-section__title">${c.title}</h2>
+						${when(!!c.subtitle, () => html `
+							<p class="ml-page-section__subtitle">${c.subtitle}</p>
+						`)}
+					</div>
+					<div class="ml-page-section__action">
+						<slot name="action">
+							${when(!!c['action-label'], () => html `
+								<a class="ml-page-section__action-link" href=${c['action-href']}>${c['action-label']}</a>
+							`)}
+						</slot>
+					</div>
+				</div>
+			`)}
+			<div class="ml-page-section__content">
+				<slot></slot>
+			</div>
+		</section>
+	`;
+}

package/lib/utils/virtual-scroll/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/virtual-scroll/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACpC,uGAAuG;IACvG,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,2EAA2E;IAC3E,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IACxB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,eAAe;IAC3B,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,QAAQ,CAAqC;IAErD,kEAAkE;IAClE,MAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,oBAAoB,GAAG,IAAI;IAalE,8CAA8C;IAC9C,MAAM,IAAI,IAAI;IAUd,uFAAuF;IACvF,UAAU,IAAI,IAAI;IAKlB,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,QAAQ;CAiBhB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/virtual-scroll/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACpC,uGAAuG;IACvG,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,2EAA2E;IAC3E,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IACxB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,eAAe;IAC3B,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,QAAQ,CAAqC;IAErD,kEAAkE;IAC3D,MAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,oBAAoB,GAAG,IAAI;IAazE,8CAA8C;IACvC,MAAM,IAAI,IAAI;IAUrB,uFAAuF;IAChF,UAAU,IAAI,IAAI;IAKzB,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,QAAQ;CAiBhB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@melodicdev/components",
-	"version": "1.2.4",
+	"version": "1.4.0",
 	"description": "Themeable UI component library built on the Melodic Framework",
 	"license": "MIT",
 	"author": "Melodic Development",
@@ -141,6 +141,10 @@
 			"types": "./lib/components/overlays/dropdown/index.d.ts",
 			"default": "./lib/components/overlays/dropdown/index.js"
 		},
+		"./file-upload": {
+			"types": "./lib/components/forms/file-upload/index.d.ts",
+			"default": "./lib/components/forms/file-upload/index.js"
+		},
 		"./form-field": {
 			"types": "./lib/components/forms/form-field/index.d.ts",
 			"default": "./lib/components/forms/form-field/index.js"
@@ -169,6 +173,18 @@
 			"types": "./lib/components/sections/page-header/index.d.ts",
 			"default": "./lib/components/sections/page-header/index.js"
 		},
+		"./page-section": {
+			"types": "./lib/components/sections/page-section/index.d.ts",
+			"default": "./lib/components/sections/page-section/index.js"
+		},
+		"./stat-card": {
+			"types": "./lib/components/data-display/stat-card/index.d.ts",
+			"default": "./lib/components/data-display/stat-card/index.js"
+		},
+		"./profile-card": {
+			"types": "./lib/components/data-display/profile-card/index.d.ts",
+			"default": "./lib/components/data-display/profile-card/index.js"
+		},
 		"./pagination": {
 			"types": "./lib/components/navigation/pagination/index.d.ts",
 			"default": "./lib/components/navigation/pagination/index.js"