@invopop/popui 0.1.31 → 0.1.33

package/dist/CounterWidget.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { CounterWidgetProps } from './types'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { Warning, Failure } from '@invopop/ui-icons'
+  import ProgressBar from './ProgressBar.svelte'
+
+  let {
+    label,
+    current,
+    total,
+    resetDate = '',
+    icon,
+    allowOverage = true
+  }: CounterWidgetProps = $props()
+
+  let percentage = $derived(total > 0 ? (current / total) * 100 : 0)
+  let isOverage = $derived(current > total && allowOverage)
+  let isCritical = $derived(percentage >= 100 || (current > total && !allowOverage))
+  let isWarning = $derived(percentage >= 80 && percentage < 100)
+</script>
+
+<div class="border border-border-inverse rounded-xl w-full py-[5px] pl-2 pr-1.5 flex flex-col">
+  <div class="flex items-center justify-between text-base font-medium">
+    <div class="flex items-center gap-1.5">
+      {#if icon}
+        <Icon src={icon} class="size-3 text-icon-inverse rounded-xs" />
+      {/if}
+      <span class="font-medium text-foreground-inverse">
+        {label}
+      </span>
+    </div>
+    <div class="flex items-center gap-1.5">
+      {#if isCritical && !isOverage}
+        <Icon src={Failure} class="size-4 text-icon-critical-inverse" />
+      {:else if isWarning && !isOverage}
+        <Icon src={Warning} class="size-4 text-icon-warning-inverse" />
+      {/if}
+      <span class="font-mono text-foreground-inverse">
+        {current}<span class="text-white/70">/{total}</span>
+      </span>
+    </div>
+  </div>
+  <div class="py-2">
+    <ProgressBar {percentage} {current} {total} {allowOverage} />
+  </div>
+
+  {#if resetDate}
+    <span class="text-sm font-normal text-foreground-inverse-secondary">
+      {label} reset {resetDate}
+    </span>
+  {/if}
+</div>

package/dist/CounterWidget.svelte.d.ts

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

package/dist/DrawerContextItem.svelte

@@ -31,7 +31,11 @@
     )
   )
   let labelStyles = $derived(
-    clsx({ 'text-foreground-critical': item.destructive }, { 'text-foreground': !item.destructive })
+    clsx(
+      { 'text-foreground-critical': item.destructive },
+      { 'text-foreground': !item.destructive },
+      { 'opacity-30': item.locked }
+    )
   )
   let title = $derived(item.label.length > 25 ? item.label : undefined)
 
@@ -68,7 +72,9 @@
     {:else if item.icon}
       <Icon
         src={item.icon}
-        class="w-4 h-4 {item.destructive ? 'text-icon-critical' : item.iconClass || 'text-icon'}"
+        class="w-4 h-4 {item.destructive
+          ? 'text-icon-critical'
+          : item.iconClass || 'text-icon'} {item.locked ? 'opacity-30' : ''}"
       />
     {/if}
     <div class="whitespace-nowrap flex-1 text-left flex items-center space-x-1.5 truncate" {title}>
@@ -84,7 +90,9 @@
         </span>
       {/if}
     </div>
