@delightstack/components 0.1.0

package/dist/form/Toggle.svelte.d.ts

@@ -0,0 +1,50 @@
+import { type Snippet } from 'svelte';
+declare function $$render<Indeterminate extends boolean = false>(): {
+    props: {
+        checked?: (Indeterminate extends true ? boolean | null : boolean) | undefined;
+        indeterminate?: Indeterminate;
+        tristate?: boolean;
+        default_checked?: boolean | undefined;
+        error?: string | undefined;
+        parse?: ((value: unknown) => unknown) | undefined;
+        disabled?: boolean;
+        size?: "0" | "1" | "2" | "3";
+        label?: string | undefined;
+        label_position?: "start" | "end";
+        on_label?: string | undefined;
+        off_label?: string | undefined;
+        name?: string | undefined;
+        value?: string | undefined;
+        tooltip?: string | undefined;
+        dense?: boolean;
+        comfortable?: boolean;
+        id?: string;
+        class?: string;
+        thumb_icon?: Snippet | undefined;
+        onchange?: ((detail: {
+            checked: Indeterminate extends true ? boolean | null : boolean;
+        }) => void) | undefined;
+    };
+    exports: {};
+    bindings: "checked";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Indeterminate extends boolean = false> {
+    props(): ReturnType<typeof $$render<Indeterminate>>['props'];
+    events(): ReturnType<typeof $$render<Indeterminate>>['events'];
+    slots(): ReturnType<typeof $$render<Indeterminate>>['slots'];
+    bindings(): "checked";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Indeterminate extends boolean = false>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Indeterminate>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Indeterminate>['props']>, ReturnType<__sveltets_Render<Indeterminate>['events']>, ReturnType<__sveltets_Render<Indeterminate>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Indeterminate>['bindings']>;
+    } & ReturnType<__sveltets_Render<Indeterminate>['exports']>;
+    <Indeterminate extends boolean = false>(internal: unknown, props: ReturnType<__sveltets_Render<Indeterminate>['props']> & {}): ReturnType<__sveltets_Render<Indeterminate>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Toggle: $$IsomorphicComponent;
+type Toggle<Indeterminate extends boolean = false> = InstanceType<typeof Toggle<Indeterminate>>;
+export default Toggle;
+//# sourceMappingURL=Toggle.svelte.d.ts.map

package/dist/form/Toggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/form/Toggle.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAElD,iBAAS,QAAQ,CAAC,aAAa,SAAS,OAAO,GAAG,KAAK;;kBAS4B,0DAAU,SAAS;wBAAkB,aAAa;mBAAa,OAAO;0BAAoB,OAAO,GAAG,SAAS;gBAAU,MAAM,GAAG,SAAS;gBAAU,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,SAAS;mBAAa,OAAO;eAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;gBAAU,MAAM,GAAG,SAAS;yBAAmB,OAAO,GAAG,KAAK;mBAAa,MAAM,GAAG,SAAS;oBAAc,MAAM,GAAG,SAAS;eAAS,MAAM,GAAG,SAAS;gBAAU,MAAM,GAAG,SAAS;kBAAY,MAAM,GAAG,SAAS;gBAAU,OAAO;sBAAgB,OAAO;;gBAA8B,MAAM;qBAAe,OAAO,GAAG,SAAS;mBAAa,CAAC,CAAC,MAAM,EAAE;YAAE,OAAO,wDAAS;SAAE,KAAK,IAAI,CAAC,GAAG,SAAS;;;;;;EAyWlkB;AAChI,cAAM,iBAAiB,CAAC,aAAa,SAAS,OAAO,GAAG,KAAK;IACzD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5D,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC9D,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5D,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,aAAa,SAAS,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACxe,CAAC,aAAa,SAAS,OAAO,GAAG,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACvL,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,MAAM,EAAE,qBAAmC,CAAC;AAChC,KAAK,MAAM,CAAC,aAAa,SAAS,OAAO,GAAG,KAAK,IAAI,YAAY,CAAC,OAAO,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAClG,eAAe,MAAM,CAAC"}

package/dist/form/index.d.ts

@@ -0,0 +1,15 @@
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Fieldset } from './Fieldset.svelte';
+export { default as FileUpload } from './FileUpload.svelte';
+export { default as Form } from './Form.svelte';
+export type { FormContext, StandardSchema } from './Form.svelte';
+export { default as Input } from './Input.svelte';
+export type { InputType, InputOption } from './Input.svelte';
+export { default as Radio, RadioGroup } from './Radio.svelte';
+export type { RadioGroupContext } from './Radio.svelte';
+export { default as Range } from './Range.svelte';
+export { default as Select } from './Select.svelte';
+export type { SelectOption } from './Select.svelte';
+export { default as Rating } from './Rating.svelte';
+export { default as Toggle } from './Toggle.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/form/index.js

