@returnless/focus-ui 0.0.4 → 0.0.6

package/src/components/Alert/DismissableAlertButton.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { XMarkIcon } from '@heroicons/vue/16/solid';
-import { computed } from 'vue';
-import { AlertVariant } from './types';
-
-const props = withDefaults(defineProps<{
-  /** The variant of the alert. */
-  variant?: AlertVariant;
-}>(), {
-  variant: 'default',
-});
-
-defineEmits<{
-  dismiss: [];
-}>();
-
-const classList = computed((): Record<string, boolean> => {
-  return {
-    'hover:bg-red-900/20': props.variant === 'destructive',
-    'hover:bg-yellow-900/20': props.variant === 'warning',
-    'hover:bg-slate-200': props.variant === 'default',
-  };
-});
-</script>
-
-<template>
-  <button
-    :class="classList"
-    aria-label="Dismiss notification"
-    class="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded"
-    type="button"
-    @click="$emit('dismiss')"
-  >
-    <XMarkIcon class="h-4 w-4" />
-  </button>
-</template>

package/src/components/Alert/README.md

@@ -1,150 +0,0 @@
-<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 '@returnless/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 '@returnless/focus-ui';
-</script>
-
-<template>
-  <Alert variant="destructive">
-    <AlertTitle>Error</AlertTitle>
-    <AlertDescription>
-      Your session has expired. Please log in again.
-    </AlertDescription>
-  </Alert>
-</template>
-```
-
-### Warning
-
-Use to display information that needs attention or that user need to take action on. Seeing these banners can be
-stressful for user so be cautious about using them.
-
-<ComponentWrapper>
-  <Alert variant="warning">
-    <AlertTitle>Before you can purchase a shipping label, this change needs to be made:</AlertTitle>
-    <AlertDescription>
-      The name of the city you’re shipping to has characters that aren’t allowed. City name can only include spaces and hyphens.
-    </AlertDescription>
-  </Alert>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Alert, AlertDescription, AlertTitle } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Alert variant="warning">
-    <AlertTitle>Before you can purchase a shipping label, this change needs to be made:</AlertTitle>
-    <AlertDescription>
-      The name of the city you’re shipping to has characters that aren’t allowed. City name can only include spaces and hyphens.
-    </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

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

package/src/components/Alert/types.ts

@@ -1 +0,0 @@
-export type AlertVariant = 'default' | 'destructive' | 'warning';

package/src/components/AlertDialog/AlertDialog.vue

@@ -1,54 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, onUnmounted, provide } from 'vue';
-import { useUniqueId } from '../../composables';
-
-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);
-});
-
-const alertDialogLabelledBy = useUniqueId('alertDialogLabel');
-const alertDialogDescribedBy = useUniqueId('alertDialogDescription');
-
-provide('cancelAlertDialog', cancelAlertDialog);
-provide('alertDialogLabelledBy', alertDialogLabelledBy);
-provide('alertDialogDescribedBy', alertDialogDescribedBy);
-</script>
-
-<template>
-  <div
-    v-if="open"
-    :aria-describedby="alertDialogDescribedBy"
-    :aria-labelledby="alertDialogLabelledBy"
-    class="fixed top-0 left-0 z-10 h-screen w-screen bg-slate-500/50 px-2 text-sm"
-    role="alertdialog"
-  >
-    <div class="flex min-h-full items-center justify-center">
-      <slot />
-    </div>
-  </div>
-</template>

package/src/components/AlertDialog/AlertDialogActionButton.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-import { type ButtonVariant, Button } from '../Button';
-
-withDefaults(defineProps<{
-  /** The variant of the button. */
-  variant?: ButtonVariant;
-}>(), {
-  variant: 'primary',
-});
-</script>
-
-<template>
-  <Button :variant="variant">
-    <slot />
-  </Button>
-</template>

package/src/components/AlertDialog/AlertDialogCancelButton.vue

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

package/src/components/AlertDialog/AlertDialogContent.vue

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

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import { TextStyle } from '../TextStyle';
-import { inject } from 'vue';
-
-const alertDialogDescribedBy = inject<string>('alertDialogLabelledBy')!;
-</script>
-
-<template>
-  <p>
-    <TextStyle
-      :id="alertDialogDescribedBy"
-      variant="subdued"
-    >
-      <slot />
-    </TextStyle>
-  </p>
-</template>

package/src/components/AlertDialog/AlertDialogFooter.vue

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

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

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import { Heading } from '../Heading';
-import { inject } from 'vue';
-
-const alertDialogLabelledBy = inject<string>('alertDialogLabelledBy')!;
-</script>
-
-<template>
-  <Heading
-    :id="alertDialogLabelledBy"
-    level="h2"
-  >
-    <slot />
-  </Heading>
-</template>

package/src/components/AlertDialog/README.md

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

@@ -1,8 +0,0 @@
-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/AspectRatio/AspectRatio.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-withDefaults(defineProps<{
-  /** The aspect ratio of the element. */
-  ratio?: number;
-}>(), {
-  ratio: 1,
-});
-</script>
-
-<template>
-  <div
-    :style="{ paddingBottom: `${100 / ratio}%` }"
-    class="relative w-full"
-  >
-    <div class="absolute inset-0 [&>*]:object-cover [&>*]:w-full [&>*]:h-full">
-      <slot />
-    </div>
-  </div>
-</template>

package/src/components/AspectRatio/README.md

@@ -1,36 +0,0 @@
-<script lang="ts" setup>
-import { AspectRatio } from '../../src/components'; 
-import api from '../component-meta/AspectRatio.json';
-</script>
-
-# Aspect Ratio
-
-The AspectRatio component is a layout component that enforces a fixed aspect ratio on its children. This is useful when
-you want to ensure that a child component maintains a specific aspect ratio, regardless of the size of the parent
-component.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <div style="width: 400px;">
-    <AspectRatio :ratio="16 / 9">
-      <img src="https://www.retourneren.nl/media/catalog/product/cache/8d4d2075b1a30681853bef5bdc41b164/r/e/returnless_afbeelding.jpg">
-    </AspectRatio>
-  </div>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { AspectRatio } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <div style="width: 400px;">
-    <AspectRatio :ratio="16 / 9">
-      <img src="https://www.retourneren.nl/media/catalog/product/cache/8d4d2075b1a30681853bef5bdc41b164/r/e/returnless_afbeelding.jpg">
-    </AspectRatio>
-  </div>
-</template>
-```

