@invopop/popui 0.1.2 → 0.1.3-6.beta.1

package/dist/svg/IconOrder.svelte.d.ts

@@ -0,0 +1,20 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IconOrder: $$__sveltets_2_IsomorphicComponent<{
+    classes?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconOrder = InstanceType<typeof IconOrder>;
+export default IconOrder;

package/dist/svg/IconPayment.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  export let classes = ''
+</script>
+
+<svg class={classes} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 97 117">
+  <g filter="url(#a)">
+    <foreignObject width="97" height="119" x="0" y="-2">
+      <div style="backdrop-filter:blur(10px);clip-path:url(#b);height:100%;width:100%"></div>
+    </foreignObject>
+    <g data-figma-bg-blur-radius="20">
+      <rect width="57" height="79" x="20" y="18" fill="#fff" rx="6" />
+      <rect width="57" height="79" x="20" y="18" fill="#169958" fill-opacity=".02" rx="6" />
+      <rect
+        width="56.2"
+        height="78.2"
+        x="20.4"
+        y="18.4"
+        stroke="#169958"
+        stroke-opacity=".6"
+        stroke-width=".8"
+        rx="5.6"
+      />
+    </g>
+    <rect
+      width="50.4"
+      height="72.4"
+      x="23.3"
+      y="21.3"
+      stroke="#018551"
+      stroke-opacity=".2"
+      stroke-width=".6"
+      rx="3.7"
+    />
+    <rect width="19" height="2" x="28" y="45" fill="#018551" rx="1" />
+    <rect width="15" height="2" x="28" y="68" fill="#018551" rx="1" />
+    <rect width="10" height="2" x="59" y="50" fill="#018551" rx="1" />
+    <rect width="12" height="2" x="57" y="73" fill="#018551" rx="1" />
+    <rect width="14" height="2" x="55" y="54" fill="#018551" rx="1" />
+    <rect width="14" height="2" x="55" y="77" fill="#018551" rx="1" />
+    <rect width="10" height="2" x="59" y="58" fill="#018551" rx="1" />
+    <rect width="12" height="2" x="57" y="62" fill="#018551" rx="1" />
+    <rect width="8" height="2" x="61" y="81" fill="#018551" rx="1" />
+    <rect width="16" height="2" x="28" y="50" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="12" height="2" x="28" y="73" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="11" height="2" x="28" y="54" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="16" height="2" x="28" y="77" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="14" height="2" x="28" y="58" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="18" height="2" x="28" y="81" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="16" height="2" x="28" y="62" fill="#018551" fill-opacity=".2" rx="1" />
+    <g clip-path="url(#c)">
+      <path
+        fill="#018551"
+        d="M30.44 31.605c.83-.426 1.794-.433 2.715-.023l2.164.99c.408.184.721.518.88.939.049.132.076.268.091.404l2.335-1.054a1.684 1.684 0 0 1 2.226.842 1.685 1.685 0 0 1-.842 2.226l-5.282 2.383a2.902 2.902 0 0 1-2.088.12l-2.76-.882a1.362 1.362 0 0 1-1.323 1.06h-.195C27.611 38.61 27 38 27 37.25V33.36c0-.75.61-1.361 1.361-1.361h.195c.363 0 .692.145.936.378.267-.312.58-.583.947-.772Zm2.235 1.042c-.596-.265-1.185-.267-1.703-.002a2.1 2.1 0 0 0-1.055 1.381v2.313l3.077.983c.413.133.857.107 1.252-.071l5.282-2.384a.512.512 0 0 0 .27-.288.518.518 0 0 0-.695-.654c-.027.013-3.848 1.74-3.89 1.755a1.686 1.686 0 0 1-1.288-.043l-1.531-.697a.583.583 0 1 1 .481-1.062l1.532.696a.516.516 0 1 0 .428-.94l-2.16-.987ZM35.75 25a2.92 2.92 0 0 1 2.917 2.917 2.92 2.92 0 0 1-2.917 2.916 2.92 2.92 0 0 1-2.917-2.916A2.92 2.92 0 0 1 35.75 25Zm0 1.75a.583.583 0 0 0-.583.583V28.5a.583.583 0 1 0 1.166 0v-1.167a.583.583 0 0 0-.583-.583Z"
+      />
+    </g>
+  </g>
+  <defs>
+    <clipPath id="b" transform="translate(0 2)">
+      <rect width="57" height="79" x="20" y="18" rx="6" />
+    </clipPath>
+    <clipPath id="c">
+      <path fill="#fff" d="M27 25h14v14H27z" />
+    </clipPath>
+    <filter
+      id="a"
+      width="97"
+      height="119"
+      x="0"
+      y="0"
+      color-interpolation-filters="sRGB"
+      filterUnits="userSpaceOnUse"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        result="hardAlpha"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+      />
+      <feOffset dy="2" />
+      <feGaussianBlur stdDeviation="10" />
+      <feColorMatrix values="0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0.04 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_9631_18244" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_9631_18244" result="shape" />
+    </filter>
+  </defs>
+</svg>

package/dist/svg/IconPayment.svelte.d.ts

@@ -0,0 +1,20 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IconPayment: $$__sveltets_2_IsomorphicComponent<{
+    classes?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconPayment = InstanceType<typeof IconPayment>;
+export default IconPayment;

package/dist/table/table-body.svelte

@@ -8,6 +8,10 @@
   }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props()
 </script>
 
-<tbody bind:this={ref} data-slot="table-body" class={cn('[&_tr:hover]:bg-neutral-50', className)}>
+<tbody
+  bind:this={ref}
+  data-slot="table-body"
+  class={cn('[&_tr:hover]:bg-background-default-secondary', className)}
+>
   {@render children?.()}
 </tbody>

package/dist/table/table-cell.svelte

@@ -7,7 +7,8 @@
   let {
     ref = $bindable(null),
     class: className,
-    children
+    children,
+    ...restProps
   }: WithElementRef<HTMLTdAttributes> = $props()
 </script>
 
@@ -15,9 +16,10 @@
   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-[9px] [&:has([role=menu])]:py-0 [&:has([data-uuid-copy])]:py-0 pl-3 pr-3 align-middle text-foreground font-normal text-base [&:has([role=menu])]:pl-1 relative z-1 [&:has([role=menu])]:bg-white [&:has([type=checkbox])]:bg-white',
     className
   )}
