@okam/next-component 0.4.1 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/next-component",
-  "version": "0.4.1",
+  "version": "1.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -8,8 +8,11 @@
     "url": "https://github.com/OKAMca/stack.git"
   },
   "dependencies": {
-    "@okam/stack-ui": "1.31.1",
-    "next": "^14.1.1"
+    "next": "^14.1.1",
+    "react-use": "17.5.1",
+    "react": "18.3.1",
+    "tailwind-variants": "^0.3.0",
+    "@okam/stack-ui": "1.34.0"
   },
   "module": "./index.esm.js",
   "type": "module",

package/src/components/Link/index.d.ts

@@ -0,0 +1,3 @@
+import type { TLinkProps } from './interface';
+declare const Link: import("react").ForwardRefExoticComponent<TLinkProps<import("@okam/stack-ui").TToken> & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
+export default Link;

package/src/components/Link/interface.d.ts

@@ -0,0 +1,4 @@
+import type { TDefaultComponent, TToken } from '@okam/stack-ui';
+import type { TLink } from '../../hooks/useLink/interface';
+export interface TLinkProps<T = TToken> extends Omit<TDefaultComponent<T>, keyof TLink>, TLink {
+}

package/src/hooks/useHash/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A hook that lets you read the current URL's hash.
+ *
+ * @returns The current `window.location.hash`, including the leading `#` character.
+ */
+export declare function useHash(): string;

package/src/hooks/useLink/index.d.ts

@@ -0,0 +1,13 @@
+import type { TLink, TUseLinkReturn } from './interface';
+/**
+ * Tries to get the locale, in order of priority:
+ * 1. The locale prop. Still has priority even when set to `false`
+ * 2. The locale from react-aria `useLocale`
+ * 3. The locale from next/navigation `useParams`
+ * @returns The best matched locale
+ */
+export declare function useLinkLocale(props: TLink): any;
+/**
+ * @params {props.locale} - The direct locale prop always gets priority. If no `locale` prop is provided, the prop will try to fall back to react-aria `useLocale` and then next/navigation `useParams`. If a locale is found, it will be automatically prepended to the href. Otherwise, href will be returned as is.
+ */
+export declare function useLink(props: TLink): TUseLinkReturn;

package/src/hooks/useLink/interface.d.ts

@@ -0,0 +1,23 @@
+import type { LinkProps as NextLinkProps } from 'next/link';
+import type { ReadonlyURLSearchParams } from 'next/navigation';
+export interface TLink extends Omit<NextLinkProps, 'scroll' | 'as'> {
+    /**
+     * @default true
+     * - `true`: Scrolls to the top of the clicked anchor (default Next.js behavior)
+     * - `false`: Prevents any automatic scrolling
+     * - `'top'`: Always scrolls to the top of the page, regardless of anchor
+     */
+    scroll?: 'top' | boolean;
+    urlDecorator?: NextLinkProps['as'];
+    /**
+     * Used for the automatic scroll when `scroll = 'top'`
+     * @default instant
+     */
+    behavior?: ScrollBehavior;
+    onPathnameChange?: (pathname: string) => void;
+    onSearchParamsChange?: (searchParams: ReadonlyURLSearchParams) => void;
+    onHashChange?: (hash: string) => void;
+}
+export interface TUseLinkReturn extends Omit<NextLinkProps, 'href'> {
+    href: string;
+}

package/src/index.d.ts

@@ -1,2 +1,7 @@
 export { default as Img } from './components/Img';
+export { default as Link } from './components/Link';
+export { useLink } from './hooks/useLink';
+export { useHash } from './hooks/useHash';
 export type { default as TImgProps } from './components/Img/interface';
+export type { TLinkProps } from './components/Link/interface';
+export type { TLink } from './hooks/useLink/interface';

package/src/theme/Link/index.d.ts

@@ -0,0 +1,156 @@
+declare const linkTheme: import("tailwind-variants").TVReturnType<{
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+        ghost: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}, undefined, "\n    flex\n    items-center\n    justify-center\n    gap-4\n    transition\n    duration-300\n    ease-in-out\n    disabled:pointer-events-none\n    disabled:opacity-30\n    focus-ring-black\n  ", import("tailwind-variants/dist/config.js").TVConfig<{
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+        ghost: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}, {
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+        ghost: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}>, {
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+        ghost: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+        ghost: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}, undefined, "\n    flex\n    items-center\n    justify-center\n    gap-4\n    transition\n    duration-300\n    ease-in-out\n    disabled:pointer-events-none\n    disabled:opacity-30\n    focus-ring-black\n  ", import("tailwind-variants/dist/config.js").TVConfig<{
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+        ghost: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}, {
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+        ghost: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}>, unknown, unknown, undefined>>;
+export default linkTheme;

package/src/theme/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react").MemoExoticComponent<({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default _default;