@melony/ui-kit 0.1.0

package/dist/chunk-7YJBGUKN.js

@@ -0,0 +1,41 @@
+import { createContext, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/context.tsx
+var MelonyUIContext = createContext(null);
+function MelonyUIProvider({ components, children }) {
+  return /* @__PURE__ */ jsx(MelonyUIContext.Provider, { value: { components }, children });
+}
+function useMelonyUI() {
+  const context = useContext(MelonyUIContext);
+  if (!context) {
+    throw new Error("useMelonyUI must be used within a MelonyUIProvider");
+  }
+  return context;
+}
+function MelonyRenderer({ node }) {
+  const { components } = useMelonyUI();
+  const { type, props, children } = node;
+  const Component = components[type];
+  if (!Component) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      color: "red",
+      fontStyle: "italic",
+      fontSize: "0.875rem",
+      padding: "0.5rem",
+      border: "1px dashed rgba(255, 0, 0, 0.5)",
+      borderRadius: "0.25rem",
+      backgroundColor: "rgba(255, 0, 0, 0.05)"
+    }, children: [
+      "[Unknown component: ",
+      type,
+      "]"
+    ] });
+  }
+  const renderedChildren = children?.map((child, i) => /* @__PURE__ */ jsx(MelonyRenderer, { node: child }, i));
+  return /* @__PURE__ */ jsx(Component, { ...props, children: renderedChildren });
+}
+
+export { MelonyRenderer, MelonyUIProvider, useMelonyUI };
+//# sourceMappingURL=chunk-7YJBGUKN.js.map
+//# sourceMappingURL=chunk-7YJBGUKN.js.map

package/dist/chunk-7YJBGUKN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.tsx","../src/Renderer.tsx"],"names":["jsx"],"mappings":";;;;AAWA,IAAM,eAAA,GAAkB,cAA2C,IAAI,CAAA;AAOhE,SAAS,gBAAA,CAAiB,EAAE,UAAA,EAAY,QAAA,EAAS,EAA0B;AAChF,EAAA,uBACE,GAAA,CAAC,gBAAgB,QAAA,EAAhB,EAAyB,OAAO,EAAE,UAAA,IAChC,QAAA,EACH,CAAA;AAEJ;AAEO,SAAS,WAAA,GAAc;AAC5B,EAAA,MAAM,OAAA,GAAU,WAAW,eAAe,CAAA;AAC1C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,oDAAoD,CAAA;AAAA,EACtE;AACA,EAAA,OAAO,OAAA;AACT;ACvBO,SAAS,cAAA,CAAe,EAAE,IAAA,EAAK,EAAwB;AAC5D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,WAAA,EAAY;AACnC,EAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAO,QAAA,EAAS,GAAI,IAAA;AAElC,EAAA,MAAM,SAAA,GAAY,WAAW,IAA+B,CAAA;AAE5D,EAAA,IAAI,CAAC,SAAA,EAAW;AACd,IAAA,uBACE,IAAA,CAAC,SAAI,KAAA,EAAO;AAAA,MACV,KAAA,EAAO,KAAA;AAAA,MACP,SAAA,EAAW,QAAA;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MACV,OAAA,EAAS,QAAA;AAAA,MACT,MAAA,EAAQ,iCAAA;AAAA,MACR,YAAA,EAAc,SAAA;AAAA,MACd,eAAA,EAAiB;AAAA,KACnB,EAAG,QAAA,EAAA;AAAA,MAAA,sBAAA;AAAA,MACoB,IAAA;AAAA,MAAK;AAAA,KAAA,EAC5B,CAAA;AAAA,EAEJ;AAGA,EAAA,MAAM,gBAAA,GAAmB,QAAA,EAAU,GAAA,CAAI,CAAC,KAAA,EAAO,CAAA,qBAC7CA,GAAAA,CAAC,cAAA,EAAA,EAAuB,IAAA,EAAM,KAAA,EAAA,EAAT,CAAgB,CACtC,CAAA;AAED,EAAA,uBAAOA,GAAAA,CAAC,SAAA,EAAA,EAAW,GAAI,OAAgB,QAAA,EAAA,gBAAA,EAAiB,CAAA;AAC1D","file":"chunk-7YJBGUKN.js","sourcesContent":["import React, { createContext, useContext, ReactNode } from \"react\";\nimport { UIContract } from \"./types\";\n\nexport type MelonyComponents = {\n  [K in keyof UIContract]: React.ComponentType<UIContract[K] & { children?: ReactNode }>;\n};\n\nexport interface MelonyUIContextValue {\n  components: Partial<MelonyComponents>;\n}\n\nconst MelonyUIContext = createContext<MelonyUIContextValue | null>(null);\n\nexport interface MelonyUIProviderProps {\n  components: Partial<MelonyComponents>;\n  children: ReactNode;\n}\n\nexport function MelonyUIProvider({ components, children }: MelonyUIProviderProps) {\n  return (\n    <MelonyUIContext.Provider value={{ components }}>\n      {children}\n    </MelonyUIContext.Provider>\n  );\n}\n\nexport function useMelonyUI() {\n  const context = useContext(MelonyUIContext);\n  if (!context) {\n    throw new Error(\"useMelonyUI must be used within a MelonyUIProvider\");\n  }\n  return context;\n}\n","'use client';\n\nimport { UINode } from \"./types\";\nimport { useMelonyUI } from \"./context\";\n\nexport interface MelonyRendererProps {\n  node: UINode;\n}\n\nexport function MelonyRenderer({ node }: MelonyRendererProps) {\n  const { components } = useMelonyUI();\n  const { type, props, children } = node;\n\n  const Component = components[type as keyof typeof components];\n\n  if (!Component) {\n    return (\n      <div style={{\n        color: \"red\",\n        fontStyle: \"italic\",\n        fontSize: \"0.875rem\",\n        padding: \"0.5rem\",\n        border: \"1px dashed rgba(255, 0, 0, 0.5)\",\n        borderRadius: \"0.25rem\",\n        backgroundColor: \"rgba(255, 0, 0, 0.05)\"\n      }}>\n        [Unknown component: {type}]\n      </div>\n    );\n  }\n\n  // Recursively render children\n  const renderedChildren = children?.map((child, i) => (\n    <MelonyRenderer key={i} node={child} />\n  ));\n\n  return <Component {...(props as any)}>{renderedChildren}</Component>;\n}\n"]}

