v-uixy 1.0.0

package/templates/components/Alert/AlertItem.component.vue

@@ -0,0 +1,55 @@
+<template>
+  <uixy-card
+    class="relative flex w-full items-center justify-between gap-8 overflow-hidden bg-gray-200 py-4 shadow-xs dark:bg-black"
+  >
+    <div class="flex gap-4">
+      <uixy-icon v-if="props.icon" :name="props.icon" class="size-6 shrink-0" />
+      <div class="flex flex-col gap-1">
+        <p class="text-lg font-500">{{ props.label }}</p>
+        <div
+          v-if="props.content"
+          class="text-sm text-gray-700 dark:text-gray-300"
+        >
+          {{ props.content }}
+        </div>
+      </div>
+    </div>
+    <div v-if="props.action">
+      <uixy-button v-bind="props.action" />
+    </div>
+    <div v-if="props.showClose" class="absolute right-2 top-1">
+      <uixy-icon-button
+        icon="close"
+        variant="quaternary"
+        size="sm"
+        @click="emit('close-alert')"
+      />
+    </div>
+    <motion.div
+      v-if="props.timer"
+      class="absolute bottom-0 left-0 h-[2px] bg-black dark:bg-gray-100"
+      :style="{ width }"
+    />
+  </uixy-card>
+</template>
+
+<script setup lang="ts">
+  import { motion, useMotionValue, animate } from "motion-v";
+  import { UixyButton, UixyIconButton, UixyIcon, UixyCard } from "..";
+  import type { UixyAlertItemProps } from "./Alert.types";
+
+  const props = defineProps<UixyAlertItemProps>();
+
+  const emit = defineEmits<{
+    (event: "close-alert"): void;
+  }>();
+
+  const width = useMotionValue("100%");
+
+  onMounted(() => {
+    animate(width, "0%", {
+      duration: 8,
+      ease: "linear",
+    });
+  });
+</script>

package/templates/components/Alert/composables/index.ts

@@ -0,0 +1 @@
+export * from "./useAlert.composable";

package/templates/components/Alert/composables/useAlert.composable.ts

@@ -0,0 +1,17 @@
+import type { UixyAlertItemProps } from "../Alert.types";
+
+export const useAlert = () => {
+  const push = inject("push-alert") as (
+    alert: Omit<UixyAlertItemProps, "id">
+  ) => void;
+
+  const close = inject("close-alert") as (id: string) => void;
+
+  if (!push || !close)
+    throw new Error("useAlert composable must be used inside alert provider.");
+
+  return {
+    push,
+    close,
+  };
+};

package/templates/components/Alert/index.ts

@@ -0,0 +1,11 @@
+import UixyAlert from "./Alert.component.vue";
+import UixyAlertItem from "./AlertItem.component.vue";
+import { type UixyAlertProps, type UixyAlertItemProps } from "./Alert.types";
+
+export * from "./composables";
+export {
+  UixyAlert,
+  UixyAlertItem,
+  type UixyAlertProps,
+  type UixyAlertItemProps,
+};

package/templates/components/Avatar/Avatar.component.vue

@@ -0,0 +1,53 @@
+<template>
+  <div :class="avatarWrapperStyles({ variant }, $attrs.class as string)">
+    <p
+      v-if="show !== undefined && !show"
+      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-xs font-700"
+    >
+      {{ props.alt }}
+    </p>
+    <img
+      v-else-if="show !== undefined && show"
+      class="size-full"
+      :onError="handleError"
+      :class="avatarImageStyles({ show, variant })"
+      :src="props.src"
+      :alt="props.alt"
+      v-bind="filteredAttrs"
+    />
+    <uixy-skeleton
+      v-else
+      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-xs font-700"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { UixySkeleton } from "../Skeleton";
+  import type { UixyAvatarProps } from "./Avatar.types";
+  import { avatarWrapperStyles, avatarImageStyles } from "./Avatar.styles";
+
+  const props = defineProps<UixyAvatarProps>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+
+  const show = ref<boolean>();
+
+  const handleError = () => {
+    show.value = false;
+  };
+
+  onMounted(() => {
+    show.value = !!props.src;
+  });
+</script>

