v-uixy 1.0.0

package/templates/components/TimePicker/TimePicker.component.vue

@@ -0,0 +1,115 @@
+<template>
+  <div :class="timePickerStyles($attrs.class as string)">
+    <uixy-icon name="clock" class="size-6 text-gray-400 dark:text-gray-700" />
+    <div class="flex items-center gap-1">
+      <input
+        v-if="model && model.hasOwnProperty('hour')"
+        type="text"
+        :value="validateAndFormatTime(String(model?.hour ?? ''), 'hour')"
+        :disabled="props.disabled"
+        @input="handleChange($event, 'hour')"
+        class="rounded-1 font-500 dark:bg-gray-1000 w-9 border border-gray-300 bg-white p-1 text-center text-sm disabled:text-gray-400 dark:border-gray-900 dark:disabled:text-gray-700"
+      />
+      <div
+        v-if="displaySeparator('first')"
+        class="font-800 pointer-events-none text-lg"
+      >
+        :
+      </div>
+      <input
+        v-if="model && model.hasOwnProperty('minute')"
+        type="text"
+        :value="validateAndFormatTime(String(model?.minute ?? ''), 'minute')"
+        :disabled="props.disabled"
+        @input="handleChange($event, 'minute')"
+        class="rounded-1 font-500 dark:bg-gray-1000 w-9 border border-gray-300 bg-white p-1 text-center text-sm disabled:text-gray-400 dark:border-gray-900 dark:disabled:text-gray-700"
+      />
+      <div
+        v-if="displaySeparator('second')"
+        class="font-800 pointer-events-none text-lg"
+      >
+        :
+      </div>
+      <input
+        v-if="model && model.hasOwnProperty('second')"
+        type="text"
+        :value="validateAndFormatTime(String(model?.second ?? ''), 'second')"
+        :disabled="props.disabled"
+        @input="handleChange($event, 'second')"
+        class="rounded-1 font-500 dark:bg-gray-1000 w-9 border border-gray-300 bg-white p-1 text-center text-sm disabled:text-gray-400 dark:border-gray-900 dark:disabled:text-gray-700"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { type UixyTimePickerProps } from "./TimePicker.types";
+  import { UixyIcon } from "../Icon";
+  import { timePickerStyles } from "./TimePicker.styles";
+
+  const props = defineProps<UixyTimePickerProps>();
+
+  const model = defineModel<{
+    hour?: number;
+    minute?: number;
+    second?: number;
+  }>({
+    default: () => ({
+      hour: 0,
+      minute: 0,
+    }),
+  });
+
+  const validateAndFormatTime = (
+    value: string,
+    type: "hour" | "minute" | "second"
+  ) => {
+    const num = parseInt(value, 10);
+    if (isNaN(num)) return "00";
+
+    let validatedNum = num;
+
+    if (type === "hour") validatedNum = Math.min(23, Math.max(0, num));
+    else if (type === "minute") validatedNum = Math.min(59, Math.max(0, num));
+    else validatedNum = Math.min(59, Math.max(0, num));
+
+    return validatedNum < 10 ? `0${validatedNum}` : `${validatedNum}`;
+  };
+
+  const handleChange = (event: Event, type: "hour" | "minute" | "second") => {
+    const target = event.target as HTMLInputElement;
+    const valueStr = validateAndFormatTime(target.value, type);
+    const valueNum = Number.parseInt(valueStr, 10);
+
+    model.value = {
+      ...model.value,
+      [type]: Number.isFinite(valueNum) ? valueNum : 0,
+    };
+  };
+
+  const displaySeparator = (order: "first" | "second") => {
+    if (!model) return false;
+
+    if (order === "first") {
+      if (!model.value?.hasOwnProperty("hour")) return false;
+
+      if (
+        model.value?.hasOwnProperty("minute") ||
+        model.value?.hasOwnProperty("second")
+      )
+        return true;
+    }
+
+    if (order === "second") {
+      if (!model.value?.hasOwnProperty("second")) return false;
+
+      if (
+        model.value?.hasOwnProperty("hour") ||
+        model.value?.hasOwnProperty("minute")
+      )
+        return true;
+    }
+
+    return false;
+  };
+</script>