-    {#if multiple}
+    {#if item.action}
+      {@render item.action()}
+    {:else if multiple}
       <InputCheckbox
         checked={item.selected ?? false}
         onchange={(value) => {

package/dist/ProgressBar.svelte

@@ -1,7 +1,36 @@
 <script lang="ts">
-  let { percentage = 0 }: { percentage?: number } = $props()
+  import clsx from 'clsx'
+  import type { ProgressBarProps } from './types'
+
+  let { percentage = 0, current = 0, total = 0, allowOverage = true }: ProgressBarProps = $props()
+
+  let isOverage = $derived(current > total && allowOverage)
+  let overagePercentage = $derived(isOverage && total > 0 ? ((current - total) / current) * 100 : 0)
+  let usedPercentage = $derived(isOverage ? 100 - overagePercentage : percentage)
+  let isCritical = $derived(percentage >= 100 || (current > total && !allowOverage))
+  let isWarning = $derived(percentage >= 80 && percentage < 100)
+
+  let barColor = $derived(
+    clsx({
+      'bg-background-critical-inverse': isCritical,
+      'bg-background-warning-inverse': isWarning || isOverage,
+      'bg-icon-inverse-bold': !isCritical && !isWarning && !isOverage
+    })
+  )
+
+  let barWidth = $derived(isOverage ? usedPercentage : Math.min(percentage, 100))
 </script>
 
-<div class="w-full h-1 shrink-0 rounded-full bg-background-default-secondary">
-  <div class="rounded-full h-1 bg-foreground-accent" style="width: {percentage}%;"></div>
+<div class="flex gap-0.5 w-full h-1">
+  {#if isOverage}
+    <div class="h-1 rounded-full bg-icon-inverse-bold" style="width: {barWidth}%"></div>
+    <div class="h-1 rounded-full bg-background-warning-inverse flex-1"></div>
+  {:else if percentage >= 100}
+    <div class="h-1 rounded-full {barColor} w-full"></div>
+  {:else}
+    {#if barWidth > 0}
+      <div class="h-1 rounded-full {barColor}" style="width: {barWidth}%"></div>
+    {/if}
+    <div class="h-1 rounded-full bg-background-selected-inverse flex-1"></div>
+  {/if}
 </div>

package/dist/ProgressBar.svelte.d.ts

@@ -1,6 +1,4 @@
-type $$ComponentProps = {
-    percentage?: number;
-};
-declare const ProgressBar: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { ProgressBarProps } from './types';
+declare const ProgressBar: import("svelte").Component<ProgressBarProps, {}, "">;
 type ProgressBar = ReturnType<typeof ProgressBar>;
 export default ProgressBar;

package/dist/index.d.ts

@@ -13,6 +13,7 @@ import ButtonUuidCopy from './ButtonUuidCopy.svelte';
 import CardCheckbox from './CardCheckbox.svelte';
 import CardRelation from './CardRelation.svelte';
 import CompanySelector from './CompanySelector.svelte';
+import CounterWidget from './CounterWidget.svelte';
 import DataListItem from './DataListItem.svelte';
 import DatePicker from './DatePicker.svelte';
 import DrawerContext from './DrawerContext.svelte';
@@ -71,4 +72,4 @@ import { resolveIcon } from './helpers.js';
 import { getCountryName } from './helpers.js';
 import { getStatusType } from './helpers.js';
 import { buttonVariants } from './button/button.svelte';
-export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, resolveIcon, getCountryName, getStatusType, buttonVariants };
+export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWidget, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, resolveIcon, getCountryName, getStatusType, buttonVariants };

package/dist/index.js

@@ -13,6 +13,7 @@ import ButtonUuidCopy from './ButtonUuidCopy.svelte'
 import CardCheckbox from './CardCheckbox.svelte'
 import CardRelation from './CardRelation.svelte'
 import CompanySelector from './CompanySelector.svelte'
+import CounterWidget from './CounterWidget.svelte'
 import DataListItem from './DataListItem.svelte'
 import DatePicker from './DatePicker.svelte'
 import DrawerContext from './DrawerContext.svelte'
@@ -83,6 +84,7 @@ export {
   CardCheckbox,
   CardRelation,
   CompanySelector,
+  CounterWidget,
   DataListItem,
   DatePicker,
   DrawerContext,

package/dist/types.d.ts

@@ -36,8 +36,10 @@ export type DrawerOption = SelectOption & {
     sandbox?: boolean;
     iconClass?: string;
     disabled?: boolean;
+    locked?: boolean;
     groupBy?: string;
     useAvatar?: boolean;
+    action?: Snippet;
 };
 export type Company = {
     id: string;
@@ -184,6 +186,20 @@ export interface BaseCounterProps {
     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;
+}
 export interface BaseDropdownProps {
     isOpen?: boolean;
     fullWidth?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "scripts": {
     "dev": "vite dev",
     "dev:clean": "npm run clean && vite dev",
@@ -82,7 +82,7 @@
   "type": "module",
   "dependencies": {
     "@floating-ui/core": "^1.5.1",
-    "@invopop/ui-icons": "0.0.72",
+    "@invopop/ui-icons": "0.0.74",
     "@steeze-ui/heroicons": "^2.2.3",
     "@steeze-ui/svelte-icon": "^1.6.2",
     "@tailwindcss/vite": "^4.1.12",