@returnless/focus-ui 0.0.1 → 0.0.3

package/src/components/TextField/README.md

@@ -21,7 +21,7 @@ multiline options.
 
 ```js-vue
 <script lang="ts" setup>
-import { TextField } from 'focus-ui';
+import { TextField } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -40,7 +40,7 @@ important information.
 
 ```js-vue
 <script lang="ts" setup>
-import { TextField } from 'focus-ui';
+import { TextField } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -59,7 +59,7 @@ it for important information.
 
 ```js-vue
 <script lang="ts" setup>
-import { TextField } from 'focus-ui';
+import { TextField } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -78,7 +78,7 @@ application.
 
 ```js-vue
 <script lang="ts" setup>
-import { TextField } from 'focus-ui';
+import { TextField } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -94,7 +94,7 @@ import { TextField } from 'focus-ui';
 
 ```js-vue
 <script lang="ts" setup>
-import { TextField } from 'focus-ui';
+import { TextField } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -110,7 +110,25 @@ import { TextField } from 'focus-ui';
 
 ```js-vue
 <script lang="ts" setup>
-import { TextField } from 'focus-ui';
+import { TextField } from '@returnless/focus-ui';
+</script>
+
+<template>
+  <TextField multiline name="textarea" label="Textarea" rows="5" />
+</template>
+```
+
+### With error
+
+Use to indicate that there is a problem with the input. Error messages should be concise and helpful.
+
+<ComponentWrapper>
+  <TextField name="element_with_error" label="Store name" error="Store name is required" />
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { TextField } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/TextField/TextField.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { computed, provide, ref } from 'vue';
 import { InputLabel } from '../InputLabel';
+import { InlineError } from '../InlineError';
 import { useTheme, useUniqueId } from '../../composables';
+import TextFieldIcon from './TextFieldIcon.vue';
 import TextFieldPasswordIcon from './TextFieldPasswordIcon.vue';
 import TextFieldSearchIcon from './TextFieldSearchIcon.vue';
 
@@ -12,9 +14,15 @@ const props = withDefaults(defineProps<{
   /** Whether the input is disabled. */
   disabled?: boolean;
 
+  /** The error to display below the input. */
+  error?: string | null;
+
   /** The help text to display below the input. */
   helpText?: string | null;
 
+  /** The icon to display inside the input. */
+  icon?: (() => void) | string | undefined;
+
   /** The ID of the input the label is associated with. */
   id?: string | null;
 
@@ -44,7 +52,9 @@ const props = withDefaults(defineProps<{
 }>(), {
   autoComplete: null,
   disabled: false,
+  error: null,
   helpText: null,
+  icon: undefined,
   id: null,
   labelHidden: false,
   multiline: false,
@@ -60,13 +70,13 @@ const internalInputType = ref(props.type);
 
 const elementId = props.id || useUniqueId('textField');
 
-const classList = computed(() => {
+const classList = computed((): Record<string, boolean>[] => {
   return [
-    { 'pl-10': props.type === 'search' },
+    { 'pl-10': props.type === 'search' || props.icon !== undefined },
   ];
 });
 
-const componentType = computed(() => {
+const componentType = computed((): string => {
   return props.multiline ? 'textarea' : 'input';
 });
 
@@ -74,7 +84,7 @@ provide('internalInputType', internalInputType);
 </script>
 
 <template>
-  <div class="w-full space-y-2">
+  <div class="w-full space-y-1">
     <InputLabel
       :id="`${elementId}-label`"
       :label="label"
@@ -83,7 +93,7 @@ provide('internalInputType', internalInputType);
     />
 
     <div
-      :class="useTheme('focusWithin')"
+      :class="[useTheme('focusWithin'), { 'border-red-500': error }]"
       class="relative flex w-full items-center overflow-hidden rounded border bg-white shadow-sm"
     >
       <component
@@ -104,10 +114,20 @@ provide('internalInputType', internalInputType);
         v-bind="$attrs"
         @input="model = $event.target.value"
       />
+      <TextFieldIcon
+        v-if="icon"
+        :icon="icon"
+      />
       <TextFieldSearchIcon v-if="type === 'search'" />
       <TextFieldPasswordIcon v-if="type === 'password' && model" />
     </div>
 
+    <InlineError
+      v-if="error"
+      id="test"
+      :message="error"
+    />
+
     <p class="text-sm text-slate-500">
       {{ helpText }}
     </p>

package/src/components/TextField/TextFieldIcon.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+defineProps<{
+  icon: (() => void) | string;
+}>();
+</script>
+
+<template>
+  <span
+    v-if="icon"
+    class="w-4 h-4 absolute left-4 text-slate-500 leading-4"
+  >
+    <component
+      :is="icon"
+      v-if="icon && typeof icon === 'function'"
+      class=""
+    />
+    <span v-if="icon && typeof icon === 'string'">{{ icon }}</span>
+  </span>
+</template>

package/src/components/TextStyle/README.md

@@ -21,7 +21,7 @@ surrounding text.
 
 ```js-vue
 <script lang="ts" setup>
