diff --git a/src/components/lume/LumeIdentity/LumeIdentity.tsx b/src/components/lume/LumeIdentity/LumeIdentity.tsx
index 1cb078f..b9a06fa 100644
--- a/src/components/lume/LumeIdentity/LumeIdentity.tsx
+++ b/src/components/lume/LumeIdentity/LumeIdentity.tsx
@@ -1,3 +1,4 @@
+import React, { ReactElement, type FC, JSXElementConstructor, ReactPortal } from "react";
import { Button } from "../../ui/button";
import {
SwitchableComponent,
@@ -8,7 +9,6 @@ import * as ComponentList from "./components";
import { LazyMotion, domAnimation } from "framer-motion";
import * as Dialog from "@radix-ui/react-dialog";
import LumeLogoBg from "./LumeLogoBg";
-import type { FC } from "react";
const LumeIdentity: FC = () => {
const { visibleComponent, setVisibleComponent } = useSwitchableComponent(
@@ -106,14 +106,35 @@ const LumeIdentity: FC = () => {
// contrast is not very good, as im testing on a train with a lot of sunlight
// hitting my screen, it is almost impossible to see whats happening the outline
// buttons have no contrast
-export default function Wrapped() {
+export const LumeIdentityTrigger = Dialog.Trigger;
+LumeIdentityTrigger.displayName = "LumeIdentityTrigger";
+export default function Wrapped({ children }: React.PropsWithChildren) {
+ const DefaultTrigger = () => (
+
+
+
+ );
+ const GivenTrigger = React.Children.toArray(children)
+ .filter((c) => {
+ if(typeof c === 'object'){
+ //@ts-expect-error -- I dont know what the type of this should be, i just know that this works
+ return c.type?.displayName === "LumeIdentityTrigger"
+ }
+
+ return false
+ })
+ .at(0);
+ const Trigger = GivenTrigger ? () => GivenTrigger : DefaultTrigger;
+
+ console.log({
+ Trigger, GivenTrigger
+ })
+
return (
-
-
-
+
{/* @ditorodev: `left-[calc(50%-192px)] top-[calc(50vh-174px)]` these two are me being dumb and lazy, would be cool to fix with proper centering */}
diff --git a/src/index.ts b/src/index.ts
index cb41247..792e30c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,5 +3,5 @@ export {
useLume,
} from "./components/lume/LumeProvider";
export { default as LumeDashboard } from "./components/lume/LumeDashboard/LumeDashboard";
-export { default as LumeIdentity } from "./components/lume/LumeIdentity/LumeIdentity";
+export { default as LumeIdentity, LumeIdentityTrigger } from "./components/lume/LumeIdentity/LumeIdentity";
import "../styles/globals.css";