@getmicdrop/svelte-components 4.1.2 → 4.1.4

package/dist/index.d.ts

@@ -98,6 +98,9 @@ export { default as SectionHeader } from "./patterns/page/SectionHeader.svelte";
 export { default as DataGrid } from "./patterns/data/DataGrid.svelte";
 export { default as DataList } from "./patterns/data/DataList.svelte";
 export { default as DataTable } from "./patterns/data/DataTable.svelte";
+export { default as Grid } from "./patterns/layout/Grid.svelte";
+export { default as Sidebar } from "./patterns/layout/Sidebar.svelte";
+export { default as Stack } from "./patterns/layout/Stack.svelte";
 export { default as PublicCard } from "./calendar/PublicCard/PublicCard.svelte";
 export { default as MonthSwitcher } from "./calendar/MonthSwitcher/MonthSwitcher.svelte";
 export { default as OrderSummary } from "./calendar/OrderSummary/OrderSummary.svelte";

package/dist/index.js

@@ -178,6 +178,11 @@ export { default as DataGrid } from './patterns/data/DataGrid.svelte';
 export { default as DataList } from './patterns/data/DataList.svelte';
 export { default as DataTable } from './patterns/data/DataTable.svelte';
 
+// Layout
+export { default as Grid } from './patterns/layout/Grid.svelte';
+export { default as Sidebar } from './patterns/layout/Sidebar.svelte';
+export { default as Stack } from './patterns/layout/Stack.svelte';
+
 // =============================================================================
 // CALENDAR - Domain components (deferred migration to apps)
 // =============================================================================

package/dist/patterns/forms/FormActions.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Button from "./Button/Button.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
 
   /** Handler for cancel action */
   export let onCancel = () => {};

package/dist/patterns/layout/Grid.svelte

@@ -0,0 +1,38 @@
+<script>
+  /** Number of columns */
+  export let cols = '3';
+
+  /** Gap size between items */
+  export let gap = 'md';
+
+  /** Additional CSS class */
+  let className = '';
+  export { className as class };
+
+  const colClasses = {
+    '1': 'grid-cols-1',
+    '2': 'grid-cols-1 sm:grid-cols-2',
+    '3': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    '5': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-5',
+    '6': 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
+    '12': 'grid-cols-12',
+  };
+
+  const gapClasses = {
+    none: 'gap-0',
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+    section: 'gap-6',
+    layout: 'gap-8',
+    content: 'gap-4',
+    group: 'gap-3',
+  };
+</script>
+
+<div class="grid {colClasses[cols] || 'grid-cols-3'} {gapClasses[gap] || 'gap-4'} {className}">
+  <slot />
+</div>

package/dist/patterns/layout/Grid.svelte.d.ts

@@ -0,0 +1,44 @@
+export default Grid;
+type Grid = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    cols?: string | undefined;
+    gap?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Grid: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    cols?: string | undefined;
+    gap?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Grid.svelte.d.ts.map

package/dist/patterns/layout/Grid.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/layout/Grid.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA6DA;;;;;;;;;;eAA8I;sCATxG,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/patterns/layout/Sidebar.svelte

@@ -0,0 +1,41 @@
+<script>
+  /** Sidebar width */
+  export let sidebarWidth = 'medium';
+
+  /** Sidebar position */
+  export let sidebarPosition = 'right';
+
+  /** Additional CSS class */
+  let className = '';
+  export { className as class };
+
+  const widthClasses = {
+    narrow: 'lg:w-72',
+    medium: 'lg:w-80',
+    wide: 'lg:w-96',
+  };
+
+  const mainWidthClasses = {
+    narrow: 'lg:w-[calc(100%-18rem)]',
+    medium: 'lg:w-[calc(100%-20rem)]',
+    wide: 'lg:w-[calc(100%-24rem)]',
+  };
+</script>
+
+<div class="flex flex-col lg:flex-row gap-6 {className}">
+  {#if sidebarPosition === 'left'}
+    <aside class="w-full {widthClasses[sidebarWidth]} flex-shrink-0">
+      <slot name="sidebar" />
+    </aside>
+    <main class="w-full {mainWidthClasses[sidebarWidth]} flex-grow min-w-0">
+      <slot />
+    </main>
+  {:else}
+    <main class="w-full {mainWidthClasses[sidebarWidth]} flex-grow min-w-0">
+      <slot />
+    </main>
+    <aside class="w-full {widthClasses[sidebarWidth]} flex-shrink-0">
+      <slot name="sidebar" />
+    </aside>
+  {/if}
+</div>

package/dist/patterns/layout/Sidebar.svelte.d.ts

@@ -0,0 +1,48 @@
+export default Sidebar;
+type Sidebar = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    sidebarWidth?: string | undefined;
+    sidebarPosition?: string | undefined;
+}, {
+    sidebar: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    sidebar: {};
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Sidebar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    sidebarWidth?: string | undefined;
+    sidebarPosition?: string | undefined;
+}, {
+    sidebar: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    sidebar: {};
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Sidebar.svelte.d.ts.map

package/dist/patterns/layout/Sidebar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/layout/Sidebar.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgEA;;;;;;;;;;;;eAAqK;sCAT/H,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/patterns/layout/Stack.svelte

@@ -0,0 +1,54 @@
+<script>
+  /** Gap size between children */
+  export let gap = 'md';
+
+  /** Direction of the stack */
+  export let direction = 'vertical';
+
+  /** Alignment of items */
+  export let align = 'stretch';
+
+  /** Justification of items */
+  export let justify = 'start';
+
+  /** Whether items should wrap */
+  export let wrap = false;
+
+  /** Additional CSS class */
+  let className = '';
+  export { className as class };
+
+  const gapClasses = {
+    none: 'gap-0',
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+    section: 'gap-6',
+    layout: 'gap-8',
+    content: 'gap-4',
+    group: 'gap-3',
+  };
+
+  const alignClasses = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+  };
+
+  const justifyClasses = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+  };
+</script>
+
+<div
+  class="flex {direction === 'horizontal' ? 'flex-row' : 'flex-col'} {gapClasses[gap] || 'gap-4'} {alignClasses[align] || 'items-stretch'} {justifyClasses[justify] || 'justify-start'} {wrap ? 'flex-wrap' : ''} {className}"
+>
+  <slot />
+</div>

