@invopop/popui 0.0.104 → 0.1.1

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

@@ -1,17 +1,5 @@
-import { SvelteComponent } from "svelte";
+import { type WithElementRef } from '../utils.js';
 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 {};
+declare const TableFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
+type TableFooter = ReturnType<typeof TableFooter>;
+export default TableFooter;

package/dist/table/table-head.svelte

@@ -1,14 +1,20 @@
-<script>import { cn } from "../utils.js";
-let className = void 0;
-export { className as class };
+<script lang="ts">
+  import { cn, type WithElementRef } from '../utils.js'
+  import type { HTMLThAttributes } from 'svelte/elements'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children
+  }: WithElementRef<HTMLThAttributes> = $props()
 </script>
 
 <th
+  bind:this={ref}
+  data-slot="table-head"
   class={cn(
     'text-neutral-600 text-base font-normal p-3 text-left align-middle [&:has([role=checkbox])]:pr-0',
     className
   )}
-  {...$$restProps}
 >
-  <slot />
+  {@render children?.()}
 </th>

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

@@ -1,17 +1,5 @@
-import { SvelteComponent } from "svelte";
+import { type WithElementRef } from '../utils.js';
 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 {};
+declare const TableHead: import("svelte").Component<WithElementRef<HTMLThAttributes>, {}, "ref">;
+type TableHead = ReturnType<typeof TableHead>;
+export default TableHead;

package/dist/table/table-header.svelte

@@ -1,14 +1,23 @@
-<script>import { cn } from "../utils.js";
-let className = void 0;
-export { className as class };
+<script lang="ts">
+  import { createBubbler } from 'svelte/legacy'
+  import { cn, type WithElementRef } from '../utils.js'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  const bubble = createBubbler()
+  let {
+    ref = $bindable(null),
+    class: className,
+    children
+  }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props()
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <thead
+  bind:this={ref}
+  data-slot="table-header"
   class={cn('[&_tr]:border-b [&_tr]:border-neutral-100 bg-white', className)}
-  {...$$restProps}
-  on:click
-  on:keydown
+  onclick={bubble('click')}
+  onkeydown={bubble('keydown')}
 >
-  <slot />
+  {@render children?.()}
 </thead>

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

@@ -1,20 +1,5 @@
-import { SvelteComponent } from "svelte";
+import { type WithElementRef } from '../utils.js';
 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 {};
+declare const TableHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/table/table-row.svelte

@@ -1,17 +1,31 @@
-<script>import { cn } from "../utils.js";
-let className = void 0;
-export { className as class };
+<script lang="ts">
+  import { cn, type WithElementRef } from '../utils.js'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    onclick,
+    oncontextmenu,
+    onkeydown,
+    onmouseover,
+    onfocus
+  }: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props()
 </script>
 
 <tr
+  bind:this={ref}
+  data-slot="table-row"
   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
+  {oncontextmenu}
+  {onclick}
+  {onkeydown}
+  {onmouseover}
+  {onfocus}
 >
-  <slot />
+  {@render children?.()}
 </tr>

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

@@ -1,23 +1,5 @@
-import { SvelteComponent } from "svelte";
+import { type WithElementRef } from '../utils.js';
 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 {};
+declare const TableRow: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableRowElement>>, {}, "ref">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

package/dist/table/table.svelte

@@ -1,10 +1,15 @@
-<script>import { cn } from "../utils.js";
-let className = void 0;
-export { className as class };
+<script lang="ts">
+  import type { HTMLTableAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children
+  }: WithElementRef<HTMLTableAttributes> = $props()
 </script>
 
-<div class="relative w-full">
-  <table class={cn('w-full caption-bottom', className)} {...$$restProps}>
-    <slot />
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+  <table bind:this={ref} data-slot="table" class={cn('w-full caption-bottom', className)}>
+    {@render children?.()}
   </table>
 </div>

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

@@ -1,17 +1,5 @@
-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 {};
+import { type WithElementRef } from '../utils.js';
+declare const Table: import("svelte").Component<WithElementRef<HTMLTableAttributes>, {}, "ref">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/tabs/tabs-content.svelte

@@ -1,17 +1,22 @@
-<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 lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    value
+  }: TabsPrimitive.ContentProps = $props()
 </script>
 
 <TabsPrimitive.Content
+  bind:ref
+  {value}
+  data-slot="tabs-content"
   class={cn(
     'flex-1 mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 overflow-y-auto',
     className
   )}
-  {value}
-  {...$$restProps}
 >
-  <slot />
+  {@render children?.()}
 </TabsPrimitive.Content>

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

@@ -1,17 +1,4 @@
-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 {};
+declare const TabsContent: import("svelte").Component<TabsPrimitive.ContentProps, {}, "ref">;
+type TabsContent = ReturnType<typeof TabsContent>;
+export default TabsContent;

package/dist/tabs/tabs-list.svelte

@@ -1,15 +1,16 @@
-<script>import { Tabs as TabsPrimitive } from "bits-ui";
-import { cn } from "../utils.js";
-let className = void 0;
-export { className as class };
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+  let { ref = $bindable(null), class: className, children }: TabsPrimitive.ListProps = $props()
 </script>
 
 <TabsPrimitive.List