package/templates/components/TimePicker/TimePicker.styles.ts

@@ -0,0 +1,5 @@
+import styles from "~/utils/styles";
+
+export const timePickerStyles = styles(
+  "flex items-center justify-between gap-3 rounded-2 border border-gray-300 bg-gray-100 p-2 shadow-xs dark:border-gray-900 dark:bg-black"
+);

package/templates/components/TimePicker/TimePicker.types.ts

@@ -0,0 +1,3 @@
+export interface UixyTimePickerProps {
+  disabled?: boolean;
+}

package/templates/components/TimePicker/index.ts

@@ -0,0 +1,4 @@
+import UixyTimePicker from "./TimePicker.component.vue";
+import { type UixyTimePickerProps } from "./TimePicker.types";
+
+export { UixyTimePicker, type UixyTimePickerProps };

package/templates/components/Toast/Toast.component.vue

@@ -0,0 +1,78 @@
+<template>
+  <teleport to="body">
+    <div
+      class="pointer-events-none fixed bottom-0 right-0 z-50 w-full items-center md:bottom-2 min-h-screen flex flex-col justify-end"
+    >
+      <ul
+        class="flex flex-col items-center justify-center gap-2 px-2 py-4 md:p-0"
+        aria-live="polite"
+      >
+        <animate-presence :initial="false" mode="popLayout">
+          <motion.li
+            v-for="toast in toasts"
+            :key="toast.id"
+            class="pointer-events-auto w-max text-nowrap"
+            layout
+            :initial="{ opacity: 0, y: 50, scale: 0.5 }"
+            :animate="{ opacity: 1, y: 0, scale: 1 }"
+            :exit="{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }"
+            role="Toast"
+          >
+            <uixy-toast-item v-bind="toast" :key="toast.id" />
+          </motion.li>
+        </animate-presence>
+      </ul>
+    </div>
+  </teleport>
+  <slot />
+</template>
+
+<script setup lang="ts">
+  import type { UixyToastItemProps, UixyToastProps } from "./Toast.types";
+  import { motion, AnimatePresence } from "motion-v";
+  import { v4 as uuidv4 } from "uuid";
+  import { UixyToastItem } from ".";
+
+  defineProps<UixyToastProps>();
+
+  const toasts = ref<UixyToastItemProps[]>([]);
+
+  const timeouts = reactive<
+    { id: string; timeout: ReturnType<typeof setTimeout> }[]
+  >([]);
+
+  const push = (toast: Omit<UixyToastItemProps, "id">) => {
+    const id = uuidv4();
+
+    toasts.value = [
+      ...toasts.value,
+      {
+        ...toast,
+        id,
+      },
+    ];
+
+    timeouts.push({
+      id,
+      timeout: setTimeout(() => {
+        toasts.value = toasts.value.filter((a) => a.id !== id);
+      }, 8000),
+    });
+  };
+
+  const close = (id: string) => {
+    toasts.value = toasts.value.filter((toast) => {
+      if (toast.id === id) {
+        const timeout = timeouts.find((t) => t.id === id);
+        if (timeout) {
+          clearTimeout(timeout.timeout);
+        }
+        return false;
+      }
+      return true;
+    });
+  };
+
+  provide("push-toast", push);
+  provide("close-toast", close);
+</script>

package/templates/components/Toast/Toast.types.ts

@@ -0,0 +1,6 @@
+export interface UixyToastItemProps {
+  id: string;
+  content: string;
+}
+
+export interface UixyToastProps {}

package/templates/components/Toast/ToastItem.component.vue

@@ -0,0 +1,20 @@
+<template>
+  <uixy-card
+    class="relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-6 bg-gray-200 py-[6px] shadow-md dark:bg-black"
+  >
+    <div class="flex gap-4">
+      <div class="flex flex-col gap-1">
+        <div class="text-sm text-gray-700 dark:text-gray-300">
+          {{ props.content }}
+        </div>
+      </div>
+    </div>
+  </uixy-card>
+</template>
+
+<script setup lang="ts">
+  import type { UixyToastItemProps } from "./Toast.types";
+  import { UixyCard } from "../Card";
+
+  const props = defineProps<UixyToastItemProps>();
+</script>

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

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

