@invopop/popui 0.1.14 → 0.1.15

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,7 +3,7 @@ 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 ButtonVariant = 'default' | 'primary' | 'secondary' | 'danger' | 'dark' | 'outline' | '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 = {
@@ -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,7 @@ export type DrawerOption = SelectOption & {
     sandbox?: boolean;
     iconClass?: string;
     disabled?: boolean;
+    groupBy?: string;
 };
 export type Company = {
     id: string;
@@ -102,7 +110,6 @@ export type TabItem = {
     check?: boolean;
     warning?: boolean;
 };
-export type EmptyStateIcon = 'invoices' | 'contacts' | 'parties' | 'products' | 'deliveries' | 'orders' | 'payments' | 'pdf' | 'file' | 'no-results' | 'no-results';
 export type DataListItem = {
     label: string;
     value: string;
@@ -153,8 +160,7 @@ 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;
@@ -169,14 +175,13 @@ 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 BaseDropdownProps {
     isOpen?: boolean;
@@ -270,18 +275,23 @@ 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 interface ButtonFileProps {
-    icon?: IconSource;
     name?: string;
     disabled?: boolean;
     date?: string;
-    iconColor?: StatusType;
+    fileType?: 'pdf' | 'xml' | 'png';
     onPreview?: () => void;
     onDownload?: () => void;
+    class?: string;
     [key: string]: any;
 }
 export interface ButtonUuidCopyProps {
@@ -299,6 +309,7 @@ export interface CardCheckboxProps {
     description?: string;
     accentText?: string;
     checked?: boolean;
+    disabled?: boolean;
     icon?: IconSource | undefined;
     hideRadio?: boolean;
     footer?: Snippet;
@@ -317,10 +328,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;
@@ -346,12 +353,12 @@ export interface DrawerContextProps {
     onclick?: (value: AnyProp) => void;
     onselect?: (selected: 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;
 }
@@ -371,19 +378,14 @@ export interface DropdownSelectProps {
     widthClass?: string;
     onSelect?: (value: AnyProp) => void;
 }
-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[];
 }
@@ -422,10 +424,6 @@ export interface FeedViewerProps {
     items?: FeedItemProps[];
     onView?: (slug: string) => void;
 }
-export interface FormLayoutModalProps {
-    children?: Snippet;
-    footer?: Snippet;
-}
 export interface GlobalSearchProps {
     collapsed?: boolean;
     onOpen?: () => void;
@@ -449,8 +447,10 @@ export interface InputLabelProps {
 }
 export interface InputRadioProps {
     checked?: boolean;
+    disabled?: boolean;
     id?: any;
     name?: string;
+    label?: string;
     onchange?: (checked: boolean) => void;
     [key: string]: any;
 }
@@ -511,6 +511,7 @@ export interface InputToggleProps {
     checked?: boolean;
     label?: string;
     onchange?: (checked: boolean) => void;
+    [key: string]: any;
 }
 export interface MenuItemProps {
     label?: string;
@@ -535,29 +536,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;
@@ -565,6 +556,7 @@ export interface StatusLabelProps {
 }
 export interface StepIconListProps {
     icons?: StepIcon[];
+    [key: string]: any;
 }
 export interface TagSearchProps {
     label?: string;
@@ -586,6 +578,8 @@ export interface TitleSectionProps {
     children?: Snippet;
 }
 export interface ShortcutWrapperProps {
+    size?: 'sm' | 'md';
+    theme?: 'light' | 'navigation';
     children?: Snippet;
 }
 export interface UuidCopyProps {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "scripts": {
     "dev": "vite dev",
     "dev:clean": "npm run clean && vite dev",
@@ -31,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": [

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/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;

package/dist/FormLayoutModal.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import type { FormLayoutModalProps } from './types'
-
-  let { children, footer }: FormLayoutModalProps = $props()
-</script>
-
-<div class="flex flex-col max-w-lg w-128 py-8 px-6 gap-4">
-  {@render children?.()}
-  {#if footer}
-    <div class="mt-4 pt-4 flex items-center justify-end gap-x-6 border-t">
-      {@render footer?.()}
-    </div>
-  {/if}
-</div>

package/dist/FormLayoutModal.svelte.d.ts

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

package/dist/ProfileSelector.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-  import clsx from 'clsx'
-  import ProfileAvatar from './ProfileAvatar.svelte'
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import { ChevronUp } from '@invopop/ui-icons'
-  import type { ProfileSelectorProps } from './types'
-
-  let {
-    name = '',
-    orgName = '',
-    picture = '',
-    collapsed = false,
-    isOpen = false,
-    onclick
-  }: ProfileSelectorProps = $props()
-
-  let styles = $derived(
-    clsx(
-      { 'p-[5px]': collapsed },
-      { 'w-full pl-1.5 pr-2 py-[7px]': !collapsed },
-      { 'border-white-30 bg-white-10': isOpen },
-      { 'border-transparent hover:bg-white-5': !isOpen }
-    )
-  )
-</script>
-
-<button
-  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">
-    <ProfileAvatar {name} {picture} dark large />
-    {#if !collapsed}
-      <div class="flex-1 flex flex-col">
-        <span class="tracking-normal font-medium truncate max-w-[136px]">{name}</span>
-        <span class="text-sm text-white-50 truncate max-w-[136px]">{orgName}</span>
-      </div>
-      <Icon src={ChevronUp} class="w-4 h-4 text-white-40" />
-    {/if}
-  </span>
-</button>

package/dist/ProfileSelector.svelte.d.ts

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

package/dist/SectionLayout.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  import TitleSection from './TitleSection.svelte'
-  import type { SectionLayoutProps } from './types'
-
-  let { title = '', children }: SectionLayoutProps = $props()
-</script>
-
-<div class="py-5">
-  <TitleSection {title} />
-  <div class="mt-3">
-    {@render children?.()}
-  </div>
-</div>

package/dist/SectionLayout.svelte.d.ts

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

package/dist/tw.theme.d.ts

@@ -1,171 +0,0 @@
-declare namespace _default {
-    namespace extend {
-        namespace fontSize {
-            let xl: string[];
-            let lg: string[];
-            let base: string[];
-            let sm: string[];
-        }
-        let spacing: {
-            1.25: string;
-            18: string;
-            128: string;
-        };
-        let borderRadius: {
-            xl: string;
-            '2xl': string;
-        };
-        namespace minWidth {
-            let dropdown: string;
-        }
-        let colors: {
-            workspace: {
-                accent: {
-                    DEFAULT: string;
-                    50: string;
-                    100: string;
-                    200: string;
-                    500: string;
-                    600: string;
-                    700: string;
-                };
-            };
-            positive: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-            };
-            danger: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-            };
-            neutral: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-            };
-            sherwood: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-            };
-            warning: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-            };
-            white: {
-                DEFAULT: string;
-                5: string;
-                10: string;
-                20: string;
-                30: string;
-                40: string;
-                50: string;
-                60: string;
-                70: string;
-                80: string;
-                90: string;
-            };
-            yellow: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-            };
-            blue: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-            };
-            red: {
-                50: string;
-                100: string;
-                500: string;
-            };
-            purple: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-            };
-            banner: {
-                sandbox: string;
-                warning: string;
-                danger: string;
-            };
-            'blue-violet': {
-                100: string;
-                200: string;
-                500: string;
-            };
-            crimson: {
-                100: string;
-                200: string;
-                500: string;
-            };
-            'steel-blue': {
-                100: string;
-                200: string;
-                500: string;
-            };
-            olive: {
-                100: string;
-                200: string;
-                500: string;
-            };
-            teal: {
-                100: string;
-                200: string;
-                500: string;
-            };
-        };
-        namespace boxShadow {
-            let active: string;
-            let warning: string;
-        }
-        namespace letterSpacing {
-            let tightest: string;
-            let tighter: string;
-            let tight: string;
-            let normal: string;
-            let wide: string;
-        }
-        namespace fontFamily {
-            let sans: string[];
-            let mono: string[];
-        }
-    }
-}
-export default _default;