@invopop/popui 0.0.1

package/dist/CounterWorkflow.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        content: number | string;
+        variant?: "default" | "transparent" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CounterWorkflowProps = typeof __propDef.props;
+export type CounterWorkflowEvents = typeof __propDef.events;
+export type CounterWorkflowSlots = typeof __propDef.slots;
+export default class CounterWorkflow extends SvelteComponent<CounterWorkflowProps, CounterWorkflowEvents, CounterWorkflowSlots> {
+}
+export {};

package/dist/DataListItem.svelte

@@ -0,0 +1,22 @@
+<script>import clsx from "clsx";
+export let label = "";
+export let value = "";
+export let monospaced = false;
+export let monospacedNums = false;
+export let fullWidth = false;
+$:
+  styles = clsx({
+    "font-mono": monospaced,
+    "slashed-zero tabular-nums lining-nums": monospacedNums,
+    "w-full": fullWidth
+  });
+</script>
+
+<div class="flex space-x-4 text-base items-center">
+  <div class="text-neutral-500 min-w-[125px]">{label}</div>
+  <div class="{styles} text-neutral-800 font-medium">
+    <slot>
+      {value}
+    </slot>
+  </div>
+</div>

package/dist/DataListItem.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        value?: string | undefined;
+        monospaced?: boolean | undefined;
+        monospacedNums?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DataListItemProps = typeof __propDef.props;
+export type DataListItemEvents = typeof __propDef.events;
+export type DataListItemSlots = typeof __propDef.slots;
+export default class DataListItem extends SvelteComponent<DataListItemProps, DataListItemEvents, DataListItemSlots> {
+}
+export {};

package/dist/DatePicker.svelte

