@returnless/focus-ui 0.0.5 → 0.0.7

package/src/components/TopBar/index.ts

@@ -1,6 +0,0 @@
-export { default as TopBar } from './TopBar.vue';
-export { default as TopBarLogo } from './TopBarLogo.vue';
-export { default as TopBarNavigation } from './TopBarNavigation.vue';
-export { default as TopBarNavigationItem } from './TopBarNavigationItem.vue';
-export { default as TopBarSearch } from './TopBarSearch.vue';
-export { default as TopBarUserMenu } from './TopBarUserMenu.vue';

package/src/components/VisuallyHidden/README.md

@@ -1,19 +0,0 @@
-# Visually Hidden
-
-Use when an element needs to be available to assistive technology (for example, a screen reader) but otherwise hidden.
-
-## Best practices
-
-Visually hidden should:
-
-- Not be used if semantic markup can make content understandable to people using assistive technologies.
-- Be used to provide extra context when semantic markup isn't enough.
-- Be used on any content that is normally present but is being omitted.
-- Make sense in context when used with a screen reader.
-
-## Accessibility
-
-The visually hidden component styles text so that it’s not visible, but it is available to assistive technologies like
-screen readers and other text to speech programs.
-
-The component shouldn’t be used to hide interactive content.

package/src/components/VisuallyHidden/VisuallyHidden.vue

@@ -1,25 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <span :class="$style.visuallyHidden">
-    <slot />
-  </span>
-</template>
-
-<style lang="css" module>
-/**
- * styles referenced from GOV.UK design system
- * https://github.com/h5bp/main.css/issues/12#issuecomment-451965809
- */
-.visuallyHidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip-path: inset(50%) !important;
-  border: 0 !important;
-  white-space: nowrap !important;
-}
-</style>

package/src/components/VisuallyHidden/index.ts

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

package/src/components/index.ts

