@okam/next-component 2.1.0 → 2.1.1

package/index.mjs

@@ -1,593 +1,23 @@
-import { jsx } from "react/jsx-runtime";
-import { Box, PopoverButton, TagGroup, useThemeContext, Anchor, createThemeProvider, makeTheme } from "@okam/stack-ui";
-import { parseAsArrayOf, parseAsString, useQueryState } from "nuqs";
-import { isEqual } from "radashi";
-import { useMemo, useState, useRef, useCallback, useEffect, memo } from "react";
-import { useListState } from "react-stately";
-import { useUpdateEffect, useEvent } from "react-use";
-import Image from "next/image";
-import NextLink from "next/link";
-import { usePathname, useSearchParams, useParams } from "next/navigation";
-import { useLocale } from "react-aria";
-import { createCtx } from "@okam/react-utils";
-import { D, u } from "./index-Ber8Ecgv.mjs";
-import { tv } from "tailwind-variants";
-function useFilterState(props) {
-  const {
-    id,
-    defaultSelectedKeys: defaultSelectedKeysProp = [],
-    onSelectionChange,
-    selectionMode = "multiple",
-    parser = parseAsArrayOf(parseAsString),
-    children,
-    items,
-    options,
-    ...rest
-  } = props;
-  const defaultValue = Array.from(defaultSelectedKeysProp).map((key) => key.toString());
-  const queryStateOptions = useMemo(
-    () => parser.withOptions(options ?? {}).withDefault(defaultValue),
-    [parser, options, defaultValue]
-  );
-  const [selectedKeys, setSelectedKeys] = useQueryState(id, queryStateOptions);
-  const onSelectedKeysChange = (keys) => {
-    onSelectionChange?.(keys);
-    const stringKeys = Array.from(keys).map((key) => key.toString());
-    void setSelectedKeys(stringKeys);
-  };
-  const defaultSelectedKeys = /* @__PURE__ */ new Set([...defaultSelectedKeysProp, ...selectedKeys ?? []]);
-  const state = useListState({
-    ...rest,
-    children,
-    items,
-    selectionMode,
-    defaultSelectedKeys,
-    onSelectionChange: onSelectedKeysChange
-  });
-  useUpdateEffect(() => {
-    const next = [...state.selectionManager.selectedKeys].map(String);
-    if (isEqual(next, selectedKeys)) {
-      return;
-    }
-    void setSelectedKeys(next);
-  }, [state.selectionManager.selectedKeys]);
-  return { ...state, onSelectionChange: onSelectedKeysChange, selectedKeys: selectedKeys ?? void 0, defaultSelectedKeys };
-}
-function Filter(props) {
-  const {
-    // TagGroup-specific props
-    children,
-    items,
-    defaultSelectedKeys,
-    selectedKeys,
-    selectionBehavior,
-    selectionMode = "multiple",
-    options,
-    description,
-    disabledKeys,
-    disallowEmptySelection,
-    errorMessage,
-    onRemove,
-    onSelectionChange,
-    // Common props
-    themeName = "filter",
-    tokens,
-    customTheme,
-    // PopoverButton props with defaults
-    type = "dialog",
-    placement = "bottom",
-    // Remaining PopoverButton props
-    ...popoverButtonProps
-  } = props;
-  const tagGroupProps = {
-    items,
-    selectionBehavior,
-    selectionMode,
-    description,
-    disallowEmptySelection,
-    errorMessage,
-    onRemove
-  };
-  const state = useFilterState({ ...props, selectionMode });
-  return /* @__PURE__ */ jsx(Box, { themeName: `${themeName}.wrapper`, tokens, customTheme, children: /* @__PURE__ */ jsx(
-    PopoverButton,
-    {
-      themeName: `${themeName}.popover`,
-      tokens,
-      type,
-      placement,
-      ...popoverButtonProps,
-      children: /* @__PURE__ */ jsx(TagGroup, { themeName: `${themeName}.tagGroup`, tokens, ...tagGroupProps, ...state, children })
-    }
-  ) });
-}
-function Img(props) {
-  const { src, width, height, themeName = "img", tokens, customTheme, ...rest } = props;
-  const theme = useThemeContext(themeName, tokens, customTheme);
-  if (typeof src === "object") {
-    const { blurWidth, blurHeight, width: srcWidth, height: srcHeight, ...withoutBlurDimensions } = src;
-    const blur = {
-      blurwidth: blurWidth,
-      blurheight: blurHeight
-    };
-    return /* @__PURE__ */ jsx(
-      Image,
-      {
-        className: theme,
-        ...withoutBlurDimensions,
-        ...rest,
-        ...blur,
-        width: srcWidth ?? width,
-        height: srcHeight ?? height
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(Image, { width, height, className: theme, src, ...rest });
-}
-function getHash() {
-  if (typeof window === "undefined")
-    return "";
-  return window.location.hash;
-}
-function useHash() {
-  const defaultHash = getHash();
-  const [hash, setHash] = useState(defaultHash);
-  const handleHashChangeEvent = ({ newURL }) => {
-    if (!URL.canParse(newURL))
-      return;
-    const { hash: newHash } = new URL(newURL);
-    if (!newHash || newHash === hash)
-      return;
-    setHash(newHash);
-  };
-  useEvent("hashchange", handleHashChangeEvent);
-  return hash;
-}
-function scrollToTop(behavior) {
-  window?.scrollTo?.({ top: 0, behavior });
-}
-function getParamsLocale(params) {
-  const { locale } = params ?? {};
-  if (Array.isArray(locale))
-    return locale[0];
-  return locale;
-}
-function useLinkLocale(props) {
-  const { locale } = props;
-  const params = useParams();
-  const paramsLocale = getParamsLocale(params);
-  const { locale: ctxLocale } = useLocale();
-  return locale ?? ctxLocale ?? paramsLocale ?? false;
-}
-function localizeHref(href, locale) {
-  const hrefString = href.toString();
-  const isAnchor = hrefString.startsWith("#");
-  const isExternal = /^[a-z]+:\/\//i.test(hrefString) || hrefString.startsWith("//");
-  if (isExternal || isAnchor)
-    return hrefString;
-  if (locale != null && locale !== false) {
-    return `/${locale}${hrefString}`;
-  }
-  return hrefString;
-}
-function useLink(props) {
-  const {
-    scroll = true,
-    onMouseEnter,
-    onTouchStart,
-    onClick,
-    onNavigate,
-    onPathnameChange,
-    onHashChange,
-    onSearchParamsChange,
-    href,
-    urlDecorator,
-    replace,
-    prefetch,
-    shallow,
-    passHref,
-    legacyBehavior,
-    behavior = "instant"
-  } = props;
-  const locale = useLinkLocale(props);
-  const localizedHref = localizeHref(href, locale);
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const hash = useHash();
-  const hasWarnedOnPathnameChangeRef = useRef(false);
-  const isNextScroll = typeof scroll === "boolean";
-  const nextScroll = isNextScroll ? scroll : false;
-  const handleScroll = useCallback(() => {
-    if (isNextScroll)
-      return;
-    scrollToTop(behavior);
-  }, [behavior, isNextScroll]);
-  const handleClick = (event) => {
-    onClick?.(event);
-    handleScroll();
-  };
-  const handleTouchStart = (event) => {
-    onTouchStart?.(event);
-    handleScroll();
-  };
-  useEffect(() => {
-    if (process.env.NODE_ENV === "production" || onPathnameChange == null || hasWarnedOnPathnameChangeRef.current)
-      return;
-    console.warn("[next-component/Link] `onPathnameChange` is deprecated and will be removed in the next major version. Use `onNavigate` from next/link instead.");
-    hasWarnedOnPathnameChangeRef.current = true;
-  }, [onPathnameChange]);
-  useEffect(() => {
-    onPathnameChange?.(pathname);
-  }, [onPathnameChange, pathname]);
-  useEffect(() => {
-    onSearchParamsChange?.(searchParams);
-  }, [onSearchParamsChange, searchParams]);
-  useEffect(() => {
-    onHashChange?.(hash);
-  }, [onHashChange, hash]);
-  return {
-    href: localizedHref.toString(),
-    as: urlDecorator,
-    replace,
-    prefetch,
-    shallow,
-    onClick: handleClick,
-    onNavigate,
-    onTouchStart: handleTouchStart,
-    onMouseEnter,
-    scroll: nextScroll,
-    passHref,
-    legacyBehavior
-  };
-}
-function Link({ ref, ...props }) {
-  const {
-    themeName = "link",
-    tokens,
-    customTheme,
-    as = NextLink,
-    children,
-    locale,
-    scroll,
-    onPathnameChange,
-    onSearchParamsChange,
-    onHashChange,
-    behavior,
-    urlDecorator: urlDecoratorProp,
-    href: hrefProp,
-    ...rest
-  } = props;
-  const linkProps = useLink(props);
-  return /* @__PURE__ */ jsx(
-    Anchor,
-    {
-      ref,
-      ...rest,
-      nextLinkProps: linkProps,
-      as,
-      themeName,
-      tokens,
-      customTheme,
-      children
-    }
-  );
-}
-Link.displayName = "Link";
-const adminBarCtx = createCtx();
-const useAdminBar = adminBarCtx[0];
-const AdminBarProvider = adminBarCtx[1];
-function AdminBarContextProvider(props) {
-  const { children } = props;
-  const [error, setError] = useState();
-  const value = useMemo(() => ({ error, setError }), [error]);
-  return /* @__PURE__ */ jsx(AdminBarProvider, { value, children });
-}
-const adminBarContainer = tv({
-  base: "w-full bg-gray-100 py-2 px-4 border-gray-200 fixed left-0 right-0 z-50",
-  variants: {
-    position: {
-      top: "top-0 border-b",
-      bottom: "bottom-0 border-t"
-    },
-    fullWidth: {
-      true: "max-w-full"
-    },
-    background: {
-      grey: "bg-gray-100",
-      dark: "bg-gray-800 text-white",
-      light: "bg-white"
-    },
-    padding: {
-      small: "py-1 px-2",
-      medium: "py-2 px-4",
-      large: "py-3 px-6"
-    }
-  },
-  defaultVariants: {
-    position: "top",
-    background: "grey",
-    padding: "medium"
-  }
-});
-const adminBarContent = tv({
-  base: "flex items-center",
-  variants: {
-    justify: {
-      start: "justify-start",
-      center: "justify-center",
-      end: "justify-end",
-      between: "justify-between",
-      around: "justify-around",
-      evenly: "justify-evenly"
-    },
-    gap: {
-      small: "gap-2",
-      medium: "gap-4",
-      large: "gap-6"
-    },
-    wrap: {
-      true: "flex-wrap",
-      false: "flex-nowrap"
-    }
-  },
-  defaultVariants: {
-    justify: "between",
-    gap: "medium",
-    wrap: false
-  }
-});
-const adminBarButton = tv({
-  base: "px-3 py-1 rounded text-sm font-medium transition-colors",
-  variants: {
-    variant: {
-      primary: "bg-blue-600 text-white hover:bg-blue-700",
-      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
-      danger: "bg-red-600 text-white hover:bg-red-700"
-    },
-    size: {
-      small: "text-xs px-2 py-0.5",
-      medium: "text-sm px-3 py-1",
-      large: "text-base px-4 py-2"
-    }
-  },
-  defaultVariants: {
-    variant: "secondary",
-    size: "medium"
-  }
-});
-const adminBarError = tv({
-  base: "flex items-center justify-center bg-red-50 text-red-700 px-3 py-1 rounded-md text-sm",
-  variants: {
-    severity: {
-      low: "bg-yellow-50 text-yellow-700",
-      medium: "bg-red-50 text-red-700",
-      high: "bg-red-100 text-red-800 font-bold"
-    },
-    hasBorder: {
-      true: "border border-red-300",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    severity: "medium",
-    hasBorder: true
-  }
-});
-const adminBarErrorTypography = tv({
-  base: "text-red-700 text-sm font-medium",
-  variants: {
-    severity: {
-      low: "text-yellow-700",
-      medium: "text-red-700",
-      high: "text-red-800 font-bold"
-    }
-  },
-  defaultVariants: {
-    severity: "medium"
-  }
-});
-const adminBarTheme = {
-  container: adminBarContainer,
-  content: adminBarContent,
-  button: adminBarButton,
-  error: adminBarError,
-  errorTypography: adminBarErrorTypography
-};
-const button = tv({
-  base: `
-    flex
-    items-center
-    justify-center
-    gap-4
-    transition
-    duration-300
-    ease-in-out
-    disabled:pointer-events-none
-    disabled:opacity-30
-    focus-ring-black
-  `,
-  defaultVariants: {
-    buttonStyle: "default",
-    type: "button",
-    size: "default",
-    shape: "rounded"
-  },
-  variants: {
-    type: {
-      button: "",
-      menu: "text-2xl"
-    },
-    buttonStyle: {
-      default: `
-            px-4
-            py-2
-            text-white
-            !bg-color-1-500
-            hover:!bg-color-1-400
-            active:!bg-color-1-400
-          `,
-      outline: `
-            px-4
-            py-2
-            bg-transparent
-            !border-color-1-500
-            border-2
-            text-color-1-500
-            hover:bg-color-1-500
-            hover:text-white
-            active:bg-color-1-500
-            active:text-white
-          `,
-      hollow: `
-            px-2
-            bg-transparent
-            text-color-1-500
-            hover:border-b-color-1-500
-            active:border-b-color-1-500
-            focus:border-b-color-1-500
-          `
-    },
-    intent: {
-      error: `
-            !bg-error
-            text-white
-            pointer-events-none
-            !border-error
-          `
-    },
-    size: {
-      default: `min-w-12 min-h-6`,
-      large: `min-w-36 min-h-18`
-    },
-    shape: {
-      rounded: `rounded-md`,
-      circular: `rounded-full`
-    }
-  }
-});
-const typography = tv({
-  variants: {
-    size: {
-      h1: `text-5xl`,
-      h2: `text-4xl`,
-      h3: `text-3xl`,
-      h4: `text-2xl`,
-      h5: `text-xl`,
-      h6: `text-lg`,
-      leading: `text-md font-bold leading-normal`,
-      paragraph: `text-md inline`,
-      footnotes: `text-sm`,
-      xs: `text-xs`
-    },
-    font: {
-      body: `font-body`
-    },
-    weight: {
-      normal: `font-normal`,
-      light: `font-light`,
-      bold: "font-bold"
-    },
-    color: {
-      gray: `text-gray-500`,
-      white: `text-white`
-    },
-    isError: {
-      true: "text-sm text-error py-3"
-    },
-    align: {
-      center: "text-center",
-      left: "text-left",
-      right: "text-right"
-    }
-  },
-  defaultVariants: {
-    size: "paragraph",
-    font: "body"
-  }
-});
-const filterTagGroupWrapper = tv({
-  base: "w-full flex flex-col gap-2"
-});
-const filterTagGroupTags = tv({
-  base: "flex flex-col gap-2 max-w-[150px] items-center mx-auto"
-});
-const filterTagGroupLabel = tv({
-  extend: typography,
-  defaultVariants: { size: "h4" }
-});
-const filterTagGroupDescription = tv({
-  extend: typography,
-  base: "block",
-  defaultVariants: { size: "footnotes" }
-});
-const filterTagGroupErrorMessage = tv({
-  extend: typography,
-  base: "block",
-  defaultVariants: { isError: true }
-});
-const filterTagGroupTagWrapper = tv({
-  base: [
-    button({ buttonStyle: "outline" }),
-    `
-      focus-visible:outline
-      focus-visible:outline-offset-2
-      focus-visible:outline-2
-      focus-visible:outline-black
-    `
-  ],
-  variants: {
-    isSelected: {
-      true: [button({ buttonStyle: "default" })]
-    },
-    isDisabled: {
-      true: "pointer-events-none opacity-30"
-    }
-  }
-});
-const filterTagGroupTagContainer = tv({
-  extend: typography,
-  base: "flex items-center justify-center"
-});
-const filterPopoverButton = tv({
-  extend: button,
-  base: "!min-w-[200px]"
-});
-const filterPopoverPopover = tv({
-  base: "w-[var(--filter-popover-container-width)] bg-gray-300 rounded-md p-4"
-});
-const filterTheme = {
-  popover: {
-    button: filterPopoverButton,
-    popover: filterPopoverPopover
-  },
-  tagGroup: {
-    wrapper: filterTagGroupWrapper,
-    tags: filterTagGroupTags,
-    label: filterTagGroupLabel,
-    description: filterTagGroupDescription,
-    errorMessage: filterTagGroupErrorMessage,
-    tag: {
-      wrapper: filterTagGroupTagWrapper,
-      container: filterTagGroupTagContainer
-    }
-  }
-};
-const BaseTheme = makeTheme({
-  filter: filterTheme,
-  button,
-  typography,
-  adminBar: adminBarTheme
-});
-const index = memo(createThemeProvider(BaseTheme));
+import { default as default2 } from "./components/Filter/index.mjs";
+import { default as default3 } from "./components/Img/index.mjs";
+import { default as default4 } from "./components/Link/index.mjs";
+import { useFilterState } from "./hooks/useFilterState/index.mjs";
+import { useHash } from "./hooks/useHash/index.mjs";
+import { useLink } from "./hooks/useLink/index.mjs";
+import { LocalePrefix } from "./hooks/useLink/interface.mjs";
+import { AdminBarContextProvider, useAdminBar } from "./providers/AdminBar/index.mjs";
+import { DraftModeContextProvider, useDraftMode } from "./providers/DraftMode/index.mjs";
+import { default as default5 } from "./theme/index.mjs";
 export {
   AdminBarContextProvider,
-  D as DraftModeContextProvider,
-  Filter,
-  Img,
-  Link,
-  index as ThemeProvider,
+  DraftModeContextProvider,
+  default2 as Filter,
+  default3 as Img,
+  default4 as Link,
+  LocalePrefix,
+  default5 as ThemeProvider,
   useAdminBar,
-  u as useDraftMode,
+  useDraftMode,
   useFilterState,
   useHash,
   useLink

package/lib/createServerContext/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function createServerContext(defaultValue) {
+  const getRef = react.cache(() => ({ current: defaultValue }));
+  const getValue = () => getRef().current;
+  const setValue = (value) => {
+    getRef().current = value;
+  };
+  return [getValue, setValue];
+}
+exports.createServerContext = createServerContext;

package/lib/createServerContext/index.mjs

@@ -0,0 +1,12 @@
+import { cache } from "react";
+function createServerContext(defaultValue) {
+  const getRef = cache(() => ({ current: defaultValue }));
+  const getValue = () => getRef().current;
+  const setValue = (value) => {
+    getRef().current = value;
+  };
+  return [getValue, setValue];
+}
+export {
+  createServerContext
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/next-component",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "repository": {
     "url": "https://github.com/OKAMca/stack.git"
   },
@@ -18,7 +18,7 @@
       },
       "require": {
         "types": "./index.d.ts",
-        "default": "./index.mjs"
+        "default": "./index.js"
       }
     },
     "./server": {
@@ -28,7 +28,7 @@
       },
       "require": {
         "types": "./server.d.ts",
-        "default": "./server.mjs"
+        "default": "./server.js"
       }
     }
   },
@@ -43,8 +43,8 @@
     "react-stately": "^3.43.0"
   },
   "dependencies": {
-    "@okam/react-utils": "0.0.1",
-    "@okam/stack-ui": "2.0.3",
+    "@okam/react-utils": "1.0.0",
+    "@okam/stack-ui": "2.1.1",
     "nuqs": "^2.4.3",
     "radashi": "^12.3.0",
     "react-aria": "^3.39.0",

package/providers/AdminBar/index.js

@@ -0,0 +1,17 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactUtils = require("@okam/react-utils");
+const react = require("react");
+const adminBarCtx = reactUtils.createCtx();
+const useAdminBar = adminBarCtx[0];
+const AdminBarProvider = adminBarCtx[1];
+function AdminBarContextProvider(props) {
+  const { children } = props;
+  const [error, setError] = react.useState();
+  const value = react.useMemo(() => ({ error, setError }), [error]);
+  return /* @__PURE__ */ jsxRuntime.jsx(AdminBarProvider, { value, children });
+}
+exports.AdminBarContextProvider = AdminBarContextProvider;
+exports.useAdminBar = useAdminBar;

package/providers/AdminBar/index.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createCtx } from "@okam/react-utils";
+import { useState, useMemo } from "react";
+const adminBarCtx = createCtx();
+const useAdminBar = adminBarCtx[0];
+const AdminBarProvider = adminBarCtx[1];
+function AdminBarContextProvider(props) {
+  const { children } = props;
+  const [error, setError] = useState();
+  const value = useMemo(() => ({ error, setError }), [error]);
+  return /* @__PURE__ */ jsx(AdminBarProvider, { value, children });
+}
+export {
+  AdminBarContextProvider,
+  useAdminBar
+};