@invopop/popui 0.1.14 → 0.1.15

package/dist/button/button.svelte

@@ -2,77 +2,236 @@
   import { cn, type WithElementRef } from '../utils.js'
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
   import { type VariantProps, tv } from 'tailwind-variants'
+  import type { IconSource } from '@steeze-ui/svelte-icon'
+
   export const buttonVariants = tv({
-    base: 'cursor-pointer ring-workspace-accent-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center font-medium font-sans relative group tracking-tight rounded-md text-base text-neutral-800 box-border',
+    base: 'inline-flex items-center justify-center font-medium text-base whitespace-nowrap rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden',
     variants: {
       variant: {
-        default: 'bg-white text-neutral-800 hover:bg-primary/90',
-        destructive:
-          'ring-danger-200 bg-danger-500 border border-danger-500 hover:bg-danger-600 hover:border-danger-600 active:bg-danger-700 active:border-danger-700 text-white',
-        outline:
-          'border-neutral-200 bg-white hover:border-neutral-300 border shadow-button active:shadow-button-active',
         primary:
-          'bg-workspace-accent-500 hover:bg-workspace-accent-600 active:bg-workspace-accent-700 text-white',
+          'bg-background-accent text-foreground-inverse border border-border-accent shadow-button-default hover:bg-background-accent-hover active:bg-background-accent-press active:shadow-button-pressed [&_svg]:text-icon-inverse',
+        danger:
+          'bg-background-default-tertiary text-foreground-critical border border-border shadow-button-default hover:bg-background-critical-bold hover:text-foreground-inverse hover:border-background-critical-bold active:bg-background-critical-bold active:text-foreground-inverse active:border-background-critical-bold active:shadow-[0px_4px_4px_-1px_inset_rgba(11,11,16,0.16)] [&_svg]:text-icon-critical hover:[&_svg]:text-icon-inverse active:[&_svg]:text-icon-inverse',
+        outline:
+          'bg-background text-foreground border border-border shadow-button-default hover:border-border-default-secondary-hover active:bg-background-default-secondary active:shadow-button-pressed [&_svg]:text-icon',
+        ghost:
+          'bg-transparent text-foreground hover:bg-background-default-secondary active:bg-background-default-tertiary [&_svg]:text-icon',
         secondary:
-          'bg-neutral-100 border border-neutral-100 hover:bg-neutral-200 hover:border-neutral-200 active:bg-neutral-300 active:border-neutral-300',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline'
+          'bg-background-default-tertiary text-foreground border border-border shadow-button-default hover:bg-background-default-tertiary-hover active:bg-background-default-tertiary-press active:shadow-button-pressed [&_svg]:text-icon',
+        default:
+          'bg-background text-foreground border border-border shadow-button-default hover:bg-background-default-secondary active:bg-background-default-tertiary active:shadow-button-pressed [&_svg]:text-icon',
+        dark: 'bg-transparent text-foreground-inverse border border-border-inverse hover:bg-background-inverse-secondary active:bg-background-inverse-tertiary [&_svg]:text-icon-inverse'
       },
       size: {
-        default: 'h-7 px-2 py-1',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-7 p-1.5',
-        'icon-sm': 'size-6 p-1 active:pt-[5px] active:pb-[3px]'
+        sm: 'h-6',
+        md: 'h-7',
+        lg: 'h-8'
+      },
+      iconOnly: {
+        true: '',
+        false: ''
+      },
+      hasIcon: {
+        true: '',
+        false: ''
       }
     },
+    compoundVariants: [
+      // Icon-only padding (varies by size) - must come first to avoid conflicts
+      {
+        size: 'sm',
+        iconOnly: true,
+        class: '!p-1'
+      },
+      {
+        size: 'md',
+        iconOnly: true,
+        class: '!p-1.5'
+      },
+      {
+        size: 'lg',
+        iconOnly: true,
+        class: '!p-2'
+      },
+      // Vertical padding for buttons with text
+      {
+        size: ['sm', 'md'],
+        iconOnly: false,
+        class: 'py-1'
+      },
+      {
+        size: 'lg',
+        iconOnly: false,
+        class: 'py-1.5'
+      },
+      // No icon - symmetric padding
+      {
+        size: ['sm', 'md'],
+        iconOnly: false,
+        hasIcon: false,
+        class: 'px-2'
+      },
+      {
+        size: 'lg',
+        iconOnly: false,
+        hasIcon: false,
+        class: 'px-3'
+      },
+      // Icon-left - asymmetric padding (less on icon side)
+      {
+        size: ['sm', 'md'],
+        iconOnly: false,
+        hasIcon: true,
+        class: 'pl-1.5 pr-2'
+      },
+      {
+        size: 'lg',
+        iconOnly: false,
+        hasIcon: true,
+        class: 'pl-2 pr-3'
+      },
+      // Icon-only uses bold icon variants
+      {
+        variant: ['secondary', 'default', 'outline', 'ghost'],
+        iconOnly: true,
+        class: '[&_svg]:!text-icon-default-bold'
+      },
+      {
+        variant: 'primary',
+        iconOnly: true,
+        class: '[&_svg]:!text-icon-inverse-bold'
+      },
+      {
+        variant: 'dark',
+        iconOnly: true,
+        class: '[&_svg]:!text-icon-inverse-bold'
+      }
+    ],
     defaultVariants: {
-      variant: 'default',
-      size: 'default'
+      variant: 'primary',
+      size: 'lg',
+      iconOnly: false,
+      hasIcon: false
     }
   })
