@invopop/popui 0.1.68 → 0.1.69

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/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;

package/package.json

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