@invopop/popui 0.0.76 → 0.0.77-beta1

package/dist/tabs/tabs-list.svelte

@@ -0,0 +1,15 @@
+<script>import { Tabs as TabsPrimitive } from "bits-ui";
+import { cn } from "../utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<TabsPrimitive.List
+  class={cn(
+    'bg-neutral-100 text-neutal-800 border border-neutral-200 text-base text-neutral-800 inline-flex h-7 items-center justify-center rounded-md p-0.5 w-full',
+    className
+  )}
+  {...$$restProps}
+>
+  <slot />
+</TabsPrimitive.List>

package/dist/tabs/tabs-list.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { Tabs as TabsPrimitive } from 'bits-ui';
+declare const __propDef: {
+    props: TabsPrimitive.ListProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TabsListProps = typeof __propDef.props;
+export type TabsListEvents = typeof __propDef.events;
+export type TabsListSlots = typeof __propDef.slots;
+export default class TabsList extends SvelteComponent<TabsListProps, TabsListEvents, TabsListSlots> {
+}
+export {};

package/dist/tabs/tabs-trigger.svelte

@@ -0,0 +1,18 @@
+<script>import { Tabs as TabsPrimitive } from "bits-ui";
+import { cn } from "../utils.js";
+let className = void 0;
+export let value;
+export { className as class };
+</script>
+
+<TabsPrimitive.Trigger
+  class={cn(
+    'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-white  inline-flex items-center justify-center whitespace-nowrap rounded px-3 py-0.5 text-base font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm w-full',
+    className
+  )}
+  {value}
+  {...$$restProps}
+  on:click
+>
+  <slot />
+</TabsPrimitive.Trigger>

package/dist/tabs/tabs-trigger.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { Tabs as TabsPrimitive } from 'bits-ui';
+declare const __propDef: {
+    props: TabsPrimitive.TriggerProps;
+    slots: {
+        default: {};
+    };
+    events: TabsPrimitive.TriggerEvents;
+};
+export type TabsTriggerProps = typeof __propDef.props;
+export type TabsTriggerEvents = typeof __propDef.events;
+export type TabsTriggerSlots = typeof __propDef.slots;
+export default class TabsTrigger extends SvelteComponent<TabsTriggerProps, TabsTriggerEvents, TabsTriggerSlots> {
+}
+export {};

package/dist/tabs/tabs.svelte

@@ -0,0 +1,14 @@
+<script>import { Tabs as TabsPrimitive } from "bits-ui";
+import { cn } from "../utils.js";
+let className = void 0;
+let value = void 0;
+export { className as class, value };
+</script>
+
+<TabsPrimitive.Root
+  bind:value
+  class={cn('flex flex-col flex-1 min-h-0', className)}
+  {...$$restProps}
+>
+  <slot />
+</TabsPrimitive.Root>

package/dist/{Tabs.svelte.d.ts → tabs/tabs.svelte.d.ts}

@@ -1,16 +1,13 @@
 import { SvelteComponent } from "svelte";
-import type { TabItem } from './types.js';
+import { Tabs as TabsPrimitive } from 'bits-ui';
 declare const __propDef: {
-    props: {
-        items?: TabItem[] | undefined;
-        selected?: string | undefined;
-    };
+    props: TabsPrimitive.Props;
     events: {
-        selected: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type TabsProps = typeof __propDef.props;
 export type TabsEvents = typeof __propDef.events;

package/dist/tooltip/index.d.ts

@@ -0,0 +1,5 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Content from './tooltip-content.svelte';
+declare const Root: typeof TooltipPrimitive.Root;
+declare const Trigger: typeof TooltipPrimitive.Trigger;
+export { Root, Trigger, Content, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger };

package/dist/tooltip/index.js

@@ -0,0 +1,7 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Content from './tooltip-content.svelte';
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+export { Root, Trigger, Content, 
+//
+Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger };

package/dist/tooltip/tooltip-content.svelte

@@ -0,0 +1,25 @@
+<script>import { Tooltip as TooltipPrimitive } from "bits-ui";
+import { cn, flyAndScale } from "../utils.js";
+let className = void 0;
+export let sideOffset = 4;
+export let transition = flyAndScale;
+export let transitionConfig = {
+  y: 8,
+  duration: 150
+};
+export { className as class };
+</script>
+
+<TooltipPrimitive.Content
+  {transition}
+  {transitionConfig}
+  {sideOffset}
+  class={cn(
+    'bg-neutral-700 text-white-80 z-50 rounded-md px-3 py-2 text-base font-medium shadow-md',
+    className
+  )}
+  {...$$restProps}
+>
+  <slot />
+  <TooltipPrimitive.Arrow />
+</TooltipPrimitive.Content>

package/dist/tooltip/tooltip-content.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const __propDef: {
+    props: TooltipPrimitive.ContentProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TooltipContentProps = typeof __propDef.props;
+export type TooltipContentEvents = typeof __propDef.events;
+export type TooltipContentSlots = typeof __propDef.slots;
+export default class TooltipContent extends SvelteComponent<TooltipContentProps, TooltipContentEvents, TooltipContentSlots> {
+}
+export {};

package/dist/tw.theme.d.ts

@@ -26,6 +26,8 @@ declare namespace _default {
                     100: string;
                     200: string;
                     500: string;
+                    600: string;
+                    700: string;
                 };
             }
             let positive: {
@@ -43,6 +45,8 @@ declare namespace _default {
                 300: string;
                 400: string;
                 500: string;
+                600: string;
+                700: string;
             };
             let neutral: {
                 50: string;

package/dist/tw.theme.js

@@ -29,7 +29,9 @@ export default {
           50: 'color-mix(in lab, transparent 95%, var(--workspace-accent-color, #169958))',
           100: 'color-mix(in lab, transparent 90%, var(--workspace-accent-color, #169958))',
           200: 'color-mix(in lab, transparent 80%, var(--workspace-accent-color, #169958))',
-          500: 'var(--workspace-accent-color, #169958)'
+          500: 'var(--workspace-accent-color, #169958)',
+          600: 'color-mix(in lab, black 16%, var(--workspace-accent-color, #169958))',
+          700: 'color-mix(in lab, black 32%, var(--workspace-accent-color, #169958))'
         }
       },
       positive: {
@@ -46,7 +48,9 @@ export default {
         200: 'rgba(201, 45, 69, 0.2)',
         300: 'rgba(201, 45, 69, 0.3)',
         400: 'rgba(201, 45, 69, 0.4)',
-        500: '#C92D45'
+        500: '#C92D45',
+        600: '#A9263A',
+        700: '#891F2F'
       },
       neutral: {
         50: '#F9FAFB',
@@ -125,7 +129,7 @@ export default {
     boxShadow: {
       active:
         '0px 0px 0px 2px color-mix(in lab, transparent 88%, var(--workspace-accent-color, #169958))',
-      warning: '0px 0px 0px 2px rgba(215, 135, 0, 0.12)' 
+      warning: '0px 0px 0px 2px rgba(215, 135, 0, 0.12)'
     },
 
     letterSpacing: {

package/dist/types.d.ts

@@ -133,3 +133,7 @@ export type Breadcrumb = {
     url?: string;
     country?: string;
 };
+export type StepIcon = {
+    name: string;
+    url: string;
+};

package/dist/utils.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+import type { ClassValue } from 'clsx';
+import type { TransitionConfig } from 'svelte/transition';
+type FlyAndScaleParams = {
+    y?: number;
+    x?: number;
+    start?: number;
+    duration?: number;
+};
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function styleToString(style: Record<string, number | string | undefined>): string;
+export declare function flyAndScale(node: Element, params?: FlyAndScaleParams): TransitionConfig;
+export {};

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.76",
+  "version": "0.0.77-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>