@returnless/focus-ui 0.0.1

package/src/components/DescriptionList/README.md

@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from '../../src/components'; 
+import api from '../component-meta/DescriptionList.json';
+</script>
+
+# Description list
+
+Description lists are a way to organize and explain related information. They're particularly useful when you need to
+list and define terms.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <DescriptionList>
+    <DescriptionListItem>
+      <DescriptionListTerm>Logistics</DescriptionListTerm>
+      <DescriptionListDescription>
+        The management of products or other resources as they travel between a point of origin and a destination.
+      </DescriptionListDescription>
+    </DescriptionListItem>
+    <DescriptionListItem>
+      <DescriptionListTerm>Sole proprietorship</DescriptionListTerm>
+      <DescriptionListDescription>A business structure where a single individual both owns and runs the company.</DescriptionListDescription>
+    </DescriptionListItem>
+    <DescriptionListItem>
+      <DescriptionListTerm>Discount code</DescriptionListTerm>
+      <DescriptionListDescription>
+        A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
+      </DescriptionListDescription>
+    </DescriptionListItem>
+  </DescriptionList>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from 'focus-ui';
+</script>
+
+<template>
+  <DescriptionList>
+    <DescriptionListItem>
+      <DescriptionListTerm>Logistics</DescriptionListTerm>
+      <DescriptionListDescription>
+        The management of products or other resources as they travel between a point of origin and a destination.
+      </DescriptionListDescription>
+    </DescriptionListItem>
+    <DescriptionListItem>
+      <DescriptionListTerm>Sole proprietorship</DescriptionListTerm>
+      <DescriptionListDescription>A business structure where a single individual both owns and runs the company.</DescriptionListDescription>
+    </DescriptionListItem>
+    <DescriptionListItem>
+      <DescriptionListTerm>Discount code</DescriptionListTerm>
+      <DescriptionListDescription>
+        A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
+      </DescriptionListDescription>
+    </DescriptionListItem>
+  </DescriptionList>
+</template>
+```
+
+### Description list with vertical alignment
+
+<ComponentWrapper>
+  <DescriptionList align="vertical">
+    <DescriptionListItem>
+      <DescriptionListTerm>Logistics</DescriptionListTerm>
+      <DescriptionListDescription>
+        The management of products or other resources as they travel between a point of origin and a destination.
+      </DescriptionListDescription>
+    </DescriptionListItem>
+    <DescriptionListItem>
+      <DescriptionListTerm>Sole proprietorship</DescriptionListTerm>
+      <DescriptionListDescription>A business structure where a single individual both owns and runs the company.</DescriptionListDescription>
+    </DescriptionListItem>
+    <DescriptionListItem>
+      <DescriptionListTerm>Discount code</DescriptionListTerm>
+      <DescriptionListDescription>
+        A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
+      </DescriptionListDescription>
+    </DescriptionListItem>
+  </DescriptionList>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from 'focus-ui';
+</script>
+
+<template>
+  <DescriptionList align="vertical">
+    <DescriptionListItem>
+      <DescriptionListTerm>Logistics</DescriptionListTerm>
+      <DescriptionListDescription>
+        The management of products or other resources as they travel between a point of origin and a destination.
+      </DescriptionListDescription>
+    </DescriptionListItem>
+    <DescriptionListItem>
+      <DescriptionListTerm>Sole proprietorship</DescriptionListTerm>
+      <DescriptionListDescription>A business structure where a single individual both owns and runs the company.</DescriptionListDescription>
+    </DescriptionListItem>
+    <DescriptionListItem>
+      <DescriptionListTerm>Discount code</DescriptionListTerm>
+      <DescriptionListDescription>
+        A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
+      </DescriptionListDescription>
+    </DescriptionListItem>
+  </DescriptionList>
+</template>
+```
+
+## Best practices
+
+Description lists should:
+
+- Contain terms and associated explanations, or descriptions for each term.
+- Provide information that isn't action-oriented.
+- Not be an excuse for using unnecessarily complicated or jargon-filled language. Generally, if users need a description
+  list to understand the language in your application, you should look for opportunities to simplify the language.
+- Not be used to upsell users on a feature or service.
+
+## Content guidelines
+
+### Terms
+
+Terms should be:
+
+- Written in sentence case (the first word capitalized, the rest lowercase).
+
+### Term description
+
+Thems descriptions should be:
+
+- Directly related to the term they're describing.
+- Written to describe the users benefit or utility.
+- Written in sentence case with all appropriate punctuation, including ending each sentence with a period.
+- Conversational by using articles ("the", "a", "an").
+- Written in plain language.
+
+## Accessibility
+
+The description list component produces a description list wrapper (`<dl>`), terms (`<dt>`), and definitions (`<dd>`)
+to convey the relationships between the list items to assistive technology users.

package/src/components/DescriptionList/index.ts

@@ -0,0 +1,4 @@
+export { default as DescriptionList } from './DescriptionList.vue';
+export { default as DescriptionListDescription } from './DescriptionListDescription.vue';
+export { default as DescriptionListItem } from './DescriptionListItem.vue';
+export { default as DescriptionListTerm } from './DescriptionListTerm.vue';

package/src/components/EmptyState/EmptyState.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { Card, CardSection } from '../Card';
+</script>
+
+<template>
+  <Card>
+    <CardSection>
+      <div class="text-center my-12">
+        <slot />
+      </div>
+    </CardSection>
+  </Card>
+</template>

package/src/components/EmptyState/EmptyStateActions.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { ButtonGroup } from '../ButtonGroup';
+</script>
+
+<template>
+  <div class="mt-12">
+    <ButtonGroup>
+      <slot />
+    </ButtonGroup>
+  </div>
+</template>

package/src/components/EmptyState/EmptyStateContent.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="space-y-1.5">
+    <slot />
+  </div>
+</template>

package/src/components/EmptyState/EmptyStateDescription.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/EmptyState/EmptyStateTitle.vue

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

package/src/components/EmptyState/README.md

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import {
+  Button,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateContent,
+  EmptyStateDescription,
+  EmptyStateTitle,
+} from '../../src/components'; 
+import api from '../component-meta/EmptyState.json';
+</script>
+
+# Empty state
+
+Empty states are used when a list, table, or chart has no items or data to show. This is an opportunity to provide
+explanation or guidance to help users progress. The empty state component is intended for use when a full page is
+empty, and not for individual elements or areas in the interface.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <EmptyState>
+    <EmptyStateContent>
+      <EmptyStateTitle>Manage your inventory transfers</EmptyStateTitle>
+      <EmptyStateDescription>Track and receive your incoming inventory from suppliers.</EmptyStateDescription>
+    </EmptyStateContent>
+    <EmptyStateActions>
+      <Button variant="secondary">Learn more</Button>
+      <Button>Add transfer</Button>
+    </EmptyStateActions>
+  </EmptyState>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import {
+  Button,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateContent,
+  EmptyStateDescription,
+  EmptyStateTitle,
+} from 'focus-ui';
+</script>
+
+<template>
+  <EmptyState>
+    <EmptyStateContent>
+      <EmptyStateTitle>Manage your inventory transfers</EmptyStateTitle>
+      <EmptyStateDescription>Track and receive your incoming inventory from suppliers.</EmptyStateDescription>
+    </EmptyStateContent>
+    <EmptyStateActions>
+      <Button variant="secondary">Learn more</Button>
+      <Button>Add transfer</Button>
+    </EmptyStateActions>
+  </EmptyState>
+</template>
+```
+
+## Best practices
+
+Empty states should:
+
+- Orient users by clearly explaining the benefit and utility of a product or feature.
+- Simplify a complicated experience by focusing on a few key features and benefits.
+- Use simple and clear language that empowers users to move their business forward.
+- Be encouraging and never make users feel unsuccessful or guilty because they haven't used a product or feature.
+- Explain the steps users need to take to activate a product or feature.
+- Use only one primary call-to-action button.
+
+## Content guidelines
+
+### Title
+
+Empty state titles should:
+
+- Be action-oriented: encourage users to take the step required to activate the product or feature.
+
+### Subtitle
+
+Empty state subtitles act like body content. They should:
+
+- Describe or explain what's in the empty state title or item title.
+- Be conversational: include articles such as "the", "a", and "an".
+
+### Primary action
+
+Buttons are used for the most important actions you want users to take. They should be:
+
+- Clear and predictable: users should be able to anticipate what will happen when they click a button. Never deceive
+  users by misleading titles.
+- Action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to
+  users use the {verb + noun} format on buttons except in the case of common actions like "Save", "Close", "Cancel",
+  or "Ok".
+- Scannable: avoid unnecessary words and articles such as "the", "an", or "a".
+
+### Secondary action
+
+Secondary actions are used for less important actions such as "Learn more" or "Close" buttons. They should follow
+all the other content rules outlined for primary buttons.

package/src/components/EmptyState/index.ts

@@ -0,0 +1,5 @@
+export { default as EmptyState } from './EmptyState.vue';
+export { default as EmptyStateActions } from './EmptyStateActions.vue';
+export { default as EmptyStateContent } from './EmptyStateContent.vue';
+export { default as EmptyStateDescription } from './EmptyStateDescription.vue';
+export { default as EmptyStateTitle } from './EmptyStateTitle.vue';

package/src/components/Feed/Feed.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <ul role="list">
+    <slot />
+  </ul>
+</template>

package/src/components/Feed/FeedItem.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <li class="relative flex gap-x-2 [&:not(:last-child)]:pb-4">
+    <div class="absolute top-0 -bottom-0 left-0 flex w-6 justify-center">
+      <div class="w-px bg-slate-200" />
+    </div>
+
+    <div class="relative flex h-5 w-6 flex-none items-center justify-center">
+      <div class="h-1 w-1 rounded-full bg-slate-100 ring-1 ring-slate-400" />
+    </div>
+
+    <slot />
+  </li>
+</template>

package/src/components/Feed/FeedItemBlock.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="flex-auto rounded border bg-white/50 px-3 py-2 text-xs leading-5 shadow-sm">
+    <slot />
+  </div>
+</template>

package/src/components/Feed/FeedItemDateIndicator.vue

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

package/src/components/Feed/FeedItemIcon.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { computed, CSSProperties } from 'vue';
+import { TailwindColor, useTailwindColor } from '../../composables';
+
+const props = withDefaults(defineProps<{
+  /** The color of the badge. */
+  color: TailwindColor;
+}>(), {});
+
+const colorValue = computed((): CSSProperties => {
+  return {
+    backgroundColor: useTailwindColor(props.color, '500'),
+  };
+});
+</script>
+
+<template>
+  <div
+    class="absolute flex h-5 w-5 items-center justify-center rounded bg-green-400 ml-0.5"
+    :style="colorValue"
+  >
+    <div class="h-4 w-4 text-white">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/Feed/FeedItemSimple.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="flex-auto py-0 text-xs leading-5">
+    <slot />
+  </div>
+</template>

package/src/components/Feed/README.md

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import {
+  Feed,
+  FeedItem,
+  FeedItemSimple,
+  FeedItemBlock,
+  FeedItemDateIndicator,
+  FeedItemIcon,
+  TextStyle,
+} from '../../src/components'; 
+import api from '../component-meta/Feed.json';
+import { CheckIcon, ChatBubbleBottomCenterIcon } from '@heroicons/vue/16/solid';
+</script>
+
+# Feed
+
+Use this component to display a feed of notes, posts, or other content.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <Feed>
+    <FeedItem>
+      <FeedItemIcon color="indigo">
+        <CheckIcon />
+      </FeedItemIcon>
+      <FeedItemSimple>
+        <TextStyle variant="strong">Application user</TextStyle> created the return order.
+        <FeedItemDateIndicator>5 days ago</FeedItemDateIndicator>
+      </FeedItemSimple>
+    </FeedItem>
+    <FeedItem>
+    <FeedItemSimple>
+      <TextStyle variant="strong">Application user</TextStyle> edited the return order.
+      <FeedItemDateIndicator>5 days ago</FeedItemDateIndicator>
+    </FeedItemSimple>
+    </FeedItem>
+    <FeedItem>
+      <FeedItemIcon color="slate">
+        <ChatBubbleBottomCenterIcon />
+      </FeedItemIcon>
+      <FeedItemBlock>
+        <TextStyle variant="strong">Application user</TextStyle> commented
+        <p>Called client, they reassured me the invoice would be paid by the 25th.</p>
+        <FeedItemDateIndicator>just now</FeedItemDateIndicator>
+      </FeedItemBlock>
+    </FeedItem>
+    <FeedItem>
+      <FeedItemSimple>
+        <TextStyle variant="strong">Application user</TextStyle> sent the return order.
+        <FeedItemDateIndicator>just now</FeedItemDateIndicator>
+      </FeedItemSimple>
+    </FeedItem>
+  </Feed>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import {
+  Feed,
+  FeedItem,
+  FeedItemSimple,
+  FeedItemBlock,
+  FeedItemDateIndicator,
+  FeedItemIcon,
+  TextStyle,
+} from 'focus-ui';
+</script>
+
+<template>
+  <Feed>
+    <FeedItem>
+      <FeedItemIcon color="indigo">
+        <CheckIcon />
+      </FeedItemIcon>
+      <FeedItemSimple>
+        <TextStyle variant="strong">Application user</TextStyle> created the return order.
+        <FeedItemDateIndicator>5 days ago</FeedItemDateIndicator>
+      </FeedItemSimple>
+    </FeedItem>
+    <FeedItem>
+    <FeedItemSimple>
+      <TextStyle variant="strong">Application user</TextStyle> edited the return order.
+      <FeedItemDateIndicator>5 days ago</FeedItemDateIndicator>
+    </FeedItemSimple>
+    </FeedItem>
+    <FeedItem>
+      <FeedItemIcon color="slate">
+        <ChatBubbleBottomCenterIcon />
+      </FeedItemIcon>
+      <FeedItemBlock>
+        <TextStyle variant="strong">Application user</TextStyle> commented
+        <p>Called client, they reassured me the invoice would be paid by the 25th.</p>
+        <FeedItemDateIndicator>just now</FeedItemDateIndicator>
+      </FeedItemBlock>
+    </FeedItem>
+    <FeedItem>
+      <FeedItemSimple>
+        <TextStyle variant="strong">Application user</TextStyle> sent the return order.
+        <FeedItemDateIndicator>just now</FeedItemDateIndicator>
+      </FeedItemSimple>
+    </FeedItem>
+  </Feed>
+</template>
+```
+
+## Best practices
+
+todo
+
+## Content guidelines
+
+todo

