@okam/next-component 2.1.0 → 2.1.1

package/{index-DV6W6v68.js → providers/DraftMode/index.js}

@@ -1,4 +1,6 @@
+"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");

package/{index-Ber8Ecgv.mjs → providers/DraftMode/index.mjs}

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { createCtx } from "@okam/react-utils";
 import { useMemo } from "react";
@@ -10,6 +11,6 @@ function DraftModeContextProvider(props) {
   return /* @__PURE__ */ jsx(DraftModeProvider, { value, children });
 }
 export {
-  DraftModeContextProvider as D,
-  useDraftMode as u
+  DraftModeContextProvider,
+  useDraftMode
 };

package/providers/DraftMode/server.js

@@ -0,0 +1,10 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const headers = require("next/headers");
+const index = require("./index.js");
+async function DraftModeServerContextProvider(props) {
+  const { children, ...rest } = props;
+  const { isEnabled } = await headers.draftMode();
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DraftModeContextProvider, { isEnabled, ...rest, children });
+}
+module.exports = DraftModeServerContextProvider;

package/providers/DraftMode/server.mjs

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { draftMode } from "next/headers";
+import { DraftModeContextProvider } from "./index.mjs";
+async function DraftModeServerContextProvider(props) {
+  const { children, ...rest } = props;
+  const { isEnabled } = await draftMode();
+  return /* @__PURE__ */ jsx(DraftModeContextProvider, { isEnabled, ...rest, children });
+}
+export {
+  DraftModeServerContextProvider as default
+};

package/server.d.ts

@@ -1,3 +1,4 @@
 export { default as AdminBar } from './components/AdminBar';
+export { LocalePrefix } from './hooks/useLink/interface';
 export { createServerContext } from './lib/createServerContext';
 export { default as DraftModeServerContextProvider } from './providers/DraftMode/server';

package/server.js

@@ -1,33 +1,11 @@
 require("server-only");
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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;
+const index = require("./components/AdminBar/index.js");
+const _interface = require("./hooks/useLink/interface.js");
+const index$1 = require("./lib/createServerContext/index.js");
+const server = require("./providers/DraftMode/server.js");
+exports.AdminBar = index;
+exports.LocalePrefix = _interface.LocalePrefix;
+exports.createServerContext = index$1.createServerContext;
+exports.DraftModeServerContextProvider = server;

package/server.mjs

@@ -1,33 +1,11 @@
 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 });
-}
+import { default as default2 } from "./components/AdminBar/index.mjs";
+import { LocalePrefix } from "./hooks/useLink/interface.mjs";
+import { createServerContext } from "./lib/createServerContext/index.mjs";
+import { default as default3 } from "./providers/DraftMode/server.mjs";
 export {
-  AdminBar,
-  DraftModeServerContextProvider,
+  default2 as AdminBar,
+  default3 as DraftModeServerContextProvider,
+  LocalePrefix,
   createServerContext
 };

package/theme/AdminBar/index.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tailwindVariants = require("tailwind-variants");
+const adminBarContainer = tailwindVariants.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 = tailwindVariants.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 = tailwindVariants.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 = tailwindVariants.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 = tailwindVariants.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
+};
+exports.adminBarButton = adminBarButton;
+exports.adminBarContainer = adminBarContainer;
+exports.adminBarContent = adminBarContent;
+exports.adminBarError = adminBarError;
+exports.adminBarErrorTypography = adminBarErrorTypography;
+exports.adminBarTheme = adminBarTheme;

package/theme/AdminBar/index.mjs

@@ -0,0 +1,120 @@
+import { tv } from "tailwind-variants";
+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
+};
+export {
+  adminBarButton,
+  adminBarContainer,
+  adminBarContent,
+  adminBarError,
+  adminBarErrorTypography,
+  adminBarTheme
+};

package/theme/Button/index.js

@@ -0,0 +1,75 @@
+"use strict";
+const tailwindVariants = require("tailwind-variants");
+const button = tailwindVariants.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`
+    }
+  }
+});
+module.exports = button;

package/theme/Button/index.mjs

@@ -0,0 +1,76 @@
+import { tv } from "tailwind-variants";
+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`
+    }
+  }
+});
+export {
+  button as default
+};

package/theme/Filter/index.js

@@ -0,0 +1,72 @@
+"use strict";
+const tailwindVariants = require("tailwind-variants");
+const index$1 = require("../Button/index.js");
+const index = require("../Typography/index.js");
+const filterTagGroupWrapper = tailwindVariants.tv({
+  base: "w-full flex flex-col gap-2"
+});
+const filterTagGroupTags = tailwindVariants.tv({
+  base: "flex flex-col gap-2 max-w-[150px] items-center mx-auto"
+});
+const filterTagGroupLabel = tailwindVariants.tv({
+  extend: index,
+  defaultVariants: { size: "h4" }
+});
+const filterTagGroupDescription = tailwindVariants.tv({
+  extend: index,
+  base: "block",
+  defaultVariants: { size: "footnotes" }
+});
+const filterTagGroupErrorMessage = tailwindVariants.tv({
+  extend: index,
+  base: "block",
+  defaultVariants: { isError: true }
+});
+const filterTagGroupTagWrapper = tailwindVariants.tv({
+  base: [
+    index$1({ buttonStyle: "outline" }),
+    `
+      focus-visible:outline
+      focus-visible:outline-offset-2
+      focus-visible:outline-2
+      focus-visible:outline-black
+    `
+  ],
+  variants: {
+    isSelected: {
+      true: [index$1({ buttonStyle: "default" })]
+    },
+    isDisabled: {
+      true: "pointer-events-none opacity-30"
+    }
+  }
+});
+const filterTagGroupTagContainer = tailwindVariants.tv({
+  extend: index,
+  base: "flex items-center justify-center"
+});
+const filterPopoverButton = tailwindVariants.tv({
+  extend: index$1,
+  base: "!min-w-[200px]"
+});
+const filterPopoverPopover = tailwindVariants.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
+    }
+  }
+};
+module.exports = filterTheme;

package/theme/Filter/index.mjs

@@ -0,0 +1,73 @@
+import { tv } from "tailwind-variants";
+import button from "../Button/index.mjs";
+import typography from "../Typography/index.mjs";
+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
+    }
+  }
+};
+export {
+  filterTheme as default
+};