@okam/next-component 1.2.4 → 1.3.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 1.3.0 (2026-01-15)
+
+### 🚀 Features
+
+- **admin-bar:** add AdminBar with draft mode support ([289427e](https://github.com/OKAMca/stack/commit/289427e))
+- **next-component:** nuqs wrapper for react-aria ([d63f2f7](https://github.com/OKAMca/stack/commit/d63f2f7))
+- ⚠️  React 19 + Next.js 15 upgrade for all @okam/* packages ([#369](https://github.com/OKAMca/stack/pull/369))
+
+### 🩹 Fixes
+
+- adminbar safe draft mode handling ([#385](https://github.com/OKAMca/stack/pull/385))
+
+### ⚠️  Breaking Changes
+
+- Consumers must now have react and react-dom in their own
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+- Pierre-Olivier Clerson @poclerson
+
 ## 1.2.4 (2026-01-14)
 
 ### 🚀 Features

package/components/AdminBar/components/AdminBarError.d.ts

@@ -0,0 +1,4 @@
+import { TDefaultComponent } from '../../../../../stack-ui/src/index.ts';
+
+declare const AdminBarError: ({ themeName, tokens, customTheme }: TDefaultComponent) => import("react/jsx-runtime").JSX.Element | null;
+export default AdminBarError;

package/components/AdminBar/index.d.ts

@@ -0,0 +1,5 @@
+import { TToken } from '../../../../stack-ui/src/index.ts';
+import { TAdminBarProps } from './interface';
+
+declare const AdminBar: <T extends TToken>({ children, themeName, tokens, customTheme, }: TAdminBarProps<T>) => Promise<false | import("react/jsx-runtime").JSX.Element>;
+export default AdminBar;

package/components/AdminBar/index.js

@@ -0,0 +1,14 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+const headers_js = require("next/headers.js");
+const AdminBar = async ({
+  children,
+  themeName = "adminBar",
+  tokens,
+  customTheme
+}) => {
+  const { isEnabled } = await headers_js.draftMode();
+  return isEnabled && /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { themeName: `${themeName}.container`, tokens, customTheme, children: /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { themeName: `${themeName}.content`, tokens, children }) });
+};
+module.exports = AdminBar;

package/components/AdminBar/index.mjs

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@okam/stack-ui";
+import { draftMode } from "next/headers.js";
+const AdminBar = async ({
+  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 }) });
+};
+export {
+  AdminBar as default
+};

package/components/AdminBar/interface.d.ts

@@ -0,0 +1,14 @@
+import { TDefaultComponent, TToken } from '../../../../stack-ui/src/index.ts';
+import { ReactNode } from 'react';
+
+/**
+ * AdminBar Component Props
+ *
+ * The AdminBar is inspired by WordPress admin bar and provides a container for administrative controls.
+ * Its visibility is driven by Next.js's draftMode cookie.
+ *
+ * @property {ReactNode} children - Content to render inside the AdminBar. Put the DraftMode component inside the children.
+ */
+export interface TAdminBarProps<T = TToken> extends TDefaultComponent<T> {
+    children: ReactNode;
+}

package/components/Filter/index.d.ts

@@ -0,0 +1,26 @@
+import { TToken } from '../../../../stack-ui/src/index.ts';
+import { TFilterProps } from './interface';
+
+/**
+ * ### Filter component for URL search params filtering.
+ *
+ * Format: `?{{props.id}}={{props.selectedKeys}}` where `selectedKeys` is a comma-separated list of all currently selected keys
+ * @param props.selectedKeys - The currently selected keys. Leave empty for the Filter component to be uncontrolled, or pass a `Key[]` for controlled behavior.
+ * @param props.onSelectionChange - The callback function that is called when the selection changes. Pass a function that updates the `selectedKeys` state if you are using controlled behavior.
+ *
+ * @example
+ * #### Controlled state
+ * ```tsx
+ * const [selectedKeys, setSelectedKeys] = useState<Key[]>([])
+ *
+ * <Filter id="shape" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+ *   <Item key="circle">Circle</Item>
+ *   <Item key="square">Square</Item>
+ *   <Item key="triangle">Triangle</Item>
+ * </Filter>
+ * ```
+ *
+ * @returns
+ */
+declare const Filter: <T extends TToken = TToken>(props: TFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Filter;

package/components/Filter/index.js

@@ -0,0 +1,54 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+const index = require("../../hooks/useFilterState/index.js");
+const 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 = index.useFilterState({ ...props, selectionMode });
+  return /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { themeName: `${themeName}.wrapper`, tokens, customTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
+    stackUi.PopoverButton,
+    {
+      themeName: `${themeName}.popover`,
+      tokens,
+      type,
+      placement,
+      ...popoverButtonProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(stackUi.TagGroup, { themeName: `${themeName}.tagGroup`, tokens, ...tagGroupProps, ...state, children })
+    }
+  ) });
+};
+module.exports = Filter;

package/components/Filter/index.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Box, PopoverButton, TagGroup } from "@okam/stack-ui";
+import { useFilterState } from "../../hooks/useFilterState/index.mjs";
+const 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 })
+    }
+  ) });
+};
+export {
+  Filter as default
+};

package/components/Filter/interface.d.ts

@@ -0,0 +1,9 @@
+import { TToken, TDefaultComponent, TPopoverButtonProps } from '../../../../stack-ui/src/index.ts';
+import { TFilter } from '../../hooks/useFilterState/interface';
+
+export interface TFilterTagGroupProps<T = TToken> extends Omit<TDefaultComponent<T>, 'children'>, TFilter {
+}
+export interface TFilterPopoverButtonProps<T = TToken> extends Omit<TPopoverButtonProps<T>, 'type' | 'placement'>, Pick<Partial<TPopoverButtonProps<T>>, 'type' | 'placement'> {
+}
+export interface TFilterProps<T = TToken> extends Omit<TFilterTagGroupProps<T>, 'label'>, Omit<TFilterPopoverButtonProps<T>, 'children' | 'id'> {
+}

package/components/Link/index.js

@@ -3,9 +3,9 @@
 const jsxRuntime = require("react/jsx-runtime");
 const stackUi = require("@okam/stack-ui");
 const NextLink = require("next/link.js");
-const react = require("react");
+const React = require("react");
 const index = require("../../hooks/useLink/index.js");
-const Link = react.forwardRef((props, ref) => {
+const Link = React.forwardRef((props, ref) => {
   const {
     themeName = "link",
     tokens,

package/hooks/useFilterState/index.d.ts

@@ -0,0 +1,15 @@
+import { Selection } from 'react-stately';
+import { TFilter } from './interface';
+
+/**
+ * Manages the selection state of a single filter.
+ * The state is managed by `useListState` from `react-stately`, which controls `useQueryState` from `nuqs` to display the selected keys in the URL search params.
+ */
+export declare function useFilterState(props: TFilter): {
+    onSelectionChange: (keys: Selection) => void;
+    selectedKeys: import('./interface').TFilterValue;
+    defaultSelectedKeys: Set<import('react-stately').Key>;
+    collection: import('react-stately').Collection<import('react-stately').Node<import('./interface').TFilterItem<import('../../../../stack-ui/src/index.ts').TToken>>>;
+    disabledKeys: Set<import('react-stately').Key>;
+    selectionManager: import('@react-stately/selection').SelectionManager;
+};

package/hooks/useFilterState/index.js

@@ -0,0 +1,50 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const nuqs = require("nuqs");
+const radashi = require("radashi");
+const React = require("react");
+const reactStately = require("react-stately");
+const reactUse = require("react-use");
+function useFilterState(props) {
+  const {
+    id,
+    defaultSelectedKeys: defaultSelectedKeysProp = [],
+    onSelectionChange,
+    selectionMode = "multiple",
+    parser = nuqs.parseAsArrayOf(nuqs.parseAsString),
+    children,
+    items,
+    options,
+    ...rest
+  } = props;
+  const defaultValue = Array.from(defaultSelectedKeysProp).map((key) => key.toString());
+  const queryStateOptions = React.useMemo(
+    () => parser.withOptions(options ?? {}).withDefault(defaultValue),
+    [parser, options, defaultValue]
+  );
+  const [selectedKeys, setSelectedKeys] = nuqs.useQueryState(id, queryStateOptions);
+  const onSelectedKeysChange = (keys) => {
+    onSelectionChange == null ? void 0 : onSelectionChange(keys);
+    const stringKeys = Array.from(keys).map((key) => key.toString());
+    setSelectedKeys(stringKeys);
+  };
+  const defaultSelectedKeys = /* @__PURE__ */ new Set([...defaultSelectedKeysProp, ...selectedKeys ?? []]);
+  const state = reactStately.useListState({
+    ...rest,
+    children,
+    items,
+    selectionMode,
+    defaultSelectedKeys,
+    onSelectionChange: onSelectedKeysChange
+  });
+  reactUse.useUpdateEffect(() => {
+    const next = [...state.selectionManager.selectedKeys].map(String);
+    if (radashi.isEqual(next, selectedKeys)) {
+      return;
+    }
+    setSelectedKeys(next);
+  }, [state.selectionManager.selectedKeys]);
+  return { ...state, onSelectionChange: onSelectedKeysChange, selectedKeys, defaultSelectedKeys };
+}
+exports.useFilterState = useFilterState;

package/hooks/useFilterState/index.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { parseAsArrayOf, parseAsString, useQueryState } from "nuqs";
+import { isEqual } from "radashi";
+import { useMemo } from "react";
+import { useListState } from "react-stately";
+import { useUpdateEffect } from "react-use";
+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 == null ? void 0 : onSelectionChange(keys);
+    const stringKeys = Array.from(keys).map((key) => key.toString());
+    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;
+    }
+    setSelectedKeys(next);
+  }, [state.selectionManager.selectedKeys]);
+  return { ...state, onSelectionChange: onSelectedKeysChange, selectedKeys, defaultSelectedKeys };
+}
+export {
+  useFilterState
+};

package/hooks/useFilterState/interface.d.ts

@@ -0,0 +1,17 @@
+import { TDefaultItemComponent, TToken } from '../../../../stack-ui/src/index.ts';
+import { Options, ParserBuilder } from 'nuqs';
+import { AriaTagGroupProps } from 'react-aria';
+import { SelectionMode } from 'react-stately';
+
+export type TFilterValue = string[];
+export type TFilterItem<T extends TToken = TToken> = TDefaultItemComponent<never, T>;
+export interface TFilter extends Omit<AriaTagGroupProps<TFilterItem>, 'selectionMode'> {
+    id: string;
+    /**
+     * @default parseAsArrayOf(parseAsString)
+     */
+    parser?: ParserBuilder<TFilterValue>;
+    defaultSelectedKeys?: Exclude<AriaTagGroupProps<object>['defaultSelectedKeys'], 'all'>;
+    options?: Options;
+    selectionMode?: Exclude<SelectionMode, 'none'>;
+}

package/hooks/useHash/index.js

@@ -1,7 +1,7 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
+const React = require("react");
 const reactUse = require("react-use");
 function getHash() {
   if (typeof window === "undefined") return "";
@@ -9,7 +9,7 @@ function getHash() {
 }
 function useHash() {
   const defaultHash = getHash();
-  const [hash, setHash] = react.useState(defaultHash);
+  const [hash, setHash] = React.useState(defaultHash);
   const handleHashChangeEvent = ({ newURL }) => {
     if (!URL.canParse(newURL)) return;
     const { hash: newHash } = new URL(newURL);

package/hooks/useLink/index.js

@@ -2,7 +2,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const navigation_js = require("next/navigation.js");
-const react = require("react");
+const React = require("react");
 const reactAria = require("react-aria");
 const index = require("../useHash/index.js");
 function scrollToTop(behavior) {
@@ -55,7 +55,7 @@ function useLink(props) {
   const hash = index.useHash();
   const isNextScroll = typeof scroll === "boolean";
   const nextScroll = isNextScroll ? scroll : false;
-  const handleScroll = react.useCallback(() => {
+  const handleScroll = React.useCallback(() => {
     if (isNextScroll) return;
     scrollToTop(behavior);
   }, [behavior, isNextScroll]);
@@ -67,13 +67,13 @@ function useLink(props) {
     onTouchStart == null ? void 0 : onTouchStart(event);
     handleScroll();
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
     onPathnameChange == null ? void 0 : onPathnameChange(pathname);
   }, [onPathnameChange, pathname]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     onSearchParamsChange == null ? void 0 : onSearchParamsChange(searchParams);
   }, [onSearchParamsChange, searchParams]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     onHashChange == null ? void 0 : onHashChange(hash);
   }, [onHashChange, hash]);
   return {

package/index.d.ts

@@ -1,7 +1,14 @@
 export { default as Img } from './components/Img';
 export { default as Link } from './components/Link';
+export { default as Filter } from './components/Filter';
 export { useLink } from './hooks/useLink';
 export { useHash } from './hooks/useHash';
+export { useFilterState } from './hooks/useFilterState';
 export type { default as TImgProps } from './components/Img/interface';
 export type { TLinkProps } from './components/Link/interface';
 export type { TLink } from './hooks/useLink/interface';
+export type { TFilter } from './hooks/useFilterState/interface';
+export type { TFilterProps } from './components/Filter/interface';
+export { DraftModeContextProvider, useDraftMode } from './providers/DraftMode';
+export { AdminBarContextProvider, useAdminBar } from './providers/AdminBar';
+export { default as ThemeProvider } from './theme';

package/index.js

@@ -2,9 +2,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const index = require("./components/Img/index.js");
 const index$1 = require("./components/Link/index.js");
-const index$2 = require("./hooks/useLink/index.js");
-const index$3 = require("./hooks/useHash/index.js");
+const index$2 = require("./components/Filter/index.js");
+const index$3 = require("./hooks/useLink/index.js");
+const index$4 = require("./hooks/useHash/index.js");
+const index$5 = require("./hooks/useFilterState/index.js");
+const index$6 = require("./providers/DraftMode/index.js");
+const index$7 = require("./providers/AdminBar/index.js");
+const index$8 = require("./theme/index.js");
 exports.Img = index;
 exports.Link = index$1;
-exports.useLink = index$2.useLink;
-exports.useHash = index$3.useHash;
+exports.Filter = index$2;
+exports.useLink = index$3.useLink;
+exports.useHash = index$4.useHash;
+exports.useFilterState = index$5.useFilterState;
+exports.DraftModeContextProvider = index$6.DraftModeContextProvider;
+exports.useDraftMode = index$6.useDraftMode;
+exports.AdminBarContextProvider = index$7.AdminBarContextProvider;
+exports.useAdminBar = index$7.useAdminBar;
+exports.ThemeProvider = index$8;

package/index.mjs

@@ -1,10 +1,22 @@
 import { default as default2 } from "./components/Img/index.mjs";
 import { default as default3 } from "./components/Link/index.mjs";
+import { default as default4 } from "./components/Filter/index.mjs";
 import { useLink } from "./hooks/useLink/index.mjs";
 import { useHash } from "./hooks/useHash/index.mjs";
+import { useFilterState } from "./hooks/useFilterState/index.mjs";
+import { DraftModeContextProvider, useDraftMode } from "./providers/DraftMode/index.mjs";
+import { AdminBarContextProvider, useAdminBar } from "./providers/AdminBar/index.mjs";
+import { default as default5 } from "./theme/index.mjs";
 export {
+  AdminBarContextProvider,
+  DraftModeContextProvider,
+  default4 as Filter,
   default2 as Img,
   default3 as Link,
+  default5 as ThemeProvider,
+  useAdminBar,
+  useDraftMode,
+  useFilterState,
   useHash,
   useLink
 };

package/lib/createServerContext/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/next-component",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -31,13 +31,20 @@
   },
   "dependencies": {
     "@okam/stack-ui": "1.44.0",
+    "@okam/core-lib": "1.17.0",
     "next": "^15.0.0",
     "react-use": "17.5.1",
     "tailwind-variants": "^0.3.0",
-    "react-aria": "^3.39.0"
+    "react-aria": "^3.39.0",
+    "react-stately": "^3.43.0",
+    "nuqs": "^2.4.3",
+    "radashi": "^12.3.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "next": "^15.0.0",
+    "nuqs": "^2.4.0",
+    "react-stately": "^3.43.0"
   },
   "devDependencies": {
     "react": "^19.0.0"

package/providers/AdminBar/index.d.ts

@@ -0,0 +1,4 @@
+import { TAdminBarContext, TAdminBarProviderProps } from './interface';
+
+export declare const useAdminBar: () => TAdminBarContext, AdminBarProvider: import('react').Provider<TAdminBarContext | undefined>;
+export declare function AdminBarContextProvider(props: TAdminBarProviderProps): import("react/jsx-runtime").JSX.Element;

package/providers/AdminBar/index.js

@@ -0,0 +1,16 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const coreLib = require("@okam/core-lib");
+const React = require("react");
+const [useAdminBar, AdminBarProvider] = coreLib.createCtx();
+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.AdminBarProvider = AdminBarProvider;
+exports.useAdminBar = useAdminBar;

package/providers/AdminBar/index.mjs

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

package/providers/AdminBar/interface.d.ts

@@ -0,0 +1,10 @@
+import { Nullable } from '../../../../stack-ui/src/index.ts';
+import { ReactNode } from 'react';
+
+export interface TAdminBarProviderProps {
+    children: ReactNode;
+}
+export type TAdminBarContext = {
+    error: Nullable<Error>;
+    setError: (error: Nullable<Error>) => void;
+};

package/providers/DraftMode/index.d.ts

@@ -0,0 +1,4 @@
+import { TDraftModeContext, TDraftModeProviderProps } from './interface';
+
+export declare const useDraftMode: () => TDraftModeContext, DraftModeProvider: import('react').Provider<TDraftModeContext | undefined>;
+export declare function DraftModeContextProvider(props: TDraftModeProviderProps): import("react/jsx-runtime").JSX.Element;

package/providers/DraftMode/index.js

@@ -0,0 +1,15 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const coreLib = require("@okam/core-lib");
+const React = require("react");
+const [useDraftMode, DraftModeProvider] = coreLib.createCtx();
+function DraftModeContextProvider(props) {
+  const { children, isEnabled } = props;
+  const value = React.useMemo(() => ({ isEnabled }), [isEnabled]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DraftModeProvider, { value, children });
+}
+exports.DraftModeContextProvider = DraftModeContextProvider;
+exports.DraftModeProvider = DraftModeProvider;
+exports.useDraftMode = useDraftMode;

package/providers/DraftMode/index.mjs

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createCtx } from "@okam/core-lib";
+import { useMemo } from "react";
+const [useDraftMode, DraftModeProvider] = createCtx();
+function DraftModeContextProvider(props) {
+  const { children, isEnabled } = props;
+  const value = useMemo(() => ({ isEnabled }), [isEnabled]);
+  return /* @__PURE__ */ jsx(DraftModeProvider, { value, children });
+}
+export {
+  DraftModeContextProvider,
+  DraftModeProvider,
+  useDraftMode
+};

package/providers/DraftMode/interface.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+export interface TDraftModeProviderProps {
+    children: ReactNode;
+    isEnabled: boolean;
+}
+export interface TDraftModeServerProviderProps {
+    children: ReactNode;
+}
+export type TDraftModeContext = {
+    isEnabled: boolean;
+};