@invopop/popui 0.1.49 → 0.1.51

package/dist/BaseButton.svelte

@@ -34,6 +34,7 @@
     disabled,
     stackedLeft,
     stackedRight,
+    shortcut,
     onclick,
     class: `${fullWidthClass} ${className || ''}`,
     ...rest

package/dist/BaseFlag.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
   import 'flag-icons/css/flag-icons.min.css'
   import type { BaseFlagProps } from './types'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { World } from '@invopop/ui-icons'
 
   let { country = '' }: BaseFlagProps = $props()
 
   let iso = $derived(country.toLowerCase())
+  let isGlobal = $derived(country.toUpperCase() === 'GLOBAL')
 </script>
 
-<div class="w-3.5 h-2.5 rounded-[1.5px] overflow-hidden flex items-center justify-center">
-  <span class="fi fi-{country.toLocaleLowerCase()} text-[14px] leading-none"></span>
-</div>
+{#if isGlobal}
+  <div class="w-3.5 h-2.5 flex items-center justify-center">
+    <Icon src={World} class="size-3.5 text-icon" />
+  </div>
+{:else}
+  <div class="w-3.5 h-2.5 rounded-[1.5px] overflow-hidden flex items-center justify-center">
+    <span class="fi fi-{country.toLocaleLowerCase()} text-[14px] leading-none"></span>
+  </div>
+{/if}

package/dist/CardCheckbox.svelte

@@ -19,12 +19,10 @@
   }: CardCheckboxProps = $props()
 
   let containerStyles = $derived(
-    clsx('border gap-3', {
+    clsx('border gap-3 rounded-xl', {
       'border-foreground-selected': checked,
       'border-border': !checked,
-      'bg-background-default-secondary': disabled,
-      'rounded-lg': hideRadio,
-      'rounded-xl': !hideRadio
+      'bg-background-default-secondary': disabled
     })
   )
 

package/dist/DrawerContext.svelte

@@ -42,6 +42,7 @@
     draggable = false,
     widthClass = 'w-60',
     collapsibleGroups = true,
+    flagPosition = 'after',
     onclick,
     onselect,
     onreorder,
@@ -473,7 +474,7 @@
   {:else}
     <div class:px-1={!item.groupBy} class:cursor-grab={draggable && !item.locked}>
       <DrawerContextItem
-        item={{ ...item, focused: item.value === focusedItemValue }}
+        item={{ ...item, focused: item.value === focusedItemValue, flagPosition: item.flagPosition || flagPosition }}
         {multiple}
         {onclick}
         onchange={updateItem}

package/dist/DrawerContextItem.svelte

@@ -76,6 +76,8 @@
         <ProfileAvatar name={item?.label || ''} picture={item?.picture || ''} variant="sm" />
       {:else if item?.picture}
         <ProfileAvatar name={item?.label || ''} picture={item?.picture} variant="sm" />
+      {:else if typeof item?.icon === 'string'}
+        <img src={item.icon} alt="" class="w-4 h-4 text-icon {item?.locked ? 'opacity-30' : ''}" />
       {:else if item?.icon}
         <Icon
           src={item.icon}
@@ -91,9 +93,12 @@
         {#if item?.color}
           <TagStatus status={item.color} dot />
         {/if}
+        {#if item?.country && item?.flagPosition === 'before'}
+          <BaseFlag country={item.country} />
+        {/if}
         <span class="{labelStyles} text-base font-medium truncate">{item?.label || ''}</span>
 
-        {#if item?.country}
+        {#if item?.country && item?.flagPosition === 'after'}
           <BaseFlag country={item.country} />
           <span class="text-xs font-medium text-foreground-default-secondary uppercase">
             {item.country}

package/dist/DropdownSelect.svelte

@@ -6,6 +6,7 @@
   import DrawerContext from './DrawerContext.svelte'
   import clsx from 'clsx'
   import TagStatus from './TagStatus.svelte'
+  import BaseFlag from './BaseFlag.svelte'
   import { resolveIcon } from './helpers.js'
   import { buttonVariants } from './button/button.svelte'
 
@@ -18,6 +19,7 @@
     multiple = false,
     fullWidth = false,
     widthClass = 'min-w-[160px] max-w-[420px]',
+    flagPosition = 'before',
     onSelect,
     onOpenChange,
     stackLeft = false,
@@ -151,9 +153,16 @@
           <TagStatus dot status={selectedColor} />
           {@render label()}
         </div>
+      {:else if !multiple && selectedItem?.country}
+        <div class="flex items-center gap-1 flex-1 min-w-0">
+          <BaseFlag country={selectedItem.country} />
+          {@render label()}
+        </div>
       {:else if selectedIcon || resolvedIcon}
         <div class="flex items-center gap-1 flex-1 min-w-0">
-          {#if selectedIcon}
+          {#if typeof selectedIcon === 'string'}
+            <img src={selectedIcon} alt="" class="size-4 flex-shrink-0 text-icon" />
+          {:else if selectedIcon}
             <Icon src={selectedIcon} {iconTheme} class="{selectedIconColor} size-4 flex-shrink-0" />
           {:else if resolvedIcon}
             <Icon src={resolvedIcon} {iconTheme} class="text-icon size-4 flex-shrink-0" />
@@ -169,6 +178,7 @@
     widthClass="min-w-[256px]"
     {multiple}
     {items}
+    {flagPosition}
     onclick={handleClick}
     onselect={handleSelected}
   />

package/dist/button/button.svelte

@@ -170,11 +170,13 @@
       iconClass?: string
       stackedLeft?: boolean
       stackedRight?: boolean
+      shortcut?: boolean
     }
 </script>
 
 <script lang="ts">
   import { Icon } from '@steeze-ui/svelte-icon'
+  import ShortcutWrapper from '../ShortcutWrapper.svelte'
 
   let {
     class: className,
@@ -185,6 +187,7 @@
     iconClass = '',
     stackedLeft = false,
     stackedRight = false,
+    shortcut = false,
     ref = $bindable(null),
     href = undefined,
     type = 'button',
@@ -211,7 +214,7 @@
   )
 </script>
 
-{#snippet iconContent()}
+{#snippet iconElement()}
   {#if icon}
     <div class={cn('relative z-10', iconClass && `[&_svg]:${iconClass}`)}>
       <Icon src={icon} class={iconSize} />
@@ -219,6 +222,18 @@
   {/if}
 {/snippet}
 
+{#snippet iconContent()}
+  {#if shortcut}
+    <ShortcutWrapper
+      theme={['dark', 'primary', 'danger'].includes(variant) ? 'navigation' : 'light'}
+    >
+      {@render iconElement()}
+    </ShortcutWrapper>
+  {:else}
+    {@render iconElement()}
+  {/if}
+{/snippet}
+
 {#snippet buttonContent()}
   <div
     class={cn(

package/dist/button/button.svelte.d.ts

@@ -112,6 +112,7 @@ export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<
     iconClass?: string;
     stackedLeft?: boolean;
     stackedRight?: boolean;
+    shortcut?: boolean;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;

package/dist/tailwind.theme.css

@@ -1,15 +1,17 @@
 /**
  * PopUI Tailwind v4 Theme Configuration
- * 
+ *
  * This file can be imported in any project using:
  * @import "@invopop/popui/tailwind.theme.css";
- * 
+ *
  * Three-tier color system:
  * 1. Primitive colors: Raw color values from Figma (e.g., mint-100)
  * 2. Semantic colors: Named palettes using base colors (e.g., positive-100)
  * 3. Token colors: Application-specific using semantic colors (e.g., foreground-default)
  */
 
+@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');
+
 @theme {
   /* ============================================
      PRIMITIVE COLORS
@@ -799,7 +801,7 @@
 
   /* Font Family */
   --font-sans: Inter, sans-serif;
-  --font-mono: "Geist Mono", CommitMono, ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", "Roboto Mono", "DejaVu Sans Mono", monospace;
+  --font-mono: "Geist Mono", CommitMono, ui-monospace, Menlo, Monaco, Consolas, "Roboto Mono", "DejaVu Sans Mono", monospace;
 
   /* Font Features for Monospace */
   --font-mono-features: "ss02" on, "ss08" on, "ss09" on;

package/dist/types.d.ts

@@ -30,7 +30,7 @@ export type DrawerOption = SelectOption & {
     destructive?: boolean;
     selected?: boolean;
     focused?: boolean;
-    icon?: IconSource | undefined;
+    icon?: IconSource | string | undefined;
     rightIcon?: IconSource | undefined;
     country?: string;
     color?: StatusType;
@@ -42,6 +42,7 @@ export type DrawerOption = SelectOption & {
     groupBy?: string;
     useAvatar?: boolean;
     action?: Snippet<[DrawerOption]>;
+    flagPosition?: 'before' | 'after';
 };
 export type Company = {
     id: string;
@@ -332,6 +333,7 @@ export interface DrawerContextProps {
     draggable?: boolean;
     widthClass?: string;
     collapsibleGroups?: boolean;
+    flagPosition?: 'before' | 'after';
     onclick?: (value: AnyProp) => void;
     onselect?: (selected: DrawerOption[]) => void;
     onreorder?: (items: DrawerOption[]) => void;
@@ -356,6 +358,7 @@ export interface DropdownSelectProps {
     multiple?: boolean;
     fullWidth?: boolean;
     widthClass?: string;
+    flagPosition?: 'before' | 'after';
     onSelect?: (value: AnyProp) => void;
     onOpenChange?: (isOpen: boolean) => void;
     stackLeft?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },
@@ -85,7 +85,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.5",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@floating-ui/core": "^1.5.1",
-    "@invopop/ui-icons": "^0.0.82",
+    "@invopop/ui-icons": "^0.0.84",
     "@steeze-ui/heroicons": "^2.2.3",
     "@steeze-ui/svelte-icon": "^1.6.2",
     "@tailwindcss/vite": "^4.1.12",