@hyvor/design 1.1.20 → 1.1.21-beta.2

package/dist/components/Accordion/Accordion.svelte

@@ -0,0 +1,143 @@
+<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;
+        headerColor?: string;
+        textColor?: string;
+        openedColor?: string;
+        borderColor?: string;
+        topBorderColor?: string;
+    }
+
+    let {
+        title,
+        children,
+        open = $bindable(false),
+        icon,
+        headerColor,
+        textColor,
+        openedColor,
+        borderColor,
+        topBorderColor
+    }: Props = $props();
+
+    const Icon = icon;
+
+    function handleClick() {
+        open = !open;
+    }
+</script>
+
+<div
+    class="accordion-item"
+    style:--custom-border={borderColor}
+    style:--custom-text={textColor}
+    style:--custom-opened={openedColor}
+    style:--custom-header={headerColor}
+>
+    <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"
+             style:--custom-top-border={topBorderColor}
+             style:--custom-header={headerColor}
+        >
+            {@render children?.()}
+        </div>
+    </div>
+</div>
+
+<style>
+    .accordion-item {
+        overflow: hidden;
+        border-radius: 20px;
+        border: 1px solid var(--custom-border, var(--border));
+    }
+
+    .accordion-header {
+        width: 100%;
+        padding: 14px 20px;
+        background: var(--custom-header, none);
+        border: none;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+        font-size: 16px;
+        border-radius: 20px;
+        color: var(--custom-text, var(--text));
+    }
+
+    .accordion-header.open {
+        border-radius: 20px 20px 0 0;
+        background-color: var(--custom-opened, var(--hover));
+    }
+
+    .title {
+        font-weight: 500;
+        text-align: left;
+    }
+
+    .chevron {
+        display: flex;
+        align-items: center;
+        transition: transform 0.3s ease;
+        color: var(--custom-text, 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(--custom-text, var(--text));
+        line-height: 1.6;
+        border-top: 1px solid var(--custom-top-border, var(--border));
+        background: var(--custom-header, none);
+    }
+
+    .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,15 @@
+import type { Component, Snippet } from 'svelte';
+interface Props {
+    title: string;
+    children?: Snippet;
+    open?: boolean;
+    icon?: Component;
+    headerColor?: string;
+    textColor?: string;
+    openedColor?: string;
+    borderColor?: string;
+    topBorderColor?: string;
+}
+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/ColorPicker/ColorPicker.svelte

@@ -28,6 +28,34 @@
 		change: string;
 	}>();
 
+	let buttonElement: HTMLButtonElement;
+	let pickerTop = $state(0);
+	let pickerLeft = $state(0);
+
+	function updatePosition() {
+		if (buttonElement) {
+			const rect = buttonElement.getBoundingClientRect();
+			pickerLeft = rect.right;
+			pickerTop = rect.bottom;
+		}
+	}
+
+	$effect(() => {
+		if (show) {
+			updatePosition();
+			window.addEventListener('scroll', updatePosition, true);
+			window.addEventListener('resize', updatePosition);
+		} else {
+			window.removeEventListener('scroll', updatePosition, true);
+			window.removeEventListener('resize', updatePosition);
+		}
+
+		return () => {
+			window.removeEventListener('scroll', updatePosition, true);
+			window.removeEventListener('resize', updatePosition);
+		};
+	});
+
 	function handleInput() {
 		dispatch('input', color);
 		oninput?.(color);
@@ -42,6 +70,7 @@
 
 <span class="color-picker">
 	<button
+		bind:this={buttonElement}
 		style:width="{size}px"
 		style:height="{size}px"
 		style:background-color={color}
@@ -58,6 +87,8 @@
 	{#if show}
 		<div
 			class="color-picker-wrap"
+			style:top="{pickerTop}px"
+			style:left="{pickerLeft}px"
 			use:clickOutside={{
 				callback: () => handleClose()
 			}}
@@ -82,9 +113,7 @@
 		border: 1px solid var(--border);
 	}
 	div {
-		position: absolute;
-		left: 0;
-		top: 100%;
+		position: fixed;
 		width: 0;
 		z-index: 1000;
 	}

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/index.css

@@ -50,6 +50,13 @@ a {
 	margin: auto;
 }
 
+.hds-container-max {
+    width: 1400px;
+    max-width: 100%;
+    padding: 0 15px;
+    margin: auto;
+}
+
 .hds-link {
 	color: var(--link);
 	text-decoration: underline;

package/dist/marketing/Container/Container.svelte

@@ -2,18 +2,22 @@
 	interface Props {
 		as?: string;
 		children?: import('svelte').Snippet;
+        max?: boolean;
 	}
 
-	let { as = 'div', children }: Props = $props();
+	let { as = 'div', children, max = false
+    }: Props = $props();
+
+    let width= max ? '1400px' : '1000px';
 </script>
 
-<svelte:element this={as} class="container">
+<svelte:element this={as} class="container" style:width={width}>
 	{@render children?.()}
 </svelte:element>
 
 <style>
 	.container {
-		width: 1000px;
+		/*width: 1000px;*/
 		max-width: 100%;
 		padding: 0 15px;
 		margin: auto;

package/dist/marketing/Container/Container.svelte.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     as?: string;
     children?: import('svelte').Snippet;
+    max?: boolean;
 }
 declare const Container: import("svelte").Component<Props, {}, "">;
 type Container = ReturnType<typeof Container>;

package/dist/marketing/Footer/Footer.svelte

@@ -24,6 +24,7 @@
 		center?: import('svelte').Snippet;
 		affiliate?: boolean;
 		recordVisit?: boolean;
+        max?: boolean;
 	}
 
 	let {
@@ -31,7 +32,8 @@
 		social = $bindable({} as Record<string, string | null>),
 		center,
 		affiliate = true,
-		recordVisit = true
+		recordVisit = true,
+        max = false,
 	}: Props = $props();
 
 	social = {
@@ -51,7 +53,7 @@
 </script>
 
 <footer>
-	<Container>
+	<Container {max}>
 		<div class="footer-top">
 			<div class="footer-top-left">
 				{#if email}

package/dist/marketing/Footer/Footer.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     center?: import('svelte').Snippet;
     affiliate?: boolean;
     recordVisit?: boolean;
+    max?: boolean;
 }
 declare const Footer: import("svelte").Component<Props, {}, "social">;
 type Footer = ReturnType<typeof Footer>;

package/dist/marketing/Header/Header.svelte

@@ -13,6 +13,7 @@
 		darkToggle?: boolean;
 		center?: import('svelte').Snippet;
 		end?: import('svelte').Snippet;
+        max?: boolean;
 	}
 
 	let {
@@ -22,12 +23,13 @@
 		subName = undefined,
 		darkToggle = true,
 		center,
-		end
+		end,
+        max = false,
 	}: Props = $props();
 </script>
 
 <header>
-	<Container as="nav">
+	<Container as="nav" {max}>
 		<div class="nav-start">
 			<a class="nav-brand" {href}>
 				<img src={logo} alt="Hyvor Logo" width="30" height="30" />

package/dist/marketing/Header/Header.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     darkToggle?: boolean;
     center?: import('svelte').Snippet;
     end?: import('svelte').Snippet;
+    max?: boolean;
 }
 declare const Header: import("svelte").Component<Props, {}, "">;
 type Header = ReturnType<typeof Header>;

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.2"
 }