@invopop/popui 0.1.68 → 0.1.70

package/dist/Accordion.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { ChevronDown } from '@invopop/ui-icons'
+  import clsx from 'clsx'
+  import type { AccordionProps } from './types'
+  import { cn } from './utils.js'
+
+  let { label, open = true, children, onToggle, class: className }: AccordionProps = $props()
+
+  let isOpen = $derived(open)
+
+  function toggle() {
+    isOpen = !isOpen
+    onToggle?.(isOpen)
+  }
+</script>
+
+<div class={cn('flex flex-col', className)}>
+  <button
+    data-accordion-trigger
+    class="flex items-center gap-1.5 overflow-clip pl-2 py-2 pr-1.5 rounded-lg cursor-pointer"
+    onclick={toggle}
+  >
+    <p data-accordion-label class="text-sm font-medium text-foreground-default-secondary text-left">
+      {label}
+    </p>
+    <Icon
+      data-accordion-icon
+      src={ChevronDown}
+      class={clsx('size-3 text-icon-default-secondary transition-transform', {
+        '-rotate-90': !isOpen
+      })}
+    />
+  </button>
+  {#if isOpen}
+    <div data-accordion-content>
+      {@render children?.()}
+    </div>
+  {/if}
+</div>

package/dist/Accordion.svelte.d.ts

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

package/dist/DrawerContext.svelte

@@ -49,7 +49,8 @@
     onreorder,
     ondropitem,
     children,
-    groups
+    groups,
+    ...rest
   }: DrawerContextProps = $props()
 
   type DndItem = DrawerOption & { id: string }
@@ -497,6 +498,7 @@
 <div
   bind:this={containerRef}
   class={containerClasses}
+  {...rest}
 >
   {@render children?.()}
 

package/dist/DropdownSelect.svelte

@@ -9,6 +9,7 @@
   import BaseFlag from './BaseFlag.svelte'
   import { resolveIcon } from './helpers.js'
   import { buttonVariants } from './button/button.svelte'
+  import { cn } from './utils.js'
 
   let {
     value = $bindable(''),
@@ -25,7 +26,9 @@
     stackLeft = false,
     stackRight = false,
     multipleLabel = 'items',
-    strategy
+    strategy,
+    disabled = false,
+    class: className = ''
   }: DropdownSelectProps = $props()
 
   let selectDropdown: BaseDropdown | undefined = $state()
@@ -71,16 +74,25 @@
   let isStacked = $derived(stackLeft || stackRight)
 
   let styles = $derived(
-    isStacked
-      ? buttonVariants({
-          variant: 'ghost',
-          stackedLeft: stackLeft,
-          stackedRight: stackRight
-        })
-      : clsx('border backdrop-blur-sm backdrop-filter dropdown-select', {
-          'border-border-selected-bold shadow-active': isOpen,
-          'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
-        })
+    cn(
+      'flex items-center rounded-lg py-1.5 pl-2 bg-background overflow-hidden w-full h-7',
+      {
+        'pr-[28px]': !isStacked,
+        'pr-2': isStacked,
+        'opacity-30 pointer-events-none': disabled
+      },
+      isStacked
+        ? buttonVariants({
+            variant: 'ghost',
+            stackedLeft: stackLeft,
+            stackedRight: stackRight
+          })
+        : clsx('border backdrop-blur-sm backdrop-filter dropdown-select', {
+            'border-border-selected-bold shadow-active': isOpen,
+            'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
+          }),
+      className
+    )
   )
 
   function handleClick(val: AnyProp) {
@@ -115,6 +127,7 @@
 
 {#snippet label()}
   <span
+    data-dropdown-select-label
     class={clsx('flex-1 text-base truncate', {
       'text-foreground': selectedItems.length,
       'text-foreground-default-secondary': !selectedItems.length,
@@ -126,19 +139,17 @@
 {/snippet}
 
 <BaseDropdown
+  data-dropdown-select
   bind:isOpen
   placement="bottom-start"
   {fullWidth}
   {strategy}
+  {disabled}
   bind:this={selectDropdown}
   class={fullWidth || isStacked ? '' : widthClass}
 >
   {#snippet trigger()}
-    <div
-      class="{styles} flex items-center rounded-lg py-1.5 pl-2 bg-background overflow-hidden w-full h-7"
-      class:pr-[28px]={!isStacked}
-      class:pr-2={isStacked}
-    >
+    <div data-dropdown-select-trigger class={styles}>
       {#if hasMultipleColors}
         <div class="flex items-center gap-1 flex-1 min-w-0">
           <div class="flex items-center -space-x-0.5">
@@ -177,6 +188,7 @@
     </div>
   {/snippet}
   <DrawerContext
+    data-dropdown-select-content
     widthClass="min-w-[256px]"
     {multiple}
     {items}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import Accordion from './Accordion.svelte';
 import AlertDialog from './AlertDialog.svelte';
 import BaseButton from './BaseButton.svelte';
 import BaseCard from './BaseCard.svelte';
@@ -86,4 +87,4 @@ import { FlexRender } from './data-table';
 import { createSvelteTable } from './data-table';
 import { renderComponent } from './data-table';
 import { renderSnippet } from './data-table';
-export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTableActions, Breadcrumbs, ButtonFile, ButtonSearch, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWidget, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, DropdownSelectGroup, 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, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList, StatusLabel, StepIcon, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, TooltipAutoHide, resolveIcon, getCountryName, getStatusType, buttonVariants, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };
+export { Accordion, AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTableActions, Breadcrumbs, ButtonFile, ButtonSearch, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWidget, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, DropdownSelectGroup, 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, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList, StatusLabel, StepIcon, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, TooltipAutoHide, resolveIcon, getCountryName, getStatusType, buttonVariants, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };

package/dist/index.js

@@ -1,3 +1,4 @@
+import Accordion from './Accordion.svelte'
 import AlertDialog from './AlertDialog.svelte'
 import BaseButton from './BaseButton.svelte'
 import BaseCard from './BaseCard.svelte'
@@ -81,6 +82,7 @@ import {
 } from './data-table'
 
 export {
+  Accordion,
   AlertDialog,
   BaseButton,
   BaseCard,

package/dist/types.d.ts

@@ -139,6 +139,13 @@ export type StepIcon = {
     name: string;
     url: string;
 };
+export interface AccordionProps {
+    label: string;
+    open?: boolean;
+    children?: Snippet;
+    onToggle?: (open: boolean) => void;
+    class?: string;
+}
 export interface AlertDialogProps {
     open?: boolean;
     destructive?: boolean;
@@ -342,6 +349,7 @@ export interface DrawerContextProps {
     ondropitem?: (groups: Record<string, DrawerOption[]>) => void;
     children?: Snippet;
     groups?: DrawerGroup[];
+    [key: string]: unknown;
 }
 export interface DrawerContextItemProps {
     multiple?: boolean;
@@ -367,6 +375,8 @@ export interface DropdownSelectProps {
     stackRight?: boolean;
     multipleLabel?: string;
     strategy?: 'absolute' | 'fixed';
+    disabled?: boolean;
+    class?: string;
 }
 export interface EmptyStateProps {
     icon?: Snippet;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },