@returnless/focus-ui 0.0.5 → 0.0.6

package/src/components/ResourceList/index.ts

@@ -1,3 +0,0 @@
-export { default as ResourceList } from './ResourceList.vue';
-export { default as ResourceListItem } from './ResourceListItem.vue';
-export { default as ResourceListItemContent } from './ResourceListItemContent.vue';

package/src/components/Select/README.md

@@ -1,74 +0,0 @@
-<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 '@returnless/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

@@ -1,91 +0,0 @@
-<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 bg-white 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

@@ -1,12 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-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

@@ -1,39 +0,0 @@
-<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
-      <Separator label="With separator label" />
-      Card section content
-    </CardSection>
-  </Card>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Card, CardSection, Separator } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Card>
-    <CardSection>
-      Card section content
-      <Separator />
-      Card section content
-      <Separator label="With separator label" />
-      Card section content
-    </CardSection>
-  </Card>
-</template>

package/src/components/Separator/Separator.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import { TextStyle } from '../TextStyle';
-
-withDefaults(defineProps<{
-  /** The label to display in the separator. */
-  label?: string | null;
-}>(), {
-  label: null,
-});
-</script>
-
-<template>
-  <div class="relative flex h-12 items-center">
-    <div class="w-full shrink-0 h-[1px] bg-border" />
-    <span
-      v-if="label"
-      class="absolute left-1/2 -translate-x-1/2 bg-white px-4"
-    >
-      <TextStyle variant="subdued">
-        {{ label }}
-      </TextStyle>
-    </span>
-  </div>
-</template>

package/src/components/Separator/index.ts

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

package/src/components/Spinner/README.md

@@ -1,53 +0,0 @@
-<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 '@returnless/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

@@ -1,64 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-const props = withDefaults(defineProps<{
-  /** Accessible label for the spinner. */
-  accessibilityLabel?: string;
-
-  /** Allows the component to apply the correct accessibility roles based on focus. */
-  hasFocusableParent?: boolean;
-}>(), {
-  accessibilityLabel: undefined,
-  hasFocusableParent: false,
-});
-
-const accessibilityRole = computed((): string | undefined => {
-  return props.hasFocusableParent ? 'status' : undefined;
-});
-</script>
-
-<template>
-  <div
-    :aria-label="accessibilityLabel"
-    :role="accessibilityRole"
-    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

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

package/src/components/StatusIndicator/README.md

@@ -1,51 +0,0 @@
-<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 color="yellow">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 '@returnless/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.

package/src/components/StatusIndicator/StatusIndicator.vue

@@ -1,44 +0,0 @@
-<script lang="ts" setup>
-import { computed, CSSProperties } from 'vue';
-import { TailwindColor, useTailwindColor, useUniqueId } from '../../composables';
-import { TextStyle } from '../TextStyle';
-
-const props = withDefaults(defineProps<{
-  /** Accessible label for the avatar image. */
-  accessibilityLabel?: string | null;
-
-  /** The color of the badge. */
-  color: TailwindColor;
-}>(), {
-  accessibilityLabel: null,
-});
-
-const statusLabelId = useUniqueId('statusLabel');
-
-const colorValues = computed((): CSSProperties => {
-  return {
-    backgroundColor: useTailwindColor(props.color, '300'),
-    color: useTailwindColor(props.color, '900'),
-  };
-});
-</script>
-
-<template>
-  <div
-    :aria-labelledby="statusLabelId"
-    :style="{ color: colorValues.color }"
-    aria-live="polite"
-    class="inline-flex items-center space-x-2"
-    role="status"
-  >
-    <div
-      class="w-3 h-3 rounded-full"
-      :style="{ backgroundColor: colorValues.backgroundColor }"
-    />
-    <TextStyle variant="strong">
-      <span :id="statusLabelId">
-        <slot />
-      </span>
-    </TextStyle>
-  </div>
-</template>

package/src/components/StatusIndicator/index.ts

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

package/src/components/Stepper/README.md