@@ -0,0 +1,10 @@
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Fieldset } from './Fieldset.svelte';
+export { default as FileUpload } from './FileUpload.svelte';
+export { default as Form } from './Form.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Radio, RadioGroup } from './Radio.svelte';
+export { default as Range } from './Range.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Rating } from './Rating.svelte';
+export { default as Toggle } from './Toggle.svelte';

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from './actions';
+export * from './display';
+export * from './feedback';
+export * from './form';
+export * from './media';
+export * from './navigation';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+export * from './actions';
+export * from './display';
+export * from './feedback';
+export * from './form';
+export * from './media';
+export * from './navigation';

package/dist/layout/README.md

@@ -0,0 +1,172 @@
+This could be a folder called 'layout' or 'design' and would have design blocks to add to a site.
+
+Examples:
+- Hero
+
+
+### **I. Public-Facing Website Blocks (Marketing/Informational)**
+
+These are typically found on homepages, landing pages, about pages, and service pages, designed to inform, attract, and convert visitors.
+
+1.  **Hero Section:**
+    * Full-width Image/Video Hero: Large, engaging visual with headline, subheading, and CTA button.
+    * Split Hero: Image/video on one side, text/CTA on the other.
+    * Carousel Hero: Rotating slides with different headlines/CTAs.
+    * Typed Text/Animated Headline Hero: Dynamic text effects.
+    * Gradient Overlay Hero: Background with a color gradient overlay.
+    * Particles/Interactive Background Hero: Subtle animations or interactive elements.
+2.  **Feature/Service Showcase:**
+    * Three/Four Column Feature Grid: Icons/images, titles, and short descriptions of key features or services.
+    * Feature List with Icons: Simple, direct list of benefits.
+    * Alternating Image/Text Sections: Zig-zag layout for individual feature deep-dives.
+    * Feature Slider/Carousel: Highlights multiple features concisely.
+    * Animated Feature Explanations: Short animations demonstrating a feature.
+3.  **About Us / Company Story:**
+    * Mission/Vision Statement: Core values and goals.
+    * Team Section: Headshots, names, titles, and short bios of team members.
+    * "Our Story" Timeline: Chronological events of the company's journey.
+    * "Why Choose Us" / Unique Selling Proposition (USP): Highlights competitive advantages.
+    * Company Values: Icons and short descriptions of core values.
+4.  **Testimonials / Social Proof:**
+    * Testimonial Slider/Carousel: Rotating customer quotes and images.
+    * Individual Testimonial Cards: Static display of testimonials.
+    * Video Testimonials: Embedded videos of customer endorsements.
+    * Star Ratings/Review Aggregation: Displays average ratings from platforms.
+    * "Featured In" / Press Mentions: Logos of publications the company has been featured in.
+5.  **Call to Action (CTA) Sections:**
+    * Dedicated CTA Block: Large headline, compelling copy, and prominent button.
+    * Inline CTAs: Smaller CTAs integrated within other content sections.
+    * Sticky CTA Bar: Stays visible as the user scrolls.
+    * Contact Form CTA: Leads directly to a contact form.
+6.  **Pricing Section:**
+    * Pricing Table/Cards: Comparison of different plans with features and prices.
+    * Toggle (Monthly/Annually): Switch between pricing periods.
+    * Feature Comparison Matrix: Detailed breakdown of plan differences.
+    * FAQ about Pricing: Addresses common questions.
+7.  **Contact Section:**
+    * Contact Form: Fields for name, email, message, etc.
+    * Map Integration (Google Maps, OpenStreetMap): Shows physical location.
+    * Contact Information List: Phone, email, address.
+    * Social Media Links: Icons leading to social profiles.
+    * Operating Hours: Business hours display.
+8.  **Blog / News Section:**
+    * Latest Blog Posts Grid/Carousel: Thumbnails, titles, and excerpts of recent articles.
+    * Featured Article Block: Highlights a single important post.
+    * Category/Tag Cloud: Navigable list of blog topics.
+    * Newsletter Signup for Blog Updates: Captures email subscriptions.
+9.  **Portfolio / Gallery:**
+    * Project Grid with Filters: Displays work with categorization.
+    * Case Study Cards: Highlights specific projects with outcomes.
+    * Image Gallery/Masonry Layout: Visually showcases images.
+    * Video Gallery: Embedded videos.
+10. **Partners / Client Logos:**
+    * Logo Carousel/Grid: Displays logos of clients, partners, or sponsors.
+11. **Frequently Asked Questions (FAQ):**
+    * Accordion FAQ: Click to expand/collapse answers.
+    * Searchable FAQ: Allows users to find answers quickly.
+12. **Newsletter Signup / Lead Capture:**
+    * Email Subscription Form: Simple input for email address.
+    * Lead Magnet Offer: Exchange for an ebook, whitepaper, etc.
+    * Exit-Intent Pop-up: Appears when user is about to leave.
+13. **Latest Products / Popular Products (E-commerce):**
+    * Product Cards/Grids: Image, name, price, "Add to Cart" button.
+    * Product Carousel: Scrolls through featured products.
+    * "You Might Also Like" / Related Products: Recommendations.
+14. **Events / Workshops:**
+    * Event Listings: Date, time, location, description, registration link.
+    * Event Calendar Integration: Embedded calendar view.
+15. **Team Member Spotlight:**
+    * Highlights a specific team member with more detailed info.
+16. **Roadmap / Future Plans:**
+    * Visual representation of upcoming features or milestones (common for SaaS).
+17. **Download App Section:**
+    * Links/QR codes to app store listings (Apple App Store, Google Play).
+    * Screenshots of the app.
+18. **Trust Badges / Security Seals:**
+    * Logos indicating security, privacy, or industry certifications.
+
+### **II. Web Application / Dashboard Blocks (Functional/Data-Driven)**
+
+These are common in administrative interfaces, user dashboards, analytics platforms, CRMs, project management tools, and SaaS applications.
+
+1.  **Dashboard Overview / Widgets:**
+    * Key Performance Indicators (KPI) Cards: Large numbers with trends (e.g., "Total Sales," "New Users," "Revenue").
+    * Summary Charts (Mini-charts): Small line, bar, or pie charts showing trends at a glance.
+    * Recent Activity Feed: List of latest user actions or system events.
+    * "Quick Links" / Shortcuts: Buttons or icons for frequently used actions.
+    * Welcome Message / User Profile Snippet: Personalized greeting.
+    * "To Do" List / Tasks: Displays upcoming or pending tasks.
+    * Announcements / Notifications Feed: Important system messages.
+2.  **Data Tables & Lists:**
+    * Sortable/Filterable Data Tables: Displays tabular data with interaction options.
+    * Searchable Lists: Allows searching through list items.
+    * Paginated Tables/Lists: Breaks large datasets into pages.
+    * Actionable Rows: Each row having "Edit," "Delete," "View" buttons/icons.
+    * Bulk Action Controls: Checkboxes for selecting multiple items for batch operations.
+    * "No Results" / Empty State Blocks: Guides users when no data is available.
+3.  **Charts & Graphs (Detailed):**
+    * Line Charts: Trends over time (e.g., "Monthly Revenue," "User Growth").
+    * Bar Charts: Comparisons between categories (e.g., "Sales by Product," "Website Traffic Sources").
+    * Pie/Donut Charts: Proportions of a whole (e.g., "Customer Demographics").
+    * Area Charts: Volume over time.
+    * Scatter Plots: Relationships between two variables.
+    * Heatmaps: Visualizing data density or intensity.
+    * Gauge Charts: Displaying progress towards a goal.
+    * Geospatial Maps: Data visualized on a map.
+    * Zoomable/Pannable Charts: Allows detailed exploration of data.
+    * Interactive Tooltips: Displays data details on hover.
+4.  **Forms (Complex Web App):**
+    * Multi-step Forms / Wizards: Guides users through lengthy processes.
+    * Settings Forms: Configurable options for user profiles, app preferences.
+    * Creation Forms: For adding new entries (e.g., "Create New User," "Add New Product").
+    * Search & Filter Panels: Advanced filtering options for tables/lists.
+    * File Upload Forms with Previews: For uploading documents, images.
+    * Rich Text Editors (WYSIWYG): For content creation (e.g., composing emails, blog posts).
+5.  **User Management / Profile:**
+    * User Profile Card/Page: Displays user details, roles, permissions.
+    * User List/Table (Admin View): Manage all users.
+    * Role Management: Assigning and revoking user roles.
+    * Audit Log / Activity History: Shows actions performed by a user or in the system.
+6.  **Settings & Configuration:**
+    * Account Settings: Password change, email, profile picture.
+    * Notification Settings: Email preferences, push notifications.
+    * Billing & Subscription Management: Plan details, payment methods, invoice history.
+    * API Key Management: Generating and managing API keys.
+    * Integrations Management: Connecting to third-party services.
+7.  **Content Management (CMS-like features):**
+    * Content Editor: Interface for creating/editing articles, pages, products.
+    * Media Library: Managing images, videos, and files.
+    * Page Builder / Block Editor: Drag-and-drop interface for structuring content.
+8.  **Invoicing & Payments:**
+    * Invoice List/Table: Displays all invoices with status.
+    * Create/Edit Invoice Form: Detailed form for generating invoices.
+    * Payment History: Records of past payments.
+    * Subscription Status: Current plan, next billing date.
+    * Payment Method Management: Add/edit credit cards, bank accounts.
+9.  **Messaging & Communication:**
+    * Chat Interface: Real-time messaging between users or support.
+    * Notification Center: Centralized place for all app notifications.
+    * Comment Sections: For discussions on content or tasks.
+10. **Calendar / Scheduler:**
+    * Event Calendar (Month/Week/Day View): Displays scheduled items.
+    * Scheduler/Booking Interface: For booking appointments or resources.
+    * Task/Meeting List tied to Calendar: Agenda view.
+11. **Project Management:**
+    * Kanban Boards: Drag-and-drop task management.
+    * Gantt Charts: Project timelines.
+    * Task Lists: Simple to-do lists.
+    * Team Member Assignment: Assigning tasks to users.
+12. **Analytics & Reporting:**
+    * Customizable Dashboards: Users can arrange and select which data blocks to see.
+    * Report Generation: Options for generating printable reports.
+    * Data Export Buttons: Exporting data to CSV, Excel, PDF.
+13. **Login / Authentication:**
+    * Sign In Form: Username/email and password.
+    * Sign Up Form: Account creation.
+    * Forgot Password Form: Password reset.
+    * Social Login Buttons: Google, Facebook, etc.
+    * Two-Factor Authentication (2FA) Setup: Enabling/managing 2FA.
+14. **Onboarding / Walkthroughs:**
+    * Tour Guides / Feature Highlights: Introduces new users to the interface.
+    * Progress Trackers for Onboarding: Shows completion of setup steps.
+    * Empty State with Call to Action: Guides users to take first steps.