@returnless/focus-ui 0.0.1 → 0.0.3

package/src/components/Page/Page.vue

@@ -1,38 +1,7 @@
-<script lang="ts" setup>
-import { Component, computed, h, useSlots } from 'vue';
-
-const props = defineProps<{
-  /** Navigation component to render in the left column */
-  navigation?: Component;
-}>();
-
-const slots = useSlots();
-
-const hasNavigation = computed(() => props.navigation || !!slots['page-navigation']);
-
-const PageNavigation = props.navigation
-  ? h(props.navigation)
-  : h('div');
-
-const contentClassList = computed(() => {
-  return hasNavigation.value ? 'col-span-9' : 'col-span-12';
-});
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <div class="mx-auto max-w-8xl p-8">
-    <div class="grid grid-cols-12 gap-x-4">
-      <div
-        v-if="hasNavigation"
-        class="col-span-3"
-      >
-        <PageNavigation />
-        <slot name="page-navigation" />
-      </div>
-
-      <div :class="contentClassList">
-        <slot />
-      </div>
-    </div>
+    <slot />
   </div>
 </template>

package/src/components/Page/PageBody.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { Component, computed, h, useSlots } from 'vue';
+
+const props = defineProps<{
+  /** Navigation component to render in the left column */
+  navigation?: Component;
+}>();
+
+const slots = useSlots();
+
+const hasNavigation = computed((): boolean | Component => props.navigation || !!slots['page-navigation']);
+
+const PageNavigation = props.navigation
+  ? h(props.navigation)
+  : h('div');
+
+const contentClassList = computed((): string => {
+  return hasNavigation.value ? 'col-span-9' : 'col-span-12';
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-x-4">
+    <div
+      v-if="hasNavigation"
+      class="col-span-3"
+    >
+      <PageNavigation />
+      <slot name="page-navigation" />
+    </div>
+
+    <div :class="contentClassList">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/Page/PageTitle.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
-
+import { Heading } from '../Heading';
 </script>
 
 <template>
-  <h1 class="text-2xl font-semibold leading-none">
+  <Heading
+    level="h1"
+    size="2xl"
+  >
     <slot />
-  </h1>
+  </Heading>
 </template>

package/src/components/Page/README.md

@@ -8,6 +8,7 @@ import {
   CardDescription,
   CardSection,
   Page,
+  PageBody,
   PageDescription, 
   PageHeader,
   PageTitle,
@@ -64,7 +65,7 @@ import {
   PageDescription, 
   PageHeader,
   PageTitle,
-} from 'focus-ui';
+} from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -96,15 +97,6 @@ import {
 
 <ComponentWrapper>
   <Page>
-    <template #page-navigation>
-      <Navigation>
-        <NavigationSection>
-          <NavigationItem active>Navigation item 1</NavigationItem>
-          <NavigationItem>Navigation item 2</NavigationItem>
-          <NavigationItem>Navigation item 3</NavigationItem>
-        </NavigationSection>
-      </Navigation>
-    </template>
     <PageHeader :back-action="{ content: 'Overview', href: '#' }">
       <PageTitle>The page title</PageTitle>
       <PageDescription>The page title</PageDescription>
@@ -115,15 +107,26 @@ import {
         </ButtonGroup>
       </template>
     </PageHeader>
-    <Card>
-      <CardHeader>
-        <CardTitle>Notifications</CardTitle>
-        <CardDescription>You have 3 unread messages.</CardDescription>
-      </CardHeader>
-      <CardSection>
-        <div>Card content</div>
-      </CardSection>
-    </Card>
+    <PageBody>
+      <template #page-navigation>
+        <Navigation>
+          <NavigationSection>
+            <NavigationItem active href="#">Navigation item 1</NavigationItem>
+            <NavigationItem href="#">Navigation item 2</NavigationItem>
+            <NavigationItem href="#">Navigation item 3</NavigationItem>
+          </NavigationSection>
+        </Navigation>
+      </template>
+      <Card>
+        <CardHeader>
+          <CardTitle>Notifications</CardTitle>
+          <CardDescription>You have 3 unread messages.</CardDescription>
+        </CardHeader>
+        <CardSection>
+          <div>Card content</div>
+        </CardSection>
+      </Card>
+    </PageBody>
   </Page>
 </ComponentWrapper>
 
@@ -140,27 +143,19 @@ import {
   CardDescription,
   CardSection,
   Page,
+  PageBody,
   PageDescription, 
   PageHeader,
   PageTitle,
   Navigation,
   NavigationItem,
   NavigationSection,
-} from 'focus-ui';
+} from '@returnless/focus-ui';
 </script>
 
 <template>
   <Page>
-    <template v-slot:page-navigation>
-      <Navigation>
-        <NavigationSection>
-          <NavigationItem active>Navigation item 1</NavigationItem>
-          <NavigationItem>Navigation item 2</NavigationItem>
-          <NavigationItem>Navigation item 3</NavigationItem>
-        </NavigationSection>
-      </Navigation>
-    </template>
-    <PageHeader v-bind:back-action="{ content: 'Overview', href: '#' }">
+    <PageHeader :back-action="{ content: 'Overview', href: '#' }">
       <PageTitle>The page title</PageTitle>
       <PageDescription>The page title</PageDescription>
       <template v-slot:page-header-actions>
@@ -170,15 +165,26 @@ import {
         </ButtonGroup>
       </template>
     </PageHeader>
-    <Card>
-      <CardHeader>
-        <CardTitle>Notifications</CardTitle>
-        <CardDescription>You have 3 unread messages.</CardDescription>
-      </CardHeader>
-      <CardSection>
-        <div>Card content</div>
-      </CardSection>
-    </Card>
+    <PageBody>
+      <template #page-navigation>
+        <Navigation>
+          <NavigationSection>
+            <NavigationItem active>Navigation item 1</NavigationItem>
+            <NavigationItem>Navigation item 2</NavigationItem>
+            <NavigationItem>Navigation item 3</NavigationItem>
+          </NavigationSection>
+        </Navigation>
+      </template>
+      <Card>
+        <CardHeader>
+          <CardTitle>Notifications</CardTitle>
+          <CardDescription>You have 3 unread messages.</CardDescription>
+        </CardHeader>
+        <CardSection>
+          <div>Card content</div>
+        </CardSection>
+      </Card>
+    </PageBody>
   </Page>
 </template>
 ```

package/src/components/Page/index.ts

@@ -1,4 +1,5 @@
 export { default as Page } from './Page.vue';
+export { default as PageBody } from './PageBody.vue';
 export { default as PageDescription } from './PageDescription.vue';
 export { default as PageHeader } from './PageHeader.vue';
 export { default as PageTitle } from './PageTitle.vue';

package/src/components/Pagination/README.md

@@ -25,7 +25,7 @@ import {
   Pagination,
   PaginationPreviousButton,
   PaginationNextButton,
-} from 'focus-ui';
+} from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/PinInput/README.md

@@ -26,7 +26,7 @@ user to enter a pin code, such as a 2FA forms.
 
 ```js-vue
 <script lang="ts" setup>
-import { PinInput } from 'focus-ui';
+import { PinInput } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/Popover/Popover.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { Popper } from '../Popper';
+import { Alignment } from '@floating-ui/vue';
+
+defineProps<{
+  /** The alignment of the popover */
+  alignment: Alignment;
+}>();
+</script>
+
+<template>
+  <Popper
+    trigger="click"
+    :placement="`bottom-${alignment}`"
+  >
+    <slot />
+  </Popper>
+</template>

package/src/components/Popover/PopoverBody.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { PopperBody } from '../Popper';
+</script>
+
+<template>
+  <PopperBody>
+    <div class="overflow-hidden rounded-md border bg-white shadow-lg">
+      <slot />
+    </div>
+  </PopperBody>
+</template>

package/src/components/Popover/PopoverTrigger.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { PopperTrigger } from '../Popper';
+</script>
+
+<template>
+  <PopperTrigger>
+    <slot />
+  </PopperTrigger>
+</template>

package/src/components/Popover/README.md

@@ -1,8 +1,36 @@
+<script lang="ts" setup>
+import {
+  Button,
+  PopoverBody,
+  Popover,
+  PopoverTrigger,
+} from '../../src/components'; 
+import api from '../component-meta/Popover.json';
+</script>
+
 # Popover
 
 Popovers are small overlays that open on demand. They let users access additional content and actions without cluttering
 the page.
 
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <Popover alignment="start">
+    <PopoverTrigger>
+      <Button>Popper trigger</Button>
+    </PopoverTrigger>
+    <PopoverBody>
+      <div class="p-4">
+        Popover body content here
+      </div>
+    </PopoverBody>
+  </Popover>
+</ComponentWrapper>
+
+
 ## Best practices
 
 Popovers should:
@@ -33,19 +61,19 @@ If the popover includes a series of navigational links, each item should:
 
 Popovers usually contain an `option list` or `action list`, but can also contain other controls or content.
 
-To assist screen readers with sending focus to an `action list`, pass `autofocusTarget="first-node"` to the 
-`Popover`. This will avoid known issues a screen reader may have with keyboard support once focus is moved off the 
+To assist screen readers with sending focus to an `action list`, pass `autofocusTarget="first-node"` to the
+`Popover`. This will avoid known issues a screen reader may have with keyboard support once focus is moved off the
 activator.
 
-Web browsers assign a default value of `menu` to the `aria-haspopup` role. You can use the prop `ariaHaspopup` to 
-specify a value. Screen readers may fail to send focus to the `Popover` content when they expect the content to be 
-adjacent to the element with `aria-haspopup` in the DOM tree. In this scenario, it is recommended not to provide 
+Web browsers assign a default value of `menu` to the `aria-haspopup` role. You can use the prop `ariaHaspopup` to
+specify a value. Screen readers may fail to send focus to the `Popover` content when they expect the content to be
+adjacent to the element with `aria-haspopup` in the DOM tree. In this scenario, it is recommended not to provide
 the `ariaHaspopup` prop.
 
 ### Keyboard support
 
 - When a popover opens, focus moves to the first focusable element or to the popover container.
-- Once focus is in the popover, users can access controls in the popover using the tab key (and shift + tab 
+- Once focus is in the popover, users can access controls in the popover using the tab key (and shift + tab
   backwards) and standard keystrokes for interacting.
 - Users can dismiss the popover by tabbing out of it, pressing the esc key, or clicking outside of it.
 - When the popover is closed, focus returns to the element that launched it.

package/src/components/Popover/index.ts

@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.vue';
+export { default as PopoverBody } from './PopoverBody.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';

package/src/components/Popper/Popper.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import { useUniqueId } from '../../composables';
+import { onMounted, provide, ref } from 'vue';
+import { type ReferenceElement, computePosition, flip, shift, offset, Placement } from '@floating-ui/vue';
+import { onClickOutside } from '@vueuse/core';
+
+const props = defineProps<{
+  /** The trigger event of the popper */
+  trigger: 'click' | 'hover';
+
+  /** The placement of the popper */
+  placement: Placement;
+}>();
+
+const popperBodyId = useUniqueId('popperBody');
+const popperTriggerId = useUniqueId('popperTrigger');
+
+const popperBodyVisible = ref(false);
+
+const $popperWrapper = ref<HTMLElement>()!;
+const $popperTrigger = ref<HTMLElement>();
+const $popperBody = ref<HTMLElement>();
+
+provide('popperBodyId', popperBodyId);
+provide('popperTriggerId', popperTriggerId);
+provide('popperBodyVisible', popperBodyVisible);
+
+function computePopperPosition(): void {
+  computePosition($popperTrigger.value as ReferenceElement, $popperBody.value!, {
+    placement: props.placement,
+    middleware: [
+      offset(6),
+      flip(),
+      shift({
+        padding: 5,
+      }),
+    ],
+  }).then(({ x, y }: { x: number; y: number }): void => {
+    Object.assign($popperBody.value!.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+    });
+  });
+}
+
+function showPopperContent(): void {
+  popperBodyVisible.value = true;
+
+  computePopperPosition();
+}
+
+function hidePopperContent(): void {
+  popperBodyVisible.value = false;
+}
+
+function handleHoverPopper(): void {
+  $popperTrigger.value!.addEventListener('mouseenter', showPopperContent);
+  $popperTrigger.value!.addEventListener('mouseleave', hidePopperContent);
+}
+
+function handleClickPopper(): void {
+  $popperTrigger.value!.addEventListener('click', (): void => {
+    popperBodyVisible.value
+      ? hidePopperContent()
+      : showPopperContent();
+  });
+}
+
+onMounted((): void => {
+  $popperTrigger.value = document.getElementById(popperTriggerId)!;
+  $popperBody.value = document.getElementById(popperBodyId)!;
+
+  onClickOutside($popperWrapper, (): void => {
+    hidePopperContent();
+  });
+
+  if (props.trigger === 'hover') {
+    handleHoverPopper();
+  }
+
+  if (props.trigger === 'click') {
+    handleClickPopper();
+  }
+});
+</script>
+
+<template>
+  <span ref="$popperWrapper">
+    <slot />
+  </span>
+</template>

package/src/components/Popper/PopperBody.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { inject } from 'vue';
+
+const popperBodyId = inject<string>('popperBodyId');
+const popperBodyVisible = inject<boolean>('popperBodyVisible');
+</script>
+
+<template>
+  <div
+    :id="popperBodyId"
+    class="absolute"
+    :class="{
+      'hidden': !popperBodyVisible,
+      'block': popperBodyVisible,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/Popper/PopperTrigger.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { inject } from 'vue';
+
+const popperTriggerId = inject<string>('popperTriggerId');
+</script>
+
+<template>
+  <span
+    :id="popperTriggerId"
+    class="inline-block"
+  >
+    <slot />
+  </span>
+</template>

package/src/components/Popper/README.md

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import {
+  Button,
+  PopperBody,
+  Popper,
+  PopperTrigger,
+} from '../../src/components'; 
+import api from '../component-meta/Popper.json';
+</script>
+
+# Popper (internal)
+
+This component is used to create a popper component that can be triggered by a click or hover event. The popper component
+is used for components like tooltips, dropdowns, and popovers.
+
+<ComponentApi :api="api" />
+
+## Click
+
+<ComponentWrapper>
+  <Popper trigger="click">
+    <PopperTrigger>
+      <Button>Popper trigger</Button>
+    </PopperTrigger>
+    <PopperBody>
+      Tooltip
+    </PopperBody>
+  </Popper>
+</ComponentWrapper>
+
+## Hover
+
+<ComponentWrapper>
+  <Popper trigger="hover">
+    <PopperTrigger>
+      <Button>Popper trigger</Button>
+    </PopperTrigger>
+    <PopperBody>
+      Tooltip
+    </PopperBody>
+  </Popper>
+</ComponentWrapper>

package/src/components/Popper/index.ts

@@ -0,0 +1,3 @@
+export { default as PopperBody } from './PopperBody.vue';
+export { default as Popper } from './Popper.vue';
+export { default as PopperTrigger } from './PopperTrigger.vue';

package/src/components/ProgressBar/ProgressBar.vue

@@ -1,17 +1,32 @@
 <script lang="ts" setup>
 import { VisuallyHidden } from '../VisuallyHidden';
+import { TailwindColor, useTailwindColor } from '../../composables';
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  /** The color of the progress-bar. */
+  color?: TailwindColor;
 
-defineProps<{
   /** The value of the progress bar. */
   value: number;
 
   /** The position of the indicator relative to the progress bar. */
-  indicatorPosition: 'above' | 'below';
-}>();
+  indicatorPosition?: 'above' | 'below' | null;
+}>(), {
+  color: 'slate',
+  indicatorPosition: null,
+});
+
+const foregroundColor = computed((): string => {
+  return useTailwindColor(props.color, '500');
+});
 </script>
 
 <template>
-  <div class="space-y-2">
+  <div
+    class="space-y-2"
+    role="progressbar"
+  >
     <slot v-if="!!$slots.default && indicatorPosition === 'above'" />
 
     <VisuallyHidden>
@@ -23,8 +38,11 @@ defineProps<{
 
     <div class="bg-slate-300 rounded h-2 overflow-hidden">
       <div
-        class="bg-slate-600 h-full rounded"
-        :style="{ width: `${value}%` }"
+        class="h-full rounded"
+        :style="{
+          width: `${value}%`,
+          backgroundColor: foregroundColor,
+        }"
       />
     </div>
 

package/src/components/RadioButton/README.md

@@ -37,7 +37,7 @@ Use radio buttons to present each item in a list of options where users must mak
 
 ```js-vue
 <script lang="ts" setup>
-import { RadioButton } from 'focus-ui';
+import { RadioButton } from '@returnless/focus-ui';
 
 const radioButtonModel = ref<string | null>(null);
 </script>

package/src/components/RadioButton/RadioButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { InputLabel } from '../InputLabel';
-import { useUniqueId } from '../../composables';
+import { useTheme, useUniqueId } from '../../composables';
 import { TextStyle } from '../TextStyle';
 
 const props = withDefaults(defineProps<{
@@ -30,8 +30,9 @@ const elementId = props.id || useUniqueId('radioButton');
     <input
       :id="elementId"
       v-model="model"
+      :class="useTheme('focus')"
       :value="value"
-      class="appearance-none border-slate-400 shadow-sm border bg-white h-4 w-4 rounded-full text-brand-500 focus:ring-indigo-600"
+      class="h-4 w-4 flex-shrink-0 appearance-none rounded-full border border-slate-400 bg-white shadow-sm text-brand-500"
       type="radio"
     >
     <div class="-mt-[2px] space-y-1">