@hyvor/design 0.0.8 → 0.0.9

package/dist/components/Base/Base.svelte

@@ -1,8 +1,10 @@
-<script>import DarkProvider from "./../Dark/DarkProvider.svelte";
+<script>import InternationalizationProvider from "./../Internationalization/InternationalizationProvider.svelte";
+import DarkProvider from "./../Dark/DarkProvider.svelte";
 import "../../index.js";
 </script>
 
 <DarkProvider />
+<InternationalizationProvider />
 
 <div id="base">
     <slot />

package/dist/components/Button/Button.svelte

@@ -106,6 +106,16 @@ export let align = "center";
 }
 
 /* Sizes */
+.button.x-small {
+  height: 20px;
+  padding: 0 8px;
+  font-size: 12px;
+  --local-hover-shadow-size: 1px;
+}
+.button.x-small:active {
+  --local-hover-shadow-size: 2px;
+}
+
 .button.small {
   height: 26px;
   padding: 0 12px;

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

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         as?: "button" | "a" | undefined;
-        size?: "small" | "medium" | "large" | undefined;
+        size?: "small" | "medium" | "large" | "x-small" | undefined;
         color?: "danger" | "accent" | "soft" | "light" | "invisible" | undefined;
         block?: boolean | undefined;
         align?: "start" | "center" | undefined;

package/dist/components/IconButton/IconButton.svelte

@@ -32,6 +32,7 @@ export let as = "button";
   align-items: center;
   justify-content: center;
   transition: 0.2s box-shadow;
+  font-size: 1em;
   --local-hover-shadow-size: 2.5px;
   --local-hover-shadow-color: var(--accent-light);
 }

package/dist/components/Internationalization/InternationalizationProvider.svelte

@@ -0,0 +1,6 @@
+<script>import { onMount, setContext } from "svelte";
+onMount(() => {
+  setContext("i18n", "not set");
+});
+</script>
+

package/dist/components/Internationalization/InternationalizationProvider.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InternationalizationProviderProps = typeof __propDef.props;
+export type InternationalizationProviderEvents = typeof __propDef.events;
+export type InternationalizationProviderSlots = typeof __propDef.slots;
+export default class InternationalizationProvider extends SvelteComponent<InternationalizationProviderProps, InternationalizationProviderEvents, InternationalizationProviderSlots> {
+}
+export {};

package/dist/components/Internationalization/LanguageToggle.svelte

