@phila/phila-ui-radio 0.0.16-beta.0 → 0.1.0-beta.0

package/README.md

@@ -1,75 +1,103 @@
 # Radio Component
 
-A simple, customizable Vue 3. Radio component built with TypeScript and Vite.
-A radio input component for Phila UI.
+<!-- status-badge-start -->
 
-## Features
+### Component Status
 
-- 🎯 TypeScript support with full type definitions
+| Component  | Status                                                      |
+| ---------- | ----------------------------------------------------------- |
+| Radio      | ![Stable](https://img.shields.io/badge/-Stable-brightgreen) |
+| RadioGroup | ![Stable](https://img.shields.io/badge/-Stable-brightgreen) |
+
+<!-- status-badge-end -->
+
+Single-select radio button components for Phila UI. Use `Radio` for a standalone radio button, or `RadioGroup` to manage a set of related options with a shared label, description, and error state.
 
 ## Installation
 
 ```bash
-npm install @phila/phila-ui-radio
-# or
-yarn add @phila/phila-ui-radio
-# or
 pnpm add @phila/phila-ui-radio
 ```
 
 ## Usage
 
+### RadioGroup (recommended)
+
 ```vue
 <script setup lang="ts">
-import { Radio } from "@phila/phila-ui-radio";
+import { RadioGroup } from "@phila/phila-ui-radio";
+import { ref } from "vue";
+
+const selected = ref("");
+const choices = [
+  { text: "Option A", value: "a" },
+  { text: "Option B", value: "b" },
+  { text: "Option C", value: "c" },
+];
 </script>
-<template>...Add basic component template here...</template>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
-
-| ...Add props here...
-
-## Events
-
-| Event | Payload | Description |
-| ----- | ------- | ----------- |
-
-| ...Add events here...
-
-## Examples
 
-...Add examples here...
+<template>
+  <RadioGroup groupLabel="Choose an option" description="Select exactly one." :choices="choices" v-model="selected" />
+</template>
+```
 
-## Development
+### Radio (standalone)
 
-### Install Dependencies
+```vue
+<script setup lang="ts">
+import { Radio } from "@phila/phila-ui-radio";
+</script>
 
-```bash
-pnpm install
+<template>
+  <Radio name="group" value="a" text="Option A" />
+</template>
 ```
 
-### Run Demo
+## Radio Props
+
+| Prop        | Type      | Default | Description                                                              |
+| ----------- | --------- | ------- | ------------------------------------------------------------------------ |
+| `text`      | `string`  | —       | Label text displayed next to the radio button                            |
+| `value`     | `string`  | —       | The value submitted when this radio is selected                          |
+| `name`      | `string`  | —       | Groups radio buttons together (use the same name for mutual exclusivity) |
+| `disabled`  | `boolean` | `false` | Disables the radio button                                                |
+| `error`     | `boolean` | `false` | Applies error styling                                                    |
+| `className` | `string`  | —       | Additional CSS classes                                                   |
+
+## RadioGroup Props
+
+| Prop           | Type                                | Default | Description                                                |
+| -------------- | ----------------------------------- | ------- | ---------------------------------------------------------- |
+| `groupLabel`   | `string`                            | —       | Label displayed above the group                            |
+| `description`  | `string`                            | —       | Optional helper text below the label                       |
+| `choices`      | `{ text: string, value: string }[]` | —       | Array of options to render                                 |
+| `modelValue`   | `string`                            | —       | Currently selected value (use with `v-model`)              |
+| `error`        | `boolean`                           | `false` | Applies error styling to the group                         |
+| `errorMessage` | `string`                            | —       | Error message shown below the options when `error` is true |
+| `disabled`     | `boolean`                           | `false` | Disables all radio buttons in the group                    |
+| `className`    | `string`                            | —       | Additional CSS classes                                     |
 
-```bash
-pnpm dev
-```
+## Events
 
-### Build Library
+### Radio
 
-```bash
-pnpm build
-```
+| Event               | Payload  | Description                        |
+| ------------------- | -------- | ---------------------------------- |
+| `update:modelValue` | `string` | Emitted when the radio is selected |
 
-### Type Check
+### RadioGroup
 
-```bash
-pnpm type-check
-```
+| Event               | Payload  | Description                              |
+| ------------------- | -------- | ---------------------------------------- |
+| `update:modelValue` | `string` | Emitted when the selected option changes |
 
-## License
+## Visual States
 
-MIT
+| State    | Description                              |
+| -------- | ---------------------------------------- |
+| Default  | Gray border, white background            |
+| Hover    | Primary-colored border (2px)             |
+| Selected | Primary fill with white center dot       |
+| Focus    | Primary-colored outline around the label |
+| Error    | Error-colored border (2px)               |
+| Disabled | Muted border and text, not interactive   |

package/dist/Radio.vue.d.ts

@@ -1,4 +1,8 @@
 import { RadioProps } from './index';
-declare const _default: import('vue').DefineComponent<RadioProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<RadioProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+declare const _default: import('vue').DefineComponent<RadioProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<RadioProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
 export default _default;
 //# sourceMappingURL=Radio.vue.d.ts.map

package/dist/Radio.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.vue.d.ts","sourceRoot":"","sources":["../src/Radio.vue"],"names":[],"mappings":"AAGA;AAgCA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;;AA+D1C,wBASG"}
+{"version":3,"file":"Radio.vue.d.ts","sourceRoot":"","sources":["../src/Radio.vue"],"names":[],"mappings":"AA0IA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;AAmH1C,wBASG"}

package/dist/RadioGroup.vue.d.ts

@@ -0,0 +1,8 @@
+import { RadioGroupProps } from './index';
+declare const _default: import('vue').DefineComponent<RadioGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<RadioGroupProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=RadioGroup.vue.d.ts.map

package/dist/RadioGroup.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.vue.d.ts","sourceRoot":"","sources":["../src/RadioGroup.vue"],"names":[],"mappings":"AA+GA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;;;;;;AAyJ/C,wBASG"}

package/dist/index.css

@@ -0,0 +1 @@
+.philaRadio[data-v-90692348]{display:flex;width:fit-content;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;gap:var(--spacing-s, .75rem)}.philaRadio input[data-v-90692348]{opacity:0;cursor:pointer;height:0;width:0}.radio-svg[data-v-90692348]{flex-shrink:0;overflow:visible}.radio-bg[data-v-90692348]{fill:var(--Schemes-Surface-Bright, #fafafa);stroke:var(--Schemes-Border, #cfcfcf);stroke-width:1}.radio-dot[data-v-90692348]{fill:none}.philaRadio:has(input:checked) .radio-svg .radio-bg[data-v-90692348]{fill:var(--Schemes-Primary, #0f33f5);stroke:var(--Schemes-Primary, #0f33f5)}.philaRadio:has(input:checked) .radio-svg .radio-dot[data-v-90692348]{fill:var(--Schemes-Surface-Bright, #fafafa)}.philaRadio[data-v-90692348]:focus-within{outline:2px solid var(--Schemes-Primary, #0f33f5);outline-offset:2px}.philaRadio-error .radio-svg .radio-bg[data-v-90692348]{stroke:var(--Schemes-Error, #cc0406);stroke-width:2}.philaRadio-enabled:hover .radio-svg .radio-bg[data-v-90692348]{stroke:var(--Schemes-Primary, #0f33f5);stroke-width:2}.philaRadio-disabled[data-v-90692348]{cursor:not-allowed;color:var(--Schemes-Surface-Variant, #a2a2a2)}.philaRadio-disabled .radio-svg .radio-bg[data-v-90692348]{stroke:var(--Schemes-Surface-Dim, #cfcfcf);stroke-width:1}.group-container[data-v-f9cddd8f]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-xs, .5rem)}.labels-container[data-v-f9cddd8f]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-2xs, .25rem);align-self:stretch}span[data-v-f9cddd8f]{display:block}.radio-container[data-v-f9cddd8f]{display:flex;padding:var(--spacing-m, 1rem);flex-direction:column;align-items:flex-start;gap:var(--spacing-m, 1rem);align-self:stretch}.radio-container-error[data-v-f9cddd8f]{border-radius:var(--border-radius-m, .75rem)}.error-message[data-v-f9cddd8f]{display:flex;align-items:center;gap:var(--spacing-s, .75rem);align-self:stretch;font-weight:600}

package/dist/index.d.ts

@@ -1,5 +1,25 @@
 import { BaseProps } from '@phila/phila-ui-core';
 export { default as Radio } from './Radio.vue';
+export { default as RadioGroup } from './RadioGroup.vue';
 export interface RadioProps extends BaseProps {
+    name?: string;
+    value: string;
+    text: string;
+    modelValue?: string;
+    disabled?: boolean;
+    error?: boolean;
 }
+export interface RadioGroupProps extends BaseProps {
+    groupLabel: string;
+    description?: string;
+    choices: RadioChoice[];
+    modelValue?: string;
+    error?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+}
+type RadioChoice = {
+    text: string;
+    value: string;
+};
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,UAAW,SAAQ,SAAS;CAE5C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),n=require("@phila/phila-ui-core"),r=e.defineComponent({__name:"Radio",props:{className:{}},setup(o,{emit:a}){const t=o,s=e.computed(()=>n.cn("default-class",t.className));return(c,p)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(s.value)}," Hello world! I am Radio ",2))}}),l=(o,a)=>{const t=o.__vccOpts||o;for(const[s,c]of a)t[s]=c;return t},i=l(r,[["__scopeId","data-v-be223e4b"]]);exports.Radio=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),r=require("@phila/phila-ui-core"),f=["for"],g=["id","name","value","checked","disabled"],b=e.defineComponent({__name:"Radio",props:{name:{},value:{},text:{},modelValue:{},disabled:{type:Boolean},error:{type:Boolean},className:{}},emits:["update:modelValue"],setup(o,{emit:n}){const a=o,l=n,t=r.generateRandomId(),c=e.computed(()=>a.modelValue!==void 0?a.modelValue===a.value:void 0);function d(){l("update:modelValue",a.value)}const i=e.computed(()=>r.cn("philaRadio","has-text-body-default",a.className,!a.disabled&&"philaRadio-enabled",a.disabled&&"philaRadio-disabled",a.error&&"philaRadio-error"));return(u,s)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(i.value),for:e.unref(t)},[s[0]||(s[0]=e.createElementVNode("svg",{class:"radio-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[e.createElementVNode("circle",{class:"radio-bg",cx:"10",cy:"10",r:"9.5"}),e.createElementVNode("circle",{class:"radio-dot",cx:"10",cy:"10",r:"4"})],-1)),e.createTextVNode(" "+e.toDisplayString(a.text)+" ",1),e.createElementVNode("input",{id:e.unref(t),type:"radio",name:a.name,value:a.value,checked:c.value,disabled:a.disabled,onChange:d},null,40,g)],10,f))}}),p=(o,n)=>{const a=o.__vccOpts||o;for(const[l,t]of n)a[l]=t;return a},h=p(b,[["__scopeId","data-v-90692348"]]);var x={prefix:"fas",iconName:"circle-exclamation",icon:[512,512,["exclamation-circle"],"f06a","M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]};const V={class:"labels-container"},_={class:"has-text-body-default"},y={key:0,class:"error-message has-text-error content"},N=e.defineComponent({__name:"RadioGroup",props:{groupLabel:{},description:{},choices:{},modelValue:{},error:{type:Boolean},errorMessage:{},disabled:{type:Boolean},className:{}},emits:["update:modelValue"],setup(o,{emit:n}){const a=o,l=n,t=r.generateRandomId(),c=e.computed(()=>r.cn("group-container",a.className)),d=e.computed(()=>r.cn("radio-container",a.error&&"radio-container-error has-background-error")),i=e.computed(()=>r.cn("has-text-label-default",a.error&&"has-text-error"));function u(s){l("update:modelValue",s)}return(s,B)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(c.value)},[e.createElementVNode("div",V,[e.createElementVNode("span",{class:e.normalizeClass(i.value)},e.toDisplayString(o.groupLabel),3),e.createElementVNode("span",_,e.toDisplayString(o.description),1)]),e.createElementVNode("div",{class:e.normalizeClass(d.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.choices,(m,v)=>(e.openBlock(),e.createBlock(h,{key:e.unref(t)+v,name:e.unref(t),value:m.value,text:m.text,"model-value":a.modelValue,disabled:a.disabled,error:a.error,"onUpdate:modelValue":u},null,8,["name","value","text","model-value","disabled","error"]))),128)),a.error?(e.openBlock(),e.createElementBlock("div",y,[e.createVNode(e.unref(r.Icon),{style:{height:"fit-content",width:"fit-content",padding:"0"},size:"large",inline:"","aria-hidden":"true","icon-definition":e.unref(x)},null,8,["icon-definition"]),e.createTextVNode(" "+e.toDisplayString(o.errorMessage),1)])):e.createCommentVNode("",!0)],2)],2))}}),k=p(N,[["__scopeId","data-v-f9cddd8f"]]);exports.Radio=h;exports.RadioGroup=k;

package/dist/index.mjs

@@ -1,22 +1,137 @@
-import { defineComponent as c, computed as n, createElementBlock as r, openBlock as l, normalizeClass as m } from "vue";
-import { cn as p } from "@phila/phila-ui-core";
-import './index.css';const _ = /* @__PURE__ */ c({
+import { defineComponent as b, computed as i, createElementBlock as c, openBlock as d, unref as r, normalizeClass as u, createElementVNode as o, createTextVNode as _, toDisplayString as m, createCommentVNode as C, Fragment as N, renderList as R, createBlock as B, createVNode as w } from "vue";
+import { generateRandomId as y, cn as p, Icon as z } from "@phila/phila-ui-core";
+import './index.css';const I = ["for"], E = ["id", "name", "value", "checked", "disabled"], L = /* @__PURE__ */ b({
   __name: "Radio",
   props: {
+    name: {},
+    value: {},
+    text: {},
+    modelValue: {},
+    disabled: { type: Boolean },
+    error: { type: Boolean },
     className: {}
   },
-  setup(e, { emit: s }) {
-    const o = e, t = n(() => p("default-class", o.className));
-    return (a, d) => (l(), r("span", {
-      class: m(t.value)
-    }, " Hello world! I am Radio ", 2));
+  emits: ["update:modelValue"],
+  setup(a, { emit: l }) {
+    const e = a, n = l, t = y(), h = i(() => e.modelValue !== void 0 ? e.modelValue === e.value : void 0);
+    function v() {
+      n("update:modelValue", e.value);
+    }
+    const f = i(() => p(
+      "philaRadio",
+      "has-text-body-default",
+      e.className,
+      !e.disabled && "philaRadio-enabled",
+      e.disabled && "philaRadio-disabled",
+      e.error && "philaRadio-error"
+    ));
+    return (g, s) => (d(), c("label", {
+      class: u(f.value),
+      for: r(t)
+    }, [
+      s[0] || (s[0] = o("svg", {
+        class: "radio-svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true"
+      }, [
+        o("circle", {
+          class: "radio-bg",
+          cx: "10",
+          cy: "10",
+          r: "9.5"
+        }),
+        o("circle", {
+          class: "radio-dot",
+          cx: "10",
+          cy: "10",
+          r: "4"
+        })
+      ], -1)),
+      _(" " + m(e.text) + " ", 1),
+      o("input", {
+        id: r(t),
+        type: "radio",
+        name: e.name,
+        value: e.value,
+        checked: h.value,
+        disabled: e.disabled,
+        onChange: v
+      }, null, 40, E)
+    ], 10, I));
   }
-}), i = (e, s) => {
-  const o = e.__vccOpts || e;
-  for (const [t, a] of s)
-    o[t] = a;
-  return o;
-}, v = /* @__PURE__ */ i(_, [["__scopeId", "data-v-be223e4b"]]);
+}), V = (a, l) => {
+  const e = a.__vccOpts || a;
+  for (const [n, t] of l)
+    e[n] = t;
+  return e;
+}, M = /* @__PURE__ */ V(L, [["__scopeId", "data-v-90692348"]]);
+var $ = {
+  prefix: "fas",
+  iconName: "circle-exclamation",
+  icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
+};
+const G = { class: "labels-container" }, U = { class: "has-text-body-default" }, D = {
+  key: 0,
+  class: "error-message has-text-error content"
+}, F = /* @__PURE__ */ b({
+  __name: "RadioGroup",
+  props: {
+    groupLabel: {},
+    description: {},
+    choices: {},
+    modelValue: {},
+    error: { type: Boolean },
+    errorMessage: {},
+    disabled: { type: Boolean },
+    className: {}
+  },
+  emits: ["update:modelValue"],
+  setup(a, { emit: l }) {
+    const e = a, n = l, t = y(), h = i(() => p("group-container", e.className)), v = i(() => p("radio-container", e.error && "radio-container-error has-background-error")), f = i(() => p("has-text-label-default", e.error && "has-text-error"));
+    function g(s) {
+      n("update:modelValue", s);
+    }
+    return (s, O) => (d(), c("div", {
+      class: u(h.value)
+    }, [
+      o("div", G, [
+        o("span", {
+          class: u(f.value)
+        }, m(a.groupLabel), 3),
+        o("span", U, m(a.description), 1)
+      ]),
+      o("div", {
+        class: u(v.value)
+      }, [
+        (d(!0), c(N, null, R(e.choices, (x, k) => (d(), B(M, {
+          key: r(t) + k,
+          name: r(t),
+          value: x.value,
+          text: x.text,
+          "model-value": e.modelValue,
+          disabled: e.disabled,
+          error: e.error,
+          "onUpdate:modelValue": g
+        }, null, 8, ["name", "value", "text", "model-value", "disabled", "error"]))), 128)),
+        e.error ? (d(), c("div", D, [
+          w(r(z), {
+            style: { height: "fit-content", width: "fit-content", padding: "0" },
+            size: "large",
+            inline: "",
+            "aria-hidden": "true",
+            "icon-definition": r($)
+          }, null, 8, ["icon-definition"]),
+          _(" " + m(a.errorMessage), 1)
+        ])) : C("", !0)
+      ], 2)
+    ], 2));
+  }
+}), j = /* @__PURE__ */ V(F, [["__scopeId", "data-v-f9cddd8f"]]);
 export {
-  v as Radio
+  M as Radio,
+  j as RadioGroup
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-radio",
-  "version": "0.0.16-beta.0",
+  "version": "0.1.0-beta.0",
   "type": "module",
   "description": "A radio input component for Phila UI.",
   "main": "./dist/index.js",
@@ -28,7 +28,7 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "2.3.1-beta.0"
+    "@phila/phila-ui-core": "2.3.1"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",