-import { TextStyle } from 'focus-ui';
+import { TextStyle } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/TextStyle/TextStyle.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   variant: 'subdued' | 'strong';
 }>();
 
-const classList = computed(() => {
+const classList = computed((): Record<string, boolean>[] => {
   return [
     { 'text-slate-500': props.variant === 'subdued' },
     { 'font-medium': props.variant === 'strong' },

package/src/components/Toast/DismissToastAction.vue

@@ -13,7 +13,7 @@ defineEmits<{
   dismiss: [];
 }>();
 
-const classList = computed(() => {
+const classList = computed((): Record<string, boolean> => {
   return {
     'hover:bg-red-200': props.variant === 'destructive',
     'hover:bg-slate-200': props.variant === 'default',

package/src/components/Toast/README.md

@@ -68,7 +68,7 @@ successfully or to inform users of a change in state.
 
 ```js-vue
 <script lang="ts" setup>
-import { useToastNotifications } from 'focus-ui';
+import { useToastNotifications } from '@returnless/focus-ui';
 
 const {
   initializeNotificationHandlers,

package/src/components/Toggle/README.md

@@ -25,7 +25,7 @@ features.
 
 ```js-vue
 <script lang="ts" setup>
-import { Toggle } from 'focus-ui';
+import { Toggle } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/Toggle/Toggle.vue

@@ -28,20 +28,20 @@ const internalValue = ref<boolean>(false);
 const $input = ref<HTMLInputElement | null>(null);
 const elementId = props.id || useUniqueId('toggle');
 
-onMounted(() => {
-  watch(model, () => {
+onMounted((): void => {
+  watch(model, (): void => {
     internalValue.value = $input.value!.checked;
   }, { immediate: true });
 });
 
-const classList = computed(() => {
+const classList = computed((): Record<string, boolean>[] => {
   return [
     { 'bg-brand-500 border-brand-700': internalValue.value },
     { 'bg-slate-200 border-slate-300': !internalValue.value },
   ];
 });
 
-const toggleClass = computed(() => {
+const toggleClass = computed((): Record<string, boolean>[] => {
   return [
     { 'translate-x-4 border-brand-600': internalValue.value },
     { 'translate-x-0 border-slate-300': !internalValue.value },
@@ -78,7 +78,10 @@ const toggleClass = computed(() => {
         :label-for="elementId"
       />
 
-      <TextStyle variant="subdued">
+      <TextStyle
+        v-if="helpText"
+        variant="subdued"
+      >
         {{ helpText }}
       </TextStyle>
     </span>

package/src/components/Tooltip/README.md

@@ -20,7 +20,7 @@ users hover, focus, tap, or click.
 
 ```js-vue
 <script lang="ts" setup>
-import { Button, Tooltip } from 'focus-ui';
+import { Button, Tooltip } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/Tooltip/Tooltip.vue

@@ -1,50 +1,24 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { autoUpdate, flip, offset, Placement, shift, useFloating } from '@floating-ui/vue';
-
-const props = withDefaults(defineProps<{
-  /** The placement of the tooltip. */
-  placement?: Placement;
+import { PopperBody, Popper, PopperTrigger } from '../Popper';
 
+defineProps<{
   /** The content of the tooltip. */
   content: string;
-}>(), {
-  placement: 'top',
-});
-
-const reference = ref<HTMLElement | null>(null);
-const floating = ref<HTMLElement | null>(null);
-const tooltipOpen = ref(false);
-
-const { floatingStyles, middlewareData } = useFloating(reference, floating, {
-  middleware: [
-    flip(),
-    shift({ padding: 5 }),
-    offset(5),
-  ],
-  placement: props.placement,
-  whileElementsMounted: autoUpdate,
-});
+}>();
 </script>
 
 <template>
-  <span
-    ref="reference"
-    class="inline-block"
-    @mouseenter="tooltipOpen = true"
-    @mouseleave="tooltipOpen = false"
-  >
-    <slot />
-  </span>
-
-  {{ middlewareData.arrow }}
-
-  <div
-    v-if="tooltipOpen"
-    ref="floating"
-    class="bg-black text-white rounded px-2 py-1"
-    :style="floatingStyles"
+  <Popper
+    trigger="hover"
+    placement="top"
   >
-    {{ content }}
-  </div>
+    <PopperTrigger>
+      <slot />
+    </PopperTrigger>
+    <PopperBody>
+      <div class="rounded bg-black px-2 py-1 text-sm text-white">
+        {{ content }}
+      </div>
+    </PopperBody>
+  </Popper>
 </template>

package/src/components/TopBar/TopBarSearch.vue

@@ -3,7 +3,7 @@ import { TextField } from '../TextField';
 </script>
 
 <template>
-  <div>
+  <form role="search">
     <TextField
       label="Search"
       label-hidden
@@ -11,5 +11,5 @@ import { TextField } from '../TextField';
       type="search"
       placeholder="Search"
     />
-  </div>
+  </form>
 </template>

package/src/components/index.ts

@@ -5,6 +5,14 @@ export {
   AccordionTrigger,
 } from './Accordion';
 
+export {
+  ActionList,
+  ActionListBody,
+  ActionListItem,
+  ActionListSection,
+  ActionListTrigger,
+} from './ActionList';
+
 export { Alert, AlertDescription, AlertTitle } from './Alert';
 
 export {
@@ -18,25 +26,43 @@ export {
   AlertDialogTitle,
 } from './AlertDialog';
 
+export { AspectRatio } from './AspectRatio';
+
 export { Avatar } from './Avatar';
 
 export { Badge, BadgeContent, BadgeIcon } from './Badge';
 
-export { Button, ButtonContent, ButtonIcon } from './Button';
+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,
-  CardSection,
   CardDescription,
   CardFooter,
   CardHeader,
+  CardHelp,
+  CardSection,
   CardTitle,
 } from './Card';
 
-export { CategoryBar, CategoryBarItem } from './CategoryBar';
-
 export { Checkbox } from './Checkbox';
 
 export {
@@ -51,6 +77,8 @@ export {
   DescriptionListTerm,
 } from './DescriptionList';
 
+export { DropZone } from './DropZone';
+
 export {
   EmptyState,
   EmptyStateActions,
@@ -68,30 +96,40 @@ export {
   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 { Link } from './Link';
+export { KPICard, KPICardSection } from './KPICard';
 
-export {
-  MetricCard,
-  MetricCardHeader,
-  MetricCardLabel,
-  MetricCardSection,
-  MetricCardValue,
-} from './MetricCard';
+export { Legend, LegendItem } from './Legend';
+
+export { Link } from './Link';
 
 export {
   Navigation,
   NavigationItem,
+  NavigationSecondarySection,
   NavigationSection,
 } from './Navigation';
 
 export {
   Page,
+  PageBody,
   PageDescription,
   PageHeader,
   PageTitle,
@@ -105,10 +143,24 @@ export {
 
 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';
@@ -117,8 +169,12 @@ 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';

package/src/components/types.ts

@@ -0,0 +1,5 @@
+/**
+ * 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/useTheme.ts

@@ -1,9 +1,21 @@
 const themeValues = {
   focus: {
     default: [
-      'focus:border-brand-500',
       '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',
     ],
   },
 

package/src/composables/useToastNotifications.ts

@@ -38,7 +38,7 @@ export function useToastNotifications(): useToastNotification {
   }
 
   function emitToastNotificationEvents(toastNotifications: Omit<ToastNotification, 'id'>[]): void {
-    toastNotifications.forEach((toastNotification: ToastNotification): void => {
+    toastNotifications.forEach((toastNotification: Omit<ToastNotification, 'id'>): void => {
       (toastNotification as ToastNotification).id = useUniqueId('toast');
 
       emitToastNotificationEvent(toastNotification);

package/src/composables/useUniqueId.ts

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

package/src/index.css

@@ -1,20 +1,24 @@
+@import url('https://rsms.me/inter/inter.css');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-[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");
-}
+@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="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;
+  [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,12 +1 @@
-import { App } from 'vue';
-import * as components from './components';
-
-function install(app: App) {
-  for (const key in components) {
-    app.component(key, components[key]);
-  }
-}
-
-export default { install };
-
 export * from './components';

package/dist/focus-ui.es.js

@@ -1,33 +0,0 @@
-import { defineComponent as i, openBlock as c, createElementBlock as r } from "vue";
-const a = { class: "bg-red-500" }, l = /* @__PURE__ */ i({
-  __name: "Accordion",
-  props: {
-    orientation: { default: "vertical" }
-  },
-  setup(t) {
-    return (e, o) => (c(), r("div", a, " testgaaf "));
-  }
-}), d = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [s, _] of e)
-    o[s] = _;
-  return o;
-}, f = {};
-function p(t, e) {
-  return c(), r("div", null, " test ");
-}
-const u = /* @__PURE__ */ d(f, [["render", p]]), n = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  Accordion: l,
-  AccordionItem: u
-}, Symbol.toStringTag, { value: "Module" }));
-function m(t) {
-  for (const e in n)
-    t.component(e, n[e]);
-}
-const g = { install: m };
-export {
-  l as Accordion,
-  u as AccordionItem,
-  g as default
-};