feat: navigation bars, tabs

.storybook/main.ts

@@ -7,6 +7,12 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        postCss: true
+      }
+    },
     'storybook-tailwind-dark-mode'
   ],
   framework: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impierce/ui-components",
-  "version": "0.0.14-alpha",
+  "version": "0.0.15-alpha",
   "repository": {
     "type": "git",
     "url": "https://github.com/Impierce/ui-components.git"
@@ -60,6 +60,7 @@
     "@storybook/addon-essentials": "~7.0.27",
     "@storybook/addon-interactions": "~7.0.27",
     "@storybook/addon-links": "~7.0.27",
+    "@storybook/addon-styling": "^1.3.5",
     "@storybook/blocks": "~7.0.27",
     "@storybook/svelte": "~7.0.27",
     "@storybook/sveltekit": "~7.0.27",

src/lib/atoms/BottomNavigationItem.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let active: boolean = false;
+  export let label: string;
+</script>
+
+<button
+  class="rounded-full py-2 px-6 hover:bg-slate-100 dark:hover:bg-slate-700"
+  on:click={() => dispatch('click')}
+>
+  <div class="flex h-12 w-10 flex-col items-center justify-center">
+    <!-- Currently, there is no better way of applying conditional Tailwind classes to a named slot inside a component. -->
+    <slot name="icon" />
+    <div
+      class={`pt-1 text-xs ${
+        active ? 'text-violet-700 dark:text-violet-600' : 'text-slate-500 dark:text-slate-400'
+      }`}
+    >
+      {label}
+    </div>
+  </div>
+</button>

src/lib/components/ui/tabs/TabsContent.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { TabsContentProps } from "radix-svelte";
+	import { Tabs as TabsPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let value: TabsContentProps["value"];
+</script>
+
+<TabsPrimitive.Content
+	class={cn(
+		"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+		className
+	)}
+	{value}
+	{...$$restProps}
+>
+	<slot />
+</TabsPrimitive.Content>

src/lib/components/ui/tabs/TabsList.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<TabsPrimitive.List
+	class={cn(
+		"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TabsPrimitive.List>

src/lib/components/ui/tabs/TabsTrigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { TabsTriggerProps } from "radix-svelte";
+	import { Tabs as TabsPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let value: TabsTriggerProps["value"];
+</script>
+
+<TabsPrimitive.Trigger
+	class={cn(
+		"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+		className
+	)}
+	{value}
+	{...$$restProps}
+>
+	<slot />
+</TabsPrimitive.Trigger>

src/lib/components/ui/tabs/index.ts

@@ -0,0 +1,7 @@
+import { Tabs as TabsPrimitive } from "radix-svelte";
+
+export { default as TabsContent } from "./TabsContent.svelte";
+export { default as TabsList } from "./TabsList.svelte";
+export { default as TabsTrigger } from "./TabsTrigger.svelte";
+
+export const Tabs = TabsPrimitive.Root;

src/lib/index.js

@@ -7,8 +7,11 @@ import Avatar from './atoms/Avatar.svelte';
 import ProgressBar from './atoms/ProgressBar.svelte';
 import LanguageSelect from './atoms/LanguageSelect.svelte';
 import Select from './atoms/Select.svelte';
+import SearchInput from './atoms/Input.svelte';
 
 // Molecules
+import ActivityTabs from './molecules/ActivityTabs.svelte';
+import TopNavigation from './molecules/TopNavigation.svelte';
 import BottomNavigation from './molecules/BottomNavigation.svelte';
 import CredentialListEntry from './molecules/CredentialListEntry.svelte';
 
@@ -26,24 +29,32 @@ import { ThreeDotsFade as LoadingSpinner } from 'svelte-svg-spinners';
 
 // Melt UI
 import MeltUiSelect from './melt-ui/Select.svelte';
+import MeltUiActivityTabs from './melt-ui/tabs/ActivityTabs.svelte';
+import MeltUiConnectionTabs from './melt-ui/tabs/ConnectionTabs.svelte';
 
 export {
   Avatar,
+  SearchInput,
   Button,
   LanguageSelect,
   Select,
+  ActivityTabs,
   MeltUiSelect,
+  MeltUiActivityTabs,
+  MeltUiConnectionTabs,
   LoadingSpinner,
   Input,
   Label,
   Checkbox,
   ProgressBar,
+  TopNavigation,
   BottomNavigation,
   CredentialListEntry,
   ActionTemplate,
   DetailsTemplate
 };
 
+export * from './components/ui/tabs';
 export * from './components/ui/sheet';
 // export * from './components/ui/alert';
 export * from './components/ui/alert-dialog';

src/lib/melt-ui/tabs/ActivityTabs.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { createTabs } from '@melt-ui/svelte';
+
+  const { root, list, content, trigger } = createTabs({
+    value: 'connections'
+  });
+</script>
+
+<div
+  melt={$root}
+  class="flex h-full flex-col
+    overflow-hidden data-[orientation=vertical]:flex-row"
+>
+  <div
+    melt={$list}
+    class="flex h-[57px] shrink-0 overflow-x-auto border-b bg-white
+      data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-r"
+    aria-label="Manage your activity"
+  >
+    <button melt={$trigger('connections')} class="trigger font-medium text-slate-500"
+      >Connections</button
+    >
+    <button melt={$trigger('history')} class="trigger font-medium text-slate-500">History</button>
+  </div>
+
+  <div melt={$content('connections')} class="grow bg-white">
+    <slot name="connections" />
+  </div>
+
+  <div melt={$content('history')} class="grow bg-white">
+    <slot name="history" />
+  </div>
+</div>
+
+<style lang="postcss">
+  .trigger {
+    display: flex;
+    /* height: theme(spacing.11); */
+    flex: 1;
+    cursor: default;
+    user-select: none;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0;
+    background-color: theme(colors.white);
+    padding-inline: theme(spacing.2);
+    line-height: 1;
+    /* color: theme(colors.blue.900); */
+
+    &:focus {
+      position: relative;
+    }
+
+    &[data-orientation='vertical'] {
+      @apply w-full flex-grow-0 rounded-none border-b border-r-2;
+      @apply border-transparent border-b-blue-100 py-4 last:border-b-0;
+    }
+
+    &[data-state='active'] {
+      @apply text-violet-700 focus:relative;
+    }
+
+    &[data-state='active'][data-orientation='horizontal'] {
+      @apply shadow-[inset_0_-1px_0_0,0_1px_0_0] shadow-current focus:relative;
+    }
+
+    &[data-state='active'][data-orientation='vertical'] {
+      @apply border-r-blue-500;
+    }
+  }
+
+  /* input {
+    height: theme(spacing.8);
+    flex-shrink: 0;
+    flex-grow: 1;
+    border-radius: theme(borderRadius.md);
+    border: 1px solid theme(colors.neutral.200);
+    padding-inline: theme(spacing[2.5]);
+    line-height: 1;
+    color: theme(colors.blue.900);
+
+    &:focus {
+      border-color: theme(colors.blue.400);
+    }
+  } */
+
+  /* .save {
+    display: inline-flex;
+    height: theme(spacing.8);
+    cursor: default;
+    align-items: center;
+    justify-content: center;
+    border-radius: theme(borderRadius.md);
+    background-color: theme(colors.green.100);
+    padding-inline: theme(spacing.4);
+    line-height: 1;
+    font-weight: theme(fontWeight.semibold);
+    color: theme(colors.green.900);
+
+    &:hover {
+      background-color: theme(colors.green.200);
+    }
+
+    &:focus {
+      @apply !ring-green-600;
+    }
+  } */
+</style>

src/lib/melt-ui/tabs/ConnectionTabs.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { createTabs } from '@melt-ui/svelte';
+
+  const { root, list, content, trigger } = createTabs({
+    value: 'summary'
+  });
+</script>
+
+<div
+  melt={$root}
+  class="flex h-full flex-col
+    overflow-hidden data-[orientation=vertical]:flex-row"
+>
+  <div
+    melt={$list}
+    class="flex h-[57px] shrink-0 overflow-x-auto border-b bg-white
+      data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-r"
+    aria-label="Manage your connection"
+  >
+    <button melt={$trigger('summary')} class="trigger font-medium text-slate-500">Summary</button>
+    <button melt={$trigger('data')} class="trigger font-medium text-slate-500">Data</button>
+    <button melt={$trigger('history')} class="trigger font-medium text-slate-500">History</button>
+  </div>
+
+  <div melt={$content('summary')} class="grow bg-white">
+    <slot name="summary" />
+  </div>
+
+  <div melt={$content('data')} class="grow bg-white">
+    <slot name="data" />
+  </div>
+
+  <div melt={$content('history')} class="grow bg-white">
+    <slot name="history" />
+  </div>
+</div>
+
+<style lang="postcss">
+  .trigger {
+    display: flex;
+    /* height: theme(spacing.11); */
+    flex: 1;
+    cursor: default;
+    user-select: none;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0;
+    background-color: theme(colors.white);
+    padding-inline: theme(spacing.2);
+    line-height: 1;
+    /* color: theme(colors.blue.900); */
+
+    &:focus {
+      position: relative;
+    }
+
+    &[data-orientation='vertical'] {
+      @apply w-full flex-grow-0 rounded-none border-b border-r-2;
+      @apply border-transparent border-b-blue-100 py-4 last:border-b-0;
+    }
+
+    &[data-state='active'] {
+      @apply text-violet-700 focus:relative;
+    }
+
+    &[data-state='active'][data-orientation='horizontal'] {
+      @apply shadow-[inset_0_-1px_0_0,0_1px_0_0] shadow-current focus:relative;
+    }
+
+    &[data-state='active'][data-orientation='vertical'] {
+      @apply border-r-blue-500;
+    }
+  }
+
+  /* input {
+    height: theme(spacing.8);
+    flex-shrink: 0;
+    flex-grow: 1;
+    border-radius: theme(borderRadius.md);
+    border: 1px solid theme(colors.neutral.200);
+    padding-inline: theme(spacing[2.5]);
+    line-height: 1;
+    color: theme(colors.blue.900);
+
+    &:focus {
+      border-color: theme(colors.blue.400);
+    }
+  } */
+
+  /* .save {
+    display: inline-flex;
+    height: theme(spacing.8);
+    cursor: default;
+    align-items: center;
+    justify-content: center;
+    border-radius: theme(borderRadius.md);
+    background-color: theme(colors.green.100);
+    padding-inline: theme(spacing.4);
+    line-height: 1;
+    font-weight: theme(fontWeight.semibold);
+    color: theme(colors.green.900);
+
+    &:hover {
+      background-color: theme(colors.green.200);
+    }
+
+    &:focus {
+      @apply !ring-green-600;
+    }
+  } */
+</style>