@invopop/popui 0.0.73 → 0.0.75-beta1

package/dist/utils.js

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cubicOut } from 'svelte/easing';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+export function styleToString(style) {
+    return Object.keys(style).reduce((str, key) => {
+        if (style[key] === undefined)
+            return str;
+        return `${str}${key}:${style[key]};`;
+    }, '');
+}
+export function flyAndScale(node, params = { y: -8, x: 0, start: 0.95, duration: 150 }) {
+    const style = getComputedStyle(node);
+    const transform = style.transform === 'none' ? '' : style.transform;
+    const scaleConversion = (valueA, scaleA, scaleB) => {
+        const [minA, maxA] = scaleA;
+        const [minB, maxB] = scaleB;
+        const percentage = (valueA - minA) / (maxA - minA);
+        const valueB = percentage * (maxB - minB) + minB;
+        return valueB;
+    };
+    return {
+        duration: params.duration ?? 200,
+        delay: 0,
+        css: (t) => {
+            const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+            const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+            const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+            return styleToString({
+                transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+                opacity: t
+            });
+        },
+        easing: cubicOut
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.0.73",
+  "version": "0.0.75-beta1",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -71,6 +71,7 @@
     "svelte": "^4.0.5",
     "svelte-check": "^3.4.3",
     "svelte-headlessui": "^0.0.32",
+    "tailwind-merge": "^3.0.2",
     "tailwindcss": "^3.4.16",
     "tslib": "^2.4.1",
     "typescript": "^4.1.6",
@@ -92,6 +93,7 @@
     "@twind/preset-tailwind-forms": "^1.1.2",
     "@twind/with-web-components": "^1.1.3",
     "@types/flatpickr": "^3.1.2",
+    "bits-ui": "^0.22.0",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
@@ -99,8 +101,10 @@
     "inter-ui": "^3.19.3",
     "svelte-floating-ui": "^1.5.8",
     "svelte-intersection-observer-action": "^0.0.4",
+    "svelte-portal": "^2.2.1",
     "svelte-transition": "^0.0.10",
     "svelte-viewport-info": "^1.0.2",
+    "tailwind-variants": "^1.0.0",
     "twind": "^0.16.19"
   }
 }

package/dist/BaseTableCell.svelte

