@returnless/focus-ui 0.0.1

package/src/components/Alert/README.md

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import { Alert, AlertTitle, AlertDescription } from '../../src/components'; 
+import api from '../component-meta/Alert.json';
+</script>
+
+# Alert
+
+Informs users about important changes or persistent conditions. Use this component if you need to communicate to
+users in a prominent way. Alerts are placed at the top of the page or section they apply to, and below the page or
+section header.
+
+<ComponentApi :api="api" />
+
+## Variants
+
+### Default
+
+Use to convey general information or actions that aren't critical. For example, you might show an alert that asks
+for users feedback. Default alerts contain lower priority information and should always be dismissable.
+
+<ComponentWrapper>
+  <Alert>
+    <AlertTitle>Heads up!</AlertTitle>
+    <AlertDescription>
+      You can add components to your app using the cli.
+    </AlertDescription>
+  </Alert>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Alert, AlertDescription, AlertTitle } from 'focus-ui';
+</script>
+
+<template>
+  <Alert>
+    <AlertTitle>Heads up!</AlertTitle>
+    <AlertDescription>
+      You can add components to your app using the cli.
+    </AlertDescription>
+  </Alert>
+</template>
+```
+
+### Destructive
+
+Use to communicate critical information or actions that require immediate attention. For example, you might show an
+alert that warns users about a critical system failure. Destructive alerts contain higher priority information.
+
+<ComponentWrapper>
+  <Alert variant="destructive">
+    <AlertTitle>Error</AlertTitle>
+    <AlertDescription>
+      Your session has expired. Please log in again.
+    </AlertDescription>
+  </Alert>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Alert, AlertDescription, AlertTitle } from 'focus-ui';
+</script>
+
+<template>
+  <Alert variant="destructive">
+    <AlertTitle>Error</AlertTitle>
+    <AlertDescription>
+      Your session has expired. Please log in again.
+    </AlertDescription>
+  </Alert>
+</template>
+```
+
+## Best practices
+
+Alerts should:
+
+- Be used thoughtfully and sparingly for only the most important information.
+- Not be used to call attention to what a user needs to do in the UI instead of making the action clear in the UI
+  itself.
+- Not be the primary entry point of information or actions users need on a regular basis.
+- Be dismissible unless they contain critical information or an important step users need to take.
+
+### Placement
+
+Alerts should be placed in the appropriate context:
+
+- Alerts relevant to an entire page should be placed at the top of that page, below the page header. They should
+  occupy the full width of the content area.
+- Alerts related to a section of a page (like a card, popover, or modal) should be placed inside that section, below
+  any section heading.
+- Alerts related to an element more specific that a section should be placed immediately above or below that element.
+
+## Content guidelines
+
+Alerts should:
+
+- Focus on a single theme, piece of information, or required action to avoid overwhelming users.
+- Be concise and scannable - users shouldn't need to spend a lot of time figuring out what the alert is trying to
+  communicate.
+- Be limited to a few important calls to action with no more than one primary action.
+
+### Body content
+
+Body content should:
+
+- Be concise: keep the content to 1 or 2 sentences where possible.
+- Clarify the benefit of the main task.
+- Be written in sentence case and use appropriate punctuation.
+- Avoid repeating the heading.
+- Explain how to resolve the issue, particularly for destructive alerts.
+
+## Accessibility
+
+Alerts provide context and assist workflows for users with disabilities.
+
+- Destructive alerts have a `role="alert"` attribute and are announced by assistive technologies when they appear.
+- All other alerts have a `role="status"` attribute and are read after any critical announcements.
+- Alert containers have a `tabindex="0"` attribute and display a visible keyboard focus indicator. Because of this,
+  merchants can discover banners while tabbing through forms or other interactions, and developers can programmatically
+  move focus to banners.

package/src/components/Alert/index.ts

@@ -0,0 +1,3 @@
+export { default as Alert } from './Alert.vue';
+export { default as AlertDescription } from './AlertDescription.vue';
+export { default as AlertTitle } from './AlertTitle.vue';

