@invopop/popui 0.1.4-beta.42 → 0.1.4-beta.44

package/dist/DatePicker.svelte

@@ -120,7 +120,8 @@
     stackLeft = false,
     stackRight = false,
     icon = undefined,
-    iconTheme = 'default'
+    iconTheme = 'default',
+    isOpen = $bindable(false)
   }: DatePickerProps = $props()
 
   const [floatingRef, floatingContent] = createFloatingActions({
@@ -140,7 +141,6 @@
     start: undefined,
     end: undefined
   })
-  let isOpen = $state(false)
   let selectedLabel = $state(label)
   let isStacked = $derived(stackLeft || stackRight)
   let hasSelectedDates = $derived(value.start !== undefined)
@@ -219,6 +219,19 @@
 
     onSelect?.({ from: value.start?.toString() || '', to: value.end?.toString() || '' })
   }
+
+  // Exposed methods
+  export function open() {
+    isOpen = true
+  }
+
+  export function close() {
+    isOpen = false
+  }
+
+  export function toggle() {
+    isOpen = !isOpen
+  }
 </script>
 
 <div>

package/dist/DatePicker.svelte.d.ts

@@ -1,4 +1,8 @@
 import type { DatePickerProps } from './types';
-declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "">;
+declare const DatePicker: import("svelte").Component<DatePickerProps, {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}, "isOpen">;
 type DatePicker = ReturnType<typeof DatePicker>;
 export default DatePicker;

package/dist/button/button.svelte

@@ -20,6 +20,8 @@
           'bg-transparent text-foreground hover:shadow-button-default active:shadow-button-pressed hover:bg-background-default-tertiary-hover active:bg-background-default-tertiary-hover [&_svg]:text-icon',
         secondary:
           'bg-background-default-tertiary text-foreground shadow-button-default hover:bg-background-default-tertiary-hover active:bg-background-default-tertiary-hover active:shadow-button-pressed [&_svg]:text-icon',
+        selected:
+          'bg-background-selected border border-border-selected text-foreground-selected shadow-button-default hover:bg-background-selected-hover active:bg-background-selected-hover active:shadow-button-pressed [&_svg]:text-icon-selected',
         dark: 'bg-transparent text-foreground-inverse border border-border-inverse-secondary hover:bg-background-selected-inverse active:bg-background-inverse-tertiary active:shadow-button-dark-pressed [&_svg]:text-icon-inverse',
         'dark-ghost':
           'bg-transparent text-foreground-inverse hover:bg-background-selected-inverse active:bg-background-inverse-tertiary active:shadow-button-dark-pressed [&_svg]:text-icon-inverse'
@@ -106,6 +108,11 @@
         iconOnly: true,
         class: '[&_svg]:!text-icon-default-bold'
       },
+      {
+        variant: 'selected',
+        iconOnly: true,
+        class: '[&_svg]:!text-icon-selected'
+      },
       {
         variant: ['primary', 'warning', 'dark-ghost'],
         iconOnly: true,

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

@@ -10,6 +10,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         ghost: string;
         secondary: string;
+        selected: string;
         dark: string;
         'dark-ghost': string;
     };
@@ -42,6 +43,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         ghost: string;
         secondary: string;
+        selected: string;
         dark: string;
         'dark-ghost': string;
     };
@@ -74,6 +76,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         ghost: string;
         secondary: string;
+        selected: string;
         dark: string;
         'dark-ghost': string;
     };

package/dist/data-table/data-table-types.d.ts

@@ -36,7 +36,7 @@ export interface UuidCellConfig {
 }
 export type CellConfig = TextCellConfig | BooleanCellConfig | TagCellConfig | DateCellConfig | CurrencyCellConfig | UuidCellConfig;
 export interface DataTableColumnMeta {
-    filterType?: string;
+    filterType?: 'select' | 'text' | 'numeric' | 'date' | 'uuid';
     filterIcon?: IconSource;
     filterLabel?: string;
     dbField?: string;

package/dist/data-table/table-styles.js

@@ -24,7 +24,7 @@ export function getHeaderClasses(header, isLastScrollable, isFirstHeader = false
     return clsx('relative whitespace-nowrap overflow-hidden before:content-[""] before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border', {
         'sticky right-0 text-right bg-background before:z-20': header.id === 'actions',
         'sticky left-0 bg-background z-10 before:z-20': header.id === 'select' || isFrozen,
-        'after:content-[""] after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:h-4 after:w-px after:bg-background-default-tertiary after:z-20': isResizable && (header.id !== 'actions' && header.id !== 'select'),
+        'after:content-[""] after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:h-4 after:w-px after:bg-background-default-tertiary after:z-20': isResizable && (header.id !== 'actions' && header.id !== 'select') && !isLastFrozen,
         'w-full': isLastScrollable,
         '!pr-4': isLastHeader && !isSticky,
         'px-3': isSticky,

package/dist/tailwind.theme.css

@@ -621,7 +621,7 @@
   --color-background-warning-bold: var(--color-warning-60);
   --color-background-warning-inverse: var(--color-warning-50);
 
-  --color-background-critical-default: var(--color-critical-alpha-10);
+  --color-background-critical-default: var(--color-critical-alpha-5);
   --color-background-critical-bold: var(--color-critical-50);
   --color-background-critical-inverse: var(--color-critical-40);
 
@@ -672,7 +672,7 @@
   --color-icon-inverse-secondary: var(--color-neutral-white-alpha-40);
   --color-icon-inverse-bold: var(--color-neutral-white-alpha-100);
 
-  --color-icon-selected-default: var(--color-positive-50);
+  --color-icon-selected-default: var(--color-accent-50);
   --color-icon-accent-default: var(--color-accent-50);
 
   --color-icon-success-default: var(--color-positive-50);
@@ -887,7 +887,7 @@
     --color-background-selected-default-hover: var(--color-accent-alpha-30);
     --color-background-selected-default-press: var(--color-accent-alpha-40);
     --color-background-selected-inverse: var(--color-white-10);
-    --color-background-selected-inverse-hover: var(--color-nwhite-20);
+    --color-background-selected-inverse-hover: var(--color-white-20);
     --color-background-selected-inverse-press: var(--color-white-30);
 
     --color-background-accent-default: var(--color-accent-60);
@@ -957,7 +957,7 @@
     --color-icon-inverse-secondary: var(--color-neutral-white-alpha-40);
     --color-icon-inverse-bold: var(--color-neutral-white-alpha-100);
 
-    --color-icon-selected-default: var(--color-positive-50);
+    --color-icon-selected-default: var(--color-accent-50);
     --color-icon-accent-default: var(--color-white);
     --color-icon-success-default: var(--color-positive-50);
 

package/dist/types.d.ts

@@ -397,6 +397,7 @@ export interface DatePickerProps {
     stackRight?: boolean;
     icon?: IconSource | string;
     iconTheme?: IconTheme;
+    isOpen?: boolean;
 }
 export interface DrawerContextProps {
     items?: DrawerOption[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.4-beta.42",
+  "version": "0.1.4-beta.44",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },