@melony/ui-kit 0.1.26 → 0.1.28

package/dist/{chunk-X7KTTWFW.js → chunk-3JCAOTZB.js}

@@ -38,5 +38,5 @@ var ui = {
 };
 
 export { ui };
-//# sourceMappingURL=chunk-X7KTTWFW.js.map
-//# sourceMappingURL=chunk-X7KTTWFW.js.map
+//# sourceMappingURL=chunk-3JCAOTZB.js.map
+//# sourceMappingURL=chunk-3JCAOTZB.js.map

package/dist/{chunk-X7KTTWFW.js.map → chunk-3JCAOTZB.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/server.ts"],"names":[],"mappings":";AAOO,IAAM,EAAA,GAAK;AAAA;AAAA;AAAA;AAAA,EAIhB,IAAA,EAAM,CACJ,IAAA,EACA,KAAA,GAAuB,EAAC,EACxB,QAAA,GAA0B,EAAC,MACZ;AAAA,IACf,IAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACF,CAAA;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO,CAAC,IAAA,MAA2B;AAAA,IACjC,IAAA,EAAM,IAAA;AAAA,IACN,IAAA,EAAM;AAAA,GACR,CAAA;AAAA,EAEA,MAAA,EAAQ,CAAC,KAAA,EAA6B,QAAA,GAAqB,OACzD,EAAA,CAAG,IAAA,CAAK,QAAA,EAAU,KAAA,EAAO,QAAQ,CAAA;AAAA,EAEnC,IAAA,EAAM,CAAC,KAAA,EAAe,KAAA,GAAqC,EAAC,KAC1D,EAAA,CAAG,IAAA,CAAK,MAAA,EAAQ,EAAE,KAAA,EAAO,GAAG,OAAO,CAAA;AAAA,EAErC,QAAA,EAAU,CAAC,KAAA,EAAe,KAAA,GAAyC,EAAC,KAClE,EAAA,CAAG,IAAA,CAAK,UAAA,EAAY,EAAE,KAAA,EAAO,GAAG,OAAO,CAAA;AAAA,EAEzC,SAAS,CAAC,KAAA,EAAe,KAAA,GAAwC,CAAA,EAAG,QAAwC,EAAC,KAC3G,EAAA,CAAG,IAAA,CAAK,WAAW,EAAE,KAAA,EAAO,KAAA,EAAO,GAAG,OAAO,CAAA;AAAA,EAE/C,GAAA,EAAK,CAAC,KAAA,GAA2B,EAAC,EAAG,QAAA,GAAqB,EAAC,KACzD,EAAA,CAAG,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO,QAAQ,CAAA;AAAA,EAEhC,GAAA,EAAK,CAAC,KAAA,GAA2B,EAAC,EAAG,QAAA,GAAqB,EAAC,KACzD,EAAA,CAAG,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO,QAAQ,CAAA;AAAA,EAEhC,GAAA,EAAK,CAAC,KAAA,GAA2B,EAAC,EAAG,QAAA,GAAqB,EAAC,KACzD,EAAA,CAAG,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO,QAAQ,CAAA;AAAA,EAEhC,KAAA,EAAO,CAAC,IAAA,EAAc,KAAA,EAAgB,QAAsC,EAAC,KAC3E,EAAA,CAAG,IAAA,CAAK,SAAS,EAAE,IAAA,EAAM,KAAA,EAAO,GAAG,OAAO,CAAA;AAAA,EAE5C,QAAA,EAAU,CAAC,IAAA,EAAc,KAAA,GAAyC,EAAC,KACjE,EAAA,CAAG,IAAA,CAAK,UAAA,EAAY,EAAE,IAAA,EAAM,GAAG,OAAO,CAAA;AAAA,EAExC,QAAQ,CAAC,IAAA,EAAc,OAAA,EAA0C,KAAA,EAAgB,QAAuC,EAAC,KACvH,EAAA,CAAG,IAAA,CAAK,UAAU,EAAE,IAAA,EAAM,SAAS,KAAA,EAAO,GAAG,OAAO,CAAA;AAAA,EAEtD,QAAA,EAAU,CAAC,IAAA,EAAc,KAAA,EAAgB,QAAyC,EAAC,KACjF,EAAA,CAAG,IAAA,CAAK,YAAY,EAAE,IAAA,EAAM,KAAA,EAAO,GAAG,OAAO,CAAA;AAAA,EAE/C,IAAA,EAAM,CAAC,KAAA,GAA4B,EAAC,EAAG,QAAA,GAAqB,EAAC,KAC3D,EAAA,CAAG,IAAA,CAAK,MAAA,EAAQ,KAAA,EAAO,QAAQ,CAAA;AAAA,EAEjC,IAAA,EAAM,CAAC,IAAA,EAAc,KAAA,GAAqC,EAAC,KACzD,EAAA,CAAG,IAAA,CAAK,MAAA,EAAQ,EAAE,IAAA,EAAM,GAAG,OAAO,CAAA;AAAA,EAEpC,KAAA,EAAO,CAAC,GAAA,EAAa,GAAA,EAAc,QAAsC,EAAC,KACxE,EAAA,CAAG,IAAA,CAAK,SAAS,EAAE,GAAA,EAAK,GAAA,EAAK,GAAG,OAAO,CAAA;AAAA,EAEzC,MAAA,EAAQ,CAAC,KAAA,GAA8B,OACrC,EAAA,CAAG,IAAA,CAAK,UAAU,KAAK,CAAA;AAAA,EAEzB,OAAA,EAAS,CAAC,KAAA,GAA+B,OACvC,EAAA,CAAG,IAAA,CAAK,WAAW,KAAK,CAAA;AAAA,EAE1B,OAAA,EAAS,CAAC,KAAA,GAA+B,EAAC,EAAG,QAAA,GAAqB,EAAC,KACjE,EAAA,CAAG,IAAA,CAAK,SAAA,EAAW,KAAA,EAAO,QAAQ,CAAA;AAAA,EAEpC,KAAA,EAAO,CAAC,KAAA,GAA6B,EAAC,EAAG,QAAA,GAAqB,EAAC,KAC7D,EAAA,CAAG,IAAA,CAAK,OAAA,EAAS,KAAA,EAAO,QAAQ,CAAA;AAAA,EAClC,MAAA,EAAQ,CAAC,KAAA,GAA8B,EAAC,EAAG,QAAA,GAAqB,EAAC,KAC/D,EAAA,CAAG,IAAA,CAAK,QAAA,EAAU,KAAA,EAAO,QAAQ,CAAA;AAAA,EACnC,aAAA,EAAe,CAAC,SAAA,EAAmB,KAAA,GAA8C,EAAC,KAChF,EAAA,CAAG,IAAA,CAAK,eAAA,EAAiB,EAAE,SAAA,EAAW,GAAG,OAAO;AACpD","file":"chunk-X7KTTWFW.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  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  markdown: (value: string, props: Partial<UIContract[\"markdown\"]> = {}) =>\n    ui.node(\"markdown\", { 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  box: (props: UIContract[\"box\"] = {}, children: UINode[] = []) =>\n    ui.node(\"box\", props, children),\n\n  input: (name: string, label?: string, props: Partial<UIContract[\"input\"]> = {}) =>\n    ui.node(\"input\", { name, label, ...props }),\n\n  textarea: (name: string, props: Partial<UIContract[\"textarea\"]> = {}) =>\n    ui.node(\"textarea\", { name, ...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  popover: (props: UIContract[\"popover\"] = {}, children: UINode[] = []) =>\n    ui.node(\"popover\", props, children),\n\n  float: (props: UIContract[\"float\"] = {}, children: UINode[] = []) =>\n    ui.node(\"float\", props, children),\n  sticky: (props: UIContract[\"sticky\"] = {}, children: UINode[] = []) =>\n    ui.node(\"sticky\", props, children),\n  streamingText: (eventType: string, props: Partial<UIContract[\"streamingText\"]> = {}) =>\n    ui.node(\"streamingText\", { eventType, ...props }),\n};\n"]}
+{"version":3,"sources":["../src/server.ts"],"names":[],"mappings":"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","file":"chunk-3JCAOTZB.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  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  markdown: (value: string, props: Partial<UIContract[\"markdown\"]> = {}) =>\n    ui.node(\"markdown\", { 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  box: (props: UIContract[\"box\"] = {}, children: UINode[] = []) =>\n    ui.node(\"box\", props, children),\n\n  input: (name: string, label?: string, props: Partial<UIContract[\"input\"]> = {}) =>\n    ui.node(\"input\", { name, label, ...props }),\n\n  textarea: (name: string, props: Partial<UIContract[\"textarea\"]> = {}) =>\n    ui.node(\"textarea\", { name, ...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  popover: (props: UIContract[\"popover\"] = {}, children: UINode[] = []) =>\n    ui.node(\"popover\", props, children),\n\n  float: (props: UIContract[\"float\"] = {}, children: UINode[] = []) =>\n    ui.node(\"float\", props, children),\n  sticky: (props: UIContract[\"sticky\"] = {}, children: UINode[] = []) =>\n    ui.node(\"sticky\", props, children),\n  streamingText: (eventType: string, props: Partial<UIContract[\"streamingText\"]> = {}) =>\n    ui.node(\"streamingText\", { eventType, ...props }),\n};\n"]}

