@phila/phila-ui-button 2.2.3 → 2.3.0-beta.8

package/README.md

@@ -65,18 +65,18 @@ const handleClick = () => {
 ```vue
 <script setup lang="ts">
 import { PhilaButton } from "@phila/phila-ui-button";
-import { faPencil, faArrowRight } from "@fortawesome/pro-solid-svg-icons";
+import { IconPencil, IconArrowRight } from "@phila/phila-ui-core/icons";
 </script>
 
 <template>
   <!-- Left Icon -->
-  <PhilaButton variant="primary" :icon="faPencil" text="Edit" />
+  <PhilaButton variant="primary" :icon="IconPencil" text="Edit" />
 
   <!-- Right Icon -->
-  <PhilaButton variant="primary" :icon="faArrowRight" icon-right text="Continue" />
+  <PhilaButton variant="primary" :icon="IconArrowRight" icon-right text="Continue" />
 
   <!-- Icon Only -->
-  <PhilaButton variant="primary" icon-only :icon="faPencil" />
+  <PhilaButton variant="primary" icon-only :icon="IconPencil" />
 </template>
 ```
 
@@ -88,8 +88,7 @@ import { faPencil, faArrowRight } from "@fortawesome/pro-solid-svg-icons";
 | `size`      | `"extra-large" \| "large" \| "medium" \| "small" \| "extra-small"` | `"medium"`  | Button size                                                   |
 | `disabled`  | `boolean`                                                          | `false`     | Whether the button is disabled                                |
 | `iconOnly`  | `boolean`                                                          | `false`     | Whether to display only an icon                               |
-| `icon`      | `IconDefinition`                                                   | `undefined` | FontAwesome icon definition                                   |
-| `iconClass` | `string`                                                           | `undefined` | FontAwesome icon class name                                   |
+| `icon`      | `IconComponent`                                                    | `undefined` | Icon component from `@phila/phila-ui-core/icons`              |
 | `iconRight` | `boolean`                                                          | `false`     | Whether to position the icon on the right side                |
 | `text`      | `string`                                                           | `undefined` | Button text (alternative to slot)                             |
 | `className` | `string`                                                           | `undefined` | Additional CSS classes                                        |
@@ -123,7 +122,7 @@ Buttons can also render as links by providing an `href` prop:
 ```vue
 <script setup lang="ts">
 import { PhilaButton } from "@phila/phila-ui-button";
-import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
+import { IconArrowRight } from "@phila/phila-ui-core/icons";
 </script>
 
 <template>
@@ -136,7 +135,7 @@ import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
     target="_blank"
     rel="noopener noreferrer"
     text="Visit Site"
-    :icon="faArrowRight"
+    :icon="IconArrowRight"
     icon-right
   />
 </template>
@@ -201,13 +200,9 @@ Note: Overflow text will not be truncated with ellipsis unless the button text i
 
 ### Text + Icon
 
-Icons require manual installation of FontAwesome.
-
 ```vue
 <button class="phila-button phila-button--primary">
-  <span class="icon">
-    <i class="fas fa-search"></i>
-  </span>
+  <i class="phila-icon phila-icon-magnifying-glass" aria-hidden="true"></i>
   <span>Button text</span>
 </button>
 ```
@@ -217,9 +212,7 @@ Icons require manual installation of FontAwesome.
 ```vue
 <button class="phila-button phila-button--primary">
   <span>Button text</span>
-  <span class="icon">
-    <i class="fas fa-search"></i>
-  </span>
+  <i class="phila-icon phila-icon-magnifying-glass" aria-hidden="true"></i>
 </button>
 ```
 
@@ -228,10 +221,8 @@ Icons require manual installation of FontAwesome.
 Icon buttons require the `icon-button` class. The default size is "extra-large". For other sizes, include the appropriate size class. To use the "standard" variant, replace `phila-button--primary|secondary|destructive` with `icon-button--standard`.
 
 ```vue
-<button class="phila-button phila-button--primary icon-button">
-  <span class="icon">
-    <i class="fas fa-search"></i>
-  </span>
+<button class="phila-button phila-button--primary icon-button" aria-label="Search">
+  <i class="phila-icon phila-icon-magnifying-glass" aria-hidden="true"></i>
 </button>
 ```
 

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("@phila/phila-ui-core"),d=["disabled"],r=e.defineComponent({inheritAttrs:!1,__name:"PhlButton",props:{href:{},to:{},target:{},rel:{},disabled:{type:Boolean,default:!1},clickTarget:{},variant:{default:"primary"},size:{default:"medium"},iconOnly:{type:Boolean,default:!1},iconRight:{type:Boolean},text:{},className:{},iconDefinition:{},iconClass:{},src:{},svgRaw:{}},setup(n){const t=n,i=a=>"href"in a&&a.href!==void 0||"to"in a&&a.to!==void 0,s=e.computed(()=>o.cn("phila-button",`phila-button--${t.variant}`,t.size&&`is-${t.size}`,t.iconOnly&&"icon-button",t.iconOnly&&t.variant==="standard"&&"icon-button--standard",t.className)),c=e.computed(()=>i(t)?"to"in t&&t.to!==void 0?{to:t.to,disabled:t.disabled,className:s.value}:{href:t.href,target:t.target,rel:t.rel,disabled:t.disabled,className:s.value}:{}),l=e.computed(()=>({iconDefinition:t.iconDefinition,iconClass:t.iconClass,src:t.src,iconRight:t.iconRight,iconOnly:t.iconOnly,text:t.text,size:t.size}));return(a,m)=>i(t)?(e.openBlock(),e.createBlock(e.unref(o.BaseLink),e.mergeProps({key:0},{...c.value,...a.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(o.ActionContent),e.normalizeProps(e.guardReactiveProps(l.value)),{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)]),_:3},16)):(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:1,type:"button",disabled:t.disabled,class:s.value},a.$attrs),[e.createVNode(e.unref(o.ActionContent),e.normalizeProps(e.guardReactiveProps(l.value)),{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)],16,d))}});var u={prefix:"fas",iconName:"xmark",icon:[384,512,[128473,10005,10006,10060,215,"close","multiply","remove","times"],"f00d","M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]};const f=e.defineComponent({inheritAttrs:!1,__name:"CloseButton",props:{className:{},disabled:{type:Boolean,default:!1},size:{default:"small"},ariaLabel:{default:"Close"}},setup(n){return(t,i)=>(e.openBlock(),e.createBlock(r,e.mergeProps({variant:"standard","icon-definition":e.unref(u),"icon-only":"",disabled:n.disabled,size:n.size,"class-name":e.unref(o.cn)("phila-close-button",n.className),"aria-label":n.ariaLabel},t.$attrs),null,16,["icon-definition","disabled","size","class-name","aria-label"]))}});exports.CloseButton=f;exports.PhilaButton=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("@phila/phila-ui-core"),d=require("@phila/phila-ui-core/icons"),u=["disabled"],r=e.defineComponent({inheritAttrs:!1,__name:"PhlButton",props:{href:{},to:{},target:{},rel:{},disabled:{type:Boolean,default:!1},clickTarget:{},variant:{default:"primary"},size:{default:"medium"},iconOnly:{type:Boolean,default:!1},iconRight:{type:Boolean},text:{},className:{},icon:{},src:{},svgRaw:{}},setup(n){const t=n,s=a=>"href"in a&&a.href!==void 0||"to"in a&&a.to!==void 0,l=e.computed(()=>o.cn("phila-button",`phila-button--${t.variant}`,t.size&&`is-${t.size}`,t.iconOnly&&"icon-button",t.iconOnly&&t.variant==="standard"&&"icon-button--standard",t.className)),c=e.computed(()=>s(t)?"to"in t&&t.to!==void 0?{to:t.to,disabled:t.disabled,className:l.value}:{href:t.href,target:t.target,rel:t.rel,disabled:t.disabled,className:l.value}:{}),i=e.computed(()=>({icon:t.icon,src:t.src,iconRight:t.iconRight,iconOnly:t.iconOnly,text:t.text,size:t.size}));return(a,b)=>s(t)?(e.openBlock(),e.createBlock(e.unref(o.BaseLink),e.mergeProps({key:0},{...c.value,...a.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(o.ActionContent),e.normalizeProps(e.guardReactiveProps(i.value)),{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)]),_:3},16)):(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:1,type:"button",disabled:t.disabled,class:l.value},a.$attrs),[e.createVNode(e.unref(o.ActionContent),e.normalizeProps(e.guardReactiveProps(i.value)),{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)],16,u))}}),f=e.defineComponent({inheritAttrs:!1,__name:"CloseButton",props:{className:{},disabled:{type:Boolean,default:!1},size:{default:"small"},ariaLabel:{default:"Close"}},setup(n){return(t,s)=>(e.openBlock(),e.createBlock(r,e.mergeProps({variant:"standard",icon:e.unref(d.IconClose),"icon-only":"",disabled:n.disabled,size:n.size,"class-name":e.unref(o.cn)("phila-close-button",n.className),"aria-label":n.ariaLabel},t.$attrs),null,16,["icon","disabled","size","class-name","aria-label"]))}});exports.CloseButton=f;exports.PhilaButton=r;

package/dist/index.mjs

@@ -1,6 +1,7 @@
-import { defineComponent as y, computed as o, createBlock as B, createElementBlock as z, openBlock as r, unref as n, mergeProps as c, withCtx as l, createVNode as u, normalizeProps as f, guardReactiveProps as m, renderSlot as b, createTextVNode as h, toDisplayString as p } from "vue";
+import { defineComponent as y, computed as l, createBlock as B, createElementBlock as k, openBlock as r, unref as n, mergeProps as c, withCtx as i, createVNode as u, normalizeProps as f, guardReactiveProps as m, renderSlot as b, createTextVNode as h, toDisplayString as p } from "vue";
 import { cn as g, BaseLink as C, ActionContent as v } from "@phila/phila-ui-core";
-const L = ["disabled"], N = /* @__PURE__ */ y({
+import { IconClose as N } from "@phila/phila-ui-core/icons";
+const $ = ["disabled"], P = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "PhlButton",
   props: {
@@ -16,33 +17,31 @@ const L = ["disabled"], N = /* @__PURE__ */ y({
     iconRight: { type: Boolean },
     text: {},
     className: {},
-    iconDefinition: {},
-    iconClass: {},
+    icon: {},
     src: {},
     svgRaw: {}
   },
   setup(a) {
-    const e = a, i = (t) => "href" in t && t.href !== void 0 || "to" in t && t.to !== void 0, s = o(() => g(
+    const e = a, s = (t) => "href" in t && t.href !== void 0 || "to" in t && t.to !== void 0, o = l(() => g(
       "phila-button",
       `phila-button--${e.variant}`,
       e.size && `is-${e.size}`,
       e.iconOnly && "icon-button",
       e.iconOnly && e.variant === "standard" && "icon-button--standard",
       e.className
-    )), k = o(() => i(e) ? "to" in e && e.to !== void 0 ? {
+    )), z = l(() => s(e) ? "to" in e && e.to !== void 0 ? {
       to: e.to,
       disabled: e.disabled,
-      className: s.value
+      className: o.value
     } : {
       href: e.href,
       target: e.target,
       rel: e.rel,
       disabled: e.disabled,
-      className: s.value
-    } : {}), d = o(
+      className: o.value
+    } : {}), d = l(
       () => ({
-        iconDefinition: e.iconDefinition,
-        iconClass: e.iconClass,
+        icon: e.icon,
         src: e.src,
         iconRight: e.iconRight,
         iconOnly: e.iconOnly,
@@ -50,10 +49,10 @@ const L = ["disabled"], N = /* @__PURE__ */ y({
         size: e.size
       })
     );
-    return (t, x) => i(e) ? (r(), B(n(C), c({ key: 0 }, { ...k.value, ...t.$attrs }, { role: "button" }), {
-      default: l(() => [
+    return (t, _) => s(e) ? (r(), B(n(C), c({ key: 0 }, { ...z.value, ...t.$attrs }, { role: "button" }), {
+      default: i(() => [
         u(n(v), f(m(d.value)), {
-          default: l(() => [
+          default: i(() => [
             b(t.$slots, "default", {}, () => [
               h(p(e.text), 1)
             ])
@@ -62,29 +61,23 @@ const L = ["disabled"], N = /* @__PURE__ */ y({
         }, 16)
       ]),
       _: 3
-    }, 16)) : (r(), z("button", c({
+    }, 16)) : (r(), k("button", c({
       key: 1,
       type: "button",
       disabled: e.disabled,
-      class: s.value
+      class: o.value
     }, t.$attrs), [
       u(n(v), f(m(d.value)), {
-        default: l(() => [
+        default: i(() => [
           b(t.$slots, "default", {}, () => [
             h(p(e.text), 1)
           ])
         ]),
         _: 3
       }, 16)
-    ], 16, L));
+    ], 16, $));
   }
-});
-var $ = {
-  prefix: "fas",
-  iconName: "xmark",
-  icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
-};
-const O = /* @__PURE__ */ y({
+}), R = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "CloseButton",
   props: {
@@ -94,18 +87,18 @@ const O = /* @__PURE__ */ y({
     ariaLabel: { default: "Close" }
   },
   setup(a) {
-    return (e, i) => (r(), B(N, c({
+    return (e, s) => (r(), B(P, c({
       variant: "standard",
-      "icon-definition": n($),
+      icon: n(N),
       "icon-only": "",
       disabled: a.disabled,
       size: a.size,
       "class-name": n(g)("phila-close-button", a.className),
       "aria-label": a.ariaLabel
-    }, e.$attrs), null, 16, ["icon-definition", "disabled", "size", "class-name", "aria-label"]));
+    }, e.$attrs), null, 16, ["icon", "disabled", "size", "class-name", "aria-label"]));
   }
 });
 export {
-  O as CloseButton,
-  N as PhilaButton
+  R as CloseButton,
+  P as PhilaButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-button",
-  "version": "2.2.3",
+  "version": "2.3.0-beta.8",
   "type": "module",
   "description": "Button component for Phila UI library",
   "main": "./dist/index.js",
@@ -30,7 +30,7 @@
     "@fortawesome/vue-fontawesome": "^3.1.2"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "2.4.0"
+    "@phila/phila-ui-core": "3.0.0-beta.7"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",