package/src/components/Feed/index.ts

@@ -0,0 +1,6 @@
+export { default as Feed } from './Feed.vue';
+export { default as FeedItem } from './FeedItem.vue';
+export { default as FeedItemBlock } from './FeedItemBlock.vue';
+export { default as FeedItemDateIndicator } from './FeedItemDateIndicator.vue';
+export { default as FeedItemIcon } from './FeedItemIcon.vue';
+export { default as FeedItemSimple } from './FeedItemSimple.vue';

package/src/components/Form/Form.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useUniqueId } from '../../composables';
+
+const props = withDefaults(defineProps<{
+  /** The encoding type for the form. */
+  enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | null;
+
+  /** The ID of the form. */
+  id?: string | null;
+}>(), {
+  enctype: null,
+  id: null,
+});
+
+defineEmits<{
+  submit: [];
+}>();
+
+const elementId = props.id || useUniqueId('form');
+</script>
+
+<template>
+  <form
+    :id="elementId"
+    :enctype="enctype"
+    @submit.prevent="$emit('submit')"
+  >
+    <slot />
+  </form>
+</template>

package/src/components/Form/README.md

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { Form, FormLayout, TextField, Button } from '../../src/components'; 
+import api from '../component-meta/Form.json';
+</script>
+
+# Form
+
+A wrapper component that handles the submission of forms.
+
+## Usage
+
+<ComponentWrapper>
+  <Form>
+    <FormLayout>
+      <TextField label="Name" />
+      <TextField label="Email" help-text="We’ll use this email address to inform you on future changes." />
+      <Button>Submit</Button>
+    </FormLayout>
+  </Form>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Form, FormLayout, TextField, Button } from 'focus-ui';
+</script>
+
+<template>
+  <Form>
+    <FormLayout>
+      <TextField label="Name" />
+      <TextField label="Email" type="email" help-text="We’ll use this email address to inform you on future changes." />
+      <Button>Submit</Button>
+    </FormLayout>
+  </Form>
+</template>
+```
+
+## Best practices
+
+The form component should be used to:
+
+- Wrap around all form input elements.
+- Emulate the native HTML `form` element behavior with a custom `onSubmit` callback.
+
+## Accessibility
+
+The form component wraps content in an HTML `<form>` element. This helps to support assistive technologies that use
+different interaction and browse modes.
+
+Forms can have only one submit button, and it must be at the end of the form. By default, buttons added to the form
+are given a `type` attribute set to `button` to avoid conflicts. To make a button the submit button instead
+(`type="submit"`), set the `submit` prop on the button.

package/src/components/Form/index.ts

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

package/src/components/FormLayout/FormLayout.vue

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