@returnless/focus-ui 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@returnless/focus-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -38,9 +38,9 @@
     "vue-tsc": "^2.0.19"
   },
   "files": [
-    "src",
     "dist"
   ],
+  "main": "./dist/focus-ui.umd.js",
   "module": "./dist/focus-ui.js",
   "exports": {
     ".": {
@@ -49,6 +49,7 @@
     },
     "./style.css": "./dist/style.css"
   },
+  "types": "./dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Returnless-com/focus-ui.git"

package/src/build-utils/generate-component-meta.ts

@@ -1,80 +0,0 @@
-import fs, { existsSync, mkdirSync } from 'fs';
-import { dirname, join, parse, resolve } from 'path';
-import { fileURLToPath } from 'url';
-import fg from 'fast-glob';
-import type { ComponentMeta, MetaCheckerOptions } from 'vue-component-meta';
-import { createComponentMetaChecker } from 'vue-component-meta';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-export interface ComponentApiProps {
-  name: ComponentMeta['props'][number]['name'];
-  description: ComponentMeta['props'][number]['description'];
-
-  // required: ComponentMeta['props'][number]['required']
-  type: ComponentMeta['props'][number]['type'];
-  default: ComponentMeta['props'][number]['default'];
-}
-
-export interface ComponentApi {
-  props: ComponentApiProps[];
-  events: ComponentMeta['events'];
-  slots: ComponentMeta['slots'];
-}
-
-const checkerOptions: MetaCheckerOptions = {
-  forceUseTs: true,
-  schema: { ignore: ['MyIgnoredNestedProps'] },
-  printer: { newLine: 1 },
-};
-
-const tsconfigChecker = createComponentMetaChecker(
-  resolve(__dirname, '../../tsconfig.json'),
-  checkerOptions,
-);
-
-function filterMeta(meta: ComponentMeta): ComponentApi {
-  const props: ComponentApiProps[] = [];
-
-  meta.props.forEach((prop) => {
-    if (prop.global) {
-      return;
-    }
-
-    const { name, description, required, type, default: defaultValue } = prop;
-
-    props.push({
-      name: `${name}${required ? '' : '?'}`,
-      description: description,
-      type,
-      default: defaultValue || 'unknown',
-    });
-  });
-
-  return {
-    props,
-    events: meta.events,
-    slots: meta.slots.map((s) => ({ ...s, description: s.description })),
-  };
-}
-
-const components = fg.sync(['src/components/**/*.vue'], {
-  cwd: resolve(__dirname, '../../'),
-  absolute: true,
-});
-
-components.forEach((componentPath: string) => {
-  const componentName = parse(componentPath).name;
-
-  const metaDirPath = resolve(__dirname, '../../docs/component-meta');
-
-  if (!existsSync(metaDirPath)) {
-    mkdirSync(metaDirPath);
-  }
-
-  const metaJsonFilePath = join(metaDirPath, `${componentName}.json`);
-  const meta = filterMeta(tsconfigChecker.getComponentMeta(componentPath));
-
-  fs.writeFileSync(metaJsonFilePath, JSON.stringify(meta, null, 2));
-});

package/src/build-utils/update-component-list.js

@@ -1,31 +0,0 @@
-console.log('gaaf');
-// import { readdirSync, existsSync, copyFileSync, writeFileSync } from 'fs';
-// import { resolve, dirname } from 'path';
-//
-// const __dirname = resolve(dirname(''));
-//
-// const componentList = readdirSync(resolve(__dirname, '../components'))
-//   .filter((component: string) => existsSync(resolve(__dirname, `../components/${component}/README.md`)));
-//
-// // Copy the readme files.
-// componentList.forEach((component: string) => {
-//   copyFileSync(
-//     resolve(__dirname, `../components/${component}/README.md`),
-//     resolve(__dirname, `../../docs/components/${component}.md`),
-//   );
-// });
-//
-// const componentsFileContent = `\
-// /**
-//  * Generated by: src/build-utils/update-comoonent-list.js
-//  * Generated on: ${new Date().toDateString()}
-//  */
-//
-// module.exports = [
-// ${componentList
-//     .map((component: string) => `  '/components/${component}',`)
-//     .join('\n')}
-// ];
-// `;
-//
-// writeFileSync(resolve(__dirname, '../../docs/.vuepress/component-list.js'), componentsFileContent);

