@invopop/popui 0.1.3 → 0.1.4-beta.1

package/dist/EmptyStateIllustration.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-  import type { EmptyStateIcon, EmptyStateIllustrationProps } from './types.js'
-  import BgPattern from './svg/BgPattern.svelte'
-  import IconContact from './svg/IconContact.svelte'
-  import IconInvoice from './svg/IconInvoice.svelte'
-  import IconProduct from './svg/IconProduct.svelte'
-  import IconFile from './svg/IconFile.svelte'
-  import IconPdf from './svg/IconPdf.svelte'
-  import IconNoResults from './svg/IconNoResults.svelte'
-  import type { SvelteComponent } from 'svelte'
-
-  let {
-    icon = undefined,
-    title = '',
-    description = '',
-    children
-  }: EmptyStateIllustrationProps = $props()
-
-  function getComponent(icon: EmptyStateIcon | undefined) {
-    if (!icon) return undefined
-
-    const icons: Record<EmptyStateIcon, unknown> = {
-      invoices: IconInvoice,
-      contacts: IconContact,
-      products: IconProduct,
-      file: IconFile,
-      pdf: IconPdf,
-      'no-results': IconNoResults
-    }
-
-    return icons[icon] as typeof SvelteComponent
-  }
-  let iconComponent = $derived(getComponent(icon))
-</script>
-
-<div
-  class="flex flex-col text-center items-center justify-center h-full font-sans gap-1"
-  aria-label={title}
->
-  {#if iconComponent}
-    {@const SvelteComponent_1 = iconComponent}
-    {@const SvelteComponent_2 = iconComponent}
-    {@const SvelteComponent_3 = iconComponent}
-    <div class="relative h-[120px] w-full max-w-sm">
-      <div class="absolute top-0 left-0">
-        <BgPattern />
-      </div>
-      <SvelteComponent_1
-        classes="text-neutral-400/40 absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] -ml-[40px] rotate-[-8deg] mt-0.5 z-20 w-[86px] h-[104px]"
-      />
-      <SvelteComponent_2
-        classes="{icon === 'no-results'
-          ? 'text-neutral-400'
-          : 'text-workspace-accent'} absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] z-30 w-[97px] h-[117px]"
-      />
-      <SvelteComponent_3
-        classes="text-neutral-400/40 absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] ml-[40px] rotate-[8deg] mt-0.5 z-20 w-[86px] h-[104px]"
-      />
-    </div>
-  {/if}
-  <div class="space-y-0.5">
-    <h4 class="font-medium text-neutral-800 text-base 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/EmptyStateIllustration.svelte.d.ts

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

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="{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;

package/dist/tw.theme.js

