@returnless/focus-ui 0.0.1

package/src/components/ProgressBar/README.md

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { ProgressBar, ProgressBarIndicator } from '../../src/components'; 
+import api from '../component-meta/ProgressBar.json';
+</script>
+
+# Progress bar
+
+The progress component is used to visually represent the completion of a task or operation. It shows how much of the
+task has been completed and how much is still left.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <ProgressBar :value="33" />
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { ProgressBar } from 'focus-ui';
+</script>
+
+<template>
+  <ProgressBar :value="33" />
+</template>
+```
+
+### With progress indicator above
+
+Using the `indicator-position` prop, you can position the progress indicator above or below the progress bar.
+
+<ComponentWrapper>
+  <ProgressBar :value="33" indicator-position="above">
+    <ProgressBarIndicator align="right">33% completed</ProgressBarIndicator>
+  </ProgressBar>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { ProgressBar, ProgressBarIndicator } from 'focus-ui';
+</script>
+
+<template>
+  <ProgressBar :value="33" indicator-position="above">
+    <ProgressBarIndicator align="right">33% completed</ProgressBarIndicator>
+  </ProgressBar>
+</template>
+```
+
+### With progress indicator below
+
+<ComponentWrapper>
+  <ProgressBar :value="33" indicator-position="below">
+    <ProgressBarIndicator align="right">33% completed</ProgressBarIndicator>
+  </ProgressBar>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { ProgressBar, ProgressBarIndicator } from 'focus-ui';
+</script>
+
+<template>
+  <ProgressBar :value="33" indicator-position="below">
+    <ProgressBarIndicator align="right">33% completed</ProgressBarIndicator>
+  </ProgressBar>
+</template>
+```
+
+### Progress indicator alignment
+
+Using the `align` prop, you can align the progress indicator to the left, center, or right.
+
+<ComponentWrapper>
+  <ProgressBar :value="33" indicator-position="below">
+    <ProgressBarIndicator align="left">33% completed</ProgressBarIndicator>
+  </ProgressBar>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { ProgressBar, ProgressBarIndicator } from 'focus-ui';
+</script>
+
+<template>
+  <ProgressBar :value="33" indicator-position="below">
+    <ProgressBarIndicator align="left">33% completed</ProgressBarIndicator>
+  </ProgressBar>
+</template>
+```
+
+## Best practices
+
+Progress components should:
+
+- Give users an indication of how much of the task has completed and how much is left.
+- Not be used for entire page loads. In this case, use the `Skeleton page` component.

package/src/components/ProgressBar/index.ts

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