@@ -1,197 +0,0 @@
-export {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from './Accordion';
-
-export {
-  ActionList,
-  ActionListBody,
-  ActionListItem,
-  ActionListSection,
-  ActionListTrigger,
-} from './ActionList';
-
-export { Alert, AlertDescription, AlertTitle } from './Alert';
-
-export {
-  AlertDialog,
-  AlertDialogActionButton,
-  AlertDialogCancelButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from './AlertDialog';
-
-export { AspectRatio } from './AspectRatio';
-
-export { Avatar } from './Avatar';
-
-export { Badge, BadgeContent, BadgeIcon } from './Badge';
-
-export { BarChart, BarChartContainer, BarChartStacked } from './BarChart';
-
-export {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from './Breadcrumbs';
-
-export {
-  type ButtonVariant,
-  Button,
-  ButtonContent,
-  ButtonIcon,
-} from './Button';
-
-export { ButtonGroup } from './ButtonGroup';
-
-export {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardHelp,
-  CardSection,
-  CardTitle,
-} from './Card';
-
-export { Checkbox } from './Checkbox';
-
-export {
-  DatePicker,
-  DatePickerCard,
-} from './DatePicker';
-
-export {
-  DescriptionList,
-  DescriptionListDescription,
-  DescriptionListItem,
-  DescriptionListTerm,
-} from './DescriptionList';
-
-export { DropZone } from './DropZone';
-
-export {
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateContent,
-  EmptyStateDescription,
-  EmptyStateTitle,
-} from './EmptyState';
-
-export {
-  Feed,
-  FeedItem,
-  FeedItemBlock,
-  FeedItemDateIndicator,
-  FeedItemIcon,
-  FeedItemSimple,
-} from './Feed';
-
-export { FileUploadButton } from './FileUploadButton';
-
-export { Form } from './Form';
-
-export { FormLayout } from './FormLayout';
-
-export {
-  type HeadingLevel,
-  type HeadingSize,
-  Heading,
-} from './Heading';
-
-export { Image } from './Image';
-
-export { InlineError } from './InlineError';
-
-export { InputLabel } from './InputLabel';
-
-export { KPICard, KPICardSection } from './KPICard';
-
-export { Legend, LegendItem } from './Legend';
-
-export { Link } from './Link';
-
-export {
-  Navigation,
-  NavigationItem,
-  NavigationSecondarySection,
-  NavigationSection,
-} from './Navigation';
-
-export {
-  Page,
-  PageBody,
-  PageDescription,
-  PageHeader,
-  PageTitle,
-} from './Page';
-
-export {
-  Pagination,
-  PaginationNextButton,
-  PaginationPreviousButton,
-} from './Pagination';
-
-export { PinInput } from './PinInput';
-
-export {
-  Popover,
-  PopoverBody,
-  PopoverTrigger,
-} from './Popover';
-
-export {
-  PopperBody,
-  Popper,
-  PopperTrigger,
-} from './Popper';
-
-export { ProgressBar, ProgressBarIndicator } from './ProgressBar';
-
-export { RadioButton } from './RadioButton';
-
-export { ResourceList, ResourceListItem, ResourceListItemContent } from './ResourceList';
-
-export { Select, SelectGroup, SelectOption } from './Select';
-
-export { Separator } from './Separator';
-
-export { Spinner } from './Spinner';
-
-export { StatusIndicator } from './StatusIndicator';
-
-export { Stepper } from './Stepper';
-
-export { Tabs, TabTrigger } from './Tabs';
-
-export { Tag } from './Tag';
-
-export { TextField } from './TextField';
-
-export { TextStyle } from './TextStyle';
-
-export { Toast, ToastGroup } from './Toast';
-
-export { Toggle } from './Toggle';
-
-export { Tooltip } from './Tooltip';
-
-export {
-  TopBar,
-  TopBarLogo,
-  TopBarNavigation,
-  TopBarNavigationItem,
-  TopBarSearch,
-  TopBarUserMenu,
-} from './TopBar';
-
-export { VisuallyHidden } from './VisuallyHidden';

package/src/components/types.ts

@@ -1,5 +0,0 @@
-/**
- * Possible types for the file accepts attribute.
- * These are mainly used for the FileUploadButton component and the DropZone component.
- */
-export type FileAccepts = 'image' | 'pdf' | '*';

package/src/composables/index.ts

@@ -1,7 +0,0 @@
-export { type TailwindColor, useTailwindColor } from './useTailwindColor';
-
-export { useTheme } from './useTheme';
-
-export { useToastNotifications } from './useToastNotifications';
-
-export { useUniqueId } from './useUniqueId';

package/src/composables/useTailwindColor.ts

@@ -1,17 +0,0 @@
-import colors from 'tailwindcss/colors';
-
-type TailwindColorMap = typeof colors;
-
-export type TailwindColor = keyof {
-  [K in keyof TailwindColorMap as TailwindColorMap[K] extends object ? K : never]: TailwindColorMap[K];
-};
-
-type TailwindVariant<T extends TailwindColor> = keyof TailwindColorMap[T];
-
-export function useTailwindColor<T extends TailwindColor>(color: T, variant: TailwindVariant<T> & string): TailwindColorMap[T][TailwindVariant<T>] {
-  if (!colors[color]) {
-    throw new Error(`Color '${color}' does not exist in the Tailwind CSS color palette.`);
-  }
-
-  return colors[color][variant];
-}

package/src/composables/useTheme.ts

@@ -1,41 +0,0 @@
-const themeValues = {
-  focus: {
-    default: [
-      'focus:ring-brand-100',
-      'focus:ring-2',
-      'focus:outline',
-      'focus:outline-1',
-      'focus:outline-offset-0',
-      'focus:outline-brand-500/50',
-    ],
-
-    destructive: [
-      'focus:ring-red-100',
-      'focus:ring-2',
-      'focus:outline',
-      'focus:outline-1',
-      'focus:outline-offset-0',
-      'focus:outline-red-500/50',
-    ],
-  },
-
-  focusWithin: {
-    default: [
-      'focus-within:border-brand-500',
-      'focus-within:ring-brand-100',
-      'focus-within:ring-2',
-    ],
-  },
-};
-
-type ThemeValues = typeof themeValues;
-
-export function useTheme<T extends keyof ThemeValues>(value: T | Array<T>, variant: keyof ThemeValues[T] = 'default'): string | string[] {
-  if (Array.isArray(value)) {
-    return value
-      .map((v) => useTheme(v, variant))
-      .join(' ');
-  }
-
-  return themeValues[value][variant] as string[];
-}

package/src/composables/useToastNotifications.ts

@@ -1,55 +0,0 @@
-import { ref } from 'vue';
-import { useEventBus } from '@vueuse/core';
-import { useUniqueId } from './useUniqueId';
-
-export interface ToastNotification {
-  id: string;
-  message: string;
-}
-
-interface useToastNotification {
-  toastNotifications: any;
-  initializeNotificationHandlers: any;
-  closeToastNotification: any;
-  emitToastNotificationEvent: any;
-  emitToastNotificationEvents: any;
-}
-
-export function useToastNotifications(): useToastNotification {
-  const toastNotifications = ref<ToastNotification[]>([]);
-  const eventBus = useEventBus<ToastNotification>('toastNotifications');
-
-  function initializeNotificationHandlers(): void {
-    eventBus.on(function (event: ToastNotification): void {
-      toastNotifications.value.push(event);
-    });
-  }
-
-  function closeToastNotification(toastNotification: ToastNotification): void {
-    toastNotifications.value = toastNotifications.value.filter((notification: ToastNotification): boolean => {
-      return notification.id !== toastNotification.id;
-    });
-  }
-
-  function emitToastNotificationEvent(toastNotification: Omit<ToastNotification, 'id'>): void {
-    (toastNotification as ToastNotification).id = useUniqueId('toast-notification');
-
-    eventBus.emit(toastNotification as ToastNotification);
-  }
-
-  function emitToastNotificationEvents(toastNotifications: Omit<ToastNotification, 'id'>[]): void {
-    toastNotifications.forEach((toastNotification: Omit<ToastNotification, 'id'>): void => {
-      (toastNotification as ToastNotification).id = useUniqueId('toast');
-
-      emitToastNotificationEvent(toastNotification);
-    });
-  }
-
-  return {
-    toastNotifications,
-    initializeNotificationHandlers,
-    closeToastNotification,
-    emitToastNotificationEvent,
-    emitToastNotificationEvents,
-  };
-}

package/src/composables/useUniqueId.ts

@@ -1,6 +0,0 @@
-export function useUniqueId(prefix = 'id'): string {
-  return Math
-    .random()
-    .toString(36)
-    .replace('0.', `${prefix}-` || '');
-}

package/src/index.css

@@ -1,24 +0,0 @@
-@import url('https://rsms.me/inter/inter.css');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  [type="checkbox"]:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-  }
-
-  [type="radio"]:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-  }
-
-  [type="checkbox"]:checked,
-  [type="radio"]:checked {
-    background-color: currentColor;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    border-color: transparent;
-  }
-}

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components';

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />