@invopop/popui 0.0.73 → 0.0.75-beta1

package/dist/CardCheckbox.svelte

@@ -1,25 +1,34 @@
-<script>import InputRadio from "./InputRadio.svelte";
+<script>import clsx from "clsx";
+import { Icon } from "@steeze-ui/svelte-icon";
+import InputRadio from "./InputRadio.svelte";
 export let id;
 export let title = "";
 export let description = "";
 export let checked = false;
+$:
+  styles = clsx(
+    { "border-workspace-accent shadow-active": checked },
+    { "border-neutral-200 hover:bg-neutral-100": !checked }
+  );
+export let icon = void 0;
 </script>
 
-<label
-  for={id}
-  class="{checked
-    ? 'border-workspace-accent shadow-active'
-    : 'border-neutral-200'} border rounded-lg w-full text-left cursor-pointer block"
->
+<label for={id} class="{styles} border rounded-lg w-full text-left cursor-pointer block">
   <div class="py-2 pr-2 pl-3 flex items-start justify-between">
-    <div class="flex flex-col space-y-0.5">
-      <span class="text-base text-neutral-800 font-medium">{title}</span>
-      {#if description}
-        <span class="text-sm text-neutral-500">{description}</span>
-      {:else}
-        <span class="text-sm text-neutral-300">No description</span>
+    <div class="flex space-x-2">
+      {#if icon}
+        <Icon src={icon} class="h-5 w-5 mt-0.5 text-neutral-800 flex-shrink-0" />
       {/if}
+      <div class="flex flex-col space-y-0.5">
+        <span class="text-base text-neutral-800 font-medium">{title}</span>
+        {#if description}
+          <span class="text-sm text-neutral-500">{description}</span>
+        {:else}
+          <span class="text-sm text-neutral-300">No description</span>
+        {/if}
+      </div>
     </div>
+
     <InputRadio {id} {checked} on:change />
   </div>
   {#if !!$$slots.footer}

package/dist/CardCheckbox.svelte.d.ts

@@ -1,10 +1,12 @@
 import { SvelteComponent } from "svelte";
+import { type IconSource } from '@steeze-ui/svelte-icon';
 declare const __propDef: {
     props: {
         id: any;
         title?: string | undefined;
         description?: string | undefined;
         checked?: boolean | undefined;
+        icon?: IconSource | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/dist/DrawerContext.svelte

@@ -25,7 +25,7 @@ function updateItem(event) {
 </script>
 
 <div
-  class="{widthClass} border border-neutral-200 py-1 rounded shadow-lg space-y-0.5 bg-white max-h-80 overflow-y-auto"
+  class="{widthClass} border border-neutral-200 py-1 rounded-md shadow-lg space-y-0.5 bg-white max-h-80 overflow-y-auto"
 >
   {#if searchable}
     <div class="px-2 mt-2 mb-1">

package/dist/DropdownSelect.svelte

@@ -32,6 +32,8 @@ $:
   selectedItems = items.filter((i) => i.selected);
 $:
   selectedColor = !multiple && items.find((i) => i.selected)?.color;
+$:
+  selectedIcon = !multiple && items.find((i) => i.selected)?.icon;
 $:
   selectedLabel = `${selectedItems[0]?.label || ""}${selectedItems.length > 1 ? " and more..." : ""}` || placeholder;
 $:
@@ -59,12 +61,14 @@ function handleSelected(e) {
     class="{styles} dropdown-select max-w-[420px] flex items-center border hover:border-neutral-300 rounded-md py-1.25 pl-2 gap-1 bg-white whitespace-nowrap"
     slot="trigger"
   >
-    {#if resolvedIcon && !selectedColor}
-      <Icon src={resolvedIcon} {iconTheme} class="h-4 w-4 text-neutral-500 flex-shrink-0" />
-    {/if}
     {#if selectedColor}
       <TagStatus dot status={selectedColor} />
+    {:else if selectedIcon}
+      <Icon src={selectedIcon} {iconTheme} class="h-4 w-4 text-neutral-500 flex-shrink-0" />
+    {:else if resolvedIcon}
+      <Icon src={resolvedIcon} {iconTheme} class="h-4 w-4 text-neutral-500 flex-shrink-0" />
     {/if}
+
     <span class="w-full pr-8 text-neutral-800 placeholder-neutral-800 text-base truncate">
       {selectedLabel}
     </span>

package/dist/ShortcutWrapper.svelte

@@ -1,6 +1,6 @@
 <div
-  class="bg-white-5 rounded border border-white-10 inline-flex items-center justify-center"
-  style="box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.15);"
+  class="h-4 w-4 bg-white-5 rounded border border-white-20 inline-flex items-center justify-center"
+  style="box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);"
 >
   <slot />
 </div>

package/dist/StepIconList.svelte

@@ -0,0 +1,45 @@
+<script>import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+export let icons = [];
+$:
+  maxItems = icons.length > 6 ? 5 : 6;
+$:
+  mainIcons = icons.slice(0, maxItems);
+$:
+  restIcons = icons.slice(maxItems + 1, icons.length);
+</script>
+
+<div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 items-center overflow-x-auto">
+  {#each mainIcons as icon, i (i)}
+    <Tooltip>
+      <TooltipTrigger>
+        <div
+          class="p-1.5 border rounded-md border-neutral-200 flex items-center space-x-1 bg-white text-neutral-800 flex-shrink-0"
+        >
+          <img src={icon.url} alt={icon.name} class="w-4 h-4" />
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>{icon.name}</TooltipContent>
+    </Tooltip>
+
+    {#if i < mainIcons.length - 1}
+      <div class="hidden sm:block h-px w-3 border border-neutral-200 mx-px flex-shrink-0" />
+    {/if}
+  {/each}
+  {#if restIcons.length}
+    <div class="hidden sm:block h-px w-3 border border-neutral-200 mx-px flex-shrink-0" />
+    <Tooltip>
+      <TooltipTrigger>
+        <div
+          class="flex items-center justify-center text-neutral-500 font-medium text-base h-7 w-7"
+        >
+          +{restIcons.length}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>
+        {#each restIcons as restIcon}
+          <div>{restIcon.name}</div>
+        {/each}
+      </TooltipContent>
+    </Tooltip>
+  {/if}
+</div>

package/dist/StepIconList.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { StepIcon } from './types.js';
+declare const __propDef: {
+    props: {
+        icons?: StepIcon[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StepIconListProps = typeof __propDef.props;
+export type StepIconListEvents = typeof __propDef.events;
+export type StepIconListSlots = typeof __propDef.slots;
+export default class StepIconList extends SvelteComponent<StepIconListProps, StepIconListEvents, StepIconListSlots> {
+}
+export {};

package/dist/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,19 @@
+<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { buttonVariants } from "../button/index.js";
+import { cn } from "../utils.js";
+let className = void 0;
+let destructive = false;
+export { className as class, destructive };
+$:
+  variant = destructive ? "destructive" : "primary";
+</script>
+
+<AlertDialogPrimitive.Action
+  class={cn(buttonVariants({ variant }), className)}
+  {...$$restProps}
+  on:click
+  on:keydown
+  let:builder
+>
+  <slot {builder} />
+</AlertDialogPrimitive.Action>

package/dist/alert-dialog/alert-dialog-action.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+declare const __propDef: {
+    props: {
+        asChild?: boolean | undefined;
+        el?: HTMLButtonElement | undefined;
+    } & import("svelte/elements").HTMLButtonAttributes & {
+        destructive: boolean;
+    };
+    slots: {
+        default: {
+            builder: {
+                readonly type: "button";
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "keydown">;
+            };
+        };
+    };
+    events: AlertDialogPrimitive.ActionEvents;
+};
+export type AlertDialogActionProps = typeof __propDef.props;
+export type AlertDialogActionEvents = typeof __propDef.events;
+export type AlertDialogActionSlots = typeof __propDef.slots;
+export default class AlertDialogAction extends SvelteComponent<AlertDialogActionProps, AlertDialogActionEvents, AlertDialogActionSlots> {
+}
+export {};

package/dist/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,16 @@
+<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { buttonVariants } from "../button/index.js";
+import { cn } from "../utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<AlertDialogPrimitive.Cancel
+  class={cn(buttonVariants({ variant: 'secondary' }), 'mt-2 sm:mt-0', className)}
+  {...$$restProps}
+  on:click
+  on:keydown
+  let:builder
+>
+  <slot {builder} />
+</AlertDialogPrimitive.Cancel>

package/dist/alert-dialog/alert-dialog-cancel.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+declare const __propDef: {
+    props: AlertDialogPrimitive.CancelProps;
+    slots: {
+        default: {
+            builder: {
+                readonly type: "button";
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "keydown">;
+            };
+        };
+    };
+    events: AlertDialogPrimitive.CancelEvents;
+};
+export type AlertDialogCancelProps = typeof __propDef.props;
+export type AlertDialogCancelEvents = typeof __propDef.events;
+export type AlertDialogCancelSlots = typeof __propDef.slots;
+export default class AlertDialogCancel extends SvelteComponent<AlertDialogCancelProps, AlertDialogCancelEvents, AlertDialogCancelSlots> {
+}
+export {};

package/dist/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,23 @@
+<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import * as AlertDialog from "./index.js";
+import { cn, flyAndScale } from "../utils.js";
+export let transition = flyAndScale;
+export let transitionConfig = void 0;
+let className = void 0;
+export { className as class };
+</script>
+
+<AlertDialog.Portal>
+  <AlertDialog.Overlay />
+  <AlertDialogPrimitive.Content
+    {transition}
+    {transitionConfig}
+    class={cn(
+      'bg-white fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-5 border pt-3 px-4 pb-4 sm:rounded-lg md:w-full',
+      className
+    )}
+    {...$$restProps}
+  >
+    <slot />
+  </AlertDialogPrimitive.Content>
+</AlertDialog.Portal>

package/dist/alert-dialog/alert-dialog-content.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+declare const __propDef: {
+    props: AlertDialogPrimitive.ContentProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertDialogContentProps = typeof __propDef.props;
+export type AlertDialogContentEvents = typeof __propDef.events;
+export type AlertDialogContentSlots = typeof __propDef.slots;
+export default class AlertDialogContent extends SvelteComponent<AlertDialogContentProps, AlertDialogContentEvents, AlertDialogContentSlots> {
+}
+export {};

package/dist/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,12 @@
+<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { cn } from "../utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<AlertDialogPrimitive.Description
+  class={cn('text-neutral-500 text-base', className)}
+  {...$$restProps}
+>
+  <slot />
+</AlertDialogPrimitive.Description>

package/dist/alert-dialog/alert-dialog-description.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+declare const __propDef: {
+    props: AlertDialogPrimitive.DescriptionProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertDialogDescriptionProps = typeof __propDef.props;
+export type AlertDialogDescriptionEvents = typeof __propDef.events;
+export type AlertDialogDescriptionSlots = typeof __propDef.slots;
+export default class AlertDialogDescription extends SvelteComponent<AlertDialogDescriptionProps, AlertDialogDescriptionEvents, AlertDialogDescriptionSlots> {
+}
+export {};

package/dist/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,11 @@
+<script>import { cn } from "../utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<div
+  class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3', className)}
+  {...$$restProps}
+>
+  <slot />
+</div>

package/dist/alert-dialog/alert-dialog-footer.svelte.d.ts

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

package/dist/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,8 @@
+<script>import { cn } from "../utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<div class={cn('flex flex-col space-y-1 text-center sm:text-left', className)} {...$$restProps}>
+  <slot />
+</div>

package/dist/alert-dialog/alert-dialog-header.svelte.d.ts

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

package/dist/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,17 @@
+<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { fade } from "svelte/transition";
+import { cn } from "../utils.js";
+let className = void 0;
+export let transition = fade;
+export let transitionConfig = {
+  duration: 150
+};
+export { className as class };
+</script>
+
+<AlertDialogPrimitive.Overlay
+  {transition}
+  {transitionConfig}
+  class={cn('bg-neutral-800/30 fixed inset-0 z-50', className)}
+  {...$$restProps}
+/>

package/dist/alert-dialog/alert-dialog-overlay.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+declare const __propDef: {
+    props: AlertDialogPrimitive.OverlayProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AlertDialogOverlayProps = typeof __propDef.props;
+export type AlertDialogOverlayEvents = typeof __propDef.events;
+export type AlertDialogOverlaySlots = typeof __propDef.slots;
+export default class AlertDialogOverlay extends SvelteComponent<AlertDialogOverlayProps, AlertDialogOverlayEvents, AlertDialogOverlaySlots> {
+}
+export {};

package/dist/alert-dialog/alert-dialog-portal.svelte

@@ -0,0 +1,6 @@
+<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+</script>
+
+<AlertDialogPrimitive.Portal {...$$restProps}>
+  <slot />
+</AlertDialogPrimitive.Portal>

package/dist/alert-dialog/alert-dialog-portal.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+declare const __propDef: {
+    props: AlertDialogPrimitive.PortalProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertDialogPortalProps = typeof __propDef.props;
+export type AlertDialogPortalEvents = typeof __propDef.events;
+export type AlertDialogPortalSlots = typeof __propDef.slots;
+export default class AlertDialogPortal extends SvelteComponent<AlertDialogPortalProps, AlertDialogPortalEvents, AlertDialogPortalSlots> {
+}
+export {};

package/dist/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,10 @@
+<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { cn } from "../utils.js";
+let className = void 0;
+export let level = "h3";
+export { className as class };
+</script>
+
+<AlertDialogPrimitive.Title class={cn('text-lg font-semibold', className)} {level} {...$$restProps}>
+  <slot />
+</AlertDialogPrimitive.Title>

package/dist/alert-dialog/alert-dialog-title.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+declare const __propDef: {
+    props: AlertDialogPrimitive.TitleProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertDialogTitleProps = typeof __propDef.props;
+export type AlertDialogTitleEvents = typeof __propDef.events;
+export type AlertDialogTitleSlots = typeof __propDef.slots;
+export default class AlertDialogTitle extends SvelteComponent<AlertDialogTitleProps, AlertDialogTitleEvents, AlertDialogTitleSlots> {
+}
+export {};

package/dist/alert-dialog/index.d.ts

@@ -0,0 +1,13 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Portal from './alert-dialog-portal.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
+declare const Root: typeof AlertDialogPrimitive.Root;
+declare const Trigger: typeof AlertDialogPrimitive.Trigger;
+export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription };

package/dist/alert-dialog/index.js

@@ -0,0 +1,15 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Portal from './alert-dialog-portal.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
+const Root = AlertDialogPrimitive.Root;
+const Trigger = AlertDialogPrimitive.Trigger;
+export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, 
+//
+Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription };

package/dist/button/button.svelte

@@ -0,0 +1,20 @@
+<script>import { Button as ButtonPrimitive } from "bits-ui";
+import { buttonVariants } from "./index.js";
+import { cn } from "../utils.js";
+let className = void 0;
+export let variant = "default";
+export let size = "default";
+export let builders = [];
+export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+  {builders}
+  class={cn(buttonVariants({ variant, size, className }))}
+  type="button"
+  {...$$restProps}
+  on:click
+  on:keydown
+>
+  <slot />
+</ButtonPrimitive.Root>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+import { Button as ButtonPrimitive } from 'bits-ui';
+import { type Props } from './index.js';
+declare const __propDef: {
+    props: Props;
+    slots: {
+        default: {};
+    };
+    events: ButtonPrimitive.Events;
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/dist/button/index.d.ts

@@ -0,0 +1,60 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { Button as ButtonPrimitive } from 'bits-ui';
+import Root from './button.svelte';
+declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        primary: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: 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", {
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        primary: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        primary: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: 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", unknown, unknown, undefined>>;
+type Variant = VariantProps<typeof buttonVariants>['variant'];
+type Size = VariantProps<typeof buttonVariants>['size'];
+type Props = ButtonPrimitive.Props & {
+    variant?: Variant;
+    size?: Size;
+};
+type Events = ButtonPrimitive.Events;
+export { Root, type Props, type Events, type Variant, Root as Button, type Props as ButtonProps, type Events as ButtonEvents, buttonVariants };

package/dist/button/index.js

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+import Root from './button.svelte';
+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',
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            destructive: 'ring-danger-200 bg-danger-500 border border-danger-500 hover:bg-danger-600 hover:border-danger-600 active:bg-danger-700 active:border-danger-700 text-white',
+            outline: 'border-input bg-background hover:bg-accent hover:text-accent-foreground border',
+            primary: 'bg-workspace-accent-500 hover:bg-workspace-accent-600 active:bg-workspace-accent-700 text-white',
+            secondary: 'bg-neutral-100 border border-neutral-100 hover:bg-neutral-200 hover:border-neutral-200 active:bg-neutral-300 active:border-neutral-300',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+            link: 'text-primary underline-offset-4 hover:underline'
+        },
+        size: {
+            default: 'h-[30px] px-3 py-[5px]',
+            sm: 'h-9 rounded-md px-3',
+            lg: 'h-11 rounded-md px-8',
+            icon: 'h-10 w-10'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default'
+    }
+});
+export { Root, 
+//
+Root as Button, buttonVariants };