package/src/components/RadioButton/README.md

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import { FormLayout, RadioButton } from '../../src/components'; 
+import api from '../component-meta/RadioButton.json'; 
+import { ref } from "vue";
+
+const test = ref<string | null>(null);
+</script>
+
+# Radio button
+
+Use radio buttons to present each item in a list of options where users must make a single selection.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <FormLayout>
+    <RadioButton
+      v-model="test"
+      value="comments"
+      label="Comments"
+      help-text="Get notified when someones posts a comment on a posting." />
+    <RadioButton
+      v-model="test"
+      value="candidates"
+      label="Candidates"
+      help-text="Get notified when a candidate applies for a job." />
+    <RadioButton
+      v-model="test"
+      value="offers"
+      label="Offers"
+      help-text="Get notified when a candidate accepts or rejects an offer." />
+  </FormLayout>
+  <pre class="mt-4">{{ test }}</pre>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { RadioButton } from 'focus-ui';
+
+const radioButtonModel = ref<string | null>(null);
+</script>
+
+<template>
+<FormLayout>
+    <RadioButton
+      v-model="radioButtonModel"
+      value="comments"
+      label="Comments"
+      help-text="Get notified when someones posts a comment on a posting." />
+    <RadioButton
+      v-model="radioButtonModel"
+      value="candidates"
+      label="Candidates"
+      help-text="Get notified when a candidate applies for a job." />
+    <RadioButton
+      v-model="radioButtonModel"
+      value="offers"
+      label="Offers"
+      help-text="Get notified when a candidate accepts or rejects an offer." />
+  </FormLayout>
+  <pre class="mt-4">{{ radioButtonModel }}</pre>
+</template>
+```
+
+## Best practices
+
+Radio buttons should:
+
+- Always be used with an associated label component.
+- Be part of list of radio buttons that:
+  - Include at least two or more choices.
+  - Are used to have users select only one option from a list of options.
+  - Include mutually exclusive options - this means that each option must be independent of every other option in the
+    list. For example: Red, Blue, Green, and Yellow are mutually exclusive. Read, blue, yellow, red/blue are not
+    mutually exclusive.
+- List options in a rational order that makes logical sense.
+- Have a default option selected whenever possible.
+
+## Content guidelines
+
+### Radio button labels
+
+Radio button labels should:
+
+- Be introduced with a colon or a heading.
+- Start with a capital letter.
+- Not end in punctuation if it's a single sentence, word, or a fragment.
+
+## Accessibility
+
+Screen readers convey the state of the radio button automatically.
+
+- Use the `disabled` prop to apply the HTML `disabled` attribute to the radio button `<input>`. This prevents users
+  from being able to interact with the radio button, and conveys its inactive state to assistive technologies.
+- Use the `id` prop to provide a unique `id` attribute value for the radio button. If an `id` isn't provided, then
+  the component generates one. All radio buttons must have unique `id` values to work correctly with assistive
+  technologies.
+
+### Labelling
+
+- The required `label` prop conveys the purpose of the radio button to all users.
+- Use the `labelHidden` prop to visually hide the label but make it available to assistive technologies.
+- When you provide help text via the `helpText` prop or an inline error message via the `error` prop, the help or
+  error content is conveyed to screen reader users with the `aria-describedBy` attribute.
+
+### Keyboard support
+
+- Move focus to the radio button group using the tab key (or shift + tab when tabbing backwards).
+- Use the up and down arrow keys to change which radio button is selected.

package/src/components/RadioButton/RadioButton.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { InputLabel } from '../InputLabel';
+import { useUniqueId } from '../../composables';
+import { TextStyle } from '../TextStyle';
+
+const props = withDefaults(defineProps<{
+  /** The help text to display with the radioButton. */
+  helpText?: string | null;
+
+  /** The ID of the radioButton. */
+  id?: string | null;
+
+  /** The label for the radioButton. */
+  label: string;
+
+  /** The value of the radioButton. */
+  value: any;
+}>(), {
+  id: null,
+  helpText: null,
+});
+
+const model = defineModel<boolean>();
+
+const elementId = props.id || useUniqueId('radioButton');
+</script>
+
+<template>
+  <div class="flex items-start space-x-2">
+    <input
+      :id="elementId"
+      v-model="model"
+      :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"
+      type="radio"
+    >
+    <div class="-mt-[2px] space-y-1">
+      <InputLabel
+        :label="label"
+        :label-for="elementId"
+      />
+
+      <TextStyle variant="subdued">
+        {{ helpText }}
+      </TextStyle>
+    </div>
+  </div>
+</template>

package/src/components/RadioButton/index.ts

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

package/src/components/Select/README.md

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { Select, SelectGroup, SelectOption } from '../../src/components'; 
+import api from '../component-meta/Select.json';
+</script>
+
+# Select
+
+Select lets users choose one option from an options' menu. Consider select when you have 4 or more options, to void
+cluttering the interface.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <Select label="Select a fruit" placeholder="Select a fruit">
+    <SelectOption>Apple</SelectOption>
+    <SelectOption>Banana</SelectOption>
+    <SelectGroup label="Other fruits">
+      <SelectOption>Blueberry</SelectOption>
+      <SelectOption>Grapes</SelectOption>
+      <SelectOption>Pineapple</SelectOption>
+    </SelectGroup>
+  </Select>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Select, SelectGroup, SelectOption } from 'focus-ui';
+</script>
+
+<template>
+  <Select label="Select a fruit" placeholder="Select a fruit">
+    <SelectOption>Apple</SelectOption>
+    <SelectOption>Banana</SelectOption>
+    <SelectGroup label="Other fruits">
+      <SelectOption>Blueberry</SelectOption>
+      <SelectOption>Grapes</SelectOption>
+      <SelectOption>Pineapple</SelectOption>
+    </SelectGroup>
+  </Select>
+</template>
+```
+
+## Best practices
+
+The select component should:
+
+- Be used for selecting between 4 or more pre-defined options.
+- Have a default option selected whenever possible.
+- Use "Select" as a placeholder option only if there's no logical default option.
+
+## Content guidelines
+
+### Select label
+
+Label should:
+
+- Given a short description (1-3 words) of the requested input.
+- Be written in sentence case (the first word capitalized, the rest lowercase).
+- Avoid punctuation and articles ("the", "an", "a").
+- Be independent sentences. To support internationalization, they should not act as the first part of a sentence
+  that is finished by the component's options.
+- Be descriptive, not instructional. If the selection needs more explanation, use help text below the field.
+
+### Select options
+
+Options should:
+
+- Start with "Select" as a placeholder if there isn't a default option.
+- Be listed alphabetically or in another logical order so users can easily find the option they need.
+- Be written sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at
+  the end of each option.
+- Be clearly labelled based on what the option will do.

package/src/components/Select/Select.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import { InputLabel } from '../InputLabel';
+import { useUniqueId, useTheme } from '../../composables';
+import { ChevronUpDownIcon } from '@heroicons/vue/16/solid';
+
+const props = withDefaults(defineProps<{
+  /** Whether the input is disabled. */
+  disabled?: boolean;
+
+  /** The help text to display below the input. */
+  helpText?: string | null;
+
+  /** The ID of the input the label is associated with. */
+  id?: string | null;
+
+  /** The label text. */
+  label: string;
+
+  /** Whether the label is hidden. */
+  labelHidden?: boolean;
+
+  /** The name of the input. */
+  name: string;
+
+  /** The placeholder text. */
+  placeholder?: string | null;
+
+  /** Whether the input is read-only. */
+  readonly?: boolean;
+
+  /** Whether the input is required. */
+  required?: boolean;
+}>(), {
+  disabled: false,
+  helpText: null,
+  id: null,
+  labelHidden: false,
+  placeholder: null,
+  readonly: false,
+  required: false,
+});
+
+const model = defineModel<string | null>();
+
+const elementId = props.id || useUniqueId('select');
+</script>
+
+<template>
+  <div class="w-full space-y-2">
+    <InputLabel
+      :id="`${elementId}-label`"
+      :label="label"
+      :label-for="elementId"
+      :label-hidden="labelHidden"
+    />
+
+    <div class="relative">
+      <select
+        :id="elementId"
+        v-model="model"
+        :aria-disabled="disabled"
+        :aria-labelledby="`${elementId}-label`"
+        :aria-readonly="readonly"
+        :aria-required="required"
+        :class="useTheme('focus')"
+        :disabled="disabled"
+        :name="name"
+        :readonly="readonly"
+        class="inline-flex w-full appearance-none rounded-md border px-4 py-3 leading-none"
+        v-bind="$attrs"
+      >
+        <option
+          v-if="placeholder"
+          :value="null"
+          disabled
+          selected
+        >
+          {{ placeholder }}
+        </option>
+
+        <slot />
+      </select>
+
+      <div
+        class="absolute top-3 right-4 h-4 w-4"
+      >
+        <ChevronUpDownIcon />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/Select/SelectGroup.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+defineProps<{
+  /** The label of the group */
+  label: string;
+}>();
+</script>
+
+<template>
+  <optgroup :label="label">
+    <slot />
+  </optgroup>
+</template>

package/src/components/Select/SelectOption.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+defineProps<{
+  /** The label of the group */
+  value: string | number;
+}>();
+</script>
+
+<template>
+  <option :value="value">
+    <slot />
+  </option>
+</template>

package/src/components/Select/index.ts

@@ -0,0 +1,3 @@
+export { default as Select } from './Select.vue';
+export { default as SelectGroup } from './SelectGroup.vue';
+export { default as SelectOption } from './SelectOption.vue';

package/src/components/Separator/README.md

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { Card, CardSection, Separator } from '../../src/components'; 
+import api from '../component-meta/Separator.json';
+</script>
+
+# Separator
+
+Use to separate or group content.
+
+<ComponentApi :api="api" />
+
+<ComponentWrapper>
+  <Card>
+    <CardSection>
+      Card section content
+      <Separator />
+      Card section content
+    </CardSection>
+  </Card>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Card, CardSection, Separator } from 'focus-ui';
+</script>
+
+<template>
+  <Card>
+    <CardSection>
+      Card section content
+      <Separator />
+      Card section content
+    </CardSection>
+  </Card>
+</template>

