@invopop/popui 0.1.11 → 0.1.13

package/dist/AlertDialog.svelte

@@ -27,6 +27,7 @@
     children
   }: AlertDialogProps = $props()
 
+  let previousOpen = $state(open)
   let recentAction = $state(false)
 
   function cancel() {
@@ -46,17 +47,13 @@
   }
 
   $effect(() => {
-    if (!open) {
-      cancelByEsc()
+    // Only fire oncancel when transitioning from true to false (ESC or backdrop click)
+    if (previousOpen && !open && !recentAction) {
+      oncancel?.()
     }
+    previousOpen = open
   })
 
-  function cancelByEsc() {
-    if (recentAction) return
-
-    oncancel?.()
-  }
-
   function handleOpen(value: boolean) {
     if (value) {
       const focusEl = document.querySelector(

package/dist/BaseCard.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <button
-  class="rounded-lg bg-white hover:bg-neutral-100 focus:bg-neutral-200 disabled:bg-neutral-50 disabled:pointer-events-none border border-neutral-100 p-3 flex flex-col min-w-[298px] min-h-[126px] text-left"
+  class="cursor-pointer rounded-lg bg-white hover:bg-neutral-100 focus:bg-neutral-200 disabled:bg-neutral-50 disabled:pointer-events-none border border-neutral-100 p-3 flex flex-col min-w-[298px] min-h-[126px] text-left"
   disabled={type === 'soon'}
   {...rest}
   {onclick}
@@ -24,7 +24,7 @@
   <div class="flex flex-col items-start justify-center space-y-2 w-full">
     <div class="flex items-center justify-between w-full">
       <div class="rounded-md bg-white border border-neutral-100 p-1.5">
-        <img class="h-5 w-5 flex-shrink-0" src={imageUrl} alt={imageAlt} />
+        <img class="h-5 w-5 shrink-0" src={imageUrl} alt={imageAlt} />
       </div>
       <div class="flex items-center space-x-2">
         {#if enabled}

package/dist/BaseDropdown.svelte

@@ -51,7 +51,7 @@
 
 <div class="inline-flex" class:w-full={fullWidth} role="menu">
   <button
-    class="text-left"
+    class="cursor-pointer text-left"
     class:w-full={fullWidth}
     use:floatingRef
     {...rest}
@@ -61,7 +61,7 @@
   </button>
   {#if isOpen}
     <div
-      class="max-h-40 absolute z-[1001]"
+      class="max-h-40 absolute z-1001"
       use:portal
       use:floatingContent
       use:clickOutside

package/dist/Breadcrumbs.svelte

@@ -22,7 +22,7 @@
         </a>
       {:else if breadcrumb.copiable}
         <button
-          class={i < breadcrumbs.length - 1 ? 'text-neutral-400' : 'font-medium'}
+          class="cursor-pointer {i < breadcrumbs.length - 1 ? 'text-neutral-400' : 'font-medium'}"
           onclick={(e) => handleClick(e, breadcrumb.label)}
         >
           {breadcrumb.label}

package/dist/CardRelation.svelte

@@ -8,7 +8,10 @@
 </script>
 
 <div class="border border-neutral-100 rounded-lg">
-  <button class="pl-3 py-2 pr-2 flex items-center justify-between space-x-3 w-full" {onclick}>
+  <button
+    class="cursor-pointer pl-3 py-2 pr-2 flex items-center justify-between space-x-3 w-full"
+    {onclick}
+  >
     <div class="flex items-center space-x-1.5">
       {#if icon}
         <Icon src={icon} class="h-4 w-4 text-neutral-500" />

package/dist/DrawerContextItem.svelte

@@ -64,7 +64,7 @@
 
 <button
   bind:this={el}
-  class="w-full px-1 py-0.5 disabled:opacity-30 group"
+  class="cursor-pointer w-full px-1 py-0.5 disabled:opacity-30 group"
   disabled={item.disabled}
   onclick={handleClick}
 >

package/dist/DrawerContextWorkspace.svelte

@@ -29,7 +29,7 @@
 <div class="w-[300px] border border-neutral-200 rounded-md shadow-lg bg-white">
   <div class="max-h-[550px] overflow-hidden rounded-t-md">
     <button
-      class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 rounded-t-sm h-9 py-2 pl-2.5 pr-3 text-base font-medium text-neutral-800 w-full"
+      class="cursor-pointer flex items-center justify-between bg-neutral-50 border-b border-neutral-200 rounded-t-sm h-9 py-2 pl-2.5 pr-3 text-base font-medium text-neutral-800 w-full"
       onclick={() => {
         if (liveOpen) return
         liveOpen = true
@@ -66,7 +66,7 @@
       </div>
     {/if}
     <button
-      class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 h-9 py-2 pl-2.5 pr-3 text-base font-medium text-neutral-800 w-full"
+      class="cursor-pointer flex items-center justify-between bg-neutral-50 border-b border-neutral-200 h-9 py-2 pl-2.5 pr-3 text-base font-medium text-neutral-800 w-full"
       class:border-t={liveOpen}
       onclick={() => {
         if (sandboxOpen) return
@@ -108,7 +108,7 @@
   <ul class="px-1 space-y-1 bg-neutral-50 rounded-b border-t border-neutral-100 py-1">
     <li class="pl-1.5 py-1.5 pr-2 hover:bg-neutral-100 rounded-sm">
       <button
-        class="flex items-center justify-between w-full"
+        class="cursor-pointer flex items-center justify-between w-full"
         onclick={() => {
           onclick?.('add')
         }}

package/dist/FeedItemDetail.svelte

@@ -37,6 +37,7 @@
     <div class="px-3 py-2 text-sm text-neutral-500 flex items-center justify-between">
       <span>Logs</span>
       <button
+        class="cursor-pointer"
         aria-label="Toggle details"
         onclick={() => {
           open = !open

package/dist/GlobalSearch.svelte

@@ -39,7 +39,7 @@
 </script>
 
 <button
-  class="{styles} flex items-center border pl-1.5 py-1.5 pr-2 border-white-10 bg-neutral-800/10 rounded-md"
+  class="cursor-pointer {styles} flex items-center border pl-1.5 py-1.5 pr-2 border-white-10 bg-neutral-800/10 rounded-md"
   onclick={() => onOpen?.()}
 >
   <Icon src={Search} class="w-4 h-4 text-white-70" />

package/dist/MenuItem.svelte

@@ -106,7 +106,7 @@
     onmouseleave={handleBlur}
     onclick={handleClick}
     title={label}
-    class="{itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-md"
+    class="cursor-pointer {itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-md"
   >
     <span class="flex items-center space-x-2">
       {#if resolvedIcon}
@@ -118,6 +118,7 @@
     </span>
     {#if collapsable && !collapsedSidebar}
       <button
+        class="cursor-pointer"
         onclick={(e) => {
           e.stopPropagation()
           open = !open

package/dist/ProfileSelector.svelte

@@ -25,7 +25,7 @@
 </script>
 
 <button
-  class="{styles} text-white border border-transparent text-base flex items-center justify-between space-x-1 rounded text-left"
+  class="cursor-pointer {styles} text-white border border-transparent text-base flex items-center justify-between space-x-1 rounded text-left"
   {onclick}
 >
   <span class="flex items-center justify-between w-full space-x-2">

package/dist/TagSearch.svelte

@@ -28,7 +28,7 @@
   <span class="py-1 pr-2 text-workspace-accent tracking-normal">{label}</span>
   <button
     aria-label="Clear"
-    class="py-1 border-l border-workspace-accent-100 pl-1 text-neutral-500"
+    class="cursor-pointer py-1 border-l border-workspace-accent-100 pl-1 text-neutral-500"
     onclick={handleClear}
   >
     <svg

package/dist/button/button.svelte

@@ -3,7 +3,7 @@
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
   import { type VariantProps, tv } from 'tailwind-variants'
   export const buttonVariants = tv({
-    base: 'ring-workspace-accent-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center font-medium font-sans relative group tracking-tight rounded-md text-base text-neutral-800 box-border',
+    base: 'cursor-pointer ring-workspace-accent-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center font-medium font-sans relative group tracking-tight rounded-md text-base text-neutral-800 box-border',
     variants: {
       variant: {
         default: 'bg-white text-neutral-800 hover:bg-primary/90',

package/dist/button/button.svelte.d.ts

@@ -18,7 +18,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         icon: string;
         'icon-sm': string;
     };
-}, undefined, "ring-workspace-accent-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center font-medium font-sans relative group tracking-tight rounded-md text-base text-neutral-800 box-border", {
+}, undefined, "cursor-pointer ring-workspace-accent-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center font-medium font-sans relative group tracking-tight rounded-md text-base text-neutral-800 box-border", {
     variant: {
         default: string;
         destructive: string;
@@ -52,7 +52,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         icon: string;
         'icon-sm': string;
     };
-}, undefined, "ring-workspace-accent-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center font-medium font-sans relative group tracking-tight rounded-md text-base text-neutral-800 box-border", unknown, unknown, undefined>>;
+}, undefined, "cursor-pointer ring-workspace-accent-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center font-medium font-sans relative group tracking-tight rounded-md text-base text-neutral-800 box-border", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
 export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {

package/dist/table/table-cell.svelte

@@ -15,7 +15,7 @@
   bind:this={ref}
   data-slot="table-cell"
   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',
+    '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 z-1',
     className
   )}
   onclick={bubble('click')}

package/dist/tabs/tabs-trigger.svelte

@@ -14,7 +14,7 @@
   {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',
+    '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 cursor-pointer',
     className
   )}
 >

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "scripts": {
     "dev": "vite dev",
     "dev:clean": "npm run clean && vite dev",
     "clean": "rm -rf .svelte-kit node_modules/.vite node_modules/.cache",
+    "clean:ts": "rm -rf .svelte-kit/tsconfig.json .svelte-kit/types && svelte-kit sync",
     "build": "vite build && npm run package",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",