package/templates/components/Toast/composables/useToast.composable.ts

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

package/templates/components/Toast/index.ts

@@ -0,0 +1,11 @@
+import UixyToast from "./Toast.component.vue";
+import UixyToastItem from "./ToastItem.component.vue";
+import { type UixyToastProps, type UixyToastItemProps } from "./Toast.types";
+
+export * from "./composables";
+export {
+  UixyToast,
+  UixyToastItem,
+  type UixyToastProps,
+  type UixyToastItemProps,
+};

package/templates/components/Toggle/Toggle.component.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    @click="handleClick"
+    @keydown.prevent="handleKeyDown"
+    :tabindex="props.disabled ? -1 : 0"
+    :class="toggleStyles(
+        {
+          variant: props.variant,
+          toggled: !!toggled,
+          disabled: !!props.disabled,
+        },
+        $attrs.class as string,
+      )"
+    v-bind="filteredAttrs"
+  >
+    <uixy-icon :name="props.icon" class="size-6" />
+    <p v-if="props.label" class="text-sm">{{ props.label }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { UixyIcon } from "../Icon";
+  import type { UixyToggleProps } from "./Toggle.types";
+  import { toggleStyles } from "./Toggle.styles";
+
+  const props = defineProps<UixyToggleProps>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+
+  const toggled = defineModel<boolean>("toggled");
+
+  const handleClick = () => {
+    if (props.disabled) return;
+
+    toggled.value = !toggled.value;
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key !== "Enter" && e.key !== " ") return;
+
+    handleClick();
+  };
+</script>

package/templates/components/Toggle/Toggle.styles.ts

@@ -0,0 +1,20 @@
+import styles from "~/utils/styles";
+
+export const toggleStyles = styles(
+  "border flex items-center justify-center gap-2 min-w-[32px] w-fit px-1 py-1 rounded-1 transition-all ease-in-out duration-150",
+  {
+    variant: {
+      primary: "border-transparent",
+      secondary: "border-gray-300 dark:border-gray-900",
+    },
+    toggled: {
+      true: "bg-gray-200 dark:bg-gray-900 text-black dark:text-gray-300",
+      false:
+        "hover:bg-gray-200 dark:hover:bg-gray-900 text-gray-600 hover:text-black dark:hover:text-gray-300",
+    },
+    disabled: {
+      true: "pointer-events-none text-gray-400 border-gray-200 dark:text-gray-800 dark:border-gray-800",
+      false: "cursor-pointer",
+    },
+  }
+);

package/templates/components/Toggle/Toggle.types.ts

@@ -0,0 +1,8 @@
+import type { IconName } from "~/types/icons";
+
+export interface UixyToggleProps {
+  variant: "primary" | "secondary";
+  icon: IconName;
+  label?: string;
+  disabled?: boolean;
+}

package/templates/components/Toggle/index.ts

@@ -0,0 +1,4 @@
+import UixyToggle from "./Toggle.component.vue";
+import { type UixyToggleProps } from "./Toggle.types";
+
+export { UixyToggle, type UixyToggleProps };

package/templates/components/Tooltip/Tooltip.component.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="relative"
+    @click="handleOpen"
+    @mouseenter="handleOpen"
+    @mouseleave="handleLeave"
+  >
+    <slot />
+    <teleport to="body">
+      <animate-presence>
+        <motion.div
+          v-if="active"
+          class="max-w-[100vw]"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0, transition: { delay: 0.1 } }"
+          :transition="{
+            duration: 0.15,
+            ease: 'easeInOut',
+            delay: props.delay ?? 0.3,
+          }"
+          :style="{
+            ...styles,
+          }"
+        >
+          <div ref="refElement">
+            <motion.div
+              :class="$attrs.class"
+              :initial="{ y: 4, scale: 0.8 }"
+              :animate="{ y: 0, scale: 1 }"
+              :exit="{ opacity: 0, scale: 0.8, transition: { delay: 0.1 } }"
+              :transition="{
+                duration: 0.15,
+                ease: 'easeInOut',
+                delay: props.delay ?? 0.3,
+              }"
+            >
+              <slot name="content" />
+            </motion.div>
+          </div>
+        </motion.div>
+      </animate-presence>
+    </teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { motion, AnimatePresence } from "motion-v";
+  import type { UixyTooltipProps } from "./Tooltip.types";
+  import { usePosition } from "~/composables";
+
+  const props = defineProps<UixyTooltipProps>();
+
+  const { active, handleOpen, handleLeave, styles, refElement } = usePosition({
+    direction: props.direction ?? "top",
+  });
+</script>

package/templates/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,4 @@
+export interface UixyTooltipProps {
+  delay?: number;
+  direction?: "top" | "bottom";
+}

package/templates/components/Tooltip/index.ts

@@ -0,0 +1,4 @@
+import UixyTooltip from "./Tooltip.component.vue";
+import { type UixyTooltipProps } from "./Tooltip.types";
+
+export { UixyTooltip, type UixyTooltipProps };

package/templates/components.json

@@ -0,0 +1,202 @@
+{
+  "components": [
+    {
+      "name": "Accordion",
+      "related-components": ["Icon"],
+      "packages": ["motion-v"],
+      "composables": []
+    },
+    {
+      "name": "Alert",
+      "related-components": ["Button", "Icon", "Card"],
+      "packages": ["motion-v", "uuid"],
+      "composables": []
+    },
+    {
+      "name": "Avatar",
+      "related-components": ["Skeleton"],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Badge",
+      "related-components": ["Link, Icon"],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Button",
+      "related-components": ["Link, Loader, Icon"],
+      "packages": ["motion-v"],
+      "composables": []
+    },
+    {
+      "name": "Calendar",
+      "related-components": ["IconButton"],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Card",
+      "related-components": ["Link"],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Checkbox",
+      "related-components": ["Icon"],
+      "packages": ["motion-v"],
+      "composables": []
+    },
+    {
+      "name": "Command",
+      "related-components": ["Modal", "Card", "Link", "Icon", "Separator"],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Icon",
+      "related-components": [],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "IconButton",
+      "related-components": ["Link", "Loader", "Icon"],
+      "packages": ["motion-v"],
+      "composables": []
+    },
+    {
+      "name": "Input",
+      "related-components": ["Icon"],
+      "packages": ["motion-v"],
+      "composables": []
+    },
+    {
+      "name": "InputOTP",
+      "related-components": [],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Link",
+      "related-components": [],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Loader",
+      "related-components": [],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Modal",
+      "related-components": [],
+      "packages": ["motion-v"],
+      "composables": []
+    },
+    {
+      "name": "Popover",
+      "related-components": [],
+      "packages": ["motion-v"],
+      "composables": ["usePosition"]
+    },
+    {
+      "name": "Radio",
+      "related-components": [],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Scale",
+      "related-components": [],
+      "packages": ["motion-v"],
+      "composables": []
+    },
+    {
+      "name": "Select",
+      "related-components": ["Badge", "Icon", "Input"],
+      "packages": ["motion-v"],
+      "composables": []
+    },
+    {
+      "name": "Separator",
+      "related-components": [],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Sheet",
+      "related-components": ["Scale"],
+      "packages": ["motion-v"],
+      "composables": []
+    },
+    {
+      "name": "Skeleton",
+      "related-components": [],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Slider",
+      "related-components": [],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Switch",
+      "related-components": [],
+      "packages": ["motion-v"],
+      "composables": []
+    },
+    {
+      "name": "TableOfContents",
+      "related-components": [],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Tabs",
+      "related-components": [],
+      "packages": ["motion-v"],
+      "composables": []
+    },
+    {
+      "name": "Textarea",
+      "related-components": [],
+      "packages": ["motion-v"],
+      "composables": []
+    },
+    {
+      "name": "Theme",
+      "related-components": [],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "TimePicker",
+      "related-components": ["Icon"],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Toast",
+      "related-components": ["Card"],
+      "packages": ["uuid", "motion-v"],
+      "composables": []
+    },
+    {
+      "name": "Toggle",
+      "related-components": ["Icon"],
+      "packages": [],
+      "composables": []
+    },
+    {
+      "name": "Tooltip",
+      "related-components": [],
+      "packages": ["motion-v"],
+      "composables": ["usePosition"]
+    }
+  ]
+}