+
   export type ButtonVariant = VariantProps<typeof buttonVariants>['variant']
   export type ButtonSize = VariantProps<typeof buttonVariants>['size']
   export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
     WithElementRef<HTMLAnchorAttributes> & {
       variant?: ButtonVariant
       size?: ButtonSize
+      icon?: IconSource
+      iconPosition?: 'left' | 'right'
+      iconClass?: string
     }
 </script>
 
 <script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+
   let {
     class: className,
-    variant = 'default',
-    size = 'default',
+    variant = 'primary',
+    size = 'lg',
+    icon,
+    iconPosition = 'left',
+    iconClass = '',
     ref = $bindable(null),
     href = undefined,
     type = 'button',
     disabled,
-    children
+    children,
+    onclick,
+    ...rest
   }: ButtonProps = $props()
+
+  let iconOnly = $derived(!children)
+  let hasIcon = $derived(!!icon && !iconOnly)
+
+  let iconSize = $derived(
+    {
+      sm: 'size-3',
+      md: 'size-4',
+      lg: 'size-4'
+    }[size]
+  )
+
+  // For icon-right, we need to reverse the padding
+  let paddingClass = $derived(
+    iconPosition === 'right' && hasIcon ? (size === 'lg' ? 'pl-3 pr-2' : 'pl-2 pr-1.5') : ''
+  )
 </script>
 