@@ -0,0 +1,43 @@
+<script>import IconButton from "./../IconButton/IconButton.svelte";
+import Box from "../Box/Box.svelte";
+import { IconCaretUp } from "@hyvor/icons";
+import { page } from "$app/stores";
+const i18n = $page.data.i18n;
+</script>
+
+
+{#if i18n}
+    <div class="language-toggle">
+        <span class="current">
+            <span class="flag">🇫🇷</span>
+            <span class="name">Français (France)</span>
+            <span class="icon"><IconCaretUp size={14} /></span>
+        </span>
+    </div>
+{/if}
+
+<style>
+    .current {
+        padding: 4px 15px;
+        font-size: 15px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        box-shadow: var(--box-shadow);
+        border-radius: var(--box-radius);
+        background-color: var(--box-background);
+        transition: .2s box-shadow;
+    }
+    .current:hover {
+        box-shadow: var(--box-shadow-dark);
+    }
+    .flag {
+        margin-right: 6px;
+        font-size: 20px;
+    }
+    .icon {
+        margin-left: 8px;
+        display: inline-flex;
+        align-items: center;
+    }
+</style>

package/dist/components/Internationalization/LanguageToggle.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LanguageToggleProps = typeof __propDef.props;
+export type LanguageToggleEvents = typeof __propDef.events;
+export type LanguageToggleSlots = typeof __propDef.slots;
+export default class LanguageToggle extends SvelteComponent<LanguageToggleProps, LanguageToggleEvents, LanguageToggleSlots> {
+}
+export {};

package/dist/components/Internationalization/T.svelte

@@ -0,0 +1,5 @@
+<script>import { page } from "$app/stores";
+console.log("T", $page.data);
+</script>
+
+{ $page.data.lang.home.title }

package/dist/components/Internationalization/T.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TProps = typeof __propDef.props;
+export type TEvents = typeof __propDef.events;
+export type TSlots = typeof __propDef.slots;
+export default class T extends SvelteComponent<TProps, TEvents, TSlots> {
+}
+export {};

package/dist/components/Internationalization/i18n.d.ts

@@ -0,0 +1,18 @@
+type LoaderType = () => Promise<any>;
+interface Language {
+    code: string;
+    name: string;
+    loader: LoaderType;
+    default: boolean;
+}
+export declare class i18n {
+    private current;
+    private languages;
+    constructor(current: string);
+    register(code: string, name: string, loader: LoaderType, isDefault?: boolean): void;
+    found(code: string): boolean;
+    languageByCode(code: string): Language | undefined;
+    getCurrent(): Language | undefined;
+    load(code: string): Promise<any>;
+}
+export {};

package/dist/components/Internationalization/i18n.js

@@ -0,0 +1,27 @@
+export class i18n {
+    current;
+    languages = [];
+    constructor(current) {
+        this.current = current;
+    }
+    register(code, name, loader, isDefault = false) {
+        this.languages.push({
+            code,
+            name,
+            loader,
+            default: isDefault
+        });
+    }
+    found(code) {
+        return !!this.languageByCode(code);
+    }
+    languageByCode(code) {
+        return this.languages.find(l => l.code === code);
+    }
+    getCurrent() {
+        return this.languageByCode(this.current);
+    }
+    async load(code) {
+        return (await this.languageByCode(code)?.loader()).default;
+    }
+}

package/dist/components/Link/Link.svelte

@@ -47,6 +47,9 @@ export let underline = true;
     a.color-accent {
         --local-color: var(--accent);
     }
+    a.color-text {
+        --local-color: var(--text);
+    }
     a.underline {
         text-decoration: underline;
         text-decoration-color: var(--local-color);

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

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         href: string;
-        color?: "accent" | "link" | undefined;
+        color?: "accent" | "text" | "link" | undefined;
         underline?: boolean | undefined;
     };
     events: {

package/dist/components/NavLink/NavLink.svelte

@@ -0,0 +1,85 @@
+<script>export let href;
+export let active = false;
+</script>
+
+<a 
+    {href}
+    class:active={active}
+
+    on:keyup
+    on:keydown
+    on:keypress
+    on:focus
+    on:blur
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:change
+>
+
+
+
+    {#if $$slots.start}
+        <span class="start">
+            <slot name="start" />
+        </span>
+    {/if}
+
+    <span class="middle">
+        <slot />
+    </span>
+    
+    {#if $$slots.end}
+        <span class="end">
+            <slot name="end" />
+        </span>
+    {/if}
+</a>
+
+
+<style>
+
+    a {
+        display: flex;
+        padding: 12px 29px;
+        font-size: 14px;
+        letter-spacing: .3px;
+        border-left: 3px solid transparent;
+        cursor: pointer;
+        /* align-items: center; */
+    }
+
+    a:hover {
+        background-color: var(--hover);
+    
+    }
+
+    a.active {
+        background-color: var(--accent-lightest);
+        border-left: 3px solid var(--accent);
+    }
+
+    .start, .middle, .end {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .middle {
+        flex: 1;
+         /* display: flex;  */
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .start {
+        margin-right: 8px;
+        
+    }
+
+    .end {
+        margin-left: 8px;
+    }
+
+
+</style>

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

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        href: string;
+        active?: boolean | undefined;
+    };
+    events: {
+        keyup: KeyboardEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        start: {};
+        default: {};
+        end: {};
+    };
+};
+export type NavLinkProps = typeof __propDef.props;
+export type NavLinkEvents = typeof __propDef.events;
+export type NavLinkSlots = typeof __propDef.slots;
+export default class NavLink extends SvelteComponent<NavLinkProps, NavLinkEvents, NavLinkSlots> {
+}
+export {};

package/dist/components/Tooltip/Tooltip.svelte

@@ -35,6 +35,13 @@ async function handleMouseEnter() {
 function handleMouseLeave() {
   show = false;
 }
+$: {
+  if (text) {
+    tick().then(() => {
+      positionTooltip();
+    });
+  }
+}
 onMount(() => {
   positionTooltip();
   document.addEventListener("scroll", positionTooltip);

package/dist/components/index.d.ts

@@ -20,6 +20,7 @@ export { default as Validation } from './FormControl/Validation.svelte';
 export { default as IconButton } from './IconButton/IconButton.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
+export { default as NavLink } from './NavLink/NavLink.svelte';
 export { default as Radio } from './Radio/Radio.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';
 export { default as Switch } from './Switch/Switch.svelte';

package/dist/components/index.js

@@ -20,6 +20,7 @@ export { default as Validation } from './FormControl/Validation.svelte';
 export { default as IconButton } from './IconButton/IconButton.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
+export { default as NavLink } from './NavLink/NavLink.svelte';
 export { default as Radio } from './Radio/Radio.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';
 export { default as Switch } from './Switch/Switch.svelte';

package/dist/marketing/Docs/Docs.svelte

@@ -18,7 +18,7 @@
         margin: auto;
         width: 1150px;
         max-width: 100%;
-        padding-bottom: 100px;
+        padding-bottom: 40px;
         /* min-height: calc(100vh - var(--header-height)); */
     }
 

package/dist/marketing/Docs/Nav/Nav.svelte

@@ -17,12 +17,14 @@
         padding: 25px 0;
         position: sticky;
         flex-shrink: 0;
-        align-self: flex-start;;
+        align-self: flex-start;
+        max-height: calc(100vh - var(--header-height));
     }
 
     .docs-nav :global(.nav-inner) {
         padding: 15px 0;
         overflow-y: auto;
+        max-height: calc(100vh - var(--header-height) - 50px);
     }
 
 </style>

package/dist/marketing/Footer/Footer.svelte

@@ -0,0 +1,159 @@
+<script>import Container from "../Container/Container.svelte";
+import { IconCopy, IconDiscord, IconEnvelope, IconGithub, IconLinkedin, IconTwitterX, IconYoutube } from "@hyvor/icons";
+import Link from "../../components/Link/Link.svelte";
+import IconButton from "../../components/IconButton/IconButton.svelte";
+import Tooltip from "../../components/Tooltip/Tooltip.svelte";
+import LanguageToggle from "../../components/Internationalization/LanguageToggle.svelte";
+const year = (/* @__PURE__ */ new Date()).getFullYear();
+export let email = null;
+export let social = {};
+social = {
+  ...{
+    x: null,
+    discord: "https://discord.com/invite/2WRJxQB",
+    github: "https://github.com/hyvor",
+    youtube: "https://www.youtube.com/@HYVOR",
+    linkedin: "https://www.linkedin.com/company/30240435"
+  },
+  ...social
+};
+export let emailCopied = false;
+function handleCopy() {
+  navigator.clipboard.writeText(email);
+  emailCopied = true;
+  setTimeout(() => {
+    emailCopied = false;
+  }, 1e3);
+}
+</script>
+
+<footer>
+
+    <Container>
+
+        <div class="footer-top">
+
+            <div class="footer-top-left">
+            
+                {#if email}
+                    <div class="email-wrap">
+                        <Link href="mailto:{email}" underline={false} color="text" rel="nofollow">
+                            <IconEnvelope slot="start" />
+                            { email }
+                        </Link>
+                        <Tooltip text={emailCopied ? "Copied!" : "Copy email"} position="top">
+                            <IconButton 
+                                size="small" 
+                                color="invisible" 
+                                on:click={handleCopy}
+                                on:mouseleave={() => emailCopied = false}
+                            >
+                                <IconCopy size={12} />
+                            </IconButton>
+                        </Tooltip>
+                    </div>
+                {/if}
+
+                <div class="social-media">
+                    {#if social.github}
+                        <a href={social.github} target="_blank" rel="nofollow"><IconGithub /></a>
+                    {/if}
+                    {#if social.x}
+                        <a href={social.x} target="_blank" rel="nofollow"><IconTwitterX /></a>
+                    {/if}
+                    {#if social.discord}
+                        <a href={social.discord} target="_blank" rel="nofollow"><IconDiscord /></a>
+                    {/if}
+                    {#if social.youtube}
+                        <a href={social.discord} target="_blank" rel="nofollow"><IconYoutube /></a>
+                    {/if}
+                    {#if social.linkedin}
+                        <a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a>
+                    {/if}
+                </div>
+
+            </div>
+
+            <div class="footer-top-right">
+
+
+                <span class="language-toggle-wrap">
+                    <LanguageToggle />
+                </span>
+
+            </div>
+
+        </div>
+
+        <div class="footer-center">
+            <slot name="center" />
+        </div>
+
+        <div class="footer-bottom">
+            <div class="footer-bottom-left">
+                HYVOR © {year}
+            </div> 
+            <div class="footer-bottom-right">
+                From France 🇫🇷
+            </div>
+        </div>
+
+    </Container>
+
+</footer>
+
+<style>
+
+    footer {
+        border-top: 1px solid var(--border)
+    }
+
+    .footer-top {
+        padding-top: 60px;
+        display: flex;
+        align-items: flex-start;
+    }
+    .footer-center {
+        padding-top: 50px;
+    }
+    .footer-top-left {
+        flex: 1;
+    }
+    .footer-top-right {
+        display: flex;
+    }
+    .email-wrap {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        margin-bottom: 15px;
+    }
+    .social-media a {
+        display: inline-block;
+        padding: 3px;
+        margin-right: 8px;
+        color: var(--text-light);
+    }
+    .social-media a:first-child {
+        padding-left: 0;
+    }
+    .social-media a:hover {
+        color: var(--accent);
+    }
+
+    .footer-bottom {
+        padding-top: 50px;
+        padding-bottom: 30px;
+        display: flex;
+    }
+    .footer-bottom-left {
+        flex: 1;
+    }
+
+
+	.language-toggle-wrap {
+		margin-left: 8px;
+		font-size: 18px;
+	}
+
+</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        email?: string | null | undefined;
+        social?: Record<string, string | null> | undefined;
+        emailCopied?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        center: {};
+    };
+};
+export type FooterProps = typeof __propDef.props;
+export type FooterEvents = typeof __propDef.events;
+export type FooterSlots = typeof __propDef.slots;
+export default class Footer extends SvelteComponent<FooterProps, FooterEvents, FooterSlots> {
+}
+export {};

package/dist/marketing/Footer/FooterLinkList.svelte

@@ -0,0 +1,36 @@
+<script>export let title;
+</script>
+
+<div class="link-list">
+    <div class="title">{title}</div>
+    <div class="links">
+        <slot />
+    </div>
+</div>
+
+<style>
+
+    .link-list {
+        flex: 1;
+    }
+
+    .title {
+        font-weight: 600;
+        text-transform: uppercase;
+        margin-bottom: 10px;
+    }
+
+    .links {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .links :global(a) {
+        margin-top: 12px;
+    }
+    .links :global(a:hover) {
+        text-decoration: underline;
+    }
+
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FooterLinkListProps = typeof __propDef.props;
+export type FooterLinkListEvents = typeof __propDef.events;
+export type FooterLinkListSlots = typeof __propDef.slots;
+export default class FooterLinkList extends SvelteComponent<FooterLinkListProps, FooterLinkListEvents, FooterLinkListSlots> {
+}
+export {};

package/dist/marketing/Header/Header.svelte

@@ -2,6 +2,7 @@
 import DarkToggle from "../../components/Dark/DarkToggle.svelte";
 import IconButton from "../../components/IconButton/IconButton.svelte";
 import Dropdown from "../../components/Dropdown/Dropdown.svelte";
+import Tooltip from "../../components/Tooltip/Tooltip.svelte";
 import { IconList } from "@hyvor/icons";
 export let logo;
 export let name = "HYVOR";
@@ -135,14 +136,19 @@ header :global(nav) {
   gap: 6px;
 }
 
-.dark-toggle-wrap {
-  margin-left: 8px;
-}
-
 .mobile-nav-wrap {
   display: none;
 }
 
+.dark-mobile {
+  display: inline-flex;
+  align-items: center;
+}
+
+.dark-toggle-wrap {
+  margin-left: 8px;
+}
+
 @media screen and (max-width: 992px) {
   .nav-center {
     display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.8",
+	"version": "0.0.9",
 	"license": "MIT",
 	"private": false,
 	"scripts": {
@@ -28,12 +28,12 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^4.0.0"
+		"svelte": "^4.0.0",
+		"@sveltejs/kit": "^1.25.1"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-static": "^2.0.3",
-		"@sveltejs/kit": "^1.25.1",
 		"@sveltejs/package": "^2.0.0",
 		"publint": "^0.1.9",
 		"sass": "^1.68.0",
@@ -41,16 +41,12 @@
 		"svelte-check": "^3.4.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
+		"vite": "^4.4.2",
+		"@hyvor/icons": "^0.0.3",
+		"highlight.js": "^11.9.0",
+		"@fontsource/readex-pro": "^5.0.8"
 	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
 	"type": "module",
-	"dependencies": {
-		"@fontsource/readex-pro": "^5.0.8",
-		"@hyvor/icons": "^0.0.2",
-		"highlight.js": "^11.9.0"
-	},
 	"publishConfig": {
 		"access": "public"
 	}