milk-lib 0.0.36 → 0.0.38

package/dist/components/Accordion/Accordion.types.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+import type { Writable } from "svelte/store";
+export interface IAccordionProps {
+    children: Snippet;
+    value: string | null;
+}
+export interface IAccordionItemProps {
+    children: Snippet;
+    value: string | null;
+}
+export interface IAccordionTriggerProps {
+    children: Snippet;
+}
+export interface IAccordionContentProps {
+    children: Snippet;
+}
+export interface IAccordionContext {
+    value: Writable<string | null>;
+    open: (val: string | null) => unknown;
+    close: () => unknown;
+}
+export interface IAccordionItemContext {
+    isOpen: Writable<boolean>;
+    value: string | null;
+}

package/dist/components/Accordion/Accordion.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Accordion/AccordionContent.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { getContext, onMount } from "svelte";
+  import type {IAccordionContentProps, IAccordionItemContext} from "./Accordion.types";
+
+  let { children }: IAccordionContentProps = $props();
+  const { isOpen } = getContext<IAccordionItemContext>('accordion-item-context');
+  let accordionContent: HTMLDivElement | null = $state(null);
+  let height = $state(0);
+
+  const recalcHeight = () => {
+    height = accordionContent?.getBoundingClientRect?.().height ?? 0;
+  };
+
+  $effect(() => {
+    recalcHeight();
+  });
+
+  onMount(() => {
+    window.addEventListener('resize', recalcHeight);
+    return () => window.removeEventListener('resize', recalcHeight);
+  });
+
+</script>
+
+<div class="AccordionContentWrapper" style={`height: ${$isOpen ? height + 8 : 0}px`}>
+  <div class="AccordionContent" bind:this={accordionContent}>
+    {@render children()}
+  </div>
+</div>
+
+<style>.AccordionContent {
+  margin-bottom: 1em;
+}
+
+.AccordionContentWrapper {
+  overflow: hidden;
+  height: 0;
+  transition: all 0.3s ease-in-out;
+}</style>

package/dist/components/Accordion/AccordionContent.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IAccordionContentProps } from "./Accordion.types";
+declare const AccordionContent: import("svelte").Component<IAccordionContentProps, {}, "">;
+type AccordionContent = ReturnType<typeof AccordionContent>;
+export default AccordionContent;

package/dist/components/Accordion/AccordionItem.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { setContext, getContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import type {IAccordionContext, IAccordionItemContext, IAccordionItemProps} from "./Accordion.types";
+
+  let { children, value }: IAccordionItemProps = $props();
+  const accordionState = getContext<IAccordionContext>('accordion-context');
+
+  let isOpen = writable(false);
+  let currentValue = $state<string | null>(null);
+  accordionState.value.subscribe((val: string | null) => currentValue = val);
+  setContext('accordion-item-context', { isOpen, value });
+
+  $effect(() => {
+    isOpen.set(value === currentValue);
+    setContext<IAccordionItemContext>('accordion-item-context', { isOpen, value });
+  });
+
+</script>
+
+<div class="AccordionItem">
+  {@render children()}
+</div>
+
+<style>.AccordionItem {
+  border-bottom: 1px solid var(--line-base);
+}</style>

package/dist/components/Accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IAccordionItemProps } from "./Accordion.types";
+declare const AccordionItem: import("svelte").Component<IAccordionItemProps, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/Accordion/AccordionRoot.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { writable } from 'svelte/store';
+  import type { IAccordionProps, IAccordionContext } from './Accordion.types';
+
+  let { children, value }: IAccordionProps = $props();
+
+  // Initialisation
+  const innerValue = writable<string | null>(value);
+  const open = (val: string | null) => innerValue.set(val);
+  const close = () => innerValue.set(null);
+
+  // Reactivity
+  // If value changed
+  $effect(() => innerValue.set(value));
+
+  setContext<IAccordionContext>('accordion-context', { value: innerValue, open, close });
+</script>
+
+<div class="AccordionRoot">
+  {@render children()}
+</div>

package/dist/components/Accordion/AccordionRoot.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IAccordionProps } from './Accordion.types';
+declare const AccordionRoot: import("svelte").Component<IAccordionProps, {}, "">;
+type AccordionRoot = ReturnType<typeof AccordionRoot>;
+export default AccordionRoot;

package/dist/components/Accordion/AccordionTrigger.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { ArrowDownSLineArrows, ArrowUpSLineArrows } from 'svelte-remix';
+  import type {IAccordionTriggerProps, IAccordionItemContext, IAccordionContext} from './Accordion.types';
+
+  let { children }: IAccordionTriggerProps = $props();
+
+  const { isOpen, value } = getContext<IAccordionItemContext>('accordion-item-context');
+  const { open, close } = getContext<IAccordionContext>('accordion-context');
+
+  const handleClick = () => {
+    if ($isOpen) { close?.() } else { open?.(value) }
+  }
+
+</script>
+
+<div class="AccordionTrigger">
+  <button class="AccordionTriggerButton" onclick={handleClick}>
+    <span class="flex">
+      {@render children()}
+    </span>
+    {#if $isOpen }
+      <ArrowUpSLineArrows size="1em"/>
+    {:else}
+      <ArrowDownSLineArrows size="1em"/>
+    {/if}
+  </button>
+</div>
+
+<style>.AccordionTriggerButton {
+  padding: 0.75em 0;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  transition: all 0.3s ease-in-out;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  background: var(--bg-base);
+  font-size: 1rem;
+}</style>

package/dist/components/Accordion/AccordionTrigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IAccordionTriggerProps } from './Accordion.types';
+declare const AccordionTrigger: import("svelte").Component<IAccordionTriggerProps, {}, "">;
+type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
+export default AccordionTrigger;

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,4 @@
+export { default as AccordionRoot } from './AccordionRoot.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as AccordionTrigger } from './AccordionTrigger.svelte';
+export { default as AccordionContent } from './AccordionContent.svelte';

package/dist/components/Accordion/index.js

@@ -0,0 +1,4 @@
+export { default as AccordionRoot } from './AccordionRoot.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as AccordionTrigger } from './AccordionTrigger.svelte';
+export { default as AccordionContent } from './AccordionContent.svelte';

package/dist/components/index.d.ts

@@ -19,3 +19,4 @@ export * from './Icon';
 export * from './Checkbox';
 export * from './CheckboxGroup';
 export * from './Sheet';
+export * from './Accordion';

package/dist/components/index.js

@@ -19,3 +19,4 @@ export * from './Icon';
 export * from './Checkbox';
 export * from './CheckboxGroup';
 export * from './Sheet';
+export * from './Accordion';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "milk-lib",
 	"license": "MIT",
-	"version": "0.0.36",
+	"version": "0.0.38",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",