package/dist/chunk-FAENZMHH.js

@@ -0,0 +1,40 @@
+// src/server.ts
+var ui = {
+  /**
+   * Creates a UI node.
+   */
+  node: (type, props = {}, children = []) => ({
+    type,
+    props,
+    children
+  }),
+  /**
+   * Wraps a UI node in an event.
+   */
+  event: (node) => ({
+    type: "ui",
+    data: node
+  }),
+  card: (props = {}, children = []) => ui.node("card", props, children),
+  button: (props, children = []) => ui.node("button", props, children),
+  text: (value, props = {}) => ui.node("text", { value, ...props }),
+  heading: (value, level = 1, props = {}) => ui.node("heading", { value, level, ...props }),
+  row: (props = {}, children = []) => ui.node("row", props, children),
+  col: (props = {}, children = []) => ui.node("col", props, children),
+  badge: (label, variant = "primary", props = {}) => ui.node("badge", { label, variant, ...props }),
+  input: (name, label, props = {}) => ui.node("input", { name, label, ...props }),
+  textarea: (name, label, props = {}) => ui.node("textarea", { name, label, ...props }),
+  select: (name, options, label, props = {}) => ui.node("select", { name, options, label, ...props }),
+  checkbox: (name, label, props = {}) => ui.node("checkbox", { name, label, ...props }),
+  form: (props = {}, children = []) => ui.node("form", props, children),
+  icon: (name, props = {}) => ui.node("icon", { name, ...props }),
+  image: (src, alt, props = {}) => ui.node("image", { src, alt, ...props }),
+  spacer: (props = {}) => ui.node("spacer", props),
+  divider: (props = {}) => ui.node("divider", props),
+  list: (props = {}, children = []) => ui.node("list", props, children),
+  listItem: (props = {}, children = []) => ui.node("listItem", props, children)
+};
+
+export { ui };
+//# sourceMappingURL=chunk-FAENZMHH.js.map
+//# sourceMappingURL=chunk-FAENZMHH.js.map