package/templates/components/Avatar/Avatar.styles.ts

@@ -0,0 +1,27 @@
+import styles from "~/utils/styles";
+
+export const avatarWrapperStyles = styles(
+  "relative flex w-fit items-center justify-center overflow-hidden bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-100",
+  {
+    variant: {
+      rounded: "rounded-full",
+      squared: "rounded-2",
+      default: "",
+    },
+  }
+);
+
+export const avatarImageStyles = styles(
+  "flex aspect-square items-center overflow-hidden text-center text-[0]",
+  {
+    show: {
+      true: "",
+      false: "opacity-0",
+    },
+    variant: {
+      rounded: "rounded-full",
+      squared: "rounded-2",
+      default: "",
+    },
+  }
+);

package/templates/components/Avatar/Avatar.types.ts

@@ -0,0 +1,6 @@
+export interface UixyAvatarProps {
+  src: string;
+  alt: string;
+  variant?: "rounded" | "squared" | "default";
+  loading?: HTMLImageElement["loading"];
+}

package/templates/components/Avatar/index.ts

@@ -0,0 +1,4 @@
+import UixyAvatar from "./Avatar.component.vue";
+import { type UixyAvatarProps } from "./Avatar.types";
+
+export { UixyAvatar, type UixyAvatarProps };

package/templates/components/Badge/Badge.component.vue

@@ -0,0 +1,91 @@
+<template>
+  <uixy-link
+    v-if="props.link"
+    data-badge
+    :class="
+      linkStyles({
+        shape: props.shape,
+        disabled: !!props.disabled,
+      })
+    "
+    :tabindex="props.disabled ? -1 : 0"
+    v-bind="{ ...props.link, ...filteredAttrs }"
+  >
+    <div
+      :class="
+        badgeStyles(
+          {
+            variant: props.variant,
+            size: props.size,
+            shape: props.shape,
+            clickable: !!props.link,
+          },
+          $attrs.class as string
+        )
+      "
+    >
+      <uixy-icon
+        v-if="props.icon"
+        :name="props.icon"
+        :class="
+          iconStyles({
+            size: props.size,
+            position: props.iconPosition ?? 'left',
+          })
+        "
+      />
+      <slot />
+    </div>
+  </uixy-link>
+  <template v-else>
+    <div
+      :tabindex="props.disabled || !$attrs.onClick ? -1 : 0"
+      :class="
+        badgeStyles(
+          {
+            variant: props.variant,
+            size: props.size,
+            shape: props.shape,
+            clickable: !!$attrs.onClick,
+          },
+          $attrs.class as string
+        )
+      "
+      data-badge
+      v-bind="filteredAttrs"
+    >
+      <uixy-icon
+        v-if="props.icon"
+        :name="props.icon"
+        :class="
+          iconStyles({
+            size: props.size,
+            position: props.iconPosition ?? 'left',
+          })
+        "
+      />
+      <slot />
+    </div>
+  </template>
+</template>
+
+<script setup lang="ts">
+  import { UixyLink } from "../Link";
+  import { UixyIcon } from "../Icon";
+  import type { UixyBadgeProps } from "./Badge.types";
+  import { badgeStyles, linkStyles, iconStyles } from "./Badge.styles";
+
+  const props = defineProps<UixyBadgeProps>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+</script>

package/templates/components/Badge/Badge.styles.ts