package/src/components/AspectRatio/index.ts

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

package/src/components/Avatar/Avatar.vue

@@ -1,122 +0,0 @@
-<script lang="ts" setup>
-import { UserIcon } from '@heroicons/vue/16/solid';
-import { computed, ref } from 'vue';
-import { AspectRatio } from '../AspectRatio';
-import { Image } from '../Image';
-
-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 | undefined;
-
-  /** 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 | undefined;
-
-  /** Accessible label for the avatar image. */
-  accessibilityLabel?: string | null;
-}>(), {
-  size: 'md',
-  name: undefined,
-  initials: null,
-  source: undefined,
-  accessibilityLabel: null,
-});
-
-enum ImageLoadingState {
-  Pending = 'PENDING',
-  Loaded = 'LOADED',
-  Errored = 'ERRORED',
-}
-
-const imageLoadingState = ref<ImageLoadingState>(ImageLoadingState.Pending);
-
-const classList = computed((): Record<string, boolean>[] => {
-  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' },
-
-    { 'bg-slate-200': imageLoadingState.value !== ImageLoadingState.Loaded },
-  ];
-});
-
-const iconSize = computed((): Record<string, boolean>[] => {
-  return [
-    { 'w-3 h-3': props.size === 'xs' },
-  ];
-});
-
-const textSize = computed((): Record<string, boolean>[] => {
-  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;
-}
-
-function handleImageError(): void {
-  imageLoadingState.value = ImageLoadingState.Errored;
-}
-
-function handleImageLoad(): void {
-  imageLoadingState.value = ImageLoadingState.Loaded;
-}
-
-const accessibilityLabelValue = computed((): string | undefined => {
-  const accessibilityLabel = props.accessibilityLabel || props.name;
-
-  return accessibilityLabel
-    ? accessibilityLabel
-    : undefined;
-});
-</script>
-
-<template>
-  <span
-    :aria-label="accessibilityLabelValue"
-    :class="classList"
-    class="relative flex items-center justify-center overflow-hidden rounded"
-  >
-    <UserIcon
-      v-if="!initials"
-      :class="iconSize"
-      role="img"
-    />
-    <span
-      v-if="source"
-      class="absolute h-full w-full"
-    >
-      <AspectRatio>
-        <Image
-          :alt="name!"
-          :class="{ 'hidden': imageLoadingState !== ImageLoadingState.Loaded}"
-          :source="source"
-          @error="handleImageError"
-          @load="handleImageLoad"
-        />
-      </AspectRatio>
-    </span>
-    <span
-      v-if="initials && imageLoadingState !== ImageLoadingState.Loaded"
-      :class="textSize"
-      class="font-semibold"
-    >
-      {{ renderInitials(initials) }}
-    </span>
-  </span>
-</template>