package/dist/chunk-FAENZMHH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/server.ts"],"names":[],"mappings":"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","file":"chunk-FAENZMHH.js","sourcesContent":["import { UIContract, UINode, UIEvent } from \"./types\";\n\nexport * from \"./types\";\n\n/**\n * Helper to create UI events in Melony actions.\n */\nexport const ui = {\n  /**\n   * Creates a UI node.\n   */\n  node: <T extends keyof UIContract>(\n    type: T,\n    props: UIContract[T] = {} as any,\n    children: UINode<any>[] = []\n  ): UINode<T> => ({\n    type,\n    props,\n    children,\n  }),\n\n  /**\n   * Wraps a UI node in an event.\n   */\n  event: (node: UINode): UIEvent => ({\n    type: \"ui\",\n    data: node,\n  }),\n\n  card: (props: UIContract[\"card\"] = {}, children: UINode[] = []) =>\n    ui.node(\"card\", props, children),\n\n  button: (props: UIContract[\"button\"], children: UINode[] = []) =>\n    ui.node(\"button\", props, children),\n\n  text: (value: string, props: Partial<UIContract[\"text\"]> = {}) =>\n    ui.node(\"text\", { value, ...props }),\n\n  heading: (value: string, level: UIContract[\"heading\"][\"level\"] = 1, props: Partial<UIContract[\"heading\"]> = {}) =>\n    ui.node(\"heading\", { value, level, ...props }),\n\n  row: (props: UIContract[\"row\"] = {}, children: UINode[] = []) =>\n    ui.node(\"row\", props, children),\n\n  col: (props: UIContract[\"col\"] = {}, children: UINode[] = []) =>\n    ui.node(\"col\", props, children),\n\n  badge: (label: string, variant: UIContract[\"badge\"][\"variant\"] = \"primary\", props: Partial<UIContract[\"badge\"]> = {}) =>\n    ui.node(\"badge\", { label, variant, ...props }),\n\n  input: (name: string, label?: string, props: Partial<UIContract[\"input\"]> = {}) =>\n    ui.node(\"input\", { name, label, ...props }),\n\n  textarea: (name: string, label?: string, props: Partial<UIContract[\"textarea\"]> = {}) =>\n    ui.node(\"textarea\", { name, label, ...props }),\n\n  select: (name: string, options: UIContract[\"select\"][\"options\"], label?: string, props: Partial<UIContract[\"select\"]> = {}) =>\n    ui.node(\"select\", { name, options, label, ...props }),\n\n  checkbox: (name: string, label?: string, props: Partial<UIContract[\"checkbox\"]> = {}) =>\n    ui.node(\"checkbox\", { name, label, ...props }),\n\n  form: (props: UIContract[\"form\"] = {}, children: UINode[] = []) =>\n    ui.node(\"form\", props, children),\n\n  icon: (name: string, props: Partial<UIContract[\"icon\"]> = {}) =>\n    ui.node(\"icon\", { name, ...props }),\n\n  image: (src: string, alt?: string, props: Partial<UIContract[\"image\"]> = {}) =>\n    ui.node(\"image\", { src, alt, ...props }),\n\n  spacer: (props: UIContract[\"spacer\"] = {}) =>\n    ui.node(\"spacer\", props),\n\n  divider: (props: UIContract[\"divider\"] = {}) =>\n    ui.node(\"divider\", props),\n\n  list: (props: UIContract[\"list\"] = {}, children: UINode[] = []) =>\n    ui.node(\"list\", props, children),\n\n  listItem: (props: UIContract[\"listItem\"] = {}, children: UINode[] = []) =>\n    ui.node(\"listItem\", props, children),\n};\n"]}

package/dist/client.d.ts