@@ -0,0 +1,53 @@
+import styles from "~/utils/styles";
+
+export const badgeStyles = styles(
+  "transition-all duration-200 ease-in-out flex items-center gap-1",
+  {
+    variant: {
+      primary:
+        "bg-gray-800 hover:bg-gray-700 dark:hover:bg-gray-200 dark:bg-gray-300 text-gray-100 dark:text-black dark:disabled:bg-gray-400 dark:disabled:text-gray-500 disabled:text-gray-600",
+      secondary:
+        "bg-gray-300 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-700 dark:text-gray-100 text-black dark:disabled:bg-gray-600 dark:disabled:text-gray-700 disabled:text-gray-500",
+      tertiary:
+        "bg-transparent border border-solid border-gray-300 dark:border-gray-800 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-gray-100 dark:disabled:border-gray-900 dark:disabled:text-gray-500 dark:disabled:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500 disabled:border-gray-400",
+    },
+    size: {
+      xs: "px-2 text-xs",
+      sm: "px-3 py-1 text-sm",
+      md: "px-4 py-1 text-sm",
+      lg: "px-4 py-1 text-md",
+    },
+    shape: {
+      rounded: "rounded-full",
+      pill: "rounded-1",
+    },
+    clickable: {
+      true: "cursor-pointer",
+      false: "pointer-events-none",
+    },
+  }
+);
+
+export const iconStyles = styles("shrink-0", {
+  size: {
+    xs: "w-3 h-3",
+    sm: "w-4 h-4",
+    md: "w-4 h-4",
+    lg: "w-4 h-4",
+  },
+  position: {
+    left: "",
+    right: "order-1",
+  },
+});
+
+export const linkStyles = styles("", {
+  shape: {
+    rounded: "rounded-full",
+    pill: "rounded-1",
+  },
+  disabled: {
+    true: "pointer-events-none",
+    false: "",
+  },
+});

package/templates/components/Badge/Badge.types.ts

@@ -0,0 +1,12 @@
+import { type UixyLinkProps } from "../Link";
+import type { IconName } from "~/types/icons";
+
+export interface UixyBadgeProps {
+  variant: "primary" | "secondary" | "tertiary";
+  size: "xs" | "sm" | "md" | "lg";
+  shape: "rounded" | "pill";
+  disabled?: boolean;
+  icon?: IconName;
+  iconPosition?: "left" | "right";
+  link?: UixyLinkProps;
+}

package/templates/components/Badge/index.ts

@@ -0,0 +1,4 @@
+import UixyBadge from "./Badge.component.vue";
+import { type UixyBadgeProps } from "./Badge.types";
+
+export { UixyBadge, type UixyBadgeProps };

package/templates/components/Button/Button.component.vue

@@ -0,0 +1,103 @@
+<template>
+  <uixy-link
+    v-if="props.link"
+    :class="linkStyles({ disabled: !!props.disabled }, $attrs.class as string)"
+    :tabindex="props.disabled ? -1 : 0"
+    v-bind="{ ...props.link, ...filteredAttrs }"
+  >
+    <div :class="buttonStyles({ variant, size, rounded: !!props.rounded })">
+      <animate-presence :initial="false">
+        <motion.div
+          v-if="props.loading"
+          class="absolute top-1/2 flex size-6 -translate-y-1/2 items-center justify-center"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0 }"
+          :transition="{ ease: 'easeInOut', duration: 0.15 }"
+        >
+          <uixy-loader size="sm" />
+        </motion.div>
+      </animate-presence>
+
+      <animate-presence :initial="false">
+        <motion.div
+          class="flex items-center justify-center gap-1"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: props.loading ? 0 : 1 }"
+          :transition="{ ease: 'easeInOut', duration: 0.15 }"
+        >
+          <uixy-icon
+            v-if="props.icon && !props.loading"
+            :name="props.icon"
+            :class="iconStyles({ position: props.iconPosition ?? 'left' })"
+          />
+          <slot />
+        </motion.div>
+      </animate-presence>
+    </div>
+  </uixy-link>
+
+  <button
+    v-else
+    :disabled="props.disabled || props.loading"
+    :type="props.type ?? 'button'"
+    :tabindex="props.link ? -1 : 0"
+    :class="buttonStyles({ variant, size, rounded: !!props.rounded }, $attrs.class as string)"
+    v-bind="filteredAttrs"
+  >
+    <animate-presence :initial="false">
+      <motion.div
+        v-if="props.loading"
+        class="absolute top-1/2 flex size-6 -translate-y-1/2 items-center justify-center"
+        :initial="{ opacity: 0 }"
+        :animate="{ opacity: 1 }"
+        :exit="{ opacity: 0 }"
+        :transition="{ ease: 'easeInOut', duration: 0.15 }"
+      >
+        <uixy-loader size="sm" />
+      </motion.div>
+    </animate-presence>
+
+    <animate-presence :initial="false">
+      <motion.div
+        class="flex items-center justify-center gap-1"
+        :initial="{ opacity: 0 }"
+        :animate="{ opacity: props.loading ? 0 : 1 }"
+        :transition="{ ease: 'easeInOut', duration: 0.15 }"
+      >
+        <uixy-icon
+          v-if="props.icon && !props.loading"
+          :name="props.icon"
+          :class="iconStyles({ position: props.iconPosition ?? 'left' })"
+        />
+        <slot />
+      </motion.div>
+    </animate-presence>
+  </button>
+</template>
+
+<script setup lang="ts">
+  import { AnimatePresence, motion } from "motion-v";
+  import { UixyLink } from "../Link";
+  import { UixyLoader } from "../Loader";
+  import { UixyIcon } from "../Icon";
+  import type { UixyButtonProps } from "./Button.types";
+  import { buttonStyles, linkStyles, iconStyles } from "./Button.styles";
+
+  const props = defineProps<UixyButtonProps>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+
+  const variant = computed(() => props.variant || "primary");
+  const size = computed(() => props.size || "md");
+</script>