@@ -0,0 +1,431 @@
+<script>import Transition from "svelte-transition";
+import flatpickr from "flatpickr";
+import "flatpickr/dist/flatpickr.min.css";
+import { createEventDispatcher, onMount } from "svelte";
+import BaseButton from "./BaseButton.svelte";
+import {
+  startOfWeek,
+  endOfWeek,
+  subWeeks,
+  endOfMonth,
+  startOfMonth,
+  subMonths,
+  startOfQuarter,
+  endOfQuarter,
+  subQuarters
+} from "date-fns";
+import { Icon } from "@steeze-ui/svelte-icon";
+import { Calendar } from "@invopop/ui-icons";
+import clsx from "clsx";
+const dispatch = createEventDispatcher();
+export let label = "Date";
+export let position = "left";
+export let from = "";
+export let to = "";
+$:
+  if (datepicker) {
+    setDates(from, to);
+  }
+$:
+  styles = clsx({
+    "border-workspace-accent focus:border-workspace-accent shadow-active": isOpen,
+    "border-neutral-200": !isOpen
+  });
+let datePickerEl;
+let selectedLabel = label;
+let datepicker;
+let selectedDates = { from: { value: "", display: "" }, to: { value: "", display: "" } };
+let isOpen = false;
+let selectedPeriod = "custom";
+const today = /* @__PURE__ */ new Date();
+const startOfThisWeek = startOfWeek(today, { weekStartsOn: 1 });
+const endOfThisWeek = endOfWeek(today, { weekStartsOn: 1 });
+const startOfLastWeek = subWeeks(startOfThisWeek, 1);
+const endOfLastWeek = endOfWeek(startOfLastWeek, { weekStartsOn: 1 });
+const startOfThisMonth = startOfMonth(today);
+const endOfThisMonth = endOfMonth(today);
+const startOfLastMonth = subMonths(startOfThisMonth, 1);
+const endOfLastMonth = endOfMonth(startOfLastMonth);
+const startOfThisQuarter = startOfQuarter(today);
+const endOfThisQuarter = endOfQuarter(today);
+const startOfLastQuarter = subQuarters(startOfThisQuarter, 1);
+const endOfLastQuarter = endOfQuarter(startOfLastQuarter);
+const periods = [
+  {
+    slug: "this-week",
+    label: "This Week",
+    action: () => {
+      selectedPeriod = "this-week";
+      datepicker.setDate([startOfThisWeek, endOfThisWeek], true);
+      datepicker.jumpToDate(startOfThisWeek);
+    }
+  },
+  {
+    slug: "last-week",
+    label: "Last Week",
+    action: () => {
+      selectedPeriod = "last-week";
+      datepicker.setDate([startOfLastWeek, endOfLastWeek], true);
+      datepicker.jumpToDate(startOfLastWeek);
+    }
+  },
+  {
+    slug: "this-month",
+    label: "This month",
+    action: () => {
+      selectedPeriod = "this-month";
+      datepicker.setDate([startOfThisMonth, endOfThisMonth], true);
+      datepicker.jumpToDate(startOfThisMonth);
+    }
+  },
+  {
+    slug: "last-month",
+    label: "Last month",
+    action: () => {
+      selectedPeriod = "last-month";
+      datepicker.setDate([startOfLastMonth, endOfLastMonth], true);
+      datepicker.jumpToDate(startOfLastMonth);
+    }
+  },
+  {
+    slug: "this-quarter",
+    label: "This quarter",
+    action: () => {
+      selectedPeriod = "this-quarter";
+      datepicker.setDate([startOfThisQuarter, endOfThisQuarter], true);
+      datepicker.jumpToDate(startOfThisQuarter);
+    }
+  },
+  {
+    slug: "last-quarter",
+    label: "Last quarter",
+    action: () => {
+      selectedPeriod = "last-quarter";
+      datepicker.setDate([startOfLastQuarter, endOfLastQuarter], true);
+      datepicker.jumpToDate(startOfLastQuarter);
+    }
+  },
+  {
+    slug: "custom",
+    label: "Custom",
+    action: () => {
+      datepicker.clear();
+      selectedPeriod = "custom";
+    }
+  }
+];
+onMount(() => {
+  datepicker = flatpickr(datePickerEl, {
+    onChange: function(dates) {
+      if (dates.length === 0) {
+        selectedLabel = label;
+        return;
+      }
+      if (dates.length === 1) {
+        selectedPeriod = "custom";
+        return;
+      }
+      const from2 = getDate(dates[0]);
+      const to2 = getDate(dates[1]);
+      selectedDates = { from: from2, to: to2 };
+    },
+    locale: {
+      firstDayOfWeek: 1,
+      weekdays: {
+        shorthand: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+        longhand: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
+      }
+    },
+    inline: true,
+    mode: "range",
+    dateFormat: "Y-m-d",
+    showMonths: 2
+  });
+});
+function getDate(date) {
+  const year = date.getFullYear();
+  const month = ("0" + (date.getMonth() + 1)).slice(-2);
+  const day = ("0" + date.getDate()).slice(-2);
+  return { value: `${year}-${month}-${day}`, display: `${day}/${month}/${year}` };
+}
+function cancel() {
+  isOpen = false;
+  datepicker.clear();
+  dispatch("selected", { from: "", to: "" });
+}
+function confirm() {
+  isOpen = false;
+  selectedLabel = getLabel();
+  dispatch("selected", { from: selectedDates.from.value, to: selectedDates.to.value });
+}
+function getLabel() {
+  if (!selectedDates.from.value)
+    return label;
+  if (selectedDates.from.value === selectedDates.to.value)
+    return selectedDates.from.display;
+  return `${selectedDates.from.display} \u2192 ${selectedDates.to.display}`;
+}
+function setDates(from2, to2) {
+  datepicker.setDate([from2, to2]);
+  selectedDates = {
+    from: { value: from2, display: getDisplayFromValue(from2) },
+    to: { value: to2, display: getDisplayFromValue(to2) }
+  };
+  selectedLabel = getLabel();
+}
+function getDisplayFromValue(value) {
+  if (!value)
+    return "";
+  const parts = value.split("-");
+  return `${parts[2]}/${parts[1]}/${parts[0]}`;
+}
+</script>
+
+<div>
+  <div class="relative">
+    <button
+      on:click={() => (isOpen = !isOpen)}
+      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-8 border hover:border-neutral-300 rounded-md text-neutral-800 placeholder-neutral-800 text-base"
+    >
+      {selectedLabel}
+    </button>
+    <Icon src={Calendar} class="h-4 w-4 absolute top-2 left-2 text-neutral-500" />
+  </div>
+
+  <div class="relative">
+    <Transition
+      show={isOpen}
+      enter="transition ease-out duration-100"
+      enterFrom="transform opacity-0 scale-95"
+      enterTo="transform opacity-100 scale-100"
+      leave="transition ease-in duration-75"
+      leaveFrom="transform opacity-100 scale-100"
+      leaveTo="transform opacity-0 scale-95"
+    >
+      <div
+        class:left-0={position === 'left'}
+        class:right-0={position === 'right'}
+        class="bg-white inline-flex flex-col shadow rounded-lg absolute right-0 top-2 z-40"
+      >
+        <div class="flex border-b border-neutral-100 h-[300px]">
+          <div class="flex flex-col space-y-2 items-start p-3 border-r border-neutral-100">
+            {#each periods as period}
+              <button
+                on:click={period.action}
+                class="{selectedPeriod === period.slug
+                  ? 'selected-period text-workspace-accent border-workspace-accent-200 bg-workspace-accent-50'
+                  : 'text-neutral-500 border-transparent'} whitespace-nowrap text-base px-2 py-1 tracking-normal border rounded"
+              >
+                {period.label}
+              </button>
+            {/each}
+          </div>
+          <div bind:this={datePickerEl} />
+        </div>
+        <div class="p-3 flex justify-end items-center space-x-3">
+          <BaseButton variant="secondary" on:click={cancel}>Cancel</BaseButton>
+          <BaseButton variant="primary" on:click={confirm} disabled={!selectedDates.to.value}>
+            Confirm
+          </BaseButton>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</div>
+
+<style>
+  :global(.flatpickr-calendar) {
+    width: 508px !important;
+    padding-left: 12px;
+    padding-right: 12px;
+    padding-top: 4px;
+    padding-bottom: 8px;
+    font-family: 'Inter' !important;
+    top: 0 !important;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  :global(.flatpickr-weekdaycontainer:nth-child(2)) {
+    margin-left: 28px;
+  }
+  :global(.dayContainer:nth-child(1)) {
+    margin-right: 28px;
+  }
+  :global(.flatpickr-months) {
+    padding-top: 8px;
+    padding-bottom: 12px;
+  }
+  :global(.flatpickr-current-month) {
+    padding-top: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    height: 24px !important;
+    letter-spacing: -0.07px;
+  }
+  :global(.flatpickr-monthDropdown-months) {
+    font-weight: 500 !important;
+    height: 22px !important;
+    color: #09101c !important;
+  }
+  :global(.cur-month:hover) {
+    background-color: transparent !important;
+  }
+  :global(.numInputWrapper:hover) {
+    background-color: #fafbfb !important;
+    border: 1px solid #f3f5f5 !important;
+  }
+  :global(.numInputWrapper span.arrowUp) {
+    right: -4px;
+    border: 0;
+    background-color: transparent;
+  }
+  :global(.numInputWrapper span.arrowDown) {
+    right: -4px;
+    border: 0;
+    background-color: transparent;
+  }
+  :global(.cur-year, .cur-month) {
+    font-weight: 600 !important;
+    color: #09101c !important;
+  }
+  :global(.numInputWrapper) {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    height: 22px;
+  }
+  :global(.flatpickr-next-month) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px !important;
+    width: 24px !important;
+    border: 1px solid #e9ebeb;
+    right: 12px !important;
+    top: 12px !important;
+    padding: 0 !important;
+    border-radius: 4px;
+  }
+  :global(.flatpickr-prev-month) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px !important;
+    width: 24px !important;
+    border: 1px solid #e9ebeb;
+    left: 12px !important;
+    top: 12px !important;
+    padding: 0 !important;
+    border-radius: 4px;
+  }
+  :global(.flatpickr-weekdays) {
+    height: 32px;
+  }
+  :global(.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange) {
+    background-color: var(--workspace-accent-color, #169958) !important;
+    border: 0;
+    border-radius: 4px !important;
+    box-shadow: 0px 0px 0px 2px
+      color-mix(in lab, transparent 88%, var(--workspace-accent-color, #169958)) !important;
+  }
+  :global(
+      .flatpickr-day.selected:hover,
+      .flatpickr-day.startRange:hover,
+      .flatpickr-day.endRange:hover
+    ) {
+    border: 0;
+  }
+  :global(.flatpickr-day.inRange) {
+    background-color: #f4f5f5;
+    border: 1px solid #f4f5f5;
+    box-shadow: none !important;
+  }
+  :global(.prevMonthDay, .nextMonthDay) {
+    color: #cccece !important;
+    font-weight: 500;
+    font-size: 13px;
+  }
+  :global(.prevMonthDay.inRange, .nextMonthDay.inRange) {
+    background-color: #f4f5f5 !important;
+    border: 1px solid #f4f5f5 !important;
+  }
+  :global(.flatpickr-weekday) {
+    width: 32px;
+    height: 32px;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    font-weight: 400 !important;
+    color: #9ca3af !important;
+    font-size: 12px !important;
+  }
+  :global(.flatpickr-weekdaycontainer) {
+    flex: 0 !important;
+    border-bottom: 1px solid #f3f5f5 !important;
+  }
+  :global(.flatpickr-prev-month svg) {
+    fill: #0a0a0a;
+    height: 10px !important;
+    width: 10px !important;
+  }
+  :global(.flatpickr-next-month svg) {
+    fill: #0a0a0a;
+    height: 10px !important;
+    width: 10px !important;
+  }
+  :global(.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg) {
+    fill: #0a0a0a !important;
+  }
+  :global(.flatpickr-days) {
+    width: 496px !important;
+  }
+  :global(.dayContainer) {
+    width: 224px;
+    min-width: 224px;
+    max-width: 224px;
+    justify-content: start;
+    box-shadow: none !important;
+  }
+  :global(.flatpickr-day) {
+    margin-top: 2px !important;
+    border-radius: 4px;
+    width: 32px;
+    max-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    display: flex !important;
+    font-weight: 500 !important;
+    align-items: center;
+    justify-content: center;
+    color: #0a0a0a;
+  }
+  :global(.flatpickr-day.today) {
+    border: 0;
+    border-bottom: 1px solid var(--workspace-accent-color, #169958);
+    border-radius: 0;
+  }
+  :global(.flatpickr-day.today:hover) {
+    background-color: #fafbfb !important;
+    border: 1px solid #f3f5f5 !important;
+    color: #0a0a0a;
+    border-radius: 4px;
+  }
+  :global(.flatpickr-day:hover) {
+    background-color: #fafbfb;
+    border: 1px solid #f3f5f5;
+  }
+  :global(.prevMonthDay:hover, .nextMonthDay:hover) {
+    background-color: #fafbfb !important;
+    border: 1px solid #f3f5f5 !important;
+  }
+  .datepicker-trigger {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iNCIgZmlsbD0iI0YzRjRGNiIvPgo8cGF0aCBkPSJNNi41IDguMjUwMDRMMTAgMTEuNzVMMTMuNSA4LjI1IiBzdHJva2U9IiMwMzA3MTIiIHN0cm9rZS13aWR0aD0iMS4xIi8+Cjwvc3ZnPg==');
+    background-repeat: no-repeat;
+    background-position: center right 8px;
+  }
+</style>

package/dist/DatePicker.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import 'flatpickr/dist/flatpickr.min.css';
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        position?: "right" | "left" | undefined;
+        from?: string | undefined;
+        to?: string | undefined;
+    };
+    events: {
+        selected: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DatePickerProps = typeof __propDef.props;
+export type DatePickerEvents = typeof __propDef.events;
+export type DatePickerSlots = typeof __propDef.slots;
+export default class DatePicker extends SvelteComponent<DatePickerProps, DatePickerEvents, DatePickerSlots> {
+}
+export {};

package/dist/DrawerContext.svelte

@@ -0,0 +1,48 @@
+<script>import DrawerContextItem from "./DrawerContextItem.svelte";
+import InputSearch from "./InputSearch.svelte";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let items = [];
+export let multiple = false;
+export let searchable = false;
+export let widthClass = "w-60";
+$:
+  mainItems = items.filter((i) => !i.footer);
+$:
+  footerItems = items.filter((i) => i.footer);
+$:
+  selectedItems = items.filter((i) => i.selected);
+$:
+  dispatch("selected", selectedItems);
+function updateItem(event) {
+  const item = event.detail;
+  items = items.map((i) => {
+    if (i.value === item.value)
+      return item;
+    return i;
+  });
+}
+</script>
+
+<div
+  class="{widthClass} border border-neutral-200 py-1 rounded shadow-lg space-y-0.5 bg-white max-h-80 overflow-y-auto"
+>
+  {#if searchable}
+    <div class="px-2 mt-2 mb-1">
+      <InputSearch placeholder="Search" />
+    </div>
+  {/if}
+  <ul class="px-1 space-y-1 max-h-80 overflow-y-auto">
+    {#each mainItems as item}
+      <DrawerContextItem {item} {multiple} on:click on:change={updateItem} />
+    {/each}
+  </ul>
+  {#if footerItems.length}
+    <hr class="!my-1 border-neutral-100" />
+    <ul class="px-1 space-y-1">
+      {#each footerItems as item}
+        <DrawerContextItem {item} {multiple} on:click />
+      {/each}
+    </ul>
+  {/if}
+</div>

package/dist/DrawerContext.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { DrawerOption } from './types.ts';
+declare const __propDef: {
+    props: {
+        items?: DrawerOption[] | undefined;
+        multiple?: boolean | undefined;
+        searchable?: boolean | undefined;
+        widthClass?: string | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+        selected: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DrawerContextProps = typeof __propDef.props;
+export type DrawerContextEvents = typeof __propDef.events;
+export type DrawerContextSlots = typeof __propDef.slots;
+export default class DrawerContext extends SvelteComponent<DrawerContextProps, DrawerContextEvents, DrawerContextSlots> {
+}
+export {};

package/dist/DrawerContextItem.svelte

@@ -0,0 +1,93 @@
+<script>import InputCheckbox from "./InputCheckbox.svelte";
+import { Icon } from "@steeze-ui/svelte-icon";
+import { createEventDispatcher, onMount } from "svelte";
+import { Tick } from "@invopop/ui-icons";
+import ProfileAvatar from "./ProfileAvatar.svelte";
+import clsx from "clsx";
+import BaseFlag from "./BaseFlag.svelte";
+import { getCountryName } from "./helpers.js";
+import TagStatus from "./TagStatus.svelte";
+const dispatch = createEventDispatcher();
+export let multiple = false;
+export let item;
+export let scrollIfSelected = false;
+export let workspace = false;
+let el;
+$:
+  hasIcon = item.icon || workspace;
+$:
+  styles = clsx(
+    { "py-1 space-x-3": workspace },
+    { "py-1.5 space-x-2": !workspace },
+    { "px-1.5": hasIcon },
+    { "px-2": !hasIcon },
+    { "bg-workspace-accent-100": item.selected && !multiple },
+    { "hover:bg-neutral-100 rounded": !item.selected }
+  );
+$:
+  labelStyles = clsx(
+    { "text-danger-500": item.destructive },
+    { "text-neutral-800": !item.destructive },
+    { "font-semibold tracking-tight": workspace },
+    { "font-normal tracking-normal": !workspace }
+  );
+onMount(() => {
+  if (!scrollIfSelected)
+    return;
+  if (item.selected) {
+    el.scrollIntoView();
+  }
+});
+</script>
+
+<button
+  bind:this={el}
+  class="{styles} border border-transparent rounded pr-2 flex items-center justify-start w-full"
+  on:click|stopPropagation={() => {
+    if (multiple) {
+      item.selected = !item.selected
+      dispatch('change', item)
+    } else {
+      dispatch('click', item.value)
+    }
+  }}
+>
+  {#if workspace}
+    <ProfileAvatar name={item.label} picture={item.picture} large />
+  {:else if item.icon}
+    <Icon
+      src={item.icon}
+      class="w-4 h-4 {item.destructive ? 'text-danger-500' : 'text-neutral-500'}"
+    />
+  {/if}
+  <div
+    class="whitespace-nowrap flex-1 text-left max-w-40 truncate flex flex-col"
+    title={item.label}
+  >
+    <span class="flex items-center space-x-1.5">
+      {#if item.color}
+        <TagStatus status={item.color} dot />
+      {/if}
+      <span class="{labelStyles} text-base">{item.label}</span>
+    </span>
+
+    {#if item.country}
+      <span class="flex space-x-1 items-center">
+        <BaseFlag country={item.country} width={10} />
+        <span class="text-sm text-neutral-500 tracking-normal">{getCountryName(item.country)}</span>
+      </span>
+    {/if}
+  </div>
+  {#if multiple}
+    <InputCheckbox
+      bind:checked={item.selected}
+      on:change={() => {
+        dispatch('change', item)
+      }}
+    />
+  {:else if item.selected}
+    <Icon src={Tick} class="w-5 h-5 text-workspace-accent" />
+  {:else if item.rightIcon}
+    <Icon src={item.rightIcon} class="w-5 h-5 text-neutral-300" />
+  {/if}
+</button>