+{#snippet iconContent()}
+  {#if icon}
+    <div class={cn('relative z-10', iconClass && `[&_svg]:${iconClass}`)}>
+      <Icon src={icon} class={iconSize} />
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet buttonContent()}
+  <div
+    class={cn(
+      'inline-flex items-center transition-transform group-active:translate-y-px',
+      !iconOnly && 'gap-1'
+    )}
+  >
+    {#if icon && !children}
+      {@render iconContent()}
+    {:else if iconPosition === 'right'}
+      {#if children}
+        <span class="z-10">{@render children()}</span>
+      {/if}
+      {#if icon}
+        {@render iconContent()}
+      {/if}
+    {:else}
+      {#if icon}
+        {@render iconContent()}
+      {/if}
+      {#if children}
+        <span class="z-10">{@render children()}</span>
+      {/if}
+    {/if}
+  </div>
+{/snippet}
+
 {#if href}
   <a
     bind:this={ref}
     data-slot="button"
-    class={cn(buttonVariants({ variant, size }), className)}
+    class={cn(
+      buttonVariants({ variant, size, iconOnly, hasIcon }),
+      iconPosition === 'right' && 'flex-row-reverse',
+      paddingClass,
+      className
+    )}
     href={disabled ? undefined : href}
     aria-disabled={disabled}
     role={disabled ? 'link' : undefined}
     tabindex={disabled ? -1 : undefined}
+    {...rest}
   >
-    {@render children?.()}
+    {@render buttonContent()}
   </a>
 {:else}
   <button
     bind:this={ref}
     data-slot="button"
-    class={cn(buttonVariants({ variant, size }), className)}
+    class={cn(
+      buttonVariants({ variant, size, iconOnly, hasIcon }),
+      'group',
+      iconPosition === 'right' && 'flex-row-reverse',
+      paddingClass,
+      className
+    )}
     {type}
     {disabled}
+    {onclick}
+    {...rest}
   >
-    {@render children?.()}
+    {@render buttonContent()}
   </button>
 {/if}

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

@@ -1,63 +1,85 @@
 import { type WithElementRef } from '../utils.js';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import { type VariantProps } from 'tailwind-variants';
+import type { IconSource } from '@steeze-ui/svelte-icon';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
         primary: string;
-        secondary: string;
+        danger: string;
+        outline: string;
         ghost: string;
-        link: string;
+        secondary: string;
+        default: string;
+        dark: string;
     };
     size: {
-        default: string;
         sm: string;
+        md: string;
         lg: string;
-        icon: string;
-        'icon-sm': string;
     };
-}, undefined, "cursor-pointer ring-workspace-accent-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center font-medium font-sans relative group tracking-tight rounded-md text-base text-neutral-800 box-border", {
+    iconOnly: {
+        true: string;
+        false: string;
+    };
+    hasIcon: {
+        true: string;
+        false: string;
+    };
+}, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden", {
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
         primary: string;
-        secondary: string;
+        danger: string;
+        outline: string;
         ghost: string;
-        link: string;
+        secondary: string;
+        default: string;
+        dark: string;
     };
     size: {
-        default: string;
         sm: string;
+        md: string;
         lg: string;
-        icon: string;
-        'icon-sm': string;
+    };
+    iconOnly: {
+        true: string;
+        false: string;
+    };
+    hasIcon: {
+        true: string;
+        false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
         primary: string;
-        secondary: string;
+        danger: string;
+        outline: string;
         ghost: string;
-        link: string;
+        secondary: string;
+        default: string;
+        dark: string;
     };
     size: {
-        default: string;
         sm: string;
+        md: string;
         lg: string;
-        icon: string;
-        'icon-sm': string;
     };
-}, undefined, "cursor-pointer ring-workspace-accent-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center font-medium font-sans relative group tracking-tight rounded-md text-base text-neutral-800 box-border", unknown, unknown, undefined>>;
+    iconOnly: {
+        true: string;
+        false: string;
+    };
+    hasIcon: {
+        true: string;
+        false: string;
+    };
+}, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
 export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    icon?: IconSource;
+    iconPosition?: 'left' | 'right';
+    iconClass?: string;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;

package/dist/index.d.ts

@@ -13,15 +13,13 @@ import ButtonUuidCopy from './ButtonUuidCopy.svelte';
 import CardCheckbox from './CardCheckbox.svelte';
 import CardRelation from './CardRelation.svelte';
 import CompanySelector from './CompanySelector.svelte';
-import CounterWorkflow from './CounterWorkflow.svelte';
 import DataListItem from './DataListItem.svelte';
 import DatePicker from './DatePicker.svelte';
 import DrawerContext from './DrawerContext.svelte';
 import DrawerContextItem from './DrawerContextItem.svelte';
 import DrawerContextSeparator from './DrawerContextSeparator.svelte';
 import DropdownSelect from './DropdownSelect.svelte';
-import EmptyStateIcon from './EmptyStateIcon.svelte';
-import EmptyStateIllustration from './EmptyStateIllustration.svelte';
+import EmptyState from './EmptyState.svelte';
 import FeedEvents from './FeedEvents.svelte';
 import FeedIconEvent from './FeedIconEvent.svelte';
 import FeedIconStatus from './FeedIconStatus.svelte';
@@ -42,9 +40,7 @@ import MenuItem from './MenuItem.svelte';
 import MenuItemCollapsible from './MenuItemCollapsible.svelte';
 import Notification from './Notification.svelte';
 import ProfileAvatar from './ProfileAvatar.svelte';
-import ProfileSelector from './ProfileSelector.svelte';
 import ProgressBar from './ProgressBar.svelte';
-import SectionLayout from './SectionLayout.svelte';
 import SeparatorHorizontal from './SeparatorHorizontal.svelte';
 import ShortcutWrapper from './ShortcutWrapper.svelte';
 import StatusLabel from './StatusLabel.svelte';
@@ -71,8 +67,7 @@ import { Tooltip } from './tooltip';
 import { TooltipContent } from './tooltip';
 import { TooltipTrigger } from './tooltip';
 import UuidCopy from './UuidCopy.svelte';
-import twTheme from './tw.theme.js';
 import { resolveIcon } from './helpers.js';
 import { getCountryName } from './helpers.js';
 import { getStatusType } from './helpers.js';
-export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProfileSelector, ProgressBar, SectionLayout, 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, twTheme, resolveIcon, getCountryName, getStatusType };
+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 };

package/dist/index.js

