@returnless/focus-ui 0.0.4 → 0.0.6

package/src/components/Breadcrumbs/README.md

@@ -1,91 +0,0 @@
-<script lang="ts" setup>
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '../../src/components'; 
-import api from '../component-meta/Breadcrumb.json';
-</script>
-
-# Breadcrumbs
-
-Breadcrumbs are a secondary navigation aid that helps users understand where they are in the application and how to
-navigate back to a previous page.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <Breadcrumb>
-    <BreadcrumbList>
-      <BreadcrumbItem>
-        <BreadcrumbLink href="/">
-          Home
-        </BreadcrumbLink>
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbEllipsis />
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbLink href="/">
-          Components
-        </BreadcrumbLink>
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbPage>
-          Breadcrumb
-        </BreadcrumbPage>
-      </BreadcrumbItem>
-    </BreadcrumbList>
-  </Breadcrumb>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Breadcrumb>
-    <BreadcrumbList>
-      <BreadcrumbItem>
-        <BreadcrumbLink href="/">
-          Home
-        </BreadcrumbLink>
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbEllipsis />
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbLink href="/">
-          Components
-        </BreadcrumbLink>
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbPage>
-          Breadcrumb
-        </BreadcrumbPage>
-      </BreadcrumbItem>
-    </BreadcrumbList>
-  </Breadcrumb>
-</template>
-```

package/src/components/Breadcrumbs/index.ts

@@ -1,7 +0,0 @@
-export { default as Breadcrumb } from './Breadcrumb.vue';
-export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
-export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
-export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
-export { default as BreadcrumbList } from './BreadcrumbList.vue';
-export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
-export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';

package/src/components/Button/Button.vue

@@ -1,75 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { Spinner } from '../';
-import { useTheme, useUniqueId } from '../../composables';
-import { ChevronDownIcon } from '@heroicons/vue/16/solid';
-import { ButtonProps } from './types';
-
-const props = withDefaults(defineProps<ButtonProps>(), {
-  disabled: false,
-  disclosure: false,
-  external: false,
-  fullWidth: false,
-  href: null,
-  loading: false,
-  size: 'normal',
-  type: 'button',
-  variant: 'primary',
-});
-
-const buttonLabelId = useUniqueId('buttonLabel');
-
-const classList = computed((): (Record<string, boolean> | string)[] => {
-  return [
-    { 'bg-brand-500 hover:bg-brand-600 text-white': props.variant === 'primary' },
-    { 'bg-slate-200 hover:bg-slate-300': props.variant === 'secondary' },
-    { 'bg-red-500/20 hover:bg-red-500/30 text-red-600': props.variant === 'destructive' },
-    { 'hover:bg-slate-200': props.variant === 'ghost' },
-
-    { 'px-4 py-3': props.size === 'normal' },
-    { 'px-3 py-2': props.size === 'small' },
-
-    { 'opacity-50 cursor-not-allowed': props.disabled },
-    { 'pointer-events-none opacity-75 justify-center': props.loading },
-
-    { 'w-full': props.fullWidth },
-
-    ...useTheme('focus', props.variant === 'destructive' ? 'destructive' : 'default'),
-  ];
-});
-</script>
-
-<template>
-  <span>
-    <button
-      :aria-busy="loading"
-      :aria-disabled="disabled || loading"
-      :aria-labelledby="buttonLabelId"
-      :class="classList"
-      :disabled="disabled || loading"
-      :type="type"
-      class="inline-flex items-center rounded text-sm font-medium leading-none active:opacity-80 active:shadow-inner"
-      role="button"
-    >
-      <span
-        :id="buttonLabelId"
-        :class="{ 'invisible': loading }"
-        class="inline-flex items-center justify-center space-x-4"
-      >
-        <slot />
-
-        <span
-          v-if="disclosure"
-          class="ml-2"
-        >
-          <ChevronDownIcon class="h-4 w-4" />
-        </span>
-      </span>
-
-      <Spinner
-        v-if="loading"
-        class="absolute"
-      />
-    </button>
-  </span>
-</template>

package/src/components/Button/ButtonContent.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <span class="text-sm leading-none">
-    <slot />
-  </span>
-</template>

package/src/components/Button/ButtonIcon.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { Image } from '../Image';
-
-withDefaults(defineProps<{
-  /** The alt text for the icon */
-  alt?: string | undefined;
-
-  /** The name of the icon to display */
-  name?: (() => void) | null;
-
-  /** The source of the icon to display */
-  source?: string | null;
-}>(), {
-  alt: undefined,
-  name: null,
-  source: null,
-});
-</script>
-
-<template>
-  <div class="flex-shrink-0 h-4 w-4 -mt-0.5 -mb-0.5">
-    <component
-      :is="name"
-      v-if="name"
-    />
-    <Image
-      v-if="source"
-      :alt="alt!"
-      :source="source"
-    />
-  </div>
-</template>

package/src/components/Button/README.md

@@ -1,231 +0,0 @@
-<script lang="ts" setup>
-import { Button, ButtonIcon, ButtonContent } from '../../src/components'; 
-import api from '../component-meta/Button.json';
-import { ArrowDownTrayIcon } from '@heroicons/vue/16/solid'; 
-</script>
-
-# Button
-
-Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. Plain buttons, which look similar
-to links, are used for less important or less commonly used actions, such as “view shipping settings”.
-
-<ComponentApi :api="api" />
-
-## Variants
-
-### Primary
-
-Use to highlight the most important actions in any experience. Don’t use more than one primary button in a section or
-screen to avoid overwhelming users.
-
-<ComponentWrapper>
-  <Button variant="primary">Primary</Button>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Button } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Button variant="primary">Primary</Button>
-</template>
-```
-
-### Secondary
-
-Used most in the interface. Only use another style if a button requires more or less visual weight.
-
-<ComponentWrapper>
-  <Button variant="secondary">Secondary</Button>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Button } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Button variant="secondary">Primary</Button>
-</template>
-```
-
-### Destructive
-
-Used when the action will delete user data or be otherwise difficult to recover from. Destructive buttons should
-trigger a confirmation dialog before the action is completed. Be thoughtful about using destructive buttons because
-they can feel stressful for users.
-
-<ComponentWrapper>
-  <Button variant="destructive">Destructive</Button>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Button } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Button variant="destructive">Destructive</Button>
-</template>
-```
-
-### Ghost
-
-Used for less important or less commonly used actions. Ghost buttons are less prominent than other button styles,
-
-<ComponentWrapper>
-  <Button variant="ghost">Ghost</Button>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Button } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Button variant="ghost">Ghost</Button>
-</template>
-```
-
-### Loading
-
-Use when a button has been pressed and the associated action is in progress.
-
-<ComponentWrapper>
-  <Button variant="secondary" loading>
-    Loading button
-  </Button>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Button } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Button variant="secondary" loading>
-    Loading button
-  </Button>
-</template>
-```
-
-### Button with icon
-
-Use when a button needs to be paired with an icon to help convey its purpose.
-
-<ComponentWrapper>
-  <ComponentGrid>
-    <Button variant="primary">
-      <ButtonIcon :name="ArrowDownTrayIcon" />
-      <ButtonContent>Button with icon on the left</ButtonContent>
-    </Button>
-    <Button variant="primary">
-      <ButtonContent>Button with icon on the right</ButtonContent>
-      <ButtonIcon :name="ArrowDownTrayIcon" />
-    </Button>
-  </ComponentGrid>
-</ComponentWrapper>
-
-### Button with image
-
-Use when a button needs to be paired with an image to help convey its purpose.
-
-<ComponentWrapper>
-  <ComponentGrid>
-    <Button variant="secondary">
-      <ButtonIcon source="https://panel.returnless.test/img/integrations/demo-logo.svg" />
-      <ButtonContent>Create coupon</ButtonContent>
-    </Button>
-    <Button variant="secondary">
-      <ButtonContent>Button with icon on the right</ButtonContent>
-      <ButtonIcon source="https://panel.returnless.test/img/integrations/demo-logo.svg" />
-    </Button>
-  </ComponentGrid>
-</ComponentWrapper>
-
-## Best practices
-
-Buttons should:
-
-- Be clearly and accurately labeled.
-- Lead with a strong, actionable verb.
-- Use established button colors appropriately. For example, only use a red button for an action that's difficult or
-  impossible to undo.
-- Prioritize the most important actions. Too many calls to action can cause confusion and make users unsure of what
-  to do next.
-- Be positioned in consistent locations in the interface.
-
-### Buttons versus links
-
-Buttons are used primarily for actions, such as "Add", "Close", "Cancel", or "Save". Plain buttons, which look
-similar to links, are used for less important or less commonly used actions, such as "view shipping settings".
-
-Links are used primarily for navigation, and usually appear within or directly following a sentence.
-
-The HTML that renders for the `Button` and `Link` components carriers meaning. Using these components intentionally
-and consistently results in:
-
-- A more inclusive experience for assistive technology users.
-- A more cohesive visual experience for sighted users.
-- Products that are easier to maintain at scale.
-
-## Content guidelines
-
-Buttons need to be clear and predictable. Users should be able to anticipate what will happen when they select a
-button. Never mislead someone by mislabeling a button.
-
-Buttons should always lead with a strong verb that encourages action. To provide enough context to users, use the
-{verb} + {noun} content formula on buttons except in the case of common actions like "Done", "Close", "Cancel", or "OK".
-
-Always write button text in sentence case, which means the first word is capitalized and the rest are lowercase
-(unless a term is a proper noun).
-
-Avoid unnecessary words and articles such as "the", "an", or "a" to keep button text short and actionable.
-
-## Accessibility
-
-Buttons can have different states that are visually and programmatically conveyed to users.
-
-- Use the `ariaControls` prop to add an `aria-controls` attribute to the button. Use the attribute to point to the
-  unique `id` of the content that the button manages.
-- If a button expands or collapses adjacent content, then use the `ariaExpanded` prop to add the `aria-expanded`
-  attribute to the button. Set the value to convey the current expanded (`true`) or collapsed (`false`) state of the
-  content.
-- Use the `disabled` prop to set the `disabled` state of the button. This prevents users from being able to interact
-  with the button, and conveys its inactive state to assistive technologies.
-- Use the `pressed` prop to add an `aria-pressed` attribute to the button.
-
-### Navigation
-
-Users generally expect buttons to submit data or take action, and for links to navigate. If navigation is required
-for the button component, use the `href` prop. The control will output an anchor styled as a button, instead of a
-button in HTML, to help convey this difference.
-
-### Labeling
-
-THe `accessibilityLabel` prop adds an `aria-label` attribute to the button, which can be accessed by assistive
-technologies like screen readers. Typically, this label text replaces the visible text on the button for users who
-use assistive technologies.
-
-Use `accessibilityLabel` for a button if:
-
-- The button's visible text does not adequately convey the purpose of the button to non-visual users.
-- The button has no text and relies on an icon alone to convey its purpose.
-
-To help support users who use speech activation software as well as sighted screen reader users, make sure that the
-`aria-label` text includes any button text that's visible. Mismatches between visible and programmatic labeling can
-cause confusion, and might prevent voice recognition commands from working.
-
-When possible, give the button visible text that clearly conveys its purpose without the user of
-`accessibilityLabel`. When no additional content is needed, duplication the button text with `accessibilityLabel`
-isn't necessary.
-
-### External links
-
-When you use the button component to create a link to an external resource:
-
-- Use the `external` prop to make the link open in a new tab (or window, depending on the user's browser settings).
-- Use the `icon` prop to add the `external` icon to the button.
-- Use the `accessibilityLabel` prop to include the warning about opening a new tab in the button text for non-visual
-  screen reader users.

package/src/components/Button/index.ts

@@ -1,5 +0,0 @@
-export { type ButtonVariant, type ButtonProps } from './types';
-
-export { default as Button } from './Button.vue';
-export { default as ButtonContent } from './ButtonContent.vue';
-export { default as ButtonIcon } from './ButtonIcon.vue';

package/src/components/Button/types.ts

@@ -1,30 +0,0 @@
-export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'ghost';
-
-export interface ButtonProps {
-  /** Whether the button is disabled. */
-  disabled?: boolean;
-
-  /** Displays the button with a disclosure icon. Defaults to `down` when set to true. */
-  disclosure?: boolean;
-
-  /** Whether the button should open the link in a new tab. */
-  external?: boolean;
-
-  /** Whether the button should span the full width of its parent. (INTERNAL USE ONLY) */
-  fullWidth?: boolean;
-
-  /** The URL the button should navigate to. */
-  href?: string | null;
-
-  /** Whether the button is in a loading state. */
-  loading?: boolean;
-
-  /** The button size. (INTERNAL USE ONLY) */
-  size?: 'small' | 'normal';
-
-  /** The type of the button. */
-  type?: 'button' | 'reset' | 'submit';
-
-  /** The variant of the button. */
-  variant?: ButtonVariant;
-}

package/src/components/ButtonGroup/ButtonGroup.vue

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

package/src/components/ButtonGroup/README.md

@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import { Button, ButtonGroup } from '../../src/components'; 
-import api from '../component-meta/ButtonGroup.json';
-</script>
-
-# Button Group
-
-Button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <ButtonGroup>
-    <Button variant="secondary">Cancel</Button>
-    <Button variant="primary">Save</Button>
-  </ButtonGroup>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Button, ButtonGroup } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <ButtonGroup>
-    <Button variant="secondary">Cancel</Button>
-    <Button variant="primary">Save</Button>
-  </ButtonGroup>
-</template>
-```
-
-## Best practices
-
-Button groups should:
-
-- Only use buttons that follow the best practices outlined in the button component.
-- Group together calls to action that have a relationship.
-- Be used with consideration that too many calls to action can cause users to be unsure of what to do next.
-- Be thoughtful about how multiple buttons will look and work on small screens.
-- Only be used in groups of up to six buttons if the buttons contain an icon with no text.

package/src/components/ButtonGroup/index.ts

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

package/src/components/Card/Card.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div class="border bg-white rounded-lg overflow-auto shadow-sm">
-    <slot />
-  </div>
-</template>

package/src/components/Card/CardDescription.vue

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

package/src/components/Card/CardFooter.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div class="flex items-center justify-end bg-slate-100 px-4 py-3">
-    <slot />
-  </div>
-</template>

package/src/components/Card/CardHeader.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div class="flex flex-col space-y-1.5 p-6 pb-0">
-    <slot />
-  </div>
-</template>

package/src/components/Card/CardHelp.vue

@@ -1,23 +0,0 @@
-<script lang="ts" setup>
-import { Link } from '@inertiajs/vue3';
-import { InformationCircleIcon } from '@heroicons/vue/16/solid';
-
-defineProps<{
-  href: string;
-}>();
-</script>
-
-<template>
-  <Link
-    :href="href"
-    class="ml-2 flex items-center rounded-full border border-transparent px-1 py-1 pr-2 text-xs font-normal leading-none text-slate-500 group hover:border-slate-300 hover:bg-slate-100"
-    native
-    target="_blank"
-    v-bind="$attrs"
-  >
-    <InformationCircleIcon class="h-4 w-4 group-hover:text-brand-500" />
-    <span class="ml-1 hidden text-black group-hover:block">
-      <slot />
-    </span>
-  </Link>
-</template>

package/src/components/Card/CardSection.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-const props = withDefaults(defineProps<{
-  flush?: boolean;
-}>(), {
-  flush: false,
-});
-
-const classList = computed((): Record<string, boolean> => {
-  return {
-    'py-6': props.flush,
-    'p-6': !props.flush,
-  };
-});
-</script>
-
-<template>
-  <div :class="classList">
-    <slot />
-  </div>
-</template>

package/src/components/Card/CardTitle.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { Heading } from '../Heading';
-</script>
-
-<template>
-  <Heading level="h2">
-    <div class="flex items-center">
-      <slot />
-    </div>
-  </Heading>
-</template>