@returnless/focus-ui 0.0.5 → 0.0.7

package/src/components/Avatar/README.md

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

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

package/src/components/Badge/Badge.vue

@@ -1,51 +0,0 @@
-<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((): Record<string, any> => {
-  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

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

package/src/components/Badge/BadgeIcon.vue

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

package/src/components/Badge/README.md

@@ -1,131 +0,0 @@
-<script lang="ts" setup>
-import { Badge, BadgeContent, BadgeIcon } from '../../src/components'; 
-import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
-import api from '../component-meta/Badge.json';
-</script>
-
-# Badge
-
-Badges are used to inform users of the tone of an object or of an action that's been taken.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <ComponentGrid>
-    <Badge color="slate">Fulfilled</Badge>
-    <Badge color="blue">Draft</Badge>
-    <Badge color="green">Active</Badge>
-    <Badge color="yellow">Open</Badge>
-    <Badge color="red">Action required</Badge>
-  </ComponentGrid>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Badge } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Badge color="slate">Fulfilled</Badge>
-  <Badge color="blue">Draft</Badge>
-  <Badge color="green">Active</Badge>
-  <Badge color="yellow">Open</Badge>
-  <Badge color="red">Action required</Badge>
-</template>
-```
-
-### Badges with icons
-
-Badges can include icons to help users quickly identify the tone of an object or action.
-
-<ComponentWrapper>
-  <ComponentGrid>
-    <Badge color="green">
-      <BadgeContent>+ 25%</BadgeContent>
-      <BadgeIcon>
-        <ArrowTrendingUpIcon />
-      </BadgeIcon>
-    </Badge>
-    <Badge color="red">
-      <BadgeIcon>
-        <ArrowTrendingDownIcon />
-      </BadgeIcon>
-      <BadgeContent>- 25%</BadgeContent>
-    </Badge>
-  </ComponentGrid>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Badge, BadgeContent, BadgeIcon } from '@returnless/focus-ui';
-import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
-</script>
-
-<template>
-  <Badge color="green">
-    <BadgeContent>+ 25%</BadgeContent>
-    <BadgeIcon>
-      <ArrowTrendingUpIcon />
-    </BadgeIcon>
-  </Badge>
-  <Badge color="red">
-    <BadgeIcon>
-      <ArrowTrendingDownIcon />
-    </BadgeIcon>
-    <BadgeContent>- 25%</BadgeContent>
-  </Badge>
-</template>
-```
-
-### Badge sizes
-
-Badges come in three sizes: small, medium, and large.
-
-<ComponentWrapper>
-  <ComponentGrid>
-    <Badge color="slate" size="sm">sm badge</Badge>
-    <Badge color="slate" size="md">md badge</Badge>
-    <Badge color="slate" size="lg">lg badge</Badge>
-    <Badge color="green">
-      <BadgeIcon>
-        <ArrowTrendingUpIcon />
-      </BadgeIcon>
-      <BadgeContent>sm with icon</BadgeContent>
-    </Badge>
-    <Badge color="blue" size="md">
-      <BadgeIcon>
-        <ArrowTrendingUpIcon />
-      </BadgeIcon>
-      <BadgeContent>md with icon</BadgeContent>
-    </Badge>
-    <Badge color="red" size="lg">
-      <BadgeIcon>
-        <ArrowTrendingDownIcon />
-      </BadgeIcon>
-      <BadgeContent>lg with icon</BadgeContent>
-    </Badge>
-  </ComponentGrid>
-</ComponentWrapper>
-
-## Best practices
-
-Badges 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
-
-Badge 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.
-
-## Accessibility
-
-Badges that convey information with icons or color include text provided by the `visually hidden component`. The text is
-read out by assistive technologies so that users with vision issues can access meaning of the badge in context.

package/src/components/Badge/index.ts

@@ -1,3 +0,0 @@
-export { default as Badge } from './Badge.vue';
-export { default as BadgeContent } from './BadgeContent.vue';
-export { default as BadgeIcon } from './BadgeIcon.vue';

package/src/components/BarChart/BarChart.vue

@@ -1,80 +0,0 @@
-<script lang="ts" setup>
-import collect, { Collection } from 'collect.js';
-import { computed } from 'vue';
-import { TailwindColor, useTailwindColor } from '../../composables';
-import { BarChartContainer } from './';
-import { Legend, LegendItem } from '../Legend';
-
-type DataPoint = {
-  label: string;
-  value: number;
-  color: TailwindColor;
-};
-
-const props = defineProps<{
-  /** The data points to display */
-  dataPoints: DataPoint[];
-
-  /** The height of the chart */
-  height: number;
-}>();
-
-const dataPointCollection = computed((): Collection<DataPoint> => {
-  return collect(props.dataPoints);
-});
-
-const max = computed((): number => {
-  return dataPointCollection.value.max('value');
-});
-
-function dataPointHeight(dataPoint: DataPoint): number {
-  return dataPoint.value / max.value * 100;
-}
-
-function getColorValue(dataPoint: DataPoint): string {
-  return useTailwindColor(dataPoint.color, '400');
-}
-
-const axisLabels = computed(() => {
-  return [
-    props.dataPoints[0].label,
-    props.dataPoints[props.dataPoints.length - 1].label,
-  ];
-});
-</script>
-
-<template>
-  <BarChartContainer>
-    <Legend>
-      <LegendItem color="blue">
-        En-route
-      </LegendItem>
-    </Legend>
-
-    <div class="space-y-2">
-      <div
-        class="flex space-x-1"
-        :style="{ height: `${height}px` }"
-      >
-        <div
-          v-for="(dataPoint, dataPointIndex) in dataPoints"
-          :key="dataPointIndex"
-          :style="{ width: `${100 / dataPoints.length}%` }"
-          class="flex h-full items-end rounded-sm bg-slate-100"
-        >
-          <div
-            class="w-full rounded-sm"
-            :style="{
-              height: `${dataPointHeight(dataPoint)}%`,
-              backgroundColor: getColorValue(dataPoint),
-            }"
-          />
-        </div>
-      </div>
-      <div class="flex justify-between">
-        <div>{{ axisLabels[0] }}</div>
-        <div>{{ axisLabels[1] }}</div>
-      </div>
-    </div>
-  </BarChartContainer>
-</template>