@@ -13,15 +13,13 @@ import ButtonUuidCopy from './ButtonUuidCopy.svelte'
 import CardCheckbox from './CardCheckbox.svelte'
 import CardRelation from './CardRelation.svelte'
 import CompanySelector from './CompanySelector.svelte'
-import CounterWorkflow from './CounterWorkflow.svelte'
 import DataListItem from './DataListItem.svelte'
 import DatePicker from './DatePicker.svelte'
 import DrawerContext from './DrawerContext.svelte'
 import DrawerContextItem from './DrawerContextItem.svelte'
 import DrawerContextSeparator from './DrawerContextSeparator.svelte'
 import DropdownSelect from './DropdownSelect.svelte'
-import EmptyStateIcon from './EmptyStateIcon.svelte'
-import EmptyStateIllustration from './EmptyStateIllustration.svelte'
+import EmptyState from './EmptyState.svelte'
 import FeedEvents from './FeedEvents.svelte'
 import FeedIconEvent from './FeedIconEvent.svelte'
 import FeedIconStatus from './FeedIconStatus.svelte'
@@ -42,9 +40,7 @@ import MenuItem from './MenuItem.svelte'
 import MenuItemCollapsible from './MenuItemCollapsible.svelte'
 import Notification from './Notification.svelte'
 import ProfileAvatar from './ProfileAvatar.svelte'
-import ProfileSelector from './ProfileSelector.svelte'
 import ProgressBar from './ProgressBar.svelte'
-import SectionLayout from './SectionLayout.svelte'
 import SeparatorHorizontal from './SeparatorHorizontal.svelte'
 import ShortcutWrapper from './ShortcutWrapper.svelte'
 import StatusLabel from './StatusLabel.svelte'
@@ -68,7 +64,6 @@ import TitleSection from './TitleSection.svelte'
 import { Toaster } from './sonner'
 import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
 import UuidCopy from './UuidCopy.svelte'
-import twTheme from './tw.theme.js'
 import { resolveIcon, getCountryName, getStatusType } from './helpers.js'
 
 export {
@@ -87,15 +82,13 @@ export {
   CardCheckbox,
   CardRelation,
   CompanySelector,
-  CounterWorkflow,
   DataListItem,
   DatePicker,
   DrawerContext,
   DrawerContextItem,
   DrawerContextSeparator,
   DropdownSelect,
-  EmptyStateIcon,
-  EmptyStateIllustration,
+  EmptyState,
   FeedEvents,
   FeedIconEvent,
   FeedIconStatus,
@@ -116,9 +109,7 @@ export {
   MenuItemCollapsible,
   Notification,
   ProfileAvatar,
-  ProfileSelector,
   ProgressBar,
-  SectionLayout,
   SeparatorHorizontal,
   ShortcutWrapper,
   StatusLabel,
@@ -145,7 +136,6 @@ export {
   TooltipContent,
   TooltipTrigger,
   UuidCopy,
-  twTheme,
   resolveIcon,
   getCountryName,
   getStatusType

package/dist/range-calendar/range-calendar-cell.svelte

@@ -11,7 +11,7 @@
 <RangeCalendarPrimitive.Cell
   bind:ref
   class={cn(
-    'size-(--cell-size) [&:has([data-range-middle])]:bg-accent [&:has([data-selected])]:bg-accent relative p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-r-md [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:has([data-range-end])]:rounded-r-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-l-md last:[&:has([data-range-middle])]:rounded-r-md [&:has([data-range-start])]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md',
+    'size-(--cell-size) [&:has([data-range-middle]:not([data-outside-month]))]:bg-background-default-secondary [&:has([data-selected]:not([data-outside-month]))]:bg-background-default-secondary relative p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-r-md [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:has([data-range-end])]:rounded-r-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-l-md last:[&:has([data-range-middle])]:rounded-r-md [&:has([data-range-start])]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md',
     className
   )}
   {...restProps}

package/dist/range-calendar/range-calendar-day.svelte

@@ -13,23 +13,25 @@
   bind:ref
   class={cn(
     buttonVariants({ variant: 'ghost' }),
-    'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-normal leading-none',
+    'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-medium leading-none rounded-[4px]',
     // today
-    '[&[data-today]:not([data-selected]):not([data-outside-month])]:border-b [&[data-today]:not([data-selected]):not([data-outside-month])]:border-workspace-accent [&[data-today]:not([data-selected]):not([data-outside-month])]:rounded-none',
+    '[&[data-today]:not([data-selected]):not([data-outside-month])]:border-b [&[data-today]:not([data-selected]):not([data-outside-month])]:border-background-accent [&[data-today]:not([data-selected]):not([data-outside-month])]:rounded-none',
     // range Start
-    'data-[range-start]:bg-workspace-accent data-[range-start]:text-white data-[range-start]:font-semibold data-[range-start]:shadow-active',
+    'data-[range-start]:bg-background-accent data-[range-start]:text-white data-[range-start]:font-semibold data-[range-start]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
     // range middle
-    'data-[range-middle]:rounded-none data-[range-middle]:bg-neutral-100',
+    'data-[range-middle]:rounded-none data-[range-middle]:bg-background-default-secondary',
     // range End
-    'data-[range-end]:bg-workspace-accent data-[range-end]:text-white data-[range-end]:font-semibold data-[range-end]:shadow-active',
-    // Outside months
-    '[&[data-outside-month]]:text-transparent [&[data-outside-month]]:bg-transparent [&[data-outside-month]]:shadow-none [&[data-outside-month]:not([data-selected])]:pointer-events-none',
+    'data-[range-end]:bg-background-accent data-[range-end]:text-white data-[range-end]:font-semibold data-[range-end]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
+    // Outside months - must come after range styles to override
+    '[&[data-outside-month]]:!text-transparent [&[data-outside-month]]:!bg-transparent [&[data-outside-month]]:!shadow-none [&[data-outside-month]:not([data-selected])]:pointer-events-none',
     // Disabled
-    'data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'data-[disabled]:text-foreground-default-tertiary data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
     // Unavailable
     'data-[unavailable]:line-through',
     // focus
     'focus:border-ring focus:ring-ring/50 focus:relative',
+    // Default text color
+    'text-foreground-default-primary',
     // inner spans
     '[&>span]:text-xs [&>span]:opacity-70',
     className

package/dist/range-calendar/range-calendar-head-cell.svelte

@@ -11,7 +11,7 @@
 <RangeCalendarPrimitive.HeadCell
   bind:ref
   class={cn(
-    'text-[#989AA4] w-(--cell-size) h-(--cell-size) text-sm font-normal border-b border-neutral-100 flex items-center justify-center',
+    'text-foreground-default-tertiary w-(--cell-size) h-(--cell-size) text-xs font-normal border-b border-border flex items-center justify-center',
     className
   )}
   {...restProps}

package/dist/range-calendar/range-calendar-next-button.svelte

@@ -16,13 +16,13 @@
 </script>
 
 {#snippet Fallback()}
-  <Icon src={ChevronRight} class="size-4" />
+  <Icon src={ChevronRight} class="size-4 shrink-0" />
 {/snippet}
 <RangeCalendarPrimitive.NextButton
   bind:ref
   class={cn(
-    buttonVariants({ variant, size: 'icon-sm' }),
-    'select-none disabled:opacity-50 rtl:rotate-180',
+    buttonVariants({ variant, size: 'sm' }),
+    'size-6 group select-none disabled:opacity-50 rtl:rotate-180',
     className
   )}
   children={children || Fallback}

package/dist/range-calendar/range-calendar-prev-button.svelte

@@ -16,13 +16,13 @@
 </script>
 
 {#snippet Fallback()}
-  <Icon src={ChevronLeft} class="size-4" />
+  <Icon src={ChevronLeft} class="size-4 shrink-0" />
 {/snippet}
 <RangeCalendarPrimitive.PrevButton
   bind:ref
   class={cn(
-    buttonVariants({ variant, size: 'icon-sm' }),
-    'select-none disabled:opacity-50 rtl:rotate-180',
+    buttonVariants({ variant, size: 'sm' }),
+    'size-6 group select-none disabled:opacity-50 rtl:rotate-180',
     className
   )}
   children={children || Fallback}

package/dist/range-calendar/range-calendar.svelte

@@ -44,7 +44,7 @@
   {weekdayFormat}
   {disableDaysOutsideMonth}
   class={cn(
-    'bg-white group/calendar px-3 pb-3 pt-2 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+    'bg-white group/calendar px-3 pb-2 pt-1 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
     className
   )}
   {locale}

package/dist/svg/CheckBadge.svelte

@@ -0,0 +1,18 @@
+<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>

package/dist/svg/CheckBadge.svelte.d.ts

@@ -0,0 +1,26 @@
+export default CheckBadge;
+type CheckBadge = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CheckBadge: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}