package/templates/components/Button/Button.styles.ts

@@ -0,0 +1,40 @@
+import styles from "~/utils/styles";
+
+export const buttonStyles = styles(
+  "relative cursor-pointer h-8 font-500 transition-all duration-200 ease-in-out hover:shadow-xs flex items-center justify-center gap-2 disabled:pointer-events-none",
+  {
+    variant: {
+      primary:
+        "bg-gray-800 hover:bg-gray-700 dark:hover:bg-gray-200 dark:bg-gray-300 text-gray-100 dark:text-black dark:disabled:bg-gray-400 dark:disabled:text-gray-500 disabled:text-gray-600",
+      secondary:
+        "bg-gray-300 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-700 dark:text-gray-100 text-black dark:disabled:bg-gray-600 dark:disabled:text-gray-700 disabled:text-gray-500",
+      tertiary:
+        "bg-transparent border border-solid border-gray-300 dark:border-gray-800 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-gray-100 dark:disabled:border-gray-900 dark:disabled:text-gray-500 dark:disabled:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500 disabled:border-gray-400",
+      quaternary:
+        "dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 disabled:text-gray-700",
+    },
+    size: {
+      sm: "px-5 py-1 text-button-sm",
+      md: "px-6 py-1 text-button-md",
+      lg: "px-7 py-1 text-button-lg",
+    },
+    rounded: {
+      true: "rounded-full",
+      false: "rounded-1",
+    },
+  }
+);
+
+export const iconStyles = styles("h-5 w-5 shrink-0", {
+  position: {
+    left: "-ml-2",
+    right: "order-1 -mr-2",
+  },
+});
+
+export const linkStyles = styles("rounded-1", {
+  disabled: {
+    true: "pointer-events-none",
+    false: "",
+  },
+});

package/templates/components/Button/Button.types.ts

@@ -0,0 +1,14 @@
+import type { IconName } from "~/types/icons";
+import { type UixyLinkProps } from "../Link";
+
+export interface UixyButtonProps {
+  variant?: "primary" | "secondary" | "tertiary" | "quaternary";
+  size?: "sm" | "md" | "lg";
+  icon?: IconName;
+  iconPosition?: "left" | "right";
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+  loading?: boolean;
+  rounded?: boolean;
+  link?: UixyLinkProps;
+}

package/templates/components/Button/index.ts

@@ -0,0 +1,4 @@
+import UixyButton from "./Button.component.vue";
+import { type UixyButtonProps } from "./Button.types";
+
+export { UixyButton, type UixyButtonProps };