@@ -1,188 +0,0 @@
-export default {
-  extend: {
-    fontSize: {
-      xl: ['20px', '28px'],
-      lg: ['16px', '24px'],
-      base: ['14px', '20px'],
-      sm: ['12px', '16px']
-    },
-
-    spacing: {
-      1.25: '5px',
-      18: '4.5rem',
-      128: '32rem'
-    },
-
-    borderRadius: {
-      xl: '0.625rem',
-      '2xl': '12px'
-    },
-
-    minWidth: {
-      dropdown: '175px'
-    },
-
-    colors: {
-      workspace: {
-        accent: {
-          DEFAULT: 'var(--workspace-accent-color, #169958)',
-          50: 'color-mix(in lab, transparent 95%, var(--workspace-accent-color, #169958))',
-          100: 'color-mix(in lab, transparent 90%, var(--workspace-accent-color, #169958))',
-          200: 'color-mix(in lab, transparent 80%, var(--workspace-accent-color, #169958))',
-          500: 'var(--workspace-accent-color, #169958)',
-          600: 'color-mix(in lab, black 16%, var(--workspace-accent-color, #169958))',
-          700: 'color-mix(in lab, black 32%, var(--workspace-accent-color, #169958))'
-        }
-      },
-      positive: {
-        50: 'rgba(2, 144, 98, 0.05)',
-        100: 'rgba(2, 144, 98, 0.1)',
-        200: 'rgba(2, 144, 98, 0.2)',
-        300: 'rgba(2, 144, 98, 0.3)',
-        400: 'rgba(2, 144, 98, 0.4)',
-        500: '#029062'
-      },
-      danger: {
-        50: 'rgba(201, 45, 69, 0.05)',
-        100: 'rgba(201, 45, 69, 0.1)',
-        200: 'rgba(201, 45, 69, 0.2)',
-        300: 'rgba(201, 45, 69, 0.3)',
-        400: 'rgba(201, 45, 69, 0.4)',
-        500: '#C92D45',
-        600: '#A9263A',
-        700: '#891F2F'
-      },
-      neutral: {
-        50: '#F9FAFB',
-        100: '#F3F4F6',
-        200: '#E5E7EB',
-        300: '#D1D5DB',
-        400: '#9CA3AF',
-        500: '#6B7280',
-        600: '#4B5563',
-        700: '#1F2937',
-        800: '#030712'
-      },
-      sherwood: {
-        50: 'rgba(25, 65, 54, 0.05)',
-        100: 'rgba(25, 65, 54, 0.1)',
-        200: 'rgba(25, 65, 54, 0.2)',
-        300: 'rgba(25, 65, 54, 0.3)',
-        400: 'rgba(25, 65, 54, 0.4)',
-        500: '#194136',
-        600: '#15372D',
-        700: '#112C25'
-      },
-      warning: {
-        50: 'rgba(222, 99, 19, 0.05)',
-        100: 'rgba(222, 99, 19, 0.1)',
-        200: 'rgba(222, 99, 19, 0.2)',
-        300: 'rgba(222, 99, 19, 0.3)',
-        400: 'rgba(222, 99, 19, 0.4)',
-        500: '#DE6313'
-      },
-      white: {
-        DEFAULT: '#FFFFFF',
-        5: 'rgba(255, 255, 255, 0.05)',
-        10: 'rgba(255, 255, 255, 0.1)',
-        20: 'rgba(255, 255, 255, 0.2)',
-        30: 'rgba(255, 255, 255, 0.3)',
-        40: 'rgba(255, 255, 255, 0.4)',
-        50: 'rgba(255, 255, 255, 0.5)',
-        60: 'rgba(255, 255, 255, 0.6)',
-        70: 'rgba(255, 255, 255, 0.7)',
-        80: 'rgba(255, 255, 255, 0.8)',
-        90: 'rgba(255, 255, 255, 0.9)'
-      },
-      yellow: {
-        50: 'rgba(215, 135, 0, 0.05)',
-        100: 'rgba(215, 135, 0, 0.1)',
-        200: 'rgba(215, 135, 0, 0.2)',
-        300: 'rgba(215, 135, 0, 0.3)',
-        400: 'rgba(215, 135, 0, 0.4)',
-        500: '#D78700',
-        600: '#FAD744'
-      },
-      blue: {
-        50: 'rgba(0, 101, 183, 0.05)',
-        100: 'rgba(0, 101, 183, 0.1)',
-        200: 'rgba(0, 101, 183, 0.2)',
-        300: 'rgba(0, 101, 183, 0.3)',
-        400: 'rgba(0, 101, 183, 0.4)',
-        500: '#0065B7'
-      },
-      red: {
-        50: 'rgba(255, 33, 22, 0.05)',
-        100: 'rgba(255, 33, 22, 0.1)',
-        500: 'rgba(255, 33, 22, 1)'
-      },
-      purple: {
-        50: 'rgba(136, 74, 190, 0.05)',
-        100: 'rgba(136, 74, 190, 0.1)',
-        200: 'rgba(136, 74, 190, 0.2)',
-        300: 'rgba(136, 74, 190, 0.3)',
-        400: 'rgba(136, 74, 190, 0.4)',
-        500: '#884ABE'
-      },
-      banner: {
-        sandbox: '#D2F7CB',
-        warning: '#A04A12',
-        danger: '#B32530'
-      },
-      'blue-violet': {
-        100: 'rgba(111, 36, 209, 0.1)',
-        200: 'rgba(111, 36, 209, 0.25)',
-        500: 'rgba(111, 36, 209, 1)'
-      },
-      crimson: {
-        100: 'rgba(198, 32, 91, 0.1)',
-        200: 'rgba(198, 32, 91, 0.25)',
-        500: 'rgba(198, 32, 91, 1)'
-      },
-      'steel-blue': {
-        100: 'rgba(15, 124, 187, 0.1)',
-        200: 'rgba(15, 124, 187, 0.25)',
-        500: 'rgba(15, 124, 187, 1)'
-      },
-      olive: {
-        100: 'rgba(117, 117, 30, 0.1)',
-        200: 'rgba(117, 117, 30, 0.25)',
-        500: 'rgba(117, 117, 30, 1)'
-      },
-      teal: {
-        100: 'rgba(29, 142, 142, 0.1)',
-        200: 'rgba(29, 142, 142, 0.25)',
-        500: 'rgba(29, 142, 142, 1)'
-      }
-    },
-
-    boxShadow: {
-      active:
-        '0px 0px 0px 2px color-mix(in lab, transparent 88%, var(--workspace-accent-color, #169958))',
-      warning: '0px 0px 0px 2px rgba(215, 135, 0, 0.12)'
-    },
-
-    letterSpacing: {
-      tightest: '-0.567px',
-      tighter: '-0.304px',
-      tight: '-0.07px',
-      normal: '-0.039px',
-      wide: '0.055px'
-    },
-
-    fontFamily: {
-      sans: ['Inter', 'sans-serif'],
-      mono: [
-        'CommitMono',
-        'ui-monospace',
-        'Menlo',
-        'Monaco',
-        'Consolas',
-        '"Ubuntu Mono"',
-        '"Roboto Mono"',
-        '"DejaVu Sans Mono"',
-        'monospace'
-      ]
-    }
-  }
-}