@@ -0,0 +1,27 @@
+import { j as UIContract, k as UINode } from './types-Dz90sNcc.js';
+export { a as UIAlign, e as UIColor, l as UIEvent, b as UIJustify, d as UIOrientation, i as UIRadius, h as UIShadow, U as UISize, f as UISpacing, g as UIWidth, c as UIWrap } from './types-Dz90sNcc.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+import 'melony';
+
+type MelonyComponents = {
+    [K in keyof UIContract]: React.ComponentType<UIContract[K] & {
+        children?: ReactNode;
+    }>;
+};
+interface MelonyUIContextValue {
+    components: Partial<MelonyComponents>;
+}
+interface MelonyUIProviderProps {
+    components: Partial<MelonyComponents>;
+    children: ReactNode;
+}
+declare function MelonyUIProvider({ components, children }: MelonyUIProviderProps): react_jsx_runtime.JSX.Element;
+declare function useMelonyUI(): MelonyUIContextValue;
+
+interface MelonyRendererProps {
+    node: UINode;
+}
+declare function MelonyRenderer({ node }: MelonyRendererProps): react_jsx_runtime.JSX.Element;
+
+export { type MelonyComponents, MelonyRenderer, type MelonyRendererProps, type MelonyUIContextValue, MelonyUIProvider, type MelonyUIProviderProps, UIContract, UINode, useMelonyUI };

package/dist/client.js

@@ -0,0 +1,3 @@
+export { MelonyRenderer, MelonyUIProvider, useMelonyUI } from './chunk-7YJBGUKN.js';
+//# sourceMappingURL=client.js.map
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"client.js"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { ui } from './server.js';
+export { a as UIAlign, e as UIColor, j as UIContract, l as UIEvent, b as UIJustify, k as UINode, d as UIOrientation, i as UIRadius, h as UIShadow, U as UISize, f as UISpacing, g as UIWidth, c as UIWrap } from './types-Dz90sNcc.js';
+export { MelonyComponents, MelonyRenderer, MelonyRendererProps, MelonyUIContextValue, MelonyUIProvider, MelonyUIProviderProps, useMelonyUI } from './client.js';
+import 'melony';
+import 'react/jsx-runtime';
+import 'react';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { MelonyRenderer, MelonyUIProvider, useMelonyUI } from './chunk-7YJBGUKN.js';
+export { ui } from './chunk-FAENZMHH.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/server.d.ts

@@ -0,0 +1,37 @@
+import { j as UIContract, k as UINode, l as UIEvent } from './types-Dz90sNcc.js';
+export { a as UIAlign, e as UIColor, b as UIJustify, d as UIOrientation, i as UIRadius, h as UIShadow, U as UISize, f as UISpacing, g as UIWidth, c as UIWrap } from './types-Dz90sNcc.js';
+import 'melony';
+
+/**
+ * Helper to create UI events in Melony actions.
+ */
+declare const ui: {
+    /**
+     * Creates a UI node.
+     */
+    node: <T extends keyof UIContract>(type: T, props?: UIContract[T], children?: UINode<any>[]) => UINode<T>;
+    /**
+     * Wraps a UI node in an event.
+     */
+    event: (node: UINode) => UIEvent;
+    card: (props?: UIContract["card"], children?: UINode[]) => UINode<"card">;
+    button: (props: UIContract["button"], children?: UINode[]) => UINode<"button">;
+    text: (value: string, props?: Partial<UIContract["text"]>) => UINode<"text">;
+    heading: (value: string, level?: UIContract["heading"]["level"], props?: Partial<UIContract["heading"]>) => UINode<"heading">;
+    row: (props?: UIContract["row"], children?: UINode[]) => UINode<"row">;
+    col: (props?: UIContract["col"], children?: UINode[]) => UINode<"col">;
+    badge: (label: string, variant?: UIContract["badge"]["variant"], props?: Partial<UIContract["badge"]>) => UINode<"badge">;
+    input: (name: string, label?: string, props?: Partial<UIContract["input"]>) => UINode<"input">;
+    textarea: (name: string, label?: string, props?: Partial<UIContract["textarea"]>) => UINode<"textarea">;
+    select: (name: string, options: UIContract["select"]["options"], label?: string, props?: Partial<UIContract["select"]>) => UINode<"select">;
+    checkbox: (name: string, label?: string, props?: Partial<UIContract["checkbox"]>) => UINode<"checkbox">;
+    form: (props?: UIContract["form"], children?: UINode[]) => UINode<"form">;
+    icon: (name: string, props?: Partial<UIContract["icon"]>) => UINode<"icon">;
+    image: (src: string, alt?: string, props?: Partial<UIContract["image"]>) => UINode<"image">;
+    spacer: (props?: UIContract["spacer"]) => UINode<"spacer">;
+    divider: (props?: UIContract["divider"]) => UINode<"divider">;
+    list: (props?: UIContract["list"], children?: UINode[]) => UINode<"list">;
+    listItem: (props?: UIContract["listItem"], children?: UINode[]) => UINode<"listItem">;
+};
+
+export { UIContract, UIEvent, UINode, ui };