package/src/components/AlertDialog/AlertDialog.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { onMounted, onUnmounted, provide } from 'vue';
+
+withDefaults(defineProps<{
+  /** Whether the alert dialog is open. */
+  open?: boolean;
+}>(), {
+  open: false,
+});
+
+const emits = defineEmits<{
+  cancel: [];
+}>();
+
+function cancelAlertDialog(): void {
+  emits('cancel');
+}
+
+function onKeyDown(e: KeyboardEvent): void {
+  if (e.key === 'Escape') {
+    cancelAlertDialog();
+  }
+}
+
+onMounted((): void => {
+  document.addEventListener('keydown', onKeyDown);
+});
+
+onUnmounted((): void => {
+  document.removeEventListener('keydown', onKeyDown);
+});
+
+provide('cancelAlertDialog', cancelAlertDialog);
+</script>
+
+<template>
+  <div
+    v-if="open"
+    class="fixed top-0 left-0 z-10 h-screen w-screen bg-slate-500/50 text-sm"
+  >
+    <div class="flex min-h-full items-center justify-center">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/AlertDialog/AlertDialogActionButton.vue

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

package/src/components/AlertDialog/AlertDialogCancelButton.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { Button } from '../Button';
+import { inject } from 'vue';
+
+const cancelAlertDialog = inject('cancelAlertDialog');
+</script>
+
+<template>
+  <Button
+    variant="secondary"
+    @click="cancelAlertDialog"
+  >
+    <slot />
+  </Button>
+</template>

package/src/components/AlertDialog/AlertDialogContent.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="bg-white rounded-lg shadow-2xl max-w-lg overflow-hidden">
+    <slot />
+  </div>
+</template>

package/src/components/AlertDialog/AlertDialogDescription.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { TextStyle } from '../TextStyle';
+</script>
+
+<template>
+  <p>
+    <TextStyle variant="subdued">
+      <slot />
+    </TextStyle>
+  </p>
+</template>

package/src/components/AlertDialog/AlertDialogFooter.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { ButtonGroup } from '../ButtonGroup';
+</script>
+
+<template>
+  <div class="bg-slate-100 px-4 py-3 flex items-center justify-end">
+    <ButtonGroup>
+      <slot />
+    </ButtonGroup>
+  </div>
+</template>

package/src/components/AlertDialog/AlertDialogHeader.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="flex flex-col space-y-4 p-6">
+    <slot />
+  </div>
+</template>

package/src/components/AlertDialog/AlertDialogTitle.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <h2 class="text-xl font-semibold leading-none">
+    <slot />
+  </h2>
+</template>