+  {...restProps}
   onclick={bubble('click')}
   onkeydown={bubble('keydown')}
 >

package/dist/table/table-footer.svelte

@@ -11,7 +11,7 @@
 <tfoot
   bind:this={ref}
   data-slot="table-footer"
-  class={cn('bg-muted/50 text-primary-foreground font-medium', className)}
+  class={cn('bg-muted/50 text-foreground font-medium', className)}
 >
   {@render children?.()}
 </tfoot>

package/dist/table/table-head.svelte

@@ -4,7 +4,8 @@
   let {
     ref = $bindable(null),
     class: className,
-    children
+    children,
+    ...restProps
   }: WithElementRef<HTMLThAttributes> = $props()
 </script>
 
@@ -12,9 +13,10 @@
   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',
+    'text-foreground-default-secondary text-base font-normal text-left align-middle [&:has([role=checkbox])]:pr-0 px-3 hover:bg-background-default-secondary transition-colors',
     className
   )}
+  {...restProps}
 >
   {@render children?.()}
 </th>

package/dist/table/table-header.svelte

@@ -15,7 +15,7 @@
 <thead
   bind:this={ref}
   data-slot="table-header"
-  class={cn('[&_tr]:border-b [&_tr]:border-neutral-100 bg-white', className)}
+  class={cn('[&_tr]:border-b [&_tr]:border-border bg-background', className)}
   onclick={bubble('click')}
   onkeydown={bubble('keydown')}
 >

package/dist/table/table-row.svelte

@@ -10,7 +10,8 @@
     oncontextmenu,
     onkeydown,
     onmouseover,
-    onfocus
+    onfocus,
+    ...restProps
   }: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props()
 </script>
 
@@ -18,7 +19,7 @@
   bind:this={ref}
   data-slot="table-row"
   class={cn(
-    'data-[state=selected]:bg-neutral-50 data-[state=checked]:bg-workspace-accent-50 transition-colors',
+    'group/row data-[state=selected]:bg-background-selected data-[state=checked]:bg-background-selected transition-colors h-10 data-[state=selected]:hover:bg-background-selected data-[state=checked]:hover:bg-background-selected',
     className
   )}
   {oncontextmenu}
@@ -26,6 +27,7 @@
   {onkeydown}
   {onmouseover}
   {onfocus}
+  {...restProps}
 >
   {@render children?.()}
 </tr>

package/dist/table/table.svelte

@@ -8,8 +8,8 @@
   }: WithElementRef<HTMLTableAttributes> = $props()
 </script>
 
-<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)}>
+<div data-slot="table-container" class="relative w-full">
+  <table bind:this={ref} data-slot="table" class={cn('caption-bottom', className)}>
     {@render children?.()}
   </table>
 </div>

package/dist/tabs/tabs-list.svelte

@@ -1,14 +1,20 @@
 <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()
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant
+  }: TabsPrimitive.ListProps & { variant?: 'md' | 'lg' } = $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',
+    'bg-background-default-tertiary text-base text-foreground inline-flex items-center justify-center p-0.5 w-full',
+    variant === 'lg' ? 'rounded-lg h-8' : 'rounded-md h-7',
     className
   )}
 >

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

@@ -1,4 +1,7 @@
 import { Tabs as TabsPrimitive } from 'bits-ui';
-declare const TabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
+type $$ComponentProps = TabsPrimitive.ListProps & {
+    variant?: 'md' | 'lg';
+};
+declare const TabsList: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type TabsList = ReturnType<typeof TabsList>;
 export default TabsList;

package/dist/tabs/tabs-trigger.svelte

@@ -5,8 +5,9 @@
     ref = $bindable(null),
     class: className,
     children,
-    value
-  }: TabsPrimitive.TriggerProps = $props()
+    value,
+    variant
+  }: TabsPrimitive.TriggerProps & { variant?: 'md' | 'lg' } = $props()
 </script>
 
 <TabsPrimitive.Trigger
@@ -14,7 +15,8 @@
   {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-background inline-flex items-center justify-center whitespace-nowrap 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 h-full',
+    variant === 'lg' ? 'rounded-md' : 'rounded',
     className
   )}
 >

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

@@ -1,4 +1,7 @@
 import { Tabs as TabsPrimitive } from 'bits-ui';
-declare const TabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
+type $$ComponentProps = TabsPrimitive.TriggerProps & {
+    variant?: 'md' | 'lg';
+};
+declare const TabsTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type TabsTrigger = ReturnType<typeof TabsTrigger>;
 export default TabsTrigger;