@@ -1,91 +0,0 @@
-<script>import Viewport from "svelte-viewport-info";
-import clsx from "clsx";
-import TagStatus from "./TagStatus.svelte";
-import FeedIconStatus from "./FeedIconStatus.svelte";
-import BaseFlag from "./BaseFlag.svelte";
-import { getCountryName } from "./helpers.js";
-import UuidCopy from "./UuidCopy.svelte";
-import { Icon } from "@steeze-ui/svelte-icon";
-export let field;
-export let isFirst = false;
-export let isLast = false;
-export let badge = null;
-export let status = null;
-export let icons = null;
-export let data = "";
-export let tag = "td";
-export let selectable = false;
-export let hasActions = false;
-$:
-  isSelectableFirst = isFirst && selectable;
-$:
-  cellStyles = clsx(
-    { "tabular-nums slashed-zero lining-nums": field.monospacedNums },
-    { "font-mono": field.monospaced },
-    { "whitespace-nowrap": field.nowrap },
-    { "text-neutral-800 font-medium": isFirst && !field.grayed },
-    { "text-neutral-800 md:text-neutral-500": !isFirst || field.grayed },
-    { "md:text-right": field.rightAlign },
-    { "pl-5": isFirst && !selectable },
-    { "pl-3": !isFirst && !isSelectableFirst },
-    { "pr-5": isLast && !hasActions },
-    { "pr-3": !isLast || hasActions },
-    { "px-2": (!isFirst || !selectable) && !field.noPadding },
-    { "px-0": field.noPadding }
-  );
-$:
-  isMobile = Viewport.Width < 769;
-</script>
-
-<svelte:element this={tag} class="{cellStyles} text-base tracking-normal py-2">
-  <div class="flex flex-col">
-    <span class="md:hidden text-sm text-neutral-600 font-normal">
-      {field.headerLabel}
-    </span>
-    <span class="flex items-center" class:justify-end={field.rightAlign}>
-      {#if field.isCountry && data}
-        <span class="flex items-center space-x-1">
-          <BaseFlag country={String(data)} width={16} />
-          <span>{getCountryName(String(data))}</span>
-        </span>
-      {:else if field.copy && data}
-        <UuidCopy
-          rightAlign={isMobile ? false : field.rightAlign}
-          uuid={String(data)}
-          prefixLength={4}
-          suffixLength={4}
-          full
-          compact
-          dark={isMobile}
-          on:copied
-        />
-      {:else}
-        <span class="hidden md:inline">{data}</span>
-        <span class="md:hidden">{data ? data : badge || status ? '' : '-'}</span>
-      {/if}
-      {#if badge}
-        <span class:ml-2={!!data}>
-          <TagStatus label={badge.label} status={badge.status} dot={Boolean(badge.dot)} />
-        </span>
-      {/if}
-      {#if status}
-        <span class:ml-2={!!data}>
-          <FeedIconStatus {status} />
-        </span>
-      {/if}
-      {#if icons}
-        <span class:ml-2={!!data} class="flex items-center gap-1 flex-shrink-0">
-          {#each icons as icon}
-            <div class="border border-neutral-200 rounded-md p-px">
-              {#if typeof icon === 'string'}
-                <img alt="icon" src={icon} class="h-4 w-4" />
-              {:else}
-                <Icon src={icon} class="h-4 w-4" />
-              {/if}
-            </div>
-          {/each}
-        </span>
-      {/if}
-    </span>
-  </div>
-</svelte:element>

package/dist/BaseTableCell.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Badge, FeedItemStatus, TableField, TableIcon } from './types.js';
-declare const __propDef: {
-    props: {
-        field: TableField;
-        isFirst?: boolean | undefined;
-        isLast?: boolean | undefined;
-        badge?: Badge | null | undefined;
-        status?: FeedItemStatus | null | undefined;
-        icons?: TableIcon[] | null | undefined;
-        data?: unknown;
-        tag?: string | undefined;
-        selectable?: boolean | undefined;
-        hasActions?: boolean | undefined;
-    };
-    events: {
-        copied: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BaseTableCellProps = typeof __propDef.props;
-export type BaseTableCellEvents = typeof __propDef.events;
-export type BaseTableCellSlots = typeof __propDef.slots;
-export default class BaseTableCell extends SvelteComponent<BaseTableCellProps, BaseTableCellEvents, BaseTableCellSlots> {
-}
-export {};

package/dist/BaseTableHeader.svelte

@@ -1,68 +0,0 @@
-<script>import clsx from "clsx";
-import { createEventDispatcher } from "svelte";
-import BaseDropdown from "./BaseDropdown.svelte";
-import BaseTableHeaderSortBy from "./BaseTableHeaderSortBy.svelte";
-const dispatch = createEventDispatcher();
-let sortDropdown;
-export let field;
-export let sortBy = "";
-export let sortDirection;
-export let isFirst = false;
-export let isLast = false;
-export let selectable = false;
-$:
-  headerStyles = clsx({
-    "hover:bg-neutral-50 focus:bg-neutral-100": field.sortable,
-    "pl-5": isFirst && !selectable,
-    "pl-2": !isFirst,
-    "pr-5": isLast,
-    "pr-2": !isLast
-  });
-function handleSortBy(event) {
-  sortDirection = event.detail;
-  dispatch("orderBy", { field: field.slug, direction: sortDirection });
-  sortDropdown.toggle();
-}
-</script>
-
-<th scope="col" class="bg-white text-neutral-500 group sticky z-10 top-0 h-9 box-border p-0">
-  <span class="flex border-b border-neutral-100" class:justify-end={field.rightAlign}>
-    {#if field.sortable}
-      <BaseDropdown bind:this={sortDropdown} fullWidth>
-        <span
-          slot="trigger"
-          class="{headerStyles} w-full py-2 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
-        >
-          <span class="w-full" class:text-right={field.rightAlign}>{field.headerLabel}</span>
-          {#if sortBy === field.slug}
-            <svg
-              viewBox="0 0 12 12"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              class:rotate-180={sortDirection === 'asc'}
-              class="mt-px text-neutral-400 h-3 w-3"
-            >
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M6.56519 8.8272L7.9966 7.39579L8.7037 8.1029L6.41082 10.3958L6.05726 10.7493L5.70371 10.3958L3.41082 8.1029L4.11793 7.39579L5.56507 8.84293L5.61453 1.24609L6.61451 1.2526L6.56519 8.8272Z"
-                fill="currentColor"
-              />
-            </svg>
-          {/if}
-        </span>
-        <BaseTableHeaderSortBy
-          {sortDirection}
-          isActive={sortBy === field.slug}
-          on:sortBy={handleSortBy}
-        />
-      </BaseDropdown>
-    {:else}
-      <div
-        class="{headerStyles} py-2 text-left text-base font-normal tracking-normal whitespace-nowrap"
-      >
-        <div class="h-5">{field.headerLabel}</div>
-      </div>
-    {/if}
-  </span>
-</th>

package/dist/BaseTableHeader.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { TableField, TableSortBy } from './types.js';
-declare const __propDef: {
-    props: {
-        field: TableField;
-        sortBy?: string | undefined;
-        sortDirection: TableSortBy;
-        isFirst?: boolean | undefined;
-        isLast?: boolean | undefined;
-        selectable?: boolean | undefined;
-    };
-    events: {
-        orderBy: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BaseTableHeaderProps = typeof __propDef.props;
-export type BaseTableHeaderEvents = typeof __propDef.events;
-export type BaseTableHeaderSlots = typeof __propDef.slots;
-export default class BaseTableHeader extends SvelteComponent<BaseTableHeaderProps, BaseTableHeaderEvents, BaseTableHeaderSlots> {
-}
-export {};

package/dist/Tabs.svelte

@@ -1,41 +0,0 @@
-<script>import { createTabs } from "svelte-headlessui";
-import BaseCounter from "./BaseCounter.svelte";
-import { Icon } from "@steeze-ui/svelte-icon";
-import { Alert, Success } from "@invopop/ui-icons";
-import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let items = [];
-export let selected = "";
-const tabs = createTabs({ selected: items.find((i) => i.slug === selected) || items[0] });
-</script>
-
-<div
-  use:tabs.list
-  class="inline-flex space-x-0.5 rounded-md border p-0.5 border-neutral-200 bg-neutral-100 w-full"
->
-  {#each items as value}
-    <button
-      use:tabs.tab={{ value }}
-      class:bg-white={selected === value.slug}
-      class="flex items-center space-x-1 justify-center w-full whitespace-nowrap text-neutral-800 text-base font-medium focus:outline-none focus:ring-0 py-0.5 px-3 rounded"
-      on:click={() => {
-        selected = value.slug
-        dispatch('selected', selected)
-      }}
-    >
-      <span class="tracking-tighter">{value.label}</span>
-      {#if value.counter}
-        <BaseCounter
-          content={value.counter}
-          variant={selected === value.slug ? 'light' : 'default'}
-        />
-      {/if}
-      {#if value.check}
-        <Icon src={Success} class="h-4 w-4" />
-      {/if}
-      {#if value.warning}
-        <Icon src={Alert} class="h-4 w-4" />
-      {/if}
-    </button>
-  {/each}
-</div>