@invopop/popui 0.1.3 → 0.1.4-beta.1

package/dist/index.js

@@ -13,15 +13,15 @@ import ButtonUuidCopy from './ButtonUuidCopy.svelte'
 import CardCheckbox from './CardCheckbox.svelte'
 import CardRelation from './CardRelation.svelte'
 import CompanySelector from './CompanySelector.svelte'
-import CounterWorkflow from './CounterWorkflow.svelte'
+import CounterWidget from './CounterWidget.svelte'
 import DataListItem from './DataListItem.svelte'
 import DatePicker from './DatePicker.svelte'
 import DrawerContext from './DrawerContext.svelte'
 import DrawerContextItem from './DrawerContextItem.svelte'
 import DrawerContextSeparator from './DrawerContextSeparator.svelte'
 import DropdownSelect from './DropdownSelect.svelte'
-import EmptyStateIcon from './EmptyStateIcon.svelte'
-import EmptyStateIllustration from './EmptyStateIllustration.svelte'
+import DropdownSelectGroup from './DropdownSelectGroup.svelte'
+import EmptyState from './EmptyState.svelte'
 import FeedEvents from './FeedEvents.svelte'
 import FeedIconEvent from './FeedIconEvent.svelte'
 import FeedIconStatus from './FeedIconStatus.svelte'
@@ -42,8 +42,8 @@ import MenuItem from './MenuItem.svelte'
 import MenuItemCollapsible from './MenuItemCollapsible.svelte'
 import Notification from './Notification.svelte'
 import ProfileAvatar from './ProfileAvatar.svelte'
-import ProfileSelector from './ProfileSelector.svelte'
-import SectionLayout from './SectionLayout.svelte'
+import ProgressBar from './ProgressBar.svelte'
+import ProgressBarCircle from './ProgressBarCircle.svelte'
 import SeparatorHorizontal from './SeparatorHorizontal.svelte'
 import ShortcutWrapper from './ShortcutWrapper.svelte'
 import StatusLabel from './StatusLabel.svelte'
@@ -60,15 +60,25 @@ import {
 } from './table'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs'
 import TagBeta from './TagBeta.svelte'
+import TagProgress from './TagProgress.svelte'
 import TagSearch from './TagSearch.svelte'
 import TagStatus from './TagStatus.svelte'
 import TitleMain from './TitleMain.svelte'
 import TitleSection from './TitleSection.svelte'
+import { Toaster } from './sonner'
 import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
-
 import UuidCopy from './UuidCopy.svelte'
-import twTheme from './tw.theme.js'
 import { resolveIcon, getCountryName, getStatusType } from './helpers.js'
