@hyvor/design 1.1.20 → 1.1.21-beta.1

package/dist/components/Accordion/Accordion.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
+
+	interface Props {
+		title: string;
+		children?: Snippet;
+		open?: boolean;
+		icon?: Component;
+	}
+
+	let { title, children, open = $bindable(false), icon }: Props = $props();
+	const Icon = icon;
+
+	function handleClick() {
+		open = !open;
+	}
+</script>
+
+<div class="accordion-item">
+	<button class="accordion-header" class:open onclick={handleClick}>
+		{#if icon}
+			<span class="icon">
+				<Icon size={20} />
+			</span>
+		{/if}
+		<span class="title">{title}</span>
+		<span class="chevron" class:rotated={open}>
+			<IconCaretDownFill />
+		</span>
+	</button>
+
+	<div class="accordion-content" class:show={open}>
+		<div class="content-text">
+			{@render children?.()}
+		</div>
+	</div>
+</div>
+
+<style>
+	.accordion-item {
+		overflow: hidden;
+		border-radius: 20px;
+		border: 1px solid var(--border);
+	}
+
+	.accordion-header {
+		width: 100%;
+		padding: 14px 20px;
+		background: none;
+		border: none;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		cursor: pointer;
+		font-size: 16px;
+		border-radius: 20px;
+	}
+
+	.accordion-header.open {
+		border-radius: 20px 20px 0 0;
+		background-color: var(--hover);
+	}
+
+	.title {
+		font-weight: 500;
+		text-align: left;
+	}
+
+	.chevron {
+		display: flex;
+		align-items: center;
+		transition: transform 0.3s ease;
+		color: var(--text);
+	}
+
+	.chevron.rotated {
+		transform: rotate(180deg);
+	}
+
+	.accordion-content {
+		height: 0;
+		overflow: hidden;
+	}
+
+	.accordion-content.show {
+		height: auto;
+		overflow: visible;
+		animation: slideDown 0.3s ease-out;
+	}
+
+	.content-text {
+		padding: 20px;
+		color: var(--text);
+		line-height: 1.6;
+		border-top: 1px solid var(--border);
+	}
+
+	.icon {
+		display: inline-block;
+		margin-right: 10px;
+		vertical-align: middle;
+	}
+
+	@keyframes slideDown {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>

package/dist/components/Accordion/Accordion.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Component, Snippet } from 'svelte';
+interface Props {
+    title: string;
+    children?: Snippet;
+    open?: boolean;
+    icon?: Component;
+}
+declare const Accordion: Component<Props, {}, "open">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/Button/Button.svelte

@@ -6,7 +6,7 @@
 
 	interface Props {
 		as?: 'button' | 'a';
-		size?: 'x-small' | 'small' | 'medium' | 'large';
+		size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 		color?: 'accent' | 'gray' | 'green' | 'red' | 'blue' | 'orange' | 'input';
 		block?: boolean;
 		variant?: 'fill' | 'fill-light' | 'outline' | 'invisible' | 'outline-fill';
@@ -200,6 +200,12 @@
   --local-hover-shadow-size: 5px;
 }
 
+.button.x-large {
+  height: 40px;
+  padding: 0 26px;
+  font-size: 16px;
+}
+
 .button.fill.accent {
   background-color: var(--accent);
   color: var(--accent-text);

package/dist/components/Button/Button.svelte.d.ts

@@ -1,6 +1,6 @@
 interface Props {
     as?: 'button' | 'a';
-    size?: 'x-small' | 'small' | 'medium' | 'large';
+    size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
     color?: 'accent' | 'gray' | 'green' | 'red' | 'blue' | 'orange' | 'input';
     block?: boolean;
     variant?: 'fill' | 'fill-light' | 'outline' | 'invisible' | 'outline-fill';

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export { default as ActionList } from './ActionList/ActionList.svelte';
 export { default as ActionListItem } from './ActionList/ActionListItem.svelte';
 export { default as ActionListGroup } from './ActionList/ActionListGroup.svelte';
+export { default as Accordion } from './Accordion/Accordion.svelte';
 export { default as Avatar } from './Avatar/Avatar.svelte';
 export { default as AvatarStack } from './Avatar/AvatarStack.svelte';
 export { default as Base } from './Base/Base.svelte';

package/dist/components/index.js

@@ -1,6 +1,7 @@
 export { default as ActionList } from './ActionList/ActionList.svelte';
 export { default as ActionListItem } from './ActionList/ActionListItem.svelte';
 export { default as ActionListGroup } from './ActionList/ActionListGroup.svelte';
+export { default as Accordion } from './Accordion/Accordion.svelte';
 export { default as Avatar } from './Avatar/Avatar.svelte';
 export { default as AvatarStack } from './Avatar/AvatarStack.svelte';
 export { default as Base } from './Base/Base.svelte';

package/dist/variables.scss

@@ -8,6 +8,7 @@
 	--accent: #000;
 	--accent-light: #bdbdbd;
 	--accent-lightest: #fafafa;
+    --accent-light-mid: #818181;
 	--accent-text: #fff;
 
 	--border: #e1e1e1;
@@ -79,4 +80,4 @@ $breakpoint-xs: 320px;
 $breakpoint-sm: 576px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 992px;
-$breakpoint-xl: 1200px;
+$breakpoint-xl: 1200px;

package/package.json

@@ -60,5 +60,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.20"
+	"version": "1.1.21-beta.1"
 }