package/src/components/BarChart/BarChartContainer.vue

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

package/src/components/BarChart/BarChartStacked.vue

@@ -1,93 +0,0 @@
-<script lang="ts" setup>
-import collect from 'collect.js';
-import { computed } from 'vue';
-import { TailwindColor, useTailwindColor } from '../../composables';
-import { Legend, LegendItem } from '../Legend';
-import { BarChartContainer } from './index';
-
-type DataPointStack = {
-  label: string;
-  dataPoints: DataPoint[];
-};
-
-type DataPoint = {
-  label: string;
-  value: number;
-  color: TailwindColor;
-};
-
-const props = defineProps<{
-  dataPoints: DataPointStack[];
-  height: number;
-}>();
-
-const max = computed((): number => {
-  return collect(props.dataPoints)
-    .map((dataPointStack: DataPointStack) => collect(dataPointStack.dataPoints).sum('value'))
-    .max();
-});
-
-function getDataPointHeight(dataPoint: DataPoint): number {
-  return dataPoint.value / max.value * 100;
-}
-
-function getColorValue(dataPoint: DataPoint): string {
-  return useTailwindColor(dataPoint.color, '400');
-}
-
-const axisLabels = computed((): string[] => {
-  return [
-    props.dataPoints[0].label,
-    props.dataPoints[props.dataPoints.length - 1].label,
-  ];
-});
-</script>
-
-<template>
-  <BarChartContainer>
-    <Legend>
-      <LegendItem color="teal">
-        Announced
-      </LegendItem>
-      <LegendItem color="green">
-        Sent
-      </LegendItem>
-      <LegendItem color="lime">
-        En-route
-      </LegendItem>
-      <LegendItem color="yellow">
-        Delivered
-      </LegendItem>
-      <LegendItem color="amber">
-        En-route
-      </LegendItem>
-    </Legend>
-    <div class="space-y-2">
-      <div
-        class="flex space-x-1"
-        :style="{ height: `${height}px` }"
-      >
-        <div
-          v-for="(dataStack, dataStackIndex) in dataPoints"
-          :key="dataStackIndex"
-          :style="{ width: `${100 / dataPoints.length}%` }"
-          class="flex flex-col-reverse h-full items-end rounded-sm bg-slate-100 overflow-hidden"
-        >
-          <div
-            v-for="(dataPoint, dataPointIndex) in dataStack.dataPoints"
-            :key="dataPointIndex"
-            class="w-full"
-            :style="{
-              height: `${getDataPointHeight(dataPoint)}%`,
-              backgroundColor: getColorValue(dataPoint),
-            }"
-          />
-        </div>
-      </div>
-      <div class="flex justify-between">
-        <div>{{ axisLabels[0] }}</div>
-        <div>{{ axisLabels[1] }}</div>
-      </div>
-    </div>
-  </BarChartContainer>
-</template>