package/src/components/AlertDialog/README.md

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { 
+  AlertDialog,
+  AlertDialogActionButton,
+  AlertDialogCancelButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button,
+} from '../../src/components'; 
+import api from '../component-meta/AlertDialog.json';  
+
+const alertDialogOpen = ref(false);
+</script>
+
+# Alert Dialog
+
+A modal dialog that interrupts the user with important content and expects a response.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <Button @click="alertDialogOpen = true">
+    Open Dialog
+  </Button>
+
+<AlertDialog :open="alertDialogOpen" @cancel="alertDialogOpen = false">
+<AlertDialogContent>
+<AlertDialogHeader>
+<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+<AlertDialogDescription>
+This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+</AlertDialogDescription>
+</AlertDialogHeader>
+<AlertDialogFooter>
+<AlertDialogCancelButton>Cancel</AlertDialogCancelButton>
+<AlertDialogActionButton>Continue</AlertDialogActionButton>
+</AlertDialogFooter>
+</AlertDialogContent>
+</AlertDialog>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import {
+  AlertDialog,
+  AlertDialogActionButton,
+  AlertDialogCancelButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button,
+} from 'focus-ui';
+
+const alertDialogOpen = ref(false);
+</script>
+
+<template>
+  <Button v-on:click="alertDialogOpen = true">
+    Open Dialog
+  </Button>
+  
+  <AlertDialog :open="alertDialogOpen" v-on:cancel="alertDialogOpen = false">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancelButton>Cancel</AlertDialogCancelButton>
+        <AlertDialogActionButton>Continue</AlertDialogActionButton>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
+```

package/src/components/AlertDialog/index.ts

@@ -0,0 +1,8 @@
+export { default as AlertDialog } from './AlertDialog.vue';
+export { default as AlertDialogActionButton } from './AlertDialogActionButton.vue';
+export { default as AlertDialogCancelButton } from './AlertDialogCancelButton.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue';
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue';
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue';
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue';

package/src/components/Avatar/Avatar.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { UserIcon } from '@heroicons/vue/16/solid';
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  /** The size of the avatar */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** The name of the person, company or entity */
+  name?: string | null;
+
+  /** Initials of person to display. */
+  initials?: string | null;
+
+  /** URL of the avatar image which falls back to initials if the image fails to load. */
+  source?: string | null;
+
+  /** Accessible label for the avatar image. */
+  accessibilityLabel?: string | null;
+}>(), {
+  size: 'md',
+  name: null,
+  initials: null,
+  source: null,
+  accessibilityLabel: null,
+});
+
+const classList = computed(() => {
+  return [
+    { 'w-4 h-4': props.size === 'xs' },
+    { 'w-6 h-6': props.size === 'sm' },
+    { 'w-8 h-8': props.size === 'md' },
+    { 'w-10 h-10': props.size === 'lg' },
+    { 'w-12 h-12': props.size === 'xl' },
+  ];
+});
+
+const iconSize = computed(() => {
+  return [
+    { 'w-3 h-3': props.size === 'xs' },
+  ];
+});
+
+const textSize = computed(() => {
+  return [
+    { 'text-xs': props.size === 'xs' },
+    { 'text-xs': props.size === 'sm' },
+    { 'text-md': props.size === 'md' },
+    { 'text-lg': props.size === 'lg' },
+    { 'text-lg': props.size === 'xl' },
+  ];
+});
+
+function renderInitials(initials: string): string {
+  return props.size === 'xs'
+    ? initials?.slice(0, 1)
+    : initials;
+}
+</script>
+
+<template>
+  <div
+    class="relative flex items-center justify-center rounded bg-slate-200"
+    :class="classList"
+  >
+    <UserIcon
+      v-if="!initials"
+      role="img"
+      :class="iconSize"
+    />
+    <span
+      class="font-semibold"
+      :class="textSize"
+    >
+      {{ renderInitials(initials) }}
+    </span>
+  </div>
+</template>

package/src/components/Avatar/README.md

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import { Avatar } from '../../src/components'; 
+import api from '../component-meta/Avatar.json';
+</script>
+
+# Avatar
+
+Avatars are used to show a thumbnail representation of an individual or business in the interface.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <Avatar name="John Doe" />
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Avatar } from 'focus-ui';
+</script>
+
+<template>
+  <Avatar name="John Doe" />
+</template>
+```
+
+## Variants
+
+### With initials
+
+<ComponentWrapper>
+  <Avatar name="John Doe" initials="JD" />
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Avatar } from 'focus-ui';
+</script>
+
+<template>
+  <Avatar name="John Doe" initials="JD" />
+</template>
+```
+
+### Sizes
+
+<ComponentWrapper>
+  <ComponentGrid>
+    <ComponentGrid>
+      <Avatar name="John Doe" size="xs" />
+      <Avatar name="John Doe" size="sm" />
+      <Avatar name="John Doe" size="md" />
+      <Avatar name="John Doe" size="lg" />
+      <Avatar name="John Doe" size="xl" />
+    </ComponentGrid>
+    <ComponentGrid>
+      <Avatar name="John Doe" size="xs" initials="JD" />
+      <Avatar name="John Doe" size="sm" initials="JD" />
+      <Avatar name="John Doe" size="md" initials="JD" />
+      <Avatar name="John Doe" size="lg" initials="JD" />
+      <Avatar name="John Doe" size="xl" initials="JD" />
+    </ComponentGrid>
+  </ComponentGrid>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Avatar } from 'focus-ui';
+</script>
+
+<template>
+  <Avatar name="John Doe" size="xs" />
+  <Avatar name="John Doe" size="sm" />
+  <Avatar name="John Doe" size="md" />
+  <Avatar name="John Doe" size="lg" />
+  <Avatar name="John Doe" size="xl" />
+  
+  // Or with initials...
+  <Avatar name="John Doe" size="xs" initials="JD" />
+  <Avatar name="John Doe" size="sm" initials="JD" />
+  <Avatar name="John Doe" size="md" initials="JD" />
+  <Avatar name="John Doe" size="lg" initials="JD" />
+  <Avatar name="John Doe" size="xl" initials="JD" />
+</template>
+```
+
+## Best practices
+
+Avatars should be one of 5 sizes:
+
+- Extra-small (20 x 20 px): use in tightly condensed layouts
+- Small (24 × 24 px): use when the medium size is too big for the layout, or when the avatar has less importance
+- Medium (28 × 28 px): use as the default size
+- Large (32 × 32 px): use when an avatar is a focal point, such as on a single customer card
+- Extra large (40 × 40 px): use when an avatar is a focal point, such as on a single customer card
+
+## Content guidelines
+
+Any time you use an image to communicate a concept in the interface, it's important to use descriptive alt text.
+Doing this is important for accessibility because it allows screen readers to describe what's in the image to people
+who may not be able to see it.
+
+For avatars, we recommend using a format that describes what will show in the image:
+
+- `alt=Person's name"` if the avatar represents a person
+- `alt=Company name"` if the avatar represents a business
+- `alt=""` if the name of the person/business appears next to the avatar as text
+
+## Accessibility
+
+### Structure
+
+The avatar component uses a generated scalable vector graphics (SVG) file, which can cause challenges for users that
+use assistive technologies. To create a standard experience, the `<img>` is hidden from assistive technologies by
+using an empty `alt` attribute, and replaced with a `<span>` that has `role="img"`.
+
+### Labeling
+
+The avatar component represents content, and should have a text equivalent for users using assistive technologies.
+By default, the value of the `name` prop is used for the alternative text. If different text would be more accurate,
+use the `accessibilityLabel` prop to replace the value provided by `name`. 