+  bind:ref
+  data-slot="tabs-list"
   class={cn(
     'bg-neutral-100 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 />
+  {@render children?.()}
 </TabsPrimitive.List>

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

@@ -1,17 +1,4 @@
-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 {};
+declare const TabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
+type TabsList = ReturnType<typeof TabsList>;
+export default TabsList;

package/dist/tabs/tabs-trigger.svelte

@@ -1,18 +1,22 @@
-<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 lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    value
+  }: TabsPrimitive.TriggerProps = $props()
 </script>
 
 <TabsPrimitive.Trigger
+  bind:ref
+  {value}
+  data-slot="tabs-trigger"
   class={cn(
     '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 />
+  {@render children?.()}
 </TabsPrimitive.Trigger>

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

@@ -1,15 +1,4 @@
-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 {};
+declare const TabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
+type TabsTrigger = ReturnType<typeof TabsTrigger>;
+export default TabsTrigger;

package/dist/tabs/tabs.svelte

@@ -1,14 +1,19 @@
-<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 lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    class: className,
+    children
+  }: TabsPrimitive.RootProps = $props()
 </script>
 
 <TabsPrimitive.Root
+  bind:ref
   bind:value
+  data-slot="tabs"
   class={cn('flex flex-col flex-1 min-h-0', className)}
-  {...$$restProps}
 >
-  <slot />
+  {@render children?.()}
 </TabsPrimitive.Root>

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

@@ -1,17 +1,4 @@
-import { SvelteComponent } from "svelte";
 import { Tabs as TabsPrimitive } from 'bits-ui';
-declare const __propDef: {
-    props: TabsPrimitive.Props;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TabsProps = typeof __propDef.props;
-export type TabsEvents = typeof __propDef.events;
-export type TabsSlots = typeof __propDef.slots;
-export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
-}
-export {};
+declare const Tabs: import("svelte").Component<TabsPrimitive.RootProps, {}, "value" | "ref">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/tooltip/index.d.ts

@@ -1,5 +1,7 @@
 import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Trigger from './tooltip-trigger.svelte';
 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 };
+declare const Root: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
+declare const Provider: import("svelte").Component<TooltipPrimitive.ProviderProps, {}, "">;
+declare const Portal: import("svelte").Component<TooltipPrimitive.PortalProps, {}, "">;
+export { Root, Trigger, Content, Provider, Portal, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal };

package/dist/tooltip/index.js

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

package/dist/tooltip/tooltip-content.svelte

@@ -1,25 +1,44 @@
-<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 lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 0,
+    side = 'top',
+    children,
+    arrowClasses
+  }: TooltipPrimitive.ContentProps & {
+    arrowClasses?: string
+  } = $props()
 </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>
+<TooltipPrimitive.Portal>
+  <TooltipPrimitive.Content
+    bind:ref
+    data-slot="tooltip-content"
+    {sideOffset}
+    {side}
+    class={cn(
+      'bg-neutral-700 text-white-80 z-50 rounded-md px-3 py-2 text-base font-medium shadow-md',
+      className
+    )}
+  >
+    {@render children?.()}
+    <TooltipPrimitive.Arrow>
+      {#snippet child({ props })}
+        <div
+          class={cn(
+            'bg-primary z-50 size-2.5 rotate-45 rounded-[2px]',
+            'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
+            'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
+            'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
+            'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
+            arrowClasses
+          )}
+          {...props}
+        ></div>
+      {/snippet}
+    </TooltipPrimitive.Arrow>
+  </TooltipPrimitive.Content>
+</TooltipPrimitive.Portal>

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

@@ -1,17 +1,7 @@
-import { SvelteComponent } from "svelte";
 import { Tooltip as TooltipPrimitive } from 'bits-ui';
-declare const __propDef: {
-    props: TooltipPrimitive.ContentProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type $$ComponentProps = TooltipPrimitive.ContentProps & {
+    arrowClasses?: string;
 };
-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 {};
+declare const TooltipContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;

package/dist/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui'
+  let { ref = $bindable(null), children }: TooltipPrimitive.TriggerProps = $props()
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger">
+{@render children?.()}
+</TooltipPrimitive.Trigger>

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

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipTrigger: import("svelte").Component<TooltipPrimitive.TriggerProps, {}, "ref">;
+type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+export default TooltipTrigger;

package/dist/tw.theme.d.ts

@@ -120,18 +120,11 @@ declare namespace _default {
                 400: string;
                 500: string;
             };
-            namespace banner {
-                export let sandbox: string;
-                let warning_1: string;
-                export { warning_1 as warning };
-                let danger_1: string;
-                export { danger_1 as danger };
-            }
         }
         namespace boxShadow {
             export let active: string;
-            let warning_2: string;
-            export { warning_2 as warning };
+            let warning_1: string;
+            export { warning_1 as warning };
         }
         namespace letterSpacing {
             let tightest: string;

package/dist/tw.theme.js

@@ -123,11 +123,6 @@ export default {
         300: 'rgba(136, 74, 190, 0.3)',
         400: 'rgba(136, 74, 190, 0.4)',
         500: '#884ABE'
-      },
-      banner: {
-        sandbox: '#D2F7CB',
-        warning: '#A04A12',
-        danger: '#B32530',
       }
     },