@lax-wp/design-system 0.4.5 → 0.4.6

package/dist/components/button/Button.d.ts

@@ -17,6 +17,10 @@ export interface IButtonProps {
     options?: ItemType[];
     tooltip?: string;
     tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Array of keyboard shortcut keys to display inline in the button (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */
+    shortcuts?: string[];
+    /** Array of keyboard shortcut keys to display in the tooltip (e.g., ['Meta', 'S']). Falls back to shortcuts if not provided. */
+    tooltipShortcuts?: string[];
     theme?: 'light' | 'dark';
 }
 export type IButtonStatus = 'secondary-neutral' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'error-secondary' | 'cancel' | 'no-background' | 'publish' | 'default';

package/dist/index.es.js

@@ -19225,27 +19225,29 @@ const Button = ({
   options: ft,
   tooltip: mt,
   tooltipPlacement: yt = "top",
-  theme: gt = "light"
+  shortcuts: gt,
+  tooltipShortcuts: _t,
+  theme: xt = "light"
 }) => {
-  const _t = useCallback(() => {
+  const Et = useCallback(() => {
     switch (t) {
       case "outline":
-        return bt();
+        return wt();
       case "ghost":
-        return Ct();
+        return St();
       case "dashed":
-        return wt();
+        return jt();
       default:
-        return Et();
+        return Ct();
     }
-  }, [t, e, a, gt]), xt = useCallback(() => {
+  }, [t, e, a, xt]), bt = useCallback(() => {
     switch (t) {
       case "dashed":
-        return St();
+        return It();
       default:
         return {};
     }
-  }, [t, e, a, gt]), Et = useCallback(() => {
+  }, [t, e, a, xt]), Ct = useCallback(() => {
     switch (e) {
       case "primary":
         return "bg-primary-600 text-white focus:border-primary-200 hover:bg-primary-700 disabled:opacity-60";
@@ -19268,7 +19270,7 @@ const Button = ({
       default:
         return "bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-white border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60";
     }
-  }, [e, a, gt]), bt = useCallback(() => {
+  }, [e, a, xt]), wt = useCallback(() => {
     switch (e) {
       case "primary":
         return "text-primary-700 dark:text-primary-600 border-primary-700 border dark:border-primary-600 hover:bg-primary-100 disabled:opacity-60";
@@ -19285,7 +19287,7 @@ const Button = ({
       default:
         return "bg-white dark:bg-black-800 text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 border hover:bg-neutral-100 dark:hover:bg-black-600 disabled:opacity-60";
     }
-  }, [e, gt]), Ct = useCallback(() => {
+  }, [e, xt]), St = useCallback(() => {
     switch (e) {
       case "primary":
         return "text-primary-700 dark:text-primary-600 border border-transparent dark:border-transparent hover:text-primary-700 disabled:opacity-60";
@@ -19300,14 +19302,14 @@ const Button = ({
       default:
         return "text-neutral-900 dark:text-white border border-transparent dark:border-transparent hover:text-[#667085] disabled:opacity-60";
     }
-  }, [e, gt]), wt = useCallback(() => {
+  }, [e, xt]), jt = useCallback(() => {
     switch (e) {
       case "primary":
         return "bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600";
       default:
         return "bg-primary-50 dark:bg-black-700 text-primary-600 dark:text-primary-600 disabled:text-primary-100 hover:bg-primary-100 dark:hover:bg-black-600";
     }
-  }, [e, gt]), St = useCallback(() => {
+  }, [e, xt]), It = useCallback(() => {
     switch (e) {
       case "primary":
         return {
@@ -19319,8 +19321,49 @@ const Button = ({
       default:
         return {};
     }
-  }, [e, gt]), jt = () => /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CgSpinner, { size: 24, className: "inline mr-2 spinner" }) });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: mt, placement: yt, delayShow: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  }, [e, xt]), Dt = useCallback(() => {
+    if (!t || t === "filled")
+      switch (e) {
+        case "primary":
+          return "bg-primary-700 text-primary-100";
+        case "secondary":
+          return "bg-primary-100 text-primary-700 dark:bg-black-700 dark:text-primary-400";
+        case "secondary-neutral":
+          return "bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-black-300";
+        case "error":
+          return "bg-error-700 text-error-100 dark:bg-error-600 dark:text-error-100";
+        case "error-secondary":
+          return "bg-error-200 text-error-700 dark:bg-black-700 dark:text-error-400";
+        case "warning":
+          return "bg-warning-400 text-white dark:bg-warning-700 dark:text-warning-100";
+        case "success":
+          return "bg-success-700 text-success-100";
+        case "publish":
+          return "bg-teal-900 text-teal-200";
+        case "no-background":
+          return "bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400";
+        default:
+          return "bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400";
+      }
+    switch (e) {
+      case "primary":
+      case "secondary":
+        return "bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-400";
+      case "error":
+      case "error-secondary":
+        return "bg-error-100 text-error-700 dark:bg-error-950 dark:text-error-400";
+      case "warning":
+        return "bg-warning-100 text-warning-700 dark:bg-warning-950 dark:text-warning-400";
+      case "success":
+        return "bg-success-100 text-success-700 dark:bg-success-950 dark:text-success-400";
+      default:
+        return "bg-neutral-100 text-neutral-500 dark:bg-black-700 dark:text-neutral-400";
+    }
+  }, [e, t]), zt = useOS(), Bt = useMemo(() => gt?.length ? gt.map((Ht) => {
+    const Ot = SHORTCUT_KEY_MAP[Ht];
+    return Ot ? zt === "macos" ? Ot.macos : Ot.other : Ht;
+  }) : [], [gt, zt]), kt = () => /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CgSpinner, { size: 24, className: "inline mr-2 spinner" }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: mt, placement: yt, shortcuts: _t, delayShow: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
     {
       className: `
@@ -19340,9 +19383,9 @@ const Button = ({
         gap-1.5
         relative
         max-h-[32px]
-         ${_t()}
+         ${Et()}
       `,
-      style: { ...xt() },
+      style: { ...bt() },
       disabled: a || o,
       id: $e,
       onClick: ze,
@@ -19350,9 +19393,17 @@ const Button = ({
       title: Le,
       type: dt,
       children: [
-        o && jt(),
+        o && kt(),
         s,
-        ft?.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: (It) => It.stopPropagation(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Bt.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center gap-0.5 ml-1 flex-shrink-0", children: Bt.map((Ht, Ot) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "kbd",
+          {
+            className: `inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded text-[11px] font-medium leading-none ${Dt()}`,
+            children: Ht
+          },
+          Ot
+        )) }) : null,
+        ft?.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: (Ht) => Ht.stopPropagation(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Dropdown,
           {
             menu: {