@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import { Stepper } from '../../src/components'; 
-import api from '../component-meta/Stepper.json'; 
-import { ref } from "vue"; 
-
-const stepperNumber = ref(0);
-</script>
-
-# Stepper
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <Stepper
-    v-model="stepperNumber"
-    :min="0"
-    :max="5"
-    label="QTY Received"
-  />
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Stepper } from '@returnless/focus-ui';
-
-const stepperNumber = ref(0);
-</script>
-
-<template>
-  <Stepper
-    v-model="stepperNumber"
-    :max="5"
-    label="QTY Received"
-  />
-</template>
-```

package/src/components/Stepper/Stepper.vue

@@ -1,104 +0,0 @@
-<script lang="ts" setup>
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/16/solid';
-import { TextStyle } from '../TextStyle';
-import { useTheme } from '../../composables';
-
-const props = withDefaults(defineProps<{
-  /** The label for the stepper. */
-  label: string;
-
-  /** The maximum value of the stepper. */
-  max: number;
-
-  /** The minimum value of the stepper. */
-  min: number;
-}>(), {
-  min: undefined,
-  max: undefined,
-});
-
-const model = defineModel<number>();
-
-function decrement(): void {
-  if (model.value! <= props.min) {
-    return;
-  }
-
-  model.value!--;
-}
-
-function increment(): void {
-  if (model.value! >= props.max) {
-    return;
-  }
-
-  model.value!++;
-}
-
-function handleFocus(event: Event): void {
-  (event.target as HTMLInputElement).select();
-}
-
-function handleInput(event: InputEvent | Event): void {
-  const target = event.target as HTMLInputElement;
-  let value = Number(target.value);
-
-  if (value > props.max) {
-    value = props.max;
-  }
-
-  if (value < props.min) {
-    value = props.min;
-  }
-
-  model.value = value;
-  target.valueAsNumber = value;
-}
-</script>
-
-<template>
-  <div class="inline-flex select-none flex-col space-y-2">
-    <div class="inline-flex items-stretch rounded border shadow-sm">
-      <button
-        :class="useTheme('focus')"
-        :disabled="model === props.min"
-        class="rounded-l bg-white px-3 hover:bg-slate-100 focus:z-10 disabled:pointer-events-none disabled:opacity-20"
-        type="button"
-        @click="decrement"
-      >
-        <ChevronLeftIcon class="h-4 w-4" />
-      </button>
-      <input
-        :class="useTheme('focus')"
-        :value="model"
-        class="relative w-12 appearance-none border-x bg-slate-100 py-2 text-center"
-        inputmode="numeric"
-        type="number"
-        @focus="handleFocus"
-        @input="handleInput"
-      >
-      <button
-        :class="useTheme('focus')"
-        :disabled="model === props.max"
-        class="rounded-r bg-white px-3 hover:bg-slate-100 focus:z-10 disabled:pointer-events-none disabled:opacity-20"
-        type="button"
-        @click="increment"
-      >
-        <ChevronRightIcon class="h-4 w-4" />
-      </button>
-    </div>
-    <div class="select-text text-center text-xs">
-      <TextStyle variant="subdued">
-        {{ label }}
-      </TextStyle>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-</style>

package/src/components/Stepper/index.ts

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

package/src/components/Tabs/README.md

@@ -1,53 +0,0 @@
-<script lang="ts" setup>
-import { Tabs, TabTrigger } from '../../src/components'; 
-import api from '../component-meta/Select.json';
-</script>
-
-# Tabs
-
-Use to alternate among related views within the same context.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <Tabs>
-    <TabTrigger active>Apple</TabTrigger>
-    <TabTrigger>Banana</TabTrigger>
-    <TabTrigger>Pineapple</TabTrigger>
-  </Tabs>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Tabs, TabTrigger } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Tabs>
-    <TabTrigger active>Apple</TabTrigger>
-    <TabTrigger>Banana</TabTrigger>
-    <TabTrigger>Pineapple</TabTrigger>
-  </Tabs>
-</template>
-```
-
-## Best Practices
-
-Tabs should:
-
-- Represent the same kind of content, such as a list-view with different filters applied. Don't use tabs to group
-  content that is dissimilar.
-- Only be active one at a time.
-- Not force users to jump back and forth to do a single task. Users should be able to complete their work and find
-  what they need under each tab.
-- Not be used for primary navigation.
-
-## Content guidelines
-
-Tabs should:
-
-- Be clearly labeled to help differentiate the different sections beneath them.
-- Have short and scannable labels, generally kept to single word.
-- Relate to the section of the content they represent.