package/src/components/Separator/Separator.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="h-12 flex items-center">
+    <div class="h-[1px] w-full shrink-0 bg-border" />
+  </div>
+</template>

package/src/components/Separator/index.ts

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

package/src/components/Spinner/README.md

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { Spinner } from '../../src/components'; 
+import api from '../component-meta/Spinner.json';
+</script>
+
+# Spinner
+
+Spinners are used to notify users that their action is being processed. For loading state, spinners should only be used
+for content that can't be represented with skeleton loading components, like for data charts.
+
+<ComponentApi :api="api" />
+
+## Variants
+
+### Default
+
+<ComponentWrapper>
+  <Spinner />
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Spinner } from 'focus-ui';
+</script>
+
+<template>
+  <Spinner />
+</template>
+```
+
+## Accessibility
+
+SVGs are often conveyed inconsistently to assistive technologies. The `Spinner` component's accessibility is also
+highly contextual. When the parent component is focusable, you'll need to set the `hasFocusableParent` prop for the
+appropriate `role` attribute to be applied.
+
+For optimal user experience, use the `accessibilityLabel` prop to let assistive technology users know the purpose of
+the spinner.
+
+## Best practices
+
+The spinner component should:
+
+- Notify users that their request has been received and the action will soon complete.
+- Not be used to give feedback for an entire page load.
+
+
+## Content guidelines
+
+Spinner accessibility labels should:
+
+- Accurately explain the state of the requested action. For example, "Loading", "Submitting", or "Processing".
+- Use as few words to describe the state as possible.

package/src/components/Spinner/Spinner.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  /** Accessible label for the spinner. */
+  accessibilityLabel?: string | null;
+
+  /** Allows the component to apply the correct accessibility roles based on focus. */
+  hasFocusableParent?: boolean;
+}>(), {
+  accessibilityLabel: null,
+  hasFocusableParent: false,
+});
+</script>
+
+<template>
+  <div
+    :aria-label="accessibilityLabel"
+    :role="(!hasFocusableParent && 'status')"
+    class="spinner"
+  >
+    <svg
+      width="20"
+      height="20"
+      stroke-width="15"
+      viewBox="-3.00 -3.00 106.00 106.00"
+    >
+      <path
+        class="head"
+        d="M 50,50 m 0, -45 a 45, 45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
+        pathLength="600"
+        stroke-dasharray="280 280"
+      />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.spinner {
+  display: inline-flex;
+  animation: spinner 0.75s linear infinite;
+}
+
+path {
+  fill-opacity: 0;
+}
+
+.head {
+  stroke: black;
+}
+
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
+</style>

package/src/components/Spinner/index.ts

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

package/src/components/StatusIndicator/README.md

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { StatusIndicator } from '../../src/components'; 
+import api from '../component-meta/StatusIndicator.json';
+</script>
+
+# Status indicator
+
+Status indicator is a component that shows the status of a given entity. It can be used to show the status of a
+services, shipment, a user, etc.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <ComponentGrid>
+    <StatusIndicator>In transit</StatusIndicator>
+    <StatusIndicator color="red">Request rejected</StatusIndicator>
+    <StatusIndicator color="blue">Announced</StatusIndicator>
+    <StatusIndicator color="green">Return approved</StatusIndicator>
+  </ComponentGrid>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { StatusIndicator } from 'focus-ui';
+</script>
+
+<template>
+  <StatusIndicator>In Transit</StatusIndicator>
+  <StatusIndicator color="red">Request rejected</StatusIndicator>
+  <StatusIndicator color="blue">Announced</StatusIndicator>
+  <StatusIndicator color="green">Return approved</StatusIndicator>
+</template>
+```
+
+## Best practices
+
+Status indicators benefit users by:
+
+- Using established color patterns so that users can quickly identify their tone or importance level.
+- Being clearly labeled with short, scannable text.
+- Being positioned to clearly identify the object they're informing or labelling.
+
+## Content guidelines
+
+Status indicator labels should:
+
+- Use a single word to describe the tone of an object.
+- Only use two words if you need to describe a complex state. For example "Partially refunded" and "Partially paid".
+- Always describe the tone in the past tense. For example, refunded not refund.