@invopop/popui 0.1.33 → 0.1.35

package/dist/ProgressBar.svelte

@@ -2,13 +2,19 @@
   import clsx from 'clsx'
   import type { ProgressBarProps } from './types'
 
-  let { percentage = 0, current = 0, total = 0, allowOverage = true }: ProgressBarProps = $props()
+  let {
+    percentage = 0,
+    current = 0,
+    total = 0,
+    allowOverage = true,
+    warningPercentage = 80
+  }: 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 isWarning = $derived(percentage >= warningPercentage && percentage < 100)
 
   let barColor = $derived(
     clsx({

package/dist/ProgressBarCircle.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { ProgressBarCircleProps } from './types'
+
+  let { progress, size, variant = 'default' }: ProgressBarCircleProps = $props()
+
+  let angle = $derived(360 * progress)
+  let filledColor = $derived(
+    variant === 'dark' ? 'var(--color-icon-inverse-bold)' : 'var(--color-icon-selected-default)'
+  )
+  let restColor = $derived(
+    variant === 'dark'
+      ? 'var(--color-background-selected-inverse-hover)'
+      : 'var(--color-background-default-tertiary)'
+  )
+  let background = $derived(
+    `conic-gradient(${filledColor} 0deg ${angle}deg, ${restColor} ${angle}deg 360deg)`
+  )
+  let cssVarStyles = $derived(`--background:${background}; --size: ${size}px; --ring: 1.5px;`)
+</script>
+
+<div id="progress-circle" style={cssVarStyles}></div>
+
+<style>
+  #progress-circle {
+    background: var(--background);
+    -webkit-mask: radial-gradient(
+      circle,
+      transparent 0,
+      transparent calc(50% - var(--ring)),
+      black calc(50% - var(--ring)),
+      black 100%
+    );
+    mask: radial-gradient(
+      circle,
+      transparent 0,
+      transparent calc(50% - var(--ring)),
+      black calc(50% - var(--ring)),
+      black 100%
+    );
+    border-radius: 50%;
+    width: var(--size);
+    height: var(--size);
+    transition: all 500ms ease-in;
+    will-change: transform;
+  }
+</style>

package/dist/ProgressBarCircle.svelte.d.ts

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

package/dist/SeparatorHorizontal.svelte

@@ -4,8 +4,8 @@
   .hr-separator {
     border-image: repeating-linear-gradient(
       90deg,
-      var(--color-border-default-default),
-      var(--color-border-default-default) 3px,
+      var(--color-border-default-secondary),
+      var(--color-border-default-secondary) 3px,
       transparent 3px,
       transparent 7px
     );

package/dist/TagProgress.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import clsx from 'clsx'
+  import ProgressBarCircle from './ProgressBarCircle.svelte'
+  import type { TagProgressProps } from './types'
+
+  let { progress, variant = 'default' }: TagProgressProps = $props()
+
+  let percentage = $derived(Math.round(progress * 100))
+
+  let containerStyles = $derived(
+    clsx('inline-flex items-center gap-1 rounded-full overflow-hidden pl-0.5 pr-1 py-0.5', {
+      'bg-background-selected-inverse': variant === 'dark',
+      'bg-background-default-secondary': variant === 'default'
+    })
+  )
+
+  let textStyles = $derived(
+    clsx('text-sm font-medium leading-4 whitespace-nowrap', {
+      'text-foreground-inverse-default': variant === 'dark',
+      'text-foreground-default-default': variant === 'default'
+    })
+  )
+</script>
+
+<div class={containerStyles}>
+  <ProgressBarCircle {progress} size={16} {variant} />
+  <span class={textStyles}>{percentage}%</span>
+</div>

package/dist/TagProgress.svelte.d.ts

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

package/dist/index.d.ts

@@ -42,6 +42,7 @@ import MenuItemCollapsible from './MenuItemCollapsible.svelte';
 import Notification from './Notification.svelte';
 import ProfileAvatar from './ProfileAvatar.svelte';
 import ProgressBar from './ProgressBar.svelte';
+import ProgressBarCircle from './ProgressBarCircle.svelte';
 import SeparatorHorizontal from './SeparatorHorizontal.svelte';
 import ShortcutWrapper from './ShortcutWrapper.svelte';
 import StatusLabel from './StatusLabel.svelte';
@@ -59,6 +60,7 @@ import { TabsContent } from './tabs';
 import { TabsList } from './tabs';
 import { TabsTrigger } from './tabs';
 import TagBeta from './TagBeta.svelte';
+import TagProgress from './TagProgress.svelte';
 import TagSearch from './TagSearch.svelte';
 import TagStatus from './TagStatus.svelte';
 import TitleMain from './TitleMain.svelte';
@@ -72,4 +74,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, 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 };
+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, ProgressBarCircle, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, resolveIcon, getCountryName, getStatusType, buttonVariants };

package/dist/index.js

@@ -42,6 +42,7 @@ import MenuItemCollapsible from './MenuItemCollapsible.svelte'
 import Notification from './Notification.svelte'
 import ProfileAvatar from './ProfileAvatar.svelte'
 import ProgressBar from './ProgressBar.svelte'
+import ProgressBarCircle from './ProgressBarCircle.svelte'
 import SeparatorHorizontal from './SeparatorHorizontal.svelte'
 import ShortcutWrapper from './ShortcutWrapper.svelte'
 import StatusLabel from './StatusLabel.svelte'
@@ -58,6 +59,7 @@ import {
 } from './table'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs'
 import TagBeta from './TagBeta.svelte'
+import TagProgress from './TagProgress.svelte'
 import TagSearch from './TagSearch.svelte'
 import TagStatus from './TagStatus.svelte'
 import TitleMain from './TitleMain.svelte'
@@ -113,6 +115,7 @@ export {
   Notification,
   ProfileAvatar,
   ProgressBar,
+  ProgressBarCircle,
   SeparatorHorizontal,
   ShortcutWrapper,
   StatusLabel,
@@ -130,6 +133,7 @@ export {
   TabsList,
   TabsTrigger,
   TagBeta,
+  TagProgress,
   TagSearch,
   TagStatus,
   TitleMain,

package/dist/types.d.ts

@@ -199,6 +199,16 @@ export interface ProgressBarProps {
     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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "scripts": {
     "dev": "vite dev",
     "dev:clean": "npm run clean && vite dev",