package/src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar.vue';

package/src/components/Badge/Badge.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { computed, CSSProperties } from 'vue';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { TextStyle } from '../TextStyle';
+import { TailwindColor, useTailwindColor } from '../../composables';
+
+const props = withDefaults(defineProps<{
+  /** Accessible label for the avatar image. */
+  accessibilityLabel?: string | null;
+
+  /** The color of the badge. */
+  color: TailwindColor;
+
+  /** The size of the badge */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}>(), {
+  accessibilityLabel: null,
+  size: 'sm',
+});
+
+const colorValues = computed((): CSSProperties => {
+  return {
+    backgroundColor: useTailwindColor(props.color, '200'),
+    color: useTailwindColor(props.color, '900'),
+  };
+});
+
+const classList = computed(() => {
+  return [
+    { 'text-xs px-2 py-1': props.size === 'sm' },
+    { 'text-sm px-3 py-1.5': props.size === 'md' },
+    { 'text-md px-4 py-2': props.size === 'lg' },
+  ];
+});
+</script>
+
+<template>
+  <span
+    class="inline-flex rounded bg-slate-200"
+    :class="classList"
+    :style="colorValues"
+  >
+    <TextStyle variant="strong">
+      <div class="flex items-center space-x-2">
+        <slot />
+      </div>
+    </TextStyle>
+
+    <VisuallyHidden v-if="accessibilityLabel">{{ accessibilityLabel }}</VisuallyHidden>
+  </span>
+</template>

package/src/components/Badge/BadgeContent.vue

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

package/src/components/Badge/BadgeIcon.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="w-4 h-4">
+    <slot />
+  </div>
+</template>