@invopop/popui 0.0.76 → 0.0.77-beta

package/dist/table/table-caption.svelte

@@ -0,0 +1,8 @@
+<script>import { cn } from "../utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<caption class={cn('text-muted-foreground mt-4 text-sm', className)} {...$$restProps}>
+  <slot />
+</caption>

package/dist/table/table-caption.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from 'svelte/elements';
+declare const __propDef: {
+    props: HTMLAttributes<HTMLTableCaptionElement>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TableCaptionProps = typeof __propDef.props;
+export type TableCaptionEvents = typeof __propDef.events;
+export type TableCaptionSlots = typeof __propDef.slots;
+export default class TableCaption extends SvelteComponent<TableCaptionProps, TableCaptionEvents, TableCaptionSlots> {
+}
+export {};

package/dist/table/table-cell.svelte

@@ -0,0 +1,16 @@
+<script>import { cn } from "../utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<td
+  class={cn(
+    'py-3 pl-3 pr-3 align-middle text-neutral-500 font-normal text-base [&:has([role=checkbox])]:pr-2 [&:has([role=menu])]:pl-1 relative',
+    className
+  )}
+  {...$$restProps}
+  on:click
+  on:keydown
+>
+  <slot />
+</td>

package/dist/table/table-cell.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLTdAttributes } from 'svelte/elements';
+declare const __propDef: {
+    props: HTMLTdAttributes;
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TableCellProps = typeof __propDef.props;
+export type TableCellEvents = typeof __propDef.events;
+export type TableCellSlots = typeof __propDef.slots;
+export default class TableCell extends SvelteComponent<TableCellProps, TableCellEvents, TableCellSlots> {
+}
+export {};

package/dist/table/table-footer.svelte

@@ -0,0 +1,8 @@
+<script>import { cn } from "../utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<tfoot class={cn('bg-muted/50 text-primary-foreground font-medium', className)} {...$$restProps}>
+  <slot />
+</tfoot>

package/dist/table/table-footer.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from 'svelte/elements';
+declare const __propDef: {
+    props: HTMLAttributes<HTMLTableSectionElement>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TableFooterProps = typeof __propDef.props;
+export type TableFooterEvents = typeof __propDef.events;
+export type TableFooterSlots = typeof __propDef.slots;
+export default class TableFooter extends SvelteComponent<TableFooterProps, TableFooterEvents, TableFooterSlots> {
+}
+export {};

package/dist/table/table-head.svelte

@@ -0,0 +1,14 @@
+<script>import { cn } from "../utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<th
+  class={cn(
+    'text-neutral-600 text-base font-normal p-3 text-left align-middle [&:has([role=checkbox])]:pr-0',
+    className
+  )}
+  {...$$restProps}
+>
+  <slot />
+</th>

package/dist/table/table-head.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLThAttributes } from 'svelte/elements';
+declare const __propDef: {
+    props: HTMLThAttributes;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TableHeadProps = typeof __propDef.props;
+export type TableHeadEvents = typeof __propDef.events;
+export type TableHeadSlots = typeof __propDef.slots;
+export default class TableHead extends SvelteComponent<TableHeadProps, TableHeadEvents, TableHeadSlots> {
+}
+export {};

package/dist/table/table-header.svelte

@@ -0,0 +1,14 @@
+<script>import { cn } from "../utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<thead
+  class={cn('[&_tr]:border-b [&_tr]:border-neutral-100 bg-white', className)}
+  {...$$restProps}
+  on:click
+  on:keydown
+>
+  <slot />
+</thead>

package/dist/table/table-header.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from 'svelte/elements';
+declare const __propDef: {
+    props: HTMLAttributes<HTMLTableSectionElement>;
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TableHeaderProps = typeof __propDef.props;
+export type TableHeaderEvents = typeof __propDef.events;
+export type TableHeaderSlots = typeof __propDef.slots;
+export default class TableHeader extends SvelteComponent<TableHeaderProps, TableHeaderEvents, TableHeaderSlots> {
+}
+export {};

package/dist/table/table-row.svelte

@@ -0,0 +1,17 @@
+<script>import { cn } from "../utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<tr
+  class={cn(
+    'data-[state=selected]:bg-neutral-50 data-[state=checked]:bg-workspace-accent-50 transition-colors',
+    className
+  )}
+  {...$$restProps}
+  on:contextmenu|preventDefault
+  on:click
+  on:keydown
+>
+  <slot />
+</tr>

package/dist/table/table-row.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from 'svelte/elements';
+declare const __propDef: {
+    props: HTMLAttributes<HTMLTableRowElement> & {
+        'data-state'?: unknown;
+    };
+    events: {
+        contextmenu: MouseEvent;
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TableRowProps = typeof __propDef.props;
+export type TableRowEvents = typeof __propDef.events;
+export type TableRowSlots = typeof __propDef.slots;
+export default class TableRow extends SvelteComponent<TableRowProps, TableRowEvents, TableRowSlots> {
+}
+export {};

package/dist/table/table.svelte

@@ -0,0 +1,10 @@
+<script>import { cn } from "../utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<div class="relative w-full">
+  <table class={cn('w-full caption-bottom', className)} {...$$restProps}>
+    <slot />
+  </table>
+</div>

package/dist/table/table.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLTableAttributes } from 'svelte/elements';
+declare const __propDef: {
+    props: HTMLTableAttributes;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
+}
+export {};

package/dist/tabs/index.d.ts

@@ -0,0 +1,6 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+declare const Root: typeof TabsPrimitive.Root;
+export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };

package/dist/tabs/index.js

@@ -0,0 +1,8 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+const Root = TabsPrimitive.Root;
+export { Root, Content, List, Trigger, 
+//
+Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };

package/dist/tabs/tabs-content.svelte

@@ -0,0 +1,17 @@
+<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.Content
+  class={cn(
+    'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+    className
+  )}
+  {value}
+  {...$$restProps}
+>
+  <slot />
+</TabsPrimitive.Content>

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

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

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/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-beta",
   "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",
@@ -101,6 +103,7 @@
     "svelte-intersection-observer-action": "^0.0.4",
     "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>