@invopop/popui 0.1.3 → 0.1.4-beta.2

package/dist/tooltip/tooltip-content.svelte

@@ -20,7 +20,7 @@
     {sideOffset}
     {side}
     class={cn(
-      'bg-neutral-700 text-white-80 z-50 rounded-md px-3 py-2 text-base font-medium shadow-md',
+      'bg-background-default-negative border border-border-inverse z-50 rounded-md px-2 py-1 text-sm font-medium text-foreground-inverse leading-5 tracking-tight shadow-md',
       className
     )}
   >
@@ -29,7 +29,7 @@
       {#snippet child({ props })}
         <div
           class={cn(
-            'bg-primary z-50 size-2.5 rotate-45 rounded-[2px]',
+            'bg-background-default-negative 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',

package/dist/types.d.ts

@@ -3,8 +3,8 @@ import type { IconSource } from '@steeze-ui/svelte-icon';
 import type { Snippet } from 'svelte';
 export type IconTheme = 'default' | 'solid' | 'mini';
 export type IconPosition = 'right' | 'left';
-export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'warning' | 'danger' | 'dark' | 'outline';
-export type StatusType = 'grey' | 'green' | 'yellow' | 'red' | 'orange' | 'blue' | 'purple' | 'empty';
+export type ButtonVariant = 'warning' | 'primary' | 'secondary' | 'danger' | 'dark' | 'outline' | 'ghost' | 'dark-ghost';
+export type StatusType = 'grey' | 'green' | 'yellow' | 'red' | 'orange' | 'blue' | 'purple' | 'olive' | 'teal' | 'crimson' | 'blueViolet' | 'steelBlue' | 'empty';
 export type AnyProp = string | number | object | boolean;
 export type SidebarIcon = {
     path: string;
@@ -12,11 +12,18 @@ export type SidebarIcon = {
     title: string;
     iconTheme: IconTheme;
 };
-export type Status = 'success' | 'warning' | 'error';
+export type Status = 'success' | 'warning' | 'error' | 'info' | 'neutral';
 export type SelectOption = {
     label: string;
     value: AnyProp;
 };
+export type DrawerGroup = {
+    label: string;
+    slug: string;
+    emptyIcon?: IconSource;
+    emptyTitle?: string;
+    emptyDescription?: string;
+};
 export type DrawerOption = SelectOption & {
     separator?: boolean;
     destructive?: boolean;
@@ -29,6 +36,10 @@ export type DrawerOption = SelectOption & {
     sandbox?: boolean;
     iconClass?: string;
     disabled?: boolean;
+    locked?: boolean;
+    groupBy?: string;
+    useAvatar?: boolean;
+    action?: Snippet<[DrawerOption]>;
 };
 export type Company = {
     id: string;
@@ -102,7 +113,6 @@ export type TabItem = {
     check?: boolean;
     warning?: boolean;
 };
-export type EmptyStateIcon = 'invoices' | 'contacts' | 'products' | 'pdf' | 'file' | 'no-results';
 export type DataListItem = {
     label: string;
     value: string;
@@ -153,12 +163,13 @@ export interface BaseButtonProps {
     type?: 'button' | 'submit' | 'reset' | null;
     variant?: ButtonVariant;
     disabled?: boolean;
-    small?: boolean;
-    big?: boolean;
+    size?: 'sm' | 'md' | 'lg';
     dangerIcon?: boolean;
     shortcut?: boolean;
     fullwidth?: boolean;
     notification?: boolean;
+    stackedLeft?: boolean;
+    stackedRight?: boolean;
     children?: Snippet;
     [key: string]: any;
     onclick?: (event: MouseEvent) => void;
@@ -169,14 +180,37 @@ export interface BaseCardProps {
     title?: string;
     description?: string;
     type?: 'default' | 'soon' | 'beta';
-    enabled?: boolean;
     footer?: Snippet;
     [key: string]: any;
     onclick?: (event: MouseEvent) => void;
 }
 export interface BaseCounterProps {
-    content: number;
-    variant?: 'default' | 'light' | 'dark';
+    value: number;
+    theme?: 'light' | 'navigation' | 'accent';
+}
+export interface CounterWidgetProps {
+    label: string;
+    current: number;
+    total: number;
+    resetDate?: string;
+    icon?: IconSource;
+    allowOverage?: boolean;
+}
+export interface ProgressBarProps {
+    percentage?: number;
+    current?: number;
+    total?: number;
+    allowOverage?: boolean;
+    warningPercentage?: number;
+}
+export interface ProgressBarCircleProps {
+    progress: number;
+    size: number;
+    variant?: 'default' | 'dark';
+}
+export interface TagProgressProps {
+    progress: number;
+    variant?: 'default' | 'dark';
 }
 export interface BaseDropdownProps {
     isOpen?: boolean;
@@ -189,7 +223,6 @@ export interface BaseDropdownProps {
 }
 export interface BaseFlagProps {
     country?: string;
-    width?: number;
 }
 export interface BaseTableProps {
     sortBy?: string;
@@ -248,6 +281,7 @@ export interface BaseTableHeaderOrderByProps {
     isActive?: boolean;
     sortDirection: TableSortBy;
     onOrderBy?: (direction: TableSortBy) => void;
+    onHide?: () => void;
 }
 export interface BaseTableRowProps {
     row: TableDataRow;
@@ -270,18 +304,24 @@ export interface BaseTableRowProps {
         action: AnyProp;
     }) => void;
 }
+export interface BreadcrumbProps {
+    breadcrumb: Breadcrumb;
+    isLast: boolean;
+    oncopied?: (label: string) => void;
+}
 export interface BreadcrumbsProps {
     breadcrumbs?: Breadcrumb[];
     oncopied?: (label: string) => void;
 }
+export type ButtonFileType = 'pdf' | 'xml' | 'png' | 'generic';
 export interface ButtonFileProps {
-    icon?: IconSource;
     name?: string;
     disabled?: boolean;
     date?: string;
-    iconColor?: StatusType;
+    fileType?: ButtonFileType;
     onPreview?: () => void;
     onDownload?: () => void;
+    class?: string;
     [key: string]: any;
 }
 export interface ButtonUuidCopyProps {
@@ -299,6 +339,7 @@ export interface CardCheckboxProps {
     description?: string;
     accentText?: string;
     checked?: boolean;
+    disabled?: boolean;
     icon?: IconSource | undefined;
     hideRadio?: boolean;
     footer?: Snippet;
@@ -317,10 +358,6 @@ export interface CompanySelectorProps {
     onAdd?: () => void;
     onSelect?: (company: Company | null) => void;
 }
-export interface CounterWorkflowProps {
-    content: number | string;
-    variant?: 'default' | 'transparent';
-}
 export interface DataListItemProps {
     label?: string;
     value?: string;
@@ -342,24 +379,21 @@ export interface DatePickerProps {
 export interface DrawerContextProps {
     items?: DrawerOption[];
     multiple?: boolean;
-    searchable?: boolean;
+    draggable?: boolean;
     widthClass?: string;
     onclick?: (value: AnyProp) => void;
     onselect?: (selected: DrawerOption[]) => void;
+    onreorder?: (items: DrawerOption[]) => void;
+    children?: Snippet;
+    groups?: DrawerGroup[];
 }
 export interface DrawerContextItemProps {
     multiple?: boolean;
     item: DrawerOption;
     scrollIfSelected?: boolean;
-    workspace?: boolean;
     onclick?: (value: AnyProp) => void;
     onchange?: (item: DrawerOption) => void;
 }
-export interface DrawerContextWorkspaceProps {
-    items?: DrawerOption[];
-    multiple?: boolean;
-    onclick?: (value: AnyProp) => void;
-}
 export interface DropdownSelectProps {
     value?: AnyProp;
     icon?: IconSource | string | undefined;
@@ -370,20 +404,18 @@ export interface DropdownSelectProps {
     fullWidth?: boolean;
     widthClass?: string;
     onSelect?: (value: AnyProp) => void;
+    stackLeft?: boolean;
+    stackRight?: boolean;
+    multipleLabel?: string;
 }
-export interface EmptyStateIconProps {
-    icon?: IconSource | undefined;
+export interface EmptyStateProps {
+    icon?: Snippet;
+    iconSource?: IconSource;
     title?: string;
     description?: string;
     check?: boolean;
     children?: Snippet;
 }
-export interface EmptyStateIllustrationProps {
-    icon?: EmptyStateIcon | undefined;
-    title?: string;
-    description?: string;
-    children?: Snippet;
-}
 export interface FeedEventsProps {
     events?: FeedEvent[];
 }
@@ -415,15 +447,13 @@ export interface FeedItemDetailProps {
     events?: FeedEvent[];
     idLabel?: string;
     onCopied?: (uuid: string) => void;
+    cancelable?: boolean;
+    onCancel?: () => void;
 }
 export interface FeedViewerProps {
     items?: FeedItemProps[];
     onView?: (slug: string) => void;
 }
-export interface FormLayoutModalProps {
-    children?: Snippet;
-    footer?: Snippet;
-}
 export interface GlobalSearchProps {
     collapsed?: boolean;
     onOpen?: () => void;
@@ -447,8 +477,10 @@ export interface InputLabelProps {
 }
 export interface InputRadioProps {
     checked?: boolean;
+    disabled?: boolean;
     id?: any;
     name?: string;
+    label?: string;
     onchange?: (checked: boolean) => void;
     [key: string]: any;
 }
@@ -509,6 +541,7 @@ export interface InputToggleProps {
     checked?: boolean;
     label?: string;
     onchange?: (checked: boolean) => void;
+    [key: string]: any;
 }
 export interface MenuItemProps {
     label?: string;
@@ -533,29 +566,19 @@ export interface MenuItemCollapsibleProps {
     children?: Snippet;
 }
 export interface NotificationProps {
-    message?: string;
+    title?: string;
+    description?: string;
     type?: Status;
     children?: Snippet;
+    [key: string]: any;
 }
 export interface ProfileAvatarProps {
     name?: string;
-    small?: boolean;
-    large?: boolean;
+    variant?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     dark?: boolean;
     picture?: string;
     country?: string;
-}
-export interface ProfileSelectorProps {
-    name?: string;
-    orgName?: string;
-    picture?: string;
-    collapsed?: boolean;
-    isOpen?: boolean;
-    onclick?: (event: MouseEvent) => void;
-}
-export interface SectionLayoutProps {
-    title?: string;
-    children?: Snippet;
+    icon?: IconSource;
 }
 export interface StatusLabelProps {
     status: FeedItemStatus;
@@ -563,6 +586,7 @@ export interface StatusLabelProps {
 }
 export interface StepIconListProps {
     icons?: StepIcon[];
+    [key: string]: any;
 }
 export interface TagSearchProps {
     label?: string;
@@ -584,6 +608,8 @@ export interface TitleSectionProps {
     children?: Snippet;
 }
 export interface ShortcutWrapperProps {
+    size?: 'sm' | 'md';
+    theme?: 'light' | 'navigation';
     children?: Snippet;
 }
 export interface UuidCopyProps {

package/package.json

@@ -1,23 +1,26 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.3",
+  "version": "0.1.4-beta.2",
+  "repository": {
+    "url":  "https://github.com/invopop/popui"
+  },
   "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",
     "prepublishOnly": "npm run package",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.check.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test": "vitest",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build:tailwind": "tailwindcss -i ../styles.css -o ./dist/popui.css --minify",
-    "build-web-components": "vite build --config vite.wbc.config.ts",
-    "publish-wbc": "npm run build-web-components && cp ./package-wbc.json ./dist/package.json && cd ./dist && npm run publish"
+    "build-storybook": "storybook build"
   },
   "exports": {
     ".": {
@@ -28,7 +31,7 @@
       "types": "./dist/types.d.ts",
       "default": "./dist/types.d.ts"
     },
-    "./twTheme.js": "./dist/tw.theme.js",
+    "./tailwind.theme.css": "./dist/tailwind.theme.css",
     "./package.json": "./dist/package.json"
   },
   "files": [
@@ -52,6 +55,7 @@
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
     "@types/lodash-es": "^4.17.12",
+    "@types/sortablejs": "^1.15.9",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "eslint": "^8.28.0",
@@ -67,7 +71,6 @@
     "storybook": "^9.1.3",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
-    "svelte-headlessui": "^0.0.32",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.1.13",
     "tslib": "^2.4.1",
@@ -80,23 +83,30 @@
   "type": "module",
   "dependencies": {
     "@floating-ui/core": "^1.5.1",
-    "@invopop/ui-icons": "0.0.67",
+    "@invopop/ui-icons": "^0.0.76",
     "@steeze-ui/heroicons": "^2.2.3",
     "@steeze-ui/svelte-icon": "^1.6.2",
     "@tailwindcss/vite": "^4.1.12",
+    "@tanstack/table-core": "^8.21.3",
     "@types/flatpickr": "^3.1.2",
     "bits-ui": "^2.9.4",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
+    "flag-icons": "^7.5.0",
     "flatpickr": "^4.6.13",
     "inter-ui": "^3.19.3",
     "lodash-es": "^4.17.21",
+    "mode-watcher": "^1.1.0",
+    "sortablejs": "^1.15.6",
     "svelte-floating-ui": "^1.5.8",
+    "svelte-headlessui": "^0.0.46",
     "svelte-intersection-observer-action": "^0.0.4",
     "svelte-portal": "^2.2.1",
+    "svelte-sonner": "^1.0.5",
     "svelte-transition": "^0.0.17",
     "svelte-viewport-info": "^1.0.2",
-    "tailwind-variants": "^1.0.0"
+    "tailwind-variants": "^1.0.0",
+    "zod": "^4.3.5"
   }
 }

package/dist/CounterWorkflow.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import clsx from 'clsx'
-  import type { CounterWorkflowProps } from './types'
-
-  let { content, variant = 'default' }: CounterWorkflowProps = $props()
-
-  let styles = $derived(
-    clsx({
-      'bg-white rounded-md': variant === 'default',
-      rounded: variant === 'transparent'
-    })
-  )
-</script>
-
-<div
-  class="{styles} border border-neutral-200 inline-flex items-center justify-center p-[3px] text-neutral-500 text-sm font-medium h-5 min-w-[20px] tracking-wide tabular-nums slashed-zero lining-nums"
->
-  {content}
-</div>

package/dist/CounterWorkflow.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { CounterWorkflowProps } from './types';
-declare const CounterWorkflow: import("svelte").Component<CounterWorkflowProps, {}, "">;
-type CounterWorkflow = ReturnType<typeof CounterWorkflow>;
-export default CounterWorkflow;

package/dist/DrawerContextWorkspace.svelte

@@ -1,126 +0,0 @@
-<script lang="ts">
-  import type { DrawerContextWorkspaceProps } from './types.ts'
-  import DrawerContextItem from './DrawerContextItem.svelte'
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import { AddCircle, ExternalLink, Workspace } from '@invopop/ui-icons'
-  import BaseCounter from './BaseCounter.svelte'
-  import EmptyStateIcon from './EmptyStateIcon.svelte'
-  import { slide } from 'svelte/transition'
-  import { ChevronRight } from '@steeze-ui/heroicons'
-
-  let { items = [], multiple = false, onclick }: DrawerContextWorkspaceProps = $props()
-  let liveOpen = $state(false)
-  let sandboxOpen = $state(false)
-  let liveItems = $derived(items.filter((i) => !i.sandbox))
-  let sandboxItems = $derived(items.filter((i) => i.sandbox))
-  let selectedItem = $derived(items.find((i) => i.selected))
-
-  $effect(() => {
-    if (selectedItem) {
-      if (selectedItem.sandbox) {
-        sandboxOpen = true
-      } else {
-        liveOpen = true
-      }
-    }
-  })
-</script>
-
-<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"
-      onclick={() => {
-        if (liveOpen) return
-        liveOpen = true
-        sandboxOpen = false
-      }}
-    >
-      <div class="flex items-center space-x-1.5">
-        <Icon
-          src={ChevronRight}
-          class="h-4 w-4 text-neutral-500 transition-all transform {liveOpen ? 'rotate-90' : ''}"
-        />
-        <span>Live</span>
-      </div>
-      {#if liveItems.length}
-        <BaseCounter content={liveItems.length} />
-      {/if}
-    </button>
-    {#if liveOpen}
-      <div transition:slide class="max-h-[475px] overflow-auto">
-        {#if !liveItems.length}
-          <div class="h-[182px] overflow-x-hidden">
-            <EmptyStateIcon
-              icon={Workspace}
-              title="No workspaces here"
-              description="Create a workspace to start"
-            />
-          </div>
-        {/if}
-        <ul class="p-1 space-y-1">
-          {#each liveItems as item}
-            <DrawerContextItem {item} {multiple} workspace {onclick} />
-          {/each}
-        </ul>
-      </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:border-t={liveOpen}
-      onclick={() => {
-        if (sandboxOpen) return
-        sandboxOpen = true
-        liveOpen = false
-      }}
-    >
-      <div class="flex items-center space-x-1.5">
-        <Icon
-          src={ChevronRight}
-          class="h-4 w-4 text-neutral-500 transition-all transform {sandboxOpen ? 'rotate-90' : ''}"
-        />
-        <span>Sandbox</span>
-      </div>
-      {#if sandboxItems.length}
-        <BaseCounter content={sandboxItems.length} />
-      {/if}
-    </button>
-    {#if sandboxOpen}
-      <div transition:slide class="max-h-[475px] overflow-auto">
-        {#if !sandboxItems.length}
-          <div class="h-[182px] overflow-x-hidden">
-            <EmptyStateIcon
-              icon={Workspace}
-              title="No workspaces here"
-              description="Create a workspace to start"
-            />
-          </div>
-        {/if}
-        <ul class="p-1 space-y-1">
-          {#each sandboxItems as item}
-            <DrawerContextItem {item} {multiple} workspace {onclick} />
-          {/each}
-        </ul>
-      </div>
-    {/if}
-  </div>
-
-  <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"
-        onclick={() => {
-          onclick?.('add')
-        }}
-      >
-        <div class="flex items-center space-x-1.5">
-          <Icon src={AddCircle} class="w-4 h-4 text-neutral-800 flex-shrink-0" />
-          <span class="text-neutral-800 tracking-tight text-base font-medium">Create workspace</span
-          >
-        </div>
-
-        <Icon src={ExternalLink} class="w-5 h-5 text-neutral-800 flex-shrink-0" />
-      </button>
-    </li>
-  </ul>
-</div>

package/dist/DrawerContextWorkspace.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { DrawerContextWorkspaceProps } from './types.ts';
-declare const DrawerContextWorkspace: import("svelte").Component<DrawerContextWorkspaceProps, {}, "">;
-type DrawerContextWorkspace = ReturnType<typeof DrawerContextWorkspace>;
-export default DrawerContextWorkspace;

package/dist/EmptyStateIcon.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-  import IconEmpty from './svg/IconEmpty.svelte'
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import type { EmptyStateIconProps } from './types'
-
-  let {
-    icon = undefined,
-    title = '',
-    description = '',
-    check = false,
-    children
-  }: EmptyStateIconProps = $props()
-</script>
-
-<div
-  class="flex flex-col text-center items-center justify-center h-full font-sans gap-1"
-  aria-label={title}
->
-  {#if icon}
-    <div class="relative h-[120px] w-[352px] max-w-sm">
-      <IconEmpty />
-      <div class="absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%]">
-        <Icon src={icon} class="h-12 w-12 text-workspace-accent" />
-        {#if check}
-          <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>
-        {/if}
-      </div>
-    </div>
-  {/if}
-  <div class="space-y-0.5">
-    <h4 class="font-medium text-base text-neutral-800 tracking-tight">{title}</h4>
-    <p class="max-w-xs text-base text-neutral-500 tracking-normal">{description}</p>
-    <p>{@render children?.()}</p>
-  </div>
-</div>

package/dist/EmptyStateIcon.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { EmptyStateIconProps } from './types';
-declare const EmptyStateIcon: import("svelte").Component<EmptyStateIconProps, {}, "">;
-type EmptyStateIcon = ReturnType<typeof EmptyStateIcon>;
-export default EmptyStateIcon;