+import { buttonVariants } from './button/button.svelte' // Ensure button styles are included
+import {
+  DataTable,
+  DataTableToolbar,
+  DataTableViewOptions,
+  FlexRender,
+  createSvelteTable,
+  renderComponent,
+  renderSnippet
+} from './data-table'
 
 export {
   AlertDialog,
@@ -86,15 +96,15 @@ export {
   CardCheckbox,
   CardRelation,
   CompanySelector,
-  CounterWorkflow,
+  CounterWidget,
   DataListItem,
   DatePicker,
   DrawerContext,
   DrawerContextItem,
   DrawerContextSeparator,
   DropdownSelect,
-  EmptyStateIcon,
-  EmptyStateIllustration,
+  DropdownSelectGroup,
+  EmptyState,
   FeedEvents,
   FeedIconEvent,
   FeedIconStatus,
@@ -115,8 +125,8 @@ export {
   MenuItemCollapsible,
   Notification,
   ProfileAvatar,
-  ProfileSelector,
-  SectionLayout,
+  ProgressBar,
+  ProgressBarCircle,
   SeparatorHorizontal,
   ShortcutWrapper,
   StatusLabel,
@@ -134,16 +144,25 @@ export {
   TabsList,
   TabsTrigger,
   TagBeta,
+  TagProgress,
   TagSearch,
   TagStatus,
   TitleMain,
   TitleSection,
+  Toaster,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
   UuidCopy,
-  twTheme,
   resolveIcon,
   getCountryName,
-  getStatusType
+  getStatusType,
+  buttonVariants,
+  DataTable,
+  DataTableToolbar,
+  DataTableViewOptions,
+  FlexRender,
+  createSvelteTable,
+  renderComponent,
+  renderSnippet
 }

package/dist/range-calendar/range-calendar-cell.svelte

@@ -11,7 +11,7 @@
 <RangeCalendarPrimitive.Cell
   bind:ref
   class={cn(
-    'size-(--cell-size) dark:[&:has([data-range-start])]:hover:bg-accent dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:bg-accent dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-selected])]:bg-accent relative p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-r-md [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:has([data-range-end])]:rounded-r-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-l-md last:[&:has([data-range-middle])]:rounded-r-md [&:has([data-range-start])]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md',
+    'size-(--cell-size) [&:has([data-range-middle]:not([data-outside-month]))]:bg-background-default-secondary [&:has([data-selected]:not([data-outside-month]))]:bg-background-default-secondary relative p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-r-md [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:has([data-range-end])]:rounded-r-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-l-md last:[&:has([data-range-middle])]:rounded-r-md [&:has([data-range-start])]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md',
     className
   )}
   {...restProps}

package/dist/range-calendar/range-calendar-day.svelte

@@ -13,28 +13,27 @@
   bind:ref
   class={cn(
     buttonVariants({ variant: 'ghost' }),
-    'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-normal leading-none',
+    'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-medium leading-none rounded-lg text-foreground!',
     // today
-    '[&[data-today]:not([data-selected])]:border-b [&[data-today]:not([data-selected])]:border-workspace-accent [&[data-today]:not([data-selected])]:rounded-none',
+    '[&[data-today]:not([data-selected]):not([data-outside-month])]:border-b [&[data-today]:not([data-selected]):not([data-outside-month])]:border-background-accent [&[data-today]:not([data-selected]):not([data-outside-month])]:rounded-none',
     // range Start
-    'data-[range-start]:bg-workspace-accent data-[range-start]:text-white data-[range-start]:font-semibold data-[range-start]:shadow-active',
+    'data-[range-start]:bg-background-accent data-[range-start]:text-foreground-inverse! data-[range-start]:font-semibold data-[range-start]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
     // range middle
-    'data-[range-middle]:rounded-none data-[range-middle]:bg-neutral-100',
+    'data-[range-middle]:rounded-none data-[range-middle]:bg-background-default-secondary',
     // range End
-    'data-[range-end]:bg-workspace-accent data-[range-end]:text-white data-[range-end]:font-semibold data-[range-end]:shadow-active',
-    // Outside months
-    '[&[data-outside-month]]:text-transparent [&[data-outside-month]]:bg-transparent [&[data-outside-month]]:shadow-none [&[data-outside-month]:not([data-selected])]:pointer-events-none',
+    'data-[range-end]:bg-background-accent data-[range-end]:text-foreground-inverse! data-[range-end]:font-semibold data-[range-end]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
+    // Outside months - must come after range styles to override
+    '[&[data-outside-month]]:!text-transparent [&[data-outside-month]]:!bg-transparent [&[data-outside-month]]:!shadow-none [&[data-outside-month]:not([data-selected])]:pointer-events-none',
     // Disabled
-    'data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'data-[disabled]:text-foreground-default-tertiary data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
     // Unavailable
     'data-[unavailable]:line-through',
-    'dark:data-[range-middle]:hover:bg-accent/0',
-    // hover
-    'dark:hover:text-accent-foreground',
     // focus
     'focus:border-ring focus:ring-ring/50 focus:relative',
+    // Default text color
+    'text-foreground-default-primary',
     // inner spans
-    '[&>span]:text-xs [&>span]:opacity-70',
+    '[&>span]:text-sm [&>span]:opacity-70',
     className
   )}
   {...restProps}

package/dist/range-calendar/range-calendar-head-cell.svelte

@@ -11,7 +11,7 @@
 <RangeCalendarPrimitive.HeadCell
   bind:ref
   class={cn(
-    'text-[#989AA4] w-(--cell-size) h-(--cell-size) text-sm font-normal border-b border-neutral-100 flex items-center justify-center',
+    'text-foreground-default-tertiary w-(--cell-size) h-(--cell-size) text-sm font-normal border-b border-border flex items-center justify-center',
     className
   )}
   {...restProps}

package/dist/range-calendar/range-calendar-header.svelte

@@ -11,7 +11,7 @@
 <RangeCalendarPrimitive.Header
   bind:ref
   class={cn(
-    'h-11 flex w-full items-center justify-center gap-1.5 text-base font-medium pt-2 pb-3',
+    'h-11 flex w-full items-center justify-center gap-1.5 text-base font-medium pt-2 pb-3 text-foreground',
     className
   )}
   {...restProps}

package/dist/range-calendar/range-calendar-month-select.svelte

@@ -33,7 +33,7 @@
         {/each}
       </select>
       <span
-        class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
+        class="[&>svg]:text-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
         aria-hidden="true"
       >
         {monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}

package/dist/range-calendar/range-calendar-next-button.svelte

@@ -16,13 +16,13 @@
 </script>
 
 {#snippet Fallback()}
-  <Icon src={ChevronRight} class="size-4" />
+  <Icon src={ChevronRight} class="size-4 shrink-0" />
 {/snippet}
 <RangeCalendarPrimitive.NextButton
   bind:ref
   class={cn(
-    buttonVariants({ variant, size: 'icon-sm' }),
-    'select-none disabled:opacity-50 rtl:rotate-180',
+    buttonVariants({ variant, size: 'sm' }),
+    'size-6 group select-none disabled:opacity-50 rtl:rotate-180',
     className
   )}
   children={children || Fallback}

package/dist/range-calendar/range-calendar-prev-button.svelte

@@ -16,13 +16,13 @@
 </script>
 
 {#snippet Fallback()}
-  <Icon src={ChevronLeft} class="size-4" />
+  <Icon src={ChevronLeft} class="size-4 shrink-0" />
 {/snippet}
 <RangeCalendarPrimitive.PrevButton
   bind:ref
   class={cn(
-    buttonVariants({ variant, size: 'icon-sm' }),
-    'select-none disabled:opacity-50 rtl:rotate-180',
+    buttonVariants({ variant, size: 'sm' }),
+    'size-6 group select-none disabled:opacity-50 rtl:rotate-180',
     className
   )}
   children={children || Fallback}

package/dist/range-calendar/range-calendar.svelte

@@ -44,7 +44,7 @@
   {weekdayFormat}
   {disableDaysOutsideMonth}
   class={cn(
-    'bg-white group/calendar px-3 pb-3 pt-2 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+    'bg-background group/calendar px-3 pb-2 pt-1 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
     className
   )}
   {locale}

package/dist/sonner/index.d.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

package/dist/sonner/index.js

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

package/dist/sonner/sonner.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner'
+  import { mode } from 'mode-watcher'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { Success, Failure, Info } from '@invopop/ui-icons'
+
+  let { ...restProps }: SonnerProps = $props()
+</script>
+
+<Sonner
+  theme={mode.current}
+  class="toaster group"
+  toastOptions={{
+    unstyled: true,
+    classes: {
+      toast:
+        'group toast bg-background-default-negative border-0 rounded-lg text-foreground-inverse flex gap-2 items-start pl-3 pr-2 py-2 w-[336px] [&>[data-content]]:flex-1',
+      title: 'font-medium text-base text-foreground-inverse',
+      description: 'font-normal text-base text-foreground-inverse-secondary',
+      actionButton:
+        'bg-background-selected-inverse rounded px-2 py-1 text-sm font-medium text-foreground-inverse hover:bg-background-selected-inverse-hover transition-colors',
+      closeButton: 'hidden'
+    }
+  }}
+  {...restProps}
+>
+  {#snippet successIcon()}
+    <Icon src={Success} class="size-4 mt-0.5" />
+  {/snippet}
+
+  {#snippet errorIcon()}
+    <Icon src={Failure} class="size-4 mt-0.5" />
+  {/snippet}
+
+  {#snippet infoIcon()}
+    <Icon src={Info} class="size-4 mt-0.5 text-icon-inverse" />
+  {/snippet}
+</Sonner>
+
+<style>
+  :global(.toaster) {
+    --width: 336px;
+  }
+</style>

package/dist/sonner/sonner.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+declare const Sonner: import("svelte").Component<SonnerProps, {}, "">;
+type Sonner = ReturnType<typeof Sonner>;
+export default Sonner;

package/dist/svg/CheckBadge.svelte

@@ -0,0 +1,18 @@
+<svg
+  width="26"
+  height="26"
+  viewBox="0 0 26 26"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="absolute top-[-16px] right-[-16px]"
+>
+  <path
+    d="M13 1C6.3835 1 1 6.3835 1 13C1 19.6165 6.3835 25 13 25C19.6165 25 25 19.6165 25 13C25 6.3835 19.6165 1 13 1Z"
+    fill="#169958"
+  />
+  <circle cx="13" cy="13" r="10" stroke="white" stroke-opacity="0.4" stroke-width="0.6" />
+  <path
+    d="M18.1078 9.82205C15.7021 11.6837 13.6627 14.2538 12.0477 17.4584C11.8808 17.7912 11.5495 17.9999 11.1884 17.9999C10.83 18.004 10.4922 17.7885 10.3253 17.4517C9.58119 15.9471 8.7491 14.7239 7.78243 13.7123C7.40457 13.3176 7.40586 12.6764 7.78632 12.2831C8.16418 11.8898 8.78016 11.8898 9.15932 12.2871C9.90083 13.063 10.5699 13.9413 11.182 14.9435C12.7853 12.1888 14.7199 9.92443 16.9509 8.19887C17.3805 7.8675 17.9888 7.9591 18.3084 8.40766C18.628 8.85488 18.5387 9.48934 18.1078 9.82205Z"
+    fill="white"
+  />
+</svg>

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

@@ -0,0 +1,26 @@
+export default CheckBadge;
+type CheckBadge = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CheckBadge: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/svg/IconDelivery.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="M34.973 26.556a2.14 2.14 0 0 1 2.138 2.138v.195h1.131c.465 0 .894.235 1.145.626l1.397 2.171c.142.22.217.476.217.737v1.716a2.14 2.14 0 0 1-2.139 2.138h-.43a1.948 1.948 0 0 1-1.905 1.556c-.938 0-1.723-.67-1.904-1.556h-2.218a1.948 1.948 0 0 1-1.905 1.556 1.947 1.947 0 0 1-1.918-1.63A2.14 2.14 0 0 1 27 34.138v-5.445a2.14 2.14 0 0 1 2.139-2.138h5.834ZM30.5 35.11a.778.778 0 0 0 0 1.556.778.778 0 0 0 0-1.556Zm6.027 0a.779.779 0 0 0 0 1.556.78.78 0 0 0 .779-.778.78.78 0 0 0-.779-.778Zm.584-3.5h2.237l-.943-1.466a.193.193 0 0 0-.163-.09h-1.13v1.556Z"
+      />
+    </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_17687" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_9631_17687" result="shape" />
+    </filter>
+  </defs>
+</svg>

package/dist/svg/IconDelivery.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 IconDelivery: $$__sveltets_2_IsomorphicComponent<{
+    classes?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconDelivery = InstanceType<typeof IconDelivery>;
+export default IconDelivery;