package/dist/server.js

@@ -0,0 +1,3 @@
+export { ui } from './chunk-FAENZMHH.js';
+//# sourceMappingURL=server.js.map
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"server.js"}

package/dist/types-Dz90sNcc.d.ts

@@ -0,0 +1,269 @@
+import { Event } from 'melony';
+
+type UISize = "sm" | "md" | "lg";
+type UIAlign = "start" | "center" | "end" | "stretch";
+type UIJustify = "start" | "center" | "end" | "between" | "around";
+type UIWrap = "nowrap" | "wrap" | "wrap-reverse";
+type UIOrientation = "horizontal" | "vertical";
+type UIColor = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "background" | "foreground" | "muted" | "mutedForeground" | "border" | "transparent";
+type UISpacing = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+type UIWidth = "auto" | "full" | "min" | "max" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4";
+type UIShadow = "none" | "sm" | "md" | "lg" | "xl";
+type UIRadius = "none" | "sm" | "md" | "lg" | "full";
+/**
+ * UI Component Contracts
+ * This acts as the source of truth for the SDUI protocol.
+ */
+interface UIContract {
+    card: {
+        title?: string;
+        subtitle?: string;
+        background?: UIColor;
+        padding?: UISpacing;
+        radius?: UIRadius;
+        shadow?: UIShadow;
+        streaming?: boolean;
+        group?: boolean;
+    };
+    row: {
+        align?: UIAlign;
+        justify?: UIJustify;
+        wrap?: UIWrap;
+        gap?: UISpacing;
+        padding?: UISpacing;
+        width?: UIWidth;
+        group?: boolean;
+    };
+    col: {
+        align?: UIAlign;
+        justify?: UIJustify;
+        gap?: UISpacing;
+        width?: UIWidth;
+        height?: "auto" | "full";
+        padding?: UISpacing;
+        background?: UIColor;
+        radius?: UIRadius;
+        group?: boolean;
+    };
+    box: {
+        padding?: UISpacing;
+        margin?: UISpacing;
+        background?: UIColor;
+        border?: boolean;
+        borderColor?: UIColor;
+        radius?: UIRadius;
+        width?: UIWidth;
+        height?: "auto" | "full";
+        shadow?: UIShadow;
+        group?: boolean;
+    };
+    spacer: {
+        size?: UISpacing;
+        direction?: UIOrientation;
+    };
+    divider: {
+        orientation?: UIOrientation;
+        color?: UIColor;
+        margin?: UISpacing;
+    };
+    text: {
+        value: string;
+        size?: UISpacing;
+        weight?: "normal" | "medium" | "semibold" | "bold";
+        color?: UIColor;
+        align?: UIAlign;
+    };
+    heading: {
+        value: string;
+        level?: 1 | 2 | 3 | 4 | 5 | 6;
+        color?: UIColor;
+        align?: UIAlign;
+    };
+    badge: {
+        label: string;
+        variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "outline";
+        size?: UISize;
+    };
+    image: {
+        src: string;
+        alt?: string;
+        width?: UIWidth;
+        height?: string | number;
+        radius?: UIRadius;
+        objectFit?: "cover" | "contain" | "fill";
+        groupId?: string;
+    };
+    video: {
+        src: string;
+        poster?: string;
+        autoPlay?: boolean;
+        controls?: boolean;
+        loop?: boolean;
+        muted?: boolean;
+        aspectRatio?: "16/9" | "4/3" | "1/1" | "9/16";
+        width?: UIWidth;
+        height?: string | number;
+        radius?: UIRadius;
+    };
+    icon: {
+        name: string;
+        size?: UISize | number;
+        color?: UIColor;
+    };
+    chart: {
+        data: Array<{
+            label: string;
+            value: number;
+            color?: string;
+        }>;
+        chartType?: "bar" | "line" | "area" | "pie";
+        title?: string;
+        height?: number;
+        showValues?: boolean;
+        showGrid?: boolean;
+        showTooltips?: boolean;
+    };
+    list: {
+        padding?: UISpacing;
+        gap?: UISpacing;
+    };
+    listItem: {
+        onClickAction?: Event;
+        gap?: UISpacing;
+        padding?: UISpacing;
+        background?: UIColor;
+        radius?: UIRadius;
+    };
+    form: {
+        onSubmitAction?: Event | ((data: any) => Event);
+        gap?: UISpacing;
+    };
+    input: {
+        name: string;
+        label?: string;
+        placeholder?: string;
+        defaultValue?: string;
+        inputType?: "text" | "password" | "email" | "number" | "tel" | "url";
+        onChangeAction?: Event;
+        disabled?: boolean;
+        required?: boolean;
+        width?: UIWidth;
+    };
+    textarea: {
+        name: string;
+        label?: string;
+        placeholder?: string;
+        defaultValue?: string;
+        rows?: number;
+        onChangeAction?: Event;
+        disabled?: boolean;
+        required?: boolean;
+        width?: UIWidth;
+    };
+    select: {
+        name: string;
+        label?: string;
+        options: Array<{
+            label: string;
+            value: string;
+        }>;
+        defaultValue?: string;
+        placeholder?: string;
+        onChangeAction?: Event;
+        disabled?: boolean;
+        required?: boolean;
+        width?: UIWidth;
+    };
+    checkbox: {
+        name: string;
+        label?: string;
+        checked?: boolean;
+        onChangeAction?: Event;
+        disabled?: boolean;
+    };
+    hidden: {
+        name: string;
+        value: string;
+    };
+    radioGroup: {
+        name: string;
+        options: Array<{
+            label: string;
+            value: string;
+            disabled?: boolean;
+        }>;
+        label?: string;
+        defaultValue?: string;
+        orientation?: UIOrientation;
+        onChangeAction?: Event;
+        disabled?: boolean;
+    };
+    label: {
+        value: string;
+        htmlFor?: string;
+        required?: boolean;
+        size?: UISpacing;
+        color?: UIColor;
+    };
+    colorPicker: {
+        name: string;
+        label?: string;
+        defaultValue?: string;
+        onChangeAction?: Event;
+        disabled?: boolean;
+    };
+    upload: {
+        label?: string;
+        multiple?: boolean;
+        accept?: string;
+        initialFiles?: {
+            name: string;
+            url: string;
+        }[];
+        onUploadAction?: Event | ((data: any) => Event);
+        mode?: "append" | "replace";
+        disabled?: boolean;
+    };
+    button: {
+        type?: "button" | "submit" | "reset";
+        label: string;
+        variant?: "primary" | "secondary" | "success" | "danger" | "outline" | "ghost" | "link";
+        size?: UISize;
+        disabled?: boolean;
+        width?: UIWidth;
+        onClickAction?: Event;
+    };
+    float: {
+        position?: "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center" | "center" | "left-center" | "right-center";
+        offsetX?: UISpacing;
+        offsetY?: UISpacing;
+        showOnHover?: boolean;
+    };
+    dropdown: {
+        items: Array<{
+            label: string;
+            icon?: string;
+            onClickAction?: Event;
+        }>;
+        className?: string;
+        triggerClassName?: string;
+    };
+    thread: {
+        placeholder?: string;
+        messages?: any[];
+        autoFocus?: boolean;
+    };
+}
+type UINode<T extends keyof UIContract = keyof UIContract> = {
+    type: T;
+    props?: UIContract[T];
+    children?: UINode<any>[];
+};
+/**
+ * Standard UI event type for Melony.
+ */
+interface UIEvent extends Event<UINode> {
+    type: "ui";
+}
+
+export type { UISize as U, UIAlign as a, UIJustify as b, UIWrap as c, UIOrientation as d, UIColor as e, UISpacing as f, UIWidth as g, UIShadow as h, UIRadius as i, UIContract as j, UINode as k, UIEvent as l };

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@melony/ui-kit",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js",
+      "default": "./dist/server.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "default": "./dist/client.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "melony": "0.2.3"
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.5.4",
+    "rimraf": "^5.0.10",
+    "@types/node": "^20.14.10",
+    "melony": "0.2.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rimraf dist",
+    "typecheck": "tsc --noEmit"
+  }
+}