package/dist/patterns/layout/Stack.svelte.d.ts

@@ -0,0 +1,50 @@
+export default Stack;
+type Stack = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    direction?: string | undefined;
+    gap?: string | undefined;
+    align?: string | undefined;
+    justify?: string | undefined;
+    wrap?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Stack: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    direction?: string | undefined;
+    gap?: string | undefined;
+    align?: string | undefined;
+    justify?: string | undefined;
+    wrap?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Stack.svelte.d.ts.map

package/dist/patterns/layout/Stack.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/layout/Stack.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA8EA;;;;;;;;;;;;;eAA6K;sCATvI,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/patterns/page/PageLoader.svelte

@@ -1,6 +1,6 @@
 <script>
-  import Spinner from "./Spinner/Spinner.svelte";
-  import Alert from "./Alert/Alert.svelte";
+  import Spinner from "../../primitives/Spinner/Spinner.svelte";
+  import Alert from "../../primitives/Alert/Alert.svelte";
 
   /** Whether the page is loading */
   export let isLoading = true;

package/dist/recipes/modals/ConfirmationModal.svelte

@@ -2,7 +2,7 @@
   import { createEventDispatcher } from "svelte";
   import Button from "../../primitives/Button/Button.svelte";
   import Cancel from "../../assets/svg/cancel.svg";
-  import Modal from "./Modal.svelte";
+  import Modal from "../../primitives/Modal/Modal.svelte";
 
   export let show = false;
   export let size = "default"; // "small" | "default" | "large"

package/dist/recipes/modals/InputModal.svelte

@@ -3,7 +3,7 @@
   import { ExclamationTriangleOutline } from "../../primitives/Icons";
   import Button from "../../primitives/Button/Button.svelte";
   import Cancel from "../../assets/svg/cancel.svg";
-  import Modal from "./Modal.svelte";
+  import Modal from "../../primitives/Modal/Modal.svelte";
 
   export let show = false;
   export let size = "default"; // "small" | "default" | "large"

package/dist/recipes/modals/ModalTestWrapper.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Modal from "./Modal.svelte";
+    import Modal from "../../primitives/Modal/Modal.svelte";
     export let show = false;
     export let title = "";
     export let description = "";

package/dist/recipes/modals/ModalTestWrapper.svelte.d.ts

@@ -5,7 +5,7 @@ type ModalTestWrapper = SvelteComponent<{
     description?: string | undefined;
     warningText?: string | undefined;
 }, {
-    cancel: any;
+    cancel: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
@@ -17,7 +17,7 @@ declare const ModalTestWrapper: $$__sveltets_2_IsomorphicComponent<{
     description?: string | undefined;
     warningText?: string | undefined;
 }, {
-    cancel: any;
+    cancel: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/recipes/modals/StatusModal.svelte

@@ -3,7 +3,7 @@
   import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from "../../primitives/Icons";
   import Button from "../../primitives/Button/Button.svelte";
   import Cancel from "../../assets/svg/cancel.svg";
-  import Modal from "./Modal.svelte";
+  import Modal from "../../primitives/Modal/Modal.svelte";
 
   export let show = false;
   export let size = "small"; // "small" | "default" | "large"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "4.1.2",
+  "version": "4.1.4",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",