@celestia-island/hikari 0.55.80 → 0.55.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.80",
+  "version": "0.55.81",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAdminTablePage.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, type PropType } from "vue";
+import { defineComponent, type Component, type PropType } from "vue";
 import { HAlert, HCard, HEmptyState, HSpinner, HTable, useI18n } from "@celestia-island/hikari";
 import { HkPageHeader } from "./HkPageHeader";
 
@@ -34,7 +34,7 @@ export const HkAdminTablePage = defineComponent({
     /** Forwarded to the page header. */
     subtitle: { type: String, default: undefined },
     /** Forwarded to the page header. */
-    icon: { type: Object, default: undefined },
+    icon: { type: [Object, Function] as PropType<Component>, default: undefined },
     /** Compact page header variant. */
     dense: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },

package/src/components/HkCardList.tsx

@@ -70,7 +70,7 @@ export const HkListRow = defineComponent({
   name: "HkListRow",
   props: {
     /** Leading icon — rendered through the standard HkIconChip. */
-    icon: { type: Object as PropType<Component>, default: undefined },
+    icon: { type: [Object, Function] as PropType<Component>, default: undefined },
     iconTone: { type: String as PropType<StatTone>, default: "primary" },
     title: { type: String, default: undefined },
     subtitle: { type: String, default: undefined },

package/src/components/HkIconChip.tsx

@@ -23,7 +23,7 @@ export const HkIconChip = defineComponent({
   name: "HkIconChip",
   props: {
     /** Icon component (lucide-vue-next style). */
-    icon: { type: Object as PropType<Component>, required: true },
+    icon: { type: [Object, Function] as PropType<Component>, required: true },
     /** Tone drives both the tint background and the glyph ink. */
     tone: { type: String as PropType<StatTone>, default: "primary" },
     /** sm = 24px box / 13px glyph, md = 28px box / 15px glyph. */

package/src/components/HkIconPropFunction.test.tsx

@@ -0,0 +1,48 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h } from "vue";
+
+import { HkIconChip } from "./HkIconChip";
+import { HkPageHeader } from "./HkPageHeader";
+import { HkSectionHeader } from "./HkSectionHeader";
+import { HkStatCard } from "./HkStatCard";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+/** A lucide-vue-next style icon: a plain functional component. */
+const FnIcon = (_props: { size?: number }, _ctx: unknown) =>
+  h("svg", { "data-fn-icon": "" });
+
+const FnIconComponent = defineComponent({
+  name: "FnIcon",
+  setup: () => () => h("svg", { "data-fn-icon": "" }),
+});
+
+describe("icon props accept functional components", () => {
+  it("renders lucide-style functional icons without the Invalid-prop warning", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    mount(h(HkIconChip, { icon: FnIconComponent as never }));
+    mount(h(HkStatCard, { variant: "chip", value: 1, label: "L", icon: FnIconComponent as never }));
+    mount(h(HkPageHeader, { title: "T", icon: FnIconComponent as never }));
+    mount(h(HkSectionHeader, { title: "T", icon: FnIconComponent as never }));
+    const invalid = warn.mock.calls.filter((c) => String(c[0]).includes("Invalid prop"));
+    expect(invalid).toEqual([]);
+    expect(document.querySelectorAll("[data-fn-icon]")).toBeTruthy();
+    warn.mockRestore();
+  });
+});

package/src/components/HkPageHeader.tsx

@@ -22,7 +22,7 @@ export const HkPageHeader = defineComponent({
     title: { type: String, required: true },
     subtitle: { type: String, default: undefined },
     /** Leading icon component (rendered before the title text). */
-    icon: { type: Object as PropType<Component>, default: undefined },
+    icon: { type: [Object, Function] as PropType<Component>, default: undefined },
     /** Compact variant for dense pages (smaller title, tighter spacing). */
     dense: { type: Boolean, default: false },
   },

package/src/components/HkSectionHeader.tsx

@@ -34,7 +34,7 @@ export const HkSectionHeader = defineComponent({
     /** One-line description rendered under the heading. */
     description: { type: String, default: undefined },
     /** Leading icon component. */
-    icon: { type: Object as PropType<Component>, default: undefined },
+    icon: { type: [Object, Function] as PropType<Component>, default: undefined },
     /** Trailing count badge (e.g. "12 total") rendered beside the title. */
     count: { type: String, default: undefined },
     variant: { type: String as PropType<SectionHeaderVariant>, default: "default" },

package/src/components/HkStatCard.tsx

@@ -77,7 +77,7 @@ export const HkStatCard = defineComponent({
     /** Whole-card click (drill-through to the owning page). */
     clickable: { type: Boolean, default: false },
     /** chip/ring: leading icon component (lucide-vue-next style). */
-    icon: { type: Object as PropType<Component>, default: undefined },
+    icon: { type: [Object, Function] as PropType<Component>, default: undefined },
     /** ring/bar: gauge percentage, clamped to 0–100. */
     pct: { type: Number, default: undefined },
     /** ring: sub-label rendered inside the ring under the value (the unit). */