package/dist/client.d.ts

@@ -1,5 +1,5 @@
-import { j as UIContract, k as UINode } from './types-BZ5194td.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-BZ5194td.js';
+import { j as UIContract, k as UINode } from './types-tSkCU6PC.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-tSkCU6PC.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode } from 'react';
 import 'melony';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 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-BZ5194td.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-tSkCU6PC.js';
 export { MelonyComponents, MelonyRenderer, MelonyRendererProps, MelonyUIContextValue, MelonyUIProvider, MelonyUIProviderProps, useMelonyUI } from './client.js';
 import 'melony';
 import 'react/jsx-runtime';

package/dist/index.js

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

package/dist/server.d.ts

@@ -1,5 +1,5 @@
-import { j as UIContract, k as UINode, l as UIEvent } from './types-BZ5194td.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-BZ5194td.js';
+import { j as UIContract, k as UINode, l as UIEvent } from './types-tSkCU6PC.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-tSkCU6PC.js';
 import 'melony';
 
 /**

package/dist/server.js

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

package/dist/{types-BZ5194td.d.ts → types-tSkCU6PC.d.ts}

@@ -16,6 +16,7 @@ type UIRadius = "none" | "sm" | "md" | "lg" | "full" | (string & {});
  */
 interface UIContract {
     row: {
+        id?: string;
         align?: UIAlign;
         justify?: UIJustify;
         wrap?: UIWrap;
@@ -28,6 +29,7 @@ interface UIContract {
         overflow?: "hidden" | "visible" | "scroll" | "auto";
     };
     col: {
+        id?: string;
         align?: UIAlign;
         justify?: UIJustify;
         gap?: UISpacing;
@@ -39,9 +41,10 @@ interface UIContract {
         group?: boolean;
         flex?: number;
         overflow?: "hidden" | "visible" | "scroll" | "auto";
-        maxWidth?: number;
+        maxWidth?: number | string;
     };
     box: {
+        id?: string;
         padding?: UISpacing;
         paddingVertical?: UISpacing;
         paddingHorizontal?: UISpacing;
@@ -53,7 +56,7 @@ interface UIContract {
         borderColor?: UIColor;
         radius?: UIRadius;
         width?: UIWidth;
-        maxWidth?: number;
+        maxWidth?: number | string;
         height?: "auto" | "full";
         shadow?: UIShadow;
         group?: boolean;
@@ -62,15 +65,18 @@ interface UIContract {
         onClickAction?: Event;
     };
     spacer: {
+        id?: string;
         size?: UISpacing;
         direction?: UIOrientation;
     };
     divider: {
+        id?: string;
         orientation?: UIOrientation;
         color?: UIColor;
         margin?: UISpacing;
     };
     text: {
+        id?: string;
         value: string;
         size?: UISpacing;
         weight?: "normal" | "medium" | "semibold" | "bold";
@@ -79,12 +85,14 @@ interface UIContract {
         className?: string;
     };
     heading: {
+        id?: string;
         value: string;
         level?: 1 | 2 | 3 | 4 | 5 | 6;
         color?: UIColor;
         align?: UIAlign;
     };
     markdown: {
+        id?: string;
         value: string;
         size?: UISpacing;
         color?: UIColor;
@@ -92,6 +100,7 @@ interface UIContract {
         className?: string;
     };
     image: {
+        id?: string;
         src: string;
         alt?: string;
         width?: UIWidth;
@@ -100,6 +109,7 @@ interface UIContract {
         objectFit?: "cover" | "contain" | "fill";
     };
     video: {
+        id?: string;
         src: string;
         poster?: string;
         autoPlay?: boolean;
@@ -112,15 +122,18 @@ interface UIContract {
         radius?: UIRadius;
     };
     icon: {
+        id?: string;
         name: string;
         size?: UISize | number;
         color?: UIColor;
     };
     form: {
+        id?: string;
         onSubmitAction?: Event | ((data: any) => Event);
         gap?: UISpacing;
     };
     input: {
+        id?: string;
         name: string;
         label?: string;
         placeholder?: string;
@@ -132,11 +145,14 @@ interface UIContract {
         width?: UIWidth;
     };
     textarea: {
+        id?: string;
         name: string;
         placeholder?: string;
         defaultValue?: string;
         rows?: number;
         onChangeAction?: Event;
+        onSubmitAction?: Event;
+        submitOnEnter?: boolean;
         disabled?: boolean;
         required?: boolean;
         width?: UIWidth;
@@ -146,6 +162,7 @@ interface UIContract {
         radius?: UIRadius;
     };
     select: {
+        id?: string;
         name: string;
         label?: string;
         options: Array<{
@@ -160,6 +177,7 @@ interface UIContract {
         width?: UIWidth;
     };
     checkbox: {
+        id?: string;
         name: string;
         label?: string;
         checked?: boolean;
@@ -167,10 +185,12 @@ interface UIContract {
         disabled?: boolean;
     };
     hidden: {
+        id?: string;
         name: string;
         value: string;
     };
     radioGroup: {
+        id?: string;
         name: string;
         options: Array<{
             label: string;
@@ -184,6 +204,7 @@ interface UIContract {
         disabled?: boolean;
     };
     label: {
+        id?: string;
         value: string;
         htmlFor?: string;
         required?: boolean;
@@ -191,6 +212,7 @@ interface UIContract {
         color?: UIColor;
     };
     colorPicker: {
+        id?: string;
         name: string;
         label?: string;
         defaultValue?: string;
@@ -198,6 +220,7 @@ interface UIContract {
         disabled?: boolean;
     };
     upload: {
+        id?: string;
         label?: string;
         multiple?: boolean;
         accept?: string;
@@ -210,6 +233,7 @@ interface UIContract {
         disabled?: boolean;
     };
     button: {
+        id?: string;
         type?: "button" | "submit" | "reset";
         variant?: "primary" | "secondary" | "success" | "danger" | "outline" | "ghost" | "link";
         size?: UISize;
@@ -220,6 +244,7 @@ interface UIContract {
         truncate?: boolean;
     };
     popover: {
+        id?: string;
         side?: "top" | "right" | "bottom" | "left";
         align?: "start" | "center" | "end";
         sideOffset?: number;
@@ -228,12 +253,14 @@ interface UIContract {
         trigger?: UINode;
     };
     float: {
+        id?: string;
         position?: "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center" | "center" | "left-center" | "right-center";
         offsetX?: UISpacing;
         offsetY?: UISpacing;
         showOnHover?: boolean;
     };
     sticky: {
+        id?: string;
         top?: UISpacing | number;
         bottom?: UISpacing | number;
         left?: UISpacing | number;
@@ -242,9 +269,10 @@ interface UIContract {
         background?: UIColor;
         padding?: UISpacing;
         width?: UIWidth;
-        maxWidth?: number;
+        maxWidth?: number | string;
     };
     streamingText: {
+        id?: string;
         eventType: string;
         size?: UISpacing;
         weight?: "normal" | "medium" | "semibold" | "bold";
@@ -254,11 +282,13 @@ interface UIContract {
         markdown?: boolean;
     };
     badge: {
+        id?: string;
         label: string;
         variant?: "primary" | "secondary" | "danger" | "success" | "warning" | "outline";
         size?: UISize;
     };
     card: {
+        id?: string;
         title?: string;
         subtitle?: string;
         background?: UIColor;
@@ -267,6 +297,7 @@ interface UIContract {
         shadow?: UIShadow;
     };
     chart: {
+        id?: string;
         data: Array<{
             label: string;
             value: number;
@@ -280,6 +311,7 @@ interface UIContract {
         showTooltips?: boolean;
     };
     dropdown: {
+        id?: string;
         items?: Array<{
             label: string;
             icon?: string;
@@ -287,11 +319,13 @@ interface UIContract {
         }>;
     };
     list: {
+        id?: string;
         padding?: UISpacing;
         gap?: UISpacing;
         width?: UIWidth;
     };
     listItem: {
+        id?: string;
         onClickAction?: Event;
         gap?: UISpacing;
         padding?: UISpacing;
@@ -301,6 +335,7 @@ interface UIContract {
         truncate?: boolean;
     };
     thread: {
+        id?: string;
         placeholder?: string;
         messages?: Array<{
             role: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melony/ui-kit",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",