package/src/components/BarChart/README.md

@@ -1,83 +0,0 @@
-<script lang="ts" setup>
-import { BarChart, BarChartStacked, Card, CardSection, Legend, LegendItem } from '../../src/components'; 
-import api from '../component-meta/BarChart.json';
-
-const dataPoints = Array.from({ length: 30 }).map((_, index) => {
-  return {
-    value: Math.floor(Math.random() * 200),
-    label: `data-point ${index}`,
-    color: 'blue',
-  };
-});
-
-const stackedDataPoints = Array.from({ length: 30 }).map((_, index) => {
-  return {
-    label: `data-point ${index}`,
-    dataPoints: Array.from({ length: 5 }).map((_, index) => {
-      return {
-        value: Math.floor(Math.random() * 200),
-        label: `data-point ${index}`,
-        color: ['teal', 'green', 'lime', 'yellow', 'amber'][index],
-      };
-    }),
-  };
-});
-</script>
-
-# Bar Chart
-
-<ComponentApi :api="api" />
-
-## Usage
-
-Use the `BarChart` component to display a single data point in a bar.
-
-<ComponentWrapper>
-  <Card>
-    <CardSection>
-      <BarChart :data-points="dataPoints" height="150" />
-    </CardSection>
-  </Card>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { BarChart, Card, CardSection } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Card>
-    <CardSection>
-      <BarChart :data-points="dataPoints" height="200" />
-    </CardSection>
-  </Card>
-</template>
-```
-
-### Stacked Bar Chart
-
-Use the `BarChartStacked` component to display multiple data points in a single bar.
-
-<ComponentWrapper>
-  <Card>
-    <CardSection>
-      <BarChartStacked :data-points="stackedDataPoints" height="150">
-        test
-      </BarChartStacked>
-    </CardSection>
-  </Card>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { BarChartStacked, Card, CardSection } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Card>
-    <CardSection>
-      <BarChartStacked :data-points="dataPoints" height="200" />
-    </CardSection>
-  </Card>
-</template>
-```

package/src/components/BarChart/index.ts

@@ -1,3 +0,0 @@
-export { default as BarChart } from './BarChart.vue';
-export { default as BarChartContainer } from './BarChartContainer.vue';
-export { default as BarChartStacked } from './BarChartStacked.vue';

package/src/components/Breadcrumbs/Breadcrumb.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <nav aria-label="breadcrumb">
-    <slot />
-  </nav>
-</template>

package/src/components/Breadcrumbs/BreadcrumbEllipsis.vue

@@ -1,12 +0,0 @@
-<script lang="ts" setup>
-import { EllipsisHorizontalIcon } from '@heroicons/vue/16/solid';
-</script>
-
-<template>
-  <span
-    role="presentation"
-    aria-hidden="true"
-  >
-    <EllipsisHorizontalIcon class="w-4 h-4" />
-  </span>
-</template>

package/src/components/Breadcrumbs/BreadcrumbItem.vue

@@ -1,8 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <li class="inline-flex items-center text-slate-500">
-    <slot />
-  </li>
-</template>

package/src/components/Breadcrumbs/BreadcrumbLink.vue

@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-import { InertiaLink } from '../InertiaLink';
-</script>
-
-<template>
-  <InertiaLink
-    class="hover:underline hover:text-black"
-    href="/"
-    role="link"
-  >
-    <slot />
-  </InertiaLink>
-</template>

package/src/components/Breadcrumbs/BreadcrumbList.vue

@@ -1,8 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <ol class="flex flex-wrap items-center gap-2 break-words">
-    <slot />
-  </ol>
-</template>

package/src/components/Breadcrumbs/BreadcrumbPage.vue

@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <span
-    aria-current="page"
-    aria-disabled="true"
-    class="text-black"
-    role="link"
-  >
-    <slot />
-  </span>
-</template>

package/src/components/Breadcrumbs/BreadcrumbSeparator.vue

@@ -1,12 +0,0 @@
-<script lang="ts" setup>
-import { ChevronRightIcon } from '@heroicons/vue/16/solid';
-</script>
-
-<template>
-  <li
-    aria-hidden="true"
-    role="presentation"
-  >
-    <ChevronRightIcon class="w-4 h-4" />
-  </li>
-</template>