milk-lib 0.0.35 → 0.0.37

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,30 @@
+<script lang="ts">
+  import { getContext } 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 = $derived<number>(
+    accordionContent
+      ? (accordionContent as HTMLDivElement).getBoundingClientRect?.().height
+      : 0
+  );
+
+</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/CheckboxGroup/CheckboxGroup.svelte

@@ -7,9 +7,17 @@
     legend = 'Choose options',
     options = [] as CheckboxGroupItem[],
     selectedValues = $bindable([] as string[]),
-    name
+    name,
+    maxHeight
   }: CheckboxGroupProps = $props();
 
+  const maxHeightValue = $derived.by(() => {
+    if (maxHeight === undefined || maxHeight === null || maxHeight === '') {
+      return undefined;
+    }
+    return typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
+  });
+
   function handleOptionToggle(value: string) {
     toggleOption(value);
   }
@@ -28,7 +36,12 @@
     <legend>{legend}</legend>
   {/if}
 
-  <ul class="checkbox-list">
+  <ul
+    class="checkbox-list"
+    class:scrollable={Boolean(maxHeightValue)}
+    style={`max-height: ${maxHeightValue || 'auto'};`}
+
+  >
     {#if options.length === 0}
       <li class="checkbox-placeholder">No option for choice</li>
     {:else}
@@ -63,14 +76,14 @@
     {/if}
   </ul>
 
-  <div class="checkbox-selected">
+  <!-- <div class="checkbox-selected">
     <strong>Selected:</strong>
     {#if selectedValues.length === 0}
       <span>nothing</span>
     {:else}
       <span>{selectedValues.join(', ')}</span>
     {/if}
-  </div>
+  </div> -->
 </fieldset>
 
 <style>.checkbox-group {
@@ -98,6 +111,11 @@ legend {
   gap: 8px;
 }
 
+.checkbox-list.scrollable {
+  overflow-y: auto;
+  min-height: 0;
+}
+
 .checkbox-placeholder {
   color: var(--text-base-placeholder, #7c7c7c);
   font-size: 14px;
@@ -137,16 +155,4 @@ legend {
   display: block;
   color: var(--text-base-placeholder, #7c7c7c);
   font-size: 12px;
-}
-
-.checkbox-selected {
-  font-size: 13px;
-  color: var(--text-base-placeholder, #7c7c7c);
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.checkbox-selected strong {
-  color: var(--text-base-main, #222);
 }</style>

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

@@ -19,4 +19,5 @@ export type CheckboxGroupProps = {
     options: CheckboxGroupItem[];
     selectedValues: string[];
     name: string;
+    maxHeight?: number | string;
 };

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.35",
+	"version": "0.0.37",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",