package/src/build-utils/update-component-list.ts

@@ -1,32 +0,0 @@
-import { readdirSync, existsSync, copyFileSync, writeFileSync } from 'fs';
-import { resolve, dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const componentList = readdirSync(resolve(__dirname, '../components'))
-  .filter((component: string) => existsSync(resolve(__dirname, `../components/${component}/README.md`)));
-
-// Copy the readme files.
-componentList.forEach((component: string) => {
-  copyFileSync(
-    resolve(__dirname, `../components/${component}/README.md`),
-    resolve(__dirname, `../../docs/components/${component}.md`),
-  );
-});
-
-const componentsFileContent = `\
-/**
- * Generated by: src/build-utils/update-component-list.js
- * Generated on: ${new Date().toDateString()}
- */
-
-export default [
-${componentList
-    .map((component: string) => `  { text: '${component}', link: 'components/${component}' },`)
-    .join('\n')}
-];
-`;
-
-writeFileSync(resolve(__dirname, '../../docs/component-list.ts'), componentsFileContent);

package/src/components/Accordion/Accordion.vue

@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import { provide, ref } from 'vue';
-
-withDefaults(defineProps<{
-  /** The orientation of the accordion. */
-  orientation?: 'horizontal' | 'vertical';
-}>(), {
-  orientation: 'vertical',
-});
-
-const activeAccordionItem = ref<string | null>(null);
-
-provide('activeAccordionItem', activeAccordionItem);
-</script>
-
-<template>
-  <div class="w-full">
-    <slot />
-  </div>
-</template>

package/src/components/Accordion/AccordionContent.vue

@@ -1,43 +0,0 @@
-<script lang="ts" setup>
-import { inject } from 'vue';
-
-const accordionItemActive = inject<boolean>('accordionItemActive');
-const accordionItemId = inject<string>('accordionItemId')!;
-
-function beforeEnter(element: Element): void {
-  (element as HTMLElement).style.height = '0';
-}
-
-function enter(element: Element): void {
-  (element as HTMLElement).style.height = element.scrollHeight + 'px';
-}
-
-function beforeLeave(element: Element): void {
-  (element as HTMLElement).style.height = element.scrollHeight + 'px';
-}
-
-function leave(element: Element): void {
-  (element as HTMLElement).style.height = '0';
-}
-</script>
-
-<template>
-  <transition
-    name="accordion"
-    @enter="enter"
-    @leave="leave"
-    @before-enter="beforeEnter"
-    @before-leave="beforeLeave"
-  >
-    <div
-      v-show="accordionItemActive"
-      :id="accordionItemId"
-      class="transition-all duration-200 ease-in-out overflow-hidden"
-      role="region"
-    >
-      <div class="py-3">
-        <slot />
-      </div>
-    </div>
-  </transition>
-</template>

package/src/components/Accordion/AccordionItem.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import { computed, inject, provide, Ref } from 'vue';
-import { useUniqueId } from '../../composables';
-
-const accordionItemId = useUniqueId('accordionItem');
-const activeAccordionItem = inject<Ref<string>>('activeAccordionItem')!;
-
-const accordionItemActive = computed((): boolean => activeAccordionItem.value === accordionItemId);
-
-provide('accordionItemId', accordionItemId);
-provide('accordionItemActive', accordionItemActive);
-</script>
-
-<template>
-  <div
-    class="border-b"
-    :aria-expanded="accordionItemActive"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/Accordion/AccordionTrigger.vue

@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import { inject, Ref } from 'vue';
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/16/solid';
-import { TextStyle } from '../TextStyle';
-
-const activeAccordionItem = inject<Ref<string | null>>('activeAccordionItem')!;
-const accordionItemId = inject<string>('accordionItemId')!;
-const accordionItemActive = inject<boolean>('accordionItemActive');
-
-function toggleAccordionItem(): void {
-  activeAccordionItem.value = activeAccordionItem.value !== accordionItemId
-    ? accordionItemId
-    : null;
-}
-</script>
-
-<template>
-  <button
-    :aria-controls="accordionItemId"
-    class="w-full flex flex-1 items-center justify-between group"
-    @click="toggleAccordionItem"
-  >
-    <span class="py-3 group-hover:underline">
-      <TextStyle variant="strong">
-        <slot />
-      </TextStyle>
-    </span>
-
-    <ChevronDownIcon
-      v-if="!accordionItemActive"
-      class="w-4 h-4"
-    />
-    <ChevronUpIcon
-      v-if="accordionItemActive"
-      class="w-4 h-4"
-    />
-  </button>
-</template>

package/src/components/Accordion/README.md

@@ -1,56 +0,0 @@
-<script lang="ts" setup>
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../src/components'; 
-import api from '../component-meta/Accordion.json';
-</script>
-
-# Accordion
-
-A vertically stacked set of interactive headings that each reveal a section of content.
-
-<ComponentApi :api="api" />
-
-## Variants
-
-### Default
-
-Use to display a list of questions and answers. The user can click on a question to reveal the answer.
-
-<ComponentWrapper>
-  <Accordion>
-    <AccordionItem>
-      <AccordionTrigger>Is it accessible?</AccordionTrigger>
-      <AccordionContent>Yes. It adheres to the AI-ARIA design system</AccordionContent>
-    </AccordionItem>
-    <AccordionItem>
-      <AccordionTrigger>Is it styled?</AccordionTrigger>
-      <AccordionContent>Yes. It comes with default styles that matches the other components' aesthetic.</AccordionContent>
-    </AccordionItem>
-    <AccordionItem>
-      <AccordionTrigger>Is it animated?</AccordionTrigger>
-      <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>
-    </AccordionItem>
-  </Accordion>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Accordion>
-    <AccordionItem>
-      <AccordionTrigger>Is it accessible?</AccordionTrigger>
-      <AccordionContent>Yes. It adheres to the AI-ARIA design system</AccordionContent>
-    </AccordionItem>
-    <AccordionItem>
-      <AccordionTrigger>Is it styled?</AccordionTrigger>
-      <AccordionContent>Yes. It comes with default styles that matches the other components' aesthetic.</AccordionContent>
-    </AccordionItem>
-    <AccordionItem>
-      <AccordionTrigger>Is it animated?</AccordionTrigger>
-      <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>
-    </AccordionItem>
-  </Accordion>
-</template>
-```

package/src/components/Accordion/index.ts

@@ -1,4 +0,0 @@
-export { default as Accordion } from './Accordion.vue';
-export { default as AccordionContent } from './AccordionContent.vue';
-export { default as AccordionItem } from './AccordionItem.vue';
-export { default as AccordionTrigger } from './AccordionTrigger.vue';

package/src/components/ActionList/ActionList.vue

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

package/src/components/ActionList/ActionListBody.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { PopoverBody } from '../Popover';
-</script>
-
-<template>
-  <PopoverBody>
-    <div class="min-w-[200px]">
-      <slot />
-    </div>
-  </PopoverBody>
-</template>

package/src/components/ActionList/ActionListItem.vue

@@ -1,37 +0,0 @@
-<script lang="ts" setup>
-import { Button, ButtonContent, ButtonVariant } from '../Button';
-
-withDefaults(defineProps<{
-  /** Whether the action list item is active. */
-  active?: boolean;
-
-  /** The icon to display next to the action list item. */
-  icon: () => void | null;
-
-  variant?: ButtonVariant;
-}>(), {
-  active: false,
-  variant: 'ghost',
-});
-</script>
-
-<template>
-  <li class="block">
-    <Button
-      :active="active"
-      :variant="variant"
-      full-width
-      role="menuitem"
-      size="small"
-    >
-      <component
-        :is="icon"
-        v-if="icon"
-        class="w-4 h-4"
-      />
-      <ButtonContent>
-        <slot />
-      </ButtonContent>
-    </Button>
-  </li>
-</template>

package/src/components/ActionList/ActionListSection.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <ul class="[&:not(:last-child)]:border-b p-1.5 space-y-0.5">
-    <slot />
-  </ul>
-</template>

package/src/components/ActionList/ActionListTrigger.vue

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

package/src/components/ActionList/README.md

@@ -1,113 +0,0 @@
-<script lang="ts" setup>
-import {
-  ActionList,
-  ActionListBody,
-  ActionListItem,
-  ActionListSection,
-  ActionListTrigger,
-  Button,
-} from '../../src/components'; 
-import { Link } from '@inertiajs/vue3'; 
-import api from '../component-meta/ActionList.json';
-import { TrashIcon, PencilIcon, ArrowUpTrayIcon, ArrowDownTrayIcon } from '@heroicons/vue/16/solid';
-</script>
-
-# Action list
-
-Action lists render a list of actions or selectable options. This component is usually placed inside a popover container
-to create a dropdown menu or let users select from a list of options.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <ActionList>
-    <ActionListTrigger>
-      <Button disclosure variant="ghost">Action trigger</Button>
-    </ActionListTrigger>
-    <ActionListBody>
-    <ActionListSection label="File options">
-      <ActionListItem :icon="ArrowDownTrayIcon" href="#" as="link">
-        Import file
-      </ActionListItem>
-      <ActionListItem :icon="ArrowUpTrayIcon" active as="button">
-        Export file
-      </ActionListItem>
-    </ActionListSection>
-      <ActionListSection label="Bulk actions">
-        <ActionListItem :icon="PencilIcon" as="button">
-          Edit
-        </ActionListItem>
-        <ActionListItem :icon="TrashIcon" as="button" variant="destructive">
-          Delete
-        </ActionListItem>
-      </ActionListSection>
-    </ActionListBody>
-  </ActionList>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import {
-  ActionList,
-  ActionListBody,
-  ActionListItem,
-  ActionListSection,
-  ActionListTrigger,
-  Button,
-} from '@returnless/focus-ui'; 
-import { TrashIcon, PencilIcon, ArrowUpTrayIcon, ArrowDownTrayIcon } from '@heroicons/vue/16/solid';
-</script>
-
-<template>
-  <ActionList>
-    <ActionListTrigger>
-      <Button disclosure variant="ghost">Action trigger</Button>
-    </ActionListTrigger>
-    <ActionListBody>
-    <ActionListSection label="File options">
-      <ActionListItem :icon="ArrowDownTrayIcon" href="#" as="link">
-        Import file
-      </ActionListItem>
-      <ActionListItem :icon="ArrowUpTrayIcon" active as="button">
-        Export file
-      </ActionListItem>
-    </ActionListSection>
-      <ActionListSection label="Bulk actions">
-        <ActionListItem :icon="PencilIcon" as="button">
-          Edit
-        </ActionListItem>
-        <ActionListItem :icon="TrashIcon" as="button" variant="destructive">
-          Delete
-        </ActionListItem>
-      </ActionListSection>
-    </ActionListBody>
-  </ActionList>
-</template>
-```
-
-## Best practices
-
-Action lists should:
-
-- Be used for secondary or less important information and actions since they're hidden until users expose them by
-  opening a popover
-- Contain actions that are related to each other
-
-## Content guidelines
-
-### Action lists
-
-Each item in an action list should be clear and predictable. Users should be able to anticipate what will happen
-when they click on an action.
-
-Each item in an action list should always lead with a strong verb that encourages action. To provide enough context
-use the {verb}+{noun} format unless the action is clear with a single verb.
-
-Each item in an action list should be scannable avoiding unnecessary words and articles such as "the", "an", or "a".
-
-## Accessibility
-
-Items in an action list are organized as list items (`<li>`) in an unordered list (`<ul>`) and are conveyed as a
-group of related elements to assistive technology users. Each item is implemented as a button.

package/src/components/ActionList/index.ts

@@ -1,5 +0,0 @@
-export { default as ActionList } from './ActionList.vue';
-export { default as ActionListBody } from './ActionListBody.vue';
-export { default as ActionListItem } from './ActionListItem.vue';
-export { default as ActionListSection } from './ActionListSection.vue';
-export { default as ActionListTrigger } from './ActionListTrigger.vue';

package/src/components/Alert/Alert.vue

@@ -1,68 +0,0 @@
-<script lang="ts" setup>
-import { computed, provide, ref } from 'vue';
-import { AlertVariant } from './types';
-import DismissibleAlertButton from './DismissableAlertButton.vue';
-
-const props = withDefaults(defineProps<{
-  /** Whether the alert is flush to the borders. */
-  flush?: boolean;
-
-  /** Whether the alert can be dismissed. */
-  dismissible?: boolean;
-
-  /** The variant of the alert. */
-  variant?: AlertVariant;
-}>(), {
-  flush: false,
-  dismissible: true,
-  variant: 'default',
-});
-
-const emits = defineEmits<{
-  /** Emitted when the alert is dismissed. */
-  dismiss: [];
-}>();
-
-provide('alertVariant', props.variant);
-
-const alertDismissed = ref(false);
-
-const classList = computed((): Record<string, boolean>[] => {
-  return [
-    { 'bg-white': props.variant === 'default' },
-    { 'bg-red-50 border-red-500/40 text-red-800': props.variant === 'destructive' },
-    { 'bg-yellow-50 border-yellow-500/40 text-yellow-800': props.variant === 'warning' },
-
-    { 'border rounded px-4 py-3': !props.flush },
-    { 'border-y px-6 py-3 mt-6': props.flush },
-  ];
-});
-
-const role = computed(() => props.variant === 'destructive' ? 'alert' : 'status');
-const liveRegion = computed(() => props.variant === 'destructive' ? 'assertive' : 'polite');
-
-function dismissAlert(): void {
-  emits('dismiss');
-
-  alertDismissed.value = true;
-}
-</script>
-
-<template>
-  <div
-    v-if="! alertDismissed"
-    :class="classList"
-    :role="role"
-    :aria-live="liveRegion"
-    class="relative shadow-sm"
-    tabindex="0"
-  >
-    <slot />
-
-    <DismissibleAlertButton
-      v-if="dismissible"
-      :variant="variant"
-      @dismiss="dismissAlert"
-    />
-  </div>
-</template>

package/src/components/Alert/AlertDescription.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-import { AlertVariant } from './types';
-
-const alertVariant = inject<AlertVariant>('alertVariant');
-
-const classList = computed((): Record<string, boolean> => {
-  return {
-    'text-red-900/80': alertVariant === 'destructive',
-    'text-yellow-900/80': alertVariant === 'warning',
-    'text-gray-900/80': alertVariant === 'default',
-  };
-});
-</script>
-
-<template>
-  <div :class="classList">
-    <slot />
-  </div>
-</template>

package/src/components/Alert/AlertTitle.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { TextStyle } from '../TextStyle';
-</script>
-
-<template>
-  <h5 class="mb-4 leading-none">
-    <TextStyle variant="strong">
-      <slot />
-    </TextStyle>
-  </h5>
-</template>