@okam/next-component 2.0.2 → 2.1.0

package/index.mjs

@@ -1,21 +1,593 @@
-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 { AdminBarContextProvider, useAdminBar } from "./providers/AdminBar/index.mjs";
-import { DraftModeContextProvider, useDraftMode } from "./providers/DraftMode/index.mjs";
-import { default as default5 } from "./theme/index.mjs";
+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));
 export {
   AdminBarContextProvider,
-  DraftModeContextProvider,
-  default2 as Filter,
-  default3 as Img,
-  default4 as Link,
-  default5 as ThemeProvider,
+  D as DraftModeContextProvider,
+  Filter,
+  Img,
+  Link,
+  index as ThemeProvider,
   useAdminBar,
-  useDraftMode,
+  u as useDraftMode,
   useFilterState,
   useHash,
   useLink

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/next-component",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "repository": {
     "url": "https://github.com/OKAMca/stack.git"
   },
@@ -37,15 +37,14 @@
   },
   "peerDependencies": {
     "@react-stately/selection": "^3.20.0",
-    "next": "^15.1.0 || ^16.0.0",
+    "next": ">=15.5.13 <16.0.0 || ^16.1.7",
     "nuqs": "^2.4.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-stately": "^3.43.0"
   },
   "dependencies": {
     "@okam/react-utils": "0.0.1",
-    "@okam/stack-ui": "2.0.1",
-    "next": "^15.1.0 || ^16.0.0",
+    "@okam/stack-ui": "2.0.3",
     "nuqs": "^2.4.3",
     "radashi": "^12.3.0",
     "react-aria": "^3.39.0",

package/server.js

@@ -1,9 +1,33 @@
-"use server";
+require("server-only");
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./components/AdminBar/index.js");
-const index$1 = require("./lib/createServerContext/index.js");
-const server = require("./providers/DraftMode/server.js");
-exports.AdminBar = index;
-exports.createServerContext = index$1.createServerContext;
-exports.DraftModeServerContextProvider = server;
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+const headers = require("next/headers");
+const react = require("react");
+const index = require("./index-DV6W6v68.js");
+async function AdminBar({
+  children,
+  themeName = "adminBar",
+  tokens,
+  customTheme
+}) {
+  const { isEnabled } = await headers.draftMode();
+  return isEnabled && /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { themeName: `${themeName}.container`, tokens, customTheme, children: /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { themeName: `${themeName}.content`, tokens, children }) });
+}
+function createServerContext(defaultValue) {
+  const getRef = react.cache(() => ({ current: defaultValue }));
+  const getValue = () => getRef().current;
+  const setValue = (value) => {
+    getRef().current = value;
+  };
+  return [getValue, setValue];
+}
+async function DraftModeServerContextProvider(props) {
+  const { children, ...rest } = props;
+  const { isEnabled } = await headers.draftMode();
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DraftModeContextProvider, { isEnabled, ...rest, children });
+}
+exports.AdminBar = AdminBar;
+exports.DraftModeServerContextProvider = DraftModeServerContextProvider;
+exports.createServerContext = createServerContext;

package/server.mjs

@@ -1,9 +1,33 @@
-"use server";
-import { default as default2 } from "./components/AdminBar/index.mjs";
-import { createServerContext } from "./lib/createServerContext/index.mjs";
-import { default as default3 } from "./providers/DraftMode/server.mjs";
+import "server-only";
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@okam/stack-ui";
+import { draftMode } from "next/headers";
+import { cache } from "react";
+import { D as DraftModeContextProvider } from "./index-Ber8Ecgv.mjs";
+async function AdminBar({
+  children,
+  themeName = "adminBar",
+  tokens,
+  customTheme
+}) {
+  const { isEnabled } = await draftMode();
+  return isEnabled && /* @__PURE__ */ jsx(Box, { themeName: `${themeName}.container`, tokens, customTheme, children: /* @__PURE__ */ jsx(Box, { themeName: `${themeName}.content`, tokens, children }) });
+}
+function createServerContext(defaultValue) {
+  const getRef = cache(() => ({ current: defaultValue }));
+  const getValue = () => getRef().current;
+  const setValue = (value) => {
+    getRef().current = value;
+  };
+  return [getValue, setValue];
+}
+async function DraftModeServerContextProvider(props) {
+  const { children, ...rest } = props;
+  const { isEnabled } = await draftMode();
+  return /* @__PURE__ */ jsx(DraftModeContextProvider, { isEnabled, ...rest, children });
+}
 export {
-  default2 as AdminBar,
-  default3 as DraftModeServerContextProvider,
+  AdminBar,
+  DraftModeServerContextProvider,
   createServerContext
 };