Added new package as well as support for Vue Image component

.storybook-vue/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+import vue from '@vitejs/plugin-vue';
+
+const config: StorybookConfig = {
+  stories: [
+    '../packages/@necto-vue/**/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  viteFinal: async (config) => {
+    config.plugins = config.plugins || [];
+    config.plugins.push(vue());
+    return config;
+  },
+};
+
+export default config;

.storybook-vue/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/vue3';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: 'centered',
+  },
+};
+
+export default preview;

biome.json

@@ -28,6 +28,18 @@
       "recommended": true
     }
   },
+  "overrides": [
+    {
+      "includes": ["**/*.vue"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "useHookAtTopLevel": "off"
+          }
+        }
+      }
+    }
+  ],
   "javascript": {
     "formatter": {
       "semicolons": "always",

package.json

@@ -4,8 +4,12 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "turbo run dev",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "storybook": "concurrently \"pnpm storybook:react\" \"pnpm storybook:vue\"",
+    "storybook:react": "storybook dev -p 6006",
+    "storybook:vue": "storybook dev -p 6007 -c .storybook-vue",
+    "build-storybook": "concurrently \"pnpm build-storybook:react\" \"pnpm build-storybook:vue\"",
+    "build-storybook:react": "storybook build",
+    "build-storybook:vue": "storybook build -c .storybook-vue",
     "changeset": "changeset",
     "test": "turbo run test",
     "test:visual": "turbo run test:visual",
@@ -32,15 +36,20 @@
     "@storybook/react": "^8.5.0",
     "@storybook/react-vite": "^8.5.0",
     "@storybook/test": "^8.5.0",
+    "@storybook/vue3": "^8.5.0",
+    "@storybook/vue3-vite": "^8.5.0",
+    "@vitejs/plugin-vue": "^5.2.1",
     "commitlint": "^19.8.1",
+    "concurrently": "^9.2.1",
     "lefthook": "^1.11.13",
     "markdownlint": "^0.38.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "storybook": "^8.5.0",
     "ts-node": "^10.9.2",
     "turbo": "^2.4.4",
-    "vitest": "^3.0.9"
+    "vitest": "^3.0.9",
+    "vue": "^3.5.13"
   },
   "packageManager": "pnpm@9.15.3"
 }

packages/@necto-react/necto-react-hooks/src/useAriaProps/index.ts

@@ -9,6 +9,6 @@
 export { useAriaProps } from './useAriaProps';
 
 export type {
-  UseAriaPropsProps,
+  UseAriaPropsOptions,
   UseAriaPropsReturn
 } from './useAriaProps.types';

packages/@necto-react/necto-react-hooks/src/useAriaProps/useAriaProps.ts

@@ -13,7 +13,7 @@ import { useMemo } from 'react';
 import { AriaProps } from '@necto/dom';
 
 import type {
-  UseAriaPropsProps,
+  UseAriaPropsOptions,
   UseAriaPropsReturn
 } from './useAriaProps.types';
 import type { AriaAttributes } from 'react';
@@ -22,11 +22,11 @@ import type { AriaAttributes } from 'react';
  * Returns ARIA attributes based on the provided state flags.
  * Automatically filters out undefined values to avoid adding empty ARIA attributes.
  *
- * @param {UseAriaPropsProps} props - State flags to convert to ARIA attributes.
+ * @param {UseAriaPropsOptions} options - State flags to convert to ARIA attributes.
  * @returns {UseAriaPropsReturn} The ARIA attributes object with only defined values.
  */
 export function useAriaProps(
-  props: UseAriaPropsProps = {}
+  options: UseAriaPropsOptions = {}
 ): UseAriaPropsReturn {
   const {
     isInvalid,
@@ -44,7 +44,7 @@ export function useAriaProps(
     valueMin,
     valueMax,
     valueText
-  } = props;
+  } = options;
 
   return useMemo((): AriaAttributes => {
     const ariaAttributes: Record<string, any> = {};

packages/@necto-react/necto-react-hooks/src/useAriaProps/useAriaProps.types.ts

@@ -9,9 +9,9 @@
 import type { AriaAttributes } from 'react';
 
 /**
- * Props for the useAriaProps hook.
+ * Options for the useAriaProps hook.
  */
-export interface UseAriaPropsProps {
+export interface UseAriaPropsOptions {
   /** Whether the element is invalid. */
   isInvalid?: boolean;
 

packages/@necto-react/necto-react-hooks/src/useContextProps/index.ts

@@ -9,6 +9,6 @@
 export { useContextProps } from './useContextProps';
 
 export type {
-  UseContextPropsProps,
+  UseContextPropsOptions,
   UseContextPropsReturn
 } from './useContextProps.types';

packages/@necto-react/necto-react-hooks/src/useContextProps/useContextProps.ts

@@ -20,7 +20,7 @@ import { mergeProps } from '@necto/mergers';
 import { useSlottedContext } from '@necto-react/hooks';
 
 import type {
-  UseContextPropsProps,
+  UseContextPropsOptions,
   UseContextPropsReturn
 } from './useContextProps.types';
 import type { RefObject } from 'react';
@@ -30,14 +30,14 @@ import type { RefObject } from 'react';
  *
  * @template T The props type.
  * @template E The element type.
- * @param {UseContextPropsProps<T, E>} params - Component props, ref, and context.
+ * @param {UseContextPropsOptions<T, E>} options - Component props, ref, and context.
  * @returns {UseContextPropsReturn<T, E>} A tuple of merged props and merged ref.
  */
 export function useContextProps<T, E extends Element>({
   props,
   ref,
   context
-}: UseContextPropsProps<T, E>): UseContextPropsReturn<T, E> {
+}: UseContextPropsOptions<T, E>): UseContextPropsReturn<T, E> {
   const ctx = useSlottedContext({ context, slot: props.slot }) || {};
 
   const { ref: contextRef = null, ...contextProps } = ctx as {

packages/@necto-react/necto-react-hooks/src/useContextProps/useContextProps.types.ts

@@ -9,9 +9,9 @@
 import type { ForwardedRef, Context } from 'react';
 
 /**
- * Props for the useContextProps hook.
+ * Options for the useContextProps hook.
  */
-export interface UseContextPropsProps<T, E extends Element> {
+export interface UseContextPropsOptions<T, E extends Element> {
   /**
    * Component props, must include optional slot property and optional ref.
    */

packages/@necto-react/necto-react-hooks/src/useDisabled/index.ts

@@ -9,6 +9,6 @@
 export { useDisabled } from './useDisabled';
 
 export type {
-  UseDisabledProps,
-  UseDisabledPropsReturn
+  UseDisabledOptions,
+  UseDisabledReturn
 } from './useDisabled.types';

packages/@necto-react/necto-react-hooks/src/useDisabled/useDisabled.ts

@@ -10,21 +10,20 @@ import { useContext } from 'react';
 import { DisabledContext } from '@necto-react/contexts';
 
 import type {
-  UseDisabledProps,
-  UseDisabledPropsReturn
+  UseDisabledOptions,
+  UseDisabledReturn
 } from './useDisabled.types';
 
 /**
  * React hook to determine if a specific feature or component type is disabled.
  *
- * @param {keyof DisabledFlags} type - The key of the disabled flag to check. Defaults to 'general'.
- * @param {boolean} defaultFallback - The fallback value if the flag is not set. Defaults to false.
+ * @param {UseDisabledOptions} options - Options for the hook.
  * @returns {boolean} True if the specified type is disabled, otherwise the fallback value.
  */
 export function useDisabled(
-  props: UseDisabledProps = {}
-): UseDisabledPropsReturn {
-  const { type = 'general', defaultFallback = false } = props;
+  options: UseDisabledOptions = {}
+): UseDisabledReturn {
+  const { type = 'general', defaultFallback = false } = options;
   const flags = useContext(DisabledContext) || {};
   return flags[type] ?? defaultFallback;
 }

packages/@necto-react/necto-react-hooks/src/useDisabled/useDisabled.types.ts

@@ -8,9 +8,9 @@
 import type { DisabledFlags } from '@necto-react/types';
 
 /**
- * Props for the useDisabled hook.
+ * Options for the useDisabled hook.
  */
-export interface UseDisabledProps {
+export interface UseDisabledOptions {
   /** The key of the disabled flag to check. Defaults to 'general'. */
   type?: keyof DisabledFlags;
 
@@ -21,4 +21,4 @@ export interface UseDisabledProps {
 /**
  * Return type for the useDisabled hook.
  */
-export type UseDisabledPropsReturn = boolean;
+export type UseDisabledReturn = boolean;

packages/@necto-react/necto-react-hooks/src/useDisabledProps/index.ts

@@ -9,6 +9,6 @@
 export { useDisabledProps } from './useDisabledProps';
 
 export type {
-  UseDisabledPropsProps,
-  UseDisabledPropsPropsReturn
+  UseDisabledPropsOptions,
+  UseDisabledPropsReturn
 } from './useDisabledProps.types';

packages/@necto-react/necto-react-hooks/src/useDisabledProps/useDisabledProps.ts

@@ -10,8 +10,8 @@ import { useMemo } from 'react';
 import { useDisabled } from '@necto-react/hooks';
 
 import type {
-  UseDisabledPropsProps,
-  UseDisabledPropsPropsReturn
+  UseDisabledPropsOptions,
+  UseDisabledPropsReturn
 } from './useDisabledProps.types';
 import type { HTMLAttributes } from 'react';
 
@@ -22,9 +22,9 @@ import type { HTMLAttributes } from 'react';
  * @returns {HTMLAttributes<HTMLElement>} The merged props including disabled and aria-disabled if applicable.
  */
 export function useDisabledProps(
-  props: UseDisabledPropsProps = {}
-): UseDisabledPropsPropsReturn {
-  const { type = 'general', extraProps = {} } = props;
+  options: UseDisabledPropsOptions = {}
+): UseDisabledPropsReturn {
+  const { type = 'general', extraProps = {} } = options;
   const isDisabled = useDisabled({ type, defaultFallback: false });
 
   return useMemo(() => {

packages/@necto-react/necto-react-hooks/src/useDisabledProps/useDisabledProps.types.ts

@@ -10,9 +10,9 @@ import type { HTMLAttributes } from 'react';
 import type { DisabledFlags } from '@necto-react/types';
 
 /**
- * Props for the useDisabledProps hook.
+ * Options for the useDisabledProps hook.
  */
-export interface UseDisabledPropsProps {
+export interface UseDisabledPropsOptions {
   /** The key of the disabled flag to check. Defaults to 'general'. */
   type?: keyof DisabledFlags;
 
@@ -23,4 +23,4 @@ export interface UseDisabledPropsProps {
 /**
  * Return type for the useDisabledProps hook.
  */
-export type UseDisabledPropsPropsReturn = HTMLAttributes<HTMLElement>;
+export type UseDisabledPropsReturn = HTMLAttributes<HTMLElement>;

packages/@necto-react/necto-react-hooks/src/useElementVisibility/index.ts

@@ -9,6 +9,6 @@
 export { useElementVisibility } from './useElementVisibility';
 
 export type {
-  UseElementVisibilityProps,
+  UseElementVisibilityOptions,
   UseElementVisibilityReturn
 } from './useElementVisibility.types';

packages/@necto-react/necto-react-hooks/src/useElementVisibility/useElementVisibility.ts

@@ -10,7 +10,7 @@ import { useEffectEvent } from '@necto-react/hooks';
 import { useRef, useState, useCallback, useEffect } from 'react';
 
 import type {
-  UseElementVisibilityProps,
+  UseElementVisibilityOptions,
   UseElementVisibilityReturn,
   IntersectionDetails
 } from './useElementVisibility.types';
@@ -19,11 +19,11 @@ import type {
  * React hook that observes the visibility of a DOM element using the Intersection Observer API.
  *
  * @template T The type of the element being observed.
- * @param {UseElementVisibilityProps} [props] - Options to control visibility observation and callbacks.
+ * @param {UseElementVisibilityOptions} [options] - Options to control visibility observation and callbacks.
  * @returns {UseElementVisibilityReturn<T>} A tuple containing the ref to the element, the visibility state, and intersection details.
  */
 export function useElementVisibility<T extends Element = Element>(
-  props: UseElementVisibilityProps = {}
+  options: UseElementVisibilityOptions = {}
 ): UseElementVisibilityReturn<T> {
   const {
     partialVisibility = false,
@@ -33,7 +33,7 @@ export function useElementVisibility<T extends Element = Element>(
     active = true,
     once = false,
     onChange
-  } = props;
+  } = options;
 
   const [element, setElement] = useState<T | null>(null);
   const [isVisible, setIsVisible] = useState<boolean>(false);

packages/@necto-react/necto-react-hooks/src/useElementVisibility/useElementVisibility.types.ts

@@ -12,9 +12,9 @@
 export type PartialVisibility = boolean | 'top' | 'right' | 'bottom' | 'left';
 
 /**
- * Props for the useElementVisibility hook.
+ * Options for the useElementVisibility hook.
  */
-export interface UseElementVisibilityProps {
+export interface UseElementVisibilityOptions {
   /** Whether partial visibility is allowed, or which edge to check. */
   partialVisibility?: PartialVisibility;
 

packages/@necto-react/necto-react-hooks/src/useFocus/index.ts

@@ -8,4 +8,4 @@
 
 export { useFocus } from './useFocus';
 
-export type { UseFocusProps, UseFocusReturn } from './useFocus.types';
+export type { UseFocusOptions, UseFocusReturn } from './useFocus.types';

packages/@necto-react/necto-react-hooks/src/useFocus/useFocus.ts

@@ -20,24 +20,24 @@ import { getOwnerDocument, getEventTarget, getActiveElement } from '@necto/dom';
 import type { FocusableElement } from '@necto/types';
 import type { DOMAttributes } from '@necto-react/types';
 import type { FocusEvent as ReactFocusEvent } from 'react';
-import type { UseFocusProps, UseFocusReturn } from './useFocus.types';
+import type { UseFocusOptions, UseFocusReturn } from './useFocus.types';
 
 /**
  * React hook that manages focus and blur event handling for a focusable element.
  *
  * @template T The type of the focusable element.
- * @param {UseFocusProps<T>} [props] - Options and event handlers for focus management.
+ * @param {UseFocusOptions<T>} [options] - Options and event handlers for focus management.
  * @returns {UseFocusReturn<T>} An object containing props to spread on the target element for focus management.
  */
 export function useFocus<T extends FocusableElement = FocusableElement>(
-  props: UseFocusProps<T> = {}
+  options: UseFocusOptions<T> = {}
 ): UseFocusReturn<T> {
   const {
     isDisabled,
     onFocus: onFocusProp,
     onBlur: onBlurProp,
     onFocusChange
-  } = props;
+  } = options;
 
   // Unified